* { box-sizing: border-box }
html,body { margin:0; padding:0; background:#f7f7f7; color:#222;
  font-family:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:15.5px; line-height:1.55; }
.mono   { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9em; }
.dim    { color:#666; }
.small  { font-size:.82em; }
.tight  { margin:.3rem 0; padding-left:1.2rem; }
.err    { color:#b00020; }

/* -------- landing overlay -------- */
.overlay { position:fixed; inset:0; display:flex; align-items:flex-start; justify-content:center;
           padding:2.5rem 1.5rem; background:#f7f7f7; overflow-y:auto; z-index:10; }
.overlay[hidden] { display:none !important; }   /* beats display:flex */

.card.landing-card {
  max-width: 960px; width:100%; background:white; padding:2.6rem 3rem;
  border-radius:14px; box-shadow:0 6px 32px rgba(0,0,0,.08); font-size:1.02rem;
}
.landing-card h1 { margin:0 0 1rem; font-size:1.8rem; }
.landing-card h2 { margin:1.6rem 0 .5rem; font-size:1.05rem; text-transform:uppercase;
                    letter-spacing:.05em; color:#3a6ea5; }
.landing-card .lede { font-size:1.08rem; margin:.4rem 0 1.6rem; }
.landing-section { margin:1.4rem 0; }
.landing-section p { margin:.4rem 0; }

.vest-legend { list-style:none; padding:0; margin:.6rem 0;
               display:grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap:.5rem; }
.vest-legend li { display:flex; align-items:center; gap:.6rem;
                  padding:.45rem .7rem; background:#f5f5f5; border-radius:6px; }
.vest-swatch { display:inline-block; width:1.2rem; height:1.2rem; border-radius:4px; }

.landing-actions { margin-top:2rem; text-align:center; }
.primary.big { padding:.9rem 2.6rem; font-size:1.15rem; border-radius:8px; }

/* -------- header/topbar -------- */
.topbar { display:flex; align-items:center; gap:1rem; padding:.6rem 1.2rem; background:white;
          border-bottom:1px solid #e2e2e2; position:sticky; top:0; z-index:5; }
.progressWrap { flex:1; display:flex; align-items:center; gap:.6rem; max-width:1000px; margin:0 auto; }
.progressLabel { color:#666; text-transform:uppercase; letter-spacing:.06em; }
.progressBar { flex:1; height:8px; background:#e5e5e5; border-radius:4px; overflow:hidden; }
.progressBar > div { height:100%; background:#3a6ea5; width:0%; transition:width .3s; }

/* single centered column; wide video at top, form below */
main#app { max-width:1400px; margin:1.2rem auto; padding:0 1rem 4rem;
           display:flex; flex-direction:column; gap:1.4rem; }

.video-pane, .form-pane { background:white; padding:1.2rem 1.6rem; border-radius:12px;
                          box-shadow:0 2px 12px rgba(0,0,0,.04); width:100%; }
.form-pane { max-width:1000px; margin:0 auto; }

.clip-meta { display:flex; gap:1rem; margin-bottom:.6rem; font-size:.85rem; align-items:center; }
.savedTag { margin-left:auto; color:#2b7a2b; font-weight:600; }

.video-wrap { position:relative; width:100%; max-width:1400px; margin:0 auto;
              background:#000; border-radius:8px; overflow:hidden; }
.video-wrap video { width:100%; max-height:82vh; display:block; background:#000; }

.video-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
                 background:rgba(0,0,0,.62); z-index:2; }
.video-overlay[hidden] { display:none; }
.play-btn { padding:1.1rem 2.6rem; font-size:1.4rem; border:0; border-radius:10px;
            background:#3a6ea5; color:white; cursor:pointer; box-shadow:0 4px 20px rgba(0,0,0,.4);
            font-family:inherit; }
.play-btn:hover { background:#2b5680; }

.hint-inline { margin:.5rem 0 0; text-align:center; }

/* -------- questions -------- */
.qblock { margin:1rem 0; }
.qblock .q { font-weight:600; margin:0 0 .4rem; }
.qhelp    { color:#666; font-size:.9em; margin:.1rem 0 .4rem; }

.opts { display:flex; gap:.35rem; flex-wrap:wrap; }
.opts .opt {
  flex:1; min-width:0; padding:.5rem .3rem; background:#f0f0f0; border:1px solid #d0d0d0;
  border-radius:6px; cursor:pointer; font-family:inherit; font-size:.9rem;
  transition:background .15s,border-color .15s;
  display:flex; align-items:center; justify-content:center; gap:.35rem;
}
.opts .opt:hover:not(:disabled) { background:#e4e4e4; }
.opts .opt.selected { background:#3a6ea5; color:white; border-color:#2b5680; }
.opts .opt.selected .small.dim { color:rgba(255,255,255,.85); }
.opts .opt:disabled { opacity:.45; cursor:not-allowed; }

.opts.leader .opt { flex:1; min-width:7.5rem; }
.vest-dot { display:inline-block; width:.9rem; height:.9rem; border-radius:50%; border:1px solid #999;
            flex-shrink:0; }
.vest-btn.vest-1 .vest-dot { background:#f5f5f5; border-color:#bbb; }
.vest-btn.vest-2 .vest-dot { background:#3aa653; border-color:#2b7d3f; }
.vest-btn.vest-3 .vest-dot { background:#ea7a1f; border-color:#c05a10; }
.vest-btn.vest-4 .vest-dot { background:#f2c22a; border-color:#c99a00; }
.vest-btn.vest-5 .vest-dot { background:#2e6fbf; border-color:#1e548f; }

/* ranks grid */
.ranksGrid { display:flex; flex-direction:column; gap:.3rem; }
.ranksHeader, .ranksRow { display:grid; grid-template-columns: 12rem repeat(5, 1fr); gap:.3rem; align-items:center; }
.rankColHead { font-size:.85em; color:#666; text-align:center; }
.ranksRowLabel { font-weight:600; display:flex; align-items:center; gap:.5rem; }
.rankCell { padding:.5rem 0; text-align:center; background:#f0f0f0; border:1px solid #d0d0d0;
            border-radius:6px; cursor:pointer; }
.rankCell.selected { background:#3a6ea5; color:white; border-color:#2b5680; }
.rankCell.collide  { background:#b00020; color:white; border-color:#800017; }

textarea#freeText { width:100%; padding:.55rem .7rem; border:1px solid #bbb; border-radius:6px;
                    font-family:inherit; font-size:.95rem; resize:vertical; }

.footerbar { display:flex; align-items:center; gap:1rem; margin-top:1rem; }
.primary { padding:.65rem 1.4rem; font-size:1rem; border:0; border-radius:6px;
           background:#3a6ea5; color:white; cursor:pointer; font-family:inherit; }
.primary:disabled { background:#b7c3d0; cursor:not-allowed; }
.primary:not(:disabled):hover { background:#2b5680; }

/* -------- completion / done card -------- */
.done-card { text-align:center; padding:2rem 1rem; }
.done-card h2 { margin:0 0 1rem; font-size:1.8rem; color:#2b7a2b; }
.done-code { display:inline-block; margin:.4rem 0 .8rem; padding:.9rem 1.6rem;
             background:#f4f7fa; border:2px dashed #3a6ea5; border-radius:8px;
             font-family:'JetBrains Mono',ui-monospace,monospace; font-size:1.6rem;
             letter-spacing:.15em; font-weight:700; color:#1e3a5f;
             user-select:all; -webkit-user-select:all; }