/* CariPromos Live. Scoped under .arcade so nothing leaks into the site. */

.arcade {
    --arc-night: #040B22;
    --arc-stage: #0A1E52;
    --arc-deck: #0B2A6E;
    --arc-deep: #004AAD;
    --arc-sky: #38B6FF;
    --arc-ink: #FFFFFF;
    --arc-muted: #B4C4E4;
    --arc-bulb: #FFE08A;
    --arc-radius: 18px;
    font-family: 'Poppins', system-ui, sans-serif;
    color: var(--arc-ink);
    background:
        radial-gradient(ellipse 80% 55% at 50% 0%, #16449E 0%, rgba(22, 68, 158, 0) 70%),
        linear-gradient(180deg, var(--arc-stage) 0%, var(--arc-night) 60%);
    background-color: var(--arc-night);
    min-height: 100vh;
    min-height: 100dvh;
    padding: 0 16px 64px;
    line-height: 1.55;
}
/* Base resets carry zero specificity (:where), so every component class
   below overrides them without !important. */
:where(.arcade) *, :where(.arcade) *::before, :where(.arcade) *::after { box-sizing: border-box; }
:where(.arcade) :is(h1, h2, h3) { margin: 0; }
/* The site wraps every page in .cp-hub, whose heading colours are dark. This
   loads after the site bundle, so it wins at equal specificity. */
.arcade :is(h1, h2, h3) { font-family: inherit; color: inherit; letter-spacing: normal; }
:where(.arcade) p { margin: 0; }
:where(.arcade) a { color: var(--arc-sky); text-underline-offset: 3px; }
:where(.arcade) a:hover { color: #FFFFFF; }
:where(.arcade) :focus-visible { outline: 3px solid var(--arc-sky); outline-offset: 3px; border-radius: 999px; }
.arc-sr {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.arc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 12px 26px; border: 0; border-radius: 999px;
    background: var(--arc-sky); color: #04122E !important; text-decoration: none;
    font: 700 1rem/1.2 'Poppins', system-ui, sans-serif; cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.15) inset;
    transition: transform .18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
    overflow: visible;
}
.arc-btn:hover {
    transform: translateY(-2px);
    background: #4ec2ff;
    box-shadow: 0 8px 26px rgba(56, 182, 255, 0.5), 0 2px 8px rgba(0, 0, 0, 0.25);
}
.arc-btn:active { transform: translateY(1px); box-shadow: 0 2px 8px rgba(56, 182, 255, .3); }
.arc-btn-quiet {
    background: rgba(4, 11, 34, .65); color: var(--arc-ink) !important;
    border: 2px solid rgba(255, 255, 255, .5);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
.arc-btn-quiet:hover {
    background: rgba(56, 182, 255, .18); border-color: var(--arc-sky);
    box-shadow: 0 6px 22px rgba(56, 182, 255, .35), 0 2px 8px rgba(0, 0, 0, .3);
    color: #FFFFFF !important; transform: translateY(-2px);
}

/* ------------------------------------------------------ locked game page */

.arc-locked {
    position: fixed;
    inset: 0;
    z-index: 1050;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    padding: 32px 20px;
    margin: 0;
    box-sizing: border-box;
    background:
        radial-gradient(ellipse 90% 60% at 50% 20%, #16449E 0%, rgba(22, 68, 158, 0) 75%),
        radial-gradient(circle at 50% 85%, rgba(56, 182, 255, 0.12) 0%, transparent 60%),
        linear-gradient(180deg, var(--arc-stage) 0%, var(--arc-night) 100%);
    background-color: var(--arc-night);
    -webkit-overflow-scrolling: touch;
}

.arc-locked-card {
    max-width: 480px;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 24px;
    margin: auto;
    position: relative;
    z-index: 2;
}

.arc-locked-card .arc-cab-screen {
    width: 200px;
    height: 150px;
    margin: 0 auto;
    border: 3px solid rgba(56, 182, 255, 0.4);
    border-radius: var(--arc-radius);
    background: radial-gradient(circle at 50% 40%, #0d2868 0%, #05143a 100%);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5), 0 0 28px rgba(56, 182, 255, 0.25);
    display: grid;
    place-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.arc-locked-card .arc-cab-screen:hover {
    transform: scale(1.03);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.6), 0 0 36px rgba(56, 182, 255, 0.35);
}

.arc-locked-card h1 {
    font-size: 2.3rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #FFFFFF !important;
    margin: 6px 0 0 0;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

.arc-locked-when {
    color: var(--arc-bulb) !important;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: 0.3px;
    text-shadow: 0 0 16px rgba(255, 224, 138, 0.4);
    margin: 0;
}

.arc-gate-notice {
    color: var(--arc-muted);
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 2px 0 6px 0;
}

.arc-gate-notice p {
    color: inherit;
    margin: 0;
}

.arc-locked-card .arc-btn {
    min-width: 180px;
    margin-top: 6px;
}

.arc-locked-card .arc-btn-link {
    color: var(--arc-sky) !important;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    margin-top: 8px;
    opacity: 0.8;
    transition: opacity 0.2s ease, text-decoration 0.2s ease, color 0.2s ease;
}

.arc-locked-card .arc-btn-link:hover {
    opacity: 1;
    color: #FFFFFF !important;
    text-decoration: underline;
}

/* ------------------------------------------------------------ game page */

.arc-game {
    position: fixed; inset: 0; z-index: 1050; min-height: 0; padding: 0;
    display: flex; flex-direction: column; overflow: hidden;
    -webkit-user-select: none; user-select: none;
    /* No pan starts on the game, so a drag cannot pull the page down and
       reload it in the middle of a run. A panel that scrolls pans inside
       itself (engine.js sets that) and keeps the pan to itself. */
    touch-action: none;
}
html:has(.arc-game) { overscroll-behavior: none; }
.arc-bar {
    flex: 0 0 auto; height: 52px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    background: rgba(4, 11, 34, .85); border-bottom: 1px solid rgba(56, 182, 255, .25);
}
.arc-bar-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 8px 0 4px; color: var(--arc-ink) !important; text-decoration: none; font-weight: 600; transition: color .2s ease; }
.arc-bar-back:hover { color: #FFFFFF !important; }
.arc-bar-back::before { display: none; }
.arc-bar-title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arc-bar-brand {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    letter-spacing: 2px;
}
.arc-bar-brand-name {
    color: #FFFFFF; font: 800 .92rem 'Poppins', system-ui, sans-serif;
    letter-spacing: 1.5px;
    text-decoration: none;
    transition: color .2s ease;
}
.arc-bar-brand-name:hover {
    color: var(--arc-sky, #38B6FF);
}
.arc-bar-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 999px;
    background: #00C853; color: #FFFFFF;
    font: 800 .68rem 'Poppins', system-ui, sans-serif;
    letter-spacing: 1px; line-height: 1;
}
.arc-bar-badge-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #FFFFFF;
    animation: arc-pulse 1.4s ease-in-out infinite;
}
@keyframes arc-pulse {
    0%, 100% { opacity: 0.35; transform: scale(0.85); }
    50% { opacity: 1; transform: scale(1.15); }
}
.arc-sound {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1.5px solid transparent;
    cursor: pointer;
    font: 600 .82rem 'Poppins', system-ui, sans-serif;
    letter-spacing: .02em;
    transition: all .2s ease;
}
.arc-sound[aria-pressed="false"] {
    background: rgba(220, 53, 69, .15);
    border-color: #dc3545;
    color: #ff5c6c;
}
.arc-sound[aria-pressed="false"]:hover {
    background: rgba(220, 53, 69, .28);
    border-color: #ff6b7b;
    color: #ffffff;
}
.arc-sound[aria-pressed="true"] {
    background: var(--arc-sky);
    border-color: var(--arc-sky);
    color: #04122E;
}
.arc-sound[aria-pressed="true"]:hover {
    filter: brightness(1.1);
}
.arc-stage {
    position: relative; flex: 1 1 auto; min-height: 0; display: grid; place-items: center;
}
/* engine.js sizes the canvas to fill the stage: all of it on a desktop, its
   full width on a phone. */
#arc-canvas { display: block; width: 300px; height: 620px; touch-action: none; }
@media (max-width: 520px) {
    .arc-bar {
        position: relative; z-index: 3; height: 48px; padding: 0 10px;
        background: rgba(4, 11, 34, .95); border-bottom: 1px solid rgba(56, 182, 255, .25);
    }
    .arc-bar-brand-name { font-size: .78rem; letter-spacing: 1.8px; }
    .arc-bar-badge { padding: 2px 7px; font-size: .6rem; }
    .arc-bar-back { font-size: .85rem; padding: 0 4px; min-height: 38px; }
    .arc-sound { min-height: 34px; padding: 4px 10px; font-size: .75rem; }
}

/* The Big Wheel: the homepage wheel (hub.scss styles it) over the canvas,
   centred where the game puts it. live.js sets the custom properties. */
/* Two classes, so these beat hub.scss's .cp-hub .cp-wheel-wrap rules. */
.arcade .arc-wheel {
    position: absolute; z-index: 0; left: var(--arc-wheel-x, 50%); top: var(--arc-wheel-y, 50%); margin: 0;
    width: var(--arc-wheel-size, 300px); transform: translate(-50%, -50%);
}
.arcade .arc-wheel[hidden] { display: none; }
.arcade .arc-wheel .cp-wheel { width: 100%; }

/* Self-contained Arcade wheel reveal: restores the clean portrait package prize card inside disc */
.arcade .arc-wheel .cp-wheel-reveal-bg {
    position: absolute;
    inset: -12%;
    background-size: cover;
    background-position: center;
    filter: blur(14px) saturate(1.4) brightness(.65);
    transform: none;
}
.arcade .arc-wheel .cp-wheel-reveal-card {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 52%;
    max-width: none;
    aspect-ratio: 2 / 3;
    display: block;
    overflow: hidden;
    border-radius: 12px;
    border-radius: 3.5cqi;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: #041C3D;
    padding: 0;
    color: #FFFFFF;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
    box-shadow: 0 2.5cqi 6cqi rgba(0, 0, 0, 0.55);
    transform: translate(-50%, -50%) scale(.85);
    opacity: 0;
    transition: transform .5s cubic-bezier(.2, .75, .2, 1) .15s, opacity .3s ease .15s;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.arcade .arc-wheel .cp-wheel-reveal.is-open .cp-wheel-reveal-card {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}
.arcade .arc-wheel .cp-wheel-reveal-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.arcade .arc-wheel .cp-wheel-reveal-cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 24px 8px 10px;
    padding: 8cqi 2.4cqi 3cqi;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    gap: 2cqi;
    text-align: center;
    background: linear-gradient(to top, rgba(0, 10, 30, 0.9) 0%, rgba(0, 10, 30, 0.5) 65%, transparent 100%);
}
.arcade .arc-wheel .cp-wheel-reveal-cap b,
.arcade .arc-wheel .cp-wheel-reveal-name {
    font-family: var(--cp-display, 'Poppins', sans-serif);
    font-weight: 700;
    font-size: 15px;
    font-size: clamp(14px, 4.6cqi, 24px);
    line-height: 1.2;
    color: #FFFFFF;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    margin: 0;
    display: block;
    -webkit-line-clamp: unset;
}
.arcade .arc-wheel .cp-wheel-reveal-cta {
    display: inline-block;
    font-family: var(--cp-display, 'Poppins', sans-serif);
    font-weight: 700;
    font-size: 12px;
    font-size: clamp(11px, 3.4cqi, 16px);
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    color: #031B3F;
    background: #FFFFFF;
    border-radius: 999px;
    padding: 5px 12px;
    padding: 1.6cqi 3cqi;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: transform .18s ease;
}
.arcade .arc-wheel .cp-wheel-reveal-cta:hover {
    transform: scale(1.05);
    background: #FFFFFF;
    color: #031B3F;
}

/* The end block under a phone's wheel (live.js places it). Its two parts
   share one grid cell, so the block keeps the taller one's height and the
   wheel does not move: the Spin prompt shows before the spin (is-spin); the
   prize's note, Share my score, Play again, and a small link for businesses
   show once the reveal opens (is-done). */
.arc-end { position: absolute; z-index: 1; left: 0; right: 0; display: grid; padding: 0 16px; text-align: center; font-size: 1.1rem; }
.arc-end[hidden] { display: none; }
.arc-end > div { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity .4s ease; }
.arc-end.is-spin .arc-end-spin, .arc-end.is-done .arc-end-done { visibility: visible; opacity: 1; }
.arc-end-kicker { color: var(--arc-sky); font-weight: 700; font-size: 1rem; }
.arc-end-title { margin-bottom: 12px; font-size: 1.45rem; font-weight: 800; line-height: 1.25; }
.arc-end-note { max-width: 26em; margin: 0 auto 10px; color: #E4ECFA; }
.arc-end-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 10px; }
.arc-end .arc-btn { min-height: 44px; padding: 10px 22px; }
/* Small text links: the end block's For businesses link and the title's rules link. */
.arc-end-biz, .arc-rules-link { display: inline-block; padding: 12px 6px; font-size: .9rem; font-weight: 600; }
/* On a short phone the title's rules link is one slim line and its kicker
   drops, so the title panel stays below the sign. */
@media (max-height: 600px) { .arc-panel .arc-rules-link { padding: 2px 6px; } .arc-panel .arc-roomy-short { display: none; } }

/* DOM panels over the canvas: the title, the wheel's prompt, results, and
   messages. A panel stands on the stage like the end block under a phone's
   wheel, with no card: white type on the studio, a sky kicker, and sky
   buttons, centred at the stage's foot. A landscape desktop sets it in the
   column right of the game instead (below). */
.arc-panel {
    position: absolute; z-index: 1; left: 50%; bottom: 16px; transform: translateX(-50%);
    width: min(460px, 100%); max-height: calc(100% - 32px); overflow: auto;
    touch-action: none; overscroll-behavior: contain;
    padding: 0 16px 36px; color: #FFFFFF; text-align: center;
}
.arc-panel[hidden] { display: none; }
/* The panel takes focus itself when it shows on page load (engine.js); it is
   not a Tab stop, so it draws no ring. Its controls' rings are sky blue. */
.arcade .arc-panel:focus { outline: none; }
.arcade .arc-panel :is(a, button):focus-visible { outline: 3px solid var(--arc-sky); outline-offset: 3px; border-radius: 999px; }
/* Lines a short screen drops so the panel covers less of the stage. */
@media (max-height: 760px) { .arc-panel .arc-roomy { display: none; } }
.arc-panel :is(h2, p) { text-wrap: balance; }
.arc-panel h2 { font-size: 1.3rem; font-weight: 800; line-height: 1.2; margin-bottom: 8px; color: #FFFFFF; }
.arc-panel p { color: #E4ECFA; margin-bottom: 10px; }
.arc-panel .arc-kicker {
    display: block;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: var(--arc-sky) !important;
    font-weight: 700;
    font-size: .92rem;
    line-height: 1.3;
    margin-bottom: 6px;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.arc-panel .arc-big { font-size: 2.2rem; font-weight: 800; color: #FFFFFF; line-height: 1.1; margin-bottom: 8px; }
.arc-panel .arc-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: 14px; padding: 4px 12px 16px; overflow: visible; }
.arc-panel .arc-btn { min-height: 48px; }
/* A dark fill keeps a quiet button readable over the audience. */
.arc-panel .arc-btn-quiet { background: rgba(4, 11, 34, .65); border: 2px solid rgba(255, 255, 255, .5); box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.arc-panel .arc-btn-rules { background: rgba(4, 11, 34, .65) !important; border: 2px solid rgba(255, 255, 255, .65) !important; box-shadow: 0 4px 14px rgba(0, 0, 0, .25) !important; color: #FFFFFF !important; font-weight: 700; }
.arc-panel .arc-btn-rules:hover { background: rgba(56, 182, 255, .22) !important; border-color: var(--arc-sky) !important; box-shadow: 0 8px 26px rgba(56, 182, 255, .45), 0 2px 8px rgba(0, 0, 0, .3) !important; color: #FFFFFF !important; transform: translateY(-2px) !important; }
.arc-panel .arc-btn-rules:active { transform: translateY(1px) !important; box-shadow: 0 2px 8px rgba(56, 182, 255, .25) !important; }
/* The title's two buttons stack at full width; other panels' buttons share
   a row when they fit. */
.arc-panel .arc-actions-title { flex-direction: column; align-items: center; gap: 8px; }
.arc-panel .arc-actions-title .arc-btn { width: 100%; max-width: 340px; }
.arc-panel .arc-actions-title .arc-btn:first-child { min-height: 52px; font-size: 1.12rem; }
.arc-panel .arc-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 4px 0 8px; padding: 0; list-style: none; }
.arc-panel .arc-chips li { padding: 4px 12px; border-radius: 999px; background: rgba(56, 182, 255, .16); color: #E4ECFA; font-weight: 600; font-size: .85rem; }
.arc-panel .arc-business { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(180, 196, 228, .25); }
.arc-panel .arc-business p { margin-bottom: 6px; }
.arc-panel .arc-business a { display: inline-block; padding: 10px 0; font-weight: 600; }
/* Phones: panel text large enough to read at arm's length. */
@media (max-width: 520px) {
    .arc-panel { width: 100%; bottom: 8px; padding: 0 16px 14px; font-size: 1rem; overflow: visible !important; }
    .arc-panel h2 { font-size: 1.35rem; line-height: 1.25; margin-bottom: 6px; }
    .arc-panel .arc-kicker { font-size: .88rem; padding: 0 !important; margin-bottom: 5px; }
    .arc-panel p { font-size: .95rem; line-height: 1.4; margin-bottom: 8px; }
    .arc-panel .arc-actions { margin-top: 10px; padding: 4px 8px 10px; gap: 8px; }
    .arc-panel .arc-actions-title { gap: 8px; }
    .arc-panel .arc-actions-title .arc-btn:first-child { min-height: 48px; font-size: 1.05rem; }
    .arc-panel .arc-actions-title .arc-btn { min-height: 44px; }
}
/* A short phone drops these lines too, and sets the title's heading and
   buttons smaller, so the panel stays clear of the title's marquee. */
@media (max-width: 520px) and (max-height: 720px) { .arc-panel .arc-roomy-phone { display: none; } }
@media (max-width: 520px) and (max-height: 600px) {
    .arc-panel h2 { font-size: 1.2rem; margin-bottom: 4px; }
    .arc-panel .arc-actions { margin-top: 8px; }
    .arc-panel .arc-actions-title .arc-btn { min-height: 40px; }
    .arc-panel .arc-actions-title .arc-btn:first-child { min-height: 46px; }
}
/* A landscape desktop sets the panel in the column right of the game, from
   stage column 560, centred on row 285 (live.js lays the game out to match).
   engine.js gives the stage's unit (--arc-u) and origin (--arc-ox,
   --arc-oy) in pixels, and the panel's type follows the unit. */
.arc-game.is-wide .arc-panel {
    left: calc(var(--arc-ox) + 560 * var(--arc-u)); top: calc(var(--arc-oy) + 285 * var(--arc-u)); bottom: auto;
    width: calc(360 * var(--arc-u)); max-height: calc(460 * var(--arc-u)); transform: translateY(-50%);
    padding: 0 20px 36px 0; text-align: center; font-size: clamp(15px, calc(12.5 * var(--arc-u)), 24px);
    overflow: visible !important;
}
/* Title screen on desktop: centered vertically with the promo marquee card, with a 20px+ clean gap */
.arc-game.is-wide .arc-panel.is-title {
    left: calc(var(--arc-ox) + 520 * var(--arc-u));
    top: calc(var(--arc-oy) + 230 * var(--arc-u));
    transform: translateY(-50%);
    width: calc(375 * var(--arc-u));
    padding: 0 16px 0 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* Title screen on mobile/portrait: 20px gap directly under the marquee box */
.arc-game:not(.is-wide) .arc-panel.is-title {
    top: calc(var(--arc-oy) + 290 * var(--arc-u));
    bottom: auto;
    max-height: calc(100% - (var(--arc-oy) + 295 * var(--arc-u)));
    padding: 0 16px 20px;
}
@media (max-width: 520px) {
    .arc-panel.is-title .arc-kicker { margin-bottom: 5px; }
    .arc-panel.is-title h2 { font-size: 1.3rem; margin-bottom: 5px; }
    .arc-panel.is-title p { margin-bottom: 8px; }
    .arc-panel.is-title .arc-actions-title { gap: 8px; margin-top: 8px; }
}
.arc-game.is-wide .arc-panel h2 { font-size: 1.7em; }
.arc-game.is-wide .arc-panel .arc-kicker { font-size: 1em; }
.arc-game.is-wide .arc-panel .arc-big { font-size: 2.6em; }
.arc-game.is-wide .arc-panel .arc-chips li { font-size: .85em; }
.arc-game.is-wide .arc-panel .arc-btn { min-height: 3em; padding: .7em 1.6em; font-size: 1.05em; }
.arc-game.is-wide .arc-panel :is(.arc-actions, .arc-chips) { justify-content: center; overflow: visible !important; }
.arc-game.is-wide .arc-panel .arc-actions-title { flex-direction: column; align-items: center; gap: 10px; overflow: visible !important; }
.arc-game.is-wide .arc-panel .arc-actions-title .arc-btn { width: 100%; max-width: 320px; white-space: nowrap; }
.arc-game.is-wide .arc-panel .arc-actions-title .arc-btn:first-child { min-height: 3.2em; font-size: 1.2em; }
.arc-noscript { padding: 24px; text-align: center; }

/* A phone on its side is too short for the stage, so the game asks for
   portrait. engine.js pauses on the same media query. */
.arc-rotate { display: none; }
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
    .arc-rotate {
        position: fixed; inset: 0; z-index: 2000; display: grid; place-content: center; justify-items: center; gap: 8px;
        padding: 16px; text-align: center; background: var(--arc-night);
    }
    .arc-rotate::before { content: ""; width: 40px; height: 68px; margin-bottom: 8px; border: 4px solid var(--arc-sky); border-radius: 10px; }
    .arc-rotate strong { font-size: 1.3rem; font-weight: 800; line-height: 1.25; }
    .arc-rotate span { color: var(--arc-muted); }
    .arc-panel { display: none !important; }
}

/* ------------------------------------------------------- rules and claim */

.arc-doc, .arc-claim { padding-top: 56px; }
.arc-doc-body { max-width: 720px; margin: 0 auto; }
.arc-doc-body h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 14px; }
.arc-doc-body h2 { font-size: 1.25rem; font-weight: 700; margin: 34px 0 10px; }
.arc-doc-body p, .arc-doc-body li { color: #E4ECFA; margin-bottom: 10px; }
.arc-doc-body ul, .arc-doc-body ol { padding-left: 1.3em; }
.arc-doc-table { width: 100%; border-collapse: collapse; margin: 6px 0 10px; }
.arc-doc-table th, .arc-doc-table td { padding: 10px 12px 10px 0; border-top: 1px solid rgba(180, 196, 228, .25); text-align: left; vertical-align: top; color: #E4ECFA; }
.arc-doc-table thead th { border-top: 0; color: var(--arc-muted); font-weight: 600; }
/* Phones: the prize table's long cells do not fit three columns. Each prize
   becomes a block, with its number and value labelled beneath it. */
@media (max-width: 520px) {
    .arc-prizes thead { display: none; }
    .arc-prizes tr, .arc-prizes td { display: block; }
    .arc-prizes tr { padding: 12px 0; border-top: 1px solid rgba(180, 196, 228, .25); }
    .arc-prizes td { padding: 0; border: 0; }
    .arc-prizes td:first-child { margin-bottom: 6px; font-weight: 600; color: var(--arc-ink); }
    .arc-prizes td[data-label]::before { content: attr(data-label) ": "; color: var(--arc-muted); }
}
.arc-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem; word-break: break-all; color: var(--arc-bulb) !important; }
.arc-moments { white-space: pre-wrap; max-height: 320px; overflow: auto; padding: 12px; border-radius: 12px; background: rgba(0, 0, 0, .35); }

.arc-claim-card {
    width: 100%; max-width: 520px; margin: 0 auto; padding: 28px; border-radius: 24px;
    background: #FFFFFF; color: #0B1B3A; box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
    box-sizing: border-box; overflow: hidden;
}
.arc-claim-card h1 { font-size: 1.7rem; font-weight: 800; margin: 4px 0 10px; letter-spacing: -0.01em; }
.arc-claim-card p { color: #3A4A66; margin-bottom: 12px; }
.arc-claim-card a { color: var(--arc-deep); }
.arc-claim-card .arc-btn { background: var(--arc-deep); color: #FFFFFF !important; }
.arc-claim-card .arc-btn-quiet { background: transparent; color: var(--arc-deep) !important; box-shadow: inset 0 0 0 2px var(--arc-deep); }
.arc-claim-prize { font-size: .95rem; }
.arc-claim-prize strong { color: var(--arc-deep); }
.arc-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 8px; width: 100%; box-sizing: border-box; }
.arc-form label { font-weight: 600; margin-top: 8px; }
.arc-form input[type="text"], .arc-form input[type="tel"] {
    width: 100%; max-width: 100%; box-sizing: border-box;
    min-height: 48px; padding: 10px 14px; border-radius: 12px; border: 2px solid #C9D6EC;
    font: 500 1rem 'Poppins', system-ui, sans-serif; color: #0B1B3A; background: #FFFFFF;
}
.arc-input-group { display: flex; align-items: stretch; width: 100%; max-width: 100%; box-sizing: border-box; }
.arc-prefix {
    display: flex; align-items: center; padding: 0 14px; min-height: 48px;
    border: 2px solid #C9D6EC; border-right: none; border-radius: 12px 0 0 12px;
    background: #F0F4FA; font: 600 1rem 'Poppins', system-ui, sans-serif; color: #0B1B3A;
    white-space: nowrap; flex: 0 0 auto; box-sizing: border-box;
}
.arc-input-group input[type="tel"] { border-radius: 0 12px 12px 0 !important; flex: 1 1 0%; min-width: 0; width: 100%; box-sizing: border-box; }
.arc-form input:focus { outline: 3px solid var(--arc-sky); outline-offset: 1px; border-color: var(--arc-deep); }
.arc-form input[aria-invalid="true"] { border-color: #C62839; }
.arc-optional { font-weight: 400; color: #5A6B85; }
.arc-scroll { max-height: 320px; overflow: auto; margin-bottom: 12px; }
.arc-scroll .arc-doc-table { margin: 0; }
.arc-check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500 !important; cursor: pointer; width: 100%; max-width: 100%; box-sizing: border-box; }
.arc-check input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--arc-deep); flex: 0 0 20px; }
.arc-check span { flex: 1 1 0%; min-width: 0; line-height: 1.45; word-break: normal; overflow-wrap: break-word; }
.arc-error { color: #B01E2E !important; font-weight: 600; font-size: .92rem; margin: 0 !important; }
.arc-form .arc-btn { margin-top: 14px; justify-self: start; }
.arc-small { font-size: .88rem; margin-top: 16px; overflow-wrap: break-word; }
.arc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

@media (max-width: 520px) {
    .arc-claim { padding: 20px 12px 48px; }
    .arc-claim-card { padding: 22px 16px; border-radius: 20px; }
    .arc-claim-card h1 { font-size: 1.5rem; }
    .arc-form .arc-btn { width: 100%; justify-self: stretch; }
    .arc-actions .arc-btn { width: 100%; text-align: center; }
}