/* PAU, S.A. Without .live (no JS or reduced motion) the page is a plain list of cards and the receipt. */
/* Self-hosted (OFL) from Google Fonts, latin + latin-ext only. Archivo is one variable file per subset. */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 500 900; font-display: swap; src: url(/assets/fonts/archivo-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 500 900; font-display: swap; src: url(/assets/fonts/archivo-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/plexmono-400-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/plexmono-400-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/plexmono-600-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/plexmono-600-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/plexmono-700-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/plexmono-700-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --bg: #0b120f; --bg2: #111b16; --ink: #efe6cf; --dim: #9aa79c; --gold: #e0b84f; --up: #3ddc84; --dn: #ff5a4e;
  --line: #1d2a23; --paper: #efe6cf; --paper-ink: #14100a; --green: #0b3d2c;
  --mono: "IBM Plex Mono", Consolas, monospace; --head: "Archivo", "Arial Black", sans-serif;
  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 40px; --s6: 64px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--mono); }
html.locked, html.locked body { overflow: hidden; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
button { font-family: var(--mono); }

/* ---------- live-only furniture ---------- */
#intro, #flash, .tape, .route, .hud, .player, .runner, .stage { display: none; }
.live #intro { display: flex; } .live .tape, .live .route, .live .hud, .live .player, .live .runner, .live .stage { display: block; }
.live .player { display: flex; }

/* ---------- intro ---------- */
#intro { position: fixed; inset: 0; z-index: 50; background: #050806; flex-direction: column; align-items: center; justify-content: center;
         gap: var(--s4); padding: var(--s3); transition: transform 1.1s cubic-bezier(.7,0,.2,1); }
#intro.gone { transform: translateY(-100%); overflow: hidden; } /* its content can be taller than a landscape phone: clip it while it is up and away */
.board-top { width: min(920px, 100%); display: flex; justify-content: space-between; gap: var(--s3); font-size: 12px; letter-spacing: 3px; color: var(--dim); }
#status { color: var(--dn); animation: blink 1s steps(2) infinite; }
#status.open { color: var(--up); animation: none; }
@keyframes blink { 50% { opacity: .25 } }
.board { display: grid; gap: var(--s2); }
.row { display: flex; gap: 3px; justify-content: center; }
.cell { width: min(44px, calc((100vw - 32px - 54px) / 19)); height: min(60px, calc((100vw - 86px) / 19 * 1.4)); background: #1a1c1a; border-radius: 4px; display: flex; align-items: center;
        justify-content: center; font-weight: 700; font-size: clamp(13px, 3.6vw, 36px); color: #f4ecd8; position: relative; box-shadow: inset 0 -2px 0 #000; }
.cell::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #000a; }
.cell { perspective: 160px; transition: color .5s, text-shadow .5s; }
/* the top half of the flap falls over the letter, darkening as it turns */
.cell.flip::before { content: ""; position: absolute; inset: 0 0 50% 0; border-radius: 4px 4px 0 0; background: linear-gradient(#2c2e2c, #1a1c1a);
                     transform-origin: 50% 100%; animation: flap .09s linear forwards; z-index: 1; }
@keyframes flap { from { transform: rotateX(0); filter: brightness(1.4); } to { transform: rotateX(-90deg); filter: brightness(.5); } }
.cell.land { animation: land .6s ease-out; }
@keyframes land { 0% { color: var(--gold); text-shadow: 0 0 12px var(--gold); transform: translateY(1px); } 30% { transform: none; } }
.ring-wrap { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; justify-content: center; }
#introBob { width: 200px; height: 200px; }
.bob-says { max-width: 300px; font-size: 13px; line-height: 1.5; color: var(--dim); margin: 0 0 var(--s3); min-height: 3em; }
#ring { font-weight: 700; letter-spacing: 3px; font-size: 14px; color: #050806; background: var(--gold); border: 0; padding: 14px 22px;
        border-radius: 3px; cursor: pointer; box-shadow: 0 4px 0 #8a6a1d; transition: transform .08s, box-shadow .08s, background .15s; }
#ring:hover { background: #f0cb63; }
#ring:active { transform: translateY(4px); box-shadow: 0 0 0 #8a6a1d; }
#ring:disabled { opacity: .5; cursor: default; }
#skip { display: block; margin-top: var(--s3); background: none; border: 0; color: var(--dim); font-size: 12px; text-decoration: underline; cursor: pointer; padding: var(--s1) 0; }
#skip:hover { color: var(--ink); }
#quick { display: block; width: max-content; margin-top: var(--s1); color: var(--dim); font-size: 12px; text-decoration: underline; padding: var(--s1) 0; }
#quick:hover { color: var(--ink); } #quick:active { color: var(--gold); }
#flash { position: fixed; inset: 0; background: #fff6d8; opacity: 0; pointer-events: none; z-index: 60; }
.live #flash { display: block; }
#flash.on { animation: flash .7s ease-out; }
@keyframes flash { 0% { opacity: .9 } 100% { opacity: 0 } }

/* ---------- language ---------- */
.lang { position: absolute; top: var(--s3); right: var(--s3); z-index: 55; font-size: 12px; letter-spacing: 2px; color: var(--dim); text-decoration: none;
        border: 1px solid var(--line); padding: 6px 10px; background: #050806; }
.lang:hover { color: var(--ink); border-color: var(--dim); }
.live .lang { position: fixed; top: 76px; }
.live.locked .lang { top: var(--s3); }
.live.deep .lang { opacity: 0; pointer-events: none; }

/* ---------- tape, route, HUD, player ---------- */
.tape { position: fixed; top: 0; left: 0; right: 0; z-index: 20; background: #050806; border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden; font-size: 12px; padding: 6px 0; }
.tape .inner { display: inline-block; animation: tape 50s linear infinite; }
.tape span { margin-right: 28px; }
@keyframes tape { to { transform: translateX(-50%); } }
.up { color: var(--up); } .dn { color: var(--dn); } .gold { color: var(--gold); }
.route { position: fixed; top: 36px; left: var(--s3); right: var(--s3); z-index: 20; height: 34px; }
.route .track { position: absolute; top: 9px; left: 0; right: 0; height: 2px; background: var(--line); }
.route .done { position: absolute; top: 9px; left: 0; height: 2px; background: var(--gold); width: 0; }
.route .node { position: absolute; top: 4px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; border: 2px solid var(--dim); background: var(--bg); }
.route .node.on { border-color: var(--gold); background: var(--gold); }
.route .node b { position: absolute; top: 15px; left: 50%; transform: translateX(-50%); font-size: 9px; color: var(--dim); font-weight: 600; }
.route .node.on b { color: var(--gold); }
.route .me { position: absolute; top: -14px; width: 40px; height: 40px; margin-left: -20px; }
@media (max-width: 699px) { .route .node b { display: none; } }
.hud { position: fixed; right: var(--s3); bottom: var(--s3); z-index: 20; background: #050806ee; border: 1px solid var(--gold); padding: var(--s2) 12px; font-size: 11px; line-height: 1.6; text-align: right; }
.hud b { color: var(--gold); }
.player { position: fixed; left: var(--s3); bottom: var(--s3); z-index: 20; align-items: center; gap: 10px; background: #050806ee; border: 1px solid var(--line);
          padding: 6px 12px 6px 6px; border-radius: 40px; font-size: 11px; max-width: calc(100vw - 180px); }
.player button { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--ink); color: #050806; cursor: pointer; font-size: 11px; }
.player button:hover { background: var(--gold); }
.player .song { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bars { display: flex; gap: 2px; align-items: flex-end; height: 14px; flex: 0 0 auto; }
.bars i { width: 3px; background: var(--dn); height: 4px; }
.playing .bars i { animation: eq .5s ease-in-out infinite alternate; }
.bars i:nth-child(2) { animation-delay: -.2s } .bars i:nth-child(3) { animation-delay: -.35s } .bars i:nth-child(4) { animation-delay: -.1s }
@keyframes eq { from { height: 3px } to { height: 14px } }
@media (max-width: 699px) { .player .song { display: none; } .player { padding: 6px; } .hud br, .hud .hide-s { display: none; } }

/* ---------- hero ---------- */
.hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 120px var(--s3) var(--s6); max-width: 1000px; margin: 0 auto; }
.hero .k { color: var(--gold); font-size: 12px; letter-spacing: 3px; }
.hero h1 { font-family: var(--head); font-weight: 900; font-size: clamp(64px, 14vw, 180px); line-height: .88; margin: var(--s3) 0 var(--s4); letter-spacing: -2px; }
.hero p { font-size: clamp(15px, 2vw, 19px); max-width: 640px; color: #d6cfbb; line-height: 1.55; margin: 0; }
.hero .back { display: none; margin-bottom: var(--s3); font-size: 12px; letter-spacing: 2px; color: var(--gold); }
.list .hero .back { display: block; width: max-content; } .hero .back:hover { color: #f0cb63; }
@media (prefers-reduced-motion: reduce) { .list .hero .back { display: none; } } /* the show would not run for them */
.hero .go { margin-top: var(--s5); font-size: 12px; letter-spacing: 3px; color: var(--dim); }
.hero .go span { display: inline-block; animation: nudge 1.2s ease-in-out infinite alternate; }
@keyframes nudge { to { transform: translateY(6px) } }

/* ---------- cards: static list ---------- */
.cards { max-width: 1100px; margin: 0 auto; padding: 0 var(--s3) var(--s6); }
.sector-h { font-family: var(--head); font-weight: 800; font-size: 28px; color: var(--gold); margin: var(--s6) 0 var(--s4); padding-bottom: var(--s2); border-bottom: 1px solid var(--line); }
.sector { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: var(--s4); }
.sector-h { grid-column: 1 / -1; }
.card { background: var(--paper); color: var(--paper-ink); padding: 18px; box-shadow: 8px 8px 0 #000; }
.card .top { display: flex; justify-content: space-between; gap: var(--s2); font-size: 11px; letter-spacing: 2px; }
.card .tag { color: #9e2c1f; font-weight: 700; } .card .up { color: #0b6b3a; font-weight: 700; }
.card .tk { font-family: var(--head); font-weight: 900; font-size: 44px; line-height: 1; margin: var(--s2) 0 2px; }
.card .nm { font-size: 14px; margin: 0; font-weight: 700; }
.card .shots { position: relative; margin: 12px 34px 12px 0; }
.card .shots .desk { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border: 2px solid var(--paper-ink); border-top-width: 10px; }
.card .shots .mob { position: absolute; right: -34px; bottom: -10px; width: 27%; height: auto; aspect-ratio: 390 / 844; object-fit: cover; object-position: top;
                    border: 3px solid var(--paper-ink); border-radius: 12px; transform: rotate(4deg); box-shadow: 4px 4px 0 #0005; }
.card .ds { font-size: 13px; line-height: 1.5; margin: var(--s2) 0; }
.card .bob { font-size: 12px; line-height: 1.45; background: var(--paper-ink); color: var(--ink); padding: var(--s2) 10px var(--s2) 4px; display: flex; gap: var(--s2); align-items: center; margin: 0; }
.bob-face { flex: 0 0 56px; width: 56px; height: 56px; background: url(/assets/bob/react.webp) 0 0 / 896px 56px no-repeat; }
.card a.buy { display: inline-block; margin-top: 12px; background: var(--green); color: var(--ink); text-decoration: none; font-weight: 700; padding: 10px 14px;
              letter-spacing: 2px; font-size: 12px; box-shadow: 0 3px 0 #000; transition: background .15s; }
.card a.buy:hover { background: #12603f; }
.card a.buy:active { transform: translateY(3px); box-shadow: none; }
.card .soon { display: inline-block; margin-top: 12px; font-size: 12px; letter-spacing: 2px; color: #9e2c1f; font-weight: 700; border: 2px dashed #9e2c1f; padding: 8px 12px; text-decoration: none; transition: background .15s, color .15s; }
.card .soon:hover { background: #9e2c1f; color: var(--paper); border-style: solid; }
.card .soon:active { transform: translateY(2px); }
.card a:focus-visible { outline-color: var(--paper-ink); } /* gold on paper is 1.5:1 */

/* ---------- cards: journey ---------- */
.live #journey { position: relative; }
.live .stage { z-index: 2; }
.live .stage { position: sticky; top: 0; height: 100vh; overflow: hidden;
               background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 80px 80px; }
.live .stage .cards { position: absolute; inset: 0; padding: 0; max-width: none; margin: 0; pointer-events: none; }
.live .stage .sector { display: contents; }
.live .stage .sector-h { display: none; }
.live .stage .card { --rest: 480px; position: absolute; left: var(--s3); bottom: 72px; width: min(460px, calc(100vw - 32px));
                     transform: translateY(24px) rotate(-1deg); opacity: 0; visibility: hidden; pointer-events: none;
                     transition: transform .45s cubic-bezier(.2,.9,.3,1.3), opacity .3s, visibility 0s .3s; }
/* printing: stepped reveal from the top (shadow kept inside the clip), the tag lands last; only when not scrolling fast */
.live .stage .card.active.print { animation: print .4s steps(6) backwards; }
.live .stage .card.active.print .top .tag { animation: stamp .15s .4s backwards; }
@keyframes print { from { clip-path: inset(0 -12px 100% 0); } to { clip-path: inset(0 -12px -12px 0); } }
@keyframes stamp { from { opacity: 0; transform: scale(1.8) rotate(-6deg); } }
.live .stage .card.active { transform: translateY(0) rotate(-1deg); opacity: 1; visibility: visible; pointer-events: auto; transition: transform .45s cubic-bezier(.2,.9,.3,1.3), opacity .3s; }
/* the screenshot gives way first, so the buy button always fits above the player */
.live .stage .card .shots .desk { max-height: clamp(48px, calc(100vh - var(--rest)), 290px); }
@media (min-width: 1100px) { .live .stage .card { left: 5vw; bottom: 80px; } }
@media (max-width: 699px) {
  .live .stage .card { --rest: 420px; bottom: 64px; padding: 14px; }
  .live .stage .card .tk { font-size: 32px; }
  .live .stage .card .shots { margin: var(--s2) 30px var(--s2) 0; }
  .live .stage .card .shots .desk { aspect-ratio: 16 / 7; }
  .live .stage .card .ds { font-size: 12px; line-height: 1.45; margin: 6px 0; }
}
@media (max-height: 700px) { .live .stage .card { --rest: 500px; } .live .stage .card .ds { font-size: 12px; line-height: 1.45; margin: 6px 0; } }
/* short screens: the phone shot is sized by the (shrunken) desktop shot, never by width, and floats over its corner so the card keeps its height */
@media (max-height: 760px) { .live .stage .card .shots .mob { top: -12px; bottom: auto; height: calc(100% + 22px); width: auto; } }
@media (max-height: 500px) {
  .live .stage .card { --rest: 328px; width: min(460px, 55vw); bottom: 64px; padding: 10px 12px; }
  .live .stage .card .tk { font-size: 26px; }
  .live .stage .card .bob { display: none; }
  .live .stage .card .shots { margin: 6px 34px 6px 0; }
  .live .stage .card .shots .mob { top: -6px; height: calc(100% + 12px); }
  .live .stage .card .ds { font-size: 11px; line-height: 1.4; margin: 4px 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .live .stage .card a.buy { margin-top: 6px; }
}
.candles { position: absolute; inset: 0; pointer-events: none; }
.candle { position: absolute; width: 10px; opacity: .22; animation: drift linear infinite; }
.candle::before { content: ""; position: absolute; left: 4px; width: 2px; top: -14px; bottom: -14px; background: currentColor; }
.candle::after { content: ""; position: absolute; inset: 0; background: currentColor; }
#chart { position: absolute; left: 0; top: 0; }
#future { fill: none; stroke: #3a4a40; stroke-width: 2; stroke-dasharray: 2 8; }
#past { fill: none; stroke: var(--gold); stroke-width: 3.5; stroke-linejoin: round; }
#dot { fill: var(--gold); stroke: #050806; stroke-width: 3; }
#pulse { fill: none; stroke: var(--gold); stroke-width: 2; }
.mark line { stroke: #3a4a40; stroke-width: 1.5; } .mark rect { fill: #050806; stroke: #3a4a40; } .mark text { fill: var(--dim); font: 700 12px var(--mono); }
.mark circle { fill: #050806; stroke: #3a4a40; stroke-width: 2; }
.mark.on line, .mark.on rect { stroke: var(--gold); } .mark.on text { fill: var(--gold); } .mark.on circle { fill: var(--gold); stroke: var(--gold); }
.sec line { stroke: #2a3a31; stroke-dasharray: 4 6; } .sec text { fill: #6f7d72; font: 600 13px var(--mono); letter-spacing: 3px; text-transform: uppercase; }

/* Bob crossing */
.runner { position: fixed; top: 96px; left: 0; z-index: 1; width: 130px; height: 130px; pointer-events: none; transform: translateX(-160px); }
.runner .bob-sprite { width: 130px; height: 130px; }
.runner .prop { position: absolute; right: -6px; top: 58px; width: 46px; height: 34px; }
.runner.go { animation: run 7s linear forwards; }
.live:not(.trip) .runner { visibility: hidden; }
@keyframes run { to { transform: translateX(calc(100vw + 160px)); } }

/* ---------- receipt ---------- */
.end { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 130px var(--s3) 100px; background: var(--bg2); }
.receipt { width: min(400px, 100%); background: #fbf8ef; color: #1b1b1b; font-size: 13px; padding: 22px 20px 32px;
           -webkit-mask: radial-gradient(circle 7px at 50% 100%, transparent 98%, #000) 0 0/16px 100% repeat-x;
           mask: radial-gradient(circle 7px at 50% 100%, transparent 98%, #000) 0 0/16px 100% repeat-x; }
.live .receipt { transform: translateY(40px); opacity: 0; transition: transform .8s cubic-bezier(.2,.9,.3,1.1), opacity .8s; }
.live .receipt.show { transform: none; opacity: 1; }
.receipt h2 { text-align: center; margin: 0 0 2px; letter-spacing: 3px; font-size: 15px; }
.receipt .c { text-align: center; color: #555; font-size: 11px; margin-bottom: 12px; }
.receipt .l { display: flex; justify-content: space-between; gap: var(--s3); padding: 2px 0; }
.receipt .l .st.did { color: #0b6b3a; font-weight: 700; }
.receipt hr { border: 0; border-top: 1px dashed #999; margin: 10px 0; }
.receipt .contact { font-weight: 700; }
.receipt .go-site { text-decoration: none; border-bottom: 1px dotted #1b1b1b; }
.receipt .go-site:hover { background: #1b1b1b; color: #fbf8ef; }
.receipt .fine { font-size: 11px; letter-spacing: 1px; text-align: center; margin: 6px 0 10px; }
.receipt .facts { list-style: none; margin: 0; padding: 0; }
.receipt .facts li { font-size: 12px; line-height: 1.55; padding: 8px 0; border-bottom: 1px dashed #bbb; }
.receipt .facts b { display: block; font-size: 11px; color: #666; }
.receipt .tail { text-align: center; margin-top: 14px; font-size: 12px; letter-spacing: 3px; }
.receipt .cut { margin-top: 14px; border-top: 2px dashed #1b1b1b; padding-top: 6px; font-size: 11px; color: #555; }
#feed { height: 1px; }
/* live: the roll prints one fact per scroll */
.rolling .receipt .unprinted { display: none; }
.receipt .printing { animation: feed .55s steps(7) both; }
.receipt .tail.printing { animation-duration: .9s; }
/* after the cut, a second ticket: Bob's profile of the visit, then the order slip */
.slip { margin-top: 18px; }
.receipt h3 { text-align: center; margin: 0 0 2px; letter-spacing: 3px; font-size: 15px; }
#profile:empty { display: none; } #profile .l span { flex: none; } #profile .l b { text-align: right; }
/* a value that does not fit moves whole under its label (right-aligned); it never breaks before its unit */
#profile .l { flex-wrap: wrap; column-gap: var(--s2); } #profile .l b { white-space: nowrap; margin-left: auto; }
.verdict { margin: 12px 0 0; padding: 10px; border: 2px solid #1b1b1b; text-align: center; }
.verdict b { font-size: 18px; letter-spacing: 3px; } .verdict p { margin: 6px 0 0; font-size: 12px; line-height: 1.5; }
.order { border-top: 2px dashed #1b1b1b; padding-top: 16px; }
.order label { display: flex; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px dashed #bbb; cursor: pointer; font-size: 13px; }
.order input { width: 18px; height: 18px; accent-color: #1b1b1b; flex: none; }
.order button { font: inherit; cursor: pointer; }
.order [type=submit] { display: block; width: 100%; margin-top: 14px; padding: 12px; background: #1b1b1b; color: #fbf8ef; border: 0; font-weight: 700; letter-spacing: 3px;
  box-shadow: 0 3px 0 #000; transition: transform .08s, box-shadow .08s, background .15s; }
.order [type=submit]:hover { background: #0b6b3a; } .order [type=submit]:active { transform: translateY(3px); box-shadow: none; }
.order .close { margin: 12px auto 0; background: none; border: 0; border-bottom: 1px dotted #1b1b1b; color: #1b1b1b; font-size: 12px; padding: 2px 0; }
.order .close:hover { background: #1b1b1b; color: #fbf8ef; }
.order .close { display: none; } .live .order .close { display: table; }
@keyframes feed { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
/* the ticket is torn off and falls away */
.live .receipt.torn { animation: tear 1.5s cubic-bezier(.55,0,.9,.35) forwards; transform-origin: 20% 0; }
@keyframes tear { 0% { transform: none; } 12% { transform: translateY(-10px) rotate(-3deg); } 20% { transform: translateY(0) rotate(2deg); }
  100% { transform: translateY(130vh) rotate(24deg); opacity: .9; } }
/* the curtain comes back down: market closed */
.closing #intro { transition-duration: 1.4s; }
.closing #status { color: var(--dn); animation: none; }
.receipt .bar { height: 34px; margin-top: 14px; background: repeating-linear-gradient(90deg, #1b1b1b 0 2px, transparent 2px 4px, #1b1b1b 4px 7px, transparent 7px 9px); }

.bob-sprite { background-repeat: no-repeat; }

/* ---------- after hours and weekends ---------- */
.live.after .stage, .live.closed .stage { background-color: #070b14;
  background-image: linear-gradient(#141c2b 1px, transparent 1px), linear-gradient(90deg, #141c2b 1px, transparent 1px); }
.after .candle, .closed .candle { opacity: .1; }
.live.after #intro, .live.closed #intro { background: #04060c; }
.after #introBob { position: relative; }
.after #introBob::after { content: "z z z"; position: absolute; right: 6px; top: 10px; color: var(--dim); font-weight: 700; letter-spacing: 4px; animation: zzz 2.4s ease-in-out infinite; }
@keyframes zzz { 0% { opacity: 0; transform: translateY(8px) } 50% { opacity: 1 } 100% { opacity: 0; transform: translateY(-14px) } }

/* ---------- a world per sector (class world-<id> on html) ---------- */
.live .stage { transition: background-color .8s; }
#wave { fill: none; stroke: var(--dn); stroke-width: 3; filter: drop-shadow(0 0 6px var(--dn)); }
.confetti { display: none; position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; top: -20px; width: 8px; height: 14px; animation: fall linear infinite; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }
.live.world-evt .confetti { display: block; }
/* education: a blackboard, the line in chalk */
.live.world-edu .stage { background-color: #1f3a2e; background-image: radial-gradient(#ffffff0a 1px, transparent 1px); background-size: 6px 6px; }
.world-edu #past { stroke: #f2efe4; stroke-width: 4; filter: url(#chalk); }
.world-edu #future, .world-edu .mark line, .world-edu .mark rect { stroke: #ffffff40; } .world-edu .mark rect { fill: #1f3a2e; }
.world-edu #dot { fill: #f2efe4; stroke: #1f3a2e; } .world-edu #pulse { stroke: #f2efe4; } .world-edu .candle { opacity: 0; }
.world-edu .mark.on text, .world-edu .sec text { fill: #f2efe4; } .world-edu .mark.on rect, .world-edu .mark.on line { stroke: #f2efe4; }
/* games: an arcade cabinet, the line in pixel steps */
.live.world-games .stage { background-color: #07020f; background-image: linear-gradient(#ff3df01a 2px, transparent 2px), linear-gradient(90deg, #ff3df01a 2px, transparent 2px); background-size: 32px 32px; }
.live.world-games .stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(#0000 0 2px, #0006 2px 4px); }
.world-games #past { stroke: #ff3df0; stroke-width: 5; stroke-linejoin: miter; shape-rendering: crispEdges; }
.world-games #dot { fill: #3df0ff; stroke: #07020f; } .world-games #pulse { stroke: #3df0ff; }
.world-games .mark.on rect, .world-games .mark.on line { stroke: #3df0ff; } .world-games .mark.on text, .world-games .sec text { fill: #3df0ff; } .world-games .mark.on circle { fill: #3df0ff; stroke: #3df0ff; }
/* events: a party */
.live.world-evt .stage { background-color: #1a0b16; }
.world-evt #past { stroke: #ff9ec7; } .world-evt #dot { fill: #ff9ec7; } .world-evt #pulse { stroke: #ff9ec7; }
.world-evt .mark.on rect, .world-evt .mark.on line { stroke: #ff9ec7; } .world-evt .mark.on text, .world-evt .sec text { fill: #ff9ec7; } .world-evt .mark.on circle { fill: #ff9ec7; stroke: #ff9ec7; }
/* music: a dark stage, the song drawn ahead of the dot */
.live.world-music .stage { background-color: #0d0707; background-image: none; }
.world-music #past { stroke: #ff6b4a; } .world-music #dot { fill: #ff6b4a; } .world-music #pulse { stroke: #ff6b4a; } .world-music .candle { opacity: .08; }
.world-music .mark.on rect, .world-music .mark.on line { stroke: #ff6b4a; } .world-music .mark.on text, .world-music .sec text { fill: #ff6b4a; } .world-music .mark.on circle { fill: #ff6b4a; stroke: #ff6b4a; }
/* business: a blueprint */
.live.world-biz .stage { background-color: #0b2a4a;
  background-image: linear-gradient(#ffffff26 1px, transparent 1px), linear-gradient(90deg, #ffffff26 1px, transparent 1px), linear-gradient(#ffffff0d 1px, transparent 1px), linear-gradient(90deg, #ffffff0d 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px; }
.world-biz #past { stroke: #e8f1ff; stroke-width: 2.5; } .world-biz #future { stroke: #e8f1ff66; }
.world-biz #dot { fill: #0b2a4a; stroke: #e8f1ff; } .world-biz #pulse { stroke: #e8f1ff; } .world-biz .candle { opacity: 0; }
.world-biz .mark.on rect, .world-biz .mark.on line { stroke: #e8f1ff; } .world-biz .mark rect { fill: #0b2a4a; } .world-biz .mark.on text, .world-biz .sec text { fill: #e8f1ff; } .world-biz .mark.on circle { fill: #e8f1ff; stroke: #e8f1ff; }
/* outreach: Raccoonomics' lab, an oscilloscope */
.live.world-money .stage { background-color: #031208; background-image: linear-gradient(#0c3a1c 1px, transparent 1px), linear-gradient(90deg, #0c3a1c 1px, transparent 1px); background-size: 64px 64px; }
.world-money #past { stroke: #39ff88; filter: drop-shadow(0 0 6px #39ff88); } .world-money #dot { fill: #39ff88; } .world-money #pulse { stroke: #39ff88; } .world-money .candle { opacity: 0; }
.world-money .mark.on rect, .world-money .mark.on line { stroke: #39ff88; } .world-money .mark.on text, .world-money .sec text { fill: #39ff88; } .world-money .mark.on circle { fill: #39ff88; stroke: #39ff88; }

/* football: a pitch at night under floodlights */
.live.world-foot .stage { background-color: #0f3d1f; background-image: repeating-linear-gradient(90deg, #ffffff08 0 80px, transparent 80px 160px); }
.world-foot #past { stroke: #f4f4f0; } .world-foot #dot { fill: #f4f4f0; stroke: #0f3d1f; } .world-foot #pulse { stroke: #f4f4f0; } .world-foot .candle { opacity: 0; }
.world-foot .mark.on rect, .world-foot .mark.on line { stroke: #f4f4f0; } .world-foot .mark rect { fill: #0f3d1f; } .world-foot .mark.on text, .world-foot .sec text { fill: #f4f4f0; } .world-foot .mark.on circle { fill: #f4f4f0; stroke: #f4f4f0; }

/* ---------- background scene per world (src/scenes.js): quiet loops behind the chart ---------- */
.scene { display: none; }
.live .scene { display: block; position: absolute; inset: 0; pointer-events: none; color: var(--gold); opacity: 0; }
.live .scene.in { animation: scene-in 1.2s ease forwards; }
@keyframes scene-in { to { opacity: var(--so, .16); } }
.scene svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.world-edu .scene { color: #f2efe4; } .world-games .scene { color: #ff3df0; } .world-music .scene { color: #ff6b4a; }
.world-foot .scene { color: #ffffff; } .world-biz .scene { color: #e8f1ff; } .world-evt .scene { color: #ff9ec7; } .world-money .scene { color: #39ff88; }
.scene .ink { stroke-dasharray: 1; }
/* education: the background is the board itself */
.world-edu .scene { --so: .6; }
.scene .far, .scene .board, .scene .dust { position: absolute; inset: 0; }
.scene .chalk-hand { font-family: Caveat, "Segoe Print", cursive; font-weight: 600; fill: currentColor; stroke: none; }
.scene .ghost { opacity: .1; }
.scene .smear { stroke: #f2efe4; fill: none; filter: blur(14px); stroke-linecap: round; }
.scene .far { right: -280px; transform: translateX(calc(var(--p, 0) * -240px)); }
.scene .board svg { position: absolute; inset: 0; overflow: visible; }
.scene .board { inset: 14vh 3vw 12vh auto; width: 58vw; }
@media (orientation: portrait) { .scene .board { inset: 100px 2vw auto; width: auto; height: 36vh; } }
@media (orientation: portrait) and (min-width: 600px) { .scene .board { height: 26vh; } }
.scene .dust i { position: absolute; top: -8px; width: var(--s); height: var(--s); border-radius: 50%; background: currentColor; opacity: .5;
  animation: dust var(--t) linear infinite; animation-delay: calc(var(--d) * -1); }
@keyframes dust { 50% { transform: translate(18px, 52vh); } to { transform: translate(-6px, 104vh); } }
.scene .fill { fill: currentColor; stroke: none; } .scene .fill-soft { fill: currentColor; fill-opacity: .35; stroke: none; }
.scene .chalky { filter: url(#chalk); }
.scene .dash { stroke-dasharray: 10 12; stroke-width: 3; }
.scene .eq { fill: currentColor; fill-opacity: .45; stroke: none; transform-box: fill-box; transform-origin: 50% 100%; animation: eq var(--t) ease-in-out infinite alternate; animation-delay: calc(var(--d) * -1); }
@keyframes eq { from { transform: scaleY(.25); } to { transform: scaleY(1); } }

.scene .net { stroke-width: 2; }
/* money: two tapes of candles out of focus, a sharp chart in front */
.world-money .scene { --so: .6; }
.scene .tape { position: absolute; left: 0; right: 0; background-repeat: repeat-x; animation: tape var(--s) linear infinite; }
.scene .tape.t1 { top: 6%; height: 300px; --s: 70s; filter: blur(5px); opacity: .35; }
.scene .tape.t2 { top: 48%; height: 420px; --s: 42s; filter: blur(2px); opacity: .45; }
@keyframes tape { to { background-position-x: calc(var(--w) * -1); } }
.scene .grid { stroke-width: 1; opacity: .2; }
.scene .ma { stroke: #f4f4f0; stroke-width: 3; opacity: .8; }
.scene .tag { fill: #04130b; stroke: none; font: 700 22px var(--mono); text-anchor: middle; }
/* games: starfield, pixels with a CRT glow */
.world-games .scene { --so: .7; }
.scene .stars { position: absolute; inset: 0; animation: stars var(--s) linear infinite; }
.scene .stars.s1 { --s: 40s; opacity: .5; } .scene .stars.s2 { --s: 16s; opacity: .8; }
@keyframes stars { to { background-position-y: var(--w); } }
.world-games .scene .board svg { shape-rendering: crispEdges; filter: drop-shadow(0 0 6px currentColor); }
.scene .px1 { fill: currentColor; stroke: none; } .scene .px2 { fill: #3df0ff; stroke: none; }
.scene .arcade { fill: #3df0ff; stroke: none; font: 700 28px var(--mono); letter-spacing: 2px; } .scene .arcade.big { fill: #fff; font-size: 34px; }
.scene .blink { animation: blink 1.1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } }
.scene .hero { animation: hop 2.4s infinite; }
@keyframes hop { 0%, 60%, 100% { transform: none; animation-timing-function: ease-out; } 85% { transform: translateY(-140px); animation-timing-function: ease-in; } }
.scene .fa { animation: legs .3s steps(1) infinite; } .scene .fb { animation: legs .3s steps(1) infinite reverse; }
@keyframes legs { 50% { opacity: 0; } }
/* music: beams in the haze, two decks */
.world-music .scene { --so: .7; } .world-music .candle, .world-games .candle, .world-evt .candle { opacity: 0; }
.scene .beams { filter: blur(10px); }
.scene .beam { animation: sway var(--t) ease-in-out infinite alternate; transform: rotate(calc(var(--r) * -1)); }
@keyframes sway { to { transform: rotate(var(--r)); } }
.scene .deck { fill: currentColor; stroke: none; font: 600 22px var(--mono); letter-spacing: 1px; }
.scene .frame { stroke-width: 1.5; opacity: .45; fill: #0006; }
.scene .wv { fill: none; stroke-width: 4; stroke-linecap: butt; } .scene .wv.low { stroke: currentColor; opacity: .6; } .scene .wv.mid { stroke: #ffb199; } .scene .wv.high { stroke: #fff; }
.scene .tick { stroke-width: 2; opacity: .6; }
.scene .playhead { stroke: #fff; stroke-width: 3; }
/* football: the pitch tilted in perspective under the floodlights */
.world-foot .scene { --so: .6; }
.scene .pitch { perspective: 1100px; }
.scene .pitch svg { transform: rotateX(46deg) scale(1.08); transform-origin: 50% 80%; }
.scene .mow { fill: currentColor; fill-opacity: .05; stroke: none; } .scene .mow.alt { fill-opacity: 0; }
.scene .player .num { fill: #0f3d1f; stroke: none; font: 700 22px var(--mono); text-anchor: middle; }
.scene .rival { stroke: #ffd34a; stroke-width: 5; animation: drift 3.4s ease-in-out infinite alternate; animation-delay: calc(var(--d) * -1); }
@keyframes drift { to { transform: translate(14px, -10px); } }
.scene .ball { filter: drop-shadow(0 0 8px #fff); }
.scene .flood { animation: flicker 4s ease-in-out infinite alternate; } @keyframes flicker { to { opacity: .75; } }
/* business: a blueprint behind an isometric 3D printer */
.world-biz .scene { --so: .65; }
.world-biz .scene .far { background-image: linear-gradient(#e8f1ff10 1px, transparent 1px), linear-gradient(90deg, #e8f1ff10 1px, transparent 1px); background-size: 20px 20px; }
.scene .tech { opacity: .35; stroke-width: 2; } .scene .dim { fill: currentColor; stroke: none; font: 500 22px var(--mono); text-anchor: middle; }
.scene .side { fill: currentColor; fill-opacity: .08; } .scene .side.dark { fill-opacity: .16; } .scene .top { fill: currentColor; fill-opacity: .04; }
.scene .bed { fill: currentColor; fill-opacity: .12; stroke-width: 2; }
.scene .post { stroke-width: 6; } .scene .beam-x { stroke-width: 5; }
.scene .beard { fill: currentColor; fill-opacity: .5; }
.scene .carriage { animation: carriage .55s ease-in-out infinite alternate; } @keyframes carriage { from { transform: translate(-70px, -40px); } to { transform: translate(70px, 40px); } }
.scene .hot { animation: hot .3s ease-in-out infinite alternate; } @keyframes hot { to { opacity: .55; } }
/* events: bokeh, string lights, two flutes of cava */
.world-evt .scene { --so: .75; }
.scene .bokeh i { position: absolute; width: var(--r); height: var(--r); margin: calc(var(--r) / -2); border-radius: 50%; background: radial-gradient(circle, var(--c) 0, transparent 68%);
  opacity: .5; animation: bokeh var(--t) ease-in-out infinite alternate; animation-delay: calc(var(--d) * -1); }
@keyframes bokeh { to { transform: translate(30px, -40px) scale(1.15); opacity: .2; } }
.scene .wire { stroke-width: 2; opacity: .6; } .scene .cap { stroke-width: 6; opacity: .7; }
.scene .bulb { animation: twinkle 2s ease-in-out infinite; animation-delay: calc(var(--d) * -1); } @keyframes twinkle { 50% { opacity: .35; } }
.scene .glass { stroke: #fff3e0; stroke-width: 3; } .scene .shine { stroke-width: 4; opacity: .5; }
.scene .glass.l { animation: toast-l 3s ease-in-out infinite; } .scene .glass.r { animation: toast-r 3s ease-in-out infinite; }
@keyframes toast-l { 40%, 55% { transform: rotate(10deg) translateX(30px); } }
@keyframes toast-r { 40%, 55% { transform: rotate(-10deg) translateX(-30px); } }
.scene .clink { opacity: 0; stroke: #fff3e0; animation: clink 3s ease-out infinite; }
@keyframes clink { 45% { opacity: 0; } 50% { opacity: 1; } 65% { opacity: 0; } }

/* ---------- Bob's comments ---------- */
.quip { display: none; }
.live .quip { display: block; position: fixed; top: 80px; left: 16px; z-index: 25; max-width: min(300px, calc(100vw - 32px)); pointer-events: none;
  background: var(--paper); color: var(--paper-ink); font-size: 12px; line-height: 1.45; padding: var(--s2) 12px; box-shadow: 4px 4px 0 #000;
  opacity: 0; transform: translateY(-6px); transition: opacity .25s, transform .25s; }
.live .quip.show { opacity: 1; transform: none; }

/* ---------- crash ---------- */
.live .card .bob { cursor: pointer; }
#drop { fill: none; stroke: var(--dn); stroke-width: 3.5; stroke-linejoin: round; }
html.live.crash #past, html.live.crash #pulse { stroke: var(--dn); } html.live.crash #dot { fill: var(--dn); }
.crash .stage { animation: shake .12s linear 8; }
@keyframes shake { 25% { transform: translate(-6px, 3px) } 75% { transform: translate(6px, -3px) } }
.crash .tape { background: #2a0805; } .crash .tape .up { color: var(--dn); }
.crash .hud { border-color: var(--dn); } .crash .hud b { color: var(--dn); }
.panic { display: none; }
.live.crash .panic { display: flex; position: fixed; z-index: 30; top: 50%; left: 50%; transform: translate(-50%, -50%); align-items: center; gap: var(--s3);
  width: min(520px, calc(100vw - 32px)); background: #050806f2; border: 2px solid var(--dn); padding: var(--s3); box-shadow: 8px 8px 0 #000; }
.panic .bob-sprite { flex: 0 0 120px; height: 120px; }
.panic b { font-family: var(--head); font-weight: 900; font-size: 44px; color: var(--dn); }
.panic p { margin: var(--s1) 0 0; font-size: 13px; line-height: 1.5; }
.live .stage .cards { z-index: 1; } /* scanlines and confetti stay behind the cards */
.rolling .end { padding-bottom: 70vh; } /* room below the roll, so every scroll at the bottom feeds more paper */

/* easter eggs: the count sits in the HUD, each find shows a line at the top */
.hud #eggs { display: block; width: 100%; margin: 0; padding: var(--s1) 0; background: none; border: 0; font: inherit; color: var(--dim); letter-spacing: 1px; text-align: right; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.hud #eggs:hover { color: var(--gold); text-decoration-style: solid; } .hud #eggs:active { transform: translateY(1px); }
.hud #eggs.new { animation: eggpop 1.2s ease-out; }
@keyframes eggpop { 0%, 60% { color: var(--gold); text-shadow: 0 0 10px var(--gold); } 100% { color: var(--dim); text-shadow: none; } }
.egg-toast { display: none; }
.live .egg-toast { display: block; position: fixed; top: var(--s3); left: 50%; z-index: 70; width: max-content; max-width: calc(100vw - 32px); padding: var(--s2) 14px; background: var(--gold); color: #14100a;
  font: 700 12px var(--mono); letter-spacing: 1px; text-align: center; pointer-events: none; opacity: 0; transform: translate(-50%, -160%); transition: transform .35s cubic-bezier(.2, 1.4, .4, 1), opacity .2s; }
.live .egg-toast.show { opacity: 1; transform: translate(-50%, 0); }
.live .board { cursor: pointer; }
#profile .hint { margin: var(--s2) 0 0; font-size: 11px; color: #5a5040; }

/* ---------- chart: area under the line, price tag, sector stinger ---------- */
.world-edu { --acc: #f2efe4; } .world-money { --acc: #39ff88; } .world-games { --acc: #ff3df0; } .world-music { --acc: #ff6b4a; }
.world-foot { --acc: #f4f4f0; } .world-biz { --acc: #e8f1ff; } .world-evt { --acc: #ff9ec7; } html.live.crash { --acc: var(--dn); }
#area { fill: url(#areaG); }
.world-games #area { shape-rendering: crispEdges; }
.ptag { position: absolute; left: 0; top: 0; z-index: 0; width: 76px; padding: 2px 6px; background: #050806; border: 1px solid var(--acc, var(--gold)); color: var(--acc, var(--gold));
        font: 700 12px/1.4 var(--mono); text-align: center; pointer-events: none; }
.ptag::after { content: ""; position: absolute; left: 100%; top: 50%; width: var(--g, 0); border-top: 1px dashed var(--acc, var(--gold)); opacity: .6; }
.crash .ptag { display: none; } /* the panic box sits where it rides */
/* sector banner: one row of split-flap cells (same tiles as the intro board), flips in, holds, fades */
.stinger { --cw: min(26px, calc((100vw - 32px - 40px) / 21)); position: absolute; z-index: 0; left: 0; right: 0; top: 96px; gap: 2px; pointer-events: none; opacity: 0; transition: opacity .6s; }
.stinger.on { opacity: 1; transition-duration: .15s; }
.stinger .cell { width: var(--cw); height: calc(var(--cw) * 1.4); font-size: calc(var(--cw) * .72); border-radius: 3px; }
.stinger .cell.flip::before { border-radius: 3px 3px 0 0; }

/* ---------- share the profile (receipt look) ---------- */
#profile .share { display: block; width: 100%; margin-top: 12px; padding: 10px; background: none; color: #1b1b1b; border: 2px solid #1b1b1b; font: 700 12px var(--mono); letter-spacing: 3px; cursor: pointer;
  box-shadow: 0 3px 0 #000; transition: transform .08s, box-shadow .08s, background .15s, color .15s; }
#profile .share:hover { background: #1b1b1b; color: #fbf8ef; } #profile .share:active { transform: translateY(3px); box-shadow: none; }
#profile .share:focus-visible { outline-color: #1b1b1b; } #profile .share[aria-disabled=true] { opacity: .6; cursor: progress; }

/* ---------- easter-egg album: one sheet, seven slots ---------- */
.album { display: none; }
.live .album:not([hidden]) { display: flex; position: fixed; inset: 0; z-index: 65; align-items: flex-start; justify-content: center; overflow-y: auto; padding: var(--s3); background: #050806ee; }
html.album-open, html.album-open body { overflow: hidden; }
.album .sheet { width: min(860px, 100%); margin: auto; padding: var(--s4) var(--s3); background: var(--bg2); border: 1px solid var(--gold); }
.album .head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); margin-bottom: var(--s3); }
.album h2 { margin: 0; font: 900 20px/1.2 var(--head); letter-spacing: 2px; }
.album #albumN { color: var(--gold); font-weight: 700; }
.slots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s2); }
.slot { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.slot .tile { position: relative; display: block; aspect-ratio: 1; max-width: 140px; width: 100%; background: #33463b; border: 1px solid var(--line); }
@media (max-width: 699px) { .slot .tile { max-width: 104px; } .album .sheet { padding: var(--s3); } .slot p { font-size: 11px; } }
.slot .tile .bob-sprite { display: block; width: 100%; height: 100%; }
.slot.lock .tile .bob-sprite { filter: brightness(0); opacity: .85; }
.slot .tile i { position: absolute; inset: 0; display: grid; place-items: center; font: 900 40px var(--head); font-style: normal; color: var(--gold); }
.slot.found .tile { border-color: var(--gold); }
.slot b { font-size: 11px; letter-spacing: 2px; color: var(--dim); } .slot.found b { color: var(--gold); }
.slot p { margin: 0; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.goldt { margin-top: var(--s4); padding: var(--s3); background: var(--gold); color: #14100a; text-align: center; outline: 2px dashed #14100a; outline-offset: -8px; }
.goldt b { font: 900 22px var(--head); letter-spacing: 3px; } .goldt p { margin: var(--s2) 0 0; font-size: 13px; line-height: 1.5; }
#albumClose { display: block; margin: var(--s4) auto 0; padding: 10px var(--s4); background: none; color: var(--ink); border: 1px solid var(--gold); font: 700 12px var(--mono); letter-spacing: 3px; cursor: pointer; transition: transform .08s, background .15s, color .15s; }
#albumClose:hover { background: var(--gold); color: #14100a; } #albumClose:active { transform: translateY(2px); }
@media (min-width: 700px) { .slots { grid-template-columns: repeat(4, minmax(0, 1fr)); } .album .sheet { padding: var(--s5) var(--s4); } }

/* ---------- fingers: 44px of tappable height on touch and small screens (the look stays, the hit area grows) ---------- */
@media (pointer: coarse), (max-width: 699px) {
  #skip, #quick { display: flex; align-items: center; min-height: 44px; }
  #quick { margin-top: var(--s2); }
  .hud #eggs { min-height: 44px; }
  #profile .share { min-height: 44px; }
  #albumClose { min-height: 44px; }
}
/* phones: the HUD is one row (price, then the egg counter) so it fits under the card and clear of the scroll hint */
@media (max-width: 699px) {
  .live .hud { display: flex; align-items: center; gap: var(--s2); padding: 0 0 0 10px; }
  .hud #eggs { width: auto; padding: 0 10px; }
  .hero { padding-top: 104px; padding-bottom: 72px; }
  .hero h1 { margin: 12px 0 var(--s3); }
  .hero .go { margin-top: var(--s4); }
}

/* phones: the language link sits top right of the intro, so the board header keeps clear of it */
@media (max-width: 699px) { .live.locked .board-top { padding-right: 124px; } }