/* Text size + high contrast (roadmap item 87, docs: file tools/docs/readability.md).
   src/readability.js sets html[data-ui-text="large|xlarge"] + --ui-zoom (1.15 / 1.3, at most 1.15 on screens <= 480 wide or
   <= 430 high) and html[data-ui-contrast="high"]. The default sets neither, so nothing here applies and the game looks as
   before. Only overrides live here: no rule in another file is edited. Never zoom #game, canvas#world, #terrain, #joystick,
   the touch .hud-utility buttons or the touch skill wheel (body.hud-navy #adventure-hotbar, its size is item 84's).

   HUD_ROOTS: the HUD parts that grow as one piece (CSS zoom keeps their own layout; offsets grow with them).
   A new HUD panel joins by adding its selector to this group (and to the contrast group below). */
html[data-ui-text] body #toast,
html[data-ui-text] body #target-frame,
html[data-ui-text] body #quest-tracker,
html[data-ui-text] body #notify-stack,
html[data-ui-text] body #party-frame,
html[data-ui-text] body #party-invite,
html[data-ui-text] body #respawn-panel,
html[data-ui-text] body #city-npc-prompt,
html[data-ui-text] body #warp-open,
html[data-ui-text] body #building-door-prompt,
html[data-ui-text] body #player-guild-invite,
html[data-ui-text] body #game-context-menu{zoom:var(--ui-zoom,1)}
/* The character frame and the minimap share the top row with the menu: they grow as far as the row has room
   (--ui-hud-zoom: full from 1700 px wide, at most 1.15 from 1400, at most 1.1 below; nothing at 760 px and narrower nor on the touch HUD body.hud-navy, whose top row is full). */
html[data-ui-text]{--ui-hud-zoom:var(--ui-zoom,1)}
@media (max-width:1699px){html[data-ui-text]{--ui-hud-zoom:min(var(--ui-zoom,1),1.15)}}
@media (max-width:1399px){html[data-ui-text]{--ui-hud-zoom:min(var(--ui-zoom,1),1.1)}}
@media (min-width:761px){
 html[data-ui-text] body:not(.hud-navy) #game>.character,
 html[data-ui-text] body:not(.hud-navy) #game>.map-panel{zoom:var(--ui-hud-zoom,1)}
}
/* The top menu keeps its spacing (it sits between the frame and the minimap): only its labels grow, on wide screens. */
@media (min-width:1700px){
 html[data-ui-text] body:not(.hud-navy) #game>#adventure-navigation .adventure-nav-button>span{zoom:var(--ui-zoom,1)}
}
/* When the character frame would reach the menu (any text size: bug hunt 2026-10-11 M8, the centred menu covered the
   HP/MP/stamina bars below ~1500 px), src/readability.js measures the row and moves the menu right by --ui-nav-shift,
   as far as the minimap leaves room, and scales it by --ui-nav-scale when the gap is narrower than the menu. The
   translate and scale properties add to the menu's own centring transform; origin 0 0 keeps the scaled menu centred
   on the same line (translateX(-50%) runs first) and its top edge in place. Unset = the menu exactly as before. */
body:not(.hud-navy) #game>#adventure-navigation{translate:var(--ui-nav-shift,0px) 0;scale:var(--ui-nav-scale,1);transform-origin:0 0}
/* The skill bar grows on wide desktop screens only (the touch wheel is item 84's: never zoomed). */
@media (min-width:1100px){
 html[data-ui-text] body:not(.hud-navy) #game>#adventure-hotbar{zoom:var(--ui-zoom,1)}
}
@media (min-width:1660px){
 html[data-ui-text] body #game>.adventure-control-hint{zoom:var(--ui-zoom,1)}
}
/* The chat box keeps its own size (item 84 will let players resize it): only what is inside grows. */
html[data-ui-text] body #chat-box>*{zoom:var(--ui-zoom,1)}

/* Windows: the whole window grows; viewport units inside a zoomed box grow too, so the window's own limits are redrawn
   against the real screen and anything taller scrolls (!important: some windows set their limits with two ids). */
html[data-ui-text] body :is(#settings-dialog,#connection-dialog,#shop-dialog,#city-npc-dialog,#school-dialog,#pet-dialog,#wardrobe-dialog,#craft-dialog,#dungeon-dialog,#friends-dialog,#mail-dialog,#rankings-dialog,#social-blocks-dialog,#story-journal,#player-inspect-dialog,#report-dialog,#trade-dialog,#player-guild-dialog,#party-invite-dialog,#emote-panel,#skills-dialog)[open]{
 zoom:var(--ui-zoom,1);max-width:calc(96dvw / var(--ui-zoom,1))!important;max-height:calc(96dvh / var(--ui-zoom,1))!important;overflow:auto!important}
/* The bag/character window is laid out between the top menu and the skill bar: it keeps its place and size and only
   its content grows (each column scrolls when it no longer fits). */
html[data-ui-text] body #equipment-dialog[open]>*{zoom:var(--ui-zoom,1)}
/* ---- settings rows of this item (picture tab) ---- */
#settings-dialog .settings-readability .settings-choice{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
#settings-dialog .settings-readability .settings-choice button{min-height:38px}
#settings-dialog .settings-readability-cap{display:block;color:#8a4b12}
#settings-dialog .settings-readability-cap[hidden]{display:none}
#settings-dialog #settings-contrast{min-height:38px}

/* ---- high contrast: solid text, outlined text over the world, opaque panels; hues that mean something stay ---- */
html[data-ui-contrast="high"] body #toast,
html[data-ui-contrast="high"] body #online-status,
html[data-ui-contrast="high"] body #game>.character,
html[data-ui-contrast="high"] body #game>.map-panel,
html[data-ui-contrast="high"] body #game>#adventure-navigation,
html[data-ui-contrast="high"] body #game>#adventure-hotbar,
html[data-ui-contrast="high"] body #game>.adventure-control-hint,
html[data-ui-contrast="high"] body #target-frame,
html[data-ui-contrast="high"] body #quest-tracker,
html[data-ui-contrast="high"] body #notify-stack,
html[data-ui-contrast="high"] body #party-frame{
 text-shadow:1px 0 0 #0b1a12,-1px 0 0 #0b1a12,0 1px 0 #0b1a12,0 -1px 0 #0b1a12}
html[data-ui-contrast="high"] body #game>.adventure-control-hint{color:#fffbe6;background:rgba(18,32,24,.92);border-radius:8px;padding:2px 8px}
html[data-ui-contrast="high"] body #online-status{background:rgba(16,30,24,.94);color:#fffbe6}
html[data-ui-contrast="high"] body #toast{background:rgba(16,30,24,.95);color:#fffbe6}
html[data-ui-contrast="high"] body #quest-tracker{background:rgba(16,30,24,.93)}
html[data-ui-contrast="high"] body #target-frame{background-color:rgba(20,34,27,.96)}
html[data-ui-contrast="high"] body #game>#adventure-navigation :is(span,small,b,strong){color:#fffbe6;opacity:1}
html[data-ui-contrast="high"] body #game>.map-panel :is(span,small,b,strong,p){color:#fffbe6;opacity:1}
/* Light parchment windows: faint notes become dark brown (contrast >= 4.5:1 on the cream background). */
html[data-ui-contrast="high"] body #settings-dialog :is(small,p,.settings-density),
html[data-ui-contrast="high"] body #city-npc-dialog :is(small,p),
html[data-ui-contrast="high"] body #connection-dialog :is(small,p){color:#3a2a16;opacity:1}
html[data-ui-contrast="high"] body #settings-dialog strong{color:#22170b}
/* Focused buttons get a clear light-yellow ring. */
html[data-ui-contrast="high"] body :is(#game,dialog) :is(button,[role="tab"],input,select,a,summary):focus-visible{outline:2px solid #fff3a8;outline-offset:2px;box-shadow:0 0 0 4px #0b1a12}