/* TABOOO Who Wants to Be a Revolutionary — isolated styles */
.twr-root { --twr-bg:#08090f; --twr-panel:#15131c; --twr-panel2:#201923; --twr-red:#ef4855; --twr-ruby:#a81631; --twr-gold:#f2c77e; --twr-ink:#f4efed; --twr-muted:#b6a9b0; --twr-line:rgba(242,199,126,.20); color:var(--twr-ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; line-height:1.45; background:radial-gradient(ellipse at 50% -10%,rgba(150,26,57,.30),transparent 46%),radial-gradient(ellipse at 120% 60%,rgba(217,145,75,.12),transparent 43%),#08090f; border:1px solid rgba(242,199,126,.21); border-radius:22px; overflow:hidden; width:100%; min-height:625px; position:relative; isolation:isolate; box-shadow:0 24px 75px rgba(0,0,0,.36); }
.twr-root *, .twr-root *::before, .twr-root *::after { box-sizing:border-box; }
.twr-root button { font:inherit; cursor:pointer; }
.twr-root button:focus-visible, .twr-root a:focus-visible { outline:3px solid #fff; outline-offset:3px; }
.twr-root .twr-shell { max-width:1190px; margin:auto; padding:24px clamp(15px,4vw,40px) 35px; position:relative; z-index:2; }
.twr-root .twr-shell::before { content:''; position:absolute; z-index:-1; pointer-events:none; left:8%; right:8%; top:180px; height:360px; background:radial-gradient(ellipse at center,rgba(133,16,48,.13),transparent 67%); }
.twr-root .twr-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; }
.twr-root .twr-wordmark { font-weight:950; font-size:18px; color:#fff; letter-spacing:2.8px; }
.twr-root .twr-wordmark span { color:var(--twr-red); }
.twr-root .twr-super { font-size:10px; letter-spacing:2.5px; text-transform:uppercase; color:var(--twr-gold); margin-left:11px; font-weight:750; }
.twr-root .twr-sound { background:transparent; color:#d8ccd0; border:1px solid var(--twr-line); border-radius:9px; padding:8px 11px; font-size:12px; }
.twr-root .twr-hero { text-align:center; position:relative; padding:15px 10px 20px; }
.twr-root .twr-eyebrow { color:var(--twr-gold); text-transform:uppercase; letter-spacing:3px; font-size:11px; font-weight:800; }
.twr-root .twr-title { text-transform:uppercase; line-height:.96; font-size:clamp(35px,6.1vw,74px); letter-spacing:-1.7px; font-weight:950; margin:16px 0; text-shadow:0 7px 30px rgba(0,0,0,.4); }
.twr-root .twr-title strong { display:block; color:var(--twr-gold); font-weight:950; text-shadow:0 7px 40px rgba(242,199,126,.25); }
.twr-root .twr-subtitle { max-width:610px; font-size:clamp(14px,2vw,17px); color:#d4c5cd; margin:0 auto 16px; }
.twr-root .twr-stage { width:min(100%,690px); height:170px; position:relative; margin:12px auto 18px; perspective:550px; overflow:hidden; }
.twr-root .twr-floor { position:absolute; width:82%; height:115px; bottom:-46px; left:9%; border-radius:50%; transform:rotateX(62deg); border:2px solid rgba(242,199,126,.55); box-shadow:0 0 0 20px rgba(226,55,74,.08),0 0 0 44px rgba(226,55,74,.042),0 0 90px 10px rgba(242,64,80,.20); background:radial-gradient(ellipse,rgba(163,35,51,.38),rgba(24,17,27,.8)); }
.twr-root .twr-aura { position:absolute; left:50%; top:12px; width:140px; height:140px; border:1px solid rgba(240,190,124,.57); border-radius:50%; transform:translateX(-50%); box-shadow:0 0 55px rgba(236,69,86,.26),inset 0 0 30px rgba(236,69,86,.18); }
.twr-root .twr-aura::before { content:'✦'; color:var(--twr-gold); position:absolute; inset:0; display:grid; place-items:center; font-size:54px; text-shadow:0 0 18px rgba(255,216,153,.8); }
.twr-root .twr-streak { position:absolute; height:1px; width:38%; background:linear-gradient(90deg,transparent,#df4b61,transparent); top:77px; }
.twr-root .twr-streak.left {left:0;} .twr-root .twr-streak.right {right:0;}
.twr-root .twr-btn { border:1px solid rgba(242,199,126,.36); border-radius:12px; font-weight:850; text-transform:uppercase; letter-spacing:1.3px; font-size:12px; padding:14px 23px; color:#1d1017; background:linear-gradient(125deg,#f9dca1,#e7a35f); box-shadow:0 8px 24px rgba(217,112,48,.17); transition:transform .17s,filter .17s; }
.twr-root .twr-btn:hover:not(:disabled) { transform:translateY(-2px); filter:brightness(1.08); }
.twr-root .twr-btn:disabled { opacity:.43; cursor:not-allowed; }
.twr-root .twr-btn.secondary { background:#241c25; color:#f2d7c6; border:1px solid rgba(242,199,126,.25); box-shadow:none; }
.twr-root .twr-btn.danger { background:#a8213c; color:white; border-color:#d44b65; }
.twr-root .twr-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:19px; }
.twr-root .twr-footnote { color:#8d7f89; font-size:11px; text-align:center; margin-top:20px; }
.twr-root .twr-mini-rules { margin:14px auto 0; text-align:center; color:#beafb6; font-size:12px; }
.twr-root .twr-layout { display:grid; grid-template-columns:minmax(0,1.75fr) minmax(235px,.85fr); gap:17px; align-items:start; }
.twr-root .twr-panel { background:linear-gradient(135deg,rgba(34,25,36,.96),rgba(15,15,23,.95)); border:1px solid var(--twr-line); border-radius:17px; padding:20px; box-shadow:inset 0 1px rgba(255,255,255,.025); }
.twr-root .twr-progressline { display:flex; align-items:center; gap:10px; color:var(--twr-muted); font-size:11px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; }
.twr-root .twr-progressbar { width:100%; height:5px; background:#392e3b; border-radius:10px; overflow:hidden; margin:12px 0 20px; }
.twr-root .twr-progressbar > i { display:block; background:linear-gradient(90deg,var(--twr-ruby),var(--twr-gold)); height:100%; transition:width .3s; }
.twr-root .twr-mission-title { color:var(--twr-gold); font-size:11px; font-weight:800; letter-spacing:2px; margin:0 0 12px; text-transform:uppercase; }
.twr-root .twr-question { font-size:clamp(21px,3vw,30px); line-height:1.25; font-weight:850; margin:0 0 19px; letter-spacing:-.4px; }
.twr-root .twr-options { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.twr-root .twr-option { min-height:82px; width:100%; display:flex; text-align:left; align-items:center; gap:10px; padding:12px; background:linear-gradient(135deg,rgba(51,37,49,.95),rgba(29,26,38,.95)); color:var(--twr-ink); border:1px solid rgba(238,189,122,.25); border-radius:11px; font-size:13.5px; transition:background .16s,transform .16s,border-color .16s; line-height:1.37; }
.twr-root .twr-option:hover:not(:disabled) { border-color:#eeab74; background:#3b2839; transform:translateY(-1px); }
.twr-root .twr-letter { flex:0 0 31px; width:31px; height:31px; border-radius:8px; display:grid; place-items:center; font-weight:850; color:var(--twr-gold); border:1px solid rgba(242,199,126,.28); background:rgba(242,199,126,.055); }
.twr-root .twr-option:disabled { cursor:default; }
.twr-root .twr-option.eliminated { opacity:.27; text-decoration:line-through; }
.twr-root .twr-option.correct { border-color:#80dfab; background:linear-gradient(120deg,rgba(21,105,72,.50),rgba(29,69,60,.4)); color:#e7fff2; }
.twr-root .twr-option.correct .twr-letter { color:#dcffed; border-color:#8ed9a5; }
.twr-root .twr-option.wrong { border-color:#f06b77; background:rgba(142,27,58,.40); }
.twr-root .twr-debrief { border-radius:12px; background:#131d1b; border:1px solid rgba(118,212,164,.32); margin-top:17px; padding:15px; }
.twr-root .twr-debrief.bad { background:#28191f; border-color:rgba(239,91,117,.34); }
.twr-root .twr-debrief h4 { margin:0 0 7px; text-transform:uppercase; letter-spacing:1.1px; font-size:11px; color:#9eebbd; }
.twr-root .twr-debrief.bad h4 { color:#ffa7aa; }
.twr-root .twr-debrief p { color:#e6d9df; margin:0 0 8px; font-size:13px; }
.twr-root .twr-debrief .twr-trap { color:#e1ba8e; }
.twr-root .twr-debrief a { color:#dfb87e; font-size:12px; overflow-wrap:anywhere; }
.twr-root .twr-notice { color:#f8d295; background:rgba(255,188,103,.09); border:1px solid rgba(255,188,103,.21); border-radius:9px; padding:11px 13px; margin-top:13px; font-size:12px; }
.twr-root .twr-quest-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.twr-root .twr-aside-title { font-size:12px; letter-spacing:1.7px; font-weight:900; color:var(--twr-gold); margin:0 0 12px; }
.twr-root .twr-points { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:18px; }
.twr-root .twr-point { border:1px solid var(--twr-line); border-radius:11px; padding:10px; background:rgba(0,0,0,.15); }
.twr-root .twr-point span { display:block; color:var(--twr-muted); font-size:10px; text-transform:uppercase; letter-spacing:.5px; }
.twr-root .twr-point b { display:block; font-size:21px; color:var(--twr-gold); font-variant-numeric:tabular-nums; }
.twr-root .twr-helpers { display:grid; gap:7px; margin-bottom:19px; }
.twr-root .twr-helper { display:flex; align-items:center; justify-content:space-between; text-align:left; padding:10px 12px; color:#f6e9e7; border:1px solid rgba(240,184,124,.20); background:#2b232d; border-radius:10px; gap:8px; font-size:12px; font-weight:750; }
.twr-root .twr-helper:hover:not(:disabled) { border-color:var(--twr-gold); }
.twr-root .twr-helper:disabled { opacity:.38; cursor:not-allowed; }
.twr-root .twr-helper span { color:var(--twr-gold); font-size:10px; font-weight:850; }
.twr-root .twr-helper .twr-used { color:#ad9fa4; }
.twr-root .twr-ladder { display:grid; gap:3px; }
.twr-root .twr-ladder-item { display:flex; align-items:center; justify-content:space-between; padding:5px 8px; color:#857b85; font-size:11px; border:1px solid transparent; border-radius:7px; }
.twr-root .twr-ladder-item i { font-style:normal; color:inherit; margin-right:8px; opacity:.78; }
.twr-root .twr-ladder-item.active { background:linear-gradient(90deg,rgba(149,35,64,.42),rgba(220,146,83,.12)); border-color:rgba(239,164,99,.4); color:#ffdbab; font-weight:900; }
.twr-root .twr-ladder-item.done { color:#c0e3c9; }
.twr-root .twr-ladder-item.milestone { border-left:2px solid #d29b61; }
.twr-root .twr-ladder-item b { font-variant-numeric:tabular-nums; }
.twr-root .twr-outcome { text-align:center; max-width:690px; margin:35px auto 30px; }
.twr-root .twr-outcome h2 { font-size:clamp(32px,6vw,60px); line-height:1.05; margin:12px 0; color:#ffe0a5; }
.twr-root .twr-outcome .twr-finalscore { font-size:clamp(45px,9vw,91px); font-weight:950; color:#f6d3a5; letter-spacing:-2px; margin:9px 0; }
.twr-root .twr-outcome .twr-desc { max-width:510px; color:#decdd3; margin:0 auto 13px; }
.twr-root .twr-detail { color:#bfb0ba; font-size:13px; }
.twr-root .twr-outcome .twr-stage { height:150px; }
.twr-root .twr-sr { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
@media (max-width:780px) { .twr-root .twr-layout { grid-template-columns:1fr; } .twr-root .twr-ladder { grid-template-columns:1fr 1fr; } .twr-root .twr-stage { height:145px; } .twr-root .twr-title { font-size:clamp(31px,8vw,60px); } }
@media (max-width:480px) { .twr-root .twr-options { grid-template-columns:1fr; } .twr-root .twr-option { min-height:60px; } .twr-root .twr-super { display:none; } .twr-root .twr-shell { padding:16px 13px 25px; } .twr-root .twr-panel { padding:14px; } .twr-root .twr-ladder-item { font-size:10px; } .twr-root .twr-title { letter-spacing:-.8px; } .twr-root .twr-btn { padding:12px 16px; } }
@media (prefers-reduced-motion:reduce) { .twr-root *, .twr-root *::before, .twr-root *::after { transition:none!important; animation:none!important; scroll-behavior:auto!important; } }

/* v0.2.1: Isolate question contrast from JNews heading presets and post styles. */
.twr-root .twr-layout .twr-panel h2.twr-question {
  color:#fff6eb !important;
  -webkit-text-fill-color:#fff6eb !important;
  opacity:1 !important;
  background:none !important;
  background-image:none !important;
  text-shadow:0 2px 18px rgba(0,0,0,.42);
}
/* Long game subtitle must remain readable in the header, also on phones. */
.twr-root .twr-brandline { display:flex; align-items:center; flex-wrap:wrap; min-width:0; gap:7px 9px; }
.twr-root .twr-brandline .twr-super { margin-left:0; letter-spacing:1.45px; line-height:1.35; font-size:9px; }
.twr-root .twr-sound { flex:0 0 auto; white-space:nowrap; }
@media (max-width:600px) {
  .twr-root .twr-brandline { flex-direction:column; align-items:flex-start; gap:4px; }
  .twr-root .twr-brandline .twr-super { display:block; font-size:8px; letter-spacing:.65px; max-width:190px; }
  .twr-root .twr-top { align-items:flex-start; }
}

/* v0.2.4: Fix JNews overriding the introductory h2 and reduce oversized questions.
 * Keep styling scoped to this game; do not change site-wide headings. */
.twr-root .twr-hero h2.twr-title {
  color:#fff7f0 !important;
  -webkit-text-fill-color:#fff7f0 !important;
  opacity:1 !important;
  background:none !important;
  background-image:none !important;
}
.twr-root .twr-hero h2.twr-title strong {
  color:#f2c77e !important;
  -webkit-text-fill-color:#f2c77e !important;
  opacity:1 !important;
}
.twr-root .twr-layout .twr-panel h2.twr-question {
  font-size:clamp(18px,2.45vw,25px) !important;
  line-height:1.36 !important;
  letter-spacing:-.2px !important;
}
@media (max-width:480px) {
  .twr-root .twr-layout .twr-panel h2.twr-question {
    font-size:clamp(18px,4.6vw,21px) !important;
    line-height:1.4 !important;
  }
}

/* v0.2.5 — responsive, accessible confirmation while REST requests are in flight. */
.twr-root .twr-network-status[hidden] { display:none !important; }
.twr-root .twr-network-status { display:flex; align-items:center; gap:9px; width:fit-content; max-width:calc(100% - 24px); min-height:36px; padding:8px 14px; position:absolute; z-index:10; left:50%; top:77px; transform:translateX(-50%); color:#fff6e8 !important; background:#2b1e2b; border:1px solid rgba(242,199,126,.7); border-radius:20px; box-shadow:0 9px 25px rgba(0,0,0,.38); font-weight:700; font-size:12px; line-height:1.35; text-align:center; pointer-events:none; }
.twr-root .twr-spinner { display:inline-block; width:14px; height:14px; border:2px solid rgba(242,199,126,.35); border-top-color:#f2c77e; border-radius:50%; animation:twr-spin .75s linear infinite; flex:0 0 14px; }
@keyframes twr-spin { to { transform:rotate(360deg); } }
.twr-root .twr-pending-option { background:rgba(185,117,48,.30) !important; outline:2px solid #f2c77e !important; outline-offset:-2px; opacity:1 !important; }
.twr-root.twr-is-busy .twr-option:disabled:not(.twr-pending-option) { opacity:.70; }
@media (max-width:600px){.twr-root .twr-network-status { top:82px; font-size:11px; max-width:90%; } }
@media (prefers-reduced-motion:reduce) { .twr-root .twr-spinner { animation:none; border-top-color:#fff; } }
