:root {
  /* CartoonNetwork風のビビッド配色 */
  --ink: #111111;
  --bg: #fffbf0;
  --blob1: #ffdd35;
  --blob2: #00c2ff;
  --blob3: #ff5ea8;
  --text: #d61b2b;
  --guide-a: #00c2ff;
  --guide-b: #ff5ea8;
}

* {
  box-sizing: border-box;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-touch-callout: none;
}

/* CartoonNetwork風の抽象的なカラーブロブ背景 */
.cartoon-world {
  background: linear-gradient(180deg, #bde5ff 0%, #8ecfff 100%);
  position: relative;
}

.cartoon-world::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.28;
  background-image:
    linear-gradient(0deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85));
  background-repeat: no-repeat;
  background-size:
    26vw 20vh,
    30vw 22vh,
    24vw 18vh;
  background-position:
    6% 16%,
    72% 18%,
    28% 76%;
  box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.06);
}

/* CN風ヒーローバナー */
.cn-hero {
  text-align: center;
  padding-top: 6px;
}

.cn-topline {
  font-weight: 900;
  letter-spacing: 2px;
  color: #0d3f66;
  text-shadow: 1px 1px 0 #fff;
}

.cn-title {
  margin: 4px 0 8px;
}

.cn-kicker {
  display: inline-block;
  padding: 2px 12px;
  font-weight: 900;
  font-size: clamp(38px, 9vw, 92px);
  color: #ffea3a;
  text-shadow:
    -4px 0 #000, 4px 0 #000, 0 -4px #000, 0 4px #000,
    6px 6px 0 rgba(0, 0, 0, 0.35);
}

.cn-blocks {
  display: inline-grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  vertical-align: middle;
  margin-left: 8px;
}

.cn-blocks .block {
  width: clamp(28px, 5vw, 48px);
  height: clamp(28px, 5vw, 48px);
  border: 4px solid #000;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.3);
}

.cn-blocks .b1 {
  background: #000;
}

.cn-blocks .b2 {
  background: #fff;
}

.hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  font-weight: 900;
  color: #0d3f66;
  text-shadow: 1px 1px 0 #fff;
}

.hud .steps {
  color: #555;
  font-size: 14px;
}

.game-root {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.drum-area {
  position: relative;
  width: 100%;
  height: 48vh;
  border: 8px solid var(--ink);
  border-radius: 36px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  box-shadow: 6px 8px 0 rgba(17, 17, 17, 0.25);
  /* リアルなドラム皮の質感（重ね背景） */
  background-image:
    radial-gradient(circle at 50% 45%, #fdfdfd 0%, #ececec 50%, #d9d9d9 70%, #c7c7c7 100%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 3px, rgba(255, 255, 255, 0.02) 3px, rgba(255, 255, 255, 0.02) 6px);
}

/* 金属リムの雰囲気 */
.drum-area::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 28px;
  box-shadow: inset 0 0 0 14px #cfcfcf, inset 0 0 24px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.area-label {
  color: var(--text);
  font-weight: 700;
  font-size: clamp(18px, 3.5vw, 28px);
  text-align: center;
}

/* 10x10の不可視グリッドセル */
.grid-cell {
  position: absolute;
  width: 20%;
  height: 20%;
  /* セルは不可視だが、タップ範囲として機能 */
  background: transparent;
  touch-action: none;
  /* 他ブラウザ用。Safariは別途JSで対応 */
}

/* 中央“TAP”ヒント */
.tap-hint {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  font-weight: 900;
  letter-spacing: 2px;
  font-size: clamp(28px, 6.5vw, 64px);
  color: #ffea3a;
  text-shadow:
    -4px 0 #000, 4px 0 #000, 0 -4px #000, 0 4px #000,
    6px 6px 0 rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}

.drum-area.guide .tap-hint {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.0);
}

/* タップ波紋エフェクト */
.ripple {
  position: absolute;
  width: 16vh;
  height: 16vh;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.25);
  pointer-events: none;
  border: 5px solid rgba(0, 0, 0, 0.85);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.0) 65%);
  animation: rippleOut 420ms ease-out forwards;
}

@keyframes rippleOut {
  0% {
    opacity: 0.85;
    transform: translate(-50%, -50%) scale(0.25);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.75);
  }
}

/* 次に叩くタムの誘導（色付きアニメーション） */
.guide {
  animation: pulse 1.2s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(30, 167, 253, 0.3), 0 0 12px 2px rgba(255, 122, 0, 0.25);
    border-color: var(--guide-a);
  }

  50% {
    box-shadow: 0 0 0 14px rgba(30, 167, 253, 0.0), 0 0 20px 4px rgba(255, 122, 0, 0.45);
    border-color: var(--guide-b);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(30, 167, 253, 0.0), 0 0 12px 2px rgba(255, 122, 0, 0.25);
    border-color: var(--guide-a);
  }
}

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.overlay.show {
  display: flex;
}

.overlay-content {
  text-align: center;
}

.gameover-text {
  color: #000;
  background: #fff;
  border: 4px solid #000;
  border-radius: 16px;
  padding: 16px 24px;
  font-weight: 900;
  font-size: clamp(28px, 8vw, 64px);
  animation: zoomIn 600ms ease both;
}

@keyframes zoomIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }

  50% {
    transform: scale(1.08);
    opacity: 1;
  }

  100% {
    transform: scale(1.0);
  }
}

.next-btn {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 50%;
  border: 3px solid var(--ink);
  background: #fff;
  color: var(--ink);
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tap-to-start {
  position: fixed;
  inset-inline: 0;
  bottom: 16px;
  text-align: center;
  color: #333;
  font-weight: 700;
  opacity: 0.85;
  pointer-events: none;
}

/* 追加：更新マークアイコンとコンボ表示、波紋テキスト */
.refresh-icon {
  display: block;
}

.combo-result {
  margin-top: 8px;
  font-weight: 900;
  font-size: clamp(16px, 4vw, 28px);
}

.ripple .ripple-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-weight: 900;
  color: #ffea3a;
  font-size: 56px;
  /* 以前の約4倍 */
  letter-spacing: 1px;
  text-shadow:
    -4px 0 #000, 4px 0 #000, 0 -4px #000, 0 4px #000,
    6px 6px 0 rgba(0, 0, 0, 0.35);
  opacity: 0.75;
  animation: rippleTextOut 420ms ease-out forwards;
}

@keyframes rippleTextOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* ゲームオーバー下部のグリッド調整ゲージ */
.grid-control {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.overlay.show .grid-control {
  opacity: 1;
  pointer-events: auto;
}

.grid-value {
  font-weight: 900;
  color: #000;
  text-shadow: 1px 1px 0 #fff;
}

.grid-bar {
  width: min(86vw, 520px);
  height: 14px;
  border: 3px solid #000;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.grid-bar .fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--guide-a), var(--guide-b));
}

/* 画面向きによるレイアウト切替 */
@media (orientation: landscape) {
  .game-root {
    flex-direction: row;
    gap: 12px;
    height: 100vh;
    padding: 0;
  }

  .drum-area {
    height: 92vh;
    margin: 0;
  }
}

@media (orientation: portrait) {
  .game-root {
    flex-direction: column;
    height: 100vh;
    padding: 0;
  }

  .drum-area {
    height: 49vh;
  }
}

/* 背景テーマ切替（ワープ風トランジション） */
.cartoon-world.theme-alt {
  background: linear-gradient(180deg, #ffe6f6 0%, #ffb3de 100%);
}

.cartoon-world.warp::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.0) 60%);
  animation: warpFlash 600ms ease-out forwards;
}

@keyframes warpFlash {
  0% {
    transform: scale(0.2);
    opacity: 0;
  }

  30% {
    transform: scale(0.6);
    opacity: 1;
  }

  100% {
    transform: scale(2.0);
    opacity: 0;
  }
}

/* グリッドプレビュー（ゲームオーバー時の視覚補助） */
.drum-area .grid-preview {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.grid-preview .line-v {
  position: absolute;
  top: 0;
  width: 2px;
  height: 100%;
  background: rgba(0, 0, 0, 0.25);
}

.grid-preview .line-h {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgba(0, 0, 0, 0.25);
}

/* fart SVG 表示（画面中央に揺れアニメーション、フェードアウトなし） */
.fart-svg {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(60vw, 400px);
  height: auto;
  z-index: 998;
  pointer-events: none;
  animation: fartShake 700ms ease both;
}

@keyframes fartShake {
  0% {
    transform: translate(-50%, -50%) scale(0.95) rotate(0deg);
  }

  10% {
    transform: translate(-50%, -50%) scale(1.0) rotate(2deg);
  }

  20% {
    transform: translate(calc(-50% + 2px), calc(-50% + 1px)) rotate(-2deg);
  }

  30% {
    transform: translate(calc(-50% - 2px), calc(-50% - 2px)) rotate(2deg);
  }

  40% {
    transform: translate(calc(-50% + 3px), calc(-50% - 1px)) rotate(-2deg);
  }

  50% {
    transform: translate(calc(-50% - 3px), calc(-50% + 2px)) rotate(2deg);
  }

  60% {
    transform: translate(calc(-50% + 2px), calc(-50% + 1px)) rotate(-2deg);
  }

  70% {
    transform: translate(calc(-50% - 2px), calc(-50% - 1px)) rotate(2deg);
  }

  85% {
    transform: translate(-50%, -50%) scale(1.05) rotate(0deg);
  }

  100% {
    transform: translate(-50%, -50%) scale(1.05) rotate(0deg);
  }
}