/* ════════════════════════════════════════════════════════════
   だんのうら — style.css
   メインゲームUIは「SNES期の商業RPG風ウィンドウ」で統一する。
   ・ウィンドウ  : .ui-win（＋ dialogue-area / ev-box / endlist-box などに同じ見た目）
   ・カーソル    : #ui-hand（main/ui.js がフォーカス中の項目の左に置く）
   ・ゲージ      : .ui-gauge（精神・疲労の区切り付きバー）
   ・トランジション: #ui-wipe（シーン切替時のディザ・フェード）
   game.js が使う id / class はすべて残している。
   ════════════════════════════════════════════════════════════ */
:root {
  --bg:#05040e; --panel:rgba(10,7,22,.97);
  --pu:#8a52d4; --pu-dim:#4a2480; --pu-glow:rgba(138,82,212,.28);
  --cy:#00e8c8; --cy-dim:rgba(0,232,200,.1);
  --rd:#e83055; --gd:#e8b830; --gn:#44ee88;
  --tx:#bbaedd; --tx-d:#5e5078; --tx-b:#deccf8;
  --mono:'Share Tech Mono',monospace;
  --serif:'Noto Serif JP',serif;
  --dot:'DotGothic16',sans-serif;
  --noise-op:0; --scan-op:0;
  /* 疲労演出用 */
  --fatigue-drift:0px;

  /* ── SNESウィンドウ ── */
  --tx-dim:#9a8cc0;                 /* 読める薄文字（--tx-d はコントラスト不足なので本文には使わない） */
  --win-hi:#d9ccff;                 /* 外枠ハイライト */
  --win-mid:#7d64c8;
  --win-lo:#241650;                 /* 内枠の影 */
  --win-bg:linear-gradient(180deg,#231a56 0%,#161040 38%,#0e0a2c 70%,#0a0720 100%);
  --win-scan:repeating-linear-gradient(180deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px);
  --win-orn:
    linear-gradient(var(--cy),var(--cy)) left 5px top 5px/3px 3px no-repeat,
    linear-gradient(var(--cy),var(--cy)) right 5px top 5px/3px 3px no-repeat,
    linear-gradient(var(--cy),var(--cy)) left 5px bottom 5px/3px 3px no-repeat,
    linear-gradient(var(--cy),var(--cy)) right 5px bottom 5px/3px 3px no-repeat;
  --win-shadow:0 0 0 2px #04020c,inset 0 0 0 2px var(--win-lo),inset 0 0 0 3px rgba(125,100,200,.35),0 8px 22px rgba(0,0,0,.55);
  --cur:#ffe48a;                    /* カーソル・選択色（金） */
  --up:#5ff5dc; --down:#ff7d95; --warn:#ffd36b;
}
[data-phase="1"]{--noise-op:0;   --scan-op:0;}
[data-phase="2"]{--noise-op:.12; --scan-op:0;}
[data-phase="3"]{--noise-op:.42; --scan-op:1;}

*{margin:0;padding:0;box-sizing:border-box;}
html,body{width:100%;height:100%;background:var(--bg);color:var(--tx);font-family:var(--serif);overflow:hidden;user-select:none;}

/* ── レイヤー ── */
#rain-canvas{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.25;transition:opacity 4s;}
#noise-ol{position:fixed;inset:0;z-index:1;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  background-size:140px;opacity:var(--noise-op);transition:opacity 7s ease;}
#scan-ol{position:fixed;inset:0;z-index:2;pointer-events:none;
  background:repeating-linear-gradient(transparent,transparent 3px,rgba(138,82,212,.01) 3px,rgba(138,82,212,.01) 4px);
  opacity:var(--scan-op);transition:opacity 9s ease;}
body.ph3    #scan-ol{animation:scan 16s linear infinite;}
body.ph3crit #scan-ol{animation:scan 5s linear infinite;filter:hue-rotate(130deg);}
@keyframes scan{from{background-position:0 0}to{background-position:0 200px}}
#red-flash{position:fixed;inset:0;z-index:198;pointer-events:none;opacity:0;background:rgba(220,0,40,.15);transition:opacity .15s;}

/* ── スクリーン ── */
.screen{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .9s;}
.screen.hidden{opacity:0;pointer-events:none;}

/* ══════════════════════════════════════════
   SNES WINDOW（共通の見た目）
   ══════════════════════════════════════════ */
.ui-win,
.dialogue-area,
.ev-box,
.endlist-box,
.mg-pick-box,
.ui-res-box,
#choices-area,
.str-choices,
.notif,
.cutin-box{
  background:var(--win-orn),var(--win-scan),var(--win-bg);
  border:2px solid var(--win-hi);
  border-radius:7px;
  box-shadow:var(--win-shadow);
  color:var(--tx-b);
}
/* ウィンドウの見出しプレート */
.ui-plate{display:inline-flex;align-items:center;gap:6px;font-family:var(--dot);font-size:.72rem;letter-spacing:.12em;color:var(--cur);
  background:linear-gradient(180deg,#3a2a7a,#1e1548);border:2px solid var(--win-hi);border-radius:4px;padding:1px 10px 2px;
  box-shadow:0 0 0 2px #04020c,inset 0 -2px 0 rgba(0,0,0,.35);text-shadow:1px 1px 0 #000;}

/* ══════════════ MAIN GAME ══════════════ */
#game-screen{background:var(--bg);flex-direction:column;justify-content:flex-start;align-items:stretch;padding:0;overflow:hidden;}
#game-screen > *{max-width:480px;width:100%;margin-left:auto;margin-right:auto;}
@media(min-width:520px){
  .screen{align-items:center;}
  #game-screen{align-items:center;
    background:
      radial-gradient(ellipse at 50% 40%,rgba(80,40,150,.16),transparent 60%),
      repeating-linear-gradient(90deg,rgba(138,82,212,.035) 0 1px,transparent 1px 24px),
      var(--bg);}
  /* PCでは480pxの「画面」に枠をつける */
  #game-screen::before{content:'';position:absolute;top:0;bottom:0;left:50%;width:488px;transform:translateX(-50%);
    border-left:2px solid rgba(217,204,255,.18);border-right:2px solid rgba(217,204,255,.18);
    box-shadow:0 0 0 2px #04020c,0 0 60px rgba(138,82,212,.18);background:rgba(5,4,14,.92);pointer-events:none;}
  .day-line,.sub-bar{position:relative;}
  .game-body{max-width:480px;width:100%;}
}
.game-body{max-width:480px;width:100%;margin:0 auto;flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;position:relative;}

/* ── 上部HUD ── */
.top-bar{
  display:grid;grid-template-columns:auto 1fr 1fr auto auto;align-items:stretch;
  height:48px;position:relative;z-index:5;
  background:linear-gradient(180deg,#1b1442 0%,#100b2c 60%,#0a0720 100%);
  border-bottom:2px solid var(--win-hi);
  box-shadow:0 2px 0 #04020c,inset 0 -3px 0 var(--win-lo),0 6px 14px rgba(0,0,0,.45);
}
.top-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 8px;border-right:1px solid rgba(217,204,255,.12);min-width:0;}
.top-cell:last-child{border-right:none;}
.top-lbl{font-family:var(--dot);font-size:.6rem;color:var(--tx-dim);letter-spacing:.12em;text-transform:uppercase;}
.top-val{font-family:var(--dot);font-size:.88rem;color:var(--tx-b);letter-spacing:.04em;line-height:1;text-shadow:1px 1px 0 #000;font-variant-numeric:tabular-nums;}
.top-val.danger{color:var(--down);animation:pd 1.1s ease infinite;}
.top-val.good{color:var(--up);}
@keyframes pd{0%,100%{opacity:1;}50%{opacity:.35;}}

/* DAY（左端）：月相アイコン付き */
.top-day{flex-direction:row;gap:6px;padding:0 10px 0 9px;}
.top-day .ui-moon{width:20px;height:20px;flex-shrink:0;filter:drop-shadow(0 0 4px rgba(255,236,170,.35));}
.top-day .ui-daybox{display:flex;flex-direction:column;align-items:flex-start;line-height:1;}
.top-day .ui-daylbl{font-family:var(--mono);font-size:.6rem;color:var(--tx-dim);letter-spacing:.14em;}
.top-day-num{font-family:var(--dot);font-size:1.12rem;color:var(--cur);line-height:1;text-shadow:1px 1px 0 #000,0 0 8px rgba(255,228,138,.3);display:inline;}
.top-day-sub{font-family:var(--mono);font-size:.6rem;color:var(--tx-dim);letter-spacing:.06em;display:inline;margin-left:2px;}
.top-day .ui-dayrow{display:flex;align-items:baseline;}
.top-day-num.ui-pop{animation:numPop .6s cubic-bezier(.3,1.6,.5,1);}

/* 精神・疲労のゲージセル */
.top-cell.ui-gcell{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-items:end;align-content:center;column-gap:6px;row-gap:4px;padding:0 9px;}
.ui-gcell .top-lbl{grid-column:1;grid-row:1;}
.ui-gcell .top-val{grid-column:2;grid-row:1;justify-self:end;font-size:.86rem;}
.ui-gcell .ui-gauge{grid-column:1/-1;grid-row:2;}

/* 区切り付きゲージ（10セグメント） */
.ui-gauge{position:relative;height:8px;border-radius:2px;background:#07051a;
  box-shadow:0 0 0 1px #04020c,inset 0 0 0 1px rgba(217,204,255,.28);overflow:hidden;}
.ui-gauge > b{position:absolute;left:1px;top:1px;bottom:1px;width:0;border-radius:1px;
  background:linear-gradient(180deg,#9ff,var(--cy) 45%,#0a9b88);transition:width .55s cubic-bezier(.4,0,.2,1),background .3s;}
.ui-gauge > i{position:absolute;left:1px;top:1px;bottom:1px;width:0;background:rgba(255,255,255,.55);transition:width .9s cubic-bezier(.4,0,.2,1) .25s;}
.ui-gauge::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),#07051a calc(10% - 1px) 10%),
             linear-gradient(180deg,rgba(255,255,255,.18) 0 1px,transparent 1px);}
.ui-gauge.g-pu > b{background:linear-gradient(180deg,#d9b8ff,#a46ff0 45%,#5b2ea8);}
.ui-gauge.g-ok > b{background:linear-gradient(180deg,#b6ffe9,var(--cy) 45%,#0a9b88);}
.ui-gauge.g-warn > b{background:linear-gradient(180deg,#fff0b0,var(--gd) 45%,#a4760a);}
.ui-gauge.g-bad > b{background:linear-gradient(180deg,#ffb3c0,var(--rd) 45%,#8f1029);animation:gBad 1s steps(2) infinite;}
@keyframes gBad{50%{filter:brightness(1.5);}}

/* RANK：エンブレム */
.top-rank{padding:0 8px;}
.top-rank .top-val{font-size:.95rem;min-width:24px;text-align:center;padding:2px 4px;border:2px solid var(--gd);border-radius:3px;
  background:linear-gradient(180deg,rgba(232,184,48,.25),rgba(232,184,48,.05));box-shadow:0 0 0 1px #04020c;}

/* 時刻 */
.top-time{display:flex;align-items:center;justify-content:center;padding:0 10px;font-family:var(--mono);font-size:.9rem;color:var(--up);letter-spacing:.08em;
  border-left:1px solid rgba(217,204,255,.12);text-shadow:0 0 8px rgba(0,232,200,.45),1px 1px 0 #000;font-variant-numeric:tabular-nums;}

/* 値変化のフラッシュ */
.ui-flash-up{animation:flashUp .7s ease;}
.ui-flash-down{animation:flashDown .7s ease;}
@keyframes flashUp{0%{color:#fff;text-shadow:0 0 10px var(--cy),0 0 2px #fff;transform:scale(1.25);}100%{transform:none;}}
@keyframes flashDown{0%{color:#fff;text-shadow:0 0 10px var(--rd),0 0 2px #fff;transform:scale(1.25);}100%{transform:none;}}
.ui-delta{position:fixed;z-index:160;pointer-events:none;font-family:var(--dot);font-size:.78rem;text-shadow:1px 1px 0 #000,-1px 0 0 #000,0 -1px 0 #000;
  animation:deltaUp 1.1s ease-out forwards;white-space:nowrap;}
.ui-delta.up{color:var(--up);} .ui-delta.down{color:var(--down);}
@keyframes deltaUp{0%{opacity:0;transform:translate(-50%,4px) scale(.8);}15%{opacity:1;transform:translate(-50%,0) scale(1.15);}30%{transform:translate(-50%,-4px) scale(1);}100%{opacity:0;transform:translate(-50%,-22px);}}
@keyframes numPop{0%{transform:scale(.4);opacity:0;}60%{transform:scale(1.3);opacity:1;}100%{transform:none;}}

/* DAY進捗バー */
.day-line{height:3px;background:#07051a;box-shadow:0 1px 0 #04020c;}
.day-line-fill{height:100%;background:repeating-linear-gradient(90deg,var(--pu) 0 6px,#b48cff 6px 8px);transition:width 1.2s ease;box-shadow:0 0 6px rgba(138,82,212,.6);}

/* 借金・炎上・所持金 */
.sub-bar{display:flex;align-items:center;gap:4px;padding:3px 8px;min-height:28px;
  background:linear-gradient(180deg,#0f0b28,#09061c);border-bottom:1px solid rgba(217,204,255,.14);
  font-family:var(--mono);font-size:.6rem;color:var(--tx-dim);flex-shrink:0;}
.sub-bar > span{display:inline-flex;align-items:baseline;gap:3px;padding:2px 6px;border-radius:3px;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(217,204,255,.1);white-space:nowrap;}
.sub-bar b{font-weight:normal;color:var(--tx-b);font-family:var(--dot);font-size:.72rem;font-variant-numeric:tabular-nums;display:inline-block;}
.sub-bar small{font-size:.6rem;opacity:.75;margin-left:1px;}
.sub-bar b.warn{color:var(--warn);}
.sub-bar b.danger{color:var(--down);animation:dgPulse 1.6s ease-in-out infinite;}
.sub-gear{margin-left:auto;background:none;border:2px solid rgba(217,204,255,.25);border-radius:4px;color:var(--tx-b);font-size:.95rem;line-height:1;cursor:pointer;
  min-width:32px;min-height:26px;-webkit-tap-highlight-color:transparent;transition:border-color .15s,color .15s;}
.sub-gear:hover{color:var(--cur);border-color:var(--cur);}

/* 今日の目標（クエストリボン） */
#daily-guide{
  margin:5px 8px 0;padding:4px 10px 4px 8px;min-height:26px;flex-shrink:0;
  display:flex;align-items:center;gap:6px;
  font-family:var(--dot);font-size:.68rem;letter-spacing:.04em;color:var(--tx-b);
  background:linear-gradient(90deg,rgba(232,184,48,.16),rgba(232,184,48,.03) 70%,transparent);
  border-left:3px solid var(--gd);border-radius:2px;
}
#daily-guide > span:first-child{font-size:.8rem;}
#daily-guide::before{content:'TODAY';font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;color:var(--gd);padding:0 5px;border:1px solid rgba(232,184,48,.5);border-radius:2px;order:-1;}
#daily-guide-text{flex:1;line-height:1.35;}
#daily-guide.danger{color:#ffd2da;background:linear-gradient(90deg,rgba(232,48,85,.3),rgba(232,48,85,.06) 75%,transparent);border-left-color:var(--rd);animation:dgPulse 1.6s ease-in-out infinite;}
#daily-guide.danger::before{content:'DANGER';color:var(--down);border-color:rgba(232,48,85,.6);}
#daily-guide.ui-swap #daily-guide-text{animation:guideIn .45s ease;}
@keyframes guideIn{from{opacity:0;transform:translateX(8px);}to{opacity:1;transform:none;}}
@keyframes dgPulse{0%,100%{opacity:1;}50%{opacity:.62;}}

/* シーンエリア（中身は main/homescene.js が描く） */
.scene-area{height:100px;position:relative;overflow:hidden;flex-shrink:0;margin:6px 8px 0;border-radius:5px;
  box-shadow:0 0 0 2px #04020c,0 0 0 3px rgba(217,204,255,.35);}
.scene-bg{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;font-size:3.8rem;opacity:.09;filter:blur(3px);pointer-events:none;transition:opacity 2s;}
.scene-label{position:absolute;bottom:6px;left:8px;font-family:var(--mono);font-size:.6rem;color:var(--up);letter-spacing:.14em;
  padding:1px 6px;background:rgba(4,2,12,.7);border:1px solid rgba(0,232,200,.35);border-radius:2px;text-shadow:0 0 6px rgba(0,232,200,.4);}
.scene-extra{position:absolute;top:6px;right:8px;font-family:var(--mono);font-size:.6rem;color:var(--tx-dim);text-align:right;line-height:1.8;}

/* ── メッセージウィンドウ ── */
.dialogue-area{position:relative;margin:16px 8px 0;padding:14px 14px 12px;min-height:76px;flex-shrink:0;cursor:pointer;}
.dlg-speaker{position:absolute;top:-12px;left:12px;z-index:1;
  font-family:var(--dot);font-size:.7rem;letter-spacing:.12em;color:var(--cur);
  background:linear-gradient(180deg,#3a2a7a,#1e1548);border:2px solid var(--win-hi);border-radius:4px;padding:1px 10px 2px;
  box-shadow:0 0 0 2px #04020c;text-shadow:1px 1px 0 #000;line-height:1.5;}
.dlg-speaker:empty{display:none;}
.dlg-text{font-family:var(--serif);font-size:clamp(.78rem,2.2vw,.86rem);line-height:1.85;color:#efe6ff;min-height:34px;text-shadow:1px 1px 0 rgba(0,0,0,.8);padding-right:14px;}
/* 送りマーク：入力待ちで▼が跳ねる。表示中は隠す */
.dlg-cursor{position:absolute;right:12px;bottom:8px;width:0;height:0;margin:0;background:none;
  border-left:6px solid transparent;border-right:6px solid transparent;border-top:7px solid var(--cur);
  filter:drop-shadow(1px 1px 0 #000);animation:advBob .8s steps(2) infinite;}
.dialogue-area.ui-typing .dlg-cursor{opacity:0;animation:none;}
@keyframes advBob{0%{transform:translateY(0);}50%{transform:translateY(3px);}}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:0;}}
/* 立ち絵の差し込み口（他モジュール用フック）：.dialogue-area に .has-portrait を付け、.dlg-portrait を中に置く */
.dialogue-area.has-portrait{padding-left:84px;min-height:92px;}
.dlg-portrait{position:absolute;left:10px;bottom:10px;width:64px;height:64px;border-radius:4px;overflow:hidden;
  box-shadow:0 0 0 2px #04020c,0 0 0 3px var(--win-mid);background:#0a0720;}
.dlg-portrait img{width:100%;height:100%;object-fit:cover;display:block;}

/* 疲労時の揺れ */
body.fatigue-hi .dlg-text{animation:ftshake .18s linear infinite;}
body.fatigue-hi .choice-btn:nth-child(odd){transform:translateX(var(--fatigue-drift));}
@keyframes ftshake{0%,100%{transform:none;}33%{transform:translateX(.8px);}66%{transform:translateX(-.8px);}}

/* ── コマンドウィンドウ（行動メニュー） ── */
#choices-area{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  margin:10px 8px 64px;padding:12px 10px;display:grid;grid-template-columns:1fr;grid-auto-rows:max-content;gap:6px;align-content:start;
  scrollbar-width:thin;scrollbar-color:var(--win-mid) transparent;}
#choices-area:empty{display:none;}
#choices-area:not(.ui-grid){flex:0 1 auto;}
/* 続きがあるときの▼ */
#choices-area.ui-more::after{content:'';position:sticky;bottom:-6px;grid-column:1/-1;justify-self:center;width:0;height:0;margin-top:-12px;
  border-left:7px solid transparent;border-right:7px solid transparent;border-top:8px solid var(--cur);filter:drop-shadow(0 0 0 #000) drop-shadow(1px 1px 0 #000);animation:advBob .8s steps(2) infinite;pointer-events:none;}
#choices-area.ui-grid{grid-template-columns:1fr 1fr;}
.ui-grp{grid-column:1/-1;display:flex;align-items:center;gap:6px;margin:4px 2px 0;
  font-family:var(--dot);font-size:.64rem;letter-spacing:.2em;color:var(--cur);text-shadow:1px 1px 0 #000;}
.ui-grp:first-child{margin-top:0;}
.ui-grp::after{content:'';flex:1;height:2px;background:linear-gradient(90deg,rgba(217,204,255,.35),transparent);box-shadow:0 1px 0 #04020c;}
.ui-grp .ui-grp-en{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;color:var(--tx-dim);}
.ui-grp.special{color:#ffb3f0;}

.choice-btn{
  position:relative;overflow:hidden;display:flex;align-items:center;gap:7px;
  min-height:48px;padding:6px 6px 6px 19px;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.012));
  border:1px solid rgba(217,204,255,.16);border-radius:4px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 1px 0 #04020c;
  color:var(--tx-b);font-family:var(--dot);font-size:.78rem;line-height:1.3;text-align:left;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:border-color .12s,background .12s,color .12s,box-shadow .12s,transform .08s;
}
.choice-btn.ui-wide{grid-column:1/-1;}
.choice-btn:hover,.choice-btn.ui-cur{
  border-color:rgba(255,228,138,.75);color:#fff;
  background:linear-gradient(90deg,rgba(138,82,212,.42),rgba(138,82,212,.12) 70%,rgba(138,82,212,.05));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px #04020c,0 0 12px rgba(138,82,212,.35);}
.choice-btn:active,.choice-btn.pressed,.ui-press{transform:translateY(1px) scale(.985);filter:brightness(1.25);}
.choice-btn.neta{border-color:rgba(232,184,48,.5);background:linear-gradient(180deg,rgba(232,184,48,.14),rgba(232,184,48,.03));}
.choice-btn .ripple,.sk-card .ripple,.sc .ripple,.str-type-btn .ripple{position:absolute;border-radius:50%;background:rgba(255,228,138,.22);transform:scale(0);animation:ripple .45s ease-out forwards;pointer-events:none;}
@keyframes ripple{to{transform:scale(4);opacity:0;}}
.cb-ico{flex-shrink:0;width:1.35em;text-align:center;font-size:1.05rem;line-height:1;filter:drop-shadow(1px 1px 0 #000);}
.cb-main{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1;}
.cb-lbl{text-shadow:1px 1px 0 #000;word-break:keep-all;overflow-wrap:anywhere;}
.cb-cost{display:flex;flex-wrap:wrap;gap:3px;}
.cb-badge{position:absolute;top:4px;right:5px;font-family:var(--mono);font-size:.6rem;color:var(--cur);letter-spacing:.04em;}
.choice-btn.ui-locked{opacity:.55;filter:saturate(.4);}
.choice-btn.ui-locked .cb-badge{color:var(--tx-dim);}
.choice-btn.ui-enter{animation:cmdIn .32s cubic-bezier(.2,.9,.3,1) both;}
@keyframes cmdIn{from{opacity:0;transform:translateX(-10px);}to{opacity:1;transform:none;}}

/* コスト・効果チップ */
.chip{display:inline-block;font-family:var(--mono);font-size:.6rem;line-height:1.45;padding:0 4px;border-radius:2px;white-space:nowrap;
  color:var(--tx);background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(217,204,255,.18);}
.chip.up{color:var(--up);background:rgba(0,232,200,.09);box-shadow:inset 0 0 0 1px rgba(0,232,200,.35);}
.chip.down{color:var(--down);background:rgba(232,48,85,.1);box-shadow:inset 0 0 0 1px rgba(232,48,85,.38);}
.chip.warn{color:var(--warn);background:rgba(232,184,48,.1);box-shadow:inset 0 0 0 1px rgba(232,184,48,.4);}

/* ── ボトムナビ（タブ） ── */
.bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:15;
  background:linear-gradient(180deg,#140f34,#080616);border-top:2px solid var(--win-hi);box-shadow:0 -2px 0 #04020c,inset 0 3px 0 var(--win-lo);}
.nav-btn{flex:1;padding:8px 2px 7px;display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:none;cursor:pointer;
  color:var(--tx-dim);font-family:var(--dot);font-size:.62rem;letter-spacing:.06em;min-height:54px;position:relative;
  -webkit-tap-highlight-color:transparent;transition:color .15s;}
.nav-btn .icon{font-size:1.1rem;filter:grayscale(.5) brightness(.8);transition:filter .15s,transform .15s;}
.nav-btn:hover{color:var(--tx-b);}
.nav-btn.active{color:var(--cur);text-shadow:1px 1px 0 #000;}
.nav-btn.active .icon{filter:none;transform:translateY(-1px);}
.nav-btn.active::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid var(--cur);}
.nav-btn:active{opacity:.75;}
#bottom-nav{max-width:480px;width:100%;margin:0 auto;}

/* ══════════════ STREAMING ══════════════ */
#streaming-ol{position:fixed;inset:0;z-index:50;background:var(--bg);display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .5s;}
#streaming-ol.active{opacity:1;pointer-events:all;}
#streaming-ol > *{width:100%;max-width:480px;margin-left:auto;margin-right:auto;}
#live-intro{position:absolute;inset:0;z-index:10;background:rgba(5,4,14,.97);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;opacity:0;pointer-events:none;transition:opacity .35s;max-width:none;}
#live-intro.show{opacity:1;pointer-events:all;}
.li-icon{font-size:2.2rem;}
.li-text{font-family:var(--dot);font-size:1.4rem;color:var(--rd);letter-spacing:.3em;opacity:0;text-shadow:0 0 14px rgba(232,48,85,.6),2px 2px 0 #000;}
.li-text.on{animation:lf .38s ease forwards;}
@keyframes lf{0%{opacity:0;transform:scale(.8);}60%{opacity:1;transform:scale(1.04);}100%{opacity:1;transform:scale(1);}}
.li-sub{font-family:var(--mono);font-size:.62rem;color:var(--tx-dim);letter-spacing:.1em;}
.str-header{background:linear-gradient(180deg,#1b1442,#0a0720);border-bottom:2px solid var(--win-hi);box-shadow:0 2px 0 #04020c;padding:8px 12px;display:flex;align-items:center;gap:8px;}
.live-badge{background:var(--rd);color:#fff;font-family:var(--mono);font-size:.62rem;font-weight:bold;letter-spacing:.12em;padding:2px 7px;border-radius:2px;box-shadow:0 0 0 1px #04020c,0 0 10px rgba(232,48,85,.5);animation:lp 1.8s ease-in-out infinite;}
@keyframes lp{0%,100%{opacity:1;}50%{opacity:.5;}}
.str-title{font-family:var(--dot);font-size:.78rem;color:var(--tx-b);flex:1;text-shadow:1px 1px 0 #000;}
.viewer-cnt{font-family:var(--mono);font-size:.68rem;color:var(--cur);}
.str-body{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0;}
.str-visual{height:75px;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,rgba(138,82,212,.14),transparent);font-size:2.2rem;position:relative;flex-shrink:0;}
.waveform{position:absolute;bottom:0;left:0;right:0;height:22px;display:flex;align-items:flex-end;justify-content:center;gap:3px;}
.wb{width:3px;background:var(--pu);border-radius:1px 1px 0 0;opacity:.6;animation:wv .9s ease-in-out infinite;}
.wb:nth-child(2){animation-delay:.11s;}.wb:nth-child(3){animation-delay:.22s;}.wb:nth-child(4){animation-delay:.16s;}.wb:nth-child(5){animation-delay:.06s;}.wb:nth-child(6){animation-delay:.27s;}.wb:nth-child(7){animation-delay:.09s;}
@keyframes wv{0%,100%{height:3px;}50%{height:15px;}}
.comment-feed{flex:1;overflow-y:auto;padding:6px 12px;display:flex;flex-direction:column;gap:3px;background:rgba(4,3,10,.6);
  box-shadow:inset 0 0 0 1px rgba(217,204,255,.08);}
.ci{display:flex;gap:7px;font-size:.68rem;line-height:1.55;animation:cin .38s ease;}
@keyframes cin{from{opacity:0;transform:translateX(-5px);}to{opacity:1;transform:none;}}
.ci-u{font-family:var(--mono);font-size:.62rem;color:#b48cff;white-space:nowrap;min-width:56px;}
.ci-t{color:var(--tx);}
.ci.super .ci-u,.ci.super .ci-t{color:var(--gd);}
.ci.bad .ci-t{color:var(--rd);opacity:.75;}
.ci.ghost{opacity:.5;}.ci.ghost .ci-u{color:rgba(138,82,212,.45);font-style:italic;}.ci.ghost .ci-t{color:rgba(180,160,210,.4);}
.ci.anomaly .ci-u,.ci.anomaly .ci-t{color:var(--rd);}
.ci.rare .ci-u,.ci.rare .ci-t{color:var(--cy);}
.ci.worried .ci-u{color:var(--gd);}
.ci.worried .ci-t{color:var(--gd);opacity:.9;}
.str-stats{display:flex;gap:6px;padding:5px 10px;background:linear-gradient(180deg,#0f0b28,#09061c);border-top:1px solid rgba(217,204,255,.14);flex-wrap:wrap;}
.ss{font-family:var(--mono);font-size:.62rem;color:var(--tx-dim);padding:1px 6px;border-radius:2px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(217,204,255,.1);}
.ss span{color:var(--up);font-weight:bold;display:inline-block;font-variant-numeric:tabular-nums;}
.str-choices{margin:6px 8px 8px;padding:12px 10px 10px;display:flex;flex-direction:column;gap:5px;max-height:38vh;overflow-y:auto;width:auto !important;}
.str-choices > div:not([class]){font-family:var(--dot) !important;font-size:.66rem !important;color:var(--cur) !important;letter-spacing:.12em;padding:0 2px 4px !important;}
.sc,.str-type-btn{flex-shrink:0;position:relative;overflow:hidden;display:block;width:100%;
  min-height:46px;padding:9px 10px 9px 22px;margin:0;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.012));
  border:1px solid rgba(217,204,255,.16);border-radius:4px;box-shadow:0 1px 0 #04020c;
  color:var(--tx-b);font-family:var(--dot);font-size:.78rem;line-height:1.4;text-align:left;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:border-color .12s,background .12s,transform .08s;}
.sc:hover,.sc.ui-cur,.str-type-btn:hover,.str-type-btn.ui-cur{border-color:rgba(255,228,138,.75);color:#fff;
  background:linear-gradient(90deg,rgba(138,82,212,.42),rgba(138,82,212,.1));}
.sc:active,.str-type-btn:active{transform:translateY(1px) scale(.985);}
.sc .cb-cost,.str-type-btn .cb-cost{margin-top:3px;}
.sc .cb-lbl{display:block;}
/* ══════════════ TITLE ══════════════ */
#title-screen{background:radial-gradient(ellipse at 50% 60%,rgba(80,40,140,.2) 0%,transparent 65%),linear-gradient(180deg,#05040e 0%,#090620 50%,#05040e 100%);gap:18px;}
.t-eye{font-family:var(--mono);font-size:.6rem;letter-spacing:.28em;color:var(--cy);opacity:.55;text-transform:uppercase;animation:fi 2s ease .5s both;}
.t-main{font-family:var(--dot);font-size:clamp(2.5rem,8.5vw,4.2rem);color:var(--tx-b);letter-spacing:.14em;line-height:1;
  text-shadow:0 0 16px var(--pu-glow),0 0 44px rgba(138,82,212,.12);animation:fi 2s ease 1s both,tg 5s ease-in-out 2.5s infinite;}
@keyframes tg{0%,100%{text-shadow:0 0 16px var(--pu-glow),0 0 44px rgba(138,82,212,.12);}50%{text-shadow:0 0 26px rgba(138,82,212,.65),0 0 65px rgba(138,82,212,.26);}}
.t-sub{font-size:.8rem;color:var(--tx-d);letter-spacing:.17em;animation:fi 2s ease 1.8s both;}
.t-div{width:90px;height:1px;background:linear-gradient(to right,transparent,var(--pu),transparent);animation:fi 2s ease 2s both;}
.t-tag{font-size:.72rem;color:var(--cy);opacity:.7;letter-spacing:.12em;animation:fi 2s ease 2.3s both;}
.t-badge{font-family:var(--mono);font-size:.62rem;color:var(--gd);border:1px solid rgba(232,184,48,.25);padding:3px 10px;border-radius:2px;animation:fi 2s ease 2.6s both;}
@keyframes fi{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
/* btn-start: スマホ最適化セクションで定義 */
@keyframes bb{0%,100%{border-color:var(--pu);color:var(--pu);}50%{border-color:var(--cy);color:var(--cy);box-shadow:0 0 14px var(--cy-dim);}}
.btn-start::before{content:'';position:absolute;inset:0;background:var(--pu);transform:translateX(-101%);transition:transform .28s;z-index:-1;}
.btn-start:hover::before{transform:translateX(0);}
.btn-start:hover{color:#fff;}

/* ══════════════ STORY ══════════════ */
#story-screen{background:var(--bg);padding:26px 16px;justify-content:flex-start;overflow-y:auto;}
.story-log{max-width:490px;width:100%;display:flex;flex-direction:column;margin:auto;padding:32px 0 72px;}
.sl{font-size:clamp(.78rem,2.3vw,.9rem);line-height:2.1;color:var(--tx);opacity:0;transform:translateY(5px);transition:opacity .65s,transform .65s;padding:2px 0;}
.sl.show{opacity:1;transform:none;}
.sl.narrator{color:var(--tx-d);font-size:.74rem;letter-spacing:.06em;font-family:var(--mono);}
.sl.dialogue{color:var(--tx-b);padding-left:13px;border-left:2px solid var(--pu-dim);margin:6px 0;}
.sl.highlight{color:var(--cy);font-weight:700;}
.sl.gap{height:18px;}
.sl.chapter{font-family:var(--dot);font-size:.95rem;color:var(--pu);letter-spacing:.2em;padding:12px 0 6px;border-bottom:1px solid var(--pu-dim);margin-bottom:12px;}
.story-go{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);padding:8px 28px;background:var(--panel);border:1px solid var(--pu-dim);color:var(--pu);font-family:var(--dot);font-size:.85rem;letter-spacing:.14em;cursor:pointer;border-radius:2px;opacity:0;transition:opacity .5s,border-color .3s;z-index:20;}
.story-go.show{opacity:1;}
.story-go:hover{border-color:var(--cy);color:var(--cy);}

/* ══════════════ MINI GAMES ══════════════ */
.mini-screen{position:fixed;inset:0;z-index:60;background:var(--bg);display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .32s;}
.mini-screen.active{opacity:1;pointer-events:all;}
.mini-hd{padding:8px 13px;background:rgba(6,4,18,.98);border-bottom:1px solid rgba(0,232,200,.14);display:flex;align-items:center;gap:8px;}
.mini-ttl{font-family:var(--mono);font-size:.7rem;color:var(--cy);letter-spacing:.12em;}
.mini-ft{padding:7px 13px;display:flex;gap:8px;align-items:center;border-top:1px solid rgba(0,232,200,.09);}
.mini-sc{font-family:var(--mono);font-size:.7rem;color:var(--cy);flex:1;}
.mini-tm{font-family:var(--mono);font-size:.8rem;color:var(--gd);font-weight:bold;}
/* mini-endbtn: スマホ最適化セクションで定義 */

/* ── 歌 ── */
#song-mini{position:fixed;inset:0;z-index:62;background:var(--bg);display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .32s;}
#song-mini.active{opacity:1;pointer-events:all;}
.song-sb{padding:5px 13px;background:rgba(6,4,18,.98);border-bottom:1px solid rgba(138,82,212,.16);display:flex;gap:9px;align-items:center;}
.song-lyr{padding:6px 13px;font-family:var(--serif);font-size:.74rem;color:var(--tx-d);text-align:center;height:32px;display:flex;align-items:center;justify-content:center;letter-spacing:.12em;transition:color .6s;}
.song-track{flex:1;position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(138,82,212,.035) 0%,transparent 100%);}
.note-lane{position:absolute;bottom:0;left:0;right:0;height:52px;border-top:1px solid rgba(138,82,212,.2);display:flex;align-items:center;justify-content:center;gap:14px;}
.lane-key{width:48px;height:44px;border:1px solid rgba(138,82,212,.3);border-radius:4px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.62rem;color:var(--tx-d);transition:all .09s;background:rgba(10,7,22,.9);cursor:pointer;}
.lane-key.hit{border-color:var(--cy);background:rgba(0,232,200,.14);color:var(--cy);}
/* 高音時の発光 */
.song-track.sabi{background:radial-gradient(ellipse at 50% 80%,rgba(0,232,200,.1),transparent);}
.falling-note{position:absolute;border-radius:3px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.6rem;color:#fff;font-weight:bold;}
.n-p{background:var(--cy);box-shadow:0 0 6px rgba(0,232,200,.45);}
.n-g{background:var(--gd);}
.song-jdg{position:absolute;top:34%;left:50%;transform:translate(-50%,-50%);font-family:var(--dot);font-size:1.15rem;font-weight:bold;opacity:0;pointer-events:none;}
.song-jdg.pop{animation:jp .5s ease forwards;}
@keyframes jp{0%{opacity:1;transform:translate(-50%,-56%) scale(1.18);}80%{opacity:1;transform:translate(-50%,-50%) scale(1);}100%{opacity:0;transform:translate(-50%,-44%) scale(.9);}}
/* 観客波形（サビ時） */
.crowd-wave{position:absolute;bottom:55px;left:0;right:0;height:18px;display:flex;align-items:flex-end;justify-content:center;gap:2px;opacity:0;transition:opacity .5s;}
.crowd-wave.show{opacity:.4;}
.cw-bar{width:2px;background:var(--cy);border-radius:1px 1px 0 0;}

/* ══ SD CHARACTER ══ */
#sd-stage{
  width:100%;background:linear-gradient(180deg,rgba(138,82,212,.08) 0%,rgba(4,3,10,.95) 100%);
  border-bottom:1px solid rgba(138,82,212,.18);
  display:flex;flex-direction:column;align-items:center;
  padding:16px 12px 10px;position:relative;overflow:hidden;flex-shrink:0;
}
#sd-bg-neon{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 1.5s;}
#sd-canvas-wrap{
  position:relative;width:120px;height:140px;
  filter:drop-shadow(0 0 12px rgba(138,82,212,.35));
}
#sd-canvas-wrap.collapse-mode{animation:sd-glitch-wrap 3s linear infinite;}
@keyframes sd-glitch-wrap{
  0%,95%{transform:none;filter:drop-shadow(0 0 12px rgba(138,82,212,.35));}
  96%{transform:translateX(2px) skewX(1deg);filter:hue-rotate(80deg) drop-shadow(0 0 8px rgba(255,0,80,.6));}
  97%{transform:translateX(-2px);filter:none;}
  98%{transform:none;filter:drop-shadow(0 0 12px rgba(138,82,212,.35));}
}
#sd-char{width:120px;height:140px;}
.sd-blink{animation:sd-blink-anim 4s ease-in-out infinite;}
@keyframes sd-blink-anim{0%,45%,55%,100%{transform:scaleY(1);}50%{transform:scaleY(0.08);}}
.sd-breathe{animation:sd-breathe-anim 3.5s ease-in-out infinite;}
@keyframes sd-breathe-anim{0%,100%{transform:translateY(0);}50%{transform:translateY(-2px);}}
.sd-sway{animation:sd-sway-anim 5s ease-in-out infinite;}
@keyframes sd-sway-anim{0%,100%{transform:rotate(0deg);}40%{transform:rotate(.6deg);}70%{transform:rotate(-.4deg);}}
.sd-mouthopen{animation:sd-mouth-anim .45s step-end infinite;}
@keyframes sd-mouth-anim{0%,100%{d:path('M 52 72 Q 60 76 68 72');}50%{d:path('M 52 72 Q 60 80 68 72');}}

/* SDキャラ右側のテキスト */
#sd-info{margin-top:8px;text-align:center;width:100%;}
#sd-type-badge{
  display:inline-block;font-family:var(--dot);font-size:.72rem;
  letter-spacing:.1em;padding:2px 10px;border-radius:2px;
  border:1px solid currentColor;margin-bottom:5px;
}
#sd-thought{
  font-family:var(--serif);font-size:.74rem;color:var(--tx-b);
  line-height:1.7;min-height:22px;
  text-shadow:0 0 8px rgba(138,82,212,.3);
}
#sd-kuma{font-family:var(--mono);font-size:.6rem;color:var(--tx-d);margin-top:2px;}
#sd-comments-fx{
  position:absolute;top:8px;left:0;right:0;
  display:flex;justify-content:center;gap:6px;
  pointer-events:none;overflow:hidden;height:18px;
}
.sd-cmt{
  font-family:var(--mono);font-size:.6rem;color:rgba(0,232,200,.5);
  white-space:nowrap;animation:sd-cmt-float 3s linear infinite;opacity:0;
}
@keyframes sd-cmt-float{
  0%{transform:translateY(18px);opacity:0;}
  20%{opacity:1;}80%{opacity:1;}
  100%{transform:translateY(-8px);opacity:0;}
}
/* ── エンディング ── */
#ending-sc{position:fixed;inset:0;z-index:300;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:10px;opacity:0;pointer-events:none;transition:opacity 2.8s;padding:16px 16px 24px;overflow-y:auto;}
#ending-sc.active{opacity:1;pointer-events:all;}
.end-icon{font-size:2rem;display:none;}
.end-title{font-family:var(--dot);font-size:clamp(1.1rem,5vw,1.6rem);text-align:center;letter-spacing:.15em;margin-top:4px;}
.end-body{font-family:var(--serif);font-size:.78rem;color:var(--tx);text-align:center;line-height:2.3;max-width:310px;white-space:pre-line;}
#end-comments{display:none;font-family:var(--mono);font-size:.6rem;color:var(--pu);text-align:center;}

/* ── SNS共有パネル ── */
#share-panel{
  position:fixed;inset:0;z-index:320;background:rgba(4,2,14,.97);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:20px 16px 32px;overflow-y:auto;
  opacity:0;pointer-events:none;transition:opacity .5s;
}
#share-panel.active{opacity:1;pointer-events:all;}
.share-card{
  width:100%;max-width:340px;
  background:linear-gradient(160deg,rgba(30,10,50,.98) 0%,rgba(8,4,20,.98) 100%);
  border:1px solid rgba(138,82,212,.4);border-radius:12px;
  padding:22px 18px;margin-bottom:14px;
  box-shadow:0 0 32px rgba(138,82,212,.15),0 0 80px rgba(138,82,212,.06);
  position:relative;overflow:hidden;
}
.share-card::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(transparent,transparent 3px,rgba(138,82,212,.02) 3px,rgba(138,82,212,.02) 4px);
  pointer-events:none;
}
.share-game-title{font-family:var(--dot);font-size:.9rem;color:var(--pu);letter-spacing:.18em;margin-bottom:3px;}
.share-day{font-family:var(--mono);font-size:.6rem;color:var(--tx-d);letter-spacing:.12em;margin-bottom:12px;}
.share-end-label{font-family:var(--mono);font-size:.6rem;color:var(--cy);letter-spacing:.15em;margin-bottom:3px;text-transform:uppercase;}
.share-end-name{font-family:var(--dot);font-size:1.05rem;color:var(--tx-b);letter-spacing:.1em;margin-bottom:14px;line-height:1.4;}
.share-diag-label{font-family:var(--mono);font-size:.6rem;color:rgba(138,82,212,.7);letter-spacing:.14em;margin-bottom:3px;}
.share-diag-name{font-family:var(--dot);font-size:.88rem;color:var(--gd);letter-spacing:.1em;margin-bottom:10px;}
.share-diag-poem{font-family:var(--serif);font-size:.72rem;color:var(--tx-d);line-height:2;white-space:pre-line;margin-bottom:14px;padding-left:8px;border-left:2px solid rgba(138,82,212,.3);}
.share-stats{display:grid;grid-template-columns:1fr 1fr;gap:5px 12px;margin-bottom:12px;}
.share-stat{font-family:var(--mono);font-size:.6rem;color:var(--tx-d);}
.share-stat span{color:var(--cy);}
.share-hash{font-family:var(--mono);font-size:.6rem;color:rgba(138,82,212,.6);letter-spacing:.08em;}
.share-div{width:60px;height:1px;background:linear-gradient(to right,transparent,var(--pu-dim),transparent);margin:10px 0;}
.share-btn-row{display:flex;flex-direction:column;gap:9px;width:100%;max-width:340px;}
.share-btn{
  padding:13px;border-radius:6px;font-family:var(--dot);font-size:.78rem;
  letter-spacing:.1em;cursor:pointer;text-align:center;border:none;
  min-height:48px;-webkit-tap-highlight-color:transparent;transition:opacity .2s;
}
.share-btn:active{opacity:.7;}
.share-btn-copy{background:rgba(138,82,212,.15);border:1px solid var(--pu);color:var(--pu);}
.share-btn-x{background:rgba(0,0,0,.8);border:1px solid #666;color:#fff;}
.share-btn-continue{background:rgba(0,232,200,.08);border:1px solid var(--cy);color:var(--cy);}
.share-btn-back{background:transparent;border:1px solid rgba(138,82,212,.2);color:var(--tx-d);font-size:.68rem;}
#share-copy-msg{font-family:var(--mono);font-size:.6rem;color:var(--gn);text-align:center;height:16px;margin-top:-4px;}

/* ══════════════ CUTIN ══════════════ */
#cutin-wrap{position:fixed;inset:0;z-index:210;pointer-events:none;display:flex;align-items:flex-end;padding:0 0 66px 0;}
.cutin-box{padding:9px 13px 9px 10px;max-width:280px;margin-left:6px;transform:translateX(-310px);transition:transform .38s cubic-bezier(.34,1.56,.64,1);}
.cutin-box.show{transform:translateX(0);}
.cutin-inner{display:flex;gap:9px;align-items:flex-start;}
.cutin-face{width:44px;height:44px;border-radius:3px;background:#0a0720;box-shadow:0 0 0 2px #04020c,0 0 0 3px var(--win-mid);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;}
.cutin-name{display:inline-block;font-family:var(--dot);font-size:.62rem;color:var(--cur);letter-spacing:.12em;margin-top:1px;text-shadow:1px 1px 0 #000;}
.cutin-msg{font-family:var(--serif);font-size:.74rem;color:#efe6ff;line-height:1.7;margin-top:2px;text-shadow:1px 1px 0 #000;}

/* ══════════════ STATUS / SKILL（全画面メニュー） ══════════════ */
.ov-screen{position:fixed;inset:0;z-index:55;display:flex;flex-direction:column;overflow-y:auto;
  background:radial-gradient(ellipse at 50% 0%,rgba(80,40,150,.22),transparent 55%),var(--bg);
  opacity:0;pointer-events:none;transform:scale(.97);transition:opacity .22s ease,transform .22s ease;}
.ov-screen.active{opacity:1;pointer-events:all;transform:none;}
.ov-screen > *{width:100%;max-width:480px;margin-left:auto;margin-right:auto;}
.ov-hd{position:sticky;top:0;z-index:3;padding:7px 10px;display:flex;align-items:center;gap:7px;flex-shrink:0;
  background:linear-gradient(180deg,#1b1442,#0a0720);border-bottom:2px solid var(--win-hi);box-shadow:0 2px 0 #04020c,inset 0 -3px 0 var(--win-lo);}
.ov-ttl{font-family:var(--dot);font-size:.8rem;color:var(--cur);letter-spacing:.16em;text-shadow:1px 1px 0 #000;}
.ov-hd > div{font-family:var(--dot) !important;font-size:.72rem !important;color:var(--cur) !important;}
#skill-sp{display:inline-block;font-size:.85rem;}
#status-body,#skill-body{padding:8px 8px 20px !important;display:flex;flex-direction:column;gap:12px;}
#status-body{flex:none !important;overflow:visible !important;}
/* セクション＝ウィンドウ */
.sec{position:relative;padding:16px 12px 10px;margin-top:6px;
  background:var(--win-orn),var(--win-scan),var(--win-bg);border:2px solid var(--win-hi);border-radius:7px;box-shadow:var(--win-shadow);}
.sec-t{font-family:var(--dot);font-size:.66rem;color:var(--cur);letter-spacing:.12em;margin-bottom:8px;text-shadow:1px 1px 0 #000;}
.sec > .sec-t:first-child{position:absolute;top:-12px;left:10px;margin:0;line-height:1.5;
  background:linear-gradient(180deg,#3a2a7a,#1e1548);border:2px solid var(--win-hi);border-radius:4px;padding:1px 9px 2px;box-shadow:0 0 0 2px #04020c;}
.sec [style*="color:var(--tx-d)"],.sec [style*="color: var(--tx-d)"],#skill-body [style*="color: var(--tx-d)"]{color:var(--tx-dim) !important;}
.sec [style*="font-size:.58rem"],.sec [style*="font-size: 0.58rem"],#skill-body [style*="font-size: 0.58rem"]{font-size:.6rem !important;}
.sec [style*="color:var(--pu-dim)"]{color:#b48cff !important;}
#skill-body > div > .sec-t{display:flex;align-items:center;gap:6px;font-size:.7rem;}
#skill-body > div > .sec-t::after{content:'';flex:1;height:2px;background:linear-gradient(90deg,rgba(217,204,255,.35),transparent);box-shadow:0 1px 0 #04020c;}
.sr{display:flex;align-items:center;gap:8px;margin-bottom:7px;}
.srl{font-family:var(--dot);font-size:.64rem;color:var(--tx-b);width:74px;flex-shrink:0;}
.srb{flex:1;height:10px;position:relative;background:#07051a;border-radius:2px;overflow:hidden;box-shadow:0 0 0 1px #04020c,inset 0 0 0 1px rgba(217,204,255,.25);}
.srb::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 calc(5% - 1px),rgba(7,5,26,.85) calc(5% - 1px) 5%),linear-gradient(180deg,rgba(255,255,255,.22) 0 1px,transparent 1px);}
.srf{height:100%;border-radius:1px;transition:width .7s cubic-bezier(.3,.8,.3,1);}
.srv{font-family:var(--dot);font-size:.7rem;color:#fff;width:30px;text-align:right;text-shadow:1px 1px 0 #000;font-variant-numeric:tabular-nums;}
/* SDステージ */
#sd-stage{margin:8px auto 0 !important;width:calc(100% - 16px) !important;max-width:464px;border-radius:7px;border:2px solid var(--win-hi) !important;box-shadow:var(--win-shadow);}
/* スキル */
.sk-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;}
.sk-card{position:relative;overflow:hidden;min-height:64px;padding:7px 8px 7px 20px;cursor:pointer;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015));border:1px solid rgba(217,204,255,.18);border-radius:4px;box-shadow:0 1px 0 #04020c;
  transition:border-color .12s,background .12s,transform .08s;}
.sk-card:hover,.sk-card.ui-cur{border-color:rgba(255,228,138,.8);background:linear-gradient(90deg,rgba(138,82,212,.4),rgba(138,82,212,.1));}
.sk-card:active{transform:translateY(1px) scale(.985);}
.sk-card.maxed{border-color:rgba(232,184,48,.75);background:linear-gradient(180deg,rgba(232,184,48,.16),rgba(232,184,48,.03));cursor:default;}
.sk-card.ui-nosp:not(.maxed){opacity:.6;}
.sk-name{font-family:var(--dot);font-size:.74rem;color:#fff;text-shadow:1px 1px 0 #000;}
.sk-lv{font-family:var(--mono);font-size:.62rem;color:#c9a8ff;margin-top:2px;}
.sk-desc{font-family:var(--serif);font-size:.62rem;color:var(--tx);margin-top:2px;line-height:1.45;}
.sk-mg{margin-top:5px;padding-top:4px;border-top:1px dashed rgba(201,168,255,.3);}
.sk-mg-h{font-family:var(--mono);font-size:.56rem;color:var(--cy);margin-bottom:2px;}
.sk-mg-r{font-family:var(--serif);font-size:.6rem;line-height:1.45;color:#b5a9d4;margin-top:3px;}
.sk-mg-r b{display:block;font-weight:normal;color:#e4d8ff;font-size:.6rem;}
.sk-mg-r.fac b{color:var(--gd);}
.sk-card > div[style*="font-size:.5rem"]{font-size:.6rem !important;color:var(--cur) !important;}
.ui-pips{display:flex;gap:2px;margin-top:4px;}
.ui-pips i{width:8px;height:5px;background:#07051a;box-shadow:0 0 0 1px rgba(217,204,255,.3);}
.ui-pips i.on{background:var(--cur);box-shadow:0 0 0 1px #04020c,0 0 4px rgba(255,228,138,.5);}

/* ══════════════ POPUP（イベント・結果・一覧・設定） ══════════════ */
#ev-popup,#result-sc,#endlist-sc,#mg-picker,#settings-sc,#tutorial-sc{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 45%,rgba(30,18,70,.6),rgba(3,2,8,.9) 70%);
  opacity:0;pointer-events:none;transition:opacity .2s ease;}
#ev-popup{z-index:180;}
#result-sc{z-index:70;}
#endlist-sc{z-index:190;}
#mg-picker{z-index:58;}
#settings-sc,#tutorial-sc{z-index:220;}
#ev-popup.active,#result-sc.active,#endlist-sc.active,#mg-picker.active,#settings-sc.active,#tutorial-sc.active{opacity:1;pointer-events:all;}
/* ウィンドウが縦に開く（SNES風） */
.ev-box,.ui-res-box,.endlist-box,.mg-pick-box{transform:scale(.7,.05);opacity:.4;transition:transform .2s cubic-bezier(.2,.9,.3,1.15),opacity .15s;}
.active > .ev-box,.active > .ui-res-box,.active > .endlist-box,.active > .mg-pick-box{transform:none;opacity:1;}

.ev-box{position:relative;padding:22px 16px 14px;max-width:340px;width:90%;}
.ev-title{position:absolute;top:-13px;left:12px;right:12px;width:max-content;max-width:calc(100% - 24px);
  font-family:var(--dot);font-size:.78rem;color:var(--cur);letter-spacing:.08em;line-height:1.5;
  background:linear-gradient(180deg,#3a2a7a,#1e1548);border:2px solid var(--win-hi);border-radius:4px;padding:1px 10px 2px;box-shadow:0 0 0 2px #04020c;text-shadow:1px 1px 0 #000;}
.ev-desc{font-family:var(--serif);font-size:.8rem;color:#efe6ff;line-height:1.95;margin-bottom:12px;white-space:pre-line;text-shadow:1px 1px 0 #000;}
.ev-fx{display:flex;flex-wrap:wrap;gap:4px;font-family:var(--mono);font-size:.64rem;color:var(--tx);margin-bottom:12px;line-height:1.7;
  padding-top:9px;border-top:2px dotted rgba(217,204,255,.25);}
.ev-fx .chip{font-size:.66rem;padding:1px 6px;animation:chipIn .35s cubic-bezier(.3,1.5,.5,1) both;}
@keyframes chipIn{from{opacity:0;transform:scale(.4);}to{opacity:1;transform:none;}}
.ev-btn{position:relative;width:100%;min-height:44px;padding:9px 12px 9px 24px;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.015));border:1px solid rgba(217,204,255,.3);border-radius:4px;box-shadow:0 1px 0 #04020c;
  color:var(--tx-b);font-family:var(--dot);font-size:.78rem;letter-spacing:.1em;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:all .12s;}
.ev-btn:hover,.ev-btn.ui-cur{border-color:rgba(255,228,138,.8);color:#fff;background:linear-gradient(90deg,rgba(138,82,212,.45),rgba(138,82,212,.12));}
.ev-btn:active{transform:translateY(1px) scale(.985);}

/* リザルト */
#result-sc{flex-direction:column;}
.ui-res-box{position:relative;width:88%;max-width:320px;padding:26px 16px 14px;display:flex;flex-direction:column;align-items:stretch;gap:10px;}
.res-title{position:absolute;top:-15px;left:50%;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--dot);font-size:.95rem;color:var(--cur);letter-spacing:.12em;line-height:1.5;
  background:linear-gradient(180deg,#3a2a7a,#1e1548);border:2px solid var(--win-hi);border-radius:4px;padding:1px 14px 2px;box-shadow:0 0 0 2px #04020c;text-shadow:1px 1px 0 #000;}
.res-body{font-family:var(--dot);font-size:.78rem;color:var(--tx-b);text-align:center;line-height:2.1;}
.res-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:3px 4px;border-bottom:1px dotted rgba(217,204,255,.2);text-align:left;line-height:1.7;
  animation:resRow .35s ease both;}
.res-row:last-child{border-bottom:none;}
@keyframes resRow{from{opacity:0;transform:translateX(-12px);}to{opacity:1;transform:none;}}
.res-body .up,.res-body .down{display:inline-block;font-variant-numeric:tabular-nums;text-shadow:1px 1px 0 #000;}
.res-body .up{color:var(--up);}.res-body .down{color:var(--down);}
.ui-res-box .btn-start{margin-top:4px !important;width:100%;padding:10px 12px 10px 24px;font-size:.84rem;letter-spacing:.14em;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.015));border:1px solid rgba(217,204,255,.3);border-radius:4px;color:var(--tx-b);animation:none;}
.ui-res-box .btn-start::before{display:none;}
.ui-res-box .btn-start:hover,.ui-res-box .btn-start.ui-cur{border-color:rgba(255,228,138,.8);color:#fff;background:linear-gradient(90deg,rgba(138,82,212,.45),rgba(138,82,212,.12));}

/* エンディング一覧・設定・遊び方・ミニゲーム選択 */
.endlist-box{position:relative;padding:22px 14px 14px;width:90%;max-width:360px;max-height:85vh;display:flex;flex-direction:column;gap:10px;}
.endlist-head{flex-shrink:0;position:absolute;top:-13px;left:12px;right:12px;display:flex;justify-content:space-between;align-items:center;gap:8px;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;color:var(--tx-dim);pointer-events:none;}
.endlist-head > span:first-child{font-family:var(--dot);font-size:.74rem;color:var(--cur);line-height:1.5;
  background:linear-gradient(180deg,#3a2a7a,#1e1548);border:2px solid var(--win-hi);border-radius:4px;padding:1px 10px 2px;box-shadow:0 0 0 2px #04020c;text-shadow:1px 1px 0 #000;}
.endlist-head > span:last-child{background:#0a0720;padding:1px 6px;border-radius:3px;box-shadow:0 0 0 1px rgba(217,204,255,.25);color:var(--tx-b);}
#endlist-items{overflow-y:auto;display:flex;flex-direction:column;gap:6px;}
.endlist-item{display:flex;align-items:center;gap:10px;padding:6px;border:1px solid rgba(217,204,255,.14);border-radius:4px;background:rgba(255,255,255,.025);opacity:.7;}
.endlist-item.seen{opacity:1;border-color:rgba(0,232,200,.4);}
.endlist-item.seen.bad{border-color:rgba(232,48,85,.45);}
.endlist-thumb{width:52px;height:52px;flex-shrink:0;border-radius:3px;background:#0a0720 center/cover no-repeat;box-shadow:0 0 0 1px #04020c,0 0 0 2px rgba(217,204,255,.25);display:flex;align-items:center;justify-content:center;font-family:var(--dot);color:var(--tx-dim);}
.endlist-txt{min-width:0;}
.endlist-name{font-family:var(--dot);font-size:.78rem;color:#fff;letter-spacing:.06em;}
.endlist-item.seen.bad .endlist-name{color:var(--down);}
.endlist-hint{font-size:.62rem;color:var(--tx-dim);line-height:1.7;margin-top:2px;}
.set-row{display:grid;grid-template-columns:5.5em 1fr 2.4em;align-items:center;gap:8px;min-height:44px;padding:0 8px 0 20px;border-radius:4px;
  font-family:var(--dot);font-size:.74rem;color:var(--tx-b);border:1px solid transparent;}
.set-row.ui-cur,.set-row:hover{border-color:rgba(255,228,138,.6);background:rgba(138,82,212,.2);}
.set-row input{width:100%;accent-color:var(--cur);height:24px;cursor:pointer;}
.set-val{font-family:var(--mono);font-size:.7rem;color:var(--up);text-align:right;}
.tut-title{font-family:var(--dot);font-size:.95rem;color:var(--cur);letter-spacing:.06em;text-shadow:1px 1px 0 #000;}
.tut-body{font-size:.78rem;line-height:2;color:#efe6ff;white-space:pre-line;min-height:12em;}
.tut-nav{display:flex;gap:8px;}
.tut-nav .ev-btn{flex:1;}
.mg-pick-box{position:relative;padding:24px 12px 12px;width:92%;max-width:380px;max-height:88vh;display:flex;flex-direction:column;gap:9px;}
#mg-pick-items{overflow-y:auto;display:flex;flex-direction:column;gap:7px;padding:2px;}
.mg-pick{flex-shrink:0;position:relative;text-align:left;padding:9px 10px 9px 22px;min-height:48px;cursor:pointer;color:var(--tx);font-family:var(--serif);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.012));border:1px solid rgba(217,204,255,.16);border-radius:4px;box-shadow:0 1px 0 #04020c;
  -webkit-tap-highlight-color:transparent;transition:border-color .12s,background .12s;}
.mg-pick:hover,.mg-pick.ui-cur{border-color:rgba(255,228,138,.8);background:linear-gradient(90deg,rgba(138,82,212,.4),rgba(138,82,212,.1));}
.mg-pick.played{opacity:.45;cursor:default;filter:saturate(.3);}
.mg-pick-top{display:flex;justify-content:space-between;align-items:center;gap:6px;}
.mg-pick-name{font-family:var(--dot);font-size:.84rem;color:#fff;letter-spacing:.05em;text-shadow:1px 1px 0 #000;}
.mg-pick-genre{font-family:var(--mono);font-size:.6rem;color:var(--gd);border:1px solid rgba(232,184,48,.45);padding:1px 6px;border-radius:2px;white-space:nowrap;}
.mg-pick-desc{font-size:.66rem;line-height:1.7;margin-top:4px;color:var(--tx);}
.mg-pick-fx{font-family:var(--mono);font-size:.62rem;color:var(--up);margin-top:4px;}
.mg-tabs{flex-shrink:0;display:flex;gap:5px;overflow-x:auto;padding:2px 2px 4px;scrollbar-width:none;}
.mg-tabs::-webkit-scrollbar{display:none;}
.mg-tab{flex-shrink:0;background:rgba(255,255,255,.03);border:1px solid rgba(217,204,255,.25);color:var(--tx);font-family:var(--dot);font-size:.64rem;padding:6px 11px;border-radius:3px;cursor:pointer;min-height:34px;-webkit-tap-highlight-color:transparent;}
.mg-tab.on{background:linear-gradient(180deg,rgba(255,228,138,.22),rgba(255,228,138,.06));border-color:var(--cur);color:var(--cur);}
.mg-tab.ui-cur{box-shadow:0 0 0 1px var(--cur);}

/* ── 通知（右上に積む小ウィンドウ） ── */
#notif-stack{position:fixed;top:86px;right:8px;z-index:150;display:flex;flex-direction:column;align-items:flex-end;gap:6px;pointer-events:none;}
@media(min-width:520px){#notif-stack{right:calc(50% - 232px);}}
.notif{position:relative;padding:7px 11px 7px 12px;max-width:230px;font-family:var(--dot);font-size:.68rem;line-height:1.55;color:#efe6ff;
  text-shadow:1px 1px 0 #000;animation:ni .32s cubic-bezier(.2,.9,.3,1.2);pointer-events:none;border-radius:5px;}
@keyframes ni{from{opacity:0;transform:translateX(24px) scaleY(.3);}to{opacity:1;transform:none;}}

/* ── BGMインジケーター ── */
#bgm-ind{position:fixed;bottom:58px;left:6px;font-family:var(--mono);font-size:.6rem;color:rgba(180,140,255,.45);z-index:5;letter-spacing:.07em;pointer-events:none;transition:color 2s;}

/* ══ 共通：ボタン類 ══ */
.mini-endbtn{padding:8px 12px 8px 22px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.015));border:1px solid rgba(217,204,255,.35);color:var(--tx-b);
  font-family:var(--dot);font-size:.72rem;cursor:pointer;border-radius:4px;min-height:44px;box-shadow:0 1px 0 #04020c;-webkit-tap-highlight-color:transparent;}
.mini-endbtn:hover,.mini-endbtn.ui-cur{border-color:rgba(255,228,138,.8);color:#fff;}
.btn-start{margin-top:12px;padding:13px 36px;background:transparent;border:1px solid var(--pu);color:var(--pu);font-family:var(--dot);font-size:.95rem;letter-spacing:.2em;cursor:pointer;position:relative;overflow:hidden;transition:color .3s,border-color .3s;min-height:48px;-webkit-tap-highlight-color:transparent;}
.btn-start.ui-cur{color:#fff;border-color:var(--cur);}
.btn-endings{margin-top:4px;background:none;border:1px solid rgba(232,184,48,.3);color:rgba(232,184,48,.85);font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;padding:7px 16px;border-radius:2px;cursor:pointer;min-height:40px;-webkit-tap-highlight-color:transparent;}
.btn-endings:hover,.btn-endings.ui-cur{border-color:var(--gd);color:var(--gd);}

/* ══════════════════════════════════════════
   カーソル（ゆび）とシーン切替
   ══════════════════════════════════════════ */
#ui-hand{position:fixed;left:0;top:0;z-index:400;width:16px;height:11px;pointer-events:none;opacity:0;transition:opacity .12s;
  filter:drop-shadow(1px 1px 0 rgba(0,0,0,.6));will-change:transform;}
#ui-hand.on{opacity:1;}
#ui-hand svg{display:block;width:16px;height:11px;animation:handBob .5s steps(2) infinite;}
@keyframes handBob{0%{transform:translateX(0);}50%{transform:translateX(-2px);}}
#ui-wipe{position:absolute;inset:0;z-index:30;pointer-events:none;opacity:0;}
#ui-wipe.go{opacity:1;animation:dither .34s steps(1,end) forwards;}
@keyframes dither{
  0%  {background:#05040e;}
  20% {background:conic-gradient(#05040e 0 75%,transparent 0) 0 0/4px 4px;}
  40% {background:conic-gradient(#05040e 0 25%,transparent 0 50%,#05040e 0 75%,transparent 0) 0 0/4px 4px;}
  60% {background:conic-gradient(#05040e 0 25%,transparent 0) 0 0/4px 4px;}
  80% {background:conic-gradient(#05040e 0 25%,transparent 0) 0 0/8px 8px;}
  100%{background:transparent;}
}
:focus{outline:none;}
:focus-visible{outline:2px solid var(--cur);outline-offset:2px;}
/* ゆびカーソルで示すボタンは枠線を出さない */
.choice-btn:focus-visible,.sc:focus-visible,.str-type-btn:focus-visible,.ev-btn:focus-visible,.mg-pick:focus-visible,.nav-btn:focus-visible,.mini-endbtn:focus-visible,.btn-start:focus-visible,.sk-card:focus-visible,.mg-tab:focus-visible{outline:none;}

/* ── Phase3崩壊 ── */
body.ph3crit .dlg-text{animation:tcrit .15s linear infinite;}
@keyframes tcrit{0%,100%{transform:none;}30%{transform:translateX(.9px) skewX(.3deg);}70%{transform:translateX(-.9px);}}
body.ph3crit .top-bar{animation:bfl 3s linear infinite;}
@keyframes bfl{0%,100%{opacity:1;}47%,53%{opacity:.72;}50%{opacity:.28;}}

/* ══ 夜のミニゲーム画面（minigames/*.js） ══ */
.mg-help{margin-left:auto;font-family:var(--mono);font-size:.6rem;color:var(--tx-dim);text-align:right;}
.mg-body{flex:1;min-height:0;width:100%;max-width:480px;margin:0 auto;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;}
.mg-canvas{display:block;touch-action:none;}
body.mg-active #cutin-wrap{display:none;}

/* ══ 動きを減らす設定 ══ */
@media (prefers-reduced-motion: reduce){
  #ui-hand svg,.dlg-cursor,.ui-gauge.g-bad > b,.top-val.danger,#daily-guide.danger,.sub-bar b.danger,
  .choice-btn.ui-enter,.res-row,.ev-fx .chip,.notif,.ui-flash-up,.ui-flash-down,.top-day-num.ui-pop,
  #daily-guide.ui-swap #daily-guide-text,body.fatigue-hi .dlg-text,body.ph3crit .dlg-text,body.ph3crit .top-bar,.live-badge,.ci{animation:none !important;}
  #ui-wipe{display:none !important;}
  .ev-box,.ui-res-box,.endlist-box,.mg-pick-box,.ov-screen{transform:none !important;transition:opacity .12s !important;}
  .cutin-box{transition:none;}
  .ui-delta{animation-duration:.01s !important;}
  .ui-gauge > b,.ui-gauge > i,.srf,.day-line-fill{transition:none !important;}
}

/* ── main/ui.js 補助 ── */
.ui-grp.half{grid-column:auto;}
.ui-moonwrap{display:flex;align-items:center;}
.choice-btn[disabled],.sc[disabled],.ev-btn[disabled]{opacity:.4;cursor:not-allowed;filter:saturate(.3);}
.ui-rich{display:flex;align-items:center;gap:7px;}
.notif.ui-danger{border-color:#ff9aac;background:var(--win-orn),var(--win-scan),linear-gradient(180deg,#5a1630,#2a0a1a 70%,#1a0612);}
/* 数え上げ中：本当の値は残したまま、::after に途中の数字を重ねる */
.ui-counting{position:relative;color:transparent !important;text-shadow:none !important;}
.ui-counting::after{content:attr(data-anim);position:absolute;right:0;top:0;white-space:nowrap;color:var(--cnt,#fff);text-shadow:1px 1px 0 #000;}
.res-body .up{--cnt:var(--up);} .res-body .down{--cnt:var(--down);}

/* ミニゲームの難しさ（設定画面・選択画面） */
.mg-diff-row{grid-template-columns:5.5em 1fr;}
.mg-diff{display:flex;gap:4px;}
.mg-diff button{flex:1;min-height:36px;background:transparent;border:1px solid rgba(138,82,212,.4);color:var(--tx);font-family:var(--dot);font-size:.66rem;border-radius:3px;cursor:pointer;}
.mg-diff button.on{background:rgba(0,232,200,.14);border-color:var(--cy);color:var(--cy);}
.mg-pick-diff{align-self:flex-end;background:transparent;border:1px solid rgba(0,232,200,.35);color:var(--cy);font-family:var(--mono);font-size:.62rem;padding:5px 10px;border-radius:12px;cursor:pointer;min-height:30px;}

/* ── 操作アイコン（main/icons.js のドット絵。絵文字の置き換え） ── */
img.ic{display:inline-block;vertical-align:middle;image-rendering:pixelated;flex-shrink:0;pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;}
img.ic.ic-lead{margin-right:.34em;}
.ic-w{display:inline-flex;align-items:center;gap:.34em;vertical-align:middle;min-width:0;}
.cb-ico.cb-ic{width:auto;min-width:26px;font-size:0;line-height:0;filter:none;display:inline-flex;align-items:center;justify-content:center;}
.nav-btn .icon{line-height:0;}
.sub-gear img.ic{display:block;margin:auto;}
.top-lbl img.ic{vertical-align:-1px;margin-right:3px;}
.top-lbl{white-space:nowrap;}
#daily-guide.ic-has > span:first-child{display:none;}
.notif.ic-notif{display:flex;align-items:flex-start;gap:7px;}
.notif.ic-notif img.ic{margin-top:1px;}
.mg-tab{display:inline-flex;align-items:center;gap:5px;}
.mg-pick-name,#mg-title{display:inline-flex;align-items:center;}
#res-title .ic-w{gap:.4em;}

/* ── セーブスロット（タイトルの「つづきから」「はじめから」） ── */
#slot-sc{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:16px;
  background:radial-gradient(ellipse at 50% 45%,rgba(30,18,70,.7),rgba(3,2,8,.92) 70%);opacity:0;pointer-events:none;transition:opacity .2s ease;}
#slot-sc.active{opacity:1;pointer-events:all;}
.slot-box{position:relative;width:100%;max-width:420px;max-height:calc(100dvh - 32px);display:flex;flex-direction:column;gap:9px;padding:22px 12px 12px;
  background:var(--win-orn),var(--win-scan),var(--win-bg);border:2px solid var(--win-hi);border-radius:7px;box-shadow:var(--win-shadow);color:var(--tx-b);
  transform:scale(.7,.05);opacity:.4;transition:transform .2s cubic-bezier(.2,.9,.3,1.15),opacity .15s;}
#slot-sc.active .slot-box{transform:none;opacity:1;}
.slot-head{position:absolute;top:-13px;left:12px;right:12px;display:flex;justify-content:space-between;align-items:center;gap:8px;pointer-events:none;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;color:var(--tx-dim);}
.slot-head > span:first-child{font-family:var(--dot);font-size:.78rem;color:var(--cur);line-height:1.5;letter-spacing:.08em;
  background:linear-gradient(180deg,#3a2a7a,#1e1548);border:2px solid var(--win-hi);border-radius:4px;padding:1px 10px 2px;box-shadow:0 0 0 2px #04020c;text-shadow:1px 1px 0 #000;}
.slot-head > span:last-child{background:#0a0720;padding:1px 6px;border-radius:3px;box-shadow:0 0 0 1px rgba(217,204,255,.25);color:var(--tx-b);}
.slot-lead{font-family:var(--serif);font-size:.74rem;line-height:1.7;color:#efe6ff;}
.slot-list{display:flex;flex-direction:column;gap:7px;overflow-y:auto;min-height:0;padding:2px;}
.slot-card{display:flex;align-items:stretch;gap:6px;}
.slot-main{flex:1;min-width:0;min-height:64px;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"no l1" "no l2" "no l3";column-gap:10px;row-gap:1px;align-items:center;text-align:left;
  padding:7px 10px;border:1px solid rgba(217,204,255,.3);border-radius:5px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.015));box-shadow:0 1px 0 #04020c;
  color:var(--tx-b);font-family:var(--dot);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .12s,background .12s;}
.slot-main:hover,.slot-main:focus-visible{border-color:rgba(255,228,138,.85);background:linear-gradient(90deg,rgba(138,82,212,.45),rgba(138,82,212,.12));outline:none;}
.slot-main:active{transform:translateY(1px);}
.slot-main[disabled]{cursor:default;opacity:.55;}
.slot-main[disabled]:hover{border-color:rgba(217,204,255,.3);background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.015));}
.slot-no{grid-area:no;align-self:stretch;display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;text-orientation:upright;letter-spacing:-.08em;
  font-family:var(--mono);font-size:.58rem;color:var(--cy);padding:0 4px;border-right:1px dotted rgba(217,204,255,.25);}
.slot-card.cur .slot-no{color:var(--cur);}
.slot-l1{grid-area:l1;font-size:.76rem;color:#fff;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums;}
.slot-l2{grid-area:l2;display:flex;align-items:center;gap:5px;font-size:.66rem;color:var(--up);min-width:0;}
.slot-l2 > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.slot-l3{grid-area:l3;font-family:var(--mono);font-size:.6rem;color:var(--tx-dim);}
.slot-card.empty .slot-l1{color:var(--tx-dim);}
.slot-card.empty .slot-l2{color:var(--tx-dim);}
.slot-card.corrupt .slot-l1{color:var(--down);}
.slot-card.corrupt .slot-l2{color:var(--tx-dim);}
.slot-del{flex:0 0 auto;min-width:52px;min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px 6px;
  border:1px solid rgba(232,48,85,.4);border-radius:5px;background:rgba(232,48,85,.08);color:var(--down);font-family:var(--dot);font-size:.58rem;cursor:pointer;}
.slot-del:hover,.slot-del:focus-visible{border-color:var(--down);background:rgba(232,48,85,.22);outline:none;}
.slot-confirm{display:flex;flex-direction:column;gap:9px;padding:10px;border:1px solid rgba(255,211,107,.55);border-radius:5px;background:rgba(10,7,32,.92);}
.slot-confirm[hidden]{display:none;}
.slot-confirm-msg{font-family:var(--serif);font-size:.76rem;line-height:1.8;color:#fff;white-space:pre-line;}
.slot-confirm-btns{display:flex;gap:8px;}
.slot-confirm-btns .ev-btn{flex:1;padding-left:12px;}
.slot-confirm-btns .ev-btn.danger{border-color:rgba(255,125,149,.7);color:var(--down);}
#slot-sc.confirming .slot-list{opacity:.35;pointer-events:none;}
.slot-close{display:flex;align-items:center;justify-content:center;gap:6px;padding-left:12px;}
.slot-close:focus-visible,.slot-confirm-btns .ev-btn:focus-visible{border-color:rgba(255,228,138,.85);outline:none;}
@media (prefers-reduced-motion:reduce){.slot-box{transform:none !important;transition:opacity .12s !important;}}

/* ══════════════════════════════════════════
   仕上げ（main/ui.js 7b）：配信モニター・通知とカットインの位置・SDの舞台
   ══════════════════════════════════════════ */
/* 配信モニター */
.str-visual.ui-mon-on{height:auto;min-height:92px;justify-content:flex-start;padding:10px 12px 8px;font-size:1rem;
  background:radial-gradient(ellipse at 18% 50%,rgba(138,82,212,.22),transparent 60%),linear-gradient(180deg,#120c2c,#0a0720);
  border-bottom:1px solid rgba(217,204,255,.1);}
.ui-mon{display:flex;align-items:center;gap:12px;width:100%;min-width:0;}
.ui-mon-av{position:relative;flex:none;width:68px;height:68px;border-radius:10px;overflow:visible;}
.ui-mon-av img{display:block;width:68px;height:68px;object-fit:cover;border-radius:10px;border:2px solid rgba(217,204,255,.55);box-shadow:0 0 0 2px #04020c,0 4px 14px rgba(0,0,0,.5);background:#1a1430;}
.ui-mon-av img.ui-mon-swap{animation:monSwap .32s ease-out;}
@keyframes monSwap{from{filter:brightness(1.8);transform:scale(.94);}to{filter:none;transform:none;}}
.ui-mon-ring{position:absolute;inset:-5px;border-radius:14px;border:2px solid rgba(0,232,200,.0);pointer-events:none;}
.ui-mon.talk .ui-mon-ring{animation:monTalk .55s ease-out;}
@keyframes monTalk{0%{border-color:rgba(0,232,200,.85);transform:scale(.96);}100%{border-color:rgba(0,232,200,0);transform:scale(1.08);}}
.ui-mon.hot .ui-mon-av img{border-color:var(--gd);box-shadow:0 0 0 2px #04020c,0 0 16px rgba(232,184,48,.55);}
.ui-mon[data-mood="fear"] .ui-mon-av img{border-color:rgba(232,48,85,.7);}
.ui-mon-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;}
.ui-mon-row{display:flex;align-items:center;gap:8px;min-width:0;font-family:var(--mono);font-size:.62rem;color:var(--tx-dim);letter-spacing:.06em;}
.ui-mon-air{color:var(--rd);font-weight:bold;text-shadow:0 0 8px rgba(232,48,85,.6);animation:lp 1.8s ease-in-out infinite;}
.ui-mon-up{color:var(--tx-b);font-variant-numeric:tabular-nums;}
.ui-mon-type{margin-left:auto;display:flex;align-items:center;font-size:1.15rem;line-height:1;}
.ui-mon-type .ic{width:22px;height:22px;}
.ui-mon-lbl{flex:none;}
.ui-mon-hype{position:relative;flex:1;height:8px;border-radius:2px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(217,204,255,.16);overflow:hidden;}
.ui-mon-hype b{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#8a52d4,#ff6aa8 70%,#ffd36b);transition:width .25s linear;}
.ui-mon.hot .ui-mon-hype b{box-shadow:0 0 10px rgba(255,211,107,.7);}
.ui-mon-wave{display:flex;align-items:flex-end;gap:2px;height:18px;}
.ui-mon-wave i{flex:1;max-width:6px;height:100%;background:linear-gradient(0deg,#8a52d4,#00e8c8);border-radius:1px;transform-origin:50% 100%;transform:scaleY(.15);opacity:.8;}
.ui-mon.hot .ui-mon-wave i{background:linear-gradient(0deg,#ff6aa8,#ffd36b);}
.viewer-cnt{position:relative;}
.ui-vc-pop{position:absolute;right:0;top:-2px;font-family:var(--mono);font-size:.62rem;color:var(--up);pointer-events:none;animation:vcPop 1s ease-out forwards;}
@keyframes vcPop{from{opacity:1;transform:translateY(0);}to{opacity:0;transform:translateY(-14px);}}
.comment-feed:empty::before{content:'コメント待機中…　最初の一言を待っている';margin:auto;font-family:var(--mono);font-size:.62rem;color:var(--tx-dim);letter-spacing:.08em;animation:lp 2.4s ease-in-out infinite;}
/* 配信中のカットイン：選択肢の上に重ねず、モニターの下（コメント欄の上端）に出す */
body.ui-streaming #cutin-wrap{align-items:flex-start;padding-top:146px;padding-bottom:0;}
/* 広い画面：カットインと通知を、ゲーム画面（幅480px）の内側にそろえる */
@media (min-width:520px){
  #cutin-wrap{padding-left:calc(50% - 240px);}
}
/* 通知：今日の目標の帯に重ならないよう、その下に出す */
#notif-stack{top:124px;}
body.ui-streaming #notif-stack{top:150px;}
/* 状態画面のSD：白背景を抜いた絵を、床の光の上に立たせる */
#sd-canvas-wrap::after{content:'';position:absolute;left:50%;bottom:2px;width:96px;height:14px;margin-left:-48px;border-radius:50%;background:radial-gradient(ellipse,rgba(138,82,212,.55),transparent 70%);z-index:-1;}
#sd-char{position:relative;}
/* 文字の大きさ（設定） */
.fs-row .mg-diff button{font-size:.66rem;}
.fs-row .mg-diff button[data-fs="l"]{font-size:.74rem;}
.fs-row .mg-diff button[data-fs="xl"]{font-size:.82rem;}
@media (prefers-reduced-motion: reduce){
  .ui-mon-air,.ui-mon.talk .ui-mon-ring,.ui-mon-av img.ui-mon-swap,.ui-vc-pop,.comment-feed:empty::before{animation:none !important;}
}
/* コメント欄の奥に、うっすら自分の部屋（真っ黒な空白に見えないように） */
#streaming-ol .comment-feed{background:linear-gradient(180deg,rgba(4,3,10,.78),rgba(4,3,10,.92) 70%),url(assets/img/bg_main.webp) center 30%/cover no-repeat;}
.mg-diff button{white-space:nowrap;padding:0 2px;letter-spacing:-.02em;}
/* 設定の行が増えたので、背の低い画面では行の高さと間隔を詰める（見出しが枠の上にはみ出す作りなので、スクロールにはしない） */
@media (max-height:720px){
  #settings-sc .endlist-box{gap:6px;padding-top:20px;}
  #settings-sc .set-row{min-height:36px;}
  #settings-sc .ev-btn{min-height:38px;padding-top:6px;padding-bottom:6px;}
  #settings-sc .mg-diff button{min-height:30px;}
}
/* 横向きの背の低い画面：設定は2列に並べて、窓に収める */
@media (max-height:480px) and (min-width:560px){
  #settings-sc .endlist-box{display:grid;grid-template-columns:1fr 1fr;max-width:680px;width:94%;column-gap:10px;row-gap:5px;max-height:none;}
  #settings-sc .set-row{min-height:34px;}
  #settings-sc .ev-btn{min-height:34px;}
}
@media (max-height:480px){
  .str-visual.ui-mon-on{min-height:0;padding:5px 12px;}
  .ui-mon-av,.ui-mon-av img{width:44px;height:44px;}
  .ui-mon-wave{height:12px;}
  body.ui-streaming #cutin-wrap{padding-top:96px;}
}
/* ══════════════════════════════════════════
   main/ui.js 7c：配信モニターのドット絵の顔・はじめての案内
   ══════════════════════════════════════════ */
.ui-mon-av img.ui-mon-px{image-rendering:pixelated;image-rendering:crisp-edges;object-fit:contain;}
/* はじめての 1〜2 日目：おすすめの行動をそっと光らせる（設定の「案内」で消せる） */
.choice-btn.ui-hint{border-color:rgba(255,211,107,.5);}
.choice-btn.ui-hint::before{content:'';position:absolute;inset:0;border-radius:3px;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,211,107,.35),inset 0 0 14px rgba(255,211,107,.12);animation:uiHint 2.8s ease-in-out infinite;}
.choice-btn.ui-hint::after{content:attr(data-hint);position:absolute;top:0;right:0;padding:0 5px 1px 6px;border-bottom-left-radius:4px;
  font-family:var(--mono);font-size:.54rem;letter-spacing:.06em;line-height:1.5;color:#2a1c06;background:rgba(255,211,107,.78);pointer-events:none;}
@keyframes uiHint{0%,100%{opacity:.35;}50%{opacity:1;}}
@media (prefers-reduced-motion: reduce){
  .choice-btn.ui-hint::before{animation:none;opacity:.8;}
}