/* ============================================================
   Gunzi — game-specific components (Wooden idiom)
   Board, hex cells, triangular pieces, status row, controls.
   Adapted from the approved mock; tokens from styles.css.
   ============================================================ */

.app {
  height: 100dvh;
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  padding:
    env(safe-area-inset-top) var(--space-5)
    calc(env(safe-area-inset-bottom) + var(--space-5));
  gap: var(--space-5);
}

/* ── Top bar: title + menu ─────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-5);
}
.brand { display: flex; align-items: center; gap: var(--space-3); }
.brand__mark {
  width: 30px; height: 30px; flex: none;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25));
}
.brand__name {
  font-size: 1.15rem; font-weight: var(--fw-bold);
  color: var(--color-brown-deep); letter-spacing: .02em; line-height: 1;
}
.brand__sub {
  font-size: .62rem; font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--letter-caps); color: #8a623f;
}
.icon-btn {
  width: 44px; height: 44px; flex: none; border: none; cursor: pointer;
  border-radius: var(--radius-lg);
  background: var(--menu-panel-highlight);
  color: var(--color-brown-strong);
  display: grid; place-items: center;
  transition: background .15s;
}
.icon-btn:active { background: var(--menu-button-active); }
.icon-btn svg { width: 22px; height: 22px; }

/* ── Variant toggle (SlowGo / GoGo) — PillBtn tray ─────────── */
.modetray {
  display: flex; gap: var(--space-1); padding: var(--space-1);
  background: var(--menu-panel-highlight);
  border-radius: 999px; align-self: center;
}
.modetray button {
  border: none; cursor: pointer; font-family: inherit;
  font-size: var(--font-size-sm); font-weight: var(--fw-semibold);
  color: var(--color-brown-muted);
  padding: var(--space-2) var(--space-6); border-radius: 999px; background: transparent;
  letter-spacing: .01em; transition: .15s; min-height: 44px;
}
.modetray button[aria-pressed="true"] {
  background: var(--color-parchment-card);
  color: var(--color-brown-deep);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}

/* ── Status row ────────────────────────────────────────────── */
.status {
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--color-parchment-card);
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-5);
  box-shadow: var(--shadow-card);
}
.turn-dot {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, #7a2230, #3a0d15);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, .35), 0 1px 2px rgba(0, 0, 0, .4);
}
.turn-dot--white {
  background: radial-gradient(circle at 35% 30%, #fff, #c7ccd2);
}
.status__txt { font-size: var(--font-size-lg); color: var(--color-brown-strong); }
.status__txt b { font-weight: var(--fw-bold); color: var(--color-brown-deep); }
.status__hint { margin-left: auto; font-size: var(--font-size-xs); color: var(--color-brown-muted); }

/* winner state — celebratory pulse */
.status.is-won { background: linear-gradient(135deg, #fffdf6, #f3e7c6); }
.status.is-won .status__txt b { color: var(--color-brown-deep); }
.status.is-won .turn-dot { animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.25); }
}

/* ── Board ─────────────────────────────────────────────────── */
.board-wrap { flex: 1; display: grid; place-items: center; min-height: 0; }
.board {
  position: relative;
  border-radius: 18px;
  padding: 16px;
  background:
    repeating-linear-gradient(90deg,
      rgba(0, 0, 0, .16) 0 1px, transparent 1px 22px),
    linear-gradient(180deg, #5b3d24, #3d2817 60%, #2c1a0e);
  box-shadow:
    inset 0 0 0 3px rgba(255, 255, 255, .10),
    inset 0 0 0 9px rgba(0, 0, 0, .22),
    0 14px 34px rgba(0, 0, 0, .45);
}
.board::after {
  content: ""; position: absolute; inset: 11px;
  border: 2px solid rgba(212, 175, 55, .45);
  border-radius: 13px; pointer-events: none;
}
.board__brand {
  position: absolute; right: 14px; bottom: 9px; font-size: 8.5px; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(212, 175, 55, .6); font-weight: var(--fw-bold);
}
.grid { position: relative; }

/* one hexagon cell (flat-top) */
.hex {
  position: absolute;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  background:
    radial-gradient(closest-side at 50% 50%,
      transparent 0 18%, rgba(141, 94, 45, .16) 18% 20%, transparent 20% 33%,
      rgba(141, 94, 45, .13) 33% 35%, transparent 35% 50%,
      rgba(141, 94, 45, .10) 50% 52%, transparent 52% 70%,
      rgba(141, 94, 45, .08) 70% 72%, transparent 72%),
    linear-gradient(150deg, #efd7a8, #e3c48d 55%, #d4ad74);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .45), inset 0 -2px 3px rgba(91, 61, 36, .4);
  display: grid; place-items: center;
  touch-action: manipulation;
}
.hex__dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(91, 61, 36, .45); }

.hex.own { cursor: pointer; }
.hex.sel {
  background:
    radial-gradient(closest-side at 50% 50%, rgba(212, 175, 55, .0) 60%, rgba(212, 175, 55, .35) 100%),
    linear-gradient(150deg, #f3e2b6, #e7cf9a 55%, #d8b87c);
  box-shadow: inset 0 0 0 3px var(--color-gold), inset 0 1px 1px rgba(255, 255, 255, .5);
}
.hex.move { cursor: pointer; }
.hex.move .ring {
  width: 42%; height: 42%; border-radius: 50%;
  background: radial-gradient(circle, rgba(46, 139, 87, .0) 40%, rgba(46, 139, 87, .85) 42% 60%, rgba(46, 139, 87, 0) 62%);
}
.hex.promo {
  box-shadow:
    inset 0 0 0 2px rgba(212, 175, 55, .6),
    inset 0 1px 1px rgba(255, 255, 255, .45),
    inset 0 -2px 3px rgba(91, 61, 36, .4);
}

/* Established GoGo: bright yellow oval ring around the piece that has
   reached one of its own promotion corners (see attached reference). */
.gogo-ring {
  position: absolute;
  left: 50%; top: 50%;
  width: 76%; height: 56%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 3px solid #ffd400;
  box-shadow: 0 0 6px rgba(255, 212, 0, .65), inset 0 0 4px rgba(255, 212, 0, .5);
  pointer-events: none;
}

/* AI move telegraph: the piece about to move, then its destination. */
.hex.ai-mark {
  box-shadow:
    inset 0 0 0 3px var(--color-gold),
    inset 0 1px 1px rgba(255, 255, 255, .5);
  animation: ai-pulse .7s ease-in-out infinite;
}
.hex.ai-from {
  box-shadow:
    inset 0 0 0 2px rgba(212, 175, 55, .55),
    inset 0 1px 1px rgba(255, 255, 255, .45);
}
@keyframes ai-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.18); }
}

/* triangular pieces */
.piece { width: 74%; height: 74%; display: block; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .4)); }

/* ── Bottom action ─────────────────────────────────────────── */
.actionbar { display: flex; align-items: center; gap: var(--space-4); }
.btn-primary {
  flex: 1; border: none; cursor: pointer; font-family: inherit;
  font-size: var(--font-size-base); font-weight: var(--fw-semibold); color: #fff;
  padding: var(--space-5); border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #6c4b2b, #5b3d24);
  box-shadow: var(--shadow-button);
  display: flex; align-items: center; justify-content: center; gap: var(--space-3);
  min-height: 48px;
}
.btn-primary:active { transform: translateY(1px); }
.btn-ghost {
  width: 52px; height: 52px; flex: none; border: 1px solid rgba(101, 67, 33, .2); cursor: pointer;
  border-radius: var(--radius-lg); background: var(--color-parchment-card); color: var(--color-brown-strong);
  display: grid; place-items: center; box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
}
.btn-ghost:disabled { opacity: .4; cursor: default; }
.btn-ghost svg, .btn-primary svg { width: 22px; height: 22px; }

/* ── Rules bottom sheet (light Wooden modal) ───────────────── */
.sheet-scrim {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(40, 24, 12, .55);
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet-scrim[hidden] { display: none; }
.sheet {
  width: 100%; max-width: 460px;
  max-height: 82dvh;
  background: var(--color-parchment-card);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, .4);
  display: flex; flex-direction: column;
  padding: var(--space-6) var(--space-6) calc(env(safe-area-inset-bottom) + var(--space-6));
  animation: sheet-up .2s ease-out;
}
@keyframes sheet-up {
  from { transform: translateY(20px); opacity: .6; }
  to { transform: translateY(0); opacity: 1; }
}
.sheet__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-4);
}
.sheet__title {
  margin: 0; font-size: 1.25rem; font-weight: var(--fw-bold); color: var(--color-brown-deep);
}
.sheet__body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.sheet__body h3 {
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--font-size-xs); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--letter-caps); color: #8a623f;
}
.sheet__body h3:first-child { margin-top: 0; }
.sheet__body ul { margin: 0; padding-left: var(--space-7); }
.sheet__body li {
  font-size: var(--font-size-md); color: var(--color-brown-strong);
  line-height: var(--line-height-body); margin-bottom: var(--space-2);
}

/* ── Menu settings (opponent + level) ──────────────────────── */
.setting { margin-bottom: var(--space-6); }
.setting:last-child { margin-bottom: 0; }

.optiontray {
  display: flex; gap: var(--space-1); padding: var(--space-1);
  background: var(--menu-panel-highlight);
  border-radius: 999px;
}
.optiontray button {
  flex: 1; border: none; cursor: pointer; font-family: inherit;
  font-size: var(--font-size-sm); font-weight: var(--fw-semibold);
  color: var(--color-brown-muted);
  padding: var(--space-3) var(--space-2); border-radius: 999px; background: transparent;
  letter-spacing: .01em; transition: .15s; min-height: 44px;
}
.optiontray button[aria-pressed="true"] {
  background: var(--color-parchment-card);
  color: var(--color-brown-deep);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}

#levelSetting.is-disabled { opacity: .45; }
.level { display: flex; align-items: center; gap: var(--space-5); }
.level__read { display: flex; flex-direction: column; align-items: center; min-width: 76px; }
.level__num {
  font-size: var(--font-size-xl); font-weight: var(--fw-bold);
  color: var(--color-brown-deep); font-variant-numeric: tabular-nums; line-height: 1;
}
.level__label { font-size: var(--font-size-xs); color: var(--color-brown-muted); }

input[type="range"] {
  flex: 1; height: 44px; cursor: pointer;
  -webkit-appearance: none; appearance: none; background: transparent;
}
input[type="range"]:disabled { cursor: default; }
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px;
  background: rgba(101, 67, 33, .22);
}
input[type="range"]::-moz-range-track {
  height: 6px; border-radius: 999px;
  background: rgba(101, 67, 33, .22);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; margin-top: -10px; border-radius: 50%;
  background: linear-gradient(135deg, #6c4b2b, #5b3d24);
  border: 2px solid var(--color-gold);
  box-shadow: var(--shadow-button);
}
input[type="range"]::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, #6c4b2b, #5b3d24);
  border: 2px solid var(--color-gold);
  box-shadow: var(--shadow-button);
}