/* Arcade is a complete local presentation preset. Modern/Classic keep their styles. */
.arcade-style-note, .arcade-ui-note { color: #a9bdbb; font-size: 12px; line-height: 1.5; margin: 10px 0 0; }
.arcade-ui-note { display: none; margin: 0 0 10px; }
html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .arcade-ui-note { display: block; }
#optionsGameFrameArcadeBtn, #optionsGameFrameBronzeBtn { grid-column: auto; }
.options-frame-preview-arcade .options-frame-preview-board {
  border: 4px ridge #91b7df; border-radius: 9px;
  background: radial-gradient(ellipse at 50% 0, #986ded 0 14%, transparent 15%), linear-gradient(145deg, #315da4, #19264a);
  box-shadow: inset 0 0 0 2px #193d43, 0 0 0 1px #5d4831;
}
.options-frame-preview-arcade .options-frame-preview-tower {
  border: 3px ridge #d2b477; border-radius: 16px;
  background: repeating-linear-gradient(0deg, #493e2b 0 2px, transparent 2px 9px), linear-gradient(90deg, #813a20, #ffd580 48%, #c16625);
}
html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .app-frame {
  background: radial-gradient(ellipse at 8% 15%, #3156a455, transparent 52%), radial-gradient(ellipse at 92% 85%, #66368833, transparent 55%), #090f23;
}
html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .app-frame::before,
html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .app-frame::after { opacity: .25; }
html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .stage {
  background: linear-gradient(125deg, #23376288, #0c1327d9 55%, #2d204599);
  border-color: #88a6dc33;
  box-shadow: inset 0 0 40px #020c14aa, 0 16px 52px #0005;
}
html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .stage:not(.rpg-mode) {
  --arcade-center-offset: calc((148px - var(--hud-width) - var(--hud-gap)) * .5);
  width: calc(960px + var(--hud-width) + var(--hud-gap) + 24px + 148px);
  transform: translateX(var(--arcade-center-offset));
}
/* The Canvas instrument replaces the legacy DOM meter in this preset. */
html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) #feverMeter { visibility: hidden; pointer-events: none; }
html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .stage:not(.rpg-mode) {
  --hud-width: var(--arcade-fullscreen-hud-width, 248px);
}
html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .hud-left { gap: 10px; animation: none; color: #e5e7d2; }
html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .hud-left::after { background: none; }
html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .hud-modern-brand {
  padding-right: 42px; gap: 6px; grid-template-columns: 30px minmax(0, 1fr) auto;
  border: 2px solid #aa9bd3; border-radius: 13px 13px 7px 7px;
  background: radial-gradient(ellipse at 24% 0%, #ae80e677, transparent 65%), linear-gradient(165deg, #6941a2, #38285f 60%, #201d40);
  box-shadow: inset 0 1px #ecdeff99, inset 0 -3px #18142f, 0 3px 8px #0005;
}
html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .hud-modern-brand::after { background: linear-gradient(90deg, #e1bf7a, transparent); }
html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .hud-modern-brand-mark {
  clip-path: none; border-radius: 50%; width: 28px; height: 28px;
  border: 2px ridge #ecd39b; color: #273b39; background: linear-gradient(135deg, #f1dba3, #b88e50);
  box-shadow: inset 0 0 0 2px #594c32, 0 2px 4px #0007;
}
html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .hud-modern-brand-copy strong { color: #fff1ca; font-size: 13px; letter-spacing: 1.1px; }
html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .hud-modern-brand-copy em { color: #aabeb0; letter-spacing: 1.6px; }
html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .hud-modern-live { font-size: 7px; letter-spacing: .3px; color: #cfb784; }
html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .hud-modern-live i { background: #edb966; box-shadow: 0 0 5px #ffca6a88; animation: none; width: 4px; height: 4px; }
html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .hud-left > .fullscreen-toggle {
  top: 12px; right: 11px; width: 26px; height: 26px;
  color: #f4edff; border: 1px solid #baa4ed; background: linear-gradient(#7554a6, #302951);
  box-shadow: inset 0 1px #d3bb7766, 0 2px 4px #0006;
}
html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .fullscreen-toggle:focus-visible { outline: 2px solid #ffe4a6; outline-offset: 2px; }
html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .hud-team-block,
html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .hud-meta-block {
  border: 2px solid #7699c4; border-radius: 15px;
  background: radial-gradient(ellipse at 12% 0%, rgba(var(--hud-team-accent-rgb), .3), transparent 64%), linear-gradient(165deg, #285795, #19335e 48%, #101e3b);
  box-shadow: inset 0 0 0 2px #122644, inset 0 0 0 3px #c7e5ff40, 0 5px 12px #0006;
}
html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .hud-team-block { padding: 17px 12px 11px; gap: 8px; }
html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .hud-team-block::after,
html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .hud-meta-block::after {
  inset: 6px; width: auto; height: auto; transform: none; padding: 0;
  border: 0; border-radius: 10px; animation: none;
  background: radial-gradient(circle at 3px 3px, #efd297 0 1px, #735732 1.5px 2.5px, transparent 3px), radial-gradient(circle at calc(100% - 3px) calc(100% - 3px), #efd297 0 1px, #735732 1.5px 2.5px, transparent 3px);
  mask: none; -webkit-mask: none;
}
html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .hud-team-block.turn-active {
  border-color: #acdbfa;
  box-shadow: inset 0 0 0 2px #172d50, inset 0 0 0 3px #a6ddff88, 0 0 13px rgba(var(--hud-team-accent-rgb), .18), 0 5px 12px #0006;
}
html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .hud-team-block.turn-active::before {
  top: 0; right: 14px; padding: 3px 8px; border-radius: 0 0 7px 7px;
  color: #203e3c; background: linear-gradient(#f4dfaa, #b59355); box-shadow: 0 2px 4px #0006;
}
/* A soft moving reflection follows the existing active-turn class only.
   Shared teams highlight the individual player's row, not every teammate. */
html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .hud-left { --turn-glint-rgb: 223, 247, 255; }
html[data-game-frame="bronze"] .hud-left { --turn-glint-rgb: 255, 229, 180; }
html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .hud-team-block.turn-active:not(.hud-team-block-shared)::after,
html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .hud-team-block-shared .hud-team-player.turn-active::after {
  content: ""; position: absolute; inset: 3px; width: auto; height: auto;
  padding: 2px; border: 0; border-radius: 11px; transform: none;
  background: linear-gradient(115deg,
    transparent 0 32%,
    rgba(var(--hud-team-accent-rgb), .16) 40%,
    rgba(var(--hud-team-accent-rgb), .65) 47%,
    rgba(var(--turn-glint-rgb), .9) 50%,
    rgba(var(--hud-team-accent-rgb), .45) 54%,
    transparent 64% 100%);
  background-size: 260% 100%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: arcade-turn-shimmer 5.6s ease-in-out infinite;
  pointer-events: none;
}
html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .hud-team-block-shared .hud-team-player.turn-active::after { inset: 0; padding: 1.5px; border-radius: inherit; }
@keyframes arcade-turn-shimmer {
  0% { background-position: 125% 0; }
  65%, 100% { background-position: -125% 0; }
}
html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .hud-team-title { color: #f3e4c2; text-shadow: 0 2px 3px #000a; }
html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .hud-team-level-prominent-label { color: #a8bcae; font-size: 8px; }
html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .hud-team-level-prominent-value { color: #ffe0a0; font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 0 8px #ffba4f44; }
html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .hud-team-avatar { border: 2px solid #c1a56a; box-shadow: 0 0 0 2px #0a2830, 0 0 0 3px #a38a4e88, 0 4px 7px #0007; }
html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .hud-team-balls { color: #b9ffe5; text-shadow: 0 0 8px #56dbb133, 0 2px 3px #000a; }
html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .hud-team-balls-label { color: #a0b9ac; }
html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .hud-team-hero-name { border-color: #8dacdd66; background: #0f2144; color: #bedcff; border-radius: 6px; }
html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .hud-total-line { border-color: #ceb37533; color: #a2b4aa; }
html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .hud-total-line .hud-score-value { color: #e3d1a7; text-shadow: none; }
html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .hud-meta-block { padding: 36px 12px 12px; border-color: #9584bc; background: radial-gradient(ellipse at 100% 0%, #8957ac44, transparent 60%), linear-gradient(145deg, #393657, #201f3a 75%); box-shadow: inset 0 0 0 2px #201d38, inset 0 0 0 3px #d5c4ff33, 0 5px 12px #0006; }
html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .hud-meta-block::before { color: #e3d0ff; left: 14px; }
html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .hud-meta-block > .hud-line:first-child { border: 1px solid #ecad7377; border-radius: 10px; background: radial-gradient(ellipse at 90% 50%, #e5883555, transparent 70%), linear-gradient(110deg, #512d35, #342134); box-shadow: inset 0 2px 5px #0005; }
html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .hud-team-block-opponent { background: radial-gradient(ellipse at 12% 0%, #ee826944, transparent 64%), linear-gradient(165deg, #733e64, #3b294c 55%, #241c38); }
html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .hud-team-block[data-hud-team="team3"] { background: linear-gradient(165deg, #644997, #312453 55%, #211b37); }
/* Seat colors stay with the player when active teams and the on-deck slot rotate. */
html[data-game-frame="arcade"] .hud-team-block-three-way[data-hud-seat="1"] { background: linear-gradient(165deg, #286697, #193b62 55%, #101e3b); }
html[data-game-frame="arcade"] .hud-team-block-three-way[data-hud-seat="2"] { background: linear-gradient(165deg, #994f45, #622f39 55%, #321e2e); }
html[data-game-frame="arcade"] .hud-team-block-three-way[data-hud-seat="3"] { background: linear-gradient(165deg, #287c54, #1c493b 55%, #152d2e); }
html[data-game-frame="arcade"] .hud-team-block-three-way[data-hud-seat] { border-color: rgba(var(--hud-team-accent-rgb), .65); }
html[data-game-frame="arcade"] .hud-team-block-three-way[data-hud-seat].turn-active { border-color: var(--hud-team-accent); }
/* Three individual cards need a denser layout than the two-team deck.
   Keep the same playfield scale and leave room for the complete Arena Intel card. */
html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .hud-left:has(.hud-team-block-three-way) { gap: 8px; }
html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .hud-team-scores:has(.hud-team-block-three-way) { gap: 8px; }
html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .hud-team-block-three-way { padding: 16px 12px 8px; gap: 5px; }
html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .hud-team-block-three-way .hud-team-avatar-stack { grid-template-columns: 44px 26px; min-width: 75px; }
html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .hud-team-block-three-way .hud-team-avatar-shell { min-width: 44px; }
html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .hud-team-block-three-way .hud-team-avatar { width: 44px; height: 44px; }
html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .hud-team-block-three-way .hud-team-title { min-width: 0; }
html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .hud-team-block-three-way .hud-team-player { min-height: 24px; padding: 3px 8px; }
html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .hud-team-block-three-way .hud-total-line { min-height: 23px; padding: 3px 8px; }
html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .hud-team-block .score-pulse,
html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .hud-team-block .score-pulse-low,
html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .hud-team-block .score-pulse-med,
html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .hud-team-block .score-pulse-high { animation: arcade-score-settle 400ms ease-out; }
@keyframes arcade-score-settle { 0%, 100% { transform: scale(1); } 35% { transform: scale(1.055); color: #fff2cd; text-shadow: 0 0 13px #f4bd65aa; } }
html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .replay-controls.instrument-replay .replay-btn {
  border-color: #c3b4ed;
  background: radial-gradient(ellipse at 35% 22%, #a384d9, #665098 45%, #303660 78%);
  box-shadow: inset 0 2px 3px #ecddff88, inset 0 -4px 8px #17182f, 0 2px 3px #06151dcc;
}
html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .replay-controls.instrument-replay .replay-actions { border-color: #b0b9e9; background: #302e5b; }
html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .replay-controls.instrument-replay .replay-actions .replay-mini { border-color: #a3a3d2; color: #f4eaff; background: linear-gradient(#6c5898, #353759); }
@media (prefers-reduced-motion: reduce) {
  html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .hud-left *, html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .hud-left *::before, html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .hud-left *::after { animation: none !important; }
  html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .hud-team-block.turn-active:not(.hud-team-block-shared)::after,
  html:is([data-game-frame="arcade"], [data-game-frame="bronze"]) .hud-team-block-shared .hud-team-player.turn-active::after {
    background: rgba(var(--hud-team-accent-rgb), .45);
  }
}