*{margin:0;padding:0;box-sizing:border-box}body{font-family:monospace;background:#333;color:#fff;min-height:100vh;padding:3em 1em;display:flex;flex-direction:column;align-items:center}.container{width:100%;max-width:40em;text-align:center}.container.landing{max-width:48em}h1{font-size:2em;font-weight:700;margin-bottom:1em}h1:after{content:"";display:inline-block;width:.5em;height:1em;margin-left:.15em;background:orange;vertical-align:text-bottom;animation:blink-caret 1s step-end infinite}@keyframes blink-caret{0%,to{opacity:1}50%{opacity:0}}h3{margin-bottom:.5em}a{color:orange}.panel{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:1em;margin:1em 0}.muted{color:#999;font-size:.85em}.muted code{font-family:inherit;color:#ccc}.demo-category{margin:1.5em 0;text-align:left}.demo-category h2{font-size:1.15em;font-weight:700;margin-bottom:.25em}.demo-category>.muted{margin-bottom:.75em}.demo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15em,1fr));gap:1em;margin:1em 0}.demo-category .demo-grid{margin:.75em 0 0}.demo-card{display:flex;flex-direction:column;gap:.5em;padding:1em;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);border-radius:8px;color:inherit;text-decoration:none;transition:border-color .15s,transform .15s}.demo-card:hover{border-color:orange;transform:translateY(-2px)}.demo-card:hover .demo-title{color:orange}.demo-icon{font-size:2em}.demo-title{font-size:1.1em;font-weight:700}.demo-description{color:#ccc;font-size:.85em;line-height:1.4}.demo-card.coming-soon{color:#666;cursor:default}.demo-card.coming-soon:hover{border-color:#ffffff26;transform:none}.demo-card.coming-soon .demo-description{color:#666}.demo-card.coming-soon .demo-icon{filter:grayscale(1) brightness(.6)}.coming-soon-badge{color:#999;font-size:.75em;letter-spacing:.15em;text-transform:uppercase}button{font-family:inherit;color:#333;background:orange;font-weight:700;border:0;border-radius:12px;padding:.75em 1.5em;margin:.5em;cursor:pointer;font-size:1em;white-space:nowrap;transition:color .15s}button:hover{color:#fff}button:disabled{background:#555;color:#999;cursor:not-allowed}input[type=text]{font-family:inherit;font-size:1em;color:#fff;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.3);border-radius:8px;padding:.75em;width:14em;max-width:100%}input[type=text]:focus{outline:none;border-color:orange}input::placeholder{color:#999}.room-code{font-size:2em;font-weight:700;color:orange;letter-spacing:.2em;margin:.25em 0}.status{font-size:1.1em;margin:1em 0;padding:.75em;border-radius:8px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);color:#ccc}.status.connected{border-color:orange;color:orange}.status.waiting{color:#ccc}.status.disconnected{border-color:#ff6b6b;color:#ff6b6b}.game-board{--board: min(90vw, 78vh, 28rem);display:grid;grid-template-columns:repeat(3,1fr);gap:.5em;width:var(--board);margin:1.5em auto}.cell{aspect-ratio:1;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:calc(var(--board) / 3 * .55);font-weight:700;cursor:pointer;transition:border-color .15s,transform .15s}.cell:hover{border-color:orange;transform:translateY(-2px)}.cell.x{color:orange}.cell.o{color:#fff}.cell.winning{border-color:orange;background:rgba(255,165,0,.15);animation:pulse .5s ease-in-out}.cell.disabled{cursor:not-allowed;opacity:.6}.cell.disabled:hover{border-color:#ffffff26;transform:none}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.players{display:flex;justify-content:space-around;gap:1em;margin:1em 0}.player{flex:1;padding:.75em;border-radius:8px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);font-size:.9em}.player.host{border-color:#ffa50080}.player.current{border-color:orange;background:rgba(255,165,0,.15)}.player.connected{border-color:orange}.game-log{max-height:12em;overflow-y:auto;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.15);padding:.75em;border-radius:8px;margin-top:1em;text-align:left;font-size:.85em}.log-entry{margin:.25em 0}.log-entry.info{color:#ccc}.log-entry.success{color:orange}.log-entry.warning{color:#ffce54}.log-entry.error{color:#ff6b6b}.qr-code{margin:1em 0}.qr-code img{background:#fff;padding:.5em;border-radius:8px}.connection-status{display:flex;justify-content:space-between;align-items:center;margin:1em 0;padding:.75em;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);border-radius:8px;font-size:.9em}.connection-indicator{display:inline-block;width:.7em;height:.7em;border-radius:50%;background:#ff6b6b;margin-right:.5em}.connection-indicator.connected{background:orange}.back-link{position:fixed;top:.75em;left:.9em;font-size:1.5em;color:#ccc;text-decoration:none}.back-link:hover{color:orange}.c4-board{--cell: min(12vw, 12vh, 3.5rem);display:grid;grid-template-columns:repeat(7,var(--cell));gap:.3em;justify-content:center;margin:1em auto;padding:.6em;background:rgba(255,255,255,.05);border-radius:.5em;width:fit-content}.c4-cell{width:var(--cell);height:var(--cell);border-radius:50%;background:#222;cursor:pointer}.c4-cell:hover{background:#2c2c2c}.c4-cell.r{background:orange}.c4-cell.y{background:#fff}.c4-cell.disabled{cursor:not-allowed}.c4-cell.winning{box-shadow:0 0 0 3px orange}.chess-board{--board: min(90vw, 78vh, 40rem);display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);width:var(--board);aspect-ratio:1;margin:1em auto 1.5em;border:2px solid #555}.chess-square{display:flex;align-items:center;justify-content:center;font-size:calc(var(--board) / 8 * .72);line-height:1;cursor:pointer;user-select:none}.chess-square.light{background:#6b6b6b}.chess-square.dark{background:#4a4a4a}.chess-square.white-piece{color:#fff}.chess-square.black-piece{color:#1a1a1a}.chess-square.selected{outline:3px solid orange;outline-offset:-3px}.chess-square.target{box-shadow:inset 0 0 0 .35em #ffa50073;border-radius:50%}.chess-square.last-move{background-color:#ffa50040}.poker-table{display:flex;flex-direction:column;align-items:center;gap:.75em;margin:1em auto;padding:1em;background:radial-gradient(ellipse at center,#1f5c3a 0%,#143d27 100%);border:2px solid #0d2a1a;border-radius:1.5em}.opponents{display:flex;flex-wrap:wrap;justify-content:center;gap:.5em;width:100%}.poker-table .board{display:flex;flex-direction:column;align-items:center;gap:.4em;min-height:1.5em}.player-list{list-style:none;margin:.75em auto;padding:.5em .75em;max-width:18em;text-align:left;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);border-radius:8px}.player-list li{padding:.2em 0;color:#ccc}.poker-table .pot{font-weight:700;color:orange;min-height:1.2em}.community{display:flex;gap:.4em;justify-content:center}.seat{display:flex;flex-direction:column;align-items:center;gap:.2em;padding:.4em .6em;border-radius:.6em;border:2px solid transparent;background:rgba(0,0,0,.18);min-width:7em}#selfSeat .seat{min-width:10em;background:rgba(0,0,0,.28)}.seat.acting{border-color:orange;box-shadow:0 0 .6em #ffa50080}.seat.is-folded{opacity:.45}.seat-label{font-size:.85em;color:#eaeaea;font-weight:700;display:flex;align-items:center;gap:.35em}.seat .tag{font-size:.75em;font-weight:400;padding:0 .4em;border-radius:.6em}.seat .tag.fold{background:#555;color:#ccc}.seat .tag.allin{background:#d21f3c;color:#fff}.seat .bet{font-size:.8em;color:#ffce54}.seat-label .dealer{display:inline-block;width:1.3em;height:1.3em;line-height:1.3em;border-radius:50%;background:#fff;color:#333;font-size:.75em;text-align:center;margin-left:.3em}.seat .hole{display:flex;gap:.3em;padding:.15em;border-radius:.4em}.seat .hole.winner{box-shadow:0 0 0 2px orange}.seat .stack{font-size:.85em;color:#cde}.seat .hand-name{font-size:.8em;color:orange}.card{--cw: min(11vw, 3rem);width:var(--cw);height:calc(var(--cw) * 1.4);background:#fff;color:#1a1a1a;border-radius:.35em;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;box-shadow:0 1px 3px #0006;user-select:none}.opponents .card{--cw: min(7vw, 2.1rem)}.card .rank{font-size:calc(var(--cw) * .5);font-weight:700}.card .suit{font-size:calc(var(--cw) * .45)}.card.red{color:#d21f3c}.card.back{background:repeating-linear-gradient(45deg,#b5462f,#b5462f 4px,#9a3826 4px,#9a3826 8px);border:1px solid rgba(255,255,255,.3)}.card.empty{background:rgba(255,255,255,.08);border:1px dashed rgba(255,255,255,.25);box-shadow:none}.bet-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5em;margin:.5em 0}.raise-group{display:flex;align-items:center;gap:.5em}.raise-slider{accent-color:orange;cursor:pointer}.raise-amount{min-width:2em;color:orange;font-weight:700}@media (max-width: 600px){body{padding:1.5em .75em}h1{font-size:1.5em}.players{flex-direction:column}}