/* FrogChess - 2-player chess board + chrome. Chrome/tokens come from the shared
   shell; this file carries the 8x8 board, the frog-medallion pieces, move
   highlights, the promotion picker, and the invite/status/actions row.
   app.js builds 64 .sq buttons into #board from the server FEN and places
   .pc[data-piece] spans; CSS here is orientation-agnostic (app.js flips). */

/* Visually-hidden heading (kept for screen readers). */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ─── Status ───────────────────────────────────────────────────────────── */

.fc-status {
  min-height: 1.5em;
  margin: 0 0 1rem;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-light);
}
.fc-status[data-tone="you"]   { color: var(--accent); }
.fc-status[data-tone="them"]  { color: var(--muted); }
.fc-status[data-tone="check"] { color: #f0a23b; }
.fc-status[data-tone="win"]   { color: var(--accent); }
.fc-status[data-tone="lose"]  { color: #e5707a; }
.fc-status[data-tone="error"] { color: #e5707a; }

/* ─── Board ────────────────────────────────────────────────────────────── */

.fc-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: min(480px, 92vw);
  aspect-ratio: 1;
  margin: 0 auto 1.25rem;
  border: 3px solid var(--border-dark);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-deep);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  touch-action: manipulation;
}

/* ─── Squares ──────────────────────────────────────────────────────────── */

.sq {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: #9aa4b2;            /* light square */
  -webkit-user-select: none;
  user-select: none;
  transition: background 120ms ease;
}
.sq--dark { background: #57616d; } /* dark square */
.sq:disabled { cursor: default; }
.sq:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ─── Pieces (frog medallions; data-piece = color+type, e.g. wk/bn) ──────── */

.pc {
  position: absolute;
  inset: 7%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;         /* fit the chess-piece silhouette */
  pointer-events: none;             /* clicks fall through to the .sq button */
  z-index: 2;
}
/* white pieces (off-white fill): thin dark outline so they read on light squares */
.pc[data-piece^="w"] {
  filter:
    drop-shadow(1px 0 0 #11151b) drop-shadow(-1px 0 0 #11151b)
    drop-shadow(0 1px 0 #11151b) drop-shadow(0 -1px 0 #11151b)
    drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45));
}
/* black pieces (near-black fill): thin light outline so they read on dark squares */
.pc[data-piece^="b"] {
  filter:
    drop-shadow(1px 0 0 #cdd2d9) drop-shadow(-1px 0 0 #cdd2d9)
    drop-shadow(0 1px 0 #cdd2d9) drop-shadow(0 -1px 0 #cdd2d9)
    drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45));
}
.pc[data-piece="wk"] { background-image: url("./pieces/wk.svg"); }
.pc[data-piece="wq"] { background-image: url("./pieces/wq.svg"); }
.pc[data-piece="wb"] { background-image: url("./pieces/wb.svg"); }
.pc[data-piece="wn"] { background-image: url("./pieces/wn.svg"); }
.pc[data-piece="wr"] { background-image: url("./pieces/wr.svg"); }
.pc[data-piece="wp"] { background-image: url("./pieces/wp.svg"); }
.pc[data-piece="bk"] { background-image: url("./pieces/bk.svg"); }
.pc[data-piece="bq"] { background-image: url("./pieces/bq.svg"); }
.pc[data-piece="bb"] { background-image: url("./pieces/bb.svg"); }
.pc[data-piece="bn"] { background-image: url("./pieces/bn.svg"); }
.pc[data-piece="br"] { background-image: url("./pieces/br.svg"); }
.pc[data-piece="bp"] { background-image: url("./pieces/bp.svg"); }

/* ─── Move highlights (app.js toggles these on a .sq) ─────────────────────── */

/* selected from-square */
.sq.is-selected { background: var(--accent-dark, #13a06a); }
.sq.is-selected.sq--dark { background: #0f7d53; }

/* legal destination (empty) - a centered dot */
.sq.is-target::before {
  content: "";
  position: absolute;
  width: 30%;
  height: 30%;
  border-radius: 50%;
  background: rgba(25, 195, 125, 0.7);
  z-index: 1;
}
/* legal destination that is a capture - a ring around the piece */
.sq.is-capture::before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 4px rgba(25, 195, 125, 0.8);
  z-index: 1;
}
/* last move (from + to) - subtle tint */
.sq.is-last { background: #6f7a5a; }
.sq.is-last.sq--dark { background: #4a5340; }
/* king in check - red glow */
.sq.is-check { background: #8c4147; }
.sq.is-check::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 16px 2px rgba(229, 112, 122, 0.9);
  z-index: 1;
}

/* ─── Promotion picker (app.js injects .promo when a pawn reaches last rank) ─ */

.promo {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin: 0 auto 1rem;
  padding: 0.6rem;
  width: fit-content;
  background: var(--surface-dark);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
}
.promo[hidden] { display: none; }
.promo__label { align-self: center; font-size: 0.85rem; color: var(--muted); margin-right: 0.25rem; }
.promo__opt {
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-sm);
  /* app.js sets background-image inline (it knows the mover's color + the
     bare q/r/b/n letter -> ./pieces/<color><letter>.png). */
  background: #343c47 no-repeat center / 80%;
  cursor: pointer;
  transition: border-color 120ms ease, transform 80ms ease;
}
.promo__opt:hover { border-color: var(--accent); transform: translateY(-2px); }

/* ─── Invite ───────────────────────────────────────────────────────────── */

.fc-invite { margin: 1.5rem auto 0; width: min(440px, 92vw); text-align: center; }
.fc-invite[hidden] { display: none; }
.fc-invite__label { margin: 0 0 .5rem; font-size: .9rem; color: var(--muted); }
.fc-invite__row { display: flex; gap: .5rem; }
.fc-invite__url {
  flex: 1 1 auto;
  min-width: 0;
  padding: .55rem .7rem;
  font-family: var(--mono);
  font-size: .82rem;
  color: var(--text-light);
  background: var(--bg-deep);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-sm);
}
.fc-invite__flash { display: block; margin-top: .4rem; font-size: .8rem; color: var(--accent); min-height: 1em; }

/* ─── Actions ──────────────────────────────────────────────────────────── */

.fc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
  align-items: center;
  margin-top: 1.5rem;
}

/* ─── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 560px) {
  .fc-board { width: 96vw; border-width: 2px; }
  .promo__opt { width: 44px; height: 44px; }
  .fc-actions { gap: .5rem; }
}