.overlay > div { display:flex; flex-direction:column; gap:18px; align-items:center; }
.start-button { border:0; border-radius:9px; padding:12px 30px; background:linear-gradient(90deg,#41d8ff,#ffe06b); color:#071021; font-size:16px; font-weight:800; cursor:pointer; box-shadow:0 12px 30px rgba(0,0,0,.35),0 0 24px rgba(65,216,255,.28); transition:transform .16s,filter .16s; }
.start-button:hover { transform:translateY(-1px); filter:brightness(1.08); }
.skill-card { order: -1; }
.side-panel.game-focus > :not(.skill-card) { display: none; }
.touch-controls { display: none; }

/* Keep the board and skill controls inside one viewport while playing. */
.board-wrap canvas { width: auto; height: min(720px, calc(100vh - 150px)); max-width: 100%; }

@media (max-width: 850px) {
  html, body { height: 100%; overflow: hidden; }
  .app-shell { height: 100vh; max-width: none; padding: 10px; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 12px; align-items: start; }
  .game-panel { min-width: 0; }
  .game-panel header, .controls { width: 100%; }
  .game-panel header { margin-bottom: 6px; }
  .game-panel header p { display: none; }
  h1 { font-size: 24px; }
  .controls { margin: 7px 0 0; font-size: 11px; }
  .board-wrap canvas { width: auto; height: min(720px, calc(100vh - 105px)); max-width: 100%; }
  .side-panel { min-width: 0; gap: 8px; }
  .skill-card { padding: 10px; }
  .skill-card h2 { margin-bottom: 8px; }
  .skills-grid { gap: 6px; }
  .skills-grid button { padding: 7px; font-size: 12px; }
  .skills-grid button small { font-size: 10px; }
}

@media (max-width: 600px) {
  .app-shell { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: 6px; padding: 8px; }
  .game-panel { height: 100%; justify-content: center; }
  .game-panel header, .controls { display: none; }
  .board-wrap canvas { width: auto; height: calc(100vh - 150px); max-width: none; }
  .touch-controls { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: min(297px, 100%); margin-top: 7px; }
  .touch-controls button { aspect-ratio: 1.45; border: 1px solid rgba(113, 140, 178, .8); border-radius: 9px; background: rgba(24, 36, 64, .94); color: var(--text); font-size: 22px; line-height: 1; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  .touch-controls button:active { background: var(--cyan); color: #071021; transform: scale(.96); }
  .side-panel.game-focus { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; width: 100%; }
  .side-panel > :not(.skill-card) { display: none; }
  .side-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; width: 100%; }
  .side-panel.game-focus .skill-card { padding: 4px; border-radius: 8px; }
  .side-panel.game-focus .skill-card h2 { display: none; }
  .side-panel.game-focus .skills-grid { grid-template-columns: repeat(5, 1fr); gap: 4px; }
  .side-panel.game-focus #bigSkills { grid-template-columns: repeat(4, 1fr); }
  .side-panel.game-focus .skills-grid button { min-width: 0; aspect-ratio: 1; padding: 3px; font-size: 0; text-align: center; }
  .side-panel.game-focus .skills-grid button small { display: none; }
  .side-panel.game-focus .skills-grid button::before { display: block; font-size: clamp(15px, 5vw, 21px); line-height: 1; }
  .side-panel.game-focus [data-skill="preview"]::before { content: "◉"; }
  .side-panel.game-focus [data-skill="remove-row"]::before { content: "−"; }
  .side-panel.game-focus [data-skill="replace"]::before { content: "↺"; }
  .side-panel.game-focus [data-skill="bomb"]::before { content: "✦"; }
  .side-panel.game-focus [data-skill="slow"]::before { content: "◷"; }
  .side-panel.game-focus [data-skill="rewind"]::before { content: "↶"; }
  .side-panel.game-focus [data-skill="choose"]::before { content: "◆"; }
  .side-panel.game-focus [data-skill="chain"]::before { content: "⚡"; }
  .side-panel.game-focus [data-skill="clear-top"]::before { content: "⌫"; }
}