/* style.css — ネオン / サイバーテーマ・レスポンシブ（PC横 / スマホ縦） */

:root {
  --bg: #080812;
  --panel: rgba(20, 26, 52, 0.6);
  --panel-border: rgba(90, 140, 230, 0.25);
  --neon: #5ad1ff;
  --neon-2: #ff3bb0;
  --text: #e7ecff;
  --muted: #8a93c4;
}

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

html, body {
  height: 100%;
  background: radial-gradient(circle at 50% 0%, #10163a 0%, var(--bg) 60%);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

#app {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  height: 100vh;
  padding: 16px;
}

/* ── サイドパネル ─────────────────────────────────── */
.side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 150px;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  padding: 12px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 0 18px rgba(90, 140, 230, 0.08) inset;
}

.panel h2 {
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--neon);
  margin-bottom: 8px;
  text-shadow: 0 0 8px rgba(90, 209, 255, 0.6);
}

#hold-canvas, .next {
  display: block;
  width: 100%;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
}
.next { margin-bottom: 6px; }

.stats { display: flex; flex-direction: column; gap: 10px; }
.stat { display: flex; flex-direction: column; }
.stat .label { font-size: 10px; letter-spacing: 2px; color: var(--muted); }
.stat .value {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 10px rgba(90, 209, 255, 0.45);
}

/* ── WILDゲージ ───────────────────────────────────── */
.wild-bar {
  height: 16px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.35);
  overflow: hidden;
  border: 1px solid var(--panel-border);
}
.wild-fill {
  height: 100%;
  width: 0%;
  border-radius: 8px;
  background: linear-gradient(90deg, #19d3e6, #3bd957, #ffd23b, #ff8a3b, #ff3bb0);
  transition: width 0.25s ease;
}
.wild-fill.ready {
  animation: pulse 0.7s ease-in-out infinite;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.8);
}
@keyframes pulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.6); } }

/* ── 盤面 ─────────────────────────────────────────── */
.board-wrap {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}
#board {
  height: 92vh;
  max-height: 92vh;
  aspect-ratio: 1 / 2;
  width: auto;
  border-radius: 10px;
  border: 1px solid var(--panel-border);
  box-shadow: 0 0 40px rgba(90, 140, 230, 0.18), 0 0 0 1px rgba(0,0,0,0.4) inset;
  background: var(--bg);
}

/* ── オーバーレイ ─────────────────────────────────── */
.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  background: rgba(8, 8, 18, 0.82);
  border-radius: 10px;
  padding: 20px;
}
.overlay.hidden { display: none; }
.overlay-title {
  font-size: 26px;
  background: linear-gradient(90deg, #19d3e6, #ff3bb0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 24px rgba(255, 59, 176, 0.35);
}
.overlay-sub { color: var(--muted); font-size: 14px; }
.overlay-btn {
  margin-top: 8px;
  padding: 12px 30px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #06121a;
  background: linear-gradient(90deg, #19d3e6, #3bd957);
  border: none;
  border-radius: 30px;
  cursor: pointer;
  box-shadow: 0 0 24px rgba(25, 211, 230, 0.5);
  transition: transform 0.1s;
}
.overlay-btn:active { transform: scale(0.95); }
.help { margin-top: 12px; font-size: 11px; color: var(--muted); line-height: 1.7; }

/* ── 操作ボタン ───────────────────────────────────── */
.buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ctrl {
  padding: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  background: rgba(40, 50, 90, 0.6);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  cursor: pointer;
}
.ctrl:active { background: rgba(60, 80, 140, 0.8); }
.ctrl.active { background: linear-gradient(90deg, #19d3e6, #3bd957); color: #06121a; }

/* ── スマホ（縦）レイアウト ───────────────────────── */
@media (max-width: 720px), (orientation: portrait) {
  #app {
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    justify-content: flex-start;
  }
  .side {
    flex-direction: row;
    width: 100%;
    max-width: 480px;
    gap: 8px;
  }
  .side-left { order: 1; }
  .board-wrap { order: 2; flex: 1; min-height: 0; width: 100%; justify-content: center; }
  .side-right { order: 3; }
  #board {
    height: auto;
    max-height: 62vh;
    max-width: 100%;
  }
  .panel { flex: 1; padding: 8px; }
  .panel h2 { font-size: 10px; margin-bottom: 4px; }
  #hold-canvas { height: 60px; }
  .next { height: 44px; }
  .stats { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .stat { flex: 1 1 40%; }
  .stat .value { font-size: 16px; }
  .help { display: none; }
  .buttons { grid-template-columns: repeat(4, 1fr); }
}