/* LUMINA CUBE - menus and overlays: dark glass panels with a thin lit edge, like the cubes of the tomb */
:root{--ground:#05080a;--panel:rgba(8,14,17,.985);--panel2:#0e1a1d;--edge:#3a5a5a;--edge2:#5d8583;--text:#e8f2ee;--muted:#8fb3ad;--gold:#e4cd90;--gold2:#ffe9a8;
  --r0:#dfe6f0;--r1:#7fb6ff;--r2:#ffe36a;--r3:#ff9a3c;--r4:#ff7ad9;--r5:#6cf5d6;--good:#9fffc0;--bad:#ff8a93;color-scheme:dark;
  --font:'DotGothic16','Hiragino Kaku Gothic ProN','Yu Gothic','PingFang SC','Microsoft YaHei','Noto Sans SC',sans-serif}
*{box-sizing:border-box}
html,body{height:100%;margin:0;position:fixed;inset:0;overscroll-behavior:none;touch-action:manipulation;background:var(--ground);color:var(--text);font-family:var(--font);overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
#view{position:fixed;left:0;top:0;image-rendering:pixelated;touch-action:none;cursor:url("img/ui/crosshair.png") 16 16,crosshair}
#safe{position:fixed;inset:0;pointer-events:none;visibility:hidden;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)}
#rot{position:fixed;left:16px;right:16px;top:calc(env(safe-area-inset-top,0px) + 12px);margin:0;text-align:center;font-size:14px;color:var(--muted);z-index:30;pointer-events:none}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.layer{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;padding:max(10px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) max(10px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}
button{font-family:var(--font);color:var(--text);cursor:pointer}
.btn{min-height:44px;min-width:44px;padding:8px 18px;font-size:16px;background:linear-gradient(#16272a,#0d181a);border:1px solid var(--edge);border-top-color:var(--edge2);border-radius:3px;letter-spacing:.04em}
.btn:hover{border-color:var(--gold)}.btn:active{transform:translateY(1px)}
.btn:focus-visible,.ptab:focus-visible,.row:focus-visible,.pclose:focus-visible{outline:2px solid var(--gold2);outline-offset:2px}
.btn.main{background:linear-gradient(#2c2346,#1a1530);border-color:#7d5ac8;border-top-color:#b49cf0}
.btn.small{min-height:36px;padding:4px 12px;font-size:14px}
.btn:disabled{opacity:.45;cursor:default}
.btn.on{border-color:var(--good);color:var(--good)}

/* loading */
#loading{background:var(--ground);z-index:40}
.loadbox{text-align:center;color:var(--muted);font-size:15px}
.lcube{width:34px;height:34px;margin:0 auto 18px;border:2px solid #aef0ff;box-shadow:0 0 12px #6fd8ff,inset 0 0 10px rgba(120,220,255,.35);background:rgba(120,220,255,.08);animation:spin 3.6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.lcube{animation:none}}

/* title */
#title{background:radial-gradient(ellipse at 50% 50%,rgba(5,8,10,.72) 0,rgba(5,8,10,.5) 45%,rgba(5,8,10,.8) 100%)}
#title.after{background:linear-gradient(90deg,rgba(5,8,10,.22) 0,rgba(5,8,10,.3) 42%,rgba(5,8,10,.8) 76%),url(img/ending/morning.webp) 30% center/cover #07060c}
#title.after .tstand{display:none}
@media (min-aspect-ratio:4/3){#title.after .tbox{margin-right:0;margin-left:min(46vw,620px)}}
.tbox{position:relative;z-index:1;text-align:center;max-width:560px}
.tstand{position:absolute;right:max(3vw,env(safe-area-inset-right,0px));bottom:0;height:min(96%,900px);pointer-events:none;filter:drop-shadow(0 0 28px rgba(150,110,255,.35))}
@media (min-aspect-ratio:4/3){.tbox{margin-right:min(30vw,380px)}}
@media (max-aspect-ratio:4/3){.tstand{opacity:.42;right:50%;transform:translateX(50%)}.tbox{padding:14px 10px;background:radial-gradient(ellipse at center,rgba(4,6,10,.72),rgba(4,6,10,0) 72%)}}
.tkstand{position:absolute;right:max(4vw,env(safe-area-inset-right,0px));bottom:0;height:min(88%,820px);pointer-events:none;filter:drop-shadow(0 0 24px rgba(150,110,255,.3));animation:standIn .25s ease-out}
@keyframes standIn{from{opacity:0;transform:translateX(16px)}}
.tkstand.tkleft{right:auto;left:max(4vw,env(safe-area-inset-left,0px));height:min(92%,860px);transition:filter .3s,transform .5s,opacity .6s}
.tkstand.tkleft.rou{height:min(56%,470px);left:max(6vw,env(safe-area-inset-left,0px))}
.tkstand.tkleft.child{height:min(70%,650px);left:max(8vw,env(safe-area-inset-left,0px))}/* Tio is a child: a head shorter than Yura */
.tkstand.tkleft.off{opacity:0;transform:translateY(14px)}
.tkstand.tkleft.ghostly:not(.off){opacity:.62;filter:drop-shadow(0 0 22px rgba(255,214,130,.45)) brightness(1.1)}
.tkstand.tkleft.ghostly.dim:not(.off){opacity:.4}
.tkstand{transition:filter .3s,transform .3s}.tkstand.dim{filter:brightness(.42) saturate(.6) drop-shadow(0 0 12px rgba(150,110,255,.12));transform:translateY(10px) scale(.985);transform-origin:50% 100%}
/* inside the zoomed layer: sized by the layer (%), not by vh, or the UI zoom blew her past the top of the screen (head cut off behind the box) */
.rstand{position:absolute;right:max(3vw,env(safe-area-inset-right,0px));bottom:0;height:min(94%,880px);pointer-events:none;filter:drop-shadow(0 0 30px rgba(255,210,140,.35));animation:standIn .4s ease-out;z-index:0}
#result .rbox{position:relative;z-index:1}
.rrou{position:absolute;right:max(6vw,env(safe-area-inset-right,0px));bottom:0;height:min(58%,500px);pointer-events:none;filter:drop-shadow(0 0 24px rgba(255,214,130,.25));animation:standIn .4s ease-out;z-index:0}
@media (max-aspect-ratio:4/3){.rrou{opacity:.35}}
@media (max-aspect-ratio:4/3){.rstand{opacity:.35}}
/* wide screens: the box steps to the left so she stands beside it, not behind it */
@media (min-aspect-ratio:4/3){#result .rbox{margin-right:30%}}
.tsub{margin:0 0 6px;color:var(--muted);font-size:14px;letter-spacing:.3em}
.logo{margin:0;font-weight:400;font-size:clamp(34px,7vw,60px);letter-spacing:.12em;color:#fff6e0;text-shadow:0 0 6px #ffd98a,0 0 22px rgba(255,190,110,.65),0 0 44px rgba(150,120,255,.45)}
.logo span{display:block;font-size:clamp(15px,2.6vw,20px);letter-spacing:.5em;margin-top:4px;color:var(--gold);text-shadow:0 0 10px rgba(255,210,140,.5)}
.tver{margin:8px 0 18px;color:#c9a8ff;font-size:14px;letter-spacing:.2em}
.tbtns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.tsave{margin:10px 0 0;font-size:13px;color:#a9b8c4;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.tlang{display:flex;gap:4px;justify-content:center;margin-top:12px}.tlang button{background:none;border:1px solid transparent;color:var(--muted);font:inherit;font-size:13px;padding:4px 10px;cursor:pointer;border-radius:3px}.tlang button[aria-pressed="true"]{color:#ffd98a;border-color:#6b5a2a}.tlang button:hover,.tlang button:focus-visible{color:#e8f2ee;border-color:#2a4446}
.tfoot{margin:16px 0 0;font-size:12px;color:var(--muted)}
/* the first title: only the logo and a gentle 「クリックしてはじめる」 until the first press wakes the sound */
.twake{display:none;margin:22px 0 0;font-size:17px;letter-spacing:.2em;color:#ffe2b0;animation:twakeB 2.4s ease-in-out infinite}
#title.wake .twake{display:block}
#title.wake .tbtns,#title.wake .tlang,#title.wake .tsave,#title.wake .tfoot{display:none}
#title:not(.wake) .tbtns{animation:twakeIn .6s ease-out}
@keyframes twakeB{50%{opacity:.45}}
@keyframes twakeIn{from{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.twake,#title:not(.wake) .tbtns{animation:none}}

/* talk */
#talk{align-items:flex-end;background:linear-gradient(transparent 55%,rgba(2,4,6,.55));cursor:pointer}
.tk{position:relative;width:min(760px,100%);min-height:96px;margin-bottom:4px;padding:12px 18px 14px;background:var(--panel);border:1px solid var(--edge);border-top-color:#aef0ff;box-shadow:0 0 18px rgba(120,220,255,.12)}
.tkname{margin:0 0 6px;font-size:14px;color:#aef0ff;letter-spacing:.1em;min-height:1em}
.tkname.yura{color:#e0c8ff}.tkname.ord{color:var(--gold2)}.tkname.note{color:#bfefff}
.tkface{position:absolute;left:10px;bottom:100%;width:105px;height:120px;background:url(img/rou.png) 0 0/420px 240px no-repeat;image-rendering:pixelated;animation:rouIdle 2.4s steps(4) infinite;filter:drop-shadow(0 0 8px rgba(255,214,130,.25));pointer-events:none}
@keyframes rouIdle{to{background-position-x:-420px}}
.tktext{margin:0;font-size:17px;line-height:1.65;max-width:60em;text-wrap:pretty;word-break:auto-phrase}
.tkrest{visibility:hidden}.tk.narr{display:flex;align-items:center;justify-content:center}.tk.narr .tkname{display:none}.tk.narr .tktext{max-width:36em;text-align:left;text-wrap:balance}
.tknext{position:absolute;right:14px;bottom:8px;font-size:12px;color:var(--gold);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.tkskip{position:absolute;top:0;right:10px;transform:translateY(calc(-100% - 6px))}

/* panel */
#panel{background:rgba(2,4,6,.55)}#panel.solo .ptab{display:none}.cols.solo{grid-template-columns:minmax(0,640px);justify-content:center}
.pbox{display:flex;flex-direction:column;width:min(980px,100%);height:min(560px,100%);background:var(--panel);border:1px solid var(--edge);border-top-color:var(--edge2);box-shadow:0 10px 40px rgba(0,0,0,.6)}
.ptabs{display:flex;align-items:stretch;border-bottom:1px solid var(--edge);flex:none}
.ptab{flex:1;min-height:44px;background:transparent;border:0;border-right:1px solid #1d2e30;font-size:15px;color:var(--muted);padding:0 6px;position:relative}
.ptab[aria-selected="true"]{color:var(--text);background:linear-gradient(#162629,transparent)}
.ptab[aria-selected="true"]::after{content:"";position:absolute;left:14%;right:14%;bottom:0;height:2px;background:var(--gold)}
.ptab .dot{display:inline-block;width:7px;height:7px;background:var(--good);margin-left:5px;vertical-align:middle}
.pclose{flex:none;width:52px;min-height:44px;background:transparent;border:0;font-size:24px;color:var(--muted)}
.pbody{position:relative;flex:1;overflow:auto;padding:12px 14px;-webkit-overflow-scrolling:touch}
.cols{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:14px;min-height:100%}
@media (max-width:620px){.cols{grid-template-columns:1fr}}
.h{margin:0 0 8px;font-size:13px;color:var(--muted);letter-spacing:.12em;font-weight:400}
.bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px}
.power{font-size:20px;color:var(--gold2);margin-right:auto}
.power small{font-size:12px;color:var(--muted);margin-right:6px}
.eqhero{position:relative;min-height:128px;margin-bottom:10px;padding:10px 12px;border:1px solid #213638;overflow:hidden;
  background:linear-gradient(90deg,var(--panel2) 34%,rgba(12,18,20,.5) 62%,rgba(12,18,20,0) 80%),url(img/yura_stand.webp) no-repeat right -4% top 4%/58% auto,radial-gradient(ellipse at 80% 40%,rgba(120,90,190,.28),rgba(0,0,0,0) 60%),var(--panel2)}
.eqhero .eqname{font-size:13px;color:var(--muted);letter-spacing:.08em}
.eqhero .eqname small{font-size:12px;margin-left:4px}
.eqhero .power{margin:2px 0 10px;font-size:26px}
.eqhero .bar{margin:0;max-width:62%}
.card{border:1px solid #213638;background:var(--panel2);padding:8px 10px;margin-bottom:8px}
.card .k{font-size:12px;color:var(--muted)}
.card .n{font-size:15px;margin:2px 0 4px}
.card ul{margin:0;padding:0;list-style:none;font-size:13px;line-height:1.55;color:#c9d6d2}
.card li.u{color:var(--r3)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:2px 12px;font-size:13px;color:#c9d6d2;font-variant-numeric:tabular-nums}
.stats b{font-weight:400;color:var(--text);float:right}
.list{display:flex;flex-direction:column;gap:4px}
.row{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:6px 10px;background:#0b1517;border:1px solid #1b2c2e;text-align:left;font-size:14px}
.row:hover{border-color:var(--edge2)}
.row .s{font-size:12px;color:var(--muted);flex:none;width:2.6em}
.row .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .up{color:var(--good);flex:none}
.row .eq{font-size:12px;color:var(--gold);flex:none}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.chip{min-height:36px;padding:4px 12px;background:#0b1517;border:1px solid #1b2c2e;font-size:13px;color:var(--muted)}
.chip[aria-pressed="true"]{border-color:var(--gold);color:var(--text)}
.r0{color:var(--r0)}.r1{color:var(--r1)}.r2{color:var(--r2)}.r3{color:var(--r3)}.r4{color:var(--r4)}.r5{color:var(--r5)}
.note{font-size:13px;color:var(--muted);line-height:1.6;margin:0 0 10px}
.empty{font-size:13px;color:var(--muted);padding:10px 0}

/* star chart */
.starwrap{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:14px;height:100%}
@media (max-width:620px){.starwrap{grid-template-columns:1fr}}
.starinfo{min-height:0;max-height:100%;overflow-y:auto;overscroll-behavior:contain;padding-right:2px}
.pbody.stpb{display:flex;flex-direction:column;overflow:hidden}.pbody.stpb .starwrap{flex:1;min-height:0;height:auto}.pbody.stpb .starbox{min-height:0}
.starbox{position:relative;min-width:0}
.starforce{position:absolute;top:16px;left:24px;z-index:3;margin:0;padding:6px 14px;border:1px solid #c89a3c;border-radius:8px;background:rgba(20,14,4,.9);color:#ffe2a0;font-size:14px;white-space:nowrap;pointer-events:none;animation:sfPulse 1.8s ease-in-out infinite}@keyframes sfPulse{50%{border-color:#ffe2a0}}
.staravail{display:flex;flex-direction:column;gap:4px;margin:6px 0 8px}.staravail .k{margin:0 0 2px;font-size:13px;color:#9fffc0}.sa{display:flex;gap:8px;align-items:flex-start;text-align:left;padding:6px 8px;border:1px solid #24413e;border-radius:8px;background:#0b1719;color:#dfeee9;font:inherit;cursor:pointer}.sa:hover,.sa:focus-visible{border-color:#9fffc0}.sa i,.starleg i{flex:none;display:inline-grid;place-items:center;width:20px;height:20px;border-radius:4px;border:1px solid var(--c);color:var(--c);font-style:normal;font-size:12px;font-weight:700;transform:rotate(0)}.sa span{display:flex;flex-direction:column;gap:1px;min-width:0}.sa b{font-weight:400;font-size:14px}.sa small{font-size:12px;color:#9fb8b4;line-height:1.35}.starleg{display:flex;flex-wrap:wrap;gap:4px 10px;margin:4px 0 6px;font-size:12px;color:#a9c2be}.starleg span{display:inline-flex;align-items:center;gap:4px}.starleg i{width:16px;height:16px;font-size:10px}
.starsvg{width:100%;height:100%;min-height:280px;max-height:460px;display:block;touch-action:none;background:radial-gradient(ellipse at 50% 45%,#0f2124 0%,#070d0f 75%);border-radius:10px;cursor:grab}
.starsvg .kin{animation:kinGlow 3.2s ease-in-out infinite}.starsvg .kin.pour{stroke-dasharray:1;stroke-dashoffset:1;animation:kinPour .9s ease-out forwards}@keyframes kinPour{to{stroke-dashoffset:0}}@keyframes kinGlow{50%{stroke-opacity:.72}}.starinfo .pts .drop{width:12px;height:16px;fill:#a8e6ff;vertical-align:-2px;margin-right:6px;filter:drop-shadow(0 0 3px rgba(140,210,255,.6))}@media (prefers-reduced-motion:reduce){.starsvg .kin,.starsvg .kin.pour{animation:none;stroke-dashoffset:0}}
.starzoom{position:absolute;right:6px;bottom:6px;display:flex;gap:4px}
.starzoom .btn{min-width:34px;padding:4px 0}
.starsvg .node{cursor:pointer}
.starinfo .pts{font-size:18px;color:var(--gold2);margin:0 0 10px}
.starinfo .strec{margin:-4px 0 10px;padding:6px 8px;border:1px solid #6b5520;border-radius:6px;background:rgba(255,216,106,.08);color:#ffe39a;font-size:13px}

/* sheet (item detail / confirm) */
#sheet{background:rgba(2,4,6,.6);z-index:20}
.sbox{width:min(460px,100%);max-height:100%;overflow:auto;background:var(--panel);border:1px solid var(--edge);border-top-color:var(--gold);padding:14px 16px}
.sbox h2{margin:0 0 4px;font-size:18px;font-weight:400}
.sbox .sub{margin:0 0 10px;font-size:13px;color:var(--muted)}
.sbox .cmp{margin:8px 0;font-size:14px}
.sbtns{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.up2{color:var(--good)}.down2{color:var(--bad)}

/* results */
#result{background:rgba(2,4,6,.62);z-index:15}
.rbox{width:min(520px,100%);text-align:center;background:var(--panel);border:1px solid var(--edge);border-top-color:var(--gold);padding:18px 20px}
.rbox h2{margin:0 0 4px;font-weight:400;font-size:24px;color:#fff6e0;text-shadow:0 0 12px rgba(255,200,120,.5)}
.rbox .sub{margin:0 0 12px;color:var(--muted);font-size:14px}
.rstats{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;text-align:left;font-size:14px;margin:0 auto 14px;max-width:360px}
.rstats b{font-weight:400;float:right;color:var(--gold2)}
.rbtns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.thanks{font-size:14px;line-height:1.7;color:#d8e8e4;margin:0 0 14px}

/* settings */
.set{display:flex;align-items:center;gap:12px;min-height:44px;font-size:14px;border-bottom:1px solid #16252a}
.set label{flex:1}
.set input[type=range]{width:min(220px,45%);accent-color:#c9a8ff;height:32px}
.stagelist{display:flex;flex-direction:column;gap:6px;margin:6px 0 12px}

/* toasts */
#toasts{word-break:keep-all;overflow-wrap:anywhere;position:fixed;left:50%;top:var(--toastY,calc(env(safe-area-inset-top,0px) + 44px));transform:translateX(-50%);z-index:9;display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none;width:min(62vw,560px)}
.toast{background:rgba(6,10,12,.86);border:1px solid #2a4446;padding:5px 12px;font-size:14px;animation:tin .25s ease-out;max-width:100%;text-align:center}
.toast.out{opacity:0;transition:opacity .4s}
.toast.ticon{display:flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border-color:#6b5a2a;font-size:15px}.toast.ticon .tico{flex:none;width:32px;height:32px;image-rendering:pixelated;border-radius:3px}
@keyframes tin{from{opacity:0;transform:translateY(-6px)}}

@media (max-height:480px){
  .sbox{padding:10px 14px}.sbox h2{font-size:16px}.card{padding:6px 9px;margin-bottom:6px}.card ul{font-size:12px;line-height:1.45}
  .sbtns .btn,.rbtns .btn{min-height:40px;padding:6px 12px;font-size:14px}.pbody{padding:8px 10px}.rbox{padding:12px 16px}.rbox h2{font-size:20px}
  .tkface{width:70px;height:80px;background-size:280px 160px;animation-name:rouIdleS}
  @keyframes rouIdleS{to{background-position-x:-280px}}
  .tk{min-height:78px;padding:8px 14px 10px}.tktext{font-size:15px;line-height:1.55}.logo{font-size:40px}.tver{margin:4px 0 12px}
  .tkskip{top:6px;right:8px;transform:none}
}

/* 灯りの回路: rows run top to bottom in time order. 足 = green light, 手 = gold light, 特殊 only on the ✦ rows */
.cz{--cond:#aef0ff;--move:#9fffc0;--skill:#c9a6ff;--lit:#ffd98a;--dim:#58716d;--r4:#ff7ad9}
.les{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;margin:0 0 8px;padding:8px 10px;border:1px solid #e0a93a;border-radius:6px;background:rgba(224,169,58,.1);font-size:13px;line-height:1.5}.les b{color:#ffd98a}.les span{flex:1 1 260px}
.ctop{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-bottom:4px}
.csay{flex:1 1 280px;margin:0;font-size:13px;color:var(--gold2);min-height:2.6em}
.ckpm{flex:0 0 auto;margin:0;font-size:12px;color:#bfe3d6}.ckpm span{margin-left:6px;color:#8aa8a2}.ckpm span.up{color:#9fffc0}.ckpm span.down{color:#ffb0a0}
.cbtns{display:flex;gap:6px;flex-wrap:wrap}
.cboard{position:relative;padding:2px 14px 6px 2px}
.cboard svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.cboard .rowb{position:relative;z-index:1;display:grid;grid-template-columns:var(--gt);gap:8px;align-items:center;margin-top:16px}
.cboard .rowb.head{margin-top:6px;font-size:10px;letter-spacing:.08em;color:var(--dim);align-items:end}
.cboard .rowb.head small{display:block;font-size:10px;color:var(--muted);letter-spacing:0}
.cboard .hc{color:var(--cond)}.cboard .hm{color:var(--move)}.cboard .hk{color:var(--lit)}.cboard .hx{color:var(--gold2)}
.cboard .rowb.pills{margin-top:4px;text-align:center}.cboard .rowb.pills.end{margin-top:12px}
.pill{position:relative;z-index:1;display:inline-block;padding:2px 14px;border:1px solid var(--gold);border-radius:14px;font-size:11px;color:var(--gold2);background:#141208}
.pill.m{border-color:var(--move);color:var(--move);background:#0c1a12}.pill.k{border-color:var(--lit);color:var(--lit)}.pill.k2{border-color:#ffb0dc;color:#ffb0dc}.hk.h2{color:#ffb0dc}
.pill.end{border-color:var(--edge2);color:var(--muted);background:#0b1417}
.cboard .no{text-align:right;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;position:relative}
.cboard .no.xp{color:var(--gold2)}.cboard .no.xp::before{content:"✦";position:absolute;right:0;top:-14px;font-size:10px;color:var(--gold2)}
.blk{position:relative;display:block;width:100%;min-height:46px;padding:4px 7px 5px;text-align:left;background:#0a1417;border:1px solid var(--edge);border-left:4px solid var(--edgec,var(--edge));font-size:12px;line-height:1.3;color:var(--text)}
.blk .k{display:block;font-size:10px;letter-spacing:.06em;color:var(--dim)}
.blk.skill .k{color:var(--lit)}.blk.move .k{color:var(--move)}.blk.cndb .k{color:var(--cond)}.blk.flow .k{color:var(--gold2)}
.blk .nm{display:block}.blk .dd{color:var(--lit);font-size:9px}
.blk .tt{display:block;font-size:10px;color:var(--muted);margin-top:1px}
.blk .uses{float:right;font-weight:400;font-size:10px;color:var(--muted);letter-spacing:0}
.blk.idle{outline:1px dashed #6b5f3a}.blk.idle .uses{color:#c9a86a}
.blk .stop{display:block;margin-top:2px;font-size:10px;color:var(--dim)}.blk .stop.on{color:var(--cond)}
.blk.empty{border-style:dashed;border-left-width:1px;color:var(--dim);opacity:.55}
.blk.cndb.empty{opacity:.5}
.blk.cndb.empty.need{opacity:1;border-color:#e0a93a;box-shadow:0 0 0 1px rgba(224,169,58,.35)}.blk .nc{display:block;font-size:.72em;color:#e0a93a;line-height:1.2;margin-top:2px}
.blk:hover{border-color:var(--gold)}
.tg{display:inline-flex;gap:2px;margin-left:5px;vertical-align:1px}.tg i{display:inline-block;width:5px;height:5px;border-radius:1px}
.cap3{display:flex;flex-wrap:wrap;gap:2px;margin-top:3px}
.cap3 i{font-style:normal;font-size:9px;line-height:12px;min-width:12px;height:12px;padding:0 3px;border:1px solid var(--edgec,var(--edge2));color:var(--text);background:#152624}
.cap3 i.own{background:var(--edgec,var(--edge2));width:12px;padding:0}
.cap3 i.room{border-style:dashed;border-color:var(--dim);background:none;width:12px;padding:0}
.pass{min-height:18px}
.sp{display:grid;gap:2px;position:relative;z-index:1}
.spb{display:block;width:100%;text-align:left;padding:3px 6px;font-size:10.5px;line-height:1.25;background:#141208;border:1px solid #6b5f3a;border-left:3px solid var(--edgec,#6b5f3a);color:var(--text)}
.spb .k{display:block;font-size:9px;color:var(--gold2);letter-spacing:.06em}
.spb.empty{color:var(--dim);border-style:dashed}
.cboard .rowb.locked{grid-template-columns:18px 1fr}
.cboard .lk{border:1px dashed var(--edge);color:var(--dim);font-size:11px;text-align:center;padding:8px}
.r0{--edgec:var(--r0)}.r1{--edgec:var(--r1)}.r2{--edgec:var(--r2)}.r3{--edgec:var(--r3)}.r4{--edgec:#ff7ad9}.r5{--edgec:var(--r5)}
.csent{margin:10px 0 0;padding:8px 10px;border:1px solid var(--edge);background:var(--panel2);font-size:13px;color:var(--gold2);line-height:1.6}
.csent .sm{color:#9fffc0}.csent .sk{color:#ffd98a}.csent .sx{color:var(--gold2)}
.crec{margin:8px 0 0;font-size:12px;color:var(--muted)}
.cinv{margin-top:10px;padding-top:8px;border-top:1px solid var(--edge)}
.cinv .ig{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px;align-items:center}
.cinv .gl{font-size:10px;letter-spacing:.08em;width:100%;color:var(--muted)}
.cinv .gl.move{color:#9fffc0}.cinv .gl.skill{color:#ffd98a}.cinv .gl.cond{color:#aef0ff}.cinv .gl.special,.cinv .gl.flow,.cinv .gl.chp{color:var(--gold2)}
.ic{display:inline-flex;gap:5px;align-items:center;padding:2px 6px;font-size:11px;background:var(--panel2);border:1px solid var(--edge);border-left:3px solid var(--edgec,var(--edge))}
.ic b{font-weight:400;color:#ffd98a;font-variant-numeric:tabular-nums}.ic small{font-size:10px;color:var(--gold2)}.ic small.sb{color:#c9a8ff;letter-spacing:.04em}
.cfoot{margin-top:10px}
.ch2{font-size:16px!important}
.plist{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr));gap:6px;margin:8px 0}
.pick{display:block;width:100%;text-align:left;background:var(--panel2);border:1px solid var(--edge);border-left:3px solid var(--edgec,var(--edge));padding:6px 8px;min-height:40px}
.pick .n{display:block;font-size:13px}.pick .n small{font-size:10px;color:var(--gold2)}
.pick .d{display:block;font-size:11px;color:var(--muted);line-height:1.4}
.pick.on{box-shadow:0 0 0 1px #ffd98a inset}
/* the first lesson: the cube the glowing slot names stands out, the rest step back (PCの試験l) */
.pick.want{box-shadow:0 0 0 2px #ffe08a inset,0 0 16px rgba(255,214,120,.45);animation:wantGlow 1.6s ease-in-out infinite}.pick.dimmed{opacity:.5}
@keyframes wantGlow{50%{box-shadow:0 0 0 2px #fff2c0 inset,0 0 24px rgba(255,224,140,.7)}}
@media (prefers-reduced-motion:reduce){.pick.want{animation:none}}
.pick[disabled]{cursor:default;opacity:.45;border-left-color:var(--edge)}
.pick:focus-visible,.blk:focus-visible,.spb:focus-visible{outline:2px solid var(--gold2);outline-offset:2px}
.tipc{color:var(--gold2)!important}
/* short phone screens: more rows in view; the timings live in the tap-open detail (PCの通しプレイ 844x390: 1〜2段しか見えない) */
@media (max-height:420px){.blk{min-height:34px;padding:3px 6px}.cboard .rowb{margin-top:8px}.blk .tt,.cboard .rowb.head small{display:none}.csay{min-height:0;font-size:12px}.ctop{margin-bottom:0}}
.sbox:has(.plist){width:min(640px,100%)}
/* pixel icons beside cube names on the board and in the picker */
.cic{width:16px;height:16px;image-rendering:pixelated;vertical-align:-3px;margin-right:3px;flex:none}
.pick .n .cic{width:20px;height:20px;vertical-align:-5px}
/* a controller moves the focus: show clearly where it is */
body.pad :focus{outline:2px solid #ffd98a;outline-offset:2px}
.svcode{width:100%;min-height:90px;box-sizing:border-box;font:11px/1.4 monospace;color:var(--text);background:#081012;border:1px solid var(--edge);padding:6px;word-break:break-all;resize:vertical}
/* ロウのひとこと: at the left, above her health, with his face, so it never sits over the fight in the middle (v0.9.3) */
#bubble{position:fixed;left:var(--bubX,calc(env(safe-area-inset-left,0px) + 12px));bottom:var(--bubY,calc(env(safe-area-inset-bottom,0px) + 30vh));z-index:8;max-width:min(62vw,330px);display:flex;gap:8px;align-items:center;
  padding:6px 12px 6px 6px;background:rgba(8,14,16,.8);border:1px solid #5a7a5e;border-left:3px solid #ffd98a;color:#e8f2ee;font-size:13px;line-height:1.5;pointer-events:none;border-radius:2px;font-size:12px}
#bubble::before{content:"";flex:none;width:49px;height:56px;margin:-8px 0 -6px;background:url(img/rou.png) 0 0/196px 112px no-repeat;image-rendering:pixelated;animation:rouIdleB 2.4s steps(4) infinite}
@keyframes rouIdleB{to{background-position:-196px 0}}
#bubble .bn{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}/* read aloud, the face shows who speaks */
#bubble.pop{animation:bubpop .25s ease-out}
@keyframes bubpop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.blk.hint{border-color:#ffd98a!important;color:#ffe9a8;animation:hintb 1.1s ease-in-out infinite}
@keyframes hintb{50%{box-shadow:0 0 0 3px rgba(255,217,138,.35)}}

/* big screens (1080p, 1440p): the menus grow with the game view instead of staying small in the middle */
.layer{zoom:var(--uiz,1);inset:auto;left:0;top:0;width:calc(var(--vw,100vw) / var(--uiz,1));height:calc(var(--vh,100vh) / var(--uiz,1))}
#toasts,#bubble{zoom:var(--uiz,1)}
#tip{position:fixed;z-index:9;transform:translate(-50%,-100%);max-width:240px;padding:5px 9px;background:rgba(8,14,16,.94);border:1px solid var(--edge);color:var(--text);font-size:12px;line-height:1.45;pointer-events:none;zoom:var(--uiz,1)}
#tip b{font-weight:400;color:#ffe9a8}#tip small{color:var(--muted)}

/* 持ち物 */
.igrid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:3px;margin-bottom:8px}
.icell{position:relative;aspect-ratio:1;max-width:100%;display:flex;align-items:center;justify-content:center;padding:0;background:#081113;border:1px solid #172628;font-size:13px}
button.icell{border-color:var(--edgec,#2c4446);box-shadow:inset 0 0 8px -3px var(--edgec,transparent);cursor:pointer}
button.icell span{color:var(--edgec,var(--text))}
.icell i{position:absolute;right:2px;top:0;font-style:normal;font-size:11px;color:var(--good)}
.mrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 8px;align-items:center;padding:6px 8px;margin-bottom:4px;background:#0b1517;border:1px solid #1b2c2e}
.mrow .mn{font-size:14px}.mrow b{font-weight:400;color:#ffd98a;font-variant-numeric:tabular-nums;font-size:15px}
.mrow>.btn{grid-column:1/-1;justify-self:end;margin-top:4px}
.mrow small{grid-column:1/-1;font-size:12px;color:var(--muted);line-height:1.45}
.mrow .btn{grid-column:1/-1;justify-self:start;margin-top:4px}
.mrow.none{opacity:.5}
.mrow .mi{width:28px;height:28px;image-rendering:pixelated;grid-row:span 2;align-self:center}
.mrow:has(.mi){grid-template-columns:28px minmax(0,1fr) auto}
.mrow:has(.mi) small{grid-column:2/-1}

/* dragging a block on the circuit board */
.blk:not(.empty),.ic.drag{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.ic.drag{cursor:grab}
.cboard.dragging .blk{opacity:.45}
.cboard.dragging .blk.dok{opacity:1;border-color:var(--gold);box-shadow:0 0 0 1px rgba(255,217,138,.35),0 0 10px -2px rgba(255,217,138,.6)}
.cboard.dragging .blk.dover{background:#2a2412;box-shadow:0 0 0 2px var(--gold),0 0 14px rgba(255,217,138,.7)}
.blk.dsrc{outline:1px dashed var(--gold)}
.dghost{position:fixed;z-index:20;zoom:var(--uiz,1);pointer-events:none;transform:translate(-50%,-60%) rotate(-2deg);min-width:110px;max-width:180px;padding:4px 7px 5px;font-size:12px;
  background:#0f1d20;color:var(--text);border:1px solid var(--gold);border-left:4px solid var(--edgec,var(--gold));box-shadow:0 6px 18px rgba(0,0,0,.6);opacity:.95}
.dghost .k{display:block;font-size:10px;color:var(--dim)}.dghost .uses,.dghost .tt,.dghost .stop{display:none}
.dghost.dout{border-color:var(--bad);opacity:.7}
a.btn{display:inline-flex;align-items:center;justify-content:center;color:var(--text);text-decoration:none;box-sizing:border-box}
#tip.side{transform:translate(0,-50%)}
.achlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px}
.ach{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid #1b2c2e;background:#0b1517;opacity:.62}
.achi{flex:none;width:40px;height:40px;image-rendering:pixelated;border-radius:4px;background-repeat:no-repeat}.acht{display:flex;flex-direction:column;gap:2px;min-width:0}.ach b{color:#9fb3b0;font-weight:600}.ach span{font-size:.86em;color:#8aa09c}.ach small{color:#6f8784}
.sbox.wide{width:min(920px,100%)}
.booklist{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:5px}
.bk{display:flex;flex-direction:column;gap:1px;padding:4px 7px;font-size:13px;border:1px solid #1b2c2e;background:#0b1517;opacity:.55}.bk b{color:#6f8784;font-weight:600}.bk span{font-size:.84em;color:#8aa09c}.bk .cic{width:16px;height:16px;vertical-align:-3px;margin-right:4px;image-rendering:pixelated}
.bk.got{opacity:1}.bk.got b{color:var(--rc,#dfe6f0)}.bk.r1{--rc:#7fb6ff}.bk.r2{--rc:#ffe36a}.bk.r3{--rc:#ff9a3c}.bk.r4{--rc:#ff7ad9}.bk.r5{--rc:#6cf5d6}.bk:not(.got).r4,.bk:not(.got).r5{border-color:#3a2a44}.bk:not(.got) span{color:var(--rc,#8aa09c);opacity:.75}
.ach.done{opacity:1;border-color:#6b5a2a;background:#161409}.ach.done b{color:#ffd98a}
.keylist{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:4px}
.krow{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:4px 8px;background:#0b1517;border:1px solid #1b2c2e;color:inherit;font:inherit;cursor:pointer;text-align:left}
.krow b{min-width:3.2em;text-align:center;padding:1px 6px;border:1px solid #3a5a5c;background:#122022;color:#ffd98a}
.krow:hover,.krow:focus-visible{border-color:#3a5a5c}.krow.on{border-color:#ffd98a}.krow.on b{background:#3a2f12}
.mym{width:1.1em;height:1.1em;vertical-align:-.18em;margin-right:3px;image-rendering:pixelated}
.icell{position:relative}.icell .mym{position:absolute;right:1px;bottom:1px;width:14px;height:14px;margin:0}
/* Simplified Chinese: a pixel face that has the simplified forms DotGothic16 lacks (subset of Fusion Pixel, OFL, see fonts/OFL.txt). Kanji only; Latin and digits stay DotGothic16 */
@font-face{font-family:'LuminaSC';src:url(fonts/lumina_pixel_sc.woff2) format('woff2');font-display:swap;unicode-range:U+3000-303F,U+4E00-9FFF,U+FF00-FFEF,U+2018-201D,U+2026,U+00B7,U+2014}
html:lang(zh-CN){--font:'LuminaSC','DotGothic16','PingFang SC','Microsoft YaHei','Noto Sans SC',sans-serif}
.lk{color:var(--muted,#8fa3ad);font-size:.8em;margin-left:.3em}
.icell .gic{width:72%;height:auto;image-rendering:pixelated;pointer-events:none}
.icell .lkd{position:absolute;left:3px;bottom:3px;width:5px;height:5px;background:var(--edgec,#9fb0bb);box-shadow:0 0 0 1px #081113}

/* chips: drag into the cube's squares */
.cxcard{background:var(--panel2);border:1px solid var(--edge);padding:10px 12px;display:grid;gap:8px;margin:6px 0 10px}
.cxnm{font-size:15px;color:var(--gold2)}
.cxsocks{display:flex;gap:8px;flex-wrap:wrap}
.cxsock{width:48px;height:48px;border:1px solid var(--edge2);background:#0a1113;display:grid;place-items:center;padding:0;border-radius:0;position:relative;transition:border-color .15s,box-shadow .15s}
.cxsock img{width:36px;height:36px;image-rendering:pixelated}
.cxsock.self{background:#dfe8e6;border-color:#dfe8e6}.cxsock.self img{filter:brightness(.25)}
.cxsock.empty::after{content:'';width:10px;height:10px;border:1px dashed #4a6c6a}
.cxsock.shut{border-style:dashed;border-color:#243638;background:transparent}
.cxsock.full{cursor:grab;touch-action:none;-webkit-touch-callout:none}
.cxsock.can{border-color:#8fe8c8;box-shadow:0 0 8px rgba(143,232,200,.35)}
.cxsock.hot{border-color:var(--gold2);box-shadow:0 0 0 2px rgba(255,233,168,.25),0 0 14px rgba(255,217,138,.45)}
.cxsock.pop{animation:cxpop .45s ease-out}
@keyframes cxpop{0%{box-shadow:0 0 0 0 rgba(255,233,168,.9),0 0 30px rgba(255,233,168,.9)}100%{box-shadow:0 0 0 12px rgba(255,233,168,0)}}
.cxsock:focus-visible,.cxchip:focus-visible{outline:2px solid var(--gold2);outline-offset:2px}
.cxtr{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.cxtray{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;padding:10px;border:1px solid var(--edge);background:var(--panel2);transition:border-color .15s,box-shadow .15s}
.cxtray.hot{border-color:var(--gold2);box-shadow:0 0 14px rgba(255,217,138,.3)}
.cxchip{display:flex;align-items:center;gap:6px;padding:4px;min-height:48px;background:transparent;border:1px solid transparent;cursor:grab;touch-action:none;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
.cxchip img{width:36px;height:36px;image-rendering:pixelated;filter:drop-shadow(0 0 5px rgba(255,190,90,.4))}
.cxchip span{font-size:15px;color:var(--gold);font-variant-numeric:tabular-nums}
.cxchip.zero{opacity:.35;cursor:default}.cxchip.zero img{filter:grayscale(1)}
.cxdesc{margin:8px 0 0;font-size:13px;line-height:1.6;color:var(--muted);min-height:2.6em}.cxdesc b{color:var(--gold2);font-weight:400}
.cxghost{position:fixed;z-index:60;pointer-events:none;width:40px;height:40px;image-rendering:pixelated;transform:translate(-50%,-50%) scale(1.15);filter:drop-shadow(0 0 10px rgba(255,217,138,.8))}

/* gear pictures on the gear tab */
.gcard{position:relative}.gcard .gpic{position:absolute;right:10px;top:10px;width:32px;height:32px;image-rendering:pixelated;filter:drop-shadow(0 0 4px rgba(255,217,138,.3))}
.gcard .gpic.off{opacity:.18;filter:grayscale(1)}
.row .rgi{width:24px;height:24px;flex:none;image-rendering:pixelated}
/* unique and mythic gear shimmer in the bag, so a big find still feels big after it's picked up */
button.icell.r4,button.icell.r5{overflow:hidden}
button.icell.r4::after,button.icell.r5::after{content:'';position:absolute;inset:-40%;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.22) 50%,transparent 58%);animation:icshine 3.2s ease-in-out infinite;pointer-events:none}
button.icell.r5::after{background:linear-gradient(115deg,transparent 40%,rgba(255,180,220,.25) 46%,rgba(170,220,255,.25) 54%,transparent 60%);animation-duration:2.4s}
@keyframes icshine{0%{transform:translateX(-60%)}55%,100%{transform:translateX(60%)}}
@media (prefers-reduced-motion:reduce){button.icell.r4::after,button.icell.r5::after{animation:none;opacity:0}}
.reclist{display:grid;gap:4px;margin-bottom:12px}
.rec{display:flex;justify-content:space-between;gap:12px;font-size:14px}.rec span{color:var(--muted)}.rec b{font-weight:400;font-variant-numeric:tabular-nums;text-align:right}

.rbest{display:flex;align-items:center;gap:12px;margin:10px auto 4px;padding:6px 16px;border:1px solid;border-radius:4px;width:max-content;max-width:100%;background:rgba(255,255,255,.03)}.rbest .rbi{width:40px;height:40px;image-rendering:pixelated;flex:none}.rbest span{display:flex;flex-direction:column;align-items:flex-start;line-height:1.35;min-width:0}.rbest small{opacity:.75;font-size:.85em}.rbest b{overflow-wrap:anywhere}

#caption{text-wrap:balance;position:fixed;left:50%;bottom:max(20%,140px);transform:translateX(-50%);z-index:6;margin:0;width:max-content;max-width:min(760px,64vw);padding:10px 22px;text-align:center;font-size:clamp(15px,calc(1.25vw + 6px),28px);line-height:1.6;color:#fff3d6;text-shadow:0 1px 3px #000,0 0 12px rgba(0,0,0,.9);background:radial-gradient(ellipse at center,rgba(4,6,12,.72),rgba(4,6,12,.35) 70%,rgba(4,6,12,0));pointer-events:none;opacity:0;transition:opacity .45s}#caption.on{opacity:1}
/* the skill bar in the bag: five slots for her own hands */
.barrow{display:flex;gap:6px;margin:6px 0 4px;flex-wrap:wrap}
.bslot{width:52px;height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:var(--panel2);border:1px solid var(--edge);border-bottom:3px solid var(--edgec,var(--edge));padding:4px 2px}
.bslot .cic{width:32px;height:32px;image-rendering:pixelated;margin:0}
.bslot i{display:block;width:32px;height:32px;border:1px dashed var(--edge);opacity:.6}
.bslot b{font-size:18px;color:var(--gold2)}
.bslot small{font-size:9px;color:var(--muted);white-space:nowrap}
.pick .n .cic{width:20px;height:20px;vertical-align:-5px;margin-right:4px}
/* the × of every small window, where the menu keeps its own */
.sbox{position:relative}
.sclose{position:absolute;top:2px;right:2px;width:40px;height:40px;background:transparent;border:0;font-size:22px;line-height:1;color:var(--muted);z-index:2}
.sclose:hover{color:var(--text)}.sclose:focus-visible{outline:2px solid var(--gold2);outline-offset:-2px}
.sbox h2{padding-right:34px}
.rred{color:#ff4a55!important;--edgec:#ff4a55!important}

/* outro23: the red cube at her chest beats once */
.tkpulse{position:absolute;width:180px;height:180px;margin:-90px 0 0 -90px;border-radius:50%;pointer-events:none;opacity:0;background:radial-gradient(circle,rgba(255,90,100,.95) 0 6%,rgba(255,60,80,.55) 14%,rgba(255,40,60,.18) 38%,transparent 68%);mix-blend-mode:screen}
.tkpulse.on{animation:tkPulse 1.6s ease-out .3s both}
@keyframes tkPulse{0%{opacity:0;transform:scale(.6)}18%{opacity:1;transform:scale(1.08)}32%{opacity:.55;transform:scale(.95)}44%{opacity:.9;transform:scale(1.02)}100%{opacity:0;transform:scale(1.25)}}
/* the red cube's quest in the menu */
.quest{border:1px solid rgba(255,90,100,.35);border-radius:8px;padding:8px 10px;margin:6px 0 12px;background:rgba(255,60,80,.06)}.quest p{margin:2px 0}.quest.ready{border-color:#ff4a55;box-shadow:0 0 12px rgba(255,74,85,.25)}.quest .btn{margin-top:6px}

/* the opening: before the memory, the tomb drifts by in the dark with the three lines of the prologue, and Yura comes into view (ぐらすさん: はじめからでいきなり始まる) */
#opening{z-index:12;display:block;padding:0;cursor:pointer}
#opening .opshade,#ending .opshade{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,rgba(4,3,10,.15),rgba(4,3,10,.62) 75%);pointer-events:none}
#opening .opfade,#ending .opfade{position:absolute;inset:0;background:#000;opacity:1;transition:opacity 2.2s ease;pointer-events:none}
#opening .opfade.clear,#ending .opfade.clear{opacity:0}
#opening .opfade.flash,#ending .opfade.flash{background:#e9dcff;transition:opacity .35s ease-out;opacity:.85}
#opening .optext,#ending .optext{position:absolute;left:42%;top:27%;transform:translate(-50%,-50%);margin:0;width:min(66%,32em);text-align:center;text-wrap:balance;word-break:auto-phrase;color:#f1e9ff;font-size:clamp(15px,calc(1.2vw + 7px),27px);line-height:2;letter-spacing:.06em;text-shadow:0 0 14px #000,0 0 5px #000,0 1px 2px #000;opacity:0;transition:opacity 1.1s ease;pointer-events:none}
#opening .optext.on,#ending .optext.on{opacity:1}
/* the last line comes with her standing picture: kept clear of it (PCの試験: 1280で行の端が髪にかかる) */
#opening .optext.low,#ending .optext.low{left:37%;width:min(56%,27em)}

#opening .opstand,#ending .opstand{position:absolute;right:max(5vw,env(safe-area-inset-right,0px));bottom:0;height:min(90%,860px);opacity:0;transform:translateX(24px);transition:opacity 1.8s ease,transform 2.4s ease;filter:drop-shadow(0 0 26px rgba(170,130,255,.4));pointer-events:none}
#opening .opstand.on,#ending .opstand.on{opacity:1;transform:none}
#opening .opskip,#ending .opskip{position:absolute;right:max(12px,env(safe-area-inset-right,0px));top:max(12px,env(safe-area-inset-top,0px));opacity:.75}
@media (max-aspect-ratio:1/1){#opening .opstand{height:62%;right:50%;transform:translateX(50%)}#opening .opstand.on{transform:translateX(50%)}#opening .optext,#opening .optext.low{left:50%;top:20%;width:88%}}
@media (max-aspect-ratio:1/1){#ending .opstand{height:62%;right:50%;transform:translateX(50%)}#ending .opstand.on{transform:translateX(50%)}#ending .optext,#ending .optext.low{left:50%;top:20%;width:88%}}
/* a chip lifted by a tap (phones): it glows until the second tap puts it in */
.cxchip.picked,.cxsock.picked{border-color:var(--gold2);box-shadow:0 0 10px rgba(255,210,120,.45)}
.cxtap{display:block;margin-top:4px;color:#8fe8c8;font-size:.92em}
/* とばす in the opening fills while held; let go and it empties */
#opening .opskip,#ending .opskip{overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#opening .opskip::after,#ending .opskip::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--gold2,#ffd98a);transform:scaleX(0);transform-origin:left;transition:transform .15s}
#opening .opskip.holding::after,#ending .opskip.holding::after{transform:scaleX(1);transition:transform 1.1s linear}
#opening,#ending{touch-action:none}
/* ---------- the rest room between the caves (town.js) ---------- */
#town{z-index:9;background:radial-gradient(ellipse at 50% 40%,#121019,#040306 75%);flex-direction:column;gap:6px;padding:max(6px,env(safe-area-inset-top,0px)) max(8px,env(safe-area-inset-right,0px)) max(6px,env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px))}
.twbox{position:relative;width:min(100%,960px);aspect-ratio:1672/941;flex:none;border-radius:6px;overflow:hidden;box-shadow:0 0 60px rgba(0,0,0,.8)}
.twbg{position:absolute;inset:0;width:100%;height:100%;display:block;animation:twIn .8s ease-out}
@keyframes twIn{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:none}}
.twfx{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen}
.twfire{position:absolute;width:24%;aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,176,90,.42),rgba(255,130,50,.14) 38%,rgba(255,120,40,0) 66%);animation:twFlick 2.3s ease-in-out infinite}
@keyframes twFlick{0%,100%{opacity:.78;transform:translate(-50%,-50%) scale(1)}23%{opacity:1;transform:translate(-50%,-51%) scale(1.05)}47%{opacity:.7}71%{opacity:.95;transform:translate(-50%,-50%) scale(1.03)}}
.twcube{position:absolute;width:5%;aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(var(--c),.5),rgba(var(--c),0) 65%);animation:twPulse 5.2s ease-in-out infinite}
.twlamp{position:absolute;width:3.2%;aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,196,110,.55),rgba(255,170,80,0) 65%);animation:twFlick 3.1s ease-in-out infinite}
@keyframes twPulse{0%,100%{opacity:.35}50%{opacity:.9}}
.twyura{position:absolute;left:30%;top:57.3%;width:6.7%;aspect-ratio:35/55;background:url(img/hero_idle.png) 0 0/800% 100%;image-rendering:pixelated;filter:drop-shadow(0 0 6px rgba(255,190,120,.35));animation:twIdle 1.1s steps(8) infinite;pointer-events:none}
@keyframes twIdle{to{background-position:114.2857% 0}}
.twyura::after{content:'';position:absolute;left:10%;right:10%;bottom:-3%;height:9%;border-radius:50%;background:rgba(0,0,0,.45);z-index:-1}
.twrou{position:absolute;left:25.5%;top:50%;width:4.6%;aspect-ratio:35/40;background:url(img/rou.png) 0 100%/400% 200%;image-rendering:pixelated;animation:twRou .7s steps(4) infinite,twBob 2.8s ease-in-out infinite;pointer-events:none}
@keyframes twRou{to{background-position:133.333% 100%}}
@keyframes twBob{50%{translate:0 -6%}}
.twmote{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.twhots{position:absolute;inset:0;pointer-events:none}.twhots .twhot{pointer-events:auto}
.twnpc{position:absolute;aspect-ratio:35/55;background:0 0/100% 100% no-repeat;image-rendering:pixelated;filter:drop-shadow(0 0 5px rgba(255,190,120,.3));pointer-events:none;transform-origin:50% 100%;animation:twBreath 3.4s ease-in-out infinite}
@keyframes twBreath{50%{transform:scaleY(1.025)}}
.twnpc::after{content:'';position:absolute;left:10%;right:10%;bottom:-3%;height:9%;border-radius:50%;background:rgba(0,0,0,.45);z-index:-1}
.twnpcs{position:absolute;inset:0;pointer-events:none}.twnpcs .twhot{pointer-events:auto}
.twhot{position:absolute;background:transparent;border:0;border-radius:12px;cursor:pointer;padding:0;transition:box-shadow .2s,background .2s}
.twhot:hover,.twhot:focus-visible{outline:none;background:rgba(255,210,150,.06);box-shadow:0 0 0 1px rgba(255,214,150,.5),0 0 26px rgba(255,190,110,.22) inset}
.twlab{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);white-space:nowrap;padding:2px 10px;line-height:1.25;background:rgba(10,8,14,.8);border:1px solid rgba(240,190,110,.45);color:#ffe9c2;border-radius:4px;font-size:clamp(11px,1.5vw,15px);opacity:.78;transition:opacity .2s}
.twlab.low{top:100%;left:32%}
.twhot:hover .twlab,.twhot:focus-visible .twlab{opacity:1;border-color:rgba(255,214,150,.9)}
.twfade{position:absolute;inset:0;background:#050307;opacity:0;pointer-events:none}
.twfade.on{animation:twRest 1.6s ease-in-out}
@keyframes twRest{0%{opacity:0}40%,55%{opacity:.85}100%{opacity:0}}
.twbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 12px;width:min(100%,960px)}

.twname{margin:0;color:#e9c98f;letter-spacing:.2em;font-size:15px}
.twbtns{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.twmsg{margin:0;color:#ffe2b8;font-size:14px;min-width:10em;opacity:0}
.twmsg.on{animation:twMsg 3.6s ease-out forwards}
@keyframes twMsg{0%{opacity:0}12%,75%{opacity:1}100%{opacity:0}}
.twgo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(8,8,12,.94);border:1px solid rgba(240,190,110,.45);border-radius:8px;padding:16px 18px;display:flex;flex-direction:column;gap:10px;align-items:center;min-width:min(90vw,300px);box-shadow:0 10px 40px rgba(0,0,0,.7)}
.twgo h2{margin:0;font-size:17px;color:#ffe9c2}
.twlist{display:flex;flex-direction:column;gap:6px;width:100%}
.twlist .btn{display:flex;justify-content:space-between;align-items:center;gap:12px}
.twlist small{opacity:.7;font-size:.8em}
.twgo{z-index:5}.twgo .sclose{top:4px;right:4px}.twgo h2{padding:0 30px}
/* a village with no picture yet (acts 3-12): its land's small picture, blurred and dark, and its people as named buttons */
.twland{display:none;position:absolute;inset:-4%;background:#0b1517 url(img/ui/lands.webp) no-repeat;background-size:400% 300%;filter:blur(3px) brightness(.42) saturate(.85);pointer-events:none}
.twbox.noimg{background:#0b1517}.twbox.noimg .twbg{display:none}.twbox.noimg .twland{display:block}
.twppl{position:absolute;right:5%;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:clamp(5px,1.2vw,10px);width:min(42%,300px);pointer-events:auto;z-index:1}
.twpbtn{min-height:clamp(36px,4.6vw,46px);padding:4px 14px;background:rgba(10,8,14,.78);border:1px solid rgba(240,190,110,.5);border-radius:5px;color:#ffe9c2;font-size:clamp(12px,1.5vw,16px);letter-spacing:.04em;text-align:left;cursor:pointer;transition:border-color .2s,background .2s}
.twpbtn::before{content:"";display:inline-block;width:.45em;height:.45em;margin:0 .6em .12em 0;border-radius:50%;background:#e9c98f;box-shadow:0 0 6px rgba(255,210,140,.7)}
.twpbtn:hover,.twpbtn:focus-visible{outline:none;background:rgba(40,30,20,.85);border-color:rgba(255,214,150,.95)}
@media (prefers-reduced-motion:reduce){.twfire,.twcube,.twbg,.twrou,.twlamp,.twnpc{animation:none}}

/* the ending: the same stage as the opening, then the names rolling up over the great tree, and おわり */
#ending{z-index:12;display:block;padding:0;cursor:pointer;touch-action:none}
#ending .enroll{position:absolute;left:38%;top:0;bottom:0;width:min(60%,30em);transform:translateX(-50%);overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent)}
#ending .enroll .in{position:absolute;left:0;right:0;top:100%;text-align:center;color:#f1e9ff;text-shadow:0 0 12px #000,0 1px 2px #000;will-change:transform}
#ending .enroll h3{margin:0 0 .2em;font-size:clamp(12px,calc(.7vw + 7px),16px);font-weight:400;letter-spacing:.2em;color:var(--gold2,#ffd98a);opacity:.9}
#ending .enroll p{margin:0 0 2.6em;font-size:clamp(15px,calc(1.1vw + 8px),26px);letter-spacing:.08em;line-height:1.7}
#ending .enroll .logo{margin:0 0 3.2em;font-size:clamp(26px,calc(2.6vw + 10px),58px)}
#ending .enend{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);margin:0;color:#fff4dc;font-size:clamp(22px,calc(2vw + 10px),44px);letter-spacing:.5em;text-indent:.5em;text-shadow:0 0 18px rgba(255,210,140,.7),0 0 4px #000;opacity:0;transition:opacity 2.4s ease;pointer-events:none}
#ending .enend.on{opacity:1}
/* the ending's last beats: the world turns white (Tio only hears), then the dark where the gate town's morning will be painted; the teacher's remembered voice is faint */
#ending .enveil{position:absolute;inset:0;background:#f1eff6;opacity:0;transition:opacity 3.2s ease,background-color 3.2s ease;pointer-events:none}
#ending.white .enveil{opacity:.96}#ending.dawn .enveil{opacity:1;background:#07060c}
#ending.white:not(.pic) .optext{color:#433a5c;text-shadow:0 0 14px #fff,0 0 4px #fff}
#ending .optext.faint.on{opacity:.55;letter-spacing:.12em}
body.ending #toasts,body.ending #hud,body.ending .hud{visibility:hidden}
@media (max-aspect-ratio:1/1){#ending .enroll{left:50%;width:88%}}

/* 思い出の旅: each land as a small picture of itself (img/ui/lands.webp, 4x3), its name and how deep she has gone over it */
.mjlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;margin:10px 0 4px}
.mjcard{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;aspect-ratio:16/9;max-width:100%;padding:8px 10px;border:1px solid #2a3a3c;border-radius:6px;background:#0b1517 url(img/ui/lands.webp) no-repeat;background-size:400% 300%;text-align:left;overflow:hidden;cursor:pointer;color:#f4ecd8}
.mjcard::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,6,10,0) 35%,rgba(4,6,10,.82));pointer-events:none}
.mjcard>*{position:relative}
.mjcard .mjt{font-size:17px;line-height:1.25;text-shadow:0 1px 2px #000}.mjcard .mjt small{display:block;font-size:11px;color:#cdb57a;letter-spacing:.08em}
.mjcard .mjd{font-size:12px;color:#c8d4d0}.mjcard .mjgo{position:absolute;right:8px;bottom:8px;font-size:12px;color:#ffd98a;text-shadow:0 1px 2px #000}
.mjcard:hover,.mjcard:focus-visible{border-color:#cdb57a;box-shadow:0 0 0 1px #cdb57a inset}

/* the stage list by act: the land's picture beside its three caves */
.actgrp{display:grid;grid-template-columns:132px 1fr;gap:8px;align-items:stretch}
.acth{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:74px;padding:6px 8px;border-radius:5px;border:1px solid #1b2c2e;background:#0b1517 url(img/ui/lands.webp) no-repeat;background-size:400% 300%;font-size:14px;line-height:1.2;color:#f4ecd8;text-shadow:0 1px 2px #000,0 0 6px #000;overflow:hidden}
.acth small{display:block;font-size:11px;color:#cdb57a}
.acth::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,6,10,0) 30%,rgba(4,6,10,.75));pointer-events:none}.acth>*{position:relative}
.acth.off{filter:grayscale(1) brightness(.45)}
.actst{display:flex;flex-direction:column;gap:4px}.actst .row{min-height:30px}
@media (max-width:520px){.actgrp{grid-template-columns:1fr}.acth{min-height:64px}}

/* the road map: medallions from the cradle (bottom) up to the Great Tree (top) */
.jmap{position:relative;container-type:size;width:100%;max-width:680px;margin:8px auto 4px;border:1px solid #22343a;border-radius:8px;background:radial-gradient(ellipse at 50% 0%,rgba(120,200,150,.22),transparent 55%),radial-gradient(ellipse at 50% 100%,rgba(90,70,150,.25),transparent 60%),linear-gradient(180deg,#0e2226,#0a1418 55%,#0b0d18);overflow:hidden}
.jmap svg{position:absolute;inset:0;width:100%;height:100%}
.jmap path{fill:none;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.jall{stroke:rgba(205,181,122,.28);stroke-width:3;stroke-dasharray:2 7;stroke-linecap:round}
.jwalk{stroke:#e8c46a;stroke-width:3;filter:drop-shadow(0 0 4px rgba(255,210,120,.7))}
.jnode{--s:min(74px,17vw,calc(100cqh / var(--R,3) * .5));position:absolute;transform:translate(-50%,calc(var(--s) / -2 - 2px));display:flex;flex-direction:column;align-items:center;gap:3px;width:24%;padding:0;background:none;border:0;color:#f4ecd8;cursor:pointer}
.jnode[disabled]{cursor:default}
.jimg{display:block;width:var(--s);aspect-ratio:1;border-radius:50%;background:#0b1517 url(img/ui/lands.webp) no-repeat;background-size:711.1% 300%;border:2px solid #3a4c50;box-shadow:0 2px 8px rgba(0,0,0,.6)}
.jnode.done .jimg{border-color:#cdb57a}
.jnode.cur .jimg{border-color:#ffe39a;box-shadow:0 0 0 3px rgba(255,220,140,.25),0 0 18px rgba(255,210,120,.55);animation:jpulse 2.4s ease-in-out infinite}
.jnode.off .jimg{filter:grayscale(1) brightness(.16) blur(1px);border-style:dashed}
.jnode.last{--s:min(94px,21vw,calc(100cqh / var(--R,3) * .62))}
.jt{margin-top:9px;font-size:13px;line-height:1.2;white-space:nowrap;text-align:center;text-shadow:0 1px 2px #000;padding:1px 6px;border-radius:4px;background:rgba(8,14,18,.72)}.jt small{display:block;font-size:10px;color:#cdb57a;letter-spacing:.08em}
.jnode.off .jt{color:#6d7a7c}
.jn{position:absolute;top:calc(var(--s) - 11px);left:50%;transform:translateX(-50%);font-size:11px;line-height:1;color:#ffd98a;padding:2px 6px;border-radius:8px;background:rgba(8,14,18,.86);border:1px solid rgba(205,181,122,.5);white-space:nowrap}
.jnode:not([disabled]):hover .jimg,.jnode:focus-visible .jimg{border-color:#fff2c4}.jnode:focus{outline:none}.jnode:focus-visible .jimg{outline:2px solid #fff2c4;outline-offset:3px}
.h:has(.hbtn){display:flex;align-items:center;justify-content:space-between;gap:8px}.h .hbtn{letter-spacing:0}
@keyframes jpulse{50%{box-shadow:0 0 0 5px rgba(255,220,140,.12),0 0 26px rgba(255,210,120,.7)}}
@media (prefers-reduced-motion:reduce){.jnode.cur .jimg{animation:none}}

/* the act-end result: the next land, as a picture */
.nextland{position:relative;display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:32/9;max-width:100%;margin:8px 0 10px;padding:8px 12px;border:1px solid #cdb57a;border-radius:6px;background:#0b1517 url(img/ui/lands.webp) no-repeat;background-size:400% 300%;overflow:hidden;text-align:left}
.nextland::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,6,10,.85),rgba(4,6,10,.15) 70%)}
.nextland>*{position:relative}.nextland small{font-size:11px;color:#cdb57a;letter-spacing:.1em}.nextland b{font-weight:400;font-size:19px;color:#fff4d8;text-shadow:0 1px 3px #000}

/* the ending's pictures: over the white and the dark, the words move down onto a soft band */
#ending .enpic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 2.4s ease;pointer-events:none}
#ending .enpic.on{opacity:1}
#ending.roll .enpic.on{opacity:.42}
#ending.pic .opshade{background:linear-gradient(180deg,rgba(4,3,10,0) 55%,rgba(4,3,10,.6))}
#ending.pic .optext{top:auto;bottom:7%;left:50%;transform:translate(-50%,0);padding:.5em 1.1em;border-radius:6px;background:rgba(6,5,12,.58);text-shadow:0 1px 3px #000,0 0 14px rgba(0,0,0,.8)}
#ending.pic.roll .enveil{opacity:1;background:#07060c}

/* her light coming undone like dandelion fluff, drifting down the roots toward the sea */
#ending .enfluff{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 2s ease}
#ending.fluff .enfluff{opacity:1}
#ending .enfluff i{position:absolute;width:var(--s);height:var(--s);border-radius:50%;background:#fff6dc;box-shadow:0 0 6px 2px rgba(255,236,190,.75);opacity:0;animation:fluff linear infinite}
@keyframes fluff{0%{opacity:0;transform:translate(0,0)}15%{opacity:.95}80%{opacity:.7}100%{opacity:0;transform:translate(var(--dx),var(--dy))}}
@media (prefers-reduced-motion:reduce){#ending .enfluff i{animation-duration:20s!important}}

/* a village shown on its land's painted far view: sharp, only dimmed so the names and buttons read */
.twbox.noimg.far .twland{inset:0;background-size:cover;filter:brightness(.66) saturate(.95)}

/* 回路の試し場: its meter and the way out, top middle */
.prac{position:fixed;top:calc(env(safe-area-inset-top,0px) + 8px);left:50%;transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:10px;padding:6px 8px 6px 14px;border:1px solid #3a5a5e;border-radius:8px;background:rgba(6,12,16,.84);color:#e8f4f0;font-size:14px;white-space:nowrap;box-shadow:0 2px 10px rgba(0,0,0,.5)}
.prac b{color:#9fe8d8;font-weight:normal;letter-spacing:.06em}.prac .pv{color:#ffe0a0;font-variant-numeric:tabular-nums}
@media (max-width:640px){.prac{font-size:12px;gap:6px}.prac b{display:none}}
/* while a talk plays over the village, its name tags step back: they sat under her standing picture and looked pressable (PCの試験 v0.9.35) */
body:has(#talk:not([hidden])) #town .twlab{opacity:0;transition:opacity .2s}
/* a phone on its side: the village's name and its buttons stay on one row, so the row does not drop off the bottom (a long name wrapped the bar to two rows) */
@media (max-height:480px){.twbar,.twbtns{flex-wrap:nowrap}.twbar{gap:4px 8px}.twname{font-size:11px;letter-spacing:.04em;flex:0 1 auto;min-width:0;max-width:24%;line-height:1.25;text-align:right}.twbtns .btn{min-height:34px;padding:4px 10px;font-size:13px}}
/* Rou's hints wait while the opening or the ending plays */
body:has(#ending:not([hidden])) #bubble,body:has(#opening:not([hidden])) #bubble{visibility:hidden}
#toasts{transition:opacity .25s}#toasts.hush{opacity:0}
/* the book's residents and wardens: the creature's own picture above its name */
.bkm{align-items:center;text-align:center}.bkm b{text-wrap:balance}.bkm span{word-break:keep-all;overflow-wrap:anywhere;text-wrap:balance}.bkpic{width:84px;height:66px;image-rendering:pixelated;margin-bottom:2px}.booklist:has(.bkm){grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}
/* a short screen (a phone on its side): the next land is a slim strip, and the box scrolls rather than lose its heading and buttons (PCの試験 v0.9.44: 3-3 のクリア画面で見出しとボタンが画面の外) */
#result .rbox{max-height:calc(100dvh - 12px);overflow-y:auto;overscroll-behavior:contain}
@media (max-height:480px){.rstats{grid-template-columns:repeat(4,auto);gap:2px 14px;max-width:none;margin:0 auto 8px;font-size:13px;width:max-content}.rstats b{float:none;margin-left:6px}.rbest{margin:6px auto 8px;padding:3px 12px}.rbest .rbi{width:32px;height:32px}.rbtns{gap:6px 8px}.nextland{aspect-ratio:auto;height:46px;flex-direction:row;align-items:center;gap:10px;margin:4px 0 6px;padding:4px 12px;background-size:400% 300%}.nextland b{font-size:16px}.rbox .sub{margin:0 0 6px}}
/* an item's window on a phone on its side: the two cards side by side, and its buttons stay in view at the bottom (PCの試験 v0.9.44: 「身につける」が画面の下の外) */
.sbox .sbtns.stick{position:sticky;bottom:-14px;margin:10px -16px -14px;padding:8px 16px 12px;background:var(--panel);border-top:1px solid var(--edge);z-index:2}
@media (max-height:480px){.sbox .sbtns.stick{bottom:-10px;margin:8px -14px -10px;padding:6px 14px 8px}
  .sbox.isheet{width:min(760px,100%)}.isheet .icmp{display:grid;grid-template-columns:1fr 1fr;gap:0 10px;align-items:start}.isheet .icmp .cmp{grid-column:1/-1;grid-row:1;margin:2px 0 6px}.isheet .icmp .card{margin-bottom:0}}

/* the stage list: a small gold tick for a cleared stage, so the name has room for itself (two lines at most) (PCの試験: 「ルミナの…」と切れる) */
.row.srow .nm{white-space:normal;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:auto-phrase}.row.srow .ck{flex:none;color:#e4cd90;font-weight:700;padding-left:4px}

/* the village on a phone (PCの試験 1・2): the picture's own colours, blurred, fill the dark bands at its sides; the name tags and the buttons are big enough for a finger */
#town{overflow:hidden;isolation:isolate}#town::before{content:'';position:absolute;inset:-40px;background:var(--twbg,none) center/cover no-repeat;filter:blur(26px) brightness(.32) saturate(1.1);z-index:-1;pointer-events:none}
.twperson .twlab.low{left:50%;top:100%}
/* a person's name stands just over their head, not on it (PCの試験 0952: 小さな人が札に隠れる) */.twperson .twlab:not(.low){transform:translate(-50%,calc(-100% - 6px))}
@media (pointer:coarse),(max-height:480px){.twlab{font-size:clamp(13px,1.8vw,16px);padding:4px 10px;opacity:.9}.twbtns .btn{min-height:42px;padding-inline:16px}}
/* the circuit on a phone on its side: the start pills and the gaps shrink, so more rows show at once (PCの試験: 3段しか見えない) */
@media (max-height:420px){.cboard .rowb{margin-top:6px}.cboard .rowb.head{margin-top:0}.cboard .rowb.pills{margin-top:2px}.cboard .pill{padding:0 10px;font-size:10px;line-height:1.5}.cboard .rowb.pills.end{margin-top:6px}}

/* the next land is far above her level */
#rbody .note.lvgap{color:#ffc978}
/* names and tags over every tap box, and a person over the places: a name pressed talks, never rests (PCの試験 0955: 島守の札が「休む」の下) */
.twhot .twlab{z-index:3}.twhot.twperson{z-index:2}
/* 回路の型: three kept boards under the buttons */
.csets{display:flex;gap:6px 10px;flex-wrap:wrap;align-items:center;margin-top:6px}
.csets .csk{font-size:.8em;color:var(--muted);letter-spacing:.04em}
.cset{display:inline-flex;gap:2px}
.cset .csv{opacity:.8}
.cset .csv.empty{border-style:dashed;opacity:.7}
.cset .csv.arm{opacity:1;border-color:#ffb86a;color:#ffd9a8}