/* ---- Toss arena ---- */
    .toss-arena { display: grid; gap: 14px; grid-template-columns: minmax(232px, 300px) minmax(340px, 1fr) minmax(232px, 300px); align-items: start; }
    .toss-card { text-align: center; padding: 14px 16px 16px; background:
      radial-gradient(ellipse 60% 42% at 50% 100%, rgba(240,176,64,0.07) 0%, transparent 70%),
      repeating-linear-gradient(90deg, rgba(var(--accent-rgb), 0.022) 0 34px, transparent 34px 68px),
      linear-gradient(160deg, rgba(var(--surface-2-rgb), 0.98), rgba(var(--surface-rgb), 0.97)); }
    .toss-matchup { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: var(--r-lg); background: rgba(3,10,7,0.55); }
    .toss-matchup-side { display: flex; align-items: center; gap: 9px; min-width: 0; text-align: left; }
    .toss-matchup-side.away { flex-direction: row-reverse; text-align: right; }
    .toss-matchup-side b { font-size: 16px; letter-spacing: 0.02em; display: block; line-height: 1.1; }
    .toss-matchup-side small { display: block; color: var(--muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .toss-matchup-mid { display: grid; justify-items: center; gap: 3px; }
    .toss-matchup-mid b { font-size: 11px; color: var(--muted); letter-spacing: 0.18em; }
    .toss-format-chip { font-size: 10px; font-weight: 800; color: var(--accent); border: 1px solid rgba(var(--accent-rgb), 0.35); padding: 1px 8px; border-radius: 999px; background: var(--accent-dim); }
    .toss-flag { width: 30px; height: 20px; border-radius: 4px; overflow: hidden; flex: none; box-shadow: 0 0 0 1px rgba(255,255,255,0.14); opacity: 0.92; }
    .toss-flag svg { width: 100%; height: 100%; display: block; }
    .toss-conditions { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 0 0 12px; }
    #tossResultTitle { font-size: 20px; margin-bottom: 4px; }
    #tossResultText { margin: 0; }
    #tossResultTitle.win { color: var(--accent); }
    #tossResultTitle.lose { color: #ffce6e; }
    #tossResultTitle.stamp { animation: resultStamp 0.55s cubic-bezier(.18,1.4,.4,1) both; }
    @keyframes resultStamp { 0% { transform: scale(1.7); opacity: 0; filter: blur(3px); } 60% { transform: scale(0.94); opacity: 1; filter: blur(0); } 100% { transform: scale(1); opacity: 1; } }

    .coin-toss-stage { --coin-flight: 118px; display: grid; justify-items: center; gap: 10px; margin: 2px auto 0; padding-top: 112px; }
    .coin-rig { position: relative; width: 100%; height: 174px; perspective: 1100px; }
    .coin-spotlight { position: absolute; left: 50%; bottom: -8px; width: 250px; height: 110px; transform: translateX(-50%); background: radial-gradient(ellipse at 50% 100%, rgba(240,176,64,0.13) 0%, rgba(240,176,64,0.04) 45%, transparent 72%); pointer-events: none; }
    .coin-shadow { position: absolute; left: 50%; bottom: 2px; width: 112px; height: 20px; border-radius: 50%; transform: translateX(-50%); background: radial-gradient(ellipse, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.22) 55%, transparent 72%); filter: blur(2px); opacity: 0.6; }
    .toss-coin { position: absolute; left: 50%; bottom: 12px; width: 150px; height: 150px; margin-left: -75px; transform-style: preserve-3d; }
    .coin-face { position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden; transform: translateZ(7px); }
    .coin-face svg { width: 100%; height: 100%; display: block; }
    .coin-tails { transform: rotateX(180deg) translateZ(7px); }
    .coin-core { position: absolute; inset: 1px; border-radius: 50%; background: #7c5212; }
    .coin-core.c1 { transform: translateZ(-5.6px); }
    .coin-core.c2 { transform: translateZ(-2.8px); }
    .coin-core.c3 { transform: translateZ(0); }
    .coin-core.c4 { transform: translateZ(2.8px); }
    .coin-core.c5 { transform: translateZ(5.6px); }
    .toss-coin.show-heads { transform: rotateX(0deg); }
    .toss-coin.show-tails { transform: rotateX(180deg); }
    /* Gentle levitation while waiting for the call. */
    .coin-toss-stage:not(.tossing) .toss-coin:not(.show-heads):not(.show-tails) { animation: coinIdle 3.4s ease-in-out infinite; }
    .coin-toss-stage:not(.tossing):not(.landed) .coin-shadow { animation: shadowIdle 3.4s ease-in-out infinite; }
    @keyframes coinIdle { 0%, 100% { transform: translateY(0) rotateX(0) rotateZ(0); } 50% { transform: translateY(-9px) rotateX(9deg) rotateZ(-2deg); } }
    @keyframes shadowIdle { 0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.6; } 50% { transform: translateX(-50%) scale(0.9); opacity: 0.45; } }
    /* End-over-end tumble: rise, hang, drop, double bounce, settle. The heads
       run ends at 2160deg (=0) and the tails run at 2340deg (=180) so the
       static show-heads/show-tails classes take over without a visible jump. */
    .toss-coin.flipping-heads { animation: coinFlipHeads 2.6s linear both; }
    .toss-coin.flipping-tails { animation: coinFlipTails 2.6s linear both; }
    @keyframes coinFlipHeads {
      0%   { transform: translateY(0) rotateX(0deg) rotateZ(0deg); animation-timing-function: cubic-bezier(.2,.7,.42,1); }
      52%  { transform: translateY(calc(var(--coin-flight, 118px) * -1)) rotateX(1290deg) rotateZ(7deg); animation-timing-function: cubic-bezier(.55,0,.83,.34); }
      76%  { transform: translateY(0) rotateX(2060deg) rotateZ(-3deg); animation-timing-function: cubic-bezier(.2,.8,.4,1); }
      85%  { transform: translateY(-17px) rotateX(2130deg) rotateZ(2deg); animation-timing-function: cubic-bezier(.5,0,.8,.4); }
      92%  { transform: translateY(0) rotateX(2160deg) rotateZ(0deg); animation-timing-function: cubic-bezier(.2,.8,.4,1); }
      96%  { transform: translateY(-5px) rotateX(2160deg) rotateZ(0deg); }
      100% { transform: translateY(0) rotateX(2160deg) rotateZ(0deg); }
    }
    @keyframes coinFlipTails {
      0%   { transform: translateY(0) rotateX(0deg) rotateZ(0deg); animation-timing-function: cubic-bezier(.2,.7,.42,1); }
      52%  { transform: translateY(calc(var(--coin-flight, 118px) * -1)) rotateX(1380deg) rotateZ(-7deg); animation-timing-function: cubic-bezier(.55,0,.83,.34); }
      76%  { transform: translateY(0) rotateX(2240deg) rotateZ(3deg); animation-timing-function: cubic-bezier(.2,.8,.4,1); }
      85%  { transform: translateY(-17px) rotateX(2310deg) rotateZ(-2deg); animation-timing-function: cubic-bezier(.5,0,.8,.4); }
      92%  { transform: translateY(0) rotateX(2340deg) rotateZ(0deg); animation-timing-function: cubic-bezier(.2,.8,.4,1); }
      96%  { transform: translateY(-5px) rotateX(2340deg) rotateZ(0deg); }
      100% { transform: translateY(0) rotateX(2340deg) rotateZ(0deg); }
    }
    .coin-toss-stage.tossing .coin-shadow { animation: shadowFlip 2.6s linear both; }
    @keyframes shadowFlip {
      0%   { transform: translateX(-50%) scale(1); opacity: 0.6; }
      52%  { transform: translateX(-50%) scale(0.4); opacity: 0.16; }
      76%  { transform: translateX(-50%) scale(1.08); opacity: 0.72; }
      85%  { transform: translateX(-50%) scale(0.86); opacity: 0.48; }
      92%  { transform: translateX(-50%) scale(1.02); opacity: 0.66; }
      100% { transform: translateX(-50%) scale(1); opacity: 0.6; }
    }
    /* Landing ring + gold spark burst. */
    .coin-toss-stage.landed .coin-rig::after { content: ''; position: absolute; left: 50%; bottom: 4px; width: 150px; height: 44px; margin-left: -75px; border-radius: 50%; border: 2px solid rgba(240,176,64,0.55); animation: landRing 0.9s ease-out both; pointer-events: none; }
    .coin-toss-stage.landed.won .coin-rig::after { border-color: rgba(var(--accent-rgb), 0.6); }
    @keyframes landRing { 0% { transform: scale(0.55); opacity: 0.9; } 100% { transform: scale(1.5); opacity: 0; } }
    .coin-sparks { position: absolute; left: 50%; bottom: 16px; width: 0; height: 0; pointer-events: none; }
    .coin-sparks i { position: absolute; left: -3px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe9ad, #f0b040 60%, rgba(240,176,64,0)); opacity: 0; }
    .coin-toss-stage.landed .coin-sparks i { animation: sparkFly 0.8s cubic-bezier(.16,.84,.44,1) both; }
    .coin-toss-stage.landed.won .coin-sparks i { background: radial-gradient(circle at 35% 30%, #c8ffe2, var(--accent) 60%, rgba(var(--accent-rgb), 0)); }
    .coin-sparks i:nth-child(1)  { --ang: -84deg; --dist: 74px; animation-delay: 0.02s; }
    .coin-sparks i:nth-child(2)  { --ang: -62deg; --dist: 60px; animation-delay: 0.05s; }
    .coin-sparks i:nth-child(3)  { --ang: -38deg; --dist: 82px; animation-delay: 0s; }
    .coin-sparks i:nth-child(4)  { --ang: -18deg; --dist: 58px; animation-delay: 0.07s; }
    .coin-sparks i:nth-child(5)  { --ang: -4deg;  --dist: 88px; animation-delay: 0.03s; }
    .coin-sparks i:nth-child(6)  { --ang: 6deg;   --dist: 64px; animation-delay: 0.06s; }
    .coin-sparks i:nth-child(7)  { --ang: 22deg;  --dist: 84px; animation-delay: 0.01s; }
    .coin-sparks i:nth-child(8)  { --ang: 44deg;  --dist: 62px; animation-delay: 0.05s; }
    .coin-sparks i:nth-child(9)  { --ang: 66deg;  --dist: 78px; animation-delay: 0.03s; }
    .coin-sparks i:nth-child(10) { --ang: 86deg;  --dist: 68px; animation-delay: 0.06s; }
    @keyframes sparkFly { 0% { opacity: 0; transform: rotate(var(--ang)) translateY(0) scale(0.4); } 14% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--ang)) translateY(calc(var(--dist) * -1)) scale(1); } }
    .coin-outcome-label { min-height: 20px; color: #9ee8bd; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.10em; }
    .coin-outcome-label.flash { animation: labelPop 0.5s cubic-bezier(.18,1.3,.4,1) both; color: #ffd97a; }
    @keyframes labelPop { 0% { transform: scale(1.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

    /* Toss action buttons */
    .toss-actions { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .coin-call-btn, .decision-btn { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: var(--r-lg); background: linear-gradient(160deg, rgba(var(--surface-2-rgb), 0.95), rgba(var(--surface-rgb), 0.92)) !important; border: 1px solid var(--line-strong); color: var(--text) !important; box-shadow: none !important; text-align: left; }
    .coin-call-btn:hover { border-color: #f0b040; background: rgba(240,176,64,0.06) !important; }
    .decision-btn:hover { border-color: var(--accent); background: var(--accent-dim) !important; }
    .coin-call-btn .call-text b, .decision-btn .call-text b { display: block; font-size: 14px; line-height: 1.15; }
    .coin-call-btn .call-text small, .decision-btn .call-text small { color: var(--muted); font-size: 10.5px; font-weight: 600; }
    .mini-coin { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 900; font-size: 14px; color: #2a1b05; background: radial-gradient(circle at 32% 28%, #ffe9ad 0 12%, #f0b040 13% 70%, #8a5b14 100%); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.18); }
    .mini-coin.tails { background: radial-gradient(circle at 32% 28%, #fff4c9 0 12%, #d49a33 13% 70%, #755017 100%); }
    .decision-btn .role-svg { width: 26px; height: 24px; flex: none; fill: none; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
    /* The opposition-calls button is the only action, so it spans the row and
       centres its label - same gold-coin material as Heads/Tails for continuity. */
    .toss-coin-btn { grid-column: 1 / -1; justify-content: center; text-align: center; }
    .toss-coin-btn .call-text { text-align: center; }
    .start-match-btn { grid-column: 1 / -1; padding: 14px; font-size: 15px; letter-spacing: 0.02em; animation: ctaPulse 2.2s ease-in-out infinite; }
    @keyframes ctaPulse { 0%, 100% { box-shadow: 0 6px 22px rgba(var(--accent-rgb), 0.25); } 50% { box-shadow: 0 6px 32px rgba(var(--accent-rgb), 0.48); } }

    /* Flanking XI panels */
    .toss-team-panel { padding: 13px; display: grid; gap: 8px; align-content: start; transition: border-color 0.25s, box-shadow 0.25s; }
    .toss-team-panel.toss-winner-panel { border-color: rgba(240,176,64,0.55); box-shadow: 0 0 0 3px rgba(240,176,64,0.10), 0 10px 30px rgba(240,176,64,0.07); }
    .toss-team-head { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
    .toss-team-head .toss-flag { width: 34px; height: 23px; }
    .toss-team-title b { font-size: 14px; display: block; line-height: 1.15; }
    .toss-team-title small { color: var(--muted); font-size: 11px; }
    .toss-team-abbrev { color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; }
    .toss-won-tag { font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; color: #2a1b05; background: linear-gradient(160deg, #ffd97a, #f0b040); border-radius: 999px; padding: 3px 8px; box-shadow: 0 0 14px rgba(240,176,64,0.35); }
    .toss-captain-hint { margin: 0; color: var(--muted); font-size: 11px; }
    .toss-xi-list { display: grid; gap: 3px; }
    .toss-player-row { display: grid; grid-template-columns: 16px 22px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 4px 8px; border-radius: 8px; border: 1px solid transparent; background: rgba(255,255,255,0.02); }
    .toss-player-row.captain { border-color: rgba(240,176,64,0.50); background: rgba(240,176,64,0.08); }
    .toss-order { color: var(--muted); font-size: 10px; font-weight: 800; text-align: right; }
    .toss-player-row .player-role-icon { width: 22px; height: 18px; border: none; background: none; padding: 0; }
    .toss-player-row .player-role-icon .role-svg { width: 18px; height: 16px; }
    .toss-player-name { display: flex; gap: 5px; align-items: center; min-width: 0; font-size: 12px; font-weight: 600; }
    .toss-player-name .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .toss-player-row .xi-ovr { font-size: 10px; padding: 1px 6px; }
    .captain-badge { width: 15px; height: 15px; border-radius: 50%; display: inline-grid; place-items: center; background: linear-gradient(160deg, #ffd97a, #f0b040); color: #2a1b05; font-size: 9.5px; font-weight: 900; box-shadow: 0 0 0 1px rgba(255,217,122,0.5); flex: none; }
    .role-badge.auto { opacity: 0.55; border-style: dashed; }
    .toss-openers-note { margin: 2px 0 0; color: var(--muted); font-size: 11px; border-top: 1px dashed var(--line); padding-top: 7px; }
    .toss-openers-note b { color: #ead2a8; font-weight: 700; }
    @media (max-width: 1120px) { .toss-arena { grid-template-columns: 1fr 1fr; } .toss-card { grid-column: 1 / -1; order: -1; } }
    @media (max-width: 620px) { .toss-arena { grid-template-columns: 1fr; } .toss-actions { grid-template-columns: 1fr; } .start-match-btn { grid-column: auto; } }
    /* Pin the toss screen to the viewport on desktop: the page never scrolls;
       if anything overruns, the XI lists / centre card scroll internally. */
    @media (min-width: 1121px) {
      #tossScreen.screen.active { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
      #tossScreen header { position: static; flex: none; }
      #tossScreen main { flex: 1 1 auto; min-height: 0; width: 100%; padding-bottom: 14px; display: block; }
      .toss-arena { height: 100%; min-height: 0; align-items: start; }
      .toss-team-panel { display: flex; flex-direction: column; min-height: 0; max-height: 100%; }
      .toss-xi-list { flex: 0 1 auto; min-height: 0; overflow-y: auto; align-content: start; padding-right: 2px; }
      .toss-card { align-self: stretch; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; justify-content: safe center; }
    }
    /* Shorter displays: smaller coin and a lower flight so the card stays compact. */
    @media (max-height: 880px) {
      .coin-toss-stage { --coin-flight: 72px; padding-top: 72px; gap: 8px; }
      .coin-rig { height: 136px; }
      .toss-coin { width: 122px; height: 122px; margin-left: -61px; }
      .coin-shadow { width: 92px; }
      .coin-toss-stage.landed .coin-rig::after { width: 122px; margin-left: -61px; }
    }
    /* Honour OS reduced-motion: kill the perpetual loops and the tumble; the JS
       lands the coin via show-heads/show-tails and shortens its timer to match. */
    @media (prefers-reduced-motion: reduce) {
      .coin-toss-stage:not(.tossing) .toss-coin:not(.show-heads):not(.show-tails),
      .coin-toss-stage:not(.tossing):not(.landed) .coin-shadow,
      .toss-coin.flipping-heads, .toss-coin.flipping-tails,
      .coin-toss-stage.tossing .coin-shadow,
      .coin-toss-stage.landed .coin-sparks i,
      #tossResultTitle.stamp, .coin-outcome-label.flash,
      .start-match-btn { animation: none; }
      .coin-toss-stage.landed .coin-rig::after { display: none; }
    }
    .screen-flash { animation: flashPulse 0.38s ease; }
    @keyframes flashPulse { 0% { filter: brightness(1); } 35% { filter: brightness(1.35); } 100% { filter: brightness(1); } }
    @media (max-width: 860px) { .grid, .tester-grid, .metric-grid, .matchup-layout { grid-template-columns: 1fr; } .team-dials { grid-template-columns: 1fr; } .hero { flex-direction: column; align-items: flex-start; } header { position: static; } .match-retro-shell { grid-template-columns: 1fr; } .retro-left-rail { min-height: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; } .retro-score-strip { grid-template-columns: repeat(3, 1fr); height: auto; gap: 6px; padding: 8px; } }
    @media (max-width: 700px) { .selection-option { grid-template-columns: minmax(0, 1fr) auto; } .selection-stats { grid-column: 1 / -1; } .selection-action { grid-column: 2; grid-row: 1; } }
    @media (max-width: 560px) { .controls, .metric-grid, .retro-control-panel { grid-template-columns: 1fr; } .innings-scores { gap: 16px; } .field-stage { padding: 12px 10px 76px; } .bowl-button { min-width: 116px; font-size: 24px !important; } }