:root{font-family:Inter,system-ui,-apple-system,sans-serif;color:#e4edfc;background:#0b1020;color-scheme:dark;--muted:#9aabc4;--line:#2a3952;--green:#50d6aa}*{box-sizing:border-box}body{margin:0}header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 5vw;border-bottom:1px solid #1e2c42}.brand{font-size:20px;letter-spacing:.1em;font-weight:850;text-decoration:none;color:#edf3ff}.brand span{color:var(--green);font-weight:500}.pill,.eyebrow{font-size:12px;letter-spacing:.15em;color:var(--muted)}main{max-width:1400px;margin:auto;padding:50px 5vw}.intro{max-width:750px}.intro h1{font-size:clamp(44px,6vw,78px);line-height:1.02;letter-spacing:-.045em;margin:18px 0 25px}.intro>p:last-child{max-width:620px;font-size:20px;line-height:1.5;color:var(--muted)}button,a.button,input,select{font:inherit;font-size:16px;border:1px solid #344760;border-radius:10px;padding:13px 18px;min-height:48px;background:#263955;color:#edf3ff}button,a.button{cursor:pointer;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}button:hover,a.button:hover{background:#3c5377}button:disabled{opacity:.45;cursor:default}button.primary,a.primary{background:var(--green);color:#082421;border:0}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid white;outline-offset:3px}.games{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:25px;margin:40px 0}.game-card{border:1px solid var(--line);border-radius:20px;background:#121e31;overflow:hidden;max-width:720px}.game-art{height:165px;padding:26px;display:flex;align-items:center;gap:12px;background:linear-gradient(130deg,#142849,#18322f);overflow:hidden}.poly{width:90px;height:90px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:3px;transform:rotate(-10deg)}.poly:nth-child(2){transform:rotate(12deg) translateY(25px)}.poly:nth-child(3){transform:rotate(-9deg)}.poly i{background:var(--piece);border-radius:3px;box-shadow:inset 0 3px #ffffff33}.card-body{padding:25px}.card-body h2{font-size:30px;margin:0 0 8px}.card-body p{color:var(--muted);line-height:1.5}.card-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}.utility{display:grid;grid-template-columns:1fr 1fr;gap:35px;margin:55px 0 15px;padding-top:25px;border-top:1px solid var(--line)}.utility h2,.utility label{display:block;font-size:18px;font-weight:650;margin:0 0 18px}.utility form>div{display:flex;gap:10px}.utility input{min-width:0;max-width:180px;text-transform:uppercase;letter-spacing:.18em}.saved-room{display:flex;gap:10px;align-items:center;margin-bottom:10px}.saved-room a{flex:1;justify-content:flex-start}.saved-room button{font-size:12px;padding:8px}footer{padding:22px 5vw;color:var(--muted);font-size:13px;text-align:center;border-top:1px solid #1e2c42}#notice{color:#ffbf8f;min-height:1.5em;line-height:1.5}.display header{padding:16px 3vw}.display-actions{display:flex;gap:18px;align-items:center;font-size:14px;color:var(--muted)}.display-actions button{font-size:13px;min-height:40px;padding:8px 12px}.display main{max-width:none;padding:22px 3vw 0}.game-heading h1{font-size:clamp(27px,3vw,46px);margin:5px 0}.game-heading p{margin:6px 0 16px;color:var(--muted)}.game-heading .eyebrow{margin:0}.table{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,390px);gap:32px;align-items:start}.board-frame{position:relative;max-width:min(100%,calc(100vh - 300px));width:100%;aspect-ratio:1;background:#18253a;border:8px solid #293954;border-radius:16px;justify-self:center;overflow:hidden}#tv-board{width:100%;height:100%;display:block}#board-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0c1522aa;pointer-events:none}#board-empty span{font-size:clamp(24px,3.5vw,52px);line-height:1.1;font-weight:800;letter-spacing:-.03em}#board-empty strong{color:var(--green)}aside{display:flex;flex-direction:column;gap:15px}aside h2{font-size:24px;margin:0}aside p{margin:0;color:var(--muted);line-height:1.45}.join-panel{display:flex;align-items:center;gap:20px}.join-panel img{width:150px;height:150px;border:8px solid white;background:#fff;border-radius:10px}.join-panel strong{display:block;font-size:46px;letter-spacing:.12em;line-height:1.2;margin:6px 0}.join-panel a{color:var(--muted);font-size:13px;word-break:break-all}.settings{display:grid;grid-template-columns:1fr;gap:9px}.settings label{font-size:13px;color:var(--muted);display:grid;gap:5px}.settings-row{display:flex;gap:10px}.settings-row label{flex:1;min-width:0}.settings select{width:100%;font-size:14px;padding:10px}.player-card{border:1px solid var(--line);border-left:4px solid var(--color,#4c9fff);background:#142036;border-radius:10px;padding:12px 15px;display:flex;align-items:center;justify-content:space-between;gap:12px}.player-card h3{font-size:20px;margin:0 0 4px}.player-card p{font-size:14px}.player-card .dot{color:var(--green)}.player-card button{font-size:11px;padding:6px 8px;min-height:32px}.player-card.active{background:#21334e;box-shadow:0 0 0 1px var(--color)}.score-card{padding:14px;border:1px solid var(--line);border-radius:12px;background:#152238}.score-card h3{margin:0 0 8px;font-size:23px}.score-card p{font-size:14px;margin:4px 0}.room-tools{display:flex;gap:9px}.room-tools button{flex:1;font-size:13px;padding:10px}.connection-good{color:var(--green)}[hidden]{display:none!important}@media(max-width:850px){.table{grid-template-columns:1fr}.board-frame{max-width:600px}.display main{padding:22px 4vw}.display aside{padding-bottom:25px}.join-panel img{width:130px;height:130px}.utility{grid-template-columns:1fr}.display-actions{gap:8px;font-size:11px}.display .brand{font-size:13px}}@media(min-width:1800px){.table{grid-template-columns:minmax(0,1fr) 470px}aside{gap:20px}.player-card h3{font-size:25px}.player-card p{font-size:18px}.join-panel img{width:190px;height:190px}button,input,select{font-size:20px}.join-panel strong{font-size:56px}}
/* Static portal stays usable when a TV lacks grid, clamp(), or CSS variables. */
.portal{font-family:Arial,sans-serif;background:#0b1020;color:#e4edfc}
.portal header{padding:20px 5vw}
.portal .brand span{color:#50d6aa}
.portal main{padding:24px 5vw;max-width:1400px}
.portal .intro{max-width:1000px}
.portal .intro h1{font-size:40px;line-height:1.1;margin:10px 0 12px}
.portal .intro .eyebrow{color:#9aabc4;margin:0}
.portal .intro>p:last-child{font-size:20px;color:#9aabc4;margin:0 0 20px;max-width:none}
.portal .games{display:block;margin:20px 0 0}
.portal .game-card{display:flex;max-width:1000px;border:1px solid #2a3952}
.portal .game-art{width:230px;min-width:230px;height:auto;min-height:190px;padding:25px;display:block;text-align:center}
.portal .art-square{display:inline-block;width:65px;height:65px;margin:7px;border-radius:9px;transform:rotate(-10deg)}
.portal .art-square.blue{background:#4c9fff}.portal .art-square.yellow{background:#f4ca52;transform:rotate(10deg)}
.portal .art-square.pink{background:#f16b81;transform:rotate(8deg)}.portal .art-square.green{background:#50d6aa}
.portal .card-body{padding:24px;flex:1}
.portal .card-body p{color:#9aabc4;margin:8px 0;font-size:18px}
.portal .card-actions{display:block;margin-top:18px}
.portal .card-actions>*{margin-right:10px;margin-bottom:4px}
.portal button.primary{background:#50d6aa}
.portal button:focus,.portal a:focus,.portal input:focus{outline:3px solid white;outline-offset:3px}
.portal .utility{margin:20px 0 0;border-top:1px solid #2a3952;padding-top:20px}
.portal #notice{margin:12px 0 0}
.portal .browser-help{color:#ffbf8f;line-height:1.5}
@media(max-width:600px){.portal header{padding:18px 5vw}.portal .pill{display:none}.portal .intro h1{font-size:30px}.portal .intro>p:last-child{font-size:17px}.portal .game-card{display:block}.portal .game-art{display:none}.portal .card-body{padding:20px}.portal .card-body p{font-size:16px}.portal .utility{display:block}.portal .utility>section{margin-top:24px}.portal .brand{font-size:17px}}
@media(max-height:600px) and (min-width:601px){.portal header{padding:14px 5vw}.portal main{padding-top:16px}.portal .intro h1{font-size:32px}.portal .intro>p:last-child{font-size:17px;margin-bottom:12px}.portal .game-art{min-height:160px}.portal .card-body{padding:18px}.portal .card-body h2{font-size:26px}.portal .card-body p{font-size:16px}}
/* Browsers predating CSS grid still keep the QR and board beside one another. */
@supports not (display:grid){
.display .table{display:flex;align-items:flex-start}
.display .board-frame{width:52%;max-width:540px;margin-right:24px;flex:0 1 540px}
.display #tv-board{height:auto}
.display aside{width:360px;flex:1 1 320px}
.display .settings{display:block}.display .settings>*{margin-bottom:10px}
.display .settings label{display:block}.display .settings label select{display:block;margin-top:5px}
.display aside>*{margin-bottom:15px}
.display .game-heading h1{font-size:36px}.display #board-empty span{font-size:36px}
@media(max-width:700px){.display .table{display:block}.display .board-frame{width:100%;margin:0 0 20px}.display aside{width:100%}}
}
/* Older grid implementations may lack the later min(), aspect-ratio and clamp() features. */
@supports not (aspect-ratio:1){.display #tv-board{height:auto}.display .board-frame{max-width:540px;max-width:calc(100vh - 280px)}}
@supports not (font-size:clamp(1px,2vw,3px)){.display .game-heading h1{font-size:36px}.display #board-empty span{font-size:36px}}