/* ══════════════════════════════════════════════════════════════
   Arcade — shared game UI
   The playground keeps the pixel look, so these controls are built
   from the same tokens as .px-btn in cs42.css. Every game mounts the
   same bar (pause / restart / sound / help) plus an optional
   difficulty selector, so the controls sit in the same place and
   behave the same way from game to game.
   ══════════════════════════════════════════════════════════════ */

.ar-bar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 10px 14px; margin: 0 auto 14px; width: 100%;
}
.ar-group { display: flex; align-items: center; gap: 8px; }
.ar-group + .ar-group { position: relative; }
.ar-group + .ar-group::before {
    content: ''; position: absolute; left: -7px; top: 50%; transform: translateY(-50%);
    width: 1px; height: 18px; background: var(--line-2);
}

.ar-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    font-family: var(--font-px); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--fg-2); background: var(--bg-2);
    padding: 9px 12px; margin: 2px 4px 5px 2px;
    border: 0; border-radius: 0; cursor: pointer; white-space: nowrap;
    box-shadow: 0 -2px 0 0 var(--px2-edge), 0 2px 0 0 var(--px2-edge),
                -2px 0 0 0 var(--px2-edge), 2px 0 0 0 var(--px2-edge);
    filter: drop-shadow(3px 3px 0 var(--px2-shadow));
    transition: transform .08s linear, filter .08s linear, background-color .15s, color .15s;
    -webkit-font-smoothing: none;
}
.ar-btn:hover { background: var(--accent-tint); color: var(--fg); transform: translate(-1px, -1px); filter: drop-shadow(4px 4px 0 var(--px2-shadow)); }
.ar-btn:active { transform: translate(2px, 2px); filter: drop-shadow(1px 1px 0 var(--px2-shadow)); }
.ar-btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.ar-btn svg { width: 12px; height: 12px; shape-rendering: crispEdges; flex-shrink: 0; }
.ar-btn--muted { opacity: 0.55; }

/* Difficulty / mode selector */
.ar-seg { display: inline-flex; padding: 2px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.ar-seg button {
    font-family: var(--font-px); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--fg-3); background: transparent; border: 0; padding: 8px 11px; cursor: pointer;
    transition: color .15s, background-color .15s; -webkit-font-smoothing: none;
}
.ar-seg button:hover { color: var(--fg); }
.ar-seg button[aria-checked="true"] { background: var(--accent); color: var(--accent-ink); }
.ar-seg-label {
    font-family: var(--font-px); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--fg-4); margin-right: 2px;
}

/* Overlays that sit on the playfield (start, pause, help) */
.ar-overlay {
    position: absolute; inset: 0; z-index: 20;
    display: none; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; padding: 24px; text-align: center;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.ar-overlay.is-open { display: flex; }
.ar-overlay h3 {
    font-family: var(--font-px); font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--accent); margin: 0; -webkit-font-smoothing: none;
}
.ar-overlay p { font-size: 0.86rem; color: var(--fg-2); margin: 0; max-width: 30ch; line-height: 1.5; }
.ar-overlay .ar-btn { font-size: 11px; padding: 11px 16px; }

/* Controls / how-to-play list */
.ar-keys { display: grid; gap: 7px; width: 100%; max-width: 300px; text-align: left; }
.ar-key-row { display: flex; align-items: center; gap: 10px; justify-content: space-between; font-size: 0.8rem; }
.ar-key-row span:last-child { color: var(--fg-3); text-align: right; }
kbd.ar-kbd {
    font-family: var(--font-px); font-size: 9px; letter-spacing: 0.06em;
    color: var(--fg); background: var(--bg-3); padding: 5px 7px;
    box-shadow: 0 -1px 0 0 var(--line-2), 0 1px 0 0 var(--line-2), -1px 0 0 0 var(--line-2), 1px 0 0 0 var(--line-2);
    white-space: nowrap; -webkit-font-smoothing: none;
}

/* Brief messages ("Paused", "Sound off", "New best") */
.ar-toast {
    position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 12px);
    z-index: 400; pointer-events: none; opacity: 0;
    font-family: var(--font-px); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--fg); background: var(--bg-2); padding: 11px 15px;
    box-shadow: 0 -2px 0 0 var(--accent), 0 2px 0 0 var(--accent), -2px 0 0 0 var(--accent), 2px 0 0 0 var(--accent);
    transition: opacity .2s, transform .2s; -webkit-font-smoothing: none;
}
.ar-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* A canvas that scales with the page instead of sitting at a fixed size */
.ar-stage { position: relative; width: 100%; max-width: 560px; margin-inline: auto; }
.ar-stage canvas { width: 100%; height: auto; display: block; touch-action: none; }

@media (max-width: 600px) {
    .ar-bar { gap: 8px 10px; }
    .ar-btn { font-size: 9px; padding: 8px 10px; }
    .ar-btn .ar-btn-text { display: none; }
    .ar-btn svg { width: 13px; height: 13px; }
    .ar-group + .ar-group::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .ar-btn, .ar-toast { transition: none; }
}