:root{
  --bg:#0f1220; --panel:#171a2e; --panel2:#1f2440; --text:#e9ecf8; --muted:#9aa3c7;
  --accent:#ff7ac6; --accent2:#7ad7ff; --good:#8be28b; --bad:#ff7a85;
  --board:#243056; --board2:#2d3a6b; --gold:#f6e26b;
}
*{box-sizing:border-box}
html,body{margin:0;background:radial-gradient(1200px 800px at 90% -10%,#1a3a44 0,#0f1220 60%) fixed;color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
a{color:var(--accent2);text-decoration:none}
button{cursor:pointer;background:var(--panel2);color:var(--text);border:1px solid #2c3257;border-radius:10px;padding:.55rem .9rem;font-weight:600;font:inherit}
button:hover{background:#2a3060}
button.primary{background:linear-gradient(135deg,var(--accent),#b35ffb);border:none}
button.danger{background:#3b1f29;border-color:#5a2a36}
button.tiny{padding:.2rem .5rem;font-size:.8rem}
input,select{background:var(--panel2);border:1px solid #2c3257;color:var(--text);border-radius:10px;padding:.55rem .8rem;font:inherit}
input::placeholder{color:#7a82ad}
.hidden{display:none!important}
.muted{color:var(--muted)}
.err{color:var(--bad);min-height:1.2em}

#app{max-width:1200px;margin:0 auto;padding:1rem}
.top{display:flex;align-items:baseline;gap:1rem;padding:.6rem .2rem 1rem}
.brand{font-size:1.4rem;font-weight:700;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{color:var(--muted)}

.hub h1{margin:.5rem 0 .25rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:1rem}
.game-card{background:var(--panel);border:1px solid #262b50;border-radius:16px;padding:1.2rem;color:var(--text);transition:transform .15s, border-color .15s}
.game-card:hover{transform:translateY(-3px);border-color:var(--accent)}
.game-card .emoji{font-size:2.2rem}
.game-card h3{margin:.4rem 0 .2rem}
.game-card p{margin:0;color:var(--muted);font-size:.92rem}

.card{background:var(--panel);border:1px solid #262b50;border-radius:16px;padding:1.4rem;max-width:560px;margin:2rem auto}
.card h1{margin:.2rem 0 .4rem}
.card label{display:flex;flex-direction:column;gap:.35rem;margin:1rem 0}
.row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-top:.6rem}
.row .or{color:var(--muted);padding:0 .2rem}

#game{display:grid;grid-template-columns:minmax(320px,1fr) 340px;gap:1.2rem;align-items:start}
@media (max-width:900px){ #game{grid-template-columns:1fr} }
.board-wrap{background:var(--panel);border:1px solid #262b50;border-radius:16px;padding:1rem}
.players{display:flex;justify-content:space-between;padding:.4rem .2rem;color:var(--muted)}
.player{display:flex;align-items:center;gap:.5rem;font-weight:600;color:var(--text)}
.tag{font-size:.75rem;color:var(--muted);padding:.1rem .45rem;border:1px solid #2c3257;border-radius:999px}
.actions{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin-top:.6rem}

.sidebar{display:flex;flex-direction:column;gap:.9rem}
.sidebar .info, .sidebar .chat-wrap{background:var(--panel);border:1px solid #262b50;border-radius:14px;padding:.8rem 1rem}
.sidebar h3{margin:.2rem 0 .5rem;font-size:.95rem;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.status{margin-top:.4rem;font-weight:600;color:var(--accent2)}
.chat{height:180px;overflow:auto;background:#0e1124;border-radius:10px;padding:.5rem;border:1px solid #20254a;font-size:.92rem}
.chat .msg{margin:.15rem 0}
.chat .sys{color:var(--muted);font-style:italic}
.chat .me{color:var(--accent)}
#chatForm{display:flex;gap:.4rem;margin-top:.5rem}
#chatForm input{flex:1}

/* Tic-Tac-Toe */
.ttt{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;width:min(360px,80vw);aspect-ratio:1;margin:.5rem auto}
.ttt .cell{background:var(--board);border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:3rem;font-weight:800;cursor:pointer;user-select:none;transition:background .1s}
.ttt .cell:hover:not(.taken){background:var(--board2)}
.ttt .cell.X{color:var(--accent2)}
.ttt .cell.O{color:var(--accent)}
.ttt .cell.win{background:var(--gold);color:#1a1a1a}

/* Connect 4 */
.c4{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;background:#1d3a8a;padding:8px;border-radius:14px;width:min(560px,90vw);aspect-ratio:7/6;margin:.5rem auto}
.c4 .cell{background:#0f1535;border-radius:50%;aspect-ratio:1;position:relative;cursor:pointer;transition:filter .1s}
.c4 .cell.R::after,.c4 .cell.Y::after{content:"";position:absolute;inset:6%;border-radius:50%;animation:dropIn .25s ease-out}
.c4 .cell.R::after{background:radial-gradient(circle at 30% 25%,#ff8a8a,#d33)}
.c4 .cell.Y::after{background:radial-gradient(circle at 30% 25%,#ffefa6,#e7c63a)}
.c4 .cell.win{box-shadow:0 0 0 3px var(--gold) inset}
.c4 .col-hover{filter:brightness(1.25)}
@keyframes dropIn{from{transform:translateY(-200%)}to{transform:translateY(0)}}

/* Reversi */
.rv{display:grid;grid-template-columns:repeat(8,1fr);background:#0a3a1a;padding:6px;gap:2px;border-radius:14px;width:min(520px,90vw);aspect-ratio:1;margin:.5rem auto}
.rv .cell{background:#1c7a3e;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative}
.rv .cell.legal::before{content:"";width:24%;height:24%;border-radius:50%;background:rgba(255,255,255,.35);position:absolute;transition:transform .12s, background .12s}
.rv .cell.legal:hover::before{transform:scale(1.5);background:rgba(255,255,255,.6)}
.rv .cell.B::after,.rv .cell.W::after{content:"";width:78%;height:78%;border-radius:50%}
.rv .cell.B::after{background:radial-gradient(circle at 35% 30%,#666,#000)}
.rv .cell.W::after{background:radial-gradient(circle at 35% 30%,#fff,#bbb)}
.rv .cell.last{box-shadow:inset 0 0 0 3px var(--gold)}
.rv-score{display:flex;justify-content:center;gap:1.2rem;margin:.4rem 0;font-weight:700}
.rv-score .b{color:#222;background:#fff;padding:.2rem .6rem;border-radius:999px}
.rv-score .w{color:#fff;background:#222;padding:.2rem .6rem;border-radius:999px}

.invite{background:#2a1f4a;border:1px solid #5a3a8a;color:#ffe9fb;border-radius:12px;padding:.7rem .9rem;margin:.4rem 0 .8rem;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.invite code{background:#0e1124;padding:.25rem .5rem;border-radius:8px;font-size:.85rem;word-break:break-all}
.invite .solo{display:flex;align-items:center;gap:.35rem;margin-left:auto;color:var(--muted)}
.invite .solo input{margin:0}

/* Gomoku */
.gomoku{display:grid;grid-template-columns:repeat(15,1fr);gap:1px;background:#a0682a;padding:8px;border-radius:10px;width:min(620px,95vw);aspect-ratio:1;margin:.5rem auto}
.gomoku .gcell{background:#d9a566;display:flex;align-items:center;justify-content:center;cursor:default;position:relative;border-radius:2px}
.gomoku .gcell.playable{cursor:pointer}
.gomoku .gcell.playable:hover::after{content:"";width:60%;height:60%;border-radius:50%;background:rgba(255,255,255,.25)}
.gomoku .gcell.B::after,.gomoku .gcell.W::after{content:"";width:80%;height:80%;border-radius:50%;position:absolute}
.gomoku .gcell.B::after{background:radial-gradient(circle at 30% 25%,#555,#000)}
.gomoku .gcell.W::after{background:radial-gradient(circle at 30% 25%,#fff,#bbb)}
.gomoku .gcell.last{box-shadow:inset 0 0 0 2px var(--gold)}
.gomoku .gcell.win{background:var(--gold)}

/* Dots & Boxes */
.db-score{display:flex;justify-content:center;gap:1.2rem;margin:.4rem 0;font-weight:700}
.db-score .A{color:#fff;background:#e64ba0;padding:.2rem .8rem;border-radius:999px}
.db-score .B{color:#fff;background:#3a9ed8;padding:.2rem .8rem;border-radius:999px}
.db{display:grid;width:min(420px,90vw);aspect-ratio:1;margin:.5rem auto;background:var(--panel);padding:1rem;border-radius:14px;
  grid-template-columns:14px 1fr 14px 1fr 14px 1fr 14px 1fr 14px;
  grid-template-rows:14px 1fr 14px 1fr 14px 1fr 14px 1fr 14px;
  gap:0;
}
.db-dot{background:#e9ecf8;border-radius:50%;width:14px;height:14px}
.db-h{height:14px;align-self:center;background:#2c3257;border-radius:6px;cursor:default;margin:0 4px}
.db-v{width:14px;justify-self:center;background:#2c3257;border-radius:6px;cursor:default;margin:4px 0}
.db-h.avail,.db-v.avail{background:#3a4280;cursor:pointer}
.db-h.avail:hover,.db-v.avail:hover{background:var(--accent)}
.db-h.A.filled,.db-v.A.filled{background:#e64ba0}
.db-h.B.filled,.db-v.B.filled{background:#3a9ed8}
.db-box{display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;border-radius:4px}
.db-box.A{background:#e64ba066}
.db-box.B{background:#3a9ed866}

/* RPS */
.rps-score{display:grid;grid-template-columns:1fr auto 1fr;gap:.6rem;align-items:center;justify-items:center;margin:1rem auto;font-size:1.4rem;max-width:420px}
.rps-score > div{padding:.4rem 1rem;background:var(--panel2);border-radius:10px;width:100%;text-align:center}
.rps-score .mine{outline:2px solid var(--accent)}
.rps-score .vs{font-size:1rem;color:var(--muted);background:none}
.rps-score .round{grid-column:1/-1;font-size:.9rem;color:var(--muted);background:none}
.rps-reveal{display:flex;gap:1rem;justify-content:center;margin:.6rem auto}
.rps-reveal .hand{background:var(--panel2);border-radius:14px;padding:.8rem 1.2rem;text-align:center;min-width:130px;border:2px solid transparent}
.rps-reveal .hand .lab{color:var(--muted);font-weight:700}
.rps-reveal .hand .big{font-size:3rem;line-height:1}
.rps-reveal .hand .nm{font-size:.85rem;color:var(--muted)}
.rps-reveal .hand.win{border-color:var(--good);background:#1d3a25}
.rps-reveal .hand.lose{opacity:.55}
.rps-current{display:flex;gap:1rem;justify-content:center;color:var(--muted);margin:.4rem 0}
.rps-picks{margin:.6rem auto;max-width:420px}
.rps-pick-label{color:var(--muted);text-align:center;margin-bottom:.3rem}
.rps-pick-row{display:flex;gap:.6rem;justify-content:center}
.rps-btn{display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.7rem 1.1rem;font-size:.9rem;min-width:90px}
.rps-btn .big{font-size:2rem;line-height:1}
.rps-btn.picked{background:var(--accent);color:#fff}
.rps-btn:disabled{opacity:.6;cursor:default}

/* Generic 4x4+ grids */
.ttt4{display:grid;gap:4px;background:var(--panel2);padding:10px;border-radius:10px;width:min(400px,90vw);aspect-ratio:1;margin:.5rem auto}
.ttt4 .cell{background:#1a1f3a;display:flex;align-items:center;justify-content:center;font-size:clamp(1.2rem,4vw,2rem);font-weight:700;border-radius:8px;cursor:default}
.ttt4 .cell.playable{cursor:pointer}
.ttt4 .cell.playable:hover{background:#2a3368}
.ttt4 .cell.taken.X,.ttt4 .cell.taken.A{color:#5ef}
.ttt4 .cell.taken.O,.ttt4 .cell.taken.B{color:#ff5a8a}
.ttt4 .cell.taken.R{color:#ff4444}
.ttt4 .cell.taken.W,.ttt4 .cell.taken.C{color:#fff}
.ttt4 .cell.last{box-shadow:inset 0 0 0 2px var(--gold)}
.ttt4 .cell.win{background:var(--gold)!important;color:#000!important}
.ttt4 .cell.selected{box-shadow:inset 0 0 0 2px var(--accent)}
.ttt4 .cell.selectable:hover{opacity:.8;cursor:pointer}

/* Hex */
.hex{display:flex;flex-direction:column;gap:2px;align-items:flex-start;margin:.5rem auto;width:min(400px,90vw)}
.hexrow{display:flex;gap:2px}
.hexcell{width:46px;height:46px;background:#1a1f3a;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700}
.hexcell.R{background:#ff4444}.hexcell.B{background:#4466ff}
.hexcell.playable{cursor:pointer;background:#2a3368}
.hexcell.last{box-shadow:0 0 0 2px var(--gold)}

/* Pentago rotate */
.pentago-rotate{display:flex;gap:.4rem;justify-content:center;margin:.4rem 0;flex-wrap:wrap}

/* Quarto */
.quarto-pool{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center;margin:.4rem 0}
.quarto-piece{padding:.3rem .6rem;border:1px solid var(--accent);background:var(--panel2);border-radius:8px;cursor:pointer}
.quarto-info{text-align:center;color:var(--muted);margin:.3rem 0}

/* Nim */
.nim{display:flex;flex-direction:column;gap:1rem;align-items:center;margin:.5rem auto}
.nim-pile{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;max-width:420px}
.nim-stick{width:8px;height:40px;background:#d4a76a;border-radius:4px}
.nim-take{display:flex;gap:.3rem;margin-top:.3rem}

/* Chomp */
.cell.eaten{opacity:.25;background:#2a1f4a!important}
.cell.poison{background:#ff4444!important;color:#fff}

/* Pig */
.pig{text-align:center;margin:.5rem auto;max-width:420px}
.pig-scores{display:flex;gap:1rem;justify-content:center;font-size:1.4rem;margin:.6rem 0}
.pig-scores > div{padding:.4rem 1rem;background:var(--panel2);border-radius:10px}
.pig-scores .active{outline:2px solid var(--accent)}
.pig-run{font-size:1.2rem;margin:.4rem 0}
.pig-actions{display:flex;gap:.6rem;justify-content:center;margin:.6rem 0}

/* Higher or Lower */
.hilo{text-align:center;margin:.5rem auto;max-width:420px}
.hilo-scores{display:flex;gap:1rem;justify-content:center;font-size:1.2rem;margin:.4rem 0}
.hilo-card{width:80px;height:110px;background:#fff;color:#0e1124;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:2.5rem;font-weight:700;margin:.6rem auto}
.hilo-actions{display:flex;gap:.6rem;justify-content:center;margin:.6rem 0}
.hilo-result{text-align:center;color:var(--muted);margin:.3rem 0}

/* Bulls & Cows */
.bc-set,.bc-guess{display:flex;gap:.4rem;justify-content:center;align-items:center;margin:.6rem 0;flex-wrap:wrap}
.bc-list{display:flex;flex-direction:column;gap:.3rem;align-items:center;margin:.4rem 0;max-height:200px;overflow:auto}
.bc-list > div{background:var(--panel2);padding:.3rem .8rem;border-radius:8px}

/* Hangman */
.hm-pick,.hm-game{text-align:center;margin:.5rem auto;max-width:420px}
.hm-mask{font-size:1.8rem;letter-spacing:.4rem;font-weight:700;margin:.6rem 0}
.hm-letters{display:flex;flex-wrap:wrap;gap:.3rem;justify-content:center;margin:.4rem 0}
.hm-letters button{width:32px;height:32px;padding:0;font-size:.8rem}

/* Memory */
.memory{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:min(360px,90vw);margin:.5rem auto}
.mcard{background:var(--panel2);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:2rem;aspect-ratio:1;cursor:default}
.mcard.playable{cursor:pointer}
.mcard.flipped{background:#2a3368}
.mcard.revealed{background:#1d3a25}

/* Mastermind */
.mm-set{text-align:center;margin:.5rem auto;max-width:420px}
.mm-pool{display:flex;gap:.4rem;justify-content:center;margin:.4rem 0;flex-wrap:wrap}
.mm-chosen{font-size:1.6rem;margin:.3rem 0;min-height:40px}
.mm-list{display:flex;flex-direction:column;gap:.3rem;align-items:center;margin:.4rem 0}
.mm-list > div{background:var(--panel2);padding:.3rem .8rem;border-radius:8px}

/* Checkers */
.checkers{display:flex;flex-direction:column;gap:2px;width:min(400px,90vw);margin:.5rem auto;border:2px solid var(--board);border-radius:8px;overflow:hidden}
.crow{display:flex;gap:2px}
.csq{flex:1;aspect-ratio:1;display:flex;align-items:center;justify-content:center;position:relative}
.csq.light{background:#c9a86c}
.csq.dark{background:#4a3020}
.csq.selectable{cursor:pointer;outline:2px dashed var(--accent)}
.csq.playable{cursor:pointer;outline:2px solid var(--good)}
.csq.selected{outline:3px solid var(--accent2)}
.cpiece{width:70%;height:70%;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.cpiece.red{background:linear-gradient(135deg,#ff4444,#cc0000)}
.cpiece.black{background:linear-gradient(135deg,#444,#111)}
.cpiece.king::after{content:"👑";position:absolute;top:2px;left:50%;transform:translateX(-50%);font-size:.8rem;filter:drop-shadow(0 1px 1px rgba(0,0,0,.6))}

/* Battleship */
.bs-place,.bs-battle{text-align:center;margin:.5rem auto;max-width:560px}
.bs-ships{display:flex;gap:.4rem;justify-content:center;flex-wrap:wrap;margin:.4rem 0}
.bs-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:2px;width:min(340px,85vw);margin:.4rem auto}
.bsc{aspect-ratio:1;background:var(--panel2);border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:.7rem}
.bsc.myship{background:#2a3a6b}
.bsc.hit{background:#ff4444}
.bsc.miss{background:#1d3a25}
.bsc.playable{cursor:pointer;outline:2px solid var(--accent)}
.bsc.preview{outline:2px dashed var(--accent2)}
.bsc.ship0{background:#5a3a8b}.bsc.ship1{background:#3a5a8b}.bsc.ship2{background:#3a8b5a}.bsc.ship3{background:#8b5a3a}.bsc.ship4{background:#8b3a5a}
.bs-status{margin:.4rem 0;font-size:.9rem}

/* Mancala */
.mancala{display:flex;align-items:center;justify-content:center;gap:8px;margin:.5rem auto;max-width:480px}
.mcenter{display:flex;flex-direction:column;gap:6px}
.mrow{display:flex;gap:6px}
.mstore{width:60px;height:120px;background:var(--panel2);border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.6rem;font-weight:700;border:2px solid var(--board)}
.mpit{width:52px;height:52px;background:var(--panel2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:700;cursor:default;border:2px solid var(--board)}
.mpit.playable{cursor:pointer;border-color:var(--accent);box-shadow:0 0 8px var(--accent)}
.mscores{text-align:center;margin-top:.4rem}