:root{
  --paper:#F4F0E8; --paper-dim:#ECE7DC; --ink:#1B1916; --ember:#A23E28; --dark:#13110C;
  --serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --sans:"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
html,body{height:100%;overflow:hidden;touch-action:none;overscroll-behavior:none}
body{background:var(--dark);font-family:var(--serif);color:var(--paper);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
#stage{position:relative;width:100%;max-width:calc(100vh * 240 / 320);margin:0 auto;}
#g{display:block;width:100%;image-rendering:pixelated;image-rendering:crisp-edges;background:#000}
#vig{position:absolute;inset:0;pointer-events:none;transition:box-shadow .9s ease}
/* ---- ダイアログ ---- */
#dlg{position:absolute;left:4%;right:4%;bottom:4%;z-index:22;background:var(--paper);color:var(--ink);
  border-radius:10px;padding:13px 17px 15px;font-size:clamp(13px,3.6vmin,17px);line-height:1.95;letter-spacing:.1em;
  box-shadow:0 8px 30px rgba(0,0,0,.45);opacity:0;transform:translateY(8px);transition:opacity .22s,transform .22s;
  pointer-events:none;min-height:3.4em}
#dlg.on{opacity:1;transform:none;pointer-events:auto;cursor:pointer}
#who{position:absolute;top:-0.95em;left:14px;background:var(--ember);color:var(--paper);
  font-size:.72em;letter-spacing:.3em;padding:.18em .9em .18em 1.1em;border-radius:4px;display:none}
#who.on{display:block}
#cur{position:absolute;right:13px;bottom:9px;color:var(--ember);font-size:.8em;opacity:0;animation:bb 1s infinite}
#dlg.wait #cur{opacity:1}
@keyframes bb{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
/* ---- ヒント ---- */
#hint{position:absolute;left:50%;bottom:13%;transform:translateX(-50%) translateY(6px);
  background:var(--paper);color:var(--ink);border-radius:999px;padding:.42em 1.15em .42em .55em;
  font-family:var(--sans);font-size:clamp(11px,3vmin,14px);letter-spacing:.14em;opacity:0;transition:.25s;
  box-shadow:0 4px 14px rgba(0,0,0,.35);display:flex;align-items:center;gap:.55em;pointer-events:none;white-space:nowrap}
#hint.on{opacity:1;transform:translateX(-50%);pointer-events:auto;cursor:pointer}
#hint b{background:var(--ember);color:var(--paper);border-radius:999px;font-size:.82em;
  width:1.7em;height:1.7em;display:flex;align-items:center;justify-content:center;font-family:var(--sans)}
/* ---- チップ ---- */
#chips{position:absolute;left:2.5%;bottom:3.5%;display:flex;gap:7px;pointer-events:none}
.chip{background:rgba(19,17,12,.78);border:1px solid rgba(244,240,232,.18);color:var(--paper);
  font-family:var(--sans);font-size:clamp(10px,2.6vmin,12px);letter-spacing:.12em;border-radius:6px;padding:.3em .8em;display:none}
.chip i{color:#E2A05A;font-style:normal}
.chip.on{display:block}
/* ---- 右上ボタン ---- */
#brand{visibility:hidden;position:absolute;top:2%;right:2.5%;z-index:23;text-decoration:none;color:var(--paper);
  font-size:clamp(15px,4.4vmin,19px);letter-spacing:.14em;display:flex;align-items:baseline;gap:.3em;
  background:rgba(19,17,12,.55);border:1px solid rgba(244,240,232,.18);border-radius:8px;padding:.22em .6em .26em .7em}
#brand span{font-family:var(--sans);font-size:.62em;letter-spacing:.3em;color:#C2502F;font-weight:700}
#sysbtn{visibility:hidden;position:absolute;top:calc(2% + clamp(34px,9.6vmin,42px));right:2.5%;display:flex;flex-direction:column;gap:7px}
.sbtn{width:clamp(34px,9vmin,42px);height:clamp(34px,9vmin,42px);border-radius:50%;
  background:rgba(19,17,12,.72);border:1px solid rgba(244,240,232,.25);color:var(--paper);
  font-family:var(--sans);font-size:clamp(11px,3vmin,14px);display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none}
.sbtn.off{opacity:.45}
/* ---- 携帯 ---- */
#phone{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(10,9,7,.55);z-index:30}
#phone.on{display:flex}
#pbody{width:min(60vmin,225px);background:#23211D;border-radius:24px;padding:8% 5% 6%;box-shadow:0 18px 60px rgba(0,0,0,.6)}
#pscr{background:var(--paper);border-radius:8px;padding:13% 8%;text-align:center;color:var(--ink)}
#psig{color:var(--ember);font-family:var(--sans);font-size:11px;letter-spacing:.34em;margin-bottom:.9em}
#ptime{font-size:clamp(22px,7vmin,30px);letter-spacing:.1em}
#pnote{font-family:var(--sans);font-size:11px;color:#6d675c;margin-top:1.1em;line-height:2}
#pword{margin-top:1.6em;font-size:clamp(12px,3.4vmin,15px);letter-spacing:.22em;line-height:2.1;color:#3c382f}
#pclose{margin:6% auto 0;display:block;background:none;border:1px solid rgba(244,240,232,.4);color:var(--paper);
  font-family:var(--serif);letter-spacing:.4em;padding:.5em 1.7em .5em 2.1em;border-radius:999px;font-size:12px;cursor:pointer}
/* ---- タッチ操作 ---- */
#pad{position:absolute;left:3%;bottom:4%;width:clamp(110px,30vmin,150px);height:clamp(110px,30vmin,150px);display:none;z-index:20;border-radius:50%;background:rgba(19,17,12,.42);border:1px solid rgba(244,240,232,.16);touch-action:none}
#stick{position:absolute;left:50%;top:50%;width:46%;height:46%;border-radius:50%;background:rgba(244,240,232,.20);border:1px solid rgba(244,240,232,.32);transform:translate(-50%,-50%);pointer-events:none}
#bbtn{position:absolute;right:5%;bottom:calc(6% + clamp(70px,20vmin,96px));width:clamp(44px,12vmin,58px);height:clamp(44px,12vmin,58px);display:none;z-index:20;border-radius:50%;background:rgba(19,17,12,.72);color:var(--paper);font-family:var(--serif);font-size:clamp(13px,3.6vmin,17px);align-items:center;justify-content:center;user-select:none;border:1px solid rgba(244,240,232,.3)}
#abtn{position:absolute;right:4%;bottom:6%;width:clamp(62px,18vmin,86px);height:clamp(62px,18vmin,86px);display:none;z-index:20;
  border-radius:50%;background:rgba(162,62,40,.88);color:var(--paper);font-family:var(--sans);
  font-size:clamp(18px,5vmin,24px);align-items:center;justify-content:center;user-select:none;
  box-shadow:0 6px 18px rgba(0,0,0,.4);border:2px solid rgba(244,240,232,.25)}
.touch #pad,.touch #abtn,.touch #bbtn{display:block}
.touch #abtn{display:flex}
.touch #bbtn{display:flex}
.pk:active{background:rgba(162,62,40,.7)}
/* ---- ドライブUI ---- */
#skip{position:absolute;left:50%;transform:translateX(-50%);top:3%;background:rgba(19,17,12,.6);border:1px solid rgba(244,240,232,.3);
  color:var(--paper-dim);font-family:var(--sans);font-size:clamp(10px,2.8vmin,12px);letter-spacing:.3em;
  padding:.5em 1.2em .5em 1.5em;border-radius:999px;display:none;z-index:21;cursor:pointer}
#skip.on{display:block}
/* ---- タイトル ---- */
#title{position:absolute;inset:0;background:var(--dark);z-index:40;display:flex;align-items:center;justify-content:center;transition:opacity 1.1s ease}
#title.fade{opacity:0;pointer-events:none}
#tin{display:flex;flex-direction:column;align-items:center;gap:clamp(14px,3.5vmin,26px);padding:0 7%;text-align:center}
#tlogo{display:flex;flex-direction:row;align-items:center;font-size:clamp(44px,16vmin,84px);gap:.16em;color:var(--paper);line-height:1;text-shadow:0 0 50px rgba(162,62,40,.25)}
#tlogo span{color:#C2502F}
#tright{display:flex;flex-direction:column;align-items:center;gap:clamp(9px,2.2vmin,16px)}
#tsub{font-size:clamp(11px,2.6vmin,17px);letter-spacing:.5em;color:var(--paper-dim);opacity:.85}
.tnote{font-family:var(--sans);font-size:clamp(9px,2vmin,12px);letter-spacing:.16em;color:#8d867a;line-height:2.05}
#tstart{background:var(--ember);color:var(--paper);border:none;cursor:pointer;font-family:var(--serif);
  font-size:clamp(13px,3.4vmin,18px);letter-spacing:.34em;padding:.8em 2em .8em 2.35em;border-radius:4px;box-shadow:0 6px 22px rgba(162,62,40,.35)}
#tstart:active{transform:translateY(1px)}
#tsnd{background:none;border:none;color:#8d867a;font-family:var(--sans);font-size:clamp(10px,2.4vmin,12px);letter-spacing:.3em;cursor:pointer}
#tsnd b{color:var(--paper-dim)}
#tfoot{position:absolute;bottom:max(3.5%,env(safe-area-inset-bottom));left:0;right:0;text-align:center;
  font-family:var(--sans);font-size:9px;letter-spacing:.4em;color:#5d574c}
@media (orientation:portrait){
  #stage{max-width:100%}
  body{justify-content:flex-start;padding-top:max(10px,env(safe-area-inset-top))}
  #pad{position:fixed;left:4vw;bottom:max(2.5vh,env(safe-area-inset-bottom));width:clamp(120px,36vmin,160px);height:clamp(120px,36vmin,160px);z-index:24}
  #abtn{position:fixed;right:6vw;bottom:calc(max(2.5vh,env(safe-area-inset-bottom)) + 4vh);width:clamp(66px,19vmin,88px);height:clamp(66px,19vmin,88px);z-index:24}
  #bbtn{position:fixed;right:calc(6vw + clamp(66px,19vmin,88px) + 10px);bottom:max(2.5vh,env(safe-area-inset-bottom));width:clamp(46px,13vmin,60px);height:clamp(46px,13vmin,60px);z-index:24}
}