:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#120f14;color:#fff8d9}*{box-sizing:border-box}body{margin:0;overflow:hidden}.online-shell{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100vh;background:#120f14}.online-header,.online-controls{z-index:3;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:.7rem 1.2rem;border-color:#2d6cdf;background:#17131a}.online-header{border-bottom:3px solid #2d6cdf}.online-header h1{font-size:1.8rem}.online-controls{justify-content:flex-start;border-top:3px solid #2d6cdf;color:#c9c2aa}.online-controls button{margin-left:auto;padding:.5rem .9rem;border:0;border-radius:.6rem;background:#ffd84d;color:#17131a;font-weight:900;cursor:pointer}.online-game{position:relative;min-height:0;overflow:hidden}.online-game canvas{display:block}.connection{padding:.45rem .75rem;border-radius:999px;background:#34303a;font-weight:900}.connection.online{background:#2b8a3e}.connection.disconnected,.connection.full{background:#c92a2a}.online-scoreboard{min-width:15rem}.online-minigames .connection{display:inline-block;margin-top:1rem}.online-player-list{min-height:6rem;margin:1rem 0;padding:.8rem;border:2px solid rgba(255,216,77,.45);border-radius:.75rem;background:#201b25;color:#fff8d9;font:800 .85rem/1.5 ui-monospace,monospace;white-space:pre-wrap}.reconnect-button{width:100%;margin-top:1rem;padding:.65rem;border:0;border-radius:.65rem;background:#ffd84d;color:#17131a;font-weight:900;cursor:pointer}.online-lobby-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-content:center;padding:2rem;background:radial-gradient(circle,#2d6cdf40,#120f14f0 65%);color:#fff8d9;font:900 clamp(1.2rem,3vw,2.5rem)/1.4 ui-monospace,monospace;text-align:center;white-space:pre-line}.online-lobby-overlay[hidden]{display:none}button,textarea{font:inherit}.lab-shell{display:grid;grid-template-columns:23rem 1fr;height:100vh;background:#120f14}.lab-sidebar{min-width:0;padding:1rem;border-right:3px solid #2d6cdf;background:linear-gradient(180deg,#ffd84d29,#120f14f5 14rem),#17131a;overflow:auto}.eyebrow{margin:0;color:#ffd84d;font-weight:900;letter-spacing:.15em;text-transform:uppercase}h1,h2{margin:.2rem 0 .5rem;line-height:.95}h1{font-size:2.4rem}h2{font-size:2rem}p{margin:.35rem 0}.muted{color:#c9c2aa}.demo-list{display:grid;gap:.5rem;margin-top:1rem}.demo-button{display:grid;grid-template-columns:1fr auto;gap:.5rem;align-items:center;width:100%;padding:.65rem .75rem;border:2px solid rgba(255,248,217,.14);border-radius:.75rem;background:#ffffff0e;color:#fff8d9;text-align:left;cursor:pointer}.demo-button:hover,.demo-button.selected{border-color:#ffd84d;background:#ffd84d1f}.pill{padding:.18rem .45rem;border-radius:999px;background:#34303a;color:#c9c2aa;font-size:.75rem;font-weight:800;text-transform:uppercase;white-space:nowrap}.pill.fun{background:#2b8a3e;color:#fff}.pill.notFun{background:#c92a2a;color:#fff}.lab-stage{position:relative;min-width:0;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto}.game-canvas{position:relative;min-height:0;overflow:hidden;background:radial-gradient(circle at center,#2f2635,#120f14 70%)}.game-canvas canvas{display:block}.scoreboard{position:absolute;right:1rem;top:1rem;z-index:2;min-width:13rem;margin:0;padding:.95rem 1.05rem;border:3px solid rgba(255,216,77,.72);border-radius:1rem;background:linear-gradient(135deg,rgba(45,108,223,.22),transparent 42%),#120f14e6;box-shadow:0 .65rem 1.5rem #00000061,inset 0 0 0 2px #ffffff14;color:#fff8d9;font:900 .9rem/1.25 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;letter-spacing:.02em;text-shadow:0 2px 0 rgba(0,0,0,.45);pointer-events:none}.demo-card{display:grid;grid-template-columns:minmax(15rem,1fr) auto minmax(18rem,28rem);gap:.75rem 1rem;align-items:start;padding:1rem;border-top:3px solid #2d6cdf;background:#120f14fa}.demo-card .eyebrow,.demo-card h2,.demo-card p{grid-column:1}.rating-row{grid-column:2;display:flex;gap:.5rem;align-items:center}.rating-row button{padding:.55rem .8rem;border:2px solid rgba(255,248,217,.2);border-radius:.65rem;background:#28232d;color:#fff8d9;font-weight:900;cursor:pointer}.rating-row button:hover,.rating-row button.active{border-color:#ffd84d}.rating-row button:disabled{cursor:not-allowed;opacity:.45}.rating-row .fun.active{background:#2b8a3e}.rating-row .not-fun.active{background:#c92a2a}textarea{grid-column:3;width:100%;min-height:7.5rem;resize:vertical;padding:.75rem;border:2px solid rgba(255,248,217,.2);border-radius:.75rem;background:#201b25;color:#fff8d9}.lobby-card{min-height:100%;grid-template-columns:1fr;place-content:center;text-align:center}.lobby-card .eyebrow,.lobby-card h2,.lobby-card p{grid-column:1}.winner-row{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin:1.5rem 0}.winner-card{min-width:9rem;padding:1rem;border:3px solid #ffd84d;border-radius:1rem;background:linear-gradient(180deg,#ffd84d3d,#2d6cdf2e);animation:crown-bounce .9s ease-in-out infinite alternate}.winner-card span{display:block;color:#c9c2aa;font-size:.85rem;font-weight:800;text-transform:uppercase}.winner-crown{font-size:2.5rem;line-height:1}@keyframes crown-bounce{0%{transform:translateY(0) rotate(-1deg)}to{transform:translateY(-.6rem) rotate(1deg)}}@media(max-width:1000px){.lab-shell{grid-template-columns:1fr}.lab-sidebar{display:none}.demo-card{grid-template-columns:1fr}.demo-card .eyebrow,.demo-card h2,.demo-card p,.rating-row,textarea{grid-column:1}}