* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background:
        radial-gradient(circle at 18% 0%, rgba(202, 211, 39, .18), transparent 28rem),
        linear-gradient(180deg, #0f2b20 0%, #16382b 46%, #10261d 100%);
    color: #eef7f0;
    min-height: 100vh;
}
a { color: var(--secondary); font-weight: 700; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button {
    border: 1px solid rgba(202, 211, 39, .32);
    background: rgba(255, 255, 255, .08);
    color: #f5f9ef;
    min-height: 42px;
    border-radius: 8px;
    padding: 10px 14px;
    cursor: pointer;
    font-weight: 700;
}
button:hover { border-color: var(--secondary); background: rgba(202, 211, 39, .12); }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, .avatar-choice:focus-within, .scene-choice:focus-within {
    outline: 3px solid var(--secondary);
    outline-offset: 3px;
}
button:disabled {
    opacity: .62;
    cursor: not-allowed;
}
.primary-button {
    background: var(--primary);
    color: #fff;
    border-color: rgba(202, 211, 39, .5);
}
.danger { color: #ffd4d4; border-color: rgba(255, 140, 140, .45); background: rgba(130, 28, 28, .22); }
.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px clamp(16px, 4vw, 48px);
    background: rgba(12, 38, 28, .88);
    border-bottom: 1px solid rgba(202, 211, 39, .16);
    backdrop-filter: blur(10px);
}
.brand { display: flex; gap: 10px; align-items: center; color: #f4f9f0; }
.brand small, small, .muted { color: #aebbb3; }
.brand-mark {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: var(--primary);
    color: var(--secondary);
    font-weight: 900;
}
.nav-menu {
    position: relative;
    margin-left: auto;
}
.nav-menu summary {
    display: grid;
    place-items: center;
    gap: 5px;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(202, 211, 39, .28);
    border-radius: 8px;
    background: rgba(255, 255, 255, .08);
    cursor: pointer;
    list-style: none;
}
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary span {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 999px;
    background: #f4f9f0;
}
.nav-menu[open] summary {
    border-color: var(--secondary);
    background: rgba(202, 211, 39, .13);
}
.nav {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 20;
    display: grid;
    min-width: 210px;
    padding: 8px;
    border: 1px solid rgba(202, 211, 39, .18);
    border-radius: 8px;
    background: rgba(16, 45, 34, .98);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .34);
}
.nav a {
    display: block;
    padding: 12px 14px;
    border-radius: 8px;
    color: #f4f9f0;
}
.nav a:hover, .nav a:focus-visible {
    background: rgba(202, 211, 39, .13);
    color: var(--secondary);
}
.shell { width: min(1180px, calc(100% - 32px)); margin: 28px auto 56px; }
.auth-panel, .game-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
    align-items: center;
    gap: 28px;
    min-height: 58vh;
}
.auth-panel h1, .game-hero h1, .page-head h1 {
    margin: 0 0 12px;
    color: #f4f9f0;
    font-size: clamp(2rem, 6vw, 4.2rem);
    line-height: 1;
    letter-spacing: 0;
}
.eyebrow {
    margin: 0 0 10px;
    color: var(--secondary);
    text-transform: uppercase;
    font-weight: 900;
    font-size: .82rem;
}
.form-card, .panel, .play-panel, .score-card {
    background: rgba(22, 54, 42, .92);
    border: 1px solid rgba(202, 211, 39, .18);
    border-radius: 8px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
}
.form-card { display: grid; gap: 16px; padding: 24px; }
.compact-form {
    grid-column: 2;
    align-self: start;
    box-shadow: none;
}
label { display: grid; gap: 7px; font-weight: 700; color: #e6f2e8; }
.check-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #e6f2e8;
    font-weight: 600;
    line-height: 1.35;
}
.check-consent input {
    width: 20px;
    min-width: 20px;
    min-height: 20px;
    margin-top: 2px;
}
input, textarea, select {
    width: 100%;
    min-height: 44px;
    border: 1px solid rgba(202, 211, 39, .2);
    border-radius: 8px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, .08);
    color: #f4f9f0;
}
input::placeholder, textarea::placeholder { color: #9eaaa2; }
textarea { min-height: 420px; resize: vertical; font-family: Consolas, monospace; font-size: .9rem; }
.flash { padding: 12px 14px; border-radius: 8px; margin-bottom: 18px; font-weight: 700; }
.flash.error { background: rgba(141, 31, 31, .28); color: #ffd9d9; border: 1px solid rgba(255, 150, 150, .28); }
.flash.success { background: rgba(202, 211, 39, .14); color: #f1f8b0; border: 1px solid rgba(202, 211, 39, .24); }
.game-hero {
    min-height: auto;
    padding: 28px;
    margin-bottom: 24px;
    background:
        linear-gradient(115deg, rgba(17, 71, 51, .88), rgba(28, 89, 66, .78)),
        repeating-linear-gradient(90deg, transparent 0 24px, rgba(202, 211, 39, .32) 24px 26px);
    color: #fff;
    border-radius: 8px;
}
.game-hero h1, .game-hero .eyebrow { color: #fff; }
.game-hero .eyebrow { color: var(--secondary); }
.game-status { display: grid; gap: 12px; }
.player-card {
    display: grid;
    grid-template-columns: 48px 1fr;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(202, 211, 39, .18);
}
.player-card small {
    display: block;
    margin: 0 0 3px;
    color: #c9d6cd;
    font-weight: 800;
}
.player-card strong {
    display: block;
    color: #f4f9f0;
    line-height: 1.15;
}
.score-card { padding: 22px; color: #f4f9f0; text-align: center; }
.score-card strong { display: block; font-size: clamp(2.4rem, 10vw, 5rem); line-height: 1; color: var(--secondary); }
.score-card span { color: #aebbb3; }
.hero-side { display: grid; grid-template-columns: minmax(120px, 220px) minmax(160px, 1fr); gap: 18px; align-items: center; }
.mascot { width: 100%; max-height: 230px; object-fit: contain; filter: drop-shadow(0 18px 22px rgba(0,0,0,.16)); }
.game-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 22px; align-items: start; }
.level-map { display: grid; gap: 10px; }
.level-chip {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 10px;
    align-items: center;
    min-height: 64px;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid rgba(202, 211, 39, .16);
    background: rgba(255, 255, 255, .07);
    color: #edf6ef;
    text-align: left;
}
.level-chip-text {
    display: grid;
    gap: 6px;
    min-width: 0;
}
.level-chip-text strong {
    color: #f4f9f0;
    line-height: 1.15;
}
.level-chip-text small {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(202, 211, 39, .13);
    color: #e8f3b2;
    font-weight: 700;
}
.level-chip.active { outline: 3px solid rgba(202, 211, 39, .65); }
.level-chip.done .level-number { background: var(--secondary); color: var(--primary); }
.level-number {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #0f3828;
    color: var(--secondary);
}
.play-panel { padding: clamp(16px, 3vw, 28px); min-height: 520px; }
.play-head, .play-actions { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; }
.play-actions {
    gap: 24px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(202, 211, 39, .14);
}
.next-actions {
    justify-content: flex-end;
    margin-top: 12px;
    padding-top: 0;
    border-top: 0;
}
.coach-line {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 12px;
    align-items: center;
    margin: 18px 0 10px;
    padding: 12px;
    border-radius: 8px;
    background: rgba(202, 211, 39, .12);
}
.coach-line img { width: 58px; height: 58px; object-fit: contain; }
.coach-line p { margin: 0; color: #eff8c6; font-weight: 800; }
#levelBadge {
    display: inline-flex;
    color: var(--secondary);
    background: rgba(202, 211, 39, .13);
    border-radius: 999px;
    padding: 8px 12px;
    font-weight: 900;
}
.challenge-title { margin: 20px 0 8px; color: #f4f9f0; font-size: clamp(1.5rem, 4vw, 2.4rem); }
.level-theme-label {
    display: inline-flex;
    margin: 4px 0 0;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(202, 211, 39, .13);
    color: var(--secondary);
    font-weight: 900;
}
.brief { color: #c2d0c6; margin-bottom: 22px; }
.level-visual {
    width: min(360px, 100%);
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(202, 211, 39, .2);
    background: #07120e;
    margin: 18px auto;
}
.level-scene {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    background-image: url('img/level-scenes-sheet.png');
    background-size: 400% auto;
    background-repeat: no-repeat;
}
.level-visual .level-scene { height: 100%; aspect-ratio: auto; }
.scene-0 { background-position: 0% 0%; }
.scene-1 { background-position: 33.333% 0%; }
.scene-2 { background-position: 66.666% 0%; }
.scene-3 { background-position: 100% 0%; }
.scene-4 { background-position: 0% 100%; }
.scene-5 { background-position: 33.333% 100%; }
.scene-6 { background-position: 66.666% 100%; }
.scene-7 { background-position: 100% 100%; }
.scene-8, .scene-9, .scene-10, .scene-11,
.scene-12, .scene-13, .scene-14, .scene-15 {
    background-image: url('img/level-scenes-sheet-2.png');
}
.scene-8 { background-position: 0% 0%; }
.scene-9 { background-position: 33.333% 0%; }
.scene-10 { background-position: 66.666% 0%; }
.scene-11 { background-position: 100% 0%; }
.scene-12 { background-position: 0% 100%; }
.scene-13 { background-position: 33.333% 100%; }
.scene-14 { background-position: 66.666% 100%; }
.scene-15 { background-position: 100% 100%; }
.option-grid, .buckets, .match-grid, .scenario-list { display: grid; gap: 12px; }
.option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 12px;
    border: 1px solid rgba(202, 211, 39, .16);
    border-radius: 8px;
    background: rgba(255, 255, 255, .07);
    color: #eef7f0;
}
.option input { width: auto; min-height: auto; }
.email-box {
    border: 1px solid rgba(202, 211, 39, .16);
    background: rgba(255, 255, 255, .07);
    border-radius: 8px;
    padding: 16px;
    margin: 14px 0;
}
.email-box p { margin: 8px 0 0; }
.match-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.match-card, .drop-zone, .draggable, .order-item {
    border: 1px solid rgba(202, 211, 39, .16);
    border-radius: 8px;
    background: rgba(255, 255, 255, .07);
    padding: 12px;
}
.match-card strong { color: var(--secondary); }
.buckets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.drop-zone { min-height: 160px; background: rgba(255, 255, 255, .05); }
.drop-zone h3 { margin: 0 0 10px; color: var(--secondary); font-size: 1rem; }
.draggable, .order-item { margin: 8px 0; cursor: grab; font-weight: 700; }
.draggable, .order-item {
    touch-action: none;
    user-select: none;
}
.factor-item {
    display: grid;
    gap: 10px;
}
.factor-item label {
    color: #dce9df;
    font-size: .92rem;
}
.dragging { opacity: .5; }
.touch-dragging {
    position: relative;
    z-index: 30;
    opacity: .92;
    box-shadow: 0 16px 34px rgba(0, 0, 0, .32);
}
.fill-line { margin: 14px 0; }
.fill-line input { display: inline-block; width: min(260px, 100%); margin: 0 6px; }
.feedback { min-height: 28px; font-weight: 900; color: var(--secondary); }
.result-box {
    display: grid;
    gap: 8px;
    margin-top: 16px;
    padding: 14px;
    border-radius: 8px;
    line-height: 1.45;
}
.result-box strong {
    font-size: 1.1rem;
}
.result-box span, .result-box small {
    color: #eef7f0;
    font-weight: 600;
}
.result-box.is-correct {
    border: 1px solid rgba(202, 211, 39, .34);
    background: rgba(202, 211, 39, .12);
    color: var(--secondary);
}
.result-box.is-wrong {
    border: 1px solid rgba(255, 155, 155, .35);
    background: rgba(141, 31, 31, .22);
    color: #ffd9d9;
}
.solution-box {
    display: grid;
    gap: 6px;
    padding: 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
}
.solution-box strong {
    color: #fff;
}
#nextLevel {
    background: var(--secondary);
    color: var(--primary);
    border-color: var(--secondary);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .28);
    margin-left: auto;
    min-width: 180px;
}
#nextLevel::after { content: "  >"; }
.ranking-list, .admin-users { display: grid; gap: 10px; }
.rank-row, .user-line {
    display: grid;
    grid-template-columns: 52px 1fr 120px 120px;
    gap: 12px;
    align-items: center;
    padding: 14px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(202, 211, 39, .16);
    border-radius: 8px;
}
.rank-pos {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--secondary);
    color: #10271d;
    font-weight: 900;
}
.admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.panel { padding: 20px; }
.panel h2 { margin-top: 0; color: #f4f9f0; }
.wide { grid-column: 1 / -1; }
.stack { display: grid; gap: 14px; }
.admin-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    align-items: end;
    flex-wrap: wrap;
    margin: 0 0 14px;
}
.confirm-inline {
    width: min(220px, 100%);
}
.mail-log { display: grid; gap: 10px; }
.mail-row {
    display: grid;
    gap: 4px;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid rgba(202, 211, 39, .16);
    background: rgba(255, 255, 255, .06);
}
.mail-row span {
    width: fit-content;
    padding: 4px 8px;
    border-radius: 999px;
    font-weight: 900;
    font-size: .82rem;
}
.mail-row.sent span { background: rgba(202, 211, 39, .14); color: #eff8c6; }
.mail-row.failed span { background: #fde8e8; color: #8d1f1f; }
.user-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.user-line .user-id { flex: 1 1 260px; }
.user-line > span:nth-of-type(2) { flex: 0 0 auto; white-space: nowrap; }
.user-line select { flex: 0 1 150px; min-width: 120px; }
.user-line button { min-height: 38px; padding: 8px 10px; }
.user-line small, .rank-row small { display: block; margin-top: 4px; }
.user-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.user-id > span:last-child { min-width: 0; overflow: hidden; }
.user-id small, .user-id strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.avatar-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    gap: 12px;
    border: 0;
    padding: 0;
    margin: 0;
}
.avatar-picker legend { grid-column: 1 / -1; color: var(--secondary); font-weight: 900; margin-bottom: 6px; }
.avatar-choice input { position: absolute; opacity: 0; pointer-events: none; }
.avatar-choice {
    display: grid;
    place-items: center;
    border: 2px solid rgba(202, 211, 39, .16);
    border-radius: 8px;
    padding: 6px;
    background: rgba(255, 255, 255, .07);
    cursor: pointer;
}
.avatar-choice:has(input:checked) { border-color: var(--secondary); box-shadow: 0 0 0 4px rgba(202, 211, 39, .22); }
.avatar-sprite {
    display: inline-block;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background-image: url('img/avatars-sheet.png');
    background-size: 500% auto;
    background-repeat: no-repeat;
    background-color: #edf4ea;
    border: 2px solid rgba(202, 211, 39, .34);
}
.avatar-mini { width: 42px; height: 42px; flex: 0 0 auto; }
.custom-avatar {
    display: inline-block;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    border: 2px solid rgba(202, 211, 39, .34);
    background: #edf4ea;
}
.custom-avatar.avatar-mini { width: 42px; height: 42px; }
.profile-avatar { width: 112px; height: 112px; flex: 0 0 auto; }
.current-custom-avatar {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .07);
    color: #f4f9f0;
    font-weight: 800;
}
.avatar-0 { background-position: 0% 8%; }
.avatar-1 { background-position: 25% 8%; }
.avatar-2 { background-position: 50% 8%; }
.avatar-3 { background-position: 75% 8%; }
.avatar-4 { background-position: 100% 8%; }
.avatar-5 { background-position: 0% 70%; }
.avatar-6 { background-position: 25% 70%; }
.avatar-7 { background-position: 50% 70%; }
.avatar-8 { background-position: 75% 70%; }
.avatar-9 { background-position: 100% 70%; }
.profile-head {
    display: flex;
    gap: 18px;
    align-items: center;
}
.profile-head .avatar-sprite { width: 112px; height: 112px; }
.level-editor-list { display: grid; gap: 14px; }
.level-editor {
    border: 1px solid rgba(202, 211, 39, .16);
    border-radius: 8px;
    background: rgba(255, 255, 255, .07);
    overflow: hidden;
}
.level-editor summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    cursor: pointer;
    color: #f4f9f0;
}
.level-editor summary .level-scene {
    width: 96px;
    height: 60px;
    aspect-ratio: auto;
    border-radius: 8px;
    border: 1px solid rgba(202, 211, 39, .16);
    flex: 0 0 auto;
}
.level-editor form { padding: 0 14px 14px; }
.form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.scene-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 12px;
    border: 1px solid rgba(202, 211, 39, .16);
    border-radius: 8px;
    padding: 12px;
}
.scene-picker legend { color: var(--secondary); font-weight: 900; padding: 0 6px; }
.scene-choice {
    display: grid;
    gap: 8px;
    padding: 8px;
    border: 2px solid rgba(202, 211, 39, .16);
    border-radius: 8px;
    background: rgba(255, 255, 255, .07);
    cursor: pointer;
}
.scene-choice input { position: absolute; opacity: 0; pointer-events: none; }
.scene-choice:has(input:checked) { border-color: var(--secondary); box-shadow: 0 0 0 4px rgba(202, 211, 39, .22); }
.scene-choice .level-scene {
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 8px;
    border: 1px solid rgba(202, 211, 39, .16);
}
.scene-choice small { color: #d4e1d6; font-weight: 800; }
.small-textarea { min-height: 82px; }
.medium-textarea { min-height: 150px; }
.question-editor {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) 160px;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .06);
}
.check-list {
    display: grid;
    gap: 8px;
    border: 1px solid rgba(202, 211, 39, .16);
    border-radius: 8px;
    padding: 12px;
}
.check-list label { display: flex; align-items: center; gap: 8px; color: #eef7f0; font-weight: 500; }
.check-list input { width: auto; min-height: auto; }
@media (max-width: 850px) {
    body {
        background:
            radial-gradient(circle at 50% -8rem, rgba(202, 211, 39, .18), transparent 20rem),
            linear-gradient(180deg, #102d22 0%, #173a2c 52%, #10261d 100%);
    }
    .topbar {
        align-items: center;
        flex-direction: row;
        padding: max(14px, env(safe-area-inset-top)) 16px 12px;
        border-bottom-color: rgba(202, 211, 39, .22);
    }
    .brand {
        min-width: 0;
    }
    .brand > span:last-child {
        min-width: 0;
    }
    .brand strong, .brand small {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .nav {
        right: 0;
        min-width: min(240px, calc(100vw - 32px));
    }
    .shell {
        width: 100%;
        margin: 0 auto 32px;
        padding: 14px 12px 28px;
    }
    .auth-panel, .game-hero, .game-layout, .admin-grid, .match-grid, .buckets, .hero-side, .form-grid, .question-editor { grid-template-columns: 1fr; }
    .auth-panel { min-height: auto; }
    .form-card, .panel, .play-panel, .score-card, .game-hero {
        border-radius: 8px;
    }
    .game-hero {
        padding: 18px;
        margin-bottom: 14px;
    }
    .hero-side {
        gap: 12px;
    }
    .mascot {
        max-height: 160px;
        width: min(180px, 70%);
        justify-self: center;
    }
    .player-card {
        grid-template-columns: 42px 1fr;
    }
    .game-hero h1, .auth-panel h1, .page-head h1 {
        font-size: clamp(2rem, 12vw, 3rem);
    }
    .compact-form { grid-column: auto; }
    .level-map {
        display: block;
    }
    .level-map .level-chip {
        display: none;
    }
    .level-map .level-chip.active {
        display: grid;
        margin-bottom: 10px;
        min-height: 56px;
    }
    .rank-row { grid-template-columns: 42px 1fr; }
    .rank-row > span:nth-child(3), .rank-row > span:nth-child(4) { grid-column: 2; }
    .user-line { grid-template-columns: 1fr; }
    .play-actions button { width: 100%; }
    .play-head button { width: auto; }
    .level-visual { width: min(300px, 100%); aspect-ratio: 3 / 4; }
    .profile-head { align-items: flex-start; }
}