:root {
  --bg:#050507; --line:rgba(232,230,225,.10); --line2:rgba(232,230,225,.2);
  --fg:#e8e6e1; --muted:#8a8e96; --dim:#5a5e66;
  --seal:#c21f2a; --glass:rgba(9,10,15,.74);
  --latin:"Oswald","Arial Narrow",sans-serif; --serif:"Shippori Mincho","Yu Mincho",serif; --brush:"Yuji Syuku","Shippori Mincho",serif;
  --st:env(safe-area-inset-top,0px); --sb:env(safe-area-inset-bottom,0px); --sl:env(safe-area-inset-left,0px); --sr:env(safe-area-inset-right,0px);
  --panel-w:360px;
}
* { box-sizing:border-box; }
html, body { height:100%; }
body { margin:0; overflow:hidden; background:var(--bg); color:var(--fg); font-family:"Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-tap-highlight-color:transparent; }
.app { position:fixed; inset:0; overflow:hidden; }
.app::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.07; mix-blend-mode:overlay; z-index:40;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

/* ---------- stage: the camera fills the screen ---------- */
.stage { position:absolute; inset:0; background:#000; }
canvas { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.app.fill canvas { object-fit:cover; }
.placeholder { position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; text-align:center; padding:24px;
  background:radial-gradient(ellipse at 50% 40%, rgba(40,55,110,.35), transparent 60%), radial-gradient(ellipse at 50% 110%, rgba(120,30,60,.25), transparent 60%), #050507; }
.placeholder .big { font-family:var(--serif); font-weight:800; font-size:clamp(64px,14vmin,150px); letter-spacing:.14em; line-height:1; text-indent:.14em; }
.placeholder .sub { font-family:var(--latin); font-weight:300; font-size:clamp(14px,2.2vmin,18px); letter-spacing:.5em; text-indent:.5em; text-transform:uppercase; color:var(--fg); }
.placeholder .small { font-family:var(--latin); font-weight:300; font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); line-height:2.1; max-width:520px; }
#err { color:#ff8a8a; font-size:13px; max-width:520px; }

button { font-family:var(--latin); font-weight:500; font-size:13px; letter-spacing:.3em; text-transform:uppercase; color:var(--fg); cursor:pointer;
  background:transparent; border:1px solid var(--line2); padding:12px 24px; transition:background .2s, border-color .2s, color .2s; }
button:hover:not(:disabled) { background:var(--fg); color:var(--bg); border-color:var(--fg); }
button:disabled { opacity:.45; cursor:default; }
button.primary { padding:16px 40px; font-size:14px; border-color:var(--fg); }
button.icon.off { opacity:.4; text-decoration:line-through; }
button.icon { width:42px; height:42px; padding:0; display:grid; place-items:center; letter-spacing:0; font-size:17px; background:var(--glass); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }

/* ---------- top bar (overlay) ---------- */
.topbar { position:absolute; z-index:10; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:calc(16px + var(--st)) calc(18px + var(--sr)) 26px calc(18px + var(--sl)); pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,.6), transparent); }
.topbar > * { pointer-events:auto; }
.brand { display:flex; align-items:center; gap:12px; color:inherit; text-decoration:none; }
.brand:hover .seal { transform:rotate(-3deg) scale(1.06); }
.seal { width:38px; height:38px; display:grid; place-items:center; background:var(--seal); color:#f4e9e0; font-family:var(--brush); font-size:25px; line-height:1;
  border-radius:3px; box-shadow:inset 0 0 0 2px rgba(0,0,0,.25), inset 0 0 12px rgba(0,0,0,.35); transform:rotate(-3deg); flex:none; transition:transform .2s; }
h1 { margin:0; font-family:var(--latin); font-weight:300; font-size:19px; letter-spacing:.42em; text-transform:uppercase; line-height:1; text-shadow:0 1px 10px rgba(0,0,0,.8); }
.tag { display:block; margin-top:6px; font-family:var(--latin); font-size:10px; letter-spacing:.34em; text-transform:uppercase; color:var(--muted); }
.tag b { font-family:var(--brush); font-weight:400; font-size:12px; letter-spacing:.2em; color:var(--fg); margin-right:6px; }
.actions { display:flex; align-items:center; gap:8px; }
.rec { display:none; align-items:center; gap:7px; margin-right:6px; font-family:ui-monospace, monospace; font-size:11px; letter-spacing:.2em; color:rgba(232,230,225,.75); text-shadow:0 1px 6px #000; }
.rec i { width:7px; height:7px; border-radius:50%; background:#e0303a; animation:blink 1.4s steps(1) infinite; }
@keyframes blink { 50% { opacity:.2; } }

/* ---------- HUD: always-visible technique chips ---------- */
.hud { position:absolute; z-index:10; left:50%; bottom:calc(20px + var(--sb)); transform:translateX(-50%); display:none; gap:8px; transition:left .35s ease; }
.app.running .hud { display:flex; }
.chip { position:relative; width:74px; padding:9px 8px 10px; text-align:center; background:var(--glass); border:1px solid var(--line); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:border-color .25s, box-shadow .25s, transform .25s; }
.chip .k { display:block; font-family:var(--serif); font-weight:800; font-size:22px; line-height:1.1; color:var(--dim); transition:color .25s, text-shadow .25s; }
.chip .l { display:block; margin-top:3px; font-family:var(--latin); font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chip .b { display:block; height:2px; margin-top:7px; background:rgba(255,255,255,.08); }
.chip .b > i { display:block; height:100%; width:0; background:var(--c); box-shadow:0 0 8px var(--c); }
.chip.on { border-color:color-mix(in srgb, var(--c) 55%, transparent); box-shadow:0 0 22px -6px var(--c); transform:translateY(-3px); }
.chip.on .k { color:#fff; text-shadow:0 0 14px var(--c); }
.chip.on .l { color:var(--fg); }
.badge { position:absolute; z-index:10; left:calc(20px + var(--sl)); bottom:calc(24px + var(--sb)); display:none; font-family:var(--latin); font-size:13px; letter-spacing:.3em; text-transform:uppercase;
  padding:6px 0 6px 12px; border-left:2px solid var(--fg); text-shadow:0 1px 8px rgba(0,0,0,.95); }
.app.running .badge { display:block; }

/* ---------- drawer (desktop) / bottom sheet (mobile) ---------- */
.panel { position:absolute; z-index:20; top:calc(78px + var(--st)); right:calc(16px + var(--sr)); bottom:calc(16px + var(--sb)); width:var(--panel-w);
  overflow-y:auto; overscroll-behavior:contain; padding:18px 18px 20px; display:flex; flex-direction:column; gap:14px;
  background:var(--glass); border:1px solid var(--line); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  transform:translateX(calc(100% + 32px)); transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.app.panel-open .panel { transform:none; }
.panel .grab { display:none; }
h2 { margin:0; font-family:var(--latin); font-weight:400; font-size:11px; letter-spacing:.42em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:12px; }
h2::after { content:""; flex:1; height:1px; background:var(--line); }
.tech { position:relative; padding:11px 13px 12px 15px; background:rgba(255,255,255,.02); border:1px solid var(--line); transition:border-color .25s, background .25s, box-shadow .25s; }
.tech::before { content:""; position:absolute; left:-1px; top:-1px; bottom:-1px; width:2px; background:var(--c); opacity:.55; }
.tech.on { border-color:color-mix(in srgb, var(--c) 45%, transparent); background:color-mix(in srgb, var(--c) 8%, transparent); box-shadow:0 0 24px -8px var(--c); }
.tech.on::before { opacity:1; box-shadow:0 0 12px var(--c); }
.row { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.name { display:flex; align-items:baseline; gap:10px; }
.name .jp { font-family:var(--serif); font-weight:800; font-size:20px; line-height:1; }
.name .en { font-family:var(--latin); font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--muted); }
.state { font-family:var(--latin); font-weight:500; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); white-space:nowrap; }
.tech.on .state { color:var(--c); text-shadow:0 0 10px var(--c); }
.how { font-size:12px; color:#959aa2; margin:7px 0 9px; line-height:1.6; }
.how b { color:var(--fg); font-weight:500; }
.bar { height:2px; background:rgba(255,255,255,.07); }
.bar > i { display:block; height:100%; width:0; background:var(--c); box-shadow:0 0 10px var(--c); }
.tip { padding-top:10px; border-top:1px solid var(--line); font-size:12px; line-height:1.6; color:#959aa2; }
.tip b { font-family:var(--latin); font-weight:500; letter-spacing:.2em; font-size:11px; text-transform:uppercase; color:var(--fg); }
.sw, .sw-tog { display:flex; align-items:center; gap:10px; font-size:12px; color:#959aa2; cursor:pointer; min-height:28px; }
input[type=checkbox], input[type=range] { accent-color:var(--fg); }
.calib { padding:12px 14px; border:1px dashed var(--line2); font-size:12px; line-height:1.6; color:#959aa2; }
.calib b { font-family:var(--latin); font-weight:500; letter-spacing:.2em; font-size:11px; text-transform:uppercase; color:#c7a8ff; }
.calib code { color:var(--fg); }
.debug { font-family:ui-monospace,monospace; font-size:11px; color:#6a6f77; min-height:1.4em; word-break:break-word; }
::selection { background:var(--seal); color:#fff; }

/* desktop with drawer open: keep the HUD centred in the visible area */
@media (min-width:761px) {
  .app.panel-open .hud { left:calc((100% - var(--panel-w) - 32px)/2); }
  .app.panel-open .badge { bottom:calc(96px + var(--sb)); }
}
/* ---------- phones ---------- */
@media (max-width:760px) {
  h1 { font-size:14px; letter-spacing:.32em; }
  .tag { display:none; }
  .seal { width:32px; height:32px; font-size:21px; }
  .panel { top:auto; left:0; right:0; bottom:0; width:auto; max-height:74dvh; padding:10px 16px calc(20px + var(--sb));
    border-width:1px 0 0; border-radius:16px 16px 0 0; transform:translateY(105%); }
  .panel .grab { display:block; width:40px; height:4px; margin:0 auto 4px; border-radius:2px; background:var(--line2); flex:none; }
  .hud { gap:6px; bottom:calc(14px + var(--sb)); }
  .chip { width:64px; padding:7px 4px 8px; }
  .chip .k { font-size:19px; }
  .badge { left:50%; transform:translateX(-50%); bottom:auto; top:calc(70px + var(--st)); border-left:0; padding:0; font-size:11px; white-space:nowrap; }
}

/* ---------- settings rows ---------- */
.sw-tog { min-height:0; }
.sw input[type=range] { flex:1; min-width:0; }
.sw .lbl { min-width:62px; }
.sw .val { width:36px; text-align:right; font-family:ui-monospace,monospace; }
.voice-row { cursor:default; }
select { flex:1; min-width:0; font:inherit; font-size:12px; color:var(--fg); background:rgba(255,255,255,.04); border:1px solid var(--line2); padding:6px 8px; }
select:disabled { opacity:.45; }
select option { background:#111318; }
button.mini { padding:6px 12px; font-size:11px; letter-spacing:.2em; }
.hint { font-size:11.5px; line-height:1.55; color:#d9a46a; }
.hint:empty { display:none; }

/* ---------- start choices ---------- */
.starts { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
button.seal-btn { border-color:var(--seal); background:color-mix(in srgb, var(--seal) 22%, transparent); }
button.seal-btn:hover:not(:disabled) { background:var(--seal); border-color:var(--seal); color:#fff; }
button.icon.kanji { font-family:var(--brush); font-size:19px; }
button.icon.on { background:var(--seal); border-color:var(--seal); color:#fff; }

/* ---------- exorcism panel box ---------- */
.game-box { padding:12px 14px; border:1px solid color-mix(in srgb, var(--seal) 45%, transparent); background:color-mix(in srgb, var(--seal) 7%, transparent); }
.game-box p { margin:0 0 10px; font-size:12px; line-height:1.6; color:#a9adb4; }
.game-box .best { font-family:var(--latin); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); }
.game-box .best b { color:var(--fg); font-weight:500; letter-spacing:.06em; }
.game-box button { padding:10px 18px; border-color:var(--seal); }

/* ---------- in-game HUD ---------- */
.ghud { position:absolute; z-index:11; top:calc(18px + var(--st)); left:50%; transform:translateX(-50%); display:none; align-items:baseline; gap:18px;
  padding:8px 18px; background:var(--glass); border:1px solid var(--line); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  font-family:var(--latin); letter-spacing:.2em; text-transform:uppercase; white-space:nowrap; transition:left .35s ease; }
.app.gaming .ghud { display:flex; }
.app.gaming .badge { display:none; }
.ghud .gw { font-size:11px; color:var(--muted); }
.ghud .gw b { color:var(--fg); font-weight:500; font-size:15px; letter-spacing:.06em; }
.ghud .gs { font-size:22px; font-weight:400; letter-spacing:.06em; min-width:5ch; text-align:center; }
.ghud .gl { font-size:13px; letter-spacing:.2em; color:#ff4d5e; text-shadow:0 0 8px rgba(255,40,60,.6); }
.ghud .gc { font-size:11px; color:#d6b8ff; }
.ghud .gv { font-size:11px; color:#b8c6ff; }
.ghud .gc:empty, .ghud .gv:empty { display:none; }

/* ---------- game over ---------- */
.gover { position:absolute; z-index:30; inset:0; display:none; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding:24px;
  background:radial-gradient(ellipse at 50% 45%, rgba(60,0,10,.55), rgba(0,0,0,.82) 70%); }
.app.game-over .gover { display:flex; }
.gover .gk { font-family:var(--serif); font-weight:800; font-size:clamp(48px,11vmin,110px); letter-spacing:.12em; text-indent:.12em; color:#fff; text-shadow:0 0 30px rgba(194,31,42,.8); }
.gover .gt { font-family:var(--latin); font-weight:300; font-size:13px; letter-spacing:.45em; text-indent:.45em; text-transform:uppercase; color:var(--muted); }
.gover .gscore { margin-top:10px; font-family:var(--latin); font-weight:300; font-size:clamp(44px,9vmin,84px); letter-spacing:.04em; line-height:1; }
.gover .gstats { font-family:var(--latin); font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); }
.gover .gstats b { color:var(--fg); font-weight:500; }
.gover .gbtns { display:flex; gap:12px; margin-top:16px; }

@media (min-width:761px) {
  .app.panel-open .ghud { left:calc((100% - var(--panel-w) - 32px)/2); }
}
@media (max-width:760px) {
  .ghud { top:calc(64px + var(--st)); gap:12px; padding:6px 12px; }
  .ghud .gs { font-size:17px; }
  .ghud .gc, .ghud .gv { display:none; }
  .starts { flex-direction:column; align-items:stretch; }
}

/* ---------- logo (brand/cursed-hands/mark.svg) ---------- */
.mark { width:38px; height:38px; flex:none; filter:drop-shadow(0 2px 8px rgba(0,0,0,.6)); transition:transform .2s; }
.brand:hover .mark { transform:scale(1.06) rotate(-2deg); }
.big-mark { width:72px; height:72px; }
@media (max-width:760px) { .mark { width:32px; height:32px; } .big-mark { width:64px; height:64px; } }

/* ---------- face filters ---------- */
.face-box { display:flex; flex-direction:column; gap:6px; padding:12px 14px; border:1px solid var(--line); background:rgba(255,255,255,.02); }
.face-box .presets { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:4px; }
.face-box .note { margin:2px 0 0; font-size:11px; line-height:1.55; color:var(--dim); }
.sw .lbl2 { font-size:11px; color:var(--muted); }
input[type=color] { width:34px; height:24px; padding:0; border:1px solid var(--line2); background:none; cursor:pointer; flex:none; }
input[type=color]::-webkit-color-swatch-wrapper { padding:2px; }
input[type=color]::-webkit-color-swatch { border:0; }