/* ============================================================
   base.css — レイアウト骨格のみ（見た目の派手さは theme.css 担当）
   DOM 契約: .grid > .reel[data-col] > .cell[data-row] > .sym
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

#app {
  position: relative;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: clamp(8px, 2vw, 20px);
  gap: clamp(8px, 2vh, 18px);
}

#fx-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 50; /* 盤面より前で紙吹雪等を出す */
}

.topbar {
  width: 100%;
  max-width: 820px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 2;
}

.machine {
  position: relative;
  width: 100%;
  max-width: 820px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.frame { position: relative; width: 100%; }

/* 5×5 盤面。列(reel)を横並び、セル(cell)を縦並び */
.grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(4px, 1.2vw, 10px);
  width: 100%;
  aspect-ratio: 1 / 1;
}
.reel {
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  gap: clamp(4px, 1.2vw, 10px);
  overflow: hidden;
}
.cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
}
.sym {
  font-size: clamp(24px, 7.5vw, 60px);
  line-height: 1;
  display: block;
}

.win-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

.banner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 20;
}

.dashboard {
  width: 100%;
  max-width: 820px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(6px, 2vw, 14px);
  flex-wrap: wrap;
  z-index: 2;
}
.meter { display: flex; flex-direction: column; align-items: center; min-width: 64px; }
.meter-label { font-size: 10px; letter-spacing: 2px; opacity: .7; }
.meter-val { font-size: clamp(16px, 4.5vw, 26px); font-weight: 800; font-variant-numeric: tabular-nums; }
.bet-ctrl { display: flex; align-items: center; gap: 8px; }

.spin-btn {
  border: none;
  cursor: pointer;
  font-weight: 900;
  letter-spacing: 2px;
  padding: clamp(12px, 3vw, 18px) clamp(20px, 6vw, 40px);
  border-radius: 999px;
}
.spin-btn:disabled { cursor: not-allowed; }
.chip { cursor: pointer; border: none; border-radius: 50%; width: 40px; height: 40px; font-size: 22px; font-weight: 900; }
.mute-btn { cursor: pointer; border: none; background: transparent; font-size: 22px; }

/* 演出メッセージ: 画面中央に大きく“突然”ポップ（id指定でtheme.cssより優先） */
#message {
  position: fixed;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%) scale(.4);
  z-index: 70;
  pointer-events: none;
  opacity: 0;
  font-weight: 900;
  font-size: clamp(26px, 7vw, 56px);
  line-height: 1.15;
  text-align: center;
  max-width: 92vw;
  text-shadow: 0 0 12px rgba(0,240,255,.85), 0 0 28px rgba(122,43,255,.6), 0 0 44px rgba(255,45,149,.4);
  transition: opacity .28s ease, transform .28s ease;
}
#message.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  animation: msgPop .5s cubic-bezier(.2,1.7,.35,1);
}
@keyframes msgPop {
  0%   { transform: translate(-50%,-50%) scale(.2); opacity: 0; }
  15%  { opacity: 1; }
  60%  { transform: translate(-50%,-50%) scale(1.18); }
  100% { transform: translate(-50%,-50%) scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { #message.show { animation: none; } }

/* スター・ブースト HUD（獲得×2 中の残ゲーム表示） */
.boost-hud {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 900;
  font-size: clamp(11px, 3vw, 15px);
  letter-spacing: 1px;
  color: #1a1200;
  background: linear-gradient(135deg, #ffe66d, #ffb020 60%, #ff7a00);
  box-shadow: 0 0 14px rgba(255, 190, 40, .85), 0 0 30px rgba(255, 140, 0, .5);
  white-space: nowrap;
  animation: boostHudPulse 1s ease-in-out infinite;
}
.boost-hud.on { display: inline-flex; }
@keyframes boostHudPulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.06); filter: brightness(1.25); }
}
/* ブースト中は盤面フレームがほんのり金色に脈動 */
#app.boost-active .frame { animation: boostFrame 1.1s ease-in-out infinite; }
@keyframes boostFrame {
  0%, 100% { box-shadow: 0 0 0 rgba(255,190,40,0); }
  50% { box-shadow: 0 0 26px rgba(255,190,40,.55); }
}
@media (prefers-reduced-motion: reduce) {
  .boost-hud, #app.boost-active .frame { animation: none; }
}

/* ---- CHANCE 左右ネオン（横書き極太＋★星ネオン背景） ---- */
.chance-panel {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 56;                       /* 盤面(2)やキャンバス(50)より前面のアラート */
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;                        /* 通常は非表示。チャンス時のみ大きくフラッシュ */
  transition: opacity .3s ease;
}
.chance-panel.lit { opacity: 1; }
.chance-left  { left: clamp(-10px, 1vw, 24px); }
.chance-right { right: clamp(-10px, 1vw, 24px); }
/* うしろの星ネオン背景（極大） */
.chance-star {
  position: absolute;
  z-index: 1;
  font-size: clamp(150px, 26vw, 300px);
  line-height: 1;
  color: #ff2d95;
  text-shadow: 0 0 16px #ff2d95, 0 0 40px #ff007a, 0 0 72px #b026ff;
}
/* 横書きの極太 CHANCE 文字（星の手前）。2倍以上に拡大 */
.chance-word {
  position: relative;
  z-index: 2;
  font-family: "Arial Black", Impact, system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(38px, 8vw, 84px);
  letter-spacing: 1px;
  color: #fff8b0;
  text-shadow: 0 0 10px #ffd23f, 0 0 22px #ff9d00, 0 0 40px #ff6a00, 0 2px 3px #000;
}
.chance-panel.lit .chance-star {
  color: #ff2d95;                    /* 点灯: マゼンタ星ネオン */
  text-shadow: 0 0 14px #ff2d95, 0 0 34px #ff007a, 0 0 60px #b026ff;
  animation: chanceStar .5s ease-in-out infinite alternate;
}
.chance-panel.lit .chance-word {
  color: #fff8b0;                    /* 点灯: 金文字ネオン */
  text-shadow: 0 0 8px #ffd23f, 0 0 18px #ff9d00, 0 0 30px #ff6a00, 0 2px 2px #000;
  animation: chanceWord .55s ease-in-out infinite alternate;
}
@keyframes chanceStar {
  from { transform: scale(1) rotate(-6deg); filter: brightness(.85); }
  to   { transform: scale(1.12) rotate(6deg); filter: brightness(1.5); }
}
@keyframes chanceWord {
  from { filter: brightness(.9); }
  to   { filter: brightness(1.4); }
}

/* ---- AUTO ボタン ---- */
.auto-btn {
  cursor: pointer; border: 2px solid #00f0ff;
  background: rgba(0,20,30,.6); color: #00f0ff;
  font-weight: 900; letter-spacing: 1px;
  padding: clamp(10px,2.6vw,15px) clamp(12px,3.4vw,20px);
  border-radius: 999px;
}
.auto-btn.on {
  background: linear-gradient(135deg,#00f0ff,#00b3ff); color: #001018;
  box-shadow: 0 0 16px rgba(0,240,255,.8); border-color: #fff;
  animation: boostHudPulse 1s ease-in-out infinite;
}

/* ---- 差枚ミニ表示 ---- */
.net-mini-wrap { font-size: 11px; opacity: .85; letter-spacing: 1px; margin-right: 4px; white-space: nowrap; }
.net-mini { font-weight: 900; font-variant-numeric: tabular-nums; }
.net-mini.pos { color: #4dffa6; }
.net-mini.neg { color: #ff5d7a; }

/* ---- 設定 & 収支 オーバーレイ ---- */
.settings-panel {
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: center; justify-content: center;
  background: rgba(4,2,14,.72); backdrop-filter: blur(4px);
  padding: 16px;
}
.settings-panel.open { display: flex; }
.settings-card {
  width: min(460px, 94vw);
  background: linear-gradient(160deg,#171029,#0c0818);
  border: 1px solid rgba(255,210,63,.35);
  border-radius: 18px; padding: clamp(16px,4vw,26px);
  box-shadow: 0 0 40px rgba(122,43,255,.4), inset 0 0 30px rgba(0,0,0,.5);
  color: #eee;
}
.settings-title { font-weight: 900; font-size: clamp(16px,4.5vw,22px); letter-spacing: 1px; margin-bottom: 14px; }
.set-row { display: grid; grid-template-columns: repeat(6,1fr); gap: 6px; margin-bottom: 12px; }
.set-btn {
  cursor: pointer; border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.05); color: #cfc8e6;
  border-radius: 10px; padding: 8px 2px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.set-btn b { font-size: clamp(15px,4vw,20px); }
.set-btn small { font-size: 9px; opacity: .7; }
.set-btn.on {
  background: linear-gradient(135deg,#ffd23f,#ff8a00); color: #1a1200;
  border-color: #fff; box-shadow: 0 0 14px rgba(255,190,40,.7);
}
.settings-hint { font-size: 11px; line-height: 1.6; opacity: .8; margin-bottom: 14px; }
.settings-hint b { color: #ffd23f; }
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.stats-grid > div {
  background: rgba(0,0,0,.35); border-radius: 10px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 3px;
}
.stats-grid span { font-size: 10px; opacity: .65; letter-spacing: 1px; }
.stats-grid b { font-size: clamp(16px,4.5vw,22px); font-variant-numeric: tabular-nums; }
.stat-net.pos { color: #4dffa6; }
.stat-net.neg { color: #ff5d7a; }
.settings-actions { display: flex; gap: 10px; justify-content: flex-end; }
.settings-btn {
  cursor: pointer; border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.06); color: #eee;
  border-radius: 999px; padding: 10px 18px; font-weight: 800;
}
.settings-btn.primary { background: linear-gradient(135deg,#7a2bff,#c026d3); border-color: transparent; }
@media (prefers-reduced-motion: reduce) {
  .chance-panel.lit .chance-star, .chance-panel.lit .chance-word, .auto-btn.on { animation: none; }
}

/* ---- 絵柄ごとのシグネチャ色オーラ（見分けやすく） ---- */
.cell[data-sym] {
  border: 1.5px solid color-mix(in srgb, var(--sc, #888) 70%, transparent);
  box-shadow:
    inset 0 0 16px color-mix(in srgb, var(--sc, #888) 45%, transparent),
    0 0 10px color-mix(in srgb, var(--sc, #888) 35%, transparent);
  background:
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--sc, #888) 22%, transparent), transparent 70%);
}
.cell[data-sym="diamond"] { --sc: #00e5ff; } /* シアン */
.cell[data-sym="seven"]   { --sc: #b833ff; } /* 紫 */
.cell[data-sym="crown"]   { --sc: #ffc400; } /* 金 */
.cell[data-sym="star"]    { --sc: #ffe600; } /* 黄 */
.cell[data-sym="bell"]    { --sc: #ff7a00; } /* 橙 */
.cell[data-sym="melon"]   { --sc: #26d366; } /* 緑 */
.cell[data-sym="lemon"]   { --sc: #b6ff00; } /* ライム */
.cell[data-sym="cherry"]  { --sc: #ff2f6d; } /* 赤ピンク */

/* ---- 7 は紫のギャンブル風テキスト（絵文字でなく文字なので色が乗る） ---- */
.cell[data-sym="seven"] .sym {
  font-family: "Arial Black", Impact, system-ui, sans-serif;
  font-weight: 900;
  font-style: italic;
  color: #c64bff;
  text-shadow:
    0 0 6px #b026ff, 0 0 16px #8a00ff, 0 0 30px #6a00ff,
    0 2px 0 #4a0a7a, 0 3px 4px rgba(0,0,0,.6);
  transform: scale(1.18);
}