:root{ --bg:#0a0a08;--panel:#11110e;--panel2:#151510;--text:#f2f0e8;--muted:#8c8a80; --line:#2a2922;--lime:#d8ff45;--lime2:#b9e92b;--danger:#ff5d4a;--shadow:0 24px 70px rgba(0,0,0,.35) } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:-.02em} body:before{content:"";position:fixed;inset:0;background:radial-gradient(circle at 50% -10%,rgba(216,255,69,.08),transparent 32%);pointer-events:none} .noise{position:fixed;inset:0;opacity:.025;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E")} button,input{font:inherit} button{cursor:pointer} .topbar{height:74px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 32px;position:sticky;top:0;background:rgba(10,10,8,.84);backdrop-filter:blur(18px);z-index:20} .brand{text-decoration:none;color:inherit;display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:-.06em;font-size:22px}.brand-mark{white-space:nowrap}.live-dot,.pulse{width:8px;height:8px;background:var(--lime);border-radius:999px;box-shadow:0 0 0 6px rgba(216,255,69,.09)} .topstats{display:flex;gap:42px}.topactions{display:flex;gap:10px;justify-content:flex-end}.topstats>div{display:flex;gap:10px;align-items:baseline}.muted,.mini-label,.card-label{color:var(--muted);font-size:11px;letter-spacing:.12em;font-weight:800}.topstats strong{font-size:13px} .ghost-btn,.primary-btn,.text-btn{border:0;border-radius:999px;font-weight:900;letter-spacing:.02em}.ghost-btn{justify-self:end;color:var(--text);background:transparent;border:1px solid #35342d;padding:11px 17px}.ghost-btn:hover{border-color:var(--lime);color:var(--lime)}.primary-btn{background:var(--lime);color:#111;padding:15px 22px;box-shadow:0 8px 30px rgba(216,255,69,.12)}.primary-btn:hover{transform:translateY(-1px);background:#e2ff74}.primary-btn.compact,.ghost-btn.compact{padding:12px 18px}.primary-btn.full{width:100%;margin-top:8px}.text-btn{background:none;color:var(--lime)} main{max-width:1500px;margin:0 auto;padding:0 32px 80px}.hero{text-align:center;padding:82px 20px 42px}.eyebrow{color:var(--lime);font-size:12px;letter-spacing:.18em;font-weight:900}.eyebrow.small{font-size:10px}.hero h1{font-size:clamp(56px,8vw,120px);line-height:.82;margin:18px 0 26px;letter-spacing:-.075em}.hero h1 span{color:var(--lime)}.lede{max-width:660px;margin:0 auto;color:#b6b3a8;font-size:19px;line-height:1.5}.hero-actions{display:flex;justify-content:center;align-items:center;gap:24px;margin-top:30px}.players-online{display:flex;align-items:center;gap:9px;color:#aaa79d;font-size:13px} .game-wrap{scroll-margin-top:90px}.game-shell{border:1px solid var(--line);border-radius:24px;background:linear-gradient(180deg,#151510,#0e0e0b);box-shadow:var(--shadow);overflow:hidden}.game-head,.game-foot{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;padding:16px 22px}.game-head{border-bottom:1px solid var(--line)}.game-head>div{display:flex;gap:10px;align-items:baseline}.game-title{text-align:center!important;display:block!important;font-size:12px;font-weight:900;letter-spacing:.13em;color:#d6d4cb}.align-right{justify-content:flex-end}.game-head strong{font-variant-numeric:tabular-nums}.canvas-frame{position:relative;aspect-ratio:1400/540;background:#dedccf}.canvas-frame canvas{display:block;width:100%;height:100%;touch-action:manipulation}/* safe center: centres while it fits and falls back to the top when it does not. Plain `center` pushes overflow past the top edge where it cannot be scrolled to — which is how the death screen was losing its own heading. */.game-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;justify-content:safe center;overflow-y:auto;background:rgba(10,10,8,.58);backdrop-filter:blur(5px);text-align:center;padding:14px}.game-overlay>*{flex:0 0 auto}.hidden{display:none!important}.overlay-kicker{font-size:10px;letter-spacing:.2em;font-weight:900;color:var(--lime);margin-bottom:5px}.overlay-title,.killed-by{font-size:clamp(22px,2.7vw,36px);font-weight:1000;letter-spacing:-.055em;line-height:1.02}.overlay-sub{color:#c5c2b6;margin:10px 0 22px}.death-score{display:flex;align-items:baseline;gap:9px;margin:5px 0 1px}.death-score span{font-size:11px;letter-spacing:.15em;color:#aaa79d}.death-score strong{font-size:29px}.death-rank{color:#bbb8ad;margin-bottom:8px;font-size:12px}.overlay-actions{display:flex;gap:10px}.game-foot{border-top:1px solid var(--line);color:#8e8b82;font-size:11px;letter-spacing:.06em}.game-foot>div:last-child{text-align:right}/* safe center so a long name can never spill past the left edge where it cannot even be scrolled to, and a per-name cap so three always fit. */.ticker{display:flex!important;justify-content:center;justify-content:safe center;gap:16px!important;font-weight:900;color:#c9c6bb;overflow:hidden}.ticker span{display:inline-flex;align-items:center;gap:6px;max-width:32%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ticker span>i{font-style:normal;font-size:9px;font-weight:900;opacity:.55;flex:0 0 auto}kbd{background:#25241e;border:1px solid #3a3930;border-radius:6px;padding:3px 6px;color:#d9d6ca} .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}.metric-card{border:1px solid var(--line);background:var(--panel);border-radius:18px;padding:22px;min-height:155px}.metric-card.lime{background:var(--lime);color:#10110b;border-color:var(--lime)}.metric-card.lime .card-label,.metric-card.lime p{color:#4b501b}.metric-card strong{font-size:32px;display:block;margin:14px 0 10px}.metric-card p{margin:0;color:#8f8c83;font-size:13px;line-height:1.4} .boards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}.panel{border:1px solid var(--line);background:var(--panel);border-radius:22px;padding:24px}.panel-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px}.panel h2{margin:4px 0 0;font-size:26px}.reset-pill{border:1px solid #37362f;border-radius:999px;padding:8px 10px;color:#8f8c83;font-size:9px;letter-spacing:.12em;font-weight:900}.leader-row{display:grid;grid-template-columns:70px 1.4fr 1fr 1fr;gap:12px;padding:14px 8px;border-top:1px solid #25241e;align-items:center}.leader-row.header{color:#77756d;font-size:9px;letter-spacing:.13em;font-weight:900;border-top:0}.leader-rank{font-weight:900}.leader-name{display:flex;align-items:center;gap:10px}.avatar{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#25241f;border:1px solid #37362f;font-size:11px;font-weight:900}.leader-score{font-variant-numeric:tabular-nums;font-weight:900}.prize{color:var(--lime);font-weight:900}.market-row{display:grid;grid-template-columns:34px 46px 1fr auto;gap:13px;align-items:start; padding:14px 12px;border:1px solid #25241e;border-radius:16px;margin-bottom:9px; text-decoration:none;color:inherit;transition:border-color .15s,background .15s}.market-row:first-child{border-top:0}/* No clamp. The tagline is capped at 60 characters and the description at 160 server-side, so the row height is already bounded — clamping here only threw away copy the advertiser paid to write. */ .market-name{display:block;font-weight:900;line-height:1.3;overflow-wrap:anywhere}.market-meta{color:#807e76;font-size:11px;margin-top:4px}.market-share{text-align:right}.market-share strong{display:block;color:var(--lime)}.bar{height:5px;background:#26251f;border-radius:99px;margin-top:9px;overflow:hidden}.bar>i{display:block;height:100%;background:var(--lime);border-radius:99px}.market-note{border-top:1px solid #282720;margin-top:8px;padding-top:16px;color:#77756d;font-size:11px;line-height:1.5} .manifesto{margin-top:90px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:60px 0;display:grid;grid-template-columns:1fr 1.4fr;gap:60px}.manifesto h2{font-size:clamp(36px,5vw,68px);letter-spacing:-.055em;line-height:.95;margin:10px 0}.loop-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.loop-steps span{color:var(--lime);font-size:11px;font-weight:900}.loop-steps strong{display:block;margin:14px 0 8px}.loop-steps p{color:#88857c;font-size:13px;line-height:1.5;margin:0}footer{max-width:1500px;margin:0 auto;padding:24px 32px 42px;display:flex;justify-content:space-between;color:#69675f;font-size:10px;letter-spacing:.1em;font-weight:800} dialog{border:0;background:transparent;padding:0;color:var(--text)}dialog::backdrop{background:rgba(0,0,0,.74);backdrop-filter:blur(6px)}.modal-card{width:min(520px,calc(100vw - 28px));background:#151510;border:1px solid #35342c;border-radius:24px;padding:26px;position:relative;box-shadow:var(--shadow)}.modal-card h2{font-size:38px;margin:8px 0}.modal-card p{color:#918e84;line-height:1.5}.modal-close{position:absolute;right:15px;top:15px;width:34px;height:34px;border-radius:50%;border:1px solid #38372f;background:#1d1d18;color:#ddd;font-size:22px}.modal-card label{display:block;color:#97948a;font-size:11px;font-weight:800;letter-spacing:.08em;margin-top:16px}.modal-card input,.modal-card textarea{width:100%;margin-top:7px;border:1px solid #35342c;background:#0d0d0b;color:#fff;border-radius:12px;padding:13px;outline:none}.modal-card input:focus,.modal-card textarea:focus{border-color:var(--lime)}.modal-card textarea{font:inherit;font-size:13px;line-height:1.45;resize:vertical;min-height:58px}.spend-choices{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:18px 0}.spend-choices button{border:1px solid #36352e;background:#10100d;color:#c8c5ba;padding:12px 4px;border-radius:10px;font-weight:900}.spend-choices button.selected{background:var(--lime);color:#111;border-color:var(--lime)}.exposure-preview{display:flex;justify-content:space-between;background:#0e0e0b;border:1px solid #2c2b25;border-radius:12px;padding:15px;color:#8f8c83;font-size:11px;letter-spacing:.08em}.exposure-preview strong{color:var(--lime);font-size:16px}.modal-card small{display:block;color:#66645d;text-align:center;margin-top:10px}.profile-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0 6px}.profile-stats div{background:#0e0e0b;border:1px solid #2c2b25;border-radius:12px;padding:12px}.profile-stats span{display:block;color:#77756d;font-size:9px;letter-spacing:.14em;font-weight:900;margin-bottom:5px}.profile-stats b{font-size:19px;font-variant-numeric:tabular-nums}.profile-block{margin-top:20px;padding-top:18px;border-top:1px solid #25241e}.profile-note{display:block;color:#77756d;font-size:11px;line-height:1.5;margin:6px 0 10px}.claim-cta{background:var(--lime);color:#111;border:0;border-radius:999px;padding:10px 18px;font-weight:900;font-size:11px;letter-spacing:.1em;cursor:pointer;margin:0 0 12px}.claim-cta.hidden{display:none}#profileModal .modal-card{width:min(460px,calc(100vw - 28px))}.claim-inline{background:var(--lime);color:#111;border:0;border-radius:999px;padding:6px 12px;font-size:9px;font-weight:900;letter-spacing:.1em;cursor:pointer;white-space:nowrap}.claim-inline:hover{filter:brightness(1.06)}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;background:var(--lime);color:#111;border-radius:999px;padding:12px 18px;font-size:12px;font-weight:900;transition:.25s;z-index:40}.toast.show{opacity:1;transform:translate(-50%,0)} @media(max-width:900px){.topstats{display:none}.topbar{grid-template-columns:1fr auto;padding:0 18px}.topbar>.ghost-btn{grid-column:2}.hero{padding-top:56px}.hero h1{font-size:62px}.stats-grid,.boards,.manifesto{grid-template-columns:1fr}.stats-grid{grid-template-columns:1fr 1fr}.manifesto{gap:24px}.game-foot{grid-template-columns:1fr 1fr}.game-foot .ticker{display:none!important}.game-foot>div:last-child{text-align:right}} @media(max-width:620px){/* The canvas frame is only ~256px tall on a phone while the game-over content needs ~450. Rather than make the player scroll to reach RUN AGAIN, the overlay takes the whole viewport there — the standard mobile game-over treatment, and it still scrolls if a very long tagline pushes it over. */.game-overlay{position:fixed;inset:0;z-index:30;padding:20px 16px;overscroll-behavior:contain}.game-overlay .death-card{margin-bottom:12px}main{padding:0 12px 50px}.hero{padding-left:4px;padding-right:4px}.hero h1{font-size:52px}.lede{font-size:16px}.hero-actions{flex-direction:column}.game-shell{border-radius:16px}.game-head{padding:12px}.game-title{font-size:9px}.canvas-frame{aspect-ratio:9/6.2}.stats-grid{grid-template-columns:1fr}.leader-row{grid-template-columns:48px 1.4fr .8fr}.leader-row>*:last-child{display:none}.panel{padding:18px}.loop-steps{grid-template-columns:1fr}.manifesto{margin-top:60px;padding:42px 0}.spend-choices{grid-template-columns:1fr 1fr}footer{padding:20px 14px 32px;display:block;line-height:1.7}} /* ============ v2 additions: ad placements + polish ============ */ .canvas-frame{background:#e4dcc8} .control-hints{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;color:#a9a69c;font-size:11px;letter-spacing:.06em;margin:0 0 20px} .control-hints kbd{margin-right:4px} .run-partner{margin-top:16px;color:#8f8c83;font-size:10px;letter-spacing:.16em;font-weight:900} .run-partner b{font-weight:900} .death-card{display:grid;gap:0;justify-items:center;border-radius:16px;padding:12px 24px 12px;margin:0 0 10px;min-width:min(330px,84vw);background:#f4f2ea;color:#0b0b09;box-shadow:0 18px 50px rgba(0,0,0,.4);position:relative}/* The logo is the point of this card: it is the one moment the player is stopped and looking, so the mark gets real size instead of a chip. */.death-card-logo{width:48px;height:48px;border-radius:13px;margin:7px 0 6px;overflow:hidden;display:grid;place-items:center;background:rgba(255,255,255,.16);box-shadow:0 2px 0 rgba(0,0,0,.06) inset}.death-card-logo[hidden]{display:none}.death-card-logo img{width:100%;height:100%;object-fit:cover;display:block}.death-card-tag{font-size:11.5px;line-height:1.3;opacity:.72;max-width:34ch;text-align:center;margin-top:3px} .death-card-label{font-size:9px;letter-spacing:.18em;font-weight:900;opacity:.55} .death-card strong{font-size:clamp(20px,2.5vw,28px);letter-spacing:-.05em;line-height:1.1} .death-card>span:nth-child(3){font-size:12px;opacity:.7;margin-bottom:8px} .death-card-link{margin-top:9px;text-decoration:none;font-size:11px;font-weight:900;letter-spacing:.1em;border:1.5px solid currentColor;border-radius:999px;padding:8px 17px;opacity:.9;transition:.18s}.death-card-link:hover{opacity:1;transform:translateY(-1px)} .death-card-link:hover{opacity:1} .presented-by{display:block;margin-top:12px;font-size:9px;letter-spacing:.16em;font-weight:900;color:#4b501b} .swatch{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:8px;vertical-align:baseline} .leader-row.me{background:rgba(216,255,69,.06)} .leader-row.me .leader-name{color:var(--lime)} .ticker span{transition:color .2s} @media(max-width:620px){ .canvas-frame{aspect-ratio:9/6.6} .death-card{padding:12px 18px;margin-bottom:14px} .control-hints{font-size:10px;gap:10px} } /* ============ verified leaderboard + name claim ============ */ .claim-name{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0 0 8px} .claim-name label{font-size:9px;letter-spacing:.18em;font-weight:900;color:var(--lime)} .claim-row{display:flex;gap:8px} .claim-row input{border:1px solid #35342c;background:#0d0d0b;color:#fff;border-radius:999px; padding:11px 16px;outline:none;width:170px;text-align:center;font-weight:900;letter-spacing:.08em;text-transform:uppercase} .claim-row input:focus{border-color:var(--lime)} .claim-name small{color:#8b8880;font-size:10px} .leader-empty{color:#8b8880;font-size:12px;line-height:1.6;padding:22px 8px;border-top:1px solid #25241e} .leader-row .unverified{color:#8b8880;font-size:9px;letter-spacing:.1em;font-weight:900;margin-left:8px} /* ============ identity: recovery codes, linking, restore ============ */ .panel-card{display:flex;flex-direction:column;align-items:center;gap:10px;margin:0 0 18px; border:1px solid #35342c;background:#11110;border-radius:16px;padding:16px 20px;max-width:min(400px,86vw)} .panel-card-label{font-size:9px;letter-spacing:.18em;font-weight:900;color:var(--lime)} .panel-card code{font:900 20px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em; color:var(--lime);background:#0b0b09;border:1px solid #2c2b25;border-radius:10px;padding:12px 16px;user-select:all} .panel-card small{color:#8b8880;font-size:11px;line-height:1.5;text-align:center} .panel-card input{border:1px solid #35342c;background:#0d0d0b;color:#fff;border-radius:999px; padding:11px 16px;outline:none;width:210px;text-align:center} .panel-card input:focus{border-color:var(--lime)} .board-tools{display:flex;align-items:center;gap:14px} .restore-row{display:flex;gap:8px;justify-content:flex-end;margin-bottom:12px} .restore-row input{border:1px solid #35342c;background:#0d0d0b;color:#fff;border-radius:999px; padding:10px 16px;outline:none;width:190px;text-align:center;font-weight:900;letter-spacing:.1em;text-transform:uppercase} .restore-row input:focus{border-color:var(--lime)} .leader-row .unclaimed{color:#7d7a72;font-size:10px;letter-spacing:.1em;font-weight:900} .leader-name .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#4a4941;margin-left:7px} .leader-name .dot.ok{background:var(--lime)} .auth-buttons{display:flex;flex-direction:column;gap:8px;width:100%;max-width:250px} .auth-buttons button{border:1px solid #3a3930;background:#171712;color:var(--text); border-radius:999px;padding:11px 16px;font-weight:900;font-size:12px;letter-spacing:.04em; display:flex;align-items:center;justify-content:center;gap:9px} .auth-buttons button:hover{border-color:var(--lime);color:var(--lime)} .auth-buttons:empty{display:none} .board-tabs{display:flex;gap:6px;margin-top:12px} .board-tabs button{border:1px solid #35342c;background:#10100d;color:#8f8c83;border-radius:999px; padding:7px 14px;font-size:10px;font-weight:900;letter-spacing:.12em} .board-tabs button.on{background:var(--lime);color:#111;border-color:var(--lime)} .leader-row .set-at{color:#77756d;font-size:11px} /* ============ buy-exposure modal ============ */ .modal-card.wide{width:min(560px,calc(100vw - 28px))} .lookup-note{color:#77756d;font-size:11px;margin-top:6px;min-height:15px} .lookup-note.err{color:var(--danger)} .brand-row{display:grid;grid-template-columns:74px 1fr;gap:14px;align-items:start;margin-top:14px} .brand-logo{width:74px;height:74px;border:1px dashed #3a3930;border-radius:14px;display:grid;place-items:center; background:#0d0d0b;cursor:pointer;overflow:hidden;margin-top:22px} .brand-logo span{color:#5f5d57;font-size:9px;letter-spacing:.14em;font-weight:900} .brand-logo img{width:100%;height:100%;object-fit:contain;padding:9px} .brand-logo:hover{border-color:var(--lime)} .brand-fields label:first-child{margin-top:0} .creative-preview{margin-top:16px;border:1px solid #2c2b25;border-radius:14px;overflow:hidden;background:#0d0d0b} .preview-label{display:flex;justify-content:space-between;padding:9px 13px;color:#77756d; font-size:9px;letter-spacing:.14em;font-weight:900;border-bottom:1px solid #24231e} .preview-label b{color:var(--lime)}.preview-meta{display:flex;align-items:center;gap:12px}.preview-all{color:#8f8c83;background:none;border:0;border-bottom:1px solid #3a3931;padding:0 0 1px;font:inherit;letter-spacing:inherit;cursor:pointer}.preview-all:hover{color:var(--lime);border-bottom-color:var(--lime)}.preview-grid{display:grid;grid-template-columns:1fr;gap:14px;padding:12px;background:#0d0d0b}.preview-grid[hidden]{display:none}.pg-cell{margin:0}.pg-cell canvas{display:block;width:100%;height:auto;border-radius:9px;background:#e4dcc8}.pg-cell figcaption{display:flex;justify-content:space-between;gap:6px;color:#f2f0e8;font-size:9px;font-weight:800;letter-spacing:.07em;padding:6px 2px 0}.pg-cell figcaption b{color:#9a9789}/* One format per row makes the card ~2600px tall, so the only way out of the grid must not be 2000px above where the reader ended up. */.preview-back{display:block;width:calc(100% - 24px);margin:0 12px 12px;padding:11px;background:#141410;color:#c8c5ba;border:1px solid #35342c;border-radius:10px;font:inherit;font-weight:800;font-size:11px;letter-spacing:.08em;cursor:pointer}.preview-back:hover{border-color:var(--lime);color:var(--lime)}.preview-back[hidden]{display:none} .creative-preview canvas{display:block;width:100%;height:auto;background:#e4dcc8}/* display:block outranks the UA rule for [hidden], so say it explicitly — otherwise the single preview keeps drawing above the grid. */.creative-preview canvas[hidden],.preview-label b[hidden]{display:none} .bid-hint{color:#77756d;font-size:11px;margin:-8px 0 14px;text-align:right} .bid-hint b{color:var(--lime);cursor:pointer} .exposure-preview strong{font-size:14px} /* ============ sponsor board ============ */ .market-row:hover{border-color:var(--lime);background:rgba(216,255,69,.04)} .market-row.lead{border-color:rgba(216,255,69,.45);background:rgba(216,255,69,.06)} .market-rank{display:grid;place-items:center;width:34px;height:34px;border-radius:999px; background:#24241e;color:#c9c6bb;font-size:11px;font-weight:900} .market-row.lead .market-rank{background:var(--lime);color:#111} .market-logo{width:46px;height:46px;align-self:start;border-radius:13px;display:grid;place-items:center;overflow:hidden} /* cover, not contain: a favicon letterboxed inside its badge left a ring of the brand colour around it. Same treatment the in-game token logos get. */ .market-logo img{width:100%;height:100%;object-fit:cover;padding:0} .market-logo .initials{font-weight:900;font-size:15px;color:#0b0b09;mix-blend-mode:luminosity} .market-body{min-width:0;display:block} .market-name em{font-style:normal;color:#8f8c83;font-weight:700} .market-blurb{display:block;color:#8f8c83;font-size:12px;line-height:1.45;margin-top:3px;overflow-wrap:anywhere} .market-spend{font-weight:900;font-size:17px;color:var(--lime);white-space:nowrap;align-self:center} .market-row .bar{margin-top:8px} @media(max-width:620px){ .market-row{grid-template-columns:28px 38px 1fr;gap:10px;padding:12px 10px} .market-spend{grid-column:2 / -1;font-size:15px} } /* The sponsor board earns equal billing with the player board — it is the half that pays for the prize. */ .market-row{grid-template-columns:34px 46px minmax(0,1fr) auto} /* ============ board scrolling + pagination ============ */ .board-scroll{max-height:min(56vh,540px);overflow-y:auto;overscroll-behavior:contain; /* room for the lead row's ring so a scrollbar never clips it */ padding-right:6px;margin-right:-6px} .board-scroll::-webkit-scrollbar{width:7px} .board-scroll::-webkit-scrollbar-track{background:transparent} .board-scroll::-webkit-scrollbar-thumb{background:#2e2d26;border-radius:99px} .board-scroll::-webkit-scrollbar-thumb:hover{background:#3d3c33} .board-scroll{scrollbar-width:thin;scrollbar-color:#2e2d26 transparent;scrollbar-gutter:stable} .board-pager{display:flex;align-items:center;justify-content:space-between;gap:10px; border-top:1px solid #25241e;margin-top:12px;padding-top:12px} .board-pager button{border:1px solid #35342c;background:#10100d;color:#c8c5ba;border-radius:999px; padding:8px 14px;font-size:10px;font-weight:900;letter-spacing:.1em} .board-pager button:hover:not(:disabled){border-color:var(--lime);color:var(--lime)} .board-pager button:disabled{opacity:.35;cursor:default} .board-pager span{color:#77756d;font-size:11px;font-weight:800;letter-spacing:.06em} /* The lead row's highlight is an INSET ring, not an outer border. A border sits on the element's edge and bleeds past a rounded or scrolling container; an inset ring is painted inside the box and structurally cannot. */ .market-row.lead{border-color:transparent;box-shadow:inset 0 0 0 1.5px rgba(216,255,69,.5)} .market-row:hover{border-color:transparent;box-shadow:inset 0 0 0 1.5px rgba(216,255,69,.28)} .market-row.lead:hover{box-shadow:inset 0 0 0 1.5px rgba(216,255,69,.75)} .panel{overflow:hidden} /* ============ bid stepper ============ .modal-card input already sets margin-top and padding for the form fields, and both leak in here: the margin makes the field's box 7px taller than the buttons beside it, and the padding fights the height. Every property that decides the box is therefore restated, not inherited. */ .bid-stepper{display:grid;grid-template-columns:56px minmax(0,1fr) 56px;gap:10px; align-items:center;margin:18px auto 0;max-width:330px} .bid-stepper button,.bid-stepper input{ margin:0;padding:0;height:56px;min-height:56px;box-sizing:border-box;align-self:center; border:1px solid #36352e;border-radius:14px;background:#10100d; font-family:inherit;font-weight:900;transition:border-color .12s,color .12s} .bid-stepper button{display:flex;align-items:center;justify-content:center; line-height:1;color:#c8c5ba;font-size:24px} .bid-stepper button:hover:not(:disabled){border-color:var(--lime);color:var(--lime)} .bid-stepper button:disabled{opacity:.3;cursor:default} /* flex cannot centre a text field's own value — only a line-height equal to the content box (56px less the 1px borders) does that reliably */ .bid-stepper input{display:block;line-height:54px;width:100%;text-align:center;outline:none; color:var(--lime);font-size:22px;letter-spacing:-.02em;-moz-appearance:textfield} .bid-stepper input:focus{border-color:var(--lime)} .bid-charge{text-align:center;color:#8f8c83;font-size:12px;margin-top:9px} .bid-charge b{color:var(--lime)} .bid-rules{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid #25241e; color:#77756d;font-size:11px;line-height:1.6} .bid-rules li{position:relative;padding-left:14px;margin-bottom:9px} .bid-rules li:before{content:'·';position:absolute;left:3px;color:#4c4a3f;font-weight:900} .bid-rules b{color:#a9a69c} .bid-hint{text-align:center;margin:10px 0 0} /* Breathing room between the bid controls and the position readout. Lives on the readout rather than the stepper because the hint between them is hidden whenever the bid already is the top bid — the gap has to survive that. */ .exposure-preview{margin-top:18px} /* SHARE CARD MODAL -- the canvas is 1200x630 and scales down to the dialog width, so the preview is exactly the image that gets posted. */ .share-modal{width:min(760px,calc(100vw - 28px))} .share-frame{margin:16px 0 14px;border:1px solid #35342c;border-radius:16px;overflow:hidden;background:#0b0b09} .share-frame canvas{display:block;width:100%;height:auto} .share-actions{display:flex;gap:10px;flex-wrap:wrap} /* The post control is an , not a