/* The Daily Five — games.css (arcade styles; loads after style.css) */

/* Header nav (used on index + arcade pages) */
.logo-link{color:inherit;text-decoration:none}
.site-nav{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.site-nav a{
  color:#fff;text-decoration:none;font-weight:800;font-size:.92rem;
  background:rgba(255,255,255,.16);border:2px solid transparent;
  padding:6px 16px;border-radius:999px;transition:background .15s ease,border-color .15s ease;
}
.site-nav a:hover{background:rgba(255,255,255,.28)}
.site-nav a.active{background:var(--sun);color:var(--ink)}

/* Buttons as links + small variant */
a.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.btn.small{padding:8px 16px;min-height:40px;font-size:.92rem}
.btn:disabled{opacity:.55;cursor:default}

/* Arcade hub grid */
.game-grid{display:grid;gap:14px;margin:18px 0}
.game-card{
  display:flex;gap:16px;align-items:center;text-decoration:none;color:var(--ink);
  background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:18px 20px;transition:transform .12s ease,box-shadow .12s ease;
}
.game-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(34,48,74,.16)}
.game-card:active{transform:translateY(-1px)}
.game-card .g-emoji{
  font-size:2.2rem;line-height:1;flex:0 0 62px;width:62px;height:62px;
  display:flex;align-items:center;justify-content:center;
  background:#F6F8FC;border-radius:16px;
}
.game-card h3{font-size:1.15rem;font-weight:900}
.game-card p{color:var(--muted);font-size:.92rem;margin:2px 0 6px}
.game-card .play-link{color:var(--teal-dark);font-weight:900;font-size:.95rem}
@media (min-width:560px){.game-grid{grid-template-columns:1fr 1fr}}

/* Index arcade promo */
.arcade-promo .game-chips{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 6px}
.arcade-promo .game-chips a{
  text-decoration:none;color:var(--ink);font-weight:800;font-size:.9rem;
  background:#F6F8FC;border:2px solid #E2E8F2;border-radius:999px;padding:7px 14px;
  transition:border-color .15s ease;
}
.arcade-promo .game-chips a:hover{border-color:var(--violet)}

/* Game page furniture */
.game-hud{
  display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;
  background:#F6F8FC;border-radius:14px;padding:10px 14px;margin:12px 0;
  font-weight:800;font-size:.98rem;
}
.game-hud .hud-item span{color:var(--teal-dark)}
.game-hud .spacer{flex:1}
.status-line{min-height:26px;font-weight:800;margin:10px 0 2px}
.status-line.good{color:var(--good)}
.status-line.bad{color:var(--bad)}
.howto{color:var(--muted);font-size:.92rem;margin-top:10px}

/* Stage + overlay (canvas games) */
.game-stage{position:relative;max-width:440px;margin:0 auto;border-radius:16px;overflow:hidden}
.game-stage.wide{max-width:500px}
canvas.game-canvas{display:block;width:100%;height:auto;background:#FDFBF5;touch-action:none;border-radius:16px}
.game-overlay{
  position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;text-align:center;padding:20px;
  background:rgba(34,48,74,.78);color:#fff;border-radius:16px;
}
.game-overlay.show{display:flex}
.game-overlay .ov-title{font-size:1.6rem;font-weight:900}
.game-overlay .ov-sub{font-weight:700;opacity:.92}
.game-overlay .ov-score{font-size:1.05rem;font-weight:800;color:var(--sun)}

/* On-screen d-pad (Snake) */
.dpad{display:grid;grid-template-columns:repeat(3,58px);grid-template-rows:repeat(3,58px);gap:6px;justify-content:center;margin:14px auto 2px}
.dpad button{
  font-size:1.25rem;border:none;border-radius:14px;cursor:pointer;min-height:58px;
  background:#EEF2F9;color:var(--ink);font-weight:900;touch-action:manipulation;
  transition:background .12s ease,transform .05s ease;
}
.dpad button:hover{background:#E2E8F2}
.dpad button:active{transform:scale(.94);background:var(--sun)}
.dpad .blank{background:transparent;pointer-events:none}

/* Minesweeper */
.ms-wrap{max-width:360px;margin:0 auto}
.ms-board{display:grid;grid-template-columns:repeat(9,1fr);gap:3px;touch-action:manipulation}
.ms-cell{
  font:inherit;font-weight:900;font-size:1rem;aspect-ratio:1/1;min-height:34px;
  border:none;border-radius:8px;cursor:pointer;padding:0;
  background:linear-gradient(145deg,#8f83f0,#6C5CE7);color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:background .1s ease;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
}
.ms-cell:hover:not(.open):not(:disabled){background:linear-gradient(145deg,#7d70ec,#5a4bd1)}
.ms-cell.open{background:#EEF2F9;cursor:default}
.ms-cell.mine{background:#FDECEA}
.ms-cell.boom{background:var(--bad)}
.ms-cell.flagged{background:linear-gradient(145deg,#ffd97a,#FFC53D)}
.ms-cell.n1{color:#2563EB}.ms-cell.n2{color:#1F9D66}.ms-cell.n3{color:#E8503F}
.ms-cell.n4{color:#574BDB}.ms-cell.n5{color:#B45309}.ms-cell.n6{color:#0E9594}
.ms-cell.n7{color:#22304A}.ms-cell.n8{color:#5B6B8C}
.ms-flag-toggle[aria-pressed="true"]{background:var(--sun);color:var(--ink)}

/* Memory Match */
.mem-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:420px;margin:0 auto}
.mem-card{perspective:600px;aspect-ratio:1/1;cursor:pointer;background:none;border:none;padding:0}
.mem-inner{
  display:block;position:relative;width:100%;height:100%;
  transform-style:preserve-3d;transition:transform .38s ease;
}
.mem-card.flipped .mem-inner{transform:rotateY(180deg)}
.mem-face{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  border-radius:16px;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  font-size:2rem;font-weight:900;user-select:none;-webkit-user-select:none;
}
.mem-front{background:linear-gradient(145deg,var(--violet),#574BDB);color:#fff;box-shadow:var(--shadow)}
.mem-front:hover{background:linear-gradient(145deg,#7d70ec,#574BDB)}
.mem-back{background:#FFF3D6;transform:rotateY(180deg);box-shadow:var(--shadow)}
.mem-card.matched{cursor:default}
.mem-card.matched .mem-back{background:#E4F7EE;animation:mem-pop .35s ease}
@keyframes mem-pop{40%{transform:rotateY(180deg) scale(1.12)}100%{transform:rotateY(180deg) scale(1)}}

/* Slide 2048 */
.s-board{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
  background:#22304A;border-radius:16px;padding:10px;
  max-width:420px;margin:0 auto;touch-action:none;
}
.s-cell{
  aspect-ratio:1/1;border-radius:10px;background:rgba(255,255,255,.10);
  display:flex;align-items:center;justify-content:center;
}
.tile{
  width:100%;height:100%;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:1.55rem;color:var(--ink);
}
.tile.new{animation:tile-in .18s ease}
.tile.merged{animation:tile-pop .18s ease}
@keyframes tile-in{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes tile-pop{40%{transform:scale(1.14)}100%{transform:scale(1)}}
.tile.v2{background:#FFF3D6}.tile.v4{background:#FFE1A8}
.tile.v8{background:#FFC53D}.tile.v16{background:#FF9F43;color:#fff}
.tile.v32{background:#FF6B5E;color:#fff}.tile.v64{background:#E8503F;color:#fff}
.tile.v128{background:#6C5CE7;color:#fff;font-size:1.3rem}
.tile.v256{background:#574BDB;color:#fff;font-size:1.3rem}
.tile.v512{background:#0E9594;color:#fff;font-size:1.3rem}
.tile.v1024{background:#0B7473;color:#fff;font-size:1.05rem}
.tile.v2048{background:#1F9D66;color:#fff;font-size:1.05rem;box-shadow:0 0 0 3px var(--sun) inset}
.tile.super{background:#22304A;color:var(--sun);font-size:1.05rem}

/* Geometry Jump */
canvas.geo-canvas{background:#DFF1F7}
.kbd{
  display:inline-block;background:#EEF2F9;border:1px solid #D7DEEA;border-bottom-width:3px;
  border-radius:6px;padding:0 7px;font-weight:900;font-size:.85em;color:var(--ink);
  vertical-align:baseline;white-space:nowrap;
}