/* Layout: ステッカー風カード（太い黒フチ＋ずらし影）をドット柄の地に並べる。1画面ずつ切り替わるゲームショー形式 */
:root{
  --bg:#121010; --dots:#1d1915; --card:#1f1b17; --soft:#2a2520;
  --ink:#ece3cf; --muted:#a3967f; --line:#5b5142;
  --red:#c4392c; --yellow:#d9a03a; --teal:#4e8a78; --blue:#4f7698; --pink:#8f5766;
  --good:#7cb86a; --bad:#e0503f; --on:#120f0c;
  --f-disp:"DotGothic16","Osaka-Mono","MS Gothic",monospace;
  --f-body:"M PLUS 1p","Hiragino Sans","Yu Gothic",sans-serif;
  color-scheme:dark;
}
html,body{min-height:100%}
body{background:radial-gradient(var(--dots) 2px,transparent 2.5px) 0 0/24px 24px,var(--bg);color:var(--ink);font-family:var(--f-body);font-weight:500;font-size:15px;line-height:1.6}
.app{max-width:1020px;margin:0 auto;padding-block:14px 48px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:18px}
header.top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.logo{font-family:var(--f-disp);font-size:clamp(1.25rem,4vw,1.8rem);line-height:1.1;letter-spacing:.02em;display:flex;align-items:center;gap:10px}
.logo .bub{display:inline-grid;place-items:center;width:44px;height:44px;border:3px solid var(--line);border-radius:14px;background:var(--red);color:var(--on);transform:rotate(-8deg);box-shadow:3px 3px 0 var(--line);font-size:1.4rem}
.logo .w2{color:var(--red)}
.hright{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:6px;border:3px solid var(--line);border-radius:999px;padding:4px 12px;background:var(--card);font-weight:800;font-size:.85rem}
.dot{width:10px;height:10px;border-radius:50%;background:var(--muted)}
.dot.on{background:var(--good)}
.card{background:var(--card);border:3px solid var(--line);border-radius:22px;box-shadow:6px 6px 0 var(--line);padding:20px;min-width:0}
h2{font-family:var(--f-disp);font-weight:400;font-size:1.3rem;margin:0 0 12px;text-wrap:balance;line-height:1.3}
h3{font-size:.8rem;letter-spacing:.12em;color:var(--muted);margin:14px 0 8px;font-weight:800}
p{margin:0}
.muted{color:var(--muted)}
.btn{font-family:var(--f-body);font-weight:800;font-size:1rem;border:3px solid var(--line);border-radius:14px;padding:11px 18px;background:var(--yellow);color:var(--on);box-shadow:0 4px 0 var(--line);cursor:pointer;transition:transform .06s,box-shadow .06s;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}
.btn:focus-visible,.opt:focus-visible,.chip:focus-visible,input:focus-visible{outline:3px dashed var(--blue);outline-offset:3px}
.btn.red{background:var(--red)} .btn.teal{background:var(--teal)} .btn.blue{background:var(--blue)} .btn.pink{background:var(--pink)}
.btn.ghost{background:var(--card);color:var(--ink)}
.btn.big{font-family:var(--f-body);font-size:1.2rem;padding:14px 22px;border-radius:18px}
.btn.sm{font-size:.85rem;padding:6px 12px;border-radius:10px;box-shadow:0 3px 0 var(--line)}
.btn:disabled{opacity:.45;cursor:not-allowed}
input.tx{font-family:var(--f-body);font-weight:800;font-size:1.1rem;border:3px solid var(--line);border-radius:14px;padding:10px 14px;background:var(--soft);color:var(--ink);width:100%;min-width:0}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.grow{flex:1 1 160px;min-width:0}

/* home */
.home{display:grid;grid-template-columns:1.25fr 1fr;gap:20px;align-items:start}
.maker{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}
.stagechar{display:grid;place-items:center;gap:8px;background:var(--soft);border:3px solid var(--line);border-radius:20px;padding:14px;width:170px}
.stagechar .nm{font-weight:800;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bob{animation:bob 1.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-6px)}}
.opts{display:flex;flex-wrap:wrap;gap:6px}
.opt{width:52px;height:52px;border:3px solid transparent;border-radius:14px;background:var(--soft);padding:2px;cursor:pointer;display:grid;place-items:center;color:var(--ink);font-family:var(--f-body);font-weight:800;font-size:.7rem}
.opt[aria-pressed="true"]{border-color:var(--line);background:var(--yellow);color:var(--on)}
.sw{width:38px;height:38px;border-radius:50%;border:3px solid var(--line);cursor:pointer;padding:0}
.sw[aria-pressed="true"]{outline:4px solid var(--blue);outline-offset:2px}
.play{display:flex;flex-direction:column;gap:14px}
.or{display:flex;align-items:center;gap:10px;color:var(--muted);font-weight:800;font-size:.8rem}
.or::before,.or::after{content:"";flex:1;border-top:2px dashed var(--muted);opacity:.5}
.note{font-size:.85rem;color:var(--muted)}
.err{color:var(--bad);font-weight:800;font-size:.9rem}
.gamegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.gtile{display:flex;gap:10px;align-items:center;border:3px solid var(--line);border-radius:16px;padding:8px 10px;background:var(--soft);color:var(--ink);font-family:var(--f-body);text-align:left;cursor:pointer;box-shadow:0 3px 0 var(--line);transition:transform .06s}
.gtile:hover{background:var(--card)}
.gtile:active{transform:translateY(3px);box-shadow:none}
.gtile:focus-visible{outline:3px dashed var(--blue);outline-offset:3px}
.gico{flex:none;width:38px;height:38px;border:3px solid var(--line);border-radius:12px;display:grid;place-items:center;font-family:var(--f-disp);font-size:1.05rem;color:var(--on)}
.gtile b{font-size:.9rem;line-height:1.25;display:block}
.gtile small{color:var(--muted);font-size:.72rem}

/* lobby */
.lobby{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.code{font-family:var(--f-disp);font-size:2.6rem;letter-spacing:.18em;line-height:1;padding:10px 16px;border:3px dashed var(--line);border-radius:16px;background:var(--soft);display:inline-block}
.players{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.pl{display:grid;justify-items:center;gap:2px;border:3px solid var(--line);border-radius:16px;padding:10px 6px;background:var(--soft);text-align:center;min-width:0;position:relative}
.pl .nm{font-weight:800;font-size:.9rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tag{position:absolute;top:-10px;left:50%;transform:translateX(-50%);font-size:.68rem;font-weight:800;border:2px solid var(--line);border-radius:999px;padding:0 8px;background:var(--yellow);color:var(--on);white-space:nowrap}
.tag.me{background:var(--teal)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;border:3px solid var(--line);border-radius:999px;padding:5px 12px 5px 6px;background:var(--card);color:var(--ink);font-family:var(--f-body);font-weight:800;font-size:.85rem;cursor:pointer}
.chip .gico{width:26px;height:26px;border-width:2px;border-radius:8px;font-size:.75rem}
.chip[aria-pressed="false"]{opacity:.45;border-style:dashed}
.chip.plain{padding:5px 14px}
.chip.plain[aria-pressed="true"]{background:var(--yellow);color:var(--on)}

/* game */
.gbar{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center}
.round{font-family:var(--f-disp);font-size:.95rem;border:3px solid var(--line);border-radius:12px;padding:4px 10px;background:var(--card);white-space:nowrap;font-variant-numeric:tabular-nums}
.gname{font-family:var(--f-disp);font-size:clamp(1.1rem,3.6vw,1.5rem);line-height:1.2;min-width:0}
.secs{font-family:var(--f-disp);font-size:1.5rem;font-variant-numeric:tabular-nums;min-width:3ch;text-align:right}
.tbar{height:16px;border:3px solid var(--line);border-radius:999px;overflow:hidden;background:var(--soft)}
.tbar>i{display:block;height:100%;width:100%;background:var(--teal);transition:width .1s linear}
.tbar.low>i{background:var(--red)}
.stage{min-height:380px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;position:relative}
.big{font-family:var(--f-disp);font-size:clamp(2.2rem,9vw,4.2rem);line-height:1.1}
.mid{font-family:var(--f-disp);font-size:clamp(1.3rem,5vw,2rem);line-height:1.25;text-wrap:balance}
.strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.sp{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;align-items:center;border:3px solid var(--line);border-radius:14px;padding:6px 10px;background:var(--card);min-width:0}
.sp .nm{font-weight:800;font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp svg{grid-row:span 2}
.pbar{height:9px;border:2px solid var(--line);border-radius:99px;overflow:hidden;background:var(--soft)}
.pbar>i{display:block;height:100%;background:var(--blue)}
.sp.done .pbar>i{background:var(--good)}
.overlay{position:absolute;inset:0;display:grid;place-items:center;background:color-mix(in srgb,var(--card) 88%,transparent);border-radius:18px;z-index:3}
.overlay .in{display:grid;gap:8px;justify-items:center}

.cmd-seq{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:640px}
.key{width:50px;height:58px;border:3px solid var(--line);border-radius:12px;background:var(--soft);display:grid;place-items:center;align-content:center;font-family:var(--f-disp);font-size:1.45rem;line-height:1;transition:transform .1s}
.key small{font-family:var(--f-body);font-size:.65rem;font-weight:800;color:var(--muted)}
.key.now{background:var(--yellow);color:var(--on);transform:translateY(-5px) scale(1.08)}
.key.now small{color:var(--on)}
.key.ok{background:var(--teal);color:var(--on);opacity:.5}
.onekey{width:150px;height:150px;border:4px solid var(--line);border-radius:28px;background:var(--yellow);color:var(--on);display:grid;place-items:center;align-content:center;font-family:var(--f-disp);font-size:5rem;line-height:1;box-shadow:0 7px 0 var(--line)}
.onekey small{font-family:var(--f-body);font-size:1rem;font-weight:800}
.onekey.in{animation:pop .18s ease-out}
.onekey.ng{background:var(--bad);color:#fff}
.onekey.clear{background:var(--teal);font-size:1.8rem}
.dots12{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.dots12 i{width:14px;height:14px;border-radius:50%;border:2px solid var(--line);background:var(--soft)}
.dots12 i.on{background:var(--teal)}
.cv{width:min(560px,100%);height:auto;aspect-ratio:4/3;max-width:100%;background:#fff;border:3px solid var(--line);border-radius:16px;touch-action:none;cursor:crosshair;display:block}
.pen{width:36px;height:36px;border-radius:50%;border:3px solid var(--line);cursor:pointer;color:#1B1F3B;font-weight:800;font-family:var(--f-body);font-size:.8rem;padding:0}
.pen[aria-pressed="true"]{outline:4px solid var(--blue);outline-offset:2px}
.gw{font-size:.72rem;color:var(--muted);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;grid-column:2}
.hgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;width:min(480px,100%)}
.hc{aspect-ratio:1;max-width:100%;border:3px solid var(--line);border-radius:12px;background:#CFEFD5;padding:3px;cursor:pointer;display:grid;place-items:center;touch-action:manipulation}
.hc.open{background:var(--soft);cursor:default}
.hc.got{background:var(--yellow)}
.hnum{font-family:var(--f-disp);font-size:1.4rem;color:var(--muted)}
.hnum.n1{color:var(--blue)}.hnum.n2{color:var(--good)}.hnum.n3,.hnum.n4,.hnum.n5{color:var(--bad)}
.house{position:relative;width:100%;max-width:560px;background:radial-gradient(ellipse at 50% 20%,#2B2350,#0E0B1C);color:#EDE7FF;border:3px solid var(--line);border-radius:20px;padding:16px;display:flex;flex-direction:column;gap:14px;overflow:hidden}
.hhead{display:flex;justify-content:space-between;font-family:var(--f-disp);font-size:1.1rem}
.hearts{color:#FF5A7A;letter-spacing:.1em}
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;min-height:180px;align-items:center}
.door{background:none;border:0;padding:0;cursor:pointer;display:grid;justify-items:center;gap:4px;color:#EDE7FF;font-family:var(--f-disp);transition:transform .15s,filter .1s;touch-action:manipulation}
.door svg{width:100%;max-width:110px;height:auto}
.door:hover{transform:translateY(-3px)}
.door.hint svg{filter:drop-shadow(0 0 14px #B9FFDF) brightness(1.6)}
.door.opened{transform:scaleX(.85);filter:brightness(.6)}
.boo{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.55);z-index:4}
.boo svg{width:60%;max-width:240px;animation:boo .5s ease-out}
@keyframes boo{0%{transform:scale(.2) rotate(-20deg);opacity:0}70%{transform:scale(1.15)}}
.pad{display:grid;grid-template-columns:repeat(3,72px);grid-template-rows:repeat(2,64px);gap:8px}
.pad .btn{padding:0;font-size:1.6rem;font-family:var(--f-disp)}
.shake{animation:shake .3s}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.flashbad{animation:fb .35s}
@keyframes fb{0%{background:var(--bad)}}
.roma{font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;font-size:clamp(1.3rem,5vw,1.9rem);font-weight:700;letter-spacing:.06em;word-break:break-all}
.roma .t{color:var(--good)} .roma .r{color:var(--muted)}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:min(560px,100%)}
.choices .btn{background:var(--card);color:var(--ink);min-height:60px;font-size:1.05rem}
.choices .btn.ok{background:var(--good);color:#fff}
.choices .btn.ng{background:var(--bad);color:#fff}
.qtext{font-size:clamp(1.15rem,4vw,1.5rem);font-weight:800;max-width:620px;text-wrap:balance}
.kanji{font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;font-weight:700;font-size:clamp(3rem,13vw,5.4rem);line-height:1.1}
.fb{font-weight:800;min-height:1.6em}
.fb.ok{color:var(--good)} .fb.ng{color:var(--bad)}
.dice{display:flex;gap:12px;justify-content:center}
.die{width:68px;height:68px;background:#fff;border:3px solid #1B1F3B;border-radius:14px;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:9px;box-shadow:0 5px 0 #1B1F3B}
.die i{display:block;width:12px;height:12px;border-radius:50%;background:#1B1F3B;place-self:center}
.die i.r{background:#E5383B;width:16px;height:16px}
.die.rolling{animation:roll .12s linear infinite}
@keyframes roll{50%{transform:rotate(14deg) translateY(-6px)}}
.bowl{border:3px solid var(--line);border-radius:50%;width:min(300px,80vw);aspect-ratio:1.8/1;max-width:100%;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 35%,var(--soft),var(--card));box-shadow:inset 0 -10px 0 var(--soft)}
.hand{font-family:var(--f-disp);font-size:1.6rem}
.minidice{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
.minidice .die{width:30px;height:30px;padding:3px;border-width:2px;border-radius:7px;box-shadow:none}
.minidice .die i{width:5px;height:5px}.minidice .die i.r{width:7px;height:7px}
.react{width:min(520px,100%);height:240px;border:3px solid var(--line);border-radius:22px;display:grid;place-items:center;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation;font-family:var(--f-disp);font-size:2rem;background:var(--soft);color:var(--ink)}
.react.go{background:var(--good);color:#fff}
.react.foul{background:var(--bad);color:#fff}
.mash{width:200px;height:200px;border-radius:50%;font-family:var(--f-disp);font-size:2rem;background:var(--red);border:4px solid var(--line);box-shadow:0 8px 0 var(--line);cursor:pointer;color:var(--on);touch-action:manipulation;user-select:none;-webkit-user-select:none}
.mash:active,.mash.hit{transform:translateY(6px);box-shadow:0 2px 0 var(--line)}
.ink{background:#1B1F3B;border:3px solid var(--line);border-radius:20px;padding:18px 34px;font-family:var(--f-disp);font-size:clamp(2.4rem,10vw,4rem);line-height:1.1}
.cbtn{display:flex;align-items:center;gap:8px;justify-content:center}
.cbtn i{width:18px;height:18px;border-radius:50%;border:2px solid var(--line)}
.count3{font-family:var(--f-disp);font-size:5rem;line-height:1;color:var(--red);animation:pop .5s}
@keyframes pop{0%{transform:scale(.4);opacity:.2}}
.how{max-width:560px;font-size:1.05rem}
.ctrl{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.kbd{border:2px solid var(--line);border-radius:8px;padding:1px 8px;font-weight:800;font-size:.85rem;background:var(--soft)}

/* results */
.rank{display:flex;flex-direction:column;gap:8px}
.rr{display:grid;grid-template-columns:44px auto 1fr auto auto;gap:10px;align-items:center;border:3px solid var(--line);border-radius:16px;padding:6px 12px;background:var(--soft);min-width:0}
.rr .no{font-family:var(--f-disp);font-size:1.3rem;text-align:center}
.rr .nm{font-weight:800;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rr .lb{font-size:.82rem;color:var(--muted);font-weight:700}
.rr .add{font-family:var(--f-disp);color:var(--red);font-variant-numeric:tabular-nums}
.rr .tot{font-family:var(--f-disp);font-variant-numeric:tabular-nums;min-width:3.5ch;text-align:right}
.rr.first{background:var(--yellow);color:var(--on)} .rr.first .lb{color:var(--on)}
.podium{display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:end;gap:10px;max-width:520px;margin:0 auto;width:100%}
.pod{display:grid;justify-items:center;gap:4px;text-align:center;min-width:0}
.pod .nm{font-weight:800;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pod .blk{width:100%;border:3px solid var(--line);border-radius:14px 14px 0 0;display:grid;place-items:center;font-family:var(--f-disp);font-size:1.8rem;color:var(--on)}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:50}
@media (max-width:780px){.home,.lobby{grid-template-columns:1fr}.maker{grid-template-columns:1fr;justify-items:center}.maker>div:last-child{width:100%}}
@media (max-width:480px){.rr{grid-template-columns:34px auto 1fr auto;padding:6px 8px}.rr .add{display:none}.pad{grid-template-columns:repeat(3,64px);grid-template-rows:repeat(2,60px)}.key{width:42px;height:50px;font-size:1.2rem}.choices{grid-template-columns:1fr}.stage{min-height:340px}.card{padding:16px}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ===== サーバー版の追加（リセット・ログイン画面など） ===== */
*,*::before,*::after{box-sizing:border-box}
body{margin:0}
[hidden]{display:none!important}
img{max-width:100%}
a{color:var(--blue);font-weight:800}
a.btn{display:inline-block;text-decoration:none}
.top a.logo{color:inherit;text-decoration:none}
form.inline{display:inline;margin:0}
.narrow{max-width:480px;margin:0 auto;width:100%}
.stack{display:flex;flex-direction:column;gap:6px}
.stack label{font-weight:800;font-size:.9rem;margin-top:8px}
.stack .btn{margin-top:12px}
.alert{border:3px solid var(--line);border-radius:14px;padding:10px 14px;font-weight:800;margin:0 0 12px}
.alert.ok{background:color-mix(in srgb,var(--good) 22%,var(--card))}
.alert.ng{background:color-mix(in srgb,var(--bad) 20%,var(--card))}
.hero{display:flex;flex-direction:column;gap:14px;padding:32px}
.hero h1{font-family:var(--f-disp);font-weight:400;font-size:clamp(1.8rem,6vw,3rem);line-height:1.2;margin:0;text-wrap:balance}
.info{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0}
.info dt{color:var(--muted);font-weight:800}
.info dd{margin:0;font-weight:800;min-width:0;overflow-wrap:anywhere}
.two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:780px){.two{grid-template-columns:1fr}}

/* ===== 3D games ===== */
.stage.s3d{padding:0;min-height:0;display:block;overflow:hidden;text-align:left}
.g3{position:relative;width:100%;height:min(66vh,600px);min-height:330px;background:#000;border-radius:19px;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
.g3 canvas{display:block;width:100%;height:100%;cursor:crosshair}
.g3 .hud{position:absolute;left:10px;top:10px;display:flex;flex-direction:column;gap:3px;color:#fff;font-weight:800;font-size:.82rem;text-shadow:0 1px 3px #000,0 0 6px #000;pointer-events:none;max-width:60%}
.g3 .hud b{display:inline-block;align-self:flex-start;border:2px solid #fff;border-radius:999px;padding:1px 10px;font-size:.85rem}
.g3 .hud .tag-oni{background:#e5383b}.g3 .hud .tag-hide{background:#1fa35b}
.g3 .hud .tk{font-size:.75rem;opacity:.85}.g3 .hud .tk.ok{color:#8ff0b8;text-decoration:line-through}
.g3 .hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);background:rgba(0,0,0,.6);color:#fff;font-weight:800;font-size:.9rem;padding:6px 14px;border-radius:999px;pointer-events:none;white-space:nowrap;max-width:calc(100% - 140px);overflow:hidden;text-overflow:ellipsis}
.g3 .hint:empty{display:none}
.g3 .lbls{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.g3 .lbl{position:absolute;transform:translate(-50%,-100%);font-size:.75rem;font-weight:800;color:#fff;background:rgba(0,0,0,.45);padding:0 6px;border-radius:6px;white-space:nowrap}
.g3 .act{position:absolute;right:14px;bottom:14px;width:74px;height:74px;border-radius:50%;border:3px solid #fff;background:rgba(255,90,78,.85);color:#fff;font-family:var(--f-disp);font-size:1.5rem;cursor:pointer;touch-action:none}
.g3 .act:active{transform:scale(.94)}
.g3 .joy{position:absolute;left:16px;bottom:16px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.45);display:none;pointer-events:none}
.g3 .joy i{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:rgba(255,255,255,.55)}
@media (pointer:coarse){.g3 .joy{display:block}}
.g3 .cover{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:#fff;z-index:2}
.g3 .cover div{display:grid;gap:6px}.g3 .cover b{font-family:var(--f-disp);font-size:clamp(1.4rem,5vw,2.2rem)}.g3 .cover span{font-weight:800;font-size:1.2rem}
.g3 .cover.blind{background:rgba(5,6,20,.94)}.g3 .cover.blind span{font-family:var(--f-disp);font-size:3.5rem}
.g3 .cover.found{background:rgba(229,56,59,.55)}
.g3 .cover.jump{background:radial-gradient(circle,rgba(40,0,0,.6),rgba(0,0,0,.95));animation:jumpin .25s ease-out}
.g3 .cover.jump svg{width:min(60%,320px);height:auto;animation:boo .4s ease-out}.g3 .cover.jump b{position:absolute;bottom:18%;color:#ff4d4d}
@keyframes jumpin{0%{transform:scale(1.4)}}
.g3.inspot::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 18% at 50% 50%,transparent 60%,rgba(0,0,0,.92) 62%)}
.g3{--fear:0}.g3::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;box-shadow:inset 0 0 calc(var(--fear)*140px) rgba(160,0,0,calc(var(--fear)*.8))}
.g3 .hint.shake{animation:shake .3s}
.kdpick{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;align-items:center;border:3px dashed var(--line);border-radius:16px;padding:8px 10px;background:var(--card)}.kdpick span{font-weight:800;font-size:.85rem;margin-right:4px}.kd{display:inline-block;border:2px solid var(--line);border-radius:999px;padding:0 10px;font-weight:800;background:var(--yellow);color:var(--on)}

.pv{width:150px;height:210px}.pv canvas{width:150px;height:210px;display:block;cursor:grab;touch-action:none}
.pv-slot{min-height:120px;display:grid;place-items:center}
.stagechar{position:sticky;top:12px}
.tabs{display:flex;gap:6px;margin-top:14px;border-bottom:3px solid var(--line)}
.tab{font-family:var(--f-body);font-weight:800;font-size:.95rem;border:3px solid var(--line);border-bottom:0;border-radius:12px 12px 0 0;padding:6px 16px;background:var(--soft);color:var(--ink);cursor:pointer;margin-bottom:-3px}
.tab[aria-selected="true"]{background:var(--yellow);color:var(--on)}
.tab:focus-visible{outline:3px dashed var(--blue);outline-offset:2px}
.opt.txt{width:auto;padding:0 12px;font-size:.85rem}
.oni-pick b{color:var(--red)}
@media (max-width:780px){.stagechar{position:static}}

/* ===== industrial theme (single dark look on purpose) ===== */
body{background:radial-gradient(ellipse at 50% -10%,#2b241c 0%,transparent 60%),repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 2px,transparent 2px 4px),var(--bg)}
.card{position:relative;box-shadow:0 6px 0 #000,inset 0 1px 0 rgba(255,255,255,.05);background:linear-gradient(180deg,#25201b,#1b1714)}
.card::before{content:"";position:absolute;left:14px;right:14px;top:-3px;height:5px;background:repeating-linear-gradient(-45deg,var(--yellow) 0 8px,#111 8px 16px);border-radius:3px;opacity:.75;pointer-events:none}
h2{letter-spacing:.06em}
.btn{box-shadow:0 4px 0 #000}.btn:active{box-shadow:0 1px 0 #000}
.btn.ghost{background:#2a2520;color:var(--ink)}
.logo .bub{background:var(--yellow);box-shadow:3px 3px 0 #000}
.pill,.round,.chip,.gtile,.opt,.pl,.sp,.rr,.code,.tab,.kbd{background:#2a2520}
.chip[aria-pressed="true"].plain,.opt[aria-pressed="true"],.tab[aria-selected="true"]{background:var(--yellow);color:var(--on)}
.stage{background:radial-gradient(ellipse at 50% 40%,#18241a,#0d120e);box-shadow:inset 0 0 40px rgba(0,0,0,.7),0 6px 0 #000}
.stage::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:19px;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px)}
.stage.s3d::after{display:none}
.tbar{background:#0d0b09}.tbar>i{background:var(--yellow)}
.col{display:flex;flex-direction:column;gap:16px}
.scene3d{position:relative;width:100%;height:clamp(240px,46vh,480px);border-radius:18px;overflow:hidden;border:3px solid var(--line);background:#000;box-shadow:0 6px 0 #000}
.scene3d.small{height:clamp(190px,30vh,300px)}
.roomwrap{position:absolute;inset:0}.roomwrap canvas{display:block;width:100%;height:100%}
.roomwrap .lbls{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.roomwrap .lbl{position:absolute;transform:translate(-50%,-100%);font-size:.72rem;font-weight:800;color:#f2ead8;background:rgba(0,0,0,.55);padding:0 6px;border-radius:4px;white-space:nowrap}
.roomwrap .lbl.dead{color:#ff8a7a;opacity:.75}
.rcap{position:absolute;left:12px;bottom:12px;max-width:calc(100% - 24px);background:rgba(10,8,6,.78);border:2px solid var(--line);border-radius:8px;padding:4px 12px;font-weight:800;color:var(--ink);font-size:.9rem}
.rcap b{color:var(--yellow)}.cap-k{font-family:var(--f-disp);color:var(--muted);margin-right:4px}.cap-w{color:var(--bad)}
.fallback{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;height:100%;padding:16px}
.rules{display:grid;gap:4px;margin-top:14px;border:2px dashed var(--line);border-radius:12px;padding:10px 12px;font-size:.88rem}.rules b{color:var(--yellow)}
.doom{font-weight:800;color:var(--bad)}.doom b{font-family:var(--f-disp);font-size:1.2rem}
.rr.dead{opacity:.8;background:#2a1714}.rr.dead .no{color:var(--bad)}
.rr.first{background:var(--yellow)}
.introp{min-height:0}

/* ===== 3D mini-games inside the machine room ===== */
.r3{position:relative;width:100%;height:min(66vh,600px);min-height:340px;background:#000;border-radius:19px;overflow:hidden;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.r3 .r3room{position:absolute;inset:0;cursor:pointer}
.r3 .rcap{display:none}
.r3hud{position:absolute;left:50%;top:12px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;z-index:2;max-width:calc(100% - 90px);text-align:center}
.r3n{font-family:var(--f-disp);font-weight:400;font-size:clamp(3rem,10vw,5.5rem);line-height:1;color:#fff;text-shadow:0 3px 0 #000,0 0 18px rgba(0,0,0,.85)}
.r3s{font-family:var(--f-disp);font-weight:400;font-size:clamp(1.5rem,5.5vw,2.7rem);line-height:1.1;color:#fff;text-shadow:0 3px 0 #000,0 0 16px rgba(0,0,0,.85)}
.r3s.go{color:#5dff9a}.r3s.ng{color:#ff6a5a}
.r3sub{background:rgba(0,0,0,.62);color:#f2ead8;font-weight:800;padding:3px 14px;border-radius:999px;font-size:.9rem}
.r3sub:empty{display:none}
.r3bot{position:absolute;left:0;right:0;bottom:14px;display:flex;justify-content:center;gap:12px;z-index:2;pointer-events:none;padding:0 12px}
.r3bot button{pointer-events:auto}
.r3btn{font-family:var(--f-body);font-weight:800;font-size:1.1rem;border:3px solid #000;border-radius:14px;padding:10px 22px;color:#fff;box-shadow:0 4px 0 #000;cursor:pointer;touch-action:manipulation}
.r3btn.red{background:#b3241a}.r3btn.blue{background:#2a5aa8}.r3btn.big{font-size:1.45rem;padding:14px 36px;border-radius:999px}
.r3btn:disabled{opacity:.45;cursor:default}.r3btn:active{transform:translateY(3px);box-shadow:0 1px 0 #000}
.r3btn:focus-visible{outline:3px dashed #7fb0ff;outline-offset:3px}
.r3flash{position:absolute;inset:0;pointer-events:none;opacity:0;z-index:1}.r3flash.on{animation:r3f .45s ease-out}
@keyframes r3f{0%{opacity:1}100%{opacity:0}}
.r3hist{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:4px;z-index:2;pointer-events:none}
.r3hist .die{width:28px;height:28px;padding:3px;border-width:2px;border-radius:7px;box-shadow:none}.r3hist .die i{width:5px;height:5px}.r3hist .die i.r{width:7px;height:7px}
.r3hist .die:last-child{outline:3px solid var(--yellow)}
@media (prefers-reduced-motion: reduce){.r3flash.on{animation:none}}
.r3grid{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:560px}.r3grid .r3btn{min-width:52px;padding:8px 12px}
.r3bot .r3btn{background:#3a3430}.r3bot .r3btn.red{background:#b3241a}.r3bot .r3btn.blue{background:#2a5aa8}
.g3 .bchoice{bottom:62px}
.aimbox canvas{cursor:none}
.pitmark{position:absolute;left:50%;top:8px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.62);border:2px solid #000;border-radius:14px;padding:2px 14px;pointer-events:none;z-index:2}.pitmark b{font-size:clamp(2.2rem,7vw,3.4rem);line-height:1;text-shadow:0 2px 0 #000}.pitmark span{color:#fff;font-weight:800}
.r3pad{display:grid;grid-template-columns:repeat(4,60px);gap:8px}.r3pad .r3btn{font-size:1.5rem;padding:8px 0}
.r3hp{display:inline-block;width:110px;height:10px;border:2px solid #000;background:#2a0a08;border-radius:6px;overflow:hidden;vertical-align:middle}.r3hp i{display:block;height:100%;background:#5dff9a}.r3hp.t{width:70px}.r3hp.t i{background:#ffc040}
.tyui{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;z-index:2;width:min(420px,calc(100% - 24px))}
.tyw{font-family:var(--f-disp);font-size:clamp(1.6rem,6vw,2.4rem);color:#fff;text-shadow:0 3px 0 #000,0 0 12px #000}
.tyui .roma{background:rgba(0,0,0,.6);padding:2px 12px;border-radius:8px}.tyui .tx{width:100%;text-align:center}
.g3 .act{font-size:clamp(.8rem,1.7vw,1.1rem);line-height:1.1;padding:0 4px;white-space:nowrap}
.aimx{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;pointer-events:none;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #000,inset 0 0 0 1px #000}
.aimx::before,.aimx::after{content:"";position:absolute;background:#ff4a3a;left:50%;top:50%}.aimx::before{width:2px;height:44px;margin:-22px 0 0 -1px}.aimx::after{width:44px;height:2px;margin:-1px 0 0 -22px}
.overlay.soft{inset:auto 10px 10px auto;background:rgba(10,8,6,.82);border:2px solid var(--line);padding:6px 14px;pointer-events:none}.overlay.soft .big{font-size:1.3rem!important}.overlay.soft .mid{font-size:.9rem}.overlay.soft .muted{display:none}