:root {
    --button-color: #ffd166;
    --accent-color: #ffd166;
    --quest-color: #ff9f1c;
    --secondary-color: #60efff;
    --dialog-bg: rgba(20, 7, 36, 0.85);
    --ui-header-bg: linear-gradient(170deg, rgba(27, 12, 42, 0.96), rgba(15, 6, 28, 0.96));
    --ui-surface-bg: linear-gradient(170deg, rgba(31, 13, 49, 0.94), rgba(18, 7, 31, 0.94));
    --ui-dropdown-bg: rgba(20, 7, 36, 0.97);
    --ui-surface-text: #f6edd9;
    --ui-surface-muted: #d7c7a5;
    --ui-surface-border: rgba(255, 209, 102, 0.62);
    --ui-surface-border-soft: rgba(255, 209, 102, 0.34);
    --ui-surface-hover: rgba(255, 209, 102, 0.12);
    --ui-surface-hover-strong: rgba(255, 209, 102, 0.2);
    --ui-surface-track: rgba(96, 239, 255, 0.2);
    --ui-surface-shadow: 0 16px 34px rgba(0, 0, 0, 0.45);
    --ui-surface-glow: 0 0 16px rgba(255, 209, 102, 0.24);
    --bg-0: #07030f;
    --bg-1: #140724;
    --bg-2: #2a0d37;
    --gold: #ffd166;
    --orange: #ff9f1c;
    --pink: #ff5d8f;
    --cyan: #60efff;
    --text: #f6edd9;
    --muted: #d7c7a5;
    --text-strong: #fff5dd;
    --text-contrast: #1b0f00;
    --shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
    --glass: linear-gradient(170deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
    --glass-border: 1px solid rgba(255, 255, 255, 0.18);
}

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

html,
body {
    min-height: 100%;
}

body {
    font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
    color: var(--text);
    background:
        radial-gradient(120% 120% at 20% 12%, rgba(255, 93, 143, 0.16), transparent 55%),
        radial-gradient(95% 95% at 84% 24%, rgba(96, 239, 255, 0.14), transparent 62%),
        radial-gradient(80% 90% at 58% 88%, rgba(255, 159, 28, 0.14), transparent 70%),
        radial-gradient(circle at 20% 20%, var(--bg-2), var(--bg-1) 38%, var(--bg-0) 75%);
    line-height: 1.6;
    padding: 20px;
    overflow-x: hidden;
    position: relative;
}

html::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.88;
    background-image:
        radial-gradient(1.5px 1.5px at 12% 18%, rgba(255, 255, 255, 0.85), transparent 68%),
        radial-gradient(1.2px 1.2px at 74% 22%, rgba(255, 241, 193, 0.85), transparent 70%),
        radial-gradient(1.4px 1.4px at 46% 74%, rgba(96, 239, 255, 0.7), transparent 70%),
        radial-gradient(1.6px 1.6px at 85% 68%, rgba(255, 159, 28, 0.75), transparent 72%),
        radial-gradient(1.1px 1.1px at 28% 52%, rgba(255, 255, 255, 0.65), transparent 72%),
        radial-gradient(1.3px 1.3px at 63% 42%, rgba(255, 93, 143, 0.6), transparent 72%);
    background-size: 380px 380px, 470px 470px, 560px 560px, 510px 510px, 640px 640px, 720px 720px;
    animation: if-stars 12s ease-in-out infinite alternate;
}

body::before,
body::after {
    content: "";
    position: fixed;
    inset: -10%;
    pointer-events: none;
    z-index: 0;
}

body::before {
    filter: blur(34px) saturate(1.25);
    mix-blend-mode: screen;
    background:
        radial-gradient(45% 35% at 20% 20%, rgba(255, 93, 143, 0.3), transparent),
        radial-gradient(35% 35% at 80% 30%, rgba(96, 239, 255, 0.26), transparent),
        radial-gradient(35% 35% at 55% 80%, rgba(255, 159, 28, 0.22), transparent),
        radial-gradient(26% 24% at 65% 14%, rgba(255, 209, 102, 0.18), transparent);
    animation: if-drift 14s ease-in-out infinite alternate;
}

body::after {
    background: repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.01) 0px,
        rgba(255, 255, 255, 0.01) 1px,
        transparent 2px,
        transparent 4px
    );
    opacity: 0.36;
    animation: if-shimmer 8s linear infinite;
}

body > * {
    position: relative;
    z-index: 1;
}

@keyframes if-drift {
    from { transform: translate3d(-2%, -2%, 0) scale(1); }
    to { transform: translate3d(2%, 2%, 0) scale(1.08); }
}

@keyframes if-shimmer {
    0% { transform: translateY(0); }
    100% { transform: translateY(4px); }
}

@keyframes if-stars {
    0% { transform: translateY(0) scale(1); opacity: 0.7; }
    50% { opacity: 1; }
    100% { transform: translateY(-8px) scale(1.015); opacity: 0.86; }
}

a {
    color: var(--gold);
    text-decoration: none;
}

a:hover {
    color: #fff2cf;
}

header {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

p,
form,
dialog,
.games-card,
.run-card,
.pong-card {
    background: linear-gradient(170deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 16px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(7px);
}

p {
    padding: 20px;
    margin: 20px auto;
    max-width: 760px;
    color: var(--text-strong);
}

form {
    max-width: 760px;
    margin: 20px auto;
    padding: 20px;
}

label {
    display: block;
    margin: 12px 0 6px;
    color: #ffe4a8;
    font-weight: 700;
    letter-spacing: 0.02em;
}

p,
form,
dialog,
.games-card,
.run-card,
.pong-card {
    background: var(--glass);
    border: var(--glass-border);
    border-radius: 16px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(7px);
}

h1,
h2,
h3 {
    color: #fff2cf;
    text-shadow:
        0 0 8px rgba(255, 209, 102, 0.45),
        0 0 18px rgba(255, 93, 143, 0.2),
        0 0 26px rgba(96, 239, 255, 0.16);
}

p {
    padding: 20px;
    margin: 20px auto;
    max-width: 760px;
    color: var(--text);
}

form {
    max-width: 760px;
    margin: 20px auto;
    padding: 20px;
}

label {
    display: block;
    margin: 12px 0 6px;
    color: #ffe4a8;
    font-weight: 700;
    letter-spacing: 0.02em;
}

input[type="text"],
input[type="number"],
input[type="password"],
textarea,
select {
    width: 100%;
    padding: 12px;
    margin-bottom: 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 209, 102, 0.5);
    color: var(--text);
    background: rgba(7, 3, 15, 0.7);
    font: inherit;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--cyan);
    box-shadow: 0 0 0 3px rgba(96, 239, 255, 0.18);
}

textarea {
    resize: vertical;
    min-height: 110px;
}

button,
input[type="submit"] {
    position: relative;
    border: 1px solid rgba(255, 209, 102, 0.7);
    border-radius: 14px;
    padding: 12px 22px;
    margin: 10px auto;
    display: block;
    color: var(--text-contrast);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    cursor: pointer;
    text-transform: uppercase;
    background: linear-gradient(145deg, #ffe39f, #ffd166 55%, #ff9f1c);
    box-shadow: var(--shadow), 0 0 0 1px rgba(255, 255, 255, 0.22) inset, 0 0 18px rgba(255, 209, 102, 0.24);
    transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
    isolation: isolate;
}

button::after,
input[type="submit"]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, 0.35) 50%, transparent 75%);
    transform: translateX(-120%);
    transition: transform 0.7s ease;
    z-index: -1;
}

button::before,
input[type="submit"]::before {
    content: "";
    position: absolute;
    inset: -35% -60%;
    background: conic-gradient(from 120deg, transparent, rgba(96, 239, 255, 0.24), rgba(255, 93, 143, 0.18), transparent);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

button:hover,
input[type="submit"]:hover {
    transform: translateY(-2px) scale(1.02);
    filter: saturate(1.08);
    box-shadow: 0 20px 52px rgba(0, 0, 0, 0.54), 0 0 26px rgba(255, 209, 102, 0.36), 0 0 18px rgba(96, 239, 255, 0.2);
}

button:hover::after,
input[type="submit"]:hover::after {
    transform: translateX(120%);
}

button:hover::before,
input[type="submit"]:hover::before {
    opacity: 1;
}

button:active,
input[type="submit"]:active {
    transform: scale(0.98);
}

dialog {
    max-width: 650px;
    min-width: 360px;
    border: 1px solid rgba(255, 209, 102, 0.75);
    color: var(--text);
    padding: 24px;
}

dialog::backdrop {
    background: rgba(7, 3, 15, 0.8);
    backdrop-filter: blur(4px);
}

dialog h1,
dialog h2 {
    color: #fff2cf;
    text-shadow: 0 0 9px rgba(255, 209, 102, 0.45);
}

dialog ul {
    list-style: none;
    padding-left: 0;
}

dialog li {
    margin: 8px 0;
    padding: 8px 10px;
    border-left: 3px solid var(--gold);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
}

.auth-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.edit-button {
    border-color: rgba(96, 239, 255, 0.75) !important;
}

.achievement-common { color: #ffe4a8; }
.achievement-rare { color: #ff8fb3; }
.achievement-epic { color: #7eefff; }
.achievement-legendary { color: #ffd166; }
.achievement-hidden { color: #b39ac9; }
.achievement-locked { color: #776b8f; opacity: 0.72; }

.user-color { color: var(--user-color, #fff2cf); }
.creator-color { color: var(--creator-color, #ffd166); }
.choice-color {
    border: 2px solid var(--choice-color, #ffd166);
    color: var(--choice-color, #ffd166) !important;
    text-shadow:
        -1px -1px 0 rgba(0, 0, 0, 0.95),
        1px -1px 0 rgba(0, 0, 0, 0.95),
        -1px 1px 0 rgba(0, 0, 0, 0.95),
        1px 1px 0 rgba(0, 0, 0, 0.95),
        0 0 6px rgba(0, 0, 0, 0.45);
    background: linear-gradient(145deg, #fff2c3, #ffd166 55%, #ff9f1c) !important;
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.36),
        0 0 0 1px rgba(255, 255, 255, 0.2) inset,
        0 0 14px rgba(96, 239, 255, 0.2);
}

.choice-color:hover {
    filter: saturate(1.12);
    box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.42),
        0 0 20px rgba(255, 209, 102, 0.34),
        0 0 16px rgba(96, 239, 255, 0.24);
}
.page-border { border-left-color: var(--page-border, #ff9f1c); }

.creator-attribution { font-size: 0.8em; text-align: right; margin-top: -15px; color: var(--muted); }
.page-link { color: #ffe4a8; text-decoration: none; display: block; margin: 5px 0; }

/* Games + Pong Enhancement Pack (scoped) */
.games-wrap,
.pong-wrap,
.run-wrap {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
}

.games-wrap .games-card,
.pong-wrap .pong-card,
.run-wrap .run-card {
    border-radius: 16px;
    border: 1px solid rgba(96, 239, 255, 0.3);
    box-shadow: var(--shadow);
    background: var(--glass);
}

.games-wrap .hud,
.run-wrap .hud,
.pong-wrap .hud,
.games-wrap .btn-row,
.pong-wrap .controls,
.pong-wrap .score-row {
    gap: 10px;
    align-items: center;
}

.games-wrap .pill,
.run-wrap .pill,
.pong-wrap .pill,
.games-wrap .status-pill,
.games-wrap .tag,
.run-wrap .inventory-item {
    border-radius: 999px;
    font-weight: 700;
    border: 1px solid rgba(255, 209, 102, 0.58);
}

.pong-wrap #pongCanvas,
.pong-wrap #mpCanvas,
.pong-wrap #quadCanvas {
    border-radius: 12px;
    border: 1px solid rgba(96, 239, 255, 0.45);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    background: rgba(0, 0, 0, 0.5);
}

.games-wrap .adventure-item,
.run-wrap .choice-box,
.games-wrap .recent-item,
.run-wrap .map-room {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(170deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
}

.games-wrap .adventure-item:hover,
.run-wrap .choice-box:hover,
.games-wrap .recent-item:hover,
.run-wrap .map-room:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32), 0 0 12px rgba(255, 209, 102, 0.18);
}

.run-wrap .event-log {
    max-height: 260px;
    overflow-y: auto;
    padding-right: 6px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(7, 3, 15, 0.4);
}

@media (max-width: 760px) {
    body {
        padding: 14px;
    }

    button,
    input[type="submit"] {
        width: min(100%, 360px);
    }
}

/* Inline Legacy Bridge */
[style*="color: #888"],
[style*="color:#888"],
[style*="color: #999"],
[style*="color:#999"],
[style*="color: #aaa"],
[style*="color:#aaa"] {
    color: var(--secondary-color) !important;
    opacity: 0.85;
}

[style*="color: #00ff00"],
[style*="color:#00ff00"],
[style*="color: #00c800"],
[style*="color:#00c800"] {
    color: var(--button-color) !important;
}

[style*="color: #ffd700"],
[style*="color:#ffd700"],
[style*="color: #ffaa00"],
[style*="color:#ffaa00"],
[style*="color: orange"] {
    color: var(--quest-color) !important;
}

[style*="border-color: #00ff00"],
[style*="border-color:#00ff00"],
[style*="border-color: #ffd700"],
[style*="border-color:#ffd700"] {
    border-color: var(--button-color) !important;
}

[style*="background: rgba(255, 255, 255, 0.02)"],
[style*="background: rgba(255,255,255,0.05)"],
[style*="background: rgba(255,255,255,0.05)"],
[style*="background: rgba(0, 255, 0, 0.05)"],
[style*="background: rgba(0,255,0,0.05)"] {
    background: var(--dialog-bg) !important;
}

[style*="display:inline;"],
[style*="display: inline;"] {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
}

[style*="max-width: 500px"],
[style*="max-width: 520px"],
[style*="max-width: 620px"],
[style*="max-width: 700px"] {
    max-width: min(92vw, 700px) !important;
}