/* WORDS season layer: hero DAILY card, header CONNECT, slot bar, letter depth,
   solved loop, board, profile, atlas, dithering and motion.
   Type floor: mono UI text >= 12px, reading text >= 14px.
   Dither patterns are pixel-exact SVG masks (2px pixels), tinted by background. */
:root{
  --t-common:#aeb5d5;--t-rare:#69bfff;--t-epic:#c47bff;--t-legendary:#f2b84b;
  --dither-fade:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='28' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1H0zM1 0h1v1H1zM2 0h1v1H2zM1 1h1v1H1zM3 1h1v1H3zM0 2h1v1H0zM2 2h1v1H2zM3 2h1v1H3zM1 3h1v1H1zM3 3h1v1H3zM0 4h1v1H0zM2 4h1v1H2zM1 5h1v1H1zM3 5h1v1H3zM0 6h1v1H0zM2 6h1v1H2zM1 7h1v1H1zM3 7h1v1H3zM0 8h1v1H0zM2 8h1v1H2zM1 9h1v1H1zM0 10h1v1H0zM2 10h1v1H2zM3 11h1v1H3zM0 12h1v1H0zM2 12h1v1H2zM0 14h1v1H0zM2 14h1v1H2zM0 16h1v1H0zM2 16h1v1H2zM2 18h1v1H2zM0 20h1v1H0zM2 22h1v1H2zM0 24h1v1H0z'/%3E%3C/svg%3E");
  --dither-50:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1H0zM1 1h1v1H1z'/%3E%3C/svg%3E");
  --dither-25:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1H0zM2 0h1v1H2zM0 2h1v1H0zM2 2h1v1H2z'/%3E%3C/svg%3E");
}

/* House style: meaningful five-letter words in caps. White by default, colour only
   for the word that carries the sentence (.copy-word). */
.five{font:inherit;text-transform:uppercase;color:var(--white);letter-spacing:.025em}

/* ---------- hero with the DAILY card ---------- */
.hero.hero-split{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,410px);gap:44px;align-items:center}
.hero-copy>p:last-child{font:15px/1.65 DepartureMono,'Courier New',monospace;max-width:730px;color:#c5c5ca;margin:0}
.daily-card{position:relative;isolation:isolate;padding:20px 22px 20px;border:1px solid rgba(255,111,0,.6);border-radius:19px;background:rgba(18,18,20,.78);box-shadow:0 9px 0 #090a08;overflow:hidden;animation:daily-breathe 3.2s ease-in-out infinite}
.daily-card::before{content:"";position:absolute;inset:auto 0 0 0;height:56px;z-index:-1;background:var(--orange);opacity:.28;-webkit-mask:var(--dither-fade) 0 0/8px 56px repeat-x;mask:var(--dither-fade) 0 0/8px 56px repeat-x;transform:scaleY(-1)}
.daily-card::after{content:"";position:absolute;inset:0 0 auto 0;height:40px;z-index:-1;background:#fff;opacity:.05;-webkit-mask:var(--dither-fade) 0 0/8px 56px repeat-x;mask:var(--dither-fade) 0 0/8px 56px repeat-x}
@keyframes daily-breathe{50%{border-color:rgba(255,111,0,.95);box-shadow:0 9px 0 #090a08,0 0 26px rgba(255,111,0,.16)}}
.daily-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.daily-title{display:flex;align-items:center;gap:10px;margin:0;font:400 20px/1 HomeVideo,'Courier New',monospace;letter-spacing:.02em;color:var(--white)}
.daily-title span{color:var(--orange)}
.daily-reward{padding:5px 10px;border-radius:8px;background:var(--lime);color:var(--bg);font-size:13px;letter-spacing:.06em}
.daily-reward span{font:inherit}
.daily-tiles{display:flex;gap:8px;margin:20px 0 16px}
.daily-tiles span{flex:1;aspect-ratio:7/8;display:grid;place-items:center;border:2px dashed rgba(255,111,0,.65);border-radius:9px;background:rgba(255,111,0,.05);color:var(--white);font:400 clamp(34px,3.4vw,50px)/1 HomeVideo,'Courier New',monospace;text-shadow:3px 3px 0 rgba(0,0,0,.7);animation:daily-bob 2.6s ease-in-out infinite;animation-delay:calc(var(--i,0) * .16s)}
.daily-tiles span.glitch{color:var(--orange);transform:translate(1px,-1px)}
@keyframes daily-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.daily-card[data-status=won] .daily-tiles span{border-style:solid;border-color:var(--lime);background:rgba(204,255,1,.08);color:var(--lime);animation:solved-hop 2.6s cubic-bezier(.3,.7,.4,1) infinite;animation-delay:calc(.6s + var(--i,0) * .11s)}
.daily-card[data-status=lost] .daily-tiles span{border-style:solid;border-color:#55333a;background:transparent;color:#ff8792;animation:none}
.daily-card[data-status=won]{border-color:rgba(204,255,1,.6);animation:none}
.daily-card[data-status=won]::before{background:var(--lime);opacity:.18}
.daily-card[data-status=lost]{border-color:#3a3a42;animation:none}
.daily-card[data-status=lost]::before{opacity:.08}
.daily-card.reveal .daily-tiles span{animation:tile-reveal .55s cubic-bezier(.2,.9,.3,1.3) both;animation-delay:calc(var(--i,0) * .1s)}
@keyframes tile-reveal{0%{transform:rotateX(90deg) scale(.8);opacity:0}100%{transform:none;opacity:1}}
.daily-copy{margin:0 0 16px;color:#c5c5ca;font:14px/1.55 DepartureMono,'Courier New',monospace}
.daily-copy .copy-word{color:var(--lime);font-family:DepartureMono,monospace}
.daily-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.daily-timer{color:var(--muted);font-size:12px;letter-spacing:.08em}
.daily-timer b{display:block;margin-top:4px;color:var(--white);font-weight:400;font-size:20px;letter-spacing:.04em}
.daily-play{min-height:46px;padding:0 20px;border:0;border-radius:12px;background:var(--orange);color:var(--bg);font:15px/1 DepartureMono,monospace;letter-spacing:.06em;cursor:pointer;box-shadow:0 4px 0 #7a3500;transition:transform .1s,box-shadow .1s,filter .2s}
.daily-play span{font:inherit}
.daily-play:hover{filter:brightness(1.1)}
.daily-play:active{transform:translateY(3px);box-shadow:0 1px 0 #7a3500}
.daily-play:disabled{background:#2a2a30;color:var(--muted);box-shadow:0 4px 0 #111114;cursor:not-allowed;font-size:13px}

/* header CONNECT: see the 2026-10 pass at the end */

/* ---------- toast + rank pop + flash ---------- */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:70;max-width:min(520px,calc(100% - 32px));padding:12px 18px;border:1px solid #44444c;border-radius:12px;background:#151518;color:var(--white);font:14px/1.4 DepartureMono,'Courier New',monospace;box-shadow:0 8px 0 #050506;animation:toast-in .25s ease-out}
.toast.success{border-color:var(--lime)}
.toast.error{border-color:var(--red)}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,10px)}}
.rank-pop{position:fixed;top:86px;right:max(24px,calc((100vw - 1240px) / 2));z-index:65;padding:11px 16px;border:1px solid var(--lime);border-radius:12px;background:#151518;color:var(--white);font:14px/1 DepartureMono,monospace;letter-spacing:.06em;box-shadow:0 6px 0 #050506;pointer-events:none}
.rank-pop b{color:var(--lime);font-size:20px;font-weight:400}
.rank-pop span{color:var(--muted)}
.rank-pop.show{animation:rank-pop 2.6s ease-out forwards}
@keyframes rank-pop{0%{opacity:0;transform:translateY(14px) scale(.9)}10%{opacity:1;transform:none}80%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-16px)}}
.flash{position:fixed;inset:0;z-index:60;pointer-events:none;animation:flash 1.2s ease-out forwards}
.flash.legendary{background:radial-gradient(circle at 50% 45%,rgba(242,184,75,.5),rgba(242,184,75,.12) 45%,transparent 72%)}
.flash.epic{background:radial-gradient(circle at 50% 45%,rgba(196,123,255,.32),transparent 65%)}
.flash::after{content:"";position:absolute;inset:0;background:var(--t-legendary);opacity:.16;-webkit-mask:var(--dither-50) 0 0/4px 4px;mask:var(--dither-50) 0 0/4px 4px}
.flash.epic::after{background:var(--t-epic);opacity:.1}
@keyframes flash{0%{opacity:0}10%{opacity:1}100%{opacity:0}}
.shake-screen{animation:shake-screen .5s steps(10)}
@keyframes shake-screen{0%,100%{transform:none}10%{transform:translate(-4px,2px)}20%{transform:translate(4px,-2px)}30%{transform:translate(-3px,-2px)}40%{transform:translate(3px,2px)}50%{transform:translate(-2px,1px)}60%{transform:translate(2px,-1px)}70%{transform:translate(-1px,1px)}80%{transform:translate(1px,0)}}

/* ---------- slot strip ---------- */
.game-meta{align-items:center;gap:14px}
.season-slot{display:flex;align-items:center;gap:8px}
.slot-label{color:var(--white);letter-spacing:.04em;font-size:13px}
.slot-tier{padding:4px 9px;border-radius:6px;border:1px solid currentColor;font-size:12px;letter-spacing:.08em}
.slot-bonus{color:var(--bg);background:var(--lime);border-radius:6px;padding:4px 7px;font-size:12px}
.tier-common{color:var(--t-common)}
.tier-rare{color:var(--t-rare)}
.tier-epic{color:var(--t-epic)}
.tier-legendary{color:var(--t-legendary)}
.slot-tier.tier-legendary{box-shadow:0 0 12px rgba(242,184,75,.35)}
/* Future pips are dithered in their tier colour; played pips are solid. */
.slot-pips{margin:12px auto 0;max-width:500px;display:grid;grid-template-columns:repeat(10,1fr);gap:5px}
.slot-pips .pip{position:relative;display:block;height:8px;border-radius:2px;overflow:hidden;--pc:var(--t-common);background:rgba(255,255,255,.035);transition:background .25s,box-shadow .25s}
.slot-pips .pip.rare{--pc:var(--t-rare)}
.slot-pips .pip.epic{--pc:var(--t-epic)}
.slot-pips .pip.legendary{--pc:var(--t-legendary)}
.slot-pips .pip:not(.won):not(.lost):not(.now)::before{content:"";position:absolute;inset:0;background:var(--pc);opacity:.7;-webkit-mask:var(--dither-50) 0 0/4px 4px;mask:var(--dither-50) 0 0/4px 4px}
.slot-pips .pip.top:not(.won):not(.lost):not(.now)::before{background:linear-gradient(90deg,var(--t-epic),var(--t-legendary))}
.slot-pips .pip.won{background:var(--pc)}
.slot-pips .pip.won.legendary{box-shadow:0 0 8px rgba(242,184,75,.5)}
.slot-pips .pip.lost{background:transparent;box-shadow:inset 0 0 0 1px rgba(255,101,119,.6)}
.slot-pips .pip.now{background:var(--pc);animation:pip-now 1.2s steps(2) infinite}
.slot-pips .pip.fill{transform-origin:left center;animation:pip-fill .7s steps(7) both}
@keyframes pip-now{50%{opacity:.35}}
@keyframes pip-fill{from{transform:scaleX(0)}}

/* Letter depth: a hard pixel drop under every typed letter. */
.board .cell.filled{text-shadow:2px 2px 0 rgba(0,0,0,.7)}
.board .cell.absent{text-shadow:2px 2px 0 rgba(0,0,0,.55)}
.board .cell.correct{text-shadow:2px 2px 0 rgba(70,92,0,.55),-1px -1px 0 rgba(255,255,255,.35)}
.board .cell.present{text-shadow:2px 2px 0 rgba(112,64,0,.5),-1px -1px 0 rgba(255,255,255,.3)}

/* Solved row idle loop: a hop wave across the five tiles plus a light sweep. */
.board .cell.solved{position:relative;overflow:hidden}
.board .cell.solved:not(.win-wave){animation:solved-hop 2.6s cubic-bezier(.3,.7,.4,1) infinite;animation-delay:calc(.9s + var(--i) * .11s)}
.board .cell.solved::after{content:"";position:absolute;inset:-2px;pointer-events:none;background:linear-gradient(110deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%);background-size:260% 100%;background-position:130% 0;animation:solved-sweep 3.4s linear infinite;animation-delay:calc(1.2s + var(--i) * .09s)}
@keyframes solved-hop{0%,58%,100%{transform:translateY(0)}14%{transform:translateY(-7px)}26%{transform:translateY(0)}34%{transform:translateY(-2px)}42%{transform:translateY(0)}}
@keyframes solved-sweep{0%{background-position:130% 0}45%,100%{background-position:-30% 0}}

#new-word:disabled{opacity:.45;cursor:not-allowed}
.daily-button{border-color:var(--orange)!important;color:var(--orange)!important;font:13px/1.3 DepartureMono,monospace!important;min-height:42px}
.daily-button span{color:var(--white)}
.result-kicker.first-find{color:var(--yellow)}

/* ---------- panels (board sits next to the game) ---------- */
.leaderboard,.atlas{position:relative;isolation:isolate;padding:28px 26px}
.atlas{margin-top:18px}
.leaderboard::before,.atlas::before{content:"";position:absolute;inset:0 0 auto 0;height:56px;z-index:-1;background:#fff;opacity:.045;-webkit-mask:var(--dither-fade) 0 0/8px 56px repeat-x;mask:var(--dither-fade) 0 0/8px 56px repeat-x;pointer-events:none}
.reset-timer,.atlas-count{color:var(--lime);font-size:14px;letter-spacing:.06em;white-space:nowrap}
.board-lead{margin:0 0 12px;color:#c9c9cf;font:14px/1.55 DepartureMono,'Courier New',monospace}
.board-lead strong{color:var(--white);font-family:DepartureMono,monospace;font-weight:400}
.board-lead .copy-word,.board-rules .copy-word,.me-copy .copy-word,.invite-copy .copy-word,.atlas-empty .copy-word,.me-note .copy-word{color:var(--lime);font-family:DepartureMono,monospace}
/* Board lead (creator 2026-10-01): the GTD line in gold, the WL line in blue. */
.board-lead strong.gtd-line{color:var(--t-legendary)}
.board-lead .wl-line{color:var(--t-rare);font-family:DepartureMono,monospace;font-weight:400}
/* Stat strip (creator 2026-10-01): four equal cells, number on top in its own colour, label under it.
   Order: PLAYERS, RANKED, GUESSES, FOUND; the live tiles sit in front. */
.board-stats{display:grid;grid-template-columns:auto repeat(4,minmax(0,1fr));align-items:center;gap:0;margin:0 0 18px;padding:12px 6px 12px 16px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.02);color:var(--muted);font-size:11px;letter-spacing:.08em}
.board-stats #board-stats{display:contents}
.board-stats .stat{display:flex;flex-direction:column;gap:5px;min-width:0;padding:0 10px;border-left:1px dashed #34343b;white-space:nowrap}
.board-stats b{font-weight:400;font-size:21px;letter-spacing:.02em;line-height:1;display:inline-block}
.board-stats .stat-players{order:1}.board-stats .stat-players b{color:var(--lime)}
.board-stats .stat-ranked{order:2}.board-stats .stat-ranked b{color:var(--t-rare)}
.board-stats .stat-guesses{order:3}.board-stats .stat-guesses b{color:var(--yellow)}
.board-stats .stat-found{order:4}.board-stats .stat-found b{color:var(--pink)}
.board-stats b.bump{animation:bump .5s ease-out}
@keyframes bump{30%{color:var(--white);transform:translateY(-2px)}}
@media(max-width:520px){.board-stats{grid-template-columns:auto repeat(2,minmax(0,1fr));row-gap:12px}.board-stats .live-dot{grid-row:span 2}}
/* Live indicator (creator 2026-10-01: no generic pulsing red dot). Three pixel tiles fill
   left to right like a WORDS row being solved: grey, yellow, then all lime, then reset.
   ::before draws tile 1 (background) and tile 2 (its box-shadow), ::after draws tile 3. */
.live-dot{--lt-off:#34343b;--lt-mid:var(--yellow);order:0;position:relative;flex:0 0 auto;display:inline-block;width:19px;height:5px;margin-right:4px;border-radius:0;background:none;box-shadow:none;animation:none}
.live-dot::before,.live-dot::after{content:"";position:absolute;top:0;width:5px;height:5px;border-radius:1px;background:var(--lt-off)}
.live-dot::before{left:0;box-shadow:7px 0 0 var(--lt-off);animation:lt-ab 2.4s steps(1,end) infinite}
.live-dot::after{left:14px;animation:lt-c 2.4s steps(1,end) infinite}
.daily-title .live-dot{--lt-mid:var(--orange)}
@keyframes lt-ab{0%{background:var(--lt-off);box-shadow:7px 0 0 var(--lt-off)}12%{background:var(--lt-mid);box-shadow:7px 0 0 var(--lt-off)}24%{background:var(--lt-mid);box-shadow:7px 0 0 var(--lime)}52%{background:var(--lime);box-shadow:7px 0 0 var(--lime)}88%{background:var(--lt-off);box-shadow:7px 0 0 var(--lt-off)}}
@keyframes lt-c{0%{background:var(--lt-off)}36%{background:var(--lt-mid)}64%{background:var(--lime)}88%{background:var(--lt-off)}}

/* ---------- profile card (wallet, nick, X, quests, invite) ---------- */
.me-card{position:relative;isolation:isolate;margin-bottom:16px;border:1px solid var(--line);border-radius:14px;background:rgba(30,30,34,.55);padding:20px;display:grid;gap:14px;overflow:hidden}
.me-card::before{content:"";position:absolute;inset:auto 0 0 0;height:42px;z-index:-1;background:var(--lime);opacity:.07;-webkit-mask:var(--dither-fade) 0 0/8px 56px repeat-x;mask:var(--dither-fade) 0 0/8px 56px repeat-x;transform:scaleY(-1)}
.me-card.pulse{animation:card-pulse 1.3s ease-out}
@keyframes card-pulse{0%{box-shadow:0 0 0 0 rgba(204,255,1,.55)}100%{box-shadow:0 0 0 16px rgba(204,255,1,0)}}
.me-stats{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px}
.me-points{font-size:28px;color:var(--lime)}
.me-place{font-size:16px;color:var(--white)}
.me-zone{font-size:13px;letter-spacing:.08em}
.me-body{display:grid;gap:12px}
.me-copy,.me-who{margin:0;color:#c9c9cf;font:14px/1.5 DepartureMono,'Courier New',monospace}
.me-nick{color:var(--white);font:17px DepartureMono,monospace;font-weight:400}
.me-wallet{color:var(--muted);font:13px DepartureMono,monospace}
.wallet-button{min-height:48px;border:0;border-radius:12px;background:var(--lime);color:var(--bg);font:15px/1 DepartureMono,monospace;letter-spacing:.08em;cursor:pointer;box-shadow:0 4px 0 #6f8a00;transition:transform .1s,box-shadow .1s}
.wallet-button:hover{filter:brightness(1.08)}
.wallet-button:active{transform:translateY(3px);box-shadow:0 1px 0 #6f8a00}
.wallet-button:disabled{opacity:.6;cursor:progress}
.me-card .pill-button{min-height:42px;border-radius:11px;padding:10px 14px;font:13px/1.2 DepartureMono,monospace;cursor:pointer}
.me-card input[type=text]{height:42px;font:14px DepartureMono,monospace}
.nick-form,.invite{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
.invite{grid-template-columns:auto 1fr auto}
.invite-label{color:var(--lime);font-size:12px;letter-spacing:.08em}
.invite input[type=text]{font-size:12px;color:var(--muted)}
.invite-copy,.me-note{margin:0;color:#a9a9b1;font:13px/1.5 DepartureMono,'Courier New',monospace}
.nick-toggle{display:flex;align-items:center;gap:10px;color:#c9c9cf;font:14px DepartureMono,'Courier New',monospace;cursor:pointer}
.nick-toggle input{width:18px;height:18px;accent-color:var(--lime)}
.me-card .field-message{font-size:13px;margin:0}
.me-card .field-message:empty{display:none}
.me-extra{border:1px solid #2c2c33;border-radius:12px;padding:0 14px;background:rgba(14,14,16,.55)}
.me-extra summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;padding:13px 0;color:var(--white);font-size:13px;letter-spacing:.06em}
.me-extra summary::-webkit-details-marker{display:none}
.me-extra summary::after{content:"+";color:var(--lime);font-size:18px}
.me-extra[open] summary::after{content:"-"}
.me-extra[open]{padding-bottom:14px;display:grid;gap:10px}
.x-wrap{display:flex;align-items:center;border:1px solid #60665a;border-radius:11px;background:#161813;padding-left:12px}
.x-at{color:var(--muted);font-size:14px}
.me-card .x-wrap input[type=text]{border:0;background:transparent;padding-left:4px}
.quest{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;border:1px solid #2c2c33;border-radius:10px;background:rgba(24,24,28,.6)}
.quest.done{border-color:rgba(204,255,1,.5)}
.quest.done .pill-button{border-color:var(--lime);color:var(--lime)}
.quest.error{border-color:rgba(255,101,119,.6)}
.quest-title{display:block;margin-bottom:3px;color:var(--white);font:15px DepartureMono,monospace;font-weight:400;letter-spacing:.04em}
.quest-title .q-key.repost{color:#69bfff}
.quest-title .q-key.like{color:#ff90b8}
.quest-copy{display:block;color:#a9a9b1;font:13px/1.45 DepartureMono,'Courier New',monospace}

/* ---------- board ---------- */
.board-list{list-style:none;margin:0;padding:0;max-height:440px;overflow:auto;border:1px solid var(--line);border-radius:14px;background:rgba(12,12,14,.35)}
.board-row{position:relative;display:grid;grid-template-columns:58px 1fr 48px 70px;gap:10px;align-items:center;padding:11px 16px;border-bottom:1px solid #26262b;font-size:14px}
.board-row:last-child{border-bottom:0}
.board-row.gtd .board-place{background:linear-gradient(165deg,#fff0b1 5%,#dab458 35%,#fff0b1 48%,#b7863e 64%,#dab458 95%);background-clip:text;-webkit-background-clip:text;color:transparent}
.board-row.me{background:rgba(22,27,6,.96);outline:1px solid rgba(204,255,1,.5);outline-offset:-1px;position:sticky;top:0;bottom:0;z-index:1}
.board-row.me::before{content:"";position:absolute;inset:0;background:var(--lime);opacity:.1;-webkit-mask:var(--dither-25) 0 0/8px 8px;mask:var(--dither-25) 0 0/8px 8px;pointer-events:none}
.board-row.me .board-name{color:var(--lime)}
.board-place{color:var(--muted)}
.board-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board-name.wallet{color:var(--muted)}
.board-wins{color:var(--muted);text-align:right}
.board-points{color:var(--lime);text-align:right}
.board-empty{padding:22px 16px;color:var(--muted);font:14px DepartureMono,'Courier New',monospace}
.board-rules{margin:18px 0 0;color:#9a9aa3;font:13px/1.6 DepartureMono,'Courier New',monospace}

/* Pixel scrollbar in the site palette; the track stops short of the rounded
   corners so it never pokes out of the frame. */
.board-list::-webkit-scrollbar,.atlas-grid::-webkit-scrollbar{width:12px}
.board-list::-webkit-scrollbar-track,.atlas-grid::-webkit-scrollbar-track{background:transparent;margin:14px 0}
.board-list::-webkit-scrollbar-thumb,.atlas-grid::-webkit-scrollbar-thumb{background:#3a3a42;border:4px solid transparent;background-clip:padding-box;border-radius:0}
.board-list::-webkit-scrollbar-thumb:hover,.atlas-grid::-webkit-scrollbar-thumb:hover{background:var(--lime);background-clip:padding-box}
.board-list::-webkit-scrollbar-button,.atlas-grid::-webkit-scrollbar-button{display:none;height:0}
.board-list::-webkit-scrollbar-corner{background:transparent}
@supports not selector(::-webkit-scrollbar){.board-list,.atlas-grid{scrollbar-width:thin;scrollbar-color:#3a3a42 transparent}}

/* ---------- atlas ---------- */
.atlas-tiers{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.atlas-chip{border:1px solid currentColor;border-radius:8px;padding:5px 10px;font-size:12px;letter-spacing:.06em}
.atlas-chip b{font-weight:400;font-size:14px}
.atlas-chip.first{color:var(--yellow)}
.atlas-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:18px 14px;max-height:540px;overflow:auto;padding:6px 8px 4px 2px}
.atlas-card{margin:0;display:grid;gap:7px;justify-items:center;color:var(--t-common)}
.atlas-card.tier-rare{color:var(--t-rare)}
.atlas-card.tier-epic{color:var(--t-epic)}
.atlas-card.tier-legendary{color:var(--t-legendary)}
.atlas-tier{font-size:12px;letter-spacing:.14em}
.atlas-frame{position:relative;isolation:isolate;width:100%;aspect-ratio:3/4;border:2px solid currentColor;border-radius:10px;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.06),rgba(0,0,0,.35) 70%),#121215;box-shadow:inset 0 0 0 4px #0c0c0e,inset 0 0 0 5px color-mix(in srgb,currentColor 35%,transparent);transition:transform .2s}
.atlas-frame::before{content:"";position:absolute;inset:auto 6px 6px 6px;height:48px;z-index:-1;border-radius:0 0 6px 6px;background:currentColor;opacity:.22;-webkit-mask:var(--dither-fade) 0 0/8px 56px repeat-x;mask:var(--dither-fade) 0 0/8px 56px repeat-x;transform:scaleY(-1)}
.atlas-card:hover .atlas-frame{transform:translateY(-3px) rotate(-1deg)}
.atlas-card.tier-legendary .atlas-frame{box-shadow:inset 0 0 0 4px #0c0c0e,inset 0 0 0 5px rgba(242,184,75,.5),0 0 16px rgba(242,184,75,.25)}
.atlas-word{color:var(--white);font-weight:400;font-size:19px;letter-spacing:.08em;text-shadow:2px 2px 0 rgba(0,0,0,.7)}
.atlas-stamp{position:absolute;top:10px;right:-6px;padding:3px 7px;border:2px solid var(--yellow);border-radius:4px;background:rgba(12,12,14,.75);color:var(--yellow);font-size:11px;letter-spacing:.14em;transform:rotate(12deg);box-shadow:0 0 0 2px rgba(12,12,14,.6)}
.atlas-card.fresh .atlas-stamp{animation:stamp .6s cubic-bezier(.2,1.6,.4,1) .3s both}
.atlas-card.fresh .atlas-frame{animation:card-thump .35s .62s ease-out}
@keyframes stamp{0%{opacity:0;transform:rotate(-10deg) scale(2.6)}60%{opacity:1;transform:rotate(15deg) scale(.9)}100%{opacity:1;transform:rotate(12deg) scale(1)}}
@keyframes card-thump{40%{transform:scale(.96)}}
.atlas-meta{color:#9a9aa3;font:12px DepartureMono,'Courier New',monospace;text-align:center}
.atlas-empty{margin:0;color:#c9c9cf;font:14px DepartureMono,'Courier New',monospace}

@media(max-width:1050px){
  .hero.hero-split{grid-template-columns:minmax(0,1fr);gap:28px}
  .daily-card{max-width:560px}
  .atlas{width:min(720px,100%);margin-left:auto;margin-right:auto}
}
@media(max-width:760px){
  .hero-copy>p:last-child{font-size:13px}
  .top-connect{padding:6px 10px;font-size:12px}
  .top-connect-points{display:none}
  .leaderboard,.atlas{padding:22px 16px}
  .board-count{float:none;display:block;margin-top:4px}
  .board-row{grid-template-columns:52px 1fr 44px 64px;padding:10px 12px}
  .atlas-grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
  .rank-pop{top:auto;bottom:84px;right:16px}
}
@media(prefers-reduced-motion:reduce){
  .live-dot::before,.live-dot::after{animation:none!important;background:var(--lime)!important}.live-dot::before{box-shadow:7px 0 0 var(--lime)!important}
  .slot-pips .pip.now,.slot-pips .pip.fill,.live-dot,.board .cell.solved,.board .cell.solved::after,
  .daily-card,.daily-tiles span,.atlas-card.fresh .atlas-stamp,.atlas-card.fresh .atlas-frame,.rank-pop.show{animation:none!important}
}

/* ==========================================================================
   2026-10 pass: pixel fonts only, header buttons like the WASD hub, SIX STEPS
   panel, top 10 / podium on the board, blue SHARE in the hero.
   ========================================================================== */

/* Pixel fonts only: HomeVideo for display, DepartureMono for everything else. */
body,button,input,select,textarea{font-family:DepartureMono,'Courier New',monospace}
.board-lead,.board-rules,.me-copy,.me-who,.invite-copy,.daily-copy,.atlas-meta,.atlas-empty,.board-empty,.toast,.step-copy{letter-spacing:0;word-spacing:-.08em}
.board-lead,.board-rules,.me-copy,.daily-copy,.step-copy{font-size:13px;line-height:1.7}
.board-lead strong,.board-lead .five,.board-rules .five,.me-copy .five,.daily-copy .five,.step-copy .five{letter-spacing:0}

/* ---------- header: CONNECT and WASD share one size, styled like the hub ---------- */
.top-connect,.hub-back{box-sizing:border-box;height:40px;min-height:40px;min-width:132px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:20px;border:1px solid #ffffff2b;background:#14141acc;color:var(--white);font:14px/1 DepartureMono,'Courier New',monospace;letter-spacing:.08em;text-decoration:none;white-space:nowrap;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:border-color .12s,color .12s,background .12s}
.hub-back span{font-size:14px;line-height:1}
.top-connect:hover,.hub-back:hover,.hub-back:focus-visible{border-color:var(--lime);color:var(--lime);background:#14141acc}
.top-connect:active{transform:translateY(1px)}
.top-connect:disabled{opacity:.6;cursor:progress}
/* 16-px grid icon drawn at 16 px: every pixel lands on a real pixel. */
.wallet-icon{width:16px;height:16px;flex:none;display:block;fill:currentColor;shape-rendering:crispEdges}
.wallet-clasp{fill:var(--lime);animation:clasp-blink 1.6s steps(2) infinite}
.top-connect:hover .wallet-icon{animation:wallet-hop .6s steps(2) infinite}
.top-connect.is-connected{border-color:#ccff0166;color:var(--lime)}
.top-connect.is-connected .wallet-clasp{animation:none;fill:currentColor;opacity:.45}
.top-connect-points{color:var(--lime);padding-left:9px;border-left:1px solid #ffffff22}
.top-connect.is-connected #top-connect-label{color:var(--white)}
@keyframes clasp-blink{50%{opacity:.15}}
@keyframes wallet-hop{50%{transform:translateY(-1px)}}

/* ---------- hero: SHARE is a blue button to the steps ---------- */
.hero-share{position:relative;display:inline;padding:0;margin:0;border:0;background:none;font:inherit;letter-spacing:inherit;line-height:inherit;color:#69bfff;cursor:pointer;text-shadow:0 0 18px rgba(91,108,255,.45)}
.hero-share span{font:inherit;color:inherit}
.hero-share::after{content:"";position:absolute;left:2px;right:.32em;bottom:-.08em;height:4px;background:var(--blue);opacity:.75;-webkit-mask:var(--dither-50) 0 0/4px 4px;mask:var(--dither-50) 0 0/4px 4px;transition:opacity .15s}
.hero-share:hover{color:#9fd6ff}
.hero-share:hover::after{opacity:1}
.hero-share:focus-visible{outline:2px dashed #69bfff;outline-offset:6px}

/* ---------- board card ---------- */
.me-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.me-actions .wallet-button{flex:1 1 200px}
.me-who{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.me-address{color:var(--white);font:17px DepartureMono,monospace;font-weight:400;letter-spacing:.04em}
.me-wallet{color:var(--muted);font-size:12px;letter-spacing:.1em}
.me-split{display:flex;flex-wrap:wrap;gap:6px 10px;margin:0;color:var(--muted);font-size:13px;letter-spacing:.06em}
.me-split b{color:var(--white);font-weight:400}
.me-split i{font-style:normal;color:#3a3a42}
.me-more{justify-self:start;border-color:#5b6cff!important;color:#aeb7ff!important}

/* ---------- board: podium (1-3), top 10 rail, TOP 10 cut ---------- */
.board-name{color:var(--muted);letter-spacing:.03em}
.board-row.top10{background:linear-gradient(90deg,rgba(204,255,1,.06),transparent 55%)}
.board-row.top10::after{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;background:var(--lime);opacity:.7}
.board-row.top10 .board-place{color:var(--lime)}
.board-row.top10 .board-name{color:#d9d9de}
.board-row.podium{--metal:#dab458;--metal-hi:#fff0b1;--metal-lo:#9a6d2c;padding-top:14px;padding-bottom:14px;background:linear-gradient(90deg,color-mix(in srgb,var(--metal) 16%,transparent),transparent 70%)}
.board-row.p2{--metal:#c3c8d6;--metal-hi:#f4f6fb;--metal-lo:#7d8396}
.board-row.p3{--metal:#cd8a52;--metal-hi:#f6c69a;--metal-lo:#7f4a22}
.board-row.podium::before{content:"";position:absolute;inset:0;background:var(--metal);opacity:.08;-webkit-mask:var(--dither-25) 0 0/8px 8px;mask:var(--dither-25) 0 0/8px 8px;pointer-events:none}
.board-row.podium::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(var(--metal-hi),var(--metal),var(--metal-lo))}
.board-row.podium .board-place.medal{justify-self:start;padding:5px 7px 4px;border-radius:4px;background:linear-gradient(165deg,var(--metal-hi) 8%,var(--metal) 40%,var(--metal-hi) 55%,var(--metal-lo) 92%);color:#141108;font-size:12px;letter-spacing:.06em;box-shadow:0 2px 0 var(--metal-lo),inset 0 1px 0 rgba(255,255,255,.55);-webkit-background-clip:border-box;background-clip:border-box}
.board-row.podium .board-name{color:var(--white);font-size:15px}
.board-row.podium .board-points{color:var(--metal-hi);font-size:16px}
.board-row.p1 .board-place.medal{animation:medal-shine 3.2s steps(8) infinite}
.board-row.podium.gtd .board-place{-webkit-text-fill-color:#141108;color:#141108}
@keyframes medal-shine{0%,70%,100%{filter:none}80%{filter:brightness(1.25)}}
.board-cut{display:flex;align-items:center;gap:10px;padding:6px 16px;color:var(--lime);font-size:11px;letter-spacing:.2em;background:rgba(204,255,1,.04);border-bottom:1px solid #26262b}
.board-cut::before,.board-cut::after{content:"";flex:1;height:2px;background:var(--lime);opacity:.35;-webkit-mask:var(--dither-50) 0 0/4px 4px;mask:var(--dither-50) 0 0/4px 4px}

/* ---------- SIX STEPS (between the board and the Atlas) ---------- */
.steps{position:relative;isolation:isolate;margin-top:18px;padding:28px 26px;scroll-margin-top:16px}
.steps::before{content:"";position:absolute;inset:0 0 auto 0;height:56px;z-index:-1;background:#5b6cff;opacity:.08;-webkit-mask:var(--dither-fade) 0 0/8px 56px repeat-x;mask:var(--dither-fade) 0 0/8px 56px repeat-x;pointer-events:none}
.steps.pulse{animation:card-pulse 1.3s ease-out}
.steps-count{color:var(--lime);font-size:14px;letter-spacing:.06em;white-space:nowrap}
.steps-meter{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:4px 0 18px}
.steps-meter i{height:8px;border-radius:2px;background:rgba(255,255,255,.06);position:relative;overflow:hidden}
.steps-meter i::before{content:"";position:absolute;inset:0;background:var(--lime);opacity:.35;-webkit-mask:var(--dither-50) 0 0/4px 4px;mask:var(--dither-50) 0 0/4px 4px}
.steps-meter i.on{background:var(--lime)}
.steps-meter i.on::before{display:none}
.steps-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:12px}
.step-item{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;padding:16px;border:1px solid var(--line);border-radius:14px;background:rgba(24,24,28,.6);transition:border-color .2s,background .2s}
.step-item.done{border-color:rgba(204,255,1,.45);background:rgba(28,33,12,.55)}
.step-item.locked{opacity:.55}
.step-item.busy{border-color:#5b6cff}
.step-num{width:40px;height:40px;display:grid;place-items:center;border-radius:10px;background:#26262c;color:var(--white);font:400 18px/1 HomeVideo,'Courier New',monospace}
.step-item.done .step-num{background:var(--lime);color:var(--bg)}
.step-item.done .step-num::before{content:"";width:16px;height:16px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath d='M6 1h2v2H6zM5 3h2v1H5zM4 4h2v1H4zM0 4h2v1H0zM1 5h4v1H1zM2 6h2v1H2z'/%3E%3C/svg%3E") center/16px 16px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath d='M6 1h2v2H6zM5 3h2v1H5zM4 4h2v1H4zM0 4h2v1H0zM1 5h4v1H1zM2 6h2v1H2z'/%3E%3C/svg%3E") center/16px 16px no-repeat}
.step-main{display:grid;gap:8px;min-width:0}
.step-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.step-title{margin:0;color:var(--white);font:400 15px/1.2 DepartureMono,'Courier New',monospace;letter-spacing:.06em}
.step-title .copy-word{color:var(--lime)}
.step-like .step-title .copy-word{color:#ff90b8}
.step-quote .step-title .copy-word{color:#69bfff}
.step-tag{padding:3px 7px;border-radius:5px;border:1px solid currentColor;font-size:11px;letter-spacing:.1em}
.step-tag.req{color:var(--yellow)}
.step-tag.play{color:var(--t-common)}
.step-tag.boost{color:#ff90b8}
.step-tag.top{color:#69bfff}
.step-item.done .step-tag{color:var(--lime)}
.step-pts{margin-left:auto;color:var(--lime);font-size:14px;letter-spacing:.04em}
.step-copy{margin:0;color:#b9b9c0}
.step-act{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.step-act:empty{display:none}
.step-act .wallet-button{min-height:42px;padding:0 16px;font-size:13px;box-shadow:0 3px 0 #6f8a00}
.step-act .pill-button,.step-form .pill-button{min-height:42px;border-radius:11px;padding:10px 14px;font:13px/1.2 DepartureMono,'Courier New',monospace;letter-spacing:.04em;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
.step-act .pill-button.outline{border:1px solid #6b6b74;background:transparent;color:var(--white)}
.step-act .pill-button.outline:hover{border-color:var(--lime);color:var(--lime)}
.step-form .pill-button.lime{background:var(--lime);color:var(--bg);border:0}
.like-button{border:1px solid #ff90b8;background:rgba(255,61,139,.12);color:#ffc3d9}
.like-button:hover{background:rgba(255,61,139,.22)}
.quote-button{border:1px solid #69bfff;background:rgba(91,108,255,.14);color:#cfe8ff}
.quote-button:hover{background:rgba(91,108,255,.26)}
.step-form{flex:1 1 260px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.step-form input[type=text]{height:42px;min-width:0;font:14px DepartureMono,'Courier New',monospace;letter-spacing:0}
.step-form .x-wrap{display:flex;align-items:center;border:1px solid #60665a;border-radius:11px;background:#161813;padding-left:12px;min-width:0}
.step-form .x-wrap:focus-within{border-color:var(--lime);box-shadow:0 0 0 2px #ccff0128}
.step-form .x-wrap input[type=text]{border:0;background:transparent;padding-left:4px;box-shadow:none}
.step-proof{padding:8px 12px;border:1px solid rgba(204,255,1,.4);border-radius:10px;color:var(--lime);font-size:13px;letter-spacing:.04em;text-decoration:none}
.step-proof.link:hover{background:rgba(204,255,1,.08)}
.quiet-link{padding:0;border:0;background:none;color:var(--muted);font-size:12px;letter-spacing:.06em;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.quiet-link:hover{color:var(--lime)}
.step-error{margin:0;color:#ff8792;font-size:12px;line-height:1.5}
/* Check bar: stepped fill so it reads as pixels, not a smooth web loader. */
.step-check{flex:1 1 100%;display:grid;gap:7px}
.step-bar{position:relative;display:block;height:10px;border:1px solid #5b6cff;border-radius:3px;overflow:hidden;background:rgba(91,108,255,.08)}
.step-bar i{position:absolute;inset:0;transform-origin:left center;transform:scaleX(var(--k,0));background:#69bfff;-webkit-mask:var(--dither-50) 0 0/4px 4px;mask:var(--dither-50) 0 0/4px 4px}
.step-bar::after{content:"";position:absolute;inset:0;width:30%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);animation:bar-sweep 1.1s steps(10) infinite}
.step-check-label{color:#aeb7ff;font-size:12px;letter-spacing:.1em}
@keyframes bar-sweep{from{transform:translateX(-100%)}to{transform:translateX(340%)}}

.atlas-empty{grid-column:1/-1;max-width:none}

/* ---------- phones ---------- */
@media(max-width:760px){
  .steps{padding:22px 14px}
  .step-item{grid-template-columns:34px minmax(0,1fr);gap:11px;padding:14px 12px}
  .step-num{width:34px;height:34px;font-size:15px}
  .step-pts{margin-left:0}
  .step-form{flex-basis:100%}
  .board-row.podium{padding-top:12px;padding-bottom:12px}
}
@media(max-width:600px){
  .top-connect,.hub-back{height:36px;min-height:36px;min-width:110px;padding:0 12px;font-size:12px;gap:7px}
  .top-actions{gap:8px}
  .guessed-meter{display:none}
}
@media(max-width:380px){
  .top-connect #top-connect-label{max-width:84px;overflow:hidden;text-overflow:ellipsis}
  .brand span{width:24px;height:30px}
}
@media(prefers-reduced-motion:reduce){
  .wallet-clasp,.top-connect:hover .wallet-icon,.board-row.p1 .board-place.medal,.step-bar::after,.steps.pulse{animation:none!important}
}

/* ---------- SIX STEPS v2 ---------- */
/* One full-width row per step so every card has the same rhythm: icon | title,
   tag and PTS on one line | copy | actions. Pixel icons are drawn at 24px on
   their 24px grid, so no pixel is smeared. */
.steps-list{grid-template-columns:1fr;gap:10px}
.step-item{grid-template-columns:44px minmax(0,1fr);align-items:start;gap:16px;padding:16px 18px}
.step-item .step-icon{position:relative;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:#151511}
.step-item .step-icon.dark{background:#1a1a1a;color:var(--white);box-shadow:inset 0 0 0 1px #3a3a42}
.step-item .step-icon .pixel-icon{width:24px;height:24px;display:block;shape-rendering:crispEdges}
.step-index{position:absolute;right:-6px;bottom:-6px;min-width:18px;height:18px;padding:0 4px;display:grid;place-items:center;border-radius:5px;background:#0e0e11;border:1px solid #3a3a42;color:var(--white);font:400 11px/1 DepartureMono,'Courier New',monospace}
.step-item.done .step-index{background:var(--lime);border-color:var(--lime);color:var(--bg);font-size:0}
.step-item.done .step-index::before{content:"";width:14px;height:10px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 5' shape-rendering='crispEdges'%3E%3Cpath d='M6 0h1v1H6zM5 1h1v1H5zM0 2h1v1H0zM4 2h1v1H4zM1 3h1v1H1zM3 3h1v1H3zM2 4h1v1H2z'/%3E%3C/svg%3E") center/14px 10px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 5' shape-rendering='crispEdges'%3E%3Cpath d='M6 0h1v1H6zM5 1h1v1H5zM0 2h1v1H0zM4 2h1v1H4zM1 3h1v1H1zM3 3h1v1H3zM2 4h1v1H2z'/%3E%3C/svg%3E") center/14px 10px no-repeat}
.step-item.locked .step-icon{filter:grayscale(1);opacity:.6}
.step-main{gap:6px}
.step-top{flex-wrap:nowrap;min-height:28px}
.step-title{white-space:nowrap}
.step-pts{margin-left:auto;flex:none;padding-left:12px}
.step-copy{max-width:760px}
.step-act{margin-top:4px}
.step-item.locked .step-copy{color:var(--muted)}
@media(max-width:760px){
  .step-item{grid-template-columns:40px minmax(0,1fr);gap:12px;padding:14px 12px}
  .step-item .step-icon{width:40px;height:40px}
  .step-top{flex-wrap:wrap}
  .step-pts{margin-left:auto}
  .step-title{white-space:normal}
}

/* FOLLOW step (gold) */
.step-item .step-icon.gold{background:var(--yellow);color:#151511}
.step-tag.gold{color:var(--yellow)}
.step-follow .step-title .copy-word{color:var(--yellow)}
.follow-button{border:1px solid var(--yellow);background:rgba(242,184,75,.12);color:#ffe2a8}
.follow-button:hover{background:rgba(242,184,75,.24)}
.steps-meter{grid-template-columns:repeat(6,1fr)}

/* 2026-10 phone header: CONNECT and WASD stay equal and fit next to the logo at 360-420px */
@media(max-width:420px){.topbar{gap:10px}.brand{gap:2px}.brand span{width:22px;height:30px}.top-connect,.hub-back{min-width:100px;padding:0 8px;gap:5px}.hub-back-label{display:inline}}
@media(max-width:350px){.top-connect,.hub-back{min-width:0}.hub-back-label{display:none}}

/* 2026-10-01 pass 2: your row is never sticky inside the rounded list (it was
   clipped by the mask and overlapped other rows); it is pinned under the list. */
.board-list .board-row.me{position:relative;top:auto;bottom:auto;z-index:auto;background:rgba(22,27,6,.96)}
.board-pin{list-style:none;margin:8px 0 0;padding:0;border:1px solid rgba(204,255,1,.55);border-radius:14px;overflow:hidden;background:rgba(22,27,6,.96);box-shadow:0 -10px 18px -12px #000}
.board-pin[hidden]{display:none}
.board-pin .board-row{cursor:pointer;outline:0;margin:0;border:0;background:transparent}
.board-pin .board-row:hover .board-name{text-decoration:underline}
.board-pin:not([hidden]){animation:pin-in .18s steps(3) both}
@keyframes pin-in{from{transform:translateY(6px);opacity:0}to{transform:none;opacity:1}}

/* Atlas: square frames, no artwork; rarity shows in the frame and its motion. */
.atlas-grid{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:16px 12px}
.atlas-frame{aspect-ratio:1/1;border-radius:4px;background:#111114;box-shadow:inset 0 0 0 4px #0c0c0e,inset 0 0 0 5px color-mix(in srgb,currentColor 30%,transparent)}
.atlas-frame::before{display:none}
.atlas-frame::after{content:"";position:absolute;inset:-6px;border:2px solid currentColor;border-radius:6px;opacity:0;pointer-events:none}
.atlas-word{font-size:16px;letter-spacing:.06em}
.atlas-card{animation:atlas-in .42s steps(4) calc(var(--i,0) * 45ms) both}
@keyframes atlas-in{from{opacity:0;transform:translateY(8px) scale(.94)}to{opacity:1;transform:none}}
.atlas-card.tier-rare .atlas-frame::after{animation:frame-tick 2.6s steps(1) infinite}
.atlas-card.tier-epic .atlas-frame::after{animation:frame-tick 1.6s steps(1) infinite}
.atlas-card.tier-legendary .atlas-frame{animation:frame-glow 1.8s steps(3) infinite}
.atlas-card.tier-legendary .atlas-frame::after{border-style:dashed;animation:frame-march 1.2s steps(2) infinite}
.atlas-card:hover .atlas-frame::after{opacity:.75;animation:none}
@keyframes frame-tick{0%,62%{opacity:0;inset:-6px}63%,80%{opacity:.55;inset:-4px}81%,100%{opacity:0;inset:-6px}}
@keyframes frame-glow{0%,100%{box-shadow:inset 0 0 0 4px #0c0c0e,inset 0 0 0 5px rgba(242,184,75,.45),0 0 8px rgba(242,184,75,.18)}50%{box-shadow:inset 0 0 0 4px #0c0c0e,inset 0 0 0 5px rgba(242,184,75,.8),0 0 18px rgba(242,184,75,.38)}}
@keyframes frame-march{0%{opacity:.6;inset:-5px}50%{opacity:.35;inset:-7px}100%{opacity:.6;inset:-5px}}
/* Unrevealed card (creator 2026-10-01): near-black field, a soft drifting light and HomeVideo
   question marks floating at different sizes and angles, so it reads as hidden art, not a reveal.
   The word is bigger, in the card font, with a hard 3+3 px shadow to the bottom right. */
.atlas-frame{background:#050506;overflow:visible}
.atlas-frame::before{display:block;content:"";position:absolute;inset:5px;z-index:0;height:auto;border-radius:2px;opacity:1;transform:none;-webkit-mask:none;mask:none;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.10),rgba(255,255,255,.03) 34%,transparent 62%) no-repeat;background-size:170% 170%;background-position:10% 0%;animation:veil-light 9s ease-in-out infinite alternate}
@keyframes veil-light{0%{background-position:10% 0%}50%{background-position:90% 40%}100%{background-position:30% 100%}}
.atlas-veil{position:absolute;inset:5px;z-index:1;width:calc(100% - 10px);height:calc(100% - 10px);overflow:hidden;pointer-events:none;font-family:HomeVideo,'Courier New',monospace}
.atlas-veil .veil-q{fill:currentColor;opacity:var(--o,.15);transform-box:fill-box;transform-origin:center;animation:veil-drift var(--dur,7s) ease-in-out var(--delay,0s) infinite alternate}
.atlas-veil .veil-q.bright{fill:var(--white)}
@keyframes veil-drift{0%{transform:translate(0,0) rotate(0deg);opacity:var(--o,.15)}50%{opacity:calc(var(--o,.15) * .45)}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--dr));opacity:var(--o,.15)}}
.atlas-word{position:relative;z-index:2;font:400 27px/1 HomeVideo,'Courier New',monospace;letter-spacing:.04em;text-shadow:3px 3px 0 #000}
.atlas-veil-label{position:absolute;left:0;right:0;bottom:9px;z-index:2;text-align:center;color:currentColor;opacity:.6;font:11px/1 DepartureMono,'Courier New',monospace;letter-spacing:.12em}
.atlas-stamp{z-index:3}
@media(max-width:600px){.atlas-grid{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:12px 10px}.atlas-word{font-size:20px}.atlas-veil-label{font-size:9px;bottom:7px;letter-spacing:.08em}}
@media(prefers-reduced-motion:reduce){.atlas-card,.atlas-frame,.atlas-frame::before,.atlas-frame::after,.atlas-veil .veil-q,.board-pin{animation:none!important}}

/* share card 1200x630, same look as the link preview */
.share-canvas{width:min(100%,560px);aspect-ratio:1200/630;border-radius:14px}

/* phase strip v2 (2026-10-01): dithered pills, a caption under each, and a WL
   bracket over TEAM, GTD and FCFS. */
.phase-strip ol.phase-list{display:grid;grid-template-columns:repeat(4,auto);justify-content:center;column-gap:14px;row-gap:16px;align-items:start}
.phase-strip li.phase{padding:0;border:0;background:none!important;box-shadow:none;display:grid;justify-items:center;gap:8px;font-size:inherit}
.phase-strip li.phase:not(:last-child)::after{top:21px;transform:translateY(-50%);left:calc(100% + 2px)}
.phase-strip li.phase:nth-child(4)::after{display:none}
.phase-pill{position:relative;overflow:hidden;isolation:isolate;display:block;padding:12px 18px;border-radius:999px;font:12px/1 DepartureMono,monospace;font-weight:400;color:#dfe1d9;background:rgba(42,42,47,.7)}
.phase-pill.team{border:1px solid #f3f1ec;box-shadow:inset 0 1px 0 #ffffff22}
.phase-pill.metal-phase{border:1px solid var(--metal-edge);background:linear-gradient(135deg,var(--metal-dark),#171719 55%,var(--metal-dark));box-shadow:inset 0 1px 0 #ffffff22,0 3px 8px #0005}
.phase-pill::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--metal-mid,#f3f1ec);opacity:.16;-webkit-mask:var(--dither-25) 0 0/4px 4px;mask:var(--dither-25) 0 0/4px 4px;pointer-events:none}
.phase-pill::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,transparent,var(--metal-light,#fff) 50%,transparent);opacity:0;-webkit-mask:var(--dither-25) 0 0/4px 4px;mask:var(--dither-25) 0 0/4px 4px;transform:translateX(-100%);animation:pill-shine 5.5s steps(10) infinite}
.phase:nth-child(2) .phase-pill::after{animation-delay:.6s}.phase:nth-child(3) .phase-pill::after{animation-delay:1.2s}.phase:nth-child(4) .phase-pill::after{animation-delay:1.8s}
@keyframes pill-shine{0%,70%{opacity:0;transform:translateX(-100%)}72%{opacity:.35}88%{opacity:.35;transform:translateX(100%)}89%,100%{opacity:0;transform:translateX(100%)}}
.phase-pill span{position:relative;z-index:1}
.phase-strip li.phase small{font:10px/1 DepartureMono,monospace;letter-spacing:.06em;color:#9a9aa3;white-space:nowrap}
.phase-strip li.phase:nth-child(2) small{color:#dab458}
.phase-strip li.phase:nth-child(3) small{color:#b4c1d2}
.phase-strip li.phase-wl{grid-column:1/4;grid-row:2;position:relative;padding:0;margin:0 6px;height:18px;border:0;border-top:2px solid #ccff0199;border-radius:0;background:none!important;box-shadow:none;display:flex;justify-content:center}
.phase-strip li.phase-wl::before,.phase-strip li.phase-wl::after{content:"";position:absolute;top:-9px;width:2px;height:9px;background:#ccff0199;transform:none;left:0}
.phase-strip li.phase-wl::after{left:auto;right:0;display:block}
.phase-strip li.phase-wl span{margin-top:-8px;padding:0 8px;background:#121214;font:10px/1 DepartureMono,monospace;letter-spacing:.12em;color:var(--lime)}
.phase-strip li.phase{grid-row:1}
@media(max-width:700px){.phase-strip ol.phase-list{justify-content:start;column-gap:9px}.phase-pill{padding:10px 12px;font-size:11px}.phase-strip li.phase small{font-size:9px}}
@media(max-width:380px){.phase-pill{padding:9px 9px;font-size:10px}.phase-strip ol.phase-list{column-gap:7px}}
@media(prefers-reduced-motion:reduce){.phase-pill::after{animation:none!important}}

/* preliminary zone on every board row + personal GTD chance */
.board-zone{font:10px/1 DepartureMono,monospace;letter-spacing:.06em;padding:3px 5px;border:1px solid currentColor;border-radius:4px;justify-self:end;opacity:.85}
.board-zone.gtd{color:#dab458}
.board-zone.fcfs{color:#b4c1d2}
.board-row{grid-template-columns:58px 1fr 44px 48px 70px}
@media(max-width:600px){.board-row{grid-template-columns:46px 1fr 34px 42px 54px;gap:7px}.board-zone{font-size:9px;padding:2px 4px}}
.me-chance{margin:10px 0 2px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(12,12,14,.4)}
.me-chance-head{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 8px;font:12px/1 DepartureMono,monospace;color:#9a9aa3;letter-spacing:.06em}
.me-chance-head b{font:22px/1 HomeVideo,monospace;color:var(--white)}
.me-chance.high .me-chance-head b{color:var(--lime)}
.me-chance.mid .me-chance-head b{color:#f2b84b}
.me-chance.low .me-chance-head b{color:#ff8792}
.me-chance-bar{display:block;height:10px;border-radius:2px;background:#ffffff10;overflow:hidden}
.me-chance-bar i{display:block;height:100%;width:calc(var(--k,0) * 100%);background:currentColor;color:var(--lime);-webkit-mask:var(--dither-25) 0 0/4px 4px,linear-gradient(#000,#000);-webkit-mask-composite:source-over;transition:width .6s steps(8)}
.me-chance.mid .me-chance-bar i{color:#f2b84b}.me-chance.low .me-chance-bar i{color:#ff8792}
.me-chance-note{margin:8px 0 0;font:10px/1.5 DepartureMono,monospace;color:#9a9aa3}

/* daily tiles x2 (2026-10-01): letters twice as big, sized to the tile so phones fit */
.daily-tiles{container-type:inline-size}
.daily-tiles span{font-size:clamp(68px,6.8vw,100px);font-size:min(20cqw,100px)}

/* WASD back button: the same pixel arrow as next to APPLY */
.hub-back>span[aria-hidden]{font:400 20px/1 HomeVideo,'Courier New',monospace;color:var(--lime);transform:translateY(-1px)}
@media(max-width:600px){.hub-back>span[aria-hidden]{font-size:17px}}


/* ==========================================================================
   2026-10-03 (creator): 8 tiers, 3 neutral pips, rarity revealed only after a
   solve, atlas motion that grows with the tier (Common still -> Genesis holo).
   ========================================================================== */
@property --spin{syntax:'<angle>';inherits:false;initial-value:0deg}
:root{--t-uncommon:#7be3a1;--t-mythic:#ff4f8b;--t-immortal:#7ff6ff;--t-genesis:var(--lime)}
.tier-uncommon,.atlas-card.tier-uncommon{color:var(--t-uncommon)}
.tier-mythic,.atlas-card.tier-mythic{color:var(--t-mythic)}
.tier-immortal,.atlas-card.tier-immortal{color:var(--t-immortal)}
.tier-genesis,.atlas-card.tier-genesis{color:var(--t-genesis)}
.slot-tier{animation:tier-pop .5s cubic-bezier(.2,1.6,.4,1) both}
@keyframes tier-pop{from{opacity:0;transform:scale(1.8)}}
/* One neutral pip per word of the cycle; no tier colours during play. */
.slot-pips{grid-template-columns:repeat(var(--n,3),1fr);max-width:240px;gap:8px}
.slot-pips .pip{height:10px;--pc:var(--lime)}
.slot-pips .pip:not(.won):not(.lost):not(.now)::before{background:#fff;opacity:.28}
/* Reveal flash for the top tiers (Epic and Legendary flashes stay as they were). */
.flash.mythic{background:radial-gradient(circle at 50% 45%,rgba(255,79,139,.42),rgba(255,79,139,.1) 45%,transparent 72%)}
.flash.mythic::after{background:var(--t-mythic);opacity:.14}
.flash.immortal{background:radial-gradient(circle at 50% 45%,rgba(127,246,255,.45),rgba(196,123,255,.14) 45%,transparent 72%)}
.flash.immortal::after{background:var(--t-immortal);opacity:.16}
.flash.genesis{background:radial-gradient(circle at 50% 45%,rgba(204,255,1,.5),rgba(91,108,255,.2) 45%,transparent 75%)}
.flash.genesis::after{background:var(--t-genesis);opacity:.2}
/* Atlas ladder: Common still, Uncommon breathes, Rare ticks, Epic glows, Legendary
   glows gold with a marching ring, Mythic shifts colour, Immortal spins a prism
   ring, Genesis spins the brand ring with a holo sweep over the card. */
.atlas-card.tier-uncommon .atlas-frame{animation:frame-pulse 3.2s ease-in-out infinite}
.atlas-card.tier-epic .atlas-frame{animation:frame-glow-cur 2.2s ease-in-out infinite}
.atlas-card.tier-mythic{animation:atlas-in .42s steps(4) calc(var(--i,0) * 45ms) both,mythic-shift 4s ease-in-out infinite}
.atlas-card.tier-mythic .atlas-frame{animation:frame-glow-cur 1.6s ease-in-out infinite}
.atlas-card.tier-mythic .atlas-frame::after{border-style:dashed;animation:frame-march .8s steps(2) infinite}
.atlas-card.tier-immortal .atlas-frame,.atlas-card.tier-genesis .atlas-frame{animation:frame-glow-cur 1.4s ease-in-out infinite}
.atlas-card.tier-immortal .atlas-frame::after,.atlas-card.tier-genesis .atlas-frame::after{opacity:1;inset:-6px;border:0;padding:3px;border-radius:7px;
  background:conic-gradient(from var(--spin),#7ff6ff,#c47bff,#ff4f8b,#f2b84b,#7ff6ff);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:spin-ring 3.2s linear infinite}
.atlas-card.tier-genesis .atlas-frame::after{background:conic-gradient(from var(--spin),#ccff01,#5b6cff,#ff3d8b,#ff6f00,#ccff01);animation-duration:2s}
.atlas-card.tier-genesis .atlas-frame::before{background:linear-gradient(115deg,transparent 30%,rgba(204,255,1,.2) 44%,rgba(91,108,255,.2) 56%,transparent 70%) no-repeat;background-size:260% 100%;animation:holo-sweep 2.8s linear infinite}
.atlas-card.tier-immortal:hover .atlas-frame::after,.atlas-card.tier-genesis:hover .atlas-frame::after{opacity:1;animation:spin-ring 1.2s linear infinite}
@keyframes frame-pulse{0%,100%{box-shadow:inset 0 0 0 4px #0c0c0e,inset 0 0 0 5px color-mix(in srgb,currentColor 22%,transparent)}50%{box-shadow:inset 0 0 0 4px #0c0c0e,inset 0 0 0 5px color-mix(in srgb,currentColor 60%,transparent)}}
@keyframes frame-glow-cur{0%,100%{box-shadow:inset 0 0 0 4px #0c0c0e,inset 0 0 0 5px color-mix(in srgb,currentColor 45%,transparent),0 0 7px color-mix(in srgb,currentColor 18%,transparent)}50%{box-shadow:inset 0 0 0 4px #0c0c0e,inset 0 0 0 5px color-mix(in srgb,currentColor 85%,transparent),0 0 20px color-mix(in srgb,currentColor 42%,transparent)}}
@keyframes mythic-shift{0%,100%{color:#ff4f8b}50%{color:#ff8a3d}}
@keyframes spin-ring{to{--spin:360deg}}
@keyframes holo-sweep{0%{background-position:130% 0}100%{background-position:-30% 0}}
@media(prefers-reduced-motion:reduce){.slot-tier,.atlas-card.tier-mythic,.atlas-card .atlas-frame,.atlas-card .atlas-frame::before,.atlas-card .atlas-frame::after{animation:none!important}}
/* 2026-10-03 (creator): the step badge is a true square and the done tick is a 7x5 pixel
   check (2px pixels) sitting dead centre, no padding pushing it into a rectangle. */
.step-index{width:20px;min-width:0;height:20px;padding:0;box-sizing:border-box;line-height:1}
.step-item.done .step-index::before{display:block;width:14px;height:10px;margin:0;-webkit-mask-size:14px 10px;mask-size:14px 10px}
/* 2026-10-03 (creator), round 2: bolder 8x5 pixel check with a 2-pixel stroke, in a 22px
   square; lifted 1px so it sits in the optical centre (the heavy vertex pulls it down). */
.step-index{width:22px;height:22px}
.step-item.done .step-index::before{width:16px;height:10px;transform:translateY(-1px);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5' shape-rendering='crispEdges'%3E%3Cpath d='M6 0h2v1H6zM5 1h2v1H5zM0 2h2v1H0zM4 2h2v1H4zM1 3h4v1H1zM2 4h2v1H2z'/%3E%3C/svg%3E") center/16px 10px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5' shape-rendering='crispEdges'%3E%3Cpath d='M6 0h2v1H6zM5 1h2v1H5zM0 2h2v1H0zM4 2h2v1H4zM1 3h4v1H1zM2 4h2v1H2z'/%3E%3C/svg%3E") center/16px 10px no-repeat}
/* 2026-10-03 (creator), round 3: the check sat too high. Pinned to exact pixels inside the
   20px inner square: 2px left/right, 6px above, 4px below. */
.step-item.done .step-index::before{position:absolute;left:2px;top:6px;transform:none}