/* ══════════════════════════════════════════════
   SURVIVE THE VOLCANO — styles
   ══════════════════════════════════════════════ */
:root{
  --bg:#0a0709;
  --bg-2:#120c11;
  --panel:rgba(28,18,22,.72);
  --panel-line:rgba(255,120,50,.16);
  --ink:#f4ece8;
  --ink-dim:#b9a8a2;
  --ink-faint:#8a7871;
  --lava:#ff5b1e;
  --lava-hot:#ffb03a;
  --ember:#ff8a3d;
  --green:#3ddc84;
  --amber:#ffb020;
  --red:#ff3b30;
  --blue:#4dabff;
  --r:16px;
  --shadow:0 18px 50px rgba(0,0,0,.55);
  --font:'Segoe UI Variable','Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --glow:255,90,25;
  --tint-1:#fff3d6; --tint-2:#ffb03a; --tint-3:#ff4a17;
}
/* difficulty themes — colour the home glow, title and buttons */
body.t-easy{ --lava:#25c26a; --lava-hot:#8fe36b; --ember:#5fd98a; --glow:40,200,110;
  --tint-1:#eafff0; --tint-2:#8fe36b; --tint-3:#0f9c57; }
body.t-medium{ --lava:#ff5b1e; --lava-hot:#ffb03a; --ember:#ff8a3d; --glow:255,90,25;
  --tint-1:#fff3d6; --tint-2:#ffb03a; --tint-3:#ff4a17; }
body.t-hard{ --lava:#ff1f0f; --lava-hot:#ff7a5a; --ember:#ff4a2e; --glow:255,40,25;
  --tint-1:#ffe4de; --tint-2:#ff7a5a; --tint-3:#a5140a; }
body{transition:--glow .3s}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;min-height:100%;overflow-x:hidden;max-width:100%}
body{
  background:
    radial-gradient(1200px 700px at 50% 108%, #55160a 0%, rgba(85,22,10,0) 62%),
    radial-gradient(900px 500px at 12% -8%, #2a1030 0%, rgba(42,16,48,0) 60%),
    linear-gradient(180deg,#0a0709 0%,#140c10 60%,#1b0d0b 100%);
  background-attachment:fixed;
  color:var(--ink);
  font-family:var(--font);
  overflow-x:hidden;
  letter-spacing:.2px;
}
body.shake #screen-game{animation:shake .38s linear infinite}
body.shake-hard #screen-game{animation:shakeHard .22s linear infinite}
@keyframes shake{0%{transform:translate(0,0)}25%{transform:translate(-3px,2px)}50%{transform:translate(3px,-2px)}75%{transform:translate(-2px,-3px)}100%{transform:translate(0,0)}}
@keyframes shakeHard{0%{transform:translate(0,0) rotate(0)}20%{transform:translate(-9px,6px) rotate(-.35deg)}40%{transform:translate(8px,-7px) rotate(.35deg)}60%{transform:translate(-7px,-6px) rotate(-.2deg)}80%{transform:translate(9px,5px) rotate(.25deg)}100%{transform:translate(0,0)}}
@media (prefers-reduced-motion:reduce){
  body.shake #screen-game,body.shake-hard #screen-game{animation:none}
}

/* falling ash */
#ashfall{position:fixed;inset:0;pointer-events:none;z-index:40;opacity:0;transition:opacity 1.2s ease}
#ashfall.on{opacity:1}
#ashfall span{position:absolute;top:-12vh;border-radius:50%;background:#cfc6c0;opacity:.5;animation:fall linear infinite}
@keyframes fall{to{transform:translateY(118vh) translateX(var(--dx,20px))}}

/* ══════ screens ══════ */
.screen{display:none;min-height:100vh;min-height:100dvh}
.screen.active{display:block}

/* ══════ buttons ══════ */
.btn{
  font-family:var(--font);font-weight:800;letter-spacing:1.2px;cursor:pointer;
  border-radius:12px;border:1px solid transparent;transition:transform .12s ease,box-shadow .2s ease,background .2s ease,border-color .2s;
  padding:12px 20px;font-size:14px;color:var(--ink);background:rgba(255,255,255,.06);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-primary{
  background:linear-gradient(135deg,var(--lava-hot),var(--lava) 72%);color:#180903;
  box-shadow:0 10px 30px rgba(var(--glow),.36),inset 0 1px 0 rgba(255,255,255,.4);
  transition:background .35s ease,box-shadow .35s ease,transform .12s ease;
}
.btn-primary:hover{box-shadow:0 16px 44px rgba(var(--glow),.5),inset 0 1px 0 rgba(255,255,255,.5)}
.btn-huge{padding:20px 54px;font-size:20px;border-radius:16px}
.btn-ghost{background:rgba(255,255,255,.05);border-color:rgba(255,140,60,.25);color:var(--ink-dim)}
.btn-ghost:hover{border-color:var(--ember);color:var(--ink)}
.btn-mini{padding:8px 12px;font-size:11.5px;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.09)}
.btn-danger-mini{color:#ff9a8f;border-color:rgba(255,60,50,.3)}

/* ══════ HOME ══════ */
#screen-home{display:none;place-items:center;padding:40px 20px 60px;position:relative}
#screen-home.active{display:grid}
.home-glow{
  position:absolute;bottom:-32vh;left:50%;transform:translateX(-50%);
  width:min(1100px,100vw);height:70vh;pointer-events:none;
  background:radial-gradient(closest-side,rgba(var(--glow),.42),rgba(var(--glow),0) 72%);
  filter:blur(14px);animation:breathe 5.5s ease-in-out infinite;transition:background .35s ease;
}
@keyframes breathe{0%,100%{opacity:.55;transform:translateX(-50%) scale(1)}50%{opacity:.95;transform:translateX(-50%) scale(1.07)}}
.home-inner{position:relative;z-index:2;text-align:center;max-width:1000px;width:100%;animation:riseIn .7s cubic-bezier(.2,.8,.25,1) both}
@keyframes riseIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.home-badge{
  display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:3px;color:#ffb884;
  border:1px solid rgba(255,140,60,.35);background:rgba(255,110,40,.08);
  padding:8px 16px;border-radius:999px;margin-bottom:22px;
}
.title{
  font-size:clamp(42px,10.5vw,104px);line-height:.9;margin:0 0 18px;font-weight:900;letter-spacing:-1px;
  background:linear-gradient(180deg,var(--tint-1) 0%,var(--tint-2) 42%,var(--tint-3) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 26px rgba(var(--glow),.45));
  transition:filter .35s ease;
}
.title-the{display:block;font-size:.36em;letter-spacing:14px;-webkit-text-fill-color:var(--tint-2);color:var(--tint-2);margin:.1em 0}
.home-badge,.best strong{transition:color .35s ease,border-color .35s ease}
.home-badge{color:var(--tint-2);border-color:rgba(var(--glow),.4);background:rgba(var(--glow),.09)}
.best strong{color:var(--tint-2)}
.tagline{color:var(--ink-dim);font-size:clamp(14px,2.2vw,18.5px);line-height:1.7;margin:0 auto 34px;max-width:620px}
.difficulty-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:30px}
.diff-card{
  cursor:pointer;text-align:left;padding:18px;border-radius:var(--r);
  background:var(--panel);border:1.5px solid rgba(255,255,255,.08);
  color:var(--ink);display:grid;gap:6px;transition:.2s;backdrop-filter:blur(8px);font-family:var(--font);
}
.diff-card:hover{border-color:rgba(var(--glow),.6);transform:translateY(-3px)}
.diff-card.selected{border-color:var(--lava);background:linear-gradient(180deg,rgba(var(--glow),.18),rgba(var(--glow),.05));box-shadow:0 12px 34px rgba(var(--glow),.28)}
.diff-icon{font-size:22px}
.diff-name{font-weight:900;letter-spacing:2.5px;font-size:15px}
.diff-desc{font-size:12.5px;color:var(--ink-faint);line-height:1.5}
.home-links{display:flex;gap:12px;justify-content:center;margin:24px 0 26px;flex-wrap:wrap}
.best-row{display:flex;gap:28px;justify-content:center;flex-wrap:wrap}
.best{display:grid;gap:2px}
.best span{font-size:10.5px;letter-spacing:2.4px;color:var(--ink-faint);font-weight:700}
.best strong{font-size:26px;color:var(--lava-hot);font-variant-numeric:tabular-nums}

/* ══════ TOPBAR ══════ */
.topbar{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;justify-content:space-between;
  padding:10px 16px;background:rgba(12,8,10,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--panel-line);flex-wrap:wrap;
}
.topbar-left,.topbar-right{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.chip{
  font-size:12px;font-weight:800;letter-spacing:1.4px;padding:7px 12px;border-radius:10px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);font-variant-numeric:tabular-nums;
}
.chip-score{color:var(--lava-hot)}
.alert-banner{
  flex:1 1 240px;display:flex;align-items:center;gap:10px;justify-content:center;
  font-weight:800;letter-spacing:.8px;font-size:13.5px;padding:8px 16px;border-radius:12px;
  background:rgba(255,200,60,.1);border:1px solid rgba(255,200,60,.28);color:#ffd479;transition:.4s;
}
.alert-banner.warn{background:rgba(255,140,30,.14);border-color:rgba(255,140,30,.4);color:#ffb066}
.alert-banner.crit{background:rgba(255,50,40,.16);border-color:rgba(255,60,40,.5);color:#ff8b7d;animation:pulseCrit 1s ease-in-out infinite}
@keyframes pulseCrit{0%,100%{box-shadow:0 0 0 0 rgba(255,50,40,.4)}50%{box-shadow:0 0 0 10px rgba(255,50,40,0)}}
.alert-dot{width:9px;height:9px;border-radius:50%;background:currentColor;box-shadow:0 0 12px currentColor;animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.25}}

/* ══════ OBJECTIVE BAR ══════ */
.objective{
  max-width:1680px;margin:10px auto -4px;padding:9px 16px;font-size:12.5px;line-height:1.55;color:var(--ink-dim);
  border-left:3px solid var(--ember);background:rgba(255,140,60,.07);border-radius:10px;
}
.objective b{color:#ffc38f;letter-spacing:1px}
.nature-tag{font-size:9.5px;letter-spacing:1.6px;color:#9c8a84;border:1px solid rgba(255,255,255,.12);
  padding:3px 7px;border-radius:99px;font-weight:800}

/* ══════ ALERT SLIDER + MINI METERS ══════ */
.alert-steps{display:flex;justify-content:space-between;margin-top:6px}
.alert-steps span{font-size:8.6px;letter-spacing:.6px;font-weight:800;color:var(--ink-faint);flex:1;text-align:center}
.alert-steps span:first-child{text-align:left}.alert-steps span:last-child{text-align:right}
.mini-meter{margin:0 0 11px}
.mm-head{display:flex;justify-content:space-between;font-size:10.6px;letter-spacing:1.2px;font-weight:800;color:var(--ink-dim);margin-bottom:5px}
.mm-track{height:9px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden;border:1px solid rgba(255,255,255,.05)}
.mm-fill{height:100%;width:0;border-radius:99px;transition:width .3s ease}
.mm-town{background:linear-gradient(90deg,#2f9e6b,#6ee7a0)}
.mm-cred{background:linear-gradient(90deg,#7a5cff,#b79cff)}
.mm-exp{background:linear-gradient(90deg,#ff8b3d,#ff2d1a)}
.mm-note{font-size:10.4px;color:var(--ink-faint);line-height:1.45;margin:6px 0 0}
.mini-exposure{margin:-4px 0 12px;padding:10px;border-radius:11px;background:rgba(255,60,30,.1);border:1px solid rgba(255,80,40,.35);animation:pulseCrit 1.2s infinite}
.action-btn.out-of-range{opacity:.55}
.action-btn.out-of-range .ab-icon{filter:grayscale(1)}

/* ══════ LAYOUT ══════ */
.layout{
  display:grid;gap:14px;padding:14px;
  grid-template-columns:290px minmax(0,1fr) 320px;
  grid-template-areas:"status stage controls" "status map controls";
  align-items:start;max-width:1680px;margin:0 auto;
}
.panel{
  background:var(--panel);border:1px solid var(--panel-line);border-radius:var(--r);
  padding:16px;backdrop-filter:blur(10px);box-shadow:var(--shadow);
}
.panel-status{grid-area:status;position:sticky;top:66px}
.panel-controls{grid-area:controls;position:sticky;top:66px}
.panel-map{grid-area:map}
.stage-wrap{grid-area:stage;display:grid;gap:10px}
.panel-title{
  font-size:12px;letter-spacing:2.6px;font-weight:900;color:#ffc38f;margin:0 0 14px;
  display:flex;align-items:center;gap:8px;justify-content:space-between;flex-wrap:wrap;
}

/* ══════ METERS ══════ */
.meter{margin-bottom:13px}
.meter-head{display:flex;justify-content:space-between;align-items:baseline;gap:6px;margin-bottom:5px}
.meter-name{font-size:12px;font-weight:800;letter-spacing:.8px;color:var(--ink);display:flex;align-items:center;gap:6px}
.meter-num{font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink-dim)}
.meter-track{height:11px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden;position:relative;border:1px solid rgba(255,255,255,.05)}
.meter-fill{height:100%;border-radius:99px;width:0;transition:width .35s cubic-bezier(.3,.9,.4,1),background .5s;position:relative}
.meter-fill::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.45));opacity:.35}
.meter-desc{font-size:10.8px;color:var(--ink-faint);line-height:1.45;margin:5px 0 0}
.meter.high .meter-num{color:#ff9d80}
.meter.high .meter-track{box-shadow:0 0 14px rgba(255,70,30,.4)}

.risk-box{margin-top:18px;padding:14px;border-radius:14px;background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.07);text-align:center}
.risk-label{font-size:10.5px;letter-spacing:2.6px;color:var(--ink-faint);font-weight:800}
.risk-value{font-size:44px;font-weight:900;line-height:1.05;font-variant-numeric:tabular-nums;color:var(--amber);text-shadow:0 0 26px currentColor;transition:color .5s}
.risk-track{height:9px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;margin:8px 0}
.risk-fill{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#3ddc84,#ffb020 55%,#ff2d1a);transition:width .35s}
.risk-state{font-size:12.5px;font-weight:900;letter-spacing:1.6px;margin-top:4px}

/* ══════ STAGE ══════ */
.stage{
  position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--panel-line);
  box-shadow:var(--shadow);background:#0b0507;aspect-ratio:16/10;
}
#volcano-canvas{width:100%;height:100%;display:block}
.stage-overlay{position:absolute;inset:0;pointer-events:none;transition:background .8s}
.stage-caption{
  font-size:12.5px;color:var(--ink-faint);text-align:center;line-height:1.6;padding:0 8px;min-height:20px;transition:opacity .3s;
}
.countdown{
  position:absolute;left:50%;top:14px;transform:translateX(-50%);text-align:center;z-index:5;
  background:rgba(20,4,2,.78);border:1px solid rgba(255,60,40,.55);border-radius:14px;padding:10px 26px;
  backdrop-filter:blur(6px);animation:pulseCrit 1s infinite;
}
.cd-label{font-size:10.5px;letter-spacing:3px;font-weight:900;color:#ff8b7d}
.cd-num{font-size:40px;font-weight:900;line-height:1;color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 0 22px #ff4a1e}
.cd-sub{font-size:11px;letter-spacing:1.6px;color:#ffce9a;font-weight:800;margin-top:2px}

/* ══════ CONTROLS ══════ */
.ctrl{margin-bottom:14px}
.ctrl-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.ctrl-head label{font-size:12px;font-weight:900;letter-spacing:1.4px}
.ctrl-val{font-size:13px;font-weight:900;color:var(--lava-hot);font-variant-numeric:tabular-nums}
.ctrl-note{font-size:10.8px;color:var(--ink-faint);line-height:1.5;margin:7px 0 0}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:10px;border-radius:99px;outline:none;
  background:linear-gradient(90deg,#2a6fd6,#ffb020 50%,#ff2d1a);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:24px;height:24px;border-radius:50%;cursor:grab;
  background:radial-gradient(circle at 35% 30%,#fff2cf,#ff7a1e 70%);
  border:2px solid rgba(255,255,255,.85);box-shadow:0 3px 14px rgba(255,90,25,.7);
}
input[type=range]::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;cursor:grab;border:2px solid #fff;
  background:radial-gradient(circle at 35% 30%,#fff2cf,#ff7a1e 70%);box-shadow:0 3px 14px rgba(255,90,25,.7);
}
.action-btn{
  position:relative;width:100%;display:flex;gap:11px;align-items:flex-start;text-align:left;
  padding:12px;margin-bottom:10px;border-radius:13px;cursor:pointer;font-family:var(--font);color:var(--ink);
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.09);transition:.18s;overflow:hidden;
}
.action-btn:hover:not(:disabled){background:rgba(255,140,60,.14);border-color:rgba(255,140,60,.5);transform:translateY(-2px)}
.action-btn:disabled{opacity:.42;cursor:not-allowed}
.ab-icon{font-size:20px;line-height:1.2}
.ab-body{display:grid;gap:3px}
.ab-body b{font-size:12.5px;letter-spacing:1.2px}
.ab-body i{font-style:normal;font-size:10.8px;color:var(--ink-faint);line-height:1.45}
.ab-cd{
  position:absolute;right:10px;top:10px;font-size:11px;font-weight:900;color:#ffb98a;font-variant-numeric:tabular-nums;
}
.action-warn.armed{
  border-color:rgba(255,200,50,.75);background:rgba(255,190,40,.16);
  animation:armGlow 1.1s ease-in-out infinite;
}
@keyframes armGlow{0%,100%{box-shadow:0 0 0 0 rgba(255,190,40,.45)}50%{box-shadow:0 0 0 9px rgba(255,190,40,0)}}

.seismo{margin-top:14px;border-radius:12px;background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.07);padding:10px;overflow:hidden}
.seismo-head{display:flex;justify-content:space-between;font-size:10.5px;letter-spacing:2px;font-weight:800;color:#8ee6a8;margin-bottom:6px}
#seismo-canvas{width:100%;height:70px;display:block}

.feed{margin-top:12px;display:grid;gap:6px;max-height:170px;overflow-y:auto;scrollbar-width:thin}
.feed-item{
  font-size:11.4px;line-height:1.45;padding:8px 10px;border-radius:9px;
  background:rgba(255,255,255,.04);border-left:3px solid var(--ink-faint);color:var(--ink-dim);
  animation:slideIn .3s ease both;
}
@keyframes slideIn{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
.feed-item b{color:var(--ink)}
.feed-item.sign{border-left-color:var(--amber);background:rgba(255,180,40,.1);color:#ffd89b}
.feed-item.bad{border-left-color:var(--red);background:rgba(255,60,40,.1);color:#ffa79b}
.feed-item.good{border-left-color:var(--green);background:rgba(60,220,130,.1);color:#a7f0c6}
.feed-time{color:var(--ink-faint);font-variant-numeric:tabular-nums;margin-right:5px}

/* ══════ MAP ══════ */
.map-status{font-size:11px;letter-spacing:1.4px;color:var(--green);font-weight:800}
.map-status.danger{color:#ff6b5a;animation:blink 1s infinite}
.map-wrap{border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:#0c0a10}
#map-canvas{width:100%;display:block;aspect-ratio:16/7;touch-action:manipulation;cursor:crosshair}
.map-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;font-size:11px;color:var(--ink-faint);align-items:center}
.map-legend span{display:flex;align-items:center;gap:6px}
.sw{width:12px;height:12px;border-radius:4px;display:inline-block}
.sw-red{background:rgba(255,50,30,.75)}.sw-orange{background:rgba(255,160,40,.7)}
.sw-green{background:rgba(60,220,130,.75)}
.sw-purple{background:rgba(180,130,255,.7)}.sw-blue{background:#4dabff}
.map-hint{margin-left:auto;color:#9c8a84;font-style:italic}

/* ══════ OVERLAYS / MODALS ══════ */
.overlay{
  position:fixed;inset:0;z-index:60;display:none;place-items:center;padding:20px;
  background:rgba(6,3,4,.78);backdrop-filter:blur(8px);overflow-y:auto;
}
.overlay.show{display:grid;animation:fadeIn .25s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{
  width:min(620px,100%);background:linear-gradient(180deg,#1e1418,#150e12);
  border:1px solid rgba(255,140,60,.28);border-radius:20px;padding:26px;
  box-shadow:0 30px 80px rgba(0,0,0,.7);animation:popIn .32s cubic-bezier(.2,.9,.3,1.2) both;margin:auto;
}
@keyframes popIn{from{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:none}}
.modal-wide{width:min(1020px,100%)}
.modal-small{width:min(400px,100%);text-align:center}
.modal-tag{
  display:inline-block;font-size:10.5px;letter-spacing:3px;font-weight:900;color:#ffb884;
  border:1px solid rgba(255,140,60,.35);background:rgba(255,110,40,.1);padding:6px 13px;border-radius:999px;margin-bottom:14px;
}
.modal-tag.center{display:block;width:fit-content;margin:0 auto 14px}
.modal h3{margin:0 0 18px;font-size:clamp(18px,3vw,24px);line-height:1.35}
.q-options{display:grid;gap:9px}
.q-opt{
  display:flex;gap:12px;align-items:flex-start;text-align:left;padding:13px 15px;border-radius:12px;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:var(--ink);
  font-family:var(--font);font-size:14px;line-height:1.45;transition:.15s;
}
.q-opt:hover:not(:disabled){background:rgba(255,140,60,.14);border-color:rgba(255,140,60,.55);transform:translateX(4px)}
.q-opt:disabled{cursor:default}
.q-opt .k{font-weight:900;color:var(--lava-hot);min-width:16px}
.q-opt.correct{background:rgba(60,220,130,.18);border-color:var(--green)}
.q-opt.wrong{background:rgba(255,60,40,.18);border-color:var(--red)}
.q-opt.dim{opacity:.4}
.q-result{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1)}
.q-verdict{font-size:17px;font-weight:900;letter-spacing:1px;margin-bottom:8px}
.q-verdict.ok{color:var(--green)}.q-verdict.no{color:#ff6b5a}
.q-result p{font-size:14px;line-height:1.65;color:var(--ink-dim);margin:0 0 16px}
.q-timer{height:5px;border-radius:99px;background:rgba(255,255,255,.09);margin-top:18px;overflow:hidden}
.q-timer-fill{height:100%;width:100%;background:linear-gradient(90deg,#ffb020,#ff3d20);transition:width .2s linear}
.pause-note{color:var(--ink-dim);margin:0 0 20px}

/* volcano types */
.types-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:16px}
.type-card{background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px}
.type-svg{width:100%;height:auto;display:block;background:linear-gradient(180deg,#160f18,#241318);border-radius:10px;margin-bottom:10px}
.type-card h4{margin:0 0 8px;font-size:15px;letter-spacing:1.4px;color:var(--lava-hot)}
.type-card p{font-size:12.4px;line-height:1.6;color:var(--ink-dim);margin:0 0 8px}
.type-card p b{color:var(--ink)}
.type-meta{font-size:11px !important;color:var(--ink-faint) !important}
.types-foot{font-size:13px;line-height:1.65;color:var(--ink-dim);background:rgba(255,180,40,.08);border-left:3px solid var(--amber);padding:12px 14px;border-radius:10px;margin:0 0 18px}
.howto-intro{font-size:14px;line-height:1.65;color:var(--ink-dim);margin:0 0 16px}
.howto-intro b{color:var(--ink)}
.howto-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.howto-card{position:relative;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:16px 14px 14px}
.hc-num{position:absolute;top:-10px;left:14px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font-size:12px;font-weight:900;color:#180903;background:linear-gradient(135deg,var(--lava-hot),var(--lava))}
.howto-card h4{margin:6px 0 9px;font-size:12.5px;letter-spacing:1.2px;color:var(--lava-hot)}
.howto-card p{font-size:12.4px;line-height:1.55;color:var(--ink-dim);margin:0 0 8px}
.howto-card p b{color:var(--ink)}
.hc-warn{color:#ffb98a !important;background:rgba(255,90,30,.09);border-left:2px solid var(--lava);padding:8px 10px;border-radius:8px;margin:0 !important}
.howto-warn{font-size:13.4px;line-height:1.6;color:#ffbb8a;background:rgba(255,90,30,.1);border-left:3px solid var(--lava);padding:12px 14px;border-radius:10px;margin:0 0 18px}

/* ══════ TOASTS ══════ */
#toasts{position:fixed;left:14px;bottom:14px;z-index:70;display:grid;gap:10px;width:min(360px,calc(100vw - 28px));pointer-events:none}
.toast{
  pointer-events:auto;background:linear-gradient(180deg,rgba(36,22,32,.97),rgba(24,15,20,.97));
  border:1px solid rgba(255,180,60,.35);border-left:4px solid var(--amber);
  border-radius:13px;padding:13px 15px;box-shadow:0 16px 40px rgba(0,0,0,.6);
  animation:toastIn .35s cubic-bezier(.2,.9,.3,1.2) both;
}
.toast.out{animation:toastOut .35s ease forwards}
@keyframes toastIn{from{opacity:0;transform:translateX(-40px) scale(.94)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateX(-40px) scale(.94)}}
.toast h5{margin:0 0 6px;font-size:12.4px;letter-spacing:1.2px;color:#ffcf94;font-weight:900}
.toast p{margin:0;font-size:12.4px;line-height:1.6;color:var(--ink-dim)}
.toast.score{border-left-color:var(--green)}
.toast.score h5{color:#8ef0b6}
.toast.alarm{border-left-color:var(--red)}
.toast.alarm h5{color:#ff9082}

/* ══════ RESULTS ══════ */
#screen-results{display:none;place-items:center;padding:40px 18px}
#screen-results.active{display:grid}
.results-inner{width:min(880px,100%);text-align:center;animation:riseIn .6s cubic-bezier(.2,.8,.25,1) both}
.result-verdict{
  font-size:clamp(28px,6.5vw,58px);margin:0 0 10px;font-weight:900;line-height:1.05;letter-spacing:-.5px;
  background:linear-gradient(180deg,#fff3d6,#ffb03a 50%,#ff4a17);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 26px rgba(255,80,25,.4));
}
.result-verdict.dead{background:linear-gradient(180deg,#ffd7d2,#ff6b5a 55%,#8e1a10);-webkit-background-clip:text;background-clip:text}
.result-sub{color:var(--ink-dim);font-size:15px;line-height:1.7;margin:0 auto 26px;max-width:620px}
.score-hero{
  display:grid;gap:2px;justify-items:center;padding:20px;margin-bottom:22px;border-radius:18px;
  background:linear-gradient(180deg,rgba(255,140,50,.16),rgba(255,60,20,.05));border:1px solid rgba(255,140,60,.3);
}
.score-hero span{font-size:11px;letter-spacing:3px;color:#ffbe8f;font-weight:800}
.score-hero strong{font-size:clamp(44px,10vw,72px);line-height:1;color:#ffd08a;font-variant-numeric:tabular-nums;text-shadow:0 0 34px rgba(255,140,50,.6)}
.score-hero em{font-style:normal;font-size:13px;font-weight:900;letter-spacing:2px;color:var(--green);margin-top:6px}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px;margin-bottom:24px}
.stat{background:var(--panel);border:1px solid var(--panel-line);border-radius:14px;padding:14px 12px;display:grid;gap:4px}
.stat i{font-style:normal;font-size:19px}
.stat b{font-size:23px;font-variant-numeric:tabular-nums;color:var(--ink)}
.stat span{font-size:10.5px;letter-spacing:1.6px;color:var(--ink-faint);font-weight:800}
.learned{text-align:left;background:var(--panel);border:1px solid var(--panel-line);border-radius:var(--r);padding:20px;margin-bottom:24px}
.learned h3{margin:0 0 14px;font-size:12.5px;letter-spacing:3px;color:#ffc38f}
.learned ul{margin:0;padding-left:20px;display:grid;gap:11px}
.learned li{font-size:13.6px;line-height:1.65;color:var(--ink-dim)}
.learned li b{color:var(--lava-hot)}
.results-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ══════ RESPONSIVE ══════ */
@media (max-width:1180px){
  .layout{grid-template-columns:260px minmax(0,1fr);grid-template-areas:"status stage" "controls stage" "map map"}
  .panel-controls{position:static}
}
@media (max-width:860px){
  .layout{grid-template-columns:1fr;grid-template-areas:"stage" "status" "controls" "map";padding:10px;gap:12px}
  .panel-status{position:static}
  .stage{aspect-ratio:4/3}
  .difficulty-row{grid-template-columns:1fr}
  .types-grid,.howto-grid{grid-template-columns:1fr}
  .topbar{padding:8px 10px;gap:8px}
  .alert-banner{order:3;flex-basis:100%;font-size:12px;padding:7px 10px}
  #toasts{left:10px;right:10px;bottom:10px;width:auto}
  .map-hint{margin-left:0;flex-basis:100%}
  #map-canvas{aspect-ratio:4/3}
  .btn-huge{width:100%;padding:18px 20px}
  .modal{padding:20px}
  .feed{max-height:130px}
}
@media (max-width:420px){
  .chip{font-size:11px;padding:6px 9px}
  .btn-mini{padding:7px 9px;font-size:10.5px}
  .risk-value{font-size:38px}
}