/* minimal, clean UI */
:root { --bg:#0e0f12; --panel:#151922; --muted:#8b95a7; --text:#e7ecf3; --brand:#4cc9f0; --accent:#a0e7e5; }
*{box-sizing:border-box} html,body{margin:0;height:100%}
body{font-family:Inter,system-ui,Segoe UI,Arial;background:var(--bg);color:var(--text)}
.topbar{position:sticky;top:0;display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid #202435;background:linear-gradient(180deg,#12151c,#0f1219)}
.brand{margin:0;font-size:18px;font-weight:800;color:var(--brand)}
.container{max-width:920px;margin:40px auto;padding:0 16px}
.games{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.card{display:block;padding:16px 14px;border:1px solid #22283a;border-radius:12px;background:var(--panel);text-decoration:none;color:var(--text);transition:.2s}
.card:hover{transform:translateY(-2px);border-color:#2b3247;box-shadow:0 8px 32px rgba(0,0,0,.35)}
.card h3{margin:0 0 6px 0;font-size:16px}
.card p{margin:0;color:var(--muted);font-size:13px}
.foot{max-width:920px;margin:60px auto 30px;padding:0 16px;color:var(--muted);font-size:12px}

/* Board shared */
.board{display:grid;gap:8px}
.cell{display:flex;align-items:center;justify-content:center;background:#0f1219;border:1px solid #22283a;border-radius:10px;cursor:pointer;transition:.15s}
.cell:hover{border-color:#2b3247}
.controls{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.btn{padding:8px 12px;border:1px solid #2b3247;border-radius:8px;background:#141826;color:var(--text);cursor:pointer}
.badge{display:inline-block;padding:4px 8px;border:1px solid #2b3247;border-radius:99px;color:var(--muted);font-size:12px}

/* pages */
.page{max-width:760px;margin:30px auto;padding:0 16px}
.head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.head h2{margin:0;font-size:18px}
.sub{color:var(--muted);font-size:12px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.sudoku-grid{grid-template-columns:repeat(9,1fr)}
input.sudoku{width:100%;aspect-ratio:1/1;text-align:center;font-size:16px;border:1px solid #22283a;border-radius:6px;background:#0f1219;color:var(--text)}
canvas{border:1px solid #22283a;border-radius:8px;background:#0f1219}

/* Sudoku enhanced visuals */
.board.sudoku-grid{gap:0}
.board.sudoku-grid input.sudoku{border-radius:0;border:1px solid #22283a}
.board.sudoku-grid input.sudoku:focus{outline:2px solid #2b3247}
.board.sudoku-grid input.sudoku:nth-child(3n){border-right-color:#3a425a}
.board.sudoku-grid input.sudoku:nth-child(n+19):nth-child(-n+27),
.board.sudoku-grid input.sudoku:nth-child(n+46):nth-child(-n+54){border-bottom-color:#3a425a}
input.sudoku[data-hl="1"]{background:#111522}

/* Sudoku given cells (non-editable clues) */
input.sudoku.given {
  background: #1a1f2e !important;
  color: var(--brand) !important;
  font-weight: 700;
  cursor: not-allowed;
}

input.sudoku.given:hover {
  border-color: #22283a;
}

input.sudoku.given:focus {
  outline: none;
}

/* Mobile controls for Snake game */
.mobile-controls {
  display: none;
}

@media (max-width: 768px) {
  .mobile-controls {
    display: grid !important;
  }
  
  .mobile-btn {
    background: var(--panel) !important;
    border: 1px solid #2b3247 !important;
    color: var(--text) !important;
    font-size: 20px !important;
    min-height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .mobile-btn:active {
    background: #1a2030 !important;
    transform: scale(0.95);
  }
  
  .mobile-btn:hover {
    border-color: var(--brand);
  }
  
  canvas {
    max-width: 100%;
    height: auto;
  }
}