/* Absolute roles: nested .muted/.qt never multiply their parent's font size. */
:root {
  --ui-note:12px; --ui-label:13px; --ui-body:14px; --ui-heading:15px;
  --ui-title:18px; --ui-display:22px; --hud-left-bottom:100px;
}
:root[data-ui-text="small"] {
  --ui-note:11px; --ui-label:12px; --ui-body:13px; --ui-heading:14px;
  --ui-title:16px; --ui-display:20px;
}
:root[data-ui-text="large"] {
  --ui-note:14px; --ui-label:15px; --ui-body:16px; --ui-heading:17px;
  --ui-title:20px; --ui-display:24px;
}
html,body{font-size:var(--ui-body)}
button,input,select,textarea,summary{min-height:44px}
input[type=checkbox],input[type=radio]{min-height:0}
.guildcheck,.guildadmin-check,.art-check,.art-layers label{min-height:44px}
button,summary{overflow-wrap:anywhere}
button{max-width:100%}
input,select,textarea{max-width:100%;min-width:0}
/* CSS pixel geometry, not zoom/transform: keep world coordinates unchanged. */
#pbody,#admbody,.support-card,#start .box,#link .box{overflow-wrap:anywhere}
#start{overflow-y:auto;overflow-x:hidden;align-items:start;overscroll-behavior:contain}
#start .wrap{margin-block:auto;overflow-wrap:anywhere;padding-bottom:calc(26px + env(safe-area-inset-bottom,0px))}
#start .credit{position:static;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 9px;margin-top:12px}
#start .credit a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin-left:0;max-width:100%}
#stars{pointer-events:none}
@media(max-height:760px){
  #start .wrap{padding:18px 16px calc(20px + env(safe-area-inset-bottom,0px))}
  #start .tag{line-height:1.5;margin-bottom:12px}
  #start .tag b.hook{line-height:1.5;margin-bottom:6px}
  #start .logo .en{letter-spacing:.3em;text-indent:.3em;margin-top:6px}
  #start .rule{margin:10px auto}
}
.kv{gap:8px;flex-wrap:wrap;align-items:baseline}
.kv>*{min-width:0;max-width:100%;overflow-wrap:anywhere}
.sec h3{gap:6px;flex-wrap:wrap}
.item .qt,.item button,.row button{white-space:normal;overflow-wrap:anywhere}
.item .qt{min-width:0;max-width:100%}
.row{min-width:0;flex-wrap:wrap}
.row>*{min-width:0;max-width:100%}
#pbody .trade-stack-head output{white-space:normal;overflow-wrap:anywhere;max-width:55%}
#pbody .racepot b,.guildshop-wallet strong{overflow-wrap:anywhere}
.guildsummary,.guildadmin-summary{min-width:0}
.guildsummary>*,.guildadmin-summary>*{min-width:0;overflow-wrap:anywhere}
#admbody .admrow,#pbody .admrow{flex-wrap:wrap}
#admbody .admrow>*{min-width:0;max-width:100%;overflow-wrap:anywhere}
#pbody details.lore>summary{min-height:44px;line-height:1.45}
.readability-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.readability-options button{min-height:44px;padding:9px 3px}
.readability-options button.on{color:var(--gold);border-color:var(--gold);background:#2a2114}
#ui-text-current{display:block;color:var(--faint);font-size:var(--ui-note);margin-top:5px}
.help-quick{line-height:1.65;margin-bottom:14px}
.help-quick p{margin:6px 0}
#wclock{white-space:normal;overflow-wrap:anywhere;letter-spacing:0}
#stat .g{display:block;overflow-wrap:anywhere}
#stat .g b{font-size:var(--ui-title);letter-spacing:0}
#stat{line-height:1.5}
#zonelbl{overflow-wrap:anywhere;letter-spacing:0}
.bar{min-height:calc(var(--ui-note) + 6px)}
.bar span,#cast .bar span{display:grid;place-items:center;line-height:1.2}
#feedtools{flex-wrap:wrap}
#feedtools button,#feedopen,#feedpeek{min-height:44px}
#feedpeek{left:92px}
#skills{max-width:calc(100vw - 16px)}
#skills .sk{height:auto;min-height:64px;min-width:0;flex:0 1 72px;width:72px;
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 28px auto auto;
  grid-template-areas:"key rank" "icon icon" "name name" "auto auto";gap:2px;padding:4px}
#skills .sk-key,#skills .sk-rank,#skills .sk-auto{position:static;line-height:1.2}
#skills .sk-key{grid-area:key;justify-self:start}
#skills .sk-rank{grid-area:rank;justify-self:end}
#skills .sk-icon{grid-area:icon;justify-self:center;width:28px;height:28px}
#skills .sk-name{grid-area:name;white-space:normal;overflow-wrap:anywhere;line-height:1.2}
#skills .sk-auto{grid-area:auto;justify-self:center;padding:1px 3px}
#pclose{min-width:44px;width:44px;height:44px;flex-basis:44px}
#support-close{min-width:44px;width:44px;height:44px}
.lottery-fanfare>button{width:44px;height:44px}
#admbody .admfield input,#admbody .admfield select{min-height:44px}
#tabs button,.guildtabs button,.guildrow footer button{min-height:44px}
#pbody .dollmid .qt{white-space:nowrap;font-size:var(--ui-label)}
#pbody .dolltrait{text-align:center;color:var(--dim);font-size:var(--ui-label);line-height:1.5;margin:-2px 0 9px}
.invsummary b{white-space:normal;overflow-wrap:anywhere}
/* Five 72px skill keys and the 430px dock need separate rows through laptop widths. */
@media(min-width:761px) and (max-width:1360px){
  #skills{bottom:calc(var(--barh) + 18px)}
  #feed{width:min(30vw,300px)}
}
@media(max-width:760px){
  #topleft{width:calc(100vw - 124px);max-width:calc(100vw - 124px)}
  #ann{top:calc(var(--hud-left-bottom) + 7px);right:112px}
  #actions>button{white-space:normal;overflow-wrap:anywhere;line-height:1.3;padding:7px 2px}
  #actions .cnt{display:block;margin:2px 0 0}
  #skills{width:calc(100vw - 16px);gap:4px}
  #skills .sk{flex-basis:64px;width:64px;height:auto}
  #feedpeek{left:92px}
  #feedhide{flex-basis:60px!important}
  #tabs button{overflow-wrap:anywhere;line-height:1.25;min-height:44px}
  #tabs button::before{min-height:18px;height:auto}
  #pbody .trade-money-controls{grid-template-columns:minmax(68px,1fr) repeat(3,minmax(44px,auto))}
  #pbody .trade-stack-controls{grid-template-columns:minmax(68px,1fr) repeat(3,minmax(44px,auto))}
  .skilldash{grid-template-columns:repeat(2,minmax(0,1fr))}
  .skilldash small{white-space:normal;text-align:center}
}
/* The short landscape layout in index.html also applies below 761px. Keep the
   portrait readability overrides from widening the status card across combat,
   and keep the skill keys clear of the right-side objective card. */
@media(max-width:1000px) and (max-height:520px) and (min-aspect-ratio:6/5){
  #topleft{width:auto;max-width:min(220px,28vw)}
  #ann{top:8px;right:auto}
  #skills{width:max-content;max-width:calc(100vw - 16px)}
  #skills .sk{flex-basis:60px;width:60px}
  #feedpeek{left:66px}
}

/* Combat stays in the centre. Inspectable information belongs at the edges;
   touch targets stay at least 44px without four rows of text in each skill. */
#map-status{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
/* 묶음 AB — 구역·PK 상태는 판 하나(배지)다. 판 없이 월드 위에 두 줄로 쓰여 성벽·장식과 겹쳐 읽히지 않았다 */
#map-status{flex-direction:row;align-items:center;gap:8px;padding:4px 8px;border:1px solid var(--line);border-radius:6px;background:#0e0c0ad9;box-shadow:0 2px 8px #0008}
#map-status #zonelbl{width:auto;text-shadow:none;text-align:left}
#view-options{display:none;position:relative;pointer-events:auto}
#view-options summary{display:grid;place-items:center;list-style:none;width:44px;
  border:1px solid var(--line);border-radius:6px;background:#171a1ee8;color:var(--ink);cursor:pointer}
#view-options summary::-webkit-details-marker{display:none}
#view-options #zoom-controls{position:absolute;right:0;top:calc(100% + 4px);z-index:12;
  display:grid;grid-template-columns:repeat(2,44px);padding:4px;border:1px solid var(--line);background:#131619}
@media(max-width:760px), (max-width:1000px) and (max-height:520px){
  #view-options{display:block}
  #mini-zoom{flex-direction:row;align-items:flex-start;gap:5px}
  canvas#mini{width:64px;height:64px}
  #rightstack{width:128px;gap:4px}
  #map-status{flex-direction:row;align-items:center;gap:6px;max-width:128px;padding:3px 5px;box-sizing:border-box}
  #wring{width:26px;height:26px}
  #wring i{inset:3px}
  #zonelbl{width:auto;flex:1 1 auto;min-width:0;font-size:var(--ui-note);line-height:1.25}
  #topleft{width:auto;max-width:calc(100vw - 154px);padding:5px 7px}
  #stat{margin-top:3px;padding-top:3px}
  #stat .g b{font-size:var(--ui-heading)}
  #crimeself,#goalline{width:128px;padding:0 6px;border-width:1px;border-radius:5px}
  /* R77 remainder(DESIGN 14.357) — the same 128px column as the two siblings above and #rightstack.
     Left at index.html's 150px they reached 12px under #topleft (max-width 100vw-154px) at 375~390px. */
  #debuffself,#siegehud{width:128px;padding:5px 6px;border-width:1px;border-radius:5px}
  #crimeself::before,#crimeself::after,#goalline::before,#goalline::after{display:none}
  #goalline .goal-toggle{padding:0;min-height:44px;font-size:var(--ui-note)}
  #crimeself summary{min-height:44px;font-size:var(--ui-note)}
  #crimeself .crime-content{padding-bottom:6px}
  #goalline.expanded{width:min(240px,calc(100vw - 20px))}
  #goal-content{max-height:30dvh;overflow-y:auto;overscroll-behavior:contain}
  #skills{gap:5px;bottom:calc(var(--barh) + 6px)}
  /* 묶음 UI2b(DESIGN 14.439) — 폰 스킬 칸은 아이콘 + 짧은 이름. 전에는 여기서 `.sk-name` 까지 숨겨, index.html 이 넣은
     이름 규칙(묶음 AB)을 뒤에서 이겼다 — 검사기는 문자열만 봐서 통과였다. 폰 스킬 칸 규칙은 이 한 자리다(check-client 가 우선순위로 잰다). */
  #skills .sk{display:flex;flex-direction:column;justify-content:center;gap:2px;flex:0 0 56px;width:56px;height:58px;min-height:52px;
    padding:4px 2px;border-radius:9px;background:#151a1de8}
  #skills .sk-icon{width:24px;height:24px}
  #skills .sk-key,#skills .sk-rank,#skills .sk-auto{display:none}
  #skills .sk-name{display:block;max-width:52px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    font-size:var(--ui-note);line-height:1.15;color:var(--dim)}
  #skills .sk.auto::after{content:'';position:absolute;right:5px;bottom:5px;
    width:5px;height:5px;border-radius:50%;background:#a9e6ae}
  #skills .sk i:empty{display:none}
  #skills .sk.cd{color:#d4b66a}
  #skills .sk i{background:#0a09076e;font-size:var(--ui-title)}
  #actions{gap:4px;padding:4px 6px calc(4px + env(safe-area-inset-bottom));border-top-width:1px}
  #actions>button{padding:3px 2px;min-height:48px;border-radius:6px}
  #actions .cnt{display:inline;margin-left:3px;font-size:var(--ui-note)}
  #ann{top:calc(var(--hud-left-bottom) + 6px);left:8px;right:148px;text-align:left}
  #ann div{-webkit-line-clamp:1;padding:3px 5px;font-size:var(--ui-note)}
}
@media(max-width:1000px) and (max-height:520px) and (min-aspect-ratio:6/5){
  #topleft{max-width:min(210px,30vw)}
  #actions{left:8px;right:auto;bottom:6px;width:min(44vw,360px);padding:0;
    background:transparent;border:0;gap:4px}
  #xpline{bottom:calc(var(--barh) + 7px)}
  #skills{left:auto;right:8px;transform:none;bottom:6px;width:max-content;gap:4px}
  #skills .sk{width:54px;height:54px;min-height:52px;flex-basis:54px}
  #action-more{left:0;right:auto;width:min(430px,calc(100vw - 16px))}
  #feedopen{bottom:calc(var(--barh) + 14px)}
  #feedpeek{bottom:calc(var(--barh) + 14px);left:76px;width:min(160px,24vw)}
  #ann{top:calc(var(--hud-left-bottom) + 6px);left:8px;right:auto;transform:none;width:min(240px,34vw)}
  #toasts{top:auto;bottom:calc(var(--barh) + 64px);width:min(180px,26vw)}
  #crimeself:has(details[open]),#goalline.expanded{position:fixed;right:8px;top:8px;
    width:240px;z-index:15;background:#201d1af5;max-height:calc(100dvh - 76px);overflow-y:auto}
  #crimeself .crime-content,#goalline.expanded #goal-content{max-height:calc(100dvh - 130px)}
}