/* Evertrail Idle client · the fullscreen desktop HUD (views/hud.mjs; director, 23 September 2026).
   Above a phone's width the world fills the screen and the client floats over it: see-through dark panels with a
   soft blur and gold edges, serif titles and Bahnschrift numbers, after the approved mockup. The mockup was drawn at
   1600×900, where 1rem is 13.33px: its pixels are written here in rem, so the HUD scales with the screen like the rest
   of the client. The phone keeps responsive.css. Every rule sits behind the phone's breakpoint and the `is-hud` class
   main.mjs puts on the page in the same frame it draws the HUD, so markup and layout never disagree. Nothing here
   loops: the working cue is the medal's ring in the skill's own colour, and it only fills with real progress. */
@media (min-width: 761px) {
  .is-hud {
    --hud-pad: .9rem;              /* 12px from every edge */
    --hud-glass: rgba(8, 13, 22, .74);
    --hud-edge: rgba(242, 198, 106, .24);
    --hud-blur: blur(.75rem);
    --hud-shadow: 0 .6rem 1.95rem rgba(0, 0, 0, .34);
    --hud-radius: 1.05rem;
    --hud-rail-w: 3.75rem;         /* 50px */
    --hud-chat-w: 35.25rem;        /* 470px */
    --hud-task-w: 31.5rem;         /* 420px */
    --hud-panel-w: 26.25rem;       /* 350px */
    --foot-left: 50%;              /* the room between the chat and the dock, measured by main.mjs */
    --foot-right: 50%;
  }

  /* ---------------------------------------------------------------- The shell turns into a HUD over the stage
     The client covers the screen but takes no pointer: only its panels do, so a press or the wheel anywhere else
     reaches the world under it (the wheel zooms its camera). */
  .is-hud .ia-client { display: block; padding: 0; pointer-events: none; }
  .is-hud .center, .is-hud .stage-host { display: contents; }
  .is-hud .region-tutorial, .is-hud .world-bar { display: none; }
  .is-hud .hud-glass { background: var(--hud-glass); border: 1px solid var(--hud-edge); box-shadow: var(--hud-shadow); -webkit-backdrop-filter: var(--hud-blur); backdrop-filter: var(--hud-blur); }
  /* Low detail keeps the panels solid instead of blurring the world under them every frame. */
  .is-hud.graphics-low .hud-glass, .is-hud.graphics-low .region-chat .chat { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(8, 13, 22, .9); }

  /* ---------------------------------------------------------------- The stage: the world, full screen */
  .is-hud .world-layer { position: absolute; inset: 0; z-index: 0; }
  .is-hud .world-panel { position: absolute; inset: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
  .is-hud .world-panel::before { display: none; }
  .is-hud .world-host { position: absolute; inset: 0; background: transparent; pointer-events: auto; }
  .is-hud .world-host::after { display: none; }
  /* The stage's two frames (client/world.mjs, client/stage.mjs): the town and a world. The one on screen is on top.
     A walk-out mounts its world only when the walk has played; the town, stilled, then fades out over it in 250 ms (a
     cut when motion is reduced) and parks hidden and paused behind it, or goes. A world just mounted is the worlds' own
     ink (worlds/game.css --ink) until its page paints its loading card, never a glimpse of the painted backdrop. */
  .is-hud .world-frame { z-index: 1; background: #12171a; }
  .is-hud .world-frame.is-shown { z-index: 2; }
  .is-hud .world-frame.is-fading { z-index: 3; opacity: 0; pointer-events: none; transition: opacity .25s linear; }
  .is-hud .world-frame.is-parked { z-index: 0; visibility: hidden; pointer-events: none; }
  .is-hud.reduce-motion .world-frame.is-fading { transition: none; }

  /* ---------------------------------------------------------------- Top: you, what you are doing, the purse */
  .is-hud .region-top { position: absolute; inset: 0 0 auto 0; z-index: 7; height: 0; margin: 0; }
  .is-hud .region-top > * { pointer-events: auto; }
  .is-hud .hud-chip { position: absolute; left: var(--hud-pad); top: var(--hud-pad); display: flex; align-items: center; gap: .75rem; max-width: calc(50% - var(--hud-task-w) / 2 - 2 * var(--hud-pad)); padding: .525rem 1.2rem .525rem .525rem; border-radius: 2.25rem; color: inherit; text-align: left; transition: border-color .15s; }
  .is-hud .hud-chip:hover { border-color: var(--edge-strong); }
  .is-hud .hud-chip .portrait { width: 3.15rem; height: 3.15rem; background: radial-gradient(circle at 50% 30%, #243652, #0f1827 75%); box-shadow: 0 0 0 .11rem #c9953f; }
  .is-hud .hud-chip-copy { display: grid; gap: .08rem; min-width: 0; }
  .is-hud .hud-chip-copy strong { font: 400 1.35rem/1.15 var(--font-display); letter-spacing: .02em; color: var(--gold-0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .is-hud .hud-chip-copy small { font-size: .9rem; color: var(--text-2); white-space: nowrap; }
  .is-hud .hud-chip-copy small b { font-weight: 400; color: var(--gold-1); }

  /* Centred on the screen, as the mockup has it; on a screen too narrow for that it stays between you and the purse
     (--hud-chip-r and --hud-right-l, measured by main.mjs), narrower if it must, and never under either. */
  .is-hud .hud-task { --lo: calc(var(--hud-chip-r, 0px) + .75rem); --hi: calc(var(--hud-right-l, 100vw) - .75rem); position: absolute; top: var(--hud-pad); left: clamp(var(--lo), calc(50% - var(--hud-task-w) / 2), calc(var(--hi) - var(--hud-task-w))); width: min(var(--hud-task-w), calc(var(--hi) - var(--lo))); display: grid; gap: .675rem; padding: .825rem 1.05rem .9rem; border-radius: var(--hud-radius); border-color: color-mix(in srgb, var(--skill) 45%, transparent); }
  .is-hud .hud-task.is-idle { border-color: var(--hud-edge); }
  .is-hud .hud-task-head { display: flex; align-items: center; gap: .9rem; min-width: 0; }
  .is-hud .hud-task .medal { --size: 2.7rem; }
  .is-hud .hud-task-copy { flex: 1; display: grid; gap: .1rem; min-width: 0; }
  .is-hud .hud-task-copy strong { font: 400 1.35rem/1.15 var(--font-display); color: var(--gold-0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .is-hud .hud-task-copy small { font-size: .9rem; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .is-hud .hud-task.is-idle .hud-task-copy strong { color: var(--text-2); }
  /* Why it stopped (views/stops.mjs): the activity's colour stays, the line reads warm, the fix is one gold button. */
  .is-hud .hud-task.is-stopped .hud-task-copy strong { color: #ffd0b3; }
  .is-hud .hud-task.is-stopped .medal .ia-emblem { filter: saturate(.6) brightness(.85) drop-shadow(0 .08rem .08rem rgba(0, 0, 0, .55)); }
  .is-hud .hud-task .btn-fix { flex: none; max-width: 12rem; }
  .is-hud .hud-task-btn { flex: none; display: grid; place-items: center; width: 2.55rem; height: 2.55rem; border-radius: .675rem; border: 1px solid var(--hud-edge); background: rgba(242, 198, 106, .08); color: var(--text-2); transition: border-color .15s, color .15s; }
  .is-hud .hud-task-btn:hover { border-color: var(--edge-strong); color: var(--gold-1); }
  .is-hud .hud-task-btn.is-stop { border-color: rgba(255, 93, 87, .5); background: rgba(255, 93, 87, .14); color: #ff8a84; }
  .is-hud .hud-task-btn.is-stop:hover { border-color: #ff8a84; color: #ffb0ab; }
  .is-hud .hud-task-btn .ia-glyph { width: 1.2rem; height: 1.2rem; }
  /* Who else is here: the count alone, the names on its tooltip, so the task's own name keeps the room. */
  .is-hud .hud-task .chip-people { flex: none; padding: .12rem .45rem; }
  .is-hud .hud-task .chip-people > span { font-size: 0; }
  .is-hud .hud-task .chip-people b { font-size: .8rem; }
  /* The others the world does not draw (docs/CROWD_CONTRACT.md §2): "+N here" in words, still. */
  .is-hud .hud-task .chip-people.is-rest > span { font-size: .72rem; color: var(--text-2); }
  .is-hud .hud-level { display: flex; align-items: center; gap: .75rem; font-size: .9rem; color: var(--text-2); white-space: nowrap; }
  .is-hud .hud-level b { font-weight: 400; color: var(--skill); }
  .is-hud .hud-level .bar { flex: 1; height: .45rem; background: rgba(255, 255, 255, .1); box-shadow: none; }
  .is-hud .hud-level .bar > i { background: var(--skill); box-shadow: none; }
  .is-hud .hud-level small { font-size: .9rem; color: var(--text-3); }
  /* The stage's hint (client/stage.mjs): one still line right under the task card, as wide as it, while a walk that a
     click on the view skips is under way. It takes no pointer, so the click reaches the view under it. */
  .is-hud .hud-hint { position: absolute; top: calc(var(--hud-task-b, 7.5rem) + .45rem); left: var(--hud-task-l, calc(50% - var(--hud-task-w) / 2)); width: var(--hud-task-width, var(--hud-task-w)); margin: 0; padding: .45rem .9rem; border-radius: .75rem; font-size: .9rem; line-height: 1.3; text-align: center; color: var(--text-2); pointer-events: none; }

  .is-hud .hud-right { position: absolute; right: var(--hud-pad); top: var(--hud-pad); display: flex; align-items: center; gap: .6rem; }
  .is-hud .hud-pill { display: inline-flex; align-items: center; gap: .6rem; height: 3rem; padding: 0 1.05rem 0 .6rem; border-radius: 1.5rem; box-shadow: none; color: var(--text-1); font-size: 1.05rem; white-space: nowrap; transition: border-color .15s, background .15s; }
  .is-hud .hud-pill .ia-emblem { width: 1.8rem; height: 1.8rem; }
  .is-hud .hud-pill b { font: 400 1.125rem var(--font-num); }
  .is-hud .hud-pill.is-gold b { color: var(--gold-1); }
  .is-hud .hud-pill b.is-warn { color: var(--ember); }
  .is-hud .hud-pill small { font-size: .9rem; color: var(--text-3); }
  .is-hud .hud-pill .sr-badge { min-width: 1.2rem; height: 1.2rem; font-size: .68rem; margin-right: -.3rem; }
  .is-hud .hud-round { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; box-shadow: none; color: var(--text-2); transition: border-color .15s, color .15s; }
  .is-hud .hud-round .ia-glyph { width: 1.35rem; height: 1.35rem; }
  .is-hud button.hud-pill:hover, .is-hud .hud-round:hover { border-color: var(--edge-strong); color: var(--gold-1); }
  .is-hud .hud-pill.is-open, .is-hud .hud-round[aria-expanded="true"] { border-color: rgba(242, 198, 106, .55); background: rgba(40, 32, 16, .78); }

  /* ---------------------------------------------------------------- Left edge: the skill rail */
  .is-hud .region-left { position: absolute; left: var(--hud-pad); top: 5.7rem; z-index: 7; display: block; min-height: 0; }
  .is-hud .hud-rail { pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: .2rem; width: var(--hud-rail-w); max-height: calc(100vh - 5.7rem - var(--hud-pad)); padding: .45rem .375rem; border-radius: var(--hud-radius); background: rgba(8, 13, 22, .7); border-color: rgba(242, 198, 106, .2); box-shadow: none; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
  .is-hud .hud-rail::-webkit-scrollbar { display: none; }
  .is-hud .hud-rail-group { display: flex; flex-direction: column; align-items: center; gap: .2rem; }
  .is-hud .hud-rail-rule { flex: none; display: block; width: 2.25rem; height: 1px; margin: .2rem 0; background: rgba(242, 198, 106, .22); }
  .is-hud .hud-rail-btn { --skill: var(--gold-2); position: relative; flex: none; display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: .75rem; border: 1px solid transparent; color: inherit; text-decoration: none; transition: background .15s, border-color .15s; }
  .is-hud .hud-rail-btn .ia-emblem { width: 2rem; height: 2rem; }
  .is-hud .hud-rail-btn > b { position: absolute; right: .06rem; bottom: -.04rem; font: 400 .75rem/1 var(--font-num); color: var(--text-1); text-shadow: 0 1px 2px #000, 0 0 3px #000; }
  .is-hud .hud-rail-btn:hover { background: color-mix(in srgb, var(--skill) 14%, transparent); border-color: rgba(255, 255, 255, .08); }
  /* The skill being trained, in its own colour and still. */
  .is-hud .hud-rail-btn.is-working { background: color-mix(in srgb, var(--skill) 18%, transparent); border-color: var(--skill); }
  /* The skill whose window is open: a mark on the rail's edge, as the phone's rail marks the page it shows. */
  .is-hud .hud-rail-btn.is-open::before { content: ""; position: absolute; left: -.33rem; top: 24%; bottom: 24%; width: .18rem; border-radius: 1rem; background: var(--skill); }
  .is-hud .hud-rail-btn.is-open:not(.is-working) { background: color-mix(in srgb, var(--skill) 10%, transparent); border-color: rgba(255, 255, 255, .1); }
  .is-hud .hud-rail-btn.is-soon { opacity: .55; }
  .is-hud .hud-rail-btn.is-soon .ia-emblem { filter: grayscale(.85) brightness(.8); }
  .is-hud .hud-rail-btn .sr-badge, .is-hud .hud-rail-btn .rail-gift { position: absolute; right: -.28rem; top: -.28rem; min-width: 1.1rem; height: 1.1rem; padding: 0 .25rem; font-size: .62rem; }
  .is-hud .hud-rail-btn.is-place .ia-emblem { width: 1.95rem; height: 1.95rem; }

  /* ---------------------------------------------------------------- Bottom left: the chat, see-through */
  .is-hud .region-chat { position: absolute; left: calc(var(--hud-pad) + var(--hud-rail-w) + .75rem); bottom: var(--hud-pad); z-index: 3; width: var(--hud-chat-w); min-height: 0; }
  .is-hud .region-chat > * { pointer-events: auto; }
  .is-hud .region-chat .chat { height: 16.05rem; background: rgba(5, 8, 14, .58); border: 1px solid rgba(242, 198, 106, .18); border-radius: var(--hud-radius); box-shadow: none; -webkit-backdrop-filter: blur(.6rem); backdrop-filter: blur(.6rem); transition: none; }
  .is-hud .region-chat .chat::before { display: none; }
  .is-hud .region-chat .chat-head { gap: .95rem; padding: .45rem .5rem 0 1.05rem; border-bottom: 0; }
  .is-hud .region-chat .chat-tab { padding: .3rem 0 .4rem; font-size: .9375rem; font-weight: 400; color: var(--text-3); background: none; border-radius: 0; }
  .is-hud .region-chat .chat-tab:hover { color: var(--text-1); }
  .is-hud .region-chat .chat-tab[aria-pressed="true"] { color: var(--gold-1); background: none; }
  .is-hud .region-chat .chat-tab[aria-pressed="true"]::after { left: 0; right: 0; bottom: 0; height: 2px; box-shadow: none; }
  .is-hud .region-chat .chat-tab-place { max-width: 6.5rem; font-weight: 400; }
  .is-hud .region-chat .chat-unread { top: .2rem; right: -.45rem; }
  .is-hud .region-chat .chat-head > .btn-icon { margin-left: auto; --tone-edge: transparent; background: none; box-shadow: none; color: var(--text-3); }
  .is-hud .region-chat .chat-head > .btn-icon:hover { color: var(--gold-1); }
  .is-hud .region-chat .chat-log { padding: .4rem 1.05rem .45rem; font-size: .9375rem; line-height: 1.45; }
  .is-hud .region-chat .chat-line time { font-size: .84rem; }
  .is-hud .region-chat .chat-input { margin: 0 .75rem .75rem; padding: .35rem .6rem; border-radius: .675rem; background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .08); }
  .is-hud .region-chat .chat-input input { font-size: .975rem; }
  .is-hud .region-chat .chat-input input::placeholder { color: var(--text-3); }
  .is-hud .hud-chat-pill { position: relative; display: inline-flex; align-items: center; gap: .6rem; height: 3rem; padding: 0 1.05rem 0 .75rem; border-radius: 1.5rem; box-shadow: none; color: var(--text-1); font-size: .975rem; transition: border-color .15s; }
  .is-hud .hud-chat-pill:hover { border-color: var(--edge-strong); }
  .is-hud .hud-chat-pill .ia-emblem { width: 1.65rem; height: 1.65rem; }
  .is-hud .hud-chat-pill .chat-unread { top: .3rem; right: .45rem; }

  /* ---------------------------------------------------------------- Bottom centre: the controls of what you do
     The world's own bar (views/parts.mjs worldHud) stands in the room between the chat and the dock. It is centred
     on the screen while it fits, and slides toward the chat once it is wider: the two spacers around it start from
     the difference between the room's two sides (--foot-left and --foot-right, measured by main.mjs). */
  .is-hud .world-foot { position: absolute; z-index: 2; left: var(--foot-left); right: var(--foot-right); bottom: var(--hud-pad); display: flex; align-items: flex-end; pointer-events: none; }
  .is-hud .world-foot::before { content: ""; flex: 1 1000 max(0px, calc(var(--foot-right) - var(--foot-left))); }
  .is-hud .world-foot::after { content: ""; flex: 1 1000 max(0px, calc(var(--foot-left) - var(--foot-right))); }
  .is-hud .world-foot > .hudbar { pointer-events: auto; flex: 0 0 auto; min-width: 0; max-width: 100%; min-height: 4.35rem; align-items: center; gap: .45rem .6rem; padding: .45rem .6rem .45rem .75rem; border: 1px solid rgba(242, 198, 106, .22); border-radius: var(--hud-radius); background: rgba(8, 13, 22, .76); box-shadow: var(--hud-shadow); -webkit-backdrop-filter: var(--hud-blur); backdrop-filter: var(--hud-blur); }
  .is-hud.graphics-low .world-foot > .hudbar { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(8, 13, 22, .92); }
  .is-hud .world-foot .hud-cell { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .07); }
  .is-hud .world-foot .hud-now { border-color: color-mix(in srgb, var(--skill, var(--gold-2)) 30%, transparent); }
  .is-hud .world-foot .hud-pop { left: 0; right: 0; bottom: calc(100% + .45rem); border-radius: var(--hud-radius); background: rgba(8, 13, 22, .95); }
  /* One row where it fits: every reading and control of the phone's bar, set tighter. A stance needs no caption
     over its three buttons, and Upgrade keeps only its Store emblem, its title and label saying where it leads. A
     fight carries more than one row of the mockup's room holds with the chat open (Eat, the zone, the tally and
     Upgrade besides the mockup's food, stance, Auto Eat, drops, loot and Retreat), so its bar takes a second row
     there rather than run under the dock, and one row again when the chat is folded. */
  .is-hud .world-foot .hud-group { gap: .4rem; }
  .is-hud .world-foot .hud-group.is-now { min-width: 0; }
  .is-hud .world-foot .hud-cell { padding: .25rem .55rem; }
  .is-hud .world-foot .hud-now { column-gap: .5rem; }
  .is-hud .world-foot .hud-group.is-pay > .hud-cell { flex: 0 1 auto; min-width: 6.4rem; max-width: 13rem; }
  .is-hud .world-foot .hud-food { min-width: 0; max-width: 12rem; }
  .is-hud .world-foot .hud-cell.is-stance > small, .is-hud .world-foot .hud-eat small { display: none; }
  .is-hud .world-foot .hud-cell.is-stance { padding: .2rem; background: none; border-color: transparent; }
  .is-hud .world-foot .hud-cell.is-stance .segmented { margin: 0; }
  .is-hud .world-foot .hud-cell.is-stance .segmented button { padding: .38rem .7rem; font-size: .88rem; }
  .is-hud .world-foot .hud-eat { padding: .3rem .6rem; font-size: .9rem; }
  /* Words a little larger than the phone's bar, nearer the mockup's. */
  .is-hud .world-foot .hud-now-copy strong, .is-hud .world-foot .hud-food-copy strong { font-size: 1.02rem; }
  .is-hud .world-foot .hud-now-copy small, .is-hud .world-foot .hud-food-copy small { font-size: .78rem; }
  .is-hud .world-foot .hud-cell > small.t-caps { font-size: .6rem; }
  .is-hud .world-foot .hud-cell > b { font-size: 1.08rem; }
  .is-hud .world-foot .hud-cell > em { font-size: .72rem; }
  .is-hud .world-foot .hud-group.is-acts { gap: .35rem; }
  .is-hud .world-foot .hud-group.is-acts .btn { min-height: 2.55rem; padding: .3rem .7rem; font-size: .9rem; }
  /* The mockup's buttons on the glass: gold-edged ghosts for the panels and the page, a red one for the way out. The
     Store's gold Upgrade stays solid, the one thing on the bar that is a purchase. */
  .is-hud .world-foot .hud-group.is-acts .btn:not(.btn-gold):not(.btn-danger), .is-hud .hudbar.is-hall .btn { --tone-top: rgba(242, 198, 106, .12); --tone-mid: rgba(242, 198, 106, .09); --tone-bottom: rgba(242, 198, 106, .07); --tone-edge: rgba(242, 198, 106, .42); --tone-text: var(--gold-1); box-shadow: none; text-shadow: none; }
  .is-hud .world-foot .hud-group.is-acts .btn.is-active { --tone-top: rgba(242, 198, 106, .24); --tone-mid: rgba(242, 198, 106, .18); --tone-bottom: rgba(242, 198, 106, .14); --tone-edge: var(--gold-2); }
  .is-hud .world-foot .hud-group.is-acts .btn-danger { --tone-top: rgba(255, 93, 87, .2); --tone-mid: rgba(255, 93, 87, .15); --tone-bottom: rgba(255, 93, 87, .12); --tone-edge: rgba(255, 93, 87, .5); --tone-text: #ff8a84; box-shadow: none; text-shadow: none; }
  .is-hud .world-foot .hud-group.is-acts .btn-gold[data-action="store-open"] { gap: 0; padding: .3rem .5rem; font-size: 0; }
  .is-hud .world-foot .hud-group.is-acts .btn-gold[data-action="store-open"] .ia-emblem { width: 1.35rem; height: 1.35rem; }
  /* The clan hall's bar: back to the Clan page, whose hall it is, who stands in it. */
  .is-hud .hudbar.is-hall { display: flex; align-items: center; gap: .75rem; }

  /* ---------------------------------------------------------------- Bottom right: the dock */
  .is-hud .region-right { position: absolute; right: var(--hud-pad); bottom: var(--hud-pad); z-index: 3; display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; min-height: 0; }
  .is-hud .region-right > * { pointer-events: auto; }
  /* The tabs span the panel's width, so a panel opened above them never reaches past their edge into the bar. */
  .is-hud .hud-tabs { display: flex; gap: .3rem; width: var(--hud-panel-w); padding: .375rem; border-radius: var(--hud-radius); background: rgba(8, 13, 22, .78); box-shadow: none; }
  .is-hud .hud-tab { position: relative; flex: 1 1 0; min-width: 0; display: grid; justify-items: center; align-content: center; gap: .225rem; height: 4.05rem; border-radius: .75rem; border: 1px solid transparent; color: var(--text-2); font-size: .825rem; transition: background .15s, border-color .15s; }
  .is-hud .hud-tab .ia-emblem { width: 1.8rem; height: 1.8rem; }
  .is-hud .hud-tab:hover { background: rgba(255, 255, 255, .05); }
  .is-hud .hud-tab.is-open { background: rgba(242, 198, 106, .16); border-color: rgba(242, 198, 106, .55); color: var(--gold-1); }
  .is-hud .hud-tab-dot { position: absolute; top: .45rem; right: 1rem; width: .45rem; height: .45rem; border-radius: 50%; background: var(--gold-1); box-shadow: 0 0 .4rem var(--gold-2); }

  /* A tab's panel, above the tabs. It scrolls in itself when a tall loadout needs more than the screen gives. */
  .is-hud .hud-panel { position: relative; display: grid; align-content: start; gap: .75rem; width: var(--hud-panel-w); max-height: calc(100vh - 11.6rem); overflow-x: hidden; overflow-y: auto; padding: 1.05rem; border-radius: var(--hud-radius); background: rgba(8, 13, 22, .82); border-color: rgba(242, 198, 106, .26); box-shadow: 0 .75rem 2.25rem rgba(0, 0, 0, .4); -webkit-backdrop-filter: blur(.9rem); backdrop-filter: blur(.9rem); }
  .is-hud .hud-panel-head { display: flex; align-items: center; gap: .6rem; min-width: 0; }
  .is-hud .hud-panel-head > .ia-emblem { width: 1.65rem; height: 1.65rem; }
  .is-hud .hud-panel-head h3 { flex: 1; min-width: 0; margin: 0; font: 400 1.275rem/1.2 var(--font-display); color: var(--gold-0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .is-hud .hud-panel-head .meta { font-size: .9rem; color: var(--text-3); white-space: nowrap; }
  .is-hud .hud-panel-head .meta b { font: 400 .95rem var(--font-num); color: var(--text-2); }
  .is-hud .hud-panel-head .btn-icon { flex: none; }
  .is-hud .hud-note { margin: 0; font-size: .9rem; color: var(--text-3); }
  .is-hud .hud-link { justify-self: start; display: inline-flex; align-items: center; gap: .3rem; font-size: .975rem; color: var(--gold-1); }
  .is-hud .hud-link:hover { color: var(--gold-0); }
  .is-hud .hud-link .ia-glyph { width: .9rem; height: .9rem; }

  /* Gear: the Power, the hit points and the nine slots, three to a row. Still, like the old panel. A piece sits in
     its slot with room around it, three fifths of the slot's height, and an empty slot's outline a little smaller (a
     playtester, 24 September 2026: the pieces filled their slots edge to edge, "it eyes weird"). */
  .is-hud .hud-panel .gear-stats { align-items: flex-end; }
  .is-hud .hud-panel .gear-power { font: 400 1.95rem/1 var(--font-num); color: var(--gold-0); }
  .is-hud .hud-panel .gear-power small { margin-top: .3rem; font: 400 .79rem var(--font-ui); letter-spacing: .09em; color: var(--gold-3); white-space: nowrap; }
  /* The panel's one column never runs past its frame: beside the longest special ("Ranged · Piercing Shot") the hit
     points' bar gives up some of its length, where it used to push the slots and the numbers out of the panel. */
  .is-hud .hud-panel.is-gear { grid-template-columns: minmax(0, 1fr); }
  .is-hud .hud-panel .gear-hp { flex: 0 1 auto; min-width: 0; gap: .45rem; font-size: .8rem; }
  .is-hud .hud-panel .gear-hp b { white-space: nowrap; }
  .is-hud .hud-panel .gear-hp .eq-hp-bar { width: 5.2rem; min-width: 2.4rem; height: .45rem; }
  .is-hud .hud-panel .gear-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
  .is-hud .hud-panel .gear-slots .eq-slot, .is-hud .hud-panel .gear-slots .eq-slot:nth-child(6) { grid-column: auto; aspect-ratio: auto; width: auto; height: 6.3rem; border-radius: .75rem; }
  .is-hud .hud-panel .gear-slots .eq-slot > img { width: 3.8rem; height: 3.8rem; }
  /* The mockup's glass cells; a piece's grade keeps its edge, its gem and its glow. */
  .is-hud .hud-panel .gear-slots .well { background: rgba(255, 255, 255, .05); }
  .is-hud .hud-panel .gear-slots .well:not([class*=" r-"]) { border-color: rgba(255, 255, 255, .08); }
  .is-hud .hud-panel .gear-slots .eq-slot.is-ghost > img { width: 3.5rem; height: 3.5rem; }
  /* Loadout: the food, the quiver and the pouch, the potions and the supplies. */
  .is-hud .hud-panel .eq-quiver, .is-hud .hud-panel .eq-ammo { margin-top: 0; }
  .is-hud .hud-panel .lo-section { margin: 0; }
  /* The vault's first stacks, five to a row. */
  .is-hud .hud-bank-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .45rem; }
  /* Every skill at a glance, four to a row. */
  .is-hud .hud-skills { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; }
  .is-hud .hud-skill { --skill: var(--gold-2); display: flex; align-items: center; justify-content: center; gap: .45rem; height: 3.3rem; border-radius: .675rem; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .05); color: var(--text-1); transition: background .15s, border-color .15s; }
  .is-hud .hud-skill .ia-emblem { width: 1.95rem; height: 1.95rem; }
  .is-hud .hud-skill b { font: 400 1.05rem var(--font-num); }
  .is-hud .hud-skill:hover { border-color: color-mix(in srgb, var(--skill) 55%, transparent); }
  .is-hud .hud-skill.is-working { border-color: var(--skill); background: color-mix(in srgb, var(--skill) 18%, transparent); }
  .is-hud .hud-skill.is-open { border-color: color-mix(in srgb, var(--skill) 70%, transparent); }
  .is-hud .hud-skill.is-soon { opacity: .55; }
  .is-hud .hud-total { font-size: .9rem; color: var(--text-3); }
  .is-hud .hud-total b { font-weight: 400; color: var(--gold-1); }
  .is-hud .hud-total:hover { color: var(--text-1); }
  /* Goals, or the tutorial that holds its place: the panel's own rows, without the plaque or the fold. A reward
     waiting is a still gilded edge here, not a breathing one. */
  .is-hud .hud-panel.tutorial { gap: .6rem; }
  .is-hud .hud-panel.tutorial::after { border-radius: var(--hud-radius); }
  .is-hud .hud-panel.tutorial.is-ready { animation: none; border-color: color-mix(in srgb, var(--gold-2) 70%, transparent); box-shadow: 0 .75rem 2.25rem rgba(0, 0, 0, .4), 0 0 1rem rgba(242, 198, 106, .28); }
  .is-hud .hud-panel.tutorial .tut-step { padding-right: 0; }

  /* ---------------------------------------------------------------- A page is a window over the dimmed world */
  .is-hud .window-scrim { position: absolute; inset: 0; z-index: 5; pointer-events: auto; background: rgba(3, 5, 9, .62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: fade-in .2s ease-out; }
  .is-hud.graphics-low .window-scrim { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(3, 5, 9, .74); }
  /* "The bank and such may be made a bit bigger now" (the director, 23 September 2026): the window takes the screen
     under the top strip and beside the rail, with the same margin on both sides and a strip of the world below. */
  .is-hud { --win-side: calc(var(--hud-pad) + var(--hud-rail-w) + 1.8rem); }
  .is-hud .stage { inset: 8.4rem var(--win-side) 2.1rem; z-index: 6; pointer-events: auto; overflow: hidden; background: rgba(8, 13, 22, .94); border: 1px solid rgba(242, 198, 106, .3); border-radius: 1.35rem; box-shadow: 0 1.8rem 4.5rem rgba(0, 0, 0, .55); }
  .is-hud .stage > .page { inset: 1.5rem 1.8rem 1.6rem; }
  /* The page keeps its own header; the close button stands beside it in the window's corner. */
  .is-hud .stage > .page > :first-child { margin-right: 3.9rem; }
  .is-hud .window-close { position: absolute; z-index: 5; top: 1.7rem; right: 1.8rem; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: .9rem; border: 1px solid rgba(242, 198, 106, .3); background: rgba(255, 255, 255, .03); color: var(--text-2); transition: border-color .15s, color .15s; }
  .is-hud .window-close:hover { border-color: var(--edge-strong); color: var(--gold-1); }
  .is-hud .window-close .ia-glyph { width: 1.35rem; height: 1.35rem; }
  /* While a window is open the chat, the activity's bar and the dock make way for it; you, the task card, the
     purse and the rail stay above the dim. */
  .is-hud.has-window .region-chat, .is-hud.has-window .region-right, .is-hud.has-window .world-foot { display: none; }
  /* No bar in a window shimmers: a live bar only fills. */
  .is-hud .stage .bar > i::after { display: none; animation: none; }

  /* ---------------------------------------------------------------- A page in the HUD's language (views/window.mjs)
     After the approved Window board: a clean head (the emblem, the serif title, the level and its progress line),
     headings in small gold caps, calm glass cards and a glass side panel, gold-edged ghost buttons. */
  .is-hud .win-page { display: flex; flex-direction: column; gap: 1.2rem; padding-top: 0; }
  .is-hud .win-head { flex: none; display: flex; align-items: center; gap: 1.05rem; min-width: 0; }
  .is-hud .win-emblem { flex: none; display: grid; place-items: center; width: 3.45rem; height: 3.45rem; }
  .is-hud .win-emblem .ia-emblem { width: 100%; height: 100%; }
  .is-hud .win-title { flex: 0 1 auto; display: grid; gap: .45rem; min-width: 0; }
  .is-hud .win-name { display: flex; align-items: baseline; gap: .9rem; min-width: 0; }
  .is-hud .win-name h1 { margin: 0; font: 400 1.95rem/1.05 var(--font-display); color: var(--gold-0); white-space: nowrap; }
  .is-hud .win-level { font: 400 1.2rem var(--font-num); color: var(--skill, var(--gold-2)); }
  .is-hud .win-name .t-caps { font-size: .75rem; font-weight: 400; letter-spacing: .12em; color: var(--gold-3); white-space: nowrap; }
  .is-hud .win-progress { display: flex; align-items: center; gap: .75rem; min-width: 0; }
  .is-hud .win-progress .bar { flex: none; width: 31.5rem; height: .45rem; background: rgba(255, 255, 255, .1); box-shadow: none; }
  .is-hud .win-progress .bar > i { background: var(--fill); box-shadow: none; }
  .is-hud .win-progress small { font-size: .9rem; color: var(--text-3); white-space: nowrap; }
  .is-hud .win-progress small b { font-weight: 400; color: var(--text-2); }
  .is-hud .win-aside { flex: 1 1 0; min-width: 0; display: grid; justify-items: end; gap: .3rem; text-align: right; }
  .is-hud .win-blurb { margin: 0; max-width: 34rem; font-size: .9rem; line-height: 1.4; color: var(--text-3); }
  .is-hud .win-aside .hero-next { max-width: 34rem; font-size: .86rem; }
  .is-hud .win-aside .hero-next span { white-space: normal; }
  /* Another activity keeps going while you browse: its own colour, still, and the way back to it. */
  .is-hud .win-elsewhere { display: flex; align-items: center; gap: .6rem; font-size: .86rem; color: var(--text-2); }
  .is-hud .win-elsewhere b { font-weight: 600; color: var(--text-1); }
  .is-hud .win-caps { flex: none; margin: 0; font: 400 .79rem var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-3); }

  /* The body: the page's main column and its side panel. */
  .is-hud .win-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 27rem; gap: 1.35rem; }
  .is-hud .win-main { display: flex; flex-direction: column; gap: .8rem; min-width: 0; min-height: 0; }
  /* Five across where the window has the room, as on the board: the ten trees in two rows. */
  .is-hud .win-grid { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(13.2rem, 1fr)); align-content: start; gap: .9rem; padding: 0 .25rem .25rem 0; }

  /* A card: the level in gold caps, the name in serif, the place under it, the thing's own art in its corner and its
     way in at the foot. Chosen, it takes a gold edge; worked, the skill's own colour; locked, it steps back. The card
     is one button for choosing; the foot's button starts it straight away. It keeps the `res-card` name, because the
     tutorial's Show me rings a card by it (tutorial-actions.mjs). */
  .is-hud .win-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto minmax(0, 1fr); align-items: start; gap: .15rem .6rem; min-height: 11.1rem; padding: 1.05rem; text-align: left; border-radius: .9rem; border: 1px solid rgba(255, 255, 255, .09); background: rgba(255, 255, 255, .04); box-shadow: none; transition: border-color .15s, background .15s; }
  .is-hud .win-card:hover { border-color: rgba(242, 198, 106, .32); background: rgba(255, 255, 255, .06); }
  .is-hud .win-card.is-selected { border-color: rgba(242, 198, 106, .55); background: rgba(242, 198, 106, .07); box-shadow: none; }
  .is-hud .win-card.is-running { border-color: color-mix(in srgb, var(--skill) 70%, transparent); background: color-mix(in srgb, var(--skill) 12%, transparent); }
  .is-hud .win-card.is-running.is-selected { box-shadow: inset 0 0 0 1px rgba(242, 198, 106, .35); }
  .is-hud .win-card.is-running::after { display: none; }
  .is-hud .win-card.is-locked, .is-hud .win-card.is-planned { opacity: .72; background: rgba(255, 255, 255, .03); }
  .is-hud .win-pick { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
  .is-hud .win-pick:focus-visible { outline: 2px solid var(--gold-1); outline-offset: -2px; }
  .is-hud .win-card-copy { display: grid; gap: .12rem; min-width: 0; pointer-events: none; }
  .is-hud .win-card-copy .t-caps { font-size: .79rem; font-weight: 400; letter-spacing: .09em; color: var(--gold-3); }
  .is-hud .win-card-copy strong { font: 400 1.275rem/1.2 var(--font-display); color: var(--gold-0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* The place under the name has the card's whole width, the art beside the name. */
  .is-hud .win-card-where { grid-column: 1 / -1; font-size: .94rem; line-height: 1.3; color: var(--text-3); pointer-events: none; }
  .is-hud .win-card-where b { font-weight: 400; color: var(--text-2); }
  .is-hud .win-card-art { width: 3rem; height: 3rem; object-fit: contain; pointer-events: none; filter: drop-shadow(0 .2rem .3rem rgba(0, 0, 0, .6)); }
  .is-hud .win-card-art.is-emblem { display: grid; place-items: center; }
  .is-hud .win-card-art .ia-emblem { width: 80%; height: 80%; }
  .is-hud .win-card.is-locked .win-card-art { filter: grayscale(.7) brightness(.7); }
  .is-hud .win-card-foot { grid-column: 1 / -1; align-self: end; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: .5rem; min-height: 2.55rem; margin-top: .45rem; }
  .is-hud .win-card-foot > * { position: relative; z-index: 2; }
  /* Who else works here: the phone card's people badge, at the foot's left. */
  .is-hud .win-card .card-people { right: auto; bottom: auto; margin-right: auto; }
  /* A level band still to come: the promise, drawn quietly. */
  .is-hud .win-grid .res-card.is-future { min-height: 11.1rem; border-radius: .9rem; border: 1px dashed rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .02); box-shadow: none; color: var(--text-3); font-size: .94rem; font-weight: 400; text-shadow: none; }

  /* The foot's ways in: a gold-edged ghost to start, the skill's colour while it works, the level a lock waits for. */
  .is-hud .win-go { display: inline-flex; align-items: center; gap: .4rem; height: 2.55rem; padding: 0 1.05rem; border-radius: .675rem; border: 1px solid rgba(242, 198, 106, .45); background: rgba(242, 198, 106, .12); color: var(--gold-1); font-size: .975rem; white-space: nowrap; transition: background .15s, border-color .15s; }
  .is-hud .win-go:hover:not(:disabled) { background: rgba(242, 198, 106, .2); border-color: var(--gold-2); }
  .is-hud .win-go:disabled { opacity: .55; }
  .is-hud .win-go .ia-glyph, .is-hud .win-go .ia-emblem { width: 1.05rem; height: 1.05rem; }
  .is-hud .win-state { display: inline-flex; align-items: center; gap: .45rem; height: 2.55rem; padding: 0 .3rem; font-size: .94rem; color: var(--text-3); white-space: nowrap; }
  .is-hud .win-state .ia-glyph { width: 1.05rem; height: 1.05rem; }
  .is-hud .win-state.is-working { padding: 0 .9rem; border-radius: .675rem; background: color-mix(in srgb, var(--skill) 20%, transparent); color: color-mix(in srgb, var(--skill) 55%, #fff); }
  .is-hud .win-state.is-working i { width: .52rem; height: .52rem; border-radius: 50%; background: var(--skill); }

  /* The side panel: glass, the chosen thing's picture, name and figures, and its action at the foot. */
  .is-hud .win-side { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 0; border-radius: 1.05rem; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .035); overflow: hidden; }
  .is-hud .win-side > .win-caps { padding: 1.05rem 1.05rem 0; }
  .is-hud .win-side .detail-scroll { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-auto-rows: max-content; align-content: start; gap: .8rem; padding: 1.05rem; }
  .is-hud .win-side .detail-hero { border-radius: .75rem; box-shadow: none; }
  .is-hud .win-side .detail-shot { aspect-ratio: 16 / 8.6; }
  .is-hud .win-side .detail-caption .chip { font-weight: 400; letter-spacing: .02em; }
  .is-hud .win-side-title { margin: .15rem 0 -.35rem; font: 400 1.65rem/1.15 var(--font-display); color: var(--gold-0); }
  .is-hud .win-side .detail-summary { font-size: .94rem; line-height: 1.45; color: var(--text-2); }
  .is-hud .win-side .facts { gap: .5rem; }
  .is-hud .win-side .fact { padding: .55rem .7rem; border-radius: .675rem; background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .07); }
  .is-hud .win-side .fact small { font-size: .72rem; font-weight: 400; letter-spacing: .09em; color: var(--gold-3); }
  .is-hud .win-side .fact > div { font-size: .94rem; }
  .is-hud .win-side .chip { font-weight: 400; letter-spacing: .01em; }
  .is-hud .win-side .fact .chip { border-color: rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .05); color: var(--text-2); font-size: .8rem; }
  .is-hud .win-side .callout { border-radius: .75rem; border-color: rgba(242, 198, 106, .24); background: rgba(242, 198, 106, .06); font-size: .9rem; line-height: 1.4; }
  .is-hud .win-side .discoveries .t-caps { font-weight: 400; color: var(--gold-3); }
  /* Buttons on the glass: gold-edged ghosts, a solid gold for the one thing to do (Start, Equip, Drink, and the
     hold to sell, which stays the Store's gold), a red way out. */
  .is-hud .win-side .btn { box-shadow: none; text-shadow: none; border-radius: .675rem; }
  .is-hud .win-side .btn:not(.btn-primary):not(.btn-danger):not(.btn-gold), .is-hud .win-tools .btn:not(.btn-gold), .is-hud .win-side .callout .btn { --tone-top: rgba(242, 198, 106, .13); --tone-mid: rgba(242, 198, 106, .1); --tone-bottom: rgba(242, 198, 106, .08); --tone-edge: rgba(242, 198, 106, .45); --tone-text: var(--gold-1); }
  .is-hud .win-side .btn-danger { --tone-top: rgba(255, 93, 87, .2); --tone-mid: rgba(255, 93, 87, .15); --tone-bottom: rgba(255, 93, 87, .12); --tone-edge: rgba(255, 93, 87, .5); --tone-text: #ff8a84; }
  .is-hud .win-side .btn-primary { --tone-top: #f7dc97; --tone-mid: #e8bb62; --tone-bottom: #cf9a46; --tone-edge: #ffe7a6; --tone-text: #1f1405; }
  .is-hud .win-side .detail-action { padding: .9rem 1.05rem 1.05rem; border-top: 1px solid rgba(255, 255, 255, .07); background: none; border-radius: 0; }
  .is-hud .win-side .detail-action .btn-lg { min-height: 3.15rem; font-size: 1.1rem; }
  .is-hud .win-side .action-status .chip { color: color-mix(in srgb, var(--skill) 55%, #fff); border-color: color-mix(in srgb, var(--skill) 45%, transparent); background: color-mix(in srgb, var(--skill) 16%, transparent); }
  .is-hud .win-side .action-status .chip .dot { box-shadow: none; }
  .is-hud .win-side .action-bar .bar { height: .45rem; background: rgba(255, 255, 255, .1); box-shadow: none; }
  .is-hud .win-side .action-bar .bar > i { background: var(--skill); box-shadow: none; }
  .is-hud .win-side .action-note { font-size: .86rem; }

  /* ---------------------------------------------------------------- The Bank window */
  .is-hud .win-page.is-bank { gap: 1rem; }
  .is-hud .win-page.is-bank .win-body { grid-template-columns: minmax(0, 1fr) 24rem; }
  .is-hud .win-page.is-bank .win-progress .bar { width: 21rem; }
  .is-hud .win-progress .clan-perk-note { flex: none; }
  .is-hud .win-stats { display: flex; gap: 2.1rem; }
  .is-hud .win-stats > div { display: grid; justify-items: end; gap: .15rem; }
  .is-hud .win-stats small { font-size: .72rem; font-weight: 400; letter-spacing: .1em; color: var(--gold-3); }
  .is-hud .win-stats b { display: inline-flex; align-items: center; gap: .35rem; font: 400 1.35rem/1.1 var(--font-num); color: var(--gold-0); }
  .is-hud .win-stats .ia-emblem { width: 1.35rem; height: 1.35rem; }
  /* The tabs, the search, Sort and Buy space on one strip: the Window board's small tabs. */
  .is-hud .win-toolbar { flex: none; display: flex; align-items: center; gap: 1.05rem; min-width: 0; }
  .is-hud .win-toolbar .bank-tabs { flex: 1; min-width: 0; align-items: center; gap: .45rem; padding: .1rem; border: 0; }
  .is-hud .win-toolbar .bank-tab { height: 2.55rem; margin: 0; padding: 0 .9rem 0 .45rem; border-radius: .675rem; border: 1px solid rgba(255, 255, 255, .1); background: none; color: var(--text-2); }
  .is-hud .win-toolbar .bank-tab:hover { background: rgba(255, 255, 255, .05); color: var(--text-1); }
  .is-hud .win-toolbar .bank-tab.is-active { height: 2.55rem; margin: 0; background: rgba(242, 198, 106, .16); border-color: rgba(242, 198, 106, .5); color: var(--gold-1); }
  .is-hud .win-toolbar .bank-tab.is-active::before { display: none; }
  .is-hud .win-toolbar .bank-tab.has-match { border-color: color-mix(in srgb, var(--emerald) 55%, transparent); box-shadow: none; background: rgba(88, 214, 127, .1); }
  .is-hud .win-toolbar .bank-tab.is-add { padding: 0 .8rem; color: var(--gold-2); }
  .is-hud .win-toolbar .tab-icon { width: 1.65rem; height: 1.65rem; background: none; }
  .is-hud .win-toolbar .tab-name { font-size: .94rem; font-weight: 400; }
  .is-hud .win-toolbar .bank-tab small { font-weight: 400; color: var(--text-3); }
  .is-hud .win-tools { flex: none; display: flex; align-items: center; gap: .5rem; }
  .is-hud .win-tools .search { width: 16.5rem; }
  .is-hud .win-tools .input { height: 2.55rem; border-radius: .675rem; border-color: rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .05); box-shadow: none; }
  .is-hud .win-tools .btn { min-height: 2.55rem; border-radius: .675rem; box-shadow: none; text-shadow: none; }
  .is-hud .bank-vault.win-main { gap: .75rem; }
  .is-hud .bank-vault .bank-filters { padding: 0; gap: .45rem; }
  .is-hud .bank-vault .filter-chip { height: 2.1rem; padding: 0 .8rem; border-radius: 1.05rem; border-color: rgba(255, 255, 255, .1); background: none; color: var(--text-2); font-size: .86rem; font-weight: 400; }
  .is-hud .bank-vault .filter-chip:hover { background: rgba(255, 255, 255, .05); }
  .is-hud .bank-vault .filter-chip.is-active { border-color: rgba(242, 198, 106, .5); background: rgba(242, 198, 106, .16); color: var(--gold-1); }
  .is-hud .bank-vault .filter-chip small { font-weight: 400; color: var(--text-3); }
  .is-hud .bank-vault .filter-chip.is-active small { color: var(--gold-2); }
  .is-hud .bank-vault .bank-scroll { padding: .1rem .25rem .1rem .1rem; }
  /* The stacks: calm glass cells, their grade still at the edge and in the gem. */
  .is-hud .bank-vault .bank-grid { grid-template-columns: repeat(auto-fill, minmax(5.1rem, 1fr)); gap: .5rem; }
  .is-hud .bank-vault .bank-grid .well { border-radius: .75rem; border-color: rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .05); }
  .is-hud .bank-vault .bank-grid .well:hover { border-color: rgba(242, 198, 106, .45); }
  .is-hud .bank-vault .bank-grid .well.is-selected { border-color: var(--gold-1); box-shadow: 0 0 0 1px var(--gold-2), inset 0 0 .9rem rgba(242, 198, 106, .2); }
  .is-hud .bank-vault .bank-hints { padding: .6rem .1rem 0; border-top: 1px solid rgba(255, 255, 255, .06); background: none; border-radius: 0; font-size: .82rem; }
  .is-hud .bank-vault kbd.key { font-weight: 400; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); box-shadow: none; }
  /* The chosen stack. */
  .is-hud .win-side.bank-inspect { padding-top: 0; }
  .is-hud .win-side .inspect-scroll { padding: .75rem 1.05rem 1.05rem; gap: .8rem; }
  .is-hud .win-side .inspect-head h2 { font: 400 1.5rem/1.15 var(--font-display); }
  .is-hud .win-side .inspect-head p { font-size: .86rem; }
  .is-hud .win-side .well.is-large { border-radius: .9rem; }
  .is-hud .win-side .owned-grid div { border-radius: .6rem; border: 1px solid rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .04); }
  .is-hud .win-side .owned-grid dt, .is-hud .win-side .inspect-section .t-caps { font-weight: 400; letter-spacing: .1em; color: var(--gold-3); }
  .is-hud .win-side .inspect-section { border-top-color: rgba(255, 255, 255, .07); }
  .is-hud .win-side .segmented { border-color: rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .04); box-shadow: none; }
  .is-hud .win-side .sell-quote { border-radius: .6rem; background: rgba(255, 255, 255, .04); }
  .is-hud .win-side .inspect-delete .btn-danger { --tone-top: rgba(255, 93, 87, .2); --tone-mid: rgba(255, 93, 87, .15); --tone-bottom: rgba(255, 93, 87, .12); --tone-edge: rgba(255, 93, 87, .5); --tone-text: #ff8a84; box-shadow: none; text-shadow: none; }
  .is-hud .win-side .select, .is-hud .win-side .input { border-radius: .6rem; border-color: rgba(255, 255, 255, .1); background-color: rgba(255, 255, 255, .05); box-shadow: none; }
  .is-hud .win-side.bank-inspect > .empty { flex: 1; align-content: center; }
  /* The way to use the chosen stack (Equip, Unequip, Drink…) at the panel's foot, as the Woodcutting window's Start. */
  .is-hud .win-side .inspect-foot { flex: none; display: grid; gap: .45rem; padding: .9rem 1.05rem 1.05rem; border-top: 1px solid rgba(255, 255, 255, .07); }
  /* What the adventurer wears, over the chosen stack (views/places.mjs bankGear; a playtester, 24 September 2026):
     the dock's Gear panel on the side panel's glass, kept short so the chosen stack keeps the column — the Power and
     the hit points, then the nine slots five and four, each piece at three fifths of its cell. The piece chosen takes
     the vault's gold edge. */
  .is-hud .bank-side { display: flex; flex-direction: column; gap: .9rem; min-width: 0; min-height: 0; }
  .is-hud .bank-side > .bank-inspect { flex: 1; }
  .is-hud .win-side.bank-gear { flex: none; gap: .75rem; padding: .95rem 1.05rem 1.05rem; }
  .is-hud .bank-gear-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
  .is-hud .bank-gear-head .meta { font-size: .86rem; color: var(--text-3); white-space: nowrap; }
  .is-hud .bank-gear-head .meta b { font-weight: 400; color: var(--text-2); }
  /* The Power and the hit points on one row, the style and the weapon's special under them across the card, so the
     longest ("Ranged · Piercing Shot") is read whole. */
  .is-hud .bank-gear .gear-stats { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .3rem .6rem; }
  .is-hud .bank-gear .gear-power { display: contents; font: 400 1.65rem/1 var(--font-num); color: var(--gold-0); }
  .is-hud .bank-gear .gear-power small { grid-column: 1 / -1; overflow: hidden; font: 400 .72rem var(--font-ui); letter-spacing: .09em; color: var(--gold-3); white-space: nowrap; text-overflow: ellipsis; }
  .is-hud .bank-gear .gear-hp { grid-area: 1 / 2; gap: .4rem; font-size: .78rem; }
  .is-hud .bank-gear .gear-hp b { white-space: nowrap; }
  .is-hud .bank-gear .gear-hp .eq-hp-bar { width: 4.2rem; height: .45rem; }
  .is-hud .bank-gear .gear-slots { gap: .45rem; }
  .is-hud .bank-gear .eq-slot { border-radius: .6rem; background: rgba(255, 255, 255, .05); }
  .is-hud .bank-gear .eq-slot:not([class*=" r-"]) { border-color: rgba(255, 255, 255, .08); }
  .is-hud .bank-gear .eq-slot:hover { border-color: rgba(242, 198, 106, .45); }
  .is-hud .bank-gear .eq-slot.is-selected { border-color: var(--gold-1); box-shadow: 0 0 0 1px var(--gold-2), inset 0 0 .9rem rgba(242, 198, 106, .2); }
  .is-hud .bank-gear .eq-slot > img { width: 60%; height: 60%; }
  .is-hud .bank-gear .eq-slot.is-ghost > img { width: 56%; height: 56%; }

  /* ---------------------------------------------------------------- Every other window in the same language
     The director approved the Bank and Woodcutting windows and asked for the same look on every page (23 September
     2026). A page keeps its markup and every control: its head is the window's head (views/window.mjs) and the rest
     is restyled here. The choosing column has no frame, its heading in small gold caps; the chosen thing's panel is
     the side panel's glass; every other panel is calm glass, its heading in caps where the ribbon plaque hung; cards
     are glass with the level in gold caps and the name in serif; tabs are small and gold; buttons are gold-edged
     ghosts, the one thing to do solid gold, the way out red. Nothing in a window moves on its own. */
  .is-hud .stage > .page:not(.win-page) { gap: 1.2rem; padding-top: 0; }
  .is-hud .stage .page-columns { grid-template-columns: minmax(0, 1fr) 27rem; align-items: stretch; gap: 1.35rem; padding-top: 0; }
  .is-hud .stage .panel { border-radius: 1.05rem; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .035); box-shadow: none; }
  .is-hud .stage .panel::before { display: none; }
  .is-hud .stage .panel:has(> .plaque) { padding-top: 0; }
  .is-hud .stage .plaque { position: static; z-index: auto; translate: none; flex: none; display: flex; align-items: center; gap: .45rem; min-width: 0; margin: 0; padding: 1.05rem 1.05rem .35rem; border: 0; border-radius: 0; background: none; box-shadow: none; font: 400 .79rem/1.25 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-3); }
  .is-hud .stage .plaque > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; background: none; -webkit-background-clip: border-box; background-clip: border-box; color: inherit; }
  .is-hud .stage .plaque::before, .is-hud .stage .plaque::after { display: none; }
  .is-hud .stage .plaque .ia-emblem { width: 1.05rem; height: 1.05rem; }
  /* The small headings inside a window read in the same gold caps. */
  .is-hud .stage .page:not(.win-page) :is(.drops, .discoveries, .stance-row, .spell-row, .weak-foes, .plant-compost, .batch-pick, .tier-head, .tier-lines, .order-head, .uc-section, .welcome-section) .t-caps { font-size: .72rem; font-weight: 400; letter-spacing: .1em; color: var(--gold-3); }
  .is-hud .stage .ornament-rule { color: var(--gold-3); font-weight: 400; letter-spacing: .12em; }
  .is-hud .stage .ornament-rule::before, .is-hud .stage .ornament-rule::after { background: rgba(242, 198, 106, .16); }

  /* The choosing column: no frame, its heading in caps, then its tabs and its cards, as in the Woodcutting window. */
  .is-hud .stage .panel.choose { gap: .8rem; padding: 0; border: 0; border-radius: 0; background: none; }
  .is-hud .stage .panel.choose > .plaque { padding: 0; }
  .is-hud .stage .choose-tools { flex: none; justify-content: flex-start; align-items: flex-start; padding: 0; }
  .is-hud .stage .choose-tools.is-recipes, .is-hud .stage .combat-choose .choose-tools, .is-hud .stage .farm-tools { align-items: flex-start; gap: .6rem; padding: 0; }
  .is-hud .stage .tab-set { text-align: left; font-size: .86rem; }
  .is-hud .stage .tab-set b { font-weight: 400; }
  .is-hud .stage .tabs-later { font-size: .82rem; }
  .is-hud .stage .card-grid { grid-template-columns: repeat(auto-fill, minmax(14.6rem, 1fr)); gap: .9rem; padding: 0 .25rem .25rem 0; }
  /* Fletching's one Arrow shafts card stands above the families at a card's own width. */
  .is-hud .stage .pinned-recipe { flex: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(14.6rem, 1fr)); gap: .9rem; padding: 0 .25rem 0 0; }
  .is-hud .stage .pinned-recipe .res-card { width: auto; }
  .is-hud .stage .area-scroll { gap: 1.6rem; padding: 0 .25rem .25rem 0; }
  .is-hud .stage .area-group .card-grid { padding: 0; }
  .is-hud .stage .area-head { align-items: baseline; gap: .3rem .8rem; padding: 0 0 .75rem; }
  .is-hud .stage .area-head h3 { font: 400 1.35rem/1.2 var(--font-display); color: var(--gold-0); }
  .is-hud .stage .area-head .chip { padding: 0; border: 0; background: none; font: 400 .79rem var(--font-ui); letter-spacing: .09em; text-transform: uppercase; color: var(--gold-3); }
  .is-hud .stage .area-head .chip-dim { color: var(--text-3); }
  .is-hud .stage .area-head small { font-size: .9rem; color: var(--text-3); }
  .is-hud .stage .area-note { margin: 0 0 .9rem; font-size: .9rem; line-height: 1.45; color: var(--text-2); }

  /* Tabs: the Window board's small gold tabs, left under the heading, onto a second row when a bench has many. */
  .is-hud .stage :is(.choose-tools, .journal-tools, .lb-tools, .journal-list, .disco-head) .segmented { flex-wrap: wrap; justify-content: flex-start; gap: .45rem; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; opacity: 1; }
  .is-hud .stage :is(.choose-tools, .journal-tools, .lb-tools, .journal-list, .disco-head) .segmented button { min-height: 2.4rem; padding: 0 .9rem; border-radius: .675rem; border: 1px solid rgba(255, 255, 255, .1); color: var(--text-2); font-size: .9rem; font-weight: 400; letter-spacing: .01em; }
  .is-hud .stage :is(.choose-tools, .journal-tools, .lb-tools, .journal-list, .disco-head) .segmented button:hover:not(:disabled) { background: rgba(255, 255, 255, .05); color: var(--text-1); }
  .is-hud .stage :is(.choose-tools, .journal-tools, .lb-tools, .journal-list, .disco-head) .segmented button[aria-pressed="true"] { border-color: rgba(242, 198, 106, .5); background: rgba(242, 198, 106, .16); color: var(--gold-1); box-shadow: none; }
  .is-hud .stage .segmented.is-tiers button { min-height: 2.1rem; font-size: .84rem; }
  .is-hud .stage .segmented button .tab-level { font-weight: 400; }
  .is-hud .stage .segmented button .ia-emblem { width: 1.15rem; height: 1.15rem; }
  /* A choice inside a panel (the stance, the batches, who may join) keeps its segmented look, flat on the glass. */
  .is-hud .stage :is(.detail, .clan-side, .clan-found) .segmented { border-color: rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .04); box-shadow: none; }
  .is-hud .stage :is(.detail, .clan-side, .clan-found) .segmented button { font-weight: 600; }

  /* Cards: the Woodcutting window's card on the phone's markup. The level in gold caps at the top, the thing's own
     art in the corner, the name in serif, what it takes or gives under it, and its state at the foot; chosen it takes
     a gold edge, worked the skill's colour, locked or planned it steps back. */
  .is-hud .stage .res-card:not(.win-card, .is-future) { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto auto auto minmax(0, 1fr); grid-template-areas: "level art" "name art" "sub sub" "extra extra" "more more" "people state"; align-items: start; gap: .15rem .6rem; min-height: 10.5rem; padding: 1.05rem; border-radius: .9rem; border: 1px solid rgba(255, 255, 255, .09); background: rgba(255, 255, 255, .04); box-shadow: none; transform: none; transition: border-color .15s, background .15s; }
  .is-hud .stage .res-card:not(.win-card, .is-future):hover { border-color: rgba(242, 198, 106, .32); background: rgba(255, 255, 255, .06); box-shadow: none; transform: none; }
  .is-hud .stage .res-card.is-selected:not(.win-card) { border-color: rgba(242, 198, 106, .55); background: rgba(242, 198, 106, .07); box-shadow: none; }
  .is-hud .stage .res-card.is-running:not(.win-card) { border-color: color-mix(in srgb, var(--skill) 70%, transparent); background: color-mix(in srgb, var(--skill) 12%, transparent); }
  .is-hud .stage .res-card.is-running.is-selected:not(.win-card) { box-shadow: inset 0 0 0 1px rgba(242, 198, 106, .35); }
  .is-hud .stage .res-card.is-running::after { display: none; }
  .is-hud .stage .res-card:is(.is-locked, .is-planned):not(.win-card, .is-running) { opacity: .72; background: rgba(255, 255, 255, .03); }
  .is-hud .stage .legend-card { border-style: dashed; cursor: default; }
  .is-hud .stage .legend-card.is-caught { border-style: solid; }
  .is-hud .stage .res-card:not(.win-card) .card-copy { display: contents; }
  .is-hud .stage .res-card:not(.win-card) .card-level { grid-area: level; display: block; align-self: start; font: 400 .79rem/1.3 var(--font-ui); letter-spacing: .09em; text-transform: uppercase; color: var(--gold-3); }
  .is-hud .stage .res-card:not(.win-card) .card-level::before { content: "Level\00a0"; }
  .is-hud .stage .res-card:not(.win-card) .card-level small { display: none; }
  .is-hud .stage .res-card:not(.win-card) .card-well { grid-area: art; width: 3.3rem; height: 3.3rem; border-radius: .6rem; background: none; box-shadow: none; overflow: visible; }
  .is-hud .stage .res-card:not(.win-card) .card-art { width: 94%; height: 94%; filter: drop-shadow(0 .2rem .3rem rgba(0, 0, 0, .6)); }
  .is-hud .stage .res-card:not(.win-card) .card-art.is-emblem .ia-emblem { width: 80%; height: 80%; opacity: .85; }
  .is-hud .stage .res-card:not(.win-card) .card-well.r-rare .card-art { filter: drop-shadow(0 .2rem .3rem rgba(0, 0, 0, .6)) drop-shadow(0 0 .3rem rgba(93, 180, 255, .45)); }
  .is-hud .stage .res-card:not(.win-card) .card-well.r-epic .card-art { filter: drop-shadow(0 .2rem .3rem rgba(0, 0, 0, .6)) drop-shadow(0 0 .35rem rgba(195, 140, 255, .55)); }
  .is-hud .stage .res-card:not(.win-card) .card-well.r-legendary .card-art { filter: drop-shadow(0 .2rem .3rem rgba(0, 0, 0, .6)) drop-shadow(0 0 .4rem rgba(255, 179, 71, .6)); }
  .is-hud .stage .res-card:not(.win-card) .card-well.r-mythic .card-art { filter: drop-shadow(0 .2rem .3rem rgba(0, 0, 0, .6)) drop-shadow(0 0 .45rem rgba(255, 95, 109, .6)); }
  .is-hud .stage .res-card.is-locked:not(.win-card) .card-well { filter: grayscale(.7) brightness(.7); }
  .is-hud .stage .spell-card .card-well .spell-icon { width: 92%; height: 92%; }
  .is-hud .stage .res-card:not(.win-card) .card-copy > strong { grid-area: name; min-width: 0; font: 400 1.275rem/1.2 var(--font-display); color: var(--gold-0); overflow-wrap: anywhere; }
  .is-hud .stage .res-card:not(.win-card) .card-copy > small:first-of-type { grid-area: sub; min-width: 0; max-width: none; margin-top: .2rem; font-size: .94rem; line-height: 1.35; color: var(--text-3); white-space: normal; overflow: visible; }
  .is-hud .stage .mon-card .card-copy > small:first-of-type { display: block; }
  .is-hud .stage .mon-card .card-copy > small .ia-emblem { vertical-align: -.2em; }
  .is-hud .stage .res-card:not(.win-card) .card-copy > small b { font-weight: 400; color: var(--text-2); }
  .is-hud .stage .res-card:not(.win-card) .card-costs { flex-wrap: wrap; gap: .25rem .7rem; }
  .is-hud .stage .res-card:not(.win-card) .card-costs span { font: 400 .94rem var(--font-num); color: var(--text-2); }
  .is-hud .stage .res-card:not(.win-card) .card-costs span.t-bad { color: #ff9b7a; }
  .is-hud .stage .res-card:not(.win-card) .card-costs img { width: 1.35rem; height: 1.35rem; }
  .is-hud .stage .res-card:not(.win-card) .card-copy > .card-chips { grid-area: extra; margin-top: .5rem; gap: .3rem; }
  .is-hud .stage .res-card:not(.win-card) .card-copy > :is(.bar, small:not(:first-of-type)) { grid-area: more; margin-top: .5rem; }
  .is-hud .stage .res-card:not(.win-card) .card-copy > :is(.chip, .card-finds) { grid-area: state; justify-self: end; align-self: end; margin-top: .6rem; }
  .is-hud .stage .res-card:not(.win-card) > .card-people { grid-area: people; position: static; justify-self: start; align-self: end; margin-top: .6rem; }
  .is-hud .stage .res-card:not(.win-card) .card-qty { font-weight: 400; }
  /* Tags on a card (a foe's weakness, its element): quiet outlines. The card's state at its foot reads as the
     Woodcutting card's: working in the skill's colour, ready in gold, a lock in quiet words, a lack in ember. */
  .is-hud .stage .res-card:not(.win-card) .chip { padding: .2rem .55rem; border-radius: .5rem; border: 1px solid rgba(255, 255, 255, .1); background: none; font: 400 .82rem/1.25 var(--font-ui); letter-spacing: .01em; color: var(--text-2); }
  .is-hud .stage .res-card:not(.win-card) .chip .ia-emblem, .is-hud .stage .res-card:not(.win-card) .chip .ia-glyph { width: .95rem; height: .95rem; }
  .is-hud .stage .res-card:not(.win-card) .card-copy > .chip { min-height: 2.3rem; padding: 0; border: 0; font-size: .94rem; white-space: normal; text-align: right; }
  .is-hud .stage .res-card:not(.win-card) .chip-gold { color: var(--gold-2); }
  .is-hud .stage .res-card:not(.win-card) .chip-bad { color: #ff9b7a; }
  .is-hud .stage .res-card:not(.win-card) .chip-bad:has(.ia-glyph), .is-hud .stage .res-card:not(.win-card) .chip-dim { color: var(--text-3); }
  .is-hud .stage .res-card:not(.win-card) .chip-good { color: #8fe3a8; }
  .is-hud .stage .res-card:not(.win-card) .chip-good:has(.dot) { min-height: 2.3rem; padding: 0 .9rem; border: 0; border-radius: .675rem; background: color-mix(in srgb, var(--skill) 20%, transparent); color: color-mix(in srgb, var(--skill) 55%, #fff); }
  .is-hud .stage .res-card:not(.win-card) .chip .dot { width: .52rem; height: .52rem; background: var(--skill); box-shadow: none; }
  .is-hud .stage .res-card:not(.win-card) .card-medal { font-weight: 400; }
  .is-hud .stage .card-grid .res-card.is-future { min-height: 10.5rem; border-radius: .9rem; border: 1px dashed rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .02); box-shadow: none; color: var(--text-3); font-size: .94rem; font-weight: 400; text-shadow: none; }
  .is-hud .stage .log-opt { border-radius: .6rem; border-color: rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .04); }
  .is-hud .stage .log-opt.is-on { border-color: rgba(242, 198, 106, .5); background: rgba(242, 198, 106, .1); }
  .is-hud .stage .log-copy strong { font-size: .9rem; font-weight: 400; }

  /* The chosen thing's panel is the Woodcutting window's side panel. Its plaque names the thing in serif at the top;
     where the panel names it itself (a product, a crop), the plaque steps aside. */
  .is-hud .stage .panel.detail { padding: 0; overflow: hidden; }
  .is-hud .stage .detail > .plaque { padding: 1.05rem 1.05rem 0; font: 400 1.65rem/1.15 var(--font-display); letter-spacing: 0; text-transform: none; color: var(--gold-0); }
  .is-hud .stage .detail:has(.craft-product h2, .plot-copy h2) > .plaque { display: none; }
  /* Every block keeps its own height: a panel taller than the window scrolls instead of folding its picture away. */
  .is-hud .stage .detail .detail-scroll { grid-auto-rows: max-content; gap: .8rem; padding: .9rem 1.05rem 1.05rem; }
  .is-hud .stage .detail .detail-hero { border-radius: .75rem; box-shadow: none; }
  .is-hud .stage .detail .detail-shot { aspect-ratio: 16 / 8.6; }
  .is-hud .stage .detail .detail-caption .chip { font-weight: 400; letter-spacing: .02em; }
  .is-hud .stage .detail .detail-summary { font-size: .94rem; line-height: 1.45; color: var(--text-2); }
  .is-hud .stage .detail .craft-product { gap: 1rem; }
  .is-hud .stage .detail .craft-product h2, .is-hud .stage .detail .plot-copy h2 { margin-bottom: .2rem; font: 400 1.65rem/1.15 var(--font-display); }
  .is-hud .stage .detail .craft-product h2:is(:not(.rar-text), .r-common), .is-hud .stage .detail .plot-copy h2 { color: var(--gold-0); }
  .is-hud .stage .detail .craft-product p, .is-hud .stage .detail .plot-copy p { font-size: .9rem; line-height: 1.4; }
  .is-hud .stage .detail .well.is-large { border-radius: .9rem; }
  .is-hud .stage .detail .facts { gap: .5rem; }
  .is-hud .stage .detail .fact { padding: .55rem .7rem; border-radius: .675rem; background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .07); }
  .is-hud .stage .detail .fact small { font-size: .72rem; font-weight: 400; letter-spacing: .09em; color: var(--gold-3); }
  .is-hud .stage .detail .fact > div { font-size: .94rem; }
  .is-hud .stage .detail .chip { font-weight: 400; letter-spacing: .01em; }
  .is-hud .stage .detail .fact .chip { border-color: rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .05); color: var(--text-2); font-size: .8rem; }
  .is-hud .stage .detail .callout { border-radius: .75rem; border-color: rgba(242, 198, 106, .24); background: rgba(242, 198, 106, .06); font-size: .9rem; line-height: 1.4; }
  /* A slot with no potion: the brews on a line of their own, the clan's note and the way to Herblore under them. */
  .is-hud .stage .detail .potion-callout.is-empty > span { flex: 1 1 calc(100% - 3rem); }
  .is-hud .stage .detail .potion-callout.is-empty > .btn { margin-left: auto; }
  .is-hud .stage .detail .cross-callout { border-color: rgba(200, 160, 255, .35); background: rgba(195, 140, 255, .07); }
  .is-hud .stage .detail :is(.catch-record, .burn-panel, .tier-block, .versus, .auto-eat, .food-slot, .bin-state) { border-radius: .75rem; border-color: rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .04); }
  .is-hud .stage .detail .catch-record:not(.is-empty) { border-color: rgba(242, 198, 106, .24); background: rgba(242, 198, 106, .06); }
  .is-hud .stage .detail .food-slot.is-set { border-color: color-mix(in srgb, var(--emerald) 40%, transparent); }
  .is-hud .stage .detail .food-slot.is-prompt { border-color: rgba(242, 198, 106, .45); }
  .is-hud .stage .detail .food-slot.is-empty { border-color: color-mix(in srgb, var(--ember) 50%, transparent); }
  .is-hud .stage .detail :is(.catch-record, .burn-note, .auto-eat, .order-note) { font-size: .88rem; }
  .is-hud .stage .detail :is(.versus small, .burn-figure small) { font-weight: 400; letter-spacing: .09em; color: var(--gold-3); }
  .is-hud .stage .detail .vs-side small { text-transform: none; letter-spacing: .01em; color: var(--text-2); }
  .is-hud .stage .detail :is(.vs-meta, .burn-figure em) { font-size: .8rem; }
  .is-hud .stage .detail .drops { gap: .35rem; }
  .is-hud .stage .detail .drop-row { padding: .4rem .65rem; border-radius: .6rem; background: rgba(255, 255, 255, .04); font-size: .88rem; }
  .is-hud .stage .detail .drop-row.is-rare { border-color: rgba(195, 140, 255, .35); }
  .is-hud .stage .detail .craft-table { border-radius: .75rem; border-color: rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03); }
  .is-hud .stage .detail .craft-table.is-output { border-color: rgba(242, 198, 106, .3); }
  .is-hud .stage .detail .craft-table header { font-weight: 400; color: var(--gold-3); background: none; font-size: .7rem; }
  .is-hud .stage .detail .craft-row { font-size: .9rem; }
  .is-hud .stage .detail .craft-grants { background: rgba(88, 214, 127, .07); font-size: .88rem; }
  .is-hud .stage .detail :is(.bench-hero, .plot-hero) { border-radius: .75rem; background: radial-gradient(ellipse at 50% 60%, rgba(120, 140, 90, .18), transparent 65%), rgba(255, 255, 255, .03); box-shadow: none; }
  .is-hud .stage .detail .rate { border-radius: .675rem; border-color: rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .04); }
  .is-hud .stage .detail .rate small { font-size: .74rem; }
  .is-hud .stage .detail :is(.tier-lines > div, .compost-opt, .seed-row, .find-card, .order-card) { border-radius: .6rem; border-color: rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .04); }
  .is-hud .stage .detail .compost-opt.is-on { border-color: var(--emerald); background: rgba(88, 214, 127, .12); }
  .is-hud .stage .detail .find-card.is-found { border-color: rgba(200, 160, 255, .4); background: rgba(195, 140, 255, .08); }
  .is-hud .stage .detail :is(.seed-copy strong, .find-card strong) { font-weight: 400; }
  .is-hud .stage .detail .weak-foe-pill { border-color: rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); font-size: .8rem; }
  .is-hud .stage .detail .tier-pip.is-on { color: #1f1405; background: var(--gold-2); }
  /* Buttons on the glass, as in the side panel: gold-edged ghosts, the one thing to do in solid gold, a red way out. */
  .is-hud .stage .page:not(.win-page) .btn { box-shadow: none; text-shadow: none; border-radius: .675rem; }
  .is-hud .stage .page:not(.win-page) .btn:not(.btn-primary, .btn-danger, .btn-gold), .is-hud .stage .page:not(.win-page) .callout .btn { --tone-top: rgba(242, 198, 106, .13); --tone-mid: rgba(242, 198, 106, .1); --tone-bottom: rgba(242, 198, 106, .08); --tone-edge: rgba(242, 198, 106, .45); --tone-text: var(--gold-1); }
  .is-hud .stage .page:not(.win-page) .btn-danger { --tone-top: rgba(255, 93, 87, .2); --tone-mid: rgba(255, 93, 87, .15); --tone-bottom: rgba(255, 93, 87, .12); --tone-edge: rgba(255, 93, 87, .5); --tone-text: #ff8a84; }
  .is-hud .stage .page:not(.win-page) :is(.btn-primary, .btn-gold):not(.callout .btn) { --tone-top: #f7dc97; --tone-mid: #e8bb62; --tone-bottom: #cf9a46; --tone-edge: #ffe7a6; --tone-text: #1f1405; }
  .is-hud .stage .page:not(.win-page) .btn:disabled { filter: saturate(.3) brightness(.8); opacity: .7; }
  .is-hud .stage .detail .detail-action { padding: .9rem 1.05rem 1.05rem; border-top: 1px solid rgba(255, 255, 255, .07); background: none; border-radius: 0; }
  .is-hud .stage .detail .detail-action .btn-lg { min-height: 3.15rem; font-size: 1.1rem; }
  .is-hud .stage .detail .action-status .chip { color: color-mix(in srgb, var(--skill) 55%, #fff); border-color: color-mix(in srgb, var(--skill) 45%, transparent); background: color-mix(in srgb, var(--skill) 16%, transparent); }
  .is-hud .stage .detail .action-status .chip .dot { box-shadow: none; }
  .is-hud .stage .detail .action-bar .bar { height: .45rem; background: rgba(255, 255, 255, .1); box-shadow: none; }
  .is-hud .stage .detail .action-bar .bar > i { background: var(--skill); box-shadow: none; }
  .is-hud .stage .detail .action-note { font-size: .86rem; }
  /* The bench's foot in a window (views/pages.mjs benchFooter): the queue on the panel's glass, the amount in the
     window's small gold caps, and the two ways on side by side. */
  .is-hud .stage .detail .detail-action.is-bench { gap: .7rem; }
  .is-hud .stage .detail .bench-queue { padding: .6rem .65rem .65rem; border-radius: .75rem; border-color: rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03); }
  .is-hud .stage .detail .bq-head .t-caps { font-size: .72rem; font-weight: 400; letter-spacing: .1em; color: var(--gold-3); }
  .is-hud .stage .detail .bq-count, .is-hud .stage .detail .bq-clear { font-size: .8rem; }
  .is-hud .stage .detail .bq-row { border-radius: .6rem; background: rgba(255, 255, 255, .04); }
  .is-hud .stage .detail .bq-row.is-running { background: color-mix(in srgb, var(--skill) 12%, transparent); }
  .is-hud .stage .detail .bq-copy strong { font-size: .9rem; font-weight: 400; }
  .is-hud .stage .detail .bq-copy small { font-size: .76rem; }
  .is-hud .stage .detail .bq-copy small b { font-weight: 400; color: var(--text-1); }
  .is-hud .stage .detail .bq-hint { font-size: .8rem; }
  .is-hud .stage .detail .bq-acts .btn { border-radius: .45rem; }
  .is-hud .stage .detail .bench-makes { font-size: .82rem; }
  .is-hud .stage .detail .bench-makes b { font-weight: 400; }
  .is-hud .stage .detail .bench-amount .segmented button { min-height: 2.1rem; font-size: .88rem; }
  .is-hud .stage .detail .bench-custom { height: 2.3rem; border-radius: .6rem; }
  .is-hud .stage .page:not(.win-page) :is(.auto-toggle, .pb-drink, .chip-btn) { border-radius: .6rem; }
  .is-hud .stage .page:not(.win-page) .src-btn { border-color: rgba(242, 198, 106, .4); background: rgba(242, 198, 106, .1); }

  /* The head of a fight or a lift: the hit points under the level's line, the six combat skills on the right. */
  .is-hud .win-head .hp-line { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: .75rem; }
  .is-hud .win-head .hp-line .t-caps { flex: none; font-size: .72rem; font-weight: 400; letter-spacing: .1em; color: #ffb3c8; }
  .is-hud .win-head .hp-line .bar { flex: none; width: 31.5rem; height: .95rem; background: rgba(255, 255, 255, .1); box-shadow: none; }
  .is-hud .win-head .combat-skills { justify-content: flex-end; gap: .35rem; width: auto; margin-top: .15rem; }
  .is-hud .win-head .cs-pill { gap: .35rem; padding: .25rem .6rem .25rem .35rem; border-radius: .6rem; border-color: rgba(255, 255, 255, .1); background: none; font-size: .86rem; }
  .is-hud .win-head .cs-pill:hover { border-color: rgba(242, 198, 106, .4); color: var(--text-1); }
  .is-hud .win-head .cs-pill.is-active { border-color: color-mix(in srgb, var(--skill) 65%, transparent); background: color-mix(in srgb, var(--skill) 14%, transparent); box-shadow: none; }
  .is-hud .win-head .cs-pill b { font-weight: 400; }
  .is-hud .win-sub { margin: 0; max-width: 40rem; font-size: .94rem; line-height: 1.4; color: var(--text-3); }
  /* A place's figures on the head's right: the Store's, the Leaderboards' and the Clan's, as the Bank's. */
  .is-hud .win-stats .bstat { min-width: 0; padding: 0; border: 0; border-radius: 0; background: none; justify-items: end; text-align: right; }
  .is-hud .win-stats .bstat small { font-size: .72rem; font-weight: 400; letter-spacing: .1em; color: var(--gold-3); }
  .is-hud .win-stats .bstat b span { font-size: .9rem; color: var(--text-3); }
  /* Where the title and the figures do not fit one line (a narrow window, a clan with a long name), the figures take
     a line of their own under the title instead of running into it. */
  .is-hud .win-head:has(> .win-aside .win-stats) { flex-wrap: wrap; row-gap: .9rem; }
  .is-hud .win-aside:has(.win-stats) { flex: 0 1 auto; flex-wrap: wrap; display: flex; align-items: center; justify-content: flex-end; gap: .9rem 1.6rem; margin-left: auto; }

  /* ---------------------------------------------------------------- The farm */
  .is-hud .stage .farm-body { flex: 1; padding: 0 .25rem .25rem 0; }
  .is-hud .stage .farm-actions { justify-content: flex-start; }
  .is-hud .stage .farm-badge { font-weight: 400; }
  .is-hud .stage .plot-grid { gap: .9rem; }
  .is-hud .stage .plot-grid:is(.is-herb, .is-aura) { margin: 0; }
  .is-hud .stage .plot-tile { border-radius: .9rem; border-color: rgba(255, 255, 255, .09); background: radial-gradient(ellipse at 50% 58%, rgba(92, 120, 70, .24), transparent 62%), rgba(255, 255, 255, .04); box-shadow: none; }
  .is-hud .stage .plot-tile:hover { border-color: rgba(242, 198, 106, .32); transform: none; }
  .is-hud .stage .plot-tile.is-selected { border-color: rgba(242, 198, 106, .6); box-shadow: inset 0 0 0 1px rgba(242, 198, 106, .3); }
  /* Ripe is a still green edge here, not a breathing one. */
  .is-hud .stage .plot-tile.is-ready { animation: none; border-color: rgba(88, 214, 127, .6); box-shadow: inset 0 0 0 1px rgba(88, 214, 127, .25); }
  .is-hud .stage .plot-tile .plot-label { background: linear-gradient(180deg, transparent, rgba(6, 10, 18, .82) 55%); }
  .is-hud .stage .plot-tile .plot-label strong { font: 400 1.05rem/1.2 var(--font-display); color: var(--gold-0); }
  .is-hud .stage .plot-tile .plot-label small { font-size: .78rem; }
  .is-hud .stage .plot-tile .plot-status .chip { font-weight: 400; }
  .is-hud .stage :is(.order-card, .journal-row, .bin-state) { border-radius: .75rem; border-color: rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .04); }
  .is-hud .stage .order-card.is-ready { border-color: rgba(88, 214, 127, .5); }
  .is-hud .stage :is(.order-head strong, .bin-state strong) { font-weight: 400; }
  .is-hud .stage .journal-row strong { font-weight: 400; font-size: .92rem; }
  .is-hud .stage .journal-group h3 { font-weight: 400; }
  .is-hud .stage .journal-list .journal-tabs { justify-self: start; }

  /* ---------------------------------------------------------------- Herblore's belt and the spellbook's sigils */
  .is-hud .stage .potion-belt { flex: none; padding: 0; }
  .is-hud .stage :is(.pb-slot, .sigil-cell) { border-radius: .675rem; border-color: rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .04); box-shadow: none; }
  .is-hud .stage .pb-slot.is-active { border-color: color-mix(in srgb, var(--skill) 50%, transparent); background: color-mix(in srgb, var(--skill) 12%, transparent); }
  .is-hud .stage .sigil-cell.is-attuned { border-color: color-mix(in srgb, var(--el) 55%, transparent); background: color-mix(in srgb, var(--el) 12%, transparent); }
  .is-hud .stage .pb-slot small, .is-hud .stage .sigil-copy strong { font-weight: 400; }
  .is-hud .stage .sigil-grid { gap: .6rem; padding: 0; }

  /* ---------------------------------------------------------------- The Store */
  .is-hud .stage .store-body { grid-template-columns: 17.5rem minmax(0, 1fr); gap: 1.35rem; padding-top: 0; }
  .is-hud .stage .store-nav .store-cats { gap: .35rem; padding: .35rem .7rem .7rem; }
  .is-hud .stage .store-cat { border-radius: .75rem; border-color: transparent; background: none; box-shadow: none; }
  .is-hud .stage .store-cat:hover { border-color: rgba(242, 198, 106, .3); background: rgba(255, 255, 255, .04); transform: none; }
  .is-hud .stage .store-cat.is-active { border-color: rgba(242, 198, 106, .5); background: rgba(242, 198, 106, .12); box-shadow: none; }
  .is-hud .stage .store-cat-icon { background: none; box-shadow: none; }
  .is-hud .stage .store-cat-copy strong { font-weight: 400; color: var(--gold-0); }
  .is-hud .stage .store-hint { border-top-color: rgba(255, 255, 255, .07); font-size: .78rem; }
  .is-hud .stage .panel.store-main { padding: 0; border: 0; border-radius: 0; background: none; }
  .is-hud .stage .panel.store-main > .plaque { padding: 0 0 .8rem; }
  .is-hud .stage .store-scroll { gap: 1.35rem; padding: 0 .25rem .25rem 0; }
  .is-hud .stage .tool-summary { border-radius: .9rem; border-color: rgba(255, 255, 255, .09); background: radial-gradient(70% 160% at 0% 0%, color-mix(in srgb, var(--skill) 12%, transparent), transparent 70%), rgba(255, 255, 255, .04); box-shadow: none; }
  .is-hud .stage .ts-copy h2 { font-weight: 400; color: var(--gold-0); text-shadow: none; }
  .is-hud .stage .ts-copy .t-caps { font-weight: 400; letter-spacing: .1em; color: var(--gold-3); }
  .is-hud .stage .ts-stat { border-radius: .675rem; border-color: rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .04); }
  .is-hud .stage .ts-stat small { font-weight: 400; color: var(--gold-3); }
  .is-hud .stage .ts-stat b { font-weight: 400; text-shadow: none; }
  .is-hud .stage .ul-head { padding: 0 .1rem .45rem; border-bottom-color: rgba(255, 255, 255, .07); }
  .is-hud .stage .ul-head h3 { font: 400 1.35rem var(--font-display); color: var(--gold-0); text-shadow: none; }
  .is-hud .stage .ul-head small { font-size: .86rem; }
  .is-hud .stage .ul-count { font-weight: 400; border-color: rgba(255, 255, 255, .1); background: none; }
  .is-hud .stage .upgrade-grid { gap: .9rem; }
  .is-hud .stage .upgrade-card { border-radius: .9rem; border-color: rgba(255, 255, 255, .09); background: rgba(255, 255, 255, .04); box-shadow: none; }
  .is-hud .stage .upgrade-card.is-next { border-color: rgba(242, 198, 106, .55); background: rgba(242, 198, 106, .06); box-shadow: none; }
  .is-hud .stage .upgrade-card.is-next:hover { transform: none; }
  .is-hud .stage .upgrade-card.is-owned { border-color: rgba(88, 214, 127, .3); background: rgba(88, 214, 127, .06); }
  .is-hud .stage .upgrade-card.is-locked { background: rgba(255, 255, 255, .03); }
  .is-hud .stage .uc-title strong { font: 400 1.2rem/1.15 var(--font-display); color: var(--gold-0); }
  .is-hud .stage .uc-title small { font-size: .8rem; }
  .is-hud .stage .uc-cost { border-radius: .5rem; border-color: rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .04); }
  .is-hud .stage .uc-owned { border-radius: .675rem; font-weight: 400; }
  .is-hud .stage :is(.supply-card, .bank-ladder-rows > div, .npc) { border-radius: .75rem; border-color: rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .04); }
  .is-hud .stage .supply-copy strong { font-weight: 400; color: var(--gold-0); }
  .is-hud .stage .supply-price { font-weight: 400; }
  .is-hud .stage .hold-buy.is-holding { box-shadow: 0 0 0 1px rgba(242, 198, 106, .6); }
  .is-hud .win-aside .store-tools { margin: 0; gap: 1.2rem; }

  /* ---------------------------------------------------------------- The Journal */
  .is-hud .stage .journal-columns { grid-template-columns: minmax(0, 1fr) 25rem; gap: 1.35rem; padding-top: 0; }
  .is-hud .stage .panel.chronicle { gap: .8rem; padding: 0; border: 0; border-radius: 0; background: none; }
  .is-hud .stage .panel.chronicle > .plaque { padding: 0; }
  .is-hud .stage .journal-tools { flex: none; justify-content: flex-start; padding: 0; }
  .is-hud .stage .chronicle-scroll { padding: 0 .25rem .25rem 0; }
  .is-hud .stage .chronicle-day h3 { margin: 1.1rem 0 .55rem; font-size: .72rem; }
  .is-hud .stage .chronicle-day:first-child h3 { margin-top: .2rem; }
  .is-hud .stage .chronicle-entry { padding: .45rem .7rem; border-radius: .6rem; }
  .is-hud .stage .chronicle-entry:nth-child(odd) { background: rgba(255, 255, 255, .035); }
  .is-hud .stage .chronicle-entry p { font-size: .94rem; }
  .is-hud .stage .chronicle-entry time { font-size: .8rem; }
  .is-hud .stage :is(.highlight, .disco-card, .log-link) { border-radius: .75rem; border-color: rgba(255, 255, 255, .08); }
  .is-hud .stage :is(.highlight, .disco-card):not(.is-find, .is-level, .is-found) { background: rgba(255, 255, 255, .035); }
  .is-hud .stage .log-link { background: rgba(255, 255, 255, .035); }
  .is-hud .stage .highlight:has(> .welcome-new) { grid-template-columns: 2.6rem minmax(0, 1fr) auto auto; }
  .is-hud .stage :is(.highlight-copy b, .disco-copy strong, .log-purpose) { font-weight: 400; }
  .is-hud .stage .highlight-copy small, .is-hud .stage .disco-copy small { font-size: .8rem; }
  .is-hud .stage .disco-head { padding: 0 0 .8rem; }
  .is-hud .stage .disco-head p { font-size: .88rem; }
  .is-hud .stage .disco-grid { gap: .6rem; }
  .is-hud .stage .journal-side { gap: .9rem; padding-top: 0; }
  .is-hud .stage .journal-side .panel { padding-top: 0; }
  .is-hud .stage .skill-summary { gap: .35rem .8rem; padding: .35rem 1.05rem 1.05rem; }
  .is-hud .stage .skill-summary-row { font-size: .9rem; }
  .is-hud .stage .skill-summary-row b { font-weight: 400; }
  .is-hud .stage .away-copy { padding: .35rem 1.05rem 1.05rem; }
  .is-hud .stage .away-copy p { font-size: .88rem; }
  .is-hud .stage .fishlog-count { margin: .2rem 1.05rem .5rem; }
  .is-hud .stage .fishlog-scroll { padding: 0 1.05rem 1.05rem; }
  .is-hud .stage .fishlog-water h4 { font-weight: 400; color: var(--gold-0); }
  .is-hud .stage .fishlog-row { border-radius: .5rem; background: rgba(255, 255, 255, .035); }

  /* ---------------------------------------------------------------- The Leaderboards */
  .is-hud .stage .lb-columns { grid-template-columns: 16.5rem minmax(0, 1fr); gap: 1.35rem; }
  .is-hud .stage .lb-boards { padding-top: 0; }
  .is-hud .stage .lb-boards .lb-tools { justify-content: flex-start; padding: .2rem 1.05rem .5rem; }
  .is-hud .stage .lb-tabs { gap: .25rem; padding: .2rem .6rem .7rem; }
  .is-hud .stage .lb-tab { border-radius: .675rem; font-weight: 400; font-size: .9rem; }
  .is-hud .stage .lb-tab:hover { background: rgba(255, 255, 255, .04); }
  .is-hud .stage .lb-tab.is-active { border-color: rgba(242, 198, 106, .5); background: rgba(242, 198, 106, .12); color: var(--gold-1); }
  .is-hud .stage .panel.lb-board { gap: .8rem; padding: 0; border: 0; border-radius: 0; background: none; }
  .is-hud .stage .panel.lb-board > .plaque { padding: 0; }
  .is-hud .stage .lb-board .lb-tools { justify-content: flex-start; padding: 0; }
  .is-hud .stage .lb-scroll { padding: 0 .25rem 0 0; }
  .is-hud .stage :is(.lb-table, .clan-table) th { font-weight: 400; letter-spacing: .12em; }
  .is-hud .stage :is(.lb-table, .clan-table) td { background: rgba(255, 255, 255, .035); border-color: rgba(255, 255, 255, .06); }
  .is-hud .stage :is(.lb-table, .clan-table) td:first-child { border-radius: .6rem 0 0 .6rem; }
  .is-hud .stage :is(.lb-table, .clan-table) td:last-child { border-radius: 0 .6rem .6rem 0; }
  .is-hud .stage .lb-table { font-size: .94rem; }
  .is-hud .stage :is(.lb-level, .lb-player, .clan-player, .clan-level) { font-weight: 400; }
  .is-hud .stage .lb-row.is-you td, .is-hud .stage .clan-row.is-you td { background: rgba(242, 198, 106, .1); border-color: rgba(242, 198, 106, .32); }
  .is-hud .stage .lb-medal { box-shadow: none; font-weight: 400; }
  .is-hud .stage .lb-note { padding: 0; font-size: .8rem; }

  /* ---------------------------------------------------------------- The Clan page. Only its look: its columns are
     clan.css's, at every width, so the tablet band there holds whichever way it is drawn. */
  .is-hud .stage .clan-page :is(.clan-roster, .clan-side, .clan-found, .clan-directory, .clan-invites) { padding-top: 0; }
  .is-hud .stage .clan-page .clan-tabs { gap: .45rem; padding: 1.05rem 1.05rem .8rem; border-bottom-color: rgba(255, 255, 255, .07); }
  .is-hud .stage .clan-page .clan-tab { min-height: 2.4rem; border-radius: .675rem; border: 1px solid rgba(255, 255, 255, .1); color: var(--text-2); font: 400 .9rem var(--font-ui); }
  .is-hud .stage .clan-page .clan-tab:hover { background: rgba(255, 255, 255, .05); color: var(--text-1); }
  .is-hud .stage .clan-page .clan-tab[aria-pressed="true"] { border-color: rgba(242, 198, 106, .5); background: rgba(242, 198, 106, .16); color: var(--gold-1); box-shadow: none; }
  .is-hud .stage .clan-page .clan-sub { font-weight: 400; letter-spacing: .12em; }
  .is-hud .stage .clan-page :is(.clan-scroll, .clan-side-body, .clan-found-body) { padding-left: 1.05rem; padding-right: 1.05rem; }
  .is-hud .stage .clan-page :is(.clan-request, .clan-field input, .clan-field textarea, .clan-search input) { border-radius: .6rem; border-color: rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .05); box-shadow: none; }
  .is-hud .stage .clan-page .rank-pill { font-weight: 400; }
  .is-hud .win-aside .clan-hall-invite { border-radius: .9rem; text-align: left; }

  /* ---------------------------------------------------------------- Windows over everything
     The adventurer's and the clan's profile, While You Were Away and the tutorial's skip wear the page window's
     frame: dark glass with a gold edge, the plaque turned into caps over the title. The settings and the account
     menu are HUD glass, like the panels they open from. */
  .is-hud .modal-scrim { background: rgba(3, 5, 9, .66); }
  .is-hud .modal.panel { border-radius: 1.35rem; border: 1px solid rgba(242, 198, 106, .3); background: rgba(8, 13, 22, .985); }
  .is-hud .modal.panel:not(.role-owner, .role-queen) { box-shadow: 0 1.8rem 4.5rem rgba(0, 0, 0, .55); }
  .is-hud .modal.panel::before { display: none; }
  .is-hud .modal .plaque { position: static; translate: none; align-self: center; justify-content: center; margin: 0 0 .55rem; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font: 400 .79rem/1.25 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-3); }
  .is-hud .modal .plaque > span { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: inherit; }
  .is-hud .modal .plaque::before, .is-hud .modal .plaque::after { display: none; }
  .is-hud .modal { padding-top: 1.5rem; }
  .is-hud .modal h2, .is-hud .modal .profile-name { font-weight: 400; }
  .is-hud .modal :is(.profile-now, .profile-totals > div, .profile-skill, .profile-hl, .welcome-stop, .welcome-find, .welcome-level) { border-radius: .75rem; border-color: rgba(255, 255, 255, .08); background-color: rgba(255, 255, 255, .04); }
  .is-hud .modal .profile-section h3 { font-weight: 400; letter-spacing: .12em; }
  .is-hud .modal :is(.profile-totals b, .profile-hl b, .profile-skill b) { font-weight: 400; }
  .is-hud .modal .btn { box-shadow: none; text-shadow: none; border-radius: .675rem; }
  .is-hud .modal .btn:not(.btn-primary, .btn-danger, .btn-gold) { --tone-top: rgba(242, 198, 106, .13); --tone-mid: rgba(242, 198, 106, .1); --tone-bottom: rgba(242, 198, 106, .08); --tone-edge: rgba(242, 198, 106, .45); --tone-text: var(--gold-1); }
  .is-hud .modal :is(.btn-primary, .btn-gold) { --tone-top: #f7dc97; --tone-mid: #e8bb62; --tone-bottom: #cf9a46; --tone-edge: #ffe7a6; --tone-text: #1f1405; }
  .is-hud .modal .btn-danger { --tone-top: rgba(255, 93, 87, .2); --tone-mid: rgba(255, 93, 87, .15); --tone-bottom: rgba(255, 93, 87, .12); --tone-edge: rgba(255, 93, 87, .5); --tone-text: #ff8a84; }
  .is-hud .popover.panel { border-radius: var(--hud-radius); border: 1px solid var(--hud-edge); background: var(--hud-glass); box-shadow: var(--hud-shadow); -webkit-backdrop-filter: var(--hud-blur); backdrop-filter: var(--hud-blur); }
  .is-hud.graphics-low .popover.panel { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(8, 13, 22, .92); }
  .is-hud .popover.panel::before { display: none; }
  .is-hud .popover h3 { font-weight: 400; color: var(--gold-0); }
  .is-hud .popover .row { border-bottom-color: rgba(255, 255, 255, .07); }
  .is-hud .popover .btn { box-shadow: none; text-shadow: none; border-radius: .675rem; --tone-top: rgba(242, 198, 106, .13); --tone-mid: rgba(242, 198, 106, .1); --tone-bottom: rgba(242, 198, 106, .08); --tone-edge: rgba(242, 198, 106, .45); --tone-text: var(--gold-1); }
  .is-hud .popover .segmented { border-color: rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .04); box-shadow: none; }
  /* A right-click menu, the food and spell pickers and where-to-get-it: the same dark glass with the gold edge. */
  .is-hud .context-menu { border-radius: .9rem; border: 1px solid rgba(242, 198, 106, .3); background: rgba(8, 13, 22, .97); box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .55); }
  .is-hud .context-menu header { font-weight: 400; color: var(--gold-0); border-bottom-color: rgba(255, 255, 255, .07); }
  .is-hud .context-menu button { border-radius: .5rem; }
  .is-hud .context-menu button:hover:not(:disabled), .is-hud .context-menu button:focus-visible { background: rgba(242, 198, 106, .12); }
  .is-hud .context-menu hr { background: rgba(255, 255, 255, .07); }
  .is-hud .sources-pop header { background: none; }
  .is-hud .context-menu .btn { box-shadow: none; text-shadow: none; border-radius: .5rem; --tone-top: rgba(242, 198, 106, .13); --tone-mid: rgba(242, 198, 106, .1); --tone-bottom: rgba(242, 198, 106, .08); --tone-edge: rgba(242, 198, 106, .45); --tone-text: var(--gold-1); }
  .is-hud .src-title b { font-weight: 400; color: var(--gold-0); }
  .is-hud .src-group h5 { font-weight: 400; }
  .is-hud .sources-pop footer { border-top-color: rgba(255, 255, 255, .07); }
  /* Nothing in a window breathes: a new stack in the bank is marked, not pulsed. */
  .is-hud .stage .well .badge-new { animation: none; }

  /* ---------------------------------------------------------------- Pop-ups, clear of the HUD
     XP drops fly from the middle of the stage into the task card's orb (client/xp-flight.mjs); the Power drop, and an
     XP drop that stays still (a window open, less motion), rise beside the task card, whose bar they fill; finds stand
     above the activity's bar, left of the dock's panels (in the corner while a window has the room); notices under the
     task card. */
  .is-hud .xp-drop { right: calc(100vw - var(--hud-task-l, calc(50vw - var(--hud-task-w) / 2)) + .75rem); top: calc(var(--hud-pad) + 2.6rem + var(--stack, 0) * 1.9rem); }
  /* The XP drop at twice its old size: the emblem and "+N" in the number font, white with the skill's glow and edge.
     The flying one is placed and moved by its animation alone (transform and opacity), centred on its point. */
  .is-hud .xp-fly { position: fixed; left: 0; top: 0; translate: -50% -50%; display: flex; align-items: center; gap: .6rem; padding: .3rem 1.1rem .3rem .4rem; border-radius: 2rem; background: rgba(4, 8, 14, .6); border: 2px solid color-mix(in srgb, var(--skill) 55%, transparent); white-space: nowrap; opacity: 0; pointer-events: none; }
  .is-hud .xp-drop.is-xl { gap: .6rem; padding: .3rem 1.1rem .3rem .4rem; border-radius: 2rem; border-width: 2px; }
  .is-hud :is(.xp-fly, .xp-drop.is-xl) .ia-emblem { width: 2.7rem; height: 2.7rem; }
  .is-hud :is(.xp-fly, .xp-drop.is-xl) b { font-size: 2rem; line-height: 1.1; color: #fff; text-shadow: 0 0 1rem var(--skill), 0 .1rem .1rem #000; }
  /* The orb (or a rail button) taking a drop in: one ring of the skill's colour opens and fades, once. */
  .is-hud .xp-fly-ring { position: fixed; translate: -50% -50%; border: .16rem solid var(--skill); box-shadow: 0 0 .8rem var(--skill), inset 0 0 .45rem color-mix(in srgb, var(--skill) 45%, transparent); opacity: 0; pointer-events: none; }
  .is-hud .fx-layer:has(.loot-pop, .loot-tally) { padding: 0 calc(var(--hud-pad) + var(--hud-panel-w) + .9rem) calc(var(--hud-pad) + var(--foot-h) + .9rem) 0; }
  .is-hud.has-window .fx-layer:has(.loot-pop, .loot-tally) { padding: 0 var(--hud-pad) var(--hud-pad) 0; }
  .is-hud .toasts { top: calc(var(--hud-notes-t, var(--hud-task-b, 7.5rem)) + .75rem); }
  .is-hud .level-up { top: 21%; }
}

/* A smaller desktop window. Below 1320px the client keeps an 11 or 12px root so its words stay readable, which makes
   the HUD wider than the screen's share of it: the pills lose their words and the bank's capacity, and the task card
   and the chat narrow, so nothing on the top row or the bottom row meets. */
@media (min-width: 761px) and (max-width: 1319px) {
  .is-hud { --hud-task-w: 26rem; --hud-chat-w: 26rem; }
  .is-hud .hud-pill > span:not(.sr-badge), .is-hud .hud-pill small, .is-hud .region-chat .chat-tab-place { display: none; }
  .is-hud .hud-pill { padding: 0 .75rem 0 .6rem; }
}