/* Arena: the Borrowed Eyes ground, two clips, one vote. */
:root{
  --pupil:#0F1012; --sclera:#F1F2EE; --iris:#D08A2E; --lid:#2E2530;
  --ground-hi:#3A2F28; --ground-lo:#1A1512;
  --text-2:rgba(241,242,238,.72); --text-3:rgba(241,242,238,.5);
  --rule:rgba(241,242,238,.13); --surface:rgba(241,242,238,.05);
  color-scheme: dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100svh;background:linear-gradient(var(--ground-hi),var(--ground-lo) 480px) var(--ground-lo);
  color:var(--sclera);font:16px/1.5 Figtree,"Helvetica Neue",Arial,sans-serif;padding-bottom:calc(var(--vote-h,150px) + 20px)}
a{color:var(--iris)}
:focus-visible{outline:2px solid var(--iris);outline-offset:3px}
h1,h2{font-family:Gloock,Georgia,serif;font-weight:400;line-height:1.1;margin:0;text-wrap:balance}
kbd{font:600 11px/1 Figtree,sans-serif;border:1px solid currentColor;border-radius:4px;padding:2px 4px;opacity:.55;margin-right:6px}
@media (hover:none){kbd{display:none}}

.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1100px;margin:0 auto;padding:14px 16px}
.brand{display:flex;align-items:center;gap:10px;color:var(--sclera);text-decoration:none;font-family:Gloock,Georgia,serif;font-size:19px}
.brand svg{width:46px;height:20px}
.bar nav{display:flex;gap:6px}
.bar nav a{color:var(--text-2);text-decoration:none;font-weight:600;font-size:14px;padding:6px 12px;border-radius:999px}
.bar nav a[aria-current]{color:var(--pupil);background:var(--sclera)}

main{max-width:1100px;margin:0 auto;padding:0 16px}
.intro{text-align:center;padding:8px 0 18px}
.eyebrow{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--iris);font-weight:800;margin:0 0 8px}
/* Per-ancestor arena: a plain line with a link out, not a control. */
.scope{margin:0 0 12px;font-size:14.5px;color:var(--text-2);text-wrap:balance}
.scope .full{font-weight:700;color:var(--iris);text-underline-offset:3px;white-space:nowrap}
.scope .full::after{content:" \2192"}
.intro h1{font-size:clamp(28px,5vw,44px)}
.known{margin:8px 0 0;font-weight:600;text-wrap:balance}
.when{color:var(--text-2);margin:6px 0 0;font-weight:500}
.how{color:var(--text-2);max-width:56ch;margin:10px auto 0;font-size:15px}
.how-short{display:none}

.stage{display:grid;grid-template-columns:1fr 1fr;gap:28px;justify-items:center}
.clip{margin:0;display:grid;gap:10px;justify-items:center}
.frame{position:relative;height:clamp(360px,calc(100svh - 400px),760px);aspect-ratio:9/16;max-width:100%;border-radius:18px;overflow:hidden;
  background:var(--pupil);box-shadow:0 0 0 1px var(--rule),0 20px 60px rgba(0,0,0,.45);transition:box-shadow .25s}
.clip.chosen .frame{box-shadow:0 0 0 3px var(--iris),0 20px 60px rgba(0,0,0,.45)}
video{width:100%;height:100%;object-fit:cover;display:block;cursor:pointer}
/* Before a clip plays its frame is dark, so the overlay has to read as "press play": a play
   triangle and a plain label, not just the clip's letter. */
.play{position:absolute;inset:0;border:0;background:rgba(15,16,18,.35);color:var(--sclera);cursor:pointer;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;transition:opacity .2s;font:700 16px/1.2 Figtree,sans-serif}
.play .icon{display:grid;place-items:center;width:84px;height:84px;border-radius:50%;background:var(--iris);box-shadow:0 8px 30px rgba(0,0,0,.45)}
.play .icon::before{content:"";margin-left:7px;border-style:solid;border-width:16px 0 16px 26px;border-color:transparent transparent transparent var(--pupil)}
.play .label{padding:7px 14px;border-radius:999px;background:rgba(15,16,18,.72)}
.play:hover .icon{transform:scale(1.05)}
.playing .play{opacity:0;pointer-events:none}
.progress{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(241,242,238,.18)}
.progress i{display:block;height:100%;width:0;background:var(--iris)}
figcaption{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;justify-content:center;font-size:14px}
.side{font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:12px}
.status{color:var(--text-3)}
.watched .status{color:var(--text-2)}
.reveal{font-family:Gloock,Georgia,serif;font-size:21px;color:var(--sclera);flex-basis:100%;text-align:center}
.reveal b{font-weight:400}
.reveal small{display:block;font:600 12px/1.4 Figtree,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--iris)}

.tabs{display:none}

.vote{position:fixed;left:0;right:0;bottom:0;z-index:5;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(15,16,18,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--rule)}
.hint{margin:0 auto 8px;text-align:center;font-size:13px;color:var(--text-2)}
.choices,.after{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;max-width:760px;margin:0 auto;align-items:center}
.choices button,.after button{font:700 15px/1 Figtree,sans-serif;border-radius:999px;padding:13px 18px;cursor:pointer;
  border:1px solid var(--sclera);background:var(--sclera);color:var(--pupil);min-height:46px}
.choices button.quiet{background:transparent;color:var(--sclera);border-color:var(--rule)}
.choices button:disabled{opacity:.35;cursor:not-allowed}
.after button.primary{background:var(--iris);border-color:var(--iris);color:var(--pupil)}
.after p{margin:0;color:var(--text-2);font-size:14px;flex-basis:100%;text-align:center}

.empty{text-align:center;padding:60px 0;color:var(--text-2)}
.empty h2{color:var(--sclera);font-size:30px;margin-bottom:10px}
.empty-actions{display:flex;flex-wrap:wrap;gap:10px 18px;justify-content:center;align-items:center;margin-top:22px}
.empty a.button,.after a.button{display:inline-flex;align-items:center;font:700 15px/1 Figtree,sans-serif;border-radius:999px;padding:13px 18px;min-height:46px;
  text-decoration:none;border:1px solid var(--iris);background:var(--iris);color:var(--pupil)}
.empty a.button.quiet,.after a.button.quiet{background:transparent;color:var(--sclera);border-color:var(--rule)}

/* Phones: one clip at a time, switch with the A/B tabs. */
@media (max-width:760px){
  .intro{padding:0 0 10px}
  .how{display:none}
  .how-short{display:block;color:var(--text-2);margin:6px 0 0;font-size:14px}
  .scope{margin-bottom:8px}
  .tabs{display:flex;gap:6px;justify-content:center;margin:0 0 10px}
  .tabs button{flex:1;max-width:160px;font:800 15px/1 Figtree,sans-serif;padding:10px;border-radius:999px;border:1px solid var(--rule);
    background:transparent;color:var(--sclera);cursor:pointer}
  .tabs button[aria-selected=true]{background:var(--sclera);color:var(--pupil)}
  .tabs .tick::after{content:""}
  .tabs .done .tick::after{content:" ✓"}
  .tabs .model{display:block;font:600 12px/1.3 Figtree,sans-serif;margin-top:3px}
  .tabs .model:empty{display:none}
  .reveal{display:none}
  .stage{grid-template-columns:1fr}
  .clip:not(.active){display:none}
  /* Fit the clip between the tabs and the voting bar, with a gap above the bar. arena.js measures
     --stage-top (where the clips start), --caption-h (the line under the clip) and --vote-h. */
  .frame{height:auto;width:min(100%,max(150px,calc((100svh - var(--stage-top,250px) - var(--caption-h,36px) - var(--vote-h,170px) - 16px) * 9 / 16)))}
  .choices button{flex:1 1 40%;padding:12px 10px;font-size:14px}
}

/* Share sheet (arena and /c/ pages). */
.share-sheet{border:1px solid var(--rule);border-radius:18px;background:#1d1916;color:var(--sclera);padding:26px 24px 22px;width:min(420px,calc(100vw - 32px))}
.share-sheet::backdrop{background:rgba(15,16,18,.6)}
.share-sheet form{margin:0;position:relative}
.share-sheet h2{font-size:24px;margin:0 30px 6px 0}
.share-note{color:var(--text-2);font-size:14px;margin:0 0 18px}
.share-options{display:grid;gap:8px}
.share-options button,.share-options a{font:700 15px/1 Figtree,sans-serif;border-radius:999px;padding:14px 18px;cursor:pointer;text-align:center;text-decoration:none;
  border:1px solid var(--rule);background:transparent;color:var(--sclera)}
.share-options button:first-child:not([hidden]),.share-options [data-via="x"]{background:var(--sclera);color:var(--pupil);border-color:var(--sclera)}
.share-options [data-via="native"]:not([hidden]) ~ [data-via="x"]{background:transparent;color:var(--sclera);border-color:var(--rule)}
.share-close{position:absolute;top:-10px;right:-6px;border:0;background:none;color:var(--text-2);font-size:28px;cursor:pointer;padding:4px 8px}
.after button.quiet{background:transparent;color:var(--sclera);border-color:var(--rule)}
#share-buttons,#source-links{display:contents}