:root {
    --ink: #f8fafc;
    --muted: #a9b1c4;
    --night: #0b1020;
    --night-soft: #121a30;
    --surface: rgba(255, 255, 255, .065);
    --line: rgba(255, 255, 255, .12);
    --gold: #f1c76a;
    --film-primary: #7c3aed;
    --film-secondary: #facc15;
    --radius: 22px;
    --shadow: 0 22px 60px rgba(0, 0, 0, .28);
    --font-film: "Mouse Memoirs", "Trebuchet MS", sans-serif;
}

* { box-sizing: border-box; }

html { color-scheme: dark; scroll-behavior: smooth; }

body {
    margin: 0;
    min-height: 100vh;
    color: var(--ink);
    background:
        radial-gradient(circle at 15% -10%, rgba(106, 77, 177, .3), transparent 36rem),
        radial-gradient(circle at 90% 30%, rgba(15, 118, 110, .16), transparent 30rem),
        var(--night);
    font-family: "DM Sans", system-ui, sans-serif;
    line-height: 1.5;
}

button, input { font: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }

body::before {
    position: fixed;
    inset: 0;
    z-index: -1;
    content: "";
    opacity: .22;
    background-image: radial-gradient(rgba(255, 255, 255, .34) .7px, transparent .7px);
    background-size: 28px 28px;
    pointer-events: none;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(1180px, calc(100% - 36px));
    margin: 0 auto;
    padding: 24px 0;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    text-decoration: none;
}

.brand-mark {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(241, 199, 106, .5);
    border-radius: 50%;
    color: var(--gold);
    font-family: "Playfair Display", serif;
    font-size: 14px;
}

.identity-button {
    max-width: 48vw;
    overflow: hidden;
    padding: 10px 15px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    background: var(--surface);
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.hero {
    width: min(1180px, calc(100% - 36px));
    margin: 74px auto 100px;
}

.eyebrow {
    margin: 0 0 12px;
    color: var(--gold);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.hero h1, .quiz-hero h1, .admin-main h1 {
    margin: 0;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(3.4rem, 10vw, 7.8rem);
    line-height: .92;
    letter-spacing: -.05em;
}

.hero h1 span { color: var(--gold); }

.hero-copy {
    max-width: 610px;
    margin: 30px 0 0;
    color: var(--muted);
    font-size: clamp(1.05rem, 2vw, 1.3rem);
}

.score-card {
    display: flex;
    width: fit-content;
    margin-top: 32px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    backdrop-filter: blur(14px);
}

.score-card div {
    display: flex;
    min-width: 150px;
    padding: 18px 22px;
    flex-direction: column;
}
.score-card div + div { border-left: 1px solid var(--line); }
.score-card strong { font-size: 1.55rem; }
.score-card span { color: var(--muted); font-size: .8rem; }

.film-section, .admin-main {
    width: min(1180px, calc(100% - 36px));
    margin: 0 auto 100px;
}

.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 30px;
}

.section-heading h2, .section-heading h1 {
    margin: 0;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(2rem, 5vw, 3.6rem);
    line-height: 1;
}
.section-heading > p { max-width: 290px; margin: 0; color: var(--muted); }

.film-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.film-card {
    position: relative;
    display: flex;
    min-height: 230px;
    overflow: hidden;
    padding: 24px;
    align-items: flex-end;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #172036;
    background: linear-gradient(145deg, color-mix(in srgb, var(--film-primary) 44%, #111827), #111827 72%);
    box-shadow: var(--shadow);
    text-decoration: none;
    transition: transform .25s ease, border-color .25s ease;
}

.film-card:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, .3); }
.film-card.is-static { cursor: default; }
.film-card.is-static:hover { transform: none; border-color: var(--line); }
.film-card.is-static.is-complete:hover { border-color: color-mix(in srgb, var(--film-secondary) 55%, transparent); }
.film-card::after {
    position: absolute;
    right: -60px;
    bottom: -100px;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: var(--film-secondary);
    content: "";
    filter: blur(65px);
    opacity: .23;
}

.film-card-symbol {
    position: absolute;
    top: 16px;
    right: 25px;
    color: var(--film-secondary);
    font-family: Georgia, serif;
    font-size: 6.5rem;
    line-height: 1;
    opacity: .28;
    transform: rotate(8deg);
}

.film-number { position: absolute; top: 20px; left: 24px; color: rgba(255,255,255,.55); font-size: .75rem; letter-spacing: .15em; }
.film-card-content { position: relative; z-index: 1; display: flex; flex-direction: column; }
.film-card-content strong { font-family: var(--font-film); font-size: clamp(2.3rem, 5vw, 3.4rem); font-weight: 400; line-height: .95; letter-spacing: .02em; }
.film-card-content > span:not(.film-status) { margin-top: 8px; color: rgba(255,255,255,.68); }
.film-status { margin-top: 24px; color: var(--film-secondary); font-size: .84rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.film-card.is-complete { border-color: color-mix(in srgb, var(--film-secondary) 55%, transparent); }

footer {
    display: flex;
    width: min(1180px, calc(100% - 36px));
    margin: 0 auto;
    padding: 30px 0 42px;
    justify-content: space-between;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: .84rem;
}

.dialog {
    width: min(430px, calc(100% - 28px));
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 24px;
    color: var(--ink);
    background: #151d31;
    box-shadow: var(--shadow);
}
.dialog::backdrop { background: rgba(2, 6, 23, .78); backdrop-filter: blur(7px); }
.dialog form { position: relative; padding: 34px; }
.dialog h2 { margin: 0; font-family: "Playfair Display", serif; font-size: 2.2rem; line-height: 1.1; }
.dialog form > p:not(.eyebrow):not(.form-error) { color: var(--muted); }
.dialog-close { position: absolute; top: 16px; right: 18px; border: 0; color: var(--muted); background: transparent; font-size: 1.8rem; cursor: pointer; }

label { display: block; margin: 20px 0 8px; font-size: .85rem; font-weight: 600; }
input[type="text"], input[type="password"], input:not([type]) {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    outline: none;
    color: var(--ink);
    background: rgba(0,0,0,.2);
}
textarea, select {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    outline: none;
    color: var(--ink);
    background: rgba(0,0,0,.2);
    font: inherit;
}
textarea:focus, select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(241, 199, 106, .12); }
textarea:disabled, select:disabled { opacity: .62; }
input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(241, 199, 106, .12); }
.form-error { min-height: 1.4em; color: #fda4af; font-size: .85rem; }

.primary-button {
    display: inline-flex;
    min-height: 50px;
    padding: 12px 22px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    color: #101423;
    background: var(--gold);
    font-weight: 800;
    cursor: pointer;
}
.primary-button:disabled { opacity: .55; cursor: wait; }
.button-link { margin-top: 20px; text-decoration: none; }

.quiz-page {
    background: var(--night);
    background:
        radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--film-primary) 38%, transparent), transparent 37rem),
        radial-gradient(circle at 90% 35%, color-mix(in srgb, var(--film-secondary) 16%, transparent), transparent 32rem),
        var(--night);
}

.quiz-main { min-height: 78vh; }
.quiz-hero { position: relative; width: min(850px, calc(100% - 36px)); margin: 70px auto 55px; text-align: center; }
.quiz-hero h1 { font-family: var(--font-film); font-size: clamp(4rem, 11vw, 7.4rem); font-weight: 400; letter-spacing: .015em; }
#film-subtitle { color: var(--muted); font-size: 1.1rem; }
.film-symbol { display: block; margin-bottom: 20px; color: var(--film-secondary); font-size: 4.5rem; line-height: 1; text-shadow: 0 0 45px var(--film-secondary); }
.quiz-film-image { display: block; width: min(720px, 100%); aspect-ratio: 16 / 9; margin: 28px auto 0; object-fit: cover; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.quiz-container { width: min(760px, calc(100% - 28px)); margin: 0 auto 90px; }

.question-form { display: grid; gap: 15px; }
.question-card {
    margin: 0;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(18, 26, 48, .8);
}
.question-card legend { display: flex; width: 100%; padding: 0; flex-direction: column; font-size: 1.08rem; font-weight: 600; }
.question-number { margin-bottom: 7px; color: var(--film-secondary); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
.answer-choices { display: grid; margin-top: 20px; grid-template-columns: 1fr 1fr; gap: 10px; }
.answer-choices label { margin: 0; cursor: pointer; }
.answer-choices input { position: absolute; opacity: 0; pointer-events: none; }
.answer-choices span { display: grid; min-height: 50px; place-items: center; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); background: rgba(255,255,255,.03); transition: .15s ease; }
.answer-choices input:checked + span { border-color: var(--film-secondary); color: var(--ink); background: color-mix(in srgb, var(--film-primary) 42%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--film-secondary) 20%, transparent); }
.answer-choices input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.lock-warning { margin: 14px 0 0; color: var(--muted); font-size: .85rem; text-align: center; }
.submit-quiz { width: 100%; }

.result-summary { margin-bottom: 22px; padding: 28px; border: 1px solid color-mix(in srgb, var(--film-secondary) 35%, transparent); border-radius: var(--radius); background: var(--surface); text-align: center; }
.result-summary h2 { margin: 0; font-family: "Playfair Display", serif; font-size: clamp(2rem, 7vw, 3.5rem); }
.result-summary > p:last-child { margin-bottom: 0; color: var(--muted); }
.answer-result { margin-bottom: 12px; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: rgba(18, 26, 48, .8); }
.answer-result.is-correct { border-left: 4px solid #4ade80; }
.answer-result.is-wrong { border-left: 4px solid #fb7185; }
.answer-result-heading { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; }
.answer-result-heading > span { color: var(--muted); font-size: .75rem; }
.answer-result-heading h3 { margin: 0; font-size: 1rem; }
.answer-result-heading strong { color: #4ade80; font-size: .76rem; text-transform: uppercase; }
.is-wrong .answer-result-heading strong { color: #fb7185; }
.answer-result > p { margin: 13px 0 0; color: var(--muted); font-size: .9rem; }
.answer-result .answer-explanation { color: var(--ink); }
.error-panel { padding: 30px; border: 1px solid #fb7185; border-radius: 16px; text-align: center; }

.admin-main { margin-top: 70px; min-height: 72vh; }
.admin-login { width: min(430px, 100%); margin: 0 auto; padding: 34px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.admin-login h1 { font-size: 3rem; }
.admin-login .primary-button { width: 100%; }
.password-tool { width: min(620px, 100%); }
.password-tool h1 { font-size: clamp(2.4rem, 7vw, 4rem); }
.password-tool > p:not(.eyebrow), .password-tool #hash-result > p { color: var(--muted); }
.password-tool textarea { width: 100%; min-height: 100px; padding: 12px; resize: vertical; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: rgba(0,0,0,.2); font: .8rem/1.4 monospace; }
.password-tool #copy-hash { margin-top: 10px; max-width: none; }
.admin-heading h1 { font-size: clamp(2.4rem, 6vw, 4.5rem); }
.admin-actions { display: flex; align-items: flex-end; flex-direction: column; gap: 8px; color: var(--muted); font-size: .84rem; }
.admin-actions p { margin: 0; }
.admin-actions a { color: var(--gold); }
.metrics { display: grid; margin: 30px 0 22px; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.metrics article { display: flex; padding: 22px; flex-direction: column; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.metrics strong { font-family: "Playfair Display", serif; font-size: 2.4rem; }
.metrics span { color: var(--muted); font-size: .84rem; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 18px; background: rgba(18,26,48,.72); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 16px 18px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
th { color: var(--muted); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
tbody tr:last-child td { border-bottom: 0; }
.rank-cell { width: 70px; color: var(--gold); }
.pseudo-cell, .score-cell { font-weight: 700; }
.empty-state { padding: 30px; color: var(--muted); text-align: center; }
.loading { color: var(--muted); }
.participant-management-status { min-height: 1.4em; margin: 0 0 10px; }
.participant-actions { display: flex; gap: 8px; }
.table-action { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--surface); font-size: .78rem; cursor: pointer; }
.table-action:hover { border-color: var(--gold); }
.table-action.is-danger { color: #fda4af; }
.button-link-inline { display: inline-flex; text-decoration: none; }

.question-admin-main { max-width: 900px; }
.film-selector-wrap { margin-bottom: 18px; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.film-selector-wrap label { margin-top: 0; }
.film-selector-wrap select { font-weight: 700; }
.editor-notice { margin-bottom: 18px; padding: 14px 18px; border-left: 3px solid var(--gold); border-radius: 8px; color: var(--muted); background: rgba(241,199,106,.08); font-size: .88rem; }
.question-editor-list { display: grid; gap: 16px; }
.question-editor-card { padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: rgba(18,26,48,.82); }
.question-editor-card.is-locked { opacity: .76; }
.question-editor-heading { display: flex; margin-bottom: 8px; align-items: center; justify-content: space-between; color: var(--film-secondary); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.editor-lock { color: #fda4af; }
.editor-open { color: #86efac; }
.question-editor-card textarea { min-height: 92px; resize: vertical; }
.field-label { display: block; margin: 20px 0 8px; font-size: .85rem; font-weight: 600; }
.editor-answer-choices { max-width: 360px; }
.question-editor-footer { display: flex; margin-top: 20px; align-items: center; justify-content: space-between; gap: 16px; }
.editor-status { margin: 0; color: var(--muted); font-size: .85rem; }
.editor-status.is-success { color: #86efac; }
.editor-status.is-error { color: #fda4af; }
.film-image-editor { display: grid; margin-bottom: 18px; padding: 20px; grid-template-columns: minmax(220px, 320px) 1fr; gap: 24px; align-items: center; border: 1px solid var(--line); border-radius: 18px; background: rgba(18,26,48,.82); }
.film-image-preview-wrap { display: grid; min-height: 180px; overflow: hidden; place-items: center; border: 1px dashed var(--line); border-radius: 14px; color: var(--muted); background: rgba(0,0,0,.18); }
.film-image-preview-wrap img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.film-image-controls h2 { margin: 0; font-family: "Playfair Display", Georgia, serif; font-size: 1.8rem; line-height: 1.1; }
.film-image-controls > p:not(.eyebrow):not(.editor-status) { margin: 8px 0 0; color: var(--muted); font-size: .86rem; }
.film-image-controls input[type="file"] { display: block; width: 100%; color: var(--muted); font-size: .84rem; }
.film-image-controls input[type="file"]::file-selector-button { margin-right: 10px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: var(--surface); cursor: pointer; }

@media (max-width: 700px) {
    .topbar { padding: 16px 0; }
    .brand > span:last-child { display: none; }
    .hero { margin: 50px auto 72px; }
    .hero h1 { font-size: clamp(3.2rem, 19vw, 5.2rem); }
    .film-grid { grid-template-columns: 1fr; }
    .film-card { min-height: 205px; }
    .section-heading { align-items: start; flex-direction: column; }
    .score-card { width: 100%; }
    .score-card div { min-width: 0; flex: 1; }
    .quiz-hero { width: min(100% - 20px, 850px); margin: 36px auto 30px; }
    .quiz-hero h1 { overflow-wrap: anywhere; }
    .quiz-film-image { margin-top: 22px; border-radius: 16px; }
    .quiz-container { width: calc(100% - 20px); margin-bottom: 55px; }
    .question-card { padding: 18px 15px; }
    .answer-choices span { min-height: 54px; }
    .metrics { grid-template-columns: 1fr; }
    .metrics article { flex-direction: row; align-items: baseline; gap: 10px; }
    footer { gap: 12px; flex-direction: column; }
    .admin-main { width: calc(100% - 20px); margin-top: 35px; }
    .admin-heading { gap: 18px; }
    .admin-actions { align-items: flex-start; }
    .film-image-editor { padding: 15px; grid-template-columns: 1fr; gap: 18px; }
    .film-image-preview-wrap { min-height: 0; }
    .question-editor-card { padding: 18px 15px; }
    .question-editor-footer { align-items: stretch; flex-direction: column; }
    .question-editor-footer .primary-button { width: 100%; }
    .button-link-inline { min-height: 44px; align-items: center; }
    .participant-actions { flex-direction: column; }
    .table-action { min-height: 40px; }
}

@media (max-width: 390px) {
    .topbar { width: calc(100% - 20px); }
    .identity-button { padding: 9px 12px; font-size: .82rem; }
    .score-card div { padding: 15px 14px; }
    .score-card strong { font-size: 1.3rem; }
    .dialog form { padding: 28px 20px; }
    .answer-result { padding: 16px 14px; }
    .answer-result-heading { grid-template-columns: 1fr auto; }
    .answer-result-heading > span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    * { scroll-behavior: auto !important; transition: none !important; }
}