:root{
    --bg:#0a0e17;
    --panel:#131a2b;
    --panel-2:#1a2338;
    --border:#2a3350;
    --pink:#ff2e63;
    --cyan:#08d9d6;
    --gold:#ffd23f;
    --violet:#b388ff;
    --green:#39ff88;
    --orange:#ff9f1c;
    --blue:#4f8dff;
    --teal:#00e0b8;
    --red:#ff4757;
    --lime:#a6ff00;
    --sky:#38bdf8;
    --magenta:#ff00ff;
    --text:#eaeaea;
    --text-dim:#8a93a8;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  html{ -webkit-text-size-adjust:100%; }
  body{
    background:var(--bg);
    color:var(--text);
    font-family:'Space Mono', monospace;
    min-height:100vh;
    position:relative;
    overflow-x:hidden;
    overscroll-behavior-y:contain; /* zabráni "pull-to-refresh" pri swipe hore na mobile */
    -webkit-tap-highlight-color:transparent; /* zruší sivý flash pri tapnutí na mobile */
  }
  /* ===== MOBILE FOUNDATION (Fáza A) =====
     Predvolené správanie pre canvas/tlačidlá naprieč všetkými hrami.
     Jednotlivé hry to môžu prepísať vlastným pravidlom, ak niečo potrebujú inak. */
  canvas{ max-width:100%; height:auto; touch-action:none; /* swipe/ťah nad canvasom nehýbe stránkou */ }
  button, .ctrl-btn, select{ touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
  @media (max-width:768px){
    .ctrl-btn{ min-height:44px; padding:10px 16px; font-size:13px; }
    .cabinet .play-btn{ min-height:42px; padding:11px 16px; }
    .back-btn{ min-height:40px; padding:10px 16px; }
  }
  body::before{
    content:'';
    position:fixed; inset:0; pointer-events:none;
    background:repeating-linear-gradient(to bottom, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 2px, transparent 3px);
    z-index:999; mix-blend-mode:overlay;
  }
  body::after{
    content:''; position:fixed; inset:0; pointer-events:none;
    background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.55) 100%);
    z-index:998;
  }
  .press{font-family:'Press Start 2P', monospace;}
  a, button{font-family:inherit;}
  button{cursor:pointer;}
  button:focus-visible, .ttt-cell:focus-visible, .chess-sq:focus-visible, .pexeso-card:focus-visible, .checkers-sq:focus-visible{
    outline:3px solid var(--gold); outline-offset:2px;
  }
  .wrap{max-width:1140px; margin:0 auto; padding:32px 20px 80px; position:relative; z-index:1;}
  @media (max-width:600px){ .wrap{padding:20px 10px 60px;} .game-frame{padding:14px; gap:14px;} }

  .lang-switch{position:fixed; top:10px; right:14px; z-index:1500; display:flex; gap:4px; background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:4px;}
  .lang-switch button{background:transparent; border:1px solid transparent; color:var(--text-dim); font-size:11px; font-weight:700; letter-spacing:.5px; padding:5px 9px; border-radius:5px;}
  .lang-switch button:hover{color:var(--text);}
  .lang-switch button.active{background:var(--panel-2); border-color:var(--gold); color:var(--gold);}
  @media (max-width:520px){ .lang-switch{top:6px; right:6px;} .lang-switch button{padding:4px 7px; font-size:10px;} }

  header.hero{text-align:center; padding:36px 10px 44px;}
  .marquee{
    font-size:clamp(22px, 5vw, 42px); letter-spacing:4px; color:var(--gold);
    text-shadow:0 0 6px var(--gold), 0 0 18px rgba(255,210,63,0.6);
    animation:flicker 4.5s infinite;
  }
  @keyframes flicker{0%,19%,21%,23%,80%,100%{opacity:1;} 20%,22%,79%{opacity:0.55;}}
  @media (prefers-reduced-motion: reduce){.marquee{animation:none;}}
  .subtitle{margin-top:14px; color:var(--text-dim); font-size:13px; letter-spacing:1px;}
  .subtitle span{color:var(--cyan);}

  .menu-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:18px; margin-top:10px;}
  .cabinet{
    background:linear-gradient(180deg, var(--panel-2), var(--panel));
    border:1px solid var(--border); border-radius:10px; padding:22px 18px 20px;
    text-align:left; position:relative; transition:transform .15s ease, border-color .15s ease;
  }
  .cabinet:hover{transform:translateY(-4px); border-color:var(--accent, var(--cyan));}
  .cabinet .led{width:10px;height:10px;border-radius:50%; background:var(--accent, var(--cyan)); box-shadow:0 0 8px var(--accent, var(--cyan)); margin-bottom:14px;}
  .cabinet h3{font-family:'Press Start 2P', monospace; font-size:14px; color:var(--accent, var(--cyan)); margin:0 0 10px; line-height:1.5;}
  .cabinet p{color:var(--text-dim); font-size:12.5px; line-height:1.6; margin:0 0 18px;}
  .cabinet .play-btn{
    background:transparent; border:1px solid var(--accent, var(--cyan)); color:var(--accent, var(--cyan));
    padding:9px 16px; font-size:11px; letter-spacing:1px; border-radius:6px;
    font-family:'Press Start 2P', monospace; transition:background .15s ease, color .15s ease;
  }
  .cabinet .play-btn:hover{background:var(--accent, var(--cyan)); color:#0a0e17;}
  #card-tetris{--accent:var(--pink);}
  #card-ttt{--accent:var(--cyan);}
  #card-snake{--accent:var(--gold);}
  #card-chess{--accent:var(--violet);}
  #card-2048{--accent:var(--orange);}
  #card-pexeso{--accent:var(--green);}
  #card-solitaire{--accent:var(--blue);}
  #card-battleship{--accent:var(--teal);}
  #card-pong{--accent:var(--red);}
  #card-racer{--accent:var(--lime);}
  #card-checkers{--accent:var(--pink);}
  #card-pacman{--accent:var(--gold);}
  #card-escape{--accent:var(--blue);}
  #card-mines{--accent:var(--red);}
  #card-connect4{--accent:var(--violet);}
  #card-breakout{--accent:var(--orange);}
  #card-sudoku{--accent:var(--teal);}
  #card-city{--accent:var(--sky);}
  #card-city2{--accent:#ffb347;}
  #card-spaceship{--accent:var(--magenta);}

  .game-panel{display:none; margin-top:10px;}
  .game-panel.active{display:block;}
  .game-head{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:18px;}
  .game-title{font-family:'Press Start 2P', monospace; font-size:16px; color:var(--accent2, var(--cyan));}
  .back-btn{background:transparent; border:1px solid var(--border); color:var(--text-dim); padding:8px 14px; border-radius:6px; font-size:12px; letter-spacing:.5px;}
  .back-btn:hover{border-color:var(--text-dim); color:var(--text);}
  .game-frame{
    background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:22px;
    display:flex; flex-wrap:wrap; gap:24px; align-items:flex-start; justify-content:center;
  }
  .status-line{font-size:13px; color:var(--text-dim); letter-spacing:.5px; min-height:20px;}
  .status-line b{color:var(--gold); font-weight:700;}
  .ctrl-btn{background:var(--panel-2); border:1px solid var(--border); color:var(--text); padding:8px 14px; border-radius:6px; font-size:12px; margin-top:10px;}
  .ctrl-btn:hover{border-color:var(--cyan); color:var(--cyan);}
  #ludo-board svg, #mono-board svg{ max-width:100%; height:auto; display:block; }
  .ludo-count-btn.active{border-color:var(--gold); color:var(--gold); box-shadow:inset 0 0 0 1px var(--gold);}

  /* ONLINE MULTIPLAYER */
  .online-modal-overlay{position:fixed; inset:0; background:rgba(5,7,12,0.75); z-index:2000; display:flex; align-items:center; justify-content:center; padding:16px;}
  .online-modal-box{background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:22px; width:100%; max-width:340px;}
  .online-modal-title{font-size:13px; color:var(--sky); margin-bottom:16px; text-align:center;}
  .online-tab-row{display:flex; gap:8px; margin-bottom:14px;}
  .online-tab{flex:1; font-size:11px; padding:8px 6px;}
  .online-tab.active{border-color:var(--sky); color:var(--sky);}
  .online-input{width:100%; box-sizing:border-box; background:var(--panel-2); border:1px solid var(--border); color:var(--text); padding:9px 10px; border-radius:6px; font-family:'Space Mono', monospace; font-size:13px; margin-bottom:10px;}
  .online-input:focus{outline:none; border-color:var(--sky);}
  .online-error{color:var(--red); font-size:11.5px; min-height:16px;}
  .online-note{color:var(--text-dim); font-size:10.5px; margin-top:10px; line-height:1.5;}
  .online-room-box{background:var(--panel-2); border:1px solid var(--border); border-radius:8px; padding:12px 14px; font-size:12px;}
  .online-row{display:none;}
  .online-row.show{display:block;}

  /* mode/difficulty picker (shared) */
  .mode-box{background:var(--panel-2); border:1px solid var(--border); border-radius:8px; padding:12px 14px; font-size:12px; margin-bottom:12px;}
  .mode-box .row-title{color:var(--text-dim); margin-bottom:8px; letter-spacing:.5px;}
  .mode-box label{display:inline-flex; align-items:center; gap:5px; margin-right:14px; margin-bottom:6px; cursor:pointer;}
  .mode-box input[type="radio"]{accent-color:var(--gold); cursor:pointer;}
  .diff-row{display:none;}
  .diff-row.show{display:block;}

  /* TIC TAC TOE */
  #panel-ttt .game-title{--accent2:var(--cyan);}
  .ttt-grid{display:grid; grid-template-columns:repeat(3, 74px); grid-template-rows:repeat(3, 74px); gap:6px;}
  .ttt-cell{background:var(--panel-2); border:1px solid var(--border); border-radius:8px; font-family:'Press Start 2P', monospace; font-size:26px; color:var(--cyan); display:flex;align-items:center;justify-content:center;}
  .ttt-cell:hover:not(.filled){border-color:var(--cyan);}
  .ttt-cell.filled.O{color:var(--pink);}
  .ttt-cell.win{background:rgba(8,217,214,0.15); border-color:var(--cyan);}
  .ttt-side{min-width:200px;}

  /* SNAKE */
  #panel-snake .game-title{--accent2:var(--gold);}
  #snakeCanvas{background:#060a11; border:1px solid var(--border); border-radius:8px; image-rendering:pixelated;}
  .pad{display:grid; grid-template-columns:repeat(3, 46px); grid-template-rows:repeat(3, 46px); gap:5px; margin-top:14px;}
  .pad button{background:var(--panel-2); border:1px solid var(--border); border-radius:6px; color:var(--text-dim); font-size:16px;}
  .pad button:hover{color:var(--gold); border-color:var(--gold);}
  .pad .up{grid-column:2; grid-row:1;} .pad .left{grid-column:1; grid-row:2;} .pad .right{grid-column:3; grid-row:2;} .pad .down{grid-column:2; grid-row:3;}

  /* TETRIS */
  #panel-tetris .game-title{--accent2:var(--pink);}
  #tetrisCanvas{background:#060a11; border:1px solid var(--border); border-radius:8px; image-rendering:pixelated;}
  #nextCanvas{background:#060a11; border:1px solid var(--border); border-radius:8px;}
  .tetris-side{min-width:150px; display:flex; flex-direction:column; gap:14px;}
  .stat-box{background:var(--panel-2); border:1px solid var(--border); border-radius:8px; padding:10px 12px; font-size:12px;}
  .stat-box .val{font-family:'Press Start 2P', monospace; font-size:16px; color:var(--pink); margin-top:6px;}
  .tetris-pad{display:grid; grid-template-columns:repeat(4, 42px); gap:5px;}
  .tetris-pad button{background:var(--panel-2); border:1px solid var(--border); border-radius:6px; color:var(--text-dim); font-size:14px; padding:10px 0;}
  .tetris-pad button:hover{color:var(--pink); border-color:var(--pink);}

  /* CHESS */
  #panel-chess .game-title{--accent2:var(--violet);}
  .chess-board-wrap{--sq:46px; display:inline-grid; grid-template-columns:16px auto; grid-template-rows:auto 16px; gap:3px; align-items:center; justify-items:center;}
  .chess-rank-labels{grid-column:1; grid-row:1; display:grid; grid-template-rows:repeat(8, var(--sq));}
  .chess-file-labels{grid-column:2; grid-row:2; display:grid; grid-template-columns:repeat(8, var(--sq));}
  .chess-rank-labels div, .chess-file-labels div{display:flex; align-items:center; justify-content:center; font-size:10.5px; color:var(--text-dim);}
  #chess-board{grid-column:2; grid-row:1;}
  .chess-board{display:grid; grid-template-columns:repeat(8, var(--sq)); grid-template-rows:repeat(8, var(--sq)); border:2px solid var(--border); border-radius:6px; overflow:hidden;}
  .chess-sq{display:flex;align-items:center;justify-content:center; font-size:30px; position:relative; border:none;}
  .chess-sq.light{background:#232b45;} .chess-sq.dark{background:#151b2e;}
  .chess-sq.selected{box-shadow:inset 0 0 0 3px var(--gold);}
  .chess-sq.move-dot::after{content:''; position:absolute; width:14px;height:14px; border-radius:50%; background:rgba(179,136,255,0.55);}
  .chess-sq.capture-dot{box-shadow:inset 0 0 0 3px rgba(255,46,99,0.75);}
  .chess-sq.check{background:rgba(255,46,99,0.35) !important;}
  .chess-sq.last-move::before{content:''; position:absolute; inset:0; background:rgba(255,210,63,0.22); pointer-events:none;}
  .chess-sq._hf, .chess-sq._ht{box-shadow:inset 0 0 0 3px rgba(57,255,136,0.65);}
  .piece-w{color:#f4f4f4; text-shadow:0 0 4px rgba(0,0,0,0.8);}
  .piece-b{color:#0d0d0d; text-shadow:0 0 3px rgba(255,255,255,0.35);}
  .chess-side{min-width:200px;}
  .chess-history{max-height:190px; overflow-y:auto; font-size:12px; color:var(--text-dim); line-height:1.8; padding-right:4px;}
  .chess-hist-row{display:flex; gap:8px;}
  .chess-hist-n{color:var(--text-dim); min-width:20px;}
  .chess-hist-w{color:var(--text); min-width:52px;}
  .chess-hist-b{color:var(--violet);}

  /* CHECKERS (DÁMA) */
  #panel-checkers .game-title{--accent2:var(--pink);}
  .checkers-board{display:grid; grid-template-columns:repeat(8, 46px); grid-template-rows:repeat(8, 46px); border:2px solid var(--border); border-radius:6px; overflow:hidden;}
  .checkers-sq{display:flex;align-items:center;justify-content:center; font-size:30px; position:relative; border:none;}
  .checkers-sq.light{background:#232b45;} .checkers-sq.dark{background:#151b2e;}
  .checkers-sq.selected{box-shadow:inset 0 0 0 3px var(--gold);}
  .checkers-sq.move-dot::after{content:''; position:absolute; width:14px;height:14px; border-radius:50%; background:rgba(255,46,99,0.55);}
  .checkers-sq.capture-dot{box-shadow:inset 0 0 0 3px rgba(255,46,99,0.75);}
  .checker-w{width: 32px; height: 32px; border-radius: 50%; background: #eaeaea; border: 3px double #999; box-shadow: 0 2px 4px rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; font-size: 16px; color: #555;}
  .checker-b{width: 32px; height: 32px; border-radius: 50%; background: #ff2e63; border: 3px double #900; box-shadow: 0 2px 4px rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; font-size: 16px; color: #fff;}
  .checker-w.king::after{content: '★';}
  .checker-b.king::after{content: '★';}

  /* 2048 */
  #panel-g2048 .game-title{--accent2:var(--orange);}
  .g2048-board{
    display:grid; grid-template-columns:repeat(4, 78px); grid-template-rows:repeat(4, 78px); gap:8px;
    background:#0d1220; border:1px solid var(--border); border-radius:10px; padding:8px;
  }
  .g2048-tile{
    border-radius:6px; display:flex; align-items:center; justify-content:center;
    font-family:'Press Start 2P', monospace; font-size:18px; color:#1a1a1a;
    background:#1a2338; color:var(--text-dim); transition:background .1s ease;
  }
  .g2048-tile[data-v="2"]{background:#3a4568; color:var(--text);}
  .g2048-tile[data-v="4"]{background:#465282; color:var(--text);}
  .g2048-tile[data-v="8"]{background:var(--orange); color:#1a1a1a;}
  .g2048-tile[data-v="16"]{background:#ff7f1c; color:#1a1a1a;}
  .g2048-tile[data-v="32"]{background:var(--pink); color:#fff;}
  .g2048-tile[data-v="64"]{background:#ff0844; color:#fff;}
  .g2048-tile[data-v="128"]{background:var(--gold); color:#1a1a1a; font-size:16px;}
  .g2048-tile[data-v="256"]{background:#ffe066; color:#1a1a1a; font-size:16px;}
  .g2048-tile[data-v="512"]{background:var(--cyan); color:#1a1a1a; font-size:15px;}
  .g2048-tile[data-v="1024"]{background:var(--violet); color:#1a1a1a; font-size:13px;}
  .g2048-tile[data-v="2048"]{background:var(--green); color:#1a1a1a; font-size:13px; box-shadow:0 0 14px var(--green);}

  /* PEXESO */
  #panel-pexeso .game-title{--accent2:var(--green);}
  .pexeso-grid{display:grid; grid-template-columns:repeat(4, 70px); grid-template-rows:repeat(4, 70px); gap:8px;}
  .pexeso-card{
    background:linear-gradient(145deg, var(--panel-2), var(--panel)); border:1px solid var(--border); border-radius:8px;
    font-size:28px; display:flex;align-items:center;justify-content:center; color:var(--text-dim);
  }
  .pexeso-card.flipped, .pexeso-card.matched{color:var(--text); border-color:var(--green);}
  .pexeso-card.matched{opacity:.5;}
  .pexeso-score{display:flex; gap:16px; margin-bottom:8px;}
  .pexeso-score .p{background:var(--panel-2); border:1px solid var(--border); border-radius:8px; padding:8px 12px; font-size:12px;}
  .pexeso-score .p.active{border-color:var(--green); color:var(--green);}

  /* SOLITAIRE */
  #panel-solitaire .game-title{--accent2:var(--blue);}

  /* BATTLESHIPS */
  #panel-battleship .game-title{--accent2:var(--teal);}

  /* PONG */
  #panel-pong .game-title{--accent2:var(--red);}

  /* RACER (AUTIČKO) */
  #panel-racer .game-title{--accent2:var(--lime);}
  #racerCanvas{background:#0d3d1a; border:1px solid var(--border); border-radius:8px; max-width:100%;}
  .hpad{display:flex; gap:14px; justify-content:center;}
  .hpad button{background:var(--panel-2); border:1px solid var(--border); border-radius:8px; color:var(--text-dim); font-size:20px; width:64px; height:56px; user-select:none; touch-action:manipulation;}
  .hpad button:hover, .hpad button:active{color:var(--lime); border-color:var(--lime);}

  /* DPAD: znovupoužiteľný krížový ovládač (hore/dole/vľavo/vpravo) pre hry ako
     Snake, Pacman a pod. — pridá sa do stránky vždy vedľa canvasu tej hry. */
  .dpad{display:grid; grid-template-columns:52px 52px 52px; grid-template-rows:52px 52px 52px; gap:5px; justify-content:center;}
  .dpad button{background:var(--panel-2); border:1px solid var(--border); border-radius:8px; color:var(--text-dim); font-size:20px; width:52px; height:52px; user-select:none; touch-action:manipulation; -webkit-tap-highlight-color:transparent;}
  .dpad button:hover, .dpad button:active{color:var(--lime); border-color:var(--lime);}
  .dpad-up{grid-column:2; grid-row:1;}
  .dpad-left{grid-column:1; grid-row:2;}
  .dpad-right{grid-column:3; grid-row:2;}
  .dpad-down{grid-column:2; grid-row:3;}
  #pongCanvas{background:#060a11; border:1px solid var(--border); border-radius:8px;}
  .pong-select{background:var(--panel-2); color:var(--text); border:1px solid var(--border); border-radius:6px; padding:4px 8px; font-family:inherit; font-size:12px;}
  .vpad{display:flex; flex-direction:column; gap:6px;}
  .vpad button{background:var(--panel-2); border:1px solid var(--border); border-radius:6px; color:var(--text-dim); font-size:16px; width:46px; height:46px; user-select:none; touch-action:manipulation;}
  .vpad button:hover, .vpad button:active{color:var(--red); border-color:var(--red);}
  .bs-board{display:grid; grid-template-columns:repeat(10, 30px); grid-template-rows:repeat(10, 30px); gap:2px; background:#0d1220; padding:6px; border:1px solid var(--border); border-radius:8px; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;}
  .bs-cell{background:#1a2338; border:1px solid var(--border); border-radius:3px; padding:0; position:relative;}
  .bs-cell.fog{cursor:pointer;}
  .bs-cell.fog:hover{border-color:var(--teal);}
  .bs-cell.ship{background:var(--blue);}
  .bs-cell.hit{background:var(--pink);}
  .bs-cell.hit::after{content:'✕'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:14px;}
  .bs-cell.sunk{background:#5c0a1e;}
  .bs-cell.sunk::after{content:'☠'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px;}
  .bs-cell.miss{background:#232b45;}
  .bs-cell.miss::after{content:'•'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--text-dim); font-size:16px;}
  .bs-label{color:var(--text-dim); font-size:11.5px; margin-bottom:6px; letter-spacing:.5px;}
  .sol-top{display:flex; gap:14px; margin-bottom:16px; flex-wrap:wrap;}
  .sol-card{
    width:52px; height:74px; border-radius:6px; display:flex; align-items:center; justify-content:center;
    font-size:16px; font-weight:700; background:#fff; color:#111; border:1px solid #999; user-select:none;
  }
  .sol-card.red{color:#d1263e;}
  .sol-card.back{background:repeating-linear-gradient(45deg, var(--blue), var(--blue) 4px, #1a2338 4px, #1a2338 8px); border-color:var(--border);}
  .sol-card.placeholder{background:transparent; border:1.5px dashed var(--border); color:var(--text-dim); font-size:20px;}
  .sol-card.selected{outline:3px solid var(--gold); outline-offset:1px;}
  .sol-slot{position:relative; cursor:pointer;}
  .sol-tableau{display:flex; gap:14px;}
  .sol-pile{position:relative; width:52px; min-height:74px;}
  .sol-pile .sol-card{position:absolute; top:0; left:0;}
  .sol-foundations{display:flex; gap:8px;}

  /* PACMAN */
  #panel-pacman .game-title{--accent2:var(--gold);}
  #pacmanCanvas{background:#060a11; border:1px solid var(--border); border-radius:8px; image-rendering:pixelated;}
  .pacman-lives{color:var(--gold); letter-spacing:2px;}

  /* ESCAPE (PARKOVACIE PUZZLE) */
  #panel-escape .game-title{--accent2:var(--blue);}
  .park-board{
    position:relative; display:grid; grid-template-columns:repeat(7, 50px); grid-template-rows:repeat(7, 50px); gap:4px;
    background:#060a11; border:1px solid var(--border); border-radius:10px; padding:0; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
  }
  .park-cell{background:var(--panel-2); border-radius:4px;}
  .park-car{
    position:absolute; border-radius:8px; display:flex; align-items:center; justify-content:center;
    color:rgba(0,0,0,0.55); font-size:16px; font-weight:700; cursor:grab; touch-action:none;
    box-shadow:inset 0 -3px 0 rgba(0,0,0,0.25), inset 0 2px 0 rgba(255,255,255,0.25), 0 3px 8px rgba(0,0,0,0.4);
    user-select:none; z-index:1;
  }
  .park-car.target{ color:#fff; font-size:18px; z-index:2; }
  .park-car.dragging{ cursor:grabbing; box-shadow:0 0 0 3px var(--gold), 0 6px 16px rgba(0,0,0,0.55); z-index:5; }
  .park-exit{
    position:absolute; width:22px; display:flex; align-items:center; justify-content:center;
    color:var(--gold); font-size:20px; text-shadow:0 0 8px rgba(255,210,63,0.8); pointer-events:none;
  }
  .park-wrap{ position:relative; padding-right:24px; }

  /* MÍNOVÉ POLE (MINESWEEPER) */
  #panel-mines .game-title{--accent2:var(--red);}
  .mines-board{
    display:grid; gap:2px; background:#0d1220; padding:6px; border:1px solid var(--border);
    border-radius:8px; width:max-content; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
  }
  .mines-cell{
    background:#2a3350; border-radius:3px; display:flex; align-items:center; justify-content:center;
    font-family:'Press Start 2P', monospace; cursor:pointer; user-select:none;
    -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  }
  .mines-cell:hover:not(.revealed){background:#354067;}
  .mines-cell.revealed{background:#151b2e; cursor:default;}
  .mines-cell.mine{background:var(--red);}
  .mines-cell.mine.exploded{background:#ff0844;}
  .mines-cell[data-n="1"]{color:#4f8dff;}
  .mines-cell[data-n="2"]{color:var(--green);}
  .mines-cell[data-n="3"]{color:var(--pink);}
  .mines-cell[data-n="4"]{color:var(--violet);}
  .mines-cell[data-n="5"]{color:#c0392b;}
  .mines-cell[data-n="6"]{color:var(--teal);}
  .mines-cell[data-n="7"]{color:#eaeaea;}
  .mines-cell[data-n="8"]{color:var(--text-dim);}

  /* CONNECT FOUR */
  #panel-connect4 .game-title{--accent2:var(--violet);}
  .c4-board{
    display:flex; gap:6px; background:#12306e; border:1px solid var(--border);
    border-radius:10px; padding:8px; width:max-content;
  }
  .c4-col{display:flex; flex-direction:column; gap:6px; cursor:pointer; border-radius:6px;}
  .c4-col:hover{background:rgba(255,255,255,0.04);}
  .c4-cell{
    width:52px; height:52px; border-radius:50%; background:#0a0e17;
    box-shadow:inset 0 3px 4px rgba(0,0,0,0.5);
  }
  .c4-cell.p1{background:var(--pink); box-shadow:inset 0 -4px 0 rgba(0,0,0,0.25), inset 0 3px 0 rgba(255,255,255,0.3);}
  .c4-cell.p2{background:var(--gold); box-shadow:inset 0 -4px 0 rgba(0,0,0,0.25), inset 0 3px 0 rgba(255,255,255,0.3);}
  .c4-cell.win{box-shadow:0 0 0 3px var(--cyan), 0 0 14px var(--cyan);}

  /* BREAKOUT */
  #panel-breakout .game-title{--accent2:var(--orange);}
  #breakoutCanvas{background:#060a11; border:1px solid var(--border); border-radius:8px; touch-action:none;}

  /* SUDOKU */
  #panel-sudoku .game-title{--accent2:var(--teal);}
  .sudoku-board{
    display:grid; grid-template-columns:repeat(9, 38px); grid-template-rows:repeat(9, 38px);
    background:var(--border); gap:1px; border:2px solid var(--border); border-radius:8px; overflow:hidden;
    width:max-content;
  }
  .sudoku-cell{
    background:var(--panel-2); display:flex; align-items:center; justify-content:center;
    font-family:'Space Mono', monospace; font-size:17px; font-weight:700; color:var(--text);
    cursor:pointer; user-select:none; position:relative;
  }
  .sudoku-cell.given{color:var(--text-dim); cursor:default; background:#161e33;}
  .sudoku-cell.selected{background:rgba(0,224,184,0.25);}
  .sudoku-cell.peer{background:rgba(0,224,184,0.08);}
  .sudoku-cell.same-num{color:var(--teal);}
  .sudoku-cell.error{color:var(--pink);}
  .sudoku-cell.border-r{border-right:2px solid var(--border);}
  .sudoku-cell.border-b{border-bottom:2px solid var(--border);}
  .sudoku-numpad{display:grid; grid-template-columns:repeat(5, 40px); gap:6px; margin-top:12px;}
  .sudoku-numpad button{
    background:var(--panel-2); border:1px solid var(--border); border-radius:6px; color:var(--text);
    font-size:15px; padding:8px 0; font-family:'Space Mono', monospace;
  }
  .sudoku-numpad button:hover{border-color:var(--teal); color:var(--teal);}
  .sudoku-numpad button.erase{color:var(--text-dim); font-size:12px;}
  .sudoku-picker{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px;}
  .sudoku-picker button{
    background:var(--panel-2); border:1px solid var(--border); border-radius:6px; color:var(--text-dim);
    font-size:11px; padding:5px 9px;
  }
  .sudoku-picker button.active{border-color:var(--teal); color:var(--teal);}

  /* CITY BUILDER */
  #panel-city .game-title{--accent2:var(--sky);}
  #cityCanvas{background:#060a11; border:1px solid var(--border); border-radius:8px; cursor:pointer;}
  .city-side{min-width:230px; display:flex; flex-direction:column; gap:12px;}
  .city-tools{display:flex; flex-direction:column; gap:6px;}
  .city-tool-btn{
    display:flex; align-items:center; gap:8px; text-align:left;
    background:var(--panel-2); border:1px solid var(--border); border-radius:6px; color:var(--text);
    font-size:11.5px; padding:8px 10px; font-family:'Space Mono', monospace;
  }
  .city-tool-btn:hover{border-color:var(--sky); color:var(--sky);}
  .city-tool-btn.active{border-color:var(--sky); color:var(--sky); background:rgba(56,189,248,0.12);}
  .city-tool-btn .swatch{width:11px; height:11px; border-radius:3px; flex:none; display:inline-block;}
  .city-stats{display:flex; gap:8px; flex-wrap:wrap;}
  .city-stats .stat-box{flex:1; min-width:90px;}

  /* CITY BUILDER 2 (255x255 mapa) */
  #panel-city2 .game-title{--accent2:#ffb347;}
  #panel-spaceship .game-title{--accent2:var(--magenta);}
  #city2Canvas{background:#060a11; border:1px solid var(--border); border-radius:8px; cursor:pointer;}
  .city2-side{min-width:230px; display:flex; flex-direction:column; gap:12px;}
  .city2-tools{display:flex; flex-direction:column; gap:6px; max-height:260px; overflow-y:auto; padding-right:4px;}
  .city2-tools::-webkit-scrollbar{width:6px;}
  .city2-tools::-webkit-scrollbar-thumb{background:var(--border); border-radius:3px;}
  .city2-tool-btn{
    display:flex; align-items:center; gap:8px; text-align:left;
    background:var(--panel-2); border:1px solid var(--border); border-radius:6px; color:var(--text);
    font-size:11.5px; padding:8px 10px; font-family:'Space Mono', monospace;
  }
  .city2-tool-btn:hover{border-color:#ffb347; color:#ffb347;}
  .city2-tool-btn.active{border-color:#ffb347; color:#ffb347; background:rgba(255,179,71,0.12);}
  .city2-tool-btn .swatch{width:11px; height:11px; border-radius:3px; flex:none; display:inline-block;}
  .city2-stats{display:flex; gap:8px; flex-wrap:wrap;}
  .city2-stats .stat-box{flex:1; min-width:90px;}
  .city2-map-wrap{display:flex; flex-direction:column; gap:8px;}
  .city2-pan{display:grid; grid-template-columns:repeat(3, 36px); grid-template-rows:repeat(3, 36px); gap:4px;}
  .city2-pan button{background:var(--panel-2); border:1px solid var(--border); border-radius:6px; color:var(--text-dim); font-size:14px;}
  .city2-pan button:hover{color:#ffb347; border-color:#ffb347;}
  .city2-pan .up{grid-column:2; grid-row:1;} .city2-pan .left{grid-column:1; grid-row:2;}
  .city2-pan .center{grid-column:2; grid-row:2; font-size:10px;} .city2-pan .right{grid-column:3; grid-row:2;}
  .city2-pan .down{grid-column:2; grid-row:3;}
  #city2Minimap{background:#060a11; border:1px solid var(--border); border-radius:6px; cursor:crosshair; image-rendering:pixelated;}
  .city2-coords{font-size:11px; color:var(--text-dim); letter-spacing:.5px;}

  .demand-row{display:flex; align-items:center; gap:8px; font-size:11px; margin-bottom:7px;}
  .demand-label{width:112px; color:var(--text-dim); flex:none; font-size:10.5px;}
  .demand-bar-bg{flex:1; height:10px; background:var(--panel-2); border:1px solid var(--border); border-radius:4px; position:relative; overflow:hidden;}
  .demand-bar-fill{height:100%; border-radius:3px; transition:width .4s ease;}
  .demand-bar-mid{position:absolute; left:50%; top:0; bottom:0; width:1px; background:rgba(255,255,255,0.25);}
  .demand-pct{width:32px; text-align:right; color:var(--text-dim); font-size:10.5px; flex:none;}

  .demo-bar{display:flex; height:16px; border-radius:6px; overflow:hidden; border:1px solid var(--border); margin-bottom:8px;}
  .demo-seg{height:100%; transition:width .4s ease;}
  .demo-legend{display:flex; flex-wrap:wrap; gap:10px; font-size:10.5px; color:var(--text-dim); margin-bottom:10px;}
  .demo-legend span.sw{width:9px; height:9px; border-radius:2px; display:inline-block; margin-right:4px; vertical-align:-1px;}
  .school-stat{font-size:11.5px; color:var(--text-dim); line-height:1.9;}
  .school-stat b{color:var(--text);}

  footer{text-align:center; color:var(--text-dim); font-size:11px; padding:30px 10px 10px; letter-spacing:.5px;}
  footer span{color:var(--gold);}

  @media (max-width:520px){
    .ttt-grid{grid-template-columns:repeat(3, 66px); grid-template-rows:repeat(3, 66px);}
    .chess-board-wrap{--sq:38px;}
    .chess-sq{font-size:24px;}
    .checkers-board{grid-template-columns:repeat(8, 38px); grid-template-rows:repeat(8, 38px);}
    .checkers-sq{font-size:24px;}
    .g2048-board{grid-template-columns:repeat(4, 64px); grid-template-rows:repeat(4, 64px);}
    .pexeso-grid{grid-template-columns:repeat(4, 58px); grid-template-rows:repeat(4, 58px);}
    .c4-cell{width:38px; height:38px;}
    .sudoku-board{grid-template-columns:repeat(9, 32px); grid-template-rows:repeat(9, 32px);}
    .sudoku-cell{font-size:14px;}
  }

  /* ===== POPUP: výhra / prehra / remíza (modal) + strata života (toast) ===== */
  #global-popup-root{position:relative; z-index:3000;}
  .popup-overlay{position:fixed; inset:0; background:rgba(5,7,12,0); z-index:3000; display:flex; align-items:center; justify-content:center; padding:16px; transition:background .2s ease; pointer-events:none;}
  .popup-overlay.visible{background:rgba(5,7,12,0.78); pointer-events:auto;}
  .popup-box{background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:30px 24px 24px; width:100%; max-width:320px; text-align:center; transform:scale(.85); opacity:0; transition:transform .22s ease, opacity .22s ease; box-shadow:0 20px 60px rgba(0,0,0,0.5);}
  .popup-overlay.visible .popup-box{transform:scale(1); opacity:1;}
  .popup-overlay[data-type="win"] .popup-box{border-color:var(--teal); box-shadow:0 0 40px rgba(0,224,184,0.15), 0 20px 60px rgba(0,0,0,0.5);}
  .popup-overlay[data-type="lose"] .popup-box{border-color:var(--red); box-shadow:0 0 40px rgba(255,71,87,0.15), 0 20px 60px rgba(0,0,0,0.5);}
  .popup-overlay[data-type="draw"] .popup-box{border-color:var(--sky); box-shadow:0 0 40px rgba(56,189,248,0.15), 0 20px 60px rgba(0,0,0,0.5);}
  .popup-icon{font-size:42px; line-height:1; margin-bottom:10px;}
  .popup-title{font-size:15px; color:var(--text); font-weight:bold; margin-bottom:8px; letter-spacing:.3px;}
  .popup-message{font-size:11.5px; color:var(--text-dim); margin-bottom:20px; line-height:1.6;}
  .popup-actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap;}
  .popup-actions .ctrl-btn{margin:0;}

  .popup-toast{position:fixed; top:16px; left:50%; transform:translate(-50%,-16px); background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:9px 16px; display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--text); z-index:3100; opacity:0; transition:opacity .25s ease, transform .25s ease; box-shadow:0 10px 30px rgba(0,0,0,0.4); pointer-events:none;}
  .popup-toast.visible{opacity:1; transform:translate(-50%,0);}
  .popup-toast[data-type="life"]{border-color:var(--red);}
  .popup-toast-icon{font-size:14px;}

  /* ===== TUTORIAL: krokovaný vizuálny návod so "spotlight" zvýraznením ===== */
  #global-tutorial-root{position:relative; z-index:3200;}
  .tutorial-dim-full{position:fixed; inset:0; background:rgba(5,7,12,0.72); z-index:3200;}
  .tutorial-spotlight{
    position:fixed; z-index:3200; border-radius:10px; border:2px solid var(--sky);
    box-shadow:0 0 0 9999px rgba(5,7,12,0.72), 0 0 24px rgba(56,189,248,0.35);
    transition:left .25s ease, top .25s ease, width .25s ease, height .25s ease;
    pointer-events:none;
  }
  .tutorial-card{
    position:fixed; left:50%; bottom:20px; transform:translateX(-50%);
    background:var(--panel); border:1px solid var(--sky); border-radius:14px;
    padding:18px 20px; width:calc(100% - 32px); max-width:380px; z-index:3210;
    box-shadow:0 20px 60px rgba(0,0,0,0.5);
  }
  .tutorial-step-count{font-size:10.5px; color:var(--text-dim); letter-spacing:.5px; margin-bottom:6px;}
  .tutorial-title{font-size:14px; color:var(--sky); font-weight:bold; margin-bottom:8px;}
  .tutorial-text{font-size:12.5px; color:var(--text); line-height:1.6; margin-bottom:14px;}
  .tutorial-dots{display:flex; gap:5px; justify-content:center; margin-bottom:14px;}
  .tutorial-dot{width:6px; height:6px; border-radius:50%; background:var(--border);}
  .tutorial-dot.active{background:var(--sky);}
  .tutorial-actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
  .tutorial-actions .ctrl-btn, .tutorial-actions .back-btn{margin:0; padding:9px 14px; font-size:12px;}
  @media (max-width:520px){
    .tutorial-card{ bottom:10px; padding:14px 16px; }
  }

  /* ===== LEADERBOARD: banner ponúkajúci prihlásenie po skončení hry ===== */
  .lb-login-toast{
    position:fixed; left:50%; bottom:20px; transform:translate(-50%,20px);
    background:var(--panel); border:1px solid var(--sky); border-radius:12px;
    padding:12px 40px 12px 16px; max-width:calc(100% - 32px); width:420px;
    display:flex; align-items:center; gap:12px; flex-wrap:wrap;
    font-size:12px; color:var(--text); z-index:3150;
    box-shadow:0 20px 50px rgba(0,0,0,0.5);
    opacity:0; transition:opacity .25s ease, transform .25s ease;
  }
  .lb-login-toast.visible{opacity:1; transform:translate(-50%,0);}
  .lb-login-toast .ctrl-btn{margin:0; padding:7px 14px; font-size:11.5px; white-space:nowrap;}
  .lb-login-toast-close{
    position:absolute; top:8px; right:10px; background:none; border:none;
    color:var(--text-dim); font-size:14px; cursor:pointer; padding:2px 4px;
  }
  .lb-login-toast-close:hover{color:var(--text);}
  @media (max-width:520px){
    .lb-login-toast{ width:calc(100% - 32px); bottom:10px; }
  }

  /* CITY BUILDER 3 — on-screen HUD (namiesto dlhého scrollovateľného sidebaru) */
  .cb3-hud{position:absolute; z-index:5; display:flex; gap:6px; align-items:center; flex-wrap:wrap;}
  .cb3-hud-top{top:10px; left:10px; right:10px;}
  .cb3-stat-pill{background:rgba(10,14,20,0.75); border:1px solid var(--border); border-radius:20px; padding:4px 11px; font-size:12px; color:var(--text); white-space:nowrap;}
  .cb3-icon-btn{background:rgba(10,14,20,0.75); border:1px solid var(--border); color:var(--text); border-radius:8px; padding:6px 10px; font-size:13px; cursor:pointer; white-space:nowrap;}
  .cb3-icon-btn:hover{border-color:var(--cyan); color:var(--cyan);}
  .cb3-icon-btn.active{border-color:var(--gold); color:var(--gold); box-shadow:inset 0 0 0 1px var(--gold);}
  .cb3-speed-group{display:flex; gap:3px; background:rgba(10,14,20,0.5); padding:3px; border-radius:10px;}
  .cb3-speed-group .cb3-icon-btn{padding:5px 8px;}
  .cb3-hud-status{top:48px; left:10px; right:10px; font-size:11.5px; color:var(--gold); min-height:0; text-shadow:0 1px 3px rgba(0,0,0,0.8);}
  .cb3-hud-suboptions{bottom:56px; left:10px; right:10px; background:rgba(10,14,20,0.85); border:1px solid var(--border); border-radius:10px; padding:9px 11px;}
  .cb3-hud-toolbar{bottom:10px; left:10px; right:10px; justify-content:center;}
  .cb3-drawer{
    position:absolute; top:0; right:0; bottom:0; width:290px; max-width:85%;
    background:rgba(9,13,19,0.97); border-left:1px solid var(--border);
    transform:translateX(100%); transition:transform .22s ease; z-index:7;
    overflow-y:auto; padding:44px 14px 14px;
  }
  .cb3-drawer.open{transform:translateX(0);}
  .cb3-drawer-close{position:absolute; top:8px; right:8px;}
  @media (max-width:640px){
    .cb3-stat-pill{font-size:10.5px; padding:3px 8px;}
    .cb3-icon-btn{padding:5px 7px; font-size:11.5px;}
    .cb3-hud-status{top:44px;}
    .cb3-hud-suboptions{bottom:52px;}
  }