/* Shared square modal action: Forge and Settings intentionally use one recipe. */
.forge-close,
.settings-close {
  min-height: 44px;
  padding: 0 12px 0 14px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--cream-dim);
  font-size: 9px;
  letter-spacing: 1px;
  cursor: pointer;
}

.forge-close b,
.settings-close b {
  margin-left: 8px;
  color: var(--cream);
  font-size: 18px;
}

.forge-close b { line-height: 0; }

/* Paddle Forge: result and game-over surfaces. */
/* Terminal run state — the rack has physically fractured, but banked progress survives. */
  .state-panel.game-over-panel {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-top-color: var(--coral);
    border-bottom-color: rgba(224, 148, 144, 0.52);
    box-shadow: 0 0 0 1px rgba(224, 148, 144, 0.2), 16px 16px 0 var(--shadow);
    animation: game-over-panel-in 480ms cubic-bezier(0.2, 0.76, 0.22, 1) both;
  }
  
  .game-over-panel > * {
    position: relative;
    z-index: 1;
  }
  
  .game-over-panel .state-kicker {
    color: var(--coral);
  }
  
  .game-over-panel .state-kicker span,
  .game-over-saved {
    color: var(--mint);
  }
  
  .game-over-panel h2 {
    color: var(--target-coral-hi);
  }
  
  .game-over-fracture {
    position: relative;
    z-index: 0;
    height: 78px;
    margin: -2px 0 14px;
    border-top: 1px solid rgba(224, 148, 144, 0.16);
    border-bottom: 1px solid rgba(224, 148, 144, 0.16);
  }
  
  .fracture-brick {
    position: absolute;
    top: 23px;
    width: 44px;
    height: 30px;
    border: 1px solid var(--target-coral-hi);
    background: var(--target-coral);
    box-shadow: inset 0 -7px 0 rgba(14, 20, 32, 0.22), 0 0 16px rgba(244, 95, 82, 0.2);
  }
  
  .fracture-brick-left {
    right: calc(50% + 3px);
    clip-path: polygon(0 0, 100% 0, 84% 28%, 98% 48%, 79% 72%, 89% 100%, 0 100%);
    transform: translateX(-8px) rotate(-5deg);
    animation: fracture-left 520ms 80ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
  
  .fracture-brick-right {
    left: calc(50% + 3px);
    clip-path: polygon(11% 0, 100% 0, 100% 100%, 8% 100%, 21% 72%, 2% 48%, 16% 28%);
    transform: translateX(8px) rotate(5deg);
    animation: fracture-right 520ms 80ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
  
  .game-over-fracture i {
    position: absolute;
    top: 38px;
    left: 50%;
    width: 52px;
    height: 1px;
    background: var(--coral);
    box-shadow: 0 0 6px rgba(244, 95, 82, 0.32);
    transform-origin: left center;
    animation: fracture-line 380ms 190ms ease-out both;
  }
  
  .game-over-fracture i:nth-of-type(1) { transform: rotate(-154deg); }
  .game-over-fracture i:nth-of-type(2) { width: 65px; transform: rotate(-24deg); }
  .game-over-fracture i:nth-of-type(3) { width: 42px; transform: rotate(36deg); }
  .game-over-fracture i:nth-of-type(4) { width: 57px; transform: rotate(156deg); }
  .game-over-fracture i:nth-of-type(5) { width: 34px; transform: rotate(92deg); }
  .game-over-fracture i:nth-of-type(6) { width: 30px; transform: rotate(-88deg); }
  
  .game-over-saved {
    margin: 14px 0 0;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.45px;
    line-height: 1.45;
  }
  
  .game-over-saved span {
    margin-right: 5px;
    color: var(--amber-ink);
  }
  
  .game-over-panel .state-copy {
    margin-top: 6px;
  }
  
  /* RUN SUMMARY
     The score is the hero row; shards, board and streak share the line below it.
     Tallies count up from zero and only stamp NEW RECORD once they have landed,
     so the stamp reads as a verdict on the number rather than decoration. */
  .run-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin-top: 20px;
    border-top: 2px solid var(--coral);
    background: var(--line);
  }
  
  .run-tally {
    position: relative;
    padding: 11px 12px 12px;
    background: var(--graphite);
  }
  
  .run-tally:first-child {
    grid-column: 1 / -1;
  }
  
  .run-tally > span {
    display: block;
    color: var(--cream-dim);
    font: 700 8px/1 var(--mono);
    letter-spacing: 1.3px;
  }
  
  .run-tally > strong {
    display: block;
    margin-top: 5px;
    font-family: var(--display);
    font-size: 17px;
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }
  
  .run-tally:first-child > strong {
    font-size: 27px;
    letter-spacing: 0.02em;
  }
  
  .run-tally.is-dual > strong {
    font-size: 15px;
    letter-spacing: 0.01em;
  }
  
  .run-tally.is-dual:first-child > strong {
    font-size: 22px;
  }
  
  .run-tally.is-score > strong { color: var(--cream); }
  .run-tally.is-shard > strong { color: var(--amber2, var(--amber)); }
  .run-tally.is-combo > strong { color: var(--cream); }

  .run-tally .run-now {
    color: inherit;
    font: inherit;
  }

  .run-tally.is-score .run-now { color: var(--cream); }
  .run-tally.is-combo .run-now { color: var(--mint); }
  .run-tally:not(.is-score):not(.is-combo):not(.is-shard) .run-now { color: var(--cream); }

  .run-tally .run-best {
    color: color-mix(in srgb, var(--amber) 72%, var(--cream-dim));
    font: 800 0.72em/1 var(--mono);
    letter-spacing: 0.04em;
  }

  .run-tally.is-combo .run-best {
    color: color-mix(in srgb, var(--mint) 45%, var(--cream-dim));
  }

  .run-tally .run-sep {
    color: var(--cream-dim);
    font: 700 0.72em/1 var(--mono);
    font-style: normal;
  }
  
  /* Counting reads as "still resolving"; landing is the beat it stops on. */
  .run-tally.is-counting > strong {
    opacity: 0.62;
  }
  
  .run-tally.is-settled > strong {
    animation: tally-land 340ms cubic-bezier(0.2, 0.9, 0.2, 1);
  }
  
  .run-record-stamp {
    position: absolute;
    top: 9px;
    right: 10px;
    padding: 3px 6px;
    border: 1px solid var(--amber);
    background: color-mix(in srgb, var(--amber) 16%, transparent);
    color: var(--amber-ink);
    font: 800 7px/1 var(--mono);
    font-style: normal;
    letter-spacing: 1.1px;
    opacity: 0;
    transform: scale(0.82) rotate(-4deg);
  }
  
  .run-tally.is-record.is-settled .run-record-stamp {
    animation: record-stamp-in 420ms cubic-bezier(0.16, 1.02, 0.3, 1) forwards;
  }
  
  .run-tally.is-record.is-settled {
    background: linear-gradient(120deg, color-mix(in srgb, var(--amber) 11%, transparent), transparent 62%), var(--graphite);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 34%, transparent);
  }
  
  @keyframes tally-land {
    0% { transform: translateY(2px); filter: brightness(1.25); }
    100% { transform: none; filter: none; }
  }
  
  @keyframes record-stamp-in {
    0% { opacity: 0; transform: scale(1.5) rotate(-4deg); }
    55% { opacity: 1; transform: scale(0.92) rotate(-4deg); }
    100% { opacity: 1; transform: scale(1) rotate(-4deg); }
  }
  
  @media (prefers-reduced-motion: reduce) {
    /* Keep the verdict, drop the theatre. */
    .run-tally.is-settled > strong,
    .run-tally.is-record.is-settled .run-record-stamp {
      animation: none;
    }
  
    .run-record-stamp {
      opacity: 1;
      transform: none;
    }
  }
  
  .game-over-actions .primary-action {
    flex: 1 0 100%;
  }
  
  .game-over-actions .secondary-action {
    flex: 1 1 calc(50% - 5px);
  }
  
  @keyframes game-over-panel-in {
    0% { opacity: 0; transform: translateY(8px) scale(0.97); }
    52% { opacity: 1; transform: translateY(0) scale(1.012); }
    100% { opacity: 1; transform: none; }
  }
  
  @keyframes fracture-left {
    from { opacity: 0; transform: translateX(0) rotate(0); }
    to { opacity: 1; transform: translateX(-8px) rotate(-5deg); }
  }
  
  @keyframes fracture-right {
    from { opacity: 0; transform: translateX(0) rotate(0); }
    to { opacity: 1; transform: translateX(8px) rotate(5deg); }
  }
  
  @keyframes fracture-line {
    from { opacity: 0; scale: 0 1; }
    to { opacity: 1; scale: 1; }
  }
  
  @media (max-width: 520px) {
    .state-panel.game-over-panel {
      padding: 17px 16px 16px;
    }
  
    .game-over-fracture {
      height: 62px;
      margin-bottom: 10px;
    }
  
    .fracture-brick {
      top: 17px;
    }
  
    .game-over-fracture i {
      top: 32px;
    }
  
    .game-over-saved {
      margin-top: 10px;
      font-size: 9px;
    }
  
    .run-summary {
      margin-top: 12px;
    }
  
    .run-tally:first-child > strong {
      font-size: 23px;
    }
  
    .run-tally.is-dual > strong {
      font-size: 13px;
    }
  
    .run-tally.is-dual:first-child > strong {
      font-size: 18px;
    }
  
    .game-over-actions {
      margin-top: 12px;
    }
  }
  
  @media (prefers-reduced-motion: reduce) {
    article.skill-card,
    article.skill-card::after,
    .skill-card button.card-action,
    .hud-rail-right button.active-system,
    .hud-rail-right .field-effect,
    .hud-rail-right .field-effect.is-expiring,
    .hud-rail-right .active-system em,
    .hud-rail-right .field-effect em,
    .combo-pop::before,
    .combo-pop::after,
    .target-legend .object-key.is-new-discovery .brick-swatch,
    .court-loader,
    .court-loader-from,
    .court-loader-to,
    .court-loader-brick,
    .court-loader-ball,
    .court-transition-panel .state-kicker,
    .court-stage-pass,
    .court-stage-pass::before,
    .state-panel.clear-stamp,
    .state-panel.clear-stamp::after,
    .state-panel.game-over-panel,
    .state-panel.miss-ack-panel,
    .game-over-fracture i,
    .fracture-brick,
    .clear-stat,
    .bonus-shard-mark.is-shard-launch,
    .shard-fly-orb.is-impact,
    .core-reward.is-shard-hit {
      animation: none !important;
      transition: none !important;
    }
  
    .pong-fx-layer {
      display: none !important;
    }
  
    .court-loader {
      background: var(--court-to-bg, var(--court-from-bg));
      border-color: color-mix(in srgb, var(--court-to-accent, var(--court-accent)) 42%, transparent);
    }
  
    .court-loader-from { opacity: 0 !important; }
    .court-loader-to { opacity: 1 !important; }
  
    .court-loader-ball {
      background: var(--court-to-ball, var(--cream));
      box-shadow: 0 0 8px var(--court-to-accent, var(--court-accent));
    }
  
    .court-transition-panel .state-kicker {
      color: var(--court-to-accent, var(--court-accent));
    }
  
    .canvas-bezel.is-miss-flash {
      animation: none !important;
      transition: none !important;
      border-color: #ff6a5c;
      border-top-color: #ff8a7a;
    }
  
    .state-panel.clear-stamp,
    .state-panel.game-over-panel,
    .state-panel.miss-ack-panel {
      opacity: 1;
      transform: none;
    }
  
    .fracture-brick-left {
      opacity: 1;
      transform: translateX(-8px) rotate(-5deg);
    }
  
    .fracture-brick-right {
      opacity: 1;
      transform: translateX(8px) rotate(5deg);
    }
  
    .game-over-fracture i {
      opacity: 1;
      scale: 1;
    }
  
    .state-panel.clear-stamp::after {
      display: none;
    }
  }
  
  /* Short desktop: keep shrinking chrome so the court (and overlay) keep height. */
  @media (min-width: 761px) and (max-height: 860px) {
    .app-shell {
      padding: 10px 14px 12px;
    }

    .game-layout {
      --shell-chrome: 136px;
      --field-h: min(76dvh, calc(100dvh - var(--shell-chrome) - var(--board-labels)));
    }
  }
  
  @media (hover: hover) and (pointer: fine) {
    .rail-button:hover {
      box-shadow: 0 0 18px rgba(255, 208, 127, 0.32);
    }
  
    .primary-action:hover {
      box-shadow: 0 0 16px rgba(255, 208, 127, 0.28);
    }
  
    .title-forge-action:hover {
      box-shadow: 0 0 18px color-mix(in srgb, var(--mint) 42%, transparent);
    }
  
    .icon-button:hover {
      box-shadow: 0 0 12px rgba(124, 241, 196, 0.22);
    }
  }
  
  @media (hover: none) {
    .rail-button:active,
    .primary-action:active,
    .secondary-action:active,
    .skill-card .forge-action:active:not(:disabled) {
      filter: brightness(1.07);
      box-shadow: 0 0 16px rgba(124, 241, 196, 0.28);
    }
  }
  
  .system-readout strong.ready {
    text-shadow: 0 0 10px rgba(124, 241, 196, 0.45);
  }

@media (prefers-reduced-motion: reduce) {
  .game-over-panel *, .run-summary * { scroll-behavior: auto !important; }
}