:root {
  --bg:#0b1020;
  --panel:#121833;
  --ink:#eef2ff;
  --muted:#93a4c7;
  --accent:#2dd4bf;
  --line:#1f2a4d;
}

/* ===== Base layout & typography ===== */

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
}

.container{max-width:1100px;margin:0 auto;padding:16px}
.narrow{max-width:760px}
.row{display:flex}
.gap{gap:12px}
.between{justify-content:space-between}
.center{display:grid;place-items:center;text-align:center}
.center-y{align-items:center}
.mt{margin-top:16px}
.mt-xxs{margin-top:6px}
.small{font-size:12px}
.spacer{flex:1}
.muted{color:var(--muted)}

.title{font-size:40px;font-weight:800;margin:8px 0}
.subtitle{font-size:18px;color:var(--muted);margin:4px 0 8px}
.bigtext{font-size:32px;font-weight:800}

.topbar{
  position:sticky;
  top:0;
  background:rgba(11,14,28,.75);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  z-index:5;
}
.brand{
  font-weight:800;
  color:var(--ink);
  text-decoration:none;
}
.nav{
  color:var(--muted);
  text-decoration:none;
}
.nav:hover{color:var(--ink)}

.footer{
  border-top:1px solid var(--line);
  color:var(--muted);
  text-align:center;
  padding:12px;
}

.linkcard{color:inherit;text-decoration:none}

.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}

@media (max-width:900px){
  .grid2{grid-template-columns:1fr}
  .grid3{grid-template-columns:repeat(2,1fr)}
  .grid4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:540px){
  .grid3,.grid4{grid-template-columns:1fr}
  .title{font-size:30px}
}

.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;
}

.shot{
  aspect-ratio:16/9;
  background:#0e1636;
  border-radius:10px;
  display:grid;
  place-items:center;
  color:var(--muted);
  margin-bottom:8px;
}

/* Pills / bullets / buttons */

.pill{
  background:#0e1636;
  border:1px dashed var(--line);
  border-radius:999px;
  padding:10px;
  text-align:center;
}
.bullets{margin:0;padding-left:18px}

.btn{
  background:var(--panel);
  border:1px solid var(--line);
  color:var(--ink);
  padding:8px 12px;
  border-radius:10px;
  cursor:pointer;
}
.btn.big{padding:12px 18px;font-weight:700}
.btn:hover{filter:brightness(1.08)}

/* Primary CTA (for LP) */

.btn-primary{
  background:linear-gradient(120deg,#22c55e,#2dd4bf);
  color:#022c22;
  border:none;
  box-shadow:0 12px 30px rgba(34,197,94,.45);
}
.btn-primary:hover{
  filter:brightness(1.06);
  transform:translateY(-1px);
}
.btn-primary:active{
  transform:translateY(0);
  box-shadow:0 6px 16px rgba(15,23,42,.75);
}

/* Score & inline reset */

.scorebar{display:flex;align-items:center;gap:10px}
.score{
  background:var(--panel);
  padding:8px 12px;
  border-radius:10px;
  text-align:center;
  border:1px solid var(--line);
  min-width:86px;
}
.score .label{
  font-size:10px;
  color:var(--muted);
  text-transform:uppercase;
}

/* ===== Modal (game over) ===== */

.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.5);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:50;
}
.modal.show{display:flex}
.modal .box{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  padding:18px;
  min-width:280px;
  max-width:92vw;
  text-align:center;
}
.modal h3{margin:0 0 8px}
.modal .actions{
  display:flex;
  gap:10px;
  justify-content:center;
  margin-top:12px;
}

/* Start overlay on canvases */

.start-overlay{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  background:rgba(0,0,0,.35);
  border-radius:14px;
  border:1px dashed var(--line);
}
.start-overlay .pill{
  background:rgba(14,22,54,.85);
}

/* ===== 2048 board ===== */

.game-head .logo{font-size:22px}

.board{
  display:grid;
  gap:12px;
  padding:14px;
  border-radius:16px;
  background:#0d1329;
  box-shadow:0 14px 44px rgba(0,0,0,.45);
  width:max-content;
  margin-inline:auto;
  position:relative;
  grid-template-columns:repeat(4,var(--tile));
}
.tile{
  width:var(--tile);
  height:var(--tile);
  border-radius:14px;
  display:grid;
  place-items:center;
  font-weight:800;
  font-size:calc(var(--tile) * .28);
  transition:transform .12s ease, background .2s ease, box-shadow .2s ease;
}
.tile-0{
  background:#151a38;
  color:#151a38;
  box-shadow:none;
}
.tile-2{background:#e0e7ff;color:#0b1020}
.tile-4{background:#c7d2fe;color:#0b1020}
.tile-8{background:#7dd3fc;color:#06243a}
.tile-16{background:#38bdf8;color:#06243a}
.tile-32{background:#22d3ee;color:#06243a}
.tile-64{background:#2dd4bf;color:#062418}
.tile-128{background:#34d399;color:#062418}
.tile-256{background:#10b981;color:#04251a}
.tile-512{background:#22c55e;color:#042512}
.tile-1024{background:#a3e635;color:#101b06}
.tile-2048{background:#facc15;color:#1b1402}

@keyframes pop-in{
  0%{transform:scale(.6);filter:brightness(.9)}
  100%{transform:scale(1);filter:brightness(1)}
}
@keyframes pulse{
  0%{transform:scale(1)}
  50%{transform:scale(1.08)}
  100%{transform:scale(1)}
}
.tile-new{animation:pop-in .18s ease-out}
.tile-merge{animation:pulse .2s ease-out}

.gameover{
  background:#ef4444;
  color:white;
  padding:12px;
  border-radius:12px;
  text-align:center;
  font-weight:700;
}
.hidden{display:none}

/* Touch controls */

.touch-ctrls{
  display:none;
  gap:8px;
  justify-content:center;
  margin-top:10px;
}
.touch .touch-ctrls{display:flex}
.dpad{
  display:grid;
  grid-template-columns:repeat(3,56px);
  grid-template-rows:repeat(3,56px);
  gap:6px;
}
.dpad button{
  background:#0e1636;
  border:1px solid var(--line);
  border-radius:12px;
  color:var(--ink);
  font-weight:900;
  font-size:18px;
}


/* ===== Sudoku game ===== */

.sudoku-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-top:20px;
  gap:12px;
}

.sudoku-board{
  display:grid;
  grid-template-columns:repeat(9, minmax(24px, 40px));
  grid-template-rows:repeat(9, minmax(24px, 40px));
  gap:0;
  border:3px solid #64748b;
  border-radius:10px;
  overflow:hidden;
  background:#020617;
}

.s-cell{
  border:1px solid #111827;
  display:grid;
  place-items:center;
  font-size:18px;
  font-weight:600;
  width:40px;
  height:40px;
  color:var(--ink);
  background:#0b1120;
  cursor:pointer;
  user-select:none;
  padding:0;
}

.s-cell.given{
  background:#020617;
  font-weight:700;
  color:#e5e7eb;
  cursor:default;
}

.s-cell.selected{
  background:#1d283a;
  box-shadow:inset 0 0 0 1px #38bdf8;
}

.s-cell.conflict{
  background:#7f1d1d;
}

.s-cell.same{
  background:#0f172a;
}

/* region borders */
.sudoku-board .s-cell.region-right{
  border-right-width:3px;
  border-right-color:#64748b;
}
.sudoku-board .s-cell.region-bottom{
  border-bottom-width:3px;
  border-bottom-color:#64748b;
}

.sudoku-controls{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
}

.sudoku-num{
  width:32px;
  height:32px;
  border-radius:8px;
  border:1px solid var(--line);
  background:#020617;
  color:var(--ink);
  display:grid;
  place-items:center;
  cursor:pointer;
  font-weight:600;
}

.sudoku-num:hover{
  background:#111827;
}

.sudoku-meta{
  display:flex;
  gap:12px;
  font-size:12px;
  color:var(--muted);
  justify-content:center;
}

/* Sudoku thumbnail (home card) */
.shot-sudoku{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,1fr);
  gap:1px;
  width:60%;
  aspect-ratio:1/1;
  background:#020617;
  border-radius:6px;
  overflow:hidden;
}

.shot-sudoku-cell{
  background:#020617;
}

.shot-sudoku-cell.filled{
  background:#38bdf8;
}

@media (max-width:540px){
  .sudoku-board{
    grid-template-columns:repeat(9, minmax(24px, 32px));
    grid-template-rows:repeat(9, minmax(24px, 32px));
  }
  .s-cell{
    width:32px;
    height:32px;
    font-size:16px;
  }
}


/* Canvas wrappers */

.canvas-wrap{position:relative;display:grid;place-items:center}
canvas.pixel{
  image-rendering:pixelated;
  border-radius:14px;
  border:1px solid var(--line);
  background:#0d1329;
  box-shadow:0 14px 44px rgba(0,0,0,.45);
}

/* Snake responsive */

.snake-wrap{width:min(92vw,420px);}
.snake-wrap canvas{width:100%;height:auto}

/* Breaker responsive */

.breaker-wrap{width:min(96vw,640px);}
.breaker-wrap canvas{width:100%;height:auto}

/* Memory grid */

.memory{
  display:grid;
  grid-template-columns:repeat(4,minmax(60px,120px));
  gap:12px;
  justify-content:center;
}
.card-m{
  width:100%;
  aspect-ratio:1/1;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:#121833;
  border:1px solid var(--line);
  cursor:pointer;
  user-select:none;
  font-size:48px;
  font-weight:800;
  transition:transform .12s ease, background .2s ease, filter .12s ease;
}
.card-m.flipped{background:#0e1636}
.card-m.matched{
  background:#2dd4bf;
  color:#062418;
  filter:brightness(1.1);
}

/* Tic-Tac-Toe */

.ttt{
  display:grid;
  grid-template-columns:repeat(3,minmax(80px,120px));
  gap:8px;
  background:#0d1329;
  padding:14px;
  border-radius:16px;
  width:max-content;
  margin-inline:auto;
}
.ttt-cell{
  width:100px;
  height:100px;
  display:grid;
  place-items:center;
  background:#121833;
  border-radius:12px;
  font-size:44px;
  font-weight:900;
  cursor:pointer;
  user-select:none;
  border:1px solid var(--line);
  color:var(--ink);
}
@media (max-width:540px){
  .ttt{
    grid-template-columns:repeat(3,minmax(72px,1fr));
  }
  .ttt-cell{
    width:72px;
    height:72px;
    font-size:36px;
  }
}

/* Small screens: 2048 tile size + titles */

@media (max-width:540px){
  :root{--tile:70px;}
  .title{font-size:26px}
}
@media (min-width:541px){
  :root{--tile:90px;}
}

/* ===== Home thumbnails for each game ===== */

.shot-inner{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
}

/* 2048 mini grid */
.shot-grid-2048{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2px;
  width:70%;
  aspect-ratio:1/1;
}
.shot-tile{
  border-radius:4px;
  font-size:10px;
  font-weight:700;
  display:grid;
  place-items:center;
}
.shot-tile.a{background:#e0f2fe;color:#0b1020}
.shot-tile.b{background:#bfdbfe;color:#0b1020}
.shot-tile.c{background:#7dd3fc;color:#06243a}
.shot-tile.d{background:#2dd4bf;color:#062418}

/* Tic-Tac-Toe thumbnail */

.shot-ttt{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px;
  width:70%;
  aspect-ratio:1/1;
}
.shot-ttt-cell{
  border-radius:4px;
  border:1px solid rgba(148,163,184,.4);
  font-size:14px;
  font-weight:800;
  display:grid;
  place-items:center;
}

/* Snake thumbnail */

.shot-snake{
  position:relative;
  width:70%;
  aspect-ratio:1/1;
  border-radius:8px;
  background:radial-gradient(circle at 20% 20%,#22c55e33,#020617);
  overflow:hidden;
}
.shot-snake-seg{
  position:absolute;
  width:18%;
  height:18%;
  border-radius:6px;
  background:#22c55e;
}
.shot-snake-food{
  position:absolute;
  width:12%;
  height:12%;
  border-radius:50%;
  background:#facc15;
}

/* Breaker thumbnail */

.shot-breaker{
  position:relative;
  width:80%;
  aspect-ratio:4/3;
  border-radius:8px;
  background:#020617;
  overflow:hidden;
}
.shot-breaker-brick{
  position:absolute;
  height:11%;
  border-radius:3px;
  background:#34d399;
}
.shot-breaker-paddle{
  position:absolute;
  bottom:8%;
  left:25%;
  width:50%;
  height:10%;
  border-radius:4px;
  background:#2dd4bf;
}
.shot-breaker-ball{
  position:absolute;
  bottom:28%;
  left:48%;
  width:8%;
  height:8%;
  border-radius:50%;
  background:#facc15;
}

/* Memory thumbnail */

.shot-memory{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:4px;
  width:80%;
}
.shot-card{
  border-radius:5px;
  border:1px solid rgba(148,163,184,.4);
  background:#020617;
  display:grid;
  place-items:center;
  font-size:14px;
}
.shot-card.revealed{background:#0f172a}
.shot-card.match{background:#22c55e;color:#052e16}

/* ===== LP hero & preview ===== */

.lp-hero{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(0,1.3fr);
  gap:24px;
  align-items:center;
  margin-top:24px;
}

.lp-preview-card{
  background:radial-gradient(circle at 0 0,rgba(56,189,248,.25),rgba(15,23,42,1));
  border-radius:16px;
  border:1px solid var(--line);
  padding:16px;
  box-shadow:0 18px 40px rgba(15,23,42,.7);
}

.lp-preview-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}

.lp-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:#22c55e;
  box-shadow:0 0 8px rgba(34,197,94,.8);
}

/* LP 4×4 preview board */

.lp-board{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:6px;
  padding:10px;
  border-radius:14px;
  background:#020617;
}

.lp-tile{
  border-radius:10px;
  height:52px;
  display:grid;
  place-items:center;
  font-weight:800;
  font-size:18px;
  transition:transform .12s ease, filter .12s ease;
}
.lp-tile-0{
  background:#020617;
  color:transparent;
}

.lp-tile-2   {background:#e0e7ff;color:#0b1020}
.lp-tile-4   {background:#c7d2fe;color:#0b1020}
.lp-tile-8   {background:#7dd3fc;color:#06243a}
.lp-tile-16  {background:#38bdf8;color:#06243a}
.lp-tile-32  {background:#22d3ee;color:#06243a}
.lp-tile-64  {background:#2dd4bf;color:#062418}
.lp-tile-128 {background:#34d399;color:#062418}
.lp-tile-256 {background:#10b981;color:#04251a}
.lp-tile-512 {background:#22c55e;color:#042512}
.lp-tile-1024{background:#a3e635;color:#101b06}
.lp-tile-2048{background:#facc15;color:#1b1402}

@keyframes lp-merge{
  0%{transform:scale(0.9);filter:brightness(1);}
  50%{transform:scale(1.06);filter:brightness(1.08);}
  100%{transform:scale(1);filter:brightness(1);}
}
.lp-tile-merge{animation:lp-merge .28s ease-out;}

@media (max-width:840px){
  .lp-hero{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:480px){
  .lp-board .lp-tile{
    height:44px;
    font-size:16px;
  }
}

/* ===== Ad banner on LP ===== */

.ad-banner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:14px 18px;
  border-radius:16px;
  text-decoration:none;
  background:radial-gradient(circle at 0 0,rgba(56,189,248,.2),rgba(15,23,42,1));
  border:1px solid var(--line);
  color:var(--ink);
}
.ad-banner-text{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.ad-kicker{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
}
.ad-title{
  font-size:16px;
  font-weight:600;
}
.ad-cta{
  font-size:14px;
  font-weight:600;
}
@media (max-width:600px){
  .ad-banner{
    flex-direction:column;
    align-items:flex-start;
  }
}
.link-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.15); /* subtle */
  color: var(--ink);
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
}

.link-more span {
  font-size: 14px;
}

.link-more:hover {
  background: rgba(148, 163, 184, 0.25);
}