/* $RUGGED — print language. Paper, ink, flat spot colours, hard offset shadows.
   No glow. No glass. No gradient text. No blur. The only gradient on the page is the 3 px paper-grain dot pattern.
   Tokens come from CONTRACT.md §6. Everything pixel-art is upscaled with smoothing off (image-rendering: pixelated).
   Pixel font floor: 10 px on desktop, 11 px on a phone; anything smaller switches to the sans. */

/* ---------- 0. tokens ---------- */
:root {
  --paper:#F3E9D2; --paper2:#E9DCBE; --ink:#1B1612; --ink2:#4A3F36; --mute:#8A7D70;
  --rug:#C8322B; --rugdeep:#8E1E1A; --gold:#E0A12B; --navy:#22437A; --teal:#1F7A78; --win:#2BB673;
  --fire:#FF6A1F; --fireY:#FFD23F; --fireD:#B8420E; --clay:#9A6A3C; --earth:#2B1D14; --sand:#D9B98A; --you:#FF6A1F;
  --b0:#F6D7A7; --b1:#F0B98A; --b2:#8EC5E8; --b3:#4E9AD6; --b4:#22437A; --b5:#0B1026; --b6:#050611; --rock:#E8E4D8; --crater:#B9B4A6;
  --display:'Big Shoulders Display', Impact, 'Arial Narrow', sans-serif; --sans:'Archivo', system-ui, sans-serif; --mono:'JetBrains Mono', ui-monospace, monospace; --pixel:'Press Start 2P', monospace;
  --shadow:4px 4px 0 var(--ink); --shadow-s:3px 3px 0 var(--ink);
  --header:56px; --dock:98px;
  --rule:#CDBB94; --brick:#7A2E22; --mortar:#4A1F18; --stone:#C9B48A; --joint:#A8936B; --wood:#5A3A22; --wood2:#7A4E2D; --plaster:#EADFC6;
  --grain: radial-gradient(rgba(27,22,18,.06) 1px, transparent 1px);
  --bricks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='16' shape-rendering='crispEdges'%3E%3Crect width='32' height='16' fill='%234A1F18'/%3E%3Crect x='1' y='1' width='14' height='6' fill='%237A2E22'/%3E%3Crect x='17' y='1' width='14' height='6' fill='%237A2E22'/%3E%3Crect x='9' y='9' width='14' height='6' fill='%237A2E22'/%3E%3Crect x='0' y='9' width='6' height='6' fill='%237A2E22'/%3E%3Crect x='25' y='9' width='7' height='6' fill='%237A2E22'/%3E%3Crect x='1' y='1' width='14' height='1' fill='%238E3A2C'/%3E%3Crect x='17' y='1' width='14' height='1' fill='%238E3A2C'/%3E%3Crect x='9' y='9' width='14' height='1' fill='%238E3A2C'/%3E%3C/svg%3E");
  --stones: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' shape-rendering='crispEdges'%3E%3Crect width='48' height='24' fill='%23A8936B'/%3E%3Crect x='1' y='1' width='22' height='10' fill='%23C9B48A'/%3E%3Crect x='25' y='1' width='22' height='10' fill='%23C9B48A'/%3E%3Crect x='13' y='13' width='22' height='10' fill='%23C9B48A'/%3E%3Crect x='0' y='13' width='11' height='10' fill='%23C9B48A'/%3E%3Crect x='37' y='13' width='11' height='10' fill='%23C9B48A'/%3E%3Crect x='1' y='1' width='22' height='1' fill='%23D9C9A4'/%3E%3Crect x='25' y='1' width='22' height='1' fill='%23D9C9A4'/%3E%3Crect x='13' y='13' width='22' height='1' fill='%23D9C9A4'/%3E%3C/svg%3E");
  --planks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='32' shape-rendering='crispEdges'%3E%3Crect width='64' height='32' fill='%235A3A22'/%3E%3Crect y='15' width='64' height='2' fill='%233E2715'/%3E%3Crect y='31' width='64' height='1' fill='%233E2715'/%3E%3Crect x='40' width='2' height='15' fill='%233E2715'/%3E%3Crect x='8' y='17' width='2' height='15' fill='%233E2715'/%3E%3Crect x='20' y='6' width='2' height='2' fill='%231B1612'/%3E%3Crect x='52' y='22' width='2' height='2' fill='%231B1612'/%3E%3C/svg%3E");
}

/* ---------- 1. base ---------- */
* { box-sizing: border-box }
[hidden] { display: none !important }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.5 var(--sans); overflow-x: hidden; -webkit-font-smoothing: antialiased; background-image: var(--grain); background-size: 3px 3px }
a { color: inherit }
b, strong { font-weight: 700 }
img, canvas { max-width: 100% }
button, input { font: inherit; color: inherit }
button { cursor: pointer }
::selection { background: var(--gold); color: var(--ink) }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px }
.mono { font-family: var(--mono) }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap }
.pixel, .pix { image-rendering: pixelated; image-rendering: crisp-edges }
.eyebrow { font: 400 10px/1 var(--pixel); letter-spacing: .14em; text-transform: uppercase; color: var(--rug); margin: 0 0 16px }
.h2 { font: 900 clamp(34px, 4.4vw, 56px)/.95 var(--display); text-transform: uppercase; letter-spacing: .01em; margin: 0 0 18px }
.p { font-size: 17px; line-height: 1.5; max-width: 58ch; color: var(--ink2); margin: 0 0 12px }
.small { font-size: 14px; color: var(--ink2) }
.faint { color: var(--mute) }
.k { font: 400 10px/1 var(--pixel); letter-spacing: .1em; text-transform: uppercase; color: var(--mute) }

/* the wordmark prints twice: red plate behind, ink plate on top, 2 px off. Never gradient text. */
.wm { position: relative; display: inline-block; font: 900 26px/1 var(--display); letter-spacing: .02em; text-transform: uppercase; color: var(--ink); text-decoration: none; z-index: 0; white-space: nowrap }
.wm::before { content: attr(data-text); position: absolute; left: 2px; top: 2px; color: var(--rug); z-index: -1 }
.wm.big { font-size: clamp(64px, 12vw, 140px); line-height: .9 } .wm.big::before { left: 4px; top: 4px }
.wm.huge { font-size: clamp(56px, 8vw, 110px); line-height: .9 } .wm.huge::before { left: 3px; top: 3px }

/* buttons: 3 px ink border, hard shadow, press = move into the shadow */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 16px; border: 3px solid var(--ink); border-radius: 2px; background: var(--paper); color: var(--ink);
  font: 800 14px/1 var(--sans); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; cursor: pointer; box-shadow: var(--shadow-s); transition: transform .08s, box-shadow .08s; white-space: nowrap }
.btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink) }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink) }
.btn.gold { background: var(--gold) } .btn.ink { background: var(--ink); color: var(--paper) } .btn.red { background: var(--rug); color: var(--paper) } .btn.line { background: transparent }
.btn.lg { padding: 16px 24px; font-size: 18px } .btn.sm { padding: 7px 10px; font-size: 11px; border-width: 2px; box-shadow: 2px 2px 0 var(--ink) }
.btn.sm:hover { box-shadow: 3px 3px 0 var(--ink) } .btn.sm:active { box-shadow: 1px 1px 0 var(--ink) }

/* coin pouch icon: gold sack or clay sack, drawn with two boxes */
.pouch { position: relative; display: inline-block; width: 16px; height: 18px; background: var(--gold); border: 2px solid var(--ink); border-radius: 45% 45% 50% 50% / 30% 30% 60% 60%; flex: none }
.pouch::before { content: ''; position: absolute; left: 2px; top: -7px; width: 6px; height: 5px; background: inherit; border: 2px solid var(--ink); border-bottom: 0; border-radius: 2px 2px 0 0 }
.pouch.clay { background: var(--clay) }

/* stamps: red, 3 px red border, rotated, printed 2 px off register (navy ghost plate) on a paper backing */
.stamp { position: absolute; z-index: 4; display: inline-block; font: 900 22px/1 var(--display); text-transform: uppercase; letter-spacing: .04em; color: var(--rug); background: var(--paper);
  border: 3px solid var(--rug); padding: 6px 10px; transform: rotate(-6deg); text-shadow: 2px 2px 0 var(--navy); outline: 2px solid var(--ink); box-shadow: var(--shadow-s); white-space: nowrap }
.stamp.in { animation: slam .12s ease-out }
@keyframes slam { from { transform: rotate(-6deg) scale(1.4) } to { transform: rotate(-6deg) scale(1) } }
@keyframes drop { from { transform: translateY(-8px); opacity: 0 } }
@keyframes wob { 0% { rotate: 0deg } 30% { rotate: 2deg } 60% { rotate: -1.5deg } 100% { rotate: 0deg } }

/* ---------- 2. header (sticky paper bar) ---------- */
#top { position: sticky; top: 0; z-index: 30; height: var(--header); display: flex; align-items: center; gap: 14px; padding: 0 20px; background: var(--paper); background-image: var(--grain); background-size: 3px 3px;
  border-bottom: 2px solid var(--ink); box-shadow: 0 4px 0 var(--earth); white-space: nowrap }
.hLeft, .hRight, .hStamps, .hSacks { display: flex; align-items: center; gap: 10px; min-width: 0 }
.hStamps { margin-left: 6px } .hSacks { margin-left: auto } .hRight { gap: 8px }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 2px solid var(--ink); border-radius: 2px; background: var(--paper2); font: 700 12px/1 var(--mono); color: var(--ink); cursor: pointer; box-shadow: 2px 2px 0 var(--ink); text-decoration: none }
.pill .k { color: var(--ink2); font-size: 9px } .pill .cp { font: 700 9px var(--sans); letter-spacing: .08em; color: var(--rug) }
.pill:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink) }
.pill.gold { background: var(--gold); font: 800 12px/1 var(--sans); letter-spacing: .08em; padding: 7px 12px }
.hstamp { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 3px 8px 4px; border: 2px solid var(--rug); color: var(--rug); font: 700 13px/1 var(--mono); transform: rotate(-3deg); background: var(--paper) }
.hstamp + .hstamp { transform: rotate(2deg) }
.hstamp .k { color: var(--rug); font-size: 10px }
/* the two jars: a caption under each number says which sack it is; the gold jar is a button for the cashier */
.sack { position: relative; display: inline-flex; align-items: center; gap: 7px; font: 700 13px/1 var(--mono); padding: 4px 8px 12px 6px; border: 2px solid var(--ink); background: var(--paper2); color: var(--ink); min-height: 34px }
.sack.gold { border-color: var(--gold); cursor: pointer; box-shadow: 2px 2px 0 var(--ink) } .sack.gold:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink) }
.sack.clay { border-color: var(--clay) }
.sack .pouch { width: 14px; height: 15px } .sack .pouch::before { width: 5px; height: 4px; top: -6px; left: 2px }
.jarK { position: absolute; left: 6px; bottom: 1px; font: 700 8px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink2) }
.ibtn { width: 34px; height: 34px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 2px; background: var(--paper); color: var(--ink); box-shadow: 2px 2px 0 var(--ink); padding: 0; text-decoration: none }
.ibtn svg { width: 16px; height: 16px; fill: currentColor }
.ibtn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink) }
#soundBtn[aria-pressed="true"] { background: var(--gold) }

/* ---------- 3. the stage ---------- */
#stage { position: relative; height: calc(100vh - var(--header)); height: calc(100svh - var(--header)); min-height: 560px; overflow: hidden; background: var(--b0) }
#sky { position: absolute; left: 0; top: 0; width: 100%; z-index: 0; display: block; image-rendering: pixelated; pointer-events: none; will-change: transform }
#world { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; display: block; image-rendering: pixelated; touch-action: manipulation }
#stage::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background-image: radial-gradient(rgba(27,22,18,.07) 1px, transparent 1px); background-size: 3px 3px }
.hud { position: absolute; z-index: 3 }

/* the washing line's touch layer: the rope and the rugs are on the canvas; these are the invisible pegs (24×32 hit) and the paper tags */
#lastStrip { top: 0; left: 0; height: 48px; width: 600px; max-width: 100%; pointer-events: none }
#lastStrip:empty::after { content: 'THE LAST RUGS'; position: absolute; left: 20px; top: 14px; font: 400 10px/1 var(--pixel); letter-spacing: .1em; color: var(--ink2) }
.rugChip { position: absolute; top: 4px; width: 26px; height: 36px; border: 0; background: transparent; padding: 0; margin: 0; pointer-events: auto; cursor: pointer; color: var(--ink) }
#lastStrip .rugChip { background: transparent !important; color: var(--ink) !important }
.rugChip .tagM { position: absolute; left: 50%; top: 36px; transform: translateX(-50%); display: none; padding: 4px 4px 3px; background: var(--paper); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); font: 400 10px/1 var(--pixel); white-space: nowrap; z-index: 2 }
.rugChip .tagM::before { content: ''; position: absolute; left: 50%; top: -8px; width: 2px; height: 6px; margin-left: -1px; background: var(--ink) }
.rugChip:hover .tagM, .rugChip:focus-visible .tagM, .rugChip.show .tagM { display: block }
.rugChip.show:nth-child(1) .tagM { top: 34px } .rugChip.show:nth-child(2) .tagM { top: 56px } .rugChip.show:nth-child(3) .tagM { top: 78px }
.rugChip.show:nth-child(2) .tagM::before { top: -28px; height: 26px } .rugChip.show:nth-child(3) .tagM::before { top: -50px; height: 48px }
.rugChip.mine .tagM { background: var(--fireY) }
.rugChip.r0 .tagM { color: var(--rug) } .rugChip.r4 .tagM { background: var(--gold) }

/* plaque top-left, under the line */
#plaque { top: 74px; left: 24px; padding: 6px 10px; background: var(--paper); border: 2px solid var(--ink); box-shadow: var(--shadow-s); font: 700 13px/1.3 var(--sans) }
#plaque a { color: var(--rug); font-weight: 600; margin-left: 6px }

/* the price tag hangs from a string at top centre. Big pixel digits on paper with an ink border. */
.tagCol { top: 0; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 16px 0; pointer-events: none }
.tagCol > * { pointer-events: auto }
#tag { position: relative; padding: 16px 24px 12px; background: var(--paper); border: 3px solid var(--ink); box-shadow: var(--shadow); text-align: center; min-width: 240px; max-width: 100%; transform-origin: 50% -18px }
#tag::before { content: ''; position: absolute; left: 50%; top: -21px; width: 2px; height: 20px; margin-left: -1px; background: var(--ink) }
#tag .hole { position: absolute; left: 50%; top: 5px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--paper2); border: 2px solid var(--ink) }
#tag.wob { animation: wob .5s ease-out } #tag.dip { animation: wob .32s ease-out }
#tagMult { font: 400 56px/1 var(--pixel); letter-spacing: -.02em; color: var(--ink); overflow-wrap: anywhere; padding-top: 6px }
#tagSub { margin-top: 10px; font: 600 13px/1.3 var(--sans); color: var(--ink2) }
#tag[data-phase="rugged"] #tagMult, #stage:has(#bigBtn[data-state="ruggedlock"]) #tagMult { color: var(--rug) }
#tag.hot #tagMult { color: var(--gold); text-shadow: 2px 2px 0 var(--ink) }
#tag[data-phase="betting"] #tagMult, #tag[data-phase^="sett"] #tagMult { font-size: 30px; line-height: 1.15; padding-top: 10px }
#tag[data-phase="riding"] #tagMult { font-size: 56px; line-height: 1; padding-top: 6px }
#tag.word #tagMult, #stage:has(#bigBtn[data-state="geton"]) #tagMult, #stage:has(#bigBtn[data-state="getcoins"]) #tagMult, #stage:has(#bigBtn[data-state="onboard"]) #tagMult,
#stage:has(#bigBtn[data-state="lifting"]) #tagMult, #stage:has(#bigBtn[data-state="nextin"]) #tagMult { font-size: 30px; line-height: 1.15; padding-top: 10px }
#youTag { padding: 7px 12px; background: var(--paper); border: 2px solid var(--ink); border-left-width: 8px; box-shadow: var(--shadow-s); font: 700 14px/1.2 var(--mono); white-space: nowrap }
#youTag[data-kind="gold"] { border-left-color: var(--gold) } #youTag[data-kind="clay"] { border-left-color: var(--clay) }

/* THE HAND'S PLAQUE: hangs on a string from the sleeve cuff at the top edge, centre-right. A card with two faces; it flips after the pull. */
#wristTag { top: 68px; right: 112px; width: 224px; perspective: 700px; font: 700 11px/1.5 var(--mono) }
#wristTag::before { content: ''; position: absolute; left: 50%; top: -16px; width: 2px; height: 16px; margin-left: -1px; background: var(--ink) }
.wcard { position: relative; transition: transform .55s cubic-bezier(.2,.8,.2,1); transform-style: preserve-3d; min-height: 70px }
#wristTag.broken .wcard { transform: rotateX(180deg) }
.wface { position: absolute; inset: 0; padding: 9px 12px 8px 14px; background: var(--paper); border: 2px solid var(--ink); box-shadow: var(--shadow-s); backface-visibility: hidden; -webkit-backface-visibility: hidden }
.wface.front { position: relative; min-height: 80px }
.mob { display: none }
.wface.back { transform: rotateX(180deg); border-color: var(--rug) }
.wface::after { content: ''; position: absolute; right: -9px; top: -9px; width: 20px; height: 20px; border-radius: 50%; background: var(--rug); border: 2px solid var(--ink); box-shadow: inset 0 0 0 3px var(--rugdeep) }
.wface.back::after { background: var(--rugdeep); clip-path: polygon(0 0, 100% 0, 100% 35%, 45% 50%, 100% 65%, 100% 100%, 0 100%); transform: rotate(18deg) translate(2px, 2px) }
.wrow { display: flex; justify-content: space-between; gap: 8px; align-items: center; min-width: 0 }
.wrow + .wrow { margin-top: 3px }
#wristRound { color: var(--ink2); white-space: nowrap }
.wk { font: 400 9px/1.4 var(--pixel); letter-spacing: .06em; color: var(--rug); white-space: nowrap }
#wristHash, #wristSeed { overflow: hidden; text-overflow: clip; white-space: nowrap; min-width: 0; font-size: 12px }
#wristSeed { color: var(--rug) }
#wristLine, .wline2 { font: 500 italic 11px/1.3 var(--sans); color: var(--ink2); margin-top: 3px }
.wline2 { color: var(--rug) }
#wristCheck { font: 400 10px/1 var(--pixel); padding: 9px 9px 8px; min-height: 32px; border: 2px solid var(--ink); background: var(--rug); color: var(--paper); box-shadow: 2px 2px 0 var(--ink); flex: none }
#wristCheck:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink) }

/* band stamp is retired (the sky does the talking); RUGGED stamp over the sky */
#bandStamp { display: none !important }
/* THE RUGGED STAMP: a rubber stamp, not a card. Red ink letters inside a double red frame, worn by a pixel mask (--inkMask, made in
   app.js), a navy copy 3 px off register, ink spatter around it, slammed 1.7 → 1 in 110 ms. POST THIS hangs under it as a gold tag. */
#rugStamp { left: 50%; top: 42%; transform: translate(-50%, -50%) rotate(-8deg); font-size: clamp(40px, 5vw, 76px); line-height: .92; background: transparent; border: 0; outline: 0; box-shadow: none; padding: 0; text-align: center; text-shadow: none; color: var(--rug); pointer-events: none }
#rugStampText { position: relative; display: inline-block; padding: 10px 26px 12px; border: 7px solid var(--rug); outline: 3px solid var(--rug); outline-offset: 5px; text-shadow: 3px 2px 0 var(--navy);
  -webkit-mask-image: var(--inkMask, none); mask-image: var(--inkMask, none); -webkit-mask-size: 96px 96px; mask-size: 96px 96px }
#rugStamp::before { content: ''; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; background: var(--rug);
  box-shadow: -190px -64px 0 0 var(--rug), -214px -40px 0 -2px var(--rug), 178px 58px 0 1px var(--rug), 204px 34px 0 -2px var(--rug), 150px -72px 0 -1px var(--rug), -160px 70px 0 -1px var(--rug), 226px -12px 0 -3px var(--rug), -236px 18px 0 -3px var(--rug), 120px 80px 0 -2px var(--rug), -120px -82px 0 -2px var(--rug);
  transform: translate(-50%, -50%) }
#rugStamp:not(.in):not(.show) { display: none }
#rugStamp.in { animation: slamBig .11s cubic-bezier(.2, .9, .3, 1.15) }
@keyframes slamBig { 0% { transform: translate(-50%, -50%) rotate(-8deg) scale(1.7); opacity: .25 } 70% { transform: translate(-50%, -50%) rotate(-8deg) scale(.96); opacity: 1 } 100% { transform: translate(-50%, -50%) rotate(-8deg) scale(1) } }
#postBtn { display: block; margin: 14px auto 0; font: 800 13px/1 var(--sans); letter-spacing: .08em; padding: 9px 14px; border: 3px solid var(--ink); background: var(--gold); color: var(--ink); box-shadow: var(--shadow-s); text-shadow: none; transform: rotate(8deg); pointer-events: auto }
#postBtn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink) }

/* the jump feed, bottom left: four lines; during the pull and the thud only the RUGGED line stays */
#feed { left: 24px; top: 122px; width: 360px; max-width: calc(100% - 48px); margin: 0; padding: 0; list-style: none; font: 500 12px/1.35 var(--mono); display: flex; flex-direction: column; gap: 5px }
#feed li { background: var(--paper); border: 2px solid var(--ink); border-left-width: 6px; padding: 5px 8px; display: flex; gap: 8px; align-items: center; box-shadow: 2px 2px 0 var(--ink); animation: drop .3s ease-out; overflow: hidden; white-space: nowrap }
#feed li .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
#feed li:nth-child(n+5) { display: none }
#stage[data-phase="rugged"] #feed li:nth-child(n+2), #stage[data-phase="settling"] #feed li:nth-child(n+2) { display: none }
#feed li.jump { border-left-color: var(--win) }
#feed li.rug, #feed li.ground { border-left-color: var(--rug) }
#feed li.truck { border-left-color: var(--win); background: var(--fireY) }
#feed li.whale { border-left-color: var(--navy); background: var(--paper2) }
#feed li.you, #feed li.moon { border-left-color: var(--gold); background: var(--gold) }
.sw { display: inline-block; width: 12px; height: 12px; border: 1px solid var(--ink); background: hsl(var(--h, 30) 70% 50%); flex: none; vertical-align: -1px }

/* the shop sign: wood, cream pixel text, two nails */
#watchSign { right: 24px; bottom: calc(var(--dock) + 16px); padding: 10px 14px; background: var(--wood2); color: var(--paper); border: 3px solid var(--ink); box-shadow: var(--shadow-s); font: 400 10px/1.7 var(--pixel); letter-spacing: .06em; outline: 3px solid var(--wood); outline-offset: -7px; white-space: nowrap }
#watchSign b { color: var(--fireY); font-weight: 400 }
#watchSign::before, #watchSign::after { content: ''; position: absolute; top: 3px; width: 4px; height: 4px; background: var(--ink) }
#watchSign::before { left: 3px } #watchSign::after { right: 3px }
/* the one-time clay sign is a billboard on the rug shop's roof, drawn by the world; #claySign is its screen-reader twin (.sr) */

/* ---------- 4. THE TICKET COUNTER (the dock): a wooden board with paper on it ---------- */
#dock { position: absolute; left: 0; right: 0; bottom: 0; height: var(--dock); z-index: 20; background: var(--wood); background-image: var(--planks); background-size: 128px 64px; image-rendering: pixelated; border-top: 4px solid var(--ink); box-shadow: inset 0 4px 0 var(--wood2);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 6px 20px 0 }
#todayStrip { left: 20px; top: -30px; display: inline-flex; gap: 10px; align-items: baseline; padding: 5px 10px 4px; background: var(--paper); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); font: 700 12px/1 var(--mono); transform: rotate(-1deg); white-space: nowrap }
#todayStrip .k { color: var(--ink2) } #todayStrip b.up { color: var(--win) } #todayStrip b.down { color: var(--rug) } #todayStrip span { color: var(--ink2); font-weight: 600 }
/* the sack with its paper tag */
#sackBtn { display: flex; flex-direction: column; align-items: center; gap: 2px; border: 0; background: none; padding: 0 2px; cursor: pointer; color: var(--ink) }
#sackIcon { width: 54px; height: 58px; border-width: 3px } #sackIcon::before { left: 9px; top: -13px; width: 16px; height: 10px; border-width: 3px }
#sackIcon.clay, #sackIcon[data-kind="clay"] { background: var(--clay) } #sackIcon.gold, #sackIcon[data-kind="gold"] { background: var(--gold) }
.sackTxt { display: inline-flex; gap: 5px; align-items: baseline; padding: 3px 7px 2px; background: var(--paper); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); font: 700 13px/1 var(--mono); transform: rotate(2deg); margin-top: -8px }
.sackTxt #sackBtnKind { font: 700 9px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink2) }
.sackK { font: 700 9px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--paper2) }
#sackPanel { display: flex; flex-direction: column; gap: 4px; min-width: 0 }
.sackTop { display: flex; align-items: flex-end; gap: 14px; min-width: 0 }
.amt { display: flex; flex-direction: column; gap: 4px } .amt .k { color: var(--paper2); padding-top: 2px }
.amtRow { display: flex; align-items: flex-end; gap: 6px }
/* the coin stack grows with the amount: up to ten 16 px coins piled on the board */
#coinStack { display: flex; flex-direction: column-reverse; gap: 0; width: 18px; height: 40px; justify-content: flex-start; align-self: flex-end }
#coinStack i { display: block; width: 16px; height: 5px; margin-top: -1px; background: var(--gold); border: 1px solid var(--ink); box-shadow: inset 0 1px 0 var(--fireY); border-radius: 50% }
#coinStack.clay i { background: var(--clay); box-shadow: inset 0 1px 0 var(--sand) }
#sackAmt { width: 132px; font: 700 22px/1 var(--mono); padding: 7px 8px; border: 3px solid var(--ink); background: var(--paper2); color: var(--ink); box-shadow: inset 2px 2px 0 var(--rule) }
/* the four presets: paper tickets pinned to the board */
#sackChips { display: flex; gap: 7px; align-items: flex-end }
#sackChips button { position: relative; font: 400 10px/1 var(--pixel); padding: 12px 6px 10px; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); box-shadow: 2px 2px 0 var(--ink); transform: rotate(var(--r, 0deg)) }
#sackChips button::before { content: ''; position: absolute; left: 50%; top: -4px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--rug); border: 1px solid var(--ink) }
#sackChips button:nth-child(1) { --r: -2deg } #sackChips button:nth-child(2) { --r: 1.5deg } #sackChips button:nth-child(3) { --r: -1deg } #sackChips button:nth-child(4) { --r: 2deg; background: var(--fireY) }
#sackChips button:active, #sackChips button[aria-pressed="true"] { transform: translate(1px, 1px) rotate(var(--r, 0deg)); box-shadow: 1px 1px 0 var(--ink); background: var(--fireY) }
/* the two-sided wooden sign: $RUGGED on one face, CLAY on the other; the pressed face is the one turned to you */
.kind { display: inline-flex; border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); background: var(--wood2); position: relative; margin-top: 8px }
.kind::before { content: ''; position: absolute; left: 50%; top: -11px; width: 4px; height: 10px; margin-left: -2px; background: var(--ink) }
.kind button { border: 0; background: var(--wood2); color: var(--paper2); padding: 10px 11px; font: 800 12px/1 var(--sans); text-transform: uppercase; letter-spacing: .04em; display: inline-flex; gap: 7px; align-items: center }
.kind button .pouch { width: 12px; height: 13px } .kind button .pouch::before { width: 4px; height: 3px; top: -5px; left: 2px }
.kind button + button { border-left: 3px solid var(--ink) }
.kind button[aria-pressed="true"] { background: var(--paper); color: var(--ink) }
#clayLine { margin: 0; font: 500 12px/1.3 var(--sans); color: var(--paper); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
#sackPanel:has(#kindGold[aria-pressed="true"]) #clayLine { visibility: hidden }
/* auto jump: a pull-cord. The cord hangs from the board's edge; pulling it (checking) turns the handle yellow and shows the x on its tag */
#autoWrap { display: flex; align-items: flex-end; gap: 8px; margin-left: 4px }
.autoL { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; position: relative }
.autoL .cord { display: block; width: 2px; height: 16px; background: var(--ink) }
.autoL .k { color: var(--paper2) }
#autoOn { appearance: none; -webkit-appearance: none; width: 30px; height: 22px; margin: 0; border: 2px solid var(--ink); border-radius: 4px; background: var(--wood2); box-shadow: inset 0 -4px 0 var(--ink); cursor: pointer; order: 2 }
#autoOn:checked { background: var(--fireY); box-shadow: 2px 2px 0 var(--ink) }
.autoL .cord { order: 1 } .autoL .k { order: 3 }
.autoM { display: flex; align-items: center; gap: 4px; font: 700 11px/1 var(--sans); color: var(--paper); padding: 6px 7px; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); transform: rotate(1.5deg); margin-bottom: 2px }
#autoMult { width: 62px; font: 700 14px/1 var(--mono); padding: 3px 5px; border: 2px solid var(--ink); background: var(--paper2); color: var(--ink) }
#autoWrap:has(#autoOn:checked) .autoM { background: var(--fireY) }
/* THE BIG BUTTON. The loudest thing on the page after the multiplier. */
#bigBtn { position: relative; min-width: 320px; min-height: 66px; border: 3px solid var(--ink); border-radius: 2px; box-shadow: var(--shadow-s); background: var(--gold); color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 22px; transition: transform .08s, box-shadow .08s; margin-bottom: 4px }
#bigMain { font: 900 30px/1 var(--display); letter-spacing: .06em; text-transform: uppercase }
#bigSub { font: 600 12px/1.2 var(--sans); color: var(--ink2); white-space: nowrap }
#bigBtn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink) }
#bigBtn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink) }
#bigBtn[data-state="onboard"], #bigBtn[data-state="onnext"], #bigBtn[data-state="lifting"], #bigBtn[data-state="jumped"] { background: var(--paper) }
#bigBtn[data-state="ruggedlock"] { background: var(--rug); color: var(--paper) } #bigBtn[data-state="ruggedlock"] #bigSub { color: var(--paper2) }
#bigBtn[data-state="lifting"], #bigBtn[data-state="jumped"], #bigBtn[data-state="ruggedlock"] { cursor: default }
#bigBtn[data-state="lifting"]:hover, #bigBtn[data-state="jumped"]:hover, #bigBtn[data-state="ruggedlock"]:hover, #bigBtn[data-state="lifting"]:active, #bigBtn[data-state="jumped"]:active, #bigBtn[data-state="ruggedlock"]:active { transform: none; box-shadow: var(--shadow-s) }
#bigBtn[data-state="jump"] { box-shadow: 5px 5px 0 var(--ink) } #bigBtn[data-state="jump"] #bigMain { font-size: 34px } #bigBtn[data-state="jump"] #bigSub { color: var(--ink); font-weight: 800 }
#bigBtn.hot #bigSub { color: var(--rugdeep) }
#bigBtn.hot[data-state="jump"] { box-shadow: 5px 5px 0 var(--rugdeep) }
#bigBtn[data-state="jumped"] #bigSub { color: var(--win); font-weight: 800 }
#bigBtn[data-state="onboard"] #bigSub, #bigBtn[data-state="onnext"] #bigSub { color: var(--rug) }
#cancelBtn { display: none !important }

/* ---------- 5. toast, tooltip, curtain ---------- */
#toast { position: fixed; left: 24px; top: calc(var(--header) + 262px); z-index: 60; background: var(--paper); border: 3px solid var(--ink); box-shadow: var(--shadow); padding: 12px 18px;
  font: 600 15px/1.4 var(--sans); max-width: min(420px, calc(100vw - 48px)); text-align: left; animation: drop .3s ease-out }
#toast[data-kind="win"] { background: var(--gold) } #toast[data-kind="loss"] { background: var(--rug); color: var(--paper) }
#tip { position: absolute; z-index: 40; pointer-events: none; display: flex; gap: 10px; align-items: center; background: var(--paper); border: 2px solid var(--ink); box-shadow: var(--shadow-s); padding: 8px 10px; font: 500 12px/1.4 var(--mono); min-width: 200px }
#tipCv { width: 48px; height: 48px; image-rendering: pixelated; border: 1px solid var(--ink); background: var(--b0); box-shadow: inset 0 -12px 0 var(--sand); flex: none }
.tipTxt { display: flex; flex-direction: column; min-width: 0 } #tipName { font-weight: 700 } #tipState { color: var(--ink2) }
#curtain { position: absolute; inset: 0; z-index: 70; background: var(--paper); background-image: var(--grain); background-size: 3px 3px; display: grid; place-items: center; animation: curtainOff .5s ease-in 8s forwards }
#curtain.off { animation: curtainOff .5s ease-in forwards }
@keyframes curtainOff { to { opacity: 0; visibility: hidden } }
.cBox { display: grid; gap: 16px; justify-items: center; text-align: center; padding: 0 16px }
.cLine { font: 600 14px/1.3 var(--sans); color: var(--ink2) }
.cRug { width: min(260px, 70vw); height: 16px; background: var(--rug); border: 2px solid var(--ink); box-shadow: inset 0 3px 0 var(--gold), inset 0 -3px 0 var(--gold), 3px 3px 0 var(--ink); transform-origin: left center; animation: unroll .9s steps(14) .2s both }
@keyframes unroll { from { transform: scaleX(0) } to { transform: scaleX(1) } }

/* ---------- 6. below the stage: the earth, the pipes, the rooms ---------- */
main.below { position: relative; background: var(--earth); background-image: radial-gradient(rgba(243,233,210,.05) 1px, transparent 1px); background-size: 3px 3px; padding: 56px 0 72px }
#pipes { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; image-rendering: pixelated; display: block }
.room { position: relative; z-index: 1; padding: 0 24px; margin: 0 0 56px; scroll-margin-top: calc(var(--header) + 16px) }
.room .inner { position: relative; width: min(980px, 62vw); margin: 0 auto; background: var(--paper); background-image: var(--grain); background-size: 3px 3px; border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); padding: 56px 56px 48px }

/* 01 the washing line */
.lineWrap { position: relative; margin: 26px 0 16px; padding: 10px 16px 10px }
.lineWrap::before { content: ''; position: absolute; left: -6px; right: -6px; top: 22px; height: 3px; background: var(--ink) }
.pole { position: absolute; top: 0; width: 8px; height: 100%; background: var(--wood); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink) }
.pole.l { left: -14px } .pole.r { right: -14px }
.lineTags { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 8px 12px; margin: 0 12px 16px }
.lineTag { padding: 6px 10px; background: var(--fireY); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); font: 700 11px/1 var(--mono); white-space: nowrap; text-transform: uppercase; letter-spacing: .04em }
.lineTag.big { transform: rotate(-2deg) } .lineTag.small { transform: rotate(1.5deg) }
.lineTag.counts { transform: rotate(-1deg); background: var(--paper); font: 400 10px/1.6 var(--pixel); letter-spacing: .04em; padding: 5px 9px; text-transform: none }
.lineTag.counts:empty { display: none }
#lineRugs { display: flex; flex-wrap: wrap; gap: 16px 10px; align-items: flex-start; min-height: 40px; padding-top: 10px }
#lineRugs:empty::after { content: 'the first rug is still drying'; font: 400 10px/1 var(--pixel); color: var(--mute); padding: 8px 0 }
#lineRugs .rug { position: relative; width: 38px; height: 25px; border: 2px solid var(--ink); background: var(--paper2); color: var(--ink); font: 400 10px/1 var(--pixel); padding: 0; display: grid; place-items: center; cursor: pointer; transform-origin: 50% -10px;
  box-shadow: inset 0 3px 0 var(--gold), inset 0 -3px 0 var(--gold), 2px 2px 0 var(--ink); transition: transform .15s }
#lineRugs .rug::before { content: ''; position: absolute; left: 50%; top: -11px; width: 4px; height: 9px; margin-left: -2px; background: var(--clay); border: 1px solid var(--ink) }
#lineRugs .rug::after { content: ''; position: absolute; inset: -8px }   /* the invisible hit area: a thumb can land it */
#lineRugs .rug:hover { transform: rotate(-5deg) }
.c0, .r0 { background: var(--rug) !important; color: var(--paper) !important } .c1, .r1 { background: var(--paper) !important } .c2, .r2 { background: var(--fireY) !important } .c3, .r3 { background: var(--fire) !important } .c4, .r4 { background: var(--gold) !important }
#lineRugs .rug.star::after { content: '★'; inset: auto; right: -5px; top: -8px; font: 700 9px/1 var(--sans); color: var(--ink); text-shadow: 1px 1px 0 var(--paper) }
#lineRugs .rug.mine { outline: 2px solid var(--gold); outline-offset: 1px }
#lineLegend { display: flex; flex-wrap: wrap; gap: 8px 18px; font: 600 13px/1.3 var(--sans); color: var(--ink2); margin: 10px 0 14px }
.rsw { display: inline-block; width: 16px; height: 11px; border: 1px solid var(--ink); margin-right: 6px; vertical-align: -1px; box-shadow: inset 0 2px 0 var(--gold), inset 0 -2px 0 var(--gold); position: relative }
.rsw.c4::after { content: '★'; position: absolute; right: -5px; top: -7px; font: 700 8px/1 var(--sans); color: var(--ink) }

/* 02 how the ride works */
#how .inner { padding-top: 0; overflow: hidden }
.howHead { position: relative; margin: 0 -56px 0; padding: 48px 56px 40px; min-height: 440px; background: var(--b2); box-shadow: inset 0 -150px 0 var(--b1), inset 0 -154px 0 var(--b3); border-bottom: 3px solid var(--ink) }
#keyart { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; image-rendering: pixelated; z-index: 0; max-width: none }
.howCopy { position: relative; z-index: 1; max-width: 540px; background: var(--paper); background-image: var(--grain); background-size: 3px 3px; border: 3px solid var(--ink); box-shadow: var(--shadow); padding: 22px 26px 24px }
.howTitle { position: relative; margin: -46px 0 14px; min-height: 64px }
#title { display: block; width: 100%; max-width: 440px; height: auto; image-rendering: pixelated }
.howTitle:has(#title:not([hidden])) .wmFallback { visibility: hidden; position: absolute }
.lede p { margin: 0 0 6px; font-size: 17px; line-height: 1.45; color: var(--ink2) }
.lede p:first-child { color: var(--ink); font-weight: 600 }
#howBuy { margin-top: 16px }
.story { list-style: none; counter-reset: f; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); background: var(--paper2); border: 3px solid var(--ink); border-top: 10px dotted var(--ink); border-bottom: 10px dotted var(--ink); box-shadow: var(--shadow) }
.story li { counter-increment: f; position: relative; padding: 16px 18px 18px; border-right: 3px solid var(--ink); min-width: 0 }
.story li:last-child { border-right: 0 }
.story li::before { content: 'FRAME ' counter(f); font: 400 10px/1 var(--pixel); letter-spacing: .1em; color: var(--rug) }
.story figure { margin: 10px 0 12px; height: 160px; background: var(--b0); border: 2px solid var(--ink); display: grid; place-items: center; box-shadow: inset 0 -42px 0 var(--sand), inset 0 -44px 0 var(--ink); overflow: hidden }
.story figure img { image-rendering: pixelated; max-height: 130px; max-width: 86%; display: block }
.story figure img:not([src]), .story figure img[src=""] { display: none }
.story li b { display: block; font: 900 28px/1 var(--display); text-transform: uppercase; letter-spacing: .02em }
.story li p { margin: 6px 0 0; font-size: 15px; line-height: 1.45; color: var(--ink2) }
.signs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin: 44px 0 10px; align-items: start }
.sign { position: relative; margin-top: 28px; padding: 18px 16px 16px; background: var(--wood2); color: var(--paper); border: 3px solid var(--ink); box-shadow: var(--shadow); outline: 3px solid var(--wood); outline-offset: -8px }
.sign::before, .sign::after { content: ''; position: absolute; top: -31px; width: 3px; height: 30px; background: var(--ink) }
.sign::before { left: 20% } .sign::after { right: 20% }
.sign:nth-child(1) { transform: rotate(-2deg) } .sign:nth-child(2) { transform: rotate(1.5deg); margin-top: 40px } .sign:nth-child(3) { transform: rotate(-1deg); margin-top: 32px }
.sign b { display: block; font: 900 24px/1 var(--display); color: var(--fireY); text-transform: uppercase; margin-bottom: 8px }
.sign p { margin: 0; font-size: 15px; line-height: 1.45 } .sign a { color: var(--fireY) }

/* 03 + 04 the two cellars */
.cellars { position: relative; z-index: 1; width: min(1240px, 82vw); margin: 0 auto 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start }
.cellars .room { padding: 0; margin: 0 }
.cellars .room .inner { width: 100%; padding: 40px 36px 36px }
#furnace .inner { background: var(--brick); background-image: var(--bricks); background-size: 64px 32px; image-rendering: pixelated; color: var(--paper) }
#furnace .eyebrow { color: var(--fireY) } #furnace .p { color: var(--paper2) }
.whitewash { display: grid; gap: 6px; padding: 18px 22px 16px; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); box-shadow: var(--shadow); transform: rotate(-1deg); margin: 0 0 22px }
#burnBig { font: 400 clamp(26px, 2.8vw, 40px)/1 var(--pixel); letter-spacing: -.02em }
.whitewash span { font: 700 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink2) }
.whitewash span b { color: var(--rug) }
.wallHead { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; margin: 18px 0 8px }
.wallHead .k { color: var(--fireY) } .wallHead b { font: 700 18px/1 var(--mono) } .wallHead .hint { font-size: 12px; color: var(--sand) }
/* the furnace itself, drawn large: the flame is the burn rate, the chimney grows a brick per 10,000 coins burned today */
#burnWall { position: relative; padding: 0; background: var(--mortar); border: 3px solid var(--ink); box-shadow: inset 3px 3px 0 var(--earth); min-height: 220px; overflow: hidden }
#burnWall canvas { display: block; width: 100%; height: auto; image-rendering: pixelated }
.burnTop { margin: 14px 0; font-size: 15px; line-height: 1.5; color: var(--paper) } .burnTop b { color: var(--fireY) } .burnTop em { color: var(--sand) }
.ledger { background: var(--paper); color: var(--ink); border: 3px solid var(--ink); box-shadow: var(--shadow-s); font: 500 13px/1.4 var(--mono) }
.ledger .lh { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-bottom: 2px dashed var(--ink); font: 400 10px/1 var(--pixel); letter-spacing: .08em; text-transform: uppercase; color: var(--mute) }
.ledger ol { list-style: none; margin: 0; padding: 0 }
.ledger li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 12px; border-bottom: 1px dashed var(--rule); white-space: nowrap; overflow: hidden; align-items: center }
.ledger li > * { overflow: hidden; text-overflow: ellipsis } .ledger li a { color: var(--rug) }
.ledger li .who { display: inline-flex; align-items: center; gap: 8px; flex: 1; min-width: 0 }
.ledger li canvas.face { width: 24px; height: 18px; image-rendering: pixelated; border: 1px solid var(--ink); background: var(--b0); flex: none }
.ledger li:last-child { border-bottom: 0 }
.ledger ol:empty::after { content: 'no lines yet'; display: block; padding: 12px; color: var(--mute); font-size: 12px }
#house .inner { background: var(--stone); background-image: var(--stones); background-size: 96px 48px; image-rendering: pixelated; color: var(--ink) }
#house .eyebrow { color: var(--teal) }
/* the vault wall is pale sandstone: grey text on it was hard to read, so each line sits on a paper note like the teller's */
#house .p { color: var(--ink); background: var(--paper); border: 2px solid var(--ink); box-shadow: var(--shadow-s); padding: 8px 12px; font-weight: 500; max-width: 62ch }
#house .inner::before { content: ''; position: absolute; left: 50%; top: -3px; width: 120px; height: 14px; margin-left: -60px; background: var(--teal); border: 3px solid var(--ink); border-top: 0; border-radius: 0 0 60px 60px / 0 0 14px 14px }
.lintel { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 14px 20px; background: var(--ink); color: var(--paper); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--teal); margin: 0 0 8px }
#houseBal { font: 400 clamp(22px, 2.4vw, 34px)/1 var(--pixel); color: var(--gold) }
.lintel > span { font: 700 13px/1 var(--mono); color: var(--paper2) }
#houseSolRow { font: 600 13px/1 var(--mono); color: var(--ink2); margin: 0 0 10px }
.plaqueAddr { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding: 12px 14px; background: var(--rock); border: 3px solid var(--ink); box-shadow: inset 0 -4px 0 var(--crater), var(--shadow-s); margin: 14px 0 }
.plaqueAddr .k { flex-basis: 100%; color: var(--ink2) }
#houseAddr { flex: 1 1 200px; font: 700 12px/1.4 var(--mono); word-break: break-all; color: var(--ink); text-shadow: 1px 1px 0 #fff }
.teller { position: relative; padding: 10px 12px; background: var(--paper); border: 2px solid var(--ink); box-shadow: var(--shadow-s); font: 600 14px/1.4 var(--sans); margin: 12px 0 }
.teller .k { display: block; color: var(--teal); margin-bottom: 5px } .teller b { font-family: var(--mono) }
.truck { position: relative; padding: 12px 14px 14px; margin: 14px 0 26px; background: var(--win); color: var(--ink); border: 3px solid var(--ink); box-shadow: var(--shadow-s) }
.truck .k { color: var(--ink) } .truck b { display: block; font: 400 22px/1 var(--pixel); margin: 7px 0 } .truck p { margin: 0; font-size: 13px; line-height: 1.4 }
.truck .feesLine { margin-top: 6px } .truck .feesLine b { display: inline; font-family: inherit; font-size: 13px; font-weight: 700; line-height: 1.4; margin: 0 } /* fees waiting: one plain line, not the clock font */
#maxBetLine b { font: inherit; color: inherit }
.truck::before, .truck::after { content: ''; position: absolute; bottom: -13px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); box-shadow: inset 0 0 0 5px var(--ink), inset 0 0 0 8px var(--paper) }
.truck::before { left: 16px } .truck::after { right: 16px }

/* 05 wall of legends: four posters pasted on the plaster, each with its own pin and frame */
#legends .inner { background: var(--plaster); box-shadow: inset 0 -80px 0 var(--sand), 8px 8px 0 var(--ink) }
.posters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin: 18px 0 10px; align-items: start }
.poster { position: relative; display: grid; justify-items: center; gap: 6px; padding: 48px 12px 16px; background: var(--paper); background-image: var(--grain); background-size: 3px 3px; border: 2px solid var(--ink); box-shadow: var(--shadow); text-align: center; transform: rotate(var(--rot, 0deg)) }
.poster::before { content: ''; position: absolute; left: 50%; top: -9px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--pin, var(--rug)); border: 2px solid var(--ink); box-shadow: 1px 1px 0 var(--ink) }
#pJump { --rot: -2.5deg; --pin: var(--win) } #pWin { --rot: 1.5deg; --pin: var(--gold); margin-top: 18px; outline: 4px double var(--gold); outline-offset: -8px } #pDonor { --rot: -1deg; --pin: var(--fire) } #pCrater { --rot: 2deg; --pin: var(--navy); margin-top: 10px; outline: 3px solid var(--rug); outline-offset: -8px }
.poster.paste { animation: paste .4s ease-out }
@keyframes paste { 0% { transform: rotate(var(--rot, 0deg)) scale(1.18) } 60% { transform: rotate(var(--rot, 0deg)) scale(.97) } 100% { transform: rotate(var(--rot, 0deg)) scale(1) } }
.pK { position: absolute; top: 18px; left: 0; right: 0; font: 400 10px/1 var(--pixel); letter-spacing: .1em; color: var(--rug) }
#pCrater .pK::before { content: 'WANTED · '; }
.pCv { width: 96px; height: 72px; image-rendering: pixelated; border: 2px solid var(--ink); background: var(--b0) }
.pNum { font: 900 40px/1 var(--display); color: var(--rug); margin-top: 4px }
#pCrater .pNum { color: var(--navy) } #pDonor .pNum { color: var(--fireD) } #pWin .pNum { color: var(--win) }
.pWho { font: 700 12px/1 var(--mono) }
.pLine { font: 500 italic 13px/1.3 var(--sans); color: var(--ink2) }
.pLink { border: 0; background: none; padding: 4px 0 0; font: 600 12px/1 var(--sans); color: var(--rug); text-decoration: underline; cursor: pointer }

/* 06 check a rug: the back room. Wood desk, a paper form, the stamp. */
#check .inner { background: var(--wood); background-image: var(--planks); background-size: 128px 64px; image-rendering: pixelated; color: var(--paper) }
#check .eyebrow { color: var(--fireY) } #check .p { color: var(--paper2) }
#check .inner::before { content: ''; position: absolute; right: 64px; top: -3px; width: 110px; height: 44px; background: var(--teal); border: 3px solid var(--ink); border-top: 0; clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%) }
#check .inner::after { content: ''; position: absolute; right: 64px; top: 41px; width: 110px; height: 6px; background: var(--fireY); border: 2px solid var(--ink); border-top: 0 }
.vForm { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; padding: 24px 26px; margin: 22px 0; background: var(--paper); background-image: var(--grain); background-size: 3px 3px; color: var(--ink); border: 3px solid var(--ink); box-shadow: var(--shadow); transform: rotate(-.6deg) }
.vForm label { display: grid; gap: 6px; min-width: 0; align-content: start }
.vForm label > span { font: 400 10px/1.4 var(--pixel); letter-spacing: .08em; color: var(--ink2) }
.vForm input { width: 100%; min-width: 0; font: 600 13px/1.3 var(--mono); padding: 10px; border: 2px solid var(--ink); background: var(--paper2); color: var(--ink) }
.vForm .wide { grid-column: 1 / -1 } #vGo { grid-column: 1 / -1; justify-self: start }
#vOut { display: grid; gap: 12px; margin: 18px 0 }
.seal { padding: 14px 18px; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-left: 10px solid var(--rug); box-shadow: var(--shadow-s); font: 600 14px/1.5 var(--mono) }
.seal p { margin: 0 0 8px; overflow-wrap: anywhere } .seal p:last-child { margin: 0 }
#vStamp { position: static; justify-self: start; font-size: 34px; border-width: 4px; padding: 10px 18px; margin: 4px 0 0 16px }
#vStamp.ok { color: var(--win); border-color: var(--win); text-shadow: 2px 2px 0 var(--teal) } #vStamp.bad { color: var(--rug); border-color: var(--rug) }
details.math { background: var(--paper2); color: var(--ink); border: 2px dashed var(--ink2); padding: 0 }
details.math summary { cursor: pointer; padding: 10px 14px; font: 700 13px/1 var(--sans); text-transform: uppercase; letter-spacing: .06em }
details.math p { margin: 0; padding: 0 14px 12px; font: 600 13px/1.5 var(--mono); overflow-wrap: anywhere }
#vEdge { color: var(--sand) } #check .small { color: var(--sand) } #chainEnd { font-size: 11px; color: var(--fireY); overflow-wrap: anywhere }

/* footer */
#foot { position: relative; z-index: 1; background: var(--ink); color: var(--paper); padding: 36px 24px 48px }
#foot .inner { max-width: 980px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 16px 22px; align-items: center; font: 600 14px/1.5 var(--sans) }
#foot .wm { color: var(--paper) } #foot a { color: var(--gold) }
#foot .pill { background: var(--paper); box-shadow: 2px 2px 0 var(--gold); font-size: 11px }
#foot .faint { flex-basis: 100%; color: var(--mute); font-weight: 500; font-size: 13px }

/* ---------- 7. modals: never clip the head on a short phone (flex + auto margins), scroll inside the box when it is taller than the screen ---------- */
.modal { position: fixed; inset: 0; z-index: 50; background: rgba(27,22,18,.62); display: flex; align-items: flex-start; justify-content: center; padding: 20px; overflow: auto }
.box { position: relative; width: 520px; max-width: 100%; max-height: calc(100dvh - 24px); overflow: auto; margin: auto; background: var(--paper); background-image: var(--grain); background-size: 3px 3px; border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); padding: 26px 26px 22px; display: grid; gap: 14px; animation: drop .25s ease-out }
.box.wide { width: 900px }
.box .x { position: absolute; right: 6px; top: 2px; z-index: 1; border: 0; background: none; font: 400 30px/1 var(--sans); color: var(--ink); padding: 4px 8px }
.mHead h3 { font: 900 26px/1.05 var(--display); text-transform: uppercase; margin: 6px 0 0 }
.mHead .eyebrow { margin: 0 }
.tabs { display: flex; border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink) }
.tabs button { flex: 1; border: 0; background: var(--paper2); padding: 11px; font: 800 13px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase }
.tabs button + button { border-left: 2px solid var(--ink) }
.tabs button[aria-selected="true"] { background: var(--ink); color: var(--paper) }
.box [role="tabpanel"] { display: grid; gap: 12px }
.box .p { margin: 0; font-size: 15px } .box .small { margin: 0 }
.wallet { display: flex; gap: 10px; align-items: center; flex-wrap: wrap }
#walletAddr { font: 600 12px/1.4 var(--mono); color: var(--ink2); word-break: break-all }
#depositRow { display: grid; gap: 8px; padding: 12px; border: 2px dashed var(--ink2); background: var(--paper2) }
.addrRow { display: flex; gap: 8px; align-items: center; background: var(--paper); border: 2px solid var(--ink); padding: 8px 10px }
.addrRow code { flex: 1; font: 600 12px/1.4 var(--mono); word-break: break-all }
.row { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap }
.row input { flex: 1 1 160px; min-width: 0; font: 700 16px/1 var(--mono); padding: 11px 12px; border: 3px solid var(--ink); background: var(--paper2); color: var(--ink) }
details.fallback summary { cursor: pointer; font: 700 13px/1.3 var(--sans); color: var(--rug) } details.fallback { display: grid; gap: 6px }
.msg { min-height: 1.4em; font: 600 14px/1.4 var(--sans); color: var(--rug); margin: 0 } .msg:empty { display: none }
.ticketBox { width: 460px; padding: 0; gap: 0 }
.tHead { display: grid; gap: 4px; padding: 20px 22px 16px; background: var(--rug); color: var(--paper) }
.tHead .eyebrow { color: var(--paper2); margin: 0 } .tHead b { font: 900 30px/1 var(--display); text-transform: uppercase } .tHead .mono { font: 600 12px/1 var(--mono); color: var(--paper2) }
.ticketBox .x { color: var(--paper) }
.tRows { padding: 12px 22px 6px; border-top: 3px dashed var(--ink) }
.tr { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px dashed var(--rule); font: 600 13px/1.4 var(--mono) }
.tr > span:first-child { flex: none; color: var(--mute); font: 600 11px/1.6 var(--sans); text-transform: uppercase; letter-spacing: .06em; max-width: 46% }
.tr b { text-align: right; word-break: break-all; min-width: 0 }
.tr.big b { font: 400 26px/1 var(--pixel); color: var(--rug) }
.tr:has(> [hidden]) { display: none }
#tCheck { margin: 12px 22px 0 } .ticketBox .small { padding: 10px 22px 20px }
#shareCv { width: 100%; height: auto; display: block; border: 3px solid var(--ink); image-rendering: pixelated; background: var(--b0); box-shadow: var(--shadow-s) }
.shareToggle { display: flex; gap: 8px }
.shareToggle button { font: 400 10px/1 var(--pixel); letter-spacing: .04em; padding: 10px 12px; border: 2px solid var(--ink); background: var(--paper2); color: var(--ink); box-shadow: 2px 2px 0 var(--ink) }
.shareToggle button[aria-pressed="true"] { background: var(--ink); color: var(--paper) }
.ctas { display: flex; gap: 10px; flex-wrap: wrap }

/* ---------- 8. docs page (docs.html shares this file) ---------- */
body.docs { background: var(--earth); background-image: radial-gradient(rgba(243,233,210,.05) 1px, transparent 1px); background-size: 3px 3px; color: var(--paper) }
body.docs #top { box-shadow: 0 4px 0 var(--ink) }
.docMain { max-width: 820px; margin: 0 auto; padding: 48px 20px 80px }
.docHead { background: var(--paper); background-image: var(--grain); background-size: 3px 3px; color: var(--ink); border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); padding: 40px 40px 34px; margin-bottom: 28px }
.docHead h1 { font: 900 clamp(40px, 7vw, 76px)/.92 var(--display); text-transform: uppercase; margin: 0 0 14px }
.docHead .lede { font-size: 18px; color: var(--ink2); margin: 0 0 24px; max-width: 58ch }
.toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 }
.toc a { font: 400 10px/1 var(--pixel); letter-spacing: .04em; color: var(--ink); text-decoration: none; padding: 9px 10px; border: 2px solid var(--ink); background: var(--paper2); box-shadow: 2px 2px 0 var(--ink) }
.toc a:hover { background: var(--fireY) }
.docMain section { background: var(--paper); background-image: var(--grain); background-size: 3px 3px; color: var(--ink); border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); padding: 30px 32px 26px; margin: 0 0 24px; scroll-margin-top: calc(var(--header) + 16px) }
.docMain h2 { font: 900 32px/1 var(--display); text-transform: uppercase; margin: 0 0 14px; display: flex; gap: 12px; align-items: baseline }
.docMain h2 .n { font: 400 10px/1 var(--pixel); color: var(--rug) }
.docMain p { margin: 0 0 12px; color: var(--ink2); line-height: 1.55 } .docMain p b, .docMain li b { color: var(--ink) }
.docMain ul, .docMain ol { margin: 0 0 12px; padding-left: 22px; color: var(--ink2) } .docMain li { margin: 0 0 6px }
.docMain a { color: var(--rug) }
.bigLine { background: var(--fireY); color: var(--ink); border: 3px solid var(--ink); box-shadow: var(--shadow); padding: 16px 18px; margin: 14px 0 18px; font: 700 18px/1.45 var(--sans) }
.bigLine em { font-style: normal; color: var(--rug) }
.steps { counter-reset: s; list-style: none; padding: 0; margin: 10px 0 0 }
.steps li { counter-increment: s; position: relative; padding: 12px 14px 12px 58px; margin: 0 0 10px; background: var(--paper2); border: 2px solid var(--ink); color: var(--ink2) }
.steps li::before { content: counter(s); position: absolute; left: 12px; top: 10px; width: 32px; height: 32px; display: grid; place-items: center; background: var(--gold); color: var(--ink); font: 400 12px/1 var(--pixel); border: 2px solid var(--ink) }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 8px 0 14px }
.fact { background: var(--paper2); border: 2px solid var(--ink); padding: 14px 16px }
.fact .k { color: var(--mute); margin-bottom: 8px; display: block } .fact .v { font: 900 26px/1.1 var(--display); color: var(--rug) } .fact .t { font-size: 14px; color: var(--ink2); margin-top: 6px }
.formula { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font: 600 15px/1.5 var(--mono); margin: 10px 0 14px; padding: 12px 14px; background: var(--paper2); border: 2px dashed var(--ink2) }
.docMain details { background: var(--paper2); border: 2px solid var(--ink); margin: 0 0 10px }
.docMain summary { cursor: pointer; padding: 14px 16px; font: 700 16px/1.3 var(--sans); color: var(--ink); list-style: none }
.docMain summary::-webkit-details-marker { display: none }
.docMain summary::before { content: '+'; display: inline-block; width: 22px; color: var(--rug); font: 400 12px/1 var(--pixel) }
.docMain details[open] summary::before { content: '−' }
.docMain details p { padding: 0 16px 12px 38px }
.docAddr { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin: 6px 0 12px; padding: 10px 12px; background: var(--paper2); border: 2px solid var(--ink); font: 600 13px/1.4 var(--mono); word-break: break-all }
.docAddr button { flex: none; font: 400 10px/1 var(--pixel); padding: 8px 9px; border: 2px solid var(--ink); background: var(--gold); color: var(--ink); box-shadow: 2px 2px 0 var(--ink) }
.docFoot { text-align: center; color: var(--mute); font-size: 13px; padding: 10px 20px 40px } .docFoot a { color: var(--gold) }

/* ---------- 9. breakpoints ---------- */
@media (max-width: 1280px) { .hStamps { margin-left: 0 } #wristTag { right: 96px; width: 200px } }
@media (max-width: 1100px) {
  .room .inner { width: 100%; padding: 44px 32px 40px }
  .cellars { width: 100%; grid-template-columns: 1fr; padding: 0 24px }
  .posters { grid-template-columns: 1fr 1fr } .signs { grid-template-columns: 1fr; gap: 34px }
  .story { grid-template-columns: 1fr } .story li { border-right: 0; border-bottom: 3px solid var(--ink) } .story li:last-child { border-bottom: 0 }
  .howHead { margin: 0 -32px; padding: 40px 32px 32px }
  #how .inner { padding-top: 0 }
  #bigBtn { min-width: 240px }
}
@media (max-width: 960px) { #top { gap: 10px; padding: 0 14px } .hstamp { font-size: 12px } #xTop { display: none } }

/* THE PHONE STAGE: one screen, no scroll to play. Two-row header, fixed ticket counter, the sack panel becomes a sheet, the toast gets its own lane under the tag. */
@media (max-width: 760px) {
  :root { --dock: 76px; --header: 78px }
  #top { flex-wrap: wrap; align-content: center; row-gap: 6px; padding: 0 12px; gap: 8px; overflow: hidden }
  .hLeft { order: 1; gap: 6px } .hRight { order: 2; margin-left: auto } .hStamps { order: 3; margin: 0; gap: 6px } .hSacks { order: 4; margin-left: auto; gap: 6px }
  .wm { font-size: 22px }
  #buyTop { padding: 6px 9px; font-size: 11px }
  .pill { padding: 5px 7px; font-size: 11px } .pill .cp { font-size: 8px }
  .hstamp { transform: none; flex-direction: row; align-items: baseline; gap: 6px; font-size: 11px; padding: 3px 6px } .hstamp + .hstamp { transform: none } .hstamp .k { font-size: 8px; font-family: var(--sans); font-weight: 700 }
  .sack { font-size: 11px; padding: 3px 6px 11px 5px; gap: 5px; min-height: 30px } .sack .pouch { width: 11px; height: 12px } .sack .pouch::before { width: 3px; height: 3px; top: -5px; left: 2px } .jarK { font-size: 7px; left: 5px; bottom: 1px }
  #cashierBtn { padding: 9px 10px; font-size: 11px; border-width: 2px; box-shadow: 2px 2px 0 var(--ink) }
  .ibtn { width: 32px; height: 32px }
  #stage { height: calc(100vh - var(--header) - var(--dock)); height: calc(100svh - var(--header) - var(--dock)); min-height: 440px }
  #plaque, #watchSign, #youTag { display: none }
  #lastStrip { width: 250px; height: 44px } .rugChip .tagM, .rugChip.show .tagM { display: none }
  .tagCol { align-items: flex-start; padding: 50px 12px 0 }
  #tag { min-width: 0; width: calc(100% - 150px); padding: 10px 10px 9px } #tag::before { display: none } #tag .hole { top: 4px }
  #tag[data-phase="riding"][data-len="6"] #tagMult, #tag[data-phase="riding"][data-len="7"] #tagMult { font-size: 26px !important }
  #tag[data-phase="rugged"] #tagMult { font-size: 24px !important }
  #tagMult { white-space: nowrap; overflow-wrap: normal }
  #tagMult { font-size: 36px }
  #tag[data-phase="riding"] #tagMult { font-size: 36px }
  #tag.word #tagMult, #tag[data-phase="betting"] #tagMult, #tag[data-phase^="sett"] #tagMult, #stage:has(#bigBtn[data-state="geton"]) #tagMult, #stage:has(#bigBtn[data-state="getcoins"]) #tagMult, #stage:has(#bigBtn[data-state="onboard"]) #tagMult,
  #stage:has(#bigBtn[data-state="lifting"]) #tagMult, #stage:has(#bigBtn[data-state="nextin"]) #tagMult { font-size: 17px; white-space: nowrap }
  #tagSub { font-size: 12px; margin-top: 6px }
  #wristTag { top: 46px; right: 12px; width: 124px; font-size: 10px; line-height: 1.4 } #wristTag::before { height: 10px; top: -10px }
  .dsk { display: none } .mob { display: inline } .wface.front { min-height: 62px }
  .wface { padding: 6px 8px 6px 9px } .wface::after { width: 14px; height: 14px; right: -6px; top: -6px } .wk { font-size: 8px; font-family: var(--sans); font-weight: 800 } #wristLine, .wline2 { font-size: 10px } #wristHash, #wristSeed { font-size: 10px }
  .wcard { min-height: 62px }
  #wristCheck { position: absolute; inset: 0; width: 100%; min-height: 32px; opacity: 0; z-index: 2 } .wline2 { font-size: 10px; font-weight: 700 }
  #rugStamp { top: 44%; font-size: 34px; width: max-content; max-width: calc(100vw - 24px); white-space: normal }
  #rugStampText { padding: 6px 12px 8px; border-width: 5px; outline-width: 2px; outline-offset: 3px; text-shadow: 2px 2px 0 var(--navy) }
  #rugStamp::before { display: none }
  #postBtn { font-size: 11px; padding: 8px 10px }
  #feed { left: 12px; top: auto; bottom: 6px; width: min(300px, calc(100% - 52px)); font-size: 11px; gap: 4px }
  #feed li { padding: 4px 7px } #feed li:nth-child(n+2) { display: none }
  #stage:has(#todayStrip:not([hidden])) #feed { bottom: 34px }
  #dock { position: fixed; height: calc(var(--dock) + env(safe-area-inset-bottom, 0px)); padding: 0 12px env(safe-area-inset-bottom, 0px); grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 10px; border-top-width: 3px }
  #todayStrip { left: 12px; top: -26px; font-size: 11px; padding: 4px 8px 3px; gap: 8px }
  #sackBtn { flex-direction: row; justify-content: center; gap: 8px; min-height: 60px; border: 3px solid var(--ink); background: var(--paper2); box-shadow: var(--shadow-s); padding: 4px 8px; min-width: 0 }
  #sackBtn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink) }
  #sackIcon { width: 24px; height: 27px; border-width: 2px } #sackIcon::before { left: 4px; top: -8px; width: 8px; height: 6px; border-width: 2px }
  .sackTxt { display: flex; flex-direction: column; gap: 3px; font-size: 13px; min-width: 0; overflow: hidden; border: 0; box-shadow: none; background: none; transform: none; margin: 0; padding: 0 } .sackTxt #sackBtnKind { font-size: 8px }
  .sackK { position: absolute; left: 0; right: 0; bottom: 3px; text-align: center; font-size: 8px; color: var(--ink2); white-space: nowrap } #sackBtn { position: relative }
  #sackPanel { display: none; position: fixed; left: 0; right: 0; bottom: calc(var(--dock) + env(safe-area-inset-bottom, 0px)); z-index: 20; padding: 14px 16px 14px; background: var(--wood); background-image: var(--planks); background-size: 128px 64px; border-top: 3px solid var(--ink); box-shadow: 0 -4px 0 var(--earth) }
  #dock.open #sackPanel { display: flex; gap: 10px }
  .sackTop { flex-wrap: wrap; align-items: stretch; gap: 10px }
  .amt { width: 100% } .amtRow { width: 100% } #sackAmt { flex: 1; width: auto; min-width: 0; font-size: 26px; padding: 10px 12px }
  #sackChips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100% } #sackChips button { padding: 13px 4px 12px; font-size: 11px }
  .kind { width: 100%; margin-top: 10px } .kind button { flex: 1; justify-content: center; padding: 12px 8px }
  #autoWrap { width: 100%; justify-content: space-between; margin: 4px 0 0 } .autoL { flex-direction: row; gap: 8px } .autoL .cord { display: none } .autoL .k { font-size: 10px }
  #clayLine { white-space: normal; font-size: 13px }
  #bigBtn { min-width: 0; width: 100%; min-height: 60px; padding: 4px 10px; gap: 2px; margin-bottom: 0 }
  #bigMain { font-size: 26px } #bigBtn[data-state="jump"] #bigMain { font-size: 28px } #bigSub { font-size: 11px }
  /* the toast lane: under the tag, above the rug's zone; never over the sack sheet */
  #toast { top: calc(var(--header) + 164px); bottom: auto; left: 12px; right: 12px; max-width: none; font-size: 14px; padding: 9px 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
  #stage:has(#dock.open) #toast { display: none }
  #tip { min-width: 160px; font-size: 11px }
  main.below { padding: 32px 0 calc(var(--dock) + 36px) }
  .room { padding: 0 16px; margin-bottom: 30px } .room .inner { padding: 28px 16px 24px; box-shadow: 5px 5px 0 var(--ink) }
  .cellars { padding: 0 16px; gap: 30px; margin-bottom: 30px } .cellars .room .inner { padding: 28px 16px 24px }
  .h2 { font-size: 32px }
  .lineWrap { padding: 10px 6px 8px; margin: 22px 0 14px } .pole { display: none } .lineWrap::before { left: 0; right: 0 }
  .lineTags { gap: 6px 8px; margin: 0 4px 14px } .lineTag { font-size: 10px; padding: 5px 8px } .lineTag.counts { white-space: normal; max-width: 100% }
  #lineRugs { gap: 14px 10px; justify-content: flex-start }
  #lineRugs .rug { width: 28px; height: 24px; border-width: 2px; font-size: 0; box-shadow: inset 0 2px 0 var(--gold), inset 0 -2px 0 var(--gold) } #lineRugs .rug::before { height: 5px; top: -6px; width: 3px }
  #lineRugs .rug.star::after { font-size: 7px; right: -3px; top: -8px }
  #lineLegend { font-size: 12px; gap: 6px 12px }
  .howHead { margin: 0 -16px; padding: 24px 16px 20px; min-height: 0; box-shadow: inset 0 -90px 0 var(--b1), inset 0 -94px 0 var(--b3) }
  .howCopy { padding: 16px 16px 18px; max-width: none }
  .howTitle { margin: -36px 0 10px; min-height: 48px }
  .lede p { font-size: 15px }
  .story { margin-top: 28px } .story li { padding: 14px } .story figure { height: 130px } .story li b { font-size: 24px } .story li p { font-size: 14px }
  .signs { gap: 40px; margin: 40px 0 6px }
  .whitewash { padding: 14px 16px } #burnBig { font-size: 24px }
  .ledger li, .ledger .lh { font-size: 11px; padding: 6px 8px; gap: 8px }
  .posters { grid-template-columns: 1fr 1fr; gap: 14px 12px } .poster { padding: 42px 8px 12px } #pWin, #pCrater { margin-top: 0 }
  .pCv { width: 72px; height: 54px } .pNum { font-size: 30px } .pLine { font-size: 12px }
  .vForm { grid-template-columns: 1fr; padding: 16px; transform: none } #check .inner::before, #check .inner::after { right: 16px; width: 80px }
  #vStamp { font-size: 26px; margin-left: 8px }
  #foot { padding-bottom: calc(var(--dock) + 44px) }
  .modal { padding: 12px } .box { padding: 22px 16px 18px; max-height: calc(100dvh - 16px) } .box.wide { width: 100% }
  .tHead { padding: 16px } .tRows { padding: 10px 16px 6px } #tCheck { margin: 10px 16px 0 } .ticketBox .small { padding: 10px 16px 16px }
  .docMain { padding: 28px 16px 60px } .docHead { padding: 26px 18px 24px } .docMain section { padding: 22px 16px 18px } .docMain h2 { font-size: 26px } .facts { grid-template-columns: 1fr }
}
@media (max-width: 390px) {
  #top { padding: 0 10px; gap: 6px }
  .pill .cp { display: none } .pill { padding: 5px 7px; font-size: 11px }
  .hstamp { font-size: 10px; padding: 2px 5px } .sack { font-size: 10px; padding: 2px 5px 10px 4px }
  #cashierBtn { padding: 8px 8px; font-size: 10px }
  #tagMult { font-size: 32px }
  #bigMain { font-size: 24px }
}
@media (max-width: 380px) { #tag[data-len="10"] #tagMult, #tag[data-len="11"] #tagMult { font-size: 14px !important } #tag[data-phase="riding"][data-len="7"] #tagMult { font-size: 22px !important } }
/* a short phone (landscape, or an SE with bars): the tag shrinks so the rug keeps the middle */
@media (max-height: 680px) and (max-width: 760px) {
  .tagCol { padding-top: 46px } #tag { padding: 8px 10px 7px } #tagMult { font-size: 28px } #tag[data-phase="riding"] #tagMult { font-size: 28px } #tagSub { display: none }
  #toast { top: calc(var(--header) + 118px) }
  #rugStamp { top: 52% }
}

/* ---------- 10. reduced motion: keep the freeze, the stamp and the cut; drop the shake, the slam and the wobble ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  .stamp.in, #rugStamp.in, #tag.wob, #tag.dip, .poster.paste, .cRug { animation: none !important }
  #feed li, .box, #toast { animation: none }
  .btn, #bigBtn, #lineRugs .rug, .wcard { transition: none }
  #curtain { animation: curtainOff 0s linear 8s forwards }
}

/* ---------- 11. round 2: the world, not a website ---------- */
/* the feed is not a card column any more: its lines live in the world (the blimp tows the newest, riders say theirs). The list stays for screen readers. */
#feed { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip-path: inset(50%) !important; display: block !important }
/* the toast belongs to the stage: it scrolls away with it, never floats over the rooms, never covers a dialog */
#toast { position: absolute; top: 250px; font-size: 14px; padding: 9px 14px; max-width: min(380px, calc(100vw - 48px)); transform: rotate(-1deg) }
body.offStage #toast, body.offStage #todayStrip, .modal-open #toast { display: none !important }

/* the last 10 rugs: ONE straight row of numbered paper tags under the line, oldest left, newest right (gold edge) */
.rugChip.show .tagM, .rugChip.show:nth-child(n) .tagM { display: block; top: 38px; left: var(--tx, 0px); transform: none; width: 46px; padding: 4px 0 3px; text-align: center; font: 400 8px/1 var(--pixel); box-shadow: 1px 1px 0 var(--ink) }
.rugChip.show .tagM::before, .rugChip.show:nth-child(n) .tagM::before { display: none }
.rugChip.newest .tagM { border-color: var(--gold); outline: 1px solid var(--ink) }
.rugChip.r5 .tagM { box-shadow: inset 0 -2px 0 var(--rug), 1px 1px 0 var(--ink) }
.c5, .r5 { background: #CFC6B4 !important; color: var(--ink) !important }
.rsw.c5 { box-shadow: inset 0 2px 0 var(--gold), inset 0 -2px 0 var(--gold), inset 2px 0 0 var(--rug) }
#plaque { top: 66px; left: 24px }

/* the price tag hangs on TWO strings from its top corners; no nail over the first digit, the number never wraps */
#tag .hole { display: none }
#tag::before, #tag::after { content: ''; position: absolute; top: -21px; width: 2px; height: 20px; background: var(--ink); margin: 0 }
#tag::before { left: 16% } #tag::after { right: 16% }
#tagMult { white-space: nowrap; overflow-wrap: normal }
#tag[data-hi="1"] #tagMult { color: var(--gold); text-shadow: 2px 2px 0 var(--ink) }
#tag[data-hi="2"] #tagMult { color: var(--rug); text-shadow: 2px 2px 0 var(--ink) }

/* THE POSTER over the empty sky while the rug boards: the wordmark art + one line printed red with a navy plate 3 px off register */
#skyHead { left: 50%; top: 206px; width: min(820px, 64vw); transform: translateX(-50%) rotate(-1.5deg); text-align: center; pointer-events: none; transition: opacity .35s, transform .5s cubic-bezier(.5, 0, .8, .4) }
#skyHead .shTitle { display: block; width: min(420px, 72%); height: auto; margin: 0 auto 4px; image-rendering: pixelated }
#skyHead .shLine { position: relative; display: block; margin: 0; font: 900 clamp(24px, 2.7vw, 40px)/1.08 var(--display); letter-spacing: .02em; color: var(--rug); z-index: 0; text-wrap: balance }
#skyHead .shLine::before { content: attr(data-text); position: absolute; left: 3px; right: -3px; top: 3px; color: var(--navy); z-index: -1; text-wrap: balance }
#skyHead .shTag { display: inline-block; margin-top: 12px; pointer-events: auto; padding: 5px 10px 4px; background: var(--paper); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); font: 700 13px/1 var(--sans); color: var(--rug); text-decoration: none; transform: rotate(2deg) }
#stage:not([data-phase="betting"]) #skyHead { opacity: 0; transform: translateX(-50%) translateY(-60px) rotate(-1.5deg); pointer-events: none }
#stage:not([data-phase="betting"]) #skyHead .shTag { pointer-events: none }
#stage[data-phase="betting"] #plaque { visibility: hidden }

/* the one rule, on the counter, until your first jump */
#ruleLine { position: absolute; right: 20px; top: -34px; margin: 0; padding: 6px 10px 5px; background: var(--paper); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); font: 600 12px/1.2 var(--sans); color: var(--ink2); white-space: nowrap; transform: rotate(1deg) }
#ruleLine b { color: var(--rug) }
#stage:has(#ruleLine:not([hidden])) #watchSign { bottom: calc(var(--dock) + 48px) }
kbd { font: 700 8px/1 var(--mono); color: var(--mute); letter-spacing: .04em }
#sackChips button kbd { position: absolute; right: 3px; bottom: 2px }
#bigBtn kbd { position: absolute; right: 7px; top: 5px; color: var(--ink2) }
#bigBtn[data-state="ruggedlock"] kbd { color: var(--paper2) }
#sackChips button:nth-child(4) { background: var(--paper) } #sackChips button[data-pct="100"] { background: var(--fireY) }
#sackChips button[data-op] { font-size: 12px; padding: 11px 9px 9px; background: var(--paper2) }
/* the sack you ride with is the face turned to you: a thick ink underline and a check, not only a lighter board */
.kind button[aria-pressed="true"] { box-shadow: inset 0 -5px 0 var(--ink) }
.kind button[aria-pressed="true"]::after { content: '\2713'; font: 900 13px/1 var(--sans); color: var(--win); margin-left: 2px }
/* header: the jar captions never run out of their pill; the desktop wordmark is a real mark */
.sack.gold { min-width: 92px } .jarK { font-size: 9px; font-weight: 800 }
@media (min-width: 761px) { .hLeft #wordmark { font-size: 34px } .hLeft #wordmark::before { left: 3px; top: 2px } }

/* ---------- BELOW THE STREET: one continuous cross-section, not a void with cards. Brick all the way down, rooms cut into it. ---------- */
main.below { background-color: var(--mortar); background-image: var(--bricks); background-size: 64px 32px; image-rendering: pixelated; border-top: 6px solid var(--ink); box-shadow: inset 0 18px 0 var(--earth), inset 0 22px 0 var(--ink) }
main.below::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 30px; background: var(--earth); background-image: var(--stones); background-size: 48px 24px; opacity: .55; pointer-events: none }
/* every room is a cut in the wall: a timber frame and the room's painted name on a board */
.room .inner { box-shadow: 0 0 0 7px var(--wood2), 0 0 0 10px var(--ink), 14px 14px 0 10px rgba(27,22,18,.55) }
.room .inner::before { content: attr(data-room); position: absolute; left: 22px; top: -26px; padding: 5px 10px 4px; background: var(--wood2); color: var(--fireY); border: 3px solid var(--ink); font: 400 10px/1 var(--pixel); letter-spacing: .1em; box-shadow: 2px 2px 0 var(--ink); z-index: 2 }
#house .inner::before { content: attr(data-room); left: 22px; top: -26px; width: auto; height: auto; margin: 0; border-radius: 0; border-top: 3px solid var(--ink) }
#check .inner::before { content: attr(data-room); right: auto; width: auto; height: auto; clip-path: none; background: var(--wood2); border-top: 3px solid var(--ink) }
#check .inner::after { display: none }
/* 01 = the rug shop's back room: the last 100 hang pegged on washing lines, each with its number */
#line .inner { background: var(--plaster); background-image: var(--grain); background-size: 3px 3px }
#lineRugs { gap: 18px 10px; padding-top: 14px; background-image: repeating-linear-gradient(to bottom, transparent 0 6px, var(--ink) 6px 8px, transparent 8px 43px) }
#lineRugs .rug { height: 25px }
#lineRugs .rug .rn { font: 400 8px/1 var(--pixel); color: inherit; pointer-events: none }
#lineRugs .rug.r0 .rn { color: var(--paper) }
/* THE DEPTH GAUGE: where you are under the bazaar, like SUNK's dive meter (desktop, only once the stage is scrolled away) */
#depth { position: fixed; right: 10px; top: 50%; z-index: 25; transform: translateY(-50%); display: grid; gap: 3px; padding: 8px 6px; background: var(--wood2); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); transition: opacity .3s }
#depth a { display: flex; align-items: center; gap: 6px; padding: 4px 6px; font: 400 8px/1 var(--pixel); letter-spacing: .06em; color: var(--paper2); text-decoration: none; white-space: nowrap }
#depth a i { width: 8px; height: 8px; border: 2px solid var(--ink); background: var(--paper2); flex: none }
#depth a.on { color: var(--fireY) } #depth a.on i { background: var(--fireY) }
body:not(.offStage) #depth { opacity: 0; pointer-events: none }
@media (max-width: 1100px) { #depth { display: none } }

/* ---------- 11b. round 2 on the phone ---------- */
@media (max-width: 760px) {
  #toast { position: absolute; top: 164px; transform: none }
  .tagCol { padding-top: 62px }
  #lastStrip { width: 300px; height: 60px }
  .rugChip.show .tagM, .rugChip.show:nth-child(n) .tagM { display: block; top: 36px; width: 44px; padding: 3px 0 2px }
  /* the hand's plaque is a small chip: no 3D flip on a phone (mid-flip it read as a skewed strip) */
  .wcard { transform: none !important; transition: none !important; min-height: 0 }
  .wface.back { visibility: hidden; transform: none } #wristTag.broken .wface.back { visibility: visible } #wristTag.broken .wface.front { visibility: hidden }
  #skyHead { top: 214px; left: calc(50% - 26px); width: calc(100% - 84px) } #tag::after { display: none } #skyHead .shTitle { width: 64% } #skyHead .shLine { font-size: 21px } #skyHead .shTag { font-size: 12px; margin-top: 8px }
  #ruleLine { right: 12px; left: auto; top: -30px; font-size: 11px; white-space: normal; max-width: 62%; padding: 4px 8px 3px }
  #dock:has(#ruleLine:not([hidden])) #todayStrip { display: none !important }
  #sackChips { grid-template-columns: repeat(6, 1fr) } #sackChips kbd, #bigBtn kbd { display: none }
  #lineRugs .rug { width: 36px; height: 24px; font-size: 9px } #lineRugs .rug .rn { font: 700 9px/1 var(--mono) }
  #lineRugs { background-image: repeating-linear-gradient(to bottom, transparent 0 6px, var(--ink) 6px 8px, transparent 8px 38px) }
  .room .inner { box-shadow: 0 0 0 5px var(--wood2), 0 0 0 8px var(--ink) } .room .inner::before { left: 12px; top: -22px; font-size: 9px }
}
@media (prefers-reduced-motion: reduce) { #skyHead { transition: none } }

/* the counter fits one line per label even with the ½ and 2× tickets */
.amt .k, .autoL .k { white-space: nowrap } .sackTop { gap: 10px } #sackChips { gap: 6px }
.room { scroll-margin-top: calc(var(--header) + 40px) }
#pCrater .pK::before { content: 'WANTED'; display: block; margin-bottom: 4px; font-size: 14px; color: var(--ink) } #pCrater .pK { top: 10px }
/* the wallet picker: every Solana wallet the player has, its own icon + name */
.walletPick { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 } .walletPick .k { width: 100% } .walletPick .small { width: 100%; margin: 4px 0 0 }
.wpick { display: inline-flex; align-items: center; gap: 8px; text-decoration: none } .wpick img { width: 20px; height: 20px; border-radius: 4px }