@import url("canvas-game.css?v=20260815-three-new-games");

body {
  background:
    radial-gradient(circle at 14% 12%, rgba(255, 92, 168, .2), transparent 28%),
    radial-gradient(circle at 86% 10%, rgba(84, 199, 255, .24), transparent 30%),
    linear-gradient(155deg, #071123 0%, #122f58 52%, #060a14 100%);
}

.game { width: min(100%, 560px); }
.topbar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bottombar { grid-template-columns: .7fr 1.2fr 1.2fr .7fr 1.1fr; }
.board-wrap { isolation: isolate; }
.board-wrap:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.metric strong { color: var(--metric-color, var(--ink)); }
.metric.coins strong { color: #ffe169; }
.game-logo { font-size: clamp(1.25rem, min(6.4dvw, 4.9dvh), 2.55rem); }
.panel { width: min(100%, 410px); }
.panel h2 { margin: 14px 0 0; color: var(--yellow); }
.panel h3 { margin: 11px 0 0; color: var(--blue); font-size: 1rem; }
.instructions { margin-top: 14px; text-align: left; }
.instructions[hidden] { display: none; }
.instructions-card { margin-top: 10px; padding: 11px 12px; border: 1px solid rgba(84,199,255,.3); border-radius: 8px; background: rgba(84,199,255,.08); }
.instructions-card p { margin-top: 5px !important; font-size: .86rem; }
.instructions-card ul { margin: 6px 0 0; padding-left: 20px; color: var(--muted); font-size: .84rem; font-weight: 750; line-height: 1.42; }
.home-scores { max-height: 22dvh; }
.home-scores li { display: flex; justify-content: space-between; gap: 8px; }
.score-form[hidden], .home-scores[hidden], .instructions[hidden] { display: none !important; }
.small-button:disabled { cursor: not-allowed; filter: grayscale(.7); opacity: .48; }
.small-button.action { background: linear-gradient(180deg,#fff3a8,#ffd166 58%,#b86f08); }
.small-button.special { background: linear-gradient(180deg,#bdf2ff,#54c7ff 56%,#1266ff); color:#071225; }
.toast { z-index: 8; max-width: 88%; padding: 8px 12px; border-radius: 8px; background: rgba(5,10,24,.82); }
.toast.pop { animation-duration: 1500ms; }
.arcade-store-arcade-button { position: sticky; top: 0; z-index: 5; }

@media (max-width: 430px) {
  .topbar { gap: 4px; }
  .topbar .metric { padding-inline: 5px; }
  .topbar .metric span { font-size: .61rem; }
  .bottombar { grid-template-columns: repeat(5, minmax(0,1fr)); gap: 4px; }
}