/* DSQ Arcade — 10-year anniversary easter egg. Throwaway code, fully
   self-contained: no Tailwind, no build step, nothing shared with the app.

   Palette and type are lifted from the DSQ Technology brand (Discovery navy +
   Discovery Orange, Inter for UI text). Bangers stays for display headings —
   the arcade personality the brand book has no equivalent for. The legacy
   --neon-* names are kept as brand aliases so every game module reskins with
   this file alone. */

@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* ---- DSQ brand ---- */
    --dsq-navy: #012639;
    --dsq-navy-2: #075177;
    --dsq-ink: #12151E;
    --dsq-paper: #FAFAFA;
    --dsq-orange: #FE531D;
    --dsq-orange-soft: #FD7D54;
    --dsq-coral: #F16562;
    --dsq-sun: #F6C526;
    --dsq-sky: #60A4EE;
    --dsq-mint: #83E2B5;
    --dsq-lime: #66CC00;
    --dsq-magenta: #E5004C;
    --dsq-grape: #49166D;

    /* ---- Arcade aliases (what the games ask for) ---- */
    --brick: var(--dsq-navy);
    --brick-dark: var(--dsq-ink);
    --neon-pink: var(--dsq-coral);
    --neon-green: var(--dsq-mint);
    --neon-cyan: var(--dsq-sky);
    --neon-yellow: var(--dsq-sun);
    --neon-orange: var(--dsq-orange);
    --neon-purple: var(--dsq-magenta);

    --font-display: 'Bangers', cursive;
    --font-ui: 'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    height: 100%;
    background: var(--brick-dark);
    font-family: var(--font-display);
    color: var(--dsq-paper);
    overflow-x: hidden;
}

/* Navy alley wall, all CSS gradients (no image assets) */
body {
    background:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(254, 83, 29, .20), transparent),
        radial-gradient(ellipse 60% 40% at 80% 100%, rgba(96, 164, 238, .12), transparent),
        repeating-linear-gradient(0deg, transparent 0 27px, rgba(0, 0, 0, .35) 27px 30px),
        repeating-linear-gradient(90deg, transparent 0 57px, rgba(0, 0, 0, .25) 57px 60px),
        var(--brick);
}

#arcade {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 16px 48px;
}

/* ---------- Header ---------- */

.arcade-header { text-align: center; user-select: none; }

.arcade-logo {
    width: clamp(40px, 6vw, 62px);
    height: auto;
    display: block;
    margin: 0 auto 10px;
    filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, .55));
}

.arcade-title {
    font-size: clamp(52px, 9vw, 96px);
    letter-spacing: 4px;
    line-height: .95;
    transform: rotate(-2.5deg);
    background: linear-gradient(100deg,
        var(--dsq-orange) 0%, var(--dsq-orange-soft) 25%, var(--dsq-sun) 55%,
        var(--dsq-mint) 78%, var(--dsq-sky) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(3px 3px 0 #000) drop-shadow(6px 6px 0 rgba(254, 83, 29, .35));
}

.arcade-subtitle {
    margin-top: 10px;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: clamp(10px, 2vw, 13px);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--dsq-sun);
    text-shadow: 2px 2px 0 #000;
    transform: rotate(1deg);
}

.arcade-subtitle .tag {
    display: inline-block;
    padding: 4px 11px;
    border: 2px dashed var(--dsq-sun);
    border-radius: 4px;
    transform: rotate(-1.5deg);
    background: rgba(0, 0, 0, .35);
}

/* ---------- Hub: game cards ---------- */

.game-grid {
    margin-top: 36px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 280px));
    gap: 22px;
    justify-content: center;
    max-width: 1000px;
}

.game-card {
    position: relative;
    border: 3px solid var(--card-hue, var(--dsq-orange));
    border-radius: 14px;
    background: rgba(0, 0, 0, .45);
    padding: 18px 18px 16px;
    cursor: pointer;
    text-align: left;
    color: var(--dsq-paper);
    font-family: inherit;
    transition: transform .12s ease, box-shadow .12s ease;
    box-shadow: 4px 4px 0 #000;
}

.game-card:nth-child(odd) { transform: rotate(-1.2deg); }
.game-card:nth-child(even) { transform: rotate(1.2deg); }

.game-card:hover, .game-card:focus-visible {
    transform: rotate(0deg) scale(1.05);
    box-shadow: 0 0 22px var(--card-hue, var(--dsq-orange)), 4px 4px 0 #000;
    outline: none;
    z-index: 2;
}

.game-card .game-emoji {
    font-size: 44px;
    filter: drop-shadow(2px 2px 0 #000);
}

.game-card .game-title {
    margin-top: 6px;
    font-size: 30px;
    letter-spacing: 2px;
    color: var(--card-hue, var(--dsq-orange));
    text-shadow: 2px 2px 0 #000;
}

.game-card .game-tagline {
    margin-top: 2px;
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(250, 250, 250, .75);
    min-height: 26px;
}

.game-card .game-hiscore {
    margin-top: 10px;
    display: inline-block;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .06em;
    padding: 3px 8px;
    border-radius: 4px;
    background: var(--card-hue, var(--dsq-orange));
    color: var(--dsq-ink);
    transform: rotate(-1deg);
}

/* ---------- Game stage ---------- */

/* One knob for the whole stage. Height-driven so the 2:3 board fills a desktop
   viewport instead of sitting at a fixed 480px; 92vw still governs on phones.
   main.js sizes the canvas backing store to match, so it stays crisp. */
.stage {
    --stage-w: min(92vw, 54vh, 720px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stage-bar {
    width: var(--stage-w);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    gap: 10px;
}

.stage-title {
    font-size: 28px;
    letter-spacing: 2px;
    text-shadow: 2px 2px 0 #000;
    transform: rotate(-1deg);
    white-space: nowrap;
    overflow: hidden;
}

canvas#game-canvas {
    width: var(--stage-w, min(480px, 92vw));
    aspect-ratio: 2 / 3;
    border: 4px solid #000;
    border-radius: 10px;
    box-shadow: 0 0 0 3px var(--card-hue, var(--dsq-orange)), 8px 8px 0 rgba(0, 0, 0, .6);
    background: var(--dsq-ink);
    touch-action: none;
    cursor: pointer;
}

.stage-hint {
    max-width: var(--stage-w, min(480px, 92vw));
    margin-top: 12px;
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: rgba(250, 250, 250, .55);
    text-align: center;
}

/* ---------- Buttons ---------- */

.spray-btn {
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 2px;
    color: var(--dsq-ink);
    background: var(--dsq-sun);
    border: 3px solid #000;
    border-radius: 8px;
    padding: 6px 14px;
    cursor: pointer;
    box-shadow: 3px 3px 0 #000;
    transform: rotate(-1deg);
    transition: transform .1s ease;
    user-select: none;
}

.spray-btn:hover { transform: rotate(1deg) scale(1.07); }
.spray-btn:active { transform: scale(.95); box-shadow: 1px 1px 0 #000; }
.spray-btn:disabled { opacity: .55; cursor: default; transform: none; }
.spray-btn.alt { background: var(--dsq-sky); }
.spray-btn.muted { background: #555; color: #ccc; }
.spray-btn.danger { background: var(--dsq-coral); color: var(--dsq-ink); }

/* ---------- Wall of Fame (leaderboard) ---------- */

.wall-of-fame {
    margin-top: 40px;
    width: min(1100px, 96vw);
    text-align: center;
}

.fame-boards {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    justify-content: center;
    align-items: flex-start;
}

.fame-board {
    flex: 1 1 300px;
    max-width: 360px;
    min-width: 280px;
}

.fame-board-title {
    font-size: 26px;
    letter-spacing: 2px;
    color: var(--dsq-sky);
    text-shadow: 2px 2px 0 #000;
    transform: rotate(-1deg);
    margin-top: 10px;
}

.fame-board:nth-child(2) .fame-board-title { color: var(--dsq-orange); transform: rotate(1deg); }
.fame-board:nth-child(3) .fame-board-title { color: var(--dsq-sun); }

.fame-table .fame-mine td {
    background: rgba(254, 83, 29, .22);
    box-shadow: inset 0 0 12px rgba(254, 83, 29, .35);
}

.fame-remove { margin-top: 20px; font-size: 14px; }

.fame-title {
    font-size: clamp(34px, 5vw, 48px);
    letter-spacing: 3px;
    transform: rotate(-1.5deg);
    color: var(--dsq-sun);
    text-shadow: 3px 3px 0 #000, 6px 6px 0 rgba(254, 83, 29, .4);
}

.fame-empty {
    margin-top: 14px;
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: rgba(250, 250, 250, .5);
}

.fame-table {
    margin: 10px auto 0;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 6px;
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: 12px;
}

.fame-table th {
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 2px;
    color: rgba(250, 250, 250, .8);
    text-shadow: 2px 2px 0 #000;
    padding: 2px 8px;
}

.fame-table td {
    background: rgba(0, 0, 0, .45);
    border-top: 2px solid var(--card-hue, var(--dsq-orange));
    border-bottom: 2px solid var(--card-hue, var(--dsq-orange));
    padding: 7px 8px;
    text-align: left;
}

.fame-table td:first-child {
    border-left: 2px solid var(--card-hue, var(--dsq-orange));
    border-radius: 8px 0 0 8px;
}

.fame-table td:last-child {
    border-right: 2px solid var(--card-hue, var(--dsq-orange));
    border-radius: 0 8px 8px 0;
}

/* Initials are the identity on the wall — give them arcade weight. */
.fame-table .fame-who {
    font-weight: 700;
    letter-spacing: .14em;
    white-space: nowrap;
}

.fame-table .fame-game { color: var(--card-hue, var(--dsq-orange)); }
.fame-table .fame-score { text-align: right; color: var(--dsq-sun); font-weight: 700; }
.fame-table .fame-when { text-align: right; color: rgba(250, 250, 250, .5); white-space: nowrap; }

/* ---------- Score offer banner + initials entry ---------- */

.score-offer {
    width: var(--stage-w, min(480px, 92vw));
    margin-top: 14px;
    padding: 12px 14px;
    border: 3px dashed var(--card-hue, var(--dsq-orange));
    border-radius: 10px;
    background: rgba(0, 0, 0, .55);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
}

.score-offer-text {
    font-size: 20px;
    letter-spacing: 1px;
    color: var(--card-hue, var(--dsq-orange));
    text-shadow: 2px 2px 0 #000;
    width: 100%;
}

.score-offer-note {
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: 10px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: rgba(250, 250, 250, .55);
    width: 100%;
}

/* Three big slots, arcade cabinet style. */
.initials-input {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 30px;
    line-height: 1;
    letter-spacing: .42em;
    text-align: center;
    text-transform: uppercase;
    text-indent: .42em; /* offsets the trailing letter-space so glyphs sit centered */
    width: 5.2em;
    padding: 8px 6px;
    color: var(--dsq-sun);
    background: rgba(0, 0, 0, .5);
    border: 3px solid var(--dsq-sun);
    border-radius: 8px;
    caret-color: var(--dsq-orange);
}

.initials-input:focus {
    outline: none;
    border-color: var(--dsq-orange);
    box-shadow: 0 0 14px rgba(254, 83, 29, .55);
}

.initials-input::placeholder { color: rgba(250, 250, 250, .28); }

.initials-error {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--dsq-coral);
    width: 100%;
}

/* ---------- Footer ---------- */

.arcade-footer {
    margin-top: 34px;
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(250, 250, 250, .4);
    text-align: center;
    line-height: 2;
}

.arcade-footer .footer-mark {
    width: 16px;
    height: auto;
    vertical-align: -3px;
    margin: 0 4px;
    opacity: .75;
}

.arcade-footer .heart { color: var(--dsq-orange); }