/* KAIJU SCALE — shared styles */
:root{
  --bg:#0a0e17; --bg2:#0f1522; --panel:#141b2b; --panel2:#1b2438; --line:#2a3550;
  --ink:#eef1f7; --muted:#a3adc2; --atomic:#5ad1ff; --atomic-d:#1e8fc2; --hot:#ff6b2c; --warn:#ffd23f; --good:#58e08a; --bad:#ff5a6a;
  --sky1:#0b1324; --sky2:#1a2742; --ground:#05080f; --kaiju:#2f3a44; --lm:#6f7d96; --lm-hi:#ffd23f;
  --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.35);
  --display:"Dela Gothic One", "Arial Black", Impact, sans-serif;
  --body:"Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}
:root[data-theme="light"]{
  --bg:#f4efe4; --bg2:#ebe4d4; --panel:#fffaf0; --panel2:#f1e9d8; --line:#d8ccb3;
  --ink:#1c1b22; --muted:#5d5a66; --atomic:#0a6ea3; --atomic-d:#0a6ea3; --hot:#c8431a; --warn:#a86b00; --good:#1d8a4a; --bad:#c22c3c;
  --sky1:#f9e7c4; --sky2:#f3c99a; --ground:#3a2f2a; --kaiju:#2b2f33; --lm:#7b6e62; --lm-hi:#c8431a;
  --shadow:0 10px 30px rgba(60,40,10,.15);
  color-scheme: light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;overflow-x:hidden}
img,svg,canvas{max-width:100%}
a{color:var(--atomic)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--warn);outline-offset:2px;border-radius:6px}
.skip{position:absolute;left:-999px;top:0;background:var(--warn);color:#000;padding:8px 12px;z-index:100}
.skip:focus{left:8px;top:8px}
.wrap{max-width:1100px;margin:0 auto;padding:0 16px}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.1;letter-spacing:.01em;margin:.2em 0 .4em}
h1{font-size:clamp(2.1rem,7vw,4.2rem)}
h2{font-size:clamp(1.5rem,4.5vw,2.3rem)}
h3{font-size:1.2rem}
p{margin:.4em 0 1em}
.muted{color:var(--muted)}
.small{font-size:.88rem}
.jp{font-family:var(--display);color:var(--hot)}

/* header */
.site-head{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:12px;min-height:58px}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font-family:var(--display);font-size:1.15rem;white-space:nowrap}
.brand svg{width:30px;height:30px}
.nav{display:flex;gap:4px;margin-left:auto;align-items:center}
.nav a{color:var(--ink);text-decoration:none;padding:8px 10px;border-radius:10px;font-weight:600;font-size:.95rem}
.nav a:hover{background:var(--panel2)}
.nav a[aria-current="page"]{background:var(--panel2);color:var(--atomic)}
.icon-btn{background:var(--panel);border:1px solid var(--line);color:var(--ink);border-radius:10px;min-width:40px;height:40px;cursor:pointer;font-size:1rem;display:inline-flex;align-items:center;justify-content:center;padding:0 10px;font-family:var(--body);font-weight:700}
.icon-btn:hover{border-color:var(--atomic)}
.menu-btn{display:none}
@media (max-width:820px){
  .menu-btn{display:inline-flex;margin-left:auto}
  .nav{position:absolute;top:58px;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--bg);border-bottom:1px solid var(--line);padding:8px 16px 16px;display:none}
  .nav.open{display:flex}
  .nav a{padding:12px}
}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:12px 22px;font-family:var(--body);font-weight:700;font-size:1rem;cursor:pointer;text-decoration:none;color:#04131c;background:var(--atomic);box-shadow:0 0 0 0 var(--atomic);transition:transform .12s ease, box-shadow .2s ease, background .2s}
.btn:hover{transform:translateY(-1px);box-shadow:0 0 22px -4px var(--atomic)}
.btn:active{transform:translateY(1px)}
.btn.hot{background:var(--hot);color:#fff}
.btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--line)}
.btn.ghost:hover{border-color:var(--atomic);box-shadow:none}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
:root[data-theme="light"] .btn{color:#fff}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.center{text-align:center;justify-content:center}

/* panels */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.grid{display:grid;gap:16px}
.grid.cards{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;text-decoration:none;color:var(--ink);display:block;transition:transform .15s, border-color .15s}
.card:hover{transform:translateY(-3px);border-color:var(--atomic)}
.card h3{margin-top:.3em}
.card .tag{font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;color:var(--hot);font-weight:700}
.chip{display:inline-block;padding:3px 10px;border-radius:999px;background:var(--panel2);border:1px solid var(--line);font-size:.8rem;font-weight:700}
section{padding:28px 0}

/* hero */
.hero{position:relative;overflow:hidden;padding:26px 0 8px}
.hero .kicker{font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--hot);font-size:.8rem}
.hero h1 .glow{color:var(--atomic);text-shadow:0 0 28px color-mix(in srgb,var(--atomic) 60%,transparent)}
.hero-scene{height:min(46vh,380px);margin-top:10px}
.lede{font-size:1.1rem;max-width:62ch}

/* scene */
.scene{position:relative;width:100%;border-radius:var(--radius);overflow:hidden;background:linear-gradient(180deg,var(--sky1),var(--sky2));border:1px solid var(--line)}
.scene svg{display:block;width:100%;height:100%}
.scene .grid-line{stroke:var(--ink);stroke-opacity:.12}
.scene .grid-text{fill:var(--muted);font-family:var(--body);font-weight:700}
.scene .label{fill:var(--ink);font-family:var(--body);font-weight:700;paint-order:stroke;stroke:var(--bg);stroke-linejoin:round}
.scene .label.sub{fill:var(--muted);font-weight:500}
.scene .ground{fill:var(--ground)}
.lm{fill:var(--lm)}
.lm.hi{fill:var(--lm-hi)}
.scene .unknown{fill:var(--hot)}
.scene .pin{fill:var(--warn)}
.scene .mlines{stroke:var(--warn);stroke-dasharray:4 4}
.scene .item-ghost path,.scene .item-ghost circle,.scene .item-ghost text{fill:var(--hot) !important;fill-opacity:.85}
.scene .kaiju{filter:drop-shadow(0 0 3px color-mix(in srgb,var(--atomic) 55%,transparent))}
:root[data-theme="light"] .scene .kaiju{filter:none}
.stars circle{fill:#fff;opacity:.6}
:root[data-theme="light"] .stars{display:none}

/* game */
.game{display:grid;gap:14px}
.hud{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.hud .score{font-family:var(--display);font-size:1.5rem;color:var(--atomic)}
.prompt{font-size:1.25rem;font-weight:700;margin:0}
.prompt b{color:var(--hot)}
.game-scene{height:min(52vh,440px)}
.guess-box{display:grid;gap:8px}
.readout{font-family:var(--display);font-size:2rem;color:var(--hot);text-align:center;line-height:1}
.readout small{font-family:var(--body);font-size:.95rem;color:var(--muted);font-weight:700}
input[type=range]{width:100%;accent-color:var(--hot);height:34px}
.nudges{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.result-line{font-size:1.1rem;font-weight:700}
.pts{font-family:var(--display);font-size:2.2rem;color:var(--good)}
.pts.mid{color:var(--warn)}
.pts.low{color:var(--bad)}
.fact{background:var(--panel2);border-left:4px solid var(--atomic);padding:10px 14px;border-radius:8px;margin:8px 0}
.modes{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.mode{background:var(--panel);border:2px solid var(--line);border-radius:var(--radius);padding:16px;cursor:pointer;text-align:left;color:var(--ink);font-family:var(--body);font-size:1rem}
.mode:hover,.mode:focus-visible{border-color:var(--hot)}
.mode strong{display:block;font-family:var(--display);font-weight:400;font-size:1.2rem;margin-bottom:4px}
.mode .best{display:block;margin-top:8px;color:var(--atomic);font-weight:700;font-size:.9rem}
.tos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tos .btn{padding:16px 10px;font-size:1.1rem}
.duel .panel{min-width:0}
.duel h3{font-size:clamp(.9rem,3.6vw,1.2rem);overflow-wrap:anywhere;hyphens:auto}
.breakdown li span{min-width:0;overflow-wrap:anywhere}
.lives{font-size:1.3rem;letter-spacing:4px}
.hidden{display:none !important}
.roundbar{display:flex;gap:4px}
.roundbar i{flex:1;height:6px;border-radius:3px;background:var(--line)}
.roundbar i.done{background:var(--atomic)}
.roundbar i.now{background:var(--hot)}

/* results */
.result-card canvas{width:100%;height:auto;border-radius:12px;border:1px solid var(--line);display:block}
.breakdown{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.breakdown li{display:flex;justify-content:space-between;gap:10px;background:var(--panel2);padding:8px 12px;border-radius:10px;font-size:.95rem}
.breakdown li span:last-child{font-weight:700;white-space:nowrap}

/* forms */
label{font-weight:700}
select,input[type=number],input[type=text]{font-family:var(--body);font-size:1rem;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);max-width:100%}
.field{display:grid;gap:4px}
.picker{display:flex;flex-wrap:wrap;gap:6px}
.picker button{background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-family:var(--body);font-size:.9rem;cursor:pointer}
.picker button[aria-pressed="true"]{background:var(--hot);border-color:var(--hot);color:#fff}
.picker button:hover{border-color:var(--hot)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.stat{background:var(--panel2);border-radius:12px;padding:12px}
.stat b{display:block;font-family:var(--display);font-weight:400;font-size:1.4rem;color:var(--atomic)}

/* roar */
.roar-stage{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:860px){.roar-stage{grid-template-columns:1.1fr 1fr}}
.scope{width:100%;height:160px;background:#03060c;border-radius:12px;border:1px solid var(--line);display:block}
.roar-btn{width:100%;padding:22px;font-size:1.4rem;font-family:var(--display);font-weight:400;letter-spacing:.04em;user-select:none;-webkit-user-select:none;touch-action:none}
.sliders{display:grid;gap:12px}
.slider{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center}
.slider input{grid-column:1 / -1}
.slider output{font-weight:700;color:var(--atomic)}
.slider .hint{grid-column:1/-1;font-size:.8rem;color:var(--muted);margin-top:-4px}
.roar-kaiju{height:220px}
.roar-kaiju svg{width:100%;height:100%}
.breath{transition:opacity .15s}

/* quiz */
.q-opts{display:grid;gap:10px}
.q-opt{text-align:left;background:var(--panel2);color:var(--ink);border:2px solid var(--line);border-radius:12px;padding:14px 16px;font-family:var(--body);font-size:1rem;cursor:pointer}
.q-opt:hover:not([disabled]){border-color:var(--atomic)}
.q-opt.right{border-color:var(--good);background:color-mix(in srgb,var(--good) 18%,var(--panel2))}
.q-opt.wrong{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 18%,var(--panel2))}
.q-opt[disabled]{cursor:default}

/* timeline */
.chart{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.chart svg{display:block}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:.9rem}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:12px;height:12px;border-radius:3px;display:inline-block}
.film-detail{min-height:120px}
.bar{cursor:pointer}
.bar:hover rect,.bar:focus rect{filter:brightness(1.25)}

/* footer */
.site-foot{border-top:1px solid var(--line);margin-top:30px;padding:24px 0 40px;color:var(--muted);font-size:.9rem}
.site-foot a{color:var(--muted)}

/* toast */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(30px);background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:999px;font-weight:700;opacity:0;pointer-events:none;transition:all .25s;z-index:200}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* animation */
@keyframes stomp{0%{transform:translateY(0)}40%{transform:translateY(3px)}100%{transform:translateY(0)}}
.shake{animation:stomp .25s ease 2}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.rise{animation:rise .4s ease both}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}