:root{ --bg:#0b0c10; --ink:#e8eefc; --muted:#9aa6bd; --line:#1b2133; --accent:#6aa3ff; --header:#0b1220; }
*{box-sizing:border-box} html,body{height:100%}

body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
h1{margin:16px 0 8px;text-align:center;font-weight:800;letter-spacing:.2px}
.controls{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;margin:6px 0 16px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.seg input{display:none}
.seg label{padding:8px 12px;cursor:pointer;border-right:1px solid var(--line);color:var(--muted)}
.seg label:last-child{border-right:none}
.seg input:checked + label{background:#16233e;color:var(--ink)}
button {
  background: var(--accent);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
button:disabled { opacity: 0.6; cursor: not-allowed; }
.qbtn { background: var(--accent); border: 1px solid var(--line); }

.topRow{display:grid;gap:16px;justify-content:center}
.twoCols{grid-template-columns:min(46vw,820px) min(46vw,820px)}
.oneCol{grid-template-columns:min(92vw,1020px)}
.card{position:relative;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#0a0f1a}
.title{position:absolute;top:8px;left:10px;font-size:12px;color:var(--muted);background:#0b1220;border:1px solid var(--line);padding:3px 8px;border-radius:10px}
video,canvas{display:block;width:100%;height:auto}

.memeArea{margin:18px auto;display:flex;justify-content:center;align-items:center;min-height:36vh;max-width:min(92vw,1020px);border:1px dashed #22304d;border-radius:16px;background:#0a0f1a;position:relative}
.memeArea img{max-width:min(90%,720px);max-height:32vh;border-radius:12px;box-shadow:0 20px 50px rgba(0,0,0,.45);
opacity:0;transform:scale(.98);position:absolute;transition:opacity .18s ease, transform .18s ease}
.memeArea img.show{opacity:1;transform:scale(1)}

.status{margin:6px 0 14px;text-align:center;color:#b9c6e4}
.hide{display:none!important}

/* ===== Modal & Quiz UI ===== */
.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:saturate(120%) blur(3px);z-index:90}
.modal{position:fixed;inset:auto 0 0 0;max-width:min(92vw,840px);margin:6vh auto;z-index:91}
.modalInner{background:#0a0f1a;border:1px solid var(--line);border-radius:16px;padding:18px 18px 14px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.modal h2{margin:0 0 8px;font-size:18px;letter-spacing:.2px}
.modal p{color:#c7d2f0;margin:6px 0}
.modal .muted{color:#9fb0d4}
.modal .chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 2px}
.chip{border:1px solid var(--line);background:#0b1220;border-radius:999px;padding:6px 10px;font-size:12px;color:#cfe0ff}
.modal .close{float:right;transform:translateY(-4px);background:#111a2a}
hr.sep{border:none;border-top:1px solid var(--line);margin:12px 0}

#quizBar{position:sticky;top:0;z-index:20;margin:0 auto 10px;max-width:min(92vw,1020px)}
.qwrap{display:flex;gap:10px;align-items:center;justify-content:space-between;border:1px solid var(--line);background:#0b1220;border-radius:12px;padding:10px}
.qleft{display:flex;align-items:center;gap:10px}
.qpill{font-size:12px;border:1px solid var(--line);background:#0a0f1a;border-radius:999px;padding:4px 8px;color:#cfe0ff}
.qtitle{font-weight:700}
.qt{font-variant-numeric:tabular-nums}
.qright{display:flex;gap:8px;align-items:center}
.qbtn{background:#13223b;border:1px solid #1c2d4d}  /* (will be overridden at end) */

.tabs{display:flex;gap:6px;margin:6px 0 10px}
.tab{padding:6px 10px;border:1px solid var(--line);background:#0b1220;border-radius:10px;font-size:13px;cursor:pointer}
.tab.active{background:#16233e}
.table{width:100%;border-collapse:collapse;margin-top:6px}
.table th,.table td{border-bottom:1px solid var(--line);padding:8px;text-align:left;font-size:14px}
.table th{color:#9fb0d4;font-weight:600}
small.dim{color:#95a6c7}
input[type="text"], input[type="number"] {
  background:#0b1220;
  border:1px solid var(--line);
  color:var(--ink);
  border-radius:8px;
  padding:6px 8px;
}
.inline-form{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0}

/* ===== Side success flashes (left/right margins) ===== */
.sideFlash{
  position:fixed; top:0; bottom:0; pointer-events:none;
  background-size:100% 100%; background-position:center; background-repeat:no-repeat;
  opacity:0; transition:opacity .12s ease; z-index:85;
}
.sideFlash.show{ opacity:1; }
#flashL{ left:0; }
#flashR{ right:0; }

/* === tighter layout overrides (paste at end of your existing <style>) === */
.twoCols{ grid-template-columns:min(38vw,640px) min(38vw,640px); }
.oneCol{ grid-template-columns:min(86vw,880px); }
.memeArea{ max-width:min(86vw,880px); }
#quizBar{  max-width:min(86vw,880px);  }
video, canvas{ width:100%; height:auto; object-fit:cover; }

.successFlash{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.successFlash img{
  max-width:220px; max-height:220px;
  width:auto; height:auto; object-fit:contain;
  opacity:0; transform:scale(.9);
  transition:opacity .12s ease, transform .12s ease;
}
.successFlash.show img{ opacity:1; transform:scale(1); }

/* ---------- THEME OVERRIDES (end of stylesheet so it wins) ---------- */
.seg input:checked + label,
.title,
.qwrap,
.qpill,
.tab,
.tab.active {
  background: var(--header) !important;
  color: var(--ink);
  border-color: var(--line);
}
.qbtn {
  background: var(--accent) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink);
}

.table th, .table td { color: var(--ink) !important; }

/* Modal text always readable on dark modal */
.modalInner{
  --ink: #e8eefc;
  --muted: #c7d2f0;
  color: var(--ink);
}
.modalInner h2,
.modalInner p,
.modalInner .muted,
.modalInner small,
.modalInner strong,
.modalInner .table th,
.modalInner .table td{
  color: var(--ink) !important;
}