/* Bagh Chaal web shell styles. Dependency-free; mobile-first; respects safe areas and reduced motion. */
:root {
  --bc-bg: #10261d;
  --bc-green: #16362a;
  --bc-green-hi: #1f4a39;
  --bc-gold: #e8b84a;
  --bc-gold-dim: #b88f33;
  --bc-cream: #f4e7c8;
  --bc-cream-dim: rgba(244, 231, 200, 0.78);
  --bc-danger: #ffb4a2;
  --kh-green: #0f3d2e;
  --kh-gold: #c9a961;
  --bc-safe-top: env(safe-area-inset-top, 0px);
  --bc-safe-right: env(safe-area-inset-right, 0px);
  --bc-safe-bottom: env(safe-area-inset-bottom, 0px);
  --bc-safe-left: env(safe-area-inset-left, 0px);
  --bc-font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, sans-serif;
  --bc-font-display: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", "Times New Roman", serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;              /* no page scroll, no horizontal scroll at 320-430 px */
  overscroll-behavior: none;
  background: var(--bc-bg);
  color: var(--bc-cream);
  font-family: var(--bc-font);
  font-size: 16px;
  line-height: 1.4;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

[hidden] { display: none !important; }

/* ---------- Game stage: fills the safe area; the notch/home-indicator area shows the green body. ---------- */
#bc-stage {
  position: fixed;
  top: var(--bc-safe-top);
  right: var(--bc-safe-right);
  bottom: var(--bc-safe-bottom);
  left: var(--bc-safe-left);
  margin: 0;
  overflow: hidden;
}

#unity-canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--bc-bg);
  touch-action: none;            /* no browser pan / pinch-zoom / double-tap zoom on the board */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  outline: none;
}
#unity-canvas:focus-visible { outline: 3px solid var(--bc-gold); outline-offset: -3px; }

/* ---------- Loading shell ---------- */
.bc-loading {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--bc-safe-top) + 16px) calc(var(--bc-safe-right) + 16px) calc(var(--bc-safe-bottom) + 16px) calc(var(--bc-safe-left) + 16px);
  background:
    radial-gradient(ellipse at 50% 40%, #17533f 0%, var(--kh-green) 48%, #071d15 100%);
  text-align: center;
  opacity: 1;
  transition: opacity 400ms ease;
  overflow-y: auto;
}
.bc-loading.is-leaving { opacity: 0; pointer-events: none; }

.bc-loading__inner { width: 100%; max-width: 26rem; }

/* Khelau publisher lockup (brand kit: gold #C9A961 on green #0F3D2E). */
.bc-brand {
  display: block;
  width: clamp(150px, 46vw, 220px);
  height: auto;
  margin: 0 auto;
  animation: bc-rise 900ms ease-out both;
}
.bc-presents {
  margin: 6px 0 18px;
  font-family: var(--bc-font-display);
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0.3em;
  text-transform: lowercase;
  color: var(--kh-gold);
  opacity: 0.85;
  animation: bc-rise 900ms 250ms ease-out both;
}
.bc-loading .bc-title { animation: bc-rise 900ms 450ms ease-out both; }
.bc-loading .bc-subtitle { animation: bc-rise 900ms 600ms ease-out both; }
@keyframes bc-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.bc-madewith {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--bc-safe-bottom) + 14px);
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: rgba(244, 231, 200, 0.55);
}

.bc-title {
  margin: 0;
  font-family: var(--bc-font-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 11vw, 3.4rem);
  letter-spacing: 0.02em;
  color: var(--bc-gold);
  line-height: 1.05;
}

.bc-subtitle {
  margin: 4px 0 24px;
  font-family: var(--bc-font-display);
  font-size: clamp(1rem, 4.6vw, 1.3rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bc-cream-dim);
}

.bc-progress {
  position: relative;
  width: min(320px, 100%);
  height: 8px;
  margin: 0 auto;
  border-radius: 999px;
  background: rgba(244, 231, 200, 0.14);
  border: 1px solid rgba(232, 184, 74, 0.45);
  overflow: hidden;
}
.bc-progress__fill {
  position: absolute;
  inset: 0;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--bc-gold-dim), var(--bc-gold));
  transition: transform 160ms linear;
}
.bc-progress.is-indeterminate .bc-progress__fill {
  transform: scaleX(0.35);
  animation: bc-indeterminate 1.4s ease-in-out infinite;
}
@keyframes bc-indeterminate {
  0% { transform: translateX(-100%) scaleX(0.35); }
  100% { transform: translateX(300%) scaleX(0.35); }
}

.bc-status {
  min-height: 1.4em;
  margin: 12px 0 0;
  font-size: 0.95rem;
  color: var(--bc-cream-dim);
}

.bc-error {
  margin: 20px auto 0;
  padding: 16px;
  max-width: 24rem;
  border-radius: 12px;
  border: 1px solid rgba(232, 184, 74, 0.55);
  background: rgba(16, 38, 29, 0.85);
  text-align: left;
}
.bc-error__title { margin: 0 0 6px; font-size: 1.1rem; color: var(--bc-gold); }
.bc-error__text { margin: 0 0 12px; color: var(--bc-cream); }
.bc-error__details { margin: 0 0 12px; font-size: 0.8rem; color: var(--bc-cream-dim); }
.bc-error__details pre { white-space: pre-wrap; word-break: break-word; max-height: 8rem; overflow: auto; margin: 6px 0 0; }

/* ---------- Buttons ---------- */
.bc-button {
  min-height: 44px;
  min-width: 44px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid var(--bc-gold);
  background: var(--bc-gold);
  color: #1b1405;
  font: 600 0.95rem/1 var(--bc-font);
  cursor: pointer;
}
.bc-button--quiet { background: transparent; color: var(--bc-cream); border-color: rgba(244, 231, 200, 0.5); }
.bc-button:hover { filter: brightness(1.06); }
.bc-button:focus-visible,
.bc-skip:focus-visible,
.bc-install:focus-visible,
.bc-cell:focus-visible { outline: 3px solid var(--bc-cream); outline-offset: 2px; }
.bc-button[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

/* ---------- Skip-link style accessible-board toggle ---------- */
.bc-skip {
  position: fixed;
  z-index: 60;
  top: calc(var(--bc-safe-top) + 8px);
  left: calc(var(--bc-safe-left) + 8px);
  min-height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  border: 2px solid var(--bc-gold);
  background: var(--bc-bg);
  color: var(--bc-cream);
  font: 600 0.95rem/1 var(--bc-font);
  transform: translateY(calc(-100% - 24px - var(--bc-safe-top)));
  transition: transform 150ms ease;
}
.bc-skip:focus,
.bc-skip[aria-expanded="true"] { transform: none; }

/* ---------- Install button ---------- */
.bc-install {
  position: fixed;
  z-index: 40;
  top: calc(var(--bc-safe-top) + 8px);
  right: calc(var(--bc-safe-right) + 8px);
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(232, 184, 74, 0.7);
  background: rgba(16, 38, 29, 0.78);
  color: var(--bc-cream);
  font: 600 0.85rem/1 var(--bc-font);
  cursor: pointer;
  opacity: 0.85;
}
.bc-install:hover, .bc-install:focus-visible { opacity: 1; }
@media (pointer: coarse) { .bc-install { min-height: 44px; } }

/* ---------- Bottom notices (iOS hint, update toast) ---------- */
.bc-notices {
  position: fixed;
  z-index: 50;
  left: calc(var(--bc-safe-left) + 8px);
  right: calc(var(--bc-safe-right) + 8px);
  bottom: calc(var(--bc-safe-bottom) + 8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.bc-notice {
  pointer-events: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  max-width: min(28rem, 100%);
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(232, 184, 74, 0.6);
  background: rgba(16, 38, 29, 0.95);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
}
.bc-notice__text { margin: 0; flex: 1 1 12rem; min-width: 0; }

/* ---------- Accessible board panel ---------- */
.bc-a11y {
  position: fixed;
  z-index: 55;
  top: calc(var(--bc-safe-top) + 60px);
  right: calc(var(--bc-safe-right) + 8px);
  width: min(400px, calc(100vw - 16px - var(--bc-safe-left) - var(--bc-safe-right)));
  max-height: calc(100% - var(--bc-safe-top) - var(--bc-safe-bottom) - 76px);
  overflow-y: auto;
  padding: 14px 16px 16px;
  border-radius: 14px;
  border: 1px solid rgba(232, 184, 74, 0.7);
  background: rgba(16, 38, 29, 0.96);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
@media (max-width: 599px) {
  .bc-a11y {
    top: auto;
    left: calc(var(--bc-safe-left) + 8px);
    right: calc(var(--bc-safe-right) + 8px);
    bottom: calc(var(--bc-safe-bottom) + 8px);
    width: auto;
    max-height: min(78vh, calc(100% - var(--bc-safe-top) - var(--bc-safe-bottom) - 76px));
  }
}
.bc-a11y__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bc-a11y__title { margin: 0; font-size: 1.1rem; color: var(--bc-gold); }
.bc-a11y__status { margin: 8px 0 2px; }
.bc-a11y__message { margin: 0 0 10px; min-height: 1.4em; color: var(--bc-cream-dim); }
.bc-a11y__help { margin: 10px 0; font-size: 0.85rem; color: var(--bc-cream-dim); }
.bc-a11y__actions { display: flex; flex-wrap: wrap; gap: 8px; }

.bc-grid { display: grid; gap: 6px; max-width: 320px; margin: 0 auto; }
.bc-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.bc-gridcell { display: block; min-width: 0; }
.bc-cell {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 44px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid rgba(232, 184, 74, 0.45);
  background: rgba(244, 231, 200, 0.06);
  color: var(--bc-cream);
  font: 700 1rem/1 var(--bc-font);
  cursor: pointer;
}
.bc-cell__coord { position: absolute; top: 3px; left: 5px; font-size: 0.62rem; font-weight: 500; color: var(--bc-cream-dim); }
.bc-cell__piece { font-size: 1.15rem; }
.bc-cell.is-tiger { background: rgba(232, 184, 74, 0.28); color: var(--bc-gold); }
.bc-cell.is-goat { background: rgba(244, 231, 200, 0.22); color: var(--bc-cream); }
.bc-cell.is-legal { box-shadow: inset 0 0 0 3px rgba(232, 184, 74, 0.85); }
.bc-cell.is-capture { box-shadow: inset 0 0 0 3px var(--bc-danger); }
.bc-cell.is-selected { border: 3px solid var(--bc-cream); }
.bc-cell.is-unity-focus::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 7px;
  border: 1px dashed var(--bc-cream-dim);
  pointer-events: none;
}

/* ---------- Screen-reader-only ---------- */
.bc-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .bc-progress.is-indeterminate .bc-progress__fill { animation: none; transform: scaleX(1); opacity: 0.5; }
}

/* ---------- Forced colors (Windows High Contrast) ---------- */
@media (forced-colors: active) {
  .bc-cell, .bc-button, .bc-skip, .bc-install, .bc-notice, .bc-a11y, .bc-progress { border: 1px solid CanvasText; }
  .bc-progress__fill { background: Highlight; }
  .bc-cell.is-selected { outline: 3px solid Highlight; }
}