/* game.css — Ricochet game chrome. Token-driven so the WP theme + rebrand can
   override colours from one place. Colourblind-safe (Okabe–Ito) arrow hues. */

.rc-game {
  --rc-primary: #4f7cff;
  --rc-board-bg: #0f1420;
  --rc-panel: #171d2b;
  --rc-panel-2: #1f2740;
  --rc-text: #e8ecf4;
  --rc-muted: #9aa6bf;
  --rc-grid: rgba(255, 255, 255, 0.06);
  --rc-arrow: #e8ecf4;
  --rc-arrow-up: #0072b2;
  --rc-arrow-down: #d55e00;
  --rc-arrow-left: #009e73;
  --rc-arrow-right: #cc79a7;
  --rc-deflector: #8b97b3;
  --rc-hint: #ffd23f;
  --rc-focus: #4f7cff;
  --rc-danger: #ff4d5e;
  --rc-route: rgba(79, 124, 255, 0.5);
  --rc-radius: 12px;

  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  color: var(--rc-text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--rc-board-bg);
  border-radius: var(--rc-radius);
  padding: 10px;
  box-sizing: border-box;
}

/* ---- Top bar ---- */
.rc-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.rc-bar-left, .rc-bar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rc-board-name { font-weight: 700; font-size: 1rem; }
.rc-progress { color: var(--rc-muted); font-size: 0.82rem; }
.rc-status { font-size: 0.95rem; min-width: 3ch; }
.rc-status-low { color: var(--rc-danger); font-weight: 700; }

.rc-modes { display: inline-flex; background: var(--rc-panel); border-radius: 999px; padding: 3px; }
.rc-mode-btn {
  border: 0; background: transparent; color: var(--rc-muted);
  padding: 6px 10px; border-radius: 999px; cursor: pointer; font-size: 0.8rem;
}
.rc-mode-btn[aria-current="true"] { background: var(--rc-primary); color: #fff; }

.rc-icon-btn {
  border: 0; background: var(--rc-panel); color: var(--rc-text);
  width: 38px; height: 38px; border-radius: 10px; cursor: pointer; font-size: 1rem;
}
.rc-icon-btn:disabled { opacity: 0.45; cursor: default; }
.rc-icon-btn:focus-visible, .rc-mode-btn:focus-visible, .rc-btn:focus-visible {
  outline: 3px solid var(--rc-focus); outline-offset: 2px;
}

/* ---- Stage / canvas ---- */
.rc-stage {
  position: relative;
  width: 100%;
  /* reserve height to avoid layout shift */
  aspect-ratio: 1 / 1;
  max-height: 78vh;
  background: var(--rc-board-bg);
  border-radius: var(--rc-radius);
  overflow: hidden;
}
.rc-canvas { display: block; width: 100%; height: 100%; outline: none; touch-action: none; }

/* ---- Combo meter ---- */
.rc-combo {
  position: absolute; top: 10px; left: 10px;
  background: rgba(15, 20, 32, 0.72); backdrop-filter: blur(4px);
  border-radius: 10px; padding: 6px 10px; display: flex; align-items: center; gap: 8px;
  pointer-events: none;
}
.rc-combo-score { font-variant-numeric: tabular-nums; font-weight: 700; }
.rc-combo-mult { color: var(--rc-hint); font-weight: 800; }
.rc-combo-bar { width: 54px; height: 5px; background: rgba(255,255,255,0.12); border-radius: 999px; overflow: hidden; }
.rc-combo-bar-fill { height: 100%; width: 0; background: var(--rc-primary); transition: width 80ms linear; }
.rc-combo-hot .rc-combo-bar-fill { background: var(--rc-arrow-down); }

/* ---- Score popups ---- */
.rc-popups { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.rc-popup {
  position: absolute; transform: translate(-50%, -50%);
  font-weight: 800; font-size: 0.9rem; color: var(--rc-text);
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  animation: rc-float 0.9s ease-out forwards;
}
.rc-popup-hot { color: var(--rc-hint); font-size: 1.05rem; }
@keyframes rc-float {
  0% { opacity: 0; transform: translate(-50%, -40%) scale(0.8); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -140%) scale(1.05); }
}

/* ---- Overlays / panels ---- */
.rc-overlay {
  position: absolute; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6, 9, 16, 0.6); backdrop-filter: blur(3px); padding: 16px;
}
.rc-game { position: relative; }
.rc-panel {
  background: var(--rc-panel); border-radius: 16px; padding: 22px;
  max-width: min(560px, 92vw); max-height: 88vh; overflow: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.rc-panel-title { margin: 0 0 14px; font-size: 1.3rem; }
.rc-stats { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.rc-stat-value { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.rc-stat-label { color: var(--rc-muted); font-size: 0.78rem; }
.rc-share {
  background: var(--rc-board-bg); border-radius: 10px; padding: 12px; margin: 0 0 12px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.85rem; white-space: pre-wrap; line-height: 1.5;
}
.rc-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.rc-btn {
  border: 1px solid rgba(255,255,255,0.14); background: var(--rc-panel-2); color: var(--rc-text);
  padding: 10px 16px; border-radius: 10px; cursor: pointer; font-size: 0.9rem; font-weight: 600;
}
.rc-btn-primary { background: var(--rc-primary); border-color: transparent; color: #fff; }

/* ---- Settings ---- */
.rc-setting-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.rc-setting-label { color: var(--rc-muted); }
.rc-seg { display: inline-flex; background: var(--rc-board-bg); border-radius: 10px; padding: 3px; }
.rc-seg-btn { border: 0; background: transparent; color: var(--rc-muted); padding: 7px 12px; border-radius: 8px; cursor: pointer; }
.rc-seg-btn.is-on { background: var(--rc-primary); color: #fff; }

/* ---- Challenge library ---- */
.rc-lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.rc-lib-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--rc-panel-2); border: 0; border-radius: 12px; padding: 10px; cursor: pointer; color: var(--rc-text);
}
.rc-thumb { background: var(--rc-board-bg); border-radius: 8px; width: 100%; height: auto; aspect-ratio: 1; }
.rc-lib-name { font-weight: 700; text-transform: capitalize; font-size: 0.85rem; }
.rc-lib-meta, .rc-lib-best { color: var(--rc-muted); font-size: 0.72rem; }

/* ---- a11y ---- */
.rc-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;
}

@media (prefers-reduced-motion: reduce) {
  .rc-popup { animation-duration: 0.01ms; }
  .rc-combo-bar-fill { transition: none; }
}

/* Light theme override (when the host sets a light scheme) */
.rc-game[data-theme="light"] {
  --rc-board-bg: #f4f6fb; --rc-panel: #ffffff; --rc-panel-2: #eef1f8;
  --rc-text: #1a2033; --rc-muted: #5a647e; --rc-grid: rgba(0,0,0,0.08);
  --rc-arrow: #1a2033; --rc-deflector: #6b7691;
}