:root{
  --bg-900: #0b1e3a;   /* deep navy */
  --bg-800: #0e274b;
  --bg-700: #112f5a;
  --text:   #eaf1ff;
  --muted:  #a8b7d9;
  --accent: #5ba3ff;
  --card:   #0f2649;
  --card-2: #0d2140;
  --border: #213a6a;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
}
*{ box-sizing: border-box }
html,body{ height:100% }
body{
  margin:0;
  color:var(--text);
  /* Calmer, solid-feel background with subtle vertical shading */
  background: linear-gradient(180deg, var(--bg-800) 0%, var(--bg-900) 45%, #091833 100%);
  font: 16px/1.55 system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.muted{ color:var(--muted) }
/* Optional ultra-subtle texture to avoid banding */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.04;
  background-image: url("data:image/svg+xml;utf8,   <svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'>     <rect width='120' height='120' fill='none'/>     <circle cx='10' cy='8' r='1' fill='%23ffffff' opacity='0.8'/>     <circle cx='60' cy='40' r='1' fill='%23ffffff' opacity='0.8'/>     <circle cx='90' cy='90' r='1' fill='%23ffffff' opacity='0.8'/>     <circle cx='30' cy='70' r='1' fill='%23ffffff' opacity='0.8'/>   </svg>");
}
/* Header */
.app-header{
  position: sticky; top:0; z-index:10;
  display:flex; align-items:center; gap:1rem;
  padding: .8rem 1rem;
  background: linear-gradient(180deg, var(--bg-700), var(--bg-800));
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.brand{ display:flex; flex-direction:column }
.brand-title{ font-size:1.2rem; font-weight:700; letter-spacing:.3px }
.brand-subtitle{ font-size:.9rem; color:var(--muted) }
/* Sidebar */
.sidebar{
  position: fixed; inset: 56px auto 0 0; width: 270px;
  background: linear-gradient(180deg, #0f2446, #0b1e3a);
  border-right:1px solid var(--border);
  padding: .75rem;
  overflow:auto;
  transform: translateX(0);
  transition: transform .24s ease;
}
.sidebar.closed{ transform: translateX(-100%) } /* why: mobile slide-in */
.nav{ display:flex; flex-direction:column; gap:.25rem }
.nav-link{
  display:flex; align-items:center; gap:.6rem;
  padding:.65rem .8rem; border-radius:12px;
  color:var(--text); text-decoration:none;
  border:1px solid transparent;
}
.nav-link:hover{ background: #102852; border-color: var(--border) }
.nav-link.active{ background:#14315f; border-color:#2b4e8d; box-shadow: inset 0 0 0 1px #2b4e8d }
/* Content */
.content{
  margin-left:270px; padding: 1.25rem; min-height: calc(100% - 56px);
}
.panel{
  background: linear-gradient(180deg, var(--card), var(--card-2));
  border:1px solid var(--border);
  border-radius:16px; padding: 1.25rem;
  box-shadow: var(--shadow);
}
.panel-header{
  display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; flex-wrap:wrap;
  margin-bottom:1rem;
}
.eyebrow{
  margin:0; text-transform:uppercase; font-size:.75rem; letter-spacing:.18em; color:var(--muted);
}
.panel-subtitle{ margin:.35rem 0 0; color:var(--muted) }
.button-link{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.45rem .75rem; border-radius:10px;
  border:1px solid var(--border); text-decoration:none; color:var(--text); background:#102852;
}
.button-link:hover{ background:#14315f }
/* Cards */
.card-grid{
  display:grid; gap:1rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  margin-top: 1rem;
}
.card{
  display:flex; flex-direction:column;
  border:1px solid var(--border); border-radius:16px;
  background: #0f2243; text-decoration:none; color:var(--text);
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover{ transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,0,0,.35) }
.card-media{
  width:100%; aspect-ratio: 16 / 9; object-fit: cover; border-top-left-radius:16px; border-top-right-radius:16px;
  border-bottom:1px solid var(--border);
}
.card-body{ padding:.9rem }
.card-title{ margin:.1rem 0 .25rem 0; font-size:1rem }
.card-text{ margin:0; color: var(--muted) }
/* Menu button */
.menu-btn{
  appearance:none; border:1px solid var(--border); background:#0f2243; color:var(--text);
  padding:.4rem .6rem; border-radius:10px; cursor:pointer;
}
.menu-btn:hover{ background:#122a54 }
/* Game layout */
.game-layout{
  display:grid; gap:1.5rem;
  grid-template-columns: minmax(240px, 360px) minmax(320px, 1fr);
}
.status-card, .board-card{
  background:#0f2243; border:1px solid var(--border); border-radius:16px;
  padding:1rem; box-shadow: var(--shadow);
}
.status-card h2, .board-card h2{ margin:0 0 .75rem }
.score-row{ display:flex; gap:2rem; margin-bottom:.5rem }
.label{ margin:0; color:var(--muted); font-size:.85rem }
.score{ margin:.1rem 0 0; font-size:1.6rem; font-weight:700 }
.status-text{ margin:.65rem 0; color:var(--text) }
.status-meta{ display:flex; gap:1.5rem; color:var(--muted); font-size:.85rem }
.block-choices{ display:grid; gap:.75rem; margin-top:.75rem }
.block-choice{
  display:flex; justify-content:space-between; align-items:center;
  border:1px solid var(--border); border-radius:12px; padding:.6rem .75rem;
  background:#0c1f3b;
}
.tile-chip{
  display:inline-flex; align-items:center; gap:.5rem; font-weight:600;
}
.tile-dot{
  width:16px; height:16px; border-radius:6px; border:1px solid rgba(255,255,255,.2);
}
.select-btn{
  background:var(--accent); border:none; color:#041426;
  font-weight:600; padding:.35rem .7rem; border-radius:10px; cursor:pointer;
}
.select-btn:disabled{ opacity:.5; cursor:not-allowed }
.block-actions{ margin-top:.75rem }
.action-btn{
  width:100%; padding:.55rem .8rem; border-radius:12px; border:1px solid var(--border);
  background:#122a54; color:var(--text); cursor:pointer;
}
.action-btn:disabled{ opacity:.5; cursor:not-allowed }
.rules-list{ margin:.5rem 0 0 1rem; color:var(--muted) }
.board-legend{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap:.4rem; margin-bottom:.8rem; font-size:.8rem; color:var(--muted);
}
.legend-item{ display:flex; align-items:center; gap:.4rem }
.game-board{
  display:grid; grid-template-columns: repeat(8, 48px);
  grid-template-rows: repeat(8, 48px);
  gap:4px;
  padding:12px;
  background:rgba(6, 18, 38, .9);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
.game-cell{
  width:48px; height:48px; border-radius:8px; border:2px solid rgba(255,255,255,.2);
  background: var(--tile-color, #0c1f3b);
  display:flex; align-items:center; justify-content:center;
  font-size:.75rem; color:rgba(6, 18, 38, .85); cursor:pointer; position:relative;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}
.game-cell.user{ outline:2px solid rgba(255,255,255,.75); outline-offset:-2px }
.game-cell.pc{ outline:2px solid rgba(0,0,0,.7); outline-offset:-2px }
.game-cell.filled{
  background: linear-gradient(135deg, rgba(255,255,255,.35), rgba(255,255,255,0)), var(--tile-color, #0c1f3b);
  color:rgba(6, 18, 38, .95);
}
.game-cell.disabled{ cursor:not-allowed; opacity:.35 }
@media (max-width: 1080px){
  .game-layout{ grid-template-columns: 1fr }
  .game-board{ justify-content:center }
}
/* Responsive */
@media (max-width: 960px){
  .sidebar{ transform: translateX(-100%) }
  .sidebar.open{ transform: translateX(0) }
  .content{ margin-left:0 }
}
/* Home refresh */
.about-home .hero{
  display:grid;
  grid-template-columns:minmax(170px,220px) 1fr;
  gap:1.25rem;
  align-items:start;
}
.about-home figure{ margin:0; }
.about-home .hero-img{
  width:100%;
  height:auto;
  border-radius:16px;
  border:2px solid var(--border);
  object-fit:cover;
}
.bullets{ margin:.5rem 0 0 1rem; color:var(--text); }
.bullets li{ margin:.35rem 0; }

/* Simple games page */
.game-panel{ max-width: 760px; }
.game-shell{
  border:1px solid var(--border);
  border-radius:14px;
  padding:1rem;
  background:#0c1f3b;
}
.guess-controls{
  display:grid;
  grid-template-columns: minmax(120px, 180px) auto auto;
  gap:.7rem;
  margin: .75rem 0 1rem;
}
.guess-controls input{
  background:#091833;
  color:var(--text);
  border:1px solid var(--border);
  border-radius:10px;
  padding:.5rem .65rem;
}
.guess-controls .action-btn{ width:auto; }

@media (max-width: 760px){
  .about-home .hero{ grid-template-columns:1fr; }
  .guess-controls{ grid-template-columns: 1fr; }
}

/* ── Revamp 2026 ──────────────────────────────────────────── */

/* Standalone hero layout (homepage) */
.hero{
  display:flex; gap:1.25rem; align-items:flex-start;
}
.hero figure{ margin:0; flex:0 0 200px; width:200px; max-width:220px; overflow:hidden; }
.hero-content{ flex:1 1 auto; min-width:0; }
.hero-img{
  display:block; width:100%; max-width:100%; height:auto;
  border-radius:16px; border:2px solid var(--border);
}
@media(max-width:700px){
  .hero{ flex-direction:column; }
  .hero figure{ flex:none; width:160px; max-width:100%; }
}

/* Chip pills (dark palette) */
.chips,.tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.65rem }
.chip{
  padding:.35rem .65rem; border:1px solid var(--border);
  border-radius:999px; background:#0f2243; color:var(--muted); font-size:.85rem;
}
.tag{
  padding:.2rem .5rem; border:1px solid var(--border);
  border-radius:999px; background:#0c1f3b; color:var(--muted); font-size:.75rem;
}

/* Button links */
.btn{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.45rem .8rem; border-radius:10px;
  border:1px solid var(--border); background:#102852;
  color:var(--text); text-decoration:none; font-size:.9rem;
  margin-right:.5rem; margin-top:.5rem;
}
.btn:hover{ background:#14315f }

/* Card badge (e.g. "New") */
.card{ position:relative }
.card-badge{
  position:absolute; top:.6rem; right:.6rem; z-index:1;
  background:var(--accent); color:#041426;
  font-size:.7rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; padding:.2rem .5rem; border-radius:999px;
}

/* Ad slots */
.ad-container{
  width:100%;
  margin:1.5rem 0;
  text-align:center;
  min-height:90px; /* prevent layout shift before ad loads */
}

/* Canvas wrapper */
.canvas-card{ display:flex; justify-content:center; align-items:center; }
#snakeCanvas{
  display:block; border-radius:12px;
  max-width:100%; aspect-ratio:1/1; cursor:pointer;
}