@font-face {
  font-family: "YoiKanji";
  src: url("/shared/fonts/yoikanji.woff2") format("woff2");
  font-display: swap;
}
/* 宵祭アーケード 共通テーマ — DESIGN_DIRECTION.md が正 */
@font-face {
  font-family: "MochiyPop";
  src: url("/shared/fonts/mochiy.woff2") format("woff2");
  font-display: swap;
}
:root {
  --bg: #1a1033;
  --panel: #2b1b4e;
  --panel2: #3a2a63;
  --ink: #fff6e4;
  --ink-dim: #b9a9d9;
  --accent: #ffb43c;
  --sakura: #ff6e9c;
  --ok: #7be08a;
  --danger: #ff5b45;
  --game-accent: #5ec8ff;
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: "MochiyPop", "YoiKanji", "Hiragino Maru Gothic ProN", sans-serif;
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
}
#stage {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#stage canvas { display: block; }

/* ---- オーバーレイ共通 ---- */
.ov {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ov.show { opacity: 1; pointer-events: auto; }

/* ---- タイトル ---- */
#titleOv { background: radial-gradient(120% 90% at 50% 8%, rgba(26,16,51,0.25), rgba(26,16,51,0.88) 70%); }
.lanterns { position: absolute; top: -6px; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 26px; }
.lantern {
  width: 44px; height: 58px; border-radius: 22px / 29px;
  background: radial-gradient(60% 55% at 50% 42%, #ffd98a, var(--accent) 75%, #d98a1e);
  box-shadow: 0 0 26px 6px rgba(255, 180, 60, 0.35);
  position: relative;
  transform-origin: 50% -14px;
  animation: sway 3.4s ease-in-out infinite;
}
.lantern::before { content: ""; position: absolute; top: -14px; left: 50%; width: 2px; height: 14px; background: #6b5a3a; transform: translateX(-50%); }
.lantern::after { content: ""; position: absolute; top: -4px; left: 8px; right: 8px; height: 7px; border-radius: 4px; background: #4a3a20; }
.lantern:nth-child(2) { animation-delay: -1.2s; }
.lantern:nth-child(3) { animation-delay: -2.3s; }
@keyframes sway { 0%, 100% { transform: rotate(4deg); } 50% { transform: rotate(-4deg); } }

.gtitle {
  font-size: 52px;
  line-height: 1.15;
  text-align: center;
  color: var(--ink);
  text-shadow: 0 3px 0 rgba(0,0,0,0.35), 0 0 34px color-mix(in srgb, var(--game-accent) 55%, transparent);
  letter-spacing: 0.04em;
}
.gtitle small { display: block; font-size: 15px; color: var(--ink-dim); margin-top: 8px; letter-spacing: 0.14em; }
.howto {
  font-size: 16px;
  color: var(--ink);
  background: rgba(43, 27, 78, 0.82);
  border: 1px solid rgba(255, 214, 140, 0.35);
  border-radius: 14px;
  padding: 10px 18px;
  text-align: center;
  line-height: 1.6;
}
.bestchip { font-size: 14px; color: var(--ink-dim); }
.bestchip b { color: var(--accent); font-size: 18px; margin-left: 6px; }

/* ---- ボタン（暗面×細金縁） ---- */
.btn {
  font-family: inherit;
  font-size: 22px;
  color: var(--ink);
  background: linear-gradient(180deg, #3a2a63, #2b1b4e);
  border: 1.5px solid #d9b36a;
  border-radius: 999px;
  padding: 16px 54px;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,246,228,0.14);
  transition: transform 90ms ease-out, filter 90ms ease-out;
}
.btn:active { transform: translateY(3px) scale(0.98); filter: brightness(0.86); box-shadow: 0 1px 0 rgba(0,0,0,0.35); }
.btn.primary {
  background: linear-gradient(180deg, #ffc766, #f09a1e);
  color: #3a2410;
  border-color: #ffe9bb;
  text-shadow: 0 1px 0 rgba(255,255,255,0.35);
  box-shadow: 0 5px 0 #9a5f10, 0 0 30px rgba(255,180,60,0.35);
}
.btn.primary:active { box-shadow: 0 1px 0 #9a5f10; }
.btn.ghost { font-size: 15px; padding: 10px 26px; border-color: rgba(217,179,106,0.5); }

/* ---- ゲームオーバー絵馬 ---- */
#overOv { background: rgba(14, 8, 30, 0.62); }
.ema {
  width: min(86vw, 380px);
  background: linear-gradient(180deg, #33235a, #2b1b4e);
  border: 1.5px solid #d9b36a;
  border-radius: 18px 18px 22px 22px;
  padding: 26px 24px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  box-shadow: 0 14px 44px rgba(0,0,0,0.5);
  transform: translateY(14px) scale(0.96);
  transition: transform 280ms cubic-bezier(0.34, 1.4, 0.64, 1);
}
.ov.show .ema { transform: translateY(0) scale(1); }
.ema .olabel { font-size: 14px; color: var(--ink-dim); letter-spacing: 0.2em; }
.ema .oscore { font-size: 58px; color: var(--accent); line-height: 1; text-shadow: 0 0 24px rgba(255,180,60,0.4); }
.ema .oscore small { font-size: 22px; margin-left: 4px; }
.ema .obest { font-size: 14px; color: var(--ink-dim); }
.ema .obest b { color: var(--ink); }
.newbest {
  font-size: 17px;
  color: #3a2410;
  background: linear-gradient(180deg, #ffe9a0, var(--accent));
  border-radius: 999px;
  padding: 6px 20px;
  display: none;
  animation: pop-in 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.newbest.show { display: block; }
@keyframes pop-in { 0% { transform: scale(0.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

.ranking { width: 100%; border-top: 1px dashed rgba(217,179,106,0.4); padding-top: 10px; min-height: 20px; }
.ranking .rtitle { font-size: 13px; color: var(--ink-dim); text-align: center; margin-bottom: 6px; letter-spacing: 0.15em; }
.ranking .row { display: flex; justify-content: space-between; font-size: 15px; padding: 2px 6px; border-radius: 8px; }
.ranking .row.me { background: rgba(255,180,60,0.16); }
.ranking .row .nm { color: var(--ink); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 200px; }
.ranking .row .sc { color: var(--accent); }
.ranking .row .rk { color: var(--ink-dim); margin-right: 8px; }

/* ---- HUDボタン ---- */
#muteBtn {
  position: absolute;
  pointer-events: auto;
  top: 12px; right: 12px;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1.5px solid rgba(217,179,106,0.6);
  background: rgba(43,27,78,0.8);
  color: var(--ink);
  font-size: 20px;
  font-family: inherit;
  cursor: pointer;
  z-index: 30;
  transition: transform 90ms ease-out;
}
#muteBtn:active { transform: scale(0.9); }
#muteBtn.off { color: var(--ink-dim); text-decoration: line-through; }

@media (prefers-reduced-motion: reduce) {
  .lantern { animation: none; }
  .ov, .ema { transition: none; }
}