/* ==========================================================================
   RETRO COLOR PIXEL ART, FULL-SCREEN FIT & TOUCH STYLING
   ========================================================================== */

:root {
  --font-pixel: 'DotGothic16', sans-serif;
  --font-ui: 'Fredoka', 'DotGothic16', sans-serif;
  --bg-color: #1e272e;
  --panel-bg: rgba(15, 20, 32, 0.92);
}

.hidden {
  display: none !important;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  font-family: var(--font-pixel);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

html, body {
  width: 100%;
  height: 100%;
  height: 100dvh; /* スマホのダイナミックビューポート対応で上下切れ防止 */
  overflow: hidden;
  background-color: var(--bg-color);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
}

/* モバイル全画面＆画面上下切り切れ防止コンテナ */
#game-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: 560px;
  background: #7bed9f;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
}

@media (min-width: 560px) {
  #game-container {
    height: 96vh;
    height: 96dvh;
    border-radius: 16px;
    border: 4px solid #70a1ff;
  }
}

/* Canvas */
#game-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Lotus-Muu 活動時の暗めフィルター */
#lotus-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 0, 25, 0.7);
  pointer-events: none;
  z-index: 45;
  transition: opacity 0.3s ease;
}

#lotus-overlay.hidden {
  display: none;
}

/* ボス WARNING 演出 */
#warning-overlay {
  position: absolute;
  top: 30%;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 90;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: warning-flash 0.5s infinite alternate;
}

#warning-overlay.hidden {
  display: none;
}

.warning-banner {
  background: rgba(255, 71, 87, 0.95);
  border: 4px solid #fffa65;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 900;
  text-align: center;
  padding: 10px 20px;
  box-shadow: 0 0 30px #ff4757;
  text-shadow: 2px 2px 0 #000;
  width: 100%;
}

.warning-banner span {
  font-size: 1.1rem;
  color: #fffa65;
}

@keyframes warning-flash {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.05); opacity: 0.8; }
}

/* BOSS HP BAR */
#boss-hp-container {
  width: 100%;
  margin-top: 4px;
  background: rgba(0, 0, 0, 0.85);
  border: 2px solid #ffa502;
  border-radius: 8px;
  padding: 4px 8px;
  box-shadow: 0 0 15px rgba(255, 165, 2, 0.4);
}

#boss-hp-container.hidden {
  display: none;
}

.boss-hp-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  font-weight: bold;
  color: #ffa502;
  margin-bottom: 2px;
}

.boss-hp-bg {
  width: 100%;
  height: 12px;
  background: #2f3542;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #ffa502;
}

.boss-hp-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff4757, #ff6b81, #ff0055);
  border-radius: 3px;
  transition: width 0.15s ease-out;
  box-shadow: 0 0 10px #ff4757;
}

/* 動的フリータッチジョイスティック */
#dynamic-joystick {
  position: absolute;
  pointer-events: none;
  z-index: 80;
  transform: translate(-50%, -50%);
  transition: opacity 0.15s ease;
}

#dynamic-joystick.hidden {
  opacity: 0;
  display: none;
}

#dynamic-base {
  width: 100px;
  height: 100px;
  background: rgba(255, 255, 255, 0.18);
  border: 3px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(2px);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}

#dynamic-stick {
  width: 42px;
  height: 42px;
  background: radial-gradient(circle, #ff4757, #ff6b81);
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 12px #ff4757;
  position: absolute;
}

/* オーバーレイ画面共通 (画面上下の収まりを保証) */
.overlay-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 16px 14px;
  background: var(--panel-bg);
  backdrop-filter: blur(6px);
  z-index: 100;
  transition: opacity 0.2s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.overlay-screen.hidden {
  display: none !important;
}

/* HUD Overlay */
#hud-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 50;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 8px 10px;
  box-sizing: border-box;
}

#hud-overlay.hidden {
  display: none !important;
}

.hud-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.stat-box {
  background: rgba(0, 0, 0, 0.7);
  border: 2px solid #70a1ff;
  border-radius: 8px;
  padding: 3px 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85rem;
  font-weight: bold;
}

.level-box {
  background: linear-gradient(135deg, #1e90ff, #70a1ff);
  border-color: #fff;
  color: #fff;
}

.score-box {
  color: #eccc68;
  border-color: #eccc68;
}

.fat-meter-container {
  flex: 1;
  background: rgba(0, 0, 0, 0.75);
  border-radius: 8px;
  padding: 3px 8px;
  border: 2px solid #ff4757;
  box-shadow: 0 0 10px rgba(255, 71, 87, 0.3);
}

.fat-meter-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  font-weight: bold;
  color: #ff6b81;
}

.fat-bar-bg {
  width: 100%;
  height: 10px;
  background: #2f3542;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid #ff4757;
}

.fat-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #ffa502, #ff4757);
  border-radius: 3px;
  transition: width 0.2s ease-out;
}

.xp-bar-container {
  width: 100%;
  height: 5px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 3px;
  margin-top: 4px;
  overflow: hidden;
}

.xp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #2ed573, #7bed9f);
  width: 0%;
}

.hud-bottom-info {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 2px;
  margin-bottom: 6px;
  pointer-events: none;
}

.timer-display, .pos-display {
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 0.75rem;
  color: #eccc68;
  font-weight: bold;
}

/* タイトル・スタート */
.title-card {
  text-align: center;
  margin-top: 6px;
}

.pixel-badge {
  display: inline-block;
  background: #ffa502;
  color: #000;
  padding: 2px 8px;
  font-size: 0.7rem;
  font-weight: bold;
  border-radius: 4px;
  margin-bottom: 4px;
}

.game-title {
  font-size: 2rem;
  font-family: var(--font-ui);
  color: #ff4757;
  text-shadow: 3px 3px 0 #000;
  line-height: 1.1;
}

.game-subtitle {
  font-size: 1rem;
  color: #70a1ff;
  margin-top: 2px;
}

.hero-preview {
  margin-top: 8px;
  font-size: 3rem;
}

.rules-card {
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid #70a1ff;
  border-radius: 12px;
  padding: 12px;
  width: 100%;
  max-width: 380px;
  text-align: left;
}

.rules-card h3 {
  color: #ffa502;
  font-size: 0.95rem;
  margin-bottom: 6px;
}

.rules-card ul {
  list-style: none;
  font-size: 0.8rem;
  line-height: 1.5;
}

.controls-hint {
  margin-top: 8px;
  background: rgba(255, 255, 255, 0.1);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.7rem;
  text-align: center;
  color: #a4b0be;
}

/* ボタン */
.btn-primary {
  width: 100%;
  max-width: 300px;
  padding: 12px;
  background: #ff4757;
  border: 3px solid #fff;
  border-radius: 30px;
  color: #fff;
  font-family: var(--font-ui);
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 5px 0 #b33939;
  margin-bottom: 8px;
}

.btn-primary:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 #b33939;
}

/* レベルアップ */
.levelup-header {
  text-align: center;
  margin-top: 4px;
}

.levelup-title {
  font-size: 1.9rem;
  color: #eccc68;
  font-family: var(--font-ui);
  text-shadow: 2px 2px 0 #000;
}

.levelup-sub {
  font-size: 0.8rem;
  color: #a4b0be;
}

.cards-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 380px;
  margin: 10px 0;
}

.card-item {
  background: #ffffff;
  color: #111111;
  border: 2px solid #111111;
  border-radius: 10px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  box-shadow: 0 3px 0 #111111;
  transition: all 0.15s ease;
}

.card-item:hover, .card-item:active {
  background: #f5f5f5;
  transform: translateY(-2px);
  box-shadow: 0 5px 0 #111111;
}

.card-icon {
  font-size: 1.8rem;
  background: #eeeeee;
  border: 1px solid #111111;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.card-info {
  flex: 1;
}

.card-title {
  font-size: 1rem;
  font-weight: bold;
  color: #111111;
}

.card-desc {
  font-size: 0.8rem;
  color: #444444;
}

/* ゲームオーバー */
.gameover-card {
  background: rgba(25, 20, 35, 0.95);
  border: 3px solid #ff4757;
  border-radius: 16px;
  padding: 16px;
  width: 100%;
  max-width: 380px;
  text-align: center;
  margin: auto 0;
}

.gameover-banner {
  display: inline-block;
  background: #ff4757;
  color: #fff;
  padding: 2px 12px;
  border-radius: 10px;
  font-weight: bold;
  font-size: 0.8rem;
}

.gameover-title {
  font-size: 1.9rem;
  font-family: var(--font-ui);
  color: #fff;
  margin-top: 4px;
}

.gameover-desc {
  font-size: 0.8rem;
  color: #a4b0be;
  margin-bottom: 10px;
}

.result-stats {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 12px;
}

.result-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  padding: 4px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}

.result-row:last-child {
  border-bottom: none;
}

.result-row strong {
  color: #ffa502;
}

.gameover-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.btn-secondary {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, #a55eea, #5f27cd);
  border: 3px solid #be2edd;
  border-radius: 12px;
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(95, 39, 205, 0.4);
  transition: transform 0.1s, box-shadow 0.1s;
}

.btn-secondary:active {
  transform: scale(0.96);
}

.btn-secondary.hidden {
  display: none;
}

.stage-select-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 380px;
  margin: 10px 0;
  z-index: 10;
}

.btn-stage3 {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  border: 3px solid #ffd700;
  border-radius: 12px;
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(231, 76, 60, 0.5);
  transition: transform 0.1s, box-shadow 0.1s;
}

.btn-stage3:active {
  transform: scale(0.96);
}

.btn-subtext {
  font-size: 0.75rem;
  font-weight: normal;
  display: inline-block;
  margin-left: 6px;
  opacity: 0.9;
}

/* 1面・2面開始ダイナミック演出 */
#stage-announce-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  animation: stage-bg-fade 2.0s forwards;
}

#stage-announce-overlay.hidden {
  display: none;
}

.stage-announce-card {
  text-align: center;
  background: rgba(15, 10, 30, 0.95);
  border: 4px solid #fffa65;
  border-radius: 20px;
  padding: 24px 40px;
  box-shadow: 0 0 40px #a55eea;
  animation: stage-pop 2.0s ease-out forwards;
}

#stage-announce-title {
  font-size: 2.8rem;
  font-weight: 900;
  color: #fffa65;
  text-shadow: 3px 3px 0 #000, 0 0 20px #ff4757;
  letter-spacing: 2px;
}

#stage-announce-sub {
  font-size: 1.2rem;
  color: #2ed573;
  margin-top: 6px;
  font-weight: bold;
  text-shadow: 1px 1px 0 #000;
}

@keyframes stage-pop {
  0% {
    transform: scale(0.2) rotate(-5deg);
    opacity: 0;
  }
  20% {
    transform: scale(1.15) rotate(2deg);
    opacity: 1;
  }
  30% {
    transform: scale(1.0) rotate(0deg);
  }
  80% {
    transform: scale(1.0);
    opacity: 1;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

@keyframes stage-bg-fade {
  0% { opacity: 0; }
  20% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; }
}

/* --- プレイヤーネーム入力 --- */
.player-name-card {
  background: rgba(0, 0, 0, 0.6);
  border: 2px solid #fffa65;
  border-radius: 12px;
  padding: 10px 16px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.name-label {
  font-size: 0.95rem;
  font-weight: bold;
  color: #fffa65;
  text-shadow: 1px 1px 0 #000;
}

.username-input {
  background: rgba(20, 20, 30, 0.9);
  border: 2px solid #ff4757;
  border-radius: 8px;
  padding: 8px 12px;
  color: #ffffff;
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: bold;
  outline: none;
  text-align: center;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.username-input:focus {
  border-color: #2ed573;
  box-shadow: 0 0 10px rgba(46, 213, 115, 0.6);
}

/* --- ステージセレクトボタン --- */
.stage-select-container {
  display: flex;
  gap: 10px;
  width: 100%;
  margin-bottom: 14px;
}

.btn-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 6px;
  font-size: 1rem;
}

.btn-stage .btn-subtext {
  font-size: 0.72rem;
  font-weight: normal;
  margin-top: 2px;
  opacity: 0.95;
  color: #ffd1d6;
}

/* --- ハイスコアランキング --- */
.ranking-card {
  width: 100%;
  background: rgba(15, 15, 25, 0.85);
  border: 2px solid #70a1ff;
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
  margin-top: 8px;
}

.gameover-ranking {
  margin-top: 14px;
  border-color: #ff4757;
}

.ranking-title {
  font-size: 0.95rem;
  font-weight: bold;
  color: #70a1ff;
  text-align: center;
  margin-bottom: 8px;
  text-shadow: 1px 1px 0 #000;
}

.gameover-ranking .ranking-title {
  color: #ff6b81;
}

.ranking-list {
  max-height: 160px;
  overflow-y: auto;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.4);
  padding: 4px;
}

.ranking-loading, .ranking-empty {
  font-size: 0.85rem;
  color: #a4b0be;
  text-align: center;
  padding: 12px 0;
}

.ranking-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.ranking-table th {
  background: rgba(112, 161, 255, 0.2);
  color: #70a1ff;
  padding: 4px 6px;
  text-align: left;
  font-weight: bold;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.ranking-table td {
  padding: 5px 6px;
  color: #f1f2f6;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.ranking-table tr:nth-child(1) td {
  color: #fffa65;
  font-weight: bold;
}
.ranking-table tr:nth-child(2) td {
  color: #eccc68;
}
.ranking-table tr:nth-child(3) td {
  color: #ced6e0;
}

.ranking-rank {
  width: 24px;
  text-align: center;
  font-weight: bold;
}

.ranking-name {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ranking-score {
  text-align: right;
  font-family: monospace;
  font-weight: bold;
  color: #2ed573;
}

.ranking-stage {
  text-align: center;
  width: 36px;
}

/* --- コントロールパネル (2倍速・一時停止・タイトルへ) --- */
.game-controls-panel {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 3px 8px;
  pointer-events: auto;
  backdrop-filter: blur(4px);
}

.ctrl-btn {
  background: rgba(40, 40, 60, 0.8);
  border: 1px solid #70a1ff;
  border-radius: 14px;
  color: #ffffff;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: bold;
  padding: 4px 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  transition: all 0.15s ease;
  user-select: none;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.ctrl-btn:hover {
  background: #70a1ff;
  color: #000;
  transform: translateY(-1px);
}

.ctrl-btn:active {
  transform: translateY(1px);
}

.ctrl-btn.active-2x {
  background: linear-gradient(135deg, #ff4757, #ff6b81);
  border-color: #fffa65;
  color: #ffffff;
  animation: pulse-speed 1s infinite alternate;
}

@keyframes pulse-speed {
  0% { box-shadow: 0 0 6px rgba(255, 71, 87, 0.6); }
  100% { box-shadow: 0 0 14px rgba(255, 250, 101, 0.9); }
}

/* --- 一時停止画面 (Pause Screen Overlay) --- */
.pause-card {
  background: rgba(18, 18, 30, 0.95);
  border: 3px solid #70a1ff;
  border-radius: 16px;
  padding: 24px;
  width: 90%;
  max-width: 360px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.8);
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: card-pop 0.25s ease-out;
}

.pause-title {
  font-size: 2.2rem;
  font-weight: 900;
  color: #70a1ff;
  text-shadow: 2px 2px 0 #000;
  margin: 0;
}

.pause-desc {
  font-size: 1rem;
  color: #a4b0be;
  margin: 0;
}

.pause-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 6px 0;
}

.pause-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btn-danger {
  background: linear-gradient(180deg, #ff4757 0%, #ff6b81 100%);
  border: 2px solid #ffffff;
  border-radius: 10px;
  color: #ffffff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: bold;
  padding: 12px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(255, 71, 87, 0.4);
  transition: transform 0.1s;
}

.btn-danger:hover {
  transform: scale(1.03);
}

.btn-danger:active {
  transform: scale(0.97);
}

/* ==========================================================================
   スプラッシュ画面 (TAP TO START / 音声アクティベーション)
   ========================================================================== */
#screen-splash {
  justify-content: center;
  align-items: center;
  background: rgba(10, 15, 26, 0.96);
  cursor: pointer;
}

.splash-card {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 380px;
  width: 90%;
  padding: 24px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 3px solid #ff4757;
  border-radius: 20px;
  box-shadow: 0 0 30px rgba(255, 71, 87, 0.3);
}

.splash-hero {
  font-size: 4rem;
  margin: 6px 0;
  animation: hero-bounce 1.5s infinite ease-in-out;
}

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

.splash-start-prompt {
  margin-top: 8px;
  padding: 14px 20px;
  background: linear-gradient(135deg, #ff4757, #ff6b81);
  border: 3px solid #ffffff;
  border-radius: 35px;
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: bold;
  box-shadow: 0 6px 16px rgba(255, 71, 87, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  animation: pulse-prompt 1.2s infinite ease-in-out;
}

@keyframes pulse-prompt {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.9; }
}

.prompt-icon {
  font-size: 1.4rem;
}

.splash-audio-note {
  font-size: 0.85rem;
  color: #70a1ff;
  background: rgba(112, 161, 255, 0.15);
  padding: 6px 14px;
  border-radius: 12px;
  border: 1px dashed #70a1ff;
}

/* ==========================================================================
   NEW SIMPLE UI DESIGN & CUSTOM SCREENS
   ========================================================================== */

/* --- シンプルボタン 共通スタイル --- */
.btn-simple {
  background: #ffffff;
  color: #111111;
  border: 2px solid #111111;
  border-radius: 8px;
  font-family: var(--font-pixel);
  font-size: 1.1rem;
  font-weight: bold;
  padding: 12px 24px;
  cursor: pointer;
  box-shadow: 0 4px 0 #111111;
  transition: all 0.15s ease;
  outline: none;
  min-width: 180px;
  text-align: center;
}

.btn-simple:hover {
  background: #f0f0f0;
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #111111;
}

.btn-simple:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #111111;
}

/* メインSTARTボタン */
.btn-simple-start {
  font-size: 1.8rem;
  padding: 16px 48px;
  min-width: 200px;
  letter-spacing: 2px;
  background: #ffffff;
}

/* メニュー用ボタン */
.btn-simple-menu {
  width: 220px;
  font-size: 1.15rem;
  padding: 14px 20px;
}

/* ポップアップ用ボタン */
.btn-simple-sub {
  width: 100%;
  font-size: 1.1rem;
  padding: 12px;
  margin-bottom: 8px;
}

/* 閉じるボタン */
.btn-simple-close {
  background: #eeeeee;
  color: #333333;
  margin-top: 12px;
  padding: 8px 20px;
  min-width: 120px;
  font-size: 0.95rem;
}

/* CONTINUEボタン */
.btn-simple-continue {
  font-size: 1.4rem;
  padding: 14px 36px;
  background: #ffffff;
  color: #111111;
}

/* TOPボタン */
.btn-simple-top {
  font-size: 1.2rem;
  padding: 12px 36px;
  margin-top: 12px;
}

/* --- スタート画面 --- */
#screen-start {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: #000000;
}

/* 背景 start.png */
.start-bg-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../img/start.png');
  background-size: cover;
  background-position: center;
  z-index: 1;
}

/* 中央配置ボックス */
.start-center-box {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 90%;
  max-width: 320px;
}

/* プレイヤーネーム入力 (シンプル) */
.player-name-simple {
  margin-bottom: 8px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.username-label-text {
  font-size: 0.95rem;
  font-weight: bold;
  color: #ffffff;
  letter-spacing: 2px;
  text-shadow: 2px 2px 0 #000000, -2px -2px 0 #000000, 2px -2px 0 #000000, -2px 2px 0 #000000;
}

.simple-input {
  width: 200px;
  padding: 8px 12px;
  font-size: 1rem;
  font-family: var(--font-pixel);
  text-align: center;
  border: 2px solid #111111;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.9);
  color: #111111;
  outline: none;
  box-shadow: 0 2px 0 #111111;
}

/* --- モーダル (ポップアップ) --- */
.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 200;
  backdrop-filter: blur(4px);
}

.modal-overlay.hidden {
  display: none !important;
}

.modal-card {
  background: #ffffff;
  color: #111111;
  border: 3px solid #111111;
  border-radius: 12px;
  padding: 20px;
  width: 90%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  animation: modal-pop 0.2s ease-out;
}

.modal-card-large {
  max-width: 440px;
  max-height: 85%;
}

@keyframes modal-pop {
  0% { transform: scale(0.9); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.modal-title {
  font-size: 1.3rem;
  margin-bottom: 16px;
  text-align: center;
  border-bottom: 2px solid #111111;
  padding-bottom: 6px;
  width: 100%;
}

.stage-button-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ranking-scroll-container {
  width: 100%;
  max-height: 360px;
  overflow-y: auto;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 8px;
  background: #fafafa;
}

/* --- ゲームオーバー画面 --- */
#screen-gameover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
}

.gameover-phase {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.gameover-phase.hidden {
  display: none !important;
}

/* フェーズ1: 背景 over.png & カウントダウン */
.over-bg-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../img/over.png');
  background-size: cover;
  background-position: center;
  z-index: 1;
}

.countdown-center-box {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* 9秒カウントダウン巨大数字 */
.countdown-digit {
  font-size: 7rem;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 4px 4px 0 #000000, -4px -4px 0 #000000, 4px -4px 0 #000000, -4px 4px 0 #000000, 0 8px 16px rgba(0,0,0,0.8);
  font-family: var(--font-pixel);
  line-height: 1;
  animation: count-pulse 1s infinite alternate;
}

@keyframes count-pulse {
  0% { transform: scale(1); }
  100% { transform: scale(1.08); }
}

/* フェーズ2: カウント0時 黒画面 GAMEOVER */
#gameover-result-phase {
  background: #000000;
  z-index: 50;
}

.result-center-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 92%;
  max-width: 440px;
  height: 90%;
  justify-content: space-between;
  padding: 16px 0;
}

.gameover-text-title {
  font-size: 3rem;
  font-weight: 900;
  color: #ff3333;
  letter-spacing: 4px;
  text-shadow: 2px 2px 0 #ffffff, -2px -2px 0 #ffffff;
  margin: 10px 0;
  font-family: var(--font-pixel);
}

.ranking-card-result {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  margin: 10px 0;
  overflow: hidden;
  background: #111111;
  border: 2px solid #444444;
  border-radius: 8px;
}

/* オートスクロールボックス */
.auto-scroll-ranking-box {
  width: 100%;
  height: 100%;
  max-height: 380px;
  overflow-y: auto;
  padding: 10px;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.auto-scroll-ranking-box:active,
.auto-scroll-ranking-box.is-dragging {
  cursor: grabbing;
}

.auto-scroll-ranking-box::-webkit-scrollbar {
  width: 6px;
}

.auto-scroll-ranking-box::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 3px;
}

.ranking-table-simple {
  width: 100%;
  border-collapse: collapse;
  color: #ffffff;
  font-size: 0.95rem;
}

.ranking-table-simple th {
  border-bottom: 2px solid #555;
  padding: 6px;
  text-align: left;
  color: #aaa;
}

.ranking-table-simple td {
  padding: 8px 6px;
  border-bottom: 1px solid #222;
  color: #ffffff;
}

.ranking-table-simple tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.04);
}

/* モーダルポップアップ内 (白背景) のランキングテーブルスタイルの最適化 */
.modal-card .ranking-table-simple {
  color: #111111 !important;
}

.modal-card .ranking-table-simple th {
  border-bottom: 2px solid #333333 !important;
  color: #444444 !important;
}

.modal-card .ranking-table-simple td {
  border-bottom: 1px solid #e0e0e0 !important;
  color: #111111 !important;
  font-weight: bold;
}

.modal-card .ranking-table-simple tr:nth-child(even) {
  background: rgba(0, 0, 0, 0.04) !important;
}