:root{
  --tb:max(0px,calc(100% - 100svh)); /* iOS 26 の下のツールバーの分 */
  --paper:#eceee9; --paper2:#d9ddd6; --halo:#f5f6f3; --ink:#1e232c; --ink2:#5a616d; --hot:#c4252d; --cool:#2b5db0; --lid:#a9afb4;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px); --sal:env(safe-area-inset-left,0px); --sar:env(safe-area-inset-right,0px);
  --disp:'Kaisei Opti','Hiragino Mincho ProN','Yu Mincho','YuMincho',serif;
  --body:'Zen Kaku Gothic New','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;color:var(--ink);font-family:var(--body);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;touch-action:none;-webkit-text-size-adjust:100%}
body{background:#e6e9e4 radial-gradient(130% 90% at 50% 38%,#f7f8f5 0%,#eceee9 55%,#d8dcd6 100%)}
canvas#c{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}
button{font-family:inherit;color:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#vig{position:fixed;inset:0;pointer-events:none;z-index:2;display:none;background:radial-gradient(120% 95% at 50% 45%,rgba(196,37,45,0) 58%,rgba(176,30,40,.36) 100%)}
body.danger #vig{display:block;animation:vig 1.1s ease-in-out infinite}
@keyframes vig{0%,100%{opacity:.55}50%{opacity:1}}
body.over #vig{display:none}

/* labels drawn over 3D */
#labels{position:fixed;inset:0;pointer-events:none;z-index:3}
.pv{position:absolute;left:0;top:0;transform:translate(-300px,-300px);font-weight:900;font-size:14px;line-height:1.35;color:var(--ink);white-space:normal;text-align:center;width:max-content;max-width:calc(100vw - 16px);padding:4px 9px 5px;background:rgba(246,247,244,.95);border-radius:3px;box-shadow:0 1px 0 rgba(30,36,46,.08),0 3px 10px rgba(30,36,46,.2)}
.pv:empty{display:none}
.pv span{white-space:nowrap}
.pv .u{color:var(--cool)} .pv .c{color:var(--hot)} .pv .m{margin-right:2px}
.pv img{width:17px;height:17px;vertical-align:-3px;margin-right:1px}
.pop small img{width:15px;height:15px;vertical-align:-2px}
/* the tag that rides on a lid coming down: how many deals until it closes */
#closeTag{position:absolute;left:0;top:0;transform:translate(-300px,-300px);font-weight:900;font-size:12.5px;line-height:1;white-space:nowrap;color:var(--ink);text-shadow:0 0 3px var(--halo),0 0 7px var(--halo),0 0 10px var(--halo)}
#closeTag b{font-family:var(--disp);font-weight:700;font-size:17px;margin:0 2px;vertical-align:-1px}
#closeTag.hot{color:var(--hot)}

#fx{position:fixed;inset:0;pointer-events:none;z-index:4;overflow:hidden}
.pop{position:absolute;left:0;top:0;font-family:var(--disp);font-weight:700;font-size:32px;color:var(--c,#fff);text-shadow:3.20px 0.00px 0 #1e232c,3.12px 0.71px 0 #1e232c,2.88px 1.39px 0 #1e232c,2.50px 2.00px 0 #1e232c,2.00px 2.50px 0 #1e232c,1.39px 2.88px 0 #1e232c,0.71px 3.12px 0 #1e232c,0.00px 3.20px 0 #1e232c,-0.71px 3.12px 0 #1e232c,-1.39px 2.88px 0 #1e232c,-2.00px 2.50px 0 #1e232c,-2.50px 2.00px 0 #1e232c,-2.88px 1.39px 0 #1e232c,-3.12px 0.71px 0 #1e232c,-3.20px 0.00px 0 #1e232c,-3.12px -0.71px 0 #1e232c,-2.88px -1.39px 0 #1e232c,-2.50px -2.00px 0 #1e232c,-2.00px -2.50px 0 #1e232c,-1.39px -2.88px 0 #1e232c,-0.71px -3.12px 0 #1e232c,-0.00px -3.20px 0 #1e232c,0.71px -3.12px 0 #1e232c,1.39px -2.88px 0 #1e232c,2.00px -2.50px 0 #1e232c,2.50px -2.00px 0 #1e232c,2.88px -1.39px 0 #1e232c,3.12px -0.71px 0 #1e232c,0 3px 8px rgba(20,24,34,.45);white-space:nowrap;animation:pop 1s cubic-bezier(.2,.9,.3,1) forwards}
.pop small{display:block;font-family:var(--body);font-weight:900;font-size:14px;text-shadow:2.40px 0.00px 0 #f5f6f3,2.32px 0.62px 0 #f5f6f3,2.08px 1.20px 0 #f5f6f3,1.70px 1.70px 0 #f5f6f3,1.20px 2.08px 0 #f5f6f3,0.62px 2.32px 0 #f5f6f3,0.00px 2.40px 0 #f5f6f3,-0.62px 2.32px 0 #f5f6f3,-1.20px 2.08px 0 #f5f6f3,-1.70px 1.70px 0 #f5f6f3,-2.08px 1.20px 0 #f5f6f3,-2.32px 0.62px 0 #f5f6f3,-2.40px 0.00px 0 #f5f6f3,-2.32px -0.62px 0 #f5f6f3,-2.08px -1.20px 0 #f5f6f3,-1.70px -1.70px 0 #f5f6f3,-1.20px -2.08px 0 #f5f6f3,-0.62px -2.32px 0 #f5f6f3,-0.00px -2.40px 0 #f5f6f3,0.62px -2.32px 0 #f5f6f3,1.20px -2.08px 0 #f5f6f3,1.70px -1.70px 0 #f5f6f3,2.08px -1.20px 0 #f5f6f3,2.32px -0.62px 0 #f5f6f3;color:var(--ink);text-align:center;margin-top:2px}
.pop small.u{color:var(--cool)} .pop small.c{color:var(--hot)}
@keyframes pop{0%{opacity:0;transform:var(--p) translate(-50%,-30%) scale(.5)}15%{opacity:1;transform:var(--p) translate(-50%,-80%) scale(1.15)}70%{opacity:1;transform:var(--p) translate(-50%,-120%) scale(1)}100%{opacity:0;transform:var(--p) translate(-50%,-160%) scale(.95)}}
.banner{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);font-family:var(--disp);font-weight:700;font-size:clamp(34px,9.6vw,64px);line-height:1.15;white-space:nowrap;animation:ban 1.3s cubic-bezier(.2,.9,.3,1) forwards}
.banner::before{content:attr(data-t);position:absolute;left:0;top:0;color:#fff;text-shadow:5.00px 0.00px 0 #fff,4.94px 0.78px 0 #fff,4.76px 1.55px 0 #fff,4.46px 2.27px 0 #fff,4.05px 2.94px 0 #fff,3.54px 3.54px 0 #fff,2.94px 4.05px 0 #fff,2.27px 4.46px 0 #fff,1.55px 4.76px 0 #fff,0.78px 4.94px 0 #fff,0.00px 5.00px 0 #fff,-0.78px 4.94px 0 #fff,-1.55px 4.76px 0 #fff,-2.27px 4.46px 0 #fff,-2.94px 4.05px 0 #fff,-3.54px 3.54px 0 #fff,-4.05px 2.94px 0 #fff,-4.46px 2.27px 0 #fff,-4.76px 1.55px 0 #fff,-4.94px 0.78px 0 #fff,-5.00px 0.00px 0 #fff,-4.94px -0.78px 0 #fff,-4.76px -1.55px 0 #fff,-4.46px -2.27px 0 #fff,-4.05px -2.94px 0 #fff,-3.54px -3.54px 0 #fff,-2.94px -4.05px 0 #fff,-2.27px -4.46px 0 #fff,-1.55px -4.76px 0 #fff,-0.78px -4.94px 0 #fff,-0.00px -5.00px 0 #fff,0.78px -4.94px 0 #fff,1.55px -4.76px 0 #fff,2.27px -4.46px 0 #fff,2.94px -4.05px 0 #fff,3.54px -3.54px 0 #fff,4.05px -2.94px 0 #fff,4.46px -2.27px 0 #fff,4.76px -1.55px 0 #fff,4.94px -0.78px 0 #fff,0 6px 18px rgba(20,24,34,.4)}
.banner b{position:relative;display:block;font-weight:700;color:transparent;background:linear-gradient(100deg,#d3212d 4%,#f0821d 22%,#e6a50c 40%,#2f9a54 58%,#2a63c4 76%,#8a4fc7 96%);-webkit-background-clip:text;background-clip:text}
.banner small{position:relative;display:block;text-align:center;font-family:var(--body);font-weight:900;font-size:17px;color:var(--ink2);text-shadow:2.60px 0.00px 0 #f5f6f3,2.51px 0.67px 0 #f5f6f3,2.25px 1.30px 0 #f5f6f3,1.84px 1.84px 0 #f5f6f3,1.30px 2.25px 0 #f5f6f3,0.67px 2.51px 0 #f5f6f3,0.00px 2.60px 0 #f5f6f3,-0.67px 2.51px 0 #f5f6f3,-1.30px 2.25px 0 #f5f6f3,-1.84px 1.84px 0 #f5f6f3,-2.25px 1.30px 0 #f5f6f3,-2.51px 0.67px 0 #f5f6f3,-2.60px 0.00px 0 #f5f6f3,-2.51px -0.67px 0 #f5f6f3,-2.25px -1.30px 0 #f5f6f3,-1.84px -1.84px 0 #f5f6f3,-1.30px -2.25px 0 #f5f6f3,-0.67px -2.51px 0 #f5f6f3,-0.00px -2.60px 0 #f5f6f3,0.67px -2.51px 0 #f5f6f3,1.30px -2.25px 0 #f5f6f3,1.84px -1.84px 0 #f5f6f3,2.25px -1.30px 0 #f5f6f3,2.51px -0.67px 0 #f5f6f3}
.orb{position:absolute;left:-7px;top:-7px;width:14px;height:14px;background:var(--c);clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%);filter:brightness(1.25)}
@keyframes ban{0%{opacity:0;transform:translate(-50%,-50%) scale(1.6) rotate(-4deg)}12%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-4deg)}80%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-4deg)}100%{opacity:0;transform:translate(-50%,-62%) scale(.96) rotate(-4deg)}}

/* HUD */
#hud{position:fixed;left:0;right:0;top:0;z-index:6;display:flex;align-items:flex-start;gap:14px;padding:calc(var(--sat) + 10px) calc(var(--sar) + 10px) 0 calc(var(--sal) + 16px);pointer-events:none;opacity:0;transform:translateY(-8px);transition:opacity .35s,transform .35s}
body.playing #hud{opacity:1;transform:none}
#hud .sc{display:flex;flex-direction:column;line-height:1;min-width:84px}
#score{font-family:var(--disp);font-weight:700;font-size:33px;letter-spacing:.01em;transform-origin:0 60%;text-shadow:0 0 6px var(--halo),0 0 14px var(--halo)}
#best,#alt{font-size:11.5px;font-weight:700;color:var(--ink2);margin-top:5px;white-space:nowrap;text-shadow:0 0 4px var(--halo),0 0 9px var(--halo)}
#alt{margin-top:3px;letter-spacing:.02em}
#hud .mid{display:flex;flex-direction:column;gap:5px;padding-top:3px;line-height:1}
#room{font-size:12px;font-weight:700;color:var(--ink2);text-shadow:0 0 4px var(--halo),0 0 9px var(--halo)}
#room b{font-family:var(--disp);font-weight:700;font-size:20px;color:var(--ink);margin-left:3px}
body.warn #room b{color:#b8661c}
body.danger #room b{color:var(--hot);animation:beat .55s ease-in-out infinite alternate}
@keyframes beat{to{transform:scale(1.18)}}
#room b{display:inline-block}
#prog{font-size:11.5px;font-weight:700;color:var(--ink2);display:flex;align-items:center;gap:5px;text-shadow:0 0 4px var(--halo),0 0 9px var(--halo)}
#prog,#kilnL{white-space:nowrap}
#kilnL{font-size:11.5px;font-weight:700;color:var(--ink2);display:flex;align-items:center;gap:5px;text-shadow:0 0 4px var(--halo),0 0 9px var(--halo)}
#kilnL:empty,#prog:empty{display:none}
#kilnL i{width:13px;height:9px;flex:none;background:var(--lid);clip-path:polygon(22% 0,78% 0,100% 50%,78% 100%,22% 100%,0 50%);box-shadow:inset 0 -2px 0 rgba(30,35,44,.35)}
#kilnL em{font-style:normal;color:var(--hot);font-weight:900}
#kilnL.hot em{animation:beat .5s ease-in-out infinite alternate;display:inline-block}
#hud .btns{margin-left:auto;display:flex;gap:2px;pointer-events:auto}
.ib{width:44px;height:44px;border:0;background:none;padding:0;display:grid;place-items:center;position:relative;cursor:pointer;color:var(--ink)}
.ib::before{content:'';position:absolute;inset:4px 2px;clip-path:polygon(25% 2%,75% 2%,100% 50%,75% 98%,25% 98%,0 50%);background:rgba(250,251,249,.8);transition:background .2s}
.ib:hover::before{background:#fff}
.ib:focus-visible{outline:2px solid var(--cool);outline-offset:-2px}
.ib svg{position:relative;width:24px;height:24px}
.ib:active{transform:translateY(1px)}
#cap{position:fixed;left:50%;z-index:6;top:calc(var(--sat) + 84px);transform:translate(-50%,-6px);max-width:calc(100% - 28px);text-align:center;font-weight:900;font-size:15px;line-height:1.5;color:var(--ink);opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;text-shadow:0 0 6px var(--halo),0 0 12px var(--halo);white-space:normal;width:max-content}
#cap.on{opacity:1;transform:translate(-50%,0)}
#cap span{-webkit-box-decoration-break:clone;box-decoration-break:clone;background:linear-gradient(transparent 62%,rgba(242,184,41,.42) 62%,rgba(242,184,41,.42) 94%,transparent 94%);padding:0 3px}
#cap img{width:19px;height:19px;vertical-align:-4px;margin:0 2px}
#cap br+span{font-size:14px}
#hand{position:fixed;left:0;top:0;width:54px;height:54px;margin:-27px 0 0 -27px;z-index:7;pointer-events:none;opacity:0;transition:opacity .25s}
#hand.on{opacity:1}
#hand svg{width:100%;height:100%}

/* screens */
.screen{position:fixed;inset:0;z-index:10;display:none}
.screen.on{display:block}
#title .tt{position:absolute;top:calc(var(--sat) + 14px);left:calc(var(--sal) + 18px);right:calc(var(--sar) + 62px);animation:rise .8s cubic-bezier(.2,.9,.3,1) both}
#title h1{margin:calc(min(84%,400px) * -.053) 0 0 calc(min(84%,400px) * -.032);line-height:0;width:min(84%,400px)}
#logoCv{display:block;width:100%;aspect-ratio:749/171;touch-action:manipulation;cursor:pointer}
#title .sub{display:flex;align-items:baseline;column-gap:12px;row-gap:2px;margin:-2px 0 0 2px;flex-wrap:wrap;text-shadow:0 0 5px var(--halo),0 0 12px var(--halo)}
#title .en{font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:.06em;color:var(--ink)}
#title .tag{font-family:var(--disp);font-size:15px;font-weight:500;color:var(--ink);letter-spacing:.06em}
#title .foot{position:absolute;left:0;right:0;bottom:var(--tb);padding:70px calc(var(--sar) + 16px) calc(var(--sab) + 10px) calc(var(--sal) + 16px);background:linear-gradient(to top,rgba(234,236,231,.97) 0%,rgba(234,236,231,.9) 55%,rgba(234,236,231,0) 100%);animation:rise .8s .1s cubic-bezier(.2,.9,.3,1) both}
#title .lead{margin:0 0 14px 4px;font-size:15.5px;font-weight:700;line-height:1.65}
#title .lead b{font-family:var(--disp);font-weight:700;color:var(--ink);font-size:20px;margin:0 2px;vertical-align:-1px}
#title .lead em{font-style:normal;font-weight:900;padding:0 1px}
#title .lead em.r{color:#c4252d} #title .lead em.b{color:#2b5db0} #title .lead em.p{color:#7a4bb6}
.modes{display:flex;gap:8px}
.hexbtn{flex:1;border:0;min-height:84px;padding:8px 20px;clip-path:polygon(10% 0,90% 0,100% 50%,90% 100%,10% 100%,0 50%);background:var(--ink);color:#f5f6f3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;transition:transform .12s,filter .2s}
.hexbtn:hover{filter:brightness(1.18)}
.hexbtn:active{transform:translateY(2px) scale(.98)}
.hexbtn:focus-visible{outline:3px solid #f2b829;outline-offset:-6px}
.hexbtn .t{font-size:19px;font-weight:900;letter-spacing:.08em;line-height:1.1}
.hexbtn .s{font-size:12px;font-weight:700;opacity:.86;line-height:1.1}
.hexbtn.alt{background:var(--cool)}
.hexbtn:disabled{cursor:default;transform:none;filter:none}
#goDaily.prep{background:linear-gradient(90deg,var(--cool) var(--pp,0%),#8794ab var(--pp,0%))}
#goDaily.prep .t{opacity:.72}
.txt{border:0;background:none;font-weight:900;font-size:15px;padding:12px 10px;cursor:pointer;color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;text-decoration-color:rgba(30,35,44,.28)}
.txt:hover{text-decoration-color:var(--cool)}
.txt:focus-visible{outline:2px solid var(--cool)}
#tSound{position:absolute;top:calc(var(--sat) + 12px);right:calc(var(--sar) + 10px)}
#credit{margin:10px 0 0;text-align:center;font-size:11.5px;font-weight:700;color:var(--ink2);line-height:1.8}
#credit a{color:inherit;text-underline-offset:3px;padding:6px 0}
#credit .cg{display:inline-block;white-space:nowrap;margin:0 4px}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

#pause{background:rgba(234,236,231,.86);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
#pause .in{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:26px}
#pause h2{margin:0;display:flex;flex-direction:column;align-items:center;font-family:var(--disp);font-weight:700;font-size:44px;line-height:1}
#pause h2 i{font-style:normal;display:block;height:1.06em}
#pause .col{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:180px}
#pause .hexbtn{flex:none;width:190px;min-height:66px;margin-bottom:6px}

#over .top{position:absolute;left:0;right:0;top:0;padding:calc(var(--sat) + 22px) calc(var(--sar) + 18px) 34px calc(var(--sal) + 20px);background:linear-gradient(to bottom,rgba(234,236,231,.97) 0%,rgba(234,236,231,.88) 62%,rgba(234,236,231,0) 100%);animation:drop .5s cubic-bezier(.2,.9,.3,1) both}
#ovKick{display:inline-block;font-weight:900;font-size:13px;letter-spacing:.3em;color:#f7f8f5;background:var(--hot);padding:5px 8px 5px 11px;transform:rotate(-3deg)}
#ovKick.done{background:var(--cool)}
#ovReason{margin:10px 0 4px;font-family:var(--disp);font-weight:700;font-size:clamp(22px,6.2vw,30px);line-height:1.3}
#ovDetail{margin:0;font-size:14px;font-weight:700;color:var(--ink2)}
#over .sheet{position:absolute;left:0;right:0;bottom:var(--tb);padding:28px calc(var(--sar) + 18px) calc(var(--sab) + 16px) calc(var(--sal) + 20px);background:#f6f7f4;box-shadow:0 -10px 30px rgba(30,40,55,.13);animation:rise .5s .15s cubic-bezier(.2,.9,.3,1) both;-webkit-mask:linear-gradient(#000,#000) 0 14px/100% 100% no-repeat,radial-gradient(circle at 9px 14px,#000 9px,transparent 9.5px) 0 0/18px 15px repeat-x;mask:linear-gradient(#000,#000) 0 14px/100% 100% no-repeat,radial-gradient(circle at 9px 14px,#000 9px,transparent 9.5px) 0 0/18px 15px repeat-x}
#over .big{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
#over .big span{font-size:13px;font-weight:900;color:var(--ink2);letter-spacing:.2em}
#ovScore{font-family:var(--disp);font-weight:700;font-size:clamp(46px,13vw,64px);line-height:1}
#ovNew{font-style:normal;font-weight:900;font-size:13px;color:var(--hot);border:2px solid var(--hot);padding:3px 6px;transform:rotate(-6deg);display:none}
#ovNew.on{display:inline-block;animation:stamp .45s .55s cubic-bezier(.2,1.6,.4,1) both}
@keyframes stamp{from{opacity:0;transform:rotate(-6deg) scale(2.2)}to{opacity:1;transform:rotate(-6deg) scale(1)}}
#ovStats{margin:12px 0 16px;font-size:14px;font-weight:700;color:var(--ink2);line-height:1.7}
#ovStats b{color:var(--ink);font-weight:900;font-size:16px;margin:0 2px}
#ovStats span{display:inline-block;white-space:nowrap;margin-right:14px}
.tiers{margin:10px 0 0;display:flex;flex-wrap:wrap;gap:4px 16px}
.tiers span{display:inline-flex;align-items:center;gap:7px;font-weight:900;font-size:13.5px;color:var(--ink2);white-space:nowrap}
.tiers i{width:11px;height:11px;transform:rotate(45deg);border:2px solid currentColor;display:inline-block}
.tiers .on{color:var(--cool)} .tiers .on i{background:currentColor}
#over .acts{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
#over .acts .hexbtn{flex:none;min-width:170px;min-height:64px}
#ovShare{display:none;width:100%;margin-top:10px;font:700 13px/1.5 var(--body);padding:8px;border:2px solid var(--paper2);background:#fbfbfa;color:var(--ink);resize:none;-webkit-user-select:text;user-select:text}
#ovShare.on{display:block}
@keyframes drop{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@media (min-aspect-ratio:11/10){
  #title .foot{left:auto;width:min(520px,46vw);background:none;padding-bottom:calc(var(--sab) + 16px)}
  #title .tt{left:auto;right:calc(var(--sar) + 84px);top:calc(var(--sat) + 44px);width:min(520px,46vw)}
  #over .sheet{left:auto;width:min(480px,46vw);right:calc(var(--sar) + 24px);bottom:24px;border-radius:0 0 8px 8px}
  #over .top{left:auto;right:calc(var(--sar) + 24px);width:min(480px,46vw);background:none;padding:0;top:auto;bottom:calc(24px + var(--sheetH,260px) + 18px)}
  #cap{top:calc(var(--sat) + 80px)}
  #over .top{padding:16px 20px 14px;background:rgba(246,247,244,.94);border-radius:8px;box-shadow:0 6px 24px rgba(20,28,45,.18)}
}
@media (prefers-reduced-motion:reduce){#title .tt,#title .foot,#over .top,#over .sheet{animation:none}}
/* the premise, once at the start of a run, where it does not cover the board ( a new layer shows in the scenery itself ) */
#stage{position:fixed;left:0;top:0;z-index:5;pointer-events:none;text-align:center;opacity:0;white-space:nowrap;transform:translate(var(--sx,-999px),var(--sy,-999px)) translate(-50%,-50%);color:var(--ink);text-shadow:0 0 8px var(--halo),0 0 16px var(--halo)}
#stage.left{text-align:left;transform:translate(var(--sx,-999px),var(--sy,-999px)) translate(0,-50%)}
#stage b{display:block;font-family:var(--disp);font-weight:700;font-size:27px;letter-spacing:.14em;line-height:1.2}
#stage span{display:block;font-size:12px;font-weight:700;letter-spacing:.24em;color:var(--ink2);margin-top:4px}
#stage i{display:block;font-family:var(--disp);font-style:normal;font-weight:500;font-size:14px;letter-spacing:.06em;margin-top:8px}
#stage.on{animation:stagein 3s ease both}
#stage.on b{animation:stageb 1s cubic-bezier(.2,.9,.3,1) both}
@keyframes stagein{0%{opacity:0}12%{opacity:1}80%{opacity:1}100%{opacity:0}}
@keyframes stageb{from{letter-spacing:.5em}to{letter-spacing:.14em}}
/* over a dark sky ( sunset, stars ) the HUD and the captions turn light */
body.dark #score,body.dark #room b{color:#f1f3f8;text-shadow:0 0 6px rgba(10,14,32,.8),0 0 14px rgba(10,14,32,.6)}
body.dark #best,body.dark #alt,body.dark #room,body.dark #prog,body.dark #kilnL{color:#c9d2e4;text-shadow:0 0 4px rgba(10,14,32,.85),0 0 9px rgba(10,14,32,.6)}
body.dark #cap,body.dark #closeTag,body.dark #stage{color:#f2f4fa;text-shadow:0 0 6px rgba(10,14,32,.92),0 0 14px rgba(10,14,32,.8)}
body.dark #cap span{background:linear-gradient(transparent 62%,rgba(242,184,41,.34) 62%,rgba(242,184,41,.34) 94%,transparent 94%)}
body.dark #stage span{color:#c6cee2}
.hold #vig,.hold #room b,.hold #kilnL.hot em{animation:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* 読みこみとはじめの画面。紙の上で赤・黄・青の水彩がゆっくり重なり、重なった所が橙・緑・紫になる */
#gate{z-index:30;display:none;bottom:var(--tb);overflow:hidden;background:#f4f2ec;transition:opacity .55s;touch-action:manipulation}
#gate.on{display:block}
#gate.out{opacity:0;pointer-events:none}
.gbg{position:absolute;inset:-20%;pointer-events:none}
.gbg i{position:absolute;width:54vmax;height:54vmax;border-radius:50%;mix-blend-mode:multiply;opacity:.34;animation:gdrift 18s ease-in-out infinite alternate}
.gbg .b1{left:4%;top:10%;background:radial-gradient(closest-side,#e2414a 0%,rgba(226,65,74,.55) 45%,rgba(226,65,74,0) 100%)}
.gbg .b2{right:2%;top:30%;background:radial-gradient(closest-side,#f6c33a 0%,rgba(246,195,58,.55) 45%,rgba(246,195,58,0) 100%);animation-duration:22s;animation-delay:-6s}
.gbg .b3{left:14%;bottom:6%;background:radial-gradient(closest-side,#3a74d6 0%,rgba(58,116,214,.55) 45%,rgba(58,116,214,0) 100%);animation-duration:20s;animation-delay:-11s}
@keyframes gdrift{from{transform:translate(0,0) scale(1)}to{transform:translate(6vmax,-4vmax) scale(1.12)}}
#gate::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.55;mix-blend-mode:multiply;background:radial-gradient(130% 100% at 50% 45%,rgba(255,255,255,0) 55%,rgba(60,52,40,.16) 100%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .4 0 0 0 0 .33 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
#gate .gi{position:absolute;left:50%;top:50%;z-index:1;width:min(100% - 44px,560px);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;text-align:center}
#gate .glogo{width:min(80%,420px);height:auto;overflow:visible;filter:drop-shadow(0 5px 10px rgba(28,34,48,.2))}
.glogo .gw{fill:#fff;stroke:#fff;stroke-width:20;stroke-linejoin:round}
.glogo .gc{fill:var(--c)}
.glogo .gl{transform-box:fill-box;transform-origin:50% 100%;animation:gdrop .62s var(--d) cubic-bezier(.25,1.45,.45,1) both}
.glogo .mx .gc{animation:gink 1s calc(var(--d) + .38s) ease both}
@keyframes gdrop{0%{opacity:0;transform:translateY(-34%) scaleY(1.1)}55%{opacity:1}78%{transform:translateY(0) scaleY(.86) scaleX(1.08)}100%{opacity:1;transform:none}}
@keyframes gink{0%,15%{fill:#e6dfcf}100%{fill:var(--c)}}
#gate .gtag{margin:14px 0 0;font-family:var(--disp);font-weight:700;font-size:clamp(15px,4.2vw,19px);letter-spacing:.14em;color:var(--ink);animation:gfade 1s 1.15s ease both}
#gate .gtag span{display:inline-block}
@keyframes gfade{from{opacity:0;letter-spacing:.4em}to{opacity:1}}
#gate .gact{position:relative;margin-top:clamp(34px,7vh,64px);width:min(76%,280px);height:132px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
#gate #gStart{flex:none;width:100%;min-height:76px;display:none}
#gate #gSound{display:none;margin-top:8px;border:0;background:none;cursor:pointer;font-size:14px;font-weight:700;color:var(--ink2);min-height:44px;padding:0 16px}
#gate #gSound b{font-weight:900;color:var(--ink);margin-left:3px}
#gate #gSound[aria-pressed=false] b{color:var(--ink2)}
#gate #gSound:focus-visible{outline:2px solid var(--cool)}
#gate.ready #gStart{display:flex;animation:rise .5s cubic-bezier(.2,.9,.3,1) both}
#gate.ready #gSound{display:block;animation:rise .5s .06s cubic-bezier(.2,.9,.3,1) both}
#gate.ready .gload,#gate.ready .gstate{display:none}
#gNote{position:relative;z-index:1;margin:0;min-height:1.6em;font-size:13px;font-weight:700;color:var(--ink2)}
#gate .gfoot{position:absolute;left:0;right:0;bottom:calc(var(--sab) + 18px);z-index:1;margin:0;text-align:center;font-size:11px;font-weight:700;letter-spacing:.42em;color:var(--ink2);opacity:.7}
/* 読みこみ：六角のチップが1枚ずつ積まれて、5枚でぱちんと消える */
.gload{position:relative;width:46px;height:76px}
.gload i{position:absolute;left:0;width:46px;height:14px;clip-path:polygon(18% 0,82% 0,100% 50%,82% 100%,18% 100%,0 50%);opacity:0;animation:gstack 2.6s cubic-bezier(.3,1.3,.5,1) infinite;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.gload i:nth-child(1){bottom:0;background:#d3212d;animation-delay:0s}
.gload i:nth-child(2){bottom:13px;background:#f2b61f;animation-delay:.22s}
.gload i:nth-child(3){bottom:26px;background:#2a63c4;animation-delay:.44s}
.gload i:nth-child(4){bottom:39px;background:#33a35a;animation-delay:.66s}
.gload i:nth-child(5){bottom:52px;background:#8a4fc7;animation-delay:.88s}
@keyframes gstack{0%{opacity:0;transform:translateY(-26px)}9%{opacity:1;transform:translateY(0)}62%{opacity:1;transform:none}72%{opacity:0;transform:scale(1.5,1.9)}100%{opacity:0}}
#gate .gstate{margin:12px 0 0;font-size:10.5px;font-weight:700;letter-spacing:.5em;padding-left:.5em;color:var(--ink2)}
@media (min-aspect-ratio:11/10){#gate .gi{width:min(100% - 80px,600px)}}
@media (prefers-reduced-motion:reduce){.gbg i,.gload i,.glogo .gl,.glogo .mx .gc,#gate .gtag{animation:none}.gload i{opacity:1}}