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

button,
input {
  touch-action:manipulation;
}

button {
  -webkit-tap-highlight-color:rgba(255,215,0,0.22);
  user-select:none;
}

:root {
  --readable-stroke:#080812;
  --readable-shadow:
    1px 1px 0 var(--readable-stroke),
    -1px -1px 0 var(--readable-stroke),
    1px -1px 0 var(--readable-stroke),
    -1px 1px 0 var(--readable-stroke),
    0 2px 0 rgba(0,0,0,0.82);
  --readable-shadow-strong:
    2px 2px 0 var(--readable-stroke),
    -2px -2px 0 var(--readable-stroke),
    2px -2px 0 var(--readable-stroke),
    -2px 2px 0 var(--readable-stroke),
    0 4px 0 rgba(0,0,0,0.88);
  --glow-gold-soft:0 0 10px rgba(255,215,0,0.42), 0 0 20px rgba(255,215,0,0.18);
  --glow-pink-soft:0 0 10px rgba(255,80,180,0.40), 0 0 20px rgba(255,80,180,0.18);
  --glow-blue-soft:0 0 10px rgba(80,200,255,0.40), 0 0 20px rgba(80,200,255,0.16);
  --glow-green-soft:0 0 10px rgba(74,222,128,0.38), 0 0 20px rgba(74,222,128,0.15);
  --glow-red-soft:0 0 10px rgba(255,80,80,0.38), 0 0 20px rgba(255,80,80,0.16);
}

body {
  font-family:'RocknRoll One', sans-serif;
  background:#0d0d1a;
  color:#fff;
  min-height:100vh;
  padding:14px 18px 18px;
  position:relative;
  overflow-x:hidden;
}

/* ===== ブラウザゲーム用レイアウト（案A：左右2カラム＋フッター） ===== */
.app-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  max-width:1600px;
  margin:0 auto 14px;
  padding:0 8px;
  position:relative;
  z-index:2;
  flex-wrap:wrap;
}

.header-controls {
  display:flex;
  align-items:center;
  gap:10px;
}

.header-icon-btn {
  width:42px;
  height:42px;
  min-width:44px;
  min-height:44px;
  font-size:20px;
  border:2px solid rgba(255,80,180,0.4);
  border-radius:12px;
  background:rgba(26,26,46,0.7);
  color:#fff;
  cursor:pointer;
  transition:all 0.2s;
  display:flex;
  align-items:center;
  justify-content:center;
}
.header-icon-btn:hover {
  border-color:#ff50b4;
  background:rgba(255,80,180,0.18);
  transform:translateY(-1px);
}

.header-icon-btn[id="ranking-btn"] {
  border-color:rgba(80, 200, 255, 0.5);
  color:#50c8ff;
  font-family:'DotGothic16', monospace;
  font-size:18px;
  font-weight:900;
  text-shadow:0 0 8px rgba(80, 200, 255, 0.7);
}

.header-icon-btn[id="ranking-btn"]:hover {
  border-color:#50c8ff;
  background:rgba(80, 200, 255, 0.16);
}

.quick-access-btn {
  display:none;
  position:fixed;
  top:10px;
  right:10px;
  z-index:112;
  width:42px;
  height:42px;
  border:2px solid rgba(80, 200, 255, 0.72);
  border-radius:10px;
  background:rgba(8, 10, 26, 0.74);
  color:#50c8ff;
  font-family:'DotGothic16', monospace;
  font-size:18px;
  font-weight:900;
  text-shadow:0 0 9px rgba(80, 200, 255, 0.8);
  box-shadow:0 0 16px rgba(80, 200, 255, 0.28), inset 0 0 12px rgba(80, 200, 255, 0.08);
  cursor:pointer;
}

body[data-round-screen="race"] .quick-access-btn,
body[data-round-screen="result"] .quick-access-btn {
  display:flex;
  align-items:center;
  justify-content:center;
}

.race-bet-hud {
  display:none;
}

body[data-round-screen="race"] .race-bet-hud {
  position:fixed;
  left:10px;
  right:10px;
  bottom:calc(env(safe-area-inset-bottom, 0px) + 12px);
  z-index:111;
  display:flex;
  justify-content:center;
  pointer-events:none;
  font-family:'DotGothic16', monospace;
}

.race-bet-hud-card {
  width:max-content;
  max-width:100%;
  padding:8px 10px;
  border:1px solid rgba(80, 200, 255, 0.62);
  border-radius:9px;
  background:rgba(8, 10, 26, 0.78);
  box-shadow:0 0 14px rgba(80, 200, 255, 0.18), inset 0 0 12px rgba(255,255,255,0.04);
  backdrop-filter:blur(8px);
  color:#fff;
}

.race-bet-hud-card.loan {
  border-color:rgba(255, 48, 79, 0.74);
  box-shadow:0 0 16px rgba(255, 48, 79, 0.22), inset 0 0 12px rgba(255,176,0,0.05);
}

.race-bet-hud-kicker {
  display:inline-block;
  margin-right:6px;
  color:#9ee8ff;
  font-size:10px;
  letter-spacing:2px;
}

.race-bet-hud-card.loan .race-bet-hud-kicker {
  color:#ffb000;
}

.race-bet-hud-card strong {
  color:#fff6c9;
  font-size:14px;
  letter-spacing:1px;
  text-shadow:var(--readable-shadow), var(--glow-gold-soft);
}

.race-bet-hud-list,
.race-bet-hud-order {
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:6px;
}

.race-bet-hud-list span,
.race-bet-hud-order span {
  display:inline-flex;
  align-items:center;
  gap:4px;
  max-width:100%;
  padding:3px 7px;
  border:1px solid color-mix(in srgb, var(--cat-color), white 8%);
  border-radius:999px;
  background:color-mix(in srgb, var(--cat-color), transparent 84%);
  color:#f8fbff;
  font-size:12px;
  line-height:1.2;
  white-space:nowrap;
}

.race-bet-hud-list img,
.race-bet-hud-order img {
  width:22px;
  height:22px;
  object-fit:contain;
  flex:0 0 auto;
  margin:-4px 0;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,0.55));
}

.race-bet-hud-list b,
.race-bet-hud-order b {
  color:var(--cat-color);
  font-weight:bold;
}

.race-bet-hud-amount {
  color:#f8fbff;
  font-weight:bold;
}

.race-bet-hud-odds {
  display:inline-flex;
  align-items:center;
  min-height:16px;
  padding:1px 5px;
  border:1px solid rgba(255, 215, 0, 0.58);
  border-radius:999px;
  background:rgba(255, 215, 0, 0.12);
  color:#ffe15a;
  font-style:normal;
  font-size:10px;
  line-height:1;
  text-shadow:0 1px 0 #080812;
}

.race-bet-hud-order b {
  display:inline-grid;
  place-items:center;
  width:16px;
  height:16px;
  border-radius:50%;
  background:rgba(8,8,18,0.74);
  color:#ffe15a;
  font-size:10px;
}

.race-bet-hud-card em {
  display:block;
  margin-top:6px;
  color:rgba(255,255,255,0.72);
  font-size:10px;
  font-style:normal;
  letter-spacing:1px;
}

.app-main {
  display:grid;
  grid-template-columns:minmax(0, 1fr) 280px;
  gap:18px;
  max-width:1600px;
  margin:0 auto;
  padding:0 8px;
  align-items:start;
  position:relative;
  z-index:2;
}

.main-left {
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:0;
}

.main-right {
  position:sticky;
  top:14px;
}

.app-footer {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  max-width:1600px;
  margin:18px auto 0;
  padding:0 8px;
  position:relative;
  z-index:2;
}

/* ===== ラウンド画面分離（スマホ縦画面再設計の土台） ===== */
body[data-round-screen="predict"] .track-fit {
  display:none;
}

body[data-round-screen="predict"] .app-main {
  grid-template-columns:minmax(0, 760px) 280px;
  justify-content:center;
}

body[data-round-screen="predict"] .main-left {
  width:100%;
  max-width:760px;
  margin:0 auto;
}

body[data-round-screen="race"] .predict-lineup,
body[data-round-screen="result"] .predict-lineup {
  display:none;
}

body:not([data-loan-shark-predict="true"]) .loan-shark-predict {
  display:none;
}

body[data-loan-shark-predict="true"] .predict-lineup,
body[data-loan-shark-predict="true"] .control-panel {
  display:none;
}

body[data-round-screen="predict"] .chōshi-display,
body[data-round-screen="predict"] .sa-cat-section-title,
body[data-round-screen="predict"] .sa-cat-buttons {
  display:none;
}

body[data-round-screen="race"],
body[data-round-screen="result"] {
  padding:0;
  overflow:hidden;
}

body[data-round-screen="race"] .app-header,
body[data-round-screen="race"] .main-right,
body[data-round-screen="race"] .control-panel,
body[data-round-screen="race"] .app-footer,
body[data-round-screen="result"] .app-header,
body[data-round-screen="result"] .main-right,
body[data-round-screen="result"] .control-panel,
body[data-round-screen="result"] .app-footer {
  display:none;
}

body[data-round-screen="race"] .app-main,
body[data-round-screen="result"] .app-main {
  display:block;
  max-width:none;
  min-height:100vh;
  margin:0;
  padding:0;
}

body[data-round-screen="race"] .main-left,
body[data-round-screen="result"] .main-left {
  min-height:100vh;
  gap:0;
}

body[data-round-screen="race"] .track-fit,
body[data-round-screen="result"] .track-fit {
  display:flex;
  align-items:center;
  justify-content:flex-start;
  width:100vw;
  max-width:none;
  min-height:100vh;
  margin:0;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,80,180,0.14), transparent 45%),
    linear-gradient(180deg, #111126 0%, #080812 100%);
}

body[data-round-screen="race"] .track-wrap,
body[data-round-screen="result"] .track-wrap {
  flex:0 0 auto;
  margin:0;
}

/* 1300px 以下では右サイドバー（チャット）を画面下部にまわす */
@media (max-width: 1300px) {
  .app-main {
    grid-template-columns:1fr;
  }
  .main-right {
    position:relative;
    top:auto;
  }
  .twitch-chat {
    width:100% !important;
    max-width:none !important;
    height:280px !important;
    max-height:280px !important;
    transform:none !important;
    top:auto !important;
    right:auto !important;
  }
}

body::before {
  content:'';
  position:fixed;
  inset:0;
  background:
    linear-gradient(rgba(255,80,180,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(80,200,255,0.04) 1px, transparent 1px);
  background-size:40px 40px;
  pointer-events:none;
  z-index:0;
}

body::after {
  content:'';
  position:fixed;
  inset:0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,80,180,0.12), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(80,200,255,0.12), transparent 40%);
  pointer-events:none;
  z-index:0;
}

.title {
  font-family:'DotGothic16', monospace;
  font-size:32px;
  letter-spacing:4px;
  text-shadow:
    0 0 10px #ff50b4,
    0 0 20px #ff50b4,
    3px 3px 0 #1a1a2e;
  z-index:2;
  position:relative;
  flex-shrink:0;
  white-space:nowrap;
}

.title .sub {
  display:block;
  font-size:14px;
  letter-spacing:2px;
  color:#50c8ff;
  text-shadow:0 0 8px #50c8ff;
  margin-top:6px;
}

/* ===== レーストラック ===== */
/* track-fit はトラックの「実表示領域」。track-wrap を transform: scale で縮める時の包み */
.track-fit {
  width:100%;
  max-width:1200px;
  margin:0 auto;
  position:relative;
  z-index:2;
}

.track-wrap {
  position:relative;
  width:1200px;
  background:#1a1a2e;
  border:6px solid #ff50b4;
  border-radius:20px;
  box-shadow:
    0 0 40px rgba(255,80,180,0.5),
    inset 0 0 60px rgba(0,0,0,0.5);
  overflow:hidden;
  padding:8px 0;
  transform-origin:top left;
  /* track-scale (画面幅対応) / zoom-scale (スローモ) / camera-scale (レース画角) を掛け合わせる */
  transform:scale(calc(var(--track-scale, 1) * var(--zoom-scale, 1) * var(--camera-scale, 1))) translateX(calc(var(--camera-x, 0) * -1px));
}

.track {
  position:relative;
  width:100%;
  height:80px;
  background:linear-gradient(180deg, #2d1b3d 0%, #1a1a2e 50%, #2d1b3d 100%);
  border-bottom:2px dashed rgba(255,255,255,0.15);
}

.track:last-child {
  border-bottom:none;
}

.track .lane-no {
  position:absolute;
  left:10px;
  top:50%;
  transform:translateY(-50%);
  font-family:'DotGothic16', monospace;
  font-size:24px;
  color:rgba(255,255,255,0.4);
  z-index:1;
}

.cat {
  position:absolute;
  left:60px;
  top:50%;
  transform:translateY(-50%);
  width:70px;
  height:70px;
  z-index:3;
  transition:left 0.1s linear, transform 0.2s ease;
  filter:drop-shadow(2px 4px 6px rgba(0,0,0,0.6));
  cursor:pointer;
}

.cat img {
  width:100%;
  height:100%;
  object-fit:contain;
}

/* 走ってる時の上下バウンス */
.cat.running img {
  animation:catBounce 0.25s infinite ease-in-out;
}

@keyframes catBounce {
  0%, 100% { transform:translateY(0) scaleX(1); }
  50% { transform:translateY(-6px) scaleX(0.95); }
}

/* 倒れ状態 */
.cat.fallen {
  transform:translateY(-50%) rotate(85deg);
}

.cat.fallen img {
  animation:none;
}

/* 逆走（左向き） */
.cat.reverse img {
  transform:scaleX(-1);
}

/* 加速エフェクト */
.cat.boost::before {
  content:'';
  position:absolute;
  right:100%;
  top:50%;
  transform:translateY(-50%);
  width:80px;
  height:30px;
  background:linear-gradient(90deg, transparent, #ffeb3b, #ff50b4);
  border-radius:50%;
  filter:blur(8px);
  opacity:0.8;
  pointer-events:none;
}

/* ジャンプ（旧ワープを置換） */
.cat.jumping {
  --jump-dx: 0px;
  z-index:4; /* ジャンプ中は他の猫より前面に */
  transition:none; /* ベースのleft/transform transitionを無効化（キーフレームと干渉してカクつくのを防止） */
  will-change:transform; /* GPU加速ヒント */
}

/* ジャンプ中は img の足踏みアニメを停止（catBounceとキーフレームの干渉でカクつくのを防止） */
.cat.jumping img {
  animation:none !important;
}

/* ジャンプ中は img の足踏みアニメ(catBounce)を停止：親.cat の transform と衝突してカクつくのを防ぐ */
.cat.jumping img {
  animation:none !important;
}

/* 前ジャンプ：横方向に移動しながら上下にバウンド＋回転 */
.cat.jumping.jump-forward {
  animation:jumpForwardAnim 0.7s cubic-bezier(0.45, 0.05, 0.55, 0.95) forwards;
}

/* leftは最初から着地点にセットし、transformで元位置 → 0 へアニメ（フリッカ防止） */
@keyframes jumpForwardAnim {
  0%   { transform:translateY(-50%) translateX(calc(var(--jump-dx) * -1)) rotate(0deg); }
  20%  { transform:translateY(calc(-50% - 35px)) translateX(calc(var(--jump-dx) * -0.8)) rotate(-10deg) scale(1.05); }
  50%  { transform:translateY(calc(-50% - 85px)) translateX(calc(var(--jump-dx) * -0.5)) rotate(0deg) scale(1.08); }
  80%  { transform:translateY(calc(-50% - 35px)) translateX(calc(var(--jump-dx) * -0.2)) rotate(10deg) scale(1.05); }
  100% { transform:translateY(-50%) translateX(0) rotate(0deg); }
}

/* レーンジャンプ：縦方向にぴょんと跳ねる（apexで別レーンへDOM移動） */
.cat.jumping.jump-lane {
  animation:jumpLaneAnim 0.7s cubic-bezier(0.45, 0.05, 0.55, 0.95) forwards;
}

@keyframes jumpLaneAnim {
  0%   { transform:translateY(-50%) scale(1) rotate(0deg); }
  30%  { transform:translateY(calc(-50% - 70px)) scale(1.12) rotate(-8deg); }
  50%  { transform:translateY(calc(-50% - 100px)) scale(1.15) rotate(0deg); }
  70%  { transform:translateY(calc(-50% - 70px)) scale(1.12) rotate(8deg); }
  100% { transform:translateY(-50%) scale(1) rotate(0deg); }
}

/* 予想中セリフ吹き出し（既存.bubbleより長め＆穏やかな表示） */
.predict-bubble {
  position:absolute;
  background:#fff;
  color:#1a1a2e;
  font-family:'DotGothic16', monospace;
  font-size:13px;
  font-weight:bold;
  padding:5px 11px;
  border-radius:14px;
  border:2px solid #1a1a2e;
  white-space:nowrap;
  z-index:5;
  pointer-events:none;
  top:-10px;
  transform:translate(-50%, 0);
  animation:predictBubbleFloat 3.2s ease-out forwards;
  box-shadow:0 2px 6px rgba(0,0,0,0.3);
}

.predict-bubble::after {
  content:'';
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  border:6px solid transparent;
  border-top-color:#1a1a2e;
}

@keyframes predictBubbleFloat {
  0%   { opacity:0; transform:translate(-50%, 8px) scale(0.7); }
  10%  { opacity:1; transform:translate(-50%, 0) scale(1.0); }
  88%  { opacity:1; transform:translate(-50%, -4px) scale(1.0); }
  100% { opacity:0; transform:translate(-50%, -14px) scale(0.95); }
}

/* 倒れ吹き出し */
.bubble {
  position:absolute;
  background:#fff;
  color:#1a1a2e;
  font-family:'DotGothic16', monospace;
  font-size:14px;
  font-weight:bold;
  padding:4px 10px;
  border-radius:14px;
  border:2px solid #1a1a2e;
  white-space:nowrap;
  z-index:5;
  pointer-events:none;
  animation:bubbleFloat 1.5s ease-out forwards;
  top:5px;
  transform:translate(-50%, 0);
}

@keyframes bubbleFloat {
  0% { opacity:0; transform:translate(-50%, 10px); }
  20% { opacity:1; transform:translate(-50%, 0); }
  80% { opacity:1; transform:translate(-50%, -5px); }
  100% { opacity:0; transform:translate(-50%, -15px); }
}

/* ゴールライン */
.goal-line {
  position:absolute;
  top:0;
  bottom:0;
  width:6px;
  background:repeating-linear-gradient(
    0deg,
    #fff 0 12px,
    #1a1a2e 12px 24px
  );
  z-index:2;
  transition:left 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.goal-line::before {
  content:'🏁';
  position:absolute;
  top:-30px;
  left:50%;
  transform:translateX(-50%);
  font-size:30px;
  filter:drop-shadow(0 0 10px #ffeb3b);
}

/* ===== 割り込み演出 ===== */
.cat.cutin-attacker img {
  animation:cutinAttack 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

@keyframes cutinAttack {
  0%   { transform:translateY(0) scaleX(1); }
  30%  { transform:translateY(-8px) scaleX(1.3) skewX(-15deg); }
  60%  { transform:translateY(0) scaleX(1.4) skewX(-10deg); }
  100% { transform:translateY(0) scaleX(1) skewX(0deg); }
}

.cat.cutin-victim img {
  animation:cutinHit 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) !important;
}

@keyframes cutinHit {
  0%   { transform:translateY(0) rotate(0deg); }
  10%  { transform:translateY(0) rotate(-15deg) translateX(-10px); }
  20%  { transform:translateY(-15px) rotate(-25deg) translateX(-15px); }
  35%  { transform:translateY(-10px) rotate(15deg) translateX(-5px); }
  50%  { transform:translateY(-5px) rotate(-10deg) translateX(2px); }
  65%  { transform:translateY(0) rotate(5deg); }
  80%  { transform:translateY(0) rotate(-3deg); }
  100% { transform:translateY(0) rotate(0deg); }
}

/* 衝撃マーク */
.crash-mark {
  position:absolute;
  z-index:6;
  font-family:'DotGothic16', monospace;
  font-size:48px;
  font-weight:bold;
  color:#ffeb3b;
  text-shadow:
    0 0 15px #ff50b4,
    3px 3px 0 #1a1a2e,
    -2px -2px 0 #1a1a2e;
  pointer-events:none;
  animation:crashMark 0.7s ease-out forwards;
  top:-10px;
  transform:translate(-50%, 0) scale(0);
}

@keyframes crashMark {
  0%   { opacity:0; transform:translate(-50%, 0) scale(0) rotate(-30deg); }
  20%  { opacity:1; transform:translate(-50%, -15px) scale(1.4) rotate(10deg); }
  60%  { opacity:1; transform:translate(-50%, -25px) scale(1) rotate(-5deg); }
  100% { opacity:0; transform:translate(-50%, -45px) scale(0.8) rotate(0deg); }
}

/* 衝撃の星散らし */
.crash-star {
  position:absolute;
  font-size:24px;
  pointer-events:none;
  z-index:5;
  animation:crashStar 0.8s ease-out forwards;
  filter:drop-shadow(0 0 5px #ffeb3b);
}

@keyframes crashStar {
  0%   { opacity:1; transform:translate(0, 0) scale(0); }
  100% { opacity:0; transform:translate(var(--sx), var(--sy)) scale(1.3) rotate(360deg); }
}

/* 全画面演出 */
.global-fx {
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:50;
}

/* ===== コントロールパネル ===== */
.predict-lineup {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  position:relative;
  z-index:2;
}

.predict-card {
  --cat-color: #ff50b4;
  border:2px solid var(--cat-color);
  border-radius:14px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.08), transparent 42%),
    rgba(17,17,38,0.92);
  box-shadow:
    0 0 18px rgba(255,80,180,0.25),
    inset 0 0 24px rgba(0,0,0,0.35);
  color:#fff;
  cursor:pointer;
  display:grid;
  grid-template-columns:82px minmax(0, 1fr);
  gap:10px;
  appearance:none;
  min-height:132px;
  padding:10px;
  position:relative;
  overflow:hidden;
  text-align:left;
  transition:transform 0.14s, box-shadow 0.14s, border-color 0.14s;
}

.predict-card::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, var(--cat-color), transparent 42%);
  opacity:0.35;
  pointer-events:none;
}

.predict-card:hover:not(:disabled) {
  transform:translateY(-2px);
  box-shadow:
    0 0 26px rgba(255,255,255,0.18),
    inset 0 0 24px rgba(0,0,0,0.35);
}

.predict-card.selected {
  border-color:#ffd700;
  box-shadow:
    0 0 0 2px rgba(255,215,0,0.35),
    0 0 30px rgba(255,215,0,0.45),
    inset 0 0 28px rgba(255,215,0,0.12);
  transform:translateY(-2px);
}

.predict-card:active:not(:disabled) {
  transform:translateY(0) scale(0.985);
}

.predict-card.selected::after {
  content:'BET';
  position:absolute;
  top:8px;
  right:8px;
  font-family:'DotGothic16', monospace;
  font-size:12px;
  letter-spacing:2px;
  color:#1a1a2e;
  background:#ffd700;
  border-radius:999px;
  padding:2px 8px;
  box-shadow:0 0 12px rgba(255,215,0,0.65);
}

.predict-card:disabled {
  cursor:not-allowed;
  opacity:0.7;
}

.predict-card-portrait {
  align-self:center;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  position:relative;
  z-index:1;
}

.predict-card-portrait img {
  width:76px;
  height:76px;
  object-fit:contain;
  filter:drop-shadow(0 0 10px rgba(255,255,255,0.28));
  animation:predictCatIdle 0.9s ease-in-out infinite alternate;
}

@keyframes predictCatIdle {
  from { transform:translateY(0) scale(1); }
  to   { transform:translateY(-4px) scale(1.03); }
}

.predict-card-body {
  display:block;
  min-width:0;
  position:relative;
  z-index:1;
}

.predict-card-top {
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:4px;
  padding-right:44px;
}

.predict-card-name {
  font-family:'DotGothic16', monospace;
  font-size:22px;
  letter-spacing:2px;
  font-weight:bold;
  line-height:1.1;
  text-shadow:0 0 10px currentColor, 2px 2px 0 #080812;
}

.predict-card-odds {
  font-family:'DotGothic16', monospace;
  font-size:15px;
  color:#ffd700;
  border:1px solid rgba(255,215,0,0.65);
  border-radius:7px;
  background:rgba(255,215,0,0.16);
  padding:1px 7px;
  box-shadow:0 0 8px rgba(255,215,0,0.35);
  position:relative;
  overflow:hidden;
  transform-origin:center;
}

.predict-card-bet {
  font-family:'DotGothic16', monospace;
  font-size:11px;
  color:#6ee7ff;
  border:1px solid rgba(110,231,255,0.7);
  border-radius:6px;
  background:rgba(6,24,36,0.72);
  padding:1px 6px;
  box-shadow:0 0 8px rgba(110,231,255,0.28);
  white-space:nowrap;
}

.predict-card-meta {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:5px 8px;
  font-family:'DotGothic16', monospace;
  font-size:12px;
  margin-bottom:7px;
}

.predict-card-stars {
  color:#ffd75e;
  white-space:nowrap;
}

.predict-card-stars .empty {
  color:rgba(255,255,255,0.2);
  text-shadow:none;
}

.predict-card-line {
  color:rgba(255,255,255,0.84);
  font-size:13px;
  line-height:1.35;
  min-height:36px;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

.predict-card-line::before {
  content:'「';
  color:var(--cat-color);
}

.predict-card-line::after {
  content:'」';
  color:var(--cat-color);
}

.predict-card-line.flash {
  animation:predictLineFlash 0.32s ease-out;
}

@keyframes predictLineFlash {
  from { color:#fff; text-shadow:0 0 12px var(--cat-color); }
  to   { color:rgba(255,255,255,0.84); text-shadow:none; }
}

.control-panel {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:14px;
  z-index:2;
  position:relative;
}

.control-panel .start-btn {
  align-self:center;
}

.start-btn {
  font-family:'DotGothic16', monospace;
  font-size:32px;
  font-weight:bold;
  letter-spacing:4px;
  padding:18px 60px;
  min-height:56px;
  min-width:220px;
  border:4px solid #1a1a2e;
  border-radius:60px;
  background:linear-gradient(135deg, #ff50b4, #ff8a3d);
  color:#fff;
  cursor:pointer;
  text-shadow:3px 3px 0 #1a1a2e;
  box-shadow:
    0 0 30px rgba(255,80,180,0.8),
    inset 0 -8px 20px rgba(0,0,0,0.3),
    inset 0 8px 20px rgba(255,255,255,0.2);
  transition:transform 0.15s, box-shadow 0.15s;
}

/* ===== 天候・コンディション ===== */
/* 雨：トラックに薄青のフィルタ＋斜線でしずく感 */
.track-wrap.weather-rain {
  background:#1a2438;
  border-color:#5e72e4;
  box-shadow:
    0 0 40px rgba(94, 114, 228, 0.5),
    inset 0 0 60px rgba(0, 20, 60, 0.5);
}

.track-wrap.weather-rain::after {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(
    100deg,
    transparent 0,
    transparent 6px,
    rgba(160, 200, 255, 0.18) 6px,
    rgba(160, 200, 255, 0.18) 7px);
  animation:weatherRainShift 0.5s linear infinite;
  z-index:10;
}

@keyframes weatherRainShift {
  from { transform:translate(0, 0); }
  to   { transform:translate(-6px, 12px); }
}

/* 夜：暗くて青みがかったトラック */
.track-wrap.weather-night {
  background:#0a0a1a;
  border-color:#404060;
  box-shadow:
    0 0 30px rgba(60, 60, 120, 0.6),
    inset 0 0 80px rgba(0, 0, 30, 0.85);
}

.track-wrap.weather-night .track {
  background:linear-gradient(180deg, #14142a 0%, #08081a 50%, #14142a 100%);
}

/* 天候テロップ（レース開始時に短時間表示） */
.weather-toast {
  position:fixed;
  top:14%;
  left:50%;
  transform:translate(-50%, 0) scale(0);
  font-family:'DotGothic16', monospace;
  font-size:36px;
  font-weight:bold;
  letter-spacing:5px;
  z-index:80;
  pointer-events:none;
  padding:10px 32px;
  border-radius:30px;
  text-shadow:2px 2px 0 #1a1a2e, -1px -1px 0 #1a1a2e, 1px -1px 0 #1a1a2e, -1px 1px 0 #1a1a2e;
  border:3px solid;
  animation:weatherToast 2.0s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.weather-toast.sun {
  color:#fff5b8;
  background:rgba(255, 180, 60, 0.35);
  border-color:#ffd75e;
  box-shadow:0 0 24px rgba(255, 215, 94, 0.85);
}
.weather-toast.rain {
  color:#e0f4ff;
  background:rgba(80, 150, 255, 0.3);
  border-color:#a0e0ff;
  box-shadow:0 0 24px rgba(160, 224, 255, 0.85);
}
.weather-toast.night {
  color:#e8e8ff;
  background:rgba(80, 80, 140, 0.4);
  border-color:#c0c0e8;
  box-shadow:0 0 24px rgba(192, 192, 232, 0.7);
}

@keyframes weatherToast {
  0%   { opacity:0; transform:translate(-50%, 0) scale(0); }
  20%  { opacity:1; transform:translate(-50%, 0) scale(1.15); }
  35%  { opacity:1; transform:translate(-50%, 0) scale(1.0); }
  80%  { opacity:1; transform:translate(-50%, 0) scale(1.0); }
  100% { opacity:0; transform:translate(-50%, -10px) scale(0.95); }
}

/* ===== モード切替タブ ===== */
.mode-tabs {
  display:flex;
  gap:8px;
  z-index:2;
  position:relative;
}

.mode-tab {
  font-family:'DotGothic16', monospace;
  font-size:14px;
  letter-spacing:2px;
  padding:8px 22px;
  min-height:44px;
  border:2px solid rgba(255,80,180,0.5);
  border-radius:24px;
  background:rgba(26,26,46,0.7);
  color:#fff;
  cursor:pointer;
  transition:all 0.2s;
  text-shadow:1px 1px 0 #1a1a2e;
}

.mode-tab:hover:not(:disabled) {
  border-color:#ff50b4;
  background:rgba(255,80,180,0.18);
  transform:translateY(-1px);
}

.mode-tab.active {
  border-color:#ff50b4;
  background:linear-gradient(135deg, rgba(255,80,180,0.5), rgba(255,138,61,0.45));
  box-shadow:0 0 14px rgba(255,80,180,0.7);
  color:#fff;
}

.mode-tab[data-mode="score-attack"].active {
  border-color:#ffd700;
  background:linear-gradient(135deg, rgba(255,215,0,0.4), rgba(255,138,61,0.4));
  box-shadow:0 0 14px rgba(255,215,0,0.7);
}

.mode-tab:disabled {
  opacity:0.4;
  cursor:not-allowed;
}

/* ===== 試走モード用デバッグトグル ===== */
.awakening-force-panel {
  display:flex;
  justify-content:center;
  position:relative;
  z-index:2;
  margin:0 0 10px;
}

.awakening-force-toggle {
  font-family:'DotGothic16', monospace;
  min-height:44px;
  padding:8px 18px;
  border:2px solid rgba(84,200,255,0.65);
  border-radius:10px;
  background:rgba(10,18,36,0.82);
  color:#cfefff;
  font-size:15px;
  letter-spacing:1px;
  cursor:pointer;
  text-shadow:0 0 8px rgba(84,200,255,0.85);
  box-shadow:0 0 14px rgba(84,200,255,0.18);
  transition:transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.awakening-force-toggle:hover:not(:disabled) {
  transform:translateY(-1px);
  border-color:#54c8ff;
  box-shadow:0 0 18px rgba(84,200,255,0.38);
}

.awakening-force-toggle[aria-pressed="true"] {
  border-color:#ffd43d;
  background:linear-gradient(135deg, rgba(255,212,61,0.24), rgba(84,200,255,0.22));
  color:#fff4a3;
  text-shadow:0 0 10px rgba(255,212,61,0.95);
  box-shadow:0 0 20px rgba(255,212,61,0.35), inset 0 0 16px rgba(84,200,255,0.16);
}

.awakening-force-toggle:disabled {
  opacity:0.55;
  cursor:not-allowed;
}

/* ===== スコアアタックパネル ===== */
.score-attack-panel {
  background:rgba(26,26,46,0.92);
  border:2px solid #ffd700;
  border-radius:14px;
  padding:14px 18px;
  box-shadow:0 0 20px rgba(255,215,0,0.35);
  backdrop-filter:blur(8px);
  z-index:2;
  position:relative;
}

.sa-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(255,215,0,0.3);
}

.sa-race-counter {
  font-family:'DotGothic16', monospace;
  font-size:16px;
  color:#fff;
  letter-spacing:2px;
}

.sa-coins {
  font-family:'DotGothic16', monospace;
  font-size:22px;
  color:#ffd700;
  text-shadow:0 0 10px rgba(255,215,0,0.7);
  font-weight:bold;
  transition:color 0.15s, text-shadow 0.15s, transform 0.15s;
  transform-origin:center;
}

.sa-coins.counting {
  transform:scale(1.08);
  animation:saCoinCounterPulse 0.22s ease-in-out infinite alternate;
}

.sa-coins.counting.gain {
  color:#fff2a8;
  text-shadow:0 0 8px #ffd700, 0 0 18px rgba(255,215,0,0.65);
}

.sa-coins.counting.loss {
  color:#ff9a9a;
  text-shadow:var(--readable-shadow), var(--glow-red-soft);
}

.sa-coins.counting.tier-jackpot,
.sa-coins.counting.tier-mega {
  color:#fff9df;
  text-shadow:var(--readable-shadow), var(--glow-gold-soft), 0 0 14px rgba(255,80,180,0.18);
}

@keyframes saCoinCounterPulse {
  from { transform:scale(1.03); }
  to   { transform:scale(1.12); }
}

.sa-placeholder {
  text-align:center;
  font-size:13px;
  color:rgba(255,255,255,0.5);
  padding:18px;
  font-style:italic;
}

/* ===== 賭けUI ===== */
.sa-section-title {
  font-family:'DotGothic16', monospace;
  font-size:13px;
  color:rgba(255,255,255,0.7);
  letter-spacing:2px;
  margin-bottom:6px;
  margin-top:8px;
}

.sa-cat-buttons {
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:6px;
  margin-bottom:8px;
}

.sa-cat-btn {
  font-family:'DotGothic16', monospace;
  font-size:13px;
  padding:8px 10px;
  border:2px solid var(--cat-color, #888);
  border-radius:10px;
  background:rgba(26,26,46,0.5);
  color:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  transition:all 0.15s;
  text-shadow:1px 1px 0 #1a1a2e;
}

.sa-cat-btn:hover {
  background:rgba(255,255,255,0.08);
  transform:translateY(-1px);
}

.sa-cat-btn.selected {
  background:linear-gradient(135deg, var(--cat-color, #888), rgba(26,26,46,0.5));
  box-shadow:0 0 14px var(--cat-color, #888);
  transform:translateY(-1px);
}

.sa-cat-btn .sa-cat-name {
  font-weight:bold;
  font-size:14px;
}

.sa-cat-btn .sa-cat-info {
  font-size:11px;
  opacity:0.85;
}

.sa-cat-btn .sa-cat-bet {
  min-width:46px;
  text-align:center;
  font-size:11px;
  color:#6ee7ff;
  border:1px solid rgba(110,231,255,0.55);
  border-radius:999px;
  background:rgba(6,24,36,0.68);
  padding:1px 5px;
  box-shadow:0 0 8px rgba(110,231,255,0.18);
}

.sa-cat-btn .sa-cat-odds-tag {
  background:rgba(255,215,0,0.2);
  border:1px solid rgba(255,215,0,0.5);
  border-radius:6px;
  padding:1px 6px;
  font-size:11px;
  color:#ffd700;
  font-weight:bold;
  position:relative;
  overflow:hidden;
  transform-origin:center;
}

.sa-bet-input-row {
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:6px;
}

.sa-bet-input-row input {
  flex:1;
  font-family:'DotGothic16', monospace;
  font-size:18px;
  min-height:48px;
  padding:8px 10px;
  border:2px solid #ffd700;
  border-radius:10px;
  background:rgba(26,26,46,0.85);
  color:#ffd700;
  text-align:center;
  font-weight:bold;
}

.sa-bet-input-row input:focus {
  outline:none;
  box-shadow:0 0 10px rgba(255,215,0,0.6);
}

.sa-coin-suffix {
  font-family:'DotGothic16', monospace;
  font-size:13px;
  color:#ffd700;
}

.sa-bet-presets {
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:6px;
  margin-bottom:10px;
}

.sa-preset-btn {
  font-family:'DotGothic16', monospace;
  font-size:12px;
  min-height:44px;
  padding:8px 6px;
  border:1px solid rgba(255,215,0,0.5);
  border-radius:8px;
  background:rgba(26,26,46,0.6);
  color:#ffd700;
  cursor:pointer;
  transition:all 0.15s;
}

.sa-preset-btn:hover:not(:disabled) {
  background:rgba(255,215,0,0.18);
  border-color:#ffd700;
}

.sa-preset-btn:active:not(:disabled) {
  transform:scale(0.96);
  background:rgba(255,215,0,0.24);
}

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

.sa-bet-mode-btn {
  color:#0d0d1a;
  border-color:#ffd700;
  background:linear-gradient(135deg, #ffd700, #ff8a3d);
  box-shadow:0 0 12px rgba(255,215,0,0.32);
  font-weight:bold;
}

.sa-bet-presets.subtract .sa-bet-mode-btn {
  background:linear-gradient(135deg, #50c8ff, #a875ff);
  border-color:#50c8ff;
  box-shadow:0 0 12px rgba(80,200,255,0.36);
}

.sa-bet-presets.subtract .sa-preset-btn[data-preset^="add"] {
  color:#50c8ff;
  border-color:rgba(80,200,255,0.58);
  background:rgba(80,200,255,0.12);
}

.sa-pct-preset {
  color:#9ee8ff;
  border-color:rgba(80,200,255,0.48);
  background:rgba(80,200,255,0.09);
}

.sa-pct-preset:hover:not(:disabled) {
  background:rgba(80,200,255,0.17);
  border-color:#50c8ff;
}

.sa-even-preset {
  color:#c7ffdf;
  border-color:rgba(74,222,128,0.62);
  background:rgba(74,222,128,0.11);
}

.sa-even-preset:hover:not(:disabled) {
  background:rgba(74,222,128,0.2);
  border-color:#4ade80;
}

.sa-bet-summary {
  font-family:'DotGothic16', monospace;
  font-size:12px;
  color:rgba(255,255,255,0.85);
  text-align:center;
  padding:8px;
  background:rgba(255,255,255,0.05);
  border-radius:8px;
  margin-top:6px;
  letter-spacing:1px;
}

.sa-bet-summary.invalid {
  color:#ff6b6b;
  background:rgba(255,107,107,0.1);
}

.sa-bet-summary.ready {
  color:#4ade80;
  background:rgba(74,222,128,0.12);
  border:1px solid rgba(74,222,128,0.4);
}

.sa-bet-breakdown {
  display:flex;
  flex-wrap:wrap;
  gap:4px 8px;
  margin-top:5px;
  color:rgba(255,255,255,0.82);
  font-size:11px;
  line-height:1.35;
}

.sa-bet-penalty {
  display:inline-block;
  margin-left:6px;
  color:#ffcc66;
  text-shadow:0 0 8px rgba(255,180,60,0.35);
  white-space:nowrap;
}

.sa-prediction-history {
  display:flex;
  flex-direction:column;
  gap:5px;
  margin-top:8px;
  max-height:168px;
  overflow:auto;
}

.sa-prediction-history-empty,
.sa-prediction-history-row {
  font-family:'DotGothic16', monospace;
  font-size:11px;
  line-height:1.3;
  border-radius:8px;
}

.sa-prediction-history-empty {
  padding:7px 8px;
  border:1px dashed rgba(255,255,255,0.18);
  color:rgba(255,255,255,0.48);
  text-align:center;
}

.sa-prediction-history-row {
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto;
  gap:3px 8px;
  align-items:center;
  padding:7px 8px;
  border:1px solid rgba(80,200,255,0.26);
  background:rgba(8,8,18,0.46);
  color:#d9eaff;
}

.sa-prediction-history-row.win {
  border-color:rgba(74,222,128,0.42);
  background:rgba(74,222,128,0.08);
}

.sa-prediction-history-row.lose {
  border-color:rgba(255,107,107,0.34);
  background:rgba(255,107,107,0.06);
}

.sa-history-race {
  color:#ffe15a;
  white-space:nowrap;
}

.sa-history-main {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.sa-history-sub {
  grid-column:2 / 3;
  min-width:0;
  color:rgba(255,255,255,0.62);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.sa-prediction-history-row b {
  grid-row:1 / span 2;
  grid-column:3;
  color:#4ade80;
  white-space:nowrap;
  text-align:right;
}

.sa-prediction-history-row.lose b {
  color:#ff9aa8;
}

/* ===== 賭け精算の派手通知 ===== */
.sa-payout-notice {
  position:fixed;
  top:40%;
  left:50%;
  transform:translate(-50%, -50%) scale(0);
  font-family:'DotGothic16', monospace;
  font-size:100px;
  font-weight:bold;
  z-index:95;
  pointer-events:none;
  white-space:nowrap;
  letter-spacing:6px;
  -webkit-text-stroke:1.4px #080812;
  text-align:center;
  line-height:1.0;
}

.sa-payout-notice .sa-payout-sub {
  display:block;
  font-size:36%;
  letter-spacing:3px;
  margin-top:14px;
  -webkit-text-stroke:0.7px #080812;
  text-shadow:var(--readable-shadow), 0 0 8px rgba(255,255,255,0.18);
}

.sa-payout-tier-label {
  display:block;
  font-size:42%;
  letter-spacing:5px;
  margin-bottom:8px;
  color:#ffd700;
  -webkit-text-stroke:0.8px #080812;
  text-shadow:var(--readable-shadow), var(--glow-gold-soft);
}

.sa-payout-notice.win {
  color:#7cffa0;
  text-shadow:
    var(--readable-shadow-strong),
    var(--glow-green-soft);
  animation:saPayoutWin 2.0s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.sa-payout-notice.win.tier-gold {
  color:#fff6c9;
  text-shadow:
    var(--readable-shadow-strong),
    var(--glow-gold-soft);
}

.sa-payout-notice.win.tier-flash,
.sa-payout-notice.win.tier-jackpot,
.sa-payout-notice.win.tier-mega {
  color:#fff9df;
  text-shadow:
    var(--readable-shadow-strong),
    var(--glow-gold-soft),
    0 0 18px rgba(255,80,180,0.18);
}

.sa-payout-notice.win.tier-jackpot,
.sa-payout-notice.win.tier-mega {
  animation:saPayoutJackpot 2.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.sa-payout-notice.lose {
  color:#ff8a8a;
  text-shadow:
    var(--readable-shadow-strong),
    var(--glow-red-soft);
  animation:saPayoutLose 2.0s ease-out forwards;
  filter:brightness(0.92);
}

@keyframes saPayoutWin {
  0%   { opacity:0; transform:translate(-50%, -50%) scale(0) rotate(-15deg); }
  18%  { opacity:1; transform:translate(-50%, -50%) scale(1.4) rotate(8deg); }
  32%  { opacity:1; transform:translate(-50%, -50%) scale(1.0) rotate(-3deg); }
  78%  { opacity:1; transform:translate(-50%, -50%) scale(1.05) rotate(0deg); }
  100% { opacity:0; transform:translate(-50%, -50%) scale(1.2) rotate(0deg); }
}

@keyframes saPayoutLose {
  0%   { opacity:0; transform:translate(-50%, -50%) scale(0) rotate(-3deg); }
  18%  { opacity:1; transform:translate(-50%, -50%) scale(1.15); }
  60%  { opacity:1; transform:translate(-50%, -50%) scale(1.0); }
  100% { opacity:0; transform:translate(-50%, -50%) scale(0.95); }
}

@keyframes saPayoutJackpot {
  0%   { opacity:0; transform:translate(-50%, -50%) scale(0) rotate(-18deg); filter:hue-rotate(0deg); }
  14%  { opacity:1; transform:translate(-50%, -50%) scale(1.58) rotate(8deg); }
  28%  { opacity:1; transform:translate(-50%, -50%) scale(1.02) rotate(-3deg); }
  68%  { opacity:1; transform:translate(-50%, -50%) scale(1.1) rotate(0deg); filter:hue-rotate(80deg); }
  100% { opacity:0; transform:translate(-50%, -50%) scale(1.35) rotate(0deg); filter:hue-rotate(0deg); }
}

.sa-coin-counter-pop {
  position:fixed;
  top:max(70px, calc(env(safe-area-inset-top) + 16px));
  left:50%;
  transform:translate(-50%, 0);
  z-index:116;
  pointer-events:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  font-family:'DotGothic16', monospace;
  color:#ffd700;
  text-align:center;
  text-shadow:var(--readable-shadow), var(--glow-gold-soft);
  animation:saCoinCounterPop 0.9s ease-out both;
  min-width:min(420px, calc(100vw - 28px));
  padding:10px 14px;
  border:1px solid rgba(255,215,0,0.45);
  border-radius:12px;
  background:rgba(8,8,18,0.72);
  box-shadow:0 0 20px rgba(255,215,0,0.22);
  backdrop-filter:blur(8px);
}

.sa-settlement-pop {
  pointer-events:auto;
  user-select:none;
}

.sa-coin-counter-pop .sa-coin-counter-label {
  font-size:18px;
  letter-spacing:3px;
  color:#fff2a8;
}

.sa-coin-counter-pop .sa-coin-counter-value {
  font-size:38px;
  letter-spacing:2px;
  font-weight:bold;
}

.sa-coin-counter-pop .sa-coin-counter-detail {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  font-size:14px;
  letter-spacing:1px;
  color:rgba(255,255,255,0.86);
  text-shadow:0 0 8px rgba(0,0,0,0.8);
  max-width:100%;
}

.sa-coin-counter-arrow {
  color:#ffd700;
}

.sa-coin-counter-delta {
  font-size:18px;
  letter-spacing:2px;
  color:#7cffa0;
}

.sa-coin-counter-pop.loss .sa-coin-counter-delta {
  color:#ff9a9a;
}

.sa-coin-counter-pop.settled {
  animation:none;
  border-color:rgba(80,200,255,0.55);
  box-shadow:0 0 22px rgba(80,200,255,0.22), 0 0 14px rgba(255,215,0,0.16);
}

.sa-coin-counter-pop.loss {
  color:#ff9a9a;
  text-shadow:var(--readable-shadow), var(--glow-red-soft);
  border-color:rgba(255,80,80,0.45);
  box-shadow:0 0 20px rgba(255,80,80,0.2);
}

.sa-coin-counter-pop.tier-jackpot .sa-coin-counter-value,
.sa-coin-counter-pop.tier-mega .sa-coin-counter-value {
  font-size:46px;
  color:#fff9df;
  text-shadow:var(--readable-shadow), var(--glow-gold-soft), 0 0 18px rgba(255,80,180,0.2);
}

.sa-settlement-current {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  min-height:24px;
  font-size:18px;
  letter-spacing:1px;
  color:#fff6c9;
}

.sa-settlement-current strong {
  color:#66d9ff;
  font-weight:bold;
}

.sa-settlement-current.gain strong,
.sa-settlement-step.gain .sa-settlement-delta {
  color:#83ff9f;
}

.sa-settlement-current.loss strong,
.sa-settlement-step.loss .sa-settlement-delta {
  color:#ff9a9a;
}

.sa-settlement-steps {
  width:100%;
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-top:4px;
}

.sa-settlement-step {
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:8px;
  padding:4px 8px;
  border-radius:8px;
  background:rgba(255,255,255,0.06);
  color:rgba(255,255,255,0.86);
  font-size:13px;
  letter-spacing:1px;
  opacity:0;
  transform:translateY(6px);
  animation:saSettlementStepIn 0.24s ease-out forwards;
}

.sa-settlement-step.done {
  background:rgba(255,255,255,0.035);
}

.sa-settlement-final {
  margin-top:4px;
  padding-top:6px;
  border-top:1px solid rgba(255,255,255,0.16);
}

.sa-settlement-label {
  color:#fff2a8;
}

.sa-settlement-formula {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.sa-settlement-delta {
  font-weight:bold;
}

@keyframes saSettlementStepIn {
  to { opacity:1; transform:translateY(0); }
}

@keyframes saCoinCounterPop {
  from { opacity:0; transform:translate(-50%, 18px) scale(0.82); }
  to   { opacity:1; transform:translate(-50%, 0) scale(1); }
}

.sa-payout-screen-flash {
  position:fixed;
  inset:0;
  z-index:88;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle at 50% 42%, rgba(255,215,0,0.32), rgba(255,80,180,0.14) 38%, transparent 72%);
  animation:saPayoutScreenFlash 0.85s ease-out forwards;
}

.sa-payout-screen-flash.tier-mega {
  background:
    radial-gradient(circle at 50% 42%, rgba(255,249,223,0.42), rgba(255,80,180,0.22) 34%, transparent 74%),
    linear-gradient(90deg, rgba(80,200,255,0.10), rgba(255,215,0,0.12), rgba(255,80,180,0.10));
  animation:saPayoutScreenFlash 1.55s ease-out forwards;
}

@keyframes saPayoutScreenFlash {
  0%   { opacity:0; }
  12%  { opacity:1; }
  100% { opacity:0; }
}

/* 大穴的中の専用テロップ */
.sa-longshot-notice {
  position:fixed;
  top:24%;
  left:50%;
  transform:translate(-50%, -50%) scale(0);
  font-family:'DotGothic16', monospace;
  font-size:64px;
  font-weight:bold;
  color:#ffd700;
  z-index:97;
  pointer-events:none;
  white-space:nowrap;
  letter-spacing:6px;
  text-align:center;
  text-shadow:
    var(--readable-shadow-strong),
    var(--glow-gold-soft);
  -webkit-text-stroke:1.2px #080812;
  animation:saLongshot 2.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.sa-longshot-notice .sa-longshot-sub {
  display:block;
  font-size:38%;
  letter-spacing:3px;
  margin-top:10px;
  color:#fff;
  -webkit-text-stroke:0.7px #080812;
}

@keyframes saLongshot {
  0%   { opacity:0; transform:translate(-50%, -50%) scale(0) rotate(-12deg); }
  18%  { opacity:1; transform:translate(-50%, -50%) scale(1.4) rotate(6deg); }
  32%  { opacity:1; transform:translate(-50%, -50%) scale(1.0) rotate(-2deg); }
  78%  { opacity:1; transform:translate(-50%, -50%) scale(1.05) rotate(0deg); }
  100% { opacity:0; transform:translate(-50%, -50%) scale(1.18) rotate(0deg); }
}

/* 勝利時のコイン舞い散り */
.sa-coin-particle {
  position:fixed;
  font-size:32px;
  z-index:94;
  pointer-events:none;
  animation:saCoinFly 1.6s ease-out forwards;
  filter:drop-shadow(0 0 8px rgba(255,215,0,0.7));
}

.sa-coin-particle.tier-jackpot,
.sa-coin-particle.tier-mega {
  font-size:38px;
  filter:
    drop-shadow(0 0 8px rgba(255,215,0,0.9))
    drop-shadow(0 0 16px rgba(255,80,180,0.65));
}

.race-coin-drop {
  position:fixed;
  z-index:113;
  pointer-events:none;
  font-size:22px;
  transform:translate(-50%, -50%);
  filter:drop-shadow(0 0 6px rgba(255,215,0,0.68)) drop-shadow(0 2px 3px rgba(0,0,0,0.55));
  animation:raceCoinDrop 1.05s ease-out forwards;
}

.race-coin-drop-label {
  position:fixed;
  z-index:114;
  pointer-events:none;
  transform:translate(-50%, -50%);
  padding:4px 9px;
  border:1px solid rgba(255,225,90,0.72);
  border-radius:999px;
  background:rgba(8,8,18,0.82);
  color:#fff4a8;
  font-family:'DotGothic16', monospace;
  font-size:14px;
  letter-spacing:1px;
  white-space:nowrap;
  text-shadow:var(--readable-shadow), var(--glow-gold-soft);
  animation:raceCoinDropLabel 1.2s ease-out forwards;
}

@keyframes saCoinFly {
  0%   { opacity:1; transform:translate(0, 0) rotate(0deg) scale(1); }
  60%  { opacity:1; }
  100% { opacity:0; transform:translate(var(--cx, 0), var(--cy, -200px)) rotate(720deg) scale(0.6); }
}

@keyframes raceCoinDrop {
  0%   { opacity:0; transform:translate(-50%, -50%) scale(0.5) rotate(0deg); }
  12%  { opacity:1; }
  70%  { opacity:1; }
  100% { opacity:0; transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.75) rotate(520deg); }
}

@keyframes raceCoinDropLabel {
  0%   { opacity:0; transform:translate(-50%, -32%) scale(0.84); }
  16%  { opacity:1; transform:translate(-50%, -50%) scale(1.06); }
  72%  { opacity:1; transform:translate(-50%, -66%) scale(1); }
  100% { opacity:0; transform:translate(-50%, -86%) scale(0.94); }
}

/* チョーシ変動トースト：レース後に各猫の増減を派手表示 */
.sa-delta-toast {
  position:fixed;
  bottom:18%;
  left:50%;
  transform:translate(-50%, 0);
  display:flex;
  gap:18px;
  align-items:center;
  background:rgba(26,26,46,0.92);
  border:2px solid #50c8ff;
  border-radius:14px;
  padding:14px 22px;
  z-index:93;
  pointer-events:none;
  box-shadow:0 0 24px rgba(80,200,255,0.6);
  font-family:'DotGothic16', monospace;
  animation:saDeltaToast 2.6s ease-in-out forwards;
}

@keyframes saDeltaToast {
  0%   { opacity:0; transform:translate(-50%, 30px) scale(0.85); }
  10%  { opacity:1; transform:translate(-50%, 0) scale(1.0); }
  88%  { opacity:1; transform:translate(-50%, 0) scale(1.0); }
  100% { opacity:0; transform:translate(-50%, -10px) scale(0.95); }
}

.sa-delta-cat {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:14px;
  font-weight:bold;
}

.sa-delta-value {
  font-size:16px;
  font-weight:bold;
  letter-spacing:1px;
}

.sa-delta-value.up    { color:#4ade80; text-shadow:0 0 6px rgba(74,222,128,0.6); }
.sa-delta-value.down  { color:#ff8a8a; text-shadow:0 0 6px rgba(255,80,80,0.5); }
.sa-delta-value.same  { color:#888; }
.sa-delta-value.jump  { color:#ffd700; text-shadow:0 0 10px rgba(255,215,0,0.8); animation:streakPulse 0.4s ease-in-out infinite alternate; }

/* ===== 最終結果オーバーレイ ===== */
.sa-final-overlay {
  position:fixed;
  inset:0;
  z-index:110;
  background:radial-gradient(ellipse at 50% 50%,
    rgba(40, 30, 80, 0.92),
    rgba(10, 10, 30, 0.96) 80%);
  backdrop-filter:blur(8px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:20px;
  pointer-events:auto;
  animation:saFinalShow 0.7s ease-out forwards;
  padding:40px 20px;
}

@keyframes saFinalShow {
  from { opacity:0; }
  to   { opacity:1; }
}

.sa-final-title {
  font-family:'DotGothic16', monospace;
  font-weight:900;
  max-width:94vw;
  text-align:center;
  font-size:clamp(38px, 7vw, 72px);
  line-height:1.02;
  letter-spacing:4px;
  color:#ffd700;
  -webkit-text-fill-color:#ffd700;
  text-shadow:
    1px 1px 0 #080812,
    -1px -1px 0 #080812,
    0 0 14px rgba(255,215,0,0.46),
    var(--glow-gold-soft);
  -webkit-text-stroke:0.45px rgba(8, 8, 18, 0.9);
  paint-order:stroke fill;
  animation:saFinalTitle 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes saFinalTitle {
  0%   { opacity:0; transform:scale(0) rotate(-15deg); }
  60%  { opacity:1; transform:scale(1.15) rotate(5deg); }
  100% { opacity:1; transform:scale(1.0) rotate(0deg); }
}

.sa-final-score {
  font-family:'DotGothic16', monospace;
  display:flex;
  align-items:baseline;
  justify-content:center;
  flex-wrap:wrap;
  gap:6px 18px;
  max-width:min(94vw, 980px);
  font-size:clamp(64px, 11vw, 128px);
  line-height:0.95;
  color:#fff;
  -webkit-text-fill-color:#fff;
  text-shadow:
    1px 1px 0 #080812,
    -1px -1px 0 #080812,
    0 0 18px rgba(255,215,0,0.34),
    var(--glow-gold-soft);
  -webkit-text-stroke:0.7px rgba(8, 8, 18, 0.92);
  paint-order:stroke fill;
  letter-spacing:3px;
  animation:saFinalScore 1.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sa-final-score-coin {
  font-size:36%;
  color:#ffd700;
  -webkit-text-fill-color:#ffd700;
  margin-left:0;
  vertical-align:middle;
  letter-spacing:2px;
  text-shadow:1px 1px 0 #080812, 0 0 10px rgba(255,215,0,0.36);
  -webkit-text-stroke:0.35px rgba(8, 8, 18, 0.86);
  paint-order:stroke fill;
}

@keyframes saFinalScore {
  0%   { opacity:0; transform:translateY(40px) scale(0.5); }
  40%  { opacity:0; transform:translateY(40px) scale(0.5); }
  70%  { opacity:1; transform:translateY(-8px) scale(1.1); }
  100% { opacity:1; transform:translateY(0) scale(1.0); }
}

.sa-final-rank {
  font-family:'DotGothic16', monospace;
  font-weight:900;
  max-width:92vw;
  text-align:center;
  font-size:clamp(26px, 5.2vw, 42px);
  line-height:1.1;
  letter-spacing:3px;
  -webkit-text-stroke:0.45px rgba(8, 8, 18, 0.9);
  paint-order:stroke fill;
  text-shadow:1px 1px 0 #080812, 0 0 10px currentColor;
  animation:saFinalFadeIn 1.8s ease-out;
}

@keyframes saFinalFadeIn {
  0%   { opacity:0; transform:translateY(20px); }
  60%  { opacity:0; transform:translateY(20px); }
  100% { opacity:1; transform:translateY(0); }
}

/* メタ階層（概念・宇宙・創造者）：レインボーグラデーションの神々しい演出 */
.sa-final-rank.meta {
  background:linear-gradient(90deg, #ff00ea 0%, #ff8a3d 25%, #ffd700 50%, #50c8ff 75%, #a373ff 100%);
  background-size:200% auto;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-stroke:0.45px rgba(8, 8, 18, 0.9);
  text-shadow:none;
  filter:
    drop-shadow(1px 1px 0 #080812)
    drop-shadow(0 0 10px rgba(255,255,255,0.42))
    drop-shadow(0 0 22px rgba(255,80,180,0.24));
  animation:metaRankShimmer 3s linear infinite, metaRankFloat 2s ease-in-out infinite alternate;
}
@keyframes metaRankShimmer {
  from { background-position:0% 50%; }
  to   { background-position:200% 50%; }
}
@keyframes metaRankFloat {
  from { transform:translateY(0) scale(1); }
  to   { transform:translateY(-4px) scale(1.03); }
}

.sa-final-rank.legend   { color:#ff9bd6; -webkit-text-fill-color:#ff9bd6; text-shadow:1px 1px 0 #080812, var(--glow-pink-soft); }
.sa-final-rank.lucky    { color:#fff0a6; -webkit-text-fill-color:#fff0a6; text-shadow:1px 1px 0 #080812, var(--glow-gold-soft); }
.sa-final-rank.ok       { color:#8cffaa; -webkit-text-fill-color:#8cffaa; text-shadow:1px 1px 0 #080812, var(--glow-green-soft); }
.sa-final-rank.maintain { color:#a7e8ff; -webkit-text-fill-color:#a7e8ff; text-shadow:1px 1px 0 #080812, var(--glow-blue-soft); }
.sa-final-rank.deficit  { color:#ffb7b5; -webkit-text-fill-color:#ffb7b5; text-shadow:1px 1px 0 #080812, var(--glow-red-soft); }
.sa-final-rank.bankrupt { color:#d2d2df; -webkit-text-fill-color:#d2d2df; text-shadow:1px 1px 0 #080812; }

.sa-final-stats {
  display:flex;
  gap:32px;
  background:rgba(26, 26, 46, 0.85);
  border:2px solid #50c8ff;
  border-radius:16px;
  padding:18px 32px;
  font-family:'DotGothic16', monospace;
  box-shadow:0 0 24px rgba(80, 200, 255, 0.3);
  animation:saFinalFadeIn 2.1s ease-out;
}

.sa-final-stat {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  min-width:90px;
}

.sa-final-stat-label {
  font-size:13px;
  color:rgba(255,255,255,0.6);
  letter-spacing:2px;
}

.sa-final-stat-value {
  font-size:26px;
  color:#50c8ff;
  font-weight:bold;
  letter-spacing:2px;
  text-shadow:0 0 8px rgba(80, 200, 255, 0.5);
}

.sa-final-stat-value.profit-up   { color:#4ade80; text-shadow:0 0 8px rgba(74,222,128,0.6); }
.sa-final-stat-value.profit-down { color:#ff8a8a; text-shadow:0 0 8px rgba(255,80,80,0.4); }

.sa-final-restart {
  font-family:'DotGothic16', monospace;
  font-size:24px;
  letter-spacing:4px;
  padding:14px 44px;
  border:3px solid #1a1a2e;
  border-radius:50px;
  background:linear-gradient(135deg, #ff50b4, #ff8a3d);
  color:#fff;
  cursor:pointer;
  margin-top:12px;
  text-shadow:2px 2px 0 #1a1a2e;
  box-shadow:
    0 0 20px rgba(255, 80, 180, 0.7),
    inset 0 -6px 14px rgba(0,0,0,0.3),
    inset 0 6px 14px rgba(255,255,255,0.2);
  transition:transform 0.15s, box-shadow 0.15s;
  animation:saFinalFadeIn 2.4s ease-out;
}

.sa-final-restart:hover {
  transform:scale(1.05);
  box-shadow:
    0 0 30px rgba(255, 80, 180, 0.9),
    inset 0 -6px 14px rgba(0,0,0,0.3),
    inset 0 6px 14px rgba(255,255,255,0.2);
}

.sa-final-restart:active {
  transform:scale(0.96);
}

.sa-final-bankrupt-msg {
  font-family:'DotGothic16', monospace;
  font-size:22px;
  color:#ff8a8a;
  text-shadow:0 0 10px rgba(255,80,80,0.5), 3px 3px 0 #1a1a2e;
  letter-spacing:3px;
  animation:saFinalFadeIn 1.5s ease-out;
}

/* ===== チョーシ（下馬評） ===== */
.chōshi-display {
  background:rgba(26,26,46,0.85);
  border:2px solid #50c8ff;
  border-radius:14px;
  padding:12px 18px;
  font-family:'DotGothic16', monospace;
  box-shadow:0 0 20px rgba(80,200,255,0.3);
  backdrop-filter:blur(8px);
  z-index:2;
}

.chōshi-display h3 {
  color:#50c8ff;
  font-size:14px;
  letter-spacing:2px;
  margin-bottom:8px;
  text-shadow:0 0 8px #50c8ff;
}

.chōshi-row {
  display:flex;
  align-items:center;
  gap:10px;
  padding:4px 6px;
  border-radius:6px;
  margin:2px 0;
  font-size:13px;
  background:rgba(255,255,255,0.04);
}

.chōshi-name {
  font-weight:bold;
  min-width:50px;
  text-align:left;
}

.chōshi-stars {
  letter-spacing:1px;
  font-size:14px;
  color:#ffd700;
  text-shadow:0 0 6px rgba(255,215,0,0.5);
}

.chōshi-stars .empty {
  color:rgba(255,255,255,0.2);
  text-shadow:none;
}

.chōshi-label {
  font-size:12px;
  letter-spacing:1px;
  min-width:60px;
  text-align:left;
}

.chōshi-label.tier-best   { color:#ff6b9d; text-shadow:0 0 6px rgba(255,107,157,0.6); }
.chōshi-label.tier-good   { color:#ffd75e; }
.chōshi-label.tier-mid    { color:#c0c8d0; }
.chōshi-label.tier-poor   { color:#7090b0; }
.chōshi-label.tier-worst  { color:#506080; }
.chōshi-label.tier-slump  { color:#a060c0; text-shadow:0 0 6px rgba(160,96,192,0.5); font-style:italic; }

.chōshi-odds {
  font-family:'DotGothic16', monospace;
  font-size:13px;
  color:#ffd700;
  text-shadow:0 0 6px rgba(255,215,0,0.6);
  font-weight:bold;
  margin-left:auto;
  padding:2px 9px;
  background:rgba(255,215,0,0.12);
  border:1px solid rgba(255,215,0,0.45);
  border-radius:10px;
  letter-spacing:1px;
  position:relative;
  overflow:hidden;
  transform-origin:center;
}

.chōshi-streak {
  font-size:12px;
  font-weight:bold;
  color:#ff8a3d;
  text-shadow:0 0 6px rgba(255,138,61,0.7);
  animation:streakPulse 0.7s ease-in-out infinite alternate;
  margin-left:6px;
}

/* ===== 戦績パネル ===== */
.stats-panel {
  background:rgba(26,26,46,0.85);
  border:2px solid #ffd75e;
  border-radius:12px;
  padding:12px 18px;
  font-family:'DotGothic16', monospace;
  box-shadow:0 0 12px rgba(255, 215, 94, 0.2);
}

.stats-panel-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:6px;
}

.stats-panel h4 {
  color:#ffd75e;
  font-size:12px;
  letter-spacing:2px;
  text-shadow:0 0 6px rgba(255, 215, 94, 0.4);
}

.stats-panel-actions {
  display:flex;
  align-items:center;
  gap:8px;
}

.stats-tabs {
  display:flex;
  align-items:center;
  gap:4px;
  padding:2px;
  border:1px solid rgba(255,255,255,0.16);
  border-radius:9px;
  background:rgba(0,0,0,0.18);
}

.stats-tab {
  font-family:'DotGothic16', monospace;
  font-size:10px;
  min-height:28px;
  padding:3px 8px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:rgba(255,255,255,0.68);
  cursor:pointer;
}

.stats-tab.active {
  color:#101018;
  background:#ffd75e;
  box-shadow:0 0 10px rgba(255,215,94,0.35);
}

.stats-view {
  display:none;
}

.stats-view.active {
  display:block;
}

.stats-reset-btn {
  font-family:'DotGothic16', monospace;
  font-size:10px;
  padding:2px 8px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.25);
  border-radius:8px;
  color:rgba(255,255,255,0.7);
  cursor:pointer;
}

.stats-reset-btn:hover {
  background:rgba(255,80,180,0.15);
  border-color:#ff50b4;
  color:#ff50b4;
}

.stats-row {
  display:grid;
  grid-template-columns:50px 1fr 1fr 1fr;
  gap:8px;
  font-size:11px;
  padding:3px 4px;
  border-radius:4px;
  align-items:center;
}

.stats-row.header {
  font-size:10px;
  color:rgba(255,255,255,0.5);
  letter-spacing:1px;
  border-bottom:1px solid rgba(255,255,255,0.15);
  padding-bottom:4px;
  margin-bottom:2px;
}

.stats-row .stats-name {
  font-weight:bold;
}

.stats-row .stats-num {
  text-align:right;
  font-variant-numeric:tabular-nums;
}

.chōshi-bars {
  display:flex;
  flex-direction:column;
  gap:6px;
  padding-top:2px;
}

.chōshi-bar-row {
  display:grid;
  grid-template-columns:44px minmax(84px, 1fr) 28px 54px;
  align-items:center;
  gap:7px;
  font-family:'DotGothic16', monospace;
  font-size:11px;
}

.chōshi-bar-name {
  font-weight:bold;
}

.chōshi-bar-track {
  height:10px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,0.11);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.12);
}

.chōshi-bar-fill {
  display:block;
  width:var(--chōshi-value, 50%);
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg, rgba(80,200,255,0.72), var(--cat-color, #ffd75e));
  box-shadow:0 0 10px var(--cat-color, #ffd75e);
}

.chōshi-bar-value {
  text-align:right;
  color:#fff2a8;
  font-variant-numeric:tabular-nums;
}

.chōshi-bar-label {
  text-align:right;
  font-size:10px;
  white-space:nowrap;
}

.chōshi-bar-label.tier-best   { color:#ff6b9d; text-shadow:0 0 6px rgba(255,107,157,0.6); }
.chōshi-bar-label.tier-good   { color:#ffd75e; }
.chōshi-bar-label.tier-mid    { color:#c0c8d0; }
.chōshi-bar-label.tier-poor   { color:#7090b0; }
.chōshi-bar-label.tier-worst  { color:#506080; }
.chōshi-bar-label.tier-slump  { color:#a060c0; text-shadow:0 0 6px rgba(160,96,192,0.5); font-style:italic; }

@keyframes streakPulse {
  from { transform:scale(1.0); }
  to   { transform:scale(1.15); }
}

.start-btn:hover:not(:disabled) {
  transform:scale(1.05);
}

.start-btn:active:not(:disabled) {
  transform:scale(0.95);
}

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

/* 「次の予想へ」ボタン：レース後に勝者表示と並んで出る */
.next-race-btn {
  position:fixed;
  bottom:8%;
  left:50%;
  transform:translateX(-50%);
  font-family:'DotGothic16', monospace;
  font-size:24px;
  letter-spacing:4px;
  padding:14px 36px;
  min-height:56px;
  min-width:min(280px, calc(100vw - 28px));
  max-width:calc(100vw - 28px);
  border:3px solid #1a1a2e;
  border-radius:50px;
  background:linear-gradient(135deg, #50c8ff, #5e72e4);
  color:#fff;
  cursor:pointer;
  text-shadow:2px 2px 0 #1a1a2e;
  box-shadow:
    0 0 24px rgba(80, 200, 255, 0.7),
    inset 0 -6px 14px rgba(0,0,0,0.3),
    inset 0 6px 14px rgba(255,255,255,0.2);
  z-index:60;
  display:none;
  text-align:center;
  white-space:normal;
  animation:nextRaceBtnAppear 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.next-race-btn:hover {
  transform:translateX(-50%) scale(1.05);
  box-shadow:
    0 0 36px rgba(80, 200, 255, 1.0),
    inset 0 -6px 14px rgba(0,0,0,0.3),
    inset 0 6px 14px rgba(255,255,255,0.2);
}

.next-race-btn:active {
  transform:translateX(-50%) scale(0.95);
}

@keyframes nextRaceBtnAppear {
  0%   { opacity:0; transform:translateX(-50%) translateY(20px) scale(0.5); }
  60%  { opacity:1; transform:translateX(-50%) translateY(-4px) scale(1.1); }
  100% { opacity:1; transform:translateX(-50%) translateY(0) scale(1.0); }
}

/* 結果バナー */
.result-banner {
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%) scale(0);
  font-family:'DotGothic16', monospace;
  font-size:80px;
  font-weight:bold;
  letter-spacing:8px;
  z-index:100;
  pointer-events:none;
  text-shadow:
    var(--readable-shadow-strong),
    0 0 12px currentColor,
    0 0 24px color-mix(in srgb, currentColor 35%, transparent);
  white-space:nowrap;
}

.result-banner.show {
  animation:resultBannerShow 3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes resultBannerShow {
  0% { transform:translate(-50%, -50%) scale(0) rotate(-15deg); opacity:0; }
  20% { transform:translate(-50%, -50%) scale(1.3) rotate(0deg); opacity:1; }
  80% { transform:translate(-50%, -50%) scale(1) rotate(0deg); opacity:1; }
  100% { transform:translate(-50%, -50%) scale(1) rotate(0deg); opacity:1; }
}

/* イベントテロップ */
.event-toast {
  position:fixed;
  top:calc(env(safe-area-inset-top, 0px) + 12px);
  left:50%;
  transform:translateX(-50%);
  font-family:'DotGothic16', monospace;
  font-size:clamp(18px, 5vw, 32px);
  font-weight:bold;
  letter-spacing:2px;
  line-height:1.25;
  padding:10px 18px;
  width:max-content;
  max-width:calc(100vw - 24px);
  background:rgba(26,26,46,0.85);
  border:3px solid currentColor;
  border-radius:12px;
  z-index:90;
  pointer-events:none;
  text-shadow:var(--readable-shadow), 0 0 10px color-mix(in srgb, currentColor 35%, transparent);
  white-space:normal;
  overflow-wrap:anywhere;
  text-align:center;
  opacity:0;
  backdrop-filter:blur(8px);
}

.event-toast.show {
  animation:toastShow 2s ease-out forwards;
}

@keyframes toastShow {
  0% { opacity:0; transform:translate(-50%, -20px) scale(0.8); }
  20% { opacity:1; transform:translate(-50%, 0) scale(1.05); }
  30% { transform:translate(-50%, 0) scale(1); }
  80% { opacity:1; }
  100% { opacity:0; transform:translate(-50%, -20px) scale(0.95); }
}

/* スパーク */
.spark {
  position:fixed;
  pointer-events:none;
  z-index:99;
  font-size:30px;
  animation:sparkFly 1.2s ease-out forwards;
}

@keyframes sparkFly {
  0% { transform:translate(0, 0) scale(0); opacity:1; }
  100% { transform:translate(var(--tx), var(--ty)) scale(1.5); opacity:0; }
}

/* ===== 勝利時の登場演出 ===== */
.winner-display {
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%) scale(0);
  z-index:101;
  pointer-events:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
}

.winner-display.show {
  animation:winnerShow 3.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes winnerShow {
  0%   { transform:translate(-50%, -50%) scale(0) rotate(-720deg); opacity:0; }
  35%  { transform:translate(-50%, -50%) scale(1.2) rotate(0deg); opacity:1; }
  45%  { transform:translate(-50%, -50%) scale(1) rotate(0deg); opacity:1; }
  90%  { transform:translate(-50%, -50%) scale(1) rotate(0deg); opacity:1; }
  100% { transform:translate(-50%, -50%) scale(1) rotate(0deg); opacity:1; }
}

.winner-display .winner-cat {
  width:240px;
  height:240px;
  filter:drop-shadow(0 0 30px currentColor);
}

.winner-display .winner-cat img {
  width:100%;
  height:100%;
  object-fit:contain;
  animation:winnerBounce 0.7s ease-in-out infinite;
}

@keyframes winnerBounce {
  0%, 100% { transform:translateY(0) scale(1); }
  50% { transform:translateY(-15px) scale(1.05); }
}

.winner-display .winner-speech {
  background:#fff;
  color:#1a1a2e;
  font-family:'DotGothic16', monospace;
  font-size:28px;
  font-weight:bold;
  padding:14px 32px;
  border-radius:30px;
  border:4px solid #1a1a2e;
  white-space:nowrap;
  position:relative;
  box-shadow:0 6px 20px rgba(0,0,0,0.5);
}

.winner-display .winner-speech::after {
  content:'';
  position:absolute;
  top:-18px;
  left:50%;
  transform:translateX(-50%);
  border-left:14px solid transparent;
  border-right:14px solid transparent;
  border-bottom:18px solid #1a1a2e;
}

.winner-display .winner-speech::before {
  content:'';
  position:absolute;
  top:-12px;
  left:50%;
  transform:translateX(-50%);
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-bottom:13px solid #fff;
  z-index:1;
}
/* スローモ突入時の transition（transform-origin はベース宣言を尊重、JSで動的上書き可） */
.track-wrap {
  transition:none;
}

.track-wrap.zooming {
  /* track-scale と掛け合わせ：1200px設計幅 → 画面幅追従 × 1.5倍ズーム */
  --zoom-scale: 1.5;
  transition:transform 0.8s cubic-bezier(0.65, 0, 0.35, 1);
  box-shadow:
    0 0 100px rgba(255,235,59,1),
    0 0 200px rgba(255,235,59,0.5),
    inset 0 0 60px rgba(0,0,0,0.5);
  border-color:#ffeb3b;
  z-index:42;
}

body[data-round-screen="race"] .track-wrap,
body[data-round-screen="result"] .track-wrap {
  transition:none;
}

/* スローモーション中：全アニメーション減速 */
.slow-motion .cat.running img {
  animation-duration:1s;
}

.slow-motion .cat {
  transition:left 0.4s linear, transform 0.6s ease;
}

/* ビネット：トラック背後に薄く配置、勝者ゴール側中心 */
.vignette {
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:39;
  background:radial-gradient(ellipse 80% 60% at var(--focus-x, 75%) 40%, transparent 40%, rgba(0,0,0,0.65) 100%);
  opacity:0;
  transition:opacity 0.6s ease;
}

.vignette.show {
  opacity:1;
}

/* 集中線：トラック背後に配置、中央マスクで画面端からのみ放射 */
.focus-lines {
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:38;
  opacity:0;
  background:
    repeating-conic-gradient(
      from 0deg at var(--focus-x, 75%) 40%,
      transparent 0deg,
      transparent 11deg,
      rgba(255,235,59,0.18) 11deg,
      rgba(255,235,59,0.18) 12deg
    );
  transition:opacity 0.4s;
  -webkit-mask-image:radial-gradient(ellipse 50% 40% at var(--focus-x, 75%) 40%, transparent 50%, black 90%);
          mask-image:radial-gradient(ellipse 50% 40% at var(--focus-x, 75%) 40%, transparent 50%, black 90%);
}

.focus-lines.show {
  opacity:1;
  animation:focusPulse 0.8s ease-in-out infinite alternate;
}

@keyframes focusPulse {
  from { opacity:0.6; }
  to   { opacity:1; }
}

/* 「ラスト直線」テロップ：上の方に表示してトラックと被らない */
.slowmo-toast {
  position:fixed;
  top:18%;
  left:50%;
  transform:translate(-50%, -50%) scale(0);
  font-family:'DotGothic16', monospace;
  font-size:clamp(28px, 11vw, 64px);
  font-weight:bold;
  letter-spacing:clamp(2px, 1.2vw, 8px);
  line-height:1.08;
  width:max-content;
  max-width:calc(100vw - 24px);
  z-index:95;
  pointer-events:none;
  color:#ffeb3b;
  text-shadow:
    var(--readable-shadow-strong),
    var(--glow-gold-soft);
  white-space:normal;
  overflow-wrap:anywhere;
  text-align:center;
}

.slowmo-toast.show {
  animation:slowmoToastShow 1.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes slowmoToastShow {
  0% { transform:translate(-50%, -50%) scale(0) rotate(-10deg); opacity:0; }
  20% { transform:translate(-50%, -50%) scale(1.3) rotate(0deg); opacity:1; }
  70% { transform:translate(-50%, -50%) scale(1) rotate(0deg); opacity:1; }
  100% { transform:translate(-50%, -50%) scale(1.1) rotate(0deg); opacity:0; }
}
/* 設定パネルはポップアップ内に表示されるよう変更（旧 fixed positioning は撤廃） */
.settings {
  background:rgba(26,26,46,0.92);
  border:2px solid #ff50b4;
  border-radius:12px;
  padding:18px 22px;
  font-size:13px;
  backdrop-filter:blur(10px);
  box-shadow:0 0 20px rgba(255,80,180,0.3);
  width:380px;
  max-width:90vw;
}

/* ポップアップ共通 */
.popup-overlay {
  position:fixed;
  inset:0;
  background:rgba(0, 0, 10, 0.65);
  backdrop-filter:blur(4px);
  z-index:120;
  display:flex;
  align-items:center;
  justify-content:center;
  animation:popupOverlayFade 0.2s ease-out;
}

@keyframes popupOverlayFade {
  from { opacity:0; }
  to   { opacity:1; }
}

.popup-content {
  position:relative;
  animation:popupContentRise 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes popupContentRise {
  0%   { opacity:0; transform:translateY(20px) scale(0.92); }
  100% { opacity:1; transform:translateY(0) scale(1.0); }
}

.popup-close-btn {
  position:absolute;
  top:8px;
  right:10px;
  width:30px;
  height:30px;
  font-size:20px;
  font-weight:bold;
  border:2px solid rgba(255,255,255,0.25);
  border-radius:50%;
  background:rgba(0,0,0,0.4);
  color:#fff;
  cursor:pointer;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1;
}
.popup-close-btn:hover {
  background:rgba(255, 80, 180, 0.3);
  border-color:#ff50b4;
}

.settings h3 {
  font-family:'DotGothic16', monospace;
  color:#ff50b4;
  margin-bottom:8px;
  font-size:13px;
  letter-spacing:1px;
}

.settings .ev-grid {
  display:grid;
  grid-template-columns:repeat(3, auto);
  gap:4px 16px;
}

.settings label {
  display:block;
  margin:3px 0;
  cursor:pointer;
  user-select:none;
  font-size:12px;
  white-space:nowrap;
}

.settings input[type="checkbox"] {
  margin-right:6px;
  cursor:pointer;
}

/* ===== Twitch風コメントチャット（main-right に配置、レイアウトの一部） ===== */
.twitch-chat {
  width:100%;
  height:calc(100vh - 100px);
  max-height:680px;
  background:rgba(20, 20, 35, 0.85);
  border:2px solid rgba(145, 71, 255, 0.55);
  border-radius:10px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  font-family:'DotGothic16', monospace;
  font-size:11px;
  pointer-events:none;
  backdrop-filter:blur(4px);
  box-shadow:0 0 16px rgba(145, 71, 255, 0.3);
}

.twitch-chat-header {
  flex-shrink:0;
  padding:6px 10px;
  font-size:10px;
  letter-spacing:2px;
  color:rgba(145, 71, 255, 0.9);
  font-weight:bold;
  pointer-events:none;
  border-bottom:1px solid rgba(145, 71, 255, 0.3);
  background:rgba(20, 20, 35, 0.6);
}

.twitch-chat-messages {
  flex:1;
  min-height:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:3px;
  padding:8px;
}

.twitch-chat-msg {
  color:#fff;
  line-height:1.35;
  word-break:break-word;
  animation:twitchMsgSlideIn 0.3s ease-out;
  flex-shrink:0;
  padding:1px 0;
}

.twitch-chat-msg .name {
  font-weight:bold;
  margin-right:4px;
}

@keyframes twitchMsgSlideIn {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:translateY(0); }
}

/* 履歴 */
.history {
  background:rgba(26,26,46,0.9);
  border:2px solid #50c8ff;
  border-radius:12px;
  padding:12px 18px;
  backdrop-filter:blur(10px);
  font-family:'DotGothic16', monospace;
  font-size:13px;
}

.history h3 {
  color:#50c8ff;
  margin-bottom:6px;
  font-size:12px;
}

.history .items {
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

.history .item {
  padding:3px 8px;
  background:rgba(80,200,255,0.2);
  border-radius:4px;
  border:1px solid rgba(80,200,255,0.5);
  font-size:12px;
}

/* ===== 覚醒モード演出 ===== */
/* 「！！！」マーク */
.awakening-mark {
  position:absolute;
  top:-12px;
  left:50%;
  transform:translate(-50%, 0);
  font-family:'DotGothic16', monospace;
  font-size:42px;
  font-weight:bold;
  color:#fff;
  text-shadow:
    3px 3px 0 #1a1a2e,
    -3px -3px 0 #1a1a2e,
    3px -3px 0 #1a1a2e,
    -3px 3px 0 #1a1a2e,
    0 0 12px rgba(255,235,59,0.8);
  z-index:7;
  pointer-events:none;
  animation:awakeningMark 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes awakeningMark {
  0%   { opacity:0; transform:translate(-50%, 10px) scale(0.3); }
  40%  { opacity:1; transform:translate(-50%, -10px) scale(1.3); }
  70%  { opacity:1; transform:translate(-50%, -6px) scale(1.0); }
  100% { opacity:0; transform:translate(-50%, -14px) scale(0.9); }
}

/* オーラエフェクト */
.cat.awakening-aura {
  animation:awakeningAuraPulse 0.6s ease-in-out infinite alternate;
  filter:
    drop-shadow(0 0 12px #FFD700)
    drop-shadow(0 0 24px #FFD700)
    drop-shadow(0 0 36px rgba(255, 215, 0, 0.7));
  transition:filter 0.2s ease-in;
}

.cat.awakening-aura.fading {
  transition:filter 0.3s ease-out;
  filter:drop-shadow(2px 4px 6px rgba(0,0,0,0.6));
  animation:none;
}

@keyframes awakeningAuraPulse {
  from {
    filter:
      drop-shadow(0 0 8px #FFD700)
      drop-shadow(0 0 16px #FFD700)
      drop-shadow(0 0 24px rgba(255, 215, 0, 0.5));
  }
  to {
    filter:
      drop-shadow(0 0 16px #FFEB3B)
      drop-shadow(0 0 32px #FFD700)
      drop-shadow(0 0 48px rgba(255, 215, 0, 0.9));
  }
}

/* セリフ吹き出し */
.awakening-bubble {
  position:absolute;
  top:-8px;
  left:50%;
  background:#fff;
  color:#1a1a2e;
  font-family:'DotGothic16', monospace;
  font-size:18px;
  font-weight:bold;
  padding:6px 14px;
  border-radius:18px;
  border:3px solid #1a1a2e;
  white-space:nowrap;
  z-index:8;
  pointer-events:none;
  transform:translate(-50%, -100%);
  box-shadow:0 4px 12px rgba(0,0,0,0.4);
  animation:awakeningBubble 1.0s ease-in-out forwards;
}

.awakening-bubble::after {
  content:'';
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  border:8px solid transparent;
  border-top-color:#1a1a2e;
}

@keyframes awakeningBubble {
  0%   { opacity:0; transform:translate(-50%, -90%) scale(0.7); }
  10%  { opacity:1; transform:translate(-50%, -100%) scale(1.0); }
  80%  { opacity:1; transform:translate(-50%, -100%) scale(1.0); }
  100% { opacity:0; transform:translate(-50%, -110%) scale(0.95); }
}

/* FNYASH 用吹き出し：赤黄色の燃える縁取り */
.awakening-bubble.awakening-bubble-fnyash {
  background:#fff8e0;
  color:#1a1a2e;
  border-color:#d32f2f;
  box-shadow:
    0 0 12px rgba(255, 80, 0, 0.8),
    0 0 24px rgba(255, 235, 59, 0.6),
    0 4px 8px rgba(0, 0, 0, 0.4);
}
.awakening-bubble.awakening-bubble-fnyash::after {
  border-top-color:#d32f2f;
}

/* ニャ・ワールド 用吹き出し：青の冷気感 */
.awakening-bubble.awakening-bubble-nya-world {
  background:#e8f4ff;
  color:#0d2840;
  border-color:#1a5b8a;
  box-shadow:
    0 0 12px rgba(80, 200, 255, 0.8),
    0 0 24px rgba(160, 224, 255, 0.6),
    0 4px 8px rgba(0, 0, 0, 0.4);
}
.awakening-bubble.awakening-bubble-nya-world::after {
  border-top-color:#1a5b8a;
}

/* スピードライン */
.awakening-speedlines {
  position:absolute;
  top:50%;
  right:100%;
  transform:translateY(-50%);
  width:80px;
  height:60px;
  pointer-events:none;
  z-index:4;
}

.awakening-speedlines span {
  position:absolute;
  left:0;
  height:3px;
  background:linear-gradient(90deg, transparent, #fff 30%, #fff 80%, transparent);
  border-radius:2px;
  opacity:0.85;
  animation:awakeningSpeedline 0.35s linear infinite;
}

.awakening-speedlines span:nth-child(1) { top:10%; width:60px; animation-delay:0s; }
.awakening-speedlines span:nth-child(2) { top:30%; width:75px; animation-delay:0.08s; }
.awakening-speedlines span:nth-child(3) { top:50%; width:55px; animation-delay:0.16s; }
.awakening-speedlines span:nth-child(4) { top:70%; width:70px; animation-delay:0.24s; }
.awakening-speedlines span:nth-child(5) { top:88%; width:50px; animation-delay:0.04s; }

@keyframes awakeningSpeedline {
  0%   { transform:translateX(0); opacity:0; }
  20%  { opacity:0.9; }
  100% { transform:translateX(-80px); opacity:0; }
}

/* ===== 投擲物演出 ===== */
/* 飛翔中の投擲物（body直下に置いて画面座標で動かす） */
.projectile {
  position:fixed;
  font-size:36px;
  z-index:55;
  pointer-events:none;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,0.6));
  transform:translate(-50%, -50%);
  will-change:left, top, transform;
}

/* 拘束中の頭上アイコン */
.stun-icon {
  position:absolute;
  top:-18px;
  left:50%;
  font-size:32px;
  z-index:7;
  pointer-events:none;
  transform:translate(-50%, 0);
  filter:drop-shadow(0 2px 3px rgba(0,0,0,0.5));
  animation:stunIconBob 0.5s ease-in-out infinite alternate;
}

@keyframes stunIconBob {
  from { transform:translate(-50%, -2px) rotate(-8deg); }
  to   { transform:translate(-50%, 3px) rotate(8deg); }
}

/* 拘束中の猫の揺れ（毛玉・段ボール用） */
.cat.projectile-stunned img {
  animation:stunnedShake 0.35s ease-in-out infinite alternate !important;
}

@keyframes stunnedShake {
  from { transform:translateY(0) rotate(-4deg); }
  to   { transform:translateY(-2px) rotate(4deg); }
}

/* マタタビ陶酔（特別仕様：ふらふら回転） */
.cat.matatabi-stunned img {
  animation:matatabiSway 0.7s ease-in-out infinite !important;
}

@keyframes matatabiSway {
  0%   { transform:translateY(0) rotate(-12deg); }
  25%  { transform:translateY(-3px) rotate(8deg); }
  50%  { transform:translateY(0) rotate(-8deg); }
  75%  { transform:translateY(-3px) rotate(12deg); }
  100% { transform:translateY(0) rotate(-12deg); }
}

/* 段ボール用：被害猫が箱に入った見た目（簡易版：箱を被せる） */
.cat .cardboard-cover {
  position:absolute;
  inset:-4px -2px;
  font-size:64px;
  z-index:6;
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:center;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,0.5));
}

/* ===== 威嚇シャー ===== */
/* 威嚇する側：オレンジの強いオーラ＋毛逆立ち感 */
.cat.intimidating img {
  animation:intimidatePulse 0.25s ease-in-out infinite alternate !important;
}

.cat.intimidating {
  filter:
    drop-shadow(0 0 10px #ff5500)
    drop-shadow(0 0 20px #ff8800)
    drop-shadow(0 0 30px rgba(255, 100, 0, 0.7));
}

@keyframes intimidatePulse {
  from { transform:translateY(0) scale(1.0); }
  to   { transform:translateY(-3px) scale(1.18); }
}

/* 威嚇される側：細かく震える */
.cat.intimidated img {
  animation:intimidateShake 0.08s ease-in-out infinite alternate !important;
}

@keyframes intimidateShake {
  from { transform:translateX(-2px) translateY(0); }
  to   { transform:translateX(2px) translateY(-1px); }
}

/* 「シャー！」マーク */
.shaa-mark {
  position:absolute;
  top:-30px;
  left:50%;
  font-family:'DotGothic16', monospace;
  font-size:32px;
  font-weight:bold;
  color:#ff5500;
  text-shadow:
    var(--readable-shadow),
    0 0 10px rgba(255,136,0,0.36);
  z-index:8;
  pointer-events:none;
  white-space:nowrap;
  transform:translate(-50%, 0);
  animation:shaaMark 1.0s ease-out forwards;
}

@keyframes shaaMark {
  0%   { opacity:0; transform:translate(-50%, 10px) scale(0.4) rotate(-15deg); }
  20%  { opacity:1; transform:translate(-50%, -8px) scale(1.4) rotate(5deg); }
  60%  { opacity:1; transform:translate(-50%, -8px) scale(1.1) rotate(-3deg); }
  100% { opacity:0; transform:translate(-50%, -20px) scale(0.9) rotate(0deg); }
}

/* ===== FNYASH（覚醒バリエーション①FLASH風） ===== */

/* 画面揺れ */
.screen-shake {
  animation:screenShake 0.45s linear;
}

@keyframes screenShake {
  0%, 100% { transform:translate(0, 0); }
  10%      { transform:translate(-10px, -5px); }
  20%      { transform:translate(10px, 5px); }
  30%      { transform:translate(-8px, 4px); }
  40%      { transform:translate(8px, -4px); }
  50%      { transform:translate(-5px, -3px); }
  60%      { transform:translate(5px, 3px); }
  75%      { transform:translate(-3px, 2px); }
  88%      { transform:translate(2px, -1px); }
}

/* 全画面赤黄フラッシュ（瞬間移動と同時に閃光） */
.fnyash-flash {
  position:fixed;
  inset:0;
  z-index:90;
  pointer-events:none;
  background:radial-gradient(circle at 50% 50%,
    rgba(255, 235, 59, 0.48),
    rgba(255, 80, 0, 0.28) 30%,
    rgba(0, 0, 0, 0) 75%);
  opacity:0;
  animation:fnyashFlash 0.5s ease-out forwards;
}

@keyframes fnyashFlash {
  0%   { opacity:0; }
  10%  { opacity:1; }
  100% { opacity:0; }
}

/* 猫のグリッチエフェクト（タメ中のチラつき） */
.cat.fnyash-glitch img {
  animation:fnyashGlitch 0.12s steps(2) infinite !important;
}

@keyframes fnyashGlitch {
  0%   { filter:hue-rotate(0deg) drop-shadow(2px 0 0 #ff0000) drop-shadow(-2px 0 0 #00ffff); transform:translate(0, 0); }
  25%  { filter:hue-rotate(180deg) drop-shadow(-3px 0 0 #ff0000) drop-shadow(3px 0 0 #00ffff); transform:translate(3px, -1px); }
  50%  { filter:hue-rotate(90deg) drop-shadow(2px 0 0 #ffff00); transform:translate(-2px, 1px); }
  75%  { filter:hue-rotate(270deg) drop-shadow(-2px 0 0 #ff00ff) drop-shadow(2px 0 0 #00ffff); transform:translate(2px, 0); }
  100% { filter:hue-rotate(0deg); transform:translate(0, 0); }
}

/* 「FNYASH」大テロップ */
.fnyash-title {
  position:fixed;
  top:clamp(72px, 14vh, 150px);
  left:50%;
  font-family:'DotGothic16', monospace;
  font-size:clamp(62px, 11vw, 140px);
  font-weight:bold;
  color:#ffeb3b;
  text-shadow:
    var(--readable-shadow-strong),
    0 0 12px rgba(255,0,0,0.46),
    0 0 24px rgba(255,85,0,0.24);
  z-index:100;
  pointer-events:none;
  max-width:96vw;
  line-height:0.95;
  text-align:center;
  white-space:nowrap;
  letter-spacing:14px;
  transform:translate(-50%, -50%) scale(0);
  animation:fnyashTitle 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  -webkit-text-stroke:3px #1a1a2e;
}

@keyframes fnyashTitle {
  0%   { opacity:0; transform:translate(-50%, -50%) scale(0) rotate(-20deg); }
  15%  { opacity:1; transform:translate(-50%, -50%) scale(1.5) rotate(8deg); }
  30%  { opacity:1; transform:translate(-50%, -50%) scale(1.0) rotate(-2deg); }
  75%  { opacity:1; transform:translate(-50%, -50%) scale(1.05) rotate(0deg); }
  100% { opacity:0; transform:translate(-50%, -50%) scale(1.3) rotate(0deg); }
}

/* FLASH風稲妻オーラ：高速ダッシュ中の猫 */
.cat.fnyash-aura {
  filter:
    drop-shadow(0 0 14px #ff0000)
    drop-shadow(0 0 28px #ffeb3b)
    drop-shadow(0 0 42px rgba(255, 80, 0, 0.95));
  animation:fnyashAuraPulse 0.12s ease-in-out infinite alternate;
}

@keyframes fnyashAuraPulse {
  from { filter:drop-shadow(0 0 12px #ff0000) drop-shadow(0 0 24px #ffeb3b) drop-shadow(0 0 36px rgba(255, 80, 0, 0.8)); }
  to   { filter:drop-shadow(0 0 22px #ff0000) drop-shadow(0 0 44px #ffeb3b) drop-shadow(0 0 66px rgba(255, 80, 0, 1.0)); }
}

/* 残像（ストリーク）：ダッシュ中の軌跡 */
.fnyash-streak {
  position:absolute;
  height:18px;
  background:linear-gradient(90deg,
    transparent,
    rgba(255, 0, 0, 0.7) 25%,
    rgba(255, 235, 59, 0.9) 60%,
    rgba(255, 200, 0, 0.6) 85%,
    transparent);
  border-radius:9px;
  pointer-events:none;
  z-index:5;
  filter:blur(2px);
  animation:fnyashStreak 0.4s ease-out forwards;
  transform-origin:right center;
}

@keyframes fnyashStreak {
  0%   { opacity:0.95; transform:scaleX(1); }
  100% { opacity:0; transform:scaleX(0.2); }
}

/* 稲妻アイコン（猫の周辺で散る） */
.fnyash-bolt {
  position:absolute;
  font-size:38px;
  z-index:6;
  pointer-events:none;
  filter:drop-shadow(0 0 8px #ffff00);
  animation:fnyashBolt 0.5s ease-out forwards;
}

@keyframes fnyashBolt {
  0%   { opacity:1; transform:translate(0, 0) scale(0.4) rotate(0deg); }
  60%  { opacity:1; transform:translate(var(--bx, 30px), var(--by, -20px)) scale(1.4) rotate(180deg); }
  100% { opacity:0; transform:translate(calc(var(--bx, 30px) * 1.6), calc(var(--by, -20px) * 1.6)) scale(0.8) rotate(360deg); }
}

/* タメ中のスロー（猫の足踏みアニメを遅くしてゾーン感を演出） */
body.fnyash-zone .cat.running img {
  animation-duration:1.2s !important;
}

/* ===== ニャ・ワールド（覚醒バリエーション②時止め系） ===== */

/* 全画面オーバーレイ：青みがかった暗い世界に変える */
.nyaworld-overlay {
  position:fixed;
  inset:0;
  z-index:87;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 50%,
      rgba(40, 80, 140, 0.0) 20%,
      rgba(20, 40, 80, 0.55) 70%,
      rgba(10, 20, 50, 0.8) 100%),
    linear-gradient(180deg,
      rgba(80, 120, 180, 0.25) 0%,
      rgba(40, 60, 100, 0.15) 50%,
      rgba(80, 120, 180, 0.25) 100%);
  opacity:0;
  animation:nyaworldOverlay 3.0s ease-in-out forwards;
}

@keyframes nyaworldOverlay {
  0%   { opacity:0; }
  12%  { opacity:1; }
  88%  { opacity:1; }
  100% { opacity:0; }
}

/* CRT風の走査線＆軽いノイズで「歪み」を表現 */
.nyaworld-distortion {
  position:fixed;
  inset:0;
  z-index:88;
  pointer-events:none;
  background:repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 3px,
    rgba(160, 224, 255, 0.08) 3px,
    rgba(160, 224, 255, 0.08) 4px);
  mix-blend-mode:screen;
  opacity:0;
  animation:nyaworldDistortionFade 3.0s ease-in-out forwards,
            nyaworldDistortionShift 0.18s steps(2) infinite;
}

@keyframes nyaworldDistortionFade {
  0%   { opacity:0; }
  15%  { opacity:1; }
  85%  { opacity:1; }
  100% { opacity:0; }
}

@keyframes nyaworldDistortionShift {
  0%   { transform:translate(0, 0); }
  50%  { transform:translate(2px, -1px); }
  100% { transform:translate(-1px, 1px); }
}

/* 時計：画面中央に大きく表示、針が動こうとして止まる動き */
.nyaworld-clock {
  position:fixed;
  top:50%;
  left:50%;
  font-size:280px;
  z-index:92;
  pointer-events:none;
  filter:
    drop-shadow(0 0 30px rgba(80, 200, 255, 0.9))
    drop-shadow(0 0 60px rgba(160, 224, 255, 0.6));
  transform:translate(-50%, -50%) scale(0);
  animation:nyaworldClock 3.0s ease-in-out forwards;
  opacity:0;
}

@keyframes nyaworldClock {
  0%   { opacity:0; transform:translate(-50%, -50%) scale(0) rotate(0deg); }
  15%  { opacity:0.55; transform:translate(-50%, -50%) scale(1.0) rotate(0deg); }
  /* 針が動こうとする */
  25%  { opacity:0.55; transform:translate(-50%, -50%) scale(1.05) rotate(7deg); }
  30%  { opacity:0.55; transform:translate(-50%, -50%) scale(1.0) rotate(-3deg); }
  /* 止まる */
  35%  { opacity:0.55; transform:translate(-50%, -50%) scale(1.0) rotate(0deg); }
  88%  { opacity:0.5; transform:translate(-50%, -50%) scale(1.0) rotate(0deg); }
  100% { opacity:0; transform:translate(-50%, -50%) scale(1.15) rotate(0deg); }
}

/* 「ザ・ニャ・ワールド」大テロップ */
.nyaworld-title {
  position:fixed;
  top:clamp(72px, 14vh, 150px);
  left:50%;
  font-family:'DotGothic16', monospace;
  font-size:clamp(44px, 7.6vw, 96px);
  font-weight:bold;
  color:#e0f4ff;
  text-shadow:
    var(--readable-shadow-strong),
    var(--glow-blue-soft);
  -webkit-text-stroke:2px #1a1a2e;
  z-index:100;
  pointer-events:none;
  max-width:96vw;
  line-height:1;
  text-align:center;
  white-space:nowrap;
  letter-spacing:8px;
  transform:translate(-50%, -50%) scale(0);
  animation:nyaworldTitle 1.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes nyaworldTitle {
  0%   { opacity:0; transform:translate(-50%, -50%) scale(0); letter-spacing:30px; }
  18%  { opacity:1; transform:translate(-50%, -50%) scale(1.25); letter-spacing:8px; }
  35%  { opacity:1; transform:translate(-50%, -50%) scale(1.0); }
  82%  { opacity:1; transform:translate(-50%, -50%) scale(1.05); }
  100% { opacity:0; transform:translate(-50%, -50%) scale(1.15); }
}

/* 時止めされた猫（非勝者）：モノクロ＋青み＋足踏み停止 */
.cat.nyaworld-frozen img {
  filter:grayscale(1) brightness(0.55) contrast(1.15) sepia(0.3) hue-rotate(180deg);
  animation:none !important;
}

/* 時止め発動者（勝者）：青のオーラで強調 */
.cat.nyaworld-active-cat {
  filter:
    drop-shadow(0 0 14px #50c8ff)
    drop-shadow(0 0 28px #a0e0ff)
    drop-shadow(0 0 42px rgba(80, 200, 255, 0.95));
  animation:nyaworldActivePulse 0.5s ease-in-out infinite alternate;
  z-index:5;
}

@keyframes nyaworldActivePulse {
  from { filter:drop-shadow(0 0 12px #50c8ff) drop-shadow(0 0 24px #a0e0ff) drop-shadow(0 0 36px rgba(80, 200, 255, 0.8)); }
  to   { filter:drop-shadow(0 0 22px #50c8ff) drop-shadow(0 0 44px #a0e0ff) drop-shadow(0 0 66px rgba(80, 200, 255, 1.0)); }
}

/* ===== 疲労 ===== */
.cat.fatigued img {
  filter:brightness(0.78) saturate(0.55) !important;
  animation:catBounce 0.5s infinite ease-in-out !important;
}

/* 永続的な汗マーク */
.cat.fatigued::after {
  content:'💦';
  position:absolute;
  top:-12px;
  right:-2px;
  font-size:22px;
  z-index:6;
  pointer-events:none;
  animation:fatigueSweat 1.6s ease-in-out infinite;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}

@keyframes fatigueSweat {
  0%, 100% { opacity:0.7; transform:translateY(0) scale(0.92); }
  50%      { opacity:1; transform:translateY(5px) scale(1.12); }
}

/* 疲労中の弱いレーンジャンプ：高さ低め＆ふらつき強め */
.cat.jumping.jump-lane-weak {
  animation:jumpLaneWeak 0.7s ease-in-out forwards;
}

@keyframes jumpLaneWeak {
  0%   { transform:translateY(-50%) scale(1) rotate(0deg); }
  20%  { transform:translateY(calc(-50% - 12px)) scale(1.0) rotate(-5deg); }
  50%  { transform:translateY(calc(-50% - 25px)) scale(1.0) rotate(3deg); }
  80%  { transform:translateY(calc(-50% - 10px)) scale(1.0) rotate(-3deg); }
  100% { transform:translateY(-50%) scale(1) rotate(0deg); }
}

/* ===== プロパガンニャ（覚醒バリエーション③：見た目のみ全員置換） ===== */
.propaganya-overlay {
  position:fixed;
  inset:0;
  z-index:86;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 50%,
      rgba(180, 0, 0, 0.32),
      rgba(80, 0, 0, 0.55) 65%,
      rgba(20, 0, 0, 0.85) 100%);
  opacity:0;
  animation:propaganyaOverlayFade 7.0s ease-in-out forwards;
}

@keyframes propaganyaOverlayFade {
  0%   { opacity:0; }
  6%   { opacity:1; }
  90%  { opacity:1; }
  100% { opacity:0; }
}

/* CRT走査線（プロパガンダ風モノトーン重ね） */
.propaganya-scanlines {
  position:fixed;
  inset:0;
  z-index:87;
  pointer-events:none;
  background:repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 3px,
    rgba(0, 0, 0, 0.35) 3px,
    rgba(0, 0, 0, 0.35) 4px);
  mix-blend-mode:multiply;
  opacity:0;
  animation:propaganyaScanFade 7.0s ease-in-out forwards,
            propaganyaScanShift 0.18s steps(2) infinite;
}

@keyframes propaganyaScanFade {
  0%   { opacity:0; }
  10%  { opacity:0.85; }
  88%  { opacity:0.85; }
  100% { opacity:0; }
}

@keyframes propaganyaScanShift {
  0%   { transform:translate(0, 0); }
  50%  { transform:translate(0, 1px); }
  100% { transform:translate(0, -1px); }
}

/* 「プロパガンニャ」大テロップ（赤＋ゴシック調） */
.propaganya-title {
  position:fixed;
  top:clamp(72px, 14vh, 150px);
  left:50%;
  font-family:'DotGothic16', monospace;
  font-size:clamp(54px, 9.5vw, 120px);
  font-weight:bold;
  color:#ff1010;
  text-shadow:
    var(--readable-shadow-strong),
    var(--glow-red-soft);
  -webkit-text-stroke:3px #1a1a2e;
  z-index:100;
  pointer-events:none;
  max-width:96vw;
  line-height:0.95;
  text-align:center;
  white-space:nowrap;
  letter-spacing:10px;
  transform:translate(-50%, -50%) scale(0);
  animation:propaganyaTitle 1.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes propaganyaTitle {
  0%   { opacity:0; transform:translate(-50%, -50%) scale(0) rotate(-8deg); }
  15%  { opacity:1; transform:translate(-50%, -50%) scale(1.4) rotate(3deg); }
  32%  { opacity:1; transform:translate(-50%, -50%) scale(1.0) rotate(-1deg); }
  82%  { opacity:1; transform:translate(-50%, -50%) scale(1.05) rotate(0deg); }
  100% { opacity:0; transform:translate(-50%, -50%) scale(1.18) rotate(0deg); }
}

/* 煽り副テロップ：上下に流れる */
.propaganya-banner {
  position:fixed;
  left:0;
  right:0;
  font-family:'DotGothic16', monospace;
  font-size:32px;
  letter-spacing:6px;
  color:#fff;
  background:#cc0000;
  padding:6px 0;
  text-align:center;
  z-index:99;
  pointer-events:none;
  white-space:nowrap;
  border-top:3px solid #1a1a2e;
  border-bottom:3px solid #1a1a2e;
  text-shadow:var(--readable-shadow);
  animation:propaganyaBannerSlide 6.0s ease-in-out forwards;
}

.propaganya-banner.top { top:8%; }
.propaganya-banner.bottom { bottom:8%; }

@keyframes propaganyaBannerSlide {
  0%   { opacity:0; transform:translateX(100%); }
  10%  { opacity:1; transform:translateX(0); }
  90%  { opacity:1; transform:translateX(0); }
  100% { opacity:0; transform:translateX(-100%); }
}

/* 残光トレイル：時止め中の勝者が進むときの軌跡（青） */
.nyaworld-trail {
  position:absolute;
  height:14px;
  background:linear-gradient(90deg,
    transparent,
    rgba(80, 200, 255, 0.6) 30%,
    rgba(160, 224, 255, 0.85) 70%,
    transparent);
  border-radius:7px;
  pointer-events:none;
  z-index:5;
  filter:blur(2px);
  animation:nyaworldTrail 0.6s ease-out forwards;
  transform-origin:right center;
}

@keyframes nyaworldTrail {
  0%   { opacity:0.85; transform:scaleX(1); }
  100% { opacity:0; transform:scaleX(0.2); }
}


/* ===== チュートリアル ===== */
.tutorial-overlay {
  position:fixed;
  inset:0;
  z-index:200;
  background:rgba(0, 0, 10, 0.78);
  backdrop-filter:blur(3px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  animation:tutorialFadeIn 0.25s ease-out;
}

.tutorial-overlay.has-spotlight {
  background:transparent;
  backdrop-filter:none;
}

@keyframes tutorialFadeIn {
  from { opacity:0; }
  to   { opacity:1; }
}

.tutorial-spotlight {
  position:fixed;
  border:4px solid #ffd700;
  border-radius:16px;
  pointer-events:none;
  box-shadow:
    0 0 0 9999px rgba(0, 0, 10, 0.78),
    0 0 25px rgba(255, 215, 0, 0.6);
  transition:top 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              left 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              width 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              height 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation:spotlightPulse 1.5s ease-in-out infinite alternate;
  z-index:201;
}

@keyframes spotlightPulse {
  from { box-shadow:0 0 0 9999px rgba(0, 0, 10, 0.78), 0 0 18px rgba(255, 215, 0, 0.45); }
  to   { box-shadow:0 0 0 9999px rgba(0, 0, 10, 0.78), 0 0 38px rgba(255, 215, 0, 0.85); }
}

.tutorial-card {
  position:relative;
  z-index:202;
  background:rgba(26, 26, 46, 0.95);
  border:3px solid #ff50b4;
  border-radius:18px;
  padding:30px 36px 24px;
  width:520px;
  max-width:90vw;
  font-family:'DotGothic16', monospace;
  box-shadow:
    0 0 40px rgba(255, 80, 180, 0.5),
    inset 0 0 30px rgba(255, 80, 180, 0.08);
  animation:tutorialCardRise 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes tutorialCardRise {
  0%   { opacity:0; transform:translateY(20px) scale(0.92); }
  100% { opacity:1; transform:translateY(0) scale(1.0); }
}

.tutorial-step-indicator {
  font-size:11px;
  color:rgba(255, 80, 180, 0.85);
  letter-spacing:3px;
  margin-bottom:8px;
  font-weight:bold;
}

.tutorial-title {
  font-size:24px;
  color:#ffd700;
  margin-bottom:14px;
  text-shadow:
    0 0 10px rgba(255, 215, 0, 0.6),
    2px 2px 0 #1a1a2e;
  letter-spacing:2px;
  line-height:1.3;
}

.tutorial-body {
  font-size:14px;
  line-height:1.8;
  color:#e8e8ff;
  margin-bottom:22px;
  white-space:pre-line;
  letter-spacing:0.5px;
}

.tutorial-buttons {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.tutorial-btn {
  font-family:'DotGothic16', monospace;
  font-size:14px;
  letter-spacing:2px;
  padding:9px 24px;
  border:2px solid #1a1a2e;
  border-radius:30px;
  cursor:pointer;
  transition:transform 0.15s, box-shadow 0.15s;
}

.tutorial-btn.primary {
  background:linear-gradient(135deg, #ff50b4, #ff8a3d);
  color:#fff;
  text-shadow:1px 1px 0 #1a1a2e;
  box-shadow:0 0 16px rgba(255, 80, 180, 0.5);
}

.tutorial-btn.primary:hover {
  transform:translateY(-2px) scale(1.03);
  box-shadow:0 4px 20px rgba(255, 80, 180, 0.7);
}

.tutorial-btn.secondary {
  background:rgba(255, 255, 255, 0.08);
  color:rgba(255, 255, 255, 0.85);
  border-color:rgba(255, 255, 255, 0.3);
}

.tutorial-btn.secondary:hover:not(:disabled) {
  background:rgba(255, 255, 255, 0.15);
}

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

.tutorial-skip-btn {
  position:absolute;
  top:10px;
  right:14px;
  background:none;
  border:none;
  color:rgba(255, 255, 255, 0.55);
  font-size:11px;
  cursor:pointer;
  padding:6px 10px;
  letter-spacing:2px;
  font-family:'DotGothic16', monospace;
  border-radius:8px;
}

.tutorial-skip-btn:hover {
  color:#ff50b4;
  background:rgba(255, 80, 180, 0.1);
}

/* ヘルプアイコン */
.header-icon-btn[id="help-btn"] {
  border-color:rgba(255, 215, 0, 0.5);
  color:#ffd700;
}
.header-icon-btn[id="help-btn"]:hover {
  border-color:#ffd700;
  background:rgba(255, 215, 0, 0.18);
}

/* ===== ホーム（10レース後の控え室） ===== */
.sa-home-overlay {
  position:fixed;
  inset:0;
  z-index:111;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:20px 16px;
  background:
    linear-gradient(180deg, rgba(8, 10, 26, 0.92), rgba(18, 8, 30, 0.96)),
    radial-gradient(circle at 50% 0%, rgba(255, 80, 180, 0.24), transparent 44%);
  backdrop-filter:blur(8px);
  font-family:'DotGothic16', monospace;
  pointer-events:auto;
  overflow:auto;
  animation:saFinalShow 0.45s ease-out forwards;
}

.sa-home-shell {
  width:min(1040px, 96vw);
  display:grid;
  gap:14px;
  padding-bottom:22px;
}

.sa-home-header {
  display:grid;
  grid-template-columns:minmax(220px, 0.8fr) minmax(0, 1.2fr);
  gap:14px;
  align-items:stretch;
}

.sa-home-kicker {
  width:max-content;
  max-width:100%;
  color:#b9f0ff;
  font-family:'RocknRoll One', 'DotGothic16', sans-serif;
  font-size:13px;
  font-weight:700;
  letter-spacing:3px;
  line-height:1.15;
  padding:2px 6px;
  border-left:3px solid #50c8ff;
  background:rgba(80, 200, 255, 0.12);
  text-shadow:
    var(--readable-shadow),
    var(--glow-blue-soft);
}

.sa-home-title {
  color:#ffe877;
  font-family:'RocknRoll One', 'DotGothic16', sans-serif;
  font-weight:900;
  font-size:clamp(38px, 6vw, 68px);
  line-height:1.02;
  letter-spacing:2px;
  text-shadow:
    var(--readable-shadow),
    var(--glow-gold-soft);
  -webkit-text-stroke:0;
}

.sa-home-hud {
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:8px;
}

.sa-home-hud-item {
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  padding:10px 12px;
  border:1px solid rgba(80, 200, 255, 0.35);
  border-radius:8px;
  background:linear-gradient(180deg, rgba(26, 26, 46, 0.9), rgba(8, 10, 26, 0.72));
  box-shadow:inset 0 0 18px rgba(80, 200, 255, 0.08), 0 0 14px rgba(80, 200, 255, 0.12);
}

.sa-home-hud-item.primary {
  border-color:rgba(255, 215, 0, 0.65);
  box-shadow:inset 0 0 18px rgba(255, 215, 0, 0.1), 0 0 18px rgba(255, 215, 0, 0.18);
}

.sa-home-hud-item span {
  color:rgba(217, 234, 255, 0.75);
  font-size:12px;
  letter-spacing:2px;
}

.sa-home-hud-item strong {
  min-width:0;
  color:#fff;
  font-size:18px;
  letter-spacing:2px;
  text-shadow:var(--readable-shadow), 0 0 8px rgba(80, 200, 255, 0.20);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.sa-home-coins {
  color:#fff;
  -webkit-text-fill-color:#fff;
  font-size:clamp(28px, 4vw, 42px);
  letter-spacing:2px;
  text-shadow:0 0 12px rgba(255, 215, 0, 0.5), 1px 1px 0 #080812;
  -webkit-text-stroke:0.45px rgba(8, 8, 18, 0.92);
  paint-order:stroke fill;
}

.sa-home-coins em {
  margin-left:6px;
  color:#ffd700;
  font-size:42%;
  font-style:normal;
  letter-spacing:2px;
  vertical-align:middle;
}

.sa-home-vault {
  padding:12px 14px;
  border:2px solid rgba(255, 215, 0, 0.58);
  border-radius:8px;
  background:
    linear-gradient(180deg, rgba(255, 215, 0, 0.08), rgba(8, 8, 18, 0.72)),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 16px);
  box-shadow:inset 0 0 22px rgba(255, 215, 0, 0.12), 0 0 22px rgba(255, 215, 0, 0.18);
}

.sa-home-vault-label,
.sa-home-vault-unit {
  font-size:11px;
  letter-spacing:3px;
  color:#fff2a8;
}

.sa-home-vault-number {
  margin:5px 0;
  font-family:'DotGothic16', monospace;
  font-size:clamp(18px, 4.8vw, 34px);
  line-height:1.15;
  color:#fff;
  -webkit-text-fill-color:#fff;
  overflow-wrap:anywhere;
  word-break:break-all;
  text-shadow:0 0 14px rgba(255, 215, 0, 0.55), 1px 1px 0 #080812;
  -webkit-text-stroke:0.35px rgba(8, 8, 18, 0.85);
  paint-order:stroke fill;
}

.sa-home-intro {
  color:#d9eaff;
  font-size:16px;
  line-height:1.6;
  text-align:left;
  background:rgba(26, 26, 46, 0.78);
  border:2px solid rgba(80, 200, 255, 0.7);
  border-radius:8px;
  padding:12px 14px;
  box-shadow:0 0 18px rgba(80, 200, 255, 0.25);
}

.sa-home-menu {
  display:grid;
  grid-template-columns:1.2fr repeat(3, 1fr);
  gap:8px;
}

.sa-home-menu-btn {
  min-height:48px;
  padding:10px 12px;
  border:2px solid rgba(80, 200, 255, 0.55);
  border-radius:8px;
  background:rgba(26, 26, 46, 0.8);
  color:#d9eaff;
  font-family:'DotGothic16', monospace;
  font-size:17px;
  letter-spacing:2px;
  cursor:pointer;
  box-shadow:0 0 14px rgba(80, 200, 255, 0.16), inset 0 -4px 10px rgba(0,0,0,0.24);
}

.sa-home-menu-btn.primary {
  border-color:#1a1a2e;
  background:linear-gradient(135deg, #ffd700, #ff8a3d);
  color:#1a1a2e;
  box-shadow:0 0 24px rgba(255, 215, 0, 0.45), inset 0 -5px 12px rgba(0,0,0,0.22);
}

.sa-home-menu-btn.locked {
  color:rgba(217, 234, 255, 0.45);
  border-color:rgba(255,255,255,0.15);
  background:rgba(255,255,255,0.06);
  cursor:default;
}

.sa-home-loan-menu {
  display:grid;
  align-content:center;
  gap:2px;
  color:#ffe0c0;
  border-color:rgba(255, 48, 79, 0.62);
  background:
    linear-gradient(135deg, rgba(255,48,79,0.22), rgba(8,8,18,0.82)),
    repeating-linear-gradient(-35deg, rgba(255,176,0,0.12) 0 6px, transparent 6px 14px);
  box-shadow:0 0 16px rgba(255,48,79,0.22), inset 0 0 18px rgba(255,176,0,0.06);
}

.sa-home-loan-menu span,
.sa-home-loan-menu em {
  display:block;
  font-style:normal;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.sa-home-loan-menu em {
  color:#ffb000;
  font-size:11px;
  letter-spacing:1px;
  text-shadow:0 0 8px rgba(255,176,0,0.42);
}

.sa-home-loan-panel {
  position:relative;
  overflow:hidden;
  border-color:rgba(255, 48, 79, 0.56);
  background:
    radial-gradient(circle at 84% 10%, rgba(255,176,0,0.15), transparent 34%),
    linear-gradient(160deg, rgba(22,8,18,0.74), rgba(4,5,14,0.84));
  box-shadow:inset 0 0 26px rgba(255,48,79,0.07), 0 0 18px rgba(255,48,79,0.12);
}

.sa-home-loan-panel::before {
  content:"";
  position:absolute;
  inset:-40px;
  pointer-events:none;
  background:repeating-linear-gradient(-35deg, rgba(255,176,0,0.08) 0 7px, transparent 7px 18px);
  opacity:0.45;
}

.sa-home-loan-panel > * {
  position:relative;
  z-index:1;
}

.sa-home-loan-card {
  position:relative;
  display:grid;
  gap:9px;
  min-height:132px;
  padding:14px 13px 12px;
  margin-bottom:10px;
  border:1px solid rgba(255,176,0,0.36);
  border-radius:8px;
  overflow:hidden;
  background:
    linear-gradient(135deg, rgba(255,48,79,0.16), transparent 38%),
    linear-gradient(180deg, rgba(8,8,18,0.92), rgba(18,6,14,0.92));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.05), 0 0 18px rgba(0,0,0,0.28);
}

.sa-home-loan-card::after {
  content:"闇";
  position:absolute;
  right:-6px;
  bottom:-20px;
  color:rgba(255,48,79,0.12);
  font-size:96px;
  line-height:1;
  transform:rotate(-8deg);
  text-shadow:0 0 18px rgba(255,48,79,0.22);
}

.sa-home-loan-stamp {
  justify-self:start;
  padding:3px 8px;
  border:1px solid rgba(255,48,79,0.62);
  border-radius:4px;
  color:#ffb000;
  background:rgba(6,6,12,0.78);
  font-size:11px;
  letter-spacing:2px;
  transform:rotate(-2deg);
  box-shadow:0 0 12px rgba(255,48,79,0.20);
}

.sa-home-loan-total,
.sa-home-loan-title {
  position:relative;
  z-index:1;
  display:grid;
  gap:2px;
}

.sa-home-loan-total span,
.sa-home-loan-title span {
  color:#d7b8c4;
  font-size:12px;
  letter-spacing:2px;
}

.sa-home-loan-total strong {
  color:#ffe15a;
  font-size:clamp(28px, 6vw, 42px);
  line-height:1;
  letter-spacing:1px;
  text-shadow:0 2px 0 #18040a, 0 0 14px rgba(255,176,0,0.42);
  -webkit-text-stroke:1px rgba(8,8,18,0.72);
  paint-order:stroke fill;
}

.sa-home-loan-total em {
  color:#ff6b78;
  font-style:normal;
  font-size:11px;
  letter-spacing:2px;
}

.sa-home-loan-title b {
  color:#f6f0ff;
  font-size:18px;
  letter-spacing:1px;
  text-shadow:0 2px 0 rgba(0,0,0,0.7), 0 0 10px rgba(255,48,79,0.28);
}

.sa-home-loan-card.clean {
  border-color:rgba(80,200,255,0.34);
}

.sa-home-loan-card.clean .sa-home-loan-title b {
  color:#9fe8ff;
}

.sa-home-loan-card.marked {
  border-color:rgba(255,48,79,0.48);
}

.sa-home-loan-card.deep {
  border-color:rgba(255,176,0,0.55);
  box-shadow:inset 0 0 0 1px rgba(255,176,0,0.12), 0 0 24px rgba(255,176,0,0.16);
}

.sa-home-loan-card.abyss {
  border-color:rgba(255,48,79,0.72);
  background:
    radial-gradient(circle at 30% 10%, rgba(255,176,0,0.18), transparent 34%),
    linear-gradient(135deg, rgba(255,48,79,0.22), rgba(8,8,18,0.92) 46%, rgba(0,0,0,0.92));
  box-shadow:inset 0 0 0 1px rgba(255,176,0,0.16), 0 0 30px rgba(255,48,79,0.24);
}

.sa-home-menu-btn:active:not(.locked) {
  transform:scale(0.97);
}

.sa-home-content {
  display:grid;
  grid-template-columns:minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap:10px;
}

.sa-home-panel {
  min-width:0;
  border:2px solid rgba(80, 200, 255, 0.42);
  border-radius:8px;
  background:rgba(8, 10, 26, 0.58);
  box-shadow:inset 0 0 24px rgba(80, 200, 255, 0.06);
  padding:12px;
}

.sa-home-race-panel,
.sa-home-ranking-panel {
  align-self:start;
}

.sa-home-upgrade-panel {
  grid-row:span 2;
}

.sa-home-panel-head {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom:9px;
}

.sa-home-panel-head span {
  color:#50c8ff;
  font-size:12px;
  letter-spacing:3px;
}

.sa-home-panel-head strong {
  color:#ffd700;
  font-size:18px;
  letter-spacing:2px;
  text-shadow:0 0 10px rgba(255, 215, 0, 0.45);
}

.sa-home-panel p {
  margin:0;
  color:rgba(217, 234, 255, 0.78);
  font-size:14px;
  line-height:1.6;
}

.sa-home-ranking {
  display:grid;
  gap:6px;
  margin-bottom:9px;
}

.sa-home-ranking div {
  display:grid;
  grid-template-columns:30px minmax(0, 1fr) auto;
  align-items:center;
  gap:8px;
  min-height:34px;
  padding:6px 8px;
  border:1px solid rgba(255, 255, 255, 0.12);
  border-radius:6px;
  background:rgba(26, 26, 46, 0.52);
}

.sa-home-ranking b {
  color:#ffd700;
  font-size:17px;
  text-align:center;
}

.sa-home-ranking span {
  min-width:0;
  color:#d9eaff;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.sa-home-ranking strong {
  color:rgba(255, 255, 255, 0.62);
  font-size:14px;
}

.sa-home-upgrades {
  max-height:min(58vh, 560px);
  overflow:auto;
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  padding:2px 2px 6px;
}

.sa-home-cat-upgrades {
  border:2px solid color-mix(in srgb, var(--cat-color), #ffffff 18%);
  border-radius:8px;
  background:rgba(26, 26, 46, 0.78);
  box-shadow:0 0 18px color-mix(in srgb, var(--cat-color), transparent 72%);
  overflow:hidden;
}

.sa-home-cat-head {
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  background:linear-gradient(90deg, color-mix(in srgb, var(--cat-color), transparent 70%), rgba(10, 10, 28, 0.4));
  border-bottom:1px solid rgba(255,255,255,0.12);
}

.sa-home-cat-head img {
  width:42px;
  height:42px;
  object-fit:contain;
}

.sa-home-cat-head strong {
  color:#fff;
  font-size:18px;
  letter-spacing:2px;
  text-shadow:0 0 10px var(--cat-color);
}

.sa-home-upgrade-list {
  display:grid;
  gap:7px;
  padding:9px;
}

.sa-home-upgrade {
  min-height:78px;
  display:grid;
  grid-template-columns:minmax(0, 1fr) 82px;
  align-items:center;
  gap:8px;
  padding:9px;
  border:1px solid rgba(255, 215, 0, 0.34);
  border-radius:6px;
  background:rgba(8, 10, 26, 0.5);
  box-shadow:inset 0 0 18px rgba(255, 215, 0, 0.06);
}

.sa-home-upgrade strong {
  display:flex;
  align-items:center;
  gap:8px;
  color:#ffd700;
  font-size:16px;
  letter-spacing:2px;
  margin-bottom:4px;
}

.sa-home-upgrade strong span {
  color:#50c8ff;
  font-size:12px;
  letter-spacing:1px;
}

.sa-home-upgrade small,
.sa-home-upgrade em {
  display:block;
  color:rgba(255, 255, 255, 0.72);
  font-size:12px;
  line-height:1.35;
  font-style:normal;
}

.sa-home-upgrade em {
  color:#fff;
  margin-top:4px;
  text-shadow:0 0 8px rgba(255, 215, 0, 0.25);
}

.sa-home-buy {
  min-height:42px;
  border:2px solid #1a1a2e;
  border-radius:6px;
  background:linear-gradient(135deg, #ffd700, #ff8a3d);
  color:#1a1a2e;
  font-family:'DotGothic16', monospace;
  font-size:15px;
  letter-spacing:1px;
  cursor:pointer;
  box-shadow:0 0 12px rgba(255, 215, 0, 0.34), inset 0 -4px 10px rgba(0,0,0,0.2);
}

.sa-home-buy:disabled {
  color:rgba(255,255,255,0.42);
  border-color:rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.08);
  cursor:not-allowed;
  box-shadow:none;
}

/* ===== ゲーム中参照パネル ===== */
.quick-info-overlay {
  position:fixed;
  inset:0;
  z-index:125;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
  background:rgba(4, 5, 16, 0.58);
  backdrop-filter:blur(5px);
  font-family:'DotGothic16', monospace;
  animation:saFinalShow 0.18s ease-out forwards;
}

.quick-info-panel {
  width:min(430px, 96vw);
  max-height:min(82vh, 680px);
  overflow:auto;
  position:relative;
  border:2px solid rgba(80, 200, 255, 0.62);
  border-radius:8px;
  background:
    linear-gradient(180deg, rgba(26, 26, 46, 0.96), rgba(8, 10, 26, 0.96)),
    radial-gradient(circle at 50% 0%, rgba(80, 200, 255, 0.18), transparent 52%);
  box-shadow:0 0 28px rgba(80, 200, 255, 0.28), inset 0 0 28px rgba(255,255,255,0.04);
  padding:14px;
}

.quick-cat-panel {
  border-color:color-mix(in srgb, var(--cat-color), #ffffff 18%);
  box-shadow:0 0 28px color-mix(in srgb, var(--cat-color), transparent 68%), inset 0 0 28px rgba(255,255,255,0.04);
}

.quick-info-close {
  position:absolute;
  top:8px;
  right:8px;
  width:34px;
  height:34px;
  border:1px solid rgba(255,255,255,0.28);
  border-radius:8px;
  background:rgba(255,255,255,0.08);
  color:#fff;
  font-family:'DotGothic16', monospace;
  font-size:20px;
  cursor:pointer;
}

.quick-info-kicker {
  color:#50c8ff;
  font-size:12px;
  letter-spacing:3px;
  text-shadow:0 0 8px rgba(80, 200, 255, 0.7);
}

.quick-info-title {
  color:#ffd700;
  font-size:30px;
  line-height:1.1;
  letter-spacing:3px;
  font-weight:900;
  text-shadow:0 0 14px rgba(255, 215, 0, 0.6), 2px 2px 0 #080812;
  margin-bottom:8px;
  padding-right:38px;
}

.quick-info-note {
  color:rgba(217, 234, 255, 0.75);
  font-size:12px;
  line-height:1.5;
  margin-top:8px;
}

.quick-ranking-list {
  max-height:none;
  margin-top:10px;
}

.quick-cat-head {
  display:grid;
  grid-template-columns:74px minmax(0, 1fr);
  gap:10px;
  align-items:center;
  margin-bottom:10px;
}

.quick-cat-head img {
  width:72px;
  height:72px;
  object-fit:contain;
  filter:drop-shadow(0 0 12px color-mix(in srgb, var(--cat-color), transparent 35%));
}

.quick-cat-meta {
  color:rgba(255,255,255,0.82);
  font-size:12px;
  line-height:1.45;
}

.quick-upgrade-list {
  display:grid;
  gap:7px;
}

.quick-upgrade-row {
  display:grid;
  grid-template-columns:minmax(0, 1fr) 68px;
  gap:8px;
  align-items:center;
  padding:9px;
  border:1px solid rgba(255, 215, 0, 0.32);
  border-radius:7px;
  background:rgba(8, 10, 26, 0.58);
}

.quick-upgrade-row strong {
  display:flex;
  align-items:center;
  gap:8px;
  color:#ffd700;
  font-size:15px;
  letter-spacing:1px;
}

.quick-upgrade-row strong span {
  color:#50c8ff;
  font-size:12px;
}

.quick-upgrade-row small,
.quick-upgrade-row em {
  display:block;
  color:rgba(255,255,255,0.72);
  font-size:11px;
  line-height:1.35;
  font-style:normal;
  margin-top:3px;
}

.quick-upgrade-row em {
  color:#fff;
}

.quick-upgrade-row b {
  color:#1a1a2e;
  background:linear-gradient(135deg, #ffd700, #ff8a3d);
  border-radius:6px;
  padding:7px 4px;
  text-align:center;
  font-size:12px;
  letter-spacing:1px;
}

/* ===== レスポンシブ（5a：基本レイアウト調整） ===== */

/* タブレット帯：細かいスケールダウン */
@media (max-width: 1024px) {
  body {
    padding:10px 12px 14px;
  }
  .app-header {
    gap:14px;
    margin-bottom:10px;
  }
  .title {
    font-size:28px;
  letter-spacing:3px;
}
  .title .sub {
    font-size:12px;
  }
  .header-icon-btn {
    width:38px;
    height:38px;
    font-size:18px;
  }
  .mode-tab {
    font-size:13px;
    padding:7px 16px;
    letter-spacing:1px;
  }
  .control-panel {
    gap:12px;
  }
  .predict-lineup {
    gap:10px;
  }
  .predict-card {
    grid-template-columns:74px minmax(0, 1fr);
    min-height:122px;
  }
  .predict-card-portrait img {
    width:68px;
    height:68px;
  }
  .predict-card-name {
    font-size:20px;
  }
  .start-btn {
    font-size:28px;
    padding:16px 50px;
  }
}

/* モバイル帯：1カラム化＆主要パネルをコンパクト化 */
@media (max-width: 768px) {
  body {
    padding:8px 8px 14px;
  }

  /* ヘッダー：縦並び、中央寄せ */
  .app-header {
    flex-direction:column;
    align-items:center;
    gap:10px;
    margin-bottom:10px;
  }
  .title {
    font-size:22px;
    letter-spacing:2px;
    text-align:center;
  }
  .title .sub {
    font-size:11px;
    letter-spacing:1px;
  }
  .header-controls {
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
  }
  .mode-tab {
    font-size:12px;
    padding:6px 14px;
    letter-spacing:1px;
  }
  .header-icon-btn {
    width:36px;
    height:36px;
    font-size:16px;
    border-radius:10px;
  }

  /* メイン：余白縮小（1300px breakpoint で既に1カラム化済み） */
  .app-main {
    gap:10px;
    padding:0;
  }

  body[data-round-screen="predict"] .app-main {
    grid-template-columns:1fr;
    max-width:560px;
  }

  .predict-lineup {
    grid-template-columns:1fr;
    gap:9px;
  }

  .predict-card {
    grid-template-columns:72px minmax(0, 1fr);
    min-height:112px;
    padding:9px;
    border-radius:12px;
  }

  .predict-card-portrait img {
    width:66px;
    height:66px;
  }

  .predict-card-name {
    font-size:19px;
  }

  .predict-card-line {
    min-height:32px;
    font-size:12px;
  }

  /* スコアアタック・下馬評：パディング控えめ */
  .score-attack-panel,
  .awakening-force-panel,
  .chōshi-display,
  .stats-panel {
    padding:10px 14px;
    border-radius:12px;
  }
  .sa-coins {
    font-size:18px;
  }
  .sa-race-counter {
    font-size:14px;
  }
  .sa-cat-buttons {
    gap:5px;
  }
  .sa-cat-btn {
    font-size:12px;
    padding:6px 8px;
  }
  .sa-cat-btn .sa-cat-name {
    font-size:13px;
  }
  .sa-bet-input-row input {
    font-size:16px;
    padding:5px 8px;
  }
  .sa-preset-btn {
    font-size:12px;
    min-height:44px;
    padding:8px 5px;
  }

  .sa-bet-presets {
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

  /* スタートボタン */
  .start-btn {
    font-size:24px;
    padding:14px 36px;
    letter-spacing:3px;
    width:100%;
    max-width:360px;
  }

  /* フッター：1カラム化 */
  .app-footer {
    grid-template-columns:1fr;
    gap:10px;
    margin-top:12px;
  }

  /* Twitchチャット：縦長を縮める */
  .twitch-chat {
    height:200px !important;
  }
  .twitch-chat-msg {
    font-size:11px;
  }

  /* 演出：フォント縮小 */
  .result-banner {
    font-size:32px;
    letter-spacing:3px;
  }
  .weather-toast {
    font-size:22px;
    padding:6px 16px;
    letter-spacing:3px;
  }

  /* スコアアタック関連派手演出 */
  .sa-payout-notice {
    font-size:60px;
    letter-spacing:4px;
    -webkit-text-stroke:0.9px #080812;
  }
  .sa-payout-notice .sa-payout-sub,
  .sa-payout-tier-label {
    -webkit-text-stroke:0.45px #080812;
  }
  .sa-coin-counter-pop {
    top:max(56px, calc(env(safe-area-inset-top) + 10px));
    min-width:min(360px, calc(100vw - 22px));
    padding:8px 10px;
    gap:2px;
  }
  .sa-coin-counter-pop .sa-coin-counter-label {
    font-size:14px;
    letter-spacing:2px;
  }
  .sa-coin-counter-pop .sa-coin-counter-value {
    font-size:32px;
  }
  .sa-coin-counter-pop .sa-coin-counter-detail {
    font-size:12px;
    gap:4px 7px;
    line-height:1.25;
  }
  .sa-settlement-current {
    min-height:20px;
    font-size:14px;
    gap:5px;
  }
  .sa-settlement-steps {
    gap:3px;
  }
  .sa-settlement-step {
    grid-template-columns:auto minmax(0, 1fr) auto;
    gap:5px;
    padding:3px 6px;
    font-size:11px;
    letter-spacing:0;
  }
  .sa-coin-counter-delta {
    font-size:14px;
  }
  .sa-coin-counter-pop.tier-jackpot .sa-coin-counter-value,
  .sa-coin-counter-pop.tier-mega .sa-coin-counter-value {
    font-size:36px;
  }
  .sa-longshot-notice {
    font-size:40px;
    letter-spacing:3px;
  }
  .sa-final-title {
    font-size:48px;
    letter-spacing:3px;
  }
  .sa-final-score {
    font-size:clamp(58px, 15vw, 84px);
    letter-spacing:2px;
  }
  .sa-final-rank {
    font-size:30px;
    letter-spacing:2px;
  }
  .sa-final-stats {
    gap:18px;
    padding:14px 20px;
  }
  .sa-final-stat-value {
    font-size:22px;
  }
  .sa-home-overlay {
    align-items:stretch;
    justify-content:flex-start;
    padding:10px 8px calc(18px + env(safe-area-inset-bottom));
  }
  .sa-home-shell {
    width:min(430px, 100%);
    margin:0 auto;
    gap:8px;
    padding-bottom:0;
  }
  .sa-home-header {
    grid-template-columns:1fr;
    gap:8px;
  }
  .sa-home-kicker {
    font-size:11px;
    letter-spacing:2px;
  }
  .sa-home-title {
    font-size:34px;
    line-height:1.02;
    letter-spacing:1px;
  }
  .sa-home-hud {
    grid-template-columns:1fr 1fr;
    gap:7px;
  }
  .sa-home-hud-item {
    min-height:58px;
    padding:8px 10px;
    border-radius:8px;
  }
  .sa-home-hud-item span {
    font-size:10px;
    letter-spacing:1px;
  }
  .sa-home-hud-item strong {
    font-size:15px;
    letter-spacing:1px;
  }
  .sa-home-coins {
    font-size:clamp(30px, 9vw, 42px);
    line-height:1;
  }
  .sa-home-intro {
    font-size:12px;
    line-height:1.45;
    padding:8px 10px;
  }
  .sa-home-menu {
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:7px;
  }
  .sa-home-menu-btn {
    min-height:42px;
    padding:8px 6px;
    font-size:13px;
    line-height:1.15;
    letter-spacing:1px;
    border-radius:8px;
  }
  .sa-home-menu-btn.primary {
    grid-column:1 / -1;
    min-height:52px;
    font-size:20px;
    letter-spacing:3px;
  }
  .sa-home-content {
    grid-template-columns:1fr;
    gap:8px;
  }
  .sa-home-race-panel {
    order:1;
  }
  .sa-home-ranking-panel,
  #sa-home-ranking-panel {
    order:2;
  }
  .sa-home-loan-panel {
    order:3;
  }
  .sa-home-upgrade-panel {
    order:4;
    grid-row:auto;
  }
  .sa-home-panel {
    padding:9px;
    border-radius:8px;
  }
  .sa-home-panel-head {
    margin-bottom:6px;
  }
  .sa-home-panel-head span {
    font-size:10px;
    letter-spacing:2px;
  }
  .sa-home-panel-head strong {
    font-size:15px;
    letter-spacing:1px;
  }
  .sa-home-panel p {
    font-size:12px;
    line-height:1.45;
  }
  .sa-home-race-panel p {
    display:none;
  }
  .sa-home-ranking {
    gap:5px;
    margin-bottom:6px;
  }
  .sa-home-ranking div {
    min-height:30px;
    padding:5px 7px;
    grid-template-columns:26px minmax(0, 1fr) auto;
  }
  .sa-home-ranking b {
    font-size:14px;
  }
  .sa-home-ranking span,
  .sa-home-ranking strong {
    font-size:12px;
  }
  .sa-home-upgrades {
    gap:8px;
    padding:0;
    max-height:none;
  }
  .sa-home-cat-head {
    padding:7px 8px;
  }
  .sa-home-cat-head img {
    width:34px;
    height:34px;
  }
  .sa-home-cat-head strong {
    font-size:15px;
  }
  .sa-home-upgrade-list {
    gap:6px;
    padding:7px;
  }
  .sa-home-upgrade {
    min-height:68px;
    grid-template-columns:minmax(0, 1fr) 74px;
    gap:6px;
    padding:7px;
  }
  .sa-home-upgrade strong {
    font-size:14px;
    letter-spacing:1px;
    margin-bottom:3px;
  }
  .sa-home-upgrade strong span,
  .sa-home-upgrade small,
  .sa-home-upgrade em {
    font-size:11px;
  }
  .sa-home-buy {
    min-height:38px;
    font-size:13px;
  }
}

@media (max-width: 480px) {
  .sa-home-overlay {
    padding:8px 6px calc(14px + env(safe-area-inset-bottom));
  }
  .sa-home-shell {
    gap:7px;
  }
  .sa-home-title {
    font-size:30px;
  }
  .sa-home-hud {
    grid-template-columns:1fr 1fr;
  }
  .sa-home-hud-item.primary {
    grid-column:1 / -1;
  }
  .sa-home-menu {
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
  .sa-home-menu-btn {
    min-height:40px;
    font-size:12px;
    letter-spacing:1px;
  }
  .sa-home-menu-btn.primary {
    min-height:50px;
    font-size:19px;
  }
  .sa-home-upgrade {
    grid-template-columns:minmax(0, 1fr) 68px;
  }
  .sa-home-buy {
    font-size:12px;
  }
}

@media (max-width: 360px) {
  .sa-home-coins {
    font-size:29px;
  }
  .sa-home-menu-btn {
    font-size:11px;
  }
  .sa-home-upgrade {
    grid-template-columns:1fr;
  }
  .sa-home-buy {
    width:100%;
  }
}

@media (max-height: 700px) and (max-width: 768px) {
  .sa-home-intro,
  .sa-home-race-panel {
    display:none;
  }
  .sa-home-hud-item {
    min-height:52px;
  }
  .sa-home-menu-btn.primary {
    min-height:48px;
  }
}

@media (max-width: 768px) {
  /* 覚醒モード派手演出 */
  .fnyash-title {
    font-size:80px;
    letter-spacing:6px;
  }
  .nyaworld-title {
    font-size:64px;
    letter-spacing:5px;
  }
  .propaganya-title {
    font-size:80px;
    letter-spacing:6px;
  }
  .propaganya-banner {
    font-size:22px;
    letter-spacing:3px;
  }

  /* チュートリアル */
  .tutorial-card {
    padding:22px 20px 18px;
    width:100%;
    max-width:92vw;
  }
  .tutorial-title {
    font-size:20px;
    letter-spacing:1px;
  }
  .tutorial-body {
    font-size:13px;
    line-height:1.7;
  }

  /* 次の予想へボタン */
  .next-race-btn {
    font-size:18px;
    padding:11px 26px;
    bottom:6%;
  }
}

/* 細幅スマホ：さらに圧縮 */
@media (max-width: 480px) {
  .title {
    font-size:18px;
    letter-spacing:1px;
  }
  .mode-tab {
    font-size:11px;
    padding:5px 10px;
  }
  .start-btn {
    font-size:20px;
    padding:12px 28px;
  }
  .sa-bet-presets {
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .sa-preset-btn {
    font-size:12px;
  }
  .predict-card {
    grid-template-columns:62px minmax(0, 1fr);
    min-height:104px;
    gap:8px;
    padding:8px;
  }
  .predict-card-portrait img {
    width:58px;
    height:58px;
  }
  .predict-card-top {
    gap:6px;
    padding-right:38px;
  }
  .predict-card-name {
    font-size:17px;
    letter-spacing:1px;
  }
  .predict-card-odds {
    font-size:13px;
    padding:1px 5px;
  }
  .predict-card-meta {
    font-size:11px;
    gap:4px 6px;
  }
  .predict-card-line {
    font-size:12px;
    min-height:30px;
  }
  .twitch-chat {
    height:160px !important;
  }
  .sa-payout-notice {
    font-size:48px;
    -webkit-text-stroke:0.7px #080812;
  }
  .sa-payout-notice .sa-payout-sub,
  .sa-payout-tier-label {
    -webkit-text-stroke:0.35px #080812;
  }
  .stats-panel-header {
    align-items:flex-start;
    flex-direction:column;
  }
  .stats-panel-actions {
    width:100%;
    justify-content:space-between;
  }
  .chōshi-bar-row {
    grid-template-columns:40px minmax(70px, 1fr) 26px 48px;
    gap:5px;
    font-size:10px;
  }
  .chōshi-bar-label {
    font-size:9px;
  }
  .sa-final-score {
    font-size:clamp(46px, 16vw, 64px);
  }
  .fnyash-title {
    font-size:60px;
  }
  .nyaworld-title {
    font-size:48px;
  }
  .propaganya-title {
    font-size:60px;
  }
  .result-banner {
    font-size:24px;
  }
  .event-toast {
    font-size:clamp(16px, 4.8vw, 22px);
    padding:8px 12px;
    letter-spacing:1px;
    max-width:calc(100vw - 16px);
  }
  .slowmo-toast {
    font-size:clamp(24px, 10vw, 44px);
    max-width:calc(100vw - 16px);
  }
  .weather-toast {
    font-size:18px;
    padding:5px 12px;
  }
}

@media (hover: none) {
  .header-icon-btn:hover,
  .mode-tab:hover:not(:disabled),
  .predict-card:hover:not(:disabled),
  .sa-preset-btn:hover:not(:disabled),
  .start-btn:hover:not(:disabled),
  .next-race-btn:hover {
    transform:none;
  }

  .header-icon-btn:active,
  .mode-tab:active:not(:disabled) {
    transform:scale(0.96);
  }

  .start-btn:active:not(:disabled) {
    transform:scale(0.97);
  }

  .next-race-btn:active {
    transform:translateX(-50%) scale(0.97);
  }
}

/* モバイル：スローモのズーム拡大は無効化（画面サイズと折り合わない） */
@media (max-width: 1199px) {
  .track-wrap.zooming {
    --zoom-scale: 1;
  }
}

/* ===== オッズの段階演出 ===== */
.predict-card-odds.odds-spicy,
.chōshi-odds.odds-spicy,
.sa-cat-odds-tag.odds-spicy {
  color:#ffd75e;
  background:rgba(255,215,0,0.2);
  border-color:rgba(255,215,0,0.72);
  box-shadow:0 0 10px rgba(255,215,0,0.34);
}

.predict-card-odds.odds-hot,
.chōshi-odds.odds-hot,
.sa-cat-odds-tag.odds-hot {
  color:#fff2b8;
  background:linear-gradient(135deg, rgba(25,12,40,0.86), rgba(86,36,12,0.78));
  border-color:#ff9a3d;
  text-shadow:
    0 1px 0 #130820,
    0 0 4px rgba(255,180,70,0.32);
  box-shadow:
    inset 0 0 0 1px rgba(255,242,184,0.18),
    0 0 8px rgba(255,138,61,0.36);
}

.predict-card-odds.odds-jackpot,
.chōshi-odds.odds-jackpot,
.sa-cat-odds-tag.odds-jackpot {
  color:#fff7d6;
  background:linear-gradient(135deg, rgba(20,10,48,0.9), rgba(78,20,70,0.78));
  border-color:#ff5fd2;
  text-shadow:
    0 1px 0 #201026,
    0 0 4px rgba(255,95,210,0.34);
  animation:oddsHotPulse 0.9s ease-in-out infinite alternate;
}

.predict-card-odds.odds-legend,
.chōshi-odds.odds-legend,
.sa-cat-odds-tag.odds-legend,
.predict-card-odds.odds-max,
.chōshi-odds.odds-max,
.sa-cat-odds-tag.odds-max {
  color:#fff9df !important;
  background:linear-gradient(135deg, rgba(16,8,48,0.94), rgba(75,18,82,0.82)) !important;
  border-color:#ff50b4 !important;
  text-shadow:
    0 1px 0 #130820,
    0 0 4px rgba(255,215,0,0.34),
    0 0 7px rgba(255,80,180,0.24) !important;
  font-weight:bold;
  animation:maxOddsPulse 0.6s ease-in-out infinite alternate;
}

.predict-card-odds.odds-legend::after,
.chōshi-odds.odds-legend::after,
.sa-cat-odds-tag.odds-legend::after,
.predict-card-odds.odds-max::after,
.chōshi-odds.odds-max::after,
.sa-cat-odds-tag.odds-max::after {
  content:'';
  position:absolute;
  top:-35%;
  bottom:-35%;
  left:-80%;
  width:58%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.82), transparent);
  transform:skewX(-18deg);
  animation:oddsShine 1.4s ease-in-out infinite;
  pointer-events:none;
}

@keyframes oddsHotPulse {
  from {
    box-shadow:inset 0 0 0 1px rgba(255,247,214,0.2), 0 0 8px rgba(255,80,180,0.42);
    transform:scale(1.0);
  }
  to {
    box-shadow:inset 0 0 0 1px rgba(255,247,214,0.32), 0 0 14px rgba(255,80,180,0.72);
    transform:scale(1.04);
  }
}

@keyframes oddsShine {
  0%, 35% { left:-80%; opacity:0; }
  48% { opacity:1; }
  80%, 100% { left:120%; opacity:0; }
}

@keyframes maxOddsPulse {
  from {
    box-shadow:inset 0 0 0 1px rgba(255,249,223,0.24), 0 0 9px rgba(255,80,180,0.55), 0 0 14px rgba(255,215,0,0.28);
    transform:scale(1.0);
  }
  to {
    box-shadow:inset 0 0 0 1px rgba(255,249,223,0.38), 0 0 16px rgba(255,80,180,0.78), 0 0 20px rgba(255,215,0,0.42);
    transform:scale(1.06);
  }
}

/* ===== Loan shark round ===== */
.loan-shark-predict {
  position:relative;
  width:100%;
  display:grid;
  gap:12px;
  padding:12px;
  border:2px solid rgba(255,48,79,0.72);
  border-radius:10px;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 74% -10%, rgba(255,176,0,0.20), transparent 34%),
    radial-gradient(circle at 12% 8%, rgba(255,48,79,0.20), transparent 36%),
    linear-gradient(180deg, rgba(18,6,16,0.98), rgba(5,5,14,0.96));
  box-shadow:0 0 28px rgba(255,48,79,0.26), inset 0 0 0 1px rgba(255,176,0,0.15);
  font-family:'DotGothic16', monospace;
}

.loan-shark-predict::before {
  content:"";
  position:absolute;
  inset:-34px;
  z-index:-2;
  background:repeating-linear-gradient(-35deg, rgba(255,176,0,0.10) 0 8px, transparent 8px 22px);
  opacity:0.46;
}

.loan-shark-predict::after {
  content:"黒服";
  position:absolute;
  right:10px;
  bottom:-22px;
  z-index:-1;
  color:rgba(255,48,79,0.10);
  font-size:92px;
  letter-spacing:8px;
  transform:rotate(-7deg);
  text-shadow:0 0 16px rgba(255,48,79,0.20);
}

.loan-shark-predict-head {
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(230px, 0.8fr);
  gap:10px;
  align-items:stretch;
}

.loan-shark-predict-head h2 {
  margin:2px 0 6px;
  color:#ff6b78;
  font-size:clamp(28px, 6vw, 46px);
  letter-spacing:3px;
  line-height:1.0;
  text-shadow:var(--readable-shadow), var(--glow-red-soft);
}

.loan-shark-predict-head p {
  color:#fff2c8;
  font-size:14px;
  line-height:1.55;
  text-shadow:0 2px 0 rgba(0,0,0,0.62);
}

.loan-shark-predict-terms {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:6px;
}

.loan-shark-predict-terms div {
  min-width:0;
  padding:8px 7px;
  border:1px solid rgba(255,176,0,0.30);
  border-radius:8px;
  background:
    linear-gradient(180deg, rgba(255,48,79,0.12), rgba(6,6,14,0.68));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.04);
}

.loan-shark-predict-terms span,
.loan-shark-predict-terms em {
  display:block;
  color:#d7b8c4;
  font-size:10px;
  font-style:normal;
  line-height:1.2;
}

.loan-shark-predict-terms strong {
  display:block;
  margin:3px 0;
  color:#ffe15a;
  font-size:17px;
  line-height:1.1;
  text-shadow:var(--readable-shadow), var(--glow-gold-soft);
}

.loan-shark-predict-order {
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:7px;
}

.loan-shark-predict-slot {
  min-height:54px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  border:1px solid rgba(255,225,90,0.62);
  border-radius:8px;
  background:rgba(255,225,90,0.09);
  color:#fff7d8;
  text-align:center;
}

.loan-shark-predict-slot.empty {
  border-color:rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.05);
  color:#a997aa;
}

.loan-shark-predict-slot b {
  color:#ffb000;
  font-size:13px;
}

.loan-shark-predict-slot span {
  font-size:14px;
  line-height:1.15;
}

.loan-shark-predict-cards {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:9px;
}

.loan-shark-predict-card {
  position:relative;
  min-width:0;
  display:grid;
  grid-template-columns:72px minmax(0, 1fr);
  gap:8px;
  align-items:center;
  min-height:118px;
  padding:9px;
  border:1px solid color-mix(in srgb, var(--cat-color), white 12%);
  border-radius:8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--cat-color), transparent 84%), rgba(8,8,18,0.84)),
    repeating-linear-gradient(-35deg, rgba(255,176,0,0.06) 0 6px, transparent 6px 16px);
  color:#fff;
  font-family:inherit;
  text-align:left;
  cursor:pointer;
  overflow:hidden;
}

.loan-shark-predict-card.selected {
  border-color:#ffe15a;
  box-shadow:0 0 18px rgba(255,225,90,0.30), inset 0 0 0 1px rgba(255,48,79,0.22);
}

.loan-shark-predict-card.selected::after {
  content:"契約";
  position:absolute;
  left:8px;
  bottom:7px;
  padding:1px 6px;
  border:1px solid rgba(255,48,79,0.58);
  border-radius:3px;
  color:#ff6b78;
  background:rgba(6,6,14,0.76);
  font-size:10px;
  letter-spacing:2px;
  transform:rotate(-4deg);
}

.loan-shark-predict-rank {
  position:absolute;
  top:6px;
  right:7px;
  min-width:42px;
  padding:2px 6px;
  border:1px solid rgba(255,225,90,0.55);
  border-radius:999px;
  color:#ffe15a;
  background:rgba(8,8,18,0.72);
  font-size:11px;
  text-align:center;
}

.loan-shark-predict-card img {
  width:68px;
  height:68px;
  object-fit:contain;
  filter:drop-shadow(0 4px 7px rgba(0,0,0,0.55));
}

.loan-shark-predict-main {
  min-width:0;
  display:grid;
  gap:5px;
  padding-right:38px;
}

.loan-shark-predict-top {
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
}

.loan-shark-predict-top strong {
  font-family:'RocknRoll One', 'DotGothic16', sans-serif;
  font-size:20px;
  letter-spacing:1px;
  text-shadow:var(--readable-shadow);
}

.loan-shark-predict-top em {
  position:relative;
  flex-shrink:0;
  font-style:normal;
}

.loan-shark-predict-meta {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:4px 7px;
  font-size:11px;
  color:rgba(255,255,255,0.82);
}

.loan-shark-chōshi-value {
  color:#dbeafe;
  opacity:0.82;
}

.loan-shark-chōshi-bar {
  position:relative;
  width:100%;
  height:7px;
  border:1px solid rgba(255,255,255,0.16);
  border-radius:999px;
  background:rgba(255,255,255,0.06);
  overflow:hidden;
}

.loan-shark-chōshi-bar i {
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg, #50c8ff, #ffe15a, #ff50b4);
  box-shadow:0 0 8px rgba(255,225,90,0.28);
}

.loan-shark-predict-actions {
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:8px;
}

.loan-shark-overlay {
  position:fixed;
  inset:0;
  z-index:120;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,48,79,0.20), transparent 34%),
    linear-gradient(180deg, rgba(10,4,12,0.96), rgba(30,0,16,0.98));
  backdrop-filter:blur(8px);
  font-family:'DotGothic16', monospace;
}

.loan-shark-panel {
  width:min(560px, calc(100vw - 24px));
  max-height:calc(100vh - 30px);
  overflow:auto;
  border:2px solid #ff304f;
  border-radius:10px;
  padding:18px;
  background:linear-gradient(180deg, rgba(18,10,22,0.96), rgba(9,7,14,0.96));
  box-shadow:
    0 0 0 1px rgba(255,176,0,0.22) inset,
    0 0 28px rgba(255,48,79,0.36),
    0 18px 60px rgba(0,0,0,0.55);
  color:#fff;
}

.loan-shark-kicker {
  color:#ffb000;
  font-size:12px;
  letter-spacing:3px;
  text-shadow:var(--readable-shadow), 0 0 8px rgba(255,176,0,0.30);
}

.loan-shark-panel h2 {
  margin:4px 0 8px;
  color:#ff304f;
  font-size:34px;
  letter-spacing:3px;
  text-shadow:
    var(--readable-shadow),
    var(--glow-red-soft);
}

.loan-shark-copy {
  margin:0 0 12px;
  color:#fff2c8;
  font-size:15px;
  line-height:1.55;
}

.loan-shark-terms {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
  margin-bottom:12px;
}

.loan-shark-terms div {
  min-width:0;
  padding:9px 8px;
  border:1px solid rgba(255,48,79,0.48);
  border-radius:8px;
  background:rgba(255,48,79,0.08);
}

.loan-shark-terms span,
.loan-shark-terms em {
  display:block;
  color:#d7b8c4;
  font-size:11px;
  font-style:normal;
}

.loan-shark-terms strong {
  display:block;
  margin:3px 0;
  color:#ffe15a;
  font-size:18px;
  line-height:1.1;
  text-shadow:var(--readable-shadow), var(--glow-gold-soft);
}

.loan-shark-order {
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:7px;
  margin:12px 0;
}

.loan-shark-slot {
  min-height:54px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  border:1px solid rgba(255,225,90,0.62);
  border-radius:8px;
  background:rgba(255,225,90,0.09);
  color:#fff7d8;
  text-align:center;
}

.loan-shark-slot.empty {
  border-color:rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.05);
  color:#a997aa;
}

.loan-shark-slot b {
  color:#ffb000;
  font-size:13px;
  line-height:1;
}

.loan-shark-slot span {
  font-size:13px;
  line-height:1.2;
  word-break:keep-all;
}

.loan-shark-cats {
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:8px;
}

.loan-shark-cat {
  min-height:96px;
  border:1px solid var(--cat-color, #6cf);
  border-radius:9px;
  background:linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03));
  color:#fff;
  font-family:inherit;
  cursor:pointer;
  box-shadow:0 0 12px rgba(255,255,255,0.14);
  transition:transform 0.12s ease, opacity 0.12s ease, filter 0.12s ease;
}

.loan-shark-cat img {
  width:52px;
  height:52px;
  object-fit:contain;
  display:block;
  margin:5px auto 3px;
}

.loan-shark-cat span {
  display:block;
  font-size:14px;
  line-height:1.2;
  text-shadow:var(--readable-shadow), 0 0 6px color-mix(in srgb, currentColor 25%, transparent);
}

.loan-shark-cat:hover:not(:disabled) {
  transform:translateY(-2px);
}

.loan-shark-cat:disabled {
  opacity:0.32;
  filter:grayscale(1);
  cursor:default;
}

.loan-shark-actions {
  display:grid;
  grid-template-columns:1fr 1fr 1.2fr;
  gap:8px;
  margin-top:14px;
}

.loan-shark-btn {
  min-height:44px;
  border:1px solid rgba(255,255,255,0.25);
  border-radius:9px;
  background:rgba(255,255,255,0.08);
  color:#fff;
  font-family:inherit;
  font-size:15px;
  letter-spacing:1px;
  cursor:pointer;
}

.loan-shark-btn.ghost {
  color:#d7e8ff;
}

.loan-shark-btn.danger {
  border-color:#ff304f;
  background:linear-gradient(135deg, #ff304f, #ff9d00);
  color:#1a0710;
  font-weight:bold;
  box-shadow:0 0 18px rgba(255,48,79,0.48);
}

.loan-shark-btn:disabled {
  opacity:0.38;
  cursor:default;
  box-shadow:none;
}

.loan-shark-result {
  position:fixed;
  top:32%;
  left:50%;
  z-index:122;
  width:min(520px, calc(100vw - 26px));
  transform:translate(-50%, -50%);
  padding:18px 16px;
  border:2px solid currentColor;
  border-radius:12px;
  background:rgba(8,6,14,0.94);
  font-family:'DotGothic16', monospace;
  text-align:center;
  pointer-events:none;
  animation:loanSharkResultPop 0.28s ease-out both;
}

.loan-shark-result.hit {
  color:#ffe15a;
  box-shadow:0 0 34px rgba(255,225,90,0.62);
}

.loan-shark-result.miss {
  color:#ff7284;
  box-shadow:0 0 30px rgba(255,48,79,0.54);
}

.loan-shark-result-title {
  font-size:24px;
  letter-spacing:3px;
  text-shadow:var(--readable-shadow), 0 0 10px color-mix(in srgb, currentColor 35%, transparent);
}

.loan-shark-result-main {
  margin:4px 0 8px;
  font-size:46px;
  line-height:1;
  text-shadow:var(--readable-shadow-strong), 0 0 14px color-mix(in srgb, currentColor 35%, transparent);
}

.loan-shark-result-line {
  color:#f7edf4;
  font-size:13px;
  line-height:1.45;
}

@keyframes loanSharkResultPop {
  from {
    opacity:0;
    transform:translate(-50%, -44%) scale(0.94);
  }
  to {
    opacity:1;
    transform:translate(-50%, -50%) scale(1);
  }
}

@media (max-width:480px) {
  .loan-shark-predict {
    padding:10px;
  }
  .loan-shark-predict-head,
  .loan-shark-predict-terms,
  .loan-shark-predict-cards,
  .loan-shark-predict-actions {
    grid-template-columns:1fr;
  }
  .loan-shark-predict-order {
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .loan-shark-predict-card {
    grid-template-columns:64px minmax(0, 1fr);
    min-height:110px;
  }
  .loan-shark-predict-card img {
    width:60px;
    height:60px;
  }
  .loan-shark-predict-top strong {
    font-size:18px;
  }
  .loan-shark-panel {
    padding:14px;
  }
  .loan-shark-panel h2 {
    font-size:28px;
  }
  .loan-shark-terms {
    grid-template-columns:1fr;
  }
  .loan-shark-order,
  .loan-shark-cats {
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .loan-shark-actions {
    grid-template-columns:1fr;
  }
  .loan-shark-result-main {
    font-size:38px;
  }
}