/* ============================================================
   GAMES.CSS — Arcade shell, game lobby, scoreboard, and all
   11 game canvases/boards (Snake, Chess, Ludo, Snakes & Ladders,
   Tic Tac Toe, 2048, Memory Match, Tetris, Pong, Flappy Bird, Carrom)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700&family=JetBrains+Mono:wght@300;400;500&display=swap');
*{box-sizing:border-box;margin:0;padding:0;}
:root{
  --bg:#0a0a0f;--bg2:#111118;--bg3:#16161f;--bg4:#1c1c28;
  --border:#ffffff0f;--border2:#ffffff1a;--border3:#ffffff2e;
  --text:#f0eeff;--text2:#9992bb;--text3:#55507a;
  --accent:#7c6fff;--accent2:#a89cff;--accent-glow:rgba(124,111,255,.18);
  --red:#ff4d6a;--gold:#ffd166;--green:#3dffb0;--r:12px;--r2:8px;
}
html,body{height:100%;overflow:hidden;}
body{font-family:'Syne',sans-serif;background:var(--bg);color:var(--text);}

/* ── LAYOUT ── */
.app{display:flex;height:100vh;overflow:hidden;}
.sidebar{width:220px;background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto;}
.sidebar::-webkit-scrollbar{width:3px;}
.sidebar::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px;}
.sidebar-header{padding:16px 16px 10px;border-bottom:1px solid var(--border);flex-shrink:0;}
.sidebar-title{font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--text);}
.sidebar-back{font-size:10px;color:var(--accent2);font-family:'JetBrains Mono',monospace;letter-spacing:.06em;margin-top:3px;cursor:pointer;text-decoration:none;display:block;}
.sidebar-back:hover{color:var(--text);}
.sidebar-section{padding:10px 10px 4px;font-size:9px;font-family:'JetBrains Mono',monospace;color:var(--text3);letter-spacing:.14em;text-transform:uppercase;}
.game-nav-btn{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:var(--r2);cursor:pointer;transition:all .15s;border:none;background:transparent;color:var(--text2);font-family:'Syne',sans-serif;font-size:12px;width:100%;text-align:left;}
.game-nav-btn:hover{background:var(--bg3);color:var(--text);}
.game-nav-btn.active{background:var(--accent-glow);color:var(--accent2);border:1px solid rgba(124,111,255,.2);}
.game-nav-btn .nav-icon{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}
.game-nav-btn .nav-label{flex:1;}
.game-nav-btn .nav-badge{font-size:9px;font-family:'JetBrains Mono',monospace;background:var(--border2);padding:1px 6px;border-radius:10px;color:var(--text3);}
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;}

/* ── TOP BAR ── */
.topbar{padding:12px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;background:rgba(10,10,15,.8);backdrop-filter:blur(10px);}
.topbar-left{display:flex;align-items:center;gap:12px;}
.game-title{font-size:15px;font-weight:600;letter-spacing:.03em;}
.game-players-row{display:flex;gap:6px;align-items:center;}
.player-select{padding:4px 10px;background:var(--bg2);border:1px solid var(--border2);border-radius:20px;color:var(--text);font-size:11px;font-family:'Syne',sans-serif;outline:none;cursor:pointer;}
.player-select option{background:var(--bg3);}
.topbar-btns{display:flex;gap:6px;}
.tbtn{padding:6px 14px;border-radius:20px;font-size:11px;font-family:'Syne',sans-serif;cursor:pointer;border:1px solid var(--border2);background:transparent;color:var(--text2);transition:all .15s;display:flex;align-items:center;gap:5px;}
.tbtn:hover{background:var(--bg3);color:var(--text);}
.tbtn.primary{background:var(--accent);color:#fff;border-color:var(--accent);}
.tbtn.primary:hover{background:#6a5ee0;}
.tbtn.danger{border-color:rgba(255,77,106,.3);color:var(--red);}
.tbtn.danger:hover{background:rgba(255,77,106,.1);}

/* ── GAME AREA ── */
.game-area{flex:1;overflow:hidden;display:flex;align-items:center;justify-content:center;position:relative;padding:10px;}
.game-screen{display:none;}
.game-screen.active{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;}

/* ── LOBBY ── */
.lobby{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;max-width:800px;width:100%;padding:10px;}
.lobby-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:18px 14px;cursor:pointer;transition:all .2s;text-align:center;position:relative;overflow:hidden;}
.lobby-card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,var(--accent-glow),transparent 70%);opacity:0;transition:opacity .2s;}
.lobby-card:hover::before{opacity:1;}
.lobby-card:hover{border-color:rgba(124,111,255,.3);transform:translateY(-3px);}
.lobby-card-icon{font-size:36px;margin-bottom:10px;display:block;}
.lobby-card-name{font-size:13px;font-weight:600;color:var(--text);margin-bottom:4px;}
.lobby-card-desc{font-size:10px;color:var(--text3);font-family:'JetBrains Mono',monospace;}
.lobby-card-tags{display:flex;gap:4px;justify-content:center;margin-top:8px;flex-wrap:wrap;}
.lobby-tag{font-size:9px;padding:2px 7px;border-radius:10px;font-family:'JetBrains Mono',monospace;}
.tag-ai{background:rgba(124,111,255,.15);color:var(--accent2);}
.tag-multi{background:rgba(61,255,176,.1);color:var(--green);}
.tag-solo{background:rgba(255,209,102,.1);color:var(--gold);}

/* ── SCORE BOARD ── */
.scoreboard{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;justify-content:center;}
.score-pill{padding:6px 14px;background:var(--bg2);border:1px solid var(--border2);border-radius:20px;font-size:12px;font-family:'JetBrains Mono',monospace;transition:all .2s;}
.score-pill.active-turn{border-color:var(--accent);color:var(--accent2);box-shadow:0 0 12px rgba(124,111,255,.2);}
.score-pill.winner{border-color:var(--gold);color:var(--gold);animation:winPulse .8s ease-in-out infinite;}
@keyframes winPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,209,102,.4);}50%{box-shadow:0 0 0 8px rgba(255,209,102,0);}}

/* ── SNAKE ── */
#snakeCanvas{border:2px solid var(--border2);border-radius:var(--r2);image-rendering:pixelated;}

/* ── CHESS ── */
.chess-wrap{display:flex;gap:16px;align-items:flex-start;justify-content:center;flex-wrap:wrap;}
.chess-board{display:grid;grid-template-columns:repeat(8,1fr);border:2px solid var(--border2);border-radius:6px;overflow:hidden;flex-shrink:0;}
.chess-cell{width:52px;height:52px;display:flex;align-items:center;justify-content:center;font-size:28px;cursor:pointer;transition:background .1s;position:relative;user-select:none;}
.chess-cell.light{background:#2a2a3e;}
.chess-cell.dark{background:#1a1a2a;}
.chess-cell.selected{background:rgba(124,111,255,.5)!important;}
.chess-cell.possible{background:rgba(61,255,176,.25)!important;}
.chess-cell.last-move{background:rgba(255,209,102,.2)!important;}
.chess-cell:hover{filter:brightness(1.2);}
.chess-info{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r2);padding:14px;min-width:160px;max-width:200px;}
.chess-info h4{font-size:13px;margin-bottom:10px;color:var(--text);}
.chess-log{max-height:200px;overflow-y:auto;font-size:11px;font-family:'JetBrains Mono',monospace;color:var(--text2);display:flex;flex-direction:column;gap:3px;}
.chess-log::-webkit-scrollbar{width:3px;}
.chess-log::-webkit-scrollbar-thumb{background:var(--border2);}
.chess-log-entry{padding:3px 6px;border-radius:4px;background:var(--bg3);}

/* ── LUDO ── */
.ludo-wrap{display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;}
.ludo-board{position:relative;flex-shrink:0;}
.ludo-info{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r2);padding:14px;min-width:150px;}
.dice-area{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:10px;}
.dice{width:56px;height:56px;background:var(--bg3);border:2px solid var(--border2);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:28px;cursor:pointer;transition:all .2s;user-select:none;}
.dice:hover{border-color:var(--accent);transform:scale(1.05);}
.dice.rolling{animation:diceRoll .4s ease;}
@keyframes diceRoll{0%,100%{transform:rotate(0);}25%{transform:rotate(-20deg) scale(1.1);}75%{transform:rotate(20deg) scale(1.1);}}
.turn-indicator{font-size:12px;font-family:'JetBrains Mono',monospace;color:var(--text2);text-align:center;}
.move-btn{padding:7px 16px;border-radius:20px;background:var(--accent);color:#fff;border:none;font-size:12px;cursor:pointer;font-family:'Syne',sans-serif;transition:all .2s;margin-top:6px;}
.move-btn:hover{background:#6a5ee0;}
.move-btn:disabled{opacity:.4;cursor:default;}

/* ── SNAKE LADDER ── */
#slCanvas{border:2px solid var(--border2);border-radius:var(--r2);}

/* ── TIC TAC TOE ── */
.ttt-board{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:300px;width:100%;}
.ttt-cell{height:88px;background:var(--bg2);border:2px solid var(--border2);border-radius:var(--r2);display:flex;align-items:center;justify-content:center;font-size:42px;cursor:pointer;transition:all .2s;user-select:none;}
.ttt-cell:hover:not(.filled){background:var(--bg3);border-color:var(--border3);}
.ttt-cell.x-cell{color:#ff4d6a;}
.ttt-cell.o-cell{color:#7c6fff;}
.ttt-cell.win-cell{background:rgba(255,209,102,.1);border-color:var(--gold);}

/* ── MEMORY MATCH ── */
.mem-board{display:grid;gap:8px;max-width:480px;width:100%;}
.mem-card{aspect-ratio:1;background:var(--bg2);border:2px solid var(--border2);border-radius:var(--r2);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:28px;transition:all .3s;user-select:none;backface-visibility:hidden;}
.mem-card.flipped,.mem-card.matched{background:var(--bg3);border-color:var(--accent);}
.mem-card.matched{border-color:var(--green);animation:matchBounce .4s cubic-bezier(.34,1.5,.64,1);}
@keyframes matchBounce{0%{transform:scale(1);}50%{transform:scale(1.18);}100%{transform:scale(1);}}
.mem-card:not(.flipped):not(.matched) span{display:none;}

/* ── 2048 ── */
.game2048-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;}
.g2048-board{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;background:var(--bg3);padding:8px;border-radius:var(--r2);border:2px solid var(--border2);}
.g2048-cell{width:72px;height:72px;display:flex;align-items:center;justify-content:center;border-radius:var(--r2);font-size:18px;font-weight:700;transition:all .1s;font-family:'JetBrains Mono',monospace;}
.g2048-cell.empty{background:rgba(255,255,255,.04);}
.g2048-cell.v2{background:#CED4FA;color:#1a1460;}
.g2048-cell.v4{background:#B5D4F4;color:#0c2d60;}
.g2048-cell.v8{background:#9FE1CB;color:#063028;}
.g2048-cell.v16{background:#FAC775;color:#3a1f00;}
.g2048-cell.v32{background:#F4C0D1;color:#4a0020;}
.g2048-cell.v64{background:#ff9966;color:#fff;}
.g2048-cell.v128{background:#ff6644;color:#fff;}
.g2048-cell.v256{background:#ee3300;color:#fff;}
.g2048-cell.v512{background:#aa00ff;color:#fff;}
.g2048-cell.v1024{background:#7700dd;color:#fff;font-size:14px;}
.g2048-cell.v2048{background:#ffd166;color:#000;animation:winPulse .5s infinite;}
.g2048-cell.new-tile{animation:popIn .15s cubic-bezier(.34,1.5,.64,1);}
@keyframes popIn{from{transform:scale(0);}to{transform:scale(1);}}

/* ── CARROM ── */
#carromCanvas{border:2px solid var(--border2);border-radius:var(--r2);cursor:crosshair;}
.carrom-controls{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap;justify-content:center;}

/* ── PONG ── */
#pongCanvas{border:2px solid var(--border2);border-radius:var(--r2);}

/* ── FLAPPY BIRD ── */
#flappyCanvas{border:2px solid var(--border2);border-radius:var(--r2);cursor:pointer;}

/* ── TETRIS ── */
#tetrisCanvas{border:2px solid var(--border2);border-radius:var(--r2);}
.tetris-wrap{display:flex;gap:14px;align-items:flex-start;}
.tetris-side{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r2);padding:12px;min-width:120px;}
.tetris-side h4{font-size:11px;font-family:'JetBrains Mono',monospace;color:var(--text3);text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px;}
#nextCanvas{border:1px solid var(--border2);border-radius:4px;}

/* MODAL / OVERLAY */
.game-over-overlay{position:absolute;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(8px);display:none;flex-direction:column;align-items:center;justify-content:center;z-index:50;border-radius:var(--r);}
.game-over-overlay.show{display:flex;}
.game-over-box{background:var(--bg3);border:1px solid var(--border3);border-radius:var(--r);padding:30px 36px;text-align:center;animation:riseIn .35s cubic-bezier(.34,1.3,.64,1);}
@keyframes riseIn{from{opacity:0;transform:scale(.85) translateY(20px);}to{opacity:1;transform:scale(1) translateY(0);}}
.game-over-title{font-size:22px;font-weight:700;margin-bottom:6px;}
.game-over-score{font-size:14px;color:var(--text2);font-family:'JetBrains Mono',monospace;margin-bottom:20px;}
.game-over-btns{display:flex;gap:8px;justify-content:center;}

/* TOAST */
.toast{position:fixed;bottom:18px;right:18px;background:var(--bg3);border:1px solid var(--border3);border-radius:var(--r2);padding:10px 16px;font-size:12px;color:var(--text);display:flex;align-items:center;gap:8px;z-index:200;transform:translateY(12px);opacity:0;transition:all .25s cubic-bezier(.34,1.4,.64,1);pointer-events:none;}
.toast.show{transform:translateY(0);opacity:1;}

/* RESPONSIVE */
@media(max-width:640px){
  .sidebar{width:180px;}
  .chess-cell{width:38px;height:38px;font-size:20px;}
  .g2048-cell{width:56px;height:56px;font-size:15px;}
}
@media(max-width:480px){
  .sidebar{display:none;}
  .game-area{padding:6px;}
}