/* Shared arcade chrome: intentionally independent from each game's visual system. */
.arcade-keycap {
    display: inline-flex;
    min-width: 2.8em;
    min-height: 1.7em;
    align-items: center;
    justify-content: center;
    padding: .16em .48em;
    border: 1px solid rgba(181, 151, 232, .88);
    border-radius: 4px;
    color: #ffe17b;
    background: linear-gradient(180deg, #30224d, #1b1431);
    box-shadow: 0 3px 0 #090715, inset 0 1px 0 rgba(255, 255, 255, .12);
    font: 700 1rem/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
    vertical-align: middle;
    white-space: nowrap;
}

body.arcade-site p:has(> .arcade-keycap),
body.arcade-site .arcade-key-hint {
    color: #c4bfd6;
    font: 400 1rem/1.6 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-align: center;
}

.arcade-chrome-nav {
    position: fixed;
    z-index: 50;
    inset: 0 0 auto;
    min-height: 64px;
    border-bottom: 1px solid #27272a;
    background: rgba(10, 10, 10, .9);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: #f4f4f5;
    font: 600 14px/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.arcade-chrome-nav *,
.arcade-chrome-footer * {
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.arcade-chrome-nav .arcade-chrome-inner {
    display: flex;
    width: min(100%, 1152px);
    min-height: 64px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 auto;
    padding: 0 16px;
}
.arcade-chrome-brand {
    display: inline-block;
    min-width: 0;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .05em;
    line-height: 1.15;
    text-decoration: none;
    white-space: normal;
}
.arcade-chrome-brand span { color: #e50914; white-space: nowrap; }
.arcade-chrome-links {
    display: flex;
    align-items: center;
    gap: clamp(10px, 2.5vw, 24px);
}
.arcade-chrome-nav a:not(.arcade-chrome-book) {
    color: #f4f4f5;
    text-decoration: none;
    transition: color 180ms ease;
}
.arcade-chrome-nav a:not(.arcade-chrome-book):hover { color: #e50914; }
.arcade-chrome-link {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
}
.arcade-chrome-nav a.arcade-chrome-arcade {
    display: inline-flex;
    min-height: 34px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border: 1px solid rgba(76, 232, 255, .72);
    border-radius: 5px;
    color: #4ce8ff;
    background: rgba(76, 232, 255, .08);
    box-shadow: 0 0 7px rgba(76, 232, 255, .28), inset 0 0 8px rgba(76, 232, 255, .08);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-decoration: none;
    text-shadow: 0 0 6px rgba(76, 232, 255, .6);
    white-space: nowrap;
    animation: arcade-nav-glow 2.2s ease-in-out infinite alternate;
}
.arcade-chrome-nav a.arcade-chrome-arcade:hover {
    border-color: #fff;
    color: #fff;
    box-shadow: 0 0 12px rgba(76, 232, 255, .7), 0 0 24px rgba(76, 232, 255, .35);
}
@keyframes arcade-nav-glow {
    from {
        box-shadow: 0 0 6px rgba(76, 232, 255, .2), inset 0 0 5px rgba(76, 232, 255, .06);
        text-shadow: 0 0 4px rgba(76, 232, 255, .35);
    }
    to {
        box-shadow: 0 0 12px rgba(76, 232, 255, .56), 0 0 22px rgba(76, 232, 255, .2), inset 0 0 8px rgba(76, 232, 255, .12);
        text-shadow: 0 0 9px rgba(76, 232, 255, .88);
    }
}
.arcade-chrome-book {
    display: inline-flex;
    min-height: 32px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 6px;
    color: #fff;
    background: #e50914;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color 180ms ease;
}
.arcade-chrome-book:hover { background: #b80710; }
.arcade-chrome-nav a:focus-visible,
.arcade-chrome-footer a:focus-visible {
    outline: 2px solid #e50914;
    outline-offset: 4px;
    border-radius: 3px;
}
.arcade-site > main,
body.arcade-site.is-hype-page > main { padding-top: 80px; }
.arcade-site > .arcade-chrome-footer {
    position: relative;
    z-index: 11;
    display: block;
    margin: 0;
    padding: 40px 16px;
    border-top: 1px solid #18181b;
    color: #4b5563;
    background: #09090b;
    font: 400 12px/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-align: center;
}
.arcade-chrome-footer p { margin: 0; }
.arcade-chrome-socials {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-bottom: 16px;
    font-size: 18px;
}
.arcade-chrome-footer a {
    color: #71717a;
    text-decoration: none;
    transition: color 180ms ease;
}
.arcade-chrome-footer .arcade-social-facebook:hover { color: #3b82f6; }
.arcade-chrome-footer .arcade-social-tiktok:hover,
.arcade-chrome-footer .arcade-social-merch:hover { color: #fff; }
.arcade-chrome-footer .arcade-social-instagram:hover { color: #ec4899; }
.arcade-chrome-footer .arcade-social-youtube:hover { color: #dc2626; }
.arcade-chrome-socials svg {
    display: block;
    width: 1em;
    height: 1em;
    fill: currentColor;
}
.arcade-chrome-socials .arcade-social-merch {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.arcade-chrome-footer .arcade-footer-logo {
    display: inline-block;
    margin-bottom: 16px;
    border-radius: 50%;
}
.arcade-chrome-footer .arcade-footer-logo img {
    display: block;
    width: 64px;
    height: 64px;
    margin: 0;
    object-fit: contain;
    opacity: .8;
    transition: filter 180ms ease;
}
.arcade-chrome-footer .arcade-footer-logo:hover img,
.arcade-chrome-footer .arcade-footer-logo:focus-visible img {
    filter: brightness(0) saturate(100%) invert(14%) sepia(99%) saturate(5905%) hue-rotate(351deg) brightness(94%) contrast(114%);
}
.arcade-chrome-footer .arcade-footer-logo:focus-visible {
    outline: 2px solid #e50914;
    outline-offset: 4px;
}
.arcade-footer-meta p + p { margin-top: 4px; }
.arcade-footer-meta .arcade-footer-legal { margin-top: 8px; }
.arcade-footer-meta .arcade-footer-legal a:hover { color: #a1a1aa; }

/* Keep game titles pixel-styled, but large enough to scan on phone screens. */
body.arcade-site:not(.arcade-home) #page-title {
    font-family: "ADJMN Press Start", "Press Start 2P", "Courier New", monospace;
    font-size: clamp(1.3rem, 4.5vw, 2.15rem);
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: -.045em;
    text-wrap: balance;
}
body.arcade-site :is(#game-title, #runner-title, #cable-title, #yeti-title, #result-title) {
    font-family: "ADJMN Press Start", "Press Start 2P", "Courier New", monospace;
    font-size: clamp(1.15rem, 3.5vw, 1.55rem);
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: -.04em;
    text-wrap: balance;
}
body.arcade-site:not(.arcade-home) main :is(
    .subtitle,
    .game-subtitle,
    .breakout-subtitle,
    .slice-subtitle,
    .couple-subtitle,
    .simon-tagline,
    .puzzle-tagline
) {
    margin: 4px auto 14px;
    max-width: 68ch;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: clamp(.86rem, 2vw, 1rem);
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: .055em;
    text-align: center;
    text-wrap: balance;
}
body.arcade-site:not(.arcade-home) main #sudoku-mode-tagline {
    margin: 4px auto 14px;
    max-width: 68ch;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: clamp(.86rem, 2vw, 1rem);
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: .055em;
    text-align: center;
    text-wrap: balance;
}
body.arcade-site:not(.arcade-home) main .arcade-game-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: min(100%, 900px);
    margin: 0 auto 18px;
    padding-top: 0;
    padding-bottom: 0;
    overflow-anchor: none;
    text-align: center;
}
body.arcade-site:not(.arcade-home) main .arcade-game-heading .arcade-game-description {
    max-width: 70ch;
    margin: 0;
    color: #f1edf8;
    font: 500 1rem/1.6 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body.arcade-site:not(.arcade-home) main .arcade-game-heading h1 {
    margin: 0;
}
body.arcade-site:not(.arcade-home) main .arcade-game-heading .arcade-game-tagline {
    max-width: 68ch;
    margin: 0;
    color: #4ce8ff;
    font: 800 clamp(.9rem, 2vw, 1rem)/1.5 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: .055em;
    text-transform: uppercase;
    text-wrap: balance;
}
body.arcade-site:not(.arcade-home) main .arcade-control-topline {
    justify-content: flex-end;
}
@media (max-width: 639px) {
    .arcade-chrome-link { display: none; }
    .arcade-chrome-links { gap: 8px; }
}
@media (min-width: 640px) {
    .arcade-chrome-brand { font-size: 20px; }
    .arcade-chrome-book { padding: 8px 16px; font-size: 14px; line-height: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .arcade-chrome-nav *,
    .arcade-chrome-footer * { transition: none !important; }
    .arcade-chrome-nav .arcade-chrome-arcade { animation: none !important; }
}

/* Shared game-window frame. Keep the play UI inside the red outline and the
   description / control hints below it on every arcade page. */
body.arcade-site main .arcade-game-window {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    overflow-anchor: none;
    min-height: clamp(31rem, 57vh, 40rem);
    min-height: clamp(31rem, 57svh, 40rem);
    margin: 0 auto;
    padding: clamp(12px, 2.5vw, 22px);
    border: 3px solid #e73558;
    border-radius: 12px;
    background:
        repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 4px),
        radial-gradient(ellipse at top, #281a49, #100d22 72%);
    box-shadow: 0 0 24px rgba(239,48,73,.28), inset 0 0 24px rgba(0,0,0,.32);
}
body.arcade-site main.arcade-has-game-watermark {
    isolation: isolate;
}
body.arcade-site main.arcade-has-game-watermark::before {
    position: fixed;
    z-index: 0;
    top: var(--arcade-watermark-y, 50vh);
    left: var(--arcade-watermark-x, 50vw);
    width: var(--arcade-watermark-size, 220px);
    height: var(--arcade-watermark-size, 220px);
    content: "";
    pointer-events: none;
    background: rgba(76, 232, 255, .22);
    opacity: .3;
    transform: translate(-50%, -50%) rotate(var(--arcade-watermark-rotation, 0deg));
    -webkit-mask: url("/adj-logo-circle-optimized.svg") center / contain no-repeat;
    mask: url("/adj-logo-circle-optimized.svg") center / contain no-repeat;
}
body.arcade-site main .arcade-game-window > [hidden] {
    display: none !important;
}
body.arcade-site main .arcade-game-window > .game-result-panel:not([hidden]) {
    flex: 1 0 auto;
}
body.arcade-site main .arcade-game-window :is(
    .sound-toggle,
    .couple-sound-toggle,
    .simon-sound,
    .slice-sound-button,
    [id="sound-toggle"]
) {
    display: none !important;
}
body.arcade-site main .arcade-game-window > .arcade-control-topline:has(> .sound-toggle:only-child),
body.arcade-site main .arcade-game-window > .arcade-control-topline:has(> .couple-sound-toggle:only-child),
body.arcade-site main .arcade-game-window > .arcade-control-topline:has(> .simon-sound:only-child),
body.arcade-site main .arcade-game-window > .arcade-control-topline:has(> .slice-sound-button:only-child),
body.arcade-site main .arcade-game-window > .arcade-control-topline:has(> [id="sound-toggle"]:only-child) {
    display: none;
}
body.arcade-site main .arcade-game-window > :is(
    .puzzle-start-card,
    .word-find-start,
    .start-panel,
    .simon-start,
    .puzzle-play-area,
    .word-find-play-area,
    .game-screen,
    .screen.active,
    .breakout-stage,
    .flapper-stage,
    .swatter-stage,
    .thrower-stage,
    .gear-stage,
    .yeti-playfield,
    .slice-play-area,
    .game-content
) {
    flex: 1 1 auto;
}
body.arcade-site main .arcade-game-window > :is(
    .puzzle-start-card,
    .word-find-start,
    .start-panel,
    .simon-start
) {
    align-content: center;
}
body.arcade-site main .arcade-game-notes {
    display: grid;
    gap: 7px;
    width: min(100%, 900px);
    margin: 10px auto 22px;
    color: #d4cde3;
    font: 500 .9rem/1.55 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-align: center;
    text-wrap: balance;
}
body.arcade-site main .arcade-game-notes .arcade-game-description {
    max-width: 70ch;
    margin: 0 auto;
    color: #f1edf8;
    font: 500 1rem/1.6 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body.arcade-site main .game-hall-link {
    margin: 20px 0 0;
    text-align: center;
}
body.arcade-site main .game-hall-link a {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 10px 18px;
    border: 2px solid #fff2ac;
    border-radius: 5px;
    color: #211630;
    background: linear-gradient(180deg, #fff0a1, #e5b943);
    box-shadow: 0 4px 0 #79591d, 0 0 18px rgba(255, 225, 123, .28);
    font: 700 1rem/1.25 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-decoration: none;
    text-shadow: 0 1px 0 rgba(255,255,255,.4);
    transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}
body.arcade-site main .game-hall-link a span { color: #72501a; font-size: 1.1em; }
body.arcade-site main .game-hall-link a:hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #79591d, 0 0 24px rgba(255, 225, 123, .42);
}
body.arcade-site main .game-hall-link a:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #79591d;
}
body.arcade-site main .game-hall-link a:focus-visible {
    outline: 3px solid #ffe17b;
    outline-offset: 4px;
}
@media (max-width: 520px) {
    body.arcade-site main .arcade-game-window {
        min-height: 31rem;
        gap: 10px;
        padding: 12px;
    }
    body.arcade-site main .arcade-game-notes {
        margin-top: 8px;
        font-size: .88rem;
    }
}