/*!
 * BappaCoins — the board and the coins. https://bappatutions.in
 *
 * Shared by every number's coin game, so 1 and 7 are the same game with a
 * different answer rather than two games that drifted apart.
 */

  :root {
    --coin-hi: #FFF6CE;
    --coin-mid: #FFD24A;
    --coin-lo: #E09B12;
    --coin-deep: #A96A00;
    --coin-edge: #8A5600;
  }

  /* ── prompt ───────────────────────────────────────────────────────────── */
  .prompt {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    margin: 0 0 0.7rem;
    font-size: clamp(1.15rem, 4.2vw, 1.75rem); font-weight: 700;
  }
  /* The target shown as a small coin, so a child who cannot read yet can match
     the shape rather than the sentence. */
  .prompt__coin {
    display: grid; place-items: center;
    width: clamp(2.2rem, 8vw, 3rem); aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 26%, var(--coin-hi) 0%, var(--coin-mid) 38%, var(--coin-lo) 74%, var(--coin-deep) 100%);
    color: #7A4A00;
    font-size: clamp(1.3rem, 5vw, 1.9rem); line-height: 1;
    text-shadow: 0 2px 0 rgba(255,255,255,.55), 0 -1px 1px rgba(90,50,0,.5);
    box-shadow:
      inset 0 -3px 6px rgba(120,70,0,.45), inset 0 3px 6px rgba(255,255,255,.7),
      0 3px 0 var(--coin-edge), 0 6px 8px rgba(0,0,0,.25);
    animation: promptPulse 2.4s ease-in-out infinite;
  }
  @keyframes promptPulse {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50%      { transform: scale(1.07) rotate(-3deg); }
  }

  /* ── the board ────────────────────────────────────────────────────────── */
  .board {
    position: relative; width: 100%;
    aspect-ratio: 4 / 3; max-height: 66vh;
    border-radius: 28px;
    background: radial-gradient(ellipse at 50% 18%, #4FA06B 0%, #3B8557 55%, #2E6A45 100%);
    box-shadow:
      inset 0 6px 14px rgba(255,255,255,.22),
      inset 0 -10px 22px rgba(0,40,15,.55),
      0 10px 0 #245538, 0 18px 26px rgba(0,0,0,.3);
    border: 6px solid #8A5A2B;
    overflow: hidden;
  }
  .board::before {
    content: ''; position: absolute; inset: 0; border-radius: 22px;
    box-shadow: inset 0 2px 0 rgba(255,255,255,.3); pointer-events: none;
  }

  .coin {
    position: absolute; left: 50%; top: 50%;
    width: 30%; aspect-ratio: 1; margin: -15% 0 0 -15%;
    border: 0; padding: 0; border-radius: 50%;
    cursor: pointer; font: inherit; font-weight: 700;
    font-size: clamp(2rem, 9vw, 3.6rem); line-height: 1;
    color: #7A4A00;
    background: radial-gradient(circle at 34% 26%, var(--coin-hi) 0%, var(--coin-mid) 36%, var(--coin-lo) 72%, var(--coin-deep) 100%);
    text-shadow: 0 3px 0 rgba(255,255,255,.5), 0 -2px 2px rgba(90,50,0,.45);
    box-shadow:
      inset 0 -8px 14px rgba(120,70,0,.45), inset 0 8px 14px rgba(255,255,255,.68),
      0 8px 0 var(--coin-edge), 0 14px 18px rgba(0,0,0,.32);
    /* Position is animated, not transform, so the shuffle stays readable at any
       board size without recomputing pixel offsets on resize. */
    transition:
      left .42s cubic-bezier(.35,.05,.25,1), top .42s cubic-bezier(.35,.05,.25,1),
      transform .16s, box-shadow .16s, background .25s;
    touch-action: manipulation; overflow: hidden;
    display: grid; place-items: center;
  }
  /* Engraved ring, like a real coin's raised edge. */
  .coin::before {
    content: ''; position: absolute; inset: 9%; border-radius: 50%;
    border: 2px dashed rgba(140,85,0,.32); pointer-events: none;
  }
  /* Travelling gloss across the metal. */
  .coin::after {
    content: ''; position: absolute; top: -60%; left: -120%;
    width: 60%; height: 220%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
    transform: rotate(18deg);
    animation: shine 4.5s ease-in-out infinite; pointer-events: none;
  }
  @keyframes shine { 0%, 62% { left: -120%; } 82%, 100% { left: 190%; } }

  .coin:active { transform: translateY(5px); box-shadow: inset 0 -6px 12px rgba(120,70,0,.45), inset 0 6px 12px rgba(255,255,255,.6), 0 3px 0 var(--coin-edge), 0 6px 10px rgba(0,0,0,.3); }

  .board.busy .coin { pointer-events: none; }

  .coin.right {
    background: radial-gradient(circle at 34% 26%, #E8FFD8 0%, #A8E063 38%, #56A118 74%, #37700D 100%);
    color: #2C5405;
    box-shadow:
      inset 0 -8px 14px rgba(30,70,0,.4), inset 0 8px 14px rgba(255,255,255,.7),
      0 8px 0 #2C5A08, 0 14px 18px rgba(0,0,0,.32);
    animation: pop .5s cubic-bezier(.2,.9,.3,1.5);
  }
  .coin.wrong { animation: wobble .4s; filter: saturate(.45) brightness(.92); }

  @keyframes pop {
    0% { transform: scale(1) rotate(0); } 40% { transform: scale(1.22) rotate(8deg); }
    70% { transform: scale(.96) rotate(-4deg); } 100% { transform: scale(1) rotate(0); }
  }
  @keyframes wobble {
    20% { transform: translateX(-9px) rotate(-5deg); }
    60% { transform: translateX(9px) rotate(5deg); }
    100% { transform: none; }
  }

  /* On a phone the 4:3 board left half the screen empty. Square fills the space
     and makes every coin bigger, which is the point for small fingers. */
  @media (max-width: 560px) {
    .board { aspect-ratio: 1 / 1; max-height: 68vh; }
    .coin { width: 34%; margin: -17% 0 0 -17%; }
  }

  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; }
    .coin { transition: background .2s; }
  }