:root {
  --stone: #5a6e8c;
  --stone-dark: #35415a;
  --gold: #f0c24b;
  --amber: #ffb84d;
  --panel: #141a2e;
  --panel-top: #1c2440;
  --panel-bottom: #0d1224;
  --reel-bg: #f4f1e6;
  --cell: 88px;
  --lampFill: rgba(120, 200, 255, .92);
  --lampGlowA: rgba(110, 190, 255, .9);
  --lampGlowB: rgba(60, 140, 255, .7);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  background: radial-gradient(ellipse at 50% -10%, #1e2742 0%, #0d1020 55%, #070910 100%);
  color: #dfe4f0;
  font-family: -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
  touch-action: manipulation;
}
body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }

#app { max-width: 440px; margin: 0 auto; padding: 8px 10px 24px; }

header { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 4px 46px 6px 138px; position: relative; min-height: 40px; }
header h1 {
  font-size: 19px; letter-spacing: 3px; font-weight: 800;
  background: linear-gradient(180deg, #ffe9a8, #f0c24b 45%, #a8741f 55%, #ffd97a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ver { font-size: 12px; color: #7d87a3; }
#menuBtn, .hdrBtn {
  position: absolute; top: 0;
  width: 40px; height: 40px; border-radius: 10px; border: 1px solid #35415a;
  background: #1c2440; color: #b8c4dd; font-size: 19px; touch-action: manipulation;
}
#menuBtn { right: 0; }
#dexBtn { left: 0; }
#dungeonBtn.hdrBtn2 { left: 46px; }
#eventBtn.hdrBtn3 { left: 92px; color: #ffd97a; }
@media (max-width: 400px) { header h1 { font-size: 15px; letter-spacing: 2px; } }

/* ---- 勇者ステータス ---- */
#heroBar {
  display: flex; flex-direction: column; gap: 5px;
  background: #131a30; border: 1px solid #2c3854; border-radius: 10px;
  padding: 6px 10px; margin-bottom: 6px;
}
#heroBar.down { border-color: #7d3030; animation: bannerFlash 1.2s steps(2) infinite; }
.heroRow { display: flex; align-items: center; gap: 8px; }
#hpWrap { flex: 1; position: relative; height: 14px; background: #0a0e1c; border-radius: 7px; overflow: hidden; border: 1px solid #2c3854; }
#hpBar { height: 100%; width: 100%; background: linear-gradient(90deg, #3fae5c, #7fd68a); transition: width .3s, background .3s; }
#hpBar.mid { background: linear-gradient(90deg, #c9a12e, #e8c84d); }
#hpBar.low { background: linear-gradient(90deg, #b03030, #e85a5a); }
#hpText { position: absolute; inset: 0; text-align: center; font-size: 9.5px; line-height: 14px; color: #eef1f8; }
#statMini { font-size: 11px; color: #9aa6c0; white-space: nowrap; }
#statMini b { color: #eef1f8; font-variant-numeric: tabular-nums; margin-right: 4px; }
#innBtn {
  font-size: 12px; padding: 4px 10px; border-radius: 8px;
  border: 1px solid #3f5378; background: #1e2947; color: #dfe4f0; touch-action: manipulation;
  white-space: nowrap;
}
#heroLv { font-size: 13px; color: #b8c4dd; white-space: nowrap; }
#heroLv b { font-size: 18px; color: var(--gold); font-variant-numeric: tabular-nums; }
#expWrap { flex: 1; position: relative; height: 14px; background: #0a0e1c; border-radius: 7px; overflow: hidden; border: 1px solid #2c3854; }
#expBar { height: 100%; width: 0%; background: linear-gradient(90deg, #3f7fd6, #6fc2ff); transition: width .3s; }
#expText { position: absolute; inset: 0; text-align: center; font-size: 9.5px; line-height: 14px; color: #dfe4f0; }
#nextUnlock { font-size: 10px; color: #8d97b3; white-space: nowrap; }
#nextUnlock b { color: #9fd08a; }

/* ---- データカウンター ---- */
#counterBar { display: flex; gap: 4px; margin-bottom: 8px; }
.chip {
  flex: 1; background: #10162a; border: 1px solid #2c3854; border-radius: 8px;
  text-align: center; padding: 4px 1px 5px; font-size: 10px; color: #8d97b3;
}
.chip b { display: block; font-size: 14px; color: #eef1f8; font-variant-numeric: tabular-nums; margin-top: 1px; }
.chip.hot { border-color: #8a4a1e; }
.chip.hot b { color: #ff9d5c; animation: bannerFlash 1s steps(2) infinite; }
.chip b.gold { color: var(--gold); }
.chip b.silver { color: #a9b6cf; }
.chip b.soul { color: #b98cff; }

/* ---- 筐体 ---- */
#machine {
  background: linear-gradient(180deg, var(--panel-top), var(--panel) 30%, var(--panel-bottom));
  border: 2px solid var(--stone-dark);
  border-radius: 18px;
  padding: 10px 12px 14px;
  box-shadow: 0 6px 24px rgba(0,0,0,.6), inset 0 1px 0 rgba(140,180,255,.12);
  cursor: pointer;
}
/* ボーナス中: 虹色に筐体が光る */
#machine.bonus { animation: rainbowGlow 3.2s linear infinite; }
@keyframes rainbowGlow {
  0%   { border-color: #ff5a5a; box-shadow: 0 0 26px 6px rgba(255, 90, 90, .55), 0 6px 24px rgba(0,0,0,.6); }
  17%  { border-color: #ffb84d; box-shadow: 0 0 26px 6px rgba(255, 184, 77, .55), 0 6px 24px rgba(0,0,0,.6); }
  33%  { border-color: #ffe95a; box-shadow: 0 0 26px 6px rgba(255, 233, 90, .55), 0 6px 24px rgba(0,0,0,.6); }
  50%  { border-color: #5aE68a; box-shadow: 0 0 26px 6px rgba(90, 230, 138, .55), 0 6px 24px rgba(0,0,0,.6); }
  67%  { border-color: #5aa9ff; box-shadow: 0 0 26px 6px rgba(90, 169, 255, .55), 0 6px 24px rgba(0,0,0,.6); }
  83%  { border-color: #c07dff; box-shadow: 0 0 26px 6px rgba(192, 125, 255, .55), 0 6px 24px rgba(0,0,0,.6); }
  100% { border-color: #ff5a5a; box-shadow: 0 0 26px 6px rgba(255, 90, 90, .55), 0 6px 24px rgba(0,0,0,.6); }
}
#machine.bonus .sidePanel { animation: rainbowSide 3.2s linear infinite; }
@keyframes rainbowSide {
  0% { border-color: #ff5a5a; } 17% { border-color: #ffb84d; } 33% { border-color: #ffe95a; }
  50% { border-color: #5ae68a; } 67% { border-color: #5aa9ff; } 83% { border-color: #c07dff; } 100% { border-color: #ff5a5a; }
}
/* ボーナス中の液晶: 暗転の代わりに回転光条+輝きを飛ばす */
#lcd.bonusFx::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 340%; padding-top: 340%;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    rgba(255, 220, 120, .3) 0deg, transparent 24deg, rgba(120, 200, 255, .22) 50deg, transparent 76deg,
    rgba(255, 140, 160, .26) 104deg, transparent 130deg, rgba(160, 255, 180, .22) 156deg, transparent 184deg,
    rgba(255, 220, 120, .3) 210deg, transparent 236deg, rgba(190, 140, 255, .24) 262deg, transparent 290deg,
    rgba(255, 200, 120, .26) 316deg, transparent 342deg, rgba(255, 220, 120, .3) 360deg);
  animation: lcdRays 7s linear infinite;
  z-index: 1;
}
@keyframes lcdRays { to { transform: translate(-50%, -50%) rotate(360deg); } }
#lcd.bonusFx::after {
  content: "✦   ✦     ✦    ✦      ✦  ✦"; position: absolute; inset: 0; z-index: 1;
  color: rgba(255, 240, 190, .8); font-size: 13px; line-height: 2.6;
  white-space: pre-wrap; overflow: hidden; text-align: center;
  animation: lcdSpark 1.1s steps(2) infinite;
  pointer-events: none;
}
@keyframes lcdSpark { 50% { opacity: .25; } }
#machine.peka { animation: pekaFlash .16s steps(2) 5; }
@keyframes pekaFlash { 50% { filter: brightness(1.9) saturate(1.4); } }

/* ---- LEDライトバー ---- */
#lightBar {
  height: 10px; border-radius: 6px; margin: 0 2px 8px;
  background: repeating-linear-gradient(90deg, #2c3854 0 6px, #10162a 6px 18px);
  border: 1px solid #26304a;
}
#machine.bonus #lightBar {
  background: repeating-linear-gradient(90deg, #cfe8ff 0 6px, #3f7fd6 6px 12px, #9fd0ff 12px 18px);
  background-size: 18px 100%;
  animation: ledChase .38s linear infinite;
  box-shadow: 0 0 14px var(--lampGlowA);
  border-color: #6fa5e0;
}
@keyframes ledChase { to { background-position: 18px 0; } }

#reelFrame.winflash { animation: winFlash .45s ease-out; }
@keyframes winFlash { 30% { filter: brightness(1.55); } }

/* ---- 液晶画面(ステージ背景・モンスター・演出) ---- */
#lcd {
  position: relative; height: 132px; border-radius: 10px; overflow: hidden;
  border: 2px solid #2c3854; margin-bottom: 8px; background: #0a0e1c;
}
#lcdStage {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--sky1, #1c2440), var(--sky2, #10162a) 46%, var(--gnd1, #1a2138) 46%, var(--gnd2, #0a0e1c));
  transition: opacity .4s;
}
#lcdStage::after {
  content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .55);
}
#lcd[data-stage="草原"] { --sky1: #6cb8e0; --sky2: #b0e0f4; --gnd1: #74bc4a; --gnd2: #3c6e24; }
#lcd[data-stage="森"] { --sky1: #46745a; --sky2: #24462e; --gnd1: #1c3422; --gnd2: #0e1a12; }
#lcd[data-stage="洞窟"] { --sky1: #464c5c; --sky2: #282c38; --gnd1: #202430; --gnd2: #101318; }
#lcd[data-stage="火山"] { --sky1: #5c2214; --sky2: #340e06; --gnd1: #7c2a0c; --gnd2: #3c1006; }
#lcd[data-stage="雪原"] { --sky1: #a8ccec; --sky2: #dcecf8; --gnd1: #e4eef8; --gnd2: #a8bcd0; }
#lcd[data-stage="古城"] { --sky1: #38304e; --sky2: #201a36; --gnd1: #181430; --gnd2: #0a081a; }
#lcd[data-stage="魔王城"] { --sky1: #380a14; --sky2: #160408; --gnd1: #280810; --gnd2: #0a0204; }

#lcdMonster {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px;
  background: rgba(4, 6, 14, .35);
  animation: encIn .25s ease-out;
  transition: opacity .25s ease-in;
}
#lcdMonster.out { opacity: 0; }
@keyframes encIn { 0% { opacity: 0; } 100% { opacity: 1; } }
#lcdMonArt svg {
  width: 92px; height: 92px; display: block;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.5));
  animation: monArtIn .38s cubic-bezier(.2, 1.35, .4, 1);
}
@keyframes monArtIn {
  0% { transform: translateY(16px) scale(.7); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
#lcdMonText { animation: monTextIn .3s ease-out .08s backwards; }
@keyframes monTextIn { 0% { transform: translateX(8px); opacity: 0; } 100% { transform: none; opacity: 1; } }
#lcdMonText b { display: inline-block; font-size: 15px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
#lcdMonText span { display: block; font-size: 11px; color: #d8e0f0; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
#lcdMonster.rare { box-shadow: inset 0 0 30px rgba(90, 169, 255, .5); }
#lcdMonster.epic { box-shadow: inset 0 0 34px rgba(192, 125, 255, .6); }
/* 初討伐: NEWバッジ+金の強調枠 */
#lcdMonNew {
  display: inline-block !important; margin-left: 6px; padding: 1px 6px 2px;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; color: #201400;
  background: linear-gradient(180deg, #ffe07a, #f0b428); border-radius: 8px;
  vertical-align: 2px; animation: newPulse .6s ease-in-out infinite alternate;
}
#lcdMonNew.hidden { display: none !important; }
@keyframes newPulse { 0% { transform: scale(1); } 100% { transform: scale(1.16); filter: brightness(1.25); } }
#lcdMonster.newKill { box-shadow: inset 0 0 0 2px rgba(255, 214, 92, .85), inset 0 0 36px rgba(255, 196, 40, .45); }
#lcdMonComp { color: #9fe8b8 !important; font-size: 10px !important; margin-top: 1px; }

#lcdBoss {
  position: absolute; right: 6px; top: 6px; bottom: 6px; width: 190px;
  display: flex; align-items: center; gap: 6px;
  background: rgba(6, 8, 18, .55); border: 1px solid #7d3030; border-radius: 10px; padding: 4px 8px;
}
#lcdBossArt svg { width: 74px; height: 74px; display: block; }
#lcdBossInfo { flex: 1; }
#lcdBossName { font-size: 11px; font-weight: 700; color: #ff9d9d; display: block; margin-bottom: 3px; }
#lcdBossBar { position: relative; height: 12px; background: #0a0e1c; border-radius: 6px; overflow: hidden; border: 1px solid #7d3030; }
#lcdBossBar i { display: block; height: 100%; background: linear-gradient(90deg, #b03030, #e85a5a); transition: width .3s; }
#lcdBossBar span { position: absolute; inset: 0; text-align: center; font-size: 8.5px; line-height: 12px; color: #ffe3e3; }
#lcdBoss.hit { animation: bossHit .3s; }
@keyframes bossHit { 30% { filter: brightness(1.8); transform: translateX(3px); } 60% { transform: translateX(-3px); } }

#lcdMsg {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  background: rgba(4, 6, 14, .8); border: 1px solid #3f5378; border-radius: 8px;
  padding: 4px 12px; font-size: 12px; color: #cfe0ff; white-space: nowrap;
}

/* ---- リールデッキ(サイドパネル+リール) ---- */
#reelDeck { display: grid; grid-template-columns: 44px 1fr 44px; gap: 6px; align-items: stretch; }
.sidePanel {
  background: linear-gradient(180deg, var(--panel-top), var(--panel-bottom));
  border: 1px solid #2c3854; border-radius: 10px;
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 2px; gap: 10px;
}
.sideRunes { color: #3f5378; font-size: 10px; line-height: 2.1; text-align: center; margin-top: auto; margin-bottom: auto; }
.sideGem { color: #5aa9ff; font-size: 18px; margin-top: 2px; }
#machine.bonus .sidePanel { border-color: var(--gold); box-shadow: 0 0 12px var(--lampGlowB); }
#machine.bonus .sideRunes { color: var(--gold); }
.sidePanel.fx-eye { animation: fxEye 1.2s ease-out; }
@keyframes fxEye { 20% { border-color: #c07dff; box-shadow: 0 0 18px rgba(192, 125, 255, .8); } }
.sidePanel.fx-skull { animation: fxSkull 1.2s ease-out; }
@keyframes fxSkull { 20% { border-color: #9aa0a6; box-shadow: 0 0 14px rgba(200, 205, 215, .6); } }

/* ---- 告知ランプ(サイドパネル内・クリスタルオーブ) ---- */
#lamp { width: 40px; height: 30px; flex: 0 0 auto; }
#lamp svg { width: 100%; height: 100%; }
#lamp .dome { transition: fill .12s; }
#lamp.lit { animation: lampGlow 1.1s ease-in-out infinite; }
#lamp.lit .dome { fill: var(--lampFill); }
/* チャンスゾーン(連チャン可能ゾーン): エメラルドの強い明滅で一目で分かるように */
#lamp.cz:not(.lit) { animation: czGlow 1.6s ease-in-out infinite; }
#lamp.cz:not(.lit) .dome { fill: rgba(80, 235, 160, .55); }
@keyframes czGlow {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(70, 230, 150, .5)); }
  50% { filter: drop-shadow(0 0 16px rgba(70, 230, 150, 1)) drop-shadow(0 0 30px rgba(40, 200, 120, .6)); }
}
#sideL.cz {
  border-color: #46e696;
  animation: czSide 1.6s ease-in-out infinite;
}
@keyframes czSide {
  0%, 100% { box-shadow: 0 0 4px rgba(70, 230, 150, .25); }
  50% { box-shadow: 0 0 16px rgba(70, 230, 150, .75); }
}
#sideL.cz .sideRunes { color: #46e696; }
#lightBar.cz { animation: czBar 1.6s ease-in-out infinite; border-color: #2f8f60; }
@keyframes czBar {
  0%, 100% { box-shadow: 0 0 4px rgba(70, 230, 150, .2); }
  50% { box-shadow: 0 0 16px rgba(70, 230, 150, .6); }
}
@keyframes lampGlow {
  0%, 100% { filter: drop-shadow(0 0 6px var(--lampGlowA)) drop-shadow(0 0 22px var(--lampGlowB)); }
  50% { filter: drop-shadow(0 0 14px var(--lampGlowA)) drop-shadow(0 0 40px var(--lampGlowB)); }
}

#bonusBanner {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  background: rgba(6, 10, 22, .45); border-radius: 12px;
  z-index: 2;
}
#bonusName {
  font-size: 26px; font-weight: 900; letter-spacing: 4px;
  background: linear-gradient(180deg, #fff3c4, var(--gold) 40%, #b0791d 60%, #ffe29a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: bannerFlash .5s steps(2) infinite;
}
#bonusBanner.reg #bonusName {
  background: linear-gradient(180deg, #dfe8ff, #a9b6cf 40%, #5a6e8c 60%, #cfd9f0);
  -webkit-background-clip: text; background-clip: text;
}
#bonusLeft { font-size: 13px; color: #cfe0ff; font-variant-numeric: tabular-nums; }
@keyframes bannerFlash { 50% { opacity: .55; } }

/* ---- リール ---- */
#reelFrame {
  position: relative;
  background: linear-gradient(180deg, var(--stone-dark), var(--stone) 12%, var(--stone-dark) 88%, var(--panel-bottom));
  border-radius: 12px; padding: 8px;
}
#reelWindow {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px;
  background: #1a2138; border-radius: 8px; overflow: hidden;
  height: calc(var(--cell) * 3);
}
.reelCol { position: relative; overflow: hidden; background: var(--reel-bg); }
.reelCol::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,16,32,.42) 0%, rgba(10,16,32,0) 18%, rgba(10,16,32,0) 82%, rgba(10,16,32,.42) 100%);
}
.strip { will-change: transform; }
.cell { height: var(--cell); display: flex; align-items: center; justify-content: center; }
.cell svg { width: 88%; height: 88%; }

/* 狙えカットイン */
#cutin {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(120, 10, 10, .0) 30%, rgba(160, 20, 20, .55) 50%, rgba(120, 10, 10, .0) 70%);
  z-index: 5; pointer-events: none;
  animation: cutinFlash .5s steps(2) infinite;
}
#cutin span {
  font-size: 44px; font-weight: 900; letter-spacing: 6px; font-style: italic;
  color: #fff; -webkit-text-stroke: 2px #b01818;
  text-shadow: 0 0 18px rgba(255, 80, 60, .9), 0 4px 0 #700;
  transform: rotate(-6deg);
  animation: cutinZoom .4s cubic-bezier(.2, 1.6, .4, 1);
}
@keyframes cutinFlash { 50% { filter: brightness(1.5); } }
@keyframes cutinZoom { 0% { transform: rotate(-6deg) scale(2.4); opacity: 0; } 100% { transform: rotate(-6deg) scale(1); opacity: 1; } }

/* X揃い演出(赤7・四隅に7を表示) */
#xAlign { position: absolute; inset: 8px; z-index: 5; pointer-events: none; animation: cutinFlash .4s steps(2) infinite; }
#xAlign .xCell { position: absolute; width: 30%; height: 31%; }
#xAlign .xCell svg { width: 100%; height: 100%; filter: drop-shadow(0 0 10px rgba(255, 80, 60, .9)); }
#xAlign .x00 { left: 1%; top: 1%; }
#xAlign .x02 { right: 1%; top: 1%; }
#xAlign .x20 { left: 1%; bottom: 1%; }
#xAlign .x22 { right: 1%; bottom: 1%; }

.lineMark { position: absolute; top: 50%; width: 0; height: 0; transform: translateY(-50%); }
.lineMark.left { left: 1px; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 8px solid #cfe0ff; }
.lineMark.right { right: 1px; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-right: 8px solid #cfe0ff; }

/* ---- LED表示 ---- */
#ledRow { display: flex; gap: 8px; margin-top: 10px; align-items: stretch; }
.led {
  flex: 1; background: #070a14; border: 1px solid #2c3854; border-radius: 8px;
  padding: 4px 10px 6px; display: flex; align-items: baseline; justify-content: space-between;
}
.led label { font-size: 10px; color: #6f7d9c; letter-spacing: 1px; }
.led span {
  font-family: "Courier New", monospace; font-weight: 700; font-size: 22px;
  color: #7fc2ff; text-shadow: 0 0 8px rgba(90, 170, 255, .55);
  font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right;
}
.replayLed {
  flex: 0 0 auto; display: flex; align-items: center; font-size: 11px; font-weight: 700;
  color: #ff9db8; text-shadow: 0 0 8px rgba(255, 120, 160, .8); letter-spacing: 1px;
  animation: bannerFlash .6s steps(2) infinite;
}

/* ---- 操作系 ---- */
#controls { margin-top: 12px; }
#stopRow { display: flex; justify-content: space-around; gap: 10px; }
.stopBtn {
  width: 76px; height: 76px; border-radius: 50%; border: 3px solid #2a3854;
  background: radial-gradient(circle at 35% 30%, #5aa9ff, #2764c6 60%, #143a7d);
  color: #fff; font-size: 18px; font-weight: 900;
  box-shadow: 0 5px 0 #0e2450, 0 8px 14px rgba(0,0,0,.5);
  touch-action: manipulation;
}
.stopBtn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 #0e2450; }
.stopBtn:disabled { filter: grayscale(.75) brightness(.55); box-shadow: 0 5px 0 #101a30; }
.stopBtn span { pointer-events: none; }
#tapHint { text-align: center; font-size: 12px; color: #6f7d9c; margin-top: 12px; letter-spacing: 1px; }

/* ---- モンスター遭遇ポップ ---- */
#encounter {
  position: fixed; left: 50%; top: 34%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; z-index: 30;
  background: rgba(8, 12, 26, .92); border: 1px solid #3f5378; border-radius: 14px;
  padding: 8px 14px 8px 8px;
  animation: encPop .35s ease-out;
  pointer-events: none;
}
@keyframes encPop { 0% { transform: translateX(-50%) scale(.6); opacity: 0; } 100% { transform: translateX(-50%) scale(1); opacity: 1; } }
#encArt svg { width: 64px; height: 64px; display: block; }
#encText b { display: block; font-size: 14px; color: #eef1f8; }
#encText span { font-size: 11px; color: #8d97b3; }
#encounter.rare { border-color: #5aa9ff; box-shadow: 0 0 18px rgba(90, 169, 255, .5); }
#encounter.epic { border-color: #c07dff; box-shadow: 0 0 22px rgba(192, 125, 255, .55); }

/* ---- 配当表 ---- */
#paytable { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 8px; margin-top: 12px; }
.payItem {
  display: flex; align-items: center; gap: 6px; font-size: 12px; color: #9aa6c0;
  background: #10162a; border: 1px solid #26304a; border-radius: 8px; padding: 3px 8px;
}
.payIcon { width: 34px; height: 26px; flex: 0 0 auto; background: var(--reel-bg); border-radius: 4px; display: flex; align-items: center; justify-content: center; }
.payIcon svg { width: 90%; height: 90%; }
.payNote { font-size: 10px; color: #5f6b88; margin-top: 6px; text-align: center; }

/* ---- トースト ---- */
#toast {
  position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%);
  background: rgba(8, 12, 26, .94); color: #cfe0ff; border: 1px solid #3f5378;
  padding: 10px 18px; border-radius: 10px; font-size: 14px; z-index: 90;
  max-width: 86vw; text-align: center;
}

/* ---- オーバーレイ共通 ---- */
.overlay {
  position: fixed; inset: 0; background: rgba(2, 4, 10, .7); z-index: 40;
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet {
  width: 100%; max-width: 440px; max-height: 84vh; overflow-y: auto;
  background: #131a30; border: 1px solid #35415a; border-radius: 18px 18px 0 0;
  padding: 18px 18px 26px;
}
.sheet h2 { font-size: 17px; color: #eef1f8; margin-bottom: 12px; }
.subCount { font-size: 12px; color: #9fd08a; }
.sheet section { margin-bottom: 18px; }
.sheet h3 { font-size: 13px; color: #8d97b3; margin-bottom: 8px; }
.sheetClose {
  width: 100%; margin-top: 4px; font-size: 16px; padding: 11px;
  border-radius: 10px; border: 1px solid #3f5378; background: #1e2947; color: #dfe4f0;
  touch-action: manipulation;
}
.note { font-size: 12px; color: #8fa2c8; min-height: 1em; margin-bottom: 8px; }
.ownerTag { font-size: 10px; color: #7fc98a; border: 1px solid #3f6d48; border-radius: 6px; padding: 1px 6px; margin-left: 6px; }

/* ---- イベント ---- */
.evCard {
  background: #10162a; border: 1px solid #3f5378; border-radius: 12px;
  padding: 12px; margin-bottom: 12px;
}
.evCard h3 { font-size: 15px; color: #ffe9a8; margin-bottom: 4px; }
.evType { font-size: 10px; color: #8fa2c8; border: 1px solid #3f5378; border-radius: 6px; padding: 1px 6px; margin-left: 6px; }
.evIntro { font-size: 12px; color: #9aa6c0; line-height: 1.7; white-space: pre-line; margin-bottom: 10px; }
.stageRow {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px;
  background: #0c1120; border: 1px solid #26304a; border-radius: 8px;
  padding: 7px 10px; margin-bottom: 5px;
}
.stageRow .stIcon { width: 20px; text-align: center; }
.stageRow .stName { color: #dfe4f0; font-weight: 700; }
.stageRow .stDesc { display: block; font-size: 11px; color: #8d97b3; }
.stageRow .stProg { margin-left: auto; font-size: 11px; color: #9fd08a; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stageRow.cur { border-color: var(--gold); background: #141c33; }
.stageRow.done { opacity: .6; }
.stageRow.lock { opacity: .4; }
.bossWrap { margin: 6px 0 4px; }
.bossHead { display: flex; align-items: center; gap: 10px; }
.bossHead svg { width: 72px; height: 72px; }
.bossHead .bossNm { font-size: 14px; font-weight: 700; color: #ff9d9d; }
.bossBarWrap { position: relative; height: 16px; background: #0a0e1c; border: 1px solid #7d3030; border-radius: 8px; overflow: hidden; margin-top: 6px; }
.bossBar { height: 100%; background: linear-gradient(90deg, #b03030, #e85a5a); transition: width .3s; }
.bossBarWrap span { position: absolute; inset: 0; text-align: center; font-size: 10px; line-height: 16px; color: #ffe3e3; }
.evReward { font-size: 12px; color: #ffd97a; margin-top: 8px; }
.evClearedList { font-size: 12px; color: #8d97b3; line-height: 1.9; }
.evClearedList b { color: #9fd08a; }

/* ---- 宿屋 ---- */
#innStats {
  display: flex; gap: 14px; justify-content: center; font-size: 14px;
  background: #10162a; border: 1px solid #26304a; border-radius: 10px;
  padding: 10px; margin-bottom: 10px;
}
#innStats b { color: #eef1f8; font-variant-numeric: tabular-nums; }
#innBtns { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
#innBtns button {
  font-size: 16px; padding: 12px; border-radius: 10px;
  border: 1px solid #3f6d48; background: #1a2e22; color: #b8e8c0; touch-action: manipulation;
}
#innBtns button:disabled { opacity: .45; }

/* ---- 解禁ロードマップ ---- */
#unlockList { display: flex; flex-direction: column; gap: 5px; }
.unlockRow {
  display: flex; align-items: center; gap: 10px; font-size: 13px;
  background: #10162a; border: 1px solid #26304a; border-radius: 8px; padding: 6px 10px;
}
.unlockRow .lv { width: 46px; font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; }
.unlockRow.done { border-color: #3f6d48; }
.unlockRow.done .lv { color: #7fc98a; }
.unlockRow.locked { opacity: .55; }
.unlockRow .st { margin-left: auto; font-size: 11px; color: #8d97b3; }

/* ---- 図鑑 ---- */
.dexFam { margin-bottom: 14px; }
.dexFam h3 { font-size: 12px; color: #9aa6c0; margin-bottom: 6px; }
.dexGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.dexCard {
  background: #10162a; border: 1px solid #26304a; border-radius: 8px;
  padding: 4px 2px; text-align: center;
}
.dexCard svg { width: 56px; height: 56px; }
.dexCard .nm { display: block; font-size: 9px; color: #c6cede; line-height: 1.2; }
.dexCard .kc { display: block; font-size: 8.5px; color: #8d97b3; }
.dexCard.unseen svg { filter: brightness(0) opacity(.55); }
.dexCard.unseen .nm { color: #4a5470; }

/* ---- ダンジョン ---- */
#dungeonList { display: flex; flex-direction: column; gap: 6px; }
.dgRow {
  display: flex; align-items: center; gap: 10px; font-size: 14px;
  background: #10162a; border: 1px solid #26304a; border-radius: 10px; padding: 10px 12px;
  touch-action: manipulation;
}
.dgRow .dgNm { font-weight: 700; color: #eef1f8; }
.dgRow .dgInfo { margin-left: auto; font-size: 11px; color: #8d97b3; }
.dgRow.sel { border-color: var(--gold); background: #1a2138; }
.dgRow.sel .dgNm { color: var(--gold); }
.dgRow.locked { opacity: .5; }

/* ---- メニュー ---- */
#settingNow { color: var(--gold); }
#settingBtns { display: flex; flex-wrap: wrap; gap: 6px; }
#settingBtns button, #addCredits, #resetData {
  font-size: 16px; padding: 9px 14px; border-radius: 10px;
  border: 1px solid #3f5378; background: #1e2947; color: #dfe4f0;
  touch-action: manipulation;
}
#settingBtns button.sel { background: #3f7fd6; color: #fff; border-color: #6fa5e0; }
.opt { display: flex; align-items: center; gap: 9px; font-size: 15px; padding: 7px 0; }
.opt input[type="checkbox"] { width: 20px; height: 20px; accent-color: #3f7fd6; }
.opt input[type="range"] { flex: 1; accent-color: #3f7fd6; height: 24px; }
#resetData.danger { border-color: #7d3030; color: #ff9d9d; }

/* ---- ストーリー/リザルト ---- */
#storyOverlay, #resultOverlay { align-items: center; z-index: 60; }
#storyPanel, #resultPanel {
  width: 86%; max-width: 360px; text-align: center;
  background: linear-gradient(180deg, #1c2440, #10162a);
  border: 2px solid var(--gold); border-radius: 18px; padding: 26px 20px 18px;
  box-shadow: 0 0 40px rgba(240, 194, 75, .3);
  animation: resultPop .35s ease-out;
}
@keyframes resultPop { 0% { transform: scale(.7); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
#storyKicker { font-size: 12px; letter-spacing: 3px; color: #9fd08a; margin-bottom: 6px; }
#storyPanel h2 { font-size: 24px; color: #ffe9a8; letter-spacing: 2px; }
#storyBody { font-size: 13px; color: #c6cede; line-height: 1.9; margin: 12px 0 14px; white-space: pre-line; }
#storyPanel.locked .closeHint { visibility: hidden; }
#storyPanel.levelup {
  border-color: #ffe27a;
  background:
    radial-gradient(circle at 50% 0%, rgba(240, 194, 75, .22), transparent 60%),
    linear-gradient(180deg, #1c2440, #10162a);
  box-shadow: 0 0 60px rgba(240, 194, 75, .5);
  animation: levelupPop .5s cubic-bezier(.2, 1.4, .4, 1);
}
@keyframes levelupPop {
  0% { transform: scale(.5) rotate(-2deg); opacity: 0; }
  60% { transform: scale(1.06); }
  100% { transform: scale(1); opacity: 1; }
}
#storyPanel.levelup #storyKicker { color: #ffd97a; animation: bannerFlash .7s steps(2) infinite; }
#resultPanel h2 { font-size: 20px; color: #ffe9a8; letter-spacing: 2px; }
#resultCoins {
  font-size: 46px; font-weight: 900; margin: 10px 0 14px;
  background: linear-gradient(180deg, #fff3c4, var(--gold) 45%, #b0791d 60%, #ffe29a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
#resultCoins span { font-size: 20px; }
#resultDetail { display: flex; justify-content: center; gap: 18px; margin-bottom: 14px; }
#resultDetail div { text-align: center; }
#resultDetail dt { font-size: 10px; color: #8d97b3; }
#resultDetail dd { font-size: 14px; color: #eef1f8; margin-top: 2px; }
.closeHint { font-size: 12px; color: #6f7d9c; animation: bannerFlash 1s steps(2) infinite; }

.hidden { display: none !important; }

@media (max-width: 430px) { :root { --cell: 21vw; } }

/* ---- 液晶の勇者(歩きアニメ) ---- */
#lcdHero {
  position: absolute; left: 50%; bottom: 4px; width: 56px; height: 66px;
  margin-left: -28px; /* 画面中央・後ろ姿で世界へ歩いていく構図 */
  pointer-events: none; z-index: 0; /* モンスター/ボス/バナーより奥(DOM順で下) */
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45));
}
#lcdHero svg { width: 100%; height: 100%; display: block; }
#lcd[data-stage="雪原"] #lcdHero { filter: drop-shadow(0 2px 3px rgba(40, 60, 90, .5)); }

/* ---- リールロック演出 ---- */
#lockFx {
  position: absolute; inset: 0; z-index: 6; display: flex;
  align-items: center; justify-content: center; pointer-events: none;
  background: rgba(4, 6, 14, .55);
}
#lockFx.hidden { display: none; }
#lockFx span {
  display: inline-block; padding: 8px 18px; border-radius: 8px;
  font-size: 20px; font-weight: 800; letter-spacing: .1em; color: #eef3ff;
  border: 2px solid #5b6b8c; background: linear-gradient(180deg, #2a3450, #141b30);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(180, 210, 255, .25);
  animation: lockSlam .3s cubic-bezier(.2, 1.6, .4, 1);
  text-shadow: 0 2px 4px rgba(0, 0, 0, .7);
}
#lockFx.stage2 span { color: #ffd9d9; border-color: #b03a3a; background: linear-gradient(180deg, #5c1c1c, #2a0c0c); }
#lockFx.stage3 span {
  color: #241400; border-color: #ffe07a;
  background: linear-gradient(180deg, #ffe07a, #e8a818);
  box-shadow: 0 0 26px rgba(255, 205, 60, .75), 0 4px 18px rgba(0, 0, 0, .6);
}
@keyframes lockSlam { 0% { transform: scale(2.1); opacity: 0; } 60% { transform: scale(.95); opacity: 1; } 100% { transform: scale(1); } }
#reelFrame.lockShake { animation: lockShakeAnim .3s linear; }
@keyframes lockShakeAnim {
  0%, 100% { transform: none; }
  20% { transform: translate(-3px, 1px); }
  40% { transform: translate(3px, -1px); }
  60% { transform: translate(-2px, -1px); }
  80% { transform: translate(2px, 1px); }
}

/* ---- ボスART(バトル) ---- */
#machine.art { animation: artGlow 1.6s ease-in-out infinite alternate; }
@keyframes artGlow {
  0%   { border-color: #b03a3a; box-shadow: 0 0 18px 3px rgba(220, 70, 70, .5), 0 6px 24px rgba(0,0,0,.6); }
  100% { border-color: #7d2aa8; box-shadow: 0 0 26px 6px rgba(170, 80, 230, .55), 0 6px 24px rgba(0,0,0,.6); }
}
#machine.art .sidePanel { border-color: #b03a3a; }
#machine.art #lightBar {
  background: repeating-linear-gradient(90deg, #ffb0b0 0 6px, #b03a3a 6px 12px, #e080ff 12px 18px);
  background-size: 18px 100%;
  animation: ledChase .3s linear infinite;
  border-color: #b05a5a;
}
#lcd.artFx::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 80%, rgba(200, 40, 40, .28), transparent 60%);
  animation: artPulse 1.2s ease-in-out infinite alternate;
}
@keyframes artPulse { 100% { opacity: .35; } }

#artHud {
  position: absolute; left: 6px; right: 6px; bottom: 4px; z-index: 3;
  display: flex; align-items: center; gap: 8px;
  background: rgba(10, 4, 8, .72); border: 1px solid #b03a3a; border-radius: 8px;
  padding: 3px 8px; font-size: 10.5px; color: #ffd9d9;
}
#artHud.hidden { display: none; }
#artHudMain { font-weight: 700; white-space: nowrap; }
#artHudSub { white-space: nowrap; color: #ffb0b0; }
#artHpWrap { flex: 1; height: 8px; background: #200a0e; border-radius: 4px; overflow: hidden; border: 1px solid #5c1c1c; }
#artHpBar { height: 100%; width: 100%; background: linear-gradient(90deg, #e05555, #ff9a7a); transition: width .25s; }
#artHud.setMode #artHpBar { background: linear-gradient(90deg, #7a5aff, #b48cff); }
#artHud.battle { border-color: #ffd97a; color: #ffe9b0; animation: bannerFlash .8s steps(2) infinite; }

#artIntro {
  position: absolute; inset: 0; z-index: 7; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: rgba(20, 4, 8, .78);
}
#artIntro.hidden { display: none; }
#artIntro .aiKicker {
  font-size: 26px; font-weight: 900; letter-spacing: .12em; color: #ff5a5a;
  text-shadow: 0 0 18px rgba(255, 60, 60, .8), 0 2px 4px rgba(0,0,0,.8);
  animation: lockSlam .35s cubic-bezier(.2, 1.6, .4, 1);
}
#artIntro #artIntroBoss {
  font-size: 14px; font-weight: 700; color: #ffe9b0; text-shadow: 0 1px 3px rgba(0,0,0,.8);
  animation: monTextIn .4s ease-out .15s backwards;
}