:root{--ink:#2b2433;--card:rgba(255,250,240,.88);--accent:#e8873a;--line:rgba(60,45,30,.18)}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#1c1a22;color:var(--ink);font-family:"Yu Gothic UI","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;overflow:hidden}
#view{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
#loading{position:fixed;inset:0;display:grid;place-items:center;background:#1c1a22;z-index:20;transition:opacity .5s}
#loading.done{opacity:0;pointer-events:none}
.card{background:var(--card);padding:22px 30px;border-radius:16px;text-align:center}
.card h1{margin:0 0 6px;font-size:20px}
#top{position:fixed;top:12px;left:14px;right:14px;pointer-events:none;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.55)}
#top h1{margin:0;font-size:17px;letter-spacing:.04em}
#top .sub{margin:2px 0 0;font-size:12px;opacity:.9}
#legend{position:fixed;top:64px;left:14px;display:flex;flex-direction:column;gap:5px;z-index:5}
#legend button{all:unset;cursor:pointer;display:flex;align-items:center;gap:7px;padding:4px 10px 4px 7px;border-radius:999px;background:var(--card);font-size:12px;border:1px solid var(--line)}
#legend button i{width:10px;height:10px;border-radius:50%;display:inline-block;background:var(--c)}
#legend button[aria-pressed=false]{opacity:.45;text-decoration:line-through}
#legend button small{opacity:.6}
#hint{position:fixed;right:14px;top:14px;max-width:34ch;font-size:12px;color:#fff;text-shadow:0 1px 5px rgba(0,0,0,.6);text-align:right;pointer-events:none}
#bar{position:fixed;left:50%;transform:translateX(-50%);bottom:12px;width:min(980px,calc(100% - 24px));background:var(--card);backdrop-filter:blur(6px);border-radius:16px;padding:9px 14px;display:flex;flex-direction:column;gap:7px;box-shadow:0 6px 24px rgba(0,0,0,.35);z-index:6}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:13px}
.row .lbl{font-weight:700;font-size:12px;opacity:.7}
#timeSel{flex:1;min-width:140px;accent-color:var(--accent)}
#timeTxt{font-variant-numeric:tabular-nums;min-width:11ch;text-align:right;font-size:12px}
.tg,.seg button{all:unset;cursor:pointer;padding:5px 12px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:12.5px}
.tg[aria-pressed=true],.seg button[aria-pressed=true]{background:var(--accent);color:#fff;border-color:var(--accent)}
.seg{display:flex;gap:4px}
label{display:flex;align-items:center;gap:6px;font-size:12.5px}
label input{width:110px;accent-color:var(--accent)}
label b{min-width:4ch;font-variant-numeric:tabular-nums}
@media (max-width:640px){#legend{top:56px}#hint{display:none}.row{font-size:12px}}

.clean #top,.clean #legend,.clean #bar,.clean #hint{display:none}
#scenes{position:fixed;top:12px;right:14px;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;z-index:5;margin-top:34px;max-width:70vw}#scenes a{padding:4px 11px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-size:12px;color:var(--ink);text-decoration:none}#scenes a.on{background:var(--accent);color:#fff;border-color:var(--accent)}.clean #scenes{display:none}

/* ---------- play invitation, touch controls, mobile layout ---------- */
:root{--barh:120px}
#toast{position:fixed;left:50%;top:84px;transform:translate(-50%,-8px);background:rgba(30,24,40,.86);color:#fff;padding:9px 16px;border-radius:999px;font-size:13px;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;z-index:12;text-align:center;max-width:92vw}
#toast.on{opacity:1;transform:translate(-50%,0)}
#playCta{all:unset;box-sizing:border-box;cursor:pointer;position:fixed;left:50%;bottom:calc(var(--barh) + 22px + env(safe-area-inset-bottom));display:none;align-items:center;gap:10px;padding:12px 22px 12px 16px;border-radius:999px;background:linear-gradient(135deg,#ff9a3c,#ff5d73);color:#fff;font-weight:800;font-size:16px;box-shadow:0 8px 26px rgba(255,93,115,.55),0 0 0 3px rgba(255,255,255,.75);z-index:9;animation:ctaPulse 1.5s ease-in-out infinite;transform:translateX(-50%);-webkit-tap-highlight-color:transparent}
#playCta .ico{font-size:26px}
#playCta .t{white-space:nowrap;display:flex;flex-direction:column;line-height:1.15;text-align:left;text-shadow:0 1px 3px rgba(0,0,0,.25)}
#playCta small{font-weight:600;font-size:11px;opacity:.92}
body:not(.mode-play):not(.mode-rig) #playCta{display:flex}
@keyframes ctaPulse{0%,100%{transform:translateX(-50%) scale(1);box-shadow:0 8px 26px rgba(255,93,115,.5),0 0 0 3px rgba(255,255,255,.75)}50%{transform:translateX(-50%) scale(1.09);box-shadow:0 12px 34px rgba(255,93,115,.75),0 0 0 9px rgba(255,255,255,.28)}}
@media (prefers-reduced-motion:reduce){#playCta{animation:none}}
.chip{all:unset;cursor:pointer;padding:6px 14px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-size:13px;font-weight:700;color:var(--ink);box-shadow:0 2px 10px rgba(0,0,0,.25)}
#backAuto{position:fixed;right:14px;top:calc(46px + env(safe-area-inset-top));display:none;z-index:9}
body.mode-play #backAuto{display:block}
#legendBtn{position:fixed;left:14px;top:64px;display:none;z-index:6}
#joy{position:fixed;left:calc(16px + env(safe-area-inset-left));bottom:calc(var(--barh) + 20px + env(safe-area-inset-bottom));width:132px;height:132px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.28),rgba(255,255,255,.12));border:2px solid rgba(255,255,255,.6);display:none;touch-action:none;z-index:8;backdrop-filter:blur(3px)}
#joy #knob{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 3px 10px rgba(0,0,0,.35);pointer-events:none}
#joy .lab{position:absolute;left:0;right:0;bottom:-20px;text-align:center;font-size:11px;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.7);pointer-events:none}
#touchBtns{position:fixed;right:calc(16px + env(safe-area-inset-right));bottom:calc(var(--barh) + 28px + env(safe-area-inset-bottom));display:none;flex-direction:column;align-items:center;gap:8px;z-index:8}
#touchBtns button{all:unset;cursor:pointer;width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.85);display:grid;place-items:center;font-size:30px;box-shadow:0 4px 14px rgba(0,0,0,.35);-webkit-tap-highlight-color:transparent}
#touchBtns button:active{transform:scale(.92)}
#touchBtns .lab2{font-size:11px;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.7);text-align:center;line-height:1.2}
body.touch.mode-play #joy{display:block}
body.touch.mode-play #touchBtns{display:flex}
body.mode-play #playBtn,body.mode-play #timeSel{opacity:.4}
.seg .short{display:none}
#sheetBtn{display:none}
@media (max-width:760px),(pointer:coarse){
  html,body{overscroll-behavior:none}
  #top{top:calc(8px + env(safe-area-inset-top))}
  #top h1{font-size:14px}
  #top .sub{display:none}
  #scenes{top:calc(34px + env(safe-area-inset-top));bottom:auto;height:auto;left:10px;right:10px;margin:0;max-width:none;align-items:flex-start;flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scrollbar-width:none;padding:2px 0}
  #scenes::-webkit-scrollbar{display:none}
  #scenes a{white-space:nowrap;padding:6px 12px;font-size:12.5px}
  #legend{display:none}
  body.legend-open #legend{display:flex;top:104px}
  #legendBtn{display:block;top:96px}
  body.legend-open #legendBtn{top:96px}
  #hint{display:none}
  #bar{width:calc(100% - 16px);bottom:calc(8px + env(safe-area-inset-bottom));padding:8px 10px;gap:6px}
  #bar .more{display:none}
  #bar.open .more{display:flex}
  #sheetBtn{display:inline-block;padding:5px 11px}
  .row .lbl{display:none}
  .seg{width:100%}
  .seg button{flex:1;text-align:center;padding:8px 4px;font-size:13px}
  .seg .long{display:none}
  .seg .short{display:inline}
  #timeTxt{min-width:0;font-size:11px}
  #backAuto{top:calc(34px + env(safe-area-inset-top) + 40px)}
  #toast{top:calc(110px + env(safe-area-inset-top))}
  label input{width:90px}
}
@media (max-width:760px) and (orientation:portrait){#playCta{padding:10px 18px 10px 12px;font-size:15px}#playCta .ico{font-size:22px}}
@media (max-height:480px) and (orientation:landscape){
  #bar .r1 #timeTxt{display:none}
  #joy{width:112px;height:112px}
  #playCta{bottom:calc(var(--barh) + 10px)}
  #top{display:none}
}
.clean #playCta,.clean #joy,.clean #touchBtns,.clean #toast,.clean #backAuto,.clean #legendBtn{display:none!important}