/* ══════════════════════════════════════════
   よろず村 style — 夜の村のUI
══════════════════════════════════════════ */
:root{
  --sumi:#0b1020;
  --washi:#efe9da;
  --hai:#9aa0b4;
  --kin:#c9a86a;
  --aka:#c9705e;
  --serif:"Shippori Mincho B1",serif;
  --sans:"Zen Kaku Gothic New",system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%}
body{
  font-family:var(--sans);background:var(--sumi);color:var(--washi);
  line-height:1.9;letter-spacing:.06em;font-feature-settings:"palt";
  -webkit-font-smoothing:antialiased;
  overflow:hidden;overscroll-behavior:none;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
a{color:inherit}
#world{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}

/* ── HUD ── */
.hud{position:fixed;inset:0;z-index:20;pointer-events:none}
.hud__top{
  position:absolute;top:0;left:0;right:0;
  display:flex;justify-content:space-between;align-items:center;
  padding:max(14px,env(safe-area-inset-top)) 16px 8px;
}
.hud__brand{
  font-family:var(--serif);font-size:15px;letter-spacing:.32em;
  text-shadow:0 1px 12px rgba(0,0,0,.9);
}
.hud__brand small{font-family:var(--sans);font-size:9px;letter-spacing:.22em;color:var(--hai);margin-left:.8em}
@media(max-width:460px){.hud__brand small{display:none}}
.hud__btns{display:flex;gap:8px}
.hbtn{
  pointer-events:auto;cursor:pointer;
  font-family:var(--sans);font-size:11px;letter-spacing:.18em;
  color:var(--washi);background:rgba(11,16,32,.6);
  border:1px solid rgba(201,168,106,.4);border-radius:999px;
  padding:.5em 1.3em;backdrop-filter:blur(4px);
  transition:border-color .25s,background .25s;
}
.hbtn:hover{border-color:var(--kin);background:rgba(201,168,106,.14)}
.hbtn.on{border-color:var(--kin);background:rgba(201,168,106,.22)}

/* ── 操作プロンプト ── */
.prompt{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:max(26px,calc(env(safe-area-inset-bottom) + 14px));
  pointer-events:auto;cursor:pointer;
  background:rgba(11,16,32,.78);border:1px solid rgba(201,168,106,.55);
  border-radius:999px;padding:.75em 1.7em;
  font-size:13px;letter-spacing:.1em;
  opacity:0;translate:0 12px;transition:opacity .3s,translate .3s;
  overflow:hidden;white-space:nowrap;
  backdrop-filter:blur(5px);
  touch-action:none;
}
.prompt.on{opacity:1;translate:0 0}
.prompt b{font-family:var(--serif);font-weight:600;margin-left:.7em;color:var(--kin)}
.prompt .key{
  display:inline-block;border:1px solid rgba(239,233,218,.6);border-radius:5px;
  font-size:11px;padding:0 .5em;margin-right:.8em;translate:0 -1px;
}
.prompt .chip{
  font-size:9.5px;color:var(--sumi);background:var(--kin);
  border-radius:999px;padding:.1em .8em;margin-left:1em;letter-spacing:.14em;
}
.prompt__fill{
  position:absolute;left:0;top:0;bottom:0;width:0%;
  background:rgba(201,168,106,.28);pointer-events:none;
}
.prompt__hint{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:max(8px,env(safe-area-inset-bottom));
  font-size:9px;color:var(--hai);letter-spacing:.2em;white-space:nowrap;
}

/* ── バーチャルスティック ── */
.stick{
  position:fixed;left:22px;bottom:max(30px,calc(env(safe-area-inset-bottom) + 18px));
  width:110px;height:110px;border-radius:50%;z-index:18;
  border:1.5px solid rgba(239,233,218,.28);
  background:rgba(11,16,32,.3);
  pointer-events:none;opacity:.55;transition:opacity .2s;
}
.stick.on{opacity:.95}
.stick__knob{
  position:absolute;left:50%;top:50%;margin:-24px 0 0 -24px;
  width:48px;height:48px;border-radius:50%;
  background:rgba(239,233,218,.28);border:1.5px solid rgba(239,233,218,.5);
}

/* ── イントロ ── */
.intro{
  position:fixed;inset:0;z-index:40;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  text-align:center;
  background:radial-gradient(ellipse at 50% 40%,rgba(11,16,32,0) 0%,rgba(11,16,32,.34) 62%,rgba(7,10,22,.84) 100%);
  padding:24px 20px max(34px,calc(env(safe-area-inset-bottom) + 22px));
  transition:opacity .6s;
}
.intro.off{opacity:0;pointer-events:none}
.intro__title{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(38px,9vw,64px);letter-spacing:.3em;text-indent:.3em;
  text-shadow:0 2px 30px rgba(0,0,0,.8);
  margin-bottom:.1em;
}
.intro__sub{
  font-family:var(--serif);font-size:clamp(13px,3.4vw,16px);
  letter-spacing:.22em;color:#d9d3c4;margin-bottom:1.6em;
}
.intro__ctrl{
  font-size:clamp(10.5px,2.8vw,12px);color:var(--hai);letter-spacing:.14em;
  margin-bottom:2em;line-height:2.2;
}
.intro__ctrl b{color:#cfc9ba;font-weight:500;border:1px solid rgba(154,160,180,.45);border-radius:5px;padding:0 .55em;margin:0 .18em;font-size:.92em}
.intro__go{
  cursor:pointer;pointer-events:auto;
  font-family:var(--serif);font-size:15px;letter-spacing:.3em;text-indent:.3em;
  color:var(--sumi);background:var(--kin);border:none;border-radius:3px;
  padding:1em 3.2em;margin-bottom:1.4em;
  transition:transform .25s,box-shadow .25s;
}
.intro__go:hover{transform:translateY(-2px);box-shadow:0 10px 30px -8px rgba(201,168,106,.55)}
.intro__alt{cursor:pointer;background:none;border:none;color:var(--hai);font-size:11px;letter-spacing:.16em;text-decoration:underline;text-underline-offset:4px;margin-bottom:1.8em}
.intro__note{font-size:9.5px;color:#6d7286;letter-spacing:.1em;line-height:1.9}
.intro__note a{color:#8f95a8}

/* ── モーダル共通 ── */
.modal{
  position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  background:rgba(5,8,18,.72);backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity .3s;
  padding:20px;
}
.modal.on{opacity:1;pointer-events:auto}
.modal__in{
  background:#11162a;border:1px solid rgba(201,168,106,.4);border-radius:10px;
  max-width:640px;width:100%;max-height:82vh;max-height:82dvh;overflow-y:auto;
  padding:1.8em 1.6em 1.4em;
  -webkit-user-select:text;user-select:text;
}
.modal__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1em}
.modal__head h2{font-family:var(--serif);font-weight:600;font-size:17px;letter-spacing:.24em}
.modal__head .lit{font-family:var(--sans);font-size:10px;letter-spacing:.14em;color:var(--kin);margin-left:.9em;border:1px solid rgba(201,168,106,.45);border-radius:999px;padding:.25em 1em;vertical-align:2px;white-space:nowrap}
.m-close{
  cursor:pointer;background:none;border:1px solid rgba(154,160,180,.4);border-radius:999px;
  color:var(--hai);font-size:10.5px;letter-spacing:.18em;padding:.4em 1.2em;font-family:var(--sans);
}
.modal__foot{font-size:10px;color:var(--hai);letter-spacing:.08em;margin-top:1.6em;line-height:2}
.modal__foot a{color:#bfa87a}

/* 一覧グリッド */
.lg{margin-bottom:1.3em}
.lg h3{font-family:var(--serif);font-size:12px;letter-spacing:.3em;color:var(--kin);margin-bottom:.6em;font-weight:600}
.lg__card{
  display:block;text-decoration:none;
  border:1px solid rgba(154,160,180,.22);border-radius:8px;
  padding:.7em 1em .6em;margin-bottom:.55em;
  transition:border-color .2s,background .2s;
  line-height:1.7;position:relative;
}
.lg__card:hover{border-color:var(--kin);background:rgba(201,168,106,.07)}
.lg__card b{font-family:var(--serif);font-size:14.5px;font-weight:600;letter-spacing:.12em;margin-right:.9em}
.lg__card.is-visited::after{
  content:"灯";position:absolute;right:.9em;top:.7em;
  font-family:var(--serif);font-size:10px;color:var(--sumi);
  background:var(--kin);border-radius:50%;width:1.7em;height:1.7em;
  display:grid;place-items:center;
}
.lg__cat{font-size:9.5px;color:var(--kin);letter-spacing:.16em}
.lg__copy{display:block;font-size:11px;color:var(--hai);letter-spacing:.06em}
.lg__alt{display:block;font-size:10.5px;color:var(--hai);margin:-0.2em 0 .6em .4em}
.lg__alt a{color:#bfa87a;text-decoration-thickness:1px;text-underline-offset:3px}

/* 高札・二枚看板 */
.c-btn{
  display:block;text-decoration:none;text-align:center;
  font-family:var(--serif);font-size:13.5px;letter-spacing:.14em;
  border:1px solid rgba(201,168,106,.5);border-radius:8px;
  padding:1em;margin-bottom:.7em;transition:background .2s;
}
.c-btn:hover{background:rgba(201,168,106,.12)}

/* ── トースト（店から戻った時） ── */
.toast{
  position:fixed;left:50%;transform:translate(-50%,-8px);
  top:max(60px,calc(env(safe-area-inset-top) + 48px));z-index:70;
  background:rgba(11,16,32,.82);border:1px solid rgba(201,168,106,.5);
  border-radius:999px;padding:.6em 1.6em;
  font-family:var(--serif);font-size:12.5px;letter-spacing:.16em;color:var(--washi);
  opacity:0;pointer-events:none;transition:opacity .4s,transform .4s;
  backdrop-filter:blur(5px);
}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ── 遷移フェード ── */
#fade{
  position:fixed;inset:0;z-index:80;background:#05070f;
  opacity:0;pointer-events:none;transition:opacity .3s;
}
#fade.on{opacity:1;pointer-events:auto}

/* ── フォールバック（reduce-motion / WebGL不可）── */
#flat{display:none}
body.flat #world,body.flat .hud,body.flat .stick,body.flat .prompt,body.flat .intro{display:none}
body.flat{overflow:auto}
body.flat #flat{
  display:block;min-height:100dvh;
  background:
    radial-gradient(ellipse 60% 36% at 74% 16%,rgba(200,214,240,.14),transparent),
    radial-gradient(ellipse 90% 46% at 50% 108%,rgba(201,138,74,.16),transparent),
    linear-gradient(#0b1020,#0d1226 55%,#141a30);
  padding:min(11vh,84px) 22px 60px;
}
.flatIn{max-width:640px;margin:0 auto}
#flat h1{font-family:var(--serif);font-size:clamp(34px,8vw,52px);letter-spacing:.3em;font-weight:600;margin-bottom:.2em}
#flat .flat__lead{font-size:13px;color:#cfc9ba;letter-spacing:.12em;margin-bottom:2.4em;line-height:2.2}
#flat .modal__foot{margin-top:2.6em}