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

* { box-sizing: border-box; }
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;
}

/* 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); }
}