/* ============================================================
   REDESIGN — "Arcade Cabinet" theme layer
   Loads after styles.css + retro-fx.css and reworks the whole
   visual language: bevelled panels with corner screws, retro-OS
   window cards, cartridge tiles, a title-screen hero, terminal
   footer, custom scrollbar. All on top of the existing pixel
   tokens so dark/light themes keep working.
   ============================================================ */

:root {
    --rd-shadow: #000;
    --rd-edge-light: rgba(255, 255, 255, 0.14);
    --rd-edge-dark: rgba(0, 0, 0, 0.55);
    --rd-dither: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='1' height='1' x='0' y='0' fill='%23ffffff'/%3E%3Crect width='1' height='1' x='2' y='2' fill='%23ffffff'/%3E%3C/svg%3E");
    --rd-stripes: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 8px, transparent 8px 16px);
}

[data-theme="light"] {
    --rd-shadow: #2a1e44;
    --rd-edge-light: rgba(255, 255, 255, 0.65);
    --rd-edge-dark: rgba(42, 30, 68, 0.45);
    --rd-dither: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='1' height='1' x='0' y='0' fill='%232a1e44'/%3E%3Crect width='1' height='1' x='2' y='2' fill='%232a1e44'/%3E%3C/svg%3E");
    --rd-stripes: repeating-linear-gradient(135deg, rgba(42, 30, 68, 0.05) 0 8px, transparent 8px 16px);
}

/* ---------- Global chrome: scrollbar, selection, focus ---------- */

::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: var(--pixel-bg-deep); }
::-webkit-scrollbar-thumb {
    background: var(--pixel-accent);
    border: 3px solid var(--pixel-bg-deep);
}
::-webkit-scrollbar-thumb:hover { background: var(--pixel-accent-glow); }
* { scrollbar-color: var(--pixel-accent) var(--pixel-bg-deep); }

::selection {
    background: var(--pixel-accent);
    color: #0a0e1c;
}

:focus-visible {
    outline: 2px solid var(--pixel-accent-glow);
    outline-offset: 2px;
}

/* More air between sections */
.home-stage,
.games-stage,
.community-stage,
.game-stage,
.topic-stage,
.admin-stage {
    padding-top: 46px;
}

/* ---------- Bevel recipe (shared) ---------- */

.home-feed__card,
.forum-card,
.topic-card,
.member-card,
.blog-card,
.account-panel,
.composer-card,
.auth-card,
.empty-card,
.settings-card,
.admin-card,
.admin-category,
.profile-header,
.forum-header,
.community-hero,
.page-intro {
    border: 3px solid var(--pixel-line-strong);
    border-top-color: color-mix(in srgb, var(--pixel-line-strong) 55%, #fff);
    border-left-color: color-mix(in srgb, var(--pixel-line-strong) 70%, #fff);
    border-bottom-color: color-mix(in srgb, var(--pixel-line-strong) 60%, #000);
    border-right-color: color-mix(in srgb, var(--pixel-line-strong) 60%, #000);
    border-radius: 0;
    box-shadow:
        inset 2px 2px 0 var(--rd-edge-light),
        inset -2px -2px 0 var(--rd-edge-dark),
        6px 6px 0 var(--rd-shadow);
}

/* Corner screws — little rivets like an arcade cabinet panel */
.home-feed__card,
.community-hero,
.page-intro,
.profile-header,
.forum-header {
    position: relative;
}

.home-feed__card::after,
.community-hero::after,
.page-intro::after,
.profile-header::after,
.forum-header::after {
    content: "";
    position: absolute;
    inset: 6px;
    pointer-events: none;
    background:
        linear-gradient(var(--pixel-line-strong), var(--pixel-line-strong)) top left / 5px 5px no-repeat,
        linear-gradient(var(--pixel-line-strong), var(--pixel-line-strong)) top right / 5px 5px no-repeat,
        linear-gradient(var(--pixel-line-strong), var(--pixel-line-strong)) bottom left / 5px 5px no-repeat,
        linear-gradient(var(--pixel-line-strong), var(--pixel-line-strong)) bottom right / 5px 5px no-repeat;
    opacity: 0.9;
}

/* ---------- Header: control deck ---------- */

.site-header {
    background:
        var(--rd-stripes),
        linear-gradient(180deg, color-mix(in srgb, var(--pixel-bg-deep) 86%, var(--pixel-accent)) 0%, var(--pixel-bg-deep) 60%);
    border-bottom: 3px solid var(--rd-shadow);
}

.brand__mark,
.brand__logo {
    box-shadow:
        inset 2px 2px 0 rgba(255, 255, 255, 0.35),
        inset -2px -2px 0 rgba(0, 0, 0, 0.35),
        var(--pixel-shadow);
}

.brand__copy strong {
    text-shadow: 2px 2px 0 var(--rd-shadow);
}

/* Nav as chunky console tabs */
.site-nav { gap: 10px; }

.site-nav a {
    border: 2px solid var(--pixel-line-strong);
    background: var(--pixel-panel);
    box-shadow:
        inset 1px 1px 0 var(--rd-edge-light),
        3px 3px 0 var(--rd-shadow);
    padding: 9px 14px;
}

.site-nav a:hover {
    border-color: var(--pixel-accent);
    color: var(--pixel-ink);
    transform: translate(1px, 1px);
    box-shadow:
        inset 1px 1px 0 var(--rd-edge-light),
        2px 2px 0 var(--rd-shadow);
}

.site-nav a.is-active {
    border-color: #000;
    transform: translate(2px, 2px);
    box-shadow:
        inset 2px 2px 0 rgba(0, 0, 0, 0.3),
        1px 1px 0 var(--rd-shadow);
}

/* The retro-fx underline indicator doesn't fit tabs — retire it */
.site-nav a::after { display: none; }

/* ---------- Hero: title screen ---------- */

.home-hero {
    position: relative;
    text-align: center;
    padding: 44px 28px 40px;
    margin-bottom: 34px;
    background:
        var(--rd-stripes),
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--pixel-accent) 16%, transparent), transparent 65%),
        linear-gradient(180deg, var(--pixel-panel-alt) 0%, var(--pixel-bg-deep) 100%);
    border: 3px solid var(--rd-shadow);
    box-shadow:
        inset 2px 2px 0 var(--rd-edge-light),
        inset -2px -2px 0 var(--rd-edge-dark),
        8px 8px 0 var(--rd-shadow);
    overflow: hidden;
}

/* Dither fade along the bottom of the hero, like a sky gradient in a SNES game */
.home-hero .home-hero__dither {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 26px;
    background: var(--rd-dither);
    background-size: 4px 4px;
    opacity: 0.10;
    pointer-events: none;
}

/* The marching-ants frame from retro-fx now hugs the inside */
.home-hero::before {
    inset: 8px;
    opacity: 0.4;
}

.home-hero .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.66rem;
}

.home-hero .eyebrow::before,
.home-hero .eyebrow::after {
    content: "★";
    color: var(--pixel-yellow);
    animation: rd-star-twinkle 1.6s steps(2) infinite;
}

.home-hero .eyebrow::after { animation-delay: 0.8s; }

@keyframes rd-star-twinkle {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

.home-hero h2 {
    font-family: var(--pixel-font-display);
    font-size: clamp(1.3rem, 3.6vw, 2.4rem);
    line-height: 1.4;
    margin: 14px auto 12px;
    max-width: 20ch;
    color: var(--pixel-ink);
    text-shadow:
        3px 3px 0 var(--rd-shadow),
        6px 6px 0 color-mix(in srgb, var(--pixel-accent) 65%, transparent);
}

.home-hero__glow {
    color: var(--pixel-accent);
    text-shadow:
        3px 3px 0 var(--rd-shadow),
        6px 6px 0 color-mix(in srgb, var(--pixel-magenta) 55%, transparent);
}

.home-hero p {
    font-size: 1.15rem;
    max-width: 52ch;
    margin: 0 auto;
}

.home-hero__cta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 26px;
}

.button--xl {
    font-size: 0.8rem;
    padding: 16px 28px;
}

.home-hero__cta .button--primary {
    animation: rd-cta-pulse 2.2s steps(4) infinite;
}

@keyframes rd-cta-pulse {
    0%, 100% { box-shadow: 4px 4px 0 var(--rd-shadow), 0 0 0 0 color-mix(in srgb, var(--pixel-accent) 50%, transparent); }
    50%      { box-shadow: 4px 4px 0 var(--rd-shadow), 0 0 0 6px transparent; }
}

/* ---------- Buttons: SNES bevel ---------- */

.button,
.button--primary,
.button--ghost,
.button--danger,
.button--edit {
    box-shadow:
        inset 2px 2px 0 rgba(255, 255, 255, 0.28),
        inset -2px -2px 0 rgba(0, 0, 0, 0.30),
        4px 4px 0 var(--rd-shadow);
}

.button:hover {
    box-shadow:
        inset 2px 2px 0 rgba(255, 255, 255, 0.28),
        inset -2px -2px 0 rgba(0, 0, 0, 0.30),
        2px 2px 0 var(--rd-shadow);
}

.button:active {
    box-shadow:
        inset 2px 2px 0 rgba(0, 0, 0, 0.30),
        0 0 0 var(--rd-shadow);
}

/* ---------- Inputs: terminal feel ---------- */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="search"],
input[type="number"],
select,
textarea {
    caret-color: var(--pixel-accent-glow);
}

/* ---------- Home tiles: cartridges 2.0 ---------- */

/* Bigger 2x2 grid — let the four tiles dominate the page */
.home-cube { margin-bottom: 44px; }

.home-grid {
    width: min(960px, 100%);
    gap: 22px;
}

.home-mascot { width: 48%; }

.home-tile {
    border: 3px solid #000;
    background:
        /* label ridge strip across the top, like cartridge grip lines */
        repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.30) 0 8px, transparent 8px 16px) top left / 100% 12px no-repeat,
        var(--rd-stripes),
        linear-gradient(180deg, color-mix(in srgb, var(--tile-accent, var(--pixel-accent)) 38%, #000) 0%, var(--pixel-panel) 78%);
    box-shadow:
        inset 2px 2px 0 rgba(255, 255, 255, 0.10),
        inset -2px -2px 0 rgba(0, 0, 0, 0.45),
        7px 7px 0 var(--rd-shadow);
    padding: 32px 26px 26px;
}

/* Tiles with an uploaded image: show the art again (the cartridge gradient
   above was hiding it). Keep the ridge strip + a dark gradient for legibility. */
.home-tile--has-image {
    background:
        repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.30) 0 8px, transparent 8px 16px) top left / 100% 12px no-repeat,
        linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.88) 100%),
        var(--tile-image) center / cover no-repeat;
}

.home-tile strong {
    font-size: clamp(0.95rem, 1.9vw, 1.4rem);
    text-shadow: 2px 2px 0 var(--rd-shadow);
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

/* Recolor only the kicker label, not badges/credits/buttons */
.home-tile__link > span:first-child {
    color: color-mix(in srgb, var(--tile-accent, var(--pixel-accent)) 70%, #fff);
}

.home-tile:hover {
    box-shadow:
        inset 2px 2px 0 rgba(255, 255, 255, 0.10),
        inset -2px -2px 0 rgba(0, 0, 0, 0.45),
        10px 10px 0 var(--rd-shadow);
}

/* ---------- Feed cards: retro OS windows ---------- */

.home-feed__card {
    padding: 0 0 18px;
    overflow: hidden;
    background: var(--pixel-panel);
}

.home-feed__card > *:not(.home-feed__head) {
    margin-left: 16px;
    margin-right: 16px;
}

.home-feed__head {
    margin: 0;
    justify-content: flex-start;
    padding: 11px 16px;
    background:
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.12) 0 1px, transparent 1px 3px),
        linear-gradient(90deg, color-mix(in srgb, var(--pixel-accent) 30%, var(--pixel-bg-deep)) 0%, var(--pixel-bg-deep) 85%);
    border-bottom: 2px solid var(--rd-shadow);
}

.home-feed__card--blog .home-feed__head {
    background:
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.12) 0 1px, transparent 1px 3px),
        linear-gradient(90deg, color-mix(in srgb, var(--pixel-cyan) 38%, var(--pixel-bg-deep)) 0%, var(--pixel-bg-deep) 85%);
}

.home-feed__head .eyebrow {
    color: var(--pixel-ink);
    text-shadow: 1px 1px 0 var(--rd-shadow);
}

.home-feed__more {
    font-family: var(--pixel-font-display);
    font-size: 0.55rem;
    text-transform: uppercase;
    color: var(--pixel-ink);
    margin-left: auto;
}

.home-feed__more:hover { color: var(--pixel-accent-glow); }

/* Hot cards inside the windows: tighter, bevelled rank coin */
.home-hot-card { box-shadow: 4px 4px 0 var(--rd-shadow); }

.home-hot-card__rank {
    box-shadow:
        inset 2px 2px 0 rgba(255, 255, 255, 0.35),
        inset -2px -2px 0 rgba(0, 0, 0, 0.35),
        2px 2px 0 var(--rd-shadow);
}

/* ---------- Page intros / section heroes ---------- */

.page-intro h1,
.community-hero h1,
.profile-header h1,
.topic-header h1 {
    text-shadow:
        3px 3px 0 var(--rd-shadow),
        6px 6px 0 color-mix(in srgb, var(--pixel-accent) 55%, transparent);
}

/* ---------- Footer: arcade terminal ---------- */

.site-footer {
    margin-top: 72px;
    border-top: 4px solid var(--rd-shadow);
    background:
        var(--rd-stripes),
        var(--pixel-bg-deep);
}

.site-footer__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 30px;
    padding: 36px 0 28px;
}

.site-footer__brand {
    display: grid;
    gap: 8px;
    justify-items: start;
    align-content: start;
}

.site-footer__logo {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    background: var(--pixel-accent);
    color: #0a0e1c;
    font-family: var(--pixel-font-display);
    font-size: 0.8rem;
    border: 2px solid #000;
    box-shadow:
        inset 2px 2px 0 rgba(255, 255, 255, 0.35),
        3px 3px 0 var(--rd-shadow);
}

.site-footer__brand strong {
    font-family: var(--pixel-font-display);
    font-size: 0.78rem;
    text-transform: uppercase;
    color: var(--pixel-ink);
}

.site-footer__tag {
    font-family: var(--pixel-font-body);
    font-size: 1rem;
    color: var(--pixel-ink-soft);
}

.site-footer__col {
    display: grid;
    gap: 8px;
    align-content: start;
}

.site-footer__head {
    font-family: var(--pixel-font-display);
    font-size: 0.6rem;
    text-transform: uppercase;
    color: var(--pixel-accent);
    margin-bottom: 4px;
}

.site-footer__col a {
    font-family: var(--pixel-font-body);
    font-size: 1.02rem;
    color: var(--pixel-ink-soft);
    width: fit-content;
}

.site-footer__col a::before {
    content: "▸ ";
    color: var(--pixel-accent);
    opacity: 0;
}

.site-footer__col a:hover {
    color: var(--pixel-ink);
}

.site-footer__col a:hover::before { opacity: 1; }

.site-footer__bar {
    border-top: 2px dashed var(--pixel-line-strong);
    background: rgba(0, 0, 0, 0.25);
}

[data-theme="light"] .site-footer__bar { background: rgba(42, 30, 68, 0.07); }

.site-footer__bar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 13px 0;
    font-family: var(--pixel-font-display);
    font-size: 0.55rem;
    text-transform: uppercase;
    color: var(--pixel-ink-soft);
}

.site-footer__coin {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.site-footer__coin-icon {
    color: var(--pixel-yellow);
    animation: rd-coin-blink 1.1s steps(2) infinite;
}

@keyframes rd-coin-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.2; }
}

/* ---------- Light theme fine-tuning ---------- */

[data-theme="light"] .site-header {
    background:
        var(--rd-stripes),
        linear-gradient(180deg, color-mix(in srgb, var(--pixel-bg-deep) 90%, var(--pixel-accent)) 0%, var(--pixel-bg-deep) 60%);
}

[data-theme="light"] .home-hero {
    background:
        var(--rd-stripes),
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--pixel-accent) 10%, transparent), transparent 65%),
        linear-gradient(180deg, var(--pixel-panel) 0%, var(--pixel-bg-deep) 100%);
}

[data-theme="light"] .home-tile__link > span:first-child {
    color: color-mix(in srgb, var(--tile-accent, var(--pixel-accent)) 45%, #2a1e44);
}

[data-theme="light"] .home-feed__head .eyebrow { color: var(--pixel-ink); }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
    .site-footer__grid { grid-template-columns: 1fr 1fr; }
    .site-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
    .home-hero { padding: 30px 16px 28px; }
    .home-hero h2 { font-size: clamp(1.1rem, 6vw, 1.5rem); }
    .home-hero__cta .button { width: 100%; }
    .site-footer__grid { grid-template-columns: 1fr; padding-top: 26px; }
    .site-footer__bar-inner { justify-content: center; text-align: center; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    .home-hero .eyebrow::before,
    .home-hero .eyebrow::after,
    .home-hero__cta .button--primary,
    .site-footer__coin-icon {
        animation: none !important;
    }
}