@font-face{font-family:'Zen Old Mincho';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/zen-old-mincho-400.woff2') format('woff2')}
@font-face{font-family:'Zen Old Mincho';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/zen-old-mincho-700.woff2') format('woff2')}
@font-face{font-family:'Zen Kaku Gothic New';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/zen-kaku-gothic-new-400.woff2') format('woff2')}
@font-face{font-family:'Zen Kaku Gothic New';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/zen-kaku-gothic-new-700.woff2') format('woff2')}
:root{
  --bg:#0f0b19; --panel:rgba(18,13,28,.93); --line:#332a4a; --bone:#d8d2c4; --dim:#948aa6;
  --blood:#b84a5a; --gold:#cdb356; --violet:#8f7bb5; --green:#7fae7a;
  --disp:'Zen Old Mincho',serif; --body:'Zen Kaku Gothic New',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--bone);font-family:var(--body);-webkit-user-select:none;user-select:none}
.hidden{display:none !important}
#game{position:fixed;inset:0;z-index:0;transition:filter .5s ease}
#game.warping{filter:contrast(1.22) hue-rotate(16deg) saturate(1.5) blur(.5px)}
#game canvas{display:block;touch-action:manipulation;transition:filter .35s ease}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
button,input{font:inherit}
button:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:3px;box-shadow:0 0 0 4px rgba(205,179,86,.18)}

/* ---------- 演出オーバーレイ ---------- */
#vignette{position:fixed;inset:0;pointer-events:none;z-index:4;--vmax:.74;
  background:radial-gradient(ellipse at 50% 48%,rgba(0,0,0,0) 42%,rgba(5,3,10,.5) 78%,rgba(3,2,7,.88) 100%);
  animation:breathe 8s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:var(--vmax)}50%{opacity:calc(var(--vmax)*.72)}}
#grain{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;opacity:.45;mix-blend-mode:overlay;z-index:60;image-rendering:pixelated}
#redflash{position:fixed;inset:0;pointer-events:none;z-index:25;opacity:0;
  background:radial-gradient(ellipse at center,rgba(120,10,20,0) 30%,rgba(150,15,28,.6) 100%)}
#redflash.on{animation:rf .9s ease-out}
@keyframes rf{0%{opacity:1}100%{opacity:0}}
#whispers{position:fixed;inset:0;pointer-events:none;z-index:20;overflow:hidden}
.whisper{position:absolute;font-family:var(--disp);color:#cfc6dd;opacity:0;letter-spacing:.22em;
  text-shadow:0 0 10px #000,0 0 22px rgba(143,123,181,.35);filter:blur(.4px);
  animation:whisperFade 5.2s ease forwards;white-space:nowrap}
@keyframes whisperFade{0%{opacity:0;transform:translateY(8px)}18%{opacity:.85}78%{opacity:.55}100%{opacity:0;transform:translateY(-12px)}}
#floats{position:fixed;inset:0;pointer-events:none;z-index:35}
.float{position:absolute;font-family:var(--disp);font-size:15px;transform:translate(-50%,-50%);
  text-shadow:0 1px 4px #000;animation:floatUp 1.1s ease-out forwards}
.float.gain{color:var(--gold)}.float.loss{color:#e06a78;font-size:18px}
@keyframes floatUp{0%{opacity:0;transform:translate(-50%,-30%)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-150%)}}
#her-overlay{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%;
  opacity:0;mix-blend-mode:screen;filter:grayscale(.35) contrast(1.12) brightness(1.05);
  transition:opacity 1.5s ease;pointer-events:none;z-index:6}
#her-overlay.on{opacity:.34}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;z-index:10;pointer-events:none}
#topbar{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;
  padding:14px 18px;gap:12px;flex-wrap:wrap}
.cluster{display:flex;gap:14px;align-items:center;pointer-events:none}
.cluster.right{pointer-events:auto}
.stat{background:var(--panel);border:1px solid var(--line);padding:7px 13px;display:flex;flex-direction:column;gap:1px;min-width:78px}
.stat .label{font-size:10px;letter-spacing:.28em;color:var(--dim)}
.stat .val{font-family:var(--disp);font-size:24px;line-height:1}
.stat.wave .val{color:var(--violet)}
.stat.frag .val{color:var(--gold)}
.stat .of{font-size:13px;color:var(--dim)}
.bump{animation:bump .4s ease}
@keyframes bump{0%{transform:scale(1.4);color:#fff}100%{transform:scale(1)}}
#self-hp-wrap{background:var(--panel);border:1px solid var(--line);padding:8px 14px;display:flex;align-items:center;gap:10px}
#self-hp-wrap .label{font-size:10px;letter-spacing:.28em;color:var(--dim)}
#self-hp-bar{width:170px;height:12px;background:#1a1426;border:1px solid #2c2440;position:relative;overflow:hidden}
#self-hp-fill{height:100%;width:100%;background:var(--green);transition:width .3s,background .4s}
#self-hp-num{font-family:var(--disp);font-size:18px;color:#e06a78;min-width:24px;text-align:right}
.ctl{font-family:var(--body);background:var(--panel);border:1px solid var(--line);color:var(--bone);
  min-height:44px;padding:8px 12px;font-size:12px;letter-spacing:.12em;cursor:pointer;transition:.2s}
.ctl:hover{border-color:var(--violet);color:#fff;box-shadow:0 0 12px rgba(143,123,181,.22)}
#banner{position:fixed;top:14%;left:50%;transform:translateX(-50%);font-family:var(--disp);font-size:clamp(26px,4.4vw,48px);
  color:#cfc6dd;text-shadow:0 0 30px rgba(184,74,90,.4),0 2px 10px #000;opacity:0;pointer-events:none;
  letter-spacing:.32em;white-space:nowrap;z-index:30}
#banner.show{animation:ban 3.8s ease forwards}
@keyframes ban{0%{opacity:0;transform:translateX(-50%) translateY(16px);filter:blur(7px)}
  14%{opacity:1;filter:blur(0)}74%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-12px)}}
#wave-ctrl{position:absolute;right:18px;bottom:18px;display:flex;flex-direction:column;align-items:flex-end;gap:6px;pointer-events:auto}
#btn-wave{font-family:var(--disp);background:rgba(36,20,38,.92);border:1px solid #5a2f4a;color:#e8c6d2;
  min-height:48px;padding:11px 22px;font-size:15px;letter-spacing:.2em;cursor:pointer;transition:.25s}
#btn-wave:hover:not(:disabled){background:#3a1f33;box-shadow:0 0 18px rgba(184,74,90,.3);transform:translateY(-1px)}
#btn-wave:not(:disabled){animation:beckon 2.6s ease-in-out infinite}
@keyframes beckon{0%,100%{box-shadow:0 0 0 rgba(184,74,90,0)}50%{box-shadow:0 0 16px rgba(184,74,90,.28)}}
#btn-wave:disabled{opacity:.4;cursor:default;animation:none}
#wave-timer{font-size:12px;color:var(--dim);letter-spacing:.1em}
#log{position:absolute;left:18px;bottom:18px;display:flex;flex-direction:column;gap:3px;max-width:330px;pointer-events:none}
.logline{font-size:12px;color:#a99fc0;letter-spacing:.05em;animation:logfade 8s forwards;text-shadow:0 1px 3px #000}
@keyframes logfade{0%{opacity:0;transform:translateX(-8px)}7%{opacity:.92;transform:none}72%{opacity:.6}100%{opacity:0}}
#hint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);font-size:12px;color:var(--dim);
  letter-spacing:.08em;text-align:center;pointer-events:none;transition:opacity 1s;text-shadow:0 1px 3px #000}
#target-nav{position:absolute;left:18px;bottom:67px;display:flex;align-items:center;gap:6px;max-width:min(520px,calc(100vw - 36px));
  padding:6px 8px;background:rgba(18,13,28,.78);border:1px solid rgba(51,42,74,.9);pointer-events:auto;box-shadow:0 6px 24px rgba(0,0,0,.28)}
.target-nav-label{font-size:11px;color:var(--dim);letter-spacing:.12em;white-space:nowrap}
.mini-ctl{min-width:44px;min-height:44px;padding:7px 9px;background:#160f22;border:1px solid var(--line);color:var(--bone);cursor:pointer;letter-spacing:.08em;transition:.18s}
.mini-ctl:hover:not(:disabled){color:#fff;border-color:var(--violet);background:#1e1530}
.mini-ctl:disabled{opacity:.38;cursor:not-allowed}
#target-status{min-width:58px;font-size:11px;color:var(--violet);letter-spacing:.06em;text-align:center;white-space:nowrap}
#btn-clear-selection{color:#cfc6dd}
#btn-tutorial{color:var(--gold)}
#target-nav .tutorial-target{position:relative;z-index:50}
#bossbar{position:absolute;top:78px;left:50%;transform:translateX(-50%);width:min(420px,70vw);
  background:var(--panel);border:1px solid #5a2f4a;padding:7px 12px;pointer-events:none}
#boss-name{font-family:var(--disp);font-size:14px;letter-spacing:.2em;color:#e06a78;display:block;margin-bottom:4px;text-align:center}
.bb{height:8px;background:#1a1426;overflow:hidden}
#boss-fill{height:100%;width:100%;background:linear-gradient(90deg,#7a2030,#e06a78);transition:width .2s}

/* ---------- 明るさパネル ---------- */
#bright-panel{position:fixed;z-index:46;width:216px;background:var(--panel);border:1px solid #3a2f52;
  padding:12px 14px;box-shadow:0 8px 34px rgba(0,0,0,.7);visibility:hidden;opacity:0;transform:translateY(-6px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s}
#bright-panel.open{visibility:visible;opacity:1;transform:none}
.bp-head{font-family:var(--disp);font-size:13px;letter-spacing:.2em;color:#cfc6dd;margin-bottom:10px;
  display:flex;justify-content:space-between;align-items:baseline}
#bright-val{color:var(--gold);font-size:13px}
#bright-range{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:#2c2440;outline:none;margin:6px 0 12px;cursor:pointer}
#bright-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:15px;height:15px;background:var(--gold);
  border:1px solid #000;border-radius:2px;cursor:pointer;box-shadow:0 0 8px rgba(205,179,86,.5);transition:transform .15s}
#bright-range::-webkit-slider-thumb:hover{transform:scale(1.25)}
#bright-range::-moz-range-thumb{width:15px;height:15px;background:var(--gold);border:1px solid #000;border-radius:2px;cursor:pointer}
.bp-presets{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.bp-presets button{font-family:var(--body);font-size:11px;letter-spacing:.14em;background:#160f22;border:1px solid var(--line);
  color:var(--dim);min-height:44px;padding:6px 4px;cursor:pointer;transition:.18s}
.bp-presets button:hover{color:#fff;border-color:var(--violet)}
.bp-presets button.on{color:var(--gold);border-color:var(--gold);background:#221a2e}
.bp-note{font-size:10px;color:#6a6278;margin-top:10px;line-height:1.5;letter-spacing:.04em}

/* ---------- ポップアップ ---------- */
#popup{position:fixed;z-index:45;width:276px;max-width:calc(100vw - 20px);max-height:calc(100vh - 150px);overflow:auto;background:var(--panel);border:1px solid #3a2f52;
  padding:10px;box-shadow:0 8px 40px rgba(0,0,0,.7);transform:translate(-50%,-100%) translateY(-14px);
  pointer-events:auto;backdrop-filter:blur(2px)}
#popup.below{transform:translate(-50%,0) translateY(18px)}
.pop-head{font-family:var(--disp);font-size:14px;letter-spacing:.16em;color:#cfc6dd;margin-bottom:8px;
  border-bottom:1px solid var(--line);padding-bottom:6px}
.pop-head .lv{color:var(--gold);font-size:11px;letter-spacing:.08em}
.pop-stats{font-size:11px;color:var(--dim);margin-bottom:8px;letter-spacing:.04em}
.pop-btn{display:grid;grid-template-columns:30px 1fr auto;grid-template-areas:'ico nm cost' 'ico ds ds';
  gap:2px 10px;width:100%;text-align:left;background:#160f22;border:1px solid var(--line);color:var(--bone);
  min-height:44px;padding:8px 10px;cursor:pointer;transition:.18s;font-family:inherit;margin-bottom:6px}
.pop-btn:last-child{margin-bottom:0}
.pop-btn:hover:not(.dis){border-color:var(--violet);background:#1e1530;transform:translateX(2px)}
.pop-btn.dis{opacity:.36;cursor:not-allowed}
.pop-btn.act{grid-template-columns:1fr auto;grid-template-areas:'nm cost' 'ds ds'}
.pop-btn.sell:hover{border-color:var(--blood)}
.pop-btn .ico{grid-area:ico;width:26px;height:26px}
.pop-btn .ico svg{width:100%;height:100%;display:block}
.pop-btn .nm{grid-area:nm;font-family:var(--disp);font-size:15px;letter-spacing:.14em}
.pop-btn .cost{grid-area:cost;color:var(--gold);font-size:13px;align-self:center}
.pop-btn .ds{grid-area:ds;font-size:10.5px;color:var(--dim);line-height:1.4;margin-top:2px}
.pop-max{font-size:11px;color:#7a6a8a;text-align:center;font-style:italic;margin:4px 0 8px;letter-spacing:.08em}
.tutorial-target{position:relative;z-index:50;border-color:var(--gold) !important;box-shadow:0 0 0 3px rgba(205,179,86,.26),0 0 22px rgba(205,179,86,.34) !important}

/* ---------- 3段階チュートリアル ---------- */
#tutorial{position:fixed;z-index:40;top:116px;left:18px;width:min(360px,calc(100vw - 36px));pointer-events:none}
.tutorial-card{padding:16px 18px 14px;background:rgba(18,13,28,.94);border:1px solid #66563b;border-left:3px solid var(--gold);box-shadow:0 10px 34px rgba(0,0,0,.48);pointer-events:auto}
.tutorial-kicker{font-size:10px;color:var(--gold);letter-spacing:.22em;margin-bottom:7px}
.tutorial-card h2{font-family:var(--disp);font-size:21px;letter-spacing:.14em;color:#e8e2d4;margin-bottom:7px}
.tutorial-card p{font-size:12px;line-height:1.7;color:#c9c2d4;letter-spacing:.03em;margin-bottom:10px}
.tutorial-skip{min-height:44px;padding:7px 13px;background:transparent;border:1px solid #4a3d55;color:var(--dim);font-size:11px;letter-spacing:.1em;cursor:pointer}
.tutorial-skip:hover{color:#fff;border-color:var(--violet)}

/* ---------- スクリーン類 ---------- */
.screen{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center}
.screen .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shade{position:absolute;inset:0}
#title{transition:opacity 1s ease}
#title .bg{opacity:.42;filter:grayscale(.45) brightness(.72) contrast(1.1)}
#title .shade{background:linear-gradient(90deg,rgba(7,5,12,.96) 0%,rgba(7,5,12,.78) 38%,rgba(7,5,12,.35) 70%,rgba(7,5,12,.7) 100%)}
#title.off{opacity:0;pointer-events:none}
.mist{position:absolute;inset:-10%;background:radial-gradient(circle at 30% 40%,rgba(80,60,110,.12),transparent 40%),
  radial-gradient(circle at 70% 60%,rgba(120,40,70,.1),transparent 45%);animation:drift 38s linear infinite alternate;pointer-events:none}
@keyframes drift{0%{transform:translateX(-4%) translateY(-2%)}100%{transform:translateX(4%) translateY(2%)}}
.chart{position:relative;z-index:2;margin-left:5vw;max-width:560px;width:88%;padding:30px 34px;
  background:rgba(12,9,18,.82);border:1px solid #3a2f52;border-top:3px solid var(--blood);
  box-shadow:0 0 60px rgba(0,0,0,.6);animation:chartIn 1.2s ease both .2s}
@keyframes chartIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.chart-head{font-size:11px;letter-spacing:.32em;color:var(--blood);margin-bottom:14px}
.chart h2{font-family:var(--disp);font-size:30px;letter-spacing:.1em;margin-bottom:16px;color:#e8e2d4}
.chart table{width:100%;border-collapse:collapse;margin-bottom:16px}
.chart th{font-family:var(--body);font-size:11px;letter-spacing:.18em;color:var(--dim);text-align:left;vertical-align:top;padding:5px 12px 5px 0;width:120px}
.chart td{font-size:13px;color:#c9c2d4;padding:5px 0;line-height:1.5}
.symptoms{margin-bottom:16px}
.symptoms .label{font-size:11px;letter-spacing:.24em;color:var(--dim);display:block;margin-bottom:8px}
.symptoms ul{list-style:none}
.symptoms li{display:inline-block;border:1px solid #3a2f52;padding:3px 11px;margin:0 4px 5px 0;font-size:12px;
  color:#a99fc0;background:#140f20;letter-spacing:.22em;transition:.25s;cursor:default}
.symptoms li:hover{color:#e8e2d4;border-color:var(--violet);transform:translateY(-2px)}
.symptoms li:nth-child(3n){transform:rotate(-1.4deg)}
.symptoms li:nth-child(4n){transform:rotate(1.2deg);color:var(--blood);border-color:#5a2f3f}
.symptoms li:nth-child(5n){color:var(--violet)}
.note{font-size:13px;color:#b8b0c6;line-height:1.7;margin-bottom:18px;font-family:var(--disp);letter-spacing:.04em}
.note em{color:var(--blood);font-style:normal}
.btn{font-family:var(--disp);background:#1a1426;border:1px solid #3a2f52;color:var(--bone);padding:12px 28px;
  font-size:17px;letter-spacing:.26em;cursor:pointer;transition:all .25s;position:relative}
.btn:hover{background:#251b38;border-color:var(--violet);box-shadow:0 0 18px rgba(143,123,181,.28);transform:translateY(-1px)}
.btn.big{font-size:20px;padding:15px 40px;display:block;width:100%;margin-bottom:10px}
.btn.ghost{background:transparent;border-color:var(--line);font-size:14px;width:100%;padding:10px}
.btn.ghost:hover{border-color:var(--blood);box-shadow:none}
.warn{font-size:10.5px;color:#6a6278;margin-top:14px;letter-spacing:.05em;line-height:1.6}
.title-vert{position:absolute;right:5vw;top:8vh;z-index:2;writing-mode:vertical-rl;text-orientation:upright}
.title-vert h1{font-family:var(--disp);font-size:clamp(56px,11vh,118px);letter-spacing:.16em;color:#e2dccc;
  text-shadow:0 0 28px rgba(143,123,181,.4),0 4px 14px #000;animation:flick 9s infinite}
@keyframes flick{0%,93%,100%{opacity:1}94%{opacity:.55}95%{opacity:1}97%{opacity:.7}}
.title-vert .sub{font-family:var(--disp);font-size:14px;letter-spacing:.3em;color:#9a90b0;margin-left:18px}
.seal{position:absolute;right:5vw;bottom:9vh;z-index:2;background:#7a2a33;color:#e8d8d0;
  width:46px;height:46px;display:grid;place-items:center;font-family:var(--disp);font-size:20px;
  transform:rotate(7deg);border-radius:4px;box-shadow:0 0 14px rgba(122,42,51,.5)}

/* 遊び方 */
#help{position:fixed;inset:0;z-index:110;background:rgba(5,3,9,.86);display:flex;align-items:center;justify-content:center;padding:20px}
.help-box{position:relative;max-width:760px;width:100%;max-height:88vh;overflow:auto;background:var(--panel);
  border:1px solid #3a2f52;padding:30px 34px;box-shadow:0 0 60px rgba(0,0,0,.7)}
.help-box h2{font-family:var(--disp);font-size:26px;letter-spacing:.18em;margin-bottom:6px;color:#e8e2d4}
.help-box h3{font-family:var(--disp);font-size:16px;letter-spacing:.16em;color:var(--violet);margin:18px 0 8px}
.help-box p,.help-box li{font-size:13px;color:#b8b0c6;line-height:1.7;letter-spacing:.03em}
.help-box ul{list-style:none}
.help-box li{padding-left:14px;position:relative;margin-bottom:4px}
.help-box li::before{content:'›';position:absolute;left:0;color:var(--blood)}
.trow{display:grid;grid-template-columns:30px 90px 60px 1fr;gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid #221a30}
.trow .ico{width:24px;height:24px}.trow .ico svg{width:100%;height:100%}
.trow .nm{font-family:var(--disp);font-size:14px;letter-spacing:.1em}
.trow .cst{color:var(--gold);font-size:13px}
.trow .ds{font-size:11.5px;color:var(--dim)}
.edot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:middle}
#btn-help-close{position:absolute;top:14px;right:16px}

/* 終幕 */
#end .bg{filter:grayscale(.5) brightness(.55) contrast(1.1)}
#end.dawn .bg{filter:brightness(1.05) saturate(.85) contrast(1.02)}
#end .shade{background:radial-gradient(ellipse at center,rgba(40,8,16,.55),rgba(4,2,7,.92))}
#end.dawn .shade{background:radial-gradient(ellipse at center,rgba(60,40,30,.4),rgba(8,6,10,.86))}
.end-box{position:relative;z-index:2;max-width:560px;width:88%;padding:36px 40px;background:rgba(12,9,18,.84);
  border:1px solid #5a2f3f;box-shadow:0 0 60px rgba(0,0,0,.7);text-align:center}
#end.dawn .end-box{border-color:#6a5a3f}
.end-box h1{font-family:var(--disp);font-size:48px;letter-spacing:.3em;color:var(--blood);margin-bottom:18px}
#end.dawn .end-box h1{color:#e8cfa0}
.end-box p{font-family:var(--disp);font-size:15px;line-height:2;color:#c9c2d4;letter-spacing:.06em;margin-bottom:20px}
#end-stats{font-size:12px;color:var(--dim);letter-spacing:.08em;margin-bottom:24px;line-height:1.9}
#end:not(.hidden){animation:fadeIn 1.3s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* 小休止 */
#pause{background:rgba(5,3,9,.78)}
#pause .panel{position:relative;z-index:2;max-width:380px;width:88%;padding:34px 36px;background:var(--panel);
  border:1px solid #3a2f52;text-align:center;box-shadow:0 0 60px rgba(0,0,0,.7)}
#pause h2{font-family:var(--disp);font-size:30px;letter-spacing:.24em;margin-bottom:10px;color:#e8e2d4}
#pause p{font-size:13px;color:var(--dim);margin-bottom:22px;letter-spacing:.06em}
#pause .btn{width:100%;margin-bottom:10px}

@media(max-width:880px){
  .title-vert{position:static;writing-mode:horizontal-tb;text-align:center;margin-top:18px}
  .title-vert h1{font-size:clamp(40px,9vw,72px)}
  .title-vert .sub{margin-left:0;display:block;margin-top:8px}
  #title{flex-direction:column;justify-content:flex-start;overflow-x:hidden;overflow-y:auto}
  .chart{margin:14px auto 30px}
  .seal{display:none}
  #self-hp-bar{width:120px}
  #hint{display:none}
}

@media(max-width:600px){
  #topbar{padding:8px 10px;gap:6px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'left right' 'mid mid';align-items:start}
  .cluster.left{grid-area:left;gap:6px}
  .cluster.mid{grid-area:mid;width:100%}
  .cluster.right{grid-area:right;max-width:210px;justify-content:flex-end;gap:4px;flex-wrap:wrap}
  .stat{min-width:0;padding:6px 8px}
  .stat .val{font-size:20px}
  .stat .label{font-size:9px;letter-spacing:.18em}
  .ctl{padding:6px 8px;font-size:10px;letter-spacing:.05em}
  #self-hp-wrap{width:100%;padding:7px 9px;gap:7px}
  #self-hp-bar{width:auto;flex:1;min-width:0}
  #wave-ctrl{right:10px;bottom:10px;max-width:calc(100vw - 20px)}
  #btn-wave{max-width:calc(100vw - 20px);padding:10px 14px;font-size:13px;letter-spacing:.12em}
  #target-nav{left:10px;bottom:70px;max-width:calc(100vw - 20px);flex-wrap:wrap;padding:5px 6px}
  #target-status{order:4}
  #btn-clear-selection,#btn-tutorial{order:5}
  #tutorial{top:164px;left:10px;width:calc(100vw - 20px)}
  .tutorial-card{padding:13px 14px 12px}
  .tutorial-card h2{font-size:18px}
  #popup{max-height:calc(100vh - 190px);padding:8px}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important;transition-duration:.01ms !important}
  #vignette,.mist{animation:none}
  #game.warping{filter:none}
  #grain{opacity:.2}
  #whispers .whisper{animation:none;opacity:.72;transform:none}
  #banner.show{animation:none;opacity:1;transform:translateX(-50%)}
  #redflash.on{animation:none;opacity:.42}
}