*,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ --bg:#04040e;--s1:rgba(255,255,255,0.04);--s2:rgba(255,255,255,0.08); --border:rgba(255,255,255,0.1);--border2:rgba(255,255,255,0.22); --cyan:#00f5ff;--pink:#ff0090;--lime:#39ff14;--gold:#ffd700; --purple:#a855f7;--orange:#ff6600;--red:#ff2442; /* Leaderboard: podium metals + the "that's you" blue */ --silver:#c9d4e0;--bronze:#cd7f32;--blue:#3b82f6; --text:#fff;--dim:rgba(255,255,255,0.55);--dimmer:rgba(255,255,255,0.28); --fd:'Orbitron',monospace;--fb:'Rajdhani',sans-serif;--r:12px;--rl:18px; /* Reaction Time's state colors. Named by MEANING, not hue, so the colorblind-safe palette can repoint them without touching the game. */ --rx-wait:var(--red);--rx-go:var(--lime);--rx-early:var(--orange);--rx-hit:var(--cyan) } /* ── 🎨 COLORBLIND-SAFE PALETTE ── Okabe-Ito derived: the red/green pair that carries meaning in this game becomes blue/orange, which stays distinguishable for all three common types of color vision deficiency. Neon character is kept where it's decorative; only the load-bearing signals are repointed. */ html.cb-safe{ --cyan:#56b4e9;--pink:#cc79a7;--lime:#f0e442;--gold:#e69f00; --purple:#9a7fd1;--orange:#e69f00;--red:#0072b2; --rx-wait:#0072b2;--rx-go:#f0e442;--rx-early:#e69f00;--rx-hit:#56b4e9; } html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--fb);overflow:hidden;-webkit-font-smoothing:antialiased} /* ── ⬍ SCROLLBARS ── The browser default (grey thumb, white track) is the one piece of chrome that ignores the palette, and it shows on every scrolling surface: .screen, .market-body, .lb-panel, .mp-body, .fb-modal, .fb-textarea. Same neon gradient + glow as the rest of the UI. Colors are palette vars, so the cb-safe overrides above repoint the scrollbar for free. */ :root{--sb-track:rgba(255,255,255,.04);--sb-glow:rgba(0,245,255,.4)} html.cb-safe{--sb-glow:rgba(86,180,233,.4)} /* Firefox has no ::-webkit-scrollbar, so it gets the flat-accent fallback. Scoped to browsers that lack the pseudo-element on purpose: Chrome ignores every ::-webkit-scrollbar rule on any element that sets scrollbar-width or scrollbar-color, and both properties inherit — setting them on would silently kill the gradient everywhere. */ @supports not selector(::-webkit-scrollbar){ html{scrollbar-width:thin;scrollbar-color:var(--cyan) var(--sb-track)} .fb-modal{scrollbar-color:var(--lime) var(--sb-track)} } ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:var(--sb-track);border-radius:10px;box-shadow:inset 0 0 0 1px var(--border)} ::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,var(--cyan),var(--purple)); border:2px solid transparent;background-clip:padding-box;border-radius:10px; box-shadow:0 0 8px var(--sb-glow) } ::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--pink),var(--cyan));background-clip:padding-box;box-shadow:0 0 14px var(--sb-glow)} ::-webkit-scrollbar-thumb:active{background:linear-gradient(180deg,var(--pink),var(--purple));background-clip:padding-box} ::-webkit-scrollbar-corner{background:transparent} /* Form fields are small — a 10px bar swamps them. */ textarea::-webkit-scrollbar,select::-webkit-scrollbar,.input::-webkit-scrollbar{width:7px;height:7px} textarea::-webkit-scrollbar-thumb,select::-webkit-scrollbar-thumb,.input::-webkit-scrollbar-thumb{border-width:1px} /* The feedback modal is lime-accented, so its scrollbar follows suit. */ .fb-modal::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--lime),var(--cyan));background-clip:padding-box;box-shadow:0 0 8px rgba(57,255,20,.35)} .fb-modal::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--cyan),var(--lime));background-clip:padding-box;box-shadow:0 0 14px rgba(57,255,20,.5)} #bg-canvas{position:fixed;inset:0;z-index:0;pointer-events:none} /* ── SCREEN SYSTEM ── */ .screen{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;overflow-y:auto;opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease;transform:translateY(10px)} .screen.active{opacity:1;pointer-events:all;transform:translateY(0)} /* ── TYPE ── */ .logo{font-family:var(--fd);font-weight:900;font-size:clamp(1.8rem,5vw,3.5rem);background:linear-gradient(90deg,var(--cyan),var(--pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:.05em;line-height:1;text-align:center} .tagline{font-family:var(--fd);font-size:.55rem;letter-spacing:.3em;color:var(--dim);text-transform:uppercase;margin-top:14px;text-align:center} .sec-label{font-family:var(--fd);font-size:.6rem;font-weight:700;color:var(--cyan);letter-spacing:.2em;text-transform:uppercase;margin-bottom:20px} /* ── BUTTONS ── */ .btn{font-family:var(--fd);font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:11px 26px;border:none;border-radius:8px;cursor:pointer;transition:all .2s ease;white-space:nowrap} .btn-primary{background:linear-gradient(135deg,var(--cyan),var(--purple));color:#000;box-shadow:0 0 20px rgba(0,245,255,.25)} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 35px rgba(0,245,255,.45)} .btn-primary:active{transform:scale(.96)} .btn-secondary{background:var(--s2);color:var(--text);border:1px solid var(--border)} .btn-secondary:hover{background:rgba(255,255,255,.14);border-color:var(--border2)} .btn-full{width:100%}.btn-lg{padding:14px 36px;font-size:.8rem}.btn-sm{padding:7px 16px;font-size:.6rem} /* ── CARD / INPUT ── */ .card{background:var(--s1);border:1px solid var(--border);border-radius:var(--rl);backdrop-filter:blur(20px);padding:24px} .input{width:100%;background:var(--s2);border:1.5px solid var(--border);border-radius:8px;color:var(--text);font-family:var(--fb);font-size:1rem;font-weight:600;padding:11px 16px;outline:none;transition:border-color .2s,box-shadow .2s} .input::placeholder{color:var(--dimmer)} .input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,245,255,.1)} .input-label{display:block;font-size:.7rem;font-weight:600;color:var(--dim);letter-spacing:.12em;text-transform:uppercase;margin-bottom:9px;font-family:var(--fd)} .field{margin-bottom:18px} /* ── AUTH SCREEN ── */ #auth-screen .wrap{width:100%;max-width:400px;text-align:center} .auth-icon{font-size:4rem;display:block;margin-bottom:16px;animation:float 3s ease-in-out infinite} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}} .auth-tabs{display:flex;gap:8px;margin-bottom:22px} .auth-tab{flex:1;font-family:var(--fd);font-size:.65rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:10px;background:var(--s2);border:1px solid var(--border);border-radius:8px;color:var(--dim);cursor:pointer;transition:all .2s} .auth-tab.active{background:rgba(0,245,255,.1);border-color:var(--cyan);color:var(--cyan)} .auth-err{min-height:20px;font-size:.8rem;color:var(--pink);font-weight:600;margin-top:10px;text-align:center} .auth-divider{display:flex;align-items:center;gap:12px;margin:16px 0 14px;font-family:var(--fd);font-size:.55rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--dimmer)} .auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border)} .btn-guest{background:rgba(57,255,20,.08);color:var(--lime);border:1px solid rgba(57,255,20,.45)} .btn-guest:hover:not(:disabled){background:rgba(57,255,20,.16);border-color:var(--lime);transform:translateY(-2px);box-shadow:0 0 30px rgba(57,255,20,.25)} .btn-guest:active:not(:disabled){transform:scale(.96)} .btn-guest:disabled{opacity:.5;cursor:progress;transform:none;box-shadow:none} .guest-note{font-size:.72rem;color:var(--dimmer);text-align:center;margin-top:10px;line-height:1.4} /* ── OFFLINE / LOCAL ENTRY BUTTONS ── These two are built in JS, and their labels are longer than the ~350px the auth card gives them — "Continue Offline as " carries a username of up to 20 characters. They inherit .btn's white-space:nowrap, so the label used to spill straight past the rounded border instead of stopping at it. Trimming the oversized .btn-lg side padding buys back room, and overflow +text-overflow turn whatever still doesn't fit into an ellipsis. */ #btn-offline-resume,#btn-local-play{padding-left:14px;padding-right:14px;overflow:hidden;text-overflow:ellipsis} /* Laid out as a row so the two halves can be told apart: the static part keeps its full width and only the username is clipped, which means the button always still reads "CONTINUE OFFLINE AS …" rather than losing the verb. */ #btn-offline-resume{display:flex;align-items:center;justify-content:center;gap:.5ch} #btn-offline-resume .ofr-label{flex:0 0 auto} #btn-offline-resume .ofr-name{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .hub-guest-tag{background:rgba(57,255,20,.1);border:1px solid rgba(57,255,20,.35);border-radius:20px;padding:4px 10px;font-family:var(--fd);font-size:.5rem;font-weight:700;letter-spacing:.12em;color:var(--lime)} /* ── HUB SCREEN ── */ #hub-screen{justify-content:flex-start;padding-top:20px} .hub-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;max-width:1060px;background:var(--s1);border:1px solid var(--border);border-radius:var(--r);padding:12px 20px;margin-bottom:20px;flex-shrink:0} .hub-logo-sm{font-family:var(--fd);font-size:.85rem;font-weight:900;background:linear-gradient(90deg,var(--cyan),var(--pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .hub-right{display:flex;align-items:center;gap:10px} .hub-uname{font-family:var(--fd);font-size:.65rem;color:var(--cyan)} .hub-pts{background:rgba(255,215,0,.1);border:1px solid rgba(255,215,0,.3);border-radius:20px;padding:5px 14px;font-family:var(--fd);font-size:.6rem;font-weight:700;color:var(--gold)} .hub-credits{background:rgba(0,245,255,.08);border:1px solid rgba(0,245,255,.3);border-radius:20px;padding:5px 14px;font-family:var(--fd);font-size:.6rem;font-weight:700;color:var(--cyan)} /* ── BLACK MARKET SCREEN ── */ #market-screen{justify-content:flex-start;padding-top:20px} .market-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;max-width:1060px;background:var(--s1);border:1px solid var(--border);border-radius:var(--r);padding:12px 20px;margin-bottom:16px;flex-shrink:0} .market-title{font-family:var(--fd);font-size:.9rem;font-weight:900;letter-spacing:.08em;background:linear-gradient(90deg,var(--gold),var(--orange));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .market-bal{display:flex;gap:10px;font-family:var(--fd);font-size:.62rem;font-weight:700;color:var(--dim);flex-wrap:wrap} .market-bal span{background:var(--s2);border:1px solid var(--border);border-radius:20px;padding:5px 14px} .market-tabs{display:flex;gap:8px;width:100%;max-width:1060px;margin-bottom:16px;flex-wrap:wrap;flex-shrink:0} .market-tab{font-family:var(--fd);font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:10px 18px;background:var(--s2);border:1px solid var(--border);border-radius:8px;color:var(--dim);cursor:pointer;transition:all .2s} .market-tab:hover{border-color:var(--border2);color:var(--text)} .market-tab.active{background:rgba(255,215,0,.1);border-color:var(--gold);color:var(--gold)} .market-body{width:100%;max-width:1060px;flex:1;overflow-y:auto;padding-bottom:20px} .market-panel{display:none} .market-panel.active{display:block} .convert-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px} .convert-card{text-align:center} .convert-rate{font-family:var(--fd);font-size:.6rem;color:var(--gold);letter-spacing:.1em;margin:12px 0 20px} .convert-preview{font-family:var(--fd);font-size:1rem;color:var(--cyan);margin:16px 0;font-weight:700} .shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:18px 14px} .shop-card{position:relative;background:var(--s1);border:1px solid var(--border);border-radius:var(--rl);padding:20px 14px;text-align:center;transition:all .2s ease} .shop-card.equipped{border-color:var(--gold);box-shadow:0 8px 24px rgba(255,215,0,.15)} .shop-swatch{width:56px;height:56px;border-radius:50%;margin:0 auto 12px;border:2px solid rgba(255,255,255,.2)} .shop-emoji{font-size:2.4rem;margin-bottom:10px} .shop-name{font-family:var(--fd);font-size:.62rem;font-weight:700;margin-bottom:11px;letter-spacing:.04em} .shop-tag{display:inline-block;font-family:var(--fd);font-size:.5rem;color:var(--gold);border:1px solid var(--gold);border-radius:20px;padding:2px 10px;margin-bottom:10px;letter-spacing:.1em} .shop-btn{width:100%} /* ── RARITY TIERS (pricier Black Market items get flashier treatment) ── */ .rarity-badge{display:inline-block;font-family:var(--fd);font-size:.48rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:2px 10px;border-radius:20px;margin-bottom:8px} .rarity-badge.rare{color:var(--cyan);border:1px solid var(--cyan);background:rgba(0,245,255,.08)} .rarity-badge.epic{color:#e879f9;border:1px solid #e879f9;background:rgba(232,121,249,.08)} /* LEGENDARY badge — the shimmer IS the text: the gradient is clipped to the glyphs, so this badge's `background-image` is not decoration that can be swapped out, it is the only thing painting the word. Two consequences the rules below have to respect: · the pill can have no background FILL — background-clip:text clips every background layer, colour included — so the tint arrives as an inset shadow, which paints over the background box and under the text. · any later rule that sets `background-image` on .rarity-badge erases the word entirely (see the mode-3d override further down). `color` is the safety net for engines without background-clip:text, where -webkit-text-fill-color is skipped and the flat gold shows instead. */ .rarity-badge.legendary{ --legend-shimmer:linear-gradient(90deg,var(--gold),var(--pink),var(--cyan),var(--gold)); position:relative;color:var(--gold);border:1px solid var(--gold); box-shadow:inset 0 0 0 20px rgba(255,215,0,.10); background-image:var(--legend-shimmer);background-size:300% 100%; -webkit-background-clip:text;background-clip:text; filter:drop-shadow(0 0 3px rgba(255,215,0,.5)); animation:legendary-text-shift 3s linear infinite } @supports ((-webkit-background-clip:text) or (background-clip:text)){ .rarity-badge.legendary{-webkit-text-fill-color:transparent} } @keyframes legendary-text-shift{0%{background-position:0% 50%}100%{background-position:300% 50%}} /* RARE — gentle cyan breathing glow */ @keyframes pulse-rare{0%,100%{box-shadow:0 0 0 rgba(0,245,255,0)}50%{box-shadow:0 0 16px rgba(0,245,255,.4)}} .shop-card.rarity-rare{animation:pulse-rare 2.6s ease-in-out infinite} /* EPIC — stronger glow + a diagonal light sweep across the card */ @keyframes pulse-epic{0%,100%{box-shadow:0 0 0 rgba(232,121,249,0)}50%{box-shadow:0 0 24px rgba(232,121,249,.45)}} .shop-card.rarity-epic{animation:pulse-epic 2.2s ease-in-out infinite;overflow:hidden} .shop-card.rarity-epic::after{content:'';position:absolute;top:0;left:-150%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);animation:shimmer-sweep 2.6s ease-in-out infinite;pointer-effects:none} @keyframes shimmer-sweep{0%{left:-150%}60%,100%{left:150%}} /* LEGENDARY — pulsing gold glow + colour-shifting badge text (no rotation) */ .shop-card.rarity-legendary{border-color:var(--gold);animation:pulse-legendary 2.2s ease-in-out infinite} @keyframes pulse-legendary{0%,100%{box-shadow:0 0 20px rgba(255,215,0,.22)}50%{box-shadow:0 0 38px rgba(255,215,0,.5)}} .shop-card.rarity-legendary .shop-emoji{animation:float-icon 2.4s ease-in-out infinite} @keyframes float-icon{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-6px) scale(1.08)}} /* Matrix Cascade — animated "digital rain" swatch, always legendary tier */ .shop-swatch.matrix-swatch{background:repeating-linear-gradient(0deg,rgba(0,255,65,.95) 0 2px,rgba(0,20,5,.95) 2px 6px);background-size:100% 24px;box-shadow:0 0 20px rgba(0,255,65,.6);animation:matrix-fall 1s linear infinite,pulse-legendary 2.2s ease-in-out infinite,float-icon 2.4s ease-in-out infinite} @keyframes matrix-fall{0%{background-position:0 0}100%{background-position:0 24px}} /* ── ANIMATED EQUIPPED CURSORS (epic & legendary tiers) ── */ #custom-cursor-fx{position:fixed;top:0;left:0;display:none;pointer-events:none;z-index:99999;transform:translate(-50%,-50%)} .ccur-epic{font-size:26px;filter:drop-shadow(0 0 6px #e879f9)} .ccur-epic .ccur-inner{display:inline-block;animation:ccur-epic-spin 1.2s ease-in-out infinite} @keyframes ccur-epic-spin{0%,100%{transform:scale(1) rotate(0deg)}50%{transform:scale(1.3) rotate(180deg)}} .ccur-legendary .ccur-code{font-family:var(--fd),monospace;font-size:12px;font-weight:700;letter-spacing:2px;color:#00ff41;text-shadow:0 0 6px #00ff41,0 0 14px #00ff41;white-space:nowrap;display:inline-block;animation:ccur-code-flicker 1.4s ease-in-out infinite} @keyframes ccur-code-flicker{0%,100%{opacity:1;transform:translateY(0)}50%{opacity:.75;transform:translateY(-3px)}} /* ── HUB BODY (Leaderboard & Games) ── */ .hub-body{display:grid;grid-template-columns:1fr 300px;gap:26px;width:100%;max-width:1060px} .games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;align-content:start} .game-card{background:var(--s1);border:1px solid var(--border);border-radius:var(--rl);padding:22px 16px;text-align:center;cursor:pointer;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;position:relative;overflow:hidden} .game-card:hover{transform:translateY(-5px) scale(1.02)} .game-card[data-c="cyan"]:hover {border-color:var(--cyan); box-shadow:0 8px 30px rgba(0,245,255,.2)} .game-card[data-c="pink"]:hover {border-color:var(--pink); box-shadow:0 8px 30px rgba(255,0,144,.2)} .game-card[data-c="lime"]:hover {border-color:var(--lime); box-shadow:0 8px 30px rgba(57,255,20,.2)} .game-card[data-c="gold"]:hover {border-color:var(--gold); box-shadow:0 8px 30px rgba(255,215,0,.2)} .game-card[data-c="purple"]:hover{border-color:var(--purple);box-shadow:0 8px 30px rgba(168,85,247,.2)} .game-card[data-c="orange"]:hover{border-color:var(--orange);box-shadow:0 8px 30px rgba(255,102,0,.2)} .game-card[data-c="red"]:hover {border-color:var(--red); box-shadow:0 8px 30px rgba(255,36,66,.2)} .gc-icon{font-size:2.8rem;display:block;margin-bottom:12px} .gc-name{font-family:var(--fd);font-size:.6rem;font-weight:700;letter-spacing:.08em;margin-bottom:11px} .gc-name[data-c="cyan"] {color:var(--cyan)} .gc-name[data-c="pink"] {color:var(--pink)} .gc-name[data-c="lime"] {color:var(--lime)} .gc-name[data-c="gold"] {color:var(--gold)} .gc-name[data-c="purple"]{color:var(--purple)} .gc-name[data-c="orange"]{color:var(--orange)} .gc-name[data-c="red"] {color:var(--red)} .gc-desc{font-size:.75rem;color:var(--dim);line-height:1.45;margin-bottom:15px} .gc-pts{display:inline-block;padding:3px 12px;border-radius:20px;font-family:var(--fd);font-size:.5rem;font-weight:700;border:1px solid} .gc-pts[data-c="cyan"] {color:var(--cyan); border-color:var(--cyan); background:rgba(0,245,255,.06)} .gc-pts[data-c="pink"] {color:var(--pink); border-color:var(--pink); background:rgba(255,0,144,.06)} .gc-pts[data-c="lime"] {color:var(--lime); border-color:var(--lime); background:rgba(57,255,20,.06)} .gc-pts[data-c="gold"] {color:var(--gold); border-color:var(--gold); background:rgba(255,215,0,.06)} .gc-pts[data-c="purple"]{color:var(--purple);border-color:var(--purple);background:rgba(168,85,247,.06)} .gc-pts[data-c="orange"]{color:var(--orange);border-color:var(--orange);background:rgba(255,102,0,.06)} .gc-pts[data-c="red"] {color:var(--red); border-color:var(--red); background:rgba(255,36,66,.06)} /* ── LEADERBOARD ── */ .lb-panel{background:var(--s1);border:1px solid var(--border);border-radius:var(--rl);padding:18px;overflow-y:auto;max-height:520px} .lb-title{font-family:var(--fd);font-size:.65rem;font-weight:700;color:var(--gold);letter-spacing:.15em;text-transform:uppercase;margin-bottom:14px;text-align:center} .lb-row{position:relative;display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;border:1px solid var(--border);background:var(--s2);margin-bottom:7px} /* "You" is declared before the podium tints on purpose: a logged-in player who is also on the podium keeps their medal colour on the row, and the blue shows as the edge marker, name and glow instead of overwriting it. */ .lb-row.me{border-color:var(--blue);background:rgba(59,130,246,.07)} .lb-row.me .lb-name{color:var(--blue)} /* The glow would swamp a medal tint, so only a player outside the top three gets it — on the podium the edge marker and blue name carry the signal. */ .lb-row.me:not(.r1):not(.r2):not(.r3){box-shadow:0 0 14px rgba(59,130,246,.18)} .lb-row.me::before{content:'';position:absolute;left:0;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:var(--blue);box-shadow:0 0 8px var(--blue)} /* Podium: gold, silver, bronze. */ .lb-row.r1{border-color:rgba(255,215,0,.55);background:rgba(255,215,0,.07)} .lb-row.r2{border-color:rgba(201,212,224,.7);background:rgba(201,212,224,.09)} .lb-row.r3{border-color:rgba(205,127,50,.6);background:rgba(205,127,50,.08)} .lb-row.r1 .lb-score{color:var(--gold)} .lb-row.r2 .lb-score{color:var(--silver)} .lb-row.r3 .lb-score{color:var(--bronze)} .lb-rank{font-family:var(--fd);font-size:.9rem;font-weight:900;width:26px;text-align:center;color:var(--dimmer)} .lb-name{flex:1;font-weight:700;font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lb-score{font-family:var(--fd);font-size:.65rem;color:var(--gold)} .lb-empty{color:var(--dim);font-size:.82rem;text-align:center;padding:30px 0} /* ── DIFFICULTY SELECTOR ── */ .difficulty-selector{ display:flex; align-items:center; gap:8px; margin-bottom:20px; } .difficulty-label{ font-family:var(--fd); font-size:.65rem; color:var(--dim); text-transform:uppercase; letter-spacing:.1em; } .difficulty-options{ display:flex; gap:8px; } .diff-btn{ font-family:var(--fd); font-size:.65rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:10px 16px; border:none; border-radius:6px; background:var(--s2); color:var(--text); cursor:pointer; transition:all .2s; position:relative; overflow:hidden; } .diff-btn:hover{ background:rgba(255,255,255,.14); border-color:var(--border2); transform:translateY(-2px); } .diff-btn:active{ transform:scale(0.96); } .diff-btn.stable-active{ background:rgba(0,255,102,.1); color:#00ff66; box-shadow:0 0 10px #00ff66; } .diff-btn.stable-active:hover{ box-shadow:0 0 15px #00ff66; } .diff-btn.overclock-active{ background:rgba(255,204,0,.1); color:#ffcc00; box-shadow:0 0 10px #ffcc00; } .diff-btn.overclock-active:hover{ box-shadow:0 0 15px #ffcc00; } .diff-btn.meltdown-active{ background:rgba(255,0,51,.1); color:#ff0033; box-shadow:0 0 10px #ff0033; animation:pulse 1.5s infinite; } .diff-btn.meltdown-active:hover{ box-shadow:0 0 15px #ff0033; } @keyframes pulse{ 0%,100%{box-shadow:0 0 0 rgba(255,0,51,.4);} 50%{box-shadow:0 0 12px rgba(255,0,51,.6);} } /* Difficulty Selector (new naming) */ .diff-selector{ display:flex; align-items:center; gap:12px; margin-bottom:20px; flex-direction:column; position:relative; isolation:isolate; background:var(--s1); border:1px solid var(--border); border-radius:var(--r); padding:12px 20px; transition:border-color .4s ease; } /* Ambient glow "emitted from behind" the panel — color follows the active tier */ .diff-selector::before{ content:''; position:absolute; inset:-4px; z-index:-1; border-radius:inherit; background:transparent; filter:blur(22px); opacity:.45; transition:background .5s ease, opacity .3s ease; pointer-events:none; } .diff-selector.tier-stable{border-color:rgba(0,255,102,.4)} .diff-selector.tier-stable::before{background:#00ff66} .diff-selector.tier-overclocked{border-color:rgba(255,204,0,.4)} .diff-selector.tier-overclocked::before{background:#ffcc00} .diff-selector.tier-meltdown{border-color:rgba(255,0,51,.45)} .diff-selector.tier-meltdown::before{background:#ff0033} /* Brief brighter pulse the instant a tier button is clicked */ .diff-selector.flash::before{opacity:.9} .diff-label{ font-family:var(--fd); font-size:.65rem; color:var(--dim); text-transform:uppercase; letter-spacing:.1em; } .diff-btns{ display:flex; gap:8px; } .diff-stable, .diff-overclocked, .diff-meltdown{ /* inherit from .diff-btn */ } /* Active glow now matches the specific tier, not a hardcoded green */ .diff-btn.diff-stable.active{ background:rgba(0,255,102,.1); color:#00ff66; box-shadow:0 0 10px #00ff66; } .diff-btn.diff-stable.active:hover{ box-shadow:0 0 15px #00ff66; } .diff-btn.diff-overclocked.active{ background:rgba(255,204,0,.1); color:#ffcc00; box-shadow:0 0 10px #ffcc00; } .diff-btn.diff-overclocked.active:hover{ box-shadow:0 0 15px #ffcc00; } .diff-btn.diff-meltdown.active{ background:rgba(255,0,51,.1); color:#ff0033; box-shadow:0 0 10px #ff0033; animation:pulse 1.5s infinite; } .diff-btn.diff-meltdown.active:hover{ box-shadow:0 0 15px #ff0033; } .diff-mult{ font-family:var(--fd); font-size:.65rem; color:var(--gold); margin-top:6px; } /* A frozen dial: mid-round anywhere, and for the guest of a room — the round runs on the HOST'S tier, so the guest's panel is a readout, not a control. Dimmed rather than hidden, because the tier is the thing they most need to know before the countdown starts. */ .diff-selector.locked .diff-btn{cursor:not-allowed} .diff-selector.locked .diff-btn:not(.active){opacity:.4} /* The active tier keeps its full glow — the hover reset is only for the ones that are no longer choices. */ .diff-selector.locked .diff-btn:not(.active):hover{background:var(--s2);transform:none} .diff-selector.locked .diff-btn:active{transform:none} .diff-note{ font-family:var(--fd); font-size:.5rem; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); text-align:center; margin-top:2px; } .diff-note:empty{display:none} /* The arena's copy is sized by its own content and centred, like the hub's — left to stretch it became a full-width banner over the duel grid and stopped reading as the same control. */ .mp-diff{width:max-content;max-width:100%;margin-left:auto;margin-right:auto} /* ── GAME LAYOUT ENGINE ── */ /* Every pixel of chrome above the board comes straight off the play field, which is aspect-locked and therefore sized by the height left over. */ #game-screen{justify-content:flex-start;padding-top:10px} /* The header used to be one space-between row: Quit · title · hint · pills. Every minigame supplies a different hint length, and Tetris adds a LEVEL pill, so the title landed in a different spot in each game — and in the crowded ones it ended up pressed against the Quit button. Between them those four items nearly fill the 700px row, so there is no width left to centre the title reliably. It gets its own line instead: dead-centre, identical in every game, with Quit and the pills on the row beneath. */ /* THREE tracks on the control row, not two: Quit, the readouts, and the action cluster. The cluster used to live inside .g-stats and therefore inside the readouts' track, which meant a long readout row could push it around, break it up, or shove it off the edge. Its own track cannot be reached into. */ .g-hdr{display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:16px;row-gap:12px;width:100%;max-width:max(var(--board-w,560px),560px);margin-bottom:12px} .g-title{grid-column:1/-1;grid-row:1;text-align:center;font-family:var(--fd);font-size:.95rem;font-weight:700;letter-spacing:.05em} .g-hdr > #btn-quit{grid-column:1;grid-row:2;justify-self:start} .g-hdr > .g-actions{grid-column:3;grid-row:2;justify-self:end} /* The reserved slots below cost this row width, and the busiest one it ever carries — LEVEL + ping + clock + score, in a Matrix Stack-Off duel — has only 520px to live in (the header keeps a 20px notch inset each side). So the pills tighten by the few px the slots take back: the row then fits that duel at any score, which it did NOT before — a five-digit score used to push it ~18px past the board edge. */ .g-stats{grid-column:2;grid-row:2;justify-self:end;display:flex;align-items:center;gap:6px; /* Wrapping is allowed at EVERY width now, not only on a phone. The readouts are a variable-length list — Boss Rush and Endless each insert a pill at the front, Tetris adds LEVEL, a duel adds ping — so the row can outgrow its track on a desktop too, and a row that cannot wrap overflows the board edge instead. What made wrapping look broken was never the wrap: it was the BUTTONS wrapping one at a time. They are one item now (.g-actions), so a wrap can only ever put the pills on their own line. */ flex-wrap:wrap;justify-content:flex-end;row-gap:6px} /* ══ 📐 THE COMPACTION TIERS — applied by fitHud(), never by hand ══ Three steps of increasingly aggressive tightening, added one at a time and cumulatively until the readout row fits on ONE line. See fitHud() in app.js for why the header cannot simply be made wider. Tier 1 takes only padding and gaps — nothing is lost, and it is enough on its own for the common case of a 560px board carrying a pace ghost. */ .g-hdr.hud-t1{column-gap:10px} .g-hdr.hud-t1 .g-stats{gap:5px} .g-hdr.hud-t1 .stat-pill{padding:4px 7px} .g-hdr.hud-t1 .ghost-pace{padding:4px 8px;gap:5px} .g-hdr.hud-t1 .g-actions{gap:5px} .g-hdr.hud-t1 .g-actions .btn-sm{min-width:30px;min-height:30px;padding:4px 6px} /* Tier 2 drops the pace ghost's TARGET — "PB 1,200". It is the only thing in the row that never changes during a round, so it is the only thing a player can afford to lose: the delta beside it still says everything actionable, and the target is on the results card at the end either way. */ .g-hdr.hud-t2 .gp-target{display:none} .g-hdr.hud-t2 .ghost-pace{gap:4px} /* Tier 3 is a genuinely full row on a genuinely narrow board — Boss Rush with a pace ghost, say. The ghost icon goes (the colour already says ahead/behind) and everything shrinks a step. The delta keeps a fixed slot, just a tighter one: it must not start moving again. */ .g-hdr.hud-t3 .gp-ico{display:none} .g-hdr.hud-t3 .stat-pill, .g-hdr.hud-t3 .ghost-pace{font-size:.53rem;padding:4px 6px} .g-hdr.hud-t3 .gp-delta{min-width:8ch} /* ⚙️ THE ACTION CLUSTER — audio, photo, fullscreen. One flex item, never broken up, never squeezed: these are the only controls on the screen the player NEEDS to be able to hit mid-round (mute, and the way back out of fullscreen), so they are the one thing in the header that is not allowed to move somewhere else when the readouts beside them grow. */ .g-actions{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;flex-shrink:0} /* A comfortable, EQUAL target for all three. They were sized by their glyphs before, so 🔊 / 📸 / ⛶ came out three different widths and the cluster read as an accident rather than a set. 34px is the smallest square that still looks deliberate beside a 24px pill; the phone block below takes it to 44. */ .g-actions .btn-sm{min-width:34px;min-height:34px;display:inline-flex; align-items:center;justify-content:center;padding:5px 8px;line-height:1} .stat-pill{background:var(--s2);border:1px solid var(--border);border-radius:20px;padding:5px 10px;font-family:var(--fd);font-size:.6rem;font-weight:700;white-space:nowrap; /* Equal-width digits: without this a 1 is narrower than a 0 and the readout twitches on every tick even when the digit COUNT hasn't changed. */ font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} /* Every number in here is a live counter, and the row is right-aligned — so a score going 9 → 10 → 100 widened its pill and shoved every pill to its left along with it, mid-game. Each readout now owns a fixed slot wide enough for the biggest number it can reach, so the row is laid out once and then holds still no matter what the numbers do. */ .stat-pill em{font-style:normal;color:var(--cyan);display:inline-block;text-align:center} #g-pts{min-width:5ch} /* uncapped in Cyber Arena — five digits of room */ /* Every other game counts down from a two-digit clock (90s at most), so 3ch used to be plenty — but the Hover-Bike Run has no clock at all: elapsed just climbs for as long as the run survives, same shape as Cyber Arena's score. 4ch covers that (and Battle Bots' fixed "M:SS", and the ∞ / — placeholders) without reserving Arena-sized room for a number that stays two digits. */ #g-time{min-width:4ch} #tetris-lvl{min-width:2ch} #bb-ram{min-width:3ch} #mp-ping{min-width:5ch} /* "999ms" — mpPing() clamps to keep it in the slot */ .prog-bar{width:100%;max-width:max(var(--board-w,560px),560px);height:5px;background:var(--s2);border-radius:3px;margin-bottom:12px;overflow:hidden;flex-shrink:0} .prog-fill{height:100%;border-radius:3px;transition:width .2s ease-out;background:linear-gradient(90deg,var(--cyan),var(--purple))} .g-area{width:100%;max-width:1060px;display:flex;flex-direction:column;align-items:center} /* Game Controls Hint — a full-width caption on its own row, so a long hint ("DRAG = MOVE · TAP = SLASH · DOUBLE-TAP = ABILITY · ⚡ = DASH") can never squeeze the title or the Quit button. */ .g-controls{ grid-column:1/-1; grid-row:3; text-align:center; font-family:var(--fd); font-size:.65rem; color:var(--dim); letter-spacing:.02em; } /* Games with no hint (Click Frenzy, Memory, Math) skip the row entirely. */ .g-controls:empty{display:none} /* Canvas & Controls */ #arcade-canvas{background:#0d0d11;border:2px solid var(--border);border-radius:8px;display:block} /* The pad spans the board rather than a fixed 400px, so it stays flush with the play field's edges now that the board grows to fill the screen. */ #arcade-controls{display:flex;width:100%;max-width:100%;gap:10px;margin-top:10px} .ctrl-btn{flex:1;background:var(--s2);border:1px solid var(--border);color:#fff;padding:14px;font-family:var(--fd);border-radius:8px;cursor:pointer} /* Marks a control that permanently commits something (Tetris's hard drop), so it reads as its own thing rather than another grey sibling of ◀ / ⟳ / ▶. Opt-in via setControls({accentDrop:true}) — Snake's ↓ is just an arrow. */ .ctrl-btn.accent{background:rgba(168,85,247,.16);border-color:rgba(168,85,247,.55);color:#d8b4fe;font-weight:700;letter-spacing:.04em} .ctrl-btn.accent:active{background:rgba(168,85,247,.34);transform:scale(.96)} /* Bare-glyph buttons (◀ ↑ ⟳) get a size of their own — at label size a lone arrow is a speck, while worded buttons still need the smaller type. */ .ctrl-btn.glyph{font-size:1.3rem;line-height:1} /* Shrink-wraps the canvas so #tetris-next-wrap and #touch-hint position against the play field, not against the holder that also owns the pad. */ #board-frame{position:relative;width:fit-content;max-width:100%;margin:0 auto} /* ── ⚔️ BATTLE BOTS — DEPLOY DECK ── */ /* The deploy deck under the board — the whole bot roster plus the EMP surge and the RAM upgrade. Tracks the board's width like .g-hdr and .prog-bar do, so the whole game reads as one column, and is allowed to wrap: fitCanvas() measures the deck's real height, so on a narrow screen a second row of cards costs the board height instead of running off the bottom. Built by startBattleBots() and emptied by stopGame(). */ #bb-deck{display:flex;flex-wrap:wrap;gap:10px;width:100%;max-width:max(var(--board-w,560px),560px);margin-top:10px;flex-shrink:0} .bb-btn{ position:relative;overflow:hidden;flex:1;min-width:0; display:flex;flex-direction:column;align-items:center;gap:3px; background:var(--s2);border:1.5px solid var(--bc);border-radius:10px; padding:9px 4px;cursor:pointer;color:#fff;font-family:var(--fd); box-shadow:0 0 14px -4px var(--bc),inset 0 0 18px -12px var(--bc); transition:transform .12s ease,box-shadow .2s ease,opacity .2s ease,border-color .2s ease } .bb-btn:hover:not(.broke):not(.maxed){transform:translateY(-2px);box-shadow:0 0 24px -4px var(--bc)} .bb-btn:active{transform:scale(.96)} .bb-ico{font-size:1.35rem;line-height:1} .bb-name{font-size:.55rem;font-weight:700;letter-spacing:.1em;color:var(--bc);white-space:nowrap} .bb-cost{font-size:.52rem;font-weight:700;letter-spacing:.06em;color:var(--dim);white-space:nowrap} /* Unaffordable, but still clickable — the deny blip and the toast are how you find out how much more RAM you need. */ .bb-btn.broke{opacity:.4;border-color:var(--border);box-shadow:none} .bb-btn.broke .bb-name{color:var(--dim)} .bb-btn.maxed{opacity:.55;border-color:var(--border);box-shadow:none} /* Deploy cooldown — a shade that recedes upward as the bay reloads. */ .bb-btn::after{content:'';position:absolute;left:0;right:0;top:0;height:calc(var(--cd,0) * 100%);background:rgba(4,4,14,.72);pointer-events:none;transition:height .08s linear} /* …and the seconds left, over the top of it. The shade says how MUCH of the reload is left; this says how LONG, because "about a third of a bar" is not something you can plan the next deploy around, and the whole skill of the deck is knowing what will be back before the next wave lands. An attribute rather than a text node: paintDeck() runs every frame, and the DOM is only touched when the whole second changes. The rule keys off the attribute's presence, so a card that is ready simply has no data-cd. */ .bb-btn[data-cd]::before{ content:attr(data-cd); position:absolute;inset:0;z-index:2; display:flex;align-items:center;justify-content:center; font-family:var(--fd);font-weight:900;font-size:1.2rem;letter-spacing:.02em; color:#fff;text-shadow:0 0 4px rgba(4,4,14,.95),0 0 12px rgba(4,4,14,.9); pointer-events:none } /* NEXT-piece preview (was inline styles; moved here so the mobile rules below can actually shrink it — inline wins over a stylesheet otherwise). */ #tetris-next-wrap{position:absolute;top:10px;right:10px;background:var(--s2);border:1px solid var(--border);border-radius:8px;padding:8px;text-align:center;pointer-events:none} #tetris-next-wrap .next-label{font-family:var(--fd);font-size:.6rem;color:var(--cyan);margin-bottom:4px} #nextCanvas{display:block;width:80px;height:80px} /* ── TOUCH TUTORIAL OVERLAY ── One line of "here's how you play this with a finger", shown over the canvas for the first few seconds and dismissed by the first touch. */ #touch-hint{ position:absolute;left:50%;bottom:18px;transform:translateX(-50%); /* Sized against the viewport, not the board — on a scaled-down board 88% of the frame wrapped one sentence into six lines and buried the game. Overflowing into the margin beside the board is fine and stays centred. */ display:none;width:max-content;max-width:min(86vw,420px);padding:10px 18px; background:rgba(4,4,14,.82);border:1px solid rgba(0,245,255,.45);border-radius:24px; font-family:var(--fd);font-size:.58rem;line-height:1.7;letter-spacing:.08em; color:var(--cyan);text-align:center;text-shadow:0 0 10px rgba(0,245,255,.5); box-shadow:0 0 24px rgba(0,245,255,.18); pointer-events:none;z-index:5;opacity:0;transition:opacity .35s ease } #touch-hint.show{display:block;opacity:1} /* ── Click Frenzy ── */ .click-wrap{display:flex;flex-direction:column;align-items:center;gap:16px} /* Five-rem digits: an uneven 1 is very visible at this size, and Click Frenzy redraws this number several times a second. */ #click-count{font-family:var(--fd);font-size:5rem;font-weight:900;color:var(--cyan);line-height:1; font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;min-width:4ch;text-align:center} .click-label{color:var(--dim);font-weight:600;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase} #click-btn{width:180px;height:180px;border-radius:50%;border:none;background:linear-gradient(135deg,var(--cyan),var(--purple));font-size:3.5rem;cursor:pointer;box-shadow:0 0 50px rgba(0,245,255,.3)} #click-btn:active{transform:scale(.9)} /* ── Memory Match Layout ─ */ .memory-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:100%;max-width:340px} .mem-card{height:75px;background:var(--s2);border:1px solid var(--border);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:2rem;cursor:pointer;user-select:none;transition:background .2s} .mem-card.flipped{background:rgba(57,255,20,0.15);border-color:var(--lime)} /* ── Math Blitz Layout ─ */ .math-wrap{text-align:center;width:100%;max-width:340px} #math-question{font-family:var(--fd);font-size:3rem;margin-bottom:20px;color:var(--gold)} #math-answer{width:100%;background:var(--s2);border:1px solid var(--border);color:#fff;padding:12px;font-size:1.5rem;text-align:center;border-radius:8px;margin-bottom:14px;outline:none} /* ── Reaction Time Layout ─ */ .reaction-box{width:100%;max-width:400px;height:300px;border-radius:12px;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;transition:background 0.1s} #reaction-text{font-family:var(--fd);font-weight:700;font-size:1.5rem} /* ── Node Hacker Layout ─ */ /* The keypad is aspect-locked to a square and sized by whichever runs out first — the column, 380px, or the viewport height. Same reasoning as fitCanvas(): a board whose bottom row is under the fold is unplayable. */ .hack-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;max-width:400px} .hack-readout{width:100%;text-align:center;background:var(--s1);border:1px solid rgba(57,255,20,.28);border-radius:var(--r);padding:12px 14px} .hack-status{font-family:var(--fd);font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--lime);text-shadow:0 0 10px rgba(57,255,20,.55);min-height:17px;line-height:1.4} .hack-status.warn{color:var(--gold);text-shadow:0 0 10px rgba(255,215,0,.55)} .hack-status.fail{color:var(--red);text-shadow:0 0 10px rgba(255,36,66,.6)} /* One pip per node in the current sequence — fills left-to-right as you replicate it, so progress through a 9-long chain is readable at a glance. */ .hack-seq{display:flex;justify-content:center;flex-wrap:wrap;gap:5px;margin-top:10px;min-height:7px} .hack-pip{width:16px;height:5px;border-radius:3px;background:var(--s2);border:1px solid var(--border);transition:background .18s,box-shadow .18s} .hack-pip.done{background:var(--lime);border-color:var(--lime);box-shadow:0 0 8px rgba(57,255,20,.7)} .hack-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;width:min(100%,380px,54vh);aspect-ratio:1/1} /* --nc is the node's own neon, assigned per row in startHacker(). */ .hack-node{ position:relative;display:flex;align-items:center;justify-content:center; background:var(--s2);border:1.5px solid var(--border);border-radius:10px; cursor:pointer;overflow:hidden; transition:background .12s ease,border-color .12s ease,box-shadow .12s ease,transform .12s ease } .hack-node::before{ content:'';position:absolute;inset:0;border-radius:inherit; background:radial-gradient(circle at 50% 50%,var(--nc),transparent 70%); opacity:.07;transition:opacity .12s ease } .hack-node .hack-key{ font-family:var(--fd);font-size:.62rem;font-weight:700;letter-spacing:.06em; color:var(--dimmer);position:relative;transition:color .12s ease,text-shadow .12s ease } /* Scoped to real pointers — on a phone :hover latches after a tap and would leave half the keypad glowing as if it were part of the sequence. */ @media (hover: hover){ .hack-node:not(.lit):hover{border-color:var(--nc);transform:translateY(-2px)} .hack-node:not(.lit):hover .hack-key{color:var(--dim)} } /* Lit = the mainframe is broadcasting this node, or you just pressed it. */ /* --nc-soft/--nc-glow are pre-mixed rgba by startHacker() via hexToRgba(), rather than color-mix() — same result, no dependency on a newer colour function than the rest of the sheet assumes. */ .hack-node.lit{background:var(--nc-soft);border-color:var(--nc);box-shadow:0 0 22px var(--nc),inset 0 0 18px var(--nc-glow);transform:scale(1.05)} .hack-node.lit::before{opacity:.5} .hack-node.lit .hack-key{color:#fff;text-shadow:0 0 10px var(--nc)} .hack-node.err{background:rgba(255,36,66,.24);border-color:var(--red);box-shadow:0 0 24px rgba(255,36,66,.75);animation:hackShake .4s ease} .hack-node.err .hack-key{color:#fff;text-shadow:0 0 10px var(--red)} @keyframes hackShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}} /* Locked out while the sequence is playing back, so you can't queue taps. */ .hack-grid.locked .hack-node{cursor:default} .hack-grid.locked{opacity:.94} /* ── 🔌 OVERCLOCK PATH ── --pc is the board's neon, assigned by startOverclockPath() from the equipped Black Market colour; --pc-soft / --pc-glow are pre-mixed rgba of it, the same way Node Hacker mixes --nc, rather than color-mix(). */ .path-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;max-width:420px} .path-readout{width:100%;text-align:center;background:var(--s1);border:1px solid rgba(168,85,247,.28);border-radius:var(--r);padding:12px 14px} .path-status{font-family:var(--fd);font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--purple);text-shadow:0 0 10px rgba(168,85,247,.55);min-height:17px;line-height:1.4} .path-status.warn{color:var(--gold);text-shadow:0 0 10px rgba(255,215,0,.55)} /* The RECALIBRATING flash. steps(2) rather than a fade, because a clean blink reads as a fault light and a fade reads as a transition. */ .path-status.fail{color:var(--red);text-shadow:0 0 10px rgba(255,36,66,.6);animation:pathBlink .34s steps(2,end) 2} .path-status.win{color:var(--lime);text-shadow:0 0 12px rgba(57,255,20,.65)} @keyframes pathBlink{0%,100%{opacity:1}50%{opacity:.24}} /* How much of the circuit is carrying current. */ .path-meter{margin-top:10px;height:5px;border-radius:3px;background:var(--s2);border:1px solid var(--border);overflow:hidden} .path-meter-fill{height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,var(--pc,var(--purple)),#fff);box-shadow:0 0 10px var(--pc,var(--purple));transition:width .18s ease} /* The board is one square box with the grid and the trace stacked inside it, both pinned to its edges — that shared box is what lets the SVG be drawn in the grid's own pixel coordinates. */ .path-board{position:relative;width:min(100%,400px,52vh);aspect-ratio:1/1} .path-grid{position:absolute;inset:0;z-index:1;display:grid;grid-template-columns:repeat(5,1fr);gap:9px;touch-action:none} /* Above the nodes so the current reads as one continuous wire threading through them, and pointer-transparent so the nodes stay what you touch. */ .path-trace{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:visible} .trace-glow{fill:none;stroke:var(--pc,var(--purple));stroke-width:15;stroke-linecap:round;stroke-linejoin:round;opacity:.20;filter:blur(3px)} .trace-core{fill:none;stroke:var(--pc,var(--purple));stroke-width:5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px var(--pc,var(--purple)))} .path-node{ position:relative;display:flex;align-items:center;justify-content:center; background:var(--s2);border:1.5px solid var(--border);border-radius:10px; cursor:pointer;overflow:hidden; transition:background .12s ease,border-color .12s ease,box-shadow .12s ease,transform .12s ease } .path-node::before{ content:'';position:absolute;inset:0;border-radius:inherit; background:radial-gradient(circle at 50% 50%,var(--pc,var(--purple)),transparent 70%); opacity:.06;transition:opacity .12s ease } .path-dot{width:9px;height:9px;border-radius:50%;background:var(--dimmer);position:relative;transition:background .12s ease,box-shadow .12s ease,transform .12s ease} .path-glyph{font-family:var(--fd);font-size:.72rem;font-weight:900;letter-spacing:.06em;color:var(--dimmer);position:relative;transition:color .12s ease,text-shadow .12s ease} /* Node A — where the current has to start, so it is lit before anything else is. */ .path-node.start{border-color:var(--pc,var(--purple));background:var(--pc-soft,rgba(168,85,247,.2))} .path-node.start .path-glyph{color:var(--pc,var(--purple));text-shadow:0 0 10px var(--pc,var(--purple))} /* Dead code — dashed and struck through, because "you cannot route here" has to survive being read at a glance with five seconds left. */ .path-node.dead{background:rgba(255,36,66,.10);border-color:rgba(255,36,66,.34);border-style:dashed;cursor:not-allowed} .path-node.dead::before{background:radial-gradient(circle at 50% 50%,var(--red),transparent 70%);opacity:.05} .path-node.dead .path-glyph{color:rgba(255,36,66,.7)} .path-node.on{background:var(--pc-soft,rgba(168,85,247,.2));border-color:var(--pc,var(--purple));box-shadow:0 0 18px var(--pc-glow,rgba(168,85,247,.34)),inset 0 0 16px var(--pc-glow,rgba(168,85,247,.34))} .path-node.on::before{opacity:.34} .path-node.on .path-dot{background:#fff;box-shadow:0 0 10px var(--pc,var(--purple));transform:scale(1.15)} .path-node.on .path-glyph{color:#fff;text-shadow:0 0 10px var(--pc,var(--purple))} .path-node.head{box-shadow:0 0 26px var(--pc,var(--purple)),inset 0 0 18px var(--pc-glow,rgba(168,85,247,.34));transform:scale(1.06)} /* Scoped to real pointers — on a phone :hover latches after a tap and would leave half the board looking energised. */ @media (hover: hover){ .path-node:not(.dead):not(.on):hover{border-color:var(--pc,var(--purple));transform:translateY(-2px)} .path-node:not(.dead):not(.on):hover .path-dot{background:var(--dim)} } /* Invalid move: the whole board kicks red for the length of the lockout. */ .path-grid.recal{animation:pathRecal .5s ease} .path-grid.recal .path-node:not(.dead){border-color:rgba(255,36,66,.55);background:rgba(255,36,66,.10)} @keyframes pathRecal{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}60%{transform:translateX(5px)}} .path-grid.done{animation:pathDone .6s ease} @keyframes pathDone{0%,100%{transform:scale(1)}45%{transform:scale(1.035)}} /* ── 🎚️ FREQUENCY MODULATOR CONSOLE ── Matches #bb-deck's geometry: a full-width row under the board that tracks the board's own width rather than the screen's, so the sliders stay the same length as the scope they drive. */ #g-freq-ctl{display:flex;gap:14px;width:100%;max-width:max(var(--board-w,560px),560px);margin-top:10px;flex-shrink:0} .freq-slider{flex:1;min-width:0;background:var(--s1);border:1px solid var(--border);border-radius:var(--r);padding:9px 13px 12px} .freq-lbl{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-family:var(--fd);font-size:.56rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:8px} .freq-lbl em{font-style:normal;font-size:.74rem;color:var(--cyan);text-shadow:0 0 8px rgba(0,245,255,.5)} .freq-range{ -webkit-appearance:none;appearance:none;display:block;width:100%;height:6px; border-radius:3px;background:linear-gradient(90deg,rgba(0,245,255,.30),rgba(255,0,144,.30)); border:1px solid var(--border);outline:none;cursor:pointer } /* Both vendor thumbs, spelled out separately — a browser drops the WHOLE rule if it cannot parse one selector in the list, so these must not be grouped. */ .freq-range::-webkit-slider-thumb{ -webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%; background:var(--cyan);border:2px solid #fff;box-shadow:0 0 12px var(--cyan);cursor:pointer } .freq-range::-moz-range-thumb{ width:18px;height:18px;border-radius:50%; background:var(--cyan);border:2px solid #fff;box-shadow:0 0 12px var(--cyan);cursor:pointer } .freq-range:focus-visible{box-shadow:0 0 0 2px rgba(0,245,255,.45)} /* ── 🗂️ PACKET SORT RULE STRIP ── Same geometry as the two consoles above: a full-width row under the board, tracking the BOARD's width rather than the screen's. It carries the one fact the mission re-writes every twenty seconds, so it is loud on purpose — the flip has to be noticed peripherally, while the player's eyes are on a packet halfway down a conveyor. .flip is a one-shot pulse the mission adds and removes; the transition on the text is what makes a changed rule read as an EVENT rather than as a value that was always that. */ #g-sort-rule{ display:flex;align-items:center;gap:12px;width:100%; max-width:max(var(--board-w,560px),560px);margin-top:10px;flex-shrink:0; background:var(--s1);border:1px solid var(--border);border-radius:var(--r); padding:9px 14px;overflow:hidden } .sr-tag{ font-family:var(--fd);font-size:.55rem;font-weight:700;letter-spacing:.12em; text-transform:uppercase;color:var(--dim);border:1px solid var(--border); border-radius:999px;padding:3px 9px;flex-shrink:0;white-space:nowrap } .sr-txt{ flex:1;min-width:0;font-family:var(--fd);font-size:.86rem;font-weight:700; letter-spacing:.05em;text-transform:uppercase;color:var(--orange); text-shadow:0 0 12px rgba(255,102,0,.55); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; transition:color .18s ease,text-shadow .18s ease,transform .18s ease } .sr-next{ font-family:var(--fd);font-size:.62rem;font-weight:700;letter-spacing:.08em; color:var(--dim);flex-shrink:0;white-space:nowrap } #g-sort-rule.flip{border-color:var(--orange);box-shadow:0 0 22px rgba(255,102,0,.30)} #g-sort-rule.flip .sr-txt{color:#fff;text-shadow:0 0 18px var(--orange);transform:scale(1.04)} #g-sort-rule.warn .sr-next{color:var(--gold)} /* ── RESULTS SCREEN ── */ #results-screen .res-card{max-width:560px;width:100%;text-align:center} .res-emoji{font-size:4.5rem;display:block;margin-bottom:18px} .res-gname{font-family:var(--fd);font-size:.6rem;color:var(--dim);letter-spacing:.15em;text-transform:uppercase;margin-bottom:12px} .res-bonus{display:inline-block;font-family:var(--fd);font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 14px;border-radius:20px;margin:0 0 14px;border:1px solid var(--border);background:var(--s2);color:var(--dim)} .res-bonus.res-bonus-stable{border-color:#00ff66;color:#00ff66;background:rgba(0,255,102,.08);box-shadow:0 0 10px rgba(0,255,102,.35)} .res-bonus.res-bonus-overclocked{border-color:#ffcc00;color:#ffcc00;background:rgba(255,204,0,.08);box-shadow:0 0 10px rgba(255,204,0,.35)} .res-bonus.res-bonus-meltdown{border-color:#ff0033;color:#ff0033;background:rgba(255,0,51,.08);box-shadow:0 0 10px rgba(255,0,51,.35);animation:pulse 1.5s infinite} .res-pts{font-family:var(--fd);font-size:4.5rem;font-weight:900;line-height:1;background:linear-gradient(135deg,var(--gold),var(--orange));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:10px} .res-pts-lbl{color:var(--dim);font-weight:600;font-size:.8rem;margin-bottom:24px} .res-bd{background:var(--s2);border-radius:10px;padding:14px;margin-bottom:20px;text-align:left} .res-row{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--border);font-size:.85rem} .res-row:last-child{border:none} .res-row .rv{color:var(--cyan);font-weight:700} .res-btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center} /* Toast */ #toast{position:fixed;bottom:-60px;left:50%;transform:translateX(-50%);background:rgba(4,4,14,.9);border:1px solid var(--cyan);padding:12px 24px;border-radius:30px;font-family:var(--fd);font-size:.75rem;color:var(--cyan);z-index:9999;transition:bottom .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease;box-shadow:0 10px 30px rgba(0,245,255,.2)} #toast.show{bottom:30px} /* A toast is a message, never a control, so it never takes a click. At the bottom of a desktop screen it lands squarely on #photo-bar (z 9999 over 120): for the 3.6 seconds the "📸 PHOTO MODE" toast was up, RESUME, CAPTURE, HIDE HUD and RESET VIEW were all dead to the mouse. The phone layout below moves toasts to the top for the same reason; this covers every size at once. */ #toast{pointer-events:none} /* Tier-tinted variants used for SYSTEM STABILITY change messages */ #toast.toast-stable{border-color:#00ff66;color:#00ff66;box-shadow:0 10px 30px rgba(0,255,102,.25)} #toast.toast-overclocked{border-color:#ffcc00;color:#ffcc00;box-shadow:0 10px 30px rgba(255,204,0,.25)} #toast.toast-meltdown{border-color:#ff0033;color:#ff0033;box-shadow:0 10px 30px rgba(255,0,51,.25)} /* Countdown Overlay */ #cd-ov{position:fixed;inset:0;background:rgba(2,2,8,.85);backdrop-filter:blur(10px);z-index:999;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s ease} #cd-ov.show{opacity:1;pointer-events:all} #cd-num{font-family:var(--fd);font-size:7rem;font-weight:900;color:#fff} .cd-pop{animation:cdPop .6s ease forwards} @keyframes cdPop{0%{transform:scale(.4);opacity:0}20%{opacity:1}100%{transform:scale(1.4);opacity:0}} /* ══════════════════════════════════════════════════════════════ 💬 FEEDBACK TERMINAL z-index sits above .screen (10) and #cd-ov (999) but below #toast (9999), so confirmation toasts stay readable. ══════════════════════════════════════════════════════════════ */ /* ── HUB BAR: ONE ROW ── The controls used to drop onto a second row the moment the bar ran out of width — Exit landed underneath the others and the bar stood two rows tall for the sake of one button. Two things keep it to a single row. First, room: tighter padding on the bar, its buttons and the stat pills gives back ~90px, which already covers the ~26px the signed-in layout was short by. Second, an order of sacrifice. Save Account only appears for local and guest sessions, and with six buttons up there the bar can still come up ~120px short. Wrapping is a flex container's first answer to that, but it is the wrong one here: it costs a whole row to save a few pixels. nowrap makes the overflow get absorbed by shrinking instead, and the shrink factors below decide what gives — the username first (it is the only part whose width is unbounded by its own label, and it stays legible as an ellipsis), the wordmark only once the username has hit its floor, and the controls never. (Save Account and Feedback have since moved behind the ⚙️ Settings gear, so the bar is two buttons lighter; the order of sacrifice still holds.) */ .hub-bar{padding-left:16px;padding-right:16px} .hub-right{flex-wrap:nowrap;justify-content:flex-end;gap:8px;min-width:0} .hub-right>*{flex:0 0 auto} .hub-right .btn{padding-left:10px;padding-right:10px} .hub-pts,.hub-credits{padding-left:10px;padding-right:10px} .hub-logo-sm{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* shrink:100 — drained almost to the floor before the wordmark gives anything. */ .hub-uname{flex:0 100 auto;min-width:44px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* The row cannot hold this many controls however hard it shrinks, and nowrap pushes the surplus out through the border instead — leftwards, because the row is justified to the end, so the overflow lands ON the wordmark rather than off the edge where it would at least be visible as a mistake. This used to be gated at max-width:900px. That was the wrong axis: the bar is capped at 1060px, so how much room the controls have barely changes above that — a guest session (which adds the GUEST tag and the long SAVE PROGRESS ONLINE button) overflowed by ~110px at 1440px just as it did at 1024px, and the media query never fired because the VIEWPORT was wide. The number of controls is what varies, not the width available to them. Unconditional wrapping fixes every width at once, and costs nothing at the sizes that already fit: flex-wrap only ever engages when the content genuinely does not fit, which is exactly the condition we want it on. */ .hub-right{flex-wrap:wrap;row-gap:8px} .btn-feedback{color:var(--lime);border-color:rgba(57,255,20,.35)} .btn-feedback:hover{background:rgba(57,255,20,.14);border-color:var(--lime);box-shadow:0 0 18px rgba(57,255,20,.22)} /* ── 🔊 AUDIO TOGGLE ── One button, three states: effects+music → effects only → silent. The icon carries the state, the colour makes "you have muted something" readable at a glance without reading the glyph. Square-ish so it sits next to ⛶ evenly. */ .btn-sound{padding:7px 12px;color:var(--cyan);border-color:rgba(0,245,255,.35);font-size:.85rem;line-height:1} .btn-sound:hover{background:rgba(0,245,255,.14);border-color:var(--cyan);box-shadow:0 0 18px rgba(0,245,255,.22)} .btn-sound.snd-partial{color:var(--gold);border-color:rgba(255,215,0,.35)} .btn-sound.snd-partial:hover{background:rgba(255,215,0,.14);border-color:var(--gold);box-shadow:0 0 18px rgba(255,215,0,.22)} .btn-sound.snd-off{color:var(--dim);border-color:var(--border);opacity:.72} .btn-sound.snd-off:hover{background:rgba(255,255,255,.1);border-color:var(--border2);box-shadow:none} .fb-overlay{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(2,2,10,.82);backdrop-filter:blur(7px);opacity:0;pointer-events:none;transition:opacity .22s ease} /* 📴 The offline banner is position:fixed at bottom:0 with z-index 9000 — above every overlay — so a full-height modal ran its last ~60px underneath it. That is invisible on the overlays whose bottom row is just text, and not invisible at all on the briefing, whose bottom row is CLOSE and PLAY IT. The overlay gives the bar its own room instead of the modal having to know about it. */ html.is-offline .fb-overlay{padding-bottom:calc(20px + 3.4rem + env(safe-area-inset-bottom, 0px))} .fb-overlay.show{opacity:1;pointer-events:auto} .fb-modal{position:relative;width:100%;max-width:470px;max-height:90vh;overflow-y:auto;padding:28px 26px 26px;border:1px solid rgba(57,255,20,.4);border-radius:var(--rl);background:linear-gradient(160deg,rgba(11,14,30,.97),rgba(4,4,14,.99));box-shadow:0 0 70px rgba(57,255,20,.13),inset 0 0 0 1px rgba(255,255,255,.03);transform:translateY(18px) scale(.97);transition:transform .26s cubic-bezier(.2,.9,.3,1.25)} .fb-overlay.show .fb-modal{transform:none} /* Neon scan-line across the top edge */ .fb-modal::before{content:'';position:absolute;top:0;left:12%;right:12%;height:1px;background:linear-gradient(90deg,transparent,var(--lime),transparent);box-shadow:0 0 12px var(--lime)} /* z-index is load-bearing. The ✕ comes BEFORE .fb-head in every modal, and the title is a full-width block under it. In the 3D interface the title carries a filter, which makes it a stacking context painted in DOM order with the positioned ✕ — later, so on top, and hit-testing on top: the ✕ could not be clicked in any modal until it was lifted explicitly. */ .fb-close{position:absolute;z-index:2;top:14px;right:14px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:var(--s2);border:1px solid var(--border);border-radius:8px;color:var(--dim);font-size:.8rem;cursor:pointer;transition:all .2s} .fb-close:hover{color:var(--pink);border-color:var(--pink);background:rgba(255,0,144,.1)} .fb-head{text-align:center;margin-bottom:28px} .fb-title{font-family:var(--fd);font-size:.95rem;font-weight:900;letter-spacing:.1em;background:linear-gradient(90deg,var(--lime),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .fb-sub{font-family:var(--fd);font-size:.5rem;letter-spacing:.26em;text-transform:uppercase;color:var(--dimmer);margin-top:13px} .fb-opt{font-size:.85em;color:var(--dimmer);letter-spacing:.08em;text-transform:none} .fb-select{appearance:none;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:40px} /* The one part of a s, whose open list is an OS window no stylesheet can paint — a flat grey list in 2D, and the one flat object left in the 3D party flow. */ .pt-missions{display:flex;flex-direction:column;gap:8px} /* --acc is the mission's accent, from the palette NAME the hub card carries in data-c (partyCardInfo). var(--cyan) and friends rather than hex, so the colour-blind palette re-points these exactly as it does the hub grid. */ .pt-slot,.ptp-card{--acc:var(--cyan)} .pt-slot[data-c="pink"],.ptp-card[data-c="pink"]{--acc:var(--pink)} .pt-slot[data-c="lime"],.ptp-card[data-c="lime"]{--acc:var(--lime)} .pt-slot[data-c="gold"],.ptp-card[data-c="gold"]{--acc:var(--gold)} .pt-slot[data-c="purple"],.ptp-card[data-c="purple"]{--acc:var(--purple)} .pt-slot[data-c="orange"],.ptp-card[data-c="orange"]{--acc:var(--orange)} .pt-slot[data-c="red"],.ptp-card[data-c="red"]{--acc:var(--red)} .pt-slot{ position:relative;display:grid;grid-template-columns:24px 40px minmax(0,1fr) auto;align-items:center;gap:12px; width:100%;padding:11px 14px 11px 10px;text-align:left;cursor:pointer; font:inherit;color:var(--text); background:linear-gradient(90deg,color-mix(in srgb,var(--acc) 11%,transparent),transparent 58%),var(--s1); border:1px solid var(--border);border-radius:var(--r); box-shadow:inset 3px 0 0 var(--acc); transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease } /* The card is the only hit target. Its parts are lifted off the face in the 3D chrome, and a lifted child in a preserve-3d parent hit-tests in front of anything at Z 0 — the ⓘ badge's bug on the hub cards. None has a handler. */ .pt-slot > *,.ptp-card > *{pointer-events:none} .pt-slot-n{width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%; border:1px solid color-mix(in srgb,var(--gold) 50%,transparent);background:color-mix(in srgb,var(--gold) 7%,transparent); font-family:var(--fd);font-size:.6rem;font-weight:700;color:var(--gold)} .pt-slot-ico{font-size:1.75rem;line-height:1;text-align:center; filter:drop-shadow(0 0 10px color-mix(in srgb,var(--acc) 38%,transparent))} .pt-slot-txt{min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:5px 9px} /* A fixed line box for the name row, taller than the SAME BOARD chip: left to size itself, the one slot carrying the chip came out 4px taller. */ .pt-slot-name{font-family:var(--fd);font-size:.64rem;font-weight:700;letter-spacing:.08em;line-height:18px;color:var(--acc)} .pt-slot-desc{flex-basis:100%;min-width:0;font-size:.8rem;color:var(--dim); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pt-same{font-style:normal;white-space:nowrap;line-height:1.2; font-family:var(--fd);font-size:.44rem;font-weight:700;letter-spacing:.14em; color:var(--lime);background:color-mix(in srgb,var(--lime) 8%,transparent);border:1px solid currentColor; border-radius:20px;padding:2px 8px} .pt-slot-go{font-family:var(--fd);font-size:.48rem;font-weight:700;letter-spacing:.14em;color:var(--dim); padding:6px 10px;border:1px solid var(--border);border-radius:20px; transition:color .2s ease,border-color .2s ease,background-color .2s ease} /* Hover is gated on a real pointer: a tap latches :hover on most phones, and the plate stayed lifted and lit long after the finger had moved on. */ @media (hover:hover){ .pt-slot:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--acc) 70%,transparent); box-shadow:inset 3px 0 0 var(--acc),0 8px 26px -8px color-mix(in srgb,var(--acc) 45%,transparent)} .pt-slot:hover .pt-slot-go{color:var(--acc);border-color:var(--acc);background:color-mix(in srgb,var(--acc) 10%,transparent)} } .pt-slot:active{transform:scale(.985)} .pt-slot:focus-visible{outline:2px solid var(--acc);outline-offset:3px} /* The ring a pick leaves on the slot it changed (both of them, on a swap). An overlay that fades, NOT an animated box-shadow: an animation on box-shadow replaces the whole stack, 3D walls included, while it runs. */ .pt-slot::after{content:'';position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0; border:1px solid var(--acc);box-shadow:0 0 24px -2px var(--acc),inset 0 0 18px -8px var(--acc)} .pt-slot.pt-flash::after{animation:ptFlash 1.1s ease-out} @keyframes ptFlash{0%,30%{opacity:1}100%{opacity:0}} html.reduced-motion .pt-slot.pt-flash::after{animation:none} /* ── the mission picker (#ptpick-overlay) ── A second overlay standing ON the setup sheet, so it goes above the shell's z-index. Its backdrop is lighter and less blurred than the shell's: the sheet is already sitting on a dimmed, blurred page, and the full treatment again is the doubled dim the Settings hand-off steps aside to avoid — this keeps the party visibly underneath the thing being chosen for it. */ #ptpick-overlay{z-index:2050;background:rgba(2,2,10,.58);backdrop-filter:blur(3px)} .ptpick-tint .fb-modal{max-width:780px;border-color:rgba(255,215,0,.42);box-shadow:0 0 70px rgba(255,215,0,.12),inset 0 0 0 1px rgba(255,255,255,.03)} .ptpick-tint .fb-modal::before{background:linear-gradient(90deg,transparent,#ffd700,#ff0090,transparent);box-shadow:0 0 12px #ffd700} .ptpick-tint .fb-title{background:linear-gradient(90deg,#ffd700,#ff0090);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .ptpick-tint .fb-head{margin-bottom:22px} /* The rows are further apart than the columns: a round tab stands 9px above its card, and in the 3D chrome the card above has an 8px wall under it. */ .ptp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:20px 12px} /* The hub card, at picker scale: art, name in its accent, the hook, the cap. */ .ptp-card{ position:relative;display:flex;flex-direction:column;align-items:center;text-align:center; padding:22px 12px 14px;cursor:pointer;font:inherit;color:var(--text); background:var(--s1);border:1px solid var(--border);border-radius:var(--rl); transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease } .ptp-ico{font-size:2.2rem;line-height:1;margin-bottom:11px} .ptp-name{font-family:var(--fd);font-size:.56rem;font-weight:700;letter-spacing:.08em;line-height:1.5;color:var(--acc);margin-bottom:7px} .ptp-desc{font-size:.74rem;line-height:1.4;color:var(--dim);margin-bottom:12px; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .ptp-pills{margin-top:auto;display:flex;flex-wrap:wrap;justify-content:center;gap:5px} .ptp-pts,.ptp-same{padding:3px 9px;border-radius:20px;border:1px solid;white-space:nowrap; font-family:var(--fd);font-size:.44rem;font-weight:700;letter-spacing:.06em} .ptp-pts{color:var(--acc);border-color:var(--acc);background:color-mix(in srgb,var(--acc) 6%,transparent)} /* Borders and washes are mixed from the same variable as the text, so the colour-blind palette moves all three together. */ .ptp-same{color:var(--lime);border-color:color-mix(in srgb,var(--lime) 60%,transparent);background:color-mix(in srgb,var(--lime) 7%,transparent)} /* Which round a card is in: a tab on the top edge. In a corner it ran into the centred art. Opaque, because it sits across the card's border line. */ .ptp-badge{position:absolute;top:-9px;left:50%;transform:translateX(-50%);padding:3px 9px;border-radius:20px;white-space:nowrap; font-family:var(--fd);font-size:.42rem;font-weight:900;letter-spacing:.1em;line-height:1.2} /* This round's mission now: lit in its own accent, the way the pass card is. */ .ptp-card.on{border-color:var(--acc); background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--acc) 18%,transparent),transparent 70%),var(--s2); box-shadow:0 0 0 1px var(--acc),0 0 30px -8px var(--acc)} .ptp-card.on .ptp-badge{color:#05060f;background:var(--acc);box-shadow:0 0 12px -2px var(--acc)} /* Another round's mission: badged with that round, its print set back, still pickable (it swaps). The PRINT dims, not the card — opacity on the card would dim the tab too, and in the 3D chrome opacity is a grouping property that forces the card flat and drops its raised art onto the face. */ .ptp-card.taken > :not(.ptp-badge){opacity:.5;transition:opacity .2s ease} .ptp-card.taken .ptp-badge{color:var(--gold);border:1px solid color-mix(in srgb,var(--gold) 60%,transparent);background:#0b0e1e} @media (hover:hover){ .ptp-card:hover{transform:translateY(-4px) scale(1.02);border-color:var(--acc); box-shadow:0 8px 30px color-mix(in srgb,var(--acc) 22%,transparent)} .ptp-card.on:hover{box-shadow:0 0 0 1px var(--acc),0 8px 30px color-mix(in srgb,var(--acc) 32%,transparent)} .ptp-card.taken:hover > *{opacity:1} } .ptp-card:active{transform:scale(.97)} .ptp-card:focus-visible{outline:2px solid var(--acc);outline-offset:3px} .ptp-card.taken:focus-visible > *{opacity:1} .ptp-foot{margin-top:18px;display:flex;flex-direction:column;gap:4px; font-size:.78rem;line-height:1.5;color:var(--dimmer);text-align:center} /* the legend's ⇄, drawn as the taken tab is */ .ptp-key{display:inline-block;padding:0 7px;border-radius:20px;font-size:.7rem;line-height:1.5; color:var(--gold);border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);background:color-mix(in srgb,var(--gold) 8%,transparent)} .pt-note{font-size:.8rem;line-height:1.5;color:var(--dim);background:var(--s2);border:1px solid var(--border);border-radius:10px;padding:10px 12px} .pt-note b{color:var(--text)} /* the pass-the-device card */ .pt-turn{text-align:center;padding:18px 14px;border-radius:14px;border:1px solid var(--pc); background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--pc) 16%,transparent),transparent 70%),var(--s2); box-shadow:0 0 30px -12px var(--pc)} .pt-pass{font-family:var(--fd);font-size:.54rem;letter-spacing:.2em;color:var(--dim)} .pt-who{font-family:var(--fd);font-size:1.6rem;font-weight:900;letter-spacing:.06em;color:var(--pc);margin:6px 0 10px; filter:drop-shadow(0 0 10px var(--pc));word-break:break-word} .pt-what{font-family:var(--fd);font-size:.72rem;font-weight:700;letter-spacing:.1em;color:#fff} .pt-what em{font-style:normal;color:var(--lime);font-size:.6rem} .pt-how{font-size:.82rem;line-height:1.5;color:var(--dim);margin:8px 0 14px} /* the scoreboard */ .pt-board{display:flex;flex-direction:column;gap:5px} .pt-row,.pt-heads{display:grid;grid-template-columns:34px 12px 1fr repeat(3,56px) 64px;align-items:center;gap:8px;padding:7px 10px;border-radius:9px} .pt-row{background:var(--s2);border:1px solid var(--border)} .pt-row.on{border-color:var(--pc);box-shadow:0 0 14px -6px var(--pc)} .pt-heads{padding-top:0;padding-bottom:0;border:1px solid transparent; font-family:var(--fd);font-size:.5rem;letter-spacing:.1em;color:var(--dimmer);text-align:right} /* These emoji ARE the column labels, so they are sized to be read rather than to match the TOTAL caption beside them. */ .pt-heads span[title]{font-size:.92rem;line-height:1} .pt-rank{font-family:var(--fd);font-size:.62rem;color:var(--dim)} .pt-rname{font-family:var(--fd);font-size:.58rem;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pt-cell{font-family:var(--fd);font-size:.56rem;color:var(--dim);text-align:right} .pt-cell.cur{color:var(--gold)} .pt-total{font-family:var(--fd);font-size:.66rem;font-weight:900;color:var(--cyan);text-align:right} .pt-end{align-self:center;margin-top:4px} /* the winner */ .pt-win{text-align:center;padding:10px 0 6px} .pt-crown{font-size:2.8rem;animation:ptCrown 1.4s cubic-bezier(.2,1.4,.4,1) both} @keyframes ptCrown{from{transform:translateY(-30px) scale(.4);opacity:0}to{transform:none;opacity:1}} html.reduced-motion .pt-crown{animation:none} .pt-wname{font-family:var(--fd);font-size:1.2rem;font-weight:900;letter-spacing:.08em;color:var(--pc);filter:drop-shadow(0 0 12px var(--pc))} .pt-wpts{font-family:var(--fd);font-size:.8rem;color:var(--gold);margin-top:4px} .pt-final-btns{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:6px} @media (max-width:520px){ .pt-row,.pt-heads{grid-template-columns:26px 10px 1fr repeat(3,40px) 50px;gap:5px;padding:6px 7px} .pt-row .pt-dot{width:10px;height:10px} /* 12px overran its 10px track */ .pt-heads span[title]{font-size:.8rem} .pt-cell{font-size:.48rem} .pt-who{font-size:1.2rem} /* REMATCH + NEW MISSIONS do not fit one row here, and wrapping left the primary stranded alone above the other two. */ .pt-final-btns{flex-direction:column;align-items:stretch} .pt-final-btns .btn{width:100%} .pt-slot{grid-template-columns:22px 32px minmax(0,1fr) auto;gap:9px;padding:10px 10px 10px 8px} .pt-slot-ico{font-size:1.45rem} .pt-slot-name{font-size:.56rem} .pt-slot-desc{font-size:.74rem} .pt-slot-go{padding:5px 8px;font-size:.42rem;letter-spacing:.1em} /* auto-fill's 158px floor leaves ONE column on a 375px phone; two it is. */ .ptp-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 10px} .ptp-card{padding:22px 8px 12px} .ptp-ico{font-size:1.8rem;margin-bottom:8px} .ptp-name{font-size:.5rem} .ptp-desc{font-size:.7rem} } /* ── 🧊 in the 3D chrome: the board is a stack of plates like the leaderboard's, and the pass card is the panel the GO button stands on. The party sheet was the one screen left flat inside an extruded modal. ── */ body.mode-3d .pt-row, body.mode-3d .pt-turn, body.mode-3d .pt-note{transform-style:preserve-3d} body.mode-3d .pt-row{ --wall:#121829;--wallb:#080b16; background-image:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0) 60%); box-shadow: 0 1px 0 var(--wall),0 2px 0 var(--wall),0 3px 0 var(--wallb), 0 7px 10px -6px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.1) } /* The leader's plate takes the gold body the leaderboard's #1 has. It is the row after the heading — not :first-of-type, which .pt-heads owns. */ body.mode-3d .pt-heads + .pt-row{--wall:#6b5600;--wallb:#3a2f00} /* Whose turn it is stands one wall taller and keeps its accent glow; same specificity as the leader rule, so it comes last and wins when they are the same player. */ body.mode-3d .pt-row.on{ --wall:#1b2340;--wallb:#0a0f1e; box-shadow: 0 1px 0 var(--wall),0 2px 0 var(--wall),0 3px 0 var(--wall),0 4px 0 var(--wallb), 0 5px 0 var(--wallb),0 12px 16px -8px rgba(0,0,0,.85), 0 0 20px -7px var(--pc), inset 0 1px 0 rgba(255,255,255,.14) } /* .pt-turn paints its face with a radial tint through the background shorthand, so it gets the body only — a background-image here would wipe it. */ body.mode-3d .pt-turn{ box-shadow: 0 1px 0 #10162a,0 2px 0 #10162a,0 3px 0 #070a14,0 4px 0 #070a14, 0 16px 24px -12px rgba(0,0,0,.85), 0 0 30px -12px var(--pc), inset 0 1px 0 rgba(255,255,255,.11),inset 0 -1px 0 rgba(0,0,0,.5) } body.mode-3d .pt-note{ background-image:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 70%); box-shadow: 0 1px 0 #10162a,0 2px 0 #10162a,0 3px 0 #070a14,0 4px 0 #070a14, 0 14px 22px -12px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.11),inset 0 -1px 0 rgba(0,0,0,.5) } body.mode-3d .pt-del{ box-shadow:0 1px 0 #171e33,0 2px 0 #0a0e1a,0 4px 6px -3px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.18); transition:transform .14s var(--pop-ease),box-shadow .14s var(--pop-ease),color .14s,border-color .14s } body.mode-3d .pt-del:hover{transform:perspective(500px) translateZ(6px) scale(1.06)} body.mode-3d .pt-del:active{transform:translateY(2px)} /* The mission slots and the picker's cards are plates like the hub's cards: the same wall stack, lip and contact shade, lifted on hover, driven down on press, and tilted toward the pointer — .pt-slot and .ptp-card are in the tilt registry in app.js (SEL); a class missing there never gets --tx/--ty. */ body.mode-3d .pt-slot, body.mode-3d .ptp-card{ --wall:#141a2c;--wallb:#070a14;--tx:0deg;--ty:0deg; transform-style:preserve-3d; transform-origin:50% 60%; transition:transform .2s var(--pop-ease),box-shadow .2s var(--pop-ease),border-color .2s } /* A slot is a wide, short plate, so it takes a fraction of the tilt a card does: at the full nine degrees its far end swung ~40px out of the sheet. Its face keeps the 2D accent wash, restated WITH the specular in one background shorthand — a background-image alone would wipe the wash, the .pt-turn trap above. */ body.mode-3d .pt-slot{ background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0) 55%), linear-gradient(90deg,color-mix(in srgb,var(--acc) 12%,transparent),transparent 58%),var(--s1); transform:perspective(var(--eye)) translateZ(0) rotateX(calc(var(--tx) * .5)) rotateY(calc(var(--ty) * .15)); box-shadow: inset 3px 0 0 var(--acc), 0 1px 0 var(--wall),0 2px 0 var(--wall),0 3px 0 var(--wall), 0 4px 0 var(--wallb),0 5px 0 var(--wallb),0 6px 0 var(--wallb), 0 14px 20px -10px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.13),inset 0 -1px 0 rgba(0,0,0,.5) } body.mode-3d .ptp-card{ overflow:visible; /* anything else flattens the card — see .game-card */ background-image:linear-gradient(170deg,rgba(255,255,255,.07),rgba(255,255,255,0) 46%); transform:perspective(var(--eye)) translateZ(0) rotateX(var(--tx)) rotateY(var(--ty)); box-shadow: 0 1px 0 var(--wall),0 2px 0 var(--wall),0 3px 0 var(--wall),0 4px 0 var(--wall), 0 5px 0 var(--wallb),0 6px 0 var(--wallb),0 7px 0 var(--wallb),0 8px 0 var(--wallb), 0 18px 26px -12px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(0,0,0,.5) } /* This round's mission stands in its own colour — walls mixed from its accent, the way .mode-card.on takes cyan ones — a step higher, and lit. Its 2D face is a radial wash through the shorthand, restated with the specular. */ body.mode-3d .ptp-card.on{ --wall:color-mix(in srgb,var(--acc) 42%,#070a14);--wallb:color-mix(in srgb,var(--acc) 22%,#05070e); background:linear-gradient(170deg,rgba(255,255,255,.09),rgba(255,255,255,0) 46%), radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--acc) 18%,transparent),transparent 70%),var(--s2); transform:perspective(var(--eye)) translateZ(10px) rotateX(var(--tx)) rotateY(var(--ty)); box-shadow: 0 1px 0 var(--wall),0 2px 0 var(--wall),0 3px 0 var(--wall),0 4px 0 var(--wall), 0 5px 0 var(--wallb),0 6px 0 var(--wallb),0 7px 0 var(--wallb),0 8px 0 var(--wallb), 0 22px 30px -12px rgba(0,0,0,.9), 0 0 34px -8px var(--acc), inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.5) } @media (hover:hover){ body.mode-3d .pt-slot:hover{ transform:perspective(var(--eye)) translateZ(12px) rotateX(calc(var(--tx) * .5)) rotateY(calc(var(--ty) * .15)); box-shadow: inset 3px 0 0 var(--acc), 0 1px 0 var(--wall),0 2px 0 var(--wall),0 3px 0 var(--wall),0 4px 0 var(--wall), 0 5px 0 var(--wallb),0 6px 0 var(--wallb),0 7px 0 var(--wallb),0 8px 0 var(--wallb),0 9px 0 var(--wallb), 0 26px 32px -16px rgba(0,0,0,.9), 0 0 30px -10px var(--acc), inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(0,0,0,.5) } body.mode-3d .ptp-card:hover, body.mode-3d .ptp-card.on:hover{ transform:perspective(var(--eye)) translateZ(28px) rotateX(var(--tx)) rotateY(var(--ty)); box-shadow: 0 1px 0 var(--wall),0 2px 0 var(--wall),0 3px 0 var(--wall),0 4px 0 var(--wall), 0 5px 0 var(--wall),0 6px 0 var(--wallb),0 7px 0 var(--wallb),0 8px 0 var(--wallb), 0 9px 0 var(--wallb),0 10px 0 var(--wallb),0 11px 0 var(--wallb),0 12px 0 var(--wallb), 0 13px 0 var(--wallb),0 14px 0 var(--wallb), 0 40px 50px -18px rgba(0,0,0,.92), 0 0 40px -10px var(--acc), inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(0,0,0,.5) } } body.mode-3d .pt-slot:active{ transform:perspective(var(--eye)) translateZ(1px) translateY(4px); box-shadow:inset 3px 0 0 var(--acc),0 1px 0 var(--wall),0 2px 0 var(--wallb), 0 6px 10px -5px rgba(0,0,0,.8),inset 0 3px 8px rgba(0,0,0,.5) } body.mode-3d .ptp-card:active, body.mode-3d .ptp-card.on:active{ transform:perspective(var(--eye)) translateZ(2px) translateY(4px); box-shadow:0 1px 0 var(--wall),0 2px 0 var(--wallb),0 6px 10px -5px rgba(0,0,0,.8), inset 0 3px 8px rgba(0,0,0,.5) } /* Parts stand off the face, the art furthest — the parallax is the depth cue. */ body.mode-3d .pt-slot-ico{transform:translateZ(18px)} body.mode-3d .pt-slot-n, body.mode-3d .pt-slot-txt, body.mode-3d .pt-slot-go{transform:translateZ(8px)} body.mode-3d .ptp-ico{transform:translateZ(24px)} body.mode-3d .ptp-badge{transform:translateX(-50%) translateZ(16px)} body.mode-3d .ptp-name, body.mode-3d .ptp-desc, body.mode-3d .ptp-pills{transform:translateZ(9px)} /* The modal slab's walls, restated with the picker's gold glow: the tint rule above would otherwise leave this the one flat modal in the 3D interface. */ body.mode-3d .ptpick-tint .fb-modal{ box-shadow: 0 2px 0 #131a2e,0 4px 0 #131a2e,0 6px 0 #080c18,0 8px 0 #080c18,0 10px 0 #05070f, 0 44px 70px -22px rgba(0,0,0,.95),0 0 60px -10px rgba(255,215,0,.26), inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.6); } @media (max-width:560px){ body.mode-3d .pt-slot-ico{transform:translateZ(12px)} body.mode-3d .ptp-ico{transform:translateZ(16px)} } /* Reduced motion (html.reduced-motion follows the OS until the player sets it): the solids stay, the travel goes. Hover changes the light, not the position — and the pointer tilt stops too, which the parallax code cannot do itself: it reads the OS preference once, at load. */ html.reduced-motion body:not(.mode-3d) .pt-slot:hover, html.reduced-motion body:not(.mode-3d) .ptp-card:hover{transform:none} html.reduced-motion body.mode-3d .pt-slot:hover{transform:perspective(var(--eye)) translateZ(0)} html.reduced-motion body.mode-3d .ptp-card:hover{transform:perspective(var(--eye)) translateZ(0)} html.reduced-motion body.mode-3d .ptp-card.on:hover{transform:perspective(var(--eye)) translateZ(10px)} html.reduced-motion .pt-slot, html.reduced-motion .ptp-card{--tx:0deg !important;--ty:0deg !important} /* ══════════════════════════════════════════════════════════════ § v48 — 🌍 WORLD THEMES ══════════════════════════════════════════════════════════════ */ .shop-sky{ width:100%;height:74px;border-radius:10px;margin-bottom:10px;position:relative;overflow:hidden; border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 -18px 30px rgba(0,0,0,.45) } .shop-sky span{position:absolute;right:10px;bottom:6px;font-size:1.7rem;filter:drop-shadow(0 0 8px rgba(0,0,0,.6))} /* A horizon glow line, so the sunset reads as a sunset rather than a gradient. */ .shop-sky::after{content:'';position:absolute;left:0;right:0;top:62%;height:2px;background:rgba(255,255,255,.35);filter:blur(1px)} .wld-note{border-color:rgba(0,245,255,.4)!important;background:rgba(0,245,255,.05)!important;color:var(--cyan)!important} /* ══════════════════════════════════════════════════════════════ § v49 — 📖 CAMPAIGN · ROOT ACCESS Terminal green and gold: ARC's console. Same furniture as the party and anomaly screens (.mp-banner, .fb-overlay/.fb-modal); only the accents and the chapter map are new. Colours are palette vars, so cb-safe repoints them. ══════════════════════════════════════════════════════════════ */ .cp-banner{border-color:rgba(57,255,20,.42);background:linear-gradient(120deg,rgba(57,255,20,.11),rgba(0,245,255,.07))} .cp-banner .mp-banner-title{background:linear-gradient(90deg,var(--lime),var(--cyan) 60%,var(--gold));-webkit-background-clip:text;background-clip:text} .campaign-tint .fb-modal,.campaign-modal{max-width:620px} .campaign-tint .fb-modal{border-color:rgba(57,255,20,.45);box-shadow:0 0 70px rgba(57,255,20,.14),inset 0 0 0 1px rgba(255,255,255,.03)} .campaign-tint .fb-head{margin-bottom:18px} #campaign-body{display:flex;flex-direction:column;text-align:left} /* ── the selected chapter: ARC's briefing ── */ .cp-detail{ position:relative;overflow:hidden;padding:16px 16px 14px;margin-bottom:4px;border-radius:14px; border:1px solid rgba(57,255,20,.34); background:linear-gradient(160deg,rgba(57,255,20,.08),rgba(0,245,255,.03) 60%),var(--s1); box-shadow:0 0 28px -14px var(--lime) } /* CRT scanlines, faint enough to read as texture rather than noise. */ .cp-detail::before{ content:'';position:absolute;inset:0;pointer-events:none; background:repeating-linear-gradient(0deg,rgba(57,255,20,.035) 0 1px,transparent 1px 3px) } .cp-detail > *{position:relative} .cp-detail.locked{border-color:var(--border);background:var(--s1);box-shadow:none} .cp-detail.locked .cp-title,.cp-detail.locked .cp-story{opacity:.72} .cp-kicker{font-family:var(--fd);font-size:.5rem;font-weight:700;letter-spacing:.2em;line-height:1.6;color:var(--lime)} .cp-detail.locked .cp-kicker{color:var(--dim)} .cp-title{font-family:var(--fd);font-size:1.2rem;font-weight:900;letter-spacing:.06em;color:#fff;margin:7px 0 11px;overflow-wrap:anywhere} .cp-story{ font-size:.95rem;line-height:1.55;color:rgba(255,255,255,.82);margin-bottom:12px; padding-left:12px;border-left:2px solid rgba(57,255,20,.5) } .cp-story em{ font-style:normal;font-family:var(--fd);font-size:.52rem;font-weight:700;letter-spacing:.14em; color:var(--lime);margin-left:4px;white-space:nowrap } .cp-facts{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px} .cp-facts span{ font-family:var(--fd);font-size:.5rem;font-weight:700;letter-spacing:.08em;line-height:1.3; padding:5px 10px;border-radius:999px;border:1px solid var(--border); background:rgba(255,255,255,.05);color:var(--text) } .cp-targets{font-family:var(--fd);font-size:.56rem;letter-spacing:.05em;line-height:1.7;color:var(--gold);text-align:center;text-wrap:balance;margin:4px 0 2px} .cp-have{font-size:2.1rem;line-height:1.1;letter-spacing:.18em;color:var(--gold);text-align:center;text-shadow:0 0 16px rgba(255,215,0,.45);margin:2px 0 12px} .cp-lock{ font-family:var(--fd);font-size:.58rem;font-weight:700;letter-spacing:.1em;line-height:1.6;text-align:center; color:var(--orange);padding:11px 12px;border-radius:10px; border:1px dashed rgba(255,102,0,.45);background:rgba(255,102,0,.06) } /* ── the map: four acts of five ── */ .cp-act{ display:flex;align-items:baseline;justify-content:space-between;gap:10px; margin:18px 2px 8px;padding-bottom:6px;border-bottom:1px solid rgba(57,255,20,.22); font-family:var(--fd);font-size:.58rem;font-weight:700;letter-spacing:.16em;color:var(--lime) } .cp-act em{font-style:normal;letter-spacing:.06em;color:var(--gold);white-space:nowrap} .cp-act.shut{color:var(--dimmer);border-bottom-color:var(--border)} .cp-act.shut em{color:var(--dim)} .cp-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px} .cp-node{ position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0; padding:12px 4px 8px;border-radius:12px;border:1px solid var(--border);background:var(--s1); color:var(--text);font-family:var(--fb);cursor:pointer; transition:border-color .16s,background .16s,transform .16s } .cp-node:hover{border-color:var(--lime);transform:translateY(-2px)} .cp-node:focus-visible{outline:2px solid var(--cyan);outline-offset:2px} .cp-node.done{border-color:rgba(57,255,20,.42)} .cp-node.locked{border-style:dashed} .cp-node.locked:hover{border-color:var(--border2)} .cp-node.sel{border-style:solid;border-color:var(--gold);background:rgba(255,215,0,.08);box-shadow:0 0 16px -6px var(--gold)} .cp-n{position:absolute;top:5px;left:8px;font-family:var(--fd);font-size:.5rem;font-weight:700;color:var(--dim)} .cp-node.done .cp-n{color:var(--lime)} .cp-ico{font-size:1.5rem;line-height:1;margin-top:6px} .cp-nt{ font-family:var(--fd);font-size:.5rem;font-weight:700;letter-spacing:.04em;line-height:1.3; text-align:center;min-height:2.6em;overflow-wrap:anywhere;padding:0 2px } .cp-st{font-size:.74rem;letter-spacing:.06em;color:var(--gold)} .cp-node:not(.done) .cp-st{color:var(--dimmer)} .cp-node.locked .cp-ico,.cp-node.locked .cp-nt,.cp-node.locked .cp-st{opacity:.5} @media (max-width:520px){ .cp-grid{grid-template-columns:repeat(3,minmax(0,1fr))} .campaign-tint .fb-modal{padding:24px 16px 20px} .cp-title{font-size:1.02rem} .cp-have{font-size:1.8rem} } /* ── 🧊 in the 3D chrome: each chapter is a plate, like a leaderboard row ── */ body.mode-3d .cp-node{ --wall:#121829;--wallb:#080b16; background-image:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0) 60%); transform:perspective(760px) translateZ(0); transition:transform .16s var(--pop-ease),box-shadow .16s var(--pop-ease),border-color .16s; box-shadow: 0 1px 0 var(--wall),0 2px 0 var(--wall),0 3px 0 var(--wallb), 0 7px 10px -6px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.1) } body.mode-3d .cp-node:hover{ transform:perspective(760px) translateZ(8px) translateY(-2px); box-shadow: 0 1px 0 var(--wall),0 2px 0 var(--wall),0 3px 0 var(--wall),0 4px 0 var(--wallb), 0 5px 0 var(--wallb),0 14px 18px -8px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.14) } body.mode-3d .cp-node.done{--wall:#0f4a12;--wallb:#062308} body.mode-3d .cp-node.sel{--wall:#6b5600;--wallb:#3a2f00} body.mode-3d .cp-node.locked{--wall:#0d1120;--wallb:#05070f}