:root{
  --bg:#211d29; --panel:#2c2636; --ink:#efe8e2; --muted:#a89cb3;
  --vermilion:#e0563f; --vermilion-hi:#f27a5f; --line:rgba(214,196,224,.22);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);
  font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",system-ui,sans-serif;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
body{display:flex;flex-direction:column;align-items:center}

.topbar{width:100%;max-width:960px;display:flex;align-items:center;justify-content:space-between;
  padding:calc(8px + env(safe-area-inset-top)) 12px;gap:12px}
.back{color:var(--muted);text-decoration:none;font-size:14px}
.back:hover{color:var(--ink)}
.audio-ctl{display:flex;align-items:center;gap:8px}
.top-right{display:flex;align-items:center;gap:14px}
.lang-toggle{display:inline-flex;gap:2px;border:1px solid var(--line);border-radius:999px;padding:2px;background:rgba(0,0,0,.25)}
.lang-toggle button{appearance:none;border:0;background:transparent;color:var(--muted);cursor:pointer;
  font:inherit;font-size:12px;font-weight:700;padding:8px 12px;min-height:36px;border-radius:999px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center}
.lang-toggle button[aria-pressed="true"]{background:var(--vermilion);color:#241109}

#stage{position:relative;width:100%;max-width:520px;flex-shrink:0;
  aspect-ratio:9/16;
  background:
    linear-gradient(180deg,rgba(58,50,69,.6) 0%,rgba(36,31,44,.74) 55%,rgba(26,22,32,.92) 100%),
    url("img/bg-zojoji.jpg") center 25%/cover no-repeat,
    linear-gradient(180deg,#3a3245 0%,#241f2c 55%,#1a1620 100%);
  border:1px solid var(--line);border-radius:12px;overflow:hidden;
  box-shadow:0 10px 40px rgba(0,0,0,.5)}
@media(max-width:600px){
  #stage{aspect-ratio:auto;height:min(80vh,720px)}
}
#cv{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}

/* 地震の予兆：なまず（水音）／カラス／みくじ猫のどれか一体を毎回ランダムに、漫画の擬音風テキストで出す */
.omens{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:3}
/* 3体それぞれに固有色を持たせる（層の3色分け＝剛/柔/ズレすぎと呼応させる） */
.omen-namazu, .omen-crow, .omen-neko{
  position:absolute;left:50%;opacity:0;white-space:nowrap;
  font-family:"ShiranuiTitle","Zen Kaku Gothic New",sans-serif;
  font-weight:900;letter-spacing:.06em}
.omen-namazu{bottom:6%;font-size:34px;color:#5fb3c9;
  text-shadow:0 0 10px rgba(95,179,201,.55),0 2px 0 #0c2a30,2px 2px 0 #0c2a30,-1px 1px 0 #0c2a30}
.omen-crow{top:10%;font-size:30px;color:#c7bfe0;
  text-shadow:0 0 10px rgba(20,16,26,.6),0 2px 0 #14101a,2px 2px 0 #14101a,-1px 1px 0 #14101a}
.omen-neko{bottom:8%;font-size:32px;color:#f2b34a;
  text-shadow:0 0 10px rgba(242,179,74,.55),0 2px 0 #3a2408,2px 2px 0 #3a2408,-1px 1px 0 #3a2408}

#stage.quake-warn.omen-pick-namazu .omen-namazu{animation:omen-pop .45s ease-out both, omen-wobble .5s ease-in-out .45s infinite}
#stage.quake-warn.omen-pick-crow .omen-crow{animation:omen-pop .4s ease-out both, omen-wobble .4s ease-in-out .4s infinite}
#stage.quake-warn.omen-pick-neko .omen-neko{animation:omen-pop .4s ease-out both, omen-wobble .55s ease-in-out .4s infinite}

@keyframes omen-pop{
  0%{opacity:0;transform:translateX(-50%) scale(.4) rotate(-8deg)}
  60%{opacity:1;transform:translateX(-50%) scale(1.15) rotate(3deg)}
  100%{opacity:1;transform:translateX(-50%) scale(1) rotate(0deg)}
}
@keyframes omen-wobble{
  0%,100%{transform:translateX(-50%) rotate(-4deg)}
  50%{transform:translateX(-50%) rotate(4deg)}
}

.hud{position:absolute;top:10px;left:0;right:0;display:flex;align-items:center;justify-content:space-between;
  padding:0 14px;pointer-events:none;font-variant-numeric:tabular-nums;z-index:4}
.hud-level{font-family:"ShiranuiTitle","Zen Kaku Gothic New",sans-serif;
  font-size:30px;font-weight:800;color:var(--ink);text-shadow:0 1px 4px #000}

.toast{font-family:"ShiranuiTitle","Zen Kaku Gothic New",sans-serif;
  position:absolute;top:52px;left:50%;transform:translateX(-50%);
  padding:11px 24px;border-radius:999px;background:rgba(20,16,26,.82);border:1px solid var(--line);
  color:var(--vermilion-hi);font-weight:800;font-size:20px;letter-spacing:.04em;z-index:6;
  transition:opacity .3s,transform .3s;pointer-events:none}
.toast.hidden{opacity:0;transform:translate(-50%,-8px)}

.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;text-align:center;padding:20px 24px;background:rgba(16,13,20,.78);backdrop-filter:blur(3px);z-index:5}
.overlay.hidden{display:none}
.title{font-family:"ShiranuiTitle","Zen Kaku Gothic New",sans-serif;
  font-size:clamp(26px,7vw,38px);margin:0;letter-spacing:.1em;color:var(--vermilion-hi);font-weight:900;
  text-shadow:0 0 26px rgba(224,86,63,.5),0 3px 0 #3a140c}
.sub{margin:0;color:var(--ink);font-size:15px;opacity:.9;max-width:340px;line-height:1.6}
.hint{margin:6px 0 0;color:var(--muted);font-size:13px;line-height:1.7;max-width:320px}
.btn-main{font-family:"ShiranuiTitle","Zen Kaku Gothic New",sans-serif;
  margin-top:6px;padding:14px 40px;font-size:17px;font-weight:800;color:#241109;cursor:pointer;
  border:0;border-radius:999px;background:linear-gradient(180deg,var(--vermilion-hi),var(--vermilion));
  box-shadow:0 6px 20px rgba(224,86,63,.35);letter-spacing:.06em}
.btn-main:hover{filter:brightness(1.06)}
.btn-main:active{transform:translateY(1px)}
.over-title{font-family:"ShiranuiTitle","Zen Kaku Gothic New",sans-serif;
  font-size:24px;margin:0;color:var(--vermilion-hi);letter-spacing:.08em}
.over-result{font-family:"ShiranuiTitle","Zen Kaku Gothic New",sans-serif;
  margin:0;font-size:18px;color:var(--ink)}
.over-best{font-family:"ShiranuiTitle","Zen Kaku Gothic New",sans-serif;
  margin:0;font-size:14px;color:var(--muted)}

.mikuji-about{width:100%;max-width:960px;margin:14px auto 0;padding:0 14px;color:var(--muted)}
.mikuji-about summary{cursor:pointer;display:flex;align-items:center;gap:8px;font-size:14px;padding:8px 0}
.mikuji-about-ico{width:22px;height:22px;border-radius:50%}
.mikuji-about-body{font-size:13.5px;line-height:1.8;padding:6px 0 18px}
.mikuji-about-body h2{font-size:15px;color:var(--ink);margin:14px 0 6px}
.mikuji-about-body h3{font-size:14px;color:var(--vermilion-hi);margin:12px 0 4px}
.mikuji-about-say{color:var(--vermilion-hi);font-style:italic}
.credit{width:100%;max-width:960px;margin:0 auto 24px;padding:0 14px;color:var(--muted);font-size:12px;text-align:center}