:root { --ink:#090626; --ink-soft:#17104a; --surface:rgba(15,10,58,.82); --surface-strong:rgba(17,11,70,.94); --line:rgba(232,219,255,.22); --white:#fcf7ff; --muted:#c1b5df; --cyan:#48ecff; --blue:#43a9ff; --pink:#ff4bac; --orange:#ff724d; --yellow:#ffe268; --purple:#a671ff; --lime:#80f6b0; }
* { box-sizing:border-box; } html { background:var(--ink); } body { min-width:320px; min-height:100vh; margin:0; overflow-x:hidden; color:var(--white); background:url("../assets/cartoon-disc-chomp-background.png") center/cover fixed,#11073f; font-family:"Space Grotesk",sans-serif; }
body::before { content:""; position:fixed; z-index:0; inset:0; pointer-events:none; background:transparent; } button,input,select { font:inherit; } button { cursor:pointer; } button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid var(--yellow); outline-offset:3px; } a { color:inherit; }
.arcade-sheen { position:fixed; z-index:0; inset:0; pointer-events:none; opacity:.035; background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.18) 3px 4px); mix-blend-mode:screen; }
.app-shell { position:relative; z-index:1; width:min(1380px,100%); min-height:100vh; margin:0 auto; padding:18px clamp(16px,3vw,42px) 15px; }
.topbar { display:flex; align-items:center; justify-content:space-between; min-height:84px; gap:22px; border-bottom:1px solid var(--line); }.brand { display:flex; align-items:center; gap:12px; flex:0 0 auto; color:var(--white); text-decoration:none; line-height:.74; }.brand strong { display:block; font:400 clamp(19px,2.4vw,28px)/.78 "Archivo Black",sans-serif; letter-spacing:-.08em; transform:skew(-7deg); }.brand small { display:block; margin-top:10px; color:var(--cyan); font:500 9px/1 "DM Mono",monospace; letter-spacing:.19em; }.brand-mark { position:relative; width:36px; height:40px; display:block; overflow:hidden; transform:skew(-8deg); border:2px solid var(--cyan); border-radius:5px; box-shadow:0 0 15px rgba(72,236,255,.7),inset 0 0 12px rgba(72,236,255,.16); }.brand-mark i { position:absolute; bottom:7px; left:6px; width:9px; height:19px; background:var(--cyan); box-shadow:0 0 10px var(--cyan); }.brand-mark i+ i { left:20px; height:28px; background:var(--orange); box-shadow:0 0 10px var(--orange); }.topbar-message { display:grid; justify-items:center; gap:7px; text-align:center; color:#dfd3f4; font:500 9px/1 "DM Mono",monospace; letter-spacing:.13em; }.eyebrow { color:var(--yellow); font:500 10px/1 "DM Mono",monospace; letter-spacing:.17em; }.site-nav { display:flex; align-items:center; gap:5px; }.site-nav a { display:flex; align-items:center; justify-content:center; gap:5px; min-height:38px; padding:0 8px; color:#d9cfec; border:1px solid transparent; text-decoration:none; font:500 8px/1 "DM Mono",monospace; letter-spacing:.07em; text-transform:uppercase; transition:transform .17s ease,border-color .17s ease,background .17s ease; }.site-nav a span { display:block; color:var(--muted); font-size:13px; line-height:.9; }.site-nav a small { display:block; color:inherit; font:inherit; }.site-nav a:hover,.site-nav a[aria-current="page"] { color:var(--white); border-color:rgba(255,255,255,.3); background:rgba(66,41,132,.52); transform:translateY(-2px); }.site-nav a[aria-current="page"] span { color:var(--yellow); }
.lobby-hero { display:grid; grid-template-columns:minmax(300px,.84fr) minmax(360px,1.16fr); align-items:center; gap:34px; padding:clamp(30px,5vw,68px) clamp(4px,3vw,38px) 29px; }.hero-copy h1,.page-hero h1 { margin:11px 0 13px; font:400 clamp(43px,6.4vw,79px)/.79 "Archivo Black",sans-serif; letter-spacing:-.09em; text-shadow:0 7px 0 rgba(6,3,32,.42); }.hero-copy h1 em,.page-hero h1 em { color:var(--yellow); font-style:normal; }.hero-copy p { max-width:440px; margin:0; color:#e0d7ed; font:500 14px/1.55 "DM Mono",monospace; }.hero-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:19px; }.hero-tags span { padding:7px 9px; border:1px solid rgba(72,236,255,.42); background:rgba(37,20,104,.56); color:var(--cyan); font:500 9px/1 "DM Mono",monospace; letter-spacing:.1em; }.hero-arena { position:relative; min-height:274px; overflow:hidden; border:1px solid rgba(255,255,255,.22); border-radius:22px; background:radial-gradient(ellipse at 50% 50%,rgba(74,62,203,.54),rgba(40,17,99,.76) 58%,rgba(15,8,54,.92)); box-shadow:inset 0 0 0 6px rgba(255,255,255,.035),0 18px 47px rgba(0,0,0,.35),0 0 38px rgba(255,67,180,.16); }.hero-arena::before { content:""; position:absolute; inset:0; background:repeating-radial-gradient(ellipse at 50% 50%,transparent 0 33px,rgba(255,255,255,.026) 34px 35px); }.hero-arena strong { position:absolute; z-index:2; top:50%; left:50%; transform:translate(-50%,-50%) rotate(-8deg); color:var(--yellow); font:400 43px/1 "Archivo Black",sans-serif; letter-spacing:-.09em; text-shadow:3px 4px 0 #382061; }.hero-orbit { position:absolute; z-index:0; width:131%; height:70%; left:-16%; border:2px solid; border-radius:50%; opacity:.6; }.orbit-one { top:16%; border-color:var(--cyan); transform:rotate(-18deg); }.orbit-two { top:35%; border-color:var(--pink); transform:rotate(18deg); }.hero-chomper { position:absolute; z-index:2; width:145px; height:145px; bottom:34px; border-radius:47% 53% 50% 50%; box-shadow:inset -12px -13px 19px rgba(0,0,0,.22),inset 9px 9px 12px rgba(255,255,255,.4),0 10px 22px rgba(0,0,0,.28); }.hero-chomper::before,.hero-chomper::after { content:""; position:absolute; top:34px; width:27px; height:35px; border-radius:50%; background:#fff; box-shadow:inset 2px -2px 2px rgba(0,0,0,.1); }.hero-chomper::before { left:41px; }.hero-chomper::after { left:75px; }.hero-chomper i { position:absolute; z-index:3; top:46px; width:11px; height:15px; border-radius:50%; background:#211148; box-shadow:43px 0 #211148; }.hero-chomper b { position:absolute; z-index:2; top:79px; left:31px; width:93px; height:48px; border-radius:48% 48% 56% 56%; background:#321036; box-shadow:inset 0 -8px 0 #ff77a6; }.hero-chomper--blue { left:10%; background:linear-gradient(135deg,#7bf6ff,#109de1 58%,#1867bf); transform:rotate(-9deg); }.hero-chomper--blue i { left:51px; }.hero-chomper--orange { right:10%; background:linear-gradient(135deg,#ffd36e,#ff7548 57%,#d53a74); transform:rotate(9deg) scaleX(-1); }.hero-chomper--orange i { left:51px; }.hero-disc { position:absolute; z-index:3; width:41px; aspect-ratio:1; border-radius:50%; box-shadow:inset -5px -7px 5px rgba(0,0,0,.42),inset 4px 3px 5px rgba(255,255,255,.35),0 6px 9px rgba(0,0,0,.3); }.hero-disc--black { top:112px; left:38%; background:radial-gradient(circle at 33% 25%,#6a637b,#1c1732 42%,#030309); transform:rotate(-20deg); }.hero-disc--white { top:142px; right:36%; background:radial-gradient(circle at 33% 25%,#fff,#dfd8e9 44%,#8e85a7); transform:rotate(22deg); }
.lobby-grid { display:grid; grid-template-columns:1fr 1.12fr .72fr; gap:16px; align-items:stretch; }.surface { border:1px solid var(--line); background:linear-gradient(145deg,rgba(47,26,109,.77),rgba(11,7,49,.86)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 14px 33px rgba(0,0,0,.2); }.create-surface,.join-surface,.network-surface { min-height:387px; padding:20px; }.surface h2 { margin:10px 0 14px; font:400 22px/1 "Archivo Black",sans-serif; letter-spacing:-.055em; }.surface label { display:grid; gap:7px; margin-top:12px; color:#e1d6f1; font:500 9px/1 "DM Mono",monospace; letter-spacing:.11em; }.surface input,.surface select { width:100%; height:40px; padding:0 11px; color:var(--white); border:1px solid rgba(217,196,255,.28); border-radius:3px; outline:0; background:rgba(8,5,38,.69); font:500 12px "Space Grotesk",sans-serif; }.surface select option { color:#fff; background:#201052; }.surface input::placeholder { color:#9387ae; }.check-row { display:flex!important; align-items:center; gap:8px!important; margin-top:15px!important; color:#c9bde0!important; font-size:8px!important; }.check-row input { width:15px!important; height:15px!important; accent-color:var(--cyan); }.primary-button,.secondary-button,.danger-button,.leave-button { min-height:40px; border:1px solid; font:500 10px "DM Mono",monospace; letter-spacing:.1em; transition:transform .18s ease,filter .18s ease,background .18s ease; }.primary-button { width:100%; margin-top:17px; color:#261c47; border-color:var(--yellow); background:var(--yellow); box-shadow:0 0 15px rgba(255,226,104,.2); }.primary-button:hover:not(:disabled) { transform:translateY(-3px); filter:brightness(1.12); }.primary-button:disabled,.danger-button:disabled { cursor:not-allowed; opacity:.45; }.secondary-button { padding:0 14px; color:var(--cyan); border-color:rgba(72,236,255,.56); background:rgba(72,236,255,.08); }.secondary-button:hover { color:#07132f; background:var(--cyan); }.danger-button { width:100%; margin-top:8px; color:#ffb4bf; border-color:rgba(255,93,117,.55); background:rgba(255,68,110,.1); }.danger-button:hover:not(:disabled) { color:#fff; background:rgba(255,68,110,.31); }.status-line { display:block; min-height:20px; margin-top:10px; color:var(--lime); font:500 9px/1.35 "DM Mono",monospace; letter-spacing:.04em; }.status-line:not(:empty)::before { content:"▸ "; color:var(--cyan); }.join-surface { display:flex; flex-direction:column; }.join-surface > p { margin:0 0 15px; color:#cbbfdb; font:500 11px/1.45 "DM Mono",monospace; }.join-code-row { display:grid; grid-template-columns:1fr auto; gap:7px; }.join-code-row input { height:41px; padding:0 11px; color:var(--yellow); border:1px solid rgba(255,226,104,.45); background:rgba(8,5,38,.64); font:500 16px "DM Mono",monospace; letter-spacing:.12em; text-transform:uppercase; }.lobby-divider { display:grid; place-items:center; grid-template-columns:1fr auto 1fr; gap:9px; margin:18px 0 12px; color:#978ab1; font:500 9px/1 "DM Mono",monospace; letter-spacing:.12em; }.lobby-divider::before,.lobby-divider::after { content:""; height:1px; background:var(--line); }.open-rooms-head { display:flex; justify-content:space-between; align-items:center; color:#ddd2ed; font:500 9px/1 "DM Mono",monospace; letter-spacing:.12em; }.text-button { padding:0; color:var(--cyan); border:0; background:transparent; font:500 9px "DM Mono",monospace; letter-spacing:.09em; text-decoration:underline; text-underline-offset:3px; }.text-button:hover { color:var(--yellow); }.room-list { display:grid; gap:7px; min-height:112px; max-height:205px; margin:10px 0 0; padding:0; overflow:auto; list-style:none; }.room-list li { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; padding:10px; border:1px solid rgba(188,159,255,.22); background:rgba(7,4,38,.54); }.room-list li:hover { border-color:var(--cyan); }.room-list strong { display:block; overflow:hidden; color:#fff; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }.room-list small { display:block; margin-top:3px; color:#b9acd1; font:500 8px/1.3 "DM Mono",monospace; }.room-list button { min-height:28px; padding:0 8px; color:#162148; border:0; background:var(--cyan); font:500 8px "DM Mono",monospace; letter-spacing:.07em; }.network-surface { display:flex; flex-direction:column; border-left:3px solid var(--pink); background:linear-gradient(155deg,rgba(123,39,132,.68),rgba(19,9,65,.9)); }.network-light { display:flex; align-items:center; gap:8px; margin:19px 0 12px; color:var(--lime); font:400 27px/1 "Archivo Black",sans-serif; }.network-light i { width:13px; height:13px; border-radius:50%; background:var(--lime); box-shadow:0 0 14px var(--lime); animation:network-pulse 1.35s ease-in-out infinite; }.network-surface p { margin:0; color:#e3d6eb; font:500 11px/1.5 "DM Mono",monospace; }.network-surface dl { display:grid; gap:10px; margin:21px 0; }.network-surface dl div { display:flex; justify-content:space-between; gap:8px; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,.12); }.network-surface dt { color:#b9acd4; font:500 8px "DM Mono",monospace; letter-spacing:.1em; }.network-surface dd { margin:0; color:var(--yellow); font:500 8px "DM Mono",monospace; letter-spacing:.08em; text-align:right; }.inline-link { margin-top:auto; color:var(--cyan); font:500 9px "DM Mono",monospace; letter-spacing:.1em; text-decoration:none; }.inline-link span { color:var(--yellow); font-size:16px; }
.footer-bar { display:flex; justify-content:space-between; gap:15px; margin-top:22px; padding:13px 2px 0; border-top:1px solid var(--line); color:#beb1d5; font:500 8px/1.4 "DM Mono",monospace; letter-spacing:.1em; }.footer-bar b,.footer-bar a { color:var(--yellow); text-decoration:none; }
.match-strip { display:flex; align-items:center; gap:clamp(14px,3vw,38px); min-height:62px; padding:12px 0; border-bottom:1px solid var(--line); }.match-strip > div { display:grid; gap:4px; }.match-strip span { color:#b8abd3; font:500 8px/1 "DM Mono",monospace; letter-spacing:.12em; }.match-strip strong { color:#fff; font:400 16px/1 "Archivo Black",sans-serif; letter-spacing:-.04em; }.match-strip > div:nth-child(2) strong { color:var(--yellow); }.match-strip > div:nth-child(3) strong { color:var(--lime); font-size:12px; letter-spacing:.02em; }.leave-button { margin-left:auto; padding:0 12px; color:#ffc5d0; border-color:rgba(255,104,133,.52); background:rgba(255,68,110,.13); }.leave-button:hover { color:#fff; background:rgba(255,68,110,.35); }.room-readout { display:flex; align-items:center; gap:10px; margin-left:auto; }.room-readout strong { color:var(--yellow); font:400 20px/1 "Archivo Black",sans-serif; letter-spacing:.09em; }
.multiplayer-game-layout { display:grid; grid-template-columns:208px minmax(390px,630px) 208px; justify-content:center; align-items:center; gap:clamp(18px,3.2vw,46px); padding:31px 0 21px; }.game-sidebar { display:grid; gap:13px; }.player-card { min-height:128px; padding:15px; overflow:hidden; }.player-card--black { border-left:3px solid #161121; }.player-card--white { border-left:3px solid #fff7e8; }.player-card-heading { display:flex; align-items:center; gap:7px; margin-top:10px; }.player-card-heading strong { overflow:hidden; color:#fff; font:400 16px/1 "Archivo Black",sans-serif; letter-spacing:-.05em; text-overflow:ellipsis; white-space:nowrap; }.online-dot { width:7px; height:7px; flex:0 0 auto; border-radius:50%; background:#716682; }.online-dot.is-online { background:var(--lime); box-shadow:0 0 8px var(--lime); }.score-clock { display:flex; align-items:end; justify-content:space-between; margin-top:9px; }.big-score { font:400 31px/.82 "Archivo Black",sans-serif; letter-spacing:-.08em; }.clock { color:var(--cyan); font:500 14px/1 "DM Mono",monospace; }.player-card--white .clock { color:#fff7e8; }.player-card p { margin:8px 0 0; color:#cbbfe1; font:500 8px/1 "DM Mono",monospace; letter-spacing:.09em; }.versus-stamp { display:grid; place-items:center; height:20px; color:var(--yellow); font:400 17px/1 "Archivo Black",sans-serif; transform:skew(-12deg); }.objective-card { padding:16px; border-left:3px solid var(--purple); }.objective-card p { margin:12px 0; color:#f2eaff; font:600 11px/1.5 "DM Mono",monospace; }.objective-card em { color:var(--purple); font-style:normal; }.rule-line { display:flex; align-items:center; gap:7px; color:#c4b8d9; font:500 8px/1.35 "DM Mono",monospace; letter-spacing:.08em; }.rule-line b { color:var(--yellow); font-size:13px; }
.game-center { min-width:0; }.turn-banner { display:flex; justify-content:space-between; align-items:center; min-height:56px; padding:0 3px 12px; }.turn-banner > div:first-child { display:grid; gap:7px; }.turn-banner strong { font:400 clamp(15px,2vw,19px)/1 "Archivo Black",sans-serif; letter-spacing:-.04em; }.turn-beacon { position:relative; display:grid; place-items:center; width:35px; height:35px; border:2px solid var(--lime); border-radius:50%; color:var(--lime); box-shadow:0 0 13px rgba(128,246,176,.4),inset 0 0 8px rgba(128,246,176,.18); font:500 6px "DM Mono",monospace; letter-spacing:.06em; }.turn-beacon i { position:absolute; inset:4px; border-top:2px solid var(--yellow); border-radius:50%; animation:spin 2.5s linear infinite; }.board-stage-multi { position:relative; padding:clamp(9px,1.55vw,13px); background:linear-gradient(135deg,#4ef3ff 0,#7c7cff 6%,#3d237c 18%,#2f145f 79%,#ff7859 100%); box-shadow:0 0 0 1px rgba(173,178,255,.7),0 19px 45px rgba(0,0,0,.48),0 0 45px rgba(255,78,180,.23); }.multi-board { display:grid; grid-template-columns:repeat(8,1fr); position:relative; aspect-ratio:1; overflow:hidden; border:1px solid rgba(224,216,255,.55); background:radial-gradient(circle at 50% 43%,#534bba,#252460 68%,#1d174c); box-shadow:inset 0 0 43px rgba(0,0,0,.47); }.multi-board::before { content:""; position:absolute; z-index:0; inset:0; pointer-events:none; background:repeating-linear-gradient(90deg,rgba(0,0,0,.13) 0 1px,transparent 1px 12.5%),repeating-linear-gradient(0deg,rgba(0,0,0,.11) 0 1px,transparent 1px 12.5%); }.multi-cell { position:relative; z-index:1; display:grid; place-items:center; aspect-ratio:1; padding:0; border:1px solid rgba(198,209,255,.17); background:linear-gradient(135deg,rgba(98,91,195,.5),rgba(36,31,96,.71)); }.multi-cell:nth-child(3n) { background:linear-gradient(135deg,rgba(86,72,176,.57),rgba(32,24,85,.74)); }.multi-cell.is-legal { cursor:pointer; }.multi-cell.is-legal:hover { z-index:2; background:linear-gradient(135deg,rgba(111,111,223,.9),rgba(56,42,151,.93)); }.multi-cell.is-legal::before { content:""; width:18%; aspect-ratio:1; border:1px solid rgba(255,226,104,.9); border-radius:50%; background:rgba(255,226,104,.28); box-shadow:0 0 12px var(--yellow); animation:move-pulse 1.2s ease-in-out infinite; }.multi-cell.is-last::after { content:""; position:absolute; inset:5px; border:1px solid var(--yellow); box-shadow:inset 0 0 9px rgba(255,226,104,.35); }.game-disc { width:75%; aspect-ratio:1; border-radius:50%; }.game-disc--black { background:radial-gradient(circle at 33% 26%,#605b71 0 5%,#292337 27%,#100d1a 62%,#040308); border:1px solid rgba(255,255,255,.26); box-shadow:inset -8px -10px 11px rgba(0,0,0,.7),inset 4px 3px 5px rgba(255,255,255,.15),0 4px 5px rgba(0,0,0,.53),0 0 11px rgba(0,0,0,.48); }.game-disc--white { background:radial-gradient(circle at 33% 25%,#fff 0 5%,#fff8e9 26%,#ded7e7 62%,#9388a7 100%); border:1px solid rgba(255,255,255,.9); box-shadow:inset -8px -10px 11px rgba(73,51,91,.39),inset 4px 3px 5px rgba(255,255,255,.78),0 4px 5px rgba(0,0,0,.53),0 0 12px rgba(255,255,255,.22); }.game-disc.place { animation:place .31s cubic-bezier(.17,.8,.3,1.25) both; }.game-disc.flip { animation:disc-flip .42s ease both; }.board-edge { position:absolute; z-index:3; width:21px; height:21px; pointer-events:none; }.edge-tl { top:-3px; left:-3px; border-top:3px solid var(--cyan); border-left:3px solid var(--cyan); }.edge-tr { top:-3px; right:-3px; border-top:3px solid var(--pink); border-right:3px solid var(--pink); }.edge-bl { bottom:-3px; left:-3px; border-bottom:3px solid var(--cyan); border-left:3px solid var(--cyan); }.edge-br { right:-3px; bottom:-3px; border-right:3px solid var(--orange); border-bottom:3px solid var(--orange); }.board-footer { display:flex; justify-content:space-between; gap:12px; padding:12px 3px 0; color:#c5b8d7; font:500 8px/1.2 "DM Mono",monospace; letter-spacing:.1em; }.board-footer b { color:var(--cyan); }.board-footer strong { color:var(--yellow); }.board-footer span:last-child { text-align:right; }
.grid-intel,.action-surface,.feed-surface { padding:15px; }.intel-row { display:flex; justify-content:space-between; align-items:baseline; margin-top:16px; color:#c7badc; font:500 8px/1 "DM Mono",monospace; letter-spacing:.08em; }.intel-row strong { color:#fff; font-size:10px; }.score-meter { display:flex; height:9px; margin:12px 0 8px; overflow:hidden; background:rgba(6,4,30,.75); box-shadow:inset 0 1px 4px rgba(0,0,0,.6); }.score-meter i { display:block; transition:width .3s ease; }.score-meter i:first-child { width:50%; background:linear-gradient(90deg,#0b0914,#4a3e5c); }.score-meter i:last-child { width:50%; background:linear-gradient(90deg,#ddd6ec,#fffdf5); }.score-meter-labels { display:flex; justify-content:space-between; color:#d9cced; font:500 8px/1 "DM Mono",monospace; letter-spacing:.06em; }.score-meter-labels b { color:var(--yellow); font-weight:500; }.action-surface .primary-button { margin-top:12px; }.action-surface p { min-height:30px; margin:12px 0 0; color:#c4b7d7; font:500 8px/1.4 "DM Mono",monospace; letter-spacing:.06em; }.feed-surface { min-height:134px; }.event-feed { display:grid; gap:8px; margin:12px 0 0; padding:0; list-style:none; }.event-feed li { position:relative; padding-left:11px; color:#dcd2e9; font:500 8px/1.35 "DM Mono",monospace; }.event-feed li::before { content:""; position:absolute; top:3px; left:0; width:4px; height:4px; border-radius:50%; background:var(--pink); box-shadow:0 0 6px var(--pink); }.event-feed li:first-child::before { background:var(--yellow); box-shadow:0 0 6px var(--yellow); }
.modal { position:fixed; z-index:20; inset:0; display:grid; place-items:center; padding:20px; background:rgba(6,3,31,.78); backdrop-filter:blur(8px); }.modal[hidden] { display:none; }.modal-card { width:min(405px,100%); padding:30px 26px; text-align:center; border:1px solid rgba(255,255,255,.36); background:linear-gradient(145deg,#542581,#140b49); box-shadow:0 25px 70px rgba(0,0,0,.64),0 0 45px rgba(255,75,172,.29); }.modal-card h1 { margin:13px 0 9px; font:400 34px/.88 "Archivo Black",sans-serif; letter-spacing:-.08em; }.modal-card p { margin:0; color:#e4d9ef; font:500 11px/1.45 "DM Mono",monospace; }.final-score { display:flex; align-items:center; justify-content:center; gap:14px; margin:25px 0; }.final-score strong { font:400 37px/1 "Archivo Black",sans-serif; letter-spacing:-.09em; }.final-score i { color:var(--yellow); font:400 25px/1 "Archivo Black",sans-serif; }.black-disc,.white-disc { width:25px; aspect-ratio:1; border-radius:50%; }.black-disc { background:radial-gradient(circle at 33% 26%,#5c5666,#09070d 68%); }.white-disc { background:radial-gradient(circle at 33% 26%,#fff,#d7d0e1 70%); }.modal-link { display:inline-block; margin-top:13px; }
.page-hero { padding:clamp(35px,5vw,60px) 3px 28px; text-align:center; }.page-hero h1 { margin-bottom:10px; }.page-hero p { max-width:540px; margin:0 auto; color:#e0d5ef; font:500 12px/1.55 "DM Mono",monospace; }.leaderboard-surface { max-width:860px; margin:0 auto; padding:21px; }.section-head { display:flex; justify-content:space-between; align-items:center; }.leaderboard-list { display:grid; gap:7px; margin:18px 0 0; padding:0; list-style:none; counter-reset:rank; }.leaderboard-list li { display:grid; grid-template-columns:42px minmax(0,1fr) repeat(3,auto); align-items:center; gap:16px; padding:12px; border:1px solid rgba(209,190,255,.19); background:rgba(7,4,38,.55); }.leaderboard-list li::before { content:counter(rank,decimal-leading-zero); counter-increment:rank; color:var(--yellow); font:400 18px/1 "Archivo Black",sans-serif; letter-spacing:-.07em; }.leaderboard-list li:nth-child(-n+3) { border-color:rgba(255,226,104,.5); background:linear-gradient(90deg,rgba(123,94,34,.32),rgba(18,8,55,.62)); }.leaderboard-name { overflow:hidden; color:#fff; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }.leaderboard-meta { display:block; margin-top:2px; color:#baadd0; font:500 8px/1.3 "DM Mono",monospace; }.leaderboard-list b { color:var(--yellow); font:400 19px/1 "Archivo Black",sans-serif; letter-spacing:-.06em; }.leaderboard-list small { color:#cabce0; font:500 8px/1 "DM Mono",monospace; letter-spacing:.07em; }
.profile-grid { display:grid; grid-template-columns:minmax(250px,.78fr) minmax(330px,1.22fr); gap:17px; max-width:920px; margin:0 auto; }.player-profile-card { display:grid; justify-items:center; padding:24px; text-align:center; }.profile-orb { position:relative; display:grid; place-items:center; width:105px; aspect-ratio:1; margin:21px 0 14px; border-radius:50%; background:radial-gradient(circle at 33% 25%,#d8fdff 0 7%,#52eafc 28%,#2090e6 60%,#4a207c 100%); box-shadow:inset -12px -14px 17px rgba(48,16,100,.43),inset 7px 6px 8px rgba(255,255,255,.65),0 0 25px rgba(72,236,255,.49); }.profile-orb::before { content:""; position:absolute; inset:-10px; border:2px dotted rgba(255,226,104,.65); border-radius:50%; animation:spin 12s linear infinite; }.profile-orb b { color:#ffed87; font:400 43px/1 "Archivo Black",sans-serif; text-shadow:2px 3px 0 #3c1c70; }.player-profile-card > strong { font:400 21px/1 "Archivo Black",sans-serif; letter-spacing:-.06em; }.rating-readout { display:grid; gap:4px; margin:19px 0 13px; }.rating-readout span { color:#c3b5d6; font:500 8px/1 "DM Mono",monospace; letter-spacing:.12em; }.rating-readout b { color:var(--yellow); font:400 39px/.82 "Archivo Black",sans-serif; letter-spacing:-.08em; }.player-profile-card dl { display:grid; grid-template-columns:repeat(2,1fr); width:100%; gap:7px; margin:0; }.player-profile-card dl div { padding:9px; background:rgba(7,4,39,.45); }.player-profile-card dt { color:#bdaed2; font:500 7px/1 "DM Mono",monospace; letter-spacing:.1em; }.player-profile-card dd { margin:5px 0 0; color:#fff; font:400 18px/1 "Archivo Black",sans-serif; letter-spacing:-.06em; }.profile-editor { padding:25px; }.profile-editor h2 { font-size:27px; }.profile-editor p { margin:0 0 25px; color:#d5c9e6; font:500 12px/1.5 "DM Mono",monospace; }.profile-editor .primary-button { max-width:285px; }.rules-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:15px; max-width:1000px; margin:0 auto; }.rule-card { position:relative; min-height:184px; padding:23px; overflow:hidden; }.rule-card:nth-child(1){border-top:3px solid var(--cyan)}.rule-card:nth-child(2){border-top:3px solid var(--yellow)}.rule-card:nth-child(3){border-top:3px solid var(--pink)}.rule-card:nth-child(4){border-top:3px solid var(--lime)}.rule-number { display:block; color:rgba(255,255,255,.12); font:400 57px/.8 "Archivo Black",sans-serif; letter-spacing:-.12em; }.rule-card h2 { position:relative; margin:-5px 0 11px; font:400 23px/1 "Archivo Black",sans-serif; letter-spacing:-.06em; }.rule-card p { position:relative; max-width:390px; margin:0; color:#e0d4eb; font:500 11px/1.55 "DM Mono",monospace; }.tips-surface { max-width:1000px; margin:15px auto 0; padding:22px; }.tips-surface ul { display:grid; grid-template-columns:repeat(2,1fr); gap:10px 25px; margin:16px 0 0; padding:0; list-style:none; }.tips-surface li { position:relative; padding-left:15px; color:#e1d5ed; font:500 11px/1.45 "DM Mono",monospace; }.tips-surface li::before { content:"✦"; position:absolute; left:0; color:var(--yellow); }
@keyframes move-pulse { 50% { transform:scale(.65); opacity:.35; } } @keyframes network-pulse { 50% { transform:scale(.63); opacity:.45; } } @keyframes spin { to { transform:rotate(360deg); } } @keyframes place { 0% { transform:scale(.18); filter:brightness(2); } 65% { transform:scale(1.17); } 100% { transform:scale(1); } } @keyframes disc-flip { 0%{transform:rotateY(0)}48%{transform:rotateY(90deg);filter:brightness(1.7)}100%{transform:rotateY(0)} }
@media (max-width:1080px) { .topbar-message{display:none}.lobby-grid{grid-template-columns:1fr 1fr}.network-surface{grid-column:1/-1;min-height:auto;display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:14px}.network-light{margin:0}.network-surface p{max-width:330px}.network-surface dl{display:none}.network-surface .inline-link{margin-top:0}.multiplayer-game-layout{grid-template-columns:190px minmax(390px,620px);gap:25px}.right-game-sidebar{grid-column:1/-1;grid-row:2;grid-template-columns:1.1fr 1fr 1.1fr;align-items:stretch}.feed-surface{min-height:auto}.objective-card{display:none} }
@media (max-width:760px) { body{background-attachment:scroll,scroll,scroll}.app-shell{padding:10px 12px}.topbar{min-height:65px}.brand-mark{width:31px;height:35px}.brand strong{font-size:19px}.brand small{font-size:7px}.site-nav{gap:2px}.site-nav a{gap:3px;padding:0 4px;font-size:7px}.site-nav a span{font-size:11px}.lobby-hero{grid-template-columns:1fr;padding:31px 5px 23px;gap:23px}.hero-copy h1{font-size:51px}.hero-arena{min-height:215px}.hero-chomper{width:117px;height:117px;bottom:27px}.hero-chomper::before,.hero-chomper::after{top:27px;transform:scale(.8);transform-origin:top left}.hero-chomper::before{left:34px}.hero-chomper::after{left:62px}.hero-chomper i{top:38px;left:42px!important;transform:scale(.75);transform-origin:top left}.hero-chomper b{top:64px;left:25px;width:75px;height:38px}.lobby-grid,.profile-grid,.rules-grid{grid-template-columns:1fr}.network-surface{grid-column:auto;display:flex;min-height:0}.network-light{margin:15px 0 9px}.network-surface p{max-width:none}.network-surface dl{display:grid;margin:16px 0}.network-surface .inline-link{margin-top:auto}.footer-bar{font-size:7px}.footer-bar span:last-child{display:none}.match-strip{gap:11px;min-height:55px}.match-strip>div:first-child{max-width:110px}.match-strip strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.match-strip>div:nth-child(3){display:none}.leave-button{padding:0 8px;font-size:8px}.room-readout{gap:5px}.room-readout .eyebrow{display:none}.room-readout strong{font-size:14px}.multiplayer-game-layout{display:flex;flex-direction:column;gap:12px;padding-top:16px}.game-center{order:1;width:100%}.left-game-sidebar{order:2;width:100%;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}.right-game-sidebar{order:3;width:100%;grid-template-columns:1fr 1fr;gap:9px}.player-card{min-height:111px;padding:12px}.player-card-heading strong{font-size:13px}.big-score{font-size:27px}.clock{font-size:11px}.versus-stamp{font-size:14px}.grid-intel,.action-surface{padding:12px}.feed-surface{display:none}.board-footer{font-size:7px}.tips-surface ul{grid-template-columns:1fr}.page-hero{padding:35px 3px 21px}.page-hero h1{font-size:46px}.leaderboard-surface{padding:14px}.leaderboard-list li{grid-template-columns:33px minmax(0,1fr) auto;gap:8px;padding:10px}.leaderboard-list li small:last-child{display:none}.profile-editor{padding:20px}.rules-grid{gap:10px}.rule-card{min-height:156px}.rule-number{font-size:47px} }
@media (max-width:420px) { .brand{gap:8px}.site-nav a{padding:0 3px;font-size:6px;letter-spacing:.03em}.site-nav a span{font-size:9px}.hero-tags span{font-size:7px}.join-code-row{grid-template-columns:1fr}.secondary-button{height:36px}.left-game-sidebar{grid-template-columns:1fr auto 1fr}.player-card-heading{gap:4px}.player-card-heading strong{font-size:11px}.player-card p{font-size:7px}.clock{font-size:10px}.board-footer span:last-child{max-width:48%}.final-score{gap:10px}.modal-card{padding:26px 18px} }
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

.hero-actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:22px; }
.hero-actions .hero-quick-button { width:auto; min-width:145px; margin:0; padding:0 17px; }
.hero-actions .hero-create-button { min-width:195px; color:#fff5d4; border-color:rgba(255,226,104,.7); background:rgba(255,226,104,.13); }
.hero-actions .hero-create-button:hover { color:#251647; background:var(--yellow); }
@media (max-width:500px) { .hero-actions { display:grid; grid-template-columns:1fr; } .hero-actions .hero-quick-button,.hero-actions .hero-create-button { width:100%; min-width:0; } }

/* Keep the six destinations readable as a real page menu. */
.site-nav { gap:6px; }
.site-nav a { gap:6px; min-height:40px; padding:0 10px; color:#eee8fb; border-color:rgba(218,201,255,.2); background:rgba(28,14,84,.42); font-weight:600; font-size:9px; }
.site-nav a span { color:var(--cyan); font-size:14px; }
.site-nav a:hover,.site-nav a[aria-current="page"] { border-color:rgba(255,226,104,.78); background:rgba(77,43,151,.82); box-shadow:0 0 13px rgba(255,226,104,.18); }
/* On a phone the menu gets a row of its own under the brand, so the six links stay readable instead of shrinking to fit beside it. */
@media (max-width:760px) { .topbar { flex-wrap:wrap; row-gap:6px; padding-bottom:8px; } .site-nav { flex:1 1 100%; justify-content:space-between; gap:4px; } .site-nav a { flex:1 1 0; gap:4px; min-height:36px; padding:0 4px; font-size:8px; } .site-nav a span { font-size:12px; } }
@media (max-width:420px) { .site-nav { gap:3px; } .site-nav a { padding:0 2px; font-size:7px; letter-spacing:.03em; } .site-nav a span { font-size:10px; } }

/* The solo match against Chomp Bot: side and level chips, and the thinking beacon. */
.setup-choices { display:grid; gap:16px; margin:22px 0 4px; }
.setup-choices .eyebrow { display:block; margin-bottom:8px; }
.chip-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(88px,1fr)); gap:7px; }
.chip { display:grid; gap:5px; place-items:center; min-height:46px; padding:7px 8px; color:#e8dffb; border:1px solid rgba(218,201,255,.3); background:rgba(28,14,84,.55); font:500 9px/1 "DM Mono",monospace; letter-spacing:.09em; transition:transform .17s ease,border-color .17s ease,background .17s ease; }
.chip small { color:#b9acd1; font:500 7px/1.2 "DM Mono",monospace; letter-spacing:.05em; }
.chip:hover { transform:translateY(-2px); border-color:rgba(72,236,255,.7); }
.chip[aria-pressed="true"] { color:#261c47; border-color:var(--yellow); background:var(--yellow); box-shadow:0 0 15px rgba(255,226,104,.25); }
.chip[aria-pressed="true"] small { color:#4a3a6e; }
.setup-card .primary-button { margin-top:22px; }
.modal-links { display:flex; justify-content:center; gap:18px; margin-top:14px; }
.setup-readout { display:grid; gap:6px; margin-top:12px; padding-top:10px; border-top:1px solid rgba(255,255,255,.12); color:#c7badc; font:500 8px/1.3 "DM Mono",monospace; letter-spacing:.08em; }
.setup-readout span { display:flex; justify-content:space-between; gap:8px; }
.setup-readout b { color:var(--yellow); font-weight:500; text-align:right; white-space:nowrap; }
.block-button { width:100%; margin-top:8px; }
.turn-beacon.is-thinking { border-color:var(--yellow); color:var(--yellow); box-shadow:0 0 13px rgba(255,226,104,.5),inset 0 0 8px rgba(255,226,104,.2); }
.turn-beacon.is-thinking i { border-top-color:var(--pink); animation-duration:.7s; }