:root {
  --bg: #fbf6ee;
  --bg-2: #f3e9da;
  --fg: #2b2622;
  --muted: #7a6f66;
  --red: #d90429;
  --red-soft: #ffe0e6;
  --blue: #3d7cc9;
  --blue-soft: #e0efff;
  --gold: #e9b949;
  --board: #5c8a4a;
  --board-dark: #3f6b33;
  --cell-line: rgba(255, 255, 255, 0.16);
  --radius: 14px;
  --shadow: 0 6px 20px rgba(60, 40, 20, 0.12);
  --flip-ms: 520ms;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(circle at 15% 10%, #fff 0, transparent 40%),
    radial-gradient(circle at 90% 90%, var(--bg-2) 0, transparent 50%),
    var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

button {
  font: inherit;
  color: inherit;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.app {
  max-width: 480px;
  margin: 0 auto;
  padding: max(12px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
}

/* ---------- 画面切り替え ---------- */

.screen {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  animation: screen-in 280ms ease-out;
}

.screen[data-active] {
  display: flex;
}

@keyframes screen-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* ---------- ボタン ---------- */

.btn {
  min-height: 48px;
  padding: 0 22px;
  border: none;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

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

.btn-primary {
  width: 100%;
  background: linear-gradient(135deg, #e63956, #b5179e 55%, #3d7cc9);
  color: #fff;
  box-shadow: 0 6px 16px rgba(181, 23, 158, 0.3);
  font-size: 1.1rem;
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 0 0 1.5px rgba(43, 38, 34, 0.15);
}

.btn-danger {
  background: #fff;
  color: var(--red);
  box-shadow: inset 0 0 0 1.5px var(--red);
}

/* ---------- タイトル ---------- */

.logo {
  text-align: center;
  margin-top: 8px;
}

.logo-flowers {
  display: flex;
  justify-content: center;
  gap: 4px;
  height: 84px;
}

.logo-flower {
  width: 84px;
  height: 84px;
  animation: sway 4s ease-in-out 2;
}

.logo-flower:nth-child(2) {
  width: 64px;
  margin-top: 18px;
  animation-delay: -2s;
}

@keyframes sway {
  50% {
    transform: rotate(12deg) scale(1.04);
  }
}

.logo h1 {
  margin: 6px 0 0;
  font-size: clamp(1.9rem, 9vw, 2.6rem);
  letter-spacing: 0.02em;
  background: linear-gradient(90deg, var(--red), #b5179e, var(--blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.subtitle {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 20px;
  box-shadow: var(--shadow);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field[hidden] {
  display: none;
}

.field-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
}

.segmented {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--bg-2);
  border-radius: 12px;
}

.segmented button {
  flex: 1;
  min-height: 42px;
  border: none;
  border-radius: 9px;
  background: transparent;
  font-size: 0.9rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: background 150ms ease, box-shadow 150ms ease;
}

.segmented button[aria-pressed="true"] {
  background: #fff;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(60, 40, 20, 0.15);
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

.dot-red {
  background: radial-gradient(circle at 40% 35%, #ff8fa3, var(--red));
  box-shadow: 0 0 0 1.5px var(--gold);
}

.dot-blue {
  background: radial-gradient(circle at 40% 35%, #fff, #7fb2e5);
}

.title-footer {
  display: flex;
  gap: 10px;
  width: 100%;
}

.title-footer .btn {
  flex: 1;
  padding: 0 8px;
}

.points-line,
.storage-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.points-line strong {
  color: #b5179e;
  font-size: 1.15rem;
}

/* ---------- 対局 ---------- */

.scoreboard {
  display: flex;
  gap: 10px;
  width: 100%;
}

.player {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 0 0 2px transparent;
  transition: box-shadow 200ms ease, background 200ms ease, transform 200ms ease;
}

.player[data-player="1"].is-turn {
  background: var(--red-soft);
  box-shadow: inset 0 0 0 2px var(--red), 0 4px 14px rgba(217, 4, 41, 0.2);
  transform: translateY(-2px);
}

.player[data-player="2"].is-turn {
  background: var(--blue-soft);
  box-shadow: inset 0 0 0 2px var(--blue), 0 4px 14px rgba(61, 124, 201, 0.2);
  transform: translateY(-2px);
}

.chip {
  width: 40px;
  height: 40px;
  flex: none;
}

.player-info {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.player-name {
  font-size: 0.78rem;
  color: var(--muted);
}

.player-count {
  font-size: 1.6rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.player-count.bump {
  animation: bump 300ms ease-out;
}

@keyframes bump {
  40% {
    transform: scale(1.3);
  }
}

.board-wrap {
  position: relative;
  width: min(100%, 440px);
  aspect-ratio: 1;
}

.board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: 100%;
  height: 100%;
  padding: 6px;
  gap: 2px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.18), transparent 60%),
    linear-gradient(160deg, var(--board), var(--board-dark));
  box-shadow:
    0 10px 28px rgba(40, 60, 30, 0.35),
    inset 0 0 0 3px rgba(255, 255, 255, 0.12);
  touch-action: manipulation;
}

.cell {
  position: relative;
  border: none;
  padding: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px var(--cell-line);
  perspective: 400px;
  cursor: default;
}

.cell.is-hint {
  cursor: pointer;
}

.cell.is-hint::after {
  content: "";
  position: absolute;
  inset: 38%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  animation: hint-in 300ms ease-out;
}

.cell.is-last {
  box-shadow:
    inset 0 0 0 1px var(--cell-line),
    inset 0 0 0 2px rgba(255, 230, 150, 0.7);
}

@keyframes hint-in {
  from {
    transform: scale(0);
    opacity: 0;
  }
}

/* 花(ディスク)。表=赤、裏=青。is-blue で 180 度回転 */
.disc {
  position: absolute;
  inset: 4%;
  transform-style: preserve-3d;
  transition: transform var(--flip-ms) cubic-bezier(0.45, 0.05, 0.3, 1.25);
}

.disc.is-blue {
  transform: rotateY(180deg);
}

.face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.face svg {
  width: 100%;
  height: 100%;
  display: block;
}

.face-back {
  transform: rotateY(180deg);
}

.disc-pop {
  position: absolute;
  inset: 0;
  /* 花(3D 回転する要素)はタップを受けない。タップ先を常にマスのボタンにする。
     Safari では 3D 変形した要素の当たり判定が不安定になることがあるため */
  pointer-events: none;
}

.disc-pop.is-flipping {
  animation: flip-pop var(--flip-ms) ease-out;
}

@keyframes flip-pop {
  45% {
    transform: scale(1.28) translateY(-8%);
  }
}

.disc-pop.bloom-red {
  animation: bloom-red 700ms cubic-bezier(0.2, 0.9, 0.3, 1.3) both;
}

.disc-pop.bloom-blue {
  animation: bloom-blue 620ms cubic-bezier(0.3, 1.4, 0.5, 1) both;
}

@keyframes bloom-red {
  0% {
    transform: scale(0) rotate(-160deg);
    opacity: 0;
  }
  60% {
    transform: scale(1.22) rotate(12deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0);
  }
}

@keyframes bloom-blue {
  0% {
    transform: scale(0.2) translateY(-30%);
    opacity: 0;
  }
  55% {
    transform: scale(1.12) translateY(0);
    opacity: 1;
  }
  75% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

/* ---------- エフェクト ---------- */

.fx-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}

.particle {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--size, 10px);
  height: var(--size, 10px);
  margin: calc(var(--size, 10px) / -2) 0 0 calc(var(--size, 10px) / -2);
  animation: particle var(--dur, 900ms) cubic-bezier(0.15, 0.7, 0.4, 1) forwards;
  will-change: transform, opacity;
}

.particle.petal-red {
  border-radius: 80% 0 80% 0;
  background: linear-gradient(135deg, #ff8fa3, #c9184a);
}

.particle.petal-blue {
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, #9cc7f0);
}

.particle.sparkle {
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0, #fff3b0 25%, #ffd166 45%, transparent 70%);
}

@keyframes particle {
  0% {
    transform: translate(var(--x0), var(--y0)) rotate(0) scale(0.4);
    opacity: 1;
  }
  100% {
    transform: translate(var(--x1), var(--y1)) rotate(var(--rot)) scale(1);
    opacity: 0;
  }
}

.ripple {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--size);
  height: var(--size);
  margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
  border-radius: 50%;
  border: 3px solid var(--ripple-color);
  transform: translate(var(--x0), var(--y0)) scale(0.2);
  animation: ripple 700ms ease-out forwards;
}

@keyframes ripple {
  to {
    transform: translate(var(--x0), var(--y0)) scale(1);
    opacity: 0;
  }
}

.board-wrap.is-shake {
  animation: shake 260ms ease;
}

@keyframes shake {
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}

.status {
  min-height: 1.5em;
  margin: 0;
  font-weight: 700;
  color: var(--muted);
}

.game-footer {
  display: flex;
  justify-content: center;
}

/* ---------- 記録 ---------- */

#screen-records h2 {
  margin: 8px 0 0;
}

#screen-records h3 {
  align-self: flex-start;
  margin: 8px 0 0;
  font-size: 1rem;
}

.points-big {
  margin: 0;
  font-size: 1.1rem;
}

.points-big strong {
  color: #b5179e;
  font-size: 1.6rem;
}

.records-table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(255, 255, 255, 0.75);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  font-size: 0.9rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.records-table th,
.records-table td {
  padding: 10px 4px;
}

.records-table th {
  background: var(--bg-2);
  font-size: 0.75rem;
  color: var(--muted);
}

.records-table tr + tr td {
  border-top: 1px solid var(--bg-2);
}

.records-footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-top: 8px;
}

/* ---------- オーバーレイ ---------- */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(43, 38, 34, 0.45);
  animation: fade-in 200ms ease-out;
}

.overlay[hidden] {
  display: none;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

.dialog {
  width: min(100%, 360px);
  padding: 22px 18px 18px;
  border-radius: 22px;
  background: var(--bg);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
  text-align: center;
  animation: pop-in 320ms cubic-bezier(0.2, 1.3, 0.4, 1);
}

@keyframes pop-in {
  from {
    transform: scale(0.85);
    opacity: 0;
  }
}

.dialog-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.dialog-actions .btn {
  flex: 1;
  width: auto;
  padding: 0 12px;
}

.confirm-message {
  margin: 0;
  line-height: 1.6;
}

.result-flower {
  width: 96px;
  height: 96px;
  animation: sway 3s ease-in-out 2;
}

.result h2 {
  margin: 4px 0;
  font-size: 1.8rem;
}

.result-count {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
}

.result-score {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.6;
}

.result-score .new-best {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffd166, #ffb3c1);
  color: var(--fg);
  font-weight: 800;
}

.handoff {
  padding: 0;
  background: rgba(43, 38, 34, 0.7);
}

.handoff[data-player="1"] {
  background: radial-gradient(circle, rgba(217, 4, 41, 0.75), rgba(90, 0, 20, 0.92));
}

.handoff[data-player="2"] {
  background: radial-gradient(circle, rgba(91, 155, 213, 0.8), rgba(20, 50, 90, 0.92));
}

.handoff-inner {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
}

.handoff-flower {
  width: 120px;
  height: 120px;
  animation: sway 3s ease-in-out 2;
}

.handoff-title {
  font-size: 1.8rem;
  font-weight: 800;
}

.handoff-sub {
  opacity: 0.85;
}

.toast {
  position: fixed;
  left: 50%;
  top: 40%;
  z-index: 20;
  transform: translate(-50%, -50%);
  padding: 12px 24px;
  border-radius: 999px;
  background: rgba(43, 38, 34, 0.85);
  color: #fff;
  font-weight: 700;
  animation: pop-in 260ms ease-out;
}

.toast[hidden] {
  display: none;
}

/* ---------- 動きを減らす設定 ---------- */

@media (prefers-reduced-motion: reduce) {
  :root {
    --flip-ms: 1ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }

  .fx-layer {
    display: none;
  }
}

/* ---------- 盤面テーマ(花の庭) ---------- */

body[data-board="board-night"] {
  --board: #2b3f6e;
  --board-dark: #111c38;
  --cell-line: rgba(200, 220, 255, 0.18);
}

body[data-board="board-night"] .board {
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff, transparent),
    radial-gradient(1px 1px at 72% 12%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 88% 64%, #fff, transparent),
    radial-gradient(1px 1px at 34% 82%, #fff, transparent),
    radial-gradient(1px 1px at 55% 45%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(circle at 80% 15%, rgba(255, 240, 200, 0.25), transparent 30%),
    linear-gradient(160deg, var(--board), var(--board-dark));
}

body[data-board="board-sakura"] {
  --board: #f4c2d0;
  --board-dark: #d9899f;
  --cell-line: rgba(255, 255, 255, 0.45);
}

/* ---------- 花の庭 ---------- */

#screen-garden h2 {
  margin: 8px 0 0;
}

.garden-lead {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.garden-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.garden-category h3 {
  margin: 0 0 8px;
  font-size: 1rem;
}

.garden-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.garden-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.75);
  box-shadow: var(--shadow);
  text-align: center;
}

.garden-item.is-selected {
  box-shadow: inset 0 0 0 2px #b5179e, var(--shadow);
}

.garden-item.is-locked .garden-preview {
  filter: grayscale(0.85) opacity(0.6);
}

.garden-preview {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
}

.garden-preview svg {
  width: 100%;
  height: 100%;
}

.garden-preview .swatch {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.swatch[data-id="board-lawn"] {
  background: linear-gradient(160deg, #5c8a4a, #3f6b33);
}

.swatch[data-id="board-night"] {
  background:
    radial-gradient(1.5px 1.5px at 30% 30%, #fff, transparent),
    radial-gradient(1px 1px at 70% 60%, #fff, transparent),
    linear-gradient(160deg, #2b3f6e, #111c38);
}

.swatch[data-id="board-sakura"] {
  background: linear-gradient(160deg, #f4c2d0, #d9899f);
}

.garden-preview .fx-icon {
  font-size: 2rem;
}

.garden-name {
  font-weight: 700;
  font-size: 0.9rem;
}

.garden-item .btn {
  width: 100%;
  min-height: 36px;
  padding: 0 6px;
  font-size: 0.8rem;
}

.btn-unlock {
  background: linear-gradient(135deg, #e63956, #b5179e);
  color: #fff;
}

.btn-unlock:disabled {
  background: var(--bg-2);
  color: var(--muted);
}

.btn-selected {
  background: transparent;
  color: #b5179e;
  cursor: default;
}

#screen-garden > .btn-primary {
  margin-top: 8px;
}

/* ---------- デバッグ補助 ---------- */

.error-banner {
  position: fixed;
  left: 8px;
  right: 8px;
  bottom: max(8px, env(safe-area-inset-bottom));
  z-index: 50;
  padding: 10px 12px;
  border: none;
  border-radius: 12px;
  background: #7a0019;
  color: #fff;
  font-size: 0.75rem;
  line-height: 1.5;
  text-align: left;
  white-space: pre-wrap;
  word-break: break-all;
}

.error-banner[hidden] {
  display: none;
}

.debug-panel {
  position: fixed;
  top: 4px;
  right: 4px;
  z-index: 40;
  margin: 0;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.7);
  color: #b8f5b0;
  font-size: 10px;
  line-height: 1.4;
  pointer-events: none;
  max-width: 60vw;
  white-space: pre-wrap;
  word-break: break-all;
}