/* ==========================================================================
   Mobbed interface. One system for every sheet and the title screen; the HUD
   over the game is the game's own.

   ONE CONSTRUCTION, TWO MATERIALS (scripts/horde-menu-kit.js -> /img/horde/ui/kit/)
         A sheet is a slab: ink line, a band, a brass bead, the face, a riveted
         brass plate on each corner. Its title sits on a plaque that straddles
         the top edge. The band and the plaque are IRON where the fight is
         (level-up, pause, sound, leaderboard, name, run recap) and the pier's
         WOOD where the island is friendly (the market, the chest; the title's
         sign is that wood). Brass never changes.
         Inside: a PLATE is an iron row you press; PAPER is the market's goods,
         read in dark ink; a SLOT frames an item (it is the bottom bar's slot);
         a WELL is a number let into the metal; a brass TAG is a count or a
         price riveted on; PIPS count steps. One brass button for the thing to
         do, iron for the rest, coral once "End this run" is armed.
         The kit's PNGs are six times the art size: slices are art px x 6,
         widths art px x 2.
   TYPE  Two bitmap faces (scripts/horde-ui-assets.py):
           Horde Brass  capitals, two-pixel stems. 8 px labels with 1 px of
                        tracking, 16 px names, numbers and buttons, 24 px
                        titles, 32 px for the one score on the recap.
                        Line-height: odd at 8 and 24 px, even at 16 and 32 px.
           Horde Text   lowercase, one-pixel strokes, with a bold. 12 px for
                        everything read as a sentence, 24 px in the name field.
                        Line-height: even.
         No other size is used in a sheet. (The HUD keeps the sizes it shipped
         with; see there.)
   GRID  The art pixel is 2 CSS px. Spacing in steps of 2, mostly 4, 8 and 12.
   COLOUR  Iron is the HUD's grey. Brass is the island's limestone, sand its
         beach, wood its pier; turf, lagoon, mushroom red and violet mark
         growth, cold, harm and the rare.
   MOTION  Whole steps, never eased, all of it off under prefers-reduced-motion:
         a sheet drops in three steps, a press sinks two pixels, a purchase
         stamps, a refusal shakes its head, the pause pulls the camera back
         in four.
   ========================================================================== */
@font-face{font-family:'Horde Brass';src:url('/img/horde/ui/horde-brass.woff2?v=20261012-mix') format('woff2');font-display:swap;font-weight:400}
@font-face{font-family:'Horde Text';src:url('/img/horde/ui/horde-text.woff2?v=20261011-menus-c') format('woff2');font-display:swap;font-weight:400}
@font-face{font-family:'Horde Text';src:url('/img/horde/ui/horde-text-bold.woff2?v=20261011-menus-c') format('woff2');font-display:swap;font-weight:700}
:root{
  --k:#161022;                                                                  /* ink: the line the world's stone and wood wear */
  --c0:#17181c;--c1:#1f2025;--c2:#292a30;--c3:#35363d;--c4:#45464e;--c5:#5d5e68;--c6:#8f9099;--c7:#c6c3b8;   /* iron, and the two greys words are set in */
  --b0:#3c2c44;--b1:#6a484c;--b2:#a06e4c;--b3:#ce9c56;--b4:#ecc670;--b5:#fce69c;   /* brass: the terrain's limestone */
  --s0:#a88c6e;--s1:#ccb280;--s2:#e0ca92;--s3:#eedca4;--s4:#f7eabe;--s5:#fff8de;   /* sand; s5 is its lit edge */
  --wd0:#463034;--wd1:#704e3e;                                                  /* wood: the pier */
  --g0:#14463e;--g1:#1e623e;--g2:#48a03e;--g3:#66b43c;--g4:#84c844;--g5:#b4e060;   /* turf */
  --w0:#124e70;--w1:#146084;--w2:#187698;--w3:#28a0be;--w4:#48c4cc;--w5:#80dcd0;--w6:#beecd6;   /* lagoon */
  --r0:#601c30;--r1:#8c1e2c;--r2:#b2242c;--r3:#d63430;--r4:#f06848;             /* the mushrooms' red: harm */
  --v1:#7a62b8;--v2:#b096e8;                                                    /* violet: the rare */
  --paper-ink:#34263c;--paper-soft:#665262;
  --dim:#0e0d16c9;                                                              /* the one dimmer */
  --brass:'Horde Brass',monospace;--text:'Horde Text','Horde Brass',monospace;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;height:100%;position:fixed;inset:0;background:var(--c0);color:var(--s4);font:12px/16px var(--text);overflow:hidden;overscroll-behavior:none;font-synthesis:none;-webkit-font-smoothing:none;font-smooth:never}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;border-radius:0}
b,strong{font-weight:700}
/* The keyboard's ring, on things a keyboard can use. A heading that only takes focus from script never shows one. */
:focus-visible{outline:2px solid var(--s5);outline-offset:2px}
[tabindex="-1"]:focus,[tabindex="-1"]:focus-visible,#c:focus-visible{outline:none}
html[data-input="touch"] .sheet :is(button,a):focus-visible{outline:none}
@media(hover:none) and (pointer:coarse){html:not([data-input="key"]) .sheet :is(button,a):focus-visible{outline:none}}
#c{position:fixed;inset:0;display:block;width:100vw;height:100vh;height:100dvh;touch-action:none}
#sea{position:fixed;inset:0;display:block;width:100vw;height:100vh;height:100dvh;pointer-events:none;background:#124e70}
html.sea-lost #sea{visibility:hidden}html.sea-lost body{background:#124e70}
#perf{position:fixed;left:8px;bottom:calc(8px + env(safe-area-inset-bottom));z-index:40;pointer-events:none;white-space:pre;padding:6px 8px;background:#17181ce6;border:2px solid var(--k);color:var(--s4);font:8px/13px var(--brass)}#perf:empty{display:none}
#c,#hud,#enemy-bars,#loadout{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#hud,#loadout,#enemy-bars,.sheet,.hud-toggle,.music-toggle{image-rendering:pixelated}
.pixel{font-family:var(--brass);font-weight:400;letter-spacing:0}
/* A sheet's pieces are fetched with the page, so a frame never arrives after its words. */
body:after{content:url('/img/horde/ui/kit/panel-iron.png?v=1') url('/img/horde/ui/kit/panel-wood.png?v=1') url('/img/horde/ui/kit/plaque-iron.png?v=1') url('/img/horde/ui/kit/plaque-wood.png?v=1') url('/img/horde/ui/kit/plate.png?v=1') url('/img/horde/ui/kit/plate-down.png?v=1') url('/img/horde/ui/kit/plate-flat.png?v=1') url('/img/horde/ui/kit/paper.png?v=1') url('/img/horde/ui/kit/paper-down.png?v=1') url('/img/horde/ui/kit/paper-dim.png?v=1') url('/img/horde/ui/kit/btn-brass-down.png?v=1') url('/img/horde/ui/kit/btn-iron-down.png?v=1') url('/img/horde/ui/kit/slot.png?v=1') url('/img/horde/ui/kit/well.png?v=1') url('/img/horde/ui/kit/tag.png?v=1') url('/img/horde/ui/kit/awning.png?v=1');position:absolute;width:0;height:0;overflow:hidden;visibility:hidden}

/* ==========================================================================
   HUD: the panels over the game, the boss labels, the corner button and the
   bottom bar are the game's own, as they shipped before the menus were
   redrawn (the owner's choice). Their greys are the iron of the sheets and
   their slot is the kit's slot. They keep their own type sizes; the letters
   are the corrected Horde Brass. Two things differ from what shipped: the
   health bar's inner shadow and Pure Swag's lit rim are hard-edged, because
   nothing in this interface is blurred.
   ========================================================================== */
#hud,#loadout,#enemy-bars{color:#f2e4bd;font:14px/1.6 var(--brass);font-variant-numeric:tabular-nums}
#hud{position:fixed;inset:0 0 auto;z-index:2;padding:calc(12px + env(safe-area-inset-top)) 12px 0;display:flex;gap:10px;justify-content:space-between;align-items:flex-start;pointer-events:none}
.hud-panel{position:relative;background:#222327eb;border:2px solid #18191d;box-shadow:inset 0 0 0 2px #7c7d81,inset 0 0 0 4px #404145,0 3px 0 #18191d;padding:10px 12px}
.health-panel{width:244px;max-width:calc(100% - 142px)}
.hud-heading{display:flex;flex-wrap:wrap;gap:3px 6px;justify-content:space-between;align-items:center;color:#d6bd85;font:10px/1.3 var(--brass);letter-spacing:.3px;margin-bottom:5px}
#health-bar{height:16px;padding:2px;background:#15161b;border:1px solid #77777d;box-shadow:inset 0 1px 0 #07080a}
#health-fill{display:block;height:100%;width:100%;background:#c63b44;border-top:2px solid #ed7e78;border-bottom:2px solid #8e242f}
#health-bar.low #health-fill{background:#e2444f}
#health-bar.taking-hit{outline:2px solid #ffe0ba;box-shadow:0 0 0 4px #9b3e3e}
#lvl{display:flex;align-items:center;gap:9px;margin-top:7px}
#h-lv{font:12px/1.2 var(--brass);color:#ebe0b8;white-space:nowrap}
#lvl .bar{flex:1;height:10px;padding:2px;background:#16171b;box-shadow:0 0 0 1px #65666a;overflow:hidden}
#lvl .bar i{display:block;height:100%;width:0;background:#90afc2;border-top:2px solid #d2e1e8;border-bottom:1px solid #526878}
/* The HUD answers the game (JUICE in horde.js adds the class; -a and -b are one animation under two names, so a
   second blip restarts it without a reflow). Whole steps, never eased: the bar lights when a gem lands in it, the
   level hops when it turns over, the health bar is knocked when the fox is, the purse hops for a coin. */
#lvl:is(.xp-a,.xp-b) .bar i{animation:xp-a .2s steps(1,end)}#lvl.xp-b .bar i{animation-name:xp-b}
@keyframes xp-a{0%{background:#f4fbfd;border-top-color:#fff;border-bottom-color:#b9d2de}45%{background:#b9d2de;border-top-color:#eef6f9}100%{background:#90afc2}}
@keyframes xp-b{0%{background:#f4fbfd;border-top-color:#fff;border-bottom-color:#b9d2de}45%{background:#b9d2de;border-top-color:#eef6f9}100%{background:#90afc2}}
#h-lv:is(.lv-a,.lv-b){animation:lv-a .56s steps(1,end)}#h-lv.lv-b{animation-name:lv-b}
@keyframes lv-a{0%{transform:translateY(-6px);color:#fff}16%{transform:translateY(2px);color:#fff}32%{transform:translateY(-2px);color:#ffe9a8}48%{transform:none;color:#ffe9a8}72%,100%{transform:none}}
@keyframes lv-b{0%{transform:translateY(-6px);color:#fff}16%{transform:translateY(2px);color:#fff}32%{transform:translateY(-2px);color:#ffe9a8}48%{transform:none;color:#ffe9a8}72%,100%{transform:none}}
#health-bar:is(.hit-a,.hit-b){animation:hit-a .26s steps(1,end)}#health-bar.hit-b{animation-name:hit-b}
@keyframes hit-a{0%{transform:translate(-4px,2px)}22%{transform:translate(4px,-2px)}44%{transform:translate(-2px,0)}66%{transform:translate(2px,0)}88%,100%{transform:none}}
@keyframes hit-b{0%{transform:translate(-4px,2px)}22%{transform:translate(4px,-2px)}44%{transform:translate(-2px,0)}66%{transform:translate(2px,0)}88%,100%{transform:none}}
#h-coins-box:is(.coin-a,.coin-b){animation:coin-a .3s steps(1,end)}#h-coins-box.coin-b{animation-name:coin-b}
@keyframes coin-a{0%{transform:translateY(-4px);color:#fff6dc}34%{transform:translateY(2px)}68%,100%{transform:none}}
@keyframes coin-b{0%{transform:translateY(-4px);color:#fff6dc}34%{transform:translateY(2px)}68%,100%{transform:none}}
.attack-stat{color:#c4c5c9;font:9px/1.2 var(--brass);white-space:nowrap}.attack-stat b{font-weight:400;color:#f2e4bd}
.hud-bottom{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:9px;color:#c7c9ab;white-space:nowrap;font-size:10px}
.hud-bottom img{width:16px;height:16px}
#h-kills{font:16px/1 var(--brass);color:#ffdc91}
#h-spawn{margin-left:auto;color:#999a9e;font-size:9px}
#hud .right{margin-right:52px;min-width:80px;text-align:center;padding:10px 9px}
.timer-label{font-size:9px;letter-spacing:1.5px;color:#d6bd85;margin-bottom:6px}
.timer-label.overtime{color:#ffa778}
#h-time{font:24px/1 var(--brass);color:#fff1c9;white-space:nowrap}
#h-tier{margin-top:8px;font-size:8px;letter-spacing:.7px;color:#bbbcc0;white-space:nowrap}
@media(max-width:440px){.health-panel{padding:10px;width:220px}.hud-bottom{font-size:9px}#h-spawn{font-size:8px}#hud{gap:8px}#hud .right{padding:10px 6px;min-width:74px}}
/* coins and ripe crops hang under the health panel, clear of the timer */
.shop-coin{display:inline-block;flex:none;width:16px;height:16px;image-rendering:pixelated;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' shape-rendering='crispEdges'%3E%3Cpath fill='%234a3218' d='M3 0h3v1h2v2h1v3H8v2H6v1H3V8H1V6H0V3h1V1h2z'/%3E%3Cpath fill='%23e2ab4f' d='M3 1h3v1h1v1h1v3H7v1H6v1H3V7H2V6H1V3h1V2h1z'/%3E%3Cpath fill='%23ffe6a6' d='M3 2h2v1H3v2H2V3h1z'/%3E%3Cpath fill='%23a5712d' d='M6 4h1v2H6v1H4V6h2z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
html.shop-coin-art .shop-coin{background:url('/img/horde/shop/coin.png') var(--shop-coin-pos,center)/var(--shop-coin-size,100% 100%) no-repeat}
.hud-farm{position:absolute;left:-2px;top:calc(100% + 11px);display:flex;gap:6px;white-space:nowrap}
.hud-chip{display:flex;align-items:center;gap:6px;height:26px;padding:0 8px 0 7px;background:#222327eb;border:2px solid #18191d;box-shadow:inset 0 0 0 1px #6a6b6f,0 2px 0 #18191d;color:#ffdc91;font:12px/1 var(--brass)}
.hud-chip b{font-weight:400}
#h-ripe{gap:7px;background:#392d1aeb;box-shadow:inset 0 0 0 1px #c9984c,0 2px 0 #18191d;color:#ffe0a0;font-size:9px;letter-spacing:1px}
#h-ripe:before{content:'';flex:none;width:6px;height:6px;margin:0 1px 2px;background:#f1cc82;box-shadow:0 2px #836442}
html.shop-ripe-art #h-ripe:before{width:16px;height:16px;margin:0 -1px 0 -2px;box-shadow:none;background:url('/img/horde/shop/basket.png') var(--shop-ripe-pos,center)/var(--shop-ripe-size,100% 100%) no-repeat}
#h-ripe.ready{animation:ripe-lamp 2.6s steps(1,end) infinite}
@keyframes ripe-lamp{0%,9%{background:#5b4520eb;box-shadow:inset 0 0 0 1px #fff0c2,0 2px 0 #18191d;color:#fff6dc}4.5%,13.5%,100%{background:#392d1aeb;box-shadow:inset 0 0 0 1px #c9984c,0 2px 0 #18191d;color:#ffe0a0}}
/* The satchel (forage held), a quiet second row under the coin: smaller plates with a dimmer line, the count in sand
   and not in gold. A pick flies in from the island (drawn by the game) and its chip takes it: the plate is knocked
   down and springs up past its place, the picture squashes and stretches from its foot, the number drops in large
   and a "+1" lifts off. Every pose is held for a few frames and none is blended, as the rest of the HUD is keyed.
   While a kind's first is still in the air its place is already there, dimmed (.due). The last chip is brass: a
   whole wish is in the bag. */
.hud-satchel{position:absolute;left:-2px;top:calc(100% + 45px);display:flex;gap:4px;white-space:nowrap}
.hud-chip.forage{position:relative;gap:4px;height:22px;padding:0 6px 0 3px;box-shadow:inset 0 0 0 1px #4d4e53,0 2px 0 #18191d;color:#eedca4;font-size:9px}
.hud-chip.forage img{display:block;width:16px;height:16px;image-rendering:pixelated;transform-origin:50% 100%}
.hud-chip.forage b{display:block;min-width:5px;transform-origin:0 60%}
.hud-chip.forage.due{padding-right:3px;animation:forage-due .16s steps(1,end)}
.hud-chip.forage.due img{opacity:.38}
.hud-chip.forage.due b{display:none}
.hud-chip.forage.got{animation:forage-got .5s steps(1,end)}
.hud-chip.forage.got img{animation:forage-icon .5s steps(1,end)}
.hud-chip.forage.got b{animation:forage-count .5s steps(1,end)}
.hud-chip.forage.got:after{content:attr(data-plus);position:absolute;left:100%;top:-3px;margin-left:-7px;color:#fff6dc;font-size:9px;text-shadow:1px 0 #18191d,-1px 0 #18191d,0 1px #18191d,0 -1px #18191d;opacity:0;animation:forage-plus .7s steps(1,end)}
@keyframes forage-due{0%{transform:translateX(-8px);opacity:0}34%{transform:translateX(-5px);opacity:.6}67%{transform:translateX(-2px);opacity:1}100%{transform:none}}
@keyframes forage-got{0%{transform:translateY(4px);background:#4a3c22;box-shadow:inset 0 0 0 1px #fff6dc,0 2px 0 #18191d;color:#fff6dc}8%{transform:translateY(2px);background:#4a3c22;box-shadow:inset 0 0 0 1px #fff0c2,0 2px 0 #18191d;color:#fff6dc}16%{transform:translateY(-4px);box-shadow:inset 0 0 0 1px #fff0c2,0 2px 0 #18191d;color:#fff6dc}26%{transform:translateY(-7px);box-shadow:inset 0 0 0 1px #e8c070,0 2px 0 #18191d}38%{transform:translateY(-5px);box-shadow:inset 0 0 0 1px #c9984c,0 2px 0 #18191d}50%{transform:translateY(-1px);box-shadow:inset 0 0 0 1px #c9984c,0 2px 0 #18191d}60%{transform:translateY(2px)}72%{transform:translateY(-1px)}84%,100%{transform:none}}
@keyframes forage-icon{0%{transform:scale(1.5,.5)}8%{transform:scale(1.25,.75)}16%{transform:scale(.75,1.5)}26%{transform:scale(.875,1.375)}38%{transform:scale(1,1.25)}50%{transform:scale(1.125,.875)}60%{transform:scale(1.125,.875)}72%{transform:scale(1,1.125)}84%,100%{transform:none}}
@keyframes forage-count{0%,8%{transform:scale(1);opacity:0}16%{transform:scale(2.4);opacity:1;color:#fff6dc}26%{transform:scale(2);color:#fff6dc}38%{transform:scale(1.6);color:#ffe0a0}50%{transform:scale(1.2)}60%{transform:scale(.8)}72%,100%{transform:none}}
@keyframes forage-plus{0%,10%{opacity:0;transform:none}16%{opacity:1;transform:translateY(-2px)}30%{opacity:1;transform:translateY(-8px)}46%{opacity:1;transform:translateY(-12px)}62%{opacity:1;transform:translateY(-14px)}78%{opacity:.6;transform:translateY(-15px)}90%,100%{opacity:0;transform:translateY(-16px)}}
.hud-chip.wish{gap:5px;height:22px;padding:0 7px 0 3px;background:#392d1aeb;box-shadow:inset 0 0 0 1px #c9984c,0 2px 0 #18191d;color:#ffe0a0;font-size:9px;letter-spacing:1px;animation:ripe-lamp 2.6s steps(1,end) infinite}
.hud-chip.wish:before{content:'';flex:none;width:16px;height:16px;background:url('/img/horde/shop/wish.png') center/16px 16px no-repeat;image-rendering:pixelated}
/* boss labels ride over the world */
#enemy-bars{position:fixed;inset:0;overflow:hidden;pointer-events:none}
.enemy-health{position:absolute;text-align:center;color:#fff0cf;text-shadow:1px 1px #161319,-1px 1px #161319,1px -1px #161319,-1px -1px #161319}
.enemy-name{display:block;font-size:6px;line-height:11px;white-space:nowrap}
.enemy-health.boss .enemy-name{font-size:8px;line-height:15px;color:#ffe1a1}
.enemy-track{height:9px;border:2px solid #17131c;background:#38222d;clip-path:polygon(2px 0,calc(100% - 2px) 0,calc(100% - 2px) 1px,100% 1px,100% calc(100% - 1px),calc(100% - 2px) calc(100% - 1px),calc(100% - 2px) 100%,2px 100%,2px calc(100% - 1px),0 calc(100% - 1px),0 1px,2px 1px)}
.enemy-track i{display:block;height:100%;background:#d64250;border-top:1px solid #ff8c7b;border-bottom:1px solid #8a253b}
.enemy-hp{display:block;font-size:6px;line-height:9px;margin-top:2px}
/* Dirty Dan's flags (horde.js, "the champions' banners, drawn"): a pip for each lair over his name, struck out as
   its flag comes down (it jumps up at twice its size and drops back into place in whole pixels), and the health a
   pulse of the flags gives back, lit green on his bar for a moment. */
.dan-flags{position:absolute;left:0;right:0;bottom:100%;display:flex;justify-content:center;gap:4px;padding-bottom:1px}
.dan-pip{display:block;width:9px;height:11px;background-repeat:no-repeat;transform-origin:50% 100%}
.dan-pip.struck{animation:dan-pip .66s steps(1,end)}
@keyframes dan-pip{0%{transform:translate(0,-6px) scale(2)}15%{transform:translate(2px,-4px) scale(2)}30%{transform:translate(-2px,-1px)}45%{transform:translate(1px,0)}60%{transform:translate(-1px,0)}75%,100%{transform:none}}
@media(prefers-reduced-motion:reduce){.dan-pip.struck{animation:none}}
.dan-row .enemy-track{position:relative}
.dan-heal{position:absolute;top:0;bottom:0;background:#9be36a;border-top:1px solid #e6ffc8;border-bottom:1px solid #4d9a3a}
/* the one button in the corner: sound before a run, pause during it */
.music-toggle,.hud-toggle{position:fixed;top:calc(12px + env(safe-area-inset-top));right:12px;z-index:25;width:44px;height:44px;padding:8px;border:2px solid #18191d;background:#333438;box-shadow:inset 0 0 0 2px #7c7d81,inset 0 -4px #202125,0 3px #18191d;color:#f2e4bd;display:grid;place-items:center}
.music-toggle img,.hud-toggle img{width:24px;height:24px}
.music-toggle:active,.hud-toggle:active{transform:translateY(2px);box-shadow:inset 0 0 0 2px #c6b176}
#btn-music{z-index:40}   /* above the title and recap sheets, or it cannot be tapped there */
/* the bar at the foot: what you carry. Owned only; a charge belongs to its own slot. */
#loadout{position:fixed;z-index:2;bottom:calc(21px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;gap:17px;align-items:flex-end;width:max-content;max-width:calc(100% - 20px);pointer-events:none}
.equip-group{min-width:0}#weapons-group{flex:none}
.equip-label{color:#d2d3d7;background:#24252ae6;width:fit-content;padding:2px 5px;margin-bottom:5px;font:8px/1.4 var(--brass);letter-spacing:1px}
.equip-row{display:flex;gap:7px}
#items-group .equip-row{flex-wrap:wrap;row-gap:16px}
.equip-slot{flex:none;position:relative;width:46px;height:50px;display:grid;place-items:center;background:#2a2b2fed;border:2px solid #17181c;box-shadow:inset 0 0 0 2px #7c7d81,inset 0 -5px #3f4044,0 3px #17181c}
.equip-slot img{width:32px;height:32px}.equip-slot.empty img{opacity:.2}
#slot-skis img{width:40px;height:40px}
.equip-slot span{position:absolute;bottom:-5px;right:-3px;min-width:16px;height:16px;background:#e3b76e;color:#2d2e32;border:2px solid #232428;text-align:center;font:10px/12px var(--brass)}
.equip-slot.empty span{display:none}
.equip-slot small{position:absolute;bottom:2px;left:3px;font:8px/1 var(--brass);color:#f5ebcf;text-shadow:0 1px #000}
.item-track{position:absolute;bottom:-8px;left:0;right:0;height:7px;padding:1px;background:#171920;border:1px solid #6e777d}
.item-track i{display:block;height:100%;width:100%;background:#99d9e5}.low .item-track i{background:#ecad63}
button.equip-slot{padding:0;pointer-events:auto;touch-action:none;-webkit-touch-callout:none;user-select:none}
button.equip-slot:disabled{cursor:default}button.equip-slot:disabled img{opacity:.65}
#slot-nuke,#slot-swag,#slot-magnet,#slot-ice-crown{box-shadow:inset 0 0 0 2px #b298d6,inset 0 -5px #454052,0 3px #17181c}
#slot-pounce{box-shadow:inset 0 0 0 2px #7fbbc9,inset 0 -5px #34444f,0 3px #17181c}
#slot-anchor.selected{box-shadow:inset 0 0 0 2px #bce9ee,inset 0 -5px #3b6570,0 0 0 2px #60909b}
#slot-shovel.digging .item-track i{background:#d7ae72}
#slot-swag .item-track i{background:#c5a7ee}
#slot-swag.swag-active{box-shadow:inset 0 0 0 2px #ffe69a,inset 0 -5px #695329,0 0 0 2px #f7c859}
#slot-swag.swag-active .item-track i{background:#ffe69a}
#slot-ice-crown .item-track i{background:#b9edff}
#swag-mode{color:#ffe69a;white-space:nowrap}
#weapons-group.truce .equip-slot img{opacity:.3}#weapons-group.truce .equip-label::after{content:' \00b7  TRUCE';color:#99d9e5}
@media(max-width:380px){#loadout{gap:12px}.equip-row{gap:5px}.equip-slot{width:42px;height:46px}}
@media(max-width:360px){#loadout{gap:10px}.equip-row{gap:4px}.equip-slot{width:38px;height:44px}.equip-slot img{width:30px;height:30px}#slot-skis img{width:36px;height:36px}}
@media(max-height:480px){#loadout{bottom:calc(12px + env(safe-area-inset-bottom))}}
/* opacity follows simulation ticks; the camera changes only while opaque */
#ski-fade{position:fixed;inset:0;background:#13151b;pointer-events:none;z-index:28}

/* ==========================================================================
   Sheets: the dimmer, the slab, the plaque
   ========================================================================== */
.sheet{position:fixed;inset:0;z-index:30;display:none;place-items:center;align-items:safe center;overflow:auto;padding:calc(16px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));background:var(--dim)}
.sheet.on{display:grid}
/* While a sheet is open nothing of the game's own interface shows through the dimmer, to be sliced by a corner.
   (The pause has no dimmer and keeps the HUD: see Pause.) */
body:has(.sheet.on) :is(#hud,#loadout,#enemy-bars,#b-pause){visibility:hidden}
body:has(:is(#s-sound,#s-board,#s-handle).on) #btn-music,#btn-music.away{visibility:hidden}
/* A sheet opened over another (sound over pause, the board over the recap or the title) replaces it: one dimmer, one slab. */
.sheet.on:has(~ .sheet.on){background:none}
.sheet.on:has(~ .sheet.on)>*{visibility:hidden}
.card{position:relative;width:100%;max-width:400px}
.iron,.wood{--pad:6px;margin-top:18px;padding:6px var(--pad) 4px;border-style:solid;border-color:transparent;border-width:20px 20px 24px;background:var(--c2) padding-box}
.iron{border-image:url('/img/horde/ui/kit/panel-iron.png?v=1') 60 60 72 60 fill/20px 20px 24px stretch}
.wood{border-image:url('/img/horde/ui/kit/panel-wood.png?v=1') 60 60 72 60 fill/20px 20px 24px repeat}
/* a sheet arrives in three steps */
@keyframes card-in{from{transform:translateY(6px)}to{transform:none}}
.sheet.on .card{animation:card-in .12s steps(3,end) both}
#s-start.on .card{animation:none}
/* the plaque: iron in a brass rail with a rivet either side, or a board of the pier with two nails */
.plate{position:relative;z-index:1;display:block;width:fit-content;min-width:168px;max-width:calc(100% + 12px);margin:-44px auto 12px;padding:1px 22px 0;border-style:solid;border-color:transparent;border-width:10px 8px;border-image:url('/img/horde/ui/kit/plaque-iron.png?v=1') 30 24 30 24 fill/10px 8px stretch;background:var(--c0) padding-box;color:var(--b5);font:24px/27px var(--brass);font-weight:400;letter-spacing:0;text-align:center;text-shadow:0 3px 0 var(--k);white-space:nowrap}
.plate:before,.plate:after{content:'';position:absolute;top:50%;width:8px;height:8px;margin-top:-5px;background:url('/img/horde/ui/kit/rivet.png?v=1') 0 0/8px 8px no-repeat}
.plate:before{left:4px}.plate:after{right:4px}
.wood .plate{border-image:url('/img/horde/ui/kit/plaque-wood.png?v=1') 30 24 30 24 fill/10px 8px repeat;background-color:var(--wd1);color:var(--s5);text-shadow:0 3px 0 var(--wd0)}
.wood .plate:before,.wood .plate:after{margin-top:-4px;background-image:url('/img/horde/ui/kit/nail.png?v=1')}
/* words */
.card p{margin:0 0 12px;color:var(--c7);text-wrap:pretty}
.card p b{color:var(--s5)}
.label{margin:0;color:var(--c6);font:8px/9px var(--brass);font-weight:400;letter-spacing:1px;text-transform:uppercase}
.lede{margin:0 0 2px;color:var(--b5);text-align:center;font:16px/22px var(--brass);font-weight:400;text-shadow:0 2px 0 var(--k)}
.card .subtitle{margin:0 0 12px;text-align:center}
/* a heading over a list: its label, then a line cut into the face */
.end-equipment h2,.board-you h2{display:flex;align-items:center;gap:10px;margin:0 0 8px;color:var(--b4)}
.end-equipment h2:after,.board-you h2:after{content:'';flex:1;height:4px;border-top:2px solid var(--k);border-bottom:2px solid var(--c4)}
/* a divider with a stud on it */
.rule{position:relative;height:14px;margin:12px 0 4px}
.rule:before{content:'';position:absolute;left:0;right:0;top:5px;height:4px;border-top:2px solid var(--k);border-bottom:2px solid var(--c4)}
.rule:after{content:'';position:absolute;left:50%;top:0;width:26px;height:14px;margin-left:-13px;background:url('/img/horde/ui/kit/stud.png?v=1') center/14px 14px no-repeat var(--c2)}
/* buttons: brass for the one thing to do, iron for the rest, coral when it cannot be undone. Pressed, the face
   sinks two art pixels and the label goes with it. */
button.primary,button.ghost{position:relative;appearance:none;-webkit-appearance:none;display:block;width:100%;margin:8px 0 0;background:none;border-style:solid;border-color:transparent;border-width:8px 4px 6px;font:16px/18px var(--brass);text-align:center}
button.primary{min-height:52px;padding:4px 8px 8px;border-image:url('/img/horde/ui/kit/btn-brass.png?v=1') 42 30 42 30 fill/14px 10px stretch;color:var(--k);letter-spacing:1px;text-shadow:0 2px 0 var(--b4)}
button.ghost{min-height:44px;padding:0 8px 8px;border-image:url('/img/horde/ui/kit/btn-iron.png?v=1') 42 30 42 30 fill/14px 10px stretch;color:var(--s4);text-shadow:0 2px 0 var(--k)}
button.primary:active{border-image-source:url('/img/horde/ui/kit/btn-brass-down.png?v=1');padding:8px 8px 4px}
button.ghost:active{border-image-source:url('/img/horde/ui/kit/btn-iron-down.png?v=1');padding:4px 8px 4px}
button.ghost.danger{color:var(--r4)}
button.ghost.danger.armed{border-image-source:url('/img/horde/ui/kit/btn-coral.png?v=1');color:var(--s5);text-shadow:0 2px 0 var(--r0)}
button.ghost.danger.armed:active{border-image-source:url('/img/horde/ui/kit/btn-coral-down.png?v=1')}
button:disabled{cursor:default}
.btn-row{display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:8px}
.pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.pair>button{padding-left:0;padding-right:0}
@media(hover:hover){button.primary:hover{color:#000}button.ghost:hover{color:var(--s5)}button.ghost.danger:hover{color:#ff9478}}
/* the keyboard's place on a button is four brass corners round it */
button:is(.primary,.ghost):focus-visible{outline:none}
button:is(.primary,.ghost):focus-visible:after{content:'';position:absolute;inset:-14px -10px -12px;border:10px solid transparent;border-image:url('/img/horde/ui/kit/cursor.png?v=1') 30/10px stretch;pointer-events:none}
html[data-input="touch"] button:is(.primary,.ghost):focus-visible:after{content:none}
@media(hover:none) and (pointer:coarse){html:not([data-input="key"]) button:is(.primary,.ghost):focus-visible:after{content:none}}
.alpha-home{display:block;width:fit-content;margin:12px auto 0;padding:4px;color:var(--c7);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
/* the kit's recipes, named once */
.opt-icon,.shop-icon,.end-gear-icon{flex:none;position:relative;display:grid;place-items:center;border-style:solid;border-color:transparent;border-width:6px 4px 8px;border-image:url('/img/horde/ui/kit/slot.png?v=1') 18 12 24 12 fill/6px 4px 8px stretch;background:var(--c1) padding-box}
.end-score,.end-stats>div,.board-row,.pixel-input,.shop-purse,.reroll-count{border-style:solid;border-color:transparent;border-width:4px 2px 2px;border-image:url('/img/horde/ui/kit/well.png?v=1') 12 6 6 6 fill/4px 2px 2px stretch;background:var(--c0) padding-box}
.shop-count,.end-quantity,.shop-price{border:4px solid transparent;border-image:url('/img/horde/ui/kit/tag.png?v=1') 12 fill/4px stretch;background:var(--b4) padding-box;color:var(--k)}

/* ==========================================================================
   Level up
   ========================================================================== */
#up-title{padding-left:32px;padding-right:32px}
#up-title:before,#up-title:after{width:14px;height:18px;margin-top:-10px;background:url('/img/horde/ui/kit/gem.png?v=1') 0 0/14px 18px no-repeat}
#up-title:before{left:6px}#up-title:after{right:6px}
#up-opts{display:grid;gap:8px;grid-auto-rows:1fr}
/* a choice is an iron plate: the slot, what it is, what it does */
.opt{position:relative;appearance:none;-webkit-appearance:none;display:grid;grid-template-columns:56px minmax(0,1fr);align-items:center;gap:12px;width:100%;min-height:96px;margin:0;padding:6px 8px 6px 6px;text-align:left;color:var(--s4);border-style:solid;border-color:transparent;border-width:6px 6px 10px;border-image:url('/img/horde/ui/kit/plate.png?v=1') 18 18 30 18 fill/6px 6px 10px stretch;background:var(--c3) padding-box}
.opt-icon{width:56px;height:60px}
.opt-icon img{display:block;width:40px;height:40px;object-fit:contain}
.opt-copy{display:block;min-width:0}
.opt .category{display:block;color:var(--c6);font:8px/9px var(--brass);letter-spacing:1px}
.opt.new .category{color:var(--b4)}
.opt b{display:block;margin:5px 0 3px;color:var(--b5);font:16px/18px var(--brass);font-weight:400;text-shadow:0 2px 0 var(--k)}
.opt .description{display:block;color:var(--c7);text-wrap:pretty}
/* under the cursor or the keyboard the plate wears a brass collar; a finger never leaves one behind */
.opt:focus-visible{outline:none;border-image-source:url('/img/horde/ui/kit/plate-hot.png?v=1')}
html[data-input="touch"] .opt:focus-visible{border-image-source:url('/img/horde/ui/kit/plate.png?v=1')}
@media(hover:none) and (pointer:coarse){html:not([data-input="key"]) .opt:focus-visible{border-image-source:url('/img/horde/ui/kit/plate.png?v=1')}}
@media(hover:hover){.opt:hover{border-image-source:url('/img/horde/ui/kit/plate-hot.png?v=1')}}
/* pressed, it sinks a pixel (after the collar's rules, so a press shows through a hover) */
.opt:active,html .opt:active{border-image-source:url('/img/horde/ui/kit/plate-down.png?v=1');background-color:var(--c2);padding-top:8px;padding-bottom:4px}
/* reroll: an iron button with the dice seated in a slot in the choices' own column, and what is left let into it */
#b-reroll{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:12px;margin-top:10px;padding:0 6px 4px 8px;text-align:left}
#b-reroll .opt-icon{justify-self:center;width:46px;height:50px;margin:-2px 0 0}
#b-reroll .opt-icon img{width:32px;height:32px}
.reroll-count{display:flex;align-items:center;gap:6px;height:28px;padding:0 8px 0 9px;color:var(--c6);font:8px/9px var(--brass);letter-spacing:1px;text-transform:uppercase;text-shadow:none}
.reroll-count b{color:var(--b5);font:16px/18px var(--brass);font-weight:400;letter-spacing:0;text-shadow:0 2px 0 var(--k)}
#b-reroll:active{padding:4px 6px 0 8px}
#b-reroll:disabled{opacity:.45}

/* ==========================================================================
   Pause: the camera pulls back. The whole island (chart.webp: the game's own
   world, shot once) fills the sheet on the sea's deepest tone, the HUD stays
   over it and the slab docks where the bottom bar was: one way on, two side
   doors, one way out. horde.js lays out the picture, the horde, the fox and
   the pins once when the sheet opens ("the chart"); all the motion is here,
   in whole steps. --pull, --pull-x and --pull-y are the game's own view of
   the fox at that moment, --fox-pull the fox's size in it, and --u is one
   pixel of the fox.
   ========================================================================== */
#s-pause{align-items:end;padding-bottom:calc(12px + env(safe-area-inset-bottom))}
/* The sea is the picture's own edge tone, so it comes in with the picture: until then (a slow line, a failed
   request that the next pause asks for again) the sheet is the dimmed game, like every other sheet. */
#s-pause:has(.chart.ready){background:#124e70}
/* The one sheet the HUD stays over. Its panels carry the time and the count, so the slab does not repeat them. */
body:has(#s-pause.on):not(:has(#s-pause.on ~ .sheet.on)) #hud{visibility:visible;z-index:31}
/* Sound or the board opened from here replaces the slab, as over any sheet; the island and the fox stay, under
   their dimmer, and the names step aside so no slab cuts a word. */
#s-pause.on:has(.chart.ready):has(~ .sheet.on){background:#124e70}
#s-pause.on:has(~ .sheet.on)>.chart{visibility:visible}
#s-pause.on:has(~ .sheet.on) #chart-pins{visibility:hidden}
/* ...and they stand where the slab stood, under the thumb, with the island over them */
#s-pause.on ~ :is(#s-sound,#s-board).on{align-items:end;align-items:safe end;padding-bottom:calc(12px + env(safe-area-inset-bottom))}
.chart{position:fixed;inset:0;overflow:hidden;pointer-events:none}
.chart:not(.ready)>*{visibility:hidden}   /* until the picture is in: no fox or names over the game */
.chart-world{position:absolute;will-change:transform}
#chart-img,#chart-live{position:absolute;inset:0;display:block;width:100%;height:100%;image-rendering:auto}
#chart-pins{position:absolute;inset:0}
/* names and pins are the HUD's labels: Brass at 8 px, an ink line round every letter */
.chart-pin{position:absolute;padding-left:1px;white-space:nowrap;font:8px/9px var(--brass);letter-spacing:1px;text-shadow:1px 0 var(--k),-1px 0 var(--k),0 1px var(--k),0 -1px var(--k),1px 1px var(--k),-1px 1px var(--k),1px -1px var(--k),-1px -1px var(--k),0 2px var(--k)}
.chart-pin.name{color:var(--s5)}
.chart-pin.boss{display:grid;justify-items:center;gap:3px;color:var(--b5)}
.chart-pin.boss b{font-weight:400}
/* beside its boss, where over its head would print it on the fox or on another pin: skull nearest the boss */
.chart-pin.boss.row{grid-auto-flow:column;align-items:center;gap:4px}
.chart-pin.boss.west i{order:1}
.chart-pin.boss i{width:16px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' shape-rendering='crispEdges'%3E%3Cpath fill='%23161022' d='M6 3h12v3h3v11h-3v5H6v-5H3V6h3z'/%3E%3Cpath fill='%23f7eabe' d='M6 5h12v3h2v8h-4v4H8v-4H4V8h2z'/%3E%3Cpath fill='%23d63430' d='M6 9h4v4H6zm8 0h4v4h-4z'/%3E%3Cpath fill='%23161022' d='M11 14h2v3h-2z'/%3E%3C/svg%3E") 0 0/16px 16px no-repeat}
/* The fox is the game's own idle sheet, feet on the spot; the ring marks the spot. */
#chart-fox{position:absolute;width:calc(64*var(--u));height:calc(64*var(--u));transform-origin:calc(32*var(--u)) calc(56*var(--u));--ring:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 13' shape-rendering='crispEdges'%3E%3Cpath fill='%23161022' d='M29 0h11v1h-11zM7 1h9v1h-9zM26 1h4v1h-4zM39 1h4v1h-4zM4 2h4v1h-4zM15 2h4v1h-4zM25 2h2v1h-2zM30 2h9v1h-9zM42 2h2v1h-2zM3 3h2v1h-2zM8 3h7v1h-7zM18 3h2v1h-2zM24 3h2v1h-2zM27 3h4v1h-4zM38 3h4v1h-4zM43 3h2v1h-2zM2 4h2v1h-2zM5 4h4v1h-4zM14 4h4v1h-4zM19 4h2v1h-2zM23 4h2v1h-2zM26 4h2v1h-2zM41 4h2v1h-2zM44 4h2v1h-2zM2 5h1v1h-1zM4 5h2v1h-2zM17 5h2v1h-2zM20 5h1v1h-1zM23 5h1v1h-1zM25 5h2v1h-2zM42 5h2v1h-2zM45 5h1v1h-1zM2 6h1v1h-1zM4 6h1v1h-1zM18 6h1v1h-1zM20 6h1v1h-1zM23 6h1v1h-1zM25 6h1v1h-1zM43 6h1v1h-1zM45 6h1v1h-1zM2 7h1v1h-1zM4 7h2v1h-2zM17 7h2v1h-2zM20 7h1v1h-1zM23 7h1v1h-1zM25 7h2v1h-2zM42 7h2v1h-2zM45 7h1v1h-1zM2 8h2v1h-2zM5 8h4v1h-4zM14 8h4v1h-4zM19 8h2v1h-2zM23 8h2v1h-2zM26 8h2v1h-2zM41 8h2v1h-2zM44 8h2v1h-2zM3 9h2v1h-2zM8 9h7v1h-7zM18 9h2v1h-2zM24 9h2v1h-2zM27 9h4v1h-4zM38 9h4v1h-4zM43 9h2v1h-2zM4 10h4v1h-4zM15 10h4v1h-4zM25 10h2v1h-2zM30 10h9v1h-9zM42 10h2v1h-2zM7 11h9v1h-9zM26 11h4v1h-4zM39 11h4v1h-4zM29 12h11v1h-11z'/%3E%3Cpath fill='%23fff8de' d='M30 1h9v1h-9zM8 2h7v1h-7zM27 2h3v1h-3zM39 2h3v1h-3zM5 3h3v1h-3zM15 3h3v1h-3zM26 3h1v1h-1zM42 3h1v1h-1zM4 4h1v1h-1zM18 4h1v1h-1zM25 4h1v1h-1zM43 4h1v1h-1zM3 5h1v1h-1zM19 5h1v1h-1zM24 5h1v1h-1zM44 5h1v1h-1zM3 6h1v1h-1zM19 6h1v1h-1zM24 6h1v1h-1zM44 6h1v1h-1zM3 7h1v1h-1zM19 7h1v1h-1zM24 7h1v1h-1zM44 7h1v1h-1zM4 8h1v1h-1zM18 8h1v1h-1zM25 8h1v1h-1zM43 8h1v1h-1zM5 9h3v1h-3zM15 9h3v1h-3zM26 9h1v1h-1zM42 9h1v1h-1zM8 10h7v1h-7zM27 10h3v1h-3zM39 10h3v1h-3zM30 11h9v1h-9z'/%3E%3C/svg%3E")}
#chart-fox.soft{image-rendering:auto}
#chart-fox:before{content:'';position:absolute;left:calc(9*var(--u));top:calc(43*var(--u));width:calc(46*var(--u));height:calc(26*var(--u));background:var(--ring) 0 0/calc(92*var(--u)) calc(26*var(--u)) no-repeat}
#chart-fox:after{content:'';position:absolute;inset:0;background:url('/img/horde/fox_idle_down.png?v=1') 0 0/calc(512*var(--u)) calc(64*var(--u)) no-repeat}
/* Over an islet the token would hide what stands on it. There (.spot) the fox is at the picture's own scale, as the
   horde is (--u is then a sprite pixel at that scale, smoothed), standing in the ring at half its size with a caret
   under it. --m is one pixel of the ring and the caret, a whole number of device pixels; --rl and --rt put them on
   whole device pixels about the spot. */
#chart-fox.spot:before{left:var(--rl);top:var(--rt);width:calc(23*var(--m));height:calc(23*var(--m));background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 7' shape-rendering='crispEdges'%3E%3Cpath fill='%23161022' d='M5 0h1v1h-1zM4 1h3v1h-3zM3 2h5v1h-5zM2 3h7v1h-7zM1 4h9v1h-9zM0 5h11v2h-11z'/%3E%3Cpath fill='%23fff8de' d='M5 1h1v1h-1zM4 2h3v1h-3zM3 3h5v1h-5zM2 4h7v1h-7zM1 5h9v1h-9z'/%3E%3C/svg%3E") calc(6*var(--m)) calc(15*var(--m))/calc(11*var(--m)) calc(7*var(--m)) no-repeat,var(--ring) 0 0/calc(46*var(--m)) calc(13*var(--m)) no-repeat}
/* The pull-back: the game's own frame is its first step, so the picture comes in already on its way out. */
#s-pause.on .chart-world{animation:chart-pull .24s steps(1,end) both}
#s-pause.on #chart-fox{animation:chart-fox .24s steps(1,end) both}
#s-pause.on #chart-fox:after{animation:chart-idle 1s steps(8,end) infinite}
#s-pause.on #chart-fox:before{animation:chart-ring 1.2s steps(1,end) infinite}
#s-pause.on #chart-pins{animation:chart-pins .24s steps(1,end)}   /* no fill: once the pull-back is over the pins answer to the sheet again */
/* the ring and the caret come in with the pins, once the fox they mark has pulled back with the picture */
#s-pause.on #chart-fox.spot:before{animation:chart-pins .24s steps(1,end),chart-spot 1.2s steps(1,end) infinite}
@keyframes chart-pull{
  0%{transform:translate(calc(var(--pull-x)*.55),calc(var(--pull-y)*.55)) scale(calc(1 + (var(--pull) - 1)*.55))}
  25%{transform:translate(calc(var(--pull-x)*.28),calc(var(--pull-y)*.28)) scale(calc(1 + (var(--pull) - 1)*.28))}
  50%{transform:translate(calc(var(--pull-x)*.12),calc(var(--pull-y)*.12)) scale(calc(1 + (var(--pull) - 1)*.12))}
  75%{transform:translate(calc(var(--pull-x)*.04),calc(var(--pull-y)*.04)) scale(calc(1 + (var(--pull) - 1)*.04))}
  100%{transform:none}
}
@keyframes chart-fox{
  0%{transform:translate(calc(var(--pull-x)*.55),calc(var(--pull-y)*.55)) scale(calc(1 + (var(--fox-pull) - 1)*.55))}
  25%{transform:translate(calc(var(--pull-x)*.28),calc(var(--pull-y)*.28)) scale(calc(1 + (var(--fox-pull) - 1)*.28))}
  50%{transform:translate(calc(var(--pull-x)*.12),calc(var(--pull-y)*.12)) scale(calc(1 + (var(--fox-pull) - 1)*.12))}
  75%{transform:translate(calc(var(--pull-x)*.04),calc(var(--pull-y)*.04)) scale(calc(1 + (var(--fox-pull) - 1)*.04))}
  100%{transform:none}
}
@keyframes chart-idle{from{background-position:0 0}to{background-position:calc(-512*var(--u)) 0}}
@keyframes chart-ring{0%{background-position:0 0}50%,100%{background-position:calc(-46*var(--u)) 0}}
@keyframes chart-pins{0%{visibility:hidden}100%{visibility:visible}}
@keyframes chart-spot{0%{background-position:calc(6*var(--m)) calc(15*var(--m)),0 0}50%,100%{background-position:calc(6*var(--m)) calc(16*var(--m)),calc(-23*var(--m)) 0}}
/* The slab. What the two wells said is on the HUD above; they and the chart in words are kept for a screen reader. */
.pause-card :is(.pause-stats,.pause-where){position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pause-card .plate{margin-bottom:4px}
.pause-card .rule{margin:8px 0 0}
/* a wide screen: the slab stands beside the island */
@media(min-width:560px) and (min-aspect-ratio:5/4){
  #s-pause,#s-pause.on ~ :is(#s-sound,#s-board).on{align-items:center;align-items:safe center;justify-items:end;padding-right:max(calc(24px + env(safe-area-inset-right)),calc(50vw - 500px))}
  .pause-card,#s-pause.on ~ :is(#s-sound,#s-board).on>.card{max-width:340px}
  .pause-card .pair{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}   /* LEADERBOARD needs more than half of this row */
}
/* a phone on its side: the slab keeps to the foot of the screen, under the HUD's clock */
@media(min-width:560px) and (min-aspect-ratio:5/4) and (max-height:500px){#s-pause{align-items:end}}

/* ==========================================================================
   Title screen: window-filling layers and the game's own sprites.
   Generated by scripts/horde-splash-layout.py: edit there. --px is CSS px per
   pixel of EVERYTHING in the picture, scenery and sprites alike; --ui is the
   sign's own scale.
   ========================================================================== */
body:has(#s-start.on) :is(#hud,#loadout,#enemy-bars){visibility:hidden}
/* The panel's Sound opens the same sound settings; avoid duplicate access. */
body:has(#s-start.on):not(:has(.sheet.on:not(#s-start))) #btn-music{visibility:hidden}
#s-start{--sign-y:32px;--gap:12px;--edge:12px;--panel-w:min(344px,calc(100% - 16px));--panel-h:188px;--panel-bottom:20px;--sign-art:172;--rope-a:29;--rope-b:139;
  --cx:round(down,50%,var(--px));--panel-top:calc(100% - var(--panel-bottom) - var(--panel-h) - env(safe-area-inset-bottom));
  --floor:calc(var(--panel-top) - 12px);
  --sign-top:round(up,calc(var(--sign-y) + env(safe-area-inset-top)),var(--ui));
  /* the fox's ears come no higher than this: under the sign and a gap, and under the badge too where the fox is wide enough to stand below it (--badge-clear) */
  --slot-top:calc(var(--sign-top) + max(calc(44*var(--ui) + var(--gap)),calc(var(--badge-clear)*(39*var(--ui) + var(--badge-h) + 4px))));
  /* how far the fox's ears stand above the top of the bluff piece */
  --rise:calc(22*var(--px));
  /* fox, bluff and whoever swims in front of it sit between the sign and the panel, --lean of the spare room above them (half: midway); if there is no room, the fox keeps clear of the sign */
  --lean:.5;--spare:max(0px,calc(var(--floor) - var(--slot-top) - (106 + var(--drop))*var(--px)));
  --piece-y:round(up,calc(var(--slot-top) + var(--rise) + var(--spare)*var(--lean)),var(--px));
  --horizon:calc(var(--piece-y) + -6*var(--px));
  /* the sky between the sign's badge and the fox's ears; the gull flies there if it is deep enough, and if not, low over the sea behind the island */
  --badge-h:calc(22px*var(--badge));--sky-gap:calc(var(--piece-y) - var(--rise) - var(--sign-top) - 39*var(--ui) - var(--badge-h));
  background:var(--w5);padding:0;place-items:stretch;overflow:hidden;isolation:isolate}
#s-start .splash-scene{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;image-rendering:pixelated}
.splash-scene>div{position:absolute;background-repeat:no-repeat}
.splash-sky{inset:0;background:var(--w5)}
/* Two bands of the one cloud strip: high in the sky, and low over the horizon wherever the sky is deep enough to keep
   the two apart (a tall phone, a portrait monitor). The low band has no height otherwise. They drift at different
   speeds from different places, so the two never line up. */
.splash-clouds{left:0;right:0;top:calc(2*var(--px));height:calc(32*var(--px));background-image:url('/img/horde/ui/splash/layers/clouds.png?v=20261012-grid');background-size:calc(1440*var(--px)) calc(32*var(--px));background-repeat:repeat-x!important;animation:splash-clouds 600s steps(1440,end) infinite}
.splash-clouds.low{top:calc(var(--horizon) - 38*var(--px));height:clamp(0px,calc((var(--horizon) - 80*var(--px))*1000),calc(32*var(--px)));animation-duration:960s;animation-delay:-355s}
/* The islets hang from the middle of the picture, so each keeps its place beside the bluff: none stands behind the fox.
   The box is three periods wide and clipped by the scene: it passes both edges of any window. */
.splash-islets{left:calc(var(--cx) - 2160*var(--px));width:calc(4320*var(--px));top:calc(var(--horizon) - 64*var(--px));height:calc(64*var(--px));background-image:url('/img/horde/ui/splash/layers/islets.png?v=20261012-grid');background-size:calc(1440*var(--px)) calc(64*var(--px));background-position:0 0;background-repeat:repeat-x!important}
/* The deep tile starts at the horizon, UNDER the band strip (which is drawn after it), and its pattern is set down 96
   art pixels so it lies where it always did. If it began where the bands end, a display whose pixels are not a whole
   number of CSS px (Windows at 125%, most Android phones) rounds the two edges apart and the sky shows through as a
   hairline across the whole sea. */
.splash-deep{left:0;right:0;top:var(--horizon);bottom:0;background-image:url('/img/horde/ui/splash/layers/sea-deep.png?v=20261012-grid');background-size:calc(512*var(--px)) calc(128*var(--px));background-position:0 calc(96*var(--px));background-repeat:repeat!important}
.splash-sea{left:0;right:0;top:var(--horizon);height:calc(96*var(--px));background-image:url('/img/horde/ui/splash/layers/sea-bands.png?v=20261012-grid');background-size:calc(256*var(--px)) calc(96*var(--px));background-repeat:repeat-x!important}
/* The gull crosses the WHOLE window: it starts its own width beyond the left edge and flies 1400 art pixels, further
   than any window is wide, one art pixel a step, so it is never seen to appear or to stop (the title opens with it
   far beyond the right edge: it first flies in 24 seconds later). It is drawn after the palms and before the
   bluff and the cast: it comes in over the palm at one edge of the window and leaves over the palm at the other, in
   plain sight all the way to both edges, and passes behind the island and everyone on it (drawn before the palms it
   came out from behind a bush 60 px inside the window). Its line is clear of the fox, the sign and the
   badge in every layout: through the sky between the badge and the fox's ears where that is 26 art pixels deep or
   more (--sky-gap), and otherwise low over the sea, below the fox's feet, where the island itself hides it as it
   passes. The second term of `top` is 0 or enormous: it picks one line or the other, never a place between. */
.splash-gull{left:calc(-24*var(--px));top:min(calc(round(down,calc(var(--sign-top) + 39*var(--ui) + var(--badge-h) + (var(--sky-gap) - 14*var(--px))/2),var(--px)) + round(up,max(0px,calc(26*var(--px) - var(--sky-gap))),1px)*10000),calc(var(--piece-y) + 35*var(--px)));width:calc(24*var(--px));height:calc(14*var(--px));background-image:url('/img/horde/ui/splash/layers/gull.png?v=20261012-grid');background-size:calc(96*var(--px)) calc(14*var(--px));animation:splash-gull-cross 70s steps(1400,end) -46s infinite,splash-gull-wings .6s steps(4,end) infinite,splash-gull-glide 11s steps(1,end) infinite}
/* The palms. Each file's outer column is the plate's outer column: it sits on the window's edge, or beyond it,
   never inside the edge. A palm stands 30 (left) or 38 (right) art pixels out where the window is too narrow for a
   whole palm beside the island, and at least --lean-left / --lean-right out where the window is short for the
   picture (then the fronds lean in from the corner). Their place down the window is the horizon's, but the crown
   never leaves the top of the window: in a short sky the whole palm stands lower, nearer. */
#s-start{--palm-left:clamp(0px,calc((380*var(--px) - 100%)/2),calc(30*var(--px)));--palm-right:clamp(0px,calc((396*var(--px) - 100%)/2),calc(38*var(--px)));--palm-top:max(calc(var(--horizon) - 76*var(--px)),calc(-12*var(--px)))}
.splash-left{left:calc(-1*round(up,max(var(--palm-left),calc(var(--lean-left)*var(--px))),var(--px)));top:var(--palm-top);width:calc(55*var(--px));height:calc(124*var(--px));background-image:url('/img/horde/ui/splash/layers/foreground-left-short.png?v=20261012-grid');background-size:100% 100%}
.splash-right{left:round(up,calc(100% - 67*var(--px) + max(var(--palm-right),calc(var(--lean-right)*var(--px)))),var(--px));top:var(--palm-top);width:calc(67*var(--px));height:calc(123*var(--px));background-image:url('/img/horde/ui/splash/layers/foreground-right-short.png?v=20261012-grid');background-size:100% 100%}
.splash-bluff{left:round(down,calc(var(--cx) - 161*var(--px)/2),var(--px));top:var(--piece-y);width:calc(161*var(--px));height:calc(84*var(--px));background-image:url('/img/horde/ui/splash/layers/bluff-short.png?v=20261012-grid');background-size:100% 100%}
/* A sparkle on open sea: beside the panel where the window has sea either side of the island (--open-sea), under the
   island where there is room between it and the panel. No height otherwise. */
.splash-glint{right:calc(24*var(--px));top:calc(var(--piece-y) + (90 + var(--drop))*var(--px));width:calc(32*var(--px));height:clamp(calc(var(--open-sea)*8*var(--px)),calc((var(--floor) - var(--piece-y) - (102 + var(--drop))*var(--px))*1000),calc(8*var(--px)));background-image:url('/img/horde/ui/splash/glints.png');background-size:calc(96*var(--px)) calc(8*var(--px));animation:splash-glint 3s steps(3,end) infinite}
@keyframes splash-clouds{from{background-position:0 0}to{background-position:calc(-1440*var(--px)) 0}}
@keyframes splash-glint{from{background-position:0 0}to{background-position:calc(-96*var(--px)) 0}}
@keyframes splash-gull-wings{from{background-position:0 0}to{background-position:calc(-96*var(--px)) 0}}
@keyframes splash-gull-cross{from{translate:0 0}to{translate:calc(1400*var(--px)) 0}}
@keyframes splash-gull-glide{0%,100%{transform:translateY(0)}9%,91%{transform:translateY(calc(-1*var(--px)))}18%,82%{transform:translateY(calc(-2*var(--px)))}36%,64%{transform:translateY(calc(-1*var(--px)))}45%,55%{transform:translateY(calc(1*var(--px)))}50%{transform:translateY(calc(2*var(--px)))}}
/* The cast: children of the bluff, placed in its art pixels (the fox's feet at 90,27; each ghost's --x/--y), drawn
   from the game's sheets at the SAME --px as the bluff, and stepped through their own frames. --y is the row a
   ghost's hem rests on; with --sink it is a waterline, and that many rows of the ghost are clipped away beneath it.
   Down the window they are on the bluff's grid exactly. Across it they are on it exactly too wherever the window is
   tall for the picture (--nudge 0: every phone held upright). Where the window is short for the picture they stand
   --step to the right of it. A sprite is all hard outline and so is a cliff: on one grid the fox's side and the
   cracks in the rock under it fall in the same column of the screen, that column changes colour on a third of the
   window's height, and it reads, to the cut detector and in a small window to the eye, as one line down the picture.
   A step apart they never share a column. --step is one device pixel: 1 px, or half of one on a 2x or denser screen
   (an eighth of an art pixel at 4 px on a laptop; the first title used a whole CSS px everywhere, half an art pixel
   on a phone). Measured in Chrome: on a real 2x display the fox stands exactly 1 device pixel right of the bluff's
   grid; under DevTools' emulated device scale (what Puppeteer's deviceScaleFactor is) the half is painted as a whole
   CSS px. Still one pixel size, still apart. */
#s-start{--step:1px}
@media(min-resolution:1.5dppx){#s-start{--step:.5px}}
.splash-bluff *{position:absolute;background-repeat:no-repeat}
.cast-shadow{left:calc(77*var(--px) + var(--nudge));top:calc(23*var(--px));width:calc(26*var(--px));height:calc(7*var(--px));background-image:url('/img/horde/ui/splash/layers/cast-shadow.png?v=20261012-grid');background-size:100% 100%}
.cast-fox{left:calc(58*var(--px) + var(--nudge));top:calc(-29*var(--px));width:calc(64*var(--px));height:calc(64*var(--px));background-image:url('/img/horde/fox_idle_down.png?v=1');background-size:calc(512*var(--px)) calc(64*var(--px));animation:cast-fox 1s steps(8,end) infinite}
.cast-ghost{--rows:calc(30 - var(--sink));left:calc((var(--x) - 20)*var(--px) + var(--nudge));top:calc((var(--y) - var(--rows) - 4)*var(--px));width:calc(40*var(--px));height:calc((var(--rows) + 4)*var(--px))}
.cast-ghost.flip{transform:scaleX(-1)}
.cast-ghost>span{inset:0;overflow:hidden}
.cast-ghost>span>span{top:calc(4*var(--px));left:calc(6*var(--px));width:calc(28*var(--px));height:calc(30*var(--px));background-image:url('/img/horde/grain/ghost_down.png?v=1');background-size:calc(224*var(--px)) calc(30*var(--px));animation:cast-down var(--beat,.9s) steps(8,end) var(--from,0s) infinite,cast-bob var(--bob,2.6s) steps(1,end) var(--from,0s) infinite}
.cast-ghost.side>span>span{left:calc(5*var(--px));width:calc(30*var(--px));background-image:url('/img/horde/grain/ghost_side.png?v=1');background-size:calc(240*var(--px)) calc(30*var(--px));animation-name:cast-side,cast-bob}
/* under a ghost on dry land, its shadow on the ground it hovers over (drawn first, so the ghost is over it): every
   ghost in the game has one. No height where the ghost is in the sea. */
.cast-ghost:before{content:'';position:absolute;left:calc(9*var(--px));top:calc(100% - 2*var(--px));width:calc(22*var(--px));height:calc((1 - min(var(--sink),1))*7*var(--px));background:var(--shade,none) 0 0/100% 100% no-repeat}
/* the waterline: foam on the ghost's last dry rows, its ripple on the sea below. No height where the ghost is dry. */
.cast-ghost:after{content:'';position:absolute;left:0;top:calc(100% - 2*var(--px));width:100%;height:calc(min(var(--sink),1)*5*var(--px));background:url('/img/horde/ui/splash/layers/cast-foam.png?v=20261012-grid') 0 0/calc(80*var(--px)) calc(5*var(--px)) no-repeat;animation:cast-foam 1.4s steps(2,end) var(--from,0s) infinite}
.g1{--beat:.9s;--bob:2.6s;--from:-.3s}.g2{--beat:1s;--bob:3.1s;--from:-1.7s}.g3{--beat:.8s;--bob:2.3s;--from:-.9s}
.g4{--beat:1.1s;--bob:3.4s;--from:-2.2s}.g5{--beat:.9s;--bob:2.9s;--from:-1.2s}.g6{--beat:1s;--bob:2.5s;--from:-.6s}
@keyframes cast-fox{from{background-position:0 0}to{background-position:calc(-512*var(--px)) 0}}
@keyframes cast-down{from{background-position:0 0}to{background-position:calc(-224*var(--px)) 0}}
@keyframes cast-side{from{background-position:0 0}to{background-position:calc(-240*var(--px)) 0}}
@keyframes cast-bob{0%,100%{transform:translateY(0)}25%,75%{transform:translateY(calc(-1*var(--px)))}50%{transform:translateY(calc(-2*var(--px)))}}
@keyframes cast-foam{from{background-position:0 0}to{background-position:calc(-80*var(--px)) 0}}
#s-start .start-card{position:absolute;inset:0;max-width:none;width:auto;border:0;border-image:none;box-shadow:none;background:none;padding:0;z-index:1;pointer-events:none}
.title-sign{position:absolute;left:round(down,calc(var(--cx) - var(--sign-art)*var(--ui)/2),var(--ui));top:var(--sign-top);width:calc(var(--sign-art)*var(--ui));height:calc(44*var(--ui));animation:splash-sign-drop .48s steps(12,end) both}
@keyframes splash-sign-drop{from{transform:translateY(calc(-48*var(--ui)))}to{transform:translateY(0)}}
.title-sign:before,.title-sign:after{content:'';position:absolute;bottom:calc(100% - 5*var(--ui));width:calc(4*var(--ui));height:calc(var(--sign-top) + 60*var(--ui));background:url('/img/horde/ui/menu/rope-v.png') 0 100%/calc(4*var(--ui)) calc(4*var(--ui)) repeat-y}
.title-sign:before{left:calc(var(--rope-a)*var(--ui))}.title-sign:after{left:calc(var(--rope-b)*var(--ui))}
#s-start h1{width:100%;height:100%;margin:0;overflow:hidden;background:url('/img/horde/ui/splash/title.png') 0 0/100% 100% no-repeat;image-rendering:pixelated;font-size:0;line-height:0;color:transparent;text-shadow:none}
#fox-preview{display:none}
/* the badge is in the interface's small brass type (8 px), and in its 16 px under the sign at 4 px (--badge 2) */
.start-badge{position:absolute;right:calc(13*var(--ui));top:calc(39*var(--ui));padding:calc(5px*var(--badge)) calc(5px*var(--badge)) calc(4px*var(--badge)) calc(6px*var(--badge));border:calc(2px*var(--badge)) solid var(--k);background:var(--s4);box-shadow:inset 0 calc(-2px*var(--badge)) 0 var(--s1);color:var(--paper-ink);font:calc(8px*var(--badge))/calc(9px*var(--badge)) var(--brass);letter-spacing:calc(1px*var(--badge))}
.start-badge:before{content:'';position:absolute;left:50%;bottom:100%;width:calc(2px*var(--badge));height:calc(10px*var(--badge));margin:0 0 calc(2px*var(--badge)) calc(-1px*var(--badge));background:var(--k)}
.title-menu{position:absolute;left:round(down,calc((100% - var(--panel-w))/2),2px);bottom:calc(var(--panel-bottom) + env(safe-area-inset-bottom));width:var(--panel-w);height:var(--panel-h);border:6px solid transparent;border-image:url('/img/horde/ui/menu/hud.png') 3 fill/6px;padding:8px 8px 6px;text-align:center;pointer-events:auto}
#s-start #b-start{height:60px;min-height:60px;margin:0;font:24px/27px var(--brass);letter-spacing:3px;padding:4px 8px 8px 11px;text-shadow:0 3px 0 var(--b4)}
#s-start #b-start:active{padding:8px 8px 4px 11px}
#s-start .btn-row{grid-template-columns:minmax(0,1fr) 104px;gap:8px}
#s-start .btn-row button{font:16px/18px var(--brass)}
.title-note{margin-top:10px;padding:0 2px;text-align:center}
#s-start .start-controls{margin:0;color:var(--s4);font:12px/16px var(--text);white-space:nowrap}
#s-start .start-controls span+span{margin-left:4px}
#s-start .start-touch{display:none}
#s-start .alpha-home{margin:4px auto 0;padding:2px 4px;color:var(--c7)}
@media(hover:none) and (pointer:coarse){#s-start .start-desktop{display:none}#s-start .start-touch{display:inline}}
@media(max-height:800px){#s-start{--sign-y:20px;--panel-bottom:12px}}
@media(min-height:740px) and (max-width:599px){#s-start{--sign-y:48px}}
#s-start{--px:2px;--ui:2px;--badge:1;--badge-clear:0;--drop:2;--open-sea:0;--lean-left:0;--lean-right:0;--nudge:0px}#s-start .g1{--x:48;--y:8;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-turf.png?v=20261012-grid')}#s-start .g2{--x:58;--y:73;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-sand.png?v=20261012-grid')}#s-start .g3{--x:131;--y:41;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-turf.png?v=20261012-grid')}#s-start .g6{--x:145;--y:77;--sink:9}#s-start .g4{--x:17;--y:75;--sink:11}#s-start .g5{--x:116;--y:83;--sink:12}
@media(min-height:646px){#s-start{--px:2px;--ui:2px;--badge:1;--badge-clear:0;--drop:27;--open-sea:0;--lean-left:0;--lean-right:0;--nudge:0px}#s-start .g1{--x:48;--y:8;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-turf.png?v=20261012-grid')}#s-start .g2{--x:58;--y:73;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-sand.png?v=20261012-grid')}#s-start .g3{--x:131;--y:41;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-turf.png?v=20261012-grid')}#s-start .g6{--x:145;--y:90;--sink:9}#s-start .g4{--x:17;--y:96;--sink:11}#s-start .g5{--x:116;--y:108;--sink:12}}
@media(max-width:319px){#s-start{--px:2px;--ui:2px;--badge:1;--badge-clear:0;--drop:7;--open-sea:0;--lean-left:37;--lean-right:42;--nudge:var(--step)}#s-start .g1{--x:48;--y:8;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-turf.png?v=20261012-grid')}#s-start .g2{--x:58;--y:73;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-sand.png?v=20261012-grid')}#s-start .g3{--x:131;--y:41;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-turf.png?v=20261012-grid')}#s-start .g6{--x:134;--y:81;--sink:9}#s-start .g4{--x:26;--y:77;--sink:11}#s-start .g5{--x:92;--y:88;--sink:12}}
@media(min-width:600px){#s-start{--px:2px;--ui:2px;--badge:1;--badge-clear:0;--drop:0;--open-sea:1;--lean-left:0;--lean-right:0;--nudge:0px}#s-start .g1{--x:48;--y:8;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-turf.png?v=20261012-grid')}#s-start .g2{--x:58;--y:73;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-sand.png?v=20261012-grid')}#s-start .g3{--x:131;--y:41;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-turf.png?v=20261012-grid')}#s-start .g6{--x:178;--y:58;--sink:9}#s-start .g4{--x:-20;--y:72;--sink:11}#s-start .g5{--x:206;--y:80;--sink:12}}
@media(min-width:504px) and (min-height:656px){#s-start{--px:3px;--ui:2px;--badge:1;--badge-clear:0;--drop:2;--open-sea:0;--lean-left:0;--lean-right:22;--nudge:var(--step)}#s-start .g1{--x:48;--y:8;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-turf.png?v=20261012-grid')}#s-start .g2{--x:58;--y:73;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-sand.png?v=20261012-grid')}#s-start .g3{--x:131;--y:41;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-turf.png?v=20261012-grid')}#s-start .g6{--x:145;--y:77;--sink:9}#s-start .g4{--x:17;--y:75;--sink:11}#s-start .g5{--x:116;--y:83;--sink:12}}
@media(min-width:504px) and (min-height:803px){#s-start{--px:3px;--ui:2px;--badge:1;--badge-clear:0;--drop:27;--open-sea:0;--lean-left:0;--lean-right:0;--nudge:0px}#s-start .g1{--x:48;--y:8;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-turf.png?v=20261012-grid')}#s-start .g2{--x:58;--y:73;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-sand.png?v=20261012-grid')}#s-start .g3{--x:131;--y:41;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-turf.png?v=20261012-grid')}#s-start .g6{--x:145;--y:90;--sink:9}#s-start .g4{--x:17;--y:96;--sink:11}#s-start .g5{--x:116;--y:108;--sink:12}}
@media(min-width:900px) and (min-height:650px){#s-start{--px:3px;--ui:2px;--badge:1;--badge-clear:0;--drop:0;--open-sea:1;--lean-left:0;--lean-right:22;--nudge:var(--step)}#s-start .g1{--x:48;--y:8;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-turf.png?v=20261012-grid')}#s-start .g2{--x:58;--y:73;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-sand.png?v=20261012-grid')}#s-start .g3{--x:131;--y:41;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-turf.png?v=20261012-grid')}#s-start .g6{--x:178;--y:58;--sink:9}#s-start .g4{--x:-20;--y:72;--sink:11}#s-start .g5{--x:206;--y:80;--sink:12}}
@media(min-width:672px) and (min-height:768px){#s-start{--px:4px;--ui:2px;--badge:1;--badge-clear:1;--drop:2;--open-sea:0;--lean-left:28;--lean-right:38;--nudge:var(--step)}#s-start .g1{--x:48;--y:8;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-turf.png?v=20261012-grid')}#s-start .g2{--x:58;--y:73;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-sand.png?v=20261012-grid')}#s-start .g3{--x:131;--y:41;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-turf.png?v=20261012-grid')}#s-start .g6{--x:145;--y:77;--sink:9}#s-start .g4{--x:17;--y:75;--sink:11}#s-start .g5{--x:116;--y:83;--sink:12}}
@media(min-width:672px) and (min-height:984px){#s-start{--px:4px;--ui:2px;--badge:1;--badge-clear:1;--drop:27;--open-sea:0;--lean-left:0;--lean-right:22;--nudge:var(--step)}#s-start .g1{--x:48;--y:8;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-turf.png?v=20261012-grid')}#s-start .g2{--x:58;--y:73;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-sand.png?v=20261012-grid')}#s-start .g3{--x:131;--y:41;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-turf.png?v=20261012-grid')}#s-start .g6{--x:145;--y:90;--sink:9}#s-start .g4{--x:17;--y:96;--sink:11}#s-start .g5{--x:116;--y:108;--sink:12}}
@media(min-width:1200px) and (min-height:760px){#s-start{--px:4px;--ui:2px;--badge:1;--badge-clear:1;--drop:0;--open-sea:1;--lean-left:28;--lean-right:38;--nudge:var(--step)}#s-start .g1{--x:48;--y:8;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-turf.png?v=20261012-grid')}#s-start .g2{--x:58;--y:73;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-sand.png?v=20261012-grid')}#s-start .g3{--x:131;--y:41;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-turf.png?v=20261012-grid')}#s-start .g6{--x:178;--y:58;--sink:9}#s-start .g4{--x:-20;--y:72;--sink:11}#s-start .g5{--x:206;--y:80;--sink:12}}
@media(min-width:840px) and (min-height:896px){#s-start{--px:5px;--ui:2px;--badge:1;--badge-clear:1;--drop:2;--open-sea:0;--lean-left:28;--lean-right:38;--nudge:var(--step)}#s-start .g1{--x:48;--y:8;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-turf.png?v=20261012-grid')}#s-start .g2{--x:58;--y:73;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-sand.png?v=20261012-grid')}#s-start .g3{--x:131;--y:41;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-turf.png?v=20261012-grid')}#s-start .g6{--x:145;--y:77;--sink:9}#s-start .g4{--x:17;--y:75;--sink:11}#s-start .g5{--x:116;--y:83;--sink:12}}
@media(min-width:840px) and (min-height:1141px){#s-start{--px:5px;--ui:2px;--badge:1;--badge-clear:1;--drop:27;--open-sea:0;--lean-left:0;--lean-right:22;--nudge:var(--step)}#s-start .g1{--x:48;--y:8;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-turf.png?v=20261012-grid')}#s-start .g2{--x:58;--y:73;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-sand.png?v=20261012-grid')}#s-start .g3{--x:131;--y:41;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-turf.png?v=20261012-grid')}#s-start .g6{--x:145;--y:90;--sink:9}#s-start .g4{--x:17;--y:96;--sink:11}#s-start .g5{--x:116;--y:108;--sink:12}}
@media(min-width:1500px) and (min-height:886px){#s-start{--px:5px;--ui:2px;--badge:1;--badge-clear:1;--drop:0;--open-sea:1;--lean-left:28;--lean-right:38;--nudge:var(--step)}#s-start .g1{--x:48;--y:8;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-turf.png?v=20261012-grid')}#s-start .g2{--x:58;--y:73;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-sand.png?v=20261012-grid')}#s-start .g3{--x:131;--y:41;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-turf.png?v=20261012-grid')}#s-start .g6{--x:178;--y:58;--sink:9}#s-start .g4{--x:-20;--y:72;--sink:11}#s-start .g5{--x:206;--y:80;--sink:12}}
@media(min-width:1008px) and (min-height:1044px){#s-start{--px:6px;--ui:3px;--badge:1;--badge-clear:1;--drop:2;--open-sea:0;--lean-left:28;--lean-right:38;--nudge:var(--step)}#s-start .g1{--x:48;--y:8;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-turf.png?v=20261012-grid')}#s-start .g2{--x:58;--y:73;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-sand.png?v=20261012-grid')}#s-start .g3{--x:131;--y:41;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-turf.png?v=20261012-grid')}#s-start .g6{--x:145;--y:77;--sink:9}#s-start .g4{--x:17;--y:75;--sink:11}#s-start .g5{--x:116;--y:83;--sink:12}}
@media(min-width:1008px) and (min-height:1338px){#s-start{--px:6px;--ui:3px;--badge:1;--badge-clear:1;--drop:27;--open-sea:0;--lean-left:0;--lean-right:22;--nudge:var(--step)}#s-start .g1{--x:48;--y:8;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-turf.png?v=20261012-grid')}#s-start .g2{--x:58;--y:73;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-sand.png?v=20261012-grid')}#s-start .g3{--x:131;--y:41;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-turf.png?v=20261012-grid')}#s-start .g6{--x:145;--y:90;--sink:9}#s-start .g4{--x:17;--y:96;--sink:11}#s-start .g5{--x:116;--y:108;--sink:12}}
@media(min-width:1800px) and (min-height:1032px){#s-start{--px:6px;--ui:3px;--badge:1;--badge-clear:1;--drop:0;--open-sea:1;--lean-left:28;--lean-right:38;--nudge:var(--step)}#s-start .g1{--x:48;--y:8;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-turf.png?v=20261012-grid')}#s-start .g2{--x:58;--y:73;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-sand.png?v=20261012-grid')}#s-start .g3{--x:131;--y:41;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-turf.png?v=20261012-grid')}#s-start .g6{--x:178;--y:58;--sink:9}#s-start .g4{--x:-20;--y:72;--sink:11}#s-start .g5{--x:206;--y:80;--sink:12}}
@media(min-width:1176px) and (min-height:1152px){#s-start{--px:7px;--ui:3px;--badge:1;--badge-clear:1;--drop:2;--open-sea:0;--lean-left:37;--lean-right:42;--nudge:var(--step)}#s-start .g1{--x:48;--y:8;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-turf.png?v=20261012-grid')}#s-start .g2{--x:58;--y:73;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-sand.png?v=20261012-grid')}#s-start .g3{--x:131;--y:41;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-turf.png?v=20261012-grid')}#s-start .g6{--x:145;--y:77;--sink:9}#s-start .g4{--x:17;--y:75;--sink:11}#s-start .g5{--x:116;--y:83;--sink:12}}
@media(min-width:1176px) and (min-height:1495px){#s-start{--px:7px;--ui:3px;--badge:1;--badge-clear:1;--drop:27;--open-sea:0;--lean-left:28;--lean-right:38;--nudge:var(--step)}#s-start .g1{--x:48;--y:8;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-turf.png?v=20261012-grid')}#s-start .g2{--x:58;--y:73;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-sand.png?v=20261012-grid')}#s-start .g3{--x:131;--y:41;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-turf.png?v=20261012-grid')}#s-start .g6{--x:145;--y:90;--sink:9}#s-start .g4{--x:17;--y:96;--sink:11}#s-start .g5{--x:116;--y:108;--sink:12}}
@media(min-width:2100px) and (min-height:1138px){#s-start{--px:7px;--ui:3px;--badge:1;--badge-clear:1;--drop:0;--open-sea:1;--lean-left:37;--lean-right:42;--nudge:var(--step)}#s-start .g1{--x:48;--y:8;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-turf.png?v=20261012-grid')}#s-start .g2{--x:58;--y:73;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-sand.png?v=20261012-grid')}#s-start .g3{--x:131;--y:41;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-turf.png?v=20261012-grid')}#s-start .g6{--x:178;--y:58;--sink:9}#s-start .g4{--x:-20;--y:72;--sink:11}#s-start .g5{--x:206;--y:80;--sink:12}}
@media(min-width:1344px) and (min-height:1320px){#s-start{--px:8px;--ui:4px;--badge:2;--badge-clear:1;--drop:2;--open-sea:0;--lean-left:37;--lean-right:42;--nudge:var(--step)}#s-start .g1{--x:48;--y:8;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-turf.png?v=20261012-grid')}#s-start .g2{--x:58;--y:73;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-sand.png?v=20261012-grid')}#s-start .g3{--x:131;--y:41;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-turf.png?v=20261012-grid')}#s-start .g6{--x:145;--y:77;--sink:9}#s-start .g4{--x:17;--y:75;--sink:11}#s-start .g5{--x:116;--y:83;--sink:12}}
@media(min-width:1344px) and (min-height:1712px){#s-start{--px:8px;--ui:4px;--badge:2;--badge-clear:1;--drop:27;--open-sea:0;--lean-left:28;--lean-right:38;--nudge:var(--step)}#s-start .g1{--x:48;--y:8;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-turf.png?v=20261012-grid')}#s-start .g2{--x:58;--y:73;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-sand.png?v=20261012-grid')}#s-start .g3{--x:131;--y:41;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-turf.png?v=20261012-grid')}#s-start .g6{--x:145;--y:90;--sink:9}#s-start .g4{--x:17;--y:96;--sink:11}#s-start .g5{--x:116;--y:108;--sink:12}}
@media(min-width:2400px) and (min-height:1304px){#s-start{--px:8px;--ui:4px;--badge:2;--badge-clear:1;--drop:0;--open-sea:1;--lean-left:37;--lean-right:42;--nudge:var(--step)}#s-start .g1{--x:48;--y:8;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-turf.png?v=20261012-grid')}#s-start .g2{--x:58;--y:73;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-sand.png?v=20261012-grid')}#s-start .g3{--x:131;--y:41;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-turf.png?v=20261012-grid')}#s-start .g6{--x:178;--y:58;--sink:9}#s-start .g4{--x:-20;--y:72;--sink:11}#s-start .g5{--x:206;--y:80;--sink:12}}
@media(min-width:660px) and (max-height:547px),(min-width:1000px) and (max-height:649px){#s-start{--px:2px;--ui:2px;--badge:1;--badge-clear:0;--drop:2;--open-sea:0;--lean-left:37;--lean-right:42;--nudge:var(--step)}#s-start .g1{--x:48;--y:8;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-turf.png?v=20261012-grid')}#s-start .g2{--x:58;--y:73;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-sand.png?v=20261012-grid')}#s-start .g3{--x:131;--y:41;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-turf.png?v=20261012-grid')}#s-start .g6{--x:145;--y:77;--sink:9}#s-start .g4{--x:17;--y:75;--sink:11}#s-start .g5{--x:116;--y:83;--sink:12}}
@media(min-width:900px) and (max-height:547px),(min-width:1000px) and (max-height:649px){#s-start{--px:2px;--ui:2px;--badge:1;--badge-clear:0;--drop:3;--open-sea:0;--lean-left:37;--lean-right:42;--nudge:var(--step)}#s-start .g1{--x:48;--y:8;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-turf.png?v=20261012-grid')}#s-start .g2{--x:58;--y:73;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-sand.png?v=20261012-grid')}#s-start .g3{--x:131;--y:41;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-turf.png?v=20261012-grid')}#s-start .g6{--x:170;--y:55;--sink:9}#s-start .g4{--x:-8;--y:73;--sink:11}#s-start .g5{--x:149;--y:84;--sink:12}}
@media(min-width:1000px) and (min-height:452px) and (max-height:649px){#s-start{--px:3px;--ui:2px;--badge:1;--badge-clear:0;--drop:3;--open-sea:0;--lean-left:37;--lean-right:42;--nudge:var(--step)}#s-start .g1{--x:48;--y:8;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-turf.png?v=20261012-grid')}#s-start .g2{--x:58;--y:73;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-sand.png?v=20261012-grid')}#s-start .g3{--x:131;--y:41;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-turf.png?v=20261012-grid')}#s-start .g6{--x:170;--y:55;--sink:9}#s-start .g4{--x:-8;--y:73;--sink:11}#s-start .g5{--x:149;--y:84;--sink:12}}
@media(min-width:385px) and (max-width:659px) and (max-height:547px){#s-start{--px:2px;--ui:2px;--badge:1;--badge-clear:0;--drop:2;--open-sea:0;--lean-left:37;--lean-right:42;--nudge:var(--step)}#s-start .g1{--x:48;--y:8;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-turf.png?v=20261012-grid')}#s-start .g2{--x:58;--y:73;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-sand.png?v=20261012-grid')}#s-start .g3{--x:131;--y:41;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-turf.png?v=20261012-grid')}#s-start .g6{--x:145;--y:77;--sink:9}#s-start .g4{--x:17;--y:75;--sink:11}#s-start .g5{--x:116;--y:83;--sink:12}}
@media(max-width:547px) and (max-height:547px){#s-start{--px:1px;--ui:1px;--badge:1;--badge-clear:1;--drop:2;--open-sea:0;--lean-left:0;--lean-right:0;--nudge:0px}#s-start .g1{--x:48;--y:8;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-turf.png?v=20261012-grid')}#s-start .g2{--x:58;--y:73;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-sand.png?v=20261012-grid')}#s-start .g3{--x:131;--y:41;--sink:0;--shade:url('/img/horde/ui/splash/layers/ghost-shadow-turf.png?v=20261012-grid')}#s-start .g6{--x:145;--y:77;--sink:9}#s-start .g4{--x:17;--y:75;--sink:11}#s-start .g5{--x:116;--y:83;--sink:12}}
/* a window too short to stack sign, island and panel: the island and its sign take the left, the panel the right.
   There is no line across such a window that is clear of the sign, the fox and the panel: no gull. */
@media(min-width:660px) and (max-height:547px),(min-width:1000px) and (max-height:649px),(min-width:385px) and (max-width:659px) and (max-height:547px){#s-start{--sign-y:12px;--panel-w:312px;--panel-bottom:12px;--cx:round(down,calc((100% - var(--panel-w) - 24px - env(safe-area-inset-right) + env(safe-area-inset-left))/2),var(--px));--floor:calc(100% - var(--edge) - env(safe-area-inset-bottom))}.title-menu{left:auto;right:calc(12px + env(safe-area-inset-right))}#s-start :is(.splash-right,.splash-gull,.splash-glint){display:none}}
/* ... and too narrow for that panel beside the island: the three buttons one above another and the way back, no hint */
@media(min-width:385px) and (max-width:659px) and (max-height:547px){#s-start{--panel-w:200px;--panel-h:auto}#s-start .btn-row{grid-template-columns:minmax(0,1fr)}#s-start .btn-row button+button{margin-top:0}#s-start .start-controls{display:none}.title-note{margin-top:6px}}
/* the shortest of them: less air round the sign, then a sign at half size, then the whole picture at 1 px */
@media(max-height:341px){#s-start{--sign-y:4px;--gap:4px;--edge:4px;--panel-bottom:4px}}
@media(max-height:317px){#s-start{--ui:1px;--badge-clear:1}}
@media(max-height:290px){#s-start{--px:1px}}
/* the narrow board: the lettering whole, the plank ends trimmed */
@media(max-width:359px),(max-width:703px) and (max-height:547px){#s-start{--sign-art:156;--rope-a:21;--rope-b:131}#s-start h1{background-image:url('/img/horde/ui/splash/layers/title-narrow.png?v=20261012-grid')}}
/* a window narrower than the sign's lettering at 2 px (a folding phone's cover screen): the whole sign at half size,
   and a panel that fits its own words: the hint on two lines, Leaderboard and Sound one above the other (side by side
   there is no room for "Leaderboard" in its button) */
@media(max-width:311px){#s-start{--ui:1px;--badge-clear:1;--sign-art:172;--rope-a:29;--rope-b:139;--panel-h:256px}#s-start h1{background-image:url('/img/horde/ui/splash/title.png')}#s-start .start-controls{white-space:normal}#s-start .start-controls span:last-child{display:block;margin-left:0}#s-start .btn-row{grid-template-columns:minmax(0,1fr)}#s-start .btn-row button+button{margin-top:0}}
@media(prefers-reduced-motion:reduce){#s-start .title-sign,#s-start .splash-scene>div,#s-start .splash-bluff *,#s-start .cast-ghost:after{animation:none}#s-start .splash-gull{display:none}}

/* ==========================================================================
   Market
   ========================================================================== */
#s-shop{--shop-pad:12px;padding-top:calc(var(--shop-pad) + env(safe-area-inset-top));padding-bottom:calc(var(--shop-pad) + env(safe-area-inset-bottom));-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.shop-card{display:flex;flex-direction:column;min-height:0;max-height:calc(100vh - 18px - 2*var(--shop-pad) - env(safe-area-inset-top) - env(safe-area-inset-bottom));max-height:calc(100dvh - 18px - 2*var(--shop-pad) - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
.shop-card>*{flex-shrink:0}
/* the stall: its sign nailed over the beam, the awning hanging from the beam behind it, then where you are and what you hold */
.shop-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 10px;margin:0 0 8px}
/* the market's sign is the stall's fascia: it runs the width of the sheet, from corner plate to corner plate */
.shop-head .plate{grid-column:1/-1;width:calc(100% + 2*var(--pad));max-width:none;margin:-44px calc(-1*var(--pad)) 24px}
.shop-awning{position:absolute;inset:-8px 0 auto;height:34px;background:url('/img/horde/ui/kit/awning.png?v=1') 50% 0/32px 34px repeat-x;pointer-events:none}
.shop-place{color:var(--b4)}
.shop-purse{position:relative;display:flex;align-items:center;gap:6px;height:28px;padding:0 6px 0 4px}
.shop-purse .shop-coin{width:16px;height:16px}
#shop-coins{min-width:calc(var(--digits,1)*12px);font:16px/18px var(--brass);font-weight:400;color:var(--b5);text-align:right}
.shop-purse.spend #shop-coins{color:var(--s5)}
.shop-spent{position:absolute;right:4px;top:calc(100% + 6px);z-index:2;color:var(--r4);font:700 12px/16px var(--text);white-space:nowrap}
.shop-spent.gain{color:var(--g1)}   /* a hand-in pays under the lit WISHES tab: cream on cream could not be read */
/* shelves: the one you are at is a card of the same sand as its goods; the others lie flat in the sheet */
/* (four shelves since the wish list: each is as wide as its word plus an even share of what is left, which is what lets
   PANTRY and WISHES sit beside FARM and GEAR on a 375 px phone) */
.shop-tabs{display:flex;gap:4px}
.shop-tab{appearance:none;-webkit-appearance:none;position:relative;flex:1 1 auto;min-width:0;min-height:44px;margin:0;padding:6px 0 0;background:none;border-style:solid;border-color:transparent;border-width:4px 4px 6px;border-image:url('/img/horde/ui/kit/plate-flat.png?v=1') 18 18 30 18 fill/6px 6px 10px stretch;color:var(--c6);font:16px/18px var(--brass)}
.shop-tab[aria-selected="true"]{padding-top:2px;border-image:url('/img/horde/ui/kit/paper.png?v=1') 12 12 18 12 fill/4px 4px 6px stretch;color:var(--paper-ink)}
.shop-tab:focus-visible{z-index:1}
.shop-dot{display:none;position:absolute;top:0;right:0;width:6px;height:6px;background:var(--b4);box-shadow:0 2px 0 var(--b1)}
.shop-tab[data-ready] .shop-dot{display:block}
.shop-tab[aria-selected="true"] .shop-dot{background:var(--b3);box-shadow:0 2px 0 var(--b2)}
.shop-card .shop-strap{margin:8px 0 0;color:var(--c7)}
/* the list scrolls inside the sheet on short screens; stepped bands and a chevron say there is more */
.shop-tray{position:relative;display:flex;flex:0 1 auto;min-height:138px;margin-top:8px}
.shop-list{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;gap:6px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.shop-list::-webkit-scrollbar{display:none}
.shop-tray:before,.shop-tray:after{content:'';position:absolute;left:0;right:0;height:18px;z-index:2;pointer-events:none;visibility:hidden}
.shop-tray:before{top:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 5' shape-rendering='crispEdges'%3E%3Cpath fill='%23ecc670' d='M4 0h1v1h1v1h1v1h1v1h1v1H7V4H6V3H5V2H4v1H3v1H2v1H0V4h1V3h1V2h1V1h1z'/%3E%3C/svg%3E") center 4px/18px 10px no-repeat,linear-gradient(#292a30 0 6px,#292a30d9 6px 10px,#292a3099 10px 14px,#292a304d 14px)}
.shop-tray:after{bottom:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 5' shape-rendering='crispEdges'%3E%3Cpath fill='%23ecc670' d='M0 0h2v1h1v1h1v1h1V2h1V1h1V0h2v1H8v1H7v1H6v1H5v1H4V4H3V3H2V2H1V1H0z'/%3E%3C/svg%3E") center 6px/18px 10px no-repeat,linear-gradient(#292a304d 0 4px,#292a3099 4px 8px,#292a30d9 8px 12px,#292a30 12px)}
.shop-tray.more-up:before,.shop-tray.more-down:after{visibility:visible}
.shop-empty{flex:none;margin:0;padding:22px 12px;border:2px dashed var(--c5);color:var(--c6);text-align:center}
.shop-live{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* goods. Sand with a brass price: tap to buy. Faded: not yet, and the side says why. Iron, lying flat: done. */
.shop-row{appearance:none;-webkit-appearance:none;position:relative;flex:none;display:grid;grid-template-columns:46px minmax(0,1fr);align-items:center;gap:10px;width:100%;min-height:66px;margin:0;padding:2px 6px 2px 4px;text-align:left;background:none;color:var(--paper-ink);border-style:solid;border-color:transparent;border-width:4px 4px 6px;border-image:url('/img/horde/ui/kit/paper.png?v=1') 12 12 18 12 fill/4px 4px 6px stretch}
.shop-row:focus-visible{outline:2px solid var(--b5);outline-offset:2px}
#s-shop.by-touch :is(.shop-row,.shop-tab,#b-shop-close):focus-visible{outline:none}
#s-shop.by-touch #b-shop-close:focus-visible:after{content:none}
.shop-icon{width:46px;height:50px}
.shop-icon img{display:block;width:32px;height:32px;object-fit:contain}
.shop-icon:has(.shop-pips:not([hidden])){margin-bottom:6px}
.shop-pips{position:absolute;left:-4px;right:-4px;bottom:-14px;display:flex;gap:2px;height:8px;padding:2px;background:var(--k)}
.shop-pips i{flex:1;background:var(--c4)}
.shop-pips i.on{background:var(--b4)}
.shop-count,.end-quantity{position:absolute;right:-8px;bottom:-10px;min-width:16px;height:16px;padding:0 1px 0 2px;text-align:center;font:8px/9px var(--brass)}
.shop-copy{display:block;min-width:0}
.shop-side{float:right;display:grid;justify-items:end;gap:2px;margin:0 0 0 8px}
.shop-row b{display:block;padding:3px 0 1px;font:16px/18px var(--brass);font-weight:400;color:var(--paper-ink)}
.shop-row .description{display:block;clear:right;color:var(--paper-soft);text-wrap:pretty}
.shop-row[data-can="poor"] .description{clear:none}
.shop-why{display:block;clear:right;margin-top:2px;color:var(--r2);font-weight:700}
.shop-glyph{display:block;flex:none}
.shop-price{display:flex;align-items:center;gap:4px;height:26px;padding:0 3px 2px 1px;font:16px/18px var(--brass)}
.shop-price .shop-coin{width:16px;height:16px}
.shop-note{color:var(--r2);font:700 12px/16px var(--text);white-space:nowrap}
.shop-mark{display:flex;align-items:center;gap:6px;height:22px;padding:0 6px 0 5px;border:2px solid var(--b2);color:var(--b4);font:8px/9px var(--brass);letter-spacing:1px}
@media(hover:hover){
  .shop-row[data-can="ok"]:hover{outline:2px solid var(--b5);outline-offset:2px}
  .shop-tab[aria-selected="false"]:hover{color:var(--s4)}
}
.shop-row[data-can="ok"]:active{border-image-source:url('/img/horde/ui/kit/paper-down.png?v=1')}
.shop-row[aria-disabled="true"]{cursor:default}
.shop-row:is([data-can="poor"],[data-can="blocked"]){border-image-source:url('/img/horde/ui/kit/paper-dim.png?v=1')}
.shop-row:is([data-can="poor"],[data-can="blocked"]) b{color:#4e4654}
.shop-row:is([data-can="poor"],[data-can="blocked"]) .description{color:#5e5762}
.shop-row:is([data-can="poor"],[data-can="blocked"]) .shop-icon img{opacity:.6}
.shop-row:is([data-can="poor"],[data-can="blocked"]) .shop-price{border-image-source:url('/img/horde/ui/kit/tag-off.png?v=1');background-color:var(--c4);color:var(--c7)}
.shop-row[data-can="poor"] .shop-price .shop-coin{opacity:.6}
.shop-row[data-can="max"]{border-image:url('/img/horde/ui/kit/plate-flat.png?v=1') 18 18 30 18 fill/6px 6px 10px stretch}
.shop-row[data-can="max"] b{color:var(--c7)}
.shop-row[data-can="max"] .description{color:var(--c6)}
/* a purchase lands like a stamp: down, flash, settled, in 220 ms of whole steps */
.shop-row.bought{animation:shop-stamp .22s steps(1,end)}
.shop-row.bought:after{content:'';position:absolute;inset:-4px -4px -6px;background:var(--s5);pointer-events:none;animation:shop-ink .22s steps(1,end) both}
@keyframes shop-stamp{0%{transform:translateY(4px)}32%{transform:translateY(-2px)}60%,100%{transform:none}}
@keyframes shop-ink{0%{opacity:.78}32%{opacity:.3}60%{opacity:.1}100%{opacity:0}}
/* a refusal: the price shakes its head, twice */
.shop-row.denied :is(.shop-side,.shop-why){animation:shop-deny .24s steps(1,end)}
@keyframes shop-deny{0%,50%{transform:translateX(-2px)}25%,75%{transform:translateX(2px)}100%{transform:none}}
/* The wish list (the fourth shelf). A wish is the same paper as a purchase and is paid in forage: where the price
   would be there is HAND IN once the whole set is in the satchel, and under its words a chip for each kind it costs
   (the forage's icon and how many of the set are held; a met chip is turf green with a line round it). A wish that
   is not ready keeps its full colour: it is the bait. Below the wishes an iron plate says where each kind grows. */
.shop-row[data-can="wish"]{cursor:default}
.shop-give{height:24px;padding:0 5px 1px 6px;font:8px/9px var(--brass);letter-spacing:1px}
.shop-needs{display:flex;flex-wrap:wrap;gap:4px;clear:right;margin:4px 0 2px}
.shop-need{display:flex;align-items:center;gap:3px;height:22px;padding:0 5px 0 2px;border:2px solid #b9a67a;color:var(--paper-soft);font:8px/9px var(--brass)}
.shop-need img{display:block;width:16px;height:16px;image-rendering:pixelated;opacity:.55}
.shop-need.met{border-color:var(--g1);background:#cfe3a0;color:var(--g0)}
.shop-need.met img{opacity:1}
.shop-row[data-kind="back"]{min-height:50px;border-image:url('/img/horde/ui/kit/plate-flat.png?v=1') 18 18 30 18 fill/6px 6px 10px stretch}
.shop-row[data-kind="back"] b{color:var(--c7)}.shop-row[data-kind="back"] .description{color:var(--c6)}
.shop-row[data-kind="back"] .shop-icon{display:none}.shop-row[data-kind="back"]{grid-template-columns:minmax(0,1fr);padding-left:10px}
.shop-legend{flex:none;display:grid;gap:2px;margin-top:2px;padding:6px 8px 4px;border-style:solid;border-color:transparent;border-width:4px 4px 6px;border-image:url('/img/horde/ui/kit/plate-flat.png?v=1') 18 18 30 18 fill/6px 6px 10px stretch}
.shop-legend .label{margin-bottom:4px}
.shop-grow{display:grid;grid-template-columns:16px auto minmax(0,1fr) auto;align-items:center;gap:0 6px;min-height:20px;color:var(--c6)}
.shop-grow img{display:block;width:16px;height:16px;image-rendering:pixelated}
.shop-grow b{color:var(--c7);font-weight:700}
.shop-grow i{font:8px/9px var(--brass);font-style:normal;color:var(--c5)}
.shop-grow.held i{color:var(--b4)}
#b-shop-close{margin-top:10px}

/* ==========================================================================
   Chest: a small stage, the reward, one action
   ========================================================================== */
#s-loot{--loot-accent:var(--b4)}
#s-loot[data-rarity="common"]{--loot-accent:var(--c7)}
#s-loot[data-rarity="rare"]{--loot-accent:var(--w5)}
#s-loot[data-rarity="epic"]{--loot-accent:var(--v2)}
.loot-card{text-align:center}
.loot-stage{position:relative;width:100%;padding:2px;border:2px solid var(--k);background:var(--c5);box-shadow:0 2px 0 var(--c4)}
#loot-icon{display:block;width:100%;height:auto;aspect-ratio:2}
#loot-tag{position:absolute;z-index:1;top:-10px;right:8px;height:20px;padding:2px 3px 0 4px;border:4px solid transparent;border-image:url('/img/horde/ui/kit/tag-off.png?v=1') 12 fill/4px stretch;background:var(--c4) padding-box;color:var(--loot-accent);font:8px/9px var(--brass);letter-spacing:1px;white-space:nowrap}
.loot-reward{display:flex;flex-direction:column;justify-content:center;min-height:92px;padding:12px 0 4px}
#loot-name{margin:0 0 4px;color:var(--b5);font:24px/27px var(--brass);font-weight:400;text-shadow:0 3px 0 var(--k);text-wrap:balance}
#loot-stats{color:var(--loot-accent);font:700 12px/16px var(--text)}
.card #loot-description{margin:4px auto 0;max-width:288px;text-wrap:balance}
#s-loot.spinning #loot-name{color:var(--s4);font:16px/22px var(--brass);text-shadow:0 2px 0 var(--k)}
#s-loot.spinning #loot-stats{color:var(--c6);font-weight:400}
#s-loot.landed .loot-stage{border-color:var(--loot-accent);animation:loot-lock .24s steps(3,end)}
#s-loot.landed .loot-reward{animation:loot-copy .25s steps(4,end) both}
@keyframes loot-lock{0%{transform:translateY(2px)}40%{transform:translateY(-2px)}100%{transform:none}}
@keyframes loot-copy{from{opacity:.3;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ==========================================================================
   Run recap: the score, three numbers, then everything carried
   ========================================================================== */
#s-end{padding-top:calc(48px + env(safe-area-inset-top))}   /* the plaque starts under the speaker's row; the slab under the speaker */
.end-card #end-message{margin:0 0 10px;text-align:center}
.end-score{display:grid;justify-items:center;padding:4px 8px 8px}
.end-score>div{display:flex;align-items:center;justify-content:center;gap:12px;color:var(--b5);font:32px/36px var(--brass);text-shadow:0 4px 0 var(--k)}
.end-score img{display:block;width:24px;height:24px}
.end-score .label{text-indent:1px}
.end-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:8px 0 0}
.end-stats>div{display:grid;justify-items:center;padding:1px 2px 6px}
.end-stats dt{order:2;text-indent:1px}
.end-stats dd{margin:0;color:var(--s4);font:16px/22px var(--brass);text-shadow:0 2px 0 var(--k)}
.card .board-line{margin:10px 0 0;color:var(--b5);text-align:center}
.card .end-farm{margin:10px 0 0;text-align:center}
.end-card #b-end-join{margin-top:10px}
.end-card #end-signin{margin-top:6px}
.end-equipment{margin-top:14px}
.end-gear{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px;margin:0;padding:0}
.end-gear-entry{display:flex;align-items:center;gap:8px;min-width:0}
.end-gear-icon{width:46px;height:50px}
.end-gear-icon img{display:block;width:32px;height:32px;object-fit:contain}
.end-gear-entry[data-rarity="rare"] .end-gear-icon{border-image-source:url('/img/horde/ui/kit/slot-rare.png?v=1')}
.end-gear-entry[data-rarity="epic"] .end-gear-icon{border-image-source:url('/img/horde/ui/kit/slot-epic.png?v=1')}
.end-gear-copy{display:block;min-width:0}
.end-gear-copy b{display:block;color:var(--s4);overflow-wrap:break-word}
.end-gear-copy small{display:block;margin-top:3px;color:var(--c6);font:8px/9px var(--brass);letter-spacing:1px}
.end-gear-damage{display:block;margin-top:2px;color:var(--w5);overflow-wrap:anywhere}
.end-card #end-empty{margin:0;color:var(--c6);text-align:center}
.end-card>.primary{margin-top:16px}
@media(max-width:344px){.end-gear{grid-template-columns:1fr}}

/* ==========================================================================
   Leaderboard and the name on it. Mobbed handles only, no photos.
   ========================================================================== */
.board-card{max-height:calc(100dvh - 50px - env(safe-area-inset-top) - env(safe-area-inset-bottom));display:flex;flex-direction:column;min-height:0}
.board-card>*{flex-shrink:0}
.board-card .board-scope{margin:0 0 8px;text-align:center}
.board-card .board-status{margin:0 0 10px;text-align:center}
.board-card .board-list{list-style:none;margin:0;padding:0;display:grid;gap:6px;min-height:98px;flex:0 1 auto;overflow:auto;overscroll-behavior:contain;scrollbar-width:none}
.board-list::-webkit-scrollbar{display:none}
.board-row{display:grid;grid-template-columns:minmax(30px,max-content) minmax(0,1fr) auto;align-items:center;gap:10px;min-height:40px;padding:1px 8px 3px}
.board-row.you{outline:2px solid var(--b3);outline-offset:-2px}
.board-rank{color:var(--b4);font:16px/18px var(--brass);text-align:right}
.board-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--s4);font-weight:700}
.board-weapons{display:flex;gap:4px;margin-top:2px}.board-weapons img{width:16px;height:16px}
.board-meta{text-align:right;color:var(--b5);font:16px/18px var(--brass)}
.board-meta small{display:block;color:var(--c6);font:12px/16px var(--text)}
/* nothing to list yet (loading, out of reach, or no run posted): the ladder stands empty, not the sheet. Three
   wells drawn in the background, their ranks waiting. */
.board-card .board-list:empty{display:block;height:132px;overflow:hidden;background:
  repeating-linear-gradient(to bottom,transparent 0 40px,var(--c2) 40px 46px),
  linear-gradient(var(--k),var(--k)) 0 0/2px 100% no-repeat,
  linear-gradient(var(--c4),var(--c4)) 100% 0/2px 100% no-repeat,
  repeating-linear-gradient(to bottom,var(--k) 0 4px,var(--c0) 4px 38px,var(--c4) 38px 40px,var(--c2) 40px 46px)}
.board-list:empty:before{content:'#1\A#2\A#3';content:'#1\A#2\A#3' / '';display:block;padding:0 0 0 12px;white-space:pre;color:var(--c4);font:16px/46px var(--brass);margin-top:-2px}
.board-you{margin:12px 0 0}
#board-best-list{list-style:none;margin:0;padding:0}
.board-card #board-no-best{margin:0}
.board-card .board-guest-note{margin:12px 0 0;text-align:center;color:var(--c6)}
.board-card #board-signin{margin-top:8px}
.pixel-input{display:block;width:100%;margin:0;padding:6px 8px 8px;color:var(--s5);font:700 24px/28px var(--text);outline:none;border-radius:0}
.pixel-input::placeholder{color:var(--c5)}
.pixel-input:focus{outline:2px solid var(--b3);outline-offset:0}
.card .handle-rule{margin:8px 0 0;color:var(--c6);text-align:center}
#s-handle .card>p:first-of-type{text-align:center;text-wrap:balance}
.card .board-error{min-height:16px;margin:6px 0 0;color:var(--r4);text-align:center}
.card .board-error:empty{min-height:0;margin:0}

/* ==========================================================================
   Sound: two gauges. Each lies in its own bed; the brass fills to the knob
   through --fill, cut into cells like the market's pips.
   ========================================================================== */
.vol{display:grid;grid-template-columns:1fr auto;align-items:center;gap:0 12px;margin:0 0 8px;padding:4px 6px 0;border-style:solid;border-color:transparent;border-width:6px 6px 10px;border-image:url('/img/horde/ui/kit/plate-flat.png?v=1') 18 18 30 18 fill/6px 6px 10px stretch;background:var(--c1) padding-box}
.vol .label{color:var(--c7)}
.vol output{color:var(--b5);font:16px/18px var(--brass);text-shadow:0 2px 0 var(--k)}
.pixel-range{-webkit-appearance:none;appearance:none;grid-column:1/3;width:100%;height:40px;margin:0;background:transparent;--fill:100%;
  --gauge:repeating-linear-gradient(90deg,transparent 0 14px,var(--k) 14px 16px) 50% 0/auto 100%,linear-gradient(var(--b5) 0 2px,var(--b3) 2px 10px,var(--b1) 10px) 0 0/var(--fill) 100% no-repeat,var(--c0)}
.pixel-range::-webkit-slider-runnable-track{height:16px;border:2px solid var(--k);background:var(--gauge);box-shadow:0 2px 0 var(--c4)}
.pixel-range::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:32px;margin-top:-10px;background:var(--b3);border:2px solid var(--k);border-radius:0;box-shadow:inset 0 2px 0 var(--b5),inset 2px 0 0 var(--b4),inset -2px 0 0 var(--b2),inset 0 -4px 0 var(--b1),0 2px 0 #0c0a14}
.pixel-range::-moz-range-track{height:12px;border:2px solid var(--k);background:var(--gauge);box-shadow:0 2px 0 var(--c4)}
.pixel-range::-moz-range-thumb{width:12px;height:28px;border-radius:0;background:var(--b3);border:2px solid var(--k);box-shadow:inset 0 2px 0 var(--b5),inset 2px 0 0 var(--b4),inset -2px 0 0 var(--b2),inset 0 -4px 0 var(--b1)}
.pixel-range:focus-visible{outline:2px solid var(--b5);outline-offset:0}
#s-sound #b-sound-test{margin-top:4px}

/* ==========================================================================
   Sizes
   ========================================================================== */
@media(max-width:389px){
  .plate{min-width:136px;padding:5px 24px 4px;font:16px/18px var(--brass);text-shadow:0 2px 0 var(--k)}
  .wood .plate{text-shadow:0 2px 0 var(--wd0)}
  #up-title{padding-left:30px;padding-right:30px}
  .iron,.wood{--pad:2px;padding-bottom:2px}
  .shop-row{gap:8px}
  .pair{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}   /* LEADERBOARD needs more than half a row here */
}
@media(max-width:344px){.pair{grid-template-columns:minmax(0,1fr)}}   /* and a row to itself here */
@media(max-width:374px){.shop-tabs{gap:2px}}
/* narrower than four words: the wish list's tab is its scroll */
@media(max-width:359px){#shop-tab-wishes .shop-word{display:none}#shop-tab-wishes:before{content:'';display:block;width:16px;height:16px;margin:0 auto;background:url('/img/horde/shop/wish.png') center/16px 16px no-repeat;image-rendering:pixelated}#shop-tab-wishes{flex:0 0 44px}}
@media(max-height:700px){
  .sheet{padding-top:calc(8px + env(safe-area-inset-top));padding-bottom:calc(8px + env(safe-area-inset-bottom))}
  .opt{min-height:84px}
  #s-shop{--shop-pad:8px}
  #b-shop-close{min-height:44px;padding:0 8px 8px}#b-shop-close:active{padding:4px 8px 4px}
}
/* The pause on a short screen: Resume, then the three small doors on one row at label size, so the island keeps
   the height. The studded rule stands on end between the two side doors and the way out. The columns are cut to
   their words; the last holds TAP AGAIN TO END. */
@media(max-height:500px),(max-height:760px) and (max-width:559px),(max-height:760px) and (max-aspect-ratio:5/4){
  #s-pause,#s-pause.on ~ :is(#s-sound,#s-board).on{padding-bottom:calc(8px + env(safe-area-inset-bottom))}
  .pause-card{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,9fr) 14px minmax(0,12fr);column-gap:4px}
  .pause-card>.plate,.pause-card>#b-resume{grid-column:1/-1}
  .pause-card .pair{display:contents}
  .pause-card .rule{height:auto;margin:8px 0 0}
  .pause-card .rule:before{left:5px;right:auto;top:2px;bottom:8px;width:4px;height:auto;border:0;border-left:2px solid var(--k);border-right:2px solid var(--c4)}
  .pause-card .rule:after{left:0;top:50%;width:14px;height:22px;margin:-14px 0 0}
  .pause-card button.ghost{padding:0 0 8px;font:8px/9px var(--brass);letter-spacing:1px;text-indent:1px;text-shadow:0 1px 0 var(--k)}
  .pause-card button.ghost:active{padding:4px 0 4px}
  .pause-card button.ghost.danger.armed{text-shadow:0 1px 0 var(--r0)}
}
@media(max-height:760px) and (max-width:344px){
  .pause-card{grid-template-columns:minmax(0,5fr) minmax(0,9fr) minmax(0,12fr)}
  .pause-card .rule{display:none}
  .pause-card button.ghost{letter-spacing:0;text-indent:0}
}
/* a phone on its side */
@media(max-height:500px) and (min-width:560px){
  /* level-up: the three plates side by side, slot over words */
  #s-up .card{max-width:760px}
  #up-opts{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:auto}
  .opt{grid-template-columns:minmax(0,1fr);justify-items:center;align-content:start;gap:6px;min-height:0;padding:8px;text-align:center}
  .opt .category{margin:0 auto}
  #b-reroll{max-width:360px;margin-left:auto;margin-right:auto}
  /* chest: the stage on the left, the reward on the right */
  .loot-card{max-width:620px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:16px}
  .loot-card .plate{grid-column:1/-1}.loot-stage{grid-row:2/4;align-self:center}.loot-reward{padding-top:0;min-height:80px}
  /* market: the sign across the top; purse, shelves and the way out down the left; the goods take the height */
  .shop-card{display:grid;grid-template-columns:252px minmax(0,1fr);grid-template-rows:auto auto auto auto minmax(0,1fr) auto;column-gap:12px;max-width:740px}
  .shop-head{display:contents}
  .shop-head .plate{grid-row:1}
  .shop-place{grid-column:1;grid-row:2;align-self:center}
  .shop-purse{grid-column:1;grid-row:2;justify-self:end}
  .shop-tabs{grid-column:1;grid-row:3;flex-direction:column;align-self:start;margin-top:8px}
  .shop-tab{flex:none;min-height:38px;padding-top:4px}.shop-tab[aria-selected="true"]{padding-top:0}
  .shop-card .shop-strap{grid-column:1;grid-row:4}
  #b-shop-close{grid-column:1;grid-row:6;margin-top:8px}
  .shop-tray{grid-column:2;grid-row:2/-1;margin-top:0;min-height:0}
  .board-card{max-height:calc(100dvh - 34px)}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto}
  #lvl:is(.xp-a,.xp-b) .bar i,#h-lv:is(.lv-a,.lv-b),#health-bar:is(.hit-a,.hit-b),#h-coins-box:is(.coin-a,.coin-b){animation:none}
  #s-pause.on :is(.chart-world,#chart-fox,#chart-pins),#s-pause.on #chart-fox:before,#s-pause.on #chart-fox:after,#s-pause.on #chart-fox.spot:before{animation:none}
  .sheet.on .card,.title-sign,#h-ripe.ready,.hud-chip.wish,.hud-chip.forage.got,.hud-chip.forage.got img,.hud-chip.forage.got b,.hud-chip.forage.got:after,.hud-chip.forage.due,.shop-row.bought,.shop-row.denied :is(.shop-side,.shop-why),#s-loot.landed .loot-stage,#s-loot.landed .loot-reward{animation:none}
  .shop-row.bought:after{display:none}
  .shop-row.bought{outline:2px solid var(--b5)}
  .music-toggle:active,.hud-toggle:active{transform:none}
}