/* ============================================================
   マッチ3・カラーコネクト — style.css  v1.3.1
   ネオン×ダークアーケード テーマ
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Noto+Sans+JP:wght@400;700&display=swap');

/* ── CSS Variables ─────────────────────────────────────── */
:root {
  --color-red:    #FF3B5C;
  --color-blue:   #00C2FF;
  --color-green:  #00E87A;
  --color-yellow: #FFD600;
  --color-purple: #C04DFF;

  --glow-red:    rgba(255,59,92,0.7);
  --glow-blue:   rgba(0,194,255,0.7);
  --glow-green:  rgba(0,232,122,0.7);
  --glow-yellow: rgba(255,214,0,0.7);
  --glow-purple: rgba(192,77,255,0.7);

  --bg-base:      #0a0c14;
  --bg-surface:   #111627;
  --bg-card:      #161d35;
  --border-dim:   rgba(255,255,255,0.08);
  --border-glow:  rgba(0,194,255,0.4);
  --text-primary: #e8eaf6;
  --text-muted:   #7c84a8;
  --accent-cyan:  #00C2FF;

  --font-game: 'Orbitron','Noto Sans JP',monospace;
  --font-ui:   'Noto Sans JP',sans-serif;

  --cols: 6;          /* 全デバイス共通 — JS で同期 */
  --rows: 7;          /* 全デバイス共通 — JS で同期 */
  --block-size: 60px; /* JS で動的計算して上書き */

  --ease-bounce: cubic-bezier(0.34,1.56,0.64,1);
  --ease-snap:   cubic-bezier(0.25,0.46,0.45,0.94);
}

/* ── Reset ─────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; overflow:hidden; }
body {
  background:var(--bg-base);
  color:var(--text-primary);
  font-family:var(--font-ui);
  overscroll-behavior:none;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:var(--bg-base); }
::-webkit-scrollbar-thumb { background:var(--border-glow); border-radius:2px; }

/* ── Noise + Scanlines ─────────────────────────────────── */
body::before {
  content:'';
  position:fixed; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-repeat:repeat; background-size:200px;
  pointer-events:none; z-index:0; opacity:0.5;
}
body::after {
  content:'';
  position:fixed; inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.04) 2px,rgba(0,0,0,0.04) 4px);
  pointer-events:none; z-index:1;
}

/* ── App ───────────────────────────────────────────────── */
#app {
  display:flex; flex-direction:column;
  height:100dvh;
  max-width:960px; margin:0 auto;
  position:relative; overflow:hidden; z-index:2;
}

/* ── Header ────────────────────────────────────────────── */
#header {
  flex-shrink:0;
  padding:8px 14px 6px;
  background:linear-gradient(180deg,rgba(0,194,255,0.06) 0%,transparent 100%);
  border-bottom:1px solid var(--border-dim);
}
.header-inner {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.logo { display:flex; flex-direction:column; line-height:1; flex-shrink:0; }
.logo-m3 {
  font-family:var(--font-game); font-weight:900;
  font-size:clamp(18px,5vw,30px);
  color:var(--accent-cyan);
  text-shadow:0 0 12px var(--accent-cyan),0 0 24px rgba(0,194,255,0.4);
  letter-spacing:2px;
}
.logo-cc {
  font-family:var(--font-game);
  font-size:clamp(6px,1.4vw,10px);
  color:var(--text-muted); letter-spacing:3px; margin-top:2px;
}

/* HUD */
.hud { display:flex; gap:6px; align-items:stretch; }
.hud-block {
  display:flex; flex-direction:column; align-items:center;
  background:var(--bg-card); border:1px solid var(--border-dim);
  border-radius:8px; padding:3px 10px; min-width:52px;
  position:relative; overflow:hidden;
}
.hud-block::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--accent-cyan),transparent);
  opacity:0.5;
}
.hud-label {
  font-family:var(--font-game); font-size:7px;
  letter-spacing:2px; color:var(--text-muted);
}
.hud-value {
  font-family:var(--font-game);
  font-size:clamp(14px,3.5vw,22px);
  font-weight:700; color:var(--text-primary); line-height:1.2;
}

/* コンボHUD */
.hud-combo .hud-value { color:var(--color-yellow); }
.hud-combo.active .hud-value {
  text-shadow:0 0 10px var(--color-yellow);
  animation:combo-pulse 0.3s ease-in-out;
}
@keyframes combo-pulse {
  0%,100% { transform:scale(1); }
  50%      { transform:scale(1.3); }
}

/* タイマー */
.hud-timer .hud-value { color:var(--accent-cyan); }
.hud-timer.warning .hud-value {
  color:var(--color-yellow);
  animation:timer-pulse 0.5s ease-in-out infinite alternate;
}
.hud-timer.danger .hud-value {
  color:var(--color-red);
  animation:timer-pulse 0.25s ease-in-out infinite alternate;
  text-shadow:0 0 8px var(--glow-red);
}
@keyframes timer-pulse { from{opacity:1} to{opacity:0.5} }

/* ── Main ──────────────────────────────────────────────── */
#main {
  flex:1; min-height:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:8px 12px; gap:8px; overflow:hidden;
}

/* ── Board ─────────────────────────────────────────────── */
#board-wrap {
  flex:1; min-height:0;
  display:flex; align-items:center; justify-content:center;
  width:100%; overflow:hidden;
}
#game-board {
  display:grid;
  grid-template-columns:repeat(var(--cols),var(--block-size));
  gap:4px; padding:8px;
  background:var(--bg-surface);
  border:1px solid var(--border-dim);
  border-radius:12px;
  box-shadow:0 0 0 1px rgba(0,194,255,0.1),inset 0 0 40px rgba(0,0,0,0.4);
  cursor:pointer;       /* ドラッグ操作を促す */
  touch-action:none;    /* スワイプ中のブラウザスクロールを抑制 */
  -webkit-user-select:none; user-select:none;
}

/* ── Block ─────────────────────────────────────────────── */
.block {
  width:var(--block-size); height:var(--block-size);
  border-radius:8px; cursor:pointer;
  position:relative; display:flex;
  align-items:center; justify-content:center;
  transition:transform 150ms var(--ease-snap),filter 150ms ease,box-shadow 150ms ease;
  will-change:transform,opacity;
  border:2px solid transparent; overflow:hidden;
}
.block::before {
  content:''; position:absolute;
  top:3px; left:3px; right:3px; height:35%;
  background:linear-gradient(180deg,rgba(255,255,255,0.25) 0%,transparent 100%);
  border-radius:5px 5px 0 0; pointer-events:none;
}
.block::after {
  content:''; position:absolute;
  bottom:0; left:0; right:0; height:30%;
  background:linear-gradient(0deg,rgba(0,0,0,0.35) 0%,transparent 100%);
  border-radius:0 0 6px 6px; pointer-events:none;
}

.block[data-color="red"]    { background:var(--color-red);    box-shadow:inset 0 -3px 0 rgba(0,0,0,0.3); }
.block[data-color="blue"]   { background:var(--color-blue);   box-shadow:inset 0 -3px 0 rgba(0,0,0,0.3); }
.block[data-color="green"]  { background:var(--color-green);  box-shadow:inset 0 -3px 0 rgba(0,0,0,0.3); }
.block[data-color="yellow"] { background:var(--color-yellow); box-shadow:inset 0 -3px 0 rgba(0,0,0,0.3); }
.block[data-color="purple"] { background:var(--color-purple); box-shadow:inset 0 -3px 0 rgba(0,0,0,0.3); }

.block.selected { transform:scale(0.9); border-color:rgba(255,255,255,0.9); z-index:2; }
.block.selected[data-color="red"]    { box-shadow:0 0 14px var(--glow-red),inset 0 -3px 0 rgba(0,0,0,0.3);    filter:brightness(1.3); }
.block.selected[data-color="blue"]   { box-shadow:0 0 14px var(--glow-blue),inset 0 -3px 0 rgba(0,0,0,0.3);   filter:brightness(1.3); }
.block.selected[data-color="green"]  { box-shadow:0 0 14px var(--glow-green),inset 0 -3px 0 rgba(0,0,0,0.3);  filter:brightness(1.3); }
.block.selected[data-color="yellow"] { box-shadow:0 0 14px var(--glow-yellow),inset 0 -3px 0 rgba(0,0,0,0.3); filter:brightness(1.3); }
.block.selected[data-color="purple"] { box-shadow:0 0 14px var(--glow-purple),inset 0 -3px 0 rgba(0,0,0,0.3); filter:brightness(1.3); }

.block.reachable { animation:reachable-pulse 0.9s ease-in-out infinite alternate; }
@keyframes reachable-pulse { from{filter:brightness(1)} to{filter:brightness(1.25)} }

.block:hover:not(.selected) { transform:scale(1.05); filter:brightness(1.1); }
.block.inactive { cursor:default; pointer-events:none; filter:grayscale(0.6) brightness(0.6); }

@keyframes block-remove {
  0%  { transform:scale(1);   opacity:1; }
  40% { transform:scale(1.2); opacity:0.8; }
  100%{ transform:scale(0);   opacity:0; }
}
.block.removing { animation:block-remove 250ms var(--ease-snap) forwards; pointer-events:none; }

@keyframes block-drop {
  from { transform:translateY(calc(-1 * var(--drop-distance,60px))); opacity:0.7; }
  to   { transform:translateY(0); opacity:1; }
}
.block.dropping { animation:block-drop 200ms var(--ease-bounce) forwards; }

@keyframes block-spawn {
  from { transform:scale(0) rotate(-10deg); opacity:0; }
  to   { transform:scale(1) rotate(0deg);   opacity:1; }
}
.block.spawning { animation:block-spawn 300ms var(--ease-bounce) forwards; }

.block .chain-num {
  position:absolute; top:2px; right:4px;
  font-family:var(--font-game); font-size:clamp(7px,1.3vw,10px);
  font-weight:700; color:#fff;
  /* 全方向に黒縁取り — 明るいブロック色でも確実に視認できる */
  text-shadow:
    -1px -1px 0 rgba(0,0,0,0.9),
     1px -1px 0 rgba(0,0,0,0.9),
    -1px  1px 0 rgba(0,0,0,0.9),
     1px  1px 0 rgba(0,0,0,0.9),
     0    0   4px rgba(0,0,0,0.7);
  line-height:1; z-index:3; pointer-events:none;
}

/* ── Chain Bar ─────────────────────────────────────────── */
#chain-bar {
  display:flex; align-items:center; justify-content:center;
  gap:10px; width:100%; padding:5px 12px;
  background:var(--bg-card); border:1px solid var(--border-dim);
  border-radius:10px; min-height:38px;
  flex-shrink:0; flex-wrap:wrap;
}
#chain-dots { display:flex; gap:5px; align-items:center; flex-wrap:wrap; justify-content:center; }
.chain-dot {
  width:13px; height:13px; border-radius:50%;
  border:2px solid rgba(255,255,255,0.5);
  animation:dot-pop 150ms var(--ease-bounce) forwards;
}
@keyframes dot-pop { from{transform:scale(0)} to{transform:scale(1)} }
#chain-label { font-size:11px; color:var(--text-muted); font-family:var(--font-game); letter-spacing:1px; }
#chain-bar.has-chain #chain-label { color:var(--text-primary); }
#chain-bar.valid-chain #chain-label { color:var(--accent-cyan); }

/* ── Buttons ───────────────────────────────────────────── */
.btn {
  font-family:var(--font-game); font-weight:700;
  letter-spacing:2px; border:none; border-radius:8px;
  cursor:pointer;
  transition:transform 100ms ease,filter 100ms ease,box-shadow 150ms ease;
  -webkit-tap-highlight-color:transparent;
}
.btn:active { transform:scale(0.95); }

.btn-primary {
  background:linear-gradient(135deg,#0090c4 0%,#0060a0 100%);
  color:#fff; padding:10px 28px;
  font-size:clamp(12px,2.5vw,15px);
  box-shadow:0 0 16px rgba(0,194,255,0.35),0 4px 12px rgba(0,0,0,0.5);
  border:1px solid rgba(0,194,255,0.5);
}
.btn-primary:hover { filter:brightness(1.15); box-shadow:0 0 24px rgba(0,194,255,0.55),0 4px 12px rgba(0,0,0,0.5); }

.btn-secondary {
  background:transparent; color:var(--text-muted);
  border:1px solid rgba(255,255,255,0.2);
  padding:10px 28px; font-size:clamp(12px,2.5vw,15px);
}
.btn-secondary:hover { background:rgba(255,255,255,0.07); color:var(--text-primary); border-color:rgba(255,255,255,0.4); }


.btn-large { padding:13px 40px; font-size:clamp(13px,3vw,17px); border-radius:12px; }

/* 難易度ボタン */
.btn-diff {
  background:rgba(255,255,255,0.06); color:var(--text-muted);
  border:1px solid rgba(255,255,255,0.15);
  padding:7px 18px; font-size:clamp(10px,2vw,13px);
  border-radius:8px; letter-spacing:2px;
  transition:all 150ms ease;
}
.btn-diff:hover { background:rgba(255,255,255,0.12); color:var(--text-primary); }
.btn-diff.active {
  background:linear-gradient(135deg,#0090c4,#0060a0);
  color:#fff; border-color:rgba(0,194,255,0.6);
  box-shadow:0 0 12px rgba(0,194,255,0.3);
}
/* 難易度別アクセントカラー */
.btn-diff[data-diff="easy"].active    { background:linear-gradient(135deg,#00a060,#006040); border-color:rgba(0,232,122,0.5); box-shadow:0 0 12px rgba(0,232,122,0.3); }
.btn-diff[data-diff="hard"].active    { background:linear-gradient(135deg,#c03080,#801060); border-color:rgba(255,59,92,0.5);  box-shadow:0 0 12px rgba(255,59,92,0.3); }

/* ── Footer ────────────────────────────────────────────── */
#footer {
  flex-shrink:0; display:flex; flex-direction:column;
  align-items:center; gap:4px; padding:6px 16px 10px;
  border-top:1px solid var(--border-dim);
}
.hint { font-size:11px; color:var(--text-muted); letter-spacing:1px; }
#start-btn { display:none; }
#start-btn.visible { display:flex; }

/* ── Overlays ──────────────────────────────────────────── */
.overlay {
  position:absolute; inset:0;
  background:rgba(10,12,20,0.88);
  display:flex; align-items:center; justify-content:center;
  z-index:100; opacity:0; pointer-events:none;
  transition:opacity 300ms ease; backdrop-filter:blur(6px);
}
.overlay.active { opacity:1; pointer-events:all; }

.overlay-box {
  background:var(--bg-card);
  border:1px solid var(--border-glow); border-radius:20px;
  padding:clamp(20px,4vw,40px);
  max-width:min(460px,90vw); width:100%;
  text-align:center;
  box-shadow:0 0 0 1px rgba(0,194,255,0.1),0 0 60px rgba(0,194,255,0.12),0 24px 48px rgba(0,0,0,0.6);
  display:flex; flex-direction:column; align-items:center; gap:16px;
  animation:overlay-in 400ms var(--ease-bounce) forwards;
}
@keyframes overlay-in {
  from { transform:scale(0.85) translateY(20px); opacity:0; }
  to   { transform:scale(1)    translateY(0);    opacity:1; }
}

.overlay-title { line-height:1.15; }
.glow-text {
  font-family:var(--font-game); font-size:clamp(30px,9vw,50px);
  font-weight:900; color:var(--accent-cyan);
  text-shadow:0 0 10px var(--accent-cyan),0 0 30px rgba(0,194,255,0.5),0 0 60px rgba(0,194,255,0.2);
  letter-spacing:4px; display:block;
}
.subtitle-text {
  font-family:var(--font-ui); font-size:clamp(14px,4vw,20px);
  font-weight:700; color:var(--text-primary); letter-spacing:6px;
}

.rules {
  list-style:none; text-align:left; width:100%;
  display:flex; flex-direction:column; gap:8px;
}
.rules li {
  font-size:clamp(11px,2.5vw,13px); color:var(--text-muted);
  padding:7px 12px; background:rgba(255,255,255,0.04);
  border-left:3px solid var(--accent-cyan); border-radius:0 6px 6px 0; line-height:1.5;
}
.rules li strong { color:var(--accent-cyan); }

/* 難易度セレクタ */
.difficulty-wrap {
  width:100%; display:flex; flex-direction:column; align-items:center; gap:8px;
}
.difficulty-label {
  font-family:var(--font-game); font-size:9px;
  letter-spacing:3px; color:var(--text-muted);
}
.difficulty-btns { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.difficulty-desc {
  font-family:var(--font-game); font-size:11px;
  color:var(--text-muted); letter-spacing:1px;
  min-height:1.4em;
  transition:color 200ms ease;
}

/* リザルト */
.result-title {
  font-family:var(--font-game); font-size:clamp(20px,6vw,32px);
  font-weight:900; color:var(--text-primary);
  letter-spacing:4px; text-shadow:0 0 20px rgba(255,255,255,0.2);
}
.result-diff-badge {
  font-family:var(--font-game); font-size:10px; letter-spacing:3px;
  padding:3px 12px; border-radius:20px; background:rgba(0,194,255,0.15);
  border:1px solid rgba(0,194,255,0.3); color:var(--accent-cyan);
  min-height:1em;
}
.result-score-wrap { display:flex; flex-direction:column; align-items:center; gap:2px; }
.result-label { font-family:var(--font-game); font-size:9px; letter-spacing:3px; color:var(--text-muted); }
.result-score {
  font-family:var(--font-game); font-size:clamp(40px,12vw,68px);
  font-weight:900; color:var(--accent-cyan);
  text-shadow:0 0 16px var(--accent-cyan),0 0 40px rgba(0,194,255,0.4);
  line-height:1; animation:result-count 600ms var(--ease-bounce) forwards;
}
@keyframes result-count { from{transform:scale(0.5);opacity:0} to{transform:scale(1);opacity:1} }

.result-stats {
  display:flex; gap:24px; justify-content:center; flex-wrap:wrap;
}
.result-stat-item { display:flex; flex-direction:column; align-items:center; gap:2px; }
.result-stat-label { font-family:var(--font-game); font-size:8px; letter-spacing:2px; color:var(--text-muted); }
.result-stat-value {
  font-family:var(--font-game); font-size:clamp(18px,5vw,28px);
  font-weight:700; color:var(--color-yellow);
  text-shadow:0 0 10px rgba(255,214,0,0.5);
}

.new-record {
  font-family:var(--font-game); font-size:clamp(12px,3vw,15px);
  font-weight:900; color:var(--color-yellow); letter-spacing:3px;
  text-shadow:0 0 12px var(--color-yellow);
  animation:record-flash 0.5s ease-in-out infinite alternate;
}
.new-record.hidden { display:none; }
@keyframes record-flash { from{opacity:1} to{opacity:0.5} }

.result-buttons { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }

/* ── Combo Pop ─────────────────────────────────────────── */
.combo-pop {
  position:absolute;
  font-family:var(--font-game); font-weight:900;
  font-size:clamp(18px,4vw,28px);
  pointer-events:none; z-index:201; opacity:0;
  text-align:center; white-space:nowrap;
  filter:drop-shadow(0 0 8px currentColor);
}
.combo-pop.animate {
  animation:combo-fly 800ms ease-out forwards;
}
@keyframes combo-fly {
  0%  { transform:translateY(0)    scale(0.7); opacity:1; }
  30% { transform:translateY(-20px) scale(1.3); opacity:1; }
  100%{ transform:translateY(-70px) scale(0.9); opacity:0; }
}

/* ── Score Pop ─────────────────────────────────────────── */
.score-pop {
  position:absolute;
  font-family:var(--font-game); font-weight:900; font-size:20px;
  color:#fff; text-shadow:0 0 8px rgba(0,194,255,0.8);
  pointer-events:none; z-index:200; opacity:0;
}
.score-pop.animate { animation:score-fly 700ms ease-out forwards; }
@keyframes score-fly {
  0%  { transform:translateY(0)    scale(1);   opacity:1; }
  60% { transform:translateY(-40px) scale(1.2); opacity:1; }
  100%{ transform:translateY(-80px) scale(0.8); opacity:0; }
}

/* ── Responsive ────────────────────────────────────────── */
/* グリッドは全デバイス共通 6列×7行固定のため、
   デバイス別のグリッド列数分岐は不要。
   HUD・余白など純粋なUI調整のみ行う。          */

/* 小画面：HUDを詰める */
@media (max-width:479px) {
  .hud-block { min-width:44px; padding:2px 7px; }
}

/* 低い画面（横持ち等）：ヘッダー・フッターを縮小 */
@media (max-height:600px) {
  #header { padding:5px 12px; }
  #footer { padding:5px 12px 7px; }
  #chain-bar { min-height:32px; padding:3px 10px; }
  .hud-value { font-size:14px; }
}

/* ── Accessibility ─────────────────────────────────────── */
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:1ms !important; transition-duration:1ms !important; }
}
.block:focus-visible { outline:3px solid var(--accent-cyan); outline-offset:2px; }

/* ドラッグ中カーソル */
body.dragging #game-board,
body.dragging #game-board .block { cursor:grabbing; }

/* ── Shuffle Banner ────────────────────────────────────── */
#shuffle-banner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  background: linear-gradient(135deg, rgba(192,77,255,0.95), rgba(100,20,160,0.95));
  color: #fff;
  font-family: var(--font-game);
  font-size: clamp(18px, 5vw, 26px);
  font-weight: 900;
  letter-spacing: 4px;
  padding: 14px 32px;
  border-radius: 14px;
  border: 2px solid rgba(192,77,255,0.8);
  box-shadow: 0 0 30px rgba(192,77,255,0.6), 0 8px 24px rgba(0,0,0,0.5);
  z-index: 150;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}
#shuffle-banner.banner-show {
  animation: shuffle-banner-anim 1.8s ease-out forwards;
}
@keyframes shuffle-banner-anim {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  15%  { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  30%  { opacity: 1; transform: translate(-50%, -50%) scale(1.0); }
  70%  { opacity: 1; transform: translate(-50%, -50%) scale(1.0); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
}

/* ============================================================
   v1.4.0 追加スタイル — ランキング / 設定 / 名前入力
   ============================================================ */

/* ── タイトル画面：プレイヤー名表示 ──────────────────────── */
.player-nameplate {
  display: flex; align-items: center; gap: 8px;
  background: rgba(0,194,255,0.08);
  border: 1px solid rgba(0,194,255,0.25);
  border-radius: 8px; padding: 5px 14px;
  width: 100%; justify-content: center;
}
.nameplate-label {
  font-family: var(--font-game); font-size: 9px;
  letter-spacing: 3px; color: var(--text-muted);
}
.nameplate-value {
  font-family: var(--font-game); font-size: clamp(13px,3vw,16px);
  font-weight: 700; color: var(--accent-cyan);
  letter-spacing: 2px;
}

/* ── タイトルアクションボタン群 ───────────────────────────── */
.title-actions {
  display: flex; flex-direction: column;
  align-items: center; gap: 10px; width: 100%;
}
.title-sub-btns {
  display: flex; gap: 10px;
}
.btn-icon {
  background: rgba(255,255,255,0.06);
  color: var(--text-muted);
  border: 1px solid rgba(255,255,255,0.15);
  padding: 8px 18px;
  font-family: var(--font-game); font-size: clamp(10px,2vw,12px);
  letter-spacing: 2px; border-radius: 8px;
  transition: all 150ms ease;
}
.btn-icon:hover {
  background: rgba(255,255,255,0.12);
  color: var(--text-primary);
  border-color: rgba(255,255,255,0.3);
}

/* ── 名前入力 ─────────────────────────────────────────────── */
.setup-section {
  display: flex; flex-direction: column;
  align-items: center; gap: 6px; width: 100%;
}
.setup-label {
  font-family: var(--font-game); font-size: 9px;
  letter-spacing: 3px; color: var(--text-muted);
  align-self: flex-start;
}
.name-input {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(0,194,255,0.35);
  border-radius: 8px;
  padding: 10px 14px;
  font-family: var(--font-game); font-size: clamp(14px,3vw,18px);
  font-weight: 700; color: var(--text-primary);
  letter-spacing: 2px;
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
  text-transform: uppercase;
}
.name-input::placeholder { color: var(--text-muted); }
.name-input:focus {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 10px rgba(0,194,255,0.25);
}
.name-hint {
  font-size: 10px; color: var(--text-muted);
  letter-spacing: 0.5px; line-height: 1.5;
  align-self: flex-start;
}
.name-error {
  font-family: var(--font-game); font-size: 10px;
  color: var(--color-red); letter-spacing: 1px;
  min-height: 1.2em; align-self: flex-start;
}

/* ── 設定画面 ─────────────────────────────────────────────── */
.settings-title {
  font-family: var(--font-game); font-size: clamp(16px,4vw,22px);
  font-weight: 900; color: var(--text-primary);
  letter-spacing: 3px;
}
.settings-buttons {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
}

/* ── ランキング画面 ────────────────────────────────────────── */
.overlay-box-wide {
  max-width: min(520px, 94vw);
}
.ranking-header {
  display: flex; flex-direction: column;
  align-items: center; gap: 10px; width: 100%;
}
.ranking-title {
  font-family: var(--font-game); font-size: clamp(18px,5vw,24px);
  font-weight: 900; color: var(--color-yellow);
  letter-spacing: 3px;
  text-shadow: 0 0 12px rgba(255,214,0,0.5);
}
.ranking-diff-tabs {
  display: flex; gap: 6px;
}
.btn-diff-tab {
  background: rgba(255,255,255,0.06); color: var(--text-muted);
  border: 1px solid rgba(255,255,255,0.15);
  padding: 5px 14px; font-size: clamp(9px,2vw,11px);
  font-family: var(--font-game); letter-spacing: 2px;
  border-radius: 6px; cursor: pointer;
  transition: all 150ms ease;
}
.btn-diff-tab:hover { background: rgba(255,255,255,0.1); color: var(--text-primary); }
.btn-diff-tab.active {
  background: linear-gradient(135deg,#0090c4,#0060a0);
  color: #fff; border-color: rgba(0,194,255,0.5);
  box-shadow: 0 0 10px rgba(0,194,255,0.3);
}

/* ランキングリスト */
.ranking-list {
  width: 100%;
  display: flex; flex-direction: column; gap: 4px;
  max-height: 340px; overflow-y: auto;
  padding-right: 4px;
}
.ranking-list::-webkit-scrollbar { width: 3px; }
.ranking-list::-webkit-scrollbar-thumb { background: var(--border-glow); border-radius: 2px; }

/* ヘッダー行 */
.ranking-row-header {
  display: grid;
  grid-template-columns: 28px 1fr 90px 72px;
  gap: 6px; align-items: center;
  padding: 4px 8px;
  font-family: var(--font-game); font-size: 8px;
  letter-spacing: 2px; color: var(--text-muted);
  border-bottom: 1px solid var(--border-dim);
}

/* データ行 */
.ranking-row {
  display: grid;
  grid-template-columns: 28px 1fr 90px 72px;
  gap: 6px; align-items: center;
  padding: 7px 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid transparent;
  border-radius: 6px;
  transition: background 150ms ease;
}
.ranking-row:hover { background: rgba(255,255,255,0.06); }
.ranking-row.is-new {
  background: rgba(0,194,255,0.08);
  border-color: rgba(0,194,255,0.25);
}
.ranking-row.rank-1 { background: rgba(255,214,0,0.08); border-color: rgba(255,214,0,0.25); }
.ranking-row.rank-2 { background: rgba(200,200,200,0.06); border-color: rgba(200,200,200,0.2); }
.ranking-row.rank-3 { background: rgba(205,127,50,0.08); border-color: rgba(205,127,50,0.25); }

.ranking-rank {
  font-family: var(--font-game); font-size: clamp(11px,2.5vw,14px);
  font-weight: 900; text-align: center;
  color: var(--text-muted);
}
.ranking-row.rank-1 .ranking-rank { color: var(--color-yellow); text-shadow: 0 0 8px rgba(255,214,0,0.5); }
.ranking-row.rank-2 .ranking-rank { color: #ccc; }
.ranking-row.rank-3 .ranking-rank { color: #cd7f32; }

.ranking-player {
  display: flex; flex-direction: column; gap: 1px; overflow: hidden;
}
.ranking-name {
  font-family: var(--font-game); font-size: clamp(10px,2.5vw,13px);
  font-weight: 700; color: var(--text-primary);
  letter-spacing: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ranking-date {
  font-size: 9px; color: var(--text-muted); letter-spacing: 0.5px;
}

.ranking-score {
  font-family: var(--font-game); font-size: clamp(12px,3vw,16px);
  font-weight: 900; color: var(--accent-cyan);
  text-align: right;
}
.ranking-combo {
  font-family: var(--font-game); font-size: clamp(10px,2.5vw,12px);
  font-weight: 700; color: var(--color-yellow);
  text-align: right;
}

.ranking-empty {
  text-align: center; padding: 30px 0;
  font-family: var(--font-game); font-size: 12px;
  color: var(--text-muted); letter-spacing: 2px;
}

/* ── リザルト：ランクイン通知 ─────────────────────────────── */
.rank-in {
  font-family: var(--font-game); font-size: clamp(11px,2.5vw,13px);
  font-weight: 700; color: var(--accent-cyan);
  letter-spacing: 2px;
  background: rgba(0,194,255,0.1);
  border: 1px solid rgba(0,194,255,0.3);
  border-radius: 20px; padding: 4px 16px;
}
.rank-in.hidden { display: none; }

/* ============================================================
   v1.5.0 追加スタイル — ワイルドカードブロック
   ============================================================ */

/* ワイルドカードブロック本体：レインボーグラデーション */
.block[data-color="wild"],
.block.wild {
  background: linear-gradient(
    135deg,
    #FF3B5C 0%,
    #FF9500 17%,
    #FFD600 34%,
    #00E87A 51%,
    #00C2FF 68%,
    #C04DFF 85%,
    #FF3B5C 100%
  ) !important;
  animation: wild-hue 2s linear infinite;
  box-shadow:
    0 0 12px rgba(255,255,255,0.5),
    0 0 24px rgba(192,77,255,0.4) !important;
  border: 2px solid rgba(255,255,255,0.7) !important;
}

/* 疑似要素（ハイライト・シャドウ）を無効化してグラデーションを見せる */
.block.wild::before,
.block.wild::after { display: none !important; }

/* hue-rotate で虹色を回転させる */
@keyframes wild-hue {
  0%   { filter: hue-rotate(0deg)   brightness(1.1); }
  100% { filter: hue-rotate(360deg) brightness(1.1); }
}

/* ★マーク */
.block.wild .wild-star {
  font-size: 22px;
  line-height: 1;
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.9))
          drop-shadow(0 0 8px rgba(255,255,255,0.6));
  pointer-events: none;
  z-index: 2;
  position: relative;
}

/* 選択状態のワイルド */
.block.wild.selected {
  filter: hue-rotate(0deg) brightness(1.35);
  animation: wild-hue-selected 2s linear infinite;
}
@keyframes wild-hue-selected {
  0%   { filter: hue-rotate(0deg)   brightness(1.35); }
  100% { filter: hue-rotate(360deg) brightness(1.35); }
}

/* ワイルドカード出現フラッシュアニメーション */
.block.wild-flash {
  animation: wild-hue 2s linear infinite, wild-spawn 0.5s ease-out;
}

@keyframes wild-spawn {
  0%   { transform: scale(0.5); opacity: 0; }
  60%  { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1.0); opacity: 1; }
}

/* ワイルドカードが reachable 状態のとき */
.block.wild.reachable {
  box-shadow:
    0 0 18px rgba(255,255,255,0.8),
    0 0 32px rgba(255,255,255,0.4) !important;
}