/*
 * The Arcade (CLAUDE.md "Arcade"): cabinets from Views/Shared/_ArcadeCabinet.cshtml, run by /web/js/arcade/arcade.js.
 * Ported from design/platform-pages/games-round4.html. Root .g2-arc; Trade-Up's DOM board .g2-arc-tu; the focus-mode
 * layer every game is played in .g2-arc-focus; the dev board (/dev/arcade) .g2-arcboard. The 420 x 600
 * stage is scaled to the screen by arcade.js; canvases stay LTR.
 */

.g2-arc {
    --g2-arc-tone: #2f7bff;
    --g2-arc-accent: #8ab8ff;
    --g2-arc-ink: #031029;
    --g2-arc-lime: #bcd767;
    --g2-arc-mono: var(--g2-font-mono, "JetBrains Mono", ui-monospace, Consolas, monospace);
    --g2-arc-fly-x: 38%;
    border-radius: 20px;
    padding: 10px;
    background: linear-gradient(160deg, color-mix(in srgb, var(--g2-arc-tone) 30%, #0d0f13), #07080b 60%);
    border: 1px solid color-mix(in srgb, var(--g2-arc-tone) 40%, transparent);
    color: var(--g2-text, #eef0f3);
    min-width: 0;
}

.g2-arc--rush { --g2-arc-tone: #2f7bff; --g2-arc-accent: #8ab8ff; --g2-arc-ink: #031029; }
.g2-arc--trade { --g2-arc-tone: #6b5cf0; --g2-arc-accent: #f0ad4e; --g2-arc-ink: #241400; }
.g2-arc--pinball { --g2-arc-tone: #e60012; --g2-arc-accent: #ff8a93; --g2-arc-ink: #2b0004; }
.g2-arc--raid { --g2-arc-tone: #8fb84a; --g2-arc-accent: #bcd767; --g2-arc-ink: #14200a; }

[dir="rtl"] .g2-arc { --g2-arc-fly-x: -38%; }

/* ---- top bar: game name | ★ finds, level, score */
.g2-arc__top {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 0 4px 8px;
    font-family: var(--g2-arc-mono);
    font-size: 11px;
    letter-spacing: .12em;
    color: var(--g2-arc-accent);
    text-transform: uppercase;
}
.g2-arc__label, .g2-arc__hud { white-space: nowrap; }
.g2-arc__label { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.g2-arc__hud { display: inline-flex; gap: 10px; }
.g2-arc__top b { color: var(--g2-text, #eef0f3); font-variant-numeric: tabular-nums; }
.g2-arc__finds { color: var(--g2-gold, #f4b63d); display: inline-block; }
.g2-arc__finds b { color: var(--g2-gold, #f4b63d); }
.g2-arc__finds.is-bump { animation: g2-arc-bump .5s ease; }
@keyframes g2-arc-bump { 40% { transform: scale(1.5); } }

/* ---- the screen and its 420 x 600 stage */
.g2-arc__screen {
    position: relative;
    aspect-ratio: 420 / 600;
    border-radius: 14px;
    overflow: hidden;
    background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--g2-arc-tone) 32%, transparent), transparent 65%), #000;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    outline: none;
}
.g2-arc.is-playing .g2-arc__screen { touch-action: none; }
.g2-arc__screen:focus-visible { box-shadow: 0 0 0 2px var(--g2-arc-accent); }
.g2-arc__stage { position: absolute; left: 0; top: 0; width: 420px; height: 600px; transform-origin: 0 0; }
.g2-arc__canvas { display: block; width: 420px; height: 600px; }

/* ---- overlay menus (Play / Continue / Paused / Game over) */
.g2-arc__overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: grid;
    place-items: center;
    padding: 16px;
    text-align: center;
    overflow: auto;
    background: rgba(4, 5, 8, .74);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    scrollbar-width: thin;
}
.g2-arc__overlay[hidden] { display: none; }
.g2-arc__box { display: grid; gap: 10px; justify-items: center; max-width: 290px; width: 100%; }
.g2-arc__kicker { font-family: var(--g2-arc-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--g2-arc-accent); }
.g2-arc__title { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--g2-text, #eef0f3); text-transform: none; text-wrap: balance; }
.g2-arc__title--score { font-size: 30px; font-variant-numeric: tabular-nums; }
.g2-arc__text { margin: 0; font-size: 13px; line-height: 1.5; color: #c9ced4; text-wrap: pretty; }
.g2-arc__near { margin: 0; font-size: 13px; color: var(--g2-text, #eef0f3); }
.g2-arc__newbest { font-family: var(--g2-arc-mono); font-size: 12px; letter-spacing: .1em; color: var(--g2-gold, #f4b63d); }

.g2-arc__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; }
.g2-arc__stats div { border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; padding: 6px 4px; background: rgba(255, 255, 255, .03); }
.g2-arc__stats b { display: block; color: var(--g2-text, #eef0f3); font-size: 16px; font-variant-numeric: tabular-nums; }
.g2-arc__stats span { font-size: 11px; color: var(--g2-muted, #9aa1a9); }

.g2-arc__btns { display: grid; gap: 8px; width: 100%; }
.g2-arc__btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.g2-arc__btn {
    height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: transparent;
    color: var(--g2-text, #eef0f3);
    font: inherit;
    font-weight: 600;
    font-size: 13.5px;
    text-transform: none;
    cursor: pointer;
    padding: 0 10px;
}
.g2-arc__btn:hover { background: rgba(255, 255, 255, .06); }
.g2-arc__btn--main { height: 46px; border: 0; background: var(--g2-arc-accent); color: var(--g2-arc-ink); font-weight: 800; font-size: 15px; }
.g2-arc__btn--main:hover { background: color-mix(in srgb, var(--g2-arc-accent) 86%, #fff); }
.g2-arc__btn:focus-visible, .g2-arc__chip:focus-visible, .g2-arc__pause:focus-visible { outline: 2px solid var(--g2-arc-lime); outline-offset: 3px; }

.g2-arc__chips { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.g2-arc__chip {
    font-size: 11px;
    border-radius: 99px;
    padding: 3px 8px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    color: var(--g2-text, #eef0f3);
    text-decoration: none;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
a.g2-arc__chip:hover { border-color: var(--g2-arc-accent); color: #fff; }

.g2-arc__spinner {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, .15);
    border-top-color: var(--g2-arc-accent);
    animation: g2-arc-spin .8s linear infinite;
}
@keyframes g2-arc-spin { to { transform: rotate(360deg); } }

.g2-arc__pause {
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
    z-index: 4;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, .2);
    background: rgba(0, 0, 0, .45);
    color: #fff;
    font-weight: 800;
    font-size: 12px;
    cursor: pointer;
}
.g2-arc__pause[hidden] { display: none; }

/* ---- store drops: slam into the game's safe zone, then fly into the ★ finds counter */
.g2-arc__drop {
    --g2-arc-drop: var(--g2-arc-lime);
    position: absolute;
    left: 12px;
    right: 12px;
    top: 80%;
    z-index: 3;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px 12px;
    border-radius: 14px;
    background: linear-gradient(120deg, rgba(18, 21, 27, .96), rgba(30, 35, 44, .96));
    border: 1.5px solid var(--g2-arc-drop);
    box-shadow: 0 12px 34px -8px var(--g2-arc-drop);
    color: #fff;
    pointer-events: none;
    opacity: 0;
    overflow: hidden;
    translate: 0 -50%;
}
.g2-arc__drop[data-kind="fact"] { --g2-arc-drop: #8ab8ff; }
.g2-arc__drop[data-kind="explore"] { --g2-arc-drop: #f4b63d; }
.g2-arc__drop[data-kind="deal"] { --g2-arc-drop: #ff6b5b; }
.g2-arc__drop::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .4) 46%, transparent 62%);
    transform: translateX(-130%);
}
.g2-arc__drop.is-in { animation: g2-arc-slam 3.2s cubic-bezier(.2, .9, .3, 1.15) forwards; }
.g2-arc__drop.is-in::after { animation: g2-arc-shine .8s .2s ease forwards; }
@keyframes g2-arc-slam {
    0% { opacity: 0; transform: scale(1.8) rotate(-5deg); }
    9% { opacity: 1; transform: scale(.95) rotate(1deg); }
    13% { transform: scale(1.03) rotate(0); }
    17%, 80% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: translate(var(--g2-arc-fly-x), -420%) scale(.2); }
}
@keyframes g2-arc-shine { to { transform: translateX(130%); } }
.g2-arc__drop-icon {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--g2-arc-drop);
    color: #0b0d10;
    display: grid;
    place-items: center;
    font: 800 11px var(--g2-arc-mono);
    box-shadow: 0 0 18px var(--g2-arc-drop);
}
.g2-arc__drop-copy { min-width: 0; }
.g2-arc__drop i { display: block; font-style: normal; font: 700 11px var(--g2-arc-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--g2-arc-drop); }
.g2-arc__drop b { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.g2-arc__flash {
    --g2-arc-flash-y: 80%;
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    box-shadow: inset 0 0 70px 12px var(--g2-arc-accent);
    background: radial-gradient(circle at 50% var(--g2-arc-flash-y), color-mix(in srgb, var(--g2-arc-accent) 30%, transparent), transparent 45%);
}
.g2-arc__flash.is-in { animation: g2-arc-flash .7s ease; }
@keyframes g2-arc-flash { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }

/* ---- level banner / "New best!" */
.g2-arc__banner {
    position: absolute;
    left: 0;
    right: 0;
    top: 38%;
    translate: 0 -50%;
    z-index: 3;
    text-align: center;
    pointer-events: none;
    opacity: 0;
}
.g2-arc__banner b { display: block; font-size: 30px; font-weight: 800; color: #fff; text-shadow: 0 4px 20px rgba(0, 0, 0, .6); }
.g2-arc__banner span { font-size: 13px; color: var(--g2-arc-accent); font-weight: 600; }
.g2-arc__banner.is-in { animation: g2-arc-banner 1.8s ease forwards; }
@keyframes g2-arc-banner { 0% { opacity: 0; transform: scale(.8); } 15%, 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.05); } }

/* ---- Counter Rush's shape buttons (coarse pointers only) */
.g2-arc__pad { display: none; gap: 6px; padding-top: 8px; touch-action: none; }
.g2-arc__pad.is-shown { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; direction: ltr; }
.g2-arc__pad button {
    height: 52px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: radial-gradient(circle at 40% 35%, #20242c, #0d0f13);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
}
.g2-arc__pad svg { width: 24px; height: 24px; fill: none; stroke-width: 3; }
.g2-arc__pad button:active { transform: scale(.95); }

/* ---- Keyboard Raid's phone keyboard (keyboard-raid.js): 3 letter rows, keys 52px tall; a touch presses the closest key */
.g2-arc__pad.g2-arc__pad--keys.is-shown { grid-auto-flow: row; grid-auto-columns: auto; gap: 6px; padding: 8px 6px; user-select: none; -webkit-user-select: none; }
.g2-arc__keyrow { display: flex; justify-content: center; gap: 5px; }
.g2-arc__pad--keys .g2-arc__key {
    flex: 0 1 calc((100% - 45px) / 10);
    min-width: 0;
    height: 52px;
    padding: 0;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: linear-gradient(180deg, #1c2026, #121418);
    box-shadow: 0 3px 0 #0a0b0d;
    font: 700 17px var(--g2-arc-mono);
    color: var(--g2-text, #eef0f3);
}
.g2-arc__pad--keys .g2-arc__key.is-needed { border-color: rgba(255, 255, 255, .85); box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 0 14px rgba(255, 255, 255, .25), 0 3px 0 #0a0b0d; }
.g2-arc__pad--keys .g2-arc__key.is-pressed { transform: translateY(2px); background: var(--g2-arc-lime); color: #14200a; box-shadow: 0 1px 0 #0a0b0d; }

/* ---- FOCUS MODE (arcade.js): the game in a full-viewport layer, above the header, the chat button and the DEV menu.
   Phones: the whole screen; from 768px a big centred window (at most 90vh). arcade.js sizes the cabinet (fitFocus). */
.g2-arc-focus {
    position: fixed;
    inset: 0;
    z-index: 2147483600;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    background: rgba(5, 6, 9, .97);
    color: var(--g2-text, #eef0f3);
    overscroll-behavior: contain;
    touch-action: manipulation;
}
.g2-arc-focus[hidden] { display: none; }
.g2-arc-focus__bar { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; }
.g2-arc-focus__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 12px var(--g2-font-mono, "JetBrains Mono", ui-monospace, Consolas, monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--g2-muted, #9aa1a9); }
.g2-arc-focus__close {
    display: grid;
    flex: none;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 12px;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    cursor: pointer;
}
.g2-arc-focus__close:hover { background: rgba(255, 255, 255, .12); }
.g2-arc-focus__close:focus-visible { outline: 2px solid var(--g2-arc-lime, #bcd767); outline-offset: 2px; }
.g2-arc-focus__frame { display: flex; flex: 1 1 auto; align-items: flex-start; justify-content: center; min-height: 0; padding: 0 6px 6px; overflow: hidden; }
@media (min-width: 768px) {
    .g2-arc-focus__frame { align-items: center; max-height: 90vh; margin-block: auto; padding: 0 16px 16px; }
}
.g2-arc.is-focus { flex: none; width: 100%; max-width: 100%; }
@media (max-width: 767px) { .g2-arc.is-focus { padding: 6px; border-radius: 16px; } }
/* The phone keyboard spans the whole screen width, not the scaled cabinet's. */
.g2-arc-focus .g2-arc__pad--keys.is-shown {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding-inline: max(6px, env(safe-area-inset-left, 0px)) max(6px, env(safe-area-inset-right, 0px));
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
}

/* ---- Trade-Up (a DOM board; follows the page's direction) */
.g2-arc-tu {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    /* One column that never grows past the stage: a long "You hold" name or price used to widen it and spill right. */
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 16px;
    overflow: hidden;
    color: #fff;
    background: radial-gradient(120% 70% at 70% 0%, rgba(240, 173, 78, .22), transparent 60%), linear-gradient(#1a1326, #0b0912);
}
.g2-arc-tu__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-inline-end: 40px;
    font: 700 12px var(--g2-arc-mono);
    color: #f0ad4e;
    letter-spacing: .08em;
}
.g2-arc-tu > * { min-width: 0; }
.g2-arc-tu__top > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g2-arc-tu__hearts { flex: none; color: #ff6b8a; letter-spacing: 2px; font-size: 15px; }
.g2-arc-tu__hold {
    display: flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    color: #fff;
    text-decoration: none;
}
.g2-arc-tu__hold[href] { cursor: pointer; }
.g2-arc-tu__hold[href]:hover { border-color: rgba(240, 173, 78, .6); }
.g2-arc-tu__mini {
    flex: none;
    width: 34px;
    height: 44px;
    border-radius: 5px;
    background: linear-gradient(160deg, hsl(var(--g2-arc-hue, 200) 50% 40%), hsl(var(--g2-arc-hue, 200) 55% 16%));
    border-top: 6px solid #1f34a0;
}
.g2-arc-tu__hold-name { flex: 1 1 auto; min-width: 0; }
.g2-arc-tu__hold small { display: block; font: 700 11px var(--g2-arc-mono); color: #f0ad4e; letter-spacing: .1em; }
/* "You hold": one line. */
.g2-arc-tu__hold b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g2-arc-tu__hold-value { flex: none; margin-inline-start: auto; text-align: end; font-weight: 800; font-size: 16px; white-space: nowrap; }
.g2-arc-tu__hold-value small { color: var(--g2-muted, #9aa1a9); }
.g2-arc-tu__middle { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-content: center; min-width: 0; }
.g2-arc-tu__question { text-align: center; font-weight: 700; font-size: 17px; }
/* Two equal columns that never grow past the stage (a long title or price used to push the grid wider). */
.g2-arc-tu__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; min-width: 0; }
.g2-arc-tu__card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    gap: 6px;
    padding: 10px;
    border: 2px solid rgba(255, 255, 255, .12);
    border-radius: 16px;
    background: rgba(255, 255, 255, .04);
    color: #fff;
    font: inherit;
    text-align: start;
    text-transform: none;
    cursor: pointer;
    transition: transform .15s, border-color .2s;
}
.g2-arc-tu__card:hover { transform: translateY(-3px); border-color: rgba(240, 173, 78, .6); }
.g2-arc-tu__card:focus-visible { outline: 2px solid var(--g2-arc-lime); outline-offset: 3px; }
.g2-arc-tu__cover {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: end;
    min-width: 0;
    height: 200px;
    padding: 10px;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(165deg, hsl(var(--g2-arc-hue, 200) 55% 42%), hsl(calc(var(--g2-arc-hue, 200) + 40) 60% 14%));
}
.g2-arc-tu__cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .18) 50%, transparent 60%); pointer-events: none; }
.g2-arc-tu__art { position: absolute; inset: 24px 8px 44px; width: calc(100% - 16px); height: calc(100% - 68px); object-fit: contain; }
.g2-arc-tu__band {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 20px;
    padding: 3px 8px;
    background: #1f34a0;
    font-weight: 800;
    font-size: 11px;
    line-height: 14px;
    letter-spacing: .08em;
}
.g2-arc-tu__band.is-ps5 { background: #fff; color: #0b2fa0; }
/* Product titles: 2 lines at most, a long word breaks. */
.g2-arc-tu__cover b {
    position: relative;
    font-size: 16px;
    line-height: 1.15;
    max-height: 2.3em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .5);
    overflow: hidden;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.g2-arc-tu__condition { font: 700 11px var(--g2-arc-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--g2-muted, #9aa1a9); }
.g2-arc-tu__condition.is-used { color: #f0ad4e; }
.g2-arc-tu__price { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 800; font-size: 20px; color: #f0ad4e; font-variant-numeric: tabular-nums; white-space: nowrap; }
.g2-arc-tu__card.is-win { border-color: #7be8a8; box-shadow: 0 0 0 3px rgba(123, 232, 168, .25); }
.g2-arc-tu__card.is-lose { border-color: #ff6b5b; opacity: .75; }
.g2-arc-tu__card.is-dealt { animation: g2-arc-deal .35s ease both; }
.g2-arc-tu__card.is-dealt + .g2-arc-tu__card.is-dealt { animation-delay: .07s; }
@keyframes g2-arc-deal { from { opacity: 0; transform: translateY(20px) scale(.96); } }
.g2-arc-tu__foot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.g2-arc-tu__timer { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.g2-arc-tu__timer i { display: block; height: 100%; background: #f0ad4e; transform-origin: left; }
.g2-arc-tu[dir="rtl"] .g2-arc-tu__timer i { transform-origin: right; }
.g2-arc-tu__ladder { display: flex; gap: 3px; align-items: center; min-width: 0; }
.g2-arc-tu__ladder i { flex: 1 1 0; min-width: 0; height: 8px; border-radius: 3px; background: rgba(255, 255, 255, .1); }
.g2-arc-tu__ladder i.is-on { background: #f0ad4e; }
.g2-arc-tu__ladder em { margin-inline-start: 6px; font: 700 11px var(--g2-arc-mono); font-style: normal; color: #f0ad4e; white-space: nowrap; }

/* ---- reduced motion: drops just fade, no slam / flash / shine / bump */
@keyframes g2-arc-fade { 0% { opacity: 0; } 8%, 85% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .g2-arc__drop.is-in { animation: g2-arc-fade 3s linear forwards; }
    .g2-arc__drop.is-in::after, .g2-arc__flash.is-in, .g2-arc__finds.is-bump { animation: none; }
    .g2-arc__banner.is-in { animation: g2-arc-fade 1.8s linear forwards; }
    .g2-arc-tu__card.is-dealt { animation: none; }
    .g2-arc-tu__card, .g2-arc-tu__card:hover { transition: none; transform: none; }
    .g2-arc__spinner { animation-duration: 2.4s; }
}

/* ---- the dev board (/dev/arcade) */
.g2-arcboard { max-width: 1260px; margin: 0 auto; padding: 24px 16px 64px; color: #c9ced4; }
.g2-arcboard__head { display: grid; gap: 8px; justify-items: start; padding-bottom: 20px; }
.g2-arcboard__eyebrow { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--g2-arc-lime, #bcd767); font-weight: 600; }
.g2-arcboard__title { margin: 0; font-size: clamp(22px, 3vw, 30px); color: var(--g2-text, #eef0f3); text-transform: none; }
.g2-arcboard__lead { margin: 0; color: var(--g2-muted, #9aa1a9); max-width: 86ch; }
.g2-arcboard__reset {
    height: 36px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid #2a2f37;
    background: transparent;
    color: var(--g2-text, #eef0f3);
    font: inherit;
    font-size: 13px;
    text-transform: none;
    cursor: pointer;
}
.g2-arcboard__reset:hover { background: var(--g2-raised, #1a1d22); }
.g2-arcboard__grid { display: grid; gap: 20px; }
@media (min-width: 1000px) { .g2-arcboard__grid { grid-template-columns: 1fr 1fr; } }
.g2-arcboard__slot {
    display: grid;
    gap: 16px;
    align-content: start;
    padding: 16px;
    border-radius: 24px;
    background: var(--g2-surface, #14171c);
    border: 1px solid var(--g2-line, #23272e);
}
@media (min-width: 640px) { .g2-arcboard__slot { grid-template-columns: minmax(0, 330px) 1fr; } }
.g2-arcboard__about { display: grid; gap: 8px; align-content: start; padding-top: 4px; }
.g2-arcboard__kicker { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--g2-muted, #9aa1a9); }
.g2-arcboard__name { margin: 0; font-size: 24px; font-weight: 800; color: var(--g2-text, #eef0f3); text-transform: none; }
.g2-arcboard__controls { font-size: 12px; color: var(--g2-dim, #868d96); }
.g2-arcboard__json { font-size: 12px; color: var(--g2-arc-lime, #bcd767); word-break: break-all; }