:root {
  --cell-h: 70px;
  --reel-w: 92px;
}

/* 画面には見せず、検索エンジンと読み上げ（スクリーンリーダー）にだけ届けるテキスト */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* iOS: 連打でテキスト選択の拡大鏡ルーペが出ないよう、全要素で選択を無効化 */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

::selection {
  background: transparent;
}

html,
body {
  /* iOS: ダブルタップズーム・長押しメニュー・選択を抑止 */
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  /* 端でのゴムバンドスクロールを抑える（対応ブラウザのみ） */
  overscroll-behavior-y: none;
}

html {
  background: #07070d;
}

body {
  font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  /* 環境光は暗め: 薄暗いホールの中で筐体のランプだけが光って見えるように */
  background: radial-gradient(1200px 800px at 50% 12%, #15151f 0%, #07070d 65%);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  /* min-heightは指定しない: iOSの100vhはツールバー裏まで含むため、
     指定すると中身が収まっていても必ずスクロールが発生してしまう */
  /* ページ下端が筐体下端と一致するよう、下の余白は持たない */
  padding: 12px 12px 0;
}

/* ===== 全体（データカウンター＋筐体＋グラフ） ===== */
.cabinet {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

/* ===== データカウンター ===== */
.data-counter {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  background: linear-gradient(180deg, #1c1c1c, #000);
  border: 2px solid #444;
  border-radius: 10px;
  padding: 4px 10px;
}

.dc-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* ラベルを上・数値を下に寄せる: フォントが小さい合算の数値も
     隣（ゲーム数）の数値と下辺が揃う */
  justify-content: space-between;
  gap: 2px;
  min-width: 0;
}

/* グループの区切り線（総回転 | BIG・REG | ゲーム数・合算 | ペカ連・最大連） */
.dc-item:nth-child(1),
.dc-item:nth-child(3),
.dc-item:nth-child(5) {
  border-right: 1px solid rgba(255, 255, 255, 0.13);
  padding-right: 6px;
}

.dc-label {
  font-size: 10px;
  letter-spacing: 1px;
  color: #ff9100;
  white-space: nowrap;
}

.dc-value {
  font-family: "Courier New", monospace;
  font-weight: 700;
  font-size: 20px;
  color: #39ff14;
  text-shadow: 0 0 6px rgba(57, 255, 20, 0.9), 0 0 14px rgba(57, 255, 20, 0.5),
               0 0 28px rgba(57, 255, 20, 0.35);
  white-space: nowrap;
}

/* 合算は桁が多い（1/250.0など）のでフォントを小さめに */
#dc-rate {
  font-size: 15px;
}

/* 消化中のボーナス種別がわかるよう、該当の数字を明暗グラデーションで明滅させる */
.dc-value.consuming {
  animation: dc-pulse 1s ease-in-out infinite alternate;
}

@keyframes dc-pulse {
  from {
    color: #114d08;
    text-shadow: none;
  }
  to {
    color: #c8ffbe;
    text-shadow: 0 0 10px rgba(57, 255, 20, 1), 0 0 24px rgba(150, 255, 130, 0.9);
  }
}

/* ===== スランプグラフ（上部パネルのタップでオーバーレイ表示） ===== */
.top-zone {
  position: relative;
  cursor: pointer;
}

.graph-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  background: rgba(8, 8, 14, 0.78);
  border: 2px solid rgba(243, 198, 58, 0.5);
  border-radius: 10px;
  padding: 8px 10px 10px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.graph-overlay.hidden {
  display: none;
}

.graph-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  letter-spacing: 2px;
  color: #ff9100;
  margin-bottom: 6px;
}

.graph-net {
  font-family: "Courier New", monospace;
  font-weight: 700;
  font-size: 16px;
  color: #39ff14;
  text-shadow: 0 0 6px rgba(57, 255, 20, 0.9);
}

.graph-overlay canvas {
  display: block;
  flex: 1;
  min-height: 0;
  width: 100%;
}

/* ===== ボーナス履歴グラフ（過去10回・最新が一番左） ===== */
.history-note {
  font-size: 10px;
  letter-spacing: 1px;
  color: #ffd54f;
}

.history-bars {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 3px;
  padding-top: 2px;
}

.history-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 3px;
}

.history-games {
  font-family: "Courier New", monospace;
  font-size: 10px;
  font-weight: 700;
  color: #ffd54f;
  text-shadow: 0 0 6px rgba(255, 213, 79, 0.7);
}

/* ゲーム数に応じた緑の積みブロック */
.history-bar {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.history-bar i {
  width: 14px;
  height: 5px;
  border-radius: 2.5px;
  background: linear-gradient(180deg, #b9f6ca, #43a047);
  box-shadow: 0 0 4px rgba(76, 175, 80, 0.55);
}

.history-type {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 1px 4px;
  border-radius: 3px;
  color: #fff;
  /* 「虹」（1文字）もBB/RBと同じ幅に揃える */
  min-width: 22px;
  text-align: center;
}

.history-type.big { background: #e53935; }
.history-type.reg { background: #1e88e5; }
.history-type.none { background: #2a2a2a; color: #666; }

/* レインボー当選のボーナスは虹色ボックス */
.history-type.rainbow {
  background: conic-gradient(from 45deg,
    #ff1744, #ff9100, #ffea00, #00e676, #00b0ff, #651fff, #d500f9, #ff1744);
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.9);
}

/* 一番左（回転中）はボックスなし。高さ合わせの透明スペーサー */
.history-type.spacer { visibility: hidden; }

/* ===== 筐体 ===== */
.machine {
  background: linear-gradient(160deg, #e8323e 0%, #c4121f 40%, #8e0b16 100%);
  border: 4px solid #f3c63a;
  border-radius: 18px;
  padding: 14px 18px 16px;
  text-align: center;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.7), inset 0 0 24px rgba(0, 0, 0, 0.35);
  width: 100%;
  /* 中のテキスト（メッセージや桁数）に引っ張られて幅が変わらないようにする */
  min-width: 0;
}

/* 筐体色のバリエーション（読み込み時に 赤8:緑1:ピンク1 で抽選） */
.machine.body-green {
  background: linear-gradient(160deg, #2fbf4e 0%, #169a36 40%, #0a6b21 100%);
}

.machine.body-pink {
  background: linear-gradient(160deg, #ff7fbd 0%, #f0539b 40%, #b02a6e 100%);
}

/* ボーナス中は筐体がビカビカ光る（BIG: 虹色） */
.machine.bonus {
  animation: cabinet-flash 0.5s linear infinite;
}

@keyframes cabinet-flash {
  0%   { box-shadow: 0 0 28px #ffd700, 0 0 70px rgba(255, 61, 0, 0.42); border-color: #ffd700; }
  25%  { box-shadow: 0 0 28px #00e5ff, 0 0 70px rgba(41, 121, 255, 0.42); border-color: #00e5ff; }
  50%  { box-shadow: 0 0 28px #76ff03, 0 0 70px rgba(255, 234, 0, 0.42); border-color: #76ff03; }
  75%  { box-shadow: 0 0 28px #ff4081, 0 0 70px rgba(213, 0, 249, 0.42); border-color: #ff4081; }
  100% { box-shadow: 0 0 28px #ffd700, 0 0 70px rgba(255, 61, 0, 0.42); border-color: #ffd700; }
}

/* REG中は赤系のランプだけで光る */
.machine.bonus.bonus-reg {
  animation: cabinet-flash-red 0.6s linear infinite;
}

@keyframes cabinet-flash-red {
  0%   { box-shadow: 0 0 22px #ff1744, 0 0 50px #b71c1c; border-color: #ff5252; }
  50%  { box-shadow: 0 0 46px #ff5252, 0 0 90px #ff1744; border-color: #ffcdd2; }
  100% { box-shadow: 0 0 22px #ff1744, 0 0 50px #b71c1c; border-color: #ff5252; }
}

/* 5倍速モード中の表示 */
.machine {
  position: relative;
}

/* オート中の表示は下部パネル（I'm PEKALAR）の左端に出す。
   1倍はカミナリマークのみ（data-turbo空）、ターボ中は ⚡×5 のように倍率つき */
.machine.turbo .bottom-panel::before {
  content: "⚡" attr(data-turbo);
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-style: normal;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0;
  color: #ffea00;
  text-shadow: 0 0 8px rgba(255, 234, 0, 0.9);
  animation: turbo-blink 0.4s infinite alternate;
  pointer-events: none;
}

@keyframes turbo-blink {
  from { opacity: 0.5; }
  to   { opacity: 1; }
}

/* 筐体のエイジング加工: ランダムなキズ・擦れ跡をJSでcanvasに描く（slot.jsのpaintAging） */
.aging-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  pointer-events: none;
}

/* ===== トップパネル ===== */
.top-panel {
  background: linear-gradient(180deg, #1c1c1c, #000);
  border: 2px solid #f3c63a;
  border-radius: 10px;
  padding: 3px 10px 5px;
  margin-bottom: 8px;
}

.big-chance {
  font-size: 9px;
  letter-spacing: 3px;
  color: #ddd;
  font-style: italic;
}

.big-chance .t777 {
  color: #ff3b30;
  font-weight: 900;
  font-size: 12px;
  text-shadow: 0 0 8px rgba(255, 59, 48, 0.9);
}

.juggler-logo {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 900;
  font-size: 36px;
  letter-spacing: 5px;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.8));
}

/* 1文字ずつspan化してあるので、各文字に金グラデーションを直接適用
   （親からの background: inherit はiOSのWebKitで正しく描画されない） */
.juggler-logo span {
  display: inline-block;
  /* イタリック体のはみ出しがクリップで欠けないよう左右に余白を取り、marginで詰める */
  padding: 0 3px;
  margin: 0 -3px;
  background-image: linear-gradient(180deg, #fff3b0 0%, #f3c63a 40%, #b8860b 75%, #f3c63a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ボーナス中はロゴの文字が左から順番に点滅する */
.machine.bonus .juggler-logo span {
  animation: logo-blink 1.05s linear infinite;
}

.machine.bonus .juggler-logo span:nth-child(1) { animation-delay: 0s; }
.machine.bonus .juggler-logo span:nth-child(2) { animation-delay: 0.15s; }
.machine.bonus .juggler-logo span:nth-child(3) { animation-delay: 0.3s; }
.machine.bonus .juggler-logo span:nth-child(4) { animation-delay: 0.45s; }
.machine.bonus .juggler-logo span:nth-child(5) { animation-delay: 0.6s; }
.machine.bonus .juggler-logo span:nth-child(6) { animation-delay: 0.75s; }
.machine.bonus .juggler-logo span:nth-child(7) { animation-delay: 0.9s; }

@keyframes logo-blink {
  0%, 18% { opacity: 0.15; }
  35%, 100% { opacity: 1; }
}

/* ===== 設定選択 ===== */
.setting-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
  font-size: 13px;
  color: #ffe9a8;
}

.setting-row select {
  background: #222;
  color: #ffd700;
  border: 1px solid #f3c63a;
  border-radius: 4px;
  padding: 2px 8px;
  font-family: inherit;
  font-size: 13px;
  /* ドロップダウンの矢印は出さない */
  appearance: none;
  -webkit-appearance: none;
}

/* サウンドON/OFFボタン（黄色いスピーカーアイコン・設定の右隣） */
.sound-btn {
  width: 28px;
  /* 高さは設定セレクトに合わせる（行いっぱいに伸ばす） */
  align-self: stretch;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  background: #222;
  border: 1px solid #f3c63a;
  border-radius: 4px;
  cursor: pointer;
}

.sound-btn svg {
  width: 16px;
  height: 16px;
  overflow: visible;
}

.sound-btn .spk {
  fill: #ffd700;
}

.sound-btn .wave {
  fill: none;
  stroke: #ffd700;
  stroke-width: 2;
  stroke-linecap: round;
}

.sound-btn .mute-line {
  stroke: #ff5252;
  stroke-width: 2.5;
  stroke-linecap: round;
  display: none;
}

.sound-btn.sound-off .wave { display: none; }
.sound-btn.sound-off .spk { fill: #8a7a33; }
.sound-btn.sound-off .mute-line { display: block; }

.auto-btn {
  align-self: stretch;
  height: auto;
  padding: 0 5px;
  background: #222;
  border: 1px solid #f3c63a;
  border-radius: 4px;
  color: #8a7a33;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  white-space: nowrap;
}
.auto-btn.auto-on {
  background: #3a2a00;
  color: #ffd700;
  box-shadow: 0 0 6px rgba(255, 215, 0, 0.6);
}
/* オート実行中はぼわぼわと明滅する */
.auto-btn.auto-active {
  background: #3a2a00;
  color: #ffd700;
  animation: auto-glow 0.9s ease-in-out infinite;
}
@keyframes auto-glow {
  0%, 100% {
    box-shadow: 0 0 3px rgba(255, 215, 0, 0.4);
    color: #c9a833;
  }
  50% {
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.95), 0 0 20px rgba(255, 215, 0, 0.5);
    color: #fff3b0;
  }
}

/* シェアボタン（AUTOの右隣・結果カードをXへ共有） */
.share-btn {
  align-self: stretch;
  height: auto;
  padding: 0 7px;
  background: #0d2a5c;
  border: 1px solid #4f91e0;
  border-radius: 4px;
  color: #9cd0ff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  white-space: nowrap;
}
.share-btn:hover {
  background: #14387a;
  color: #d6ecff;
}
.share-btn:active {
  box-shadow: 0 0 8px rgba(79, 145, 224, 0.8);
}

/* ===== リール ===== */
.reel-frame {
  background: linear-gradient(180deg, #d9d9d9, #8c8c8c 15%, #4d4d4d 90%);
  border-radius: 12px;
  padding: 8px;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.6);
}

.reel-window {
  position: relative;
  display: flex;
  gap: 8px;
  justify-content: center;
  background: #0a0a0a;
  padding: 10px;
  border-radius: 8px;
}

.reel {
  width: var(--reel-w);
  height: calc(var(--cell-h) * 3);
  overflow: hidden;
  background: linear-gradient(180deg, #d8d8d0 0%, #fdfdf8 18%, #fdfdf8 82%, #d8d8d0 100%);
  border-radius: 4px;
  position: relative;
}

/* リールは大きな円筒: 上下端が暗く落ち、中央に光が当たる影を重ねて立体感を出す */
.reel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.14) 10%,
      rgba(255, 255, 255, 0.1) 32%, rgba(255, 255, 255, 0.16) 50%,
      rgba(255, 255, 255, 0.1) 68%,
      rgba(0, 0, 0, 0.14) 90%, rgba(0, 0, 0, 0.42) 100%),
    linear-gradient(90deg,
      rgba(0, 0, 0, 0.18) 0%, transparent 9%,
      transparent 91%, rgba(0, 0, 0, 0.18) 100%);
}

.strip {
  will-change: transform;
}

/* 回転中は縦方向だけのブラーで図柄の残像を見せる（SVGフィルタ）。
   1倍オート中も保持する。5倍・10倍ターボ中のみ外す（下記） */
.reel.spinning .strip {
  filter: url(#reel-blur);
}

/* 5倍・10倍ターボ中のみSVGフィルタを外す。
   SVGフィルタはiOSでGPU非対応＝毎フレームCPU再ラスタライズが走り発熱の主因。
   超高速回転中はブラー越しでほぼ見えないため外してGPU合成のみにする */
.machine.turbo-fast .reel.spinning .strip {
  filter: none;
}

.cell {
  height: var(--cell-h);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: calc(var(--cell-h) * 0.62);
  color: #222;
}

/* ベットランプ（リール左の余白・下から1,2,3）とインフォランプ（リール右の余白）。
   どちらもflexで余白いっぱいに広がり、黒余白の真ん中に並ぶ */
.bet-lamps,
.info-lamps {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  pointer-events: none;
}

.bet-lamp {
  font-family: "Courier New", monospace;
  font-weight: 700;
  font-size: 22px;
  opacity: 0.2; /* 消灯時はうっすら見える */
  transition: opacity 0.1s, text-shadow 0.1s;
}

.bet-lamp.bet-1 { color: #4dd0e1; } /* 水色 */
.bet-lamp.bet-2 { color: #66bb6a; } /* 緑 */
.bet-lamp.bet-3 { color: #ff5252; } /* 赤 */

.bet-lamp.lit {
  opacity: 1;
  /* 光の漏れが周りにボヤッとにじむ */
  text-shadow: 0 0 8px currentColor, 0 0 16px currentColor, 0 0 30px currentColor;
}

/* インフォランプ: Start（赤）/ Replay（青）/ Wait（緑・常時消灯）/ Insert Medals（白） */
.info-lamp {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 900;
  font-size: 13px;
  line-height: 1.1;
  text-align: center;
  opacity: 0.2; /* 消灯時はうっすら見える */
  transition: opacity 0.1s, text-shadow 0.1s;
}

.lamp-start  { color: #ff3b30; }
.lamp-replay { color: #2196f3; }
.lamp-wait   { color: #4caf50; }
.lamp-insert { color: #fff; font-size: 11px; }

.info-lamp.lit {
  opacity: 1;
  text-shadow: 0 0 8px currentColor, 0 0 14px currentColor, 0 0 26px currentColor;
}

/* Insert Medalsの点滅（リール回転前・停止後） */
.info-lamp.blink {
  animation: info-blink 1s linear infinite;
}

@keyframes info-blink {
  0%, 49% {
    opacity: 1;
    text-shadow: 0 0 8px currentColor, 0 0 14px currentColor, 0 0 26px currentColor;
  }
  50%, 100% {
    opacity: 0.2;
    text-shadow: none;
  }
}

/* レインボー消灯演出中はベットランプ・インフォランプも消灯 */
.machine.rainbow-dark .bet-lamp,
.machine.rainbow-dark .info-lamp {
  opacity: 0.05;
  text-shadow: none;
  animation: none;
}

/* 有効ライン（中段） */
.payline-band {
  position: absolute;
  left: 10px;
  right: 10px;
  top: calc(10px + var(--cell-h));
  height: var(--cell-h);
  pointer-events: none;
  background: rgba(255, 235, 59, 0.05);
  border-top: 1px solid rgba(255, 32, 32, 0.15);
  border-bottom: 1px solid rgba(255, 32, 32, 0.15);
}

/* 図柄: ７はSVG（横棒の左端がリール左端に揃う・点滅なし） */
.cell .seven-svg {
  width: 100%;
  height: 94%;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

/* ベクター図柄（チェリー・ぶどう・ベル・ピエロ・BAR） */
.cell .sym-svg {
  width: 74%;
  height: 74%;
  display: block;
}

/* BARは2つ縦にくっつけた2連BAR。横長に大きく（preserveAspectRatio="none"で枠いっぱいに） */
.cell .sym-bar {
  width: 96%;
  height: 86%;
}

/* ベルは横に広げて大きく見せる */
.cell .sym-bell {
  transform: scaleX(1.3);
}

/* リプレイ図柄（かわいいサイのSVG） */
.cell .rhino-svg {
  width: 82%;
  height: 76%;
  display: block;
}

/* ===== GOGOランプ＋表示部 ===== */
.mid-panel {
  position: relative;
  z-index: 0; /* ランプの光漏れ（.lamp-glow z-index:-1）をこの中に閉じ込める */
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 12px 2px 8px;
}

/* PEKAランプの光漏れ: 点灯中、周囲にボヤッとした光のにじみが広がる */
.lamp-glow {
  position: absolute;
  left: -34px;
  top: 50%;
  width: 200px;
  height: 170px;
  transform: translateY(-50%);
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  filter: blur(10px);
  background: radial-gradient(closest-side,
    rgba(30, 136, 229, 0.6), rgba(255, 79, 158, 0.22) 55%, transparent 78%);
}

.gogo-lamp.lit + .lamp-glow {
  opacity: 1;
  animation: glow-pulse 0.8s infinite alternate;
}

@keyframes glow-pulse {
  from { transform: translateY(-50%) scale(0.92); opacity: 0.65; }
  to   { transform: translateY(-50%) scale(1.12); opacity: 1; }
}

/* レインボー点灯時は虹色の光漏れが色相を回しながら広がる */
.gogo-lamp.lit.rainbow + .lamp-glow {
  background: conic-gradient(from 0deg,
    rgba(255, 23, 68, 0.5), rgba(255, 145, 0, 0.5), rgba(255, 234, 0, 0.5),
    rgba(0, 230, 118, 0.5), rgba(0, 176, 255, 0.5), rgba(101, 31, 255, 0.5),
    rgba(213, 0, 249, 0.5), rgba(255, 23, 68, 0.5));
  animation: glow-pulse 0.8s infinite alternate, glow-hue 1.6s linear infinite;
}

@keyframes glow-hue {
  from { filter: blur(10px) hue-rotate(0deg); }
  to   { filter: blur(10px) hue-rotate(360deg); }
}

.gogo-lamp {
  width: 132px;
  height: 78px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(ellipse at 50% 35%, #3a3a3a, #161616 75%);
  /* ギザギザの枠シェイプ */
  clip-path: polygon(50.0% 0.0%, 58.0% 9.8%, 69.1% 3.8%, 72.8% 15.9%, 85.4% 14.6%, 84.1% 27.2%, 96.2% 30.9%, 90.2% 42.0%, 100.0% 50.0%, 90.2% 58.0%, 96.2% 69.1%, 84.1% 72.8%, 85.4% 85.4%, 72.8% 84.1%, 69.1% 96.2%, 58.0% 90.2%, 50.0% 100.0%, 42.0% 90.2%, 30.9% 96.2%, 27.2% 84.1%, 14.6% 85.4%, 15.9% 72.8%, 3.8% 69.1%, 9.8% 58.0%, 0.0% 50.0%, 9.8% 42.0%, 3.8% 30.9%, 15.9% 27.2%, 14.6% 14.6%, 27.2% 15.9%, 30.9% 3.8%, 42.0% 9.8%);
  transition: background 0.25s;
  flex-shrink: 0;
}

.gogo-text {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 900;
  font-size: 26px;
  letter-spacing: 1px;
  /* PEKAは透明な抜き文字（消灯時はスモークガラス越しの暗い内側が見える） */
  color: rgba(28, 20, 22, 0.6);
}

/* 通常点灯: 青地のランプの内側でピンクの電球が灯り、
   透明なPEKAの抜き文字を内側から照らす */
.gogo-lamp.lit {
  background:
    /* 文字の奥にあるピンク電球の光だまり（周囲にもにじむ） */
    radial-gradient(ellipse 60% 42% at 50% 47%,
      rgba(255, 214, 231, 0.95) 0%, rgba(255, 79, 158, 0.55) 45%, transparent 75%),
    radial-gradient(ellipse at 50% 35%, #1e88e5 0%, #1565c0 45%, #062a66 100%);
  filter: drop-shadow(0 0 16px #1e88e5) drop-shadow(0 0 30px rgba(255, 79, 158, 0.55))
          brightness(1.1);
}

.gogo-lamp.lit .gogo-text {
  /* 電球の光が透ける文字: 中心が白熱・端へ向かってピンク */
  background-image: radial-gradient(circle at 50% 45%,
    #ffffff 0%, #ffd6e7 30%, #ff7eb6 60%, #ff4f9e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 5px rgba(255, 160, 200, 0.95))
          drop-shadow(0 0 14px rgba(255, 79, 158, 0.8));
}

/* レインボー中の消灯演出: 上部パネルとリール面が暗くなり、
   ７だけがバックライトで光って見える（ボーナスを揃えると復帰） */
.top-panel,
.reel,
.cell > * {
  transition: filter 0.4s, background 0.4s, opacity 0.4s;
}

.machine.rainbow-dark .top-panel {
  filter: brightness(0.22);
}

.machine.rainbow-dark .reel {
  background: #15151c;
}

.machine.rainbow-dark .cell > *:not(.seven-svg) {
  opacity: 0.12;
}

.machine.rainbow-dark .seven-svg {
  filter: drop-shadow(0 0 5px rgba(255, 90, 60, 0.95))
          drop-shadow(0 0 16px rgba(255, 150, 50, 0.8));
}

.machine.rainbow-dark .payline-band {
  opacity: 0.25;
}

/* レア点灯（1/10）: 虹色の風車グラデーションが色めき、多色の光を放つ */
.gogo-lamp.lit.rainbow {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 55%),
    conic-gradient(from 0deg,
      #ff1744, #ff9100, #ffea00, #00e676, #00b0ff, #651fff, #d500f9, #ff1744);
  animation: lamp-rainbow 1.6s linear infinite;
}

.gogo-lamp.lit.rainbow .gogo-text {
  background-image: none; /* 通常点灯の電球グラデーションを打ち消す */
  color: #fff;
  text-shadow:
    0 0 4px rgba(255, 255, 255, 0.9),
    0 0 12px rgba(255, 23, 68, 0.9),
    0 0 20px rgba(0, 176, 255, 0.8);
  filter: none;
}

/* 色相を回しつつ、光の色を切り替えながら明滅・拡大縮小する */
@keyframes lamp-rainbow {
  0% {
    filter: hue-rotate(0deg) drop-shadow(0 0 14px #ff1744) drop-shadow(0 0 34px #ff9100);
    transform: scale(1) rotate(0deg);
  }
  25% {
    filter: hue-rotate(90deg) drop-shadow(0 0 24px #00e676) drop-shadow(0 0 52px #ffea00);
    transform: scale(1.13) rotate(-3deg);
  }
  50% {
    filter: hue-rotate(180deg) drop-shadow(0 0 14px #00b0ff) drop-shadow(0 0 34px #d500f9);
    transform: scale(1) rotate(0deg);
  }
  75% {
    filter: hue-rotate(270deg) drop-shadow(0 0 24px #ffea00) drop-shadow(0 0 52px #ff1744);
    transform: scale(1.13) rotate(3deg);
  }
  100% {
    filter: hue-rotate(360deg) drop-shadow(0 0 14px #ff1744) drop-shadow(0 0 34px #ff9100);
    transform: scale(1) rotate(0deg);
  }
}

/* 7セグ風表示 */
.displays {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.display {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.display-label {
  font-size: 11px;
  letter-spacing: 2px;
  color: #ffe9a8;
}

.seg {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  background: #000;
  border: 2px solid #333;
  border-radius: 4px;
  padding: 4px 6px;
  width: 104px; /* 桁数が変わってもレイアウトが動かないよう固定幅（5桁が収まる最小幅） */
  height: 32px;
  overflow: hidden;
}

/* 7セグの1桁。skewで縦棒が右上・左下にわずかに傾く7セグらしい字体になる */
.seg-digit {
  position: relative;
  width: 14px;
  height: 22px;
  flex-shrink: 0;
  transform: skewX(-6deg);
}

.seg-digit i {
  position: absolute;
  background: rgba(255, 59, 48, 0.08); /* 消灯セグメント（ゴースト） */
  border-radius: 1px;
}

.seg-digit i.on {
  background: #ff3b30;
  box-shadow: 0 0 5px rgba(255, 59, 48, 0.95), 0 0 14px rgba(255, 59, 48, 0.55);
}

/* 横セグメント: a=上 g=中央 d=下 */
.s-a, .s-g, .s-d {
  left: 2.5px;
  right: 2.5px;
  height: 2.5px;
}
.s-a { top: 0; }
.s-g { top: 50%; margin-top: -1.25px; }
.s-d { bottom: 0; }

/* 縦セグメント: f=左上 e=左下 b=右上 c=右下 */
.s-b, .s-c, .s-e, .s-f {
  width: 2.5px;
  height: calc(50% - 3px);
}
.s-f { left: 0; top: 2px; }
.s-e { left: 0; bottom: 2px; }
.s-b { right: 0; top: 2px; }
.s-c { right: 0; bottom: 2px; }

/* ===== メッセージ ===== */
.message {
  background: #000;
  border: 2px solid #333;
  border-radius: 6px;
  /* 文言（絵文字の有無など）で高さが変わらないよう固定 */
  height: 32px;
  line-height: 24px;
  font-size: 14px;
  color: #ffc107;
  margin-bottom: 12px;
  padding: 2px 8px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ===== ボタン ===== */
.control-panel {
  /* エイジングのキズ（.aging-canvas）より手前に重ねて、ボタンやレバーは綺麗なまま */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  background: linear-gradient(180deg, #2b2b2b, #111);
  border: 2px solid #f3c63a;
  border-radius: 12px;
  padding: 12px 16px;
}

.btn {
  cursor: pointer;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  font-family: inherit;
  touch-action: manipulation;
}

.btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.left-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.maxbet-btn {
  background: linear-gradient(180deg, #ff7961, #e53935 55%, #b71c1c);
  color: #fff;
  font-size: 13px;
  line-height: 1.1;
  width: 84px;
  height: 32px;
  border-radius: 8px;
  box-shadow: 0 3px 0 #7f0000;
  white-space: nowrap;
  /* 押下時にカクッと切り替わらず、ほんの少し沈み込むようにイージング */
  transition: transform 0.06s ease;
}

/* 点灯（押せる状態）のときは必ず点滅する */
.maxbet-btn:not(:disabled) {
  animation: maxbet-blink 0.7s ease-in-out infinite alternate;
}

@keyframes maxbet-blink {
  from {
    filter: brightness(0.7);
  }
  to {
    filter: brightness(1.4);
    box-shadow: 0 3px 0 #7f0000, 0 0 18px rgba(255, 82, 82, 0.9);
  }
}

.maxbet-btn:not(:disabled):active {
  transform: translateY(1px);
  box-shadow: 0 2px 0 #7f0000;
}

/* レバー: 赤い玉のボタン */
.lever-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #ff8a80, #e53935 45%, #8e0000 100%);
  color: #fff;
  font-size: 12px;
  border: 3px solid #6d0000;
  box-shadow: 0 4px 0 #4a0000, inset 0 2px 4px rgba(255, 255, 255, 0.5);
}

.lever-btn {
  transition: transform 0.07s ease-in, box-shadow 0.07s ease-in;
}

/* レバーオン時の押し下げ動作（クリック以外のタップ/キー操作でも動く） */
.lever-btn.pulled,
.lever-btn:not(:disabled):active {
  transform: translateY(5px);
  box-shadow: 0 0 0 #4a0000, inset 0 3px 6px rgba(0, 0, 0, 0.35);
}

.stop-buttons {
  display: flex;
  gap: 14px;
  /* 左コントロールとの間で中央に寄せる */
  margin: 0 auto;
}

.stop-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  /* ボタン面はメタリック（上からの映り込み＋ヘアライン金属の陰影） */
  background:
    radial-gradient(circle at 50% 26%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 46%),
    linear-gradient(145deg, #f4f5f7 0%, #cdd1d6 24%, #989ea6 50%, #c6cacf 74%, #eef0f3 100%);
  color: #333;
  font-size: 16px;
  /* 丸枠は赤いライト。通常時は消灯（暗い赤） */
  border: 6px solid #4a0c0c;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.5);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

/* レバーオン（押せる状態）で赤枠ライトが点灯。押されて無効になると消灯する */
.stop-btn:not(:disabled) {
  border-color: #ff2d2d;
  box-shadow: 0 0 12px rgba(255, 45, 45, 0.85), 0 4px 0 rgba(0, 0, 0, 0.5);
}

.stop-btn:not(:disabled):active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}

/* プログラム発火（オート・筐体タップ・キー操作）でも沈み込むように、
   MAXBET だけ .pressed で沈みを再現する（disabled でも効かせる）。
   ストップボタンは沈み込みなし。 */
.maxbet-btn.pressed { transform: translateY(1px); }

/* 左中右すべて同じ赤いライト枠（点灯/消灯は :not(:disabled) 側で制御） */
.stop-left,
.stop-center,
.stop-right { border-color: #4a0c0c; }

/* 5倍・10倍ターボ中は有効/無効が高速で切り替わってボタンがビカビカ点滅して
   見えるため、点灯表現を止めて控えめな見た目に固定する。
   通常速度オート（1倍）では点灯（MAXBET・レバー・ストップの光）を出す */
.machine.turbo-fast .btn {
  opacity: 0.35;
}

.machine.turbo-fast .maxbet-btn {
  animation: none;
  filter: none;
}

/* ターボ（5倍/10倍）中はストップの赤枠ライトもビカビカしないよう常に消灯固定 */
.machine.turbo-fast .stop-btn,
html.premium .machine.turbo-fast .stop-btn {
  border-color: #4a0c0c;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.45), 0 8px 9px rgba(0, 0, 0, 0.5);
}

/* ===== 下部パネル ===== */
.bottom-panel {
  position: relative; /* ターボ表示（::before）の基準 */
  margin-top: 12px;
  background: linear-gradient(180deg, #1c1c1c, #000);
  border: 2px solid #f3c63a;
  border-radius: 10px;
  padding: 6px;
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 3px;
  color: #f3c63a;
}

.bottom-panel .clown {
  font-style: normal;
}

/* レインボー当たり中は下部パネルが消灯し、ボーナスを揃えると点灯する */
.bottom-panel {
  transition: opacity 0.4s, color 0.4s, border-color 0.4s;
}

.bottom-panel.off {
  opacity: 0.45;
  color: #4a3c12;
  border-color: #4a3c12;
}

.bottom-panel.off .clown {
  filter: grayscale(1) brightness(0.4);
}

/* 検定シール（筐体右下・実機の検定通過シール風） */
.cert-seal {
  position: absolute;
  right: 7px;
  /* 縦位置を少し下げ、下部パネル右上のビスの上半分がシール上端から覗くようにする
     （シールの大きさ・横位置・ビス位置は変更しない） */
  bottom: 2px;
  z-index: 12; /* 筐体内で最前面（ビス・ガラス反射・スランプグラフより手前） */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  /* 幅を固定し、縦横比4:3で高さを確保（4行が収まるように） */
  width: 60px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(180deg, #d4ecce, #9fd29a);
  border: 1px solid #5e8f5a;
  border-radius: 3px;
  color: #1d3a1b;
  line-height: 1.2;
  white-space: nowrap;
  /* 真っ直ぐに貼り、縦横とも75%に縮小（右下基準）。幅は50%比で1.5倍に */
  transform: scale(0.75);
  transform-origin: 100% 100%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  opacity: 0.95;
  pointer-events: none;
}

/* タイトル行は濃い緑の帯（上端いっぱい） */
.cert-seal .cert-title {
  align-self: stretch;
  background: #1f5d1c;
  color: #eaf6e6;
  font-size: 7px;
  letter-spacing: 0.5px;
  text-align: center;
  padding: 1.5px 0;
  margin-bottom: 2px;
}

/* タイトル以外は手書き風フォント */
.cert-seal .cert-item {
  font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.cert-seal .cert-item.cert-ver {
  font-size: 9px;
}

/* ===== ページ読み込み時の演出 =====
   PEKAランプの超どアップ（拡大の基点はJSでランプ中心に設定）から
   ズームアウトして筐体全体が現れる */
html.intro,
html.intro body {
  overflow: hidden;
}

.cabinet.intro-zoom {
  animation: intro-zoom-out 2.4s cubic-bezier(0.3, 0, 0.2, 1) both;
  /* 演出中の誤タップで進行しないようにする */
  pointer-events: none;
}

/* 倍率と中央寄せの平行移動はJS（playIntro）がランプの実寸から計算して
   カスタムプロパティで渡す。PEKAの文字が画面に収まるどアップから始まる */
@keyframes intro-zoom-out {
  0%, 28% {
    transform: translate(var(--intro-tx, 0px), var(--intro-ty, 0px))
               scale(var(--intro-scale, 8));
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}

/* ===== 起動時の説明ウィンドウ =====
   黒背景のオーバーレイで筐体・データカウンターなどを暗くし、
   サイバーなネオン調のウィンドウを中央に表示。タップで閉じて全体が明るく戻る */
.help-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px;
  background: rgba(2, 3, 10, 0.74);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s;
  cursor: pointer;
}

.help-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.help-window {
  width: 100%;
  max-width: 330px;
  background: rgba(3, 8, 18, 0.82);
  border: 1px solid rgba(0, 229, 255, 0.55);
  border-radius: 12px;
  padding: 20px 22px 16px;
  position: relative;
  text-align: left;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow:
    0 0 24px rgba(0, 229, 255, 0.3),
    0 0 60px rgba(213, 0, 249, 0.15),
    inset 0 0 36px rgba(0, 229, 255, 0.05);
}

/* 表示されるたびにポップインを再生する */
.help-overlay.visible .help-window {
  animation: help-pop 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

@keyframes help-pop {
  from { transform: translateY(14px) scale(0.94); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* 上辺にシアン→マゼンタのアクセントライン */
.help-window::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 14px;
  right: 14px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #00e5ff 25%, #d500f9 75%, transparent);
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.8);
}

.help-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-bottom: 16px;
}

.help-title-sub {
  font-size: 10px;
  letter-spacing: 5px;
  color: rgba(0, 229, 255, 0.75);
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.7);
}

.help-title-main {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 6px;
  background-image: linear-gradient(90deg, #00e5ff, #76ffea 45%, #ff4f9e);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.45));
}

.help-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 2px;
}

/* 項目間のうっすらした区切り線 */
.help-item + .help-item {
  border-top: 1px solid rgba(0, 229, 255, 0.14);
}

.help-icon {
  font-size: 20px;
  line-height: 1.2;
  filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.6));
}

.help-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.help-head {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #7df9ff;
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.65);
}

.help-desc {
  font-size: 12px;
  color: #9fb6cc;
}

.help-tap {
  margin-top: 12px;
  text-align: center;
  font-size: 11px;
  letter-spacing: 4px;
  color: #ff4f9e;
  text-shadow: 0 0 10px rgba(255, 79, 158, 0.8);
  animation: help-tap-blink 1.1s ease-in-out infinite;
}

@keyframes help-tap-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

/* 設定変更時のトースト（説明ウィンドウと同じテイストの小窓） */
.toast-overlay {
  background: rgba(2, 3, 10, 0.5);
}

.toast-window {
  max-width: 280px;
  padding: 18px 22px;
  text-align: center;
}

.toast-msg {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #7df9ff;
  text-shadow: 0 0 10px rgba(0, 229, 255, 0.7);
}

/* ===== PC向け（スマホ幅より上） =====
   リールが広いままだと、リール右のインフォランプ（Start / Replay / Wait /
   Insert Medals）の文字が入る余白がなく筐体からはみ出してしまう。
   筐体を少し広げ、リールをわずかに細くして、ランプ列の余白を確保する。
   スマホ（≤430px）は別の指定が優先されるため影響しない。 */
@media (min-width: 431px) {
  :root {
    --reel-w: 84px;
  }

  .cabinet {
    max-width: 464px;
  }
}

/* =========================================================================
   プレミアム仕上げ（html.premium が付いたときだけ適用）
   通常起動は全部入りのプレミアム、1%のレア起動だけ下の指定が効かず
   昔の「ペラペラ筐体」のまま表示される。
   ベース（ペラペラ版）には一切手を入れず、ここで上乗せするだけにしている。
   ========================================================================= */

/* --- (1) 下部パネルの絵文字🤡 → 自作ピエロSVG ---
   既定はSVGを隠して絵文字を表示（＝ペラペラ版）。プレミアムだけ入れ替える */
.clown-svg {
  display: none;
}

html.premium .bottom-panel .clown-emoji {
  display: none;
}

html.premium .bottom-panel .clown-svg {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.3em;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.55));
}

/* 虹当たりの消灯演出中はマスコットSVGも一緒に暗くする（絵文字版と同じ挙動） */
html.premium .bottom-panel.off .clown-svg {
  filter: grayscale(1) brightness(0.4);
}

/* --- (2) 金属トリム＆質感 ---
   黒系パネルの金枠を「ベタ塗りの金」から、ハイライト帯のあるメタリックゴールドへ。
   背景を padding-box、金グラデを border-box に重ねると border-radius を保ったまま
   グラデーションの枠が作れる。 */
html.premium .top-panel,
html.premium .bottom-panel {
  border-color: transparent;
  background:
    linear-gradient(180deg, #242424, #050505) padding-box,
    linear-gradient(150deg, #fff7cf 0%, #f2cb54 20%, #8f6c18 50%, #f2cb54 78%, #fff7cf 100%) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 2px 6px rgba(0, 0, 0, 0.5);
}

html.premium .control-panel {
  border-color: transparent;
  background:
    linear-gradient(180deg, #323232, #0d0d0d) padding-box,
    linear-gradient(150deg, #fff7cf 0%, #f2cb54 20%, #8f6c18 50%, #f2cb54 78%, #fff7cf 100%) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 2px 8px rgba(0, 0, 0, 0.55);
}

/* 筐体本体は金枠の色を維持（ボーナス中のフラッシュを壊さない）。
   面取り（上に光・下に影）を足して、プラ板から成型パネルらしい立体感にする */
html.premium .machine {
  box-shadow:
    0 0 50px rgba(0, 0, 0, 0.7),
    inset 0 0 24px rgba(0, 0, 0, 0.35),
    inset 0 2px 0 rgba(255, 255, 255, 0.28),
    inset 0 -4px 8px rgba(0, 0, 0, 0.45);
}

/* リール枠（金属プレート）をブラッシュ仕上げ＋四隅にビス */
html.premium .reel-frame {
  position: relative;
  background: linear-gradient(180deg, #ececec, #9c9c9c 14%, #595959 88%, #383838 100%);
  box-shadow:
    inset 0 0 8px rgba(0, 0, 0, 0.6),
    inset 0 2px 0 rgba(255, 255, 255, 0.55),
    0 2px 5px rgba(0, 0, 0, 0.5);
}

html.premium .reel-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  /* 四隅の丸ビス（中心に光・周囲へ影） */
  background-image:
    radial-gradient(circle at 38% 34%, #fcfcfc 0%, #c8c8c8 30%, #6f6f6f 68%, #3d3d3d 90%, transparent 100%),
    radial-gradient(circle at 38% 34%, #fcfcfc 0%, #c8c8c8 30%, #6f6f6f 68%, #3d3d3d 90%, transparent 100%),
    radial-gradient(circle at 38% 34%, #fcfcfc 0%, #c8c8c8 30%, #6f6f6f 68%, #3d3d3d 90%, transparent 100%),
    radial-gradient(circle at 38% 34%, #fcfcfc 0%, #c8c8c8 30%, #6f6f6f 68%, #3d3d3d 90%, transparent 100%);
  background-repeat: no-repeat;
  background-size: 11px 11px;
  background-position:
    4px 4px,
    calc(100% - 4px) 4px,
    4px calc(100% - 4px),
    calc(100% - 4px) calc(100% - 4px);
}

/* リール窓に斜めのガラス反射（アクリル板の照り）。タップは透過 */
html.premium .reel-window::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  border-radius: 8px;
  background: linear-gradient(118deg,
    rgba(255, 255, 255, 0.17) 0%,
    rgba(255, 255, 255, 0.05) 14%,
    transparent 30%,
    transparent 62%,
    rgba(255, 255, 255, 0.06) 80%,
    rgba(255, 255, 255, 0.14) 100%);
  mix-blend-mode: screen;
}

/* 白い丸ストップボタンにドーム状のスペキュラハイライトを足してプラスチックの艶を出す */
html.premium .stop-btn::before {
  content: "";
  position: absolute;
  left: 16%;
  top: 9%;
  width: 58%;
  height: 40%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 30%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 72%);
}

html.premium .stop-btn {
  position: relative;
}

/* --- (3) ロゴ・フォント高級化 ---
   PEKALAR ロゴをクローム調（白→金→焦げ茶→金→白）にして、影でエンボス感を出す */
html.premium .juggler-logo span {
  background-image: linear-gradient(180deg,
    #fffef2 0%, #ffe690 18%, #d9a528 40%, #7e5410 52%,
    #d9a528 64%, #ffe690 84%, #fffef2 100%);
  text-shadow:
    0 1px 0 rgba(80, 54, 8, 0.6),
    0 2px 3px rgba(0, 0, 0, 0.55);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
}

html.premium .big-chance {
  color: #ece0b8;
}

/* --- (4) データカウンター / 7セグの刷新 ---
   原色ネオンのベタ発光を、黒い窪み（ベゼル）＋走査線の VFD/液晶パネル風に。
   ガラス越しに数字が光って見えるようにして“痛さ”を抑える */
html.premium .data-counter {
  border-color: #2c2c2c;
  background: linear-gradient(180deg, #161616, #000);
  box-shadow:
    inset 0 2px 10px rgba(0, 0, 0, 0.85),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 2px 6px rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;
}

html.premium .data-counter::after,
html.premium .seg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: repeating-linear-gradient(to bottom,
    transparent 0 2px, rgba(0, 0, 0, 0.22) 2px 3px);
  /* 上端だけにガラスの照り返し */
  box-shadow: inset 0 8px 14px -8px rgba(255, 255, 255, 0.2);
}

html.premium .seg {
  border-color: #2a2a2a;
  background: linear-gradient(180deg, #0b0b0b, #000);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.9),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 1px 2px rgba(0, 0, 0, 0.6);
  position: relative;
}

html.premium .message {
  border-color: #2a2a2a;
  background: linear-gradient(180deg, #0b0b0b, #000);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.8), 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* =========================================================================
   プレミアム仕上げ・第2段（さらに高級感を一押し）
   接地影・周辺ビネット・成型部品の分離線・クローム金具・暗めホールの環境光。
   すべて html.premium の上乗せで、レアなペラペラ版には影響しない。
   ========================================================================= */

/* 暗めのホール: 環境光をぐっと落とし、筐体まわりだけに自身の光がにじむ（製品写真風） */
html.premium body {
  background:
    radial-gradient(560px 460px at 50% 26%, rgba(255, 150, 45, 0.08), transparent 70%),
    radial-gradient(1100px 760px at 50% 10%, #13131c 0%, #050509 58%, #020205 100%);
}

/* 筐体: 接地影＋周辺ビネットで「宙に浮かず置かれた製品」に。
   ボーナス中はフラッシュのアニメーションが box-shadow を上書きするので影響なし */
html.premium .machine {
  box-shadow:
    0 22px 46px -10px rgba(0, 0, 0, 0.85),   /* 接地影（製品写真風） */
    0 0 50px rgba(0, 0, 0, 0.7),
    inset 0 0 46px rgba(0, 0, 0, 0.42),       /* 周辺ビネット */
    inset 0 0 24px rgba(0, 0, 0, 0.35),
    inset 0 2px 0 rgba(255, 255, 255, 0.3),   /* 上端のクリアコート光（天井光） */
    inset 0 -4px 8px rgba(0, 0, 0, 0.45);
}

/* 金トリムを「塗り」から「成型部品」へ: 外側に1pxの暗い分離線＋浮き上がり影 */
html.premium .top-panel,
html.premium .bottom-panel {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 3px 7px rgba(0, 0, 0, 0.55);
}

html.premium .control-panel {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 4px 10px rgba(0, 0, 0, 0.6);
}

/* リール窓をガラスの奥へ落とし込む（深い窪み＋ふちの当たり） */
html.premium .reel-window {
  box-shadow:
    inset 0 3px 9px rgba(0, 0, 0, 0.9),
    inset 0 0 0 1px rgba(0, 0, 0, 0.85);
}

/* データカウンターに VFD らしい周辺ビネットを追加（原色のベタ発光感をさらに抑える） */
html.premium .data-counter::after {
  background:
    repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, 0.22) 2px 3px),
    radial-gradient(120% 100% at 50% 40%, transparent 56%, rgba(0, 0, 0, 0.5) 100%);
}

/* メタリックな丸ストップボタン。銀枠（クロームの取付座）はなし、接地影だけ残す。
   通常時は赤枠ライト消灯。 */
html.premium .stop-btn {
  box-shadow:
    0 5px 0 rgba(0, 0, 0, 0.45),
    0 8px 9px rgba(0, 0, 0, 0.5);
}

/* レバーオン時: 赤枠ライトが点灯し、外側へ赤く発光する */
html.premium .stop-btn:not(:disabled) {
  box-shadow:
    0 0 11px rgba(255, 45, 45, 0.9),
    0 0 22px rgba(255, 30, 30, 0.55),
    0 5px 0 rgba(0, 0, 0, 0.45),
    0 8px 9px rgba(0, 0, 0, 0.5);
}

/* 押下中も赤い発光は残したまま、ボタン面だけ沈ませる */
html.premium .stop-btn:not(:disabled):active {
  box-shadow:
    0 0 11px rgba(255, 45, 45, 0.9),
    0 0 22px rgba(255, 30, 30, 0.55),
    0 1px 0 rgba(0, 0, 0, 0.45),
    0 3px 5px rgba(0, 0, 0, 0.5);
}

/* レバー（赤玉）は銀枠なし。艶と接地影だけ少し強める */
html.premium .lever-btn {
  box-shadow:
    0 4px 0 #4a0000,
    0 8px 10px rgba(0, 0, 0, 0.55),
    inset 0 2px 5px rgba(255, 255, 255, 0.6);
}

/* MAX BET ボタンの上半分に光沢ハイライト（プラスチックの照り） */
html.premium .maxbet-btn {
  position: relative;
  overflow: hidden;
}

html.premium .maxbet-btn::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 48%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
}

/* 下部パネルの四隅にもビス（リール枠と同じ金具で筐体の一体感を出す） */
html.premium .bottom-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background-image:
    radial-gradient(circle at 38% 34%, #fcfcfc 0%, #c8c8c8 30%, #6f6f6f 68%, #3d3d3d 90%, transparent 100%),
    radial-gradient(circle at 38% 34%, #fcfcfc 0%, #c8c8c8 30%, #6f6f6f 68%, #3d3d3d 90%, transparent 100%),
    radial-gradient(circle at 38% 34%, #fcfcfc 0%, #c8c8c8 30%, #6f6f6f 68%, #3d3d3d 90%, transparent 100%),
    radial-gradient(circle at 38% 34%, #fcfcfc 0%, #c8c8c8 30%, #6f6f6f 68%, #3d3d3d 90%, transparent 100%);
  background-repeat: no-repeat;
  background-size: 8px 8px;
  background-position: 6px 6px, calc(100% - 6px) 6px, 6px calc(100% - 6px), calc(100% - 6px) calc(100% - 6px);
}

/* 下部パネルの文字も軽くエンボス。
   独立スタッキング文脈にして、スピーカー穴（z:-1）を文字・ピエロ・イナズマより背面へ */
html.premium .bottom-panel {
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
  isolation: isolate;
}

/* リール面のベクター図柄を、白地から少し浮かせる軽い接地影。
   以前は回転中に外していた（負荷対策）が、停止の瞬間にフィルタが付くと図柄が
   サブピクセル位置→整数ピクセルへスナップし、横に数pxズレて見えた（縦ブラーは
   縦方向のみで横位置は鮮明＝ズレが目立つ）。「7」(.seven-svg)が常時フィルタ付きで
   ズレないのと同様に、通常回転中も同じフィルタを当て続けてスナップ状態を一定にし、
   横ズレを防ぐ。発熱が問題になる高速ターボ回転中だけは外す（ストリップのブラーも
   外している。ターボ停止時の横ズレは超高速で目立たないため許容）。 */
html.premium .reel .sym-svg,
html.premium .reel .rhino-svg {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.28));
}
html.premium .machine.turbo-fast .reel.spinning .sym-svg,
html.premium .machine.turbo-fast .reel.spinning .rhino-svg {
  filter: none;
}

/* =========================================================================
   プレミアム仕上げ・第3段（実機らしさ：構造・ハードウェア）
   上部の光る役物 / スピーカーグリル / リール窓の装飾ベゼル / 黒ネームプレート帯。
   要素は常に DOM にあるが、既定（ペラペラ版）は display:none で隠し、
   html.premium のときだけ表示する。商標は使わず原案デザイン。
   ========================================================================= */

/* 既定（ペラペラ版）では構造パーツを非表示 */
.crown,
.speaker-grille {
  display: none;
}

/* --- 上部の光るドーム役物 --- */
html.premium .crown {
  display: block;
  position: relative;
  height: 20px;
  margin: 0 4px 6px;
  border-radius: 16px 16px 9px 9px;
  border: 2px solid transparent;
  background:
    linear-gradient(180deg, #2b2b2b, #060606) padding-box,
    linear-gradient(150deg, #fff7cf 0%, #f2cb54 22%, #8f6c18 52%, #f2cb54 80%, #fff7cf 100%) border-box;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  overflow: hidden;
}

/* 通常時は消灯（暗いガラスだけが見える） */
html.premium .crown-glow {
  position: absolute;
  inset: 4px 14%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 42%, #1c241f 0%, #10160f 70%, #0a0d09 100%);
}

/* ボーナス中だけ緑に点灯して明滅する */
html.premium .machine.bonus .crown-glow {
  background: radial-gradient(ellipse at 50% 42%,
    #eafff0 0%, #79e6a0 42%, #1f9e52 78%, #0c5e2c 100%);
  box-shadow: 0 0 12px rgba(76, 220, 130, 0.7), 0 0 24px rgba(76, 220, 130, 0.4);
  animation: crown-pulse 0.7s ease-in-out infinite;
}

@keyframes crown-pulse {
  0%, 100% { opacity: 0.85; filter: brightness(0.95); }
  50%      { opacity: 1;    filter: brightness(1.2); }
}

/* --- スピーカーグリル（「I'm PEKALAR」パネル全体に開いた穴。文字に被ってOK） ---
   不透明な背景は持たず、ドリル穴（中央が暗く・縁がほのかに明るい）の格子だけを
   パネル全面に重ねる。金文字の上に来た穴は、そのまま文字に穴が開いて見える。 */
html.premium .speaker-grille {
  display: block;
  position: absolute;
  inset: 4px;
  border-radius: 6px;
  pointer-events: none;
  /* 文字・ピエロ・イナズマ/倍率より背面に置き、穴がそれらに被らないようにする
     （下パネルを独立スタッキング文脈にしているので、負の z でも背景より手前に出る） */
  z-index: -1;
  background-image: radial-gradient(circle,
    rgba(0, 0, 0, 0.8) 0.9px, rgba(255, 255, 255, 0.1) 1.5px, transparent 2px);
  background-size: 6px 6px;
  background-position: center;
}

/* --- リール窓の装飾ベゼル（金の縁取り＋ほのかな発光・レイアウトは不変） --- */
html.premium .reel-window::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 6px;
  pointer-events: none;
  z-index: 2;
  border: 2px solid #e9c24a;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.55),
    0 0 6px rgba(255, 210, 90, 0.4);
}

/* --- 黒ネームプレート帯（PEKALARを黒プレートに収める。金の縁取りは付けない） --- */
html.premium .juggler-logo {
  margin-top: 4px;
  padding: 1px 0 2px;
  border-radius: 6px;
  background: linear-gradient(180deg, #000, #141414);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.8);
}

/* ===== スマホ向け ===== */
@media (max-width: 430px) {
  :root {
    --cell-h: 54px;
    --reel-w: 72px;
  }

  .machine {
    padding: 10px 12px 12px;
  }

  .juggler-logo {
    font-size: 28px;
  }

  .gogo-lamp {
    width: 110px;
    height: 66px;
  }

  .gogo-text {
    font-size: 21px;
  }

  .seg {
    width: 90px;
    height: 28px;
    padding: 3px 5px;
    gap: 3px;
  }

  .seg-digit {
    width: 12px;
    height: 19px;
  }

  .stop-btn {
    width: 52px;
    height: 52px;
    font-size: 14px;
  }

  .maxbet-btn {
    width: 72px;
    height: 28px;
    font-size: 11px;
  }

  .lever-btn {
    width: 48px;
    height: 48px;
    font-size: 11px;
  }

  .dc-value {
    font-size: 16px;
  }

  #dc-rate {
    font-size: 12px;
  }

  .bet-lamp {
    font-size: 17px;
  }

  .info-lamp {
    font-size: 11px;
  }

  .lamp-insert {
    font-size: 9px;
  }

  /* スマホでは役物を小ぶりにして、筐体が縦に伸びすぎないようにする */
  html.premium .crown {
    height: 16px;
    margin-bottom: 5px;
  }

  html.premium .juggler-logo {
    margin-top: 4px;
    padding: 1px 0 2px;
  }
}