/* Neuriosity — Rule Switch playfield.
   Shared chrome lives in ../_shared/game-kit.css */

.rs-rule {
  display: flex;
  align-items: baseline;
  gap: calc(var(--gu) * 1.4);
  flex: 0 0 auto;
  padding: calc(var(--gu) * 1.2) calc(var(--gu) * 3.4);
  background: #fff;
  border: calc(var(--gu) * 0.3) solid rgba(124, 154, 31, 0.3);
  border-radius: 999px;
}

.rs-rule__pre {
  color: var(--ink-soft, #526b8e);
  font-size: calc(var(--gu) * 2.6);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.rs-rule__name {
  color: #7c9a1f;
  font-size: calc(var(--gu) * 4.2);
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* The banner is the only warning a rule has changed, so it has to catch the
   eye without being so loud it becomes the game. */
.rs-rule.is-new { animation: rs-flash 620ms ease; }

@keyframes rs-flash {
  0% { transform: scale(1); background: #7c9a1f; border-color: #7c9a1f; }
  22% { transform: scale(1.07); background: #7c9a1f; border-color: #7c9a1f; }
  100% { transform: scale(1); background: #fff; }
}

.rs-rule.is-new .rs-rule__pre,
.rs-rule.is-new .rs-rule__name { animation: rs-flash-ink 620ms ease; }

@keyframes rs-flash-ink {
  0%, 22% { color: #fff; }
  100% { color: inherit; }
}

/* ---------- the card ---------- */

.rs-card {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: calc(var(--gu) * 46);
  height: calc(var(--gu) * 30);
  max-width: 100%;
  background: #fff;
  border: calc(var(--gu) * 0.3) solid rgba(6, 43, 99, 0.12);
  border-radius: calc(var(--gu) * 3);
  box-shadow: 0 calc(var(--gu) * 1) calc(var(--gu) * 2.6) rgba(6, 43, 99, 0.08);
}

.rs-marks { display: flex; gap: calc(var(--gu) * 2.4); }

.rs-marks.is-wrong { animation: rs-shake 420ms ease; }

@keyframes rs-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(calc(var(--gu) * -1.4)); }
  75% { transform: translateX(calc(var(--gu) * 1.4)); }
}

.rs-mark {
  display: block;
  width: calc(var(--gu) * 11);
  height: calc(var(--gu) * 11);
}

.rs-mark--circle { border-radius: 50%; }
.rs-mark--square { border-radius: calc(var(--gu) * 1.2); }

/* ---------- bins ---------- */

.rs-bins {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--gu) * 2.2);
  flex: 0 0 auto;
  width: calc(var(--gu) * 74);
  max-width: 100%;
}

.rs-bin {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--gu) * 1.2);
  min-height: max(64px, calc(var(--gu) * 15));
  padding: calc(var(--gu) * 1.6);
  color: var(--navy, #062b63);
  font: inherit;
  font-size: calc(var(--gu) * 2.9);
  font-weight: 800;
  background: #fff;
  border: calc(var(--gu) * 0.34) solid rgba(6, 43, 99, 0.16);
  border-radius: calc(var(--gu) * 2.6);
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease;
}

.rs-bin:hover { border-color: rgba(124, 154, 31, 0.55); }
.rs-bin:active { transform: scale(0.97); }

.rs-bin:focus-visible {
  outline: calc(var(--gu) * 0.55) solid #7c9a1f;
  outline-offset: calc(var(--gu) * 0.4);
}

.rs-bin.is-right {
  border-color: var(--green, #0ea85a);
  box-shadow: inset 0 0 0 calc(var(--gu) * 0.6) rgba(14, 168, 90, 0.18);
}

.rs-bin.is-wrong {
  border-color: var(--coral, #f15f6d);
  box-shadow: inset 0 0 0 calc(var(--gu) * 0.6) rgba(241, 95, 109, 0.18);
}

/* ---------- what a bin shows ---------- */

.rs-face {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--gu) * 0.9);
  width: calc(var(--gu) * 7);
  height: calc(var(--gu) * 7);
}

.rs-face--swatch { border-radius: calc(var(--gu) * 1.1); }

.rs-face--circle,
.rs-face--square {
  background: var(--navy, #062b63);
}

.rs-face--circle { border-radius: 50%; }
.rs-face--square { border-radius: calc(var(--gu) * 1.1); }

.rs-face--one i,
.rs-face--two i {
  display: block;
  width: calc(var(--gu) * 2.6);
  height: calc(var(--gu) * 2.6);
  background: var(--navy, #062b63);
  border-radius: 50%;
}

@media (prefers-reduced-motion: reduce) {
  .rs-rule.is-new,
  .rs-rule.is-new .rs-rule__pre,
  .rs-rule.is-new .rs-rule__name,
  .rs-marks.is-wrong { animation: none; }
  .rs-rule.is-new { border-color: #7c9a1f; }
}