*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0d0d1a;--bg2:#141428;--bg3:#1c1c35;
  --accent:#7c5cbf;--accent2:#a07fe0;
  --gold:#f0c040;--green:#5cad5c;--red:#c04040;--blue:#4080c0;
  --text:#e8e8f0;--text2:#9090b0;--border:#2a2a4a;
  --sq-light:#f0d9b5;--sq-dark:#b58863;
  --selected:#f6f669cc;--radius:12px;--shadow:0 8px 32px rgba(0,0,0,.5);
}
html,body{height:100%;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
.hidden{display:none!important}

@keyframes pageEnter{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes itemEnter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes boardEnter{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes movePulse{0%{box-shadow:0 0 0 0 rgba(240,192,64,.45)}100%{box-shadow:0 0 0 14px rgba(240,192,64,0)}}

.hub-container,.container,.game-layout{animation:pageEnter .5s cubic-bezier(.2,.8,.2,1) both}
.hub-logo,.logo-area,.section,.game-header,.player-row,.history-panel,.status-bar,.modal{animation:itemEnter .45s cubic-bezier(.2,.8,.2,1) both}
.games-grid>.game-card,.mode-grid>.mode-card{animation:itemEnter .45s cubic-bezier(.2,.8,.2,1) both}
.games-grid>.game-card:nth-child(2),.mode-grid>.mode-card:nth-child(2){animation-delay:.04s}
.games-grid>.game-card:nth-child(3),.mode-grid>.mode-card:nth-child(3){animation-delay:.08s}
.games-grid>.game-card:nth-child(4),.mode-grid>.mode-card:nth-child(4){animation-delay:.12s}
.board,.checkers-board,.go-board,.othello-board,.quoridor-board,.hex-board,.pentago-outer,.sant-board,#abalone-board,#snake-canvas,.ms-grid,.sudoku-grid,.bg-board,#c4-canvas{animation:boardEnter .55s cubic-bezier(.2,.8,.2,1) both}

/* HUB NAVBAR */
.hub-nav{position:sticky;top:0;z-index:100;background:linear-gradient(180deg,rgba(13,13,26,.96),rgba(13,13,26,.88));backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:12px 16px}
.hub-nav-content{width:100%;max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px}
.hub-nav-categories{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.hub-nav-link{color:var(--text2);text-decoration:none;font-size:13px;font-weight:600;padding:6px 12px;border-radius:6px;transition:all .2s;cursor:pointer}
.hub-nav-link:hover{color:var(--text);background:rgba(124,92,191,.15);border-color:var(--accent)}
.hub-nav-join-btn{background:linear-gradient(135deg,var(--accent),#5a3a9f);color:#fff;border:none;padding:10px 16px;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;transition:all .2s;box-shadow:0 4px 12px rgba(124,92,191,.3)}
.hub-nav-join-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(124,92,191,.5)}

/* HUB */
.hub-body{min-height:100vh;background:radial-gradient(ellipse at 50% 0%,#1a0a35 0%,var(--bg) 70%);padding:32px 16px 120px;display:flex;justify-content:center}
.hub-container{width:100%;max-width:760px;display:flex;flex-direction:column;gap:36px}
.hub-logo{text-align:center}
.hub-logo-icon{font-size:56px;filter:drop-shadow(0 0 20px rgba(160,127,224,.5))}
.hub-logo h1{font-size:40px;font-weight:900;background:linear-gradient(135deg,var(--accent2),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-top:8px}
.hub-subtitle{color:var(--text2);margin-top:6px;font-size:14px}
.hub-category{display:flex;flex-direction:column;gap:12px}
.hub-cat-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--text2);padding:0 2px}
.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(195px,1fr));gap:12px}
.game-card{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--border);padding:18px 16px 14px;display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--text);transition:all .2s;background:var(--gc,var(--bg2))}
.game-card:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 8px 32px rgba(124,92,191,.3)}
.game-icon{font-size:38px;line-height:1;filter:drop-shadow(0 2px 8px rgba(0,0,0,.5))}
.game-info{}
.game-name{font-size:15px;font-weight:800}
.game-desc{font-size:11px;color:var(--text2);margin-top:3px}
.game-badges{display:flex;gap:5px;flex-wrap:wrap}
.badge{font-size:10px;padding:2px 7px;border-radius:99px;font-weight:600}
.badge-multi{background:rgba(124,92,191,.3);color:var(--accent2);border:1px solid rgba(124,92,191,.4)}
.badge-solo{background:rgba(92,173,92,.2);color:#7ddf7d;border:1px solid rgba(92,173,92,.3)}
.badge-modes{background:rgba(240,192,64,.2);color:var(--gold);border:1px solid rgba(240,192,64,.3)}

/* LOBBY */
.index-body{display:flex;align-items:flex-start;justify-content:center;min-height:100vh;background:radial-gradient(ellipse at 50% 0%,#1a0a35 0%,var(--bg) 70%);padding-top:60px;overflow-y:auto}
.container{width:100%;max-width:500px;padding:24px 16px 40px;display:flex;flex-direction:column;gap:28px}
.logo-area{text-align:center;padding:8px 0;position:relative}
.logo-icon{font-size:52px;line-height:1;margin-bottom:8px;filter:drop-shadow(0 0 20px rgba(160,127,224,.6))}
.logo-area h1{font-size:28px;font-weight:800;letter-spacing:-1px;background:linear-gradient(135deg,var(--accent2),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.subtitle{color:var(--text2);margin-top:6px;font-size:13px}
.back-home{position:absolute;left:0;top:0;display:inline-flex;align-items:center;justify-content:center;width:138px;height:38px;padding:0 12px;box-sizing:border-box;z-index:6;pointer-events:auto;border:1px solid var(--border);border-radius:8px;background:rgba(20,20,40,.72);color:var(--text2);text-decoration:none;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .2s}
.back-home:hover{color:var(--text);border-color:var(--accent);background:rgba(40,40,72,.92);transform:translateY(-1px)}
.global-back-btn{position:fixed;left:14px;top:14px;z-index:120;border:1px solid var(--border);background:rgba(20,20,40,.88);backdrop-filter:blur(8px);color:var(--text);border-radius:999px;padding:9px 14px;font-size:13px;font-weight:700;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.32);transition:transform .18s ease,border-color .18s ease,background .18s ease}
.global-back-btn:hover{transform:translateY(-2px);border-color:var(--accent2);background:rgba(40,40,72,.92)}
.section{display:flex;flex-direction:column;gap:12px}
.section-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--text2)}
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mode-card{background:var(--bg2);border:2px solid var(--border);border-radius:var(--radius);padding:14px 10px;cursor:pointer;transition:all .2s;text-align:center}
.mode-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.mode-card.selected{border-color:var(--accent2);background:rgba(124,92,191,.15);box-shadow:0 0 20px rgba(124,92,191,.2)}
.mode-icon{font-size:24px;margin-bottom:6px}
.mode-name{font-size:13px;font-weight:700;margin-bottom:3px}
.mode-desc{font-size:11px;color:var(--text2);line-height:1.4}
.mode-badge-new{display:inline-block;margin-top:6px;font-size:10px;background:var(--green);color:#fff;padding:2px 8px;border-radius:99px;font-weight:600}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 24px;border:none;border-radius:var(--radius);font-size:14px;font-weight:700;cursor:pointer;transition:all .2s;text-decoration:none;font-family:inherit;white-space:nowrap}
.btn-primary{background:linear-gradient(135deg,var(--accent),#5a3a9f);color:#fff;box-shadow:0 4px 16px rgba(124,92,191,.4);width:100%}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(124,92,191,.6)}
.btn-secondary{background:var(--bg3);color:var(--text);border:2px solid var(--border);width:100%}
.btn-secondary:hover{border-color:var(--accent)}
.btn-ghost{background:transparent;color:var(--text2);font-size:13px;padding:8px 16px}
.btn-ghost:hover{color:var(--text)}
.btn-small{padding:7px 14px;font-size:12px;background:var(--bg3);color:var(--text2);border:1px solid var(--border);border-radius:8px;cursor:pointer;font-family:inherit}
.btn-small:hover{border-color:var(--accent)}
.action-buttons{display:flex;flex-direction:column;gap:10px}
.join-form{display:flex;flex-direction:column;gap:10px}
.input-label{font-size:13px;color:var(--text2);font-weight:600}
#join-code-input{background:var(--bg3);border:2px solid var(--border);border-radius:var(--radius);padding:14px 16px;font-size:22px;font-weight:800;letter-spacing:6px;text-align:center;color:var(--text);text-transform:uppercase;font-family:monospace;width:100%}
#join-code-input:focus{outline:none;border-color:var(--accent2)}
.error-text{color:var(--red);font-size:13px;text-align:center}

/* GAME LAYOUT */
.game-body{background:radial-gradient(ellipse at 50% 0%,#1a0a35 0%,var(--bg) 70%);min-height:100vh;display:flex;align-items:center;justify-content:center}
.game-layout{display:flex;align-items:flex-start;justify-content:center;gap:14px;padding:10px;width:100%;max-width:880px}
.game-main{display:flex;flex-direction:column;align-items:center;gap:10px;flex-shrink:0}
.game-header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:4px}
.back-link{color:var(--text2);text-decoration:none;font-size:13px}
.back-link:hover{color:var(--text)}
.mode-badge-header{background:rgba(124,92,191,.2);color:var(--accent2);padding:4px 12px;border-radius:99px;font-size:12px;font-weight:600;border:1px solid rgba(124,92,191,.3)}
.code-badge-header{color:var(--text2);font-size:12px;font-family:monospace;letter-spacing:2px}
.player-row{width:100%;display:flex;align-items:center;gap:10px;padding:7px 12px;background:var(--bg2);border-radius:10px;border:1px solid var(--border)}
.player-dot{width:13px;height:13px;border-radius:50%;border:2px solid rgba(255,255,255,.3);flex-shrink:0}
.dot-white{background:#f0f0f0}
.dot-black{background:#222240;border-color:var(--border)}
.player-label{color:var(--text2);font-size:13px;flex:1}
.piece-count{font-size:13px;font-weight:700;color:var(--gold);font-family:monospace}
.status-bar{width:100%;text-align:center;padding:9px 14px;border-radius:10px;font-size:13px;font-weight:600;background:var(--bg2);border:1px solid var(--border);transition:all .3s}
.status-bar.my-turn{border-color:var(--green);color:#7ddf7d;background:rgba(92,173,92,.1)}
.status-bar.opp-turn{color:var(--text2)}

/* CHESS BOARD */
.board-wrapper{position:relative;display:grid;grid-template-areas:". top";"left board";grid-template-columns:18px 1fr;grid-template-rows:18px 1fr;gap:2px}
.board-coords-top{grid-area:top;display:grid;grid-template-columns:repeat(8,1fr)}
.board-coords-top span,.board-side-left span{font-size:10px;color:var(--text2);text-align:center;display:flex;align-items:center;justify-content:center}
.board-side-left{grid-area:left;display:grid;grid-template-rows:repeat(8,1fr)}
.board{grid-area:board;display:grid;grid-template-columns:repeat(8,1fr);border-radius:6px;overflow:hidden;box-shadow:var(--shadow),0 0 0 3px var(--border);aspect-ratio:1;width:min(calc(100vw - 240px),460px);position:relative}
.cell{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;user-select:none}
.cell.light{background:var(--sq-light)}
.cell.dark{background:var(--sq-dark)}
.cell.selected{background:var(--selected)!important}
.cell.last-move{box-shadow:inset 0 0 0 2px rgba(240,192,64,.75)}
.cell.last-move::before{content:'';position:absolute;inset:16%;border-radius:50%;background:rgba(240,192,64,.18);pointer-events:none}
.cell.last-move-pop{animation:movePulse .32s ease-out}
.cell.valid-move::after{content:'';width:32%;height:32%;border-radius:50%;background:rgba(20,180,20,.7);pointer-events:none}
.cell.capture-move{background:rgba(220,50,50,.5)!important}
.cell:hover:not(.selected){filter:brightness(1.1)}
.piece{font-size:clamp(18px,4.5vw,36px);line-height:1;pointer-events:none;z-index:1;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}
.piece-arriving{opacity:0}
.piece-moving{position:absolute;z-index:8;pointer-events:none;transition:left .24s cubic-bezier(.22,1,.36,1),top .24s cubic-bezier(.22,1,.36,1),transform .24s cubic-bezier(.22,1,.36,1),opacity .24s ease;transform:translate(-50%,-50%) scale(1);opacity:1;will-change:left,top,transform,opacity}
.piece.white{color:#fffde7}
.piece.black{color:#1a1a3a;-webkit-text-stroke:1px rgba(255,255,255,.2)}

/* HISTORY */
.history-panel{width:185px;flex-shrink:0;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);display:flex;flex-direction:column;max-height:580px;align-self:stretch}
.history-header{padding:10px 14px;font-size:11px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:1px;border-bottom:1px solid var(--border);flex-shrink:0}
.history-list{flex:1;overflow-y:auto;padding:4px 0;display:flex;flex-direction:column;gap:1px}
.history-list::-webkit-scrollbar{width:4px}
.history-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.history-empty{padding:12px;font-size:11px;color:var(--text2);font-style:italic;text-align:center}
.history-move{display:flex;align-items:center;gap:5px;padding:3px 10px;font-size:11px;border-radius:5px;margin:0 3px}
.history-move.white-move{border-left:2px solid rgba(240,217,181,.5)}
.history-move.black-move{border-left:2px solid rgba(181,136,99,.5)}
.history-num{font-size:10px;color:var(--text2);font-family:monospace;min-width:16px}
.history-piece{font-size:13px;line-height:1}
.history-notation{font-family:monospace;font-size:11px;color:var(--text);font-weight:600}
.history-capture{color:var(--red)}
.history-check{color:var(--gold)}

/* CHECKERS */
.checkers-board{display:grid;grid-template-columns:repeat(8,1fr);border-radius:6px;overflow:hidden;box-shadow:var(--shadow),0 0 0 3px var(--border);width:min(calc(100vw - 240px),460px);aspect-ratio:1}
.c-cell{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;user-select:none}
.c-cell.light{background:var(--sq-light)}
.c-cell.dark{background:#5c4033}
.c-cell.selected{background:var(--selected)!important}
.c-cell.valid-move::after{content:'';width:30%;height:30%;border-radius:50%;background:rgba(20,180,20,.7);pointer-events:none}
.checker{width:72%;height:72%;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:clamp(12px,3vw,20px);cursor:pointer;box-shadow:0 3px 8px rgba(0,0,0,.5),inset 0 -3px 4px rgba(0,0,0,.2);border:2px solid rgba(255,255,255,.15)}
.checker.red{background:radial-gradient(circle at 35% 35%,#e06060,#9a2020)}
.checker.blue{background:radial-gradient(circle at 35% 35%,#6090e0,#1a3a9a)}

/* TTT */
.ttt-board{display:grid;gap:4px;background:var(--border);border-radius:10px;overflow:hidden;box-shadow:var(--shadow)}
.ttt-3{grid-template-columns:repeat(3,1fr);width:min(300px,calc(100vw - 48px))}
.ttt-5{grid-template-columns:repeat(5,1fr);width:min(380px,calc(100vw - 48px))}
.ttt-cell{background:var(--bg2);aspect-ratio:1;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:clamp(24px,7vw,48px);transition:background .1s;user-select:none}
.ttt-cell:hover:not(.taken){background:var(--bg3)}
.ttt-cell.x-cell{color:#e06060}
.ttt-cell.o-cell{color:#6090e0}
.ttt-cell.win-cell{background:rgba(240,192,64,.2)!important;animation:pulse .6s ease infinite alternate}
@keyframes pulse{from{background:rgba(240,192,64,.1)!important}to{background:rgba(240,192,64,.3)!important}}

/* GO BOARD */
.go-board{display:grid;background:#c8a050;border:3px solid #8a5c20;border-radius:6px;box-shadow:var(--shadow);padding:16px;gap:0;width:min(420px,calc(100vw-220px));aspect-ratio:1}
.go-cell{position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer}
.go-cell::before{content:'';position:absolute;background:#7a5020;z-index:0}
.go-cell.line-h::before{width:100%;height:1px}
.go-cell.line-v::after{content:'';position:absolute;width:1px;height:100%;background:#7a5020;z-index:0}
.go-stone{width:82%;height:82%;border-radius:50%;z-index:1;box-shadow:0 2px 6px rgba(0,0,0,.5);border:1px solid rgba(0,0,0,.3)}
.go-stone.black{background:radial-gradient(circle at 35% 35%,#555,#111)}
.go-stone.white{background:radial-gradient(circle at 35% 35%,#fff,#ddd)}
.go-cell:hover .go-hint{display:block}
.go-hint{display:none;width:70%;height:70%;border-radius:50%;background:rgba(0,0,0,.25);z-index:1}

/* OTHELLO */
.othello-board{display:grid;grid-template-columns:repeat(8,1fr);background:#006600;border:3px solid #004400;border-radius:6px;box-shadow:var(--shadow);gap:2px;padding:4px;width:min(400px,calc(100vw-220px));aspect-ratio:1}
.ot-cell{background:#007700;border-radius:3px;display:flex;align-items:center;justify-content:center;cursor:pointer;aspect-ratio:1}
.ot-cell:hover{background:#008800}
.ot-cell.hint-move{background:#009900}
.ot-stone{width:78%;height:78%;border-radius:50%;box-shadow:0 2px 5px rgba(0,0,0,.5)}
.ot-stone.white{background:radial-gradient(circle at 35% 35%,#fff,#ccc)}
.ot-stone.black{background:radial-gradient(circle at 35% 35%,#555,#111)}

/* CONNECT 4 */
.c4-board{background:#1a1a8a;border-radius:8px;padding:8px;box-shadow:var(--shadow);display:grid;grid-template-columns:repeat(7,1fr);gap:6px;width:min(420px,calc(100vw-40px))}
.c4-col{display:flex;flex-direction:column;gap:6px;cursor:pointer;border-radius:6px;padding:4px}
.c4-col:hover{background:rgba(255,255,255,.1)}
.c4-cell{border-radius:50%;aspect-ratio:1;background:#0d0d4a;box-shadow:inset 0 3px 8px rgba(0,0,0,.5)}
.c4-cell.red{background:radial-gradient(circle at 35% 35%,#ff6060,#cc0000);box-shadow:0 2px 8px rgba(200,0,0,.5)}
.c4-cell.yellow{background:radial-gradient(circle at 35% 35%,#ffff60,#cccc00);box-shadow:0 2px 8px rgba(200,200,0,.5)}
.c4-cell.win{animation:c4win .4s ease infinite alternate}
@keyframes c4win{from{filter:brightness(1)}to{filter:brightness(1.5)}}

/* BATTLESHIP */
.bs-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:2px;background:var(--border);border-radius:6px;overflow:hidden;width:min(260px,calc(50vw - 30px));aspect-ratio:1}
.bs-cell{background:#0a1a2a;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:clamp(8px,2vw,14px);aspect-ratio:1;user-select:none;position:relative;transition:transform .18s ease,filter .18s ease,background .18s ease}
.bs-cell:hover:not(.shot){background:#0a2a3a}
.bs-cell.ship{background:#2a4a2a;overflow:hidden}
.bs-cell.ship::before{content:'';position:absolute;inset:2px;border-radius:6px;background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.02));opacity:.85}
.bs-cell.ship::after{content:'';position:absolute;inset:auto 18% 20% 18%;height:18%;border-radius:999px;background:rgba(255,255,255,.14)}
.bs-cell.ship-carrier{background:linear-gradient(180deg,#4d647e,#26384d)}
.bs-cell.ship-cruiser{background:linear-gradient(180deg,#5f6d8d,#2e3853)}
.bs-cell.ship-destroyer{background:linear-gradient(180deg,#567a7a,#244848)}
.bs-cell.ship-submarine{background:linear-gradient(180deg,#6d6b82,#39374c)}
.bs-cell.ship-patrol{background:linear-gradient(180deg,#7b5f76,#442c47)}
.bs-cell.ship-head-h::before,.bs-cell.ship-head-v::before,.bs-cell.ship-tail-h::before,.bs-cell.ship-tail-v::before{border-radius:10px}
.bs-cell.ship-head-h::before{clip-path:polygon(0 50%,18% 0,100% 0,100% 100%,18% 100%)}
.bs-cell.ship-tail-h::before{clip-path:polygon(0 0,82% 0,100% 50%,82% 100%,0 100%)}
.bs-cell.ship-head-v::before{clip-path:polygon(0 18%,50% 0,100% 18%,100% 100%,0 100%)}
.bs-cell.ship-tail-v::before{clip-path:polygon(0 0,100% 0,100% 82%,50% 100%,0 82%)}
.bs-cell.ship-mid-v::after{inset:18% auto 18% 35%;width:30%;height:auto}
.bs-cell.ship-mid-h::after{inset:auto 18% 35% 18%;height:30%}
.bs-cell.ship.selected{background:#4a8a4a}
.bs-cell.hit{background:#8a2020;animation:shipShake .32s ease}
.bs-cell.miss{background:#1a2a3a;color:var(--text2)}
.bs-cell.sunk{background:#6a1010}
.bs-cell.waiting{background:#2d314f;color:#d1d7ff}
.bs-cell.impact::before{content:'';position:absolute;inset:10%;border-radius:50%;background:radial-gradient(circle,rgba(255,220,120,.95) 0,rgba(255,120,60,.72) 45%,rgba(255,60,40,0) 70%);animation:impactBurst .44s ease-out}

.bs-game-body{overflow:hidden}
.bs-page{height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:10px;padding:12px;box-sizing:border-box}
.bs-battle-layout{flex:1;min-height:0;display:flex;gap:12px;align-items:stretch;justify-content:center;width:100%;max-width:1160px;overflow:hidden}
.bs-battle-layout.invert{flex-direction:row-reverse}
.bs-side{display:flex;gap:10px;align-items:stretch;min-width:0;flex:1;justify-content:center}
.bs-battle-layout.invert #bs-side-my{flex-direction:row-reverse}
.bs-battle-layout.invert #bs-side-enemy{flex-direction:row-reverse}
.bs-grid-block{display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center}
.bs-grid{width:min(220px,calc(50vw - 180px))}
.bs-dashboard{width:190px;max-width:190px;background:rgba(20,20,40,.78);border:1px solid var(--border);border-radius:14px;padding:10px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px;animation:itemEnter .45s cubic-bezier(.2,.8,.2,1) both;overflow-y:auto;overflow-x:hidden;min-height:0}
.bs-dashboard::-webkit-scrollbar{width:6px}
.bs-dashboard::-webkit-scrollbar-thumb{background:var(--border);border-radius:999px}
.bs-dashboard-header{display:flex;align-items:center;justify-content:space-between;gap:10px}
.bs-dashboard-title{font-size:13px;font-weight:800;color:var(--text);letter-spacing:.4px}
.bs-dashboard-sub{font-size:11px;color:var(--text2)}
.bs-fleet-section{display:flex;flex-direction:column;gap:10px}
.bs-fleet-grid{display:grid;grid-template-columns:1fr;gap:8px}
.bs-ship-card{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));border:1px solid var(--border);border-radius:12px;padding:8px 9px;display:flex;flex-direction:column;gap:6px;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.bs-ship-card:hover{transform:translateY(-1px);border-color:rgba(160,127,224,.45)}
.bs-ship-card.damaged{border-color:rgba(240,192,64,.38);box-shadow:0 0 0 1px rgba(240,192,64,.08),0 8px 20px rgba(0,0,0,.2)}
.bs-ship-card.sunk{border-color:rgba(192,64,64,.5);background:linear-gradient(180deg,rgba(120,24,24,.22),rgba(50,10,10,.18))}
.bs-ship-headline{display:flex;align-items:center;gap:10px}
.bs-ship-icon{font-size:20px;line-height:1;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.bs-ship-meta{display:flex;flex-direction:column;gap:2px}
.bs-ship-name{font-size:12px;font-weight:800}
.bs-ship-size{font-size:10px;color:var(--text2)}
.bs-ship-health{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.bs-ship-seg{width:20px;height:10px;border-radius:999px;background:linear-gradient(180deg,rgba(120,160,220,.92),rgba(55,86,138,.92));position:relative;overflow:hidden;transition:transform .18s ease,filter .18s ease,opacity .18s ease}
.bs-ship-seg::before{content:'';position:absolute;inset:1px;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.02))}
.bs-ship-seg.hit{background:linear-gradient(180deg,rgba(120,46,46,.96),rgba(72,16,16,.96));transform:rotate(-6deg) scale(.96);opacity:.85}
.bs-ship-seg.hit::after{content:'';position:absolute;left:50%;top:50%;width:140%;height:2px;background:rgba(255,220,180,.72);transform:translate(-50%,-50%) rotate(-18deg);box-shadow:0 0 10px rgba(255,120,80,.45)}
.bs-ship-seg.sunk{background:linear-gradient(180deg,rgba(80,18,18,.96),rgba(35,8,8,.96));opacity:.65}
.bs-ship-status{font-size:10px;color:var(--text2);font-weight:700}
.bs-ship-status strong{color:var(--gold)}
@keyframes shipShake{0%{transform:translateX(0)}25%{transform:translateX(-1px)}50%{transform:translateX(2px)}75%{transform:translateX(-1px)}100%{transform:translateX(0)}}
@keyframes impactBurst{from{transform:scale(.45);opacity:1}to{transform:scale(1.35);opacity:0}}
.bs-ship-btn{padding:8px 14px;background:var(--bg2);border:2px solid var(--border);border-radius:8px;cursor:pointer;font-size:12px;color:var(--text);font-family:inherit;transition:all .2s}
.bs-ship-btn.selected{border-color:var(--accent2);background:rgba(124,92,191,.2)}
.bs-ship-btn.placed{border-color:var(--green);opacity:.6}

/* DOTS AND BOXES */
#db-board{position:relative;user-select:none}
.db-dot{position:absolute;width:10px;height:10px;background:var(--text);border-radius:50%;transform:translate(-50%,-50%)}
.db-line{position:absolute;cursor:pointer;background:var(--border);transition:background .15s}
.db-line:hover{background:var(--accent)}
.db-line.taken-white{background:#c04040!important;cursor:default}
.db-line.taken-black{background:#4060c0!important;cursor:default}
.db-box{position:absolute;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;opacity:.7}
.db-box.white{background:rgba(192,64,64,.3)}
.db-box.black{background:rgba(64,96,192,.3)}

/* NIM */
.nim-pile{display:flex;align-items:center;gap:4px;padding:12px 16px;background:var(--bg2);border:2px solid var(--border);border-radius:12px;cursor:default;flex-wrap:wrap}
.nim-pile.active{border-color:var(--accent);cursor:pointer}
.nim-stone{width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#a0a0c0,#505070);box-shadow:0 2px 4px rgba(0,0,0,.5);cursor:pointer;border:1px solid rgba(255,255,255,.2);transition:all .1s;flex-shrink:0}
.nim-stone:hover{transform:scale(1.2);background:radial-gradient(circle at 35% 35%,#c0c0e0,#7070a0)}
.nim-stone.selected{background:radial-gradient(circle at 35% 35%,var(--gold),#c08000);transform:scale(1.1)}
.nim-pile-label{font-size:12px;color:var(--text2);margin-left:8px}
#nim-confirm-btn{margin-top:8px;padding:10px 24px;font-size:14px}

/* HEX BOARD */
.hex-board{display:flex;flex-direction:column;gap:0;padding:10px;background:var(--bg2);border-radius:8px;border:1px solid var(--border)}
.hex-row{display:flex;gap:0}
.hex-cell{width:36px;height:32px;background:var(--bg3);border:1px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);transition:background .1s;margin:-1px}
.hex-cell:hover:not(.taken){background:rgba(124,92,191,.3)}
.hex-cell.white{background:#e0d0b0!important}
.hex-cell.black{background:#303050!important}
.hex-cell.hint{background:rgba(240,192,64,.3)!important}

/* PENTAGO */
.pentago-outer{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:var(--bg3);padding:10px;border-radius:12px;border:2px solid var(--border)}
.pent-quad{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;background:var(--bg2);padding:6px;border-radius:8px;border:1px solid var(--border)}
.pent-cell{width:40px;height:40px;border-radius:50%;background:var(--bg3);border:2px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:20px;transition:all .1s}
.pent-cell:hover:not(.taken){background:rgba(124,92,191,.2);border-color:var(--accent)}
.pent-cell.white{background:radial-gradient(circle at 35% 35%,#f0e8d0,#c0b090)}
.pent-cell.black{background:radial-gradient(circle at 35% 35%,#404060,#101030)}
.pent-cell.win{animation:pulse .5s infinite alternate}
.rot-btn{padding:8px 14px;background:var(--bg2);border:1px solid var(--border);border-radius:8px;cursor:pointer;color:var(--text);font-size:12px;font-family:inherit}
.rot-btn:hover{border-color:var(--accent);background:rgba(124,92,191,.1)}

/* QUORIDOR */
.quoridor-board{display:grid;background:var(--bg3);border:2px solid var(--border);border-radius:8px;padding:8px;box-shadow:var(--shadow)}
.qr-cell{background:var(--bg2);border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:20px;aspect-ratio:1;border:1px solid var(--border);position:relative}
.qr-cell:hover.movable{background:rgba(92,173,92,.2);border-color:var(--green)}
.qr-cell.movable{background:rgba(92,173,92,.1)}
.qr-cell.wall-preview::after{content:'';position:absolute;background:rgba(240,192,64,.65);border-radius:3px;pointer-events:none;box-shadow:0 0 10px rgba(240,192,64,.28)}
.qr-cell.wall-preview-top::after{left:2px;right:2px;top:-5px;height:8px}
.qr-cell.wall-preview-bottom::after{left:2px;right:2px;bottom:-5px;height:8px}
.qr-cell.wall-preview-left::after{top:2px;bottom:2px;left:-5px;width:8px}
.qr-cell.wall-preview-right::after{top:2px;bottom:2px;right:-5px;width:8px}
.qr-cell.wall-preview-invalid::after{background:rgba(192,64,64,.65);box-shadow:0 0 10px rgba(192,64,64,.28)}
.qr-gap-h{background:transparent;cursor:pointer;border-radius:2px}
.qr-gap-h:hover{background:rgba(240,192,64,.3)}
.qr-gap-h.wall{background:var(--gold)!important}
.qr-gap-v{background:transparent;cursor:pointer;border-radius:2px}
.qr-gap-v:hover{background:rgba(240,192,64,.3)}
.qr-gap-v.wall{background:var(--gold)!important}
.qr-pawn-white{font-size:22px}
.qr-pawn-black{font-size:22px}

/* ABALONE */
#abalone-board{position:relative;background:radial-gradient(circle,#2a2a2a,#0a0a0a);border-radius:50%;aspect-ratio:1;width:min(380px,calc(100vw-220px));border:4px solid var(--border);box-shadow:var(--shadow)}
.ab-marble{position:absolute;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px rgba(0,0,0,.5),inset 0 -2px 4px rgba(0,0,0,.3);border:2px solid rgba(255,255,255,.2);transform:translate(-50%,-50%);transition:all .15s}
.ab-marble.white{background:radial-gradient(circle at 35% 35%,#f8f8f8,#c0c0c0)}
.ab-marble.black{background:radial-gradient(circle at 35% 35%,#505050,#111)}
.ab-marble.selected{box-shadow:0 0 0 3px var(--gold),0 3px 8px rgba(0,0,0,.5);z-index:2}
.ab-marble.movable{box-shadow:0 0 0 2px var(--green),0 3px 8px rgba(0,0,0,.5)}
.ab-marble:hover{filter:brightness(1.2)}

/* SANTORINI */
.sant-board{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;background:var(--bg3);padding:10px;border-radius:12px;border:2px solid var(--border);width:min(340px,calc(100vw-220px))}
.sant-cell{aspect-ratio:1;border-radius:8px;background:var(--bg2);border:2px solid var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;position:relative;transition:all .15s;min-height:52px}
.sant-cell:hover.movable{border-color:var(--green);background:rgba(92,173,92,.1)}
.sant-cell.movable{border-color:rgba(92,173,92,.5)}
.sant-cell.buildable{border-color:rgba(240,192,64,.5)}
.sant-cell:hover.buildable{border-color:var(--gold);background:rgba(240,192,64,.1)}
.sant-tower{font-size:10px;font-weight:700;color:var(--text2);position:absolute;bottom:2px;left:50%;transform:translateX(-50%)}
.sant-worker{font-size:22px;z-index:1;line-height:1}
.sant-dome{position:absolute;inset:4px;border-radius:50%;background:rgba(64,100,200,.5);border:2px solid #4060c0}

/* SNAKE */
#snake-canvas{border:2px solid var(--border);border-radius:8px;box-shadow:var(--shadow)}

/* MINESWEEPER */
.ms-grid{display:inline-grid;gap:2px;padding:10px;background:var(--bg2);border-radius:8px;border:2px solid var(--border);box-shadow:var(--shadow)}
.ms-cell{width:32px;height:32px;background:var(--bg3);border:1px solid var(--border);border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;font-weight:700;user-select:none;transition:background .1s}
.ms-cell:hover:not(.revealed){background:rgba(124,92,191,.2)}
.ms-cell.revealed{background:var(--bg2);cursor:default;border-color:transparent}
.ms-cell.mine{background:#8a1010}
.ms-cell.flagged{background:#3a2a0a}
.ms-n1{color:#4080ff}.ms-n2{color:#40c040}.ms-n3{color:#ff4040}.ms-n4{color:#800080}.ms-n5{color:#800000}.ms-n6{color:#008080}.ms-n7{color:#000}.ms-n8{color:#808080}

/* SUDOKU */
.sudoku-grid{display:grid;grid-template-columns:repeat(9,1fr);border:3px solid var(--text2);border-radius:4px;overflow:hidden;box-shadow:var(--shadow);width:min(430px,calc(100vw - 32px));aspect-ratio:1}
.sdk-cell{background:var(--bg2);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:clamp(13px,3.2vw,21px);font-weight:700;font-family:monospace;border:1px solid var(--border);transition:background .1s;user-select:none}
.sdk-cell.given{color:var(--text);cursor:default}
.sdk-cell.user{color:var(--accent2)}
.sdk-cell.selected{background:rgba(124,92,191,.25)!important}
.sdk-cell.error{color:var(--red)!important}
.numpad{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;max-width:300px}
.numpad-btn{background:var(--bg3);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:17px;font-weight:700;font-family:monospace;padding:9px;cursor:pointer}
.numpad-btn:hover{border-color:var(--accent)}
.numpad-erase{color:var(--red)}

/* BACKGAMMON */
.bg-board{width:min(520px,calc(100vw-40px));height:min(300px,50vw);background:#1a0808;border:2px solid var(--border);border-radius:8px;position:relative;display:flex;overflow:hidden}
.bg-half{flex:1;display:grid;grid-template-columns:repeat(6,1fr);position:relative}
.bg-point{display:flex;flex-direction:column;align-items:center;position:relative;cursor:pointer;transition:background .1s}
.bg-point:hover{background:rgba(255,255,255,.05)}
.bg-point.top{justify-content:flex-start;padding-top:4px}
.bg-point.bottom{justify-content:flex-end;padding-bottom:4px}
.bg-triangle-dark{background:linear-gradient(to bottom,#8b1a1a,transparent);width:100%;height:40%;position:absolute;top:0;clip-path:polygon(10% 0%,90% 0%,50% 100%)}
.bg-triangle-light{background:linear-gradient(to bottom,#d4a84b,transparent);width:100%;height:40%;position:absolute;top:0;clip-path:polygon(10% 0%,90% 0%,50% 100%)}
.bg-triangle-dark-b{background:linear-gradient(to top,#8b1a1a,transparent);width:100%;height:40%;position:absolute;bottom:0;clip-path:polygon(10% 100%,90% 100%,50% 0%)}
.bg-triangle-light-b{background:linear-gradient(to top,#d4a84b,transparent);width:100%;height:40%;position:absolute;bottom:0;clip-path:polygon(10% 100%,90% 100%,50% 0%)}
.bg-checker{width:70%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(255,255,255,.2);box-shadow:0 1px 3px rgba(0,0,0,.5);cursor:pointer;flex-shrink:0}
.bg-checker.white{background:radial-gradient(circle at 35% 35%,#fff,#ccc)}
.bg-checker.black{background:radial-gradient(circle at 35% 35%,#555,#111)}
.bg-checker.selected{box-shadow:0 0 0 2px var(--gold)}
.bg-bar{width:40px;background:#400;display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px;position:relative}
.bg-point.highlight{background:rgba(92,173,92,.2)}

/* MODALS */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;z-index:100;padding:16px;backdrop-filter:blur(4px)}
.modal{background:var(--bg2);border:1px solid var(--border);border-radius:20px;padding:30px 26px;text-align:center;max-width:340px;width:100%;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;gap:12px}
.modal h2{font-size:22px;font-weight:800}
.modal p{color:var(--text2);font-size:13px;line-height:1.5}
.modal-big-icon{font-size:50px;line-height:1}
.waiting-code-box{font-size:32px;font-weight:900;letter-spacing:10px;font-family:monospace;color:var(--gold);background:rgba(240,192,64,.1);border:2px dashed rgba(240,192,64,.4);padding:10px 18px;border-radius:12px}
.waiting-hint{font-size:11px!important;color:var(--text2)}
@media(max-width:1000px){.bs-battle-layout{overflow-x:auto;overflow-y:hidden;justify-content:flex-start}.bs-side{min-width:520px}.bs-grid{width:210px}}
@media(max-width:640px){.history-panel{display:none}.board,.checkers-board,.go-board,.othello-board,.c4-board,.sant-board,.pentago-outer,.quoridor-board,.hex-board{width:min(calc(100vw - 20px),440px)}.global-back-btn{left:10px;top:10px;padding:8px 12px}.bs-page{padding:8px}.bs-side{min-width:500px}.bs-dashboard{width:170px;max-width:170px;padding:8px}.bs-grid{width:190px}}
@media(max-width:400px){.mode-grid{grid-template-columns:1fr}.games-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* Back button (game pages) */
.back-link-btn{background:transparent;border:1px solid var(--border);border-radius:8px;color:var(--text2);font-size:13px;padding:6px 12px;cursor:pointer;font-family:inherit;transition:all .2s}
.back-link-btn:hover{color:var(--text);border-color:var(--accent)}

/* ===== LOBBY BUTTON FIX ===== */
/* Boutons lobby grands et bien cadrés */
.lobby-actions{display:flex;flex-direction:column;gap:12px;width:100%;padding:0 4px}
.lobby-btn{display:flex;align-items:center;justify-content:center;gap:10px;padding:16px 20px;border-radius:var(--radius);font-size:15px;font-weight:700;cursor:pointer;transition:all .2s;text-decoration:none;font-family:inherit;border:none;width:100%;box-sizing:border-box}
.lobby-btn-primary{background:linear-gradient(135deg,var(--accent),#5a3a9f);color:#fff;box-shadow:0 4px 16px rgba(124,92,191,.4)}
.lobby-btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(124,92,191,.6)}
.lobby-btn-secondary{background:var(--bg3);color:var(--text);border:2px solid var(--border)!important}
.lobby-btn-secondary:hover{border-color:var(--accent)!important}
.lobby-btn-ghost{background:transparent;color:var(--text2);font-size:14px;padding:10px 20px}
.lobby-btn-ghost:hover{color:var(--text)}

/* Container max-width et padding safe zone */
.container{padding:24px 20px 48px;max-width:480px;margin:0 auto}

/* Hub grid responsive */
@media(max-width:480px){
  .games-grid{grid-template-columns:1fr 1fr}
  .game-card{padding:14px 10px 10px}
  .game-icon{font-size:30px}
  .game-name{font-size:13px}
}
@media(max-width:340px){
  .games-grid{grid-template-columns:1fr}
}