/* Ink & Pixels — Play page (currently-into board + the arcade) */

/* currently into */
.into-wrap { padding-top: var(--space-8); padding-bottom: var(--space-16); }
.into-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-6); margin-top: var(--space-6); }
.into-card {
  background: var(--surface); border: var(--border-w) solid var(--stroke); box-shadow: var(--shadow); padding: var(--space-6);
  transition: transform var(--t-standard) var(--ease-out), box-shadow var(--t-standard) var(--ease-out);
}
.into-card:hover { transform: translate(-3px,-3px); box-shadow: var(--shadow-hover); }
.into-ico { font-size: var(--text-2xl); line-height: 1; color: var(--expression-text); display: block; }
.into-card h3 { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); margin: var(--space-3) 0 var(--space-2); }
.into-card p { color: var(--text); }
.into-card b { font-weight: 700; }
.into-tag { display: inline-block; margin-top: var(--space-4); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-secondary); }

/* the arcade */
.arcade-zone { padding-bottom: var(--space-24); }
.arcade-zone .sec-title { margin: var(--space-3) 0 var(--space-6); font-size: var(--text-2xl); }
.atabs { display: flex; gap: var(--space-2); margin-bottom: calc(-1 * var(--border-w)); }
.atab {
  font-family: var(--font-mono); font-size: var(--text-sm); cursor: pointer;
  padding: var(--space-3) var(--space-4); background: var(--surface); color: var(--text-secondary);
  border: var(--border-w) solid var(--stroke); border-bottom: none;
}
.atab.active { color: var(--text); background: var(--surface-active); position: relative; z-index: 1; }
.arcade-cab { background: var(--surface-active); border: var(--border-w) solid var(--stroke); box-shadow: var(--shadow); padding: var(--space-8); }
.game { display: grid; grid-template-columns: 1fr auto; gap: var(--space-8); align-items: center; }
.game.hidden { display: none; }
.game-side { max-width: 34ch; }
.game-how { color: var(--text); }
.game-how b { font-weight: 700; }
.score { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-secondary); margin: var(--space-4) 0; }
.score b { color: var(--accent-text); font-size: var(--text-base); }
#snake { width: 280px; height: 280px; image-rendering: pixelated; background: var(--background); border: var(--border-w) solid var(--stroke); box-shadow: var(--shadow-press); }

/* 2048 board */
.g2048-grid {
  width: 280px; height: 280px; background: var(--stroke); border: var(--border-w) solid var(--stroke);
  box-shadow: var(--shadow-press); display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr);
  gap: 6px; padding: 6px;
}
.g2048-cell {
  background: var(--surface); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.g2048-cell[data-v="0"] { color: transparent; }
.g2048-cell[data-v="2"]  { background: #e7f0e9; }
.g2048-cell[data-v="4"]  { background: #cfe6d6; }
.g2048-cell[data-v="8"]  { background: var(--accent-7); color: #071009; }
.g2048-cell[data-v="16"] { background: var(--accent-8); color: #071009; }
.g2048-cell[data-v="32"] { background: var(--accent-9); color: #071009; }
.g2048-cell[data-v="64"] { background: var(--accent-10); color: #071009; }
.g2048-cell[data-v="128"], .g2048-cell[data-v="256"] { background: #D9A441; color: #1a1407; font-size: var(--text-base); }
.g2048-cell[data-v="512"], .g2048-cell[data-v="1024"] { background: var(--purple-9); color: #120a11; font-size: var(--text-base); }
.g2048-cell[data-v="2048"] { background: var(--ink); color: var(--pixels); }

@media (max-width: 720px) {
  .into-grid { grid-template-columns: 1fr; }
  .arcade-cab { padding: var(--space-6); }
  .game { grid-template-columns: 1fr; gap: var(--space-6); justify-items: start; }  /* stack info above board */
  #snake, .g2048-grid { width: min(280px, 78vw); height: min(280px, 78vw); }         /* games stay playable (swipe) */
}