:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}
:root{
  --ink:#efe8d8; --ink2:rgba(239,232,216,.66); --ink3:rgba(239,232,216,.4);
  --brass:#d6b072; --brass2:rgba(214,176,114,.5);
  --warn:#ff8a52;
  --mincho:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho','Noto Serif CJK JP',serif;
  --goth:'Zen Kaku Gothic New','Hiragino Sans','Hiragino Kaku Gothic ProN','Noto Sans CJK JP',system-ui,sans-serif;
  --latin:'Cormorant Garamond','Times New Roman',serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#060816;overflow:hidden;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
body{color:var(--ink);font-family:var(--goth);font-weight:500;position:fixed;inset:0}
#c{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-appearance:none;appearance:none;touch-action:manipulation}
.scr{position:fixed;inset:0;pointer-events:none;display:none}
.scr.on{display:block}
.hit{pointer-events:auto}
#probe{position:fixed;left:0;top:0;width:0;height:0;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);visibility:hidden;pointer-events:none}
svg{display:block}
kbd{font-family:var(--goth);font-size:10px;color:var(--ink3);border:1px solid rgba(239,232,216,.22);padding:0 4px;margin-left:6px;line-height:15px;display:none}
@media (hover:hover) and (pointer:fine){kbd{display:inline-block}}

/* ブラケットのボタン ( 光学機器の目盛りのような角だけの線 ) */
.bk{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 14px;font-size:14px;letter-spacing:.05em;color:var(--ink);background:rgba(7,12,17,.5);pointer-events:auto;white-space:nowrap}
.bk::before,.bk::after{content:"";position:absolute;width:9px;height:9px;border:1px solid var(--brass);pointer-events:none}
.bk::before{left:0;top:0;border-right:0;border-bottom:0}
.bk::after{right:0;bottom:0;border-left:0;border-top:0}
.bk:active{background:rgba(214,176,114,.18)}
.bk small{font-size:11px;color:var(--ink2);letter-spacing:0}
.bk[disabled]{opacity:.35}
.ib{width:44px;height:44px;display:flex;align-items:center;justify-content:center;pointer-events:auto;color:var(--ink2)}
.ib:active{color:var(--brass)}
.ib svg{width:22px;height:22px}

/* ---------- 入口 ( 読み込みの間 ＋ 音を鳴らすための最初の操作 ) ---------- */
#gate{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:24px;background:radial-gradient(ellipse at 50% 42%,#171d48 0%,#0b0e26 46%,#050612 100%);transition:opacity .85s ease .12s,visibility 0s linear 1s}
html.nogate #gate{display:none}
#gate.go{opacity:0;visibility:hidden;pointer-events:none}
#gate.go .gin{transform:scale(1.05);opacity:0;transition:transform 1s cubic-bezier(.2,.7,.2,1),opacity .55s ease}
#gate::after{content:"";position:absolute;left:50%;top:44%;width:60vmax;height:60vmax;margin:-30vmax 0 0 -30vmax;border-radius:50%;background:radial-gradient(closest-side,rgba(255,250,235,.95),rgba(190,205,255,.34) 42%,rgba(150,170,255,0));opacity:0;transform:scale(.05);pointer-events:none}
#gate.go::after{animation:gFlash .95s cubic-bezier(.16,.8,.3,1) both}
@keyframes gFlash{0%{opacity:0;transform:scale(.05)}22%{opacity:1}100%{opacity:0;transform:scale(2.2)}}
.gbeams{position:absolute;left:50%;top:44%;width:0;height:0;pointer-events:none}
.gbeams i{position:absolute;left:0;top:-1px;width:130vmax;height:2px;transform-origin:0 50%;opacity:.26;mix-blend-mode:screen;animation:gBeam 2.2s cubic-bezier(.16,.84,.24,1) both;transition:opacity 1s ease}
.gbeams .r{background:linear-gradient(90deg,#ff4b5c,rgba(255,75,92,0) 62%);--a:152deg}
.gbeams .g{background:linear-gradient(90deg,#3fe388,rgba(63,227,136,0) 62%);--a:272deg;animation-delay:.14s}
.gbeams .b{background:linear-gradient(90deg,#4a8cff,rgba(74,140,255,0) 62%);--a:28deg;animation-delay:.28s}
@keyframes gBeam{from{transform:rotate(var(--a)) scaleX(0)}to{transform:rotate(var(--a)) scaleX(1)}}
html.ready .gbeams i{opacity:.62}
.gin{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;width:100%;max-width:520px}
.glogo{width:min(70vw,400px)}
.gsub{margin-top:24px;font-family:var(--latin);font-weight:600;font-size:clamp(12px,1.9vw,14px);letter-spacing:.34em;text-indent:.34em;text-transform:uppercase;color:var(--brass);animation:lgW 1s ease 1.3s both}
.gload{position:relative;width:min(56vw,240px);height:1px;margin-top:26px;background:rgba(214,176,114,.28);overflow:hidden;transition:opacity .5s ease}
.gload i{position:absolute;top:0;left:-30%;width:30%;height:100%;background:linear-gradient(90deg,rgba(255,240,200,0),#fff6e2,rgba(255,240,200,0));animation:gRun 1.25s linear infinite}
@keyframes gRun{to{left:100%}}
.gmsg{margin-top:12px;min-height:18px;font-size:12px;letter-spacing:.14em;color:var(--ink2);text-align:center;line-height:1.7;transition:opacity .4s ease}
.gctl{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:-34px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .7s ease .1s,transform .7s cubic-bezier(.2,.7,.2,1) .1s}
html.ready .gload,html.ready .gmsg{opacity:0}
html.ready .gctl{opacity:1;visibility:visible;transform:none}
.gbtn{position:relative;min-height:56px;padding:0 44px;font-family:var(--mincho);font-weight:800;font-size:22px;letter-spacing:.16em;color:#fff6e2;background:rgba(10,14,36,.6);pointer-events:auto;touch-action:manipulation;box-shadow:0 0 0 1px rgba(214,176,114,.45),0 0 34px rgba(120,140,255,.28)}
.gbtn::before,.gbtn::after{content:"";position:absolute;width:12px;height:12px;border:1px solid var(--brass)}
.gbtn::before{left:-1px;top:-1px;border-right:0;border-bottom:0}
.gbtn::after{right:-1px;bottom:-1px;border-left:0;border-top:0}
.gbtn:hover,.gbtn:focus-visible{background:rgba(214,176,114,.16);outline:none;box-shadow:0 0 0 1px var(--brass),0 0 44px rgba(150,170,255,.5)}
.gbtn:active{background:rgba(214,176,114,.28)}
.gsnd{display:flex;align-items:center;gap:4px;font-size:11px;letter-spacing:.18em;color:var(--ink2)}
.gsnd span{margin-right:8px}
.gsnd button{min-width:44px;min-height:36px;padding:0 8px;font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--ink3);touch-action:manipulation;border-bottom:1px solid transparent}
.gsnd button[aria-pressed="true"]{color:#fff6e2;border-bottom-color:var(--brass)}
.gsnd button:focus-visible{outline:2px solid var(--brass);outline-offset:1px}
@media (max-width:430px){#title .t-foot>.sep{display:none}#title .t-foot .cr,#title .t-foot nav{flex:0 0 auto}#title .t-foot{flex-direction:column}#title .tb{bottom:calc(50px + env(safe-area-inset-bottom,0px))}}
html.gate #title .tb,html.gate #title .t-foot,html.gate #title .tmute{opacity:0}
#title .tb,#title .t-foot,#title .tmute{transition:opacity .9s ease .35s}
html.gate #title .lgo use,html.gate #title .lgo .lsn{animation:none}
@media (prefers-reduced-motion:reduce){.gbeams i,.gsub{animation:none}.gload i{animation-duration:3s}#gate.go::after{animation:none}.gbeams i{transform:rotate(var(--a))}}

/* ---------- 部屋の名札 ( 部屋に入ったとき ) ---------- */
#roomCard{position:absolute;left:0;right:0;top:calc(19% + env(safe-area-inset-top,0px));display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 20px;pointer-events:none;opacity:0;text-shadow:0 2px 18px rgba(0,0,0,.85),0 0 30px rgba(0,0,0,.6)}
#roomCard.on{animation:rcIn 3.4s ease both}
#roomCard small{font-size:11px;letter-spacing:.3em;color:var(--ink2)}
#roomCard b{margin-top:8px;font-family:var(--mincho);font-weight:700;font-size:clamp(30px,6vw,46px);letter-spacing:.14em;text-indent:.14em;color:#fff6e2}
#roomCard span{margin-top:8px;font-family:var(--latin);font-weight:600;font-size:12px;letter-spacing:.34em;text-indent:.34em;text-transform:uppercase;color:var(--rc,var(--brass))}
#roomCard i{display:block;width:0;height:1px;margin-top:14px;background:var(--rc,var(--brass));box-shadow:0 0 12px var(--rc,var(--brass));animation:rcLine 3.4s cubic-bezier(.2,.7,.2,1) both}
#roomCard em{margin-top:12px;font-style:normal;font-size:13px;letter-spacing:.06em;color:var(--ink)}
@keyframes rcIn{0%{opacity:0;transform:translateY(8px)}14%{opacity:1;transform:none}76%{opacity:1}100%{opacity:0}}
@keyframes rcLine{0%{width:0}35%,100%{width:min(46vw,240px)}}
@media (prefers-reduced-motion:reduce){#roomCard.on{animation-name:lgW;animation-duration:.6s;opacity:1}#roomCard i{animation:none;width:min(46vw,240px)}}

/* ---------- タイトル ---------- */
#title .tb{position:absolute;left:calc(22px + env(safe-area-inset-left,0px));right:22px;bottom:calc(36px + env(safe-area-inset-bottom,0px));max-width:460px}
#title .t-foot{position:absolute;left:0;right:0;bottom:calc(8px + env(safe-area-inset-bottom,0px));display:flex;flex-wrap:wrap;justify-content:center;align-items:center;row-gap:2px;padding:0 16px;font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--ink);pointer-events:auto}
#title .t-foot a{color:inherit;text-decoration:none;opacity:.82}
#title .t-foot a:hover,#title .t-foot a:focus-visible{opacity:1;text-decoration:underline;text-underline-offset:3px}
#title .t-foot a:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
#title .t-foot nav{display:flex;align-items:center}
#title .t-foot .bar{margin:0 .4em;opacity:.5}
#title .t-foot .sep{margin:0 .7em;opacity:.5}
.logo{position:relative;width:252px}
.logo::before{content:"";position:absolute;inset:-34% -22%;background:radial-gradient(closest-side,rgba(116,140,255,.34),rgba(116,140,255,0));animation:lgHalo 5.5s ease-in-out infinite;pointer-events:none}
.lgo{position:relative;display:block;width:100%;height:auto;overflow:visible;isolation:isolate;filter:drop-shadow(0 0 7px rgba(190,214,255,.6)) drop-shadow(0 0 22px rgba(112,126,255,.45))}
/* ロゴ: 光の三原色が左右からずれて集まり、重なったところが白い光になる ( 文字ごとに順に ) */
.lgo use{mix-blend-mode:screen;animation:1.5s cubic-bezier(.16,.84,.24,1) both;animation-delay:calc(var(--i)*70ms + 120ms)}
.lgo .lgr{fill:#f00;animation-name:lgR}
.lgo .lgg{fill:#0f0;animation-name:lgG}
.lgo .lgb{fill:#00f;animation-name:lgB}
.lgo .lgw{fill:#fff6e2;mix-blend-mode:normal;animation:lgW .9s ease-out both;animation-delay:calc(var(--i)*70ms + 1.05s)}
.lgo .lsn{animation:lgSheen 7s cubic-bezier(.45,.05,.55,.95) 2s infinite}
@keyframes lgR{from{opacity:0;transform:translate(-16px,-5px)}35%{opacity:1}to{opacity:1;transform:none}}
@keyframes lgG{from{opacity:0;transform:translate(0,7px)}35%{opacity:1}to{opacity:1;transform:none}}
@keyframes lgB{from{opacity:0;transform:translate(16px,-5px)}35%{opacity:1}to{opacity:1;transform:none}}
@keyframes lgW{from{opacity:0}to{opacity:1}}
@keyframes lgSheen{0%{transform:translateX(-170px)}42%,100%{transform:translateX(560px)}}
@keyframes lgHalo{0%,100%{opacity:.62}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.lgo use,.lgo .lgw{animation:none}.lgo .lsn{animation:none;opacity:0}.logo::before{animation:none}}
.sub{font-family:var(--latin);font-weight:600;font-size:12px;color:var(--brass);margin-top:20px;letter-spacing:.32em;text-transform:uppercase}
.rule{position:relative;height:1px;background:linear-gradient(90deg,rgba(214,176,114,.7),rgba(214,176,114,.08));margin:20px 0 6px}
.rule i{position:absolute;top:-2px;left:0;width:26px;height:5px;border-radius:3px;background:radial-gradient(closest-side,#fff,rgba(255,240,200,.0));animation:photon 3.2s linear infinite;filter:drop-shadow(0 0 6px #ffe7b0)}
@keyframes photon{0%{left:0;opacity:0}8%{opacity:1}90%{opacity:1}100%{left:calc(100% - 26px);opacity:0}}
.menu{display:flex;flex-direction:column}
.mi{position:relative;display:flex;align-items:baseline;gap:14px;text-align:left;padding:14px 0 14px 30px;border-bottom:1px solid rgba(239,232,216,.12);pointer-events:auto}
.mi::before{content:"";position:absolute;left:0;top:50%;width:18px;height:1px;background:var(--brass);transition:width .2s}
.mi::after{content:"";position:absolute;left:12px;top:calc(50% - 4px);width:7px;height:7px;border-top:1px solid var(--brass);border-right:1px solid var(--brass);transform:rotate(45deg)}
.mi:hover::before{width:22px}
.mi .mt{white-space:nowrap;font-family:var(--mincho);font-weight:800;font-size:24px;letter-spacing:.06em}
.mi .md{font-size:12px;color:var(--ink2)}
.mi:active .mt{color:var(--brass)}
.legend{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:16px;font-size:12px;color:var(--ink2)}
.legend span{display:inline-flex;align-items:center;gap:4px;margin-right:8px}
.legend svg{width:13px;height:13px}
#bLog{display:none;align-items:center;gap:10px;min-height:44px;margin-top:2px;font-size:12px;color:var(--ink2);letter-spacing:.04em;pointer-events:auto}
#bLog.on{display:inline-flex;margin-bottom:6px}
#bLog u{color:var(--brass);text-decoration-color:rgba(214,176,114,.55);text-underline-offset:5px}
#bLog:active u{color:#fff4dc}
#log{background:radial-gradient(ellipse 90% 60% at 50% 18%,#0e1c28 0%,#070d13 60%,#04070a 100%);pointer-events:auto;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
#log .dlhead{height:calc(54px + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) calc(12px + env(safe-area-inset-right,0px)) 0 calc(4px + env(safe-area-inset-left,0px));display:flex;align-items:center;gap:4px}
#log .dlhead{max-width:460px;margin:0 auto}
#log .dlttl{flex:1;font-family:var(--mincho);font-weight:800;font-size:19px;letter-spacing:.12em}
#log .dlwrap{max-width:460px;margin:0 auto;padding:2px calc(14px + env(safe-area-inset-right,0px)) calc(14px + env(safe-area-inset-bottom,0px)) calc(14px + env(safe-area-inset-left,0px))}
#log .dlstats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
#log .dlstats div{text-align:center;padding:2px 0 8px;border-bottom:1px solid rgba(239,232,216,.12)}
#log .dlstats b{display:block;font-family:var(--mincho);font-weight:800;font-size:26px;line-height:1.2;color:#fff4dc}
#log .dlstats small{display:block;font-size:10px;line-height:1.3;color:var(--ink2);word-break:keep-all}
#log .dlnav{display:flex;align-items:center;justify-content:space-between;font-family:var(--mincho);font-weight:800;font-size:16px;letter-spacing:.08em;margin-top:2px}
#log .dlnav button{min-width:44px;min-height:44px;font-size:24px;line-height:1;color:var(--brass)}
#log .dlnav button[disabled]{opacity:.25}
#log .dlweek,#log .dlgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
#log .dlweek{text-align:center;font-size:10px;color:var(--ink3);margin-bottom:2px}
#log .dd{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:45px;color:var(--ink3)}
#log .dd b{font-size:13px;font-weight:600;line-height:1}
#log .dd span{display:flex;gap:2px}
#log .dd span i{width:5px;height:5px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(239,232,216,.3)}
#log .dd span i.lit{background:var(--brass);box-shadow:0 0 5px rgba(214,176,114,.7)}
#log .dd.on{color:var(--ink);background:rgba(239,232,216,.05)}
#log .dd.all{background:rgba(214,176,114,.15)}
#log .dd.now::after{content:"";position:absolute;left:50%;bottom:3px;width:12px;height:1px;margin-left:-6px;background:var(--brass)}
#log .dd.sel{box-shadow:inset 0 0 0 1px var(--brass);color:#fff4dc}
#log .dlday{min-height:86px;margin-top:10px;padding-top:8px;border-top:1px solid rgba(239,232,216,.12)}
#log .dlday .dt{font-size:13px;color:var(--ink);letter-spacing:.04em;word-break:keep-all}
#log .dlday .dv{display:flex;align-items:baseline;gap:8px;margin-top:2px}
#log .dlday .dv b{font-family:var(--mincho);font-weight:800;font-size:26px;color:#fff4dc}
#log .dlday .dv small{font-size:11px;color:var(--ink2)}
#log .dlday .dv span{margin-left:auto;font-size:12px;color:var(--brass)}
#log .dlday .dm{font-size:11px;color:var(--ink2);word-break:keep-all}
#log .dlnote{margin-top:8px;font-size:10px;color:var(--ink3)}
#title .tmute{position:absolute;top:calc(8px + env(safe-area-inset-top,0px));right:calc(8px + env(safe-area-inset-right,0px))}
@media (max-width:430px){
  #title.on{display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
  #title.fits{overflow-y:hidden}
  #title:not(.fits){pointer-events:auto;touch-action:pan-y}
  #title .tmute{position:fixed}
  #title .tb{position:relative;left:auto;right:auto;bottom:auto;flex:0 0 auto;margin:auto 22px 0 calc(22px + env(safe-area-inset-left,0px));padding-top:calc(14px + env(safe-area-inset-top,0px))}
  #title .t-foot{position:relative;left:auto;right:auto;bottom:auto;flex:0 0 auto;margin-top:10px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}
}

/* ---------- HUD ---------- */
#hud .top{position:absolute;left:0;right:0;top:0;padding:calc(8px + env(safe-area-inset-top,0px)) calc(8px + env(safe-area-inset-right,0px)) 0 calc(14px + env(safe-area-inset-left,0px));display:flex;align-items:flex-start;justify-content:space-between;background:linear-gradient(rgba(4,7,10,.72),rgba(4,7,10,0));padding-bottom:18px}
.timer{min-width:118px}
.tnum{display:flex;align-items:baseline;gap:3px;font-family:var(--mincho);font-weight:800}
.tnum b{font-size:38px;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.tnum small{font-size:12px;color:var(--ink2);font-family:var(--goth)}
.fuse{position:relative;width:118px;height:2px;background:rgba(239,232,216,.14);margin-top:5px}
.fuse i{position:absolute;left:0;top:0;bottom:0;width:50%;background:linear-gradient(90deg,rgba(214,176,114,.5),#ffe8b8)}
.fuse i::after{content:"";position:absolute;right:-5px;top:-3px;width:10px;height:8px;border-radius:50%;background:radial-gradient(closest-side,#fff,rgba(255,232,184,0));}
.timer.low .tnum b{color:var(--warn);animation:lowp .5s ease-in-out infinite alternate}
.timer.low .fuse i{background:linear-gradient(90deg,rgba(255,138,82,.5),#ffb08a)}
@keyframes lowp{from{opacity:1}to{opacity:.55}}
.tadd{position:absolute;left:calc(14px + env(safe-area-inset-left,0px));top:calc(54px + env(safe-area-inset-top,0px));font-family:var(--mincho);font-weight:800;font-size:16px;color:#ffe9b8;opacity:0;pointer-events:none}
.tadd.go{animation:tadd 1.4s ease-out forwards}
.tadd.neg{color:var(--warn)}
@keyframes tadd{0%{opacity:0;transform:translateY(8px)}15%{opacity:1;transform:none}75%{opacity:1}100%{opacity:0;transform:translateY(-10px)}}
.mid{text-align:center;padding-top:2px}
#stLabel{font-size:11px;letter-spacing:.2em;color:var(--brass);white-space:nowrap}
@media (max-width:380px){#stLabel{letter-spacing:.08em}}
.score b{font-family:var(--mincho);font-weight:800;font-size:22px;font-variant-numeric:tabular-nums}
#streak{font-size:11px;color:var(--ink2);min-height:14px}
.icons{display:flex}

#layers{position:absolute;right:calc(6px + env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:2px}
#layers .lh{font-size:10px;letter-spacing:.2em;color:var(--brass);margin-bottom:4px;padding-left:.2em}
.lb{position:relative;width:48px;height:46px;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:auto;color:var(--ink3)}
.lb b{font-family:var(--mincho);font-weight:800;font-size:20px;line-height:1}
.lb .dots{display:flex;gap:3px;height:7px;margin-top:3px}
.lb .dots i{width:5px;height:5px;border-radius:50%;border:1px solid currentColor}
.lb .dots i.ok{background:currentColor}
.lb .beams{position:absolute;left:4px;top:8px;bottom:8px;width:2px;display:flex;flex-direction:column;gap:2px}
.lb .beams i{flex:1;border-radius:1px}
.lb .sw{position:absolute;right:9px;top:50%;width:3px;height:16px;margin-top:-8px;background:var(--tint);opacity:.55;border-radius:1px}
.lb.on .sw{opacity:1;box-shadow:0 0 6px var(--tint)}
.lb b{color:color-mix(in srgb,var(--tint) 45%,currentColor)}
.lb.on{color:var(--ink)}
.lb.on::before,.lb.on::after{content:"";position:absolute;width:8px;height:8px;border:1px solid var(--brass)}
.lb.on::before{right:2px;top:2px;border-left:0;border-bottom:0}
.lb.on::after{right:2px;bottom:2px;border-left:0;border-top:0}
.lb.pulse b{animation:lpulse .7s ease-in-out infinite alternate;color:#fff4d6}
@keyframes lpulse{from{text-shadow:0 0 0 rgba(255,230,170,0)}to{text-shadow:0 0 14px rgba(255,230,170,1)}}
#layers .la{width:48px;height:30px;display:flex;align-items:center;justify-content:center;pointer-events:auto;color:var(--ink3)}
#layers .la svg{width:14px;height:14px}

#hud .bottom{position:absolute;left:0;right:0;bottom:0;padding:22px calc(10px + env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) calc(14px + env(safe-area-inset-left,0px));display:flex;align-items:flex-end;justify-content:space-between;gap:8px;background:linear-gradient(rgba(4,7,10,0),rgba(4,7,10,.75))}
.stock{min-width:0}
#movStock .lrow{display:flex;align-items:baseline;gap:3px;white-space:nowrap}
#movStock .ll{font-size:12px;color:var(--brass);letter-spacing:.06em;white-space:nowrap;writing-mode:horizontal-tb}
#leftN{font-family:var(--mincho);font-weight:800;font-size:44px;line-height:.9;font-variant-numeric:tabular-nums;color:#fff4dc;min-width:.62em;text-align:center;display:inline-block}
#leftN.bump{animation:lbump .35s ease-out}
@keyframes lbump{0%{transform:scale(1.35)}100%{transform:none}}
#movStock .lu{font-size:12px;color:var(--ink2)}
.stock{flex:0 0 auto}
#movStock.low #leftN{color:#ffc27a;text-shadow:0 0 14px rgba(255,160,80,.6)}
#movStock.zero #leftN{color:var(--warn)}
#pips{display:flex;gap:3px;align-items:center;flex-wrap:wrap;max-width:128px;margin-top:5px}
#pips i{width:9px;height:9px;border-radius:50%;border:1px solid rgba(214,176,114,.8)}
#pips i.sl{border-style:dashed;border-color:rgba(239,232,216,.5)}
#pips i.on{background:var(--brass);box-shadow:0 0 6px rgba(214,176,114,.7)}
#pips i.on.sl{background:rgba(239,232,216,.55);box-shadow:none}
#movStock.tight #pips i{border-color:var(--warn)}
#movStock.tight #pips i.on{background:#ffb08a;box-shadow:0 0 6px rgba(255,138,82,.7)}
#movTxt{font-size:11px;color:var(--ink2);margin-top:5px;white-space:nowrap}
#movTxt b{color:var(--ink);font-weight:700}
#failMk{display:flex;align-items:center;gap:5px;margin-top:5px;font-size:11px;color:var(--ink2);white-space:nowrap;min-height:11px}
#failMk:empty{display:none}
#failMk i{width:6px;height:6px;transform:rotate(45deg);border:1px solid rgba(255,138,82,.6);margin:0 1px}
#failMk i.on{background:var(--warn);border-color:var(--warn);box-shadow:0 0 6px rgba(255,120,60,.7)}
#failMk .fl{color:#ffc2a0}
#failBox .fr{display:inline-block;margin-top:2px;font-size:12px;color:#ffc2a0;font-weight:400}
#failBox b.fr{color:var(--warn);font-weight:700}
#failBox{position:absolute;left:50%;top:calc(78px + env(safe-area-inset-top,0px));transform:translate(-50%,0) scale(.96);width:min(92vw,360px);padding:10px 16px 10px;text-align:center;background:linear-gradient(rgba(30,10,6,.9),rgba(16,6,4,.82));opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;word-break:keep-all;line-break:strict}
#failBox::before,#failBox::after{content:"";position:absolute;width:10px;height:10px;border:1px solid var(--warn)}
#failBox::before{left:0;top:0;border-right:0;border-bottom:0}
#failBox::after{right:0;bottom:0;border-left:0;border-top:0}
#failBox.on{opacity:1;transform:translate(-50%,0)}
#failBox .fk{font-family:var(--mincho);font-weight:800;font-size:22px;letter-spacing:.12em;color:var(--warn);text-shadow:0 0 18px rgba(255,120,60,.6)}
#failBox .fw{font-size:13px;color:var(--ink);margin-top:4px;line-height:1.55}
#hud.failing #twist,#hud.failing #layers{opacity:.25;pointer-events:none}
#twist{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:6px;pointer-events:auto;padding:6px}
#twist.lean #twS,#twist.lean .twl small{display:none}
#twist .tw{position:relative;width:64px;height:54px;display:flex;align-items:center;justify-content:center;color:var(--ink);background:rgba(20,26,32,.9);touch-action:none;-webkit-user-select:none;user-select:none;transition:opacity .12s}
#twist.busy .tw,#twist.empty .tw{opacity:.35}
#twist .twl small{display:block;font-size:10px;color:var(--ink3);margin-top:2px;letter-spacing:.04em}
#twist.picked .twl b{animation:picked .5s ease-out}
@keyframes picked{0%{color:#fff3d6;text-shadow:0 0 14px rgba(255,220,150,.9);transform:scale(1.25)}100%{transform:none}}
#twist .tw::before,#twist .tw::after{content:"";position:absolute;width:9px;height:9px;border:1px solid var(--brass)}
#twist .tw::before{left:0;top:0;border-right:0;border-bottom:0}
#twist .tw::after{right:0;bottom:0;border-left:0;border-top:0}
#twist .tw:active{background:rgba(214,176,114,.22);color:#fff3d6}
#twist .tw svg{width:34px;height:34px}
#twist .keys{display:block;margin-top:3px;white-space:nowrap}
#twist .tw .pr{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;pointer-events:none;opacity:0;background:conic-gradient(#ffd79a calc(var(--p,0) * 360deg),rgba(239,232,216,.16) 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3px));transition:opacity .1s}
#twist .tw.hold .pr{opacity:1}
#twist .tw.done .pr{opacity:1;background:#ffe2ad;box-shadow:0 0 14px rgba(255,210,140,.9)}
#twist .tw.done{background:rgba(214,176,114,.3)}
#twist .tw.hold{background:rgba(214,176,114,.16);color:#fff3d6}
#twist .twl .holdmsg{display:none;font-size:11px;color:#ffd79a;font-weight:700;margin-top:2px;letter-spacing:.02em}
#twist.holding .twl small{display:none}
#twist.holding .twl .holdmsg{display:block}
#plan{position:absolute;left:calc(8px + env(safe-area-inset-left,0px));top:calc(84px + env(safe-area-inset-top,0px));width:126px;height:142px;pointer-events:none;opacity:0;transition:opacity .2s}
#hud.hasplan #plan{opacity:1}
#hud.cleared #plan,#hud.failing #plan{opacity:0}
@media (max-width:759px){
  #hud.hasplan #toast{left:calc(142px + env(safe-area-inset-left,0px));right:8px;transform:none;max-width:none;width:auto;text-align:left;font-size:13px;padding:8px 12px}
}
#twist kbd{margin:0 2px}
kbd svg{display:inline-block;width:9px;height:9px;vertical-align:-1px;margin-right:2px}
#twist .twl{min-width:92px;text-align:center;font-size:12px;color:var(--ink2);line-height:1.2}
#twist .twl b{display:block;font-family:var(--mincho);font-weight:800;font-size:22px;color:var(--ink)}
#twist.one .twl b{display:none}
.acts{display:flex;gap:8px}
/* ヒントとやり直しは囲まず、文字と下線だけ */
.acts .bk{background:none;padding:0 8px}
.acts .bk::before,.acts .bk::after{display:none}
.acts .bk{text-decoration:underline;text-decoration-color:rgba(214,176,114,.55);text-underline-offset:7px;text-decoration-thickness:1px}
.acts .bk:active{background:none;color:var(--brass)}

#toast{position:absolute;left:50%;top:calc(84px + env(safe-area-inset-top,0px));transform:translateX(-50%);max-width:min(92vw,420px);width:max-content;padding:10px 16px;font-size:14px;line-height:1.55;text-align:center;word-break:keep-all;overflow-wrap:anywhere;line-break:strict;color:var(--ink);background:rgba(6,10,14,.72);opacity:0;transition:opacity .3s,transform .3s;pointer-events:none}
#toast::before,#toast::after{content:"";position:absolute;width:9px;height:9px;border:1px solid var(--brass2)}
#toast::before{left:0;top:0;border-right:0;border-bottom:0}
#toast::after{right:0;bottom:0;border-left:0;border-top:0}
#toast.on{opacity:1}
#toast svg{display:inline-block;width:13px;height:13px;vertical-align:-1px;margin:0 1px}

#ledger{position:absolute;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:min(94vw,380px);padding:30px 18px 10px;text-align:center;background:radial-gradient(ellipse 60% 62% at 50% 58%,rgba(3,6,9,.66),rgba(3,6,9,.4) 55%,rgba(3,6,9,0) 100%);opacity:0;pointer-events:none;transition:opacity .4s;word-break:keep-all;line-break:strict}
#ledger.on{opacity:1}
#ledger .big{font-family:var(--mincho);font-weight:800;font-size:30px;letter-spacing:.14em;color:#fff7e2;text-shadow:0 0 20px rgba(255,236,190,.8),0 0 50px rgba(255,214,150,.35),0 2px 8px rgba(0,0,0,.7)}
#ledger .fx{opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
#ledger .fx.on{opacity:1;transform:none}
#ledger .tot{font-family:var(--mincho);font-weight:800;font-size:46px;line-height:1.08;color:#fff4dc;font-variant-numeric:tabular-nums;text-shadow:0 0 18px rgba(255,220,160,.5),0 2px 10px rgba(0,0,0,.85)}
#ledger .brk{font-size:12px;line-height:1.6;color:var(--ink);text-shadow:0 1px 6px rgba(0,0,0,.95),0 0 2px rgba(0,0,0,.9);margin-top:2px}
#ledger .brk .gold{color:#ffdf9a}
#hud.cleared #layers,#hud.cleared #twist{opacity:0;pointer-events:none;transition:opacity .25s}
#ledger .nx{font-size:11px;color:var(--brass);text-align:center;margin-top:8px;letter-spacing:.14em;text-shadow:0 1px 6px rgba(0,0,0,.9)}
#hud .bottom,#hud .mid{transition:opacity .25s}
#hud.cleared .bottom,#hud.cleared .mid{opacity:0;pointer-events:none}
#waitMsg{position:absolute;left:0;right:0;bottom:calc(140px + env(safe-area-inset-bottom,0px));text-align:center;font-size:12px;color:var(--ink2);display:none}

/* ---------- ステージ ( 番号と順路の点、3つの灯 ) ---------- */
#hud.stagemode .timer,#hud.stagemode .score,#hud.stagemode #streak,#hud.stagemode .tadd{display:none}
#hud:not(.stagemode) .stg,#hud:not(.stagemode) .lamps{display:none}
.stg{min-width:118px}
.sn{display:flex;align-items:baseline;gap:3px;font-family:var(--mincho);font-weight:800}
.sn b{font-size:38px;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.sn small{font-size:12px;color:var(--ink2);font-family:var(--goth)}
.sn small.key{color:var(--brass);margin-left:7px;letter-spacing:.06em;white-space:nowrap}
.route{display:flex;align-items:center;margin-top:7px;height:9px}
.route i{width:7px;height:7px;border-radius:50%;border:1px solid rgba(214,176,114,.55);flex:0 0 auto}
.route i.ok{background:var(--brass);border-color:var(--brass)}
.route i.cur{border-color:#ffe7b0;background:rgba(255,231,176,.25);box-shadow:0 0 7px rgba(255,220,150,.85)}
.route i.key{width:9px;height:9px}
.route b{width:11px;height:1px;background:rgba(214,176,114,.35);flex:0 0 auto}
.lamps{display:flex;gap:9px;justify-content:center;margin-top:6px}
.lp{width:15px;height:20px;overflow:visible}
.lp .cap,.lp .bs{fill:#b98d52}
.lp .gl{fill:rgba(16,22,28,.92);stroke:rgba(214,176,114,.45);stroke-width:1}
.lp.ready .gl{stroke:#f1d49a;fill:rgba(255,226,173,.10)}
.lp.on .gl{fill:#ffe9b8;stroke:#fff6dc}
.lp.on{filter:drop-shadow(0 0 4px rgba(255,214,140,.95))}
.lp.out{opacity:.38}
#ledger .lrow{display:flex;justify-content:center;gap:22px;margin:10px 0 2px}
#ledger .lrow div{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11px;color:var(--ink2);text-shadow:0 1px 6px rgba(0,0,0,.95)}
#ledger .lrow .lp{width:24px;height:32px}
#ledger .lrow .lp.on{animation:lampOn .5s ease-out}
#ledger .lrow div.new{color:#ffdf9a}
@keyframes lampOn{0%{transform:scale(.6);filter:drop-shadow(0 0 0 rgba(255,214,140,0))}60%{transform:scale(1.25)}100%{transform:none}}
#ledger .chb{font-family:var(--mincho);font-weight:800;font-size:16px;letter-spacing:.08em;color:#fff1cf;margin-top:8px;text-shadow:0 0 14px rgba(255,220,160,.7),0 1px 6px rgba(0,0,0,.9)}
#ledger .chb small{display:block;font-family:var(--goth);font-weight:500;font-size:11px;color:var(--ink2);letter-spacing:.04em;margin-top:3px}
#ledger .nw{font-size:12px;color:#ffdf9a;margin-top:4px;text-shadow:0 1px 6px rgba(0,0,0,.95)}
#ledger .acts2{display:flex;justify-content:center;gap:4px;margin-top:10px}
#ledger .lk{pointer-events:none;min-height:44px;padding:0 12px;font-size:14px;letter-spacing:.05em;color:var(--ink);text-decoration:underline;text-decoration-color:rgba(214,176,114,.55);text-underline-offset:7px;text-shadow:0 1px 6px rgba(0,0,0,.95)}
#ledger .lk.main{font-family:var(--mincho);font-weight:800;font-size:18px;color:#fff4dc}
#ledger .lk:active{color:var(--brass)}
#ledger.on .lk{pointer-events:auto} /* 見えている間だけ押せる ( 消えた結果のボタンが、下のヒントの指を取らない ) */
/* ---------- 順路の地図 ( ステージをえらぶ ) ---------- */
#map{background:radial-gradient(ellipse 90% 60% at 50% 18%,#0e1c28 0%,#070d13 60%,#04070a 100%);pointer-events:auto}
#map .mhead{position:absolute;left:0;right:0;top:0;height:calc(54px + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) calc(12px + env(safe-area-inset-right,0px)) 0 calc(4px + env(safe-area-inset-left,0px));display:flex;align-items:center;gap:4px}
#map .mttl{flex:1;font-family:var(--mincho);font-weight:800;font-size:19px;letter-spacing:.12em}
#map .mttl small{font-family:var(--latin);font-style:italic;font-weight:600;font-size:14px;color:var(--brass);letter-spacing:.04em;margin-left:10px}
#map .mtot{font-size:12px;color:var(--brass);letter-spacing:.06em;white-space:nowrap}
#map .mhead{z-index:2}
#mapSvg{position:absolute;left:0;top:0;width:100%;height:100%;display:block;touch-action:manipulation}
#map .mcap{position:absolute;transform:translate(-50%,-50%);text-align:center;pointer-events:none;width:170px}
#map .mcap .cn{font-family:var(--mincho);font-weight:800;font-size:34px;line-height:1.05;color:#fff4dc;text-shadow:0 0 16px rgba(255,220,160,.35)}
#map .mcap .cn small{font-size:14px;color:var(--ink2);margin:0 2px}
#map .mcap .cr{font-size:12px;color:var(--brass);letter-spacing:.08em;margin-top:4px}
#map .mcap .ct{font-size:11px;color:var(--ink2);margin-top:3px;word-break:keep-all;line-break:strict}
#map .mcap .lamps{margin-top:8px}
#map .mcap .bk{margin-top:12px;pointer-events:auto;font-family:var(--mincho);font-weight:800;font-size:17px;padding:0 20px}
#map .mcap .lockt{font-size:12px;color:var(--ink3);margin-top:12px;word-break:keep-all}
#map .mcap .keys{font-size:10px;color:var(--ink3);margin-top:8px;display:none}
@media (hover:hover) and (pointer:fine){#map .mcap .keys{display:block}}
#map .mlap{position:absolute;right:calc(10px + env(safe-area-inset-right,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:2px;font-size:12px;color:var(--ink2)}
#map .mlap button{min-width:44px;min-height:44px;color:var(--brass);pointer-events:auto}
#map .mlap button[disabled]{opacity:.25}
#mapSvg .mlamp.fr{animation:frp 1.6s ease-in-out infinite}
@keyframes frp{50%{opacity:.55}}
#mapSvg .msel{animation:msel 1.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes msel{50%{stroke-opacity:.45}}
/* ---------- 終了・一時停止 ---------- */
#over,#pause{background:linear-gradient(180deg,rgba(3,5,8,.15) 0%,rgba(3,5,8,.55) 45%,rgba(3,5,8,.92) 100%)}
#pause{background:rgba(3,5,8,.86)}
.ob{position:absolute;left:calc(22px + env(safe-area-inset-left,0px));right:22px;bottom:calc(24px + env(safe-area-inset-bottom,0px));max-width:460px}
.kick{font-family:var(--mincho);font-weight:800;font-size:54px;line-height:1.05;letter-spacing:.06em}
.kick.done{color:#fff7e2;text-shadow:0 0 18px rgba(255,236,190,.7)}
.reason{font-size:13px;color:var(--ink2);margin-top:8px;line-height:1.6;word-break:keep-all;line-break:strict}
.stats{display:flex;gap:26px;margin:20px 0 4px}
.stats div{display:flex;flex-direction:column}
.stats small{font-size:11px;color:var(--brass);letter-spacing:.14em}
.stats b{font-family:var(--mincho);font-weight:800;font-size:30px;font-variant-numeric:tabular-nums;line-height:1.2}
.stats .s1 b{font-size:40px}
#oNew{font-family:var(--mincho);font-weight:800;font-size:15px;color:#ffdf9a;text-shadow:0 0 12px rgba(255,223,154,.7);letter-spacing:.2em;min-height:20px}
#oAns{font-size:11px;color:var(--ink3);margin-top:2px;min-height:15px;word-break:keep-all}
#shareTxt{display:none;width:100%;height:96px;margin-top:10px;background:rgba(0,0,0,.4);color:var(--ink);border:1px solid rgba(239,232,216,.25);font:12px/1.5 var(--goth);padding:8px;pointer-events:auto;-webkit-user-select:text;user-select:text;resize:none}
#shareTxt.on{display:block}

/* ---------- 1周目の締め ( 第40面のあとのムービー。終わりの札はロゴと一行と2つのボタンだけ ) ---------- */
#ending .ecard{position:absolute;left:0;right:0;top:calc(50% + 9vh);display:none;flex-direction:column;align-items:center;text-align:center;padding:0 16px}
#ending.txt .ecard{display:flex} /* 出たときにロゴの登場アニメが始まる */
#ending .elogo{width:min(52vw,220px)}
#ending .eline{margin:22px 0 0;font-family:var(--latin);font-weight:600;font-style:italic;font-size:clamp(19px,4.6vw,26px);letter-spacing:.1em;color:#fff6e2;text-shadow:0 0 18px rgba(255,236,190,.55),0 2px 10px rgba(0,0,0,.9);animation:lgW 1.4s ease 1.1s both}
#ending .eacts{display:flex;justify-content:center;gap:4px;margin-top:18px;opacity:0;transition:opacity .6s;pointer-events:none}
#ending.btn .eacts{opacity:1;pointer-events:auto}
#ending .lk{min-height:44px;padding:0 12px;font-size:14px;letter-spacing:.05em;color:var(--ink);text-decoration:underline;text-decoration-color:rgba(214,176,114,.55);text-underline-offset:7px;text-shadow:0 1px 6px rgba(0,0,0,.95)}
#ending .lk.main{font-family:var(--mincho);font-weight:800;font-size:18px;color:#fff4dc}
#ending .lk:active{color:var(--brass)}
#ending .lk:focus-visible,#ending .eskip:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
#ending .eskip{position:absolute;right:calc(10px + env(safe-area-inset-right,0px));top:calc(8px + env(safe-area-inset-top,0px));min-height:44px;padding:0 12px;font-size:12px;letter-spacing:.18em;color:var(--ink2);text-shadow:0 1px 6px rgba(0,0,0,.9);opacity:0;pointer-events:none;transition:opacity .5s}
#ending.skip .eskip{opacity:1;pointer-events:auto}
#fade{position:fixed;inset:0;z-index:55;background:#03040a;opacity:0;pointer-events:none;transition:opacity .45s ease}
#fade.on{opacity:1;pointer-events:auto}
#map .mcap .mend{display:block;margin:10px auto 0;min-height:36px;padding:0 6px;font-size:11px;letter-spacing:.06em;color:var(--brass);text-decoration:underline;text-decoration-color:rgba(214,176,114,.5);text-underline-offset:5px;pointer-events:auto}
@media (prefers-reduced-motion:reduce){#ending .eline{animation:none}#fade{transition:none}}

@media (min-width:760px){
  #twist{bottom:22px}
  #plan{left:24px;top:96px;width:176px;height:196px}
  #ledger{left:calc(28px + env(safe-area-inset-left,0px));top:50%;bottom:auto;transform:translateY(-50%);width:340px}
  #title .tb{left:calc(64px + env(safe-area-inset-left,0px));bottom:64px}
  #title .t-foot{justify-content:flex-start;left:calc(64px + env(safe-area-inset-left,0px));right:auto;bottom:26px;padding:0}
  .logo{width:350px}
  .sub{font-size:14px;margin-top:26px}
  .ob{left:64px;bottom:56px}
  .kick{font-size:68px}
  .tnum b{font-size:44px}
  .fuse,.timer{width:150px}
  #hud .top{padding-left:24px;padding-right:16px}
  #hud .bottom{padding-left:24px;padding-right:20px;padding-bottom:16px}
    #layers{right:14px}
}