/* AuraFarmer — mobile-first (ADR 0009). Dark stage, acid-green aura. */
:root {
  --bg: #0b0f0a; --fg: #f3f7ee; --muted: #8a9a80; --aura: #b7ff5c; --aura-dim: #5e8f1f;
  --danger: #ff5c7a; --card: #151c12; --line: #22301c;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
body { min-height: 100dvh; display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom); }
a { color: var(--aura); }
main { flex: 1; padding: 1rem; max-width: 640px; width: 100%; margin: 0 auto; }
h1 { font-size: 1.75rem; line-height: 1.1; margin: 0 0 .5rem; letter-spacing: -.02em; }
.muted { color: var(--muted); } .small { font-size: .85rem; }

.top { display: flex; justify-content: space-between; align-items: center; padding: .75rem 1rem; border-bottom: 1px solid var(--line); gap: 1rem; }
.top nav { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; font-size: .9rem; }
.brand { font-weight: 900; text-decoration: none; color: var(--fg); letter-spacing: -.03em; }
footer { padding: 1rem; text-align: center; color: var(--muted); font-size: .8rem; }
.flash { margin: 0; padding: .6rem 1rem; font-size: .9rem; } .notice { background: #1d2a14; } .alert { background: #3a1420; }

.btn, .linkish { font: inherit; cursor: pointer; border-radius: 999px; padding: .6rem 1.2rem; border: 1px solid var(--line); background: var(--card); color: var(--fg); }
.btn.primary { background: var(--aura); color: #0b0f0a; border-color: var(--aura); font-weight: 700; }
.btn.big { padding: 1rem 2rem; font-size: 1.15rem; width: 100%; }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.linkish { background: none; border: none; color: var(--aura); padding: 0; text-decoration: underline; }
form.inline { display: inline-flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
input[type=text], textarea { font: inherit; width: 100%; padding: .7rem .9rem; border-radius: .6rem; border: 1px solid var(--line); background: var(--card); color: var(--fg); margin: .25rem 0 1rem; }
label { display: block; font-weight: 600; } .check { display: flex; gap: .5rem; align-items: flex-start; font-weight: 400; margin-bottom: 1rem; }
.errors { color: var(--danger); padding-left: 1.2rem; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 1rem; padding: 1.25rem; margin-bottom: 1rem; }
table { width: 100%; border-collapse: collapse; } td, th { padding: .5rem .4rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; } tr.me { background: #1d2a14; }

.hero { text-align: center; padding: 2rem 0; }
.hero h1 { font-size: 2.6rem; font-weight: 900; }
.big-number { font-size: 4rem; font-weight: 900; line-height: 1; margin: .5rem 0; color: var(--aura); }
.big-number .small { font-size: 1rem; color: var(--muted); font-weight: 400; }
.pulse { animation: pulse 1.4s ease-in-out infinite; } @keyframes pulse { 50% { opacity: .4; } }

/* stage: portrait tiles */
.stage { position: relative; width: 100%; border-radius: 1rem; overflow: hidden; background: #000; }
.stage.single { aspect-ratio: 3 / 4; }
.stage.duo { aspect-ratio: 9 / 16; max-height: 70dvh; }
.tile { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile.local { transform: scaleX(-1); }
.stage.duo .local { position: absolute; right: .75rem; bottom: .75rem; width: 30%; height: auto; aspect-ratio: 3 / 4; border-radius: .75rem; border: 2px solid var(--aura); z-index: 2; }
.stage.duo .remote { position: absolute; inset: 0; }
@media (min-width: 720px) { .stage.duo { aspect-ratio: 16 / 9; max-height: 70vh; } .stage.duo .local { width: 22%; } }

.overlay { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(11,15,10,.72); backdrop-filter: blur(6px); text-align: center; }
.overlay.hidden { display: none; }
.phase { font-size: 1.5rem; font-weight: 800; margin: .5rem 0 0; }
.countdown { font-size: 5rem; font-weight: 900; color: var(--aura); margin: 0; line-height: 1; min-height: 5rem; }
.aura-ring { width: 120px; height: 120px; border-radius: 50%; border: 6px solid var(--aura-dim); border-top-color: var(--aura); display: none; }
.judging .aura-ring { display: block; animation: spin 1.1s linear infinite, glow 2s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes glow { 50% { box-shadow: 0 0 60px 10px rgba(183,255,92,.35); } }

/* Recording timer badge — visible while the overlay is hidden */
.rec-timer { position: absolute; top: .75rem; left: 50%; transform: translateX(-50%); z-index: 2; font-size: 1.25rem; font-weight: 900; color: var(--aura); background: rgba(11,15,10,.65); border: 1px solid var(--aura-dim); border-radius: 999px; padding: .3rem .9rem; }
.rec-timer.hidden { display: none; }

/* Jury (ADR 0012): bot votes popping in during judging */
.jury-tally { font-size: 1.75rem; font-weight: 900; color: var(--aura); margin: .25rem 0 0; min-height: 1.75rem; line-height: 1; }
.jury { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; max-width: 92%; margin-top: .75rem; }
.juror { display: inline-flex; gap: .35rem; align-items: baseline; font-size: .8rem; padding: .25rem .65rem; border-radius: 999px; background: rgba(183,255,92,.08); border: 1px solid var(--aura-dim); animation: pop .25s ease-out; }
.juror .juror-name { opacity: .75; }
.juror .juror-vote { color: var(--aura); font-weight: 700; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }

.result { text-align: center; padding: 1.5rem 0; } .result.won h1 { color: var(--aura); }
.result h1 { font-size: 1.6rem; }
.verdict-tally { font-size: 3rem; font-weight: 900; color: var(--aura); margin: .5rem 0 0; line-height: 1; }
.result.lost .verdict-tally { color: var(--fg, #e8f2e4); opacity: .85; }
.result .jury { margin: .75rem auto 0; }
.juror.for-me { border-color: var(--aura); }
.juror.for-them { opacity: .65; }
.actions { display: flex; flex-direction: column; gap: .75rem; align-items: center; margin-top: 1.5rem; }
.profile { text-align: center; padding: 1.5rem 0; }
details.danger { margin-top: 2rem; }
.prose h2 { font-size: 1.1rem; margin-top: 1.5rem; }

/* Reserved ad slots (ADR 0009); empty until AdSense is wired. */
.ad-slot { min-height: 100px; margin: 1rem auto; max-width: 640px; border: 1px dashed var(--line); border-radius: .5rem; opacity: .3; }
.ad-slot.strip { min-height: 60px; margin: .5rem 0 0; }
.ad-slot:empty::after { content: "ad"; display: block; text-align: center; color: var(--muted); font-size: .7rem; line-height: 60px; }

/* admin */
body.admin main { max-width: 1100px; }
.clips { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin: 1rem 0; }
.clips video { width: 100%; border-radius: .5rem; background: #000; }
.clips figure { margin: 0; } .clips figcaption { font-size: .85rem; }
blockquote { border-left: 3px solid var(--aura-dim); margin: .5rem 0; padding-left: .75rem; }