:root{--ink:#10122a;--paper:#f7f5ee;--white:#fff;--x:#ff5c67;--o:#1cc7a4;--yellow:#ffcf4a;--blue:#4c6fff;--muted:#6e7085;--line:#d9d9e2;--shadow:0 18px 50px rgba(16,18,42,.12);--radius:26px}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,ui-rounded,"Avenir Next",system-ui,sans-serif;color:var(--ink);background:var(--paper)}body{min-height:100dvh;background-image:radial-gradient(circle at 12% 18%,rgba(255,207,74,.16),transparent 25%),radial-gradient(circle at 92% 82%,rgba(28,199,164,.12),transparent 26%)}button,input,textarea{font:inherit}button{color:inherit}.hidden{display:none!important}.app-shell{min-height:100dvh}.topbar{height:82px;padding:0 clamp(18px,4vw,56px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid rgba(16,18,42,.1);background:rgba(247,245,238,.9);backdrop-filter:blur(12px);position:sticky;top:0;z-index:10}.brand-button,.back-button,.text-button,.icon-button{border:0;background:none;cursor:pointer}.brand-button{font-weight:900;font-size:1.05rem;justify-self:start}.mini-mark{background:var(--ink);color:#fff;border-radius:10px;padding:8px;margin-right:8px}.icon-button{justify-self:end;border:2px solid var(--ink);width:44px;height:44px;border-radius:50%;font-weight:900}.score-strip{display:flex;align-items:center;gap:16px;font-weight:850}.score-item{display:flex;gap:8px;align-items:center}.score-symbol{font-size:1.35rem}.score-symbol.x{color:var(--x)}.score-symbol.o{color:var(--o)}.score-number{background:var(--ink);color:#fff;border-radius:9px;padding:5px 11px;min-width:36px;text-align:center}.screen{display:none;min-height:calc(100dvh - 82px);padding:clamp(22px,4vw,56px)}.screen.active{display:flex;align-items:center;justify-content:center}.start-screen{min-height:100dvh!important;background:var(--ink);color:#fff;overflow:hidden;position:relative}.start-screen:before,.start-screen:after{content:"";position:absolute;width:40vw;height:40vw;border:2px solid rgba(255,255,255,.06);transform:rotate(16deg);border-radius:10%}.start-screen:before{left:-18vw;top:-22vw}.start-screen:after{right:-18vw;bottom:-25vw}.start-card{max-width:900px;width:100%;text-align:center;position:relative;z-index:1}.game-mark{display:inline-flex;gap:7px;font-size:2.4rem;font-weight:950;margin-bottom:12px}.game-mark span:first-child{color:var(--x)}.game-mark span:last-child{color:var(--o)}.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-weight:850;font-size:.76rem;color:var(--blue);margin:0 0 8px}.start-screen .eyebrow{color:var(--yellow)}h1{font-size:clamp(3.7rem,9vw,7.8rem);line-height:.78;margin:10px 0 24px;letter-spacing:-.065em}h1 span{font-size:.67em;color:transparent;-webkit-text-stroke:2px #fff}.start-copy{font-size:clamp(1rem,2vw,1.25rem);color:#bfc1d4;margin:0 0 38px}.start-actions{display:grid;grid-template-columns:1fr 1fr;gap:18px}.choice-card{border:0;border-radius:22px;padding:22px;text-align:left;display:grid;grid-template-columns:auto 1fr auto;gap:17px;align-items:center;cursor:pointer;transition:.2s transform,.2s box-shadow;background:#fff}.choice-card:hover,.choice-card:focus-visible{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.25)}.choice-icon{width:52px;height:52px;display:grid;place-items:center;border-radius:15px;font-size:1.7rem}.accent-a .choice-icon{background:#ffe6e8;color:var(--x)}.accent-b .choice-icon{background:#dcfaf3;color:#059878}.choice-card strong{display:block;font-size:1.07rem}.choice-card small{display:block;color:var(--muted);font-size:.83rem;margin-top:5px;line-height:1.35}.arrow{font-size:1.5rem}.panel{width:min(1180px,100%)}.wide-panel{align-self:flex-start}.step-heading{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;margin-bottom:32px}.step-heading>div{text-align:center}.step-heading h2,.play-header h2{font-size:clamp(2rem,4vw,3.5rem);letter-spacing:-.04em;margin:0}.back-button{font-weight:800;text-align:left;padding:12px 0}.roster-layout{display:grid;grid-template-columns:1.35fr .9fr;gap:26px}.input-card,.saved-card,.team-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}label{display:flex;justify-content:space-between;font-weight:850;margin:0 0 9px}label span{font-size:.78rem;color:var(--muted);font-weight:650}input,textarea{width:100%;border:2px solid var(--line);border-radius:14px;background:#fbfbfd;padding:14px 16px;outline:none;font-size:1rem;color:var(--ink)}input:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(76,111,255,.12)}textarea{resize:vertical;margin-bottom:8px;line-height:1.55}.input-card input{margin-bottom:22px}.field-note,.empty-note{font-size:.84rem;color:var(--muted)}.aside-title{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:16px}.aside-title h3{margin:0}.text-button{color:var(--blue);font-weight:850}.saved-list{display:grid;gap:10px;margin-top:16px}.saved-class{display:flex;align-items:center;gap:10px;padding:12px;border-radius:12px;background:#f5f5f8}.saved-class button:first-of-type{flex:1;border:0;background:none;text-align:left;cursor:pointer;font-weight:800}.delete-class{border:0;background:none;cursor:pointer;color:var(--muted);font-size:1.1rem}.footer-actions{display:flex;justify-content:flex-end;margin-top:28px}.primary-button,.secondary-button{border-radius:14px;padding:14px 22px;font-weight:900;cursor:pointer;min-height:52px}.primary-button{border:2px solid var(--ink);background:var(--ink);color:#fff;box-shadow:5px 5px 0 var(--yellow)}.primary-button:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--yellow)}.secondary-button{border:2px solid var(--ink);background:transparent}.team-controls{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:22px}.segmented{display:flex;background:#e7e7ed;border-radius:12px;padding:4px}.segmented button{border:0;padding:10px 16px;border-radius:9px;background:transparent;font-weight:800;cursor:pointer}.segmented button.active{background:#fff;box-shadow:0 2px 8px #bbb}.teams-grid{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px}.team-card{position:relative;border-top:7px solid}.team-x{border-top-color:var(--x)}.team-o{border-top-color:var(--o)}.team-symbol{font-size:3.6rem;line-height:1;font-weight:950;position:absolute;right:24px;top:20px}.team-x .team-symbol{color:var(--x)}.team-o .team-symbol{color:var(--o)}.team-card label{margin-top:12px}.name-row{display:grid;grid-template-columns:1fr auto;gap:9px}.dice-button{width:52px;border:2px solid var(--ink);background:#fff;border-radius:13px;font-size:1.4rem;cursor:pointer}.member-list{display:grid;gap:8px;margin-top:22px;min-height:100px}.member{display:flex;align-items:center;justify-content:space-between;background:#f3f3f6;padding:10px 13px;border-radius:10px;font-weight:750}.member select{border:1px solid var(--line);border-radius:8px;background:#fff;padding:7px}.versus{background:var(--ink);color:#fff;border-radius:50%;width:58px;height:58px;display:grid;place-items:center;font-weight:950;transform:rotate(-7deg)}.game-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.game-card{position:relative;border:2px solid var(--ink);background:#fff;border-radius:24px;padding:26px;text-align:left;cursor:pointer;box-shadow:6px 6px 0 var(--ink);transition:.18s}.game-card:hover,.game-card:focus-visible{transform:translate(-2px,-4px);box-shadow:9px 11px 0 var(--ink)}.game-card strong{display:block;font-size:1.7rem;margin-top:22px}.game-card small{display:block;line-height:1.45;color:var(--muted);min-height:44px;margin-top:7px}.game-number{font-weight:900;color:var(--muted)}.play-link{display:block;margin-top:22px;font-weight:900}.classic .play-link{color:var(--x)}.infinite .play-link{color:var(--blue)}.ultimate .play-link{color:#078b70}.board-preview{width:156px;height:156px;margin:16px auto 0;display:grid}.preview-classic{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr)}.preview-classic i{display:grid;place-items:center;font-style:normal;font-weight:950;font-size:1.7rem;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink)}.preview-classic i:nth-child(3n){border-right:0}.preview-classic i:nth-child(n+7){border-bottom:0}.preview-classic i:nth-child(odd){color:var(--x)}.preview-classic i:nth-child(3),.preview-classic i:nth-child(7){color:var(--o)}.preview-classic .faded{opacity:.18}.preview-ultimate{grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(9,1fr);background:repeating-linear-gradient(to right,transparent 0,transparent calc(11.11% - 1px),var(--ink) calc(11.11% - 1px),var(--ink) 11.11%),repeating-linear-gradient(to bottom,transparent 0,transparent calc(11.11% - 1px),var(--ink) calc(11.11% - 1px),var(--ink) 11.11%);border:2px solid var(--ink)}.play-header{width:min(1180px,100%);display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;margin:0 auto 20px}.play-header>button:last-child{justify-self:end}.round-title{text-align:center}.round-title p{font-size:.76rem;letter-spacing:.16em;font-weight:900;color:var(--blue);margin:0 0 5px}.player-pill{display:inline-block;margin-top:8px;padding:7px 13px;background:#fff;border:1px solid var(--line);border-radius:999px;font-weight:800;font-size:.86rem}.board-wrap{display:grid;place-items:center;width:100%}.board{display:grid;aspect-ratio:1;width:min(62vh,620px);max-width:92vw}.classic-board{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr)}.cell{border:0;background:transparent;font-weight:950;cursor:pointer;display:grid;place-items:center}.classic-board .cell{font-size:clamp(3.3rem,10vh,6.8rem);border-right:5px solid var(--ink);border-bottom:5px solid var(--ink)}.classic-board .cell:nth-child(3n){border-right:0}.classic-board .cell:nth-child(n+7){border-bottom:0}.cell.x{color:var(--x)}.cell.o{color:var(--o)}.cell.recent{animation:pop .22s ease-out}.cell.oldest{opacity:.28;animation:pulse 1.2s infinite}.cell:disabled{cursor:default}.ultimate-board{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:6px;background:var(--ink);border:6px solid var(--ink);width:min(66vh,650px)}.mini-board{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);background:#e2e2e7;position:relative;gap:2px}.mini-board.target{background:var(--yellow);box-shadow:inset 0 0 0 4px var(--yellow)}.mini-board .cell{background:var(--paper);font-size:clamp(1rem,3.8vh,2.3rem)}.mini-board.won:after{content:attr(data-winner);position:absolute;inset:0;display:grid;place-items:center;background:rgba(247,245,238,.93);font-size:clamp(3rem,10vh,7rem);font-weight:950}.mini-board.won[data-winner="X"]:after{color:var(--x)}.mini-board.won[data-winner="O"]:after{color:var(--o)}.game-footer{display:flex;justify-content:center;align-items:center;gap:30px;margin:20px auto 0}.game-footer p{color:var(--muted);font-weight:700}.modal{border:0;border-radius:28px;padding:36px;width:min(540px,calc(100% - 28px));color:var(--ink);box-shadow:0 30px 90px rgba(0,0,0,.35)}.modal::backdrop{background:rgba(9,10,25,.75);backdrop-filter:blur(5px)}.modal h2{font-size:2rem;margin:4px 0 14px}.modal-icon{font-size:2.4rem;font-weight:950;letter-spacing:-.15em;margin-bottom:14px;color:var(--x)}.modal li{margin:10px 0;line-height:1.45}.full-button{width:100%;margin-top:18px}.modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px}.result-modal{text-align:center}.confetti{font-size:1.7rem;color:var(--yellow);margin-bottom:14px}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:13px 18px;border-radius:12px;font-weight:800;opacity:0;pointer-events:none;transition:.2s;z-index:99}.toast.show{opacity:1;transform:translate(-50%,0)}
.choice-card{color:var(--ink)}
html{min-height:100%;overflow-x:hidden}body{min-height:100svh;min-height:100dvh;overflow-x:hidden}.app-shell{min-height:100svh;min-height:100dvh}.screen{min-height:calc(100svh - 82px);min-height:calc(100dvh - 82px);overflow:visible}.start-screen{min-height:100svh!important;min-height:100dvh!important;overflow-x:hidden;overflow-y:auto}.member-move{display:grid;place-items:center;flex:0 0 48px;width:48px;height:42px;border:2px solid var(--ink);border-radius:11px;background:#fff;font-size:1.45rem;font-weight:950;line-height:1;cursor:pointer;transition:transform .15s,background .15s,color .15s}.member-move:hover,.member-move:focus-visible{background:var(--ink);color:#fff;transform:translateX(2px)}.team-o .member-move:hover,.team-o .member-move:focus-visible{transform:translateX(-2px)}
.game-screen.active{display:grid;grid-template-rows:auto minmax(0,1fr) auto;align-items:stretch;justify-items:stretch;min-height:calc(100svh - 82px);min-height:calc(100dvh - 82px);padding-block:clamp(12px,2.5vh,32px);overflow:auto}.game-screen .board-wrap{min-height:0}.game-screen .board{width:min(620px,88vw,calc(100svh - 260px));width:min(620px,88vw,calc(100dvh - 260px));min-width:min(220px,88vw)}.game-screen .ultimate-board{width:min(650px,88vw,calc(100svh - 260px));width:min(650px,88vw,calc(100dvh - 260px))}.game-screen .game-footer{margin-top:clamp(8px,2vh,20px)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.topbar.play-mode{grid-template-columns:auto auto 1fr auto;gap:clamp(12px,2vw,28px);padding-inline:clamp(14px,2.5vw,38px)}.topbar.play-mode .score-strip{justify-self:center}.game-header-actions{display:flex;align-items:center;justify-self:end;gap:8px}.header-action{min-height:44px;border:2px solid var(--ink);border-radius:12px;background:#fff;padding:9px 13px;font-weight:900;cursor:pointer;white-space:nowrap;transition:transform .15s,box-shadow .15s}.header-action:hover,.header-action:focus-visible{transform:translateY(-2px);box-shadow:0 5px 0 rgba(16,18,42,.16)}.header-action-accent{background:var(--yellow)}
.game-screen.active{display:block;min-height:calc(100svh - var(--header-height,82px));min-height:calc(100dvh - var(--header-height,82px));padding:clamp(12px,2vh,24px) clamp(14px,2.5vw,36px)}.play-stage{min-height:calc(100svh - var(--header-height,82px) - clamp(24px,4vh,48px));min-height:calc(100dvh - var(--header-height,82px) - clamp(24px,4vh,48px));display:grid;grid-template-columns:minmax(180px,1fr) auto minmax(180px,1fr);grid-template-areas:"x board o";gap:clamp(14px,2.4vw,36px);align-items:center;justify-content:center}.round-team{width:min(100%,300px);min-height:230px;padding:24px;border:2px solid transparent;border-radius:26px;background:rgba(255,255,255,.7);box-shadow:0 12px 35px rgba(16,18,42,.08);opacity:.62;transition:.2s;position:relative}.round-team-x{grid-area:x;justify-self:end}.round-team-o{grid-area:o;justify-self:start;text-align:right}.round-team.active-turn{opacity:1;transform:translateY(-4px);border-color:var(--ink);box-shadow:7px 8px 0 var(--ink)}.round-team-x.active-turn{background:#fff0f1}.round-team-o.active-turn{background:#e7faf6}.round-symbol{display:block;font-size:clamp(3rem,7vh,5.2rem);font-weight:950;line-height:.9;margin-bottom:24px}.round-team-x .round-symbol{color:var(--x)}.round-team-o .round-symbol{color:var(--o)}.status-badge{position:absolute;right:18px;top:18px;border-radius:999px;background:var(--ink);color:#fff;padding:7px 11px;font-size:.75rem;font-weight:900}.round-team-o .status-badge{right:auto;left:18px}.round-team h2{font-size:clamp(1.35rem,2.2vw,2rem);line-height:1.05;margin:0 0 22px;overflow-wrap:anywhere}.round-player-label{margin:0 0 5px;color:var(--muted);font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em}.round-player{font-size:clamp(1.05rem,1.8vw,1.35rem)}.board-panel{grid-area:board;align-self:center;border-radius:34px;padding:clamp(14px,2.2vh,24px);background:linear-gradient(145deg,#e7e9ff,#dce2ff);border:1px solid #c8cef7;box-shadow:0 22px 60px rgba(49,67,164,.18),inset 0 1px 0 rgba(255,255,255,.9)}.board-heading{text-align:center;margin-bottom:clamp(8px,1.5vh,16px)}.board-heading #gameLabel{margin:0;color:var(--blue);font-size:.75rem;letter-spacing:.16em;font-weight:950}.board-heading #gameHint{margin:5px 0 0;color:#50536e;font-size:.84rem;font-weight:750}.game-screen .board{width:min(54vw,calc(100svh - var(--header-height,82px) - 145px),570px);width:min(54vw,calc(100dvh - var(--header-height,82px) - 145px),570px);min-width:200px}.game-screen .ultimate-board{width:min(55vw,calc(100svh - var(--header-height,82px) - 145px),590px);width:min(55vw,calc(100dvh - var(--header-height,82px) - 145px),590px)}
.start-screen{padding-bottom:76px}.start-logo{display:block;width:min(300px,52vw);height:auto;margin:0 auto 16px;filter:drop-shadow(0 12px 22px rgba(0,0,0,.3))}.start-footer{position:absolute;z-index:2;left:20px;right:20px;bottom:20px;text-align:center;color:#aaaec4;font-size:.82rem;font-weight:650}.start-footer a{color:#fff;text-decoration:none}.start-footer a:hover,.start-footer a:focus-visible{text-decoration:underline;color:var(--yellow)}.start-footer span{margin:0 7px;color:#6f728d}
.cell-mark{display:block;opacity:1}.cell.oldest{opacity:1;animation:none}.cell.oldest .cell-mark{opacity:.28;animation:pulse 1.2s infinite}
.topbar.play-mode{grid-template-columns:auto minmax(160px,1fr) auto auto}
.icon-button{position:relative;overflow:hidden}.icon-button.sound-off::after{content:"";position:absolute;left:-5px;top:50%;width:calc(100% + 10px);height:3px;border-radius:999px;background:var(--x);box-shadow:0 0 0 1px var(--paper);transform:translateY(-50%) rotate(-45deg);transform-origin:center;pointer-events:none}
@keyframes pop{from{transform:scale(.35)}to{transform:scale(1)}}@keyframes pulse{50%{opacity:.12}}
@media(max-width:820px){.topbar{grid-template-columns:1fr auto;height:auto;min-height:72px}.score-strip{grid-row:2;grid-column:1/-1;margin:10px auto}.icon-button{grid-column:2}.screen{padding:22px 16px}.start-actions,.roster-layout,.game-grid{grid-template-columns:1fr}.start-card{padding:20px 0}.start-screen{align-items:flex-start!important}.start-screen h1{font-size:4rem}.step-heading{grid-template-columns:1fr}.step-heading>div{text-align:left;grid-row:2}.teams-grid{grid-template-columns:1fr}.versus{margin:-7px auto;z-index:2}.team-controls{flex-wrap:wrap}.game-card{display:grid;grid-template-columns:130px 1fr;column-gap:18px}.game-card .board-preview{grid-row:1/6;margin:0;width:120px;height:120px}.game-card strong{margin-top:12px}.game-card small{min-height:0}.play-header{grid-template-columns:1fr 1fr}.round-title{grid-row:2;grid-column:1/-1;margin-top:12px}.game-footer{flex-direction:column;gap:5px}.classic-board{width:min(88vw,58vh)}.ultimate-board{width:min(92vw,62vh)}.modal-actions{grid-template-columns:1fr}}
@media(max-height:720px) and (min-width:821px){.screen{padding:20px}.play-header{margin-bottom:8px}.board{width:min(57vh,540px)}.game-footer{margin-top:8px}}
@media(max-height:720px) and (min-width:821px){.game-screen.active{padding:10px 20px}.game-screen .play-header{margin-bottom:6px}.game-screen .play-header h2{font-size:clamp(1.55rem,4vh,2.35rem)}.game-screen .player-pill{margin-top:4px;padding:5px 11px}.game-screen .board,.game-screen .ultimate-board{width:min(540px,82vw,calc(100dvh - 220px));min-width:min(210px,82vw)}.game-screen .game-footer{margin-top:5px}.game-screen .game-footer p{margin:4px 0}.game-screen .secondary-button{min-height:44px;padding:9px 15px}}
@media(max-height:540px){.start-screen{align-items:flex-start!important;padding-block:18px}.game-mark{font-size:1.8rem;margin-bottom:4px}.start-screen h1{font-size:clamp(3rem,13vh,4.5rem);margin:4px 0 12px}.start-copy{margin-bottom:16px}.choice-card{padding:14px}.game-screen .board,.game-screen .ultimate-board{width:min(330px,72vw,calc(100dvh - 175px));min-width:min(190px,72vw)}.game-screen .round-title p,.game-screen .player-pill,.game-screen .game-footer p{display:none}.game-screen .play-header{margin-bottom:2px}.game-screen .game-footer{margin-top:2px}}
@media(max-height:540px){.start-logo{width:min(220px,42vw);margin-bottom:8px}.start-screen{padding-bottom:60px}.start-footer{bottom:12px}.start-screen .eyebrow{margin-bottom:3px}}
@media(max-height:410px){.start-screen.active{display:block}.start-screen{padding-bottom:18px}.start-card{margin:0 auto}.start-footer{position:relative;left:auto;right:auto;bottom:auto;margin-top:22px;padding-bottom:4px}}
@media(max-width:820px){.member-move{width:52px;height:46px}.game-screen.active{min-height:calc(100svh - 108px);min-height:calc(100dvh - 108px)}.game-screen .board,.game-screen .ultimate-board{width:min(92vw,calc(100dvh - 300px));min-width:min(220px,92vw)}}
@media(max-width:1100px){.topbar.play-mode{grid-template-columns:auto 1fr auto;height:auto;padding-block:8px}.topbar.play-mode .score-strip{grid-column:2;grid-row:1}.topbar.play-mode .icon-button{grid-column:3;grid-row:1}.topbar.play-mode .game-header-actions{grid-column:1/-1;grid-row:2;justify-self:center}.play-stage{grid-template-columns:minmax(145px,1fr) auto minmax(145px,1fr);gap:14px}.round-team{padding:18px;min-height:195px}.round-symbol{margin-bottom:18px}.game-screen .board,.game-screen .ultimate-board{width:min(49vw,calc(100dvh - var(--header-height,120px) - 130px),490px)}}
@media(max-width:760px){.topbar.play-mode .brand-button{font-size:0}.topbar.play-mode .mini-mark{font-size:1rem;margin:0}.topbar.play-mode .score-strip{gap:7px;font-size:.78rem}.topbar.play-mode .score-item{gap:5px}.topbar.play-mode .score-number{padding:4px 8px;min-width:30px}.game-header-actions{width:100%;display:grid;grid-template-columns:repeat(3,1fr)}.header-action{padding:8px 6px;font-size:.78rem}.play-stage{grid-template-columns:1fr 1fr;grid-template-areas:"x o" "board board";align-content:start}.round-team{min-height:0;width:100%;padding:12px 14px;border-radius:18px}.round-team-x{justify-self:stretch}.round-team-o{justify-self:stretch}.round-team.active-turn{transform:none;box-shadow:4px 5px 0 var(--ink)}.round-symbol{font-size:2.2rem;margin-bottom:9px}.status-badge{top:10px;right:10px;padding:5px 8px;font-size:.65rem}.round-team-o .status-badge{left:10px}.round-team h2{font-size:1rem;margin-bottom:8px}.round-player-label{display:none}.round-player{font-size:.9rem}.board-panel{padding:12px;border-radius:24px}.game-screen .board,.game-screen .ultimate-board{width:min(88vw,calc(100dvh - var(--header-height,120px) - 230px),470px);min-width:min(190px,88vw)}}
@media(max-height:540px) and (min-width:761px){.topbar.play-mode{height:64px;grid-template-columns:auto auto 1fr auto;padding-block:5px}.topbar.play-mode .brand-button{font-size:0}.topbar.play-mode .brand-button .mini-mark{font-size:1rem;margin-right:0}.topbar.play-mode .score-strip{grid-column:2;grid-row:1}.topbar.play-mode .score-item>span:not(.score-symbol):not(.score-number){display:none}.topbar.play-mode .game-header-actions{grid-column:3;grid-row:1;justify-self:end}.topbar.play-mode .icon-button{grid-column:4;grid-row:1}.topbar.play-mode .header-action{min-height:40px;padding:7px 10px}.play-stage{grid-template-columns:minmax(150px,1fr) auto minmax(150px,1fr)}.round-team{min-height:160px;padding:16px}.round-symbol{font-size:2.7rem;margin-bottom:12px}.round-team h2{margin-bottom:10px}.board-heading #gameHint{display:none}.game-screen .board,.game-screen .ultimate-board{width:min(44vw,calc(100dvh - var(--header-height,64px) - 90px),390px);min-width:180px}.board-panel{padding:12px;border-radius:25px}}
@media(max-height:540px) and (min-width:761px){.topbar.play-mode{grid-template-columns:auto minmax(100px,1fr) auto auto}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* JGames neon theme */
:root{
  --game-bg:#07051a;--game-bg-secondary:#0b0722;--game-surface:#261851;--game-surface-dark:#0c0824;
  --game-text:#f8f5ff;--game-text-muted:#cfc7e6;--game-purple:#7b39ff;--game-pink:#f044ff;
  --game-blue:#4d8cff;--game-cyan:#20d9ff;--game-green:#33d17a;--game-border:rgba(255,255,255,.16);
  --game-glow:rgba(198,53,255,.35);--ink:var(--game-text);--paper:var(--game-bg);--white:#fff;
  --x:var(--game-pink);--o:var(--game-cyan);--yellow:var(--game-purple);--blue:var(--game-blue);
  --muted:var(--game-text-muted);--line:var(--game-border);--shadow:0 18px 55px rgba(0,0,0,.38);--radius:24px
}
html,body{color:var(--game-text);background:var(--game-bg)}
body{
  background-image:radial-gradient(circle at 15% 5%,rgba(123,57,255,.2),transparent 35%),radial-gradient(circle at 90% 86%,rgba(240,68,255,.1),transparent 29%),linear-gradient(155deg,#060415 0%,#0b0722 52%,#08051b 100%);
  background-attachment:fixed
}
button{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--game-cyan);outline-offset:3px}
.topbar{border-bottom:1px solid var(--game-border);background:rgba(7,5,26,.82);box-shadow:0 8px 30px rgba(0,0,0,.24);backdrop-filter:blur(18px)}
.brand-button,.back-button{color:var(--game-text)}.brand-button:hover,.back-button:hover{color:var(--game-cyan)}
.mini-mark{color:#fff;background:linear-gradient(135deg,var(--game-purple),var(--game-pink));box-shadow:0 0 20px var(--game-glow)}
.icon-button{color:var(--game-text);border:1px solid var(--game-border);background:rgba(255,255,255,.05)}
.icon-button:hover{border-color:var(--game-cyan);box-shadow:0 0 18px rgba(32,217,255,.2)}
.score-symbol.x{color:var(--game-pink);text-shadow:0 0 14px rgba(240,68,255,.5)}
.score-symbol.o{color:var(--game-cyan);text-shadow:0 0 14px rgba(32,217,255,.5)}
.score-number{color:#fff;background:rgba(123,57,255,.22);border:1px solid var(--game-border)}
.screen{position:relative;background:transparent}
.start-screen{background:radial-gradient(circle at 50% 10%,rgba(123,57,255,.28),transparent 38%),radial-gradient(circle at 8% 85%,rgba(77,140,255,.13),transparent 28%),linear-gradient(155deg,#060415,#0b0722 55%,#08051b)}
.start-screen:before,.start-screen:after{border-color:rgba(240,68,255,.1);box-shadow:0 0 50px rgba(123,57,255,.06)}
.start-logo{filter:drop-shadow(0 0 24px rgba(198,53,255,.38)) drop-shadow(0 14px 24px rgba(0,0,0,.42))}
.eyebrow,.start-screen .eyebrow{color:var(--game-cyan);text-shadow:0 0 14px rgba(32,217,255,.3)}
h1 span{background:linear-gradient(100deg,#fff 0%,#dcd0ff 40%,#f7b9ff 100%);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-stroke:0}
.start-copy,.start-footer{color:var(--game-text-muted)}
.start-footer a{color:var(--game-text)}.start-footer a:hover,.start-footer a:focus-visible{color:var(--game-cyan)}
.start-footer span{color:rgba(207,199,230,.5)}
.choice-card,.input-card,.saved-card,.team-card,.game-card,.round-team,.modal{
  color:var(--game-text);border:1px solid var(--game-border);background:linear-gradient(145deg,rgba(38,24,81,.88),rgba(12,8,36,.94));box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.05);backdrop-filter:blur(15px)
}
.choice-card:hover,.choice-card:focus-visible,.game-card:hover,.game-card:focus-visible{border-color:rgba(240,68,255,.55);box-shadow:0 20px 50px rgba(0,0,0,.42),0 0 28px rgba(198,53,255,.18)}
.choice-icon{border:1px solid var(--game-border)}
.accent-a .choice-icon{color:#fff;background:linear-gradient(135deg,var(--game-purple),var(--game-pink));box-shadow:0 0 22px rgba(240,68,255,.2)}
.accent-b .choice-icon{color:var(--game-cyan);background:rgba(32,217,255,.1);box-shadow:0 0 22px rgba(32,217,255,.1)}
.choice-card small,.game-card small,.field-note,.empty-note,label span,.game-number,.round-player-label{color:var(--game-text-muted)}
.arrow{color:var(--game-pink)}
.panel{isolation:isolate}.step-heading h2{color:var(--game-text)}
input,textarea{color:var(--game-text);border:1px solid var(--game-border);background:rgba(5,3,20,.58);caret-color:var(--game-pink)}
input::placeholder,textarea::placeholder{color:rgba(207,199,230,.5)}
input:focus,textarea:focus{border-color:var(--game-purple);box-shadow:0 0 0 4px rgba(123,57,255,.16),0 0 22px rgba(123,57,255,.12)}
.aside-title{border-bottom-color:var(--game-border)}.text-button{color:var(--game-cyan)}
.saved-class,.member{color:var(--game-text);background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.07)}
.delete-class{color:var(--game-text-muted)}.delete-class:hover{color:var(--game-pink)}
.primary-button{color:#fff;border:0;background:linear-gradient(105deg,var(--game-purple),var(--game-pink));box-shadow:0 12px 35px var(--game-glow)}
.primary-button:hover,.primary-button:focus-visible{transform:translateY(-2px);background:linear-gradient(105deg,#8c50ff,#f260ff);box-shadow:0 15px 42px rgba(198,53,255,.5)}
.secondary-button,.header-action{color:var(--game-text);border:1px solid var(--game-border);background:rgba(255,255,255,.055)}
.secondary-button:hover,.secondary-button:focus-visible,.header-action:hover,.header-action:focus-visible{transform:translateY(-2px);border-color:rgba(123,57,255,.65);background:rgba(123,57,255,.16);box-shadow:0 8px 22px rgba(0,0,0,.22)}
.header-action-accent{color:#fff;border-color:transparent;background:linear-gradient(105deg,var(--game-purple),var(--game-pink))}
.segmented{background:rgba(0,0,0,.28);border:1px solid var(--game-border)}
.segmented button{color:var(--game-text-muted)}.segmented button.active{color:#fff;background:linear-gradient(105deg,rgba(123,57,255,.9),rgba(240,68,255,.82));box-shadow:0 4px 16px var(--game-glow)}
.team-card{border-top-width:3px}.team-x{border-top-color:var(--game-pink)}.team-o{border-top-color:var(--game-cyan)}
.team-x .team-symbol{color:var(--game-pink);text-shadow:0 0 20px rgba(240,68,255,.45)}
.team-o .team-symbol{color:var(--game-cyan);text-shadow:0 0 20px rgba(32,217,255,.42)}
.dice-button,.member-move{color:var(--game-text);border:1px solid var(--game-border);background:rgba(255,255,255,.07)}
.dice-button:hover,.member-move:hover,.member-move:focus-visible{color:#fff;background:rgba(123,57,255,.32);border-color:var(--game-purple);box-shadow:0 0 18px rgba(123,57,255,.2)}
.versus{color:#fff;background:linear-gradient(135deg,var(--game-purple),var(--game-pink));box-shadow:0 0 24px var(--game-glow)}
.game-card{border-width:1px;box-shadow:var(--shadow)}
.game-card:hover,.game-card:focus-visible{transform:translateY(-5px);box-shadow:0 22px 52px rgba(0,0,0,.4),0 0 28px rgba(198,53,255,.2)}
.classic .play-link{color:var(--game-pink)}.infinite .play-link{color:var(--game-blue)}.ultimate .play-link{color:var(--game-cyan)}
.preview-classic i{border-color:rgba(248,245,255,.65)}.preview-classic i:nth-child(odd){color:var(--game-pink)}.preview-classic i:nth-child(3),.preview-classic i:nth-child(7){color:var(--game-cyan)}
.preview-ultimate{border-color:rgba(248,245,255,.55);background:repeating-linear-gradient(to right,transparent 0,transparent calc(11.11% - 1px),rgba(248,245,255,.36) calc(11.11% - 1px),rgba(248,245,255,.36) 11.11%),repeating-linear-gradient(to bottom,transparent 0,transparent calc(11.11% - 1px),rgba(248,245,255,.36) calc(11.11% - 1px),rgba(248,245,255,.36) 11.11%)}
.round-team{opacity:.55}.round-team.active-turn{opacity:1;transform:translateY(-4px);border-color:currentColor;box-shadow:0 16px 42px rgba(0,0,0,.38),0 0 30px rgba(198,53,255,.18)}
.round-team-x,.round-team-x.active-turn{color:var(--game-text);background:linear-gradient(145deg,rgba(64,17,82,.9),rgba(12,8,36,.94))}.round-team-o,.round-team-o.active-turn{color:var(--game-text);background:linear-gradient(145deg,rgba(14,46,79,.88),rgba(12,8,36,.94))}
.round-symbol{filter:drop-shadow(0 0 12px currentColor)}.status-badge{color:#fff;background:linear-gradient(105deg,var(--game-purple),var(--game-pink))}
.round-team-o .status-badge{background:linear-gradient(105deg,var(--game-blue),#139cc8)}
.board-panel{background:linear-gradient(145deg,rgba(38,24,81,.9),rgba(12,8,36,.95));border:1px solid var(--game-border);box-shadow:0 22px 60px rgba(0,0,0,.4),0 0 40px rgba(123,57,255,.12),inset 0 1px 0 rgba(255,255,255,.06)}
.board-heading #gameLabel{color:var(--game-cyan)}.board-heading #gameHint{color:var(--game-text-muted)}
.classic-board .cell{border-color:rgba(248,245,255,.62)}.cell.x{color:var(--game-pink);text-shadow:0 0 22px rgba(240,68,255,.45)}.cell.o{color:var(--game-cyan);text-shadow:0 0 22px rgba(32,217,255,.42)}
.ultimate-board{background:rgba(248,245,255,.6);border-color:rgba(248,245,255,.6)}
.mini-board{background:rgba(248,245,255,.28)}.mini-board.target{background:var(--game-purple);box-shadow:inset 0 0 0 3px var(--game-purple),0 0 22px rgba(123,57,255,.55)}
.mini-board .cell{background:var(--game-surface-dark)}.mini-board.won:after{background:rgba(12,8,36,.95)}
.modal{background:linear-gradient(145deg,rgba(38,24,81,.97),rgba(12,8,36,.98))}.modal::backdrop{background:rgba(3,2,12,.82);backdrop-filter:blur(7px)}
.modal-icon{color:var(--game-pink);text-shadow:0 0 20px rgba(240,68,255,.45)}.confetti{color:var(--game-pink);text-shadow:0 0 16px rgba(240,68,255,.5)}
.toast{color:#fff;background:linear-gradient(105deg,rgba(123,57,255,.98),rgba(176,45,194,.98));border:1px solid rgba(255,255,255,.24);box-shadow:0 12px 32px rgba(0,0,0,.35),0 0 22px var(--game-glow)}
.icon-button.sound-off::after{background:var(--game-pink);box-shadow:0 0 8px rgba(240,68,255,.6)}
@media(max-width:760px){.round-team.active-turn{box-shadow:0 10px 28px rgba(0,0,0,.32),0 0 20px rgba(198,53,255,.14)}}

/* Height-aware roster layout: keep the primary action visible on smartboards. */
#rosterScreen.active{height:calc(100svh - var(--header-height,82px));height:calc(100dvh - var(--header-height,82px));min-height:0;align-items:stretch;overflow:hidden;padding:clamp(10px,2.2vh,24px) clamp(18px,4vw,56px)}
#rosterScreen .wide-panel{align-self:stretch;display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-height:0}
#rosterScreen .step-heading{margin-bottom:clamp(8px,1.8vh,20px)}
#rosterScreen .roster-layout{min-height:0;gap:clamp(14px,2vw,26px)}
#rosterScreen .input-card{min-height:0;display:grid;grid-template-rows:auto auto auto minmax(70px,1fr) auto;padding:clamp(14px,2.5vh,26px)}
#rosterScreen .input-card input{margin-bottom:clamp(9px,1.8vh,18px)}
#rosterScreen #studentNames{height:100%;min-height:70px;resize:none;margin-bottom:4px}
#rosterScreen .field-note{margin:3px 0 0}
#rosterScreen .saved-card{min-height:0;display:flex;flex-direction:column;padding:clamp(14px,2.5vh,26px);overflow:hidden}
#rosterScreen .aside-title{flex:0 0 auto;padding-bottom:clamp(9px,1.5vh,16px)}
#rosterScreen .saved-list{min-height:0;overflow-y:auto;overscroll-behavior:contain;margin-top:10px;padding-right:4px;scrollbar-width:thin;scrollbar-color:var(--game-purple) transparent}
#rosterScreen #noClasses{margin-bottom:0}
#rosterScreen .footer-actions{margin-top:clamp(8px,1.8vh,18px);flex:0 0 auto}
@media(max-height:560px) and (min-width:821px){#rosterScreen.active{padding-block:8px}#rosterScreen .step-heading h2{font-size:clamp(1.7rem,6vh,2.5rem)}#rosterScreen .step-heading .back-button{padding-block:7px}#rosterScreen .input-card,#rosterScreen .saved-card{padding:12px 16px}#rosterScreen input,#rosterScreen textarea{padding:9px 12px}#rosterScreen .primary-button{min-height:44px;padding:10px 18px}}
@media(max-width:820px){#rosterScreen.active{height:auto;min-height:calc(100dvh - var(--header-height,108px));overflow:visible;align-items:flex-start}#rosterScreen .wide-panel{display:block}#rosterScreen .roster-layout{grid-template-columns:1fr}#rosterScreen .input-card{display:block}#rosterScreen #studentNames{height:auto;min-height:220px;resize:vertical}#rosterScreen .saved-card{display:block;overflow:visible}#rosterScreen .saved-list{max-height:300px}}

/* Ultimate board hierarchy: strong main grid, quiet inner grids, no frame. */
.ultimate-board{gap:6px;padding:0;border:0;background:rgba(248,245,255,.82);box-shadow:none}
.ultimate-board .mini-board{gap:0;padding:clamp(4px,.55vw,7px);background:var(--game-surface-dark)}
.ultimate-board .mini-board .cell{border-right:1px solid rgba(207,199,230,.36);border-bottom:1px solid rgba(207,199,230,.36)}
.ultimate-board .mini-board .cell:nth-child(3n){border-right:0}
.ultimate-board .mini-board .cell:nth-child(n+7){border-bottom:0}
.ultimate-board .mini-board.target{background:var(--game-purple);box-shadow:inset 0 0 0 2px var(--game-purple),0 0 20px rgba(123,57,255,.48)}

/* Match the Ultimate selection preview to the in-game board. */
.preview-ultimate{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:3px;border:0;background:rgba(248,245,255,.78)}
.preview-ultimate i{display:block;background:
  linear-gradient(rgba(207,199,230,.38),rgba(207,199,230,.38)) 33.333% 50%/1px 72% no-repeat,
  linear-gradient(rgba(207,199,230,.38),rgba(207,199,230,.38)) 66.666% 50%/1px 72% no-repeat,
  linear-gradient(90deg,rgba(207,199,230,.38),rgba(207,199,230,.38)) 50% 33.333%/72% 1px no-repeat,
  linear-gradient(90deg,rgba(207,199,230,.38),rgba(207,199,230,.38)) 50% 66.666%/72% 1px no-repeat,
  var(--game-surface-dark)}

/* Give the Inter headline's final glyph room despite its tight letter spacing. */
.start-screen h1 span{display:inline-block;padding-right:.08em}

/* Keep team symbols compact and clear of the team-name controls. */
.team-symbol{font-size:2.65rem;right:26px;top:22px}