/* DT Monster Battle. Dark navy arena, warm accent, bold flat panels (the look of the Voice films). */
:root{color-scheme:dark;--bg:#080e1a;--bg2:#0e1829;--panel:#13213a;--panel2:#0f1b30;--line:#2a3f63;--ink:#eef4fb;--muted:#9db2cc;--amber:#ffc35a;--amber2:#ffdf9c;--sky:#5edbff;--mint:#62e9a0;--red:#ff6b79;--violet:#b38bff;--acc:#5edbff;--r:16px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:radial-gradient(1200px 700px at 70% -10%,#18305a 0,transparent 60%),var(--bg);color:var(--ink);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;min-height:100vh}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--amber2)}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.mb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mb-skip{position:absolute;left:-999px;top:0;background:#fff;color:#000;padding:8px 12px;z-index:90}.mb-skip:focus{left:8px;top:8px}
.mb-app{max-width:1320px;margin:0 auto;padding:0 14px 28px}
.mb-top{display:flex;align-items:center;justify-content:space-between;gap:10px 18px;flex-wrap:wrap;padding:12px 0}
.mb-brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none}
.mb-logo{width:38px;height:38px;border-radius:10px;background:#0c1a30;box-shadow:3px 3px 0 var(--amber);display:grid;place-items:center;font:900 13px system-ui}
.mb-brand b{display:block;font-size:14px}.mb-brand small{display:block;font-size:11px;color:var(--muted)}
.mb-title{margin:0;font:900 clamp(20px,3.4vw,32px)/1 system-ui;letter-spacing:.06em;text-transform:uppercase;text-shadow:3px 3px 0 #000a}
.mb-title span{color:var(--amber)}
.mb-nav{display:flex;gap:8px;flex-wrap:wrap}
.mb-chip{display:inline-flex;align-items:center;min-height:40px;padding:6px 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--panel2);color:var(--ink);text-decoration:none;font-size:13px;font-weight:700}
.mb-chip:hover{border-color:var(--amber)}.mb-chip[aria-pressed=true]{background:var(--amber);border-color:var(--amber);color:#2a1c00}
.mb-main{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(340px,.95fr);gap:16px;align-items:start}
/* ---- stage column ---- */
.mb-stagecol{position:relative;display:flex;flex-direction:column;border-radius:var(--r);border:2px solid var(--line);background:linear-gradient(180deg,#0b1730,#070d19);box-shadow:6px 6px 0 #0007;overflow:hidden;min-height:420px;isolation:isolate}
.mb-stage{position:relative;width:100%;height:min(60vh,540px);min-height:340px;order:1}
.mb-stage canvas{display:block;width:100%!important;height:100%!important}
.mb-fx{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:6}
.mb-float{position:absolute;transform:translate(-50%,-50%);font:900 30px/1 system-ui;color:var(--amber2);text-shadow:0 3px 0 #000,0 0 18px #ff9a3a;white-space:nowrap;animation:mb-rise 1.15s cubic-bezier(.2,.8,.3,1) forwards}
.mb-float.big{font-size:44px;color:#fff}.mb-float.red{color:var(--red);text-shadow:0 3px 0 #000,0 0 18px #ff2a4a}.mb-float small{display:block;font-size:14px;letter-spacing:.12em;text-align:center;color:var(--amber)}
@keyframes mb-rise{0%{opacity:0;transform:translate(-50%,-20%) scale(.4)}18%{opacity:1;transform:translate(-50%,-60%) scale(1.25)}35%{transform:translate(-50%,-70%) scale(1)}100%{opacity:0;transform:translate(-50%,-190%) scale(1)}}
.mb-hud{position:relative;z-index:7;padding:10px 14px 0;order:0}
.mb-hud[hidden],.mb-player[hidden]{display:none}
.mb-hp{min-width:0}
.mb-hp-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:13px}
.mb-hp-row b{font:900 15px system-ui;letter-spacing:.06em;text-transform:uppercase;text-shadow:2px 2px 0 #000}
.mb-hp-row span{font:700 12px ui-monospace,Menlo,Consolas,monospace;color:var(--amber2)}
.mb-bar{position:relative;height:16px;border-radius:99px;background:#0a1020;border:2px solid #000;box-shadow:0 0 0 2px var(--line);overflow:hidden;margin-top:3px}
.mb-bar i{position:absolute;left:0;top:0;bottom:0;width:100%;background:linear-gradient(90deg,var(--acc),#fff8);transition:width .6s cubic-bezier(.2,.8,.3,1);border-radius:99px}
.mb-bar u{position:absolute;top:0;bottom:0;width:3px;background:#000b}.mb-bar .n1{left:66%}.mb-bar .n2{left:33%}
.mb-bar-you i{background:linear-gradient(90deg,var(--mint),#d9ffe9)}
.mb-bar.low i{background:linear-gradient(90deg,var(--red),#ffb3ba)}
.mb-phase{font:800 11px system-ui;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:4px;text-shadow:1px 1px 0 #000}
.mb-phase.p1{color:#ffa23a}.mb-phase.p2{color:#ff5a72}
.mb-preview{position:absolute;left:0;right:0;bottom:0;z-index:5;padding:30px 16px 14px;background:linear-gradient(0deg,#050a14ee,transparent);pointer-events:none}
.mb-plate b{display:block;font:900 clamp(22px,3.6vw,34px)/1.05 system-ui;letter-spacing:.05em;text-transform:uppercase;color:var(--acc);text-shadow:3px 3px 0 #000}
.mb-plate span{display:block;color:var(--muted);font-size:14px;margin-top:2px}
.mb-app:not([data-screen=select]) .mb-preview{display:none}
.mb-player{position:relative;z-index:7;display:flex;align-items:flex-end;gap:10px;padding:0 14px 12px;order:2}
.mb-ava{flex:none;width:54px;height:54px;border-radius:14px;border:2px solid var(--amber);background:#0c1a30;display:grid;place-items:center;overflow:hidden;box-shadow:3px 3px 0 #000;font:900 15px system-ui;color:var(--amber)}
.mb-ava img{width:100%;height:100%;object-fit:cover}
.mb-player .mb-hp{flex:1}
.mb-combo{flex:none;text-align:center;min-width:58px;padding:4px 8px;border-radius:12px;background:#0c1a30cc;border:2px solid var(--line)}
.mb-combo b{display:block;font:900 24px/1 system-ui;color:var(--amber2)}.mb-combo small{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.mb-combo.hot{border-color:var(--amber);animation:mb-pop .4s}
@keyframes mb-pop{0%{transform:scale(.8)}60%{transform:scale(1.18)}100%{transform:scale(1)}}
.mb-taunt{position:absolute;z-index:8;right:12px;top:78px;max-width:min(260px,60%);padding:10px 14px;border-radius:14px 14px 4px 14px;background:#fff;color:#14203a;font:800 15px/1.25 system-ui;box-shadow:4px 4px 0 #000a;animation:mb-bubble .45s cubic-bezier(.2,1.4,.4,1)}
.mb-taunt[hidden]{display:none}
@keyframes mb-bubble{from{transform:scale(.3) rotate(-4deg);opacity:0}to{transform:none;opacity:1}}
.mb-banner{position:absolute;left:0;right:0;top:38%;z-index:9;text-align:center;pointer-events:none}
.mb-banner b{display:inline-block;max-width:90%;padding:8px 20px;font:900 clamp(17px,3.2vw,32px)/1.15 system-ui;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:#d6283f;transform:skew(-8deg);box-shadow:6px 6px 0 #000b;animation:mb-banner 1.9s cubic-bezier(.2,.9,.3,1) forwards}
.mb-banner.amber b{background:#e08a14}
@keyframes mb-banner{0%{opacity:0;transform:skew(-8deg) translateX(-60%) scale(.8)}15%{opacity:1;transform:skew(-8deg) translateX(3%) scale(1.06)}25%{transform:skew(-8deg) translateX(0) scale(1)}80%{opacity:1}100%{opacity:0;transform:skew(-8deg) translateX(30%) scale(1)}}
.mb-vig{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;background:radial-gradient(ellipse at center,transparent 45%,#ff1f3d99 100%)}
.mb-vig.on{animation:mb-vig .6s ease-out}
@keyframes mb-vig{0%{opacity:0}20%{opacity:1}100%{opacity:0}}
.mb-stagecol.shake{animation:mb-shake .35s}
@keyframes mb-shake{0%,100%{transform:none}20%{transform:translate(-6px,2px)}40%{transform:translate(5px,-3px)}60%{transform:translate(-4px,1px)}80%{transform:translate(3px,0)}}
/* ---- panel ---- */
.mb-panel{background:var(--panel);border:2px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:6px 6px 0 #0007;min-width:0}
.mb-panel:focus{outline:none}
.mb-panel h2{margin:0 0 8px;font:900 13px system-ui;letter-spacing:.12em;text-transform:uppercase;color:var(--amber)}
.mb-panel h3{margin:14px 0 6px;font:800 14px system-ui;color:var(--amber2)}
.mb-lead{color:var(--muted);font-size:14px;margin:0 0 12px}
.mb-units{display:grid;gap:8px;margin:0 0 14px;padding:0;list-style:none}
.mb-unit{width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;text-align:left;padding:9px 12px;border-radius:12px;border:2px solid var(--line);background:var(--panel2);min-height:56px}
.mb-unit:hover{border-color:var(--ac)}
.mb-unit[aria-pressed=true]{border-color:var(--ac);background:#182a4a;box-shadow:inset 5px 0 0 var(--ac)}
.mb-unit .dot{width:14px;height:14px;border-radius:50%;background:var(--ac);box-shadow:0 0 10px var(--ac)}
.mb-unit b{display:block;font-size:15px}.mb-unit small{display:block;color:var(--muted);font-size:12px;line-height:1.3}
.mb-stars{white-space:nowrap;font-size:15px;color:#46567a;letter-spacing:2px}.mb-stars .on{color:var(--amber)}
.mb-opts{border:1.5px solid var(--line);border-radius:12px;padding:8px 12px 10px;margin:0 0 14px}
.mb-opts legend{padding:0 6px;font:800 11px system-ui;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.mb-row{display:flex;align-items:center;gap:10px;margin:6px 0;font-size:14px}
.mb-row select{background:var(--panel2);border:1.5px solid var(--line);border-radius:8px;padding:6px 8px}
.mb-row input[type=checkbox]{width:20px;height:20px;accent-color:var(--amber);flex:none}
.mb-note{font-size:12px;color:var(--muted);margin:2px 0 0}
.mb-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 20px;border-radius:12px;border:2px solid #000;background:var(--panel2);color:var(--ink);font:800 15px system-ui;text-decoration:none;box-shadow:3px 3px 0 #000}
.mb-btn:hover:not([disabled]){transform:translate(-1px,-1px);box-shadow:4px 4px 0 #000}
.mb-btn:active:not([disabled]){transform:translate(2px,2px);box-shadow:1px 1px 0 #000}
.mb-btn[disabled]{opacity:.5;cursor:not-allowed}
.mb-btn.go{background:var(--amber);color:#2a1c00;font-size:17px;letter-spacing:.06em;text-transform:uppercase}
.mb-btn.alt{background:#1d3358}
.mb-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
/* question */
.mb-qhead{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font:800 11px ui-monospace,Menlo,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.mb-qhead .m{color:var(--amber)}
.mb-q{font:800 clamp(18px,2.1vw,22px)/1.35 system-ui;margin:0 0 10px;white-space:pre-line}
.mb-q:focus{outline:none}
.mb-data{margin:0 0 10px;padding:8px 10px;border-radius:10px;border:1.5px dashed var(--line);font-size:14px;color:var(--muted);white-space:pre-line}
.mb-ans{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.mb-opt{width:100%;display:grid;grid-template-columns:34px 1fr;align-items:center;gap:10px;text-align:left;padding:10px 12px;min-height:54px;border-radius:12px;border:2px solid var(--line);background:var(--panel2);font-size:16px;line-height:1.35}
.mb-opt kbd{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#22375c;font:800 14px ui-monospace,Menlo,Consolas,monospace;color:var(--amber2)}
.mb-opt:hover:not([disabled]){border-color:var(--amber)}
.mb-opt[disabled]{cursor:default}
.mb-opt.right{border-color:var(--mint);background:#123a2c}.mb-opt.right kbd{background:var(--mint);color:#052116}
.mb-opt.wrong{border-color:var(--red);background:#3b1822}.mb-opt.wrong kbd{background:var(--red);color:#2a040a}
.mb-opt .tag{display:block;font:800 11px system-ui;letter-spacing:.1em;text-transform:uppercase;margin-top:2px}
.mb-opt.right .tag{color:var(--mint)}.mb-opt.wrong .tag{color:#ff9aa6}
.mb-num{display:flex;gap:8px;flex-wrap:wrap}
.mb-num input{flex:1 1 140px;min-width:0;min-height:50px;font-size:20px;padding:8px 12px;border-radius:12px;border:2px solid var(--line);background:var(--panel2)}
.mb-fb{margin-top:12px;padding:12px 14px;border-radius:12px;border:2px solid var(--line);background:var(--panel2);font-size:15px}
.mb-fb[hidden]{display:none}
.mb-fb.ok{border-color:var(--mint)}.mb-fb.no{border-color:var(--red)}
.mb-fb strong{display:block;font:900 17px system-ui;margin-bottom:4px}.mb-fb.ok strong{color:var(--mint)}.mb-fb.no strong{color:#ff9aa6}
.mb-fb p{margin:4px 0 0}
.mb-fast{height:6px;border-radius:99px;background:#0a1020;overflow:hidden;margin:0 0 10px}.mb-fast i{display:block;height:100%;width:100%;background:var(--sky);transform-origin:left;animation:mb-fast 10s linear forwards}
@keyframes mb-fast{to{transform:scaleX(0)}}
/* result */
.mb-big{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 6px}
.mb-big h2{font:900 clamp(26px,4vw,38px)/1 system-ui;letter-spacing:.04em;margin:0;color:var(--amber2)}
.mb-big h2.lose{color:#ff9aa6}
.mb-starbig{font-size:38px;letter-spacing:6px;color:#34456a}.mb-starbig .on{color:var(--amber);text-shadow:0 0 16px #ffb02e;animation:mb-pop .5s backwards}
.mb-starbig .on:nth-child(2){animation-delay:.18s}.mb-starbig .on:nth-child(3){animation-delay:.36s}
.mb-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px;margin:12px 0}
.mb-stat{border:1.5px solid var(--line);border-radius:12px;padding:8px 10px;background:var(--panel2)}.mb-stat b{display:block;font:900 22px/1.1 system-ui;color:var(--amber2)}.mb-stat small{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mb-review{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.mb-rev{border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--panel2);font-size:14px}
.mb-rev q{display:block;quotes:none;font-weight:800;font-size:15px;margin-bottom:4px}
.mb-rev .ans{color:var(--mint)}.mb-rev .you{color:#ff9aa6}
.mb-rev .exp{color:var(--muted);margin:4px 0 6px}
.mb-rev .mb-btn{min-height:38px;padding:6px 12px;font-size:13px}
.mb-foot{margin:14px 2px 0;font-size:12px;color:var(--muted);max-width:900px}
/* ---- 2D fallback monsters (SVG, CSS animated) ---- */
.m2{position:absolute;inset:0;display:grid;place-items:center;padding:24px 12px 40px}
.m2 svg{width:100%;height:100%;max-width:560px;overflow:visible;filter:drop-shadow(0 18px 18px #0009)}
.m2 .ring{position:absolute;left:50%;bottom:8%;width:70%;height:18%;transform:translateX(-50%);border-radius:50%;border:3px solid var(--acc);box-shadow:0 0 24px var(--acc),inset 0 0 24px var(--acc);opacity:.55}
.m2 .body{transform-origin:50% 90%;animation:m2-idle 2.6s ease-in-out infinite}
.m2.spawn .body{animation:m2-spawn .9s cubic-bezier(.2,1.5,.4,1) both,m2-idle 2.6s 1s ease-in-out infinite}
.m2.atk .body{animation:m2-atk 1.2s cubic-bezier(.4,0,.2,1)}
.m2.hurt .body{animation:m2-hurt .5s}
.m2.taunt .body{animation:m2-taunt .8s}
.m2.defeat .body{animation:m2-defeat 1.5s ease-in forwards}
.m2.phase .body{animation:m2-phase .9s}
.m2[data-phase="1"] svg{filter:drop-shadow(0 0 14px #ffa23a) saturate(1.25) hue-rotate(-12deg)}
.m2[data-phase="2"] svg{filter:drop-shadow(0 0 18px #ff3d5a) saturate(1.5) hue-rotate(-28deg)}
.m2 .crack{opacity:calc(var(--dmg,0)*1.4);stroke:#ff8a3a;stroke-width:5;fill:none;stroke-linecap:round}
.m2 .eyes{animation:m2-blink 4.3s infinite;transform-box:fill-box;transform-origin:center}
.m2.hit svg{animation:m2-flash .22s}
@keyframes m2-idle{0%,100%{transform:scale(1,1)}50%{transform:scale(1.02,.975)}}
@keyframes m2-spawn{0%{transform:scale(.1,.1) translateY(60px);opacity:0}100%{transform:none;opacity:1}}
@keyframes m2-atk{0%{transform:none}30%{transform:scale(1.05,.9) translateY(10px)}52%{transform:scale(1.28,1.2) translateY(60px)}70%{transform:scale(1.28,1.2) translateY(60px)}100%{transform:none}}
@keyframes m2-hurt{0%{transform:none}15%{transform:translateX(-14px) rotate(-3deg) scale(.96,1.04)}35%{transform:translateX(12px) rotate(2deg)}60%{transform:translateX(-6px)}100%{transform:none}}
@keyframes m2-taunt{0%,100%{transform:none}20%{transform:rotate(-4deg) translateY(-8px)}40%{transform:rotate(4deg) translateY(-8px)}60%{transform:rotate(-3deg)}80%{transform:rotate(3deg)}}
@keyframes m2-defeat{0%{transform:none;opacity:1}30%{transform:rotate(-6deg) scale(1.04)}100%{transform:translateY(60px) scale(.2,.05);opacity:0}}
@keyframes m2-phase{0%{transform:none}25%{transform:scale(.88,1.14)}55%{transform:scale(1.14,.9)}100%{transform:none}}
@keyframes m2-flash{0%{filter:brightness(3) saturate(.3)}100%{filter:none}}
@keyframes m2-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}
.m2-bolt{position:absolute;width:30px;height:30px;border-radius:50%;background:radial-gradient(#fff,var(--acc) 50%,transparent 70%);z-index:4;animation:m2-bolt .34s ease-in forwards}
@keyframes m2-bolt{from{left:12%;top:88%;opacity:1}to{left:50%;top:42%;opacity:1;transform:scale(1.6)}}
.m2-spark{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--acc);z-index:4;animation:m2-spark .6s ease-out forwards}
@keyframes m2-spark{to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}
/* calm mode: reduced motion (device setting or the site accessibility panel) */
.mb-calm *,.mb-calm *::before,.mb-calm *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
.mb-calm .m2 .body{animation:none!important}
.mb-calm .mb-float{animation:mb-fade 1s forwards!important}
@keyframes mb-fade{0%{opacity:0}20%{opacity:1}80%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.mb-stagecol.shake{animation:none}}
/* ---- layout: tablet and phone ---- */
@media (max-width:900px){
  .mb-main{grid-template-columns:1fr}
  .mb-stage{height:min(34vh,330px);min-height:190px}
  .mb-stagecol{min-height:0}
  .mb-app:not([data-screen=result]) .mb-stagecol{position:sticky;top:0;z-index:20}
  html{scroll-padding-top:calc(34vh + 150px)}
  .mb-title{order:3;flex:1 0 100%;text-align:center}
}
@media (max-width:520px){
  .mb-app{padding:0 10px 22px}
  .mb-hp-row b{font-size:13px}
  html{scroll-padding-top:calc(31vh + 130px)}
  .mb-stage{height:31vh;min-height:190px}
  .mb-hud{padding:6px 10px 0}.mb-player{padding:0 10px 8px;gap:8px}
  .mb-phase{margin-top:2px;font-size:10px}
  .mb-ava{width:38px;height:38px;border-radius:10px;font-size:12px}
  .mb-combo{min-width:50px;padding:2px 6px}.mb-combo b{font-size:20px}
  .mb-preview{padding:18px 12px 8px}.mb-plate b{font-size:20px}.mb-plate span{font-size:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .mb-float{font-size:24px}.mb-float.big{font-size:32px}
  .mb-opt{font-size:15px}
  .mb-btn{width:100%}
  .mb-taunt{top:68px;font-size:13px}
}

/* audio lab (?audio=lab) */
.mb-labmode .mb-main{grid-template-columns:1fr}.mb-labmode .mb-stagecol{display:none}

/* ================= encounter intro (monster-intro.js): portal / door crash, silhouette, reveal, title card, loading bar ================= */
html.mb-noscroll,html.mb-noscroll body{overflow:hidden}
#app.mb-introing .mb-stagecol{position:fixed!important;inset:0;z-index:1500;min-height:0;border:0;border-radius:0;box-shadow:none;background:#04070f}
#app.mb-introing .mb-stage{position:absolute;left:0;right:0;top:0;bottom:30%;height:auto;min-height:0;-webkit-mask-image:linear-gradient(180deg,#000 80%,transparent);mask-image:linear-gradient(180deg,#000 80%,transparent)}
#app.mb-introing .mb-preview,#app.mb-introing .mb-hud,#app.mb-introing .mb-player,#app.mb-introing .mb-taunt,#app.mb-introing .mb-banner{display:none!important}
.in-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:radial-gradient(ellipse 80% 70% at 50% 46%,color-mix(in srgb,var(--acc) 26%,#050912) 0,#04070f 72%);animation:in-fadein .5s both}
.in-glow{position:absolute;left:50%;top:44%;width:70vmin;height:70vmin;margin:-35vmin;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--acc) 70%,#fff) 0,var(--acc) 22%,transparent 62%);opacity:.5;filter:blur(8px);animation:in-glow calc(2.4s*var(--ins,1)) ease-in-out infinite alternate}
.in-swirl{position:absolute;left:50%;top:44%;width:150vmax;height:150vmax;margin:-75vmax 0 0 -75vmax;border-radius:50%;will-change:transform;
  background:repeating-conic-gradient(from 0deg,transparent 0 14deg,color-mix(in srgb,var(--acc) 85%,transparent) 20deg,transparent 34deg 52deg,#ffffff55 56deg,transparent 62deg 90deg);
  -webkit-mask:radial-gradient(circle,transparent 0 3%,#000 9%,#000 26%,transparent 52%);mask:radial-gradient(circle,transparent 0 3%,#000 9%,#000 26%,transparent 52%);opacity:.7;animation:in-spin calc(7s*var(--ins,1)) linear infinite}
.in-swirl.b{animation-duration:calc(11s*var(--ins,1));animation-direction:reverse;opacity:.45;transform:scale(.62)}
.in-swirl.c{animation-duration:calc(5s*var(--ins,1));opacity:.3;transform:scale(.36);background:repeating-conic-gradient(from 20deg,transparent 0 22deg,#fff7 28deg,transparent 36deg 70deg)}
.in-bg.multi .in-swirl.a{background:repeating-conic-gradient(from 0deg,#5edbff 0 18deg,transparent 30deg 40deg,#c8ff4a 50deg 64deg,transparent 76deg 84deg,#ff8a3a 94deg 110deg,transparent 120deg 130deg,#b38bff 140deg 154deg,transparent 166deg 180deg)}
.in-rays{position:absolute;left:50%;top:44%;width:160vmax;height:160vmax;margin:-80vmax 0 0 -80vmax;background:repeating-conic-gradient(from 0deg,#ffffff1c 0 2deg,transparent 2deg 11deg);-webkit-mask:radial-gradient(circle,#000 0,transparent 55%);mask:radial-gradient(circle,#000 0,transparent 55%);animation:in-spin calc(40s*var(--ins,1)) linear infinite reverse;opacity:0;transition:opacity 1s}
.in-bg.revealed .in-rays{opacity:1}
.in-ring{position:absolute;left:50%;top:44%;width:30vmin;height:30vmin;margin:-15vmin;border-radius:50%;border:3px solid var(--acc);box-shadow:0 0 30px var(--acc),inset 0 0 30px var(--acc);opacity:0;animation:in-ring calc(3s*var(--ins,1)) ease-out infinite}
.in-ring.r2{animation-delay:calc(1s*var(--ins,1))}.in-ring.r3{animation-delay:calc(2s*var(--ins,1))}
.in-vig{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 46%,transparent 40%,#000d 100%)}
.in-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.in-bg.revealed .in-flash{animation:in-flash .6s ease-out}
.in-shock{position:absolute;left:50%;top:44%;width:20vmin;height:20vmin;margin:-10vmin;border-radius:50%;border:6px solid #fff;opacity:0}
.in-bg.revealed .in-shock{animation:in-shock .9s ease-out}
/* door variant: a workshop door crashes open on a burst of light */
.in-light,.in-door,.in-dust{display:none}
.in-bg.door .in-light{display:block;position:absolute;left:50%;top:44%;width:130vmax;height:130vmax;margin:-65vmax;background:conic-gradient(from 80deg,transparent 0 10deg,#fff9 14deg,transparent 22deg 60deg,color-mix(in srgb,var(--acc) 80%,#fff) 64deg,transparent 74deg 130deg,#fff8 134deg,transparent 142deg 190deg,var(--acc) 196deg,transparent 206deg 250deg,#fff8 254deg,transparent 262deg);-webkit-mask:radial-gradient(circle,#000,transparent 50%);mask:radial-gradient(circle,#000,transparent 50%);opacity:0;transition:opacity .4s}
.in-bg.door.open .in-light{opacity:.8;animation:in-spin 30s linear infinite}
.in-bg.door .in-swirl.a,.in-bg.door .in-swirl.c{display:none}.in-bg.door .in-swirl.b{opacity:.25}
.in-bg.door .in-door{display:block;position:absolute;top:0;bottom:0;width:50.5%;z-index:3;background:linear-gradient(90deg,#222c3d,#3d4b63 55%,#222c3d);box-shadow:inset 0 0 0 4px #0008,0 0 40px #000;transition:transform calc(.55s*var(--ins,1)) cubic-bezier(.6,0,.9,.4),opacity calc(.55s*var(--ins,1)) ease-in}
.in-bg.door .in-door::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 46px,#0006 46px 49px),radial-gradient(circle,#8fa1bd 0 2px,transparent 3px) 0 0/48px 49px}
.in-bg.door .in-door i{position:absolute;top:0;bottom:0;width:38px;background:repeating-linear-gradient(135deg,#ffd35a 0 14px,#161616 14px 28px)}
.in-bg.door .in-door.l{left:0;transform-origin:0 50%}.in-bg.door .in-door.l i{right:0}
.in-bg.door .in-door.r{right:0;transform-origin:100% 50%}.in-bg.door .in-door.r i{left:0}
.in-bg.door.open .in-door.l{transform:translateX(-104%) rotate(-5deg);opacity:.9}.in-bg.door.open .in-door.r{transform:translateX(104%) rotate(5deg);opacity:.9}
.in-bg.door.open{animation:in-quake .6s calc(.1s*var(--ins,1)) both}
.in-bg.door .in-dust{display:block;position:absolute;inset:0;background:radial-gradient(ellipse at 50% 55%,#cfd8e655 0,transparent 55%);opacity:0}
.in-bg.door.open .in-dust{animation:in-dust 2.4s ease-out}
/* the monster: a shadow first, then lit */
.mb-stagecol .mb-stage>*{transition:filter .55s ease-out,transform 1s cubic-bezier(.2,.9,.3,1.2),opacity .8s}
.mb-stagecol.in-sil .mb-stage>*{transition:none;filter:brightness(0) drop-shadow(0 0 14px var(--acc)) drop-shadow(0 0 46px var(--acc));transform:translateY(5%) scale(.94);animation:in-emerge calc(2.2s*var(--ins,1)) cubic-bezier(.2,.8,.3,1) both}
.mb-stagecol.in-lit .mb-stage>*{filter:brightness(1) drop-shadow(0 0 0 transparent) drop-shadow(0 0 0 transparent);transform:none}
.mb-stagecol.in-calm .mb-stage>*{animation:in-fadein .5s both}
/* UI layer */
.in-ui{position:absolute;inset:0;z-index:12;display:grid;grid-template-rows:auto 1fr auto;padding:max(14px,env(safe-area-inset-top)) clamp(14px,3vw,36px) max(64px,calc(env(safe-area-inset-bottom) + 16px));pointer-events:none;animation:in-fadein .4s both}
.in-ui>*{pointer-events:auto}
.in-ui.leaving,.in-bg.leaving{opacity:0;transition:opacity .2s}
.in-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.in-kicker{font:900 12px system-ui;letter-spacing:.32em;color:var(--acc);text-shadow:0 0 12px var(--acc)}
.in-btns{display:flex;gap:8px}
.in-btn{min-height:42px;padding:6px 16px;border-radius:999px;border:1.5px solid #ffffff55;background:#050912cc;color:#fff;font:800 13px system-ui;cursor:pointer}
.in-btn:hover{border-color:var(--amber)}.in-btn[aria-pressed=true]{background:var(--amber);border-color:var(--amber);color:#2a1c00}
.in-band{align-self:start;margin:clamp(4px,3vh,28px) 0 0 -40px;padding-left:40px;pointer-events:none;transform:translateX(-110%);opacity:0}
.in-band span{display:inline-block;max-width:92vw;padding:10px clamp(18px,3vw,40px) 10px 22px;font:900 clamp(20px,4.4vw,46px)/1.1 system-ui;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:linear-gradient(90deg,#d6283f,color-mix(in srgb,var(--acc) 55%,#d6283f));transform:skew(-9deg);box-shadow:8px 8px 0 #000b;text-shadow:3px 3px 0 #0008}
.in-band b{color:#fff6c8}
.in-ui.revealed .in-band{animation:in-band calc(.7s*var(--ins,1)) cubic-bezier(.2,.9,.3,1.1) forwards}
.in-info{align-self:end;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(12px,2.4vw,32px);align-items:end}
.in-card{padding:14px 18px;border-radius:16px;background:linear-gradient(180deg,#0c1730e8,#050912f0);border:2px solid color-mix(in srgb,var(--acc) 60%,#2a3f63);box-shadow:6px 6px 0 #000a,0 0 28px color-mix(in srgb,var(--acc) 30%,transparent);opacity:0;transform:translateY(24px)}
.in-ui.revealed .in-card{animation:in-up calc(.6s*var(--ins,1)) calc(.25s*var(--ins,1)) cubic-bezier(.2,.9,.3,1) forwards}
.in-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.in-tag{display:inline-flex;align-items:center;gap:8px;padding:3px 12px;border-radius:999px;background:color-mix(in srgb,var(--acc) 22%,#0a1224);border:1.5px solid var(--acc);color:#fff;font:800 12px system-ui;letter-spacing:.1em;text-transform:uppercase}
.in-tag small{font:700 10px system-ui;color:#c9d6ea;letter-spacing:.12em}.in-stars span span{color:#46567a;font-size:15px}.in-stars span span.on{color:var(--amber);text-shadow:0 0 8px #ffb02e}
.in-name{margin:2px 0 0;font:900 clamp(22px,3.4vw,36px)/1.05 system-ui;letter-spacing:.05em;text-transform:uppercase;color:var(--acc);text-shadow:3px 3px 0 #000}
.in-title{margin:2px 0 6px;color:#c9d6ea;font-size:14px}
.in-weak{margin:0 0 4px;font-size:14px;color:#fff}.in-weak b{color:var(--amber2)}
.in-lore{margin:0;font-size:13.5px;font-style:italic;color:#aebdd6}
.in-side{display:grid;gap:8px;justify-items:stretch;align-content:end}
.in-avatar{position:fixed;left:clamp(10px,3vw,40px);bottom:34%;display:grid;justify-items:center;gap:2px;transform:translateX(-160%);opacity:0;pointer-events:none}
.in-avatar svg{width:clamp(70px,14vmin,130px);height:auto;border-radius:50%;border:3px solid var(--amber);background:#0c1a30;box-shadow:4px 4px 0 #000a,0 0 24px #ffc35a66}
.in-avatar small{font:800 12px system-ui;color:#fff;background:#050912cc;padding:1px 10px;border-radius:99px;margin-top:-10px;z-index:1}
.in-ui.revealed .in-avatar{animation:in-avatar calc(.8s*var(--ins,1)) calc(.55s*var(--ins,1)) cubic-bezier(.2,1.2,.4,1) forwards}
.in-load{display:grid;gap:4px}
.in-bar{height:14px;border-radius:99px;background:#050912;border:2px solid #000;box-shadow:0 0 0 2px #2a3f63;overflow:hidden}
.in-bar i{display:block;height:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--acc),#fff);border-radius:99px}
.in-loadtxt{font:700 11px ui-monospace,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;color:#aebdd6}
.in-load.done .in-bar i{background:linear-gradient(90deg,var(--mint),#d9ffe9)}
.in-tip{margin:0;min-height:3.1em;font-size:13px;line-height:1.4;color:#e4ecf7;background:#050912b8;border-radius:10px;padding:6px 10px;border-left:4px solid var(--amber)}
.in-tip b{color:var(--amber);font:900 10px system-ui;letter-spacing:.16em;margin-right:6px}.in-tip.swap{animation:in-fadein .5s}
.in-go{min-height:56px;border-radius:14px;border:3px solid #000;background:var(--amber);color:#2a1c00;font:900 clamp(18px,2.4vw,24px) system-ui;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;box-shadow:5px 5px 0 #000;animation:in-pulse 1.4s ease-in-out infinite}
.in-go[hidden]{display:none}.in-go:hover{transform:translate(-1px,-1px)}
.in-btn:focus-visible,.in-go:focus-visible{outline:4px solid #fff;outline-offset:3px}
.in-ui.ready .in-load{opacity:.55}
@keyframes in-fadein{from{opacity:0}to{opacity:1}}
@keyframes in-spin{to{transform:rotate(360deg)}}
.in-swirl.b{--s:.62}.in-swirl.c{--s:.36}
@keyframes in-glow{from{opacity:.35;transform:scale(.9)}to{opacity:.6;transform:scale(1.08)}}
@keyframes in-ring{0%{opacity:.9;transform:scale(.2)}100%{opacity:0;transform:scale(4.2)}}
@keyframes in-flash{0%{opacity:.95}100%{opacity:0}}
@keyframes in-shock{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(9)}}
@keyframes in-emerge{0%{opacity:0;transform:translateY(12%) scale(.8)}60%{opacity:1}100%{opacity:1;transform:translateY(5%) scale(.94)}}
@keyframes in-band{0%{transform:translateX(-110%);opacity:0}100%{transform:none;opacity:1}}
@keyframes in-up{to{opacity:1;transform:none}}
@keyframes in-avatar{0%{transform:translateX(-160%) rotate(-12deg);opacity:0}100%{transform:none;opacity:1}}
@keyframes in-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes in-quake{0%,100%{transform:none}15%{transform:translate(-9px,5px)}30%{transform:translate(8px,-6px)}45%{transform:translate(-6px,3px)}60%{transform:translate(5px,-2px)}80%{transform:translate(-2px,1px)}}
@keyframes in-dust{0%{opacity:0}20%{opacity:.9}100%{opacity:0}}
/* reduced motion and the site's "calm" setting: no spinning, no shake, no flash; just a fade */
.in-calm .in-swirl,.in-calm .in-ring,.in-calm .in-rays,.in-calm .in-glow,.in-calm .in-shock,.in-calm .in-flash{animation:none!important}
.in-calm .in-ring,.in-calm .in-shock,.in-calm .in-flash,.in-calm .in-dust{display:none}
.in-calm.in-bg.door .in-door{display:none}.in-calm .in-light{display:none!important}
.in-calm .in-swirl{opacity:.25!important}
.in-calm.revealed .in-band,.in-calm .in-band{transform:none;animation:in-fadein .4s forwards!important;opacity:1}
.in-calm.revealed .in-card,.in-calm.revealed .in-avatar{animation:in-fadein .4s forwards!important}
.in-calm .in-go{animation:none}
.in-calm .in-card,.in-calm .in-avatar{transform:none}
@media (prefers-reduced-motion:reduce){.in-go{animation:none}}
@media (max-width:900px){
  #app.mb-introing .mb-stage{bottom:44%}
  .in-info{grid-template-columns:1fr;gap:8px}
  .in-card{padding:10px 12px}.in-lore{display:none}.in-title{display:none}
  .in-avatar{bottom:46%}
  .in-band{margin-left:-24px;padding-left:24px}
}
@media (max-width:520px){.in-tip{min-height:0;font-size:12px}.in-kicker{letter-spacing:.2em}.in-go{min-height:52px}.in-weak{font-size:13px}}
@media (max-height:560px) and (orientation:landscape){#app.mb-introing .mb-stage{bottom:36%}.in-lore,.in-title{display:none}.in-tip{display:none}}
/* Monster Loot callout on the result screen (only shown when the rewards flag is on) */
.mb-loot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:12px 0 4px;padding:12px 14px;border:2px solid var(--amber,#ffc35a);border-radius:12px;background:rgba(243,200,75,.1)}
.mb-loot b{display:block}.mb-loot span{display:block;font-size:12px;color:var(--muted);margin-top:2px;max-width:46ch}

/* loot reveal and chest drop, fused into the victory screen */
.mb-loot{display:block}.mb-loot-head{margin-bottom:8px}.mb-loot-head b{display:block}.mb-loot-head span{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.mb-lootframe{display:block;width:100%;height:min(86vh,660px);border:0;border-radius:12px;background:#0b1624}
.mb-chestdrop{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.06)}
.mb-chestdrop>span{font-size:26px}.mb-chestdrop div{flex:1 1 200px}.mb-chestdrop b{display:block}.mb-chestdrop small{display:block;font-size:12px;color:var(--muted)}

/* chat bubbles: captions and call-outs, bottom left of the stage */
.mb-chat{position:absolute;left:12px;bottom:64px;z-index:9;display:flex;flex-direction:column;align-items:flex-start;gap:6px;max-width:68%;pointer-events:none}
.mb-bubble{position:relative;background:#f4f8ff;color:#0b1730;font:800 14px/1.3 system-ui,sans-serif;padding:7px 12px;border-radius:14px 14px 14px 3px;box-shadow:0 3px 0 #0008;border:2px solid #9fc2ff}
.mb-bubble.pop{animation:mb-bub .22s ease-out}
@keyframes mb-bub{from{transform:translateY(10px) scale(.92);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.mb-bubble.pop{animation:none}}
.mb-calm .mb-bubble.pop{animation:none}