@import"https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@500;700;800&family=Space+Mono:wght@400;700&display=swap";:root{--ink: #2f3e46;--muted: #52796f;--paper: #cad2c5;--panel: rgba(202, 210, 197, .9);--line: rgba(47, 62, 70, .16);--hot: #84a98c;--gold: #cad2c5;--green: #84a98c;--indigo: #354f52;--shadow: 0 24px 70px rgba(47, 62, 70, .24);color:var(--ink);font-family:Bricolage Grotesque,Georgia,serif;background:var(--paper)}*{box-sizing:border-box}body{margin:0;min-width:320px}button,input,select{font:inherit}.screen{position:relative;display:grid;min-height:100vh;grid-template-columns:minmax(0,1.1fr) minmax(340px,520px);gap:clamp(24px,5vw,72px);align-items:center;overflow:hidden;padding:clamp(20px,5vw,72px);background:radial-gradient(circle at 15% 16%,rgba(132,169,140,.34),transparent 26%),radial-gradient(circle at 82% 78%,rgba(82,121,111,.26),transparent 24%),linear-gradient(135deg,#cad2c5,#a8bca9 45%,#52796f)}.auth-screen{grid-template-columns:minmax(320px,520px);justify-content:center}.screen:before{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;content:"";background-image:linear-gradient(rgba(47,62,70,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(47,62,70,.06) 1px,transparent 1px);background-size:38px 38px;-webkit-mask-image:linear-gradient(to bottom,black,transparent 85%);mask-image:linear-gradient(to bottom,black,transparent 85%)}.hero-panel,.card{position:relative;z-index:1}.auth-eyebrow{margin-bottom:18px}.hero-panel{max-width:760px;animation:rise .52s ease-out both}.eyebrow{margin:0 0 14px;color:var(--hot);font-family:Space Mono,monospace;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}h1,h2,p{margin-top:0}h1{max-width:820px;margin-bottom:22px;font-size:clamp(4rem,12vw,10rem);font-weight:800;letter-spacing:-.08em;line-height:.78}h2{margin-bottom:24px;font-size:clamp(2rem,4vw,3rem);letter-spacing:-.05em;line-height:.88}.hero-copy{max-width:560px;color:var(--muted);font-family:Space Mono,monospace;font-size:clamp(1rem,2vw,1.15rem);line-height:1.7}.orbit{position:relative;width:min(52vw,420px);height:130px;margin-top:42px}.orbit span{position:absolute;display:block;border:3px solid var(--ink);border-radius:999px;box-shadow:8px 8px #2f3e4624}.orbit span:nth-child(1){width:120px;height:120px;background:var(--hot);left:0;top:0}.orbit span:nth-child(2){width:86px;height:86px;background:var(--gold);left:118px;top:26px}.orbit span:nth-child(3){width:58px;height:58px;background:var(--green);left:210px;top:46px}.card{width:100%;border:2px solid var(--ink);border-radius:34px;padding:clamp(22px,4vw,36px);background:var(--panel);box-shadow:var(--shadow),8px 8px 0 var(--ink);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);animation:rise .52s .12s ease-out both}.switcher{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:28px;border:1px solid var(--line);border-radius:999px;padding:6px;background:#2f3e460f}.switcher button,.secondary{border:0;color:var(--muted);background:transparent;cursor:pointer}.switcher button{border-radius:999px;padding:12px 16px;font-family:Space Mono,monospace;font-weight:700}.switcher button.active{color:var(--paper);background:var(--ink)}form{display:grid;gap:18px}label{display:grid;gap:8px;color:var(--muted);font-family:Space Mono,monospace;font-size:.82rem;font-weight:700;text-transform:uppercase}input{width:100%;border:2px solid var(--line);border-radius:18px;padding:15px 16px;color:var(--ink);background:#ffffffbd;outline:none;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}input:focus{border-color:var(--hot);box-shadow:0 0 0 4px #84a98c38;transform:translateY(-1px)}.checkbox-row{display:flex;align-items:center;justify-content:space-between;gap:16px;color:var(--muted);font-family:Space Mono,monospace;font-size:.82rem;font-weight:700;text-transform:uppercase}.pro-toggle{position:relative;display:inline-flex;width:42px;height:24px;flex:0 0 auto;align-items:center;border:2px solid var(--ink);border-radius:999px;padding:2px;background:#2f3e461f}.pro-toggle-button{display:inline-flex;border:0;padding:0;background:transparent;cursor:pointer}.pro-toggle-button.is-locked{cursor:default}.pro-toggle.is-on{background:#354f523d}.pro-toggle-knob{display:block;width:16px;height:16px;border-radius:999px;background:var(--paper);box-shadow:0 1px 2px #2f3e462e;transition:transform .14s ease}.pro-toggle.is-on .pro-toggle-knob{transform:translate(18px);background:var(--indigo)}.primary,.secondary{min-height:54px;border-radius:18px;font-family:Space Mono,monospace;font-weight:700}.primary{border:2px solid var(--ink);color:var(--paper);background:var(--ink);box-shadow:4px 4px 0 var(--hot);cursor:pointer}.primary:disabled{cursor:not-allowed;opacity:.65}.secondary{width:100%;margin-top:16px;border:2px solid var(--line)}.message{margin:18px 0 0;border:1px solid var(--line);border-radius:18px;padding:12px 14px;color:var(--muted);background:#ffffff85;font-family:Space Mono,monospace;font-size:.88rem;line-height:1.55}.loader{position:relative;z-index:1;font-family:Space Mono,monospace;font-weight:700}.profile-topline{display:flex;gap:16px;align-items:center;margin-bottom:28px}.profile-topline h2{margin-bottom:0;font-size:clamp(1.55rem,4vw,2.3rem);overflow-wrap:anywhere}.avatar{display:grid;width:72px;height:72px;flex:0 0 auto;place-items:center;border:2px solid var(--ink);border-radius:24px;background:var(--gold);box-shadow:5px 5px 0 var(--ink);font-family:Space Mono,monospace;font-weight:700}@keyframes rise{0%{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(max-width:900px){.screen{grid-template-columns:1fr;align-items:start}h1{font-size:clamp(3.5rem,22vw,7rem)}.orbit{display:none}}.game-screen{grid-template-columns:340px auto;align-items:start;justify-content:center;min-height:100svh;column-gap:clamp(14px,2.5vw,34px);padding-block:clamp(10px,2vh,28px)}.sidebar{position:sticky;top:clamp(10px,2vh,28px);z-index:2;display:flex;min-height:calc(100svh - clamp(20px,4vh,56px));flex-direction:column;gap:14px;border:2px solid var(--ink);border-radius:34px;padding:clamp(16px,2vw,22px);background:#cbd2c5;box-shadow:var(--shadow),8px 8px 0 var(--indigo);animation:rise .52s ease-out both}.brand-lockup{text-align:center}.brand-lockup .eyebrow{margin-bottom:4px;color:var(--ink);font-size:clamp(1.05rem,2.5vw,1.35rem);letter-spacing:.08em}.player-card,.score-panel,.channel-panel{width:100%;border:1px solid var(--line);border-radius:24px;padding:14px;background:#ffffff94}.player-card{display:flex;gap:12px;align-items:center;margin-top:auto;color:var(--ink);cursor:pointer;text-align:left}.player-card:disabled{cursor:not-allowed;opacity:.65}.player-card span,.score-panel span{display:block;color:var(--muted);font-family:Space Mono,monospace;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.player-card strong{display:block;overflow-wrap:anywhere;font-size:1.08rem;line-height:1.1}.player-name{display:inline-flex;align-items:flex-end}.pro-badge{flex:0 0 auto;margin-right:5px;color:var(--hot);align-self:flex-end;vertical-align:bottom}.player-card span{margin-top:5px;font-size:.845rem;letter-spacing:0;line-height:1.35;text-transform:none}.player-stats{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:5px}.player-stat{display:inline-flex;align-items:center}.stat-icon{flex:0 0 auto;margin-right:6px;transform:translateY(1px)}.avatar-image{overflow:hidden}.avatar-image img{width:100%;height:100%;object-fit:cover}.score-panel{border-color:#354f5247;background:#e9ece7;color:var(--ink)}.score-panel span{color:var(--muted)}.channel-panel{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;border-color:#354f5247;background:#e9ece7}.channel-copy{min-width:0}.channel-copy span{display:block;color:var(--muted);font-family:Space Mono,monospace;font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.channel-copy strong{display:block;margin-top:5px;overflow:hidden;font-size:1.06rem;line-height:1.05;text-overflow:ellipsis;white-space:nowrap}.channel-actions{display:flex;flex-wrap:wrap;gap:6px}.icon-tool-button{position:relative;display:grid;width:40px;height:40px;place-items:center;border:2px solid var(--ink);border-radius:12px;padding:0;color:var(--paper);background:var(--indigo);cursor:pointer}.icon-tool-button:disabled{cursor:not-allowed;opacity:.55}.icon-tool-button:after{position:absolute;right:0;bottom:calc(100% + 8px);z-index:5;border:1px solid rgba(202,210,197,.16);border-radius:10px;padding:7px 9px;color:var(--paper);content:attr(data-tooltip);background:var(--ink);box-shadow:0 10px 24px #2f3e463d;font-family:Space Mono,monospace;font-size:.68rem;font-weight:700;line-height:1;opacity:0;pointer-events:none;transform:translateY(4px);transition:opacity .12s ease,transform .12s ease;white-space:nowrap}.icon-tool-button:not(:disabled):hover:after{opacity:1;transform:translateY(0)}.score-line{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-top:8px;min-height:42px}.score-line strong{font-family:Space Mono,monospace;font-size:clamp(1.1rem,2.8vw,1.58rem);line-height:1}.score-line em{color:#354f52;font-family:Space Mono,monospace;font-size:1.12rem;font-style:normal;font-weight:700;line-height:1;min-width:72px;opacity:0;text-align:right;transition:opacity .1s ease}.score-line em.visible{opacity:1}.sidebar-message{margin-top:0}.guest-note{margin:0;border:1px solid var(--line);border-radius:20px;padding:14px;color:var(--muted);background:#ffffff85;font-family:Space Mono,monospace;font-size:.88rem;line-height:1.55}.auth-cta{margin-top:0}.logout-button{margin-top:0;border-color:var(--ink);color:var(--paper);background:var(--indigo)}.new-board-button{width:100%;min-height:52px;background:var(--indigo);box-shadow:none}.game-shell{--board-gap: 3px;--board-padding: 10px;--game-outer-inset: clamp(20px, 4vh, 56px);--board-height: calc(100svh - var(--game-outer-inset));position:relative;z-index:1;display:grid;width:auto;min-height:var(--board-height);min-width:0;place-items:center;animation:rise .52s ease-out both}.game-board{aspect-ratio:12 / 24;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:var(--board-gap);width:auto;height:var(--board-height);max-width:100%;max-height:var(--board-height);margin:0 auto;border:3px solid var(--ink);border-radius:24px;padding:var(--board-padding);background:linear-gradient(180deg,#343a40,#24292e);box-shadow:var(--shadow),8px 8px 0 var(--indigo)}.ball-cell{position:relative;aspect-ratio:1;min-width:0;border:0;border-radius:999px;padding:0;cursor:pointer;touch-action:manipulation;transform:translateZ(0);transition:filter .18s ease,opacity .18s ease,box-shadow .18s ease}.ball-cell:before{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;content:"";pointer-events:none;opacity:0;transition:opacity 90ms ease}.ball-cell:after{position:absolute;top:18%;left:20%;width:28%;height:22%;border-radius:999px;content:"";background:#ffffff80;filter:blur(1px)}@media(hover:hover)and (pointer:fine){.ball-cell:not(:disabled):hover{z-index:2;filter:brightness(1.06)}}.ball-cell.highlighted{z-index:2;filter:brightness(1.34) saturate(1.05);box-shadow:inset 0 0 0 1px #fffffff2}.ball-cell:disabled{cursor:default}.ball-R{background:radial-gradient(circle at 32% 24%,#ffb39b,#ff5b2e 44%,#b82912);box-shadow:inset -4px -5px #50000038,0 2px #ffffff3d}.ball-G{background:radial-gradient(circle at 32% 24%,#91ffd6,#00a878 45%,#006144);box-shadow:inset -4px -5px #002e193d,0 2px #ffffff3d}.ball-B{background:radial-gradient(circle at 32% 24%,#9fc7ff,#2775ff 45%,#123c9a);box-shadow:inset -4px -5px #04165642,0 2px #ffffff3d}.ball-cell.empty{opacity:.12;background:#ffffff80;box-shadow:none}.ball-cell.empty:after{display:none}.game-board.finished .ball-cell{opacity:.4}@media(hover:none)and (pointer:coarse){.ball-cell{-webkit-tap-highlight-color:transparent;transition:opacity 90ms ease}}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:grid;place-items:center;padding:18px;background:#2f3e467a;backdrop-filter:blur(14px) saturate(.9);-webkit-backdrop-filter:blur(14px) saturate(.9)}.modal-card{width:min(100%,480px);border:2px solid var(--ink);border-radius:30px;padding:clamp(20px,4vw,30px);background:var(--paper);box-shadow:var(--shadow),8px 8px 0 var(--ink)}.modal-header{display:flex;gap:18px;align-items:start;justify-content:space-between;margin-bottom:20px}.modal-header-compact{justify-content:flex-end;margin-bottom:8px}.modal-header h2{margin-bottom:0}.icon-button{display:grid;width:42px;height:42px;place-items:center;border:2px solid var(--ink);border-radius:14px;color:var(--ink);background:var(--gold);cursor:pointer;font-family:Space Mono,monospace;font-weight:700}.channel-list,.leaderboard-list{display:grid;gap:10px}.channel-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px;border:1px solid var(--line);border-radius:999px;padding:6px;background:#2f3e460f}.channel-tabs button{min-height:40px;border:0;border-radius:999px;color:var(--muted);background:transparent;cursor:pointer;font-family:Space Mono,monospace;font-size:.74rem;font-weight:700}.channel-tabs button.active{color:var(--paper);background:var(--indigo)}.channel-create-button{display:inline-flex;gap:8px;align-items:center;justify-content:center;min-height:44px;margin-bottom:14px;border:2px solid var(--ink);border-radius:16px;padding:0 14px;color:var(--paper);background:var(--indigo);cursor:pointer;font-family:Space Mono,monospace;font-size:.76rem;font-weight:700}.channel-row,.leaderboard-row,.empty-state{border:1px solid var(--line);border-radius:18px;padding:14px;background:#ffffff94}.channel-row,.leaderboard-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center}.channel-row{grid-template-columns:minmax(0,1fr) auto;width:100%;color:var(--ink);cursor:pointer;text-align:left}.channel-row.selected{border-color:#84a98cad;background:#84a98c2e}.channel-row span,.leaderboard-row strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.channel-row em,.leaderboard-row span,.leaderboard-row em{color:var(--muted);font-family:Space Mono,monospace;font-size:.72rem;font-style:normal;font-weight:700}.leaderboard-row span{display:grid;width:28px;height:28px;place-items:center;border-radius:999px;color:var(--paper);background:var(--ink)}.leaderboard-row em{color:var(--ink);font-size:.86rem}.empty-state{margin:0;color:var(--muted);font-family:Space Mono,monospace;font-size:.88rem;line-height:1.5}.join-modal{width:min(100%,440px)}.join-copy{margin:0;color:var(--ink);font-family:Space Mono,monospace;font-size:.95rem;line-height:1.6}.join-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}.join-cancel{margin-top:0}.slug-preview,.pro-copy{border:1px solid var(--line);border-radius:18px;padding:14px;background:#ffffff94}.slug-preview span{display:block;color:var(--muted);font-family:Space Mono,monospace;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.slug-preview strong{display:block;margin-top:6px;color:var(--ink);font-family:Space Mono,monospace;font-size:.92rem;line-height:1.45;overflow-wrap:anywhere}.pro-copy{display:flex;gap:10px;align-items:start}.pro-copy p{margin:0;color:var(--ink);font-family:Space Mono,monospace;font-size:.94rem;line-height:1.6}.pro-icon{flex:0 0 auto;margin-top:2px;color:var(--indigo)}input:disabled{color:var(--muted);cursor:not-allowed;background:#2f3e4614}@media(max-width:1100px){.game-screen{grid-template-columns:1fr}.sidebar{position:relative;top:auto;min-height:auto}.score-panel{margin-top:0}}@media(max-width:640px){.game-screen{padding:12px}.sidebar{border-radius:24px;box-shadow:var(--shadow),5px 5px 0 var(--indigo)}.game-shell{--board-gap: 2px;--board-padding: 6px;--game-outer-inset: 24px}.game-board{border-radius:18px}}@media(max-height:620px){.game-shell{--game-outer-inset: 16px}}