:root{
  --ink:#f2efe4; --sub:#a6b0a6; --deep:#2c4a3e; --gold:#d9b558;
  --hot:#e0563a; --ok:#57c48c; --bg:#0e120f; --panel:#141a16; --face:#222b25;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);overscroll-behavior:none;
  font-family:"Noto Sans JP","Hiragino Sans",system-ui,sans-serif;font-weight:500;
  -webkit-user-select:none;user-select:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
.screen{position:fixed;inset:0;display:none;flex-direction:column;
  padding-bottom:env(safe-area-inset-bottom)}
.screen.on{display:flex}

/* 入口 */
#start{justify-content:center;align-items:center;text-align:center;padding:28px;gap:6px;
  background:radial-gradient(120% 90% at 50% 0%,#1d3a2e 0%,#0e120f 70%)}
#start .kanji{font-size:clamp(30px,8.5vw,46px);font-weight:900;letter-spacing:.1em;
  color:var(--gold);margin:0;text-shadow:0 2px 12px rgba(0,0,0,.6)}
#start h2{font-size:clamp(17px,4.4vw,22px);font-weight:700;margin:6px 0 2px;letter-spacing:.06em}
#start .msg{font-size:clamp(22px,6.5vw,30px);font-weight:900;color:var(--hot);
  margin:16px 0 4px;letter-spacing:.08em}
#start .lead{color:var(--sub);font-size:13.5px;max-width:30ch;line-height:1.9;margin:10px 0}
.go{margin-top:20px;background:var(--gold);color:#20261f;font-weight:900;font-size:17px;
  padding:15px 42px;border-radius:999px;letter-spacing:.08em;box-shadow:0 6px 20px rgba(0,0,0,.4)}
.alt{margin-top:14px;color:var(--sub);font-size:13px;text-decoration:underline;text-underline-offset:4px}
.note{margin-top:22px;font-size:11.5px;color:#7d887f;line-height:1.7;max-width:32ch}

/* AR */
#ar{background:#000}
#stage{position:relative;flex:1;overflow:hidden}
#video,#still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
#video[hidden],#still[hidden]{display:none}
#overlay{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
#hud{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:8px;
  padding:calc(10px + env(safe-area-inset-top)) 12px 10px;font-size:12px;
  background:linear-gradient(rgba(0,0,0,.55),transparent);pointer-events:none}
#hud .t{font-weight:900;color:var(--gold);letter-spacing:.06em}
#hud .st{margin-left:auto;display:flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums}
.dot{width:8px;height:8px;border-radius:50%;background:#666}
.dot.find{background:var(--ok)}
.dot.lock{background:var(--gold)}
#diag{position:absolute;left:12px;bottom:8px;font-size:10.5px;color:#9fb0a4;line-height:1.5;
  font-variant-numeric:tabular-nums;text-shadow:0 1px 3px #000;white-space:pre;pointer-events:none}

#panel{background:var(--panel);padding:10px 12px 14px;display:flex;flex-direction:column;gap:9px}
.row{display:flex;gap:6px;align-items:center}
.row .lb{font-size:10.5px;color:var(--sub);width:34px;flex:none;letter-spacing:.08em}
.chip{flex:1;padding:9px 4px;border-radius:9px;background:var(--face);font-size:12.5px;
  text-align:center;border:1px solid #2d3830;font-variant-numeric:tabular-nums}
.sq{width:42px;flex:none;font-size:19px;font-weight:900;padding:8px 0;border-radius:9px;
  background:var(--face);border:1px solid #2d3830;text-align:center}
.bar{display:flex;align-items:center;gap:12px;margin-top:2px}
#relock,#reroll{font-size:12px;color:var(--sub);text-decoration:underline;
  text-underline-offset:3px;flex:1}
#reroll{text-align:right}
#shoot{width:66px;height:66px;border-radius:50%;background:#fff;flex:none;
  box-shadow:0 0 0 4px var(--panel),0 0 0 6px #fff}
#shoot:active{transform:scale(.94)}
.bar2nd{text-align:center;margin-top:-2px}
#modebtn{font-size:11px;color:#6f7a71;text-decoration:underline;text-underline-offset:3px}

/* 写真 */
#photo{background:#0a0d0b;align-items:center;justify-content:center;padding:14px;gap:12px}
#shot{max-width:100%;max-height:calc(100vh - 160px);object-fit:contain;
  box-shadow:0 8px 30px rgba(0,0,0,.6)}
.bar2{display:flex;gap:10px;width:100%;max-width:420px}
.bar2 button{flex:1;padding:14px 0;border-radius:11px;font-weight:700;font-size:15px}
#save{background:var(--gold);color:#20261f}
#again{background:var(--face);color:var(--ink)}
#hint{font-size:11.5px;color:var(--sub);text-align:center;max-width:34ch;line-height:1.7;margin:0}

.err{position:fixed;left:14px;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));
  background:#3a1e18;border:1px solid var(--hot);padding:12px 14px;font-size:12.5px;
  border-radius:10px;line-height:1.7;display:none;z-index:9}
.err.on{display:block}