/* Visual fun layer: palette, catalogue cards, game HUD, results, transitions.
   Loaded after engagement.css. Only overrides; the base layout stays in styles.css / ui-overhaul.css.
   The visual system is violet-led with coral, apricot and gold accents; semantic green is reserved for success.
   Every color-mix() is preceded by a plain-hex fallback for older Chromium.
   Never set `outline` here (the :focus-visible ring lives in ui-overhaul.css). */


/* ---------- Background ---------- */
body[data-active-grade="5"] { --blob: var(--coral); }
body[data-active-grade="6"] { --blob: var(--gold); }
body[data-active-grade="7"] { --blob: var(--apricot); }
body[data-active-grade="8"] { --blob: var(--violet); }

body {
  background-color: var(--cream);
  background-image:
    radial-gradient(rgba(32, 26, 54, .055) 1.2px, transparent 1.4px),
    radial-gradient(circle at 92% 8%, rgba(91, 67, 214, .12), transparent 25rem),
    radial-gradient(circle at 4% 18%, rgba(255, 184, 107, .08), transparent 22rem);
  background-image:
    radial-gradient(rgba(32, 26, 54, .055) 1.2px, transparent 1.4px),
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--blob) 12%, transparent), transparent 25rem),
    radial-gradient(circle at 4% 18%, rgba(255, 184, 107, .08), transparent 22rem);
  background-size: 28px 28px, auto, auto;
  background-attachment: scroll, fixed, fixed;
}

/* ---------- Typography ---------- */
.catalog-hero h1 { font-size: clamp(36px, 4vw, 58px); font-weight: 900; letter-spacing: -.055em; }
#hubTitle { font-size: clamp(36px, 4vw, 54px); font-weight: 900; letter-spacing: -.05em; }
.game-card__title { font-size: clamp(22px, 1.8vw, 26px); font-weight: 850; }
.topic-group__header h2 { font-weight: 900; }
.primary-nav button { font-size: 16px; }

/* ---------- Catalogue cards ---------- */
.game-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow-sm);
  transition: transform .18s var(--ease-bounce), box-shadow .18s, border-color .18s;
}
.game-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 2;
  height: 5px;
  background: var(--card-accent);
}
.game-card.is-played::after { display: none; }
.game-card__art {
  background: #f1f0fb;
  background: linear-gradient(145deg, color-mix(in srgb, var(--card-accent) 22%, #fff), color-mix(in srgb, var(--card-accent) 5%, #fff));
  border-bottom: 1px solid color-mix(in srgb, var(--card-accent) 16%, var(--line));
}
.game-card__preview { transition: transform .25s var(--ease-bounce); }
@media (hover: hover) {
  .game-card:hover { border-color: color-mix(in srgb, var(--card-accent) 45%, var(--line)); transform: translateY(-5px); box-shadow: var(--shadow-md); }
  .game-card:hover .game-card__preview { transform: scale(1.035); }
}
.game-card:active { transform: translateY(1px); }
.game-card__meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.game-card__meta-row .game-card__meta { margin-bottom: 0; }
.game-card__meta-row > .game-card__meta,
.game-card__meta > span:first-child {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 10px;
  border: 0;
  border-radius: 999px;
  background: #e6e4ff;
  background: color-mix(in srgb, var(--card-accent) 45%, #fff);
  color: var(--navy);
  font-weight: 800;
}
.card-shortcuts .button--primary { border-radius: 14px; min-height: 52px; padding: 0 22px; }
.game-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--navy);
  font-size: 12px;
  font-weight: 850;
}
.game-card__badge .card-stars { display: inline-flex; gap: 1px; font-size: 12px; }
.game-card__badge .card-stars i { color: #c7ccda; }
.game-card__badge .card-stars i.is-earned { color: var(--navy); }

/* ---------- Game HUD ---------- */
#roundStatus { position: relative; overflow: hidden; --progress: 0; }
#roundStatus::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 5px;
  width: 100%;
  background: linear-gradient(90deg, var(--violet), var(--apricot));
  transform-origin: left;
  transform: scaleX(var(--progress));
  transition: transform .35s var(--ease-out);
}
#roundStatus.is-complete::after { transform: scaleX(1); background: var(--gold); }

.game-shell__header { background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); }
.status-chip { color: var(--navy); border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow-xs); }
.status-chip strong { font-size: 22px; font-weight: 900; }
.status-chip--timer strong { font-variant-numeric: tabular-nums; }
.timer-ring { width: 24px; height: 24px; border-width: 4px; }
.round-button { border: 1px solid var(--line); color: var(--navy); }
.game-close { border: 1px solid var(--line); border-radius: 14px; font-weight: 800; }

/* ---------- Scoreboard ---------- */
.solo-score,
.class-score { border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-sm); }
.solo-score > strong { font-size: 26px; font-weight: 900; color: var(--primary-dark); }
.score-team { border: 1px solid var(--line); border-left: 7px solid var(--blue); border-radius: 16px; box-shadow: var(--shadow-xs); }
.score-team.is-active { background: var(--yellow-soft); box-shadow: inset 0 0 0 2px var(--navy); }
.score-team > b { font-size: 30px; font-weight: 900; }
.versus-chip { background: var(--navy); color: #fff; font-weight: 900; }
.class-energy > i { background: linear-gradient(90deg, var(--violet), var(--gold)); }
.solo-score.is-hot > span:first-child { color: var(--coral-dark); font-weight: 900; }
.solo-score.is-hot > span:first-child::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 18px;
  margin-right: 4px;
  vertical-align: -3px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 18'%3E%3Cpath d='M8 0c1 4 5 5 5 10a5 5 0 0 1-10 0c0-2 1-3 2-4 0 2 1 3 2 3 1-3-1-6 1-9z' fill='%23e2543f'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Results ---------- */
.results-card {
  border: 1px solid var(--line);
  border-radius: 30px;
  box-shadow: var(--shadow-lg);
  background: #fff radial-gradient(rgba(91, 67, 214, .055) 1.3px, transparent 1.5px) 0 0 / 24px 24px;
}
.results-burst {
  width: auto;
  min-height: 0;
  aspect-ratio: auto;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.mw-mascot {
  display: block;
  width: clamp(104px, 13vw, 156px);
  height: auto;
  aspect-ratio: 3 / 4;
  overflow: visible;
  animation: mwMascotIn .5s var(--ease-bounce) 1 both;
}
@keyframes mwMascotIn {
  from { opacity: 0; transform: translateY(9px) scale(.74) rotate(-8deg); }
  to { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
.result-stars span.is-earned { color: var(--gold); filter: drop-shadow(0 2px 0 rgba(32,26,54,.24)); }
.result-rank {
  --rank: var(--lavender);
  display: inline-flex;
  gap: 8px;
  align-items: baseline;
  margin: 0 0 14px;
  padding: 6px 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--line));
  border-radius: 999px;
  background: var(--rank);
  color: var(--navy);
}
.result-rank strong { font-size: 20px; font-weight: 900; }
.result-metrics > div { border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: var(--shadow-xs); }
.result-metrics strong { font-size: clamp(26px, 3vw, 36px); font-weight: 900; color: var(--primary-dark); }
.results-actions .button--primary { border-radius: 15px; min-height: 60px; font-size: 18px; }

/* ---------- Arena results ---------- */
#arenaBody:has(> .arena-result) {
  display: grid;
  place-items: safe center;
  padding: clamp(20px, 4vw, 52px);
  background:
    radial-gradient(circle at 12% 18%, rgba(247, 201, 72, .2), transparent 22rem),
    radial-gradient(circle at 88% 82%, rgba(83, 71, 227, .12), transparent 25rem),
    #f6f7fb;
}
.arena-dialog.is-finished [data-arena="pause"] { display: none; }
.arena-dialog .arena-result {
  position: relative;
  display: grid;
  width: min(900px, 100%);
  padding: clamp(28px, 4vw, 48px);
  place-items: center;
  overflow: hidden;
  background: #fff radial-gradient(rgba(91, 67, 214, .06) 1.3px, transparent 1.5px) 0 0 / 24px 24px;
  border: 1px solid var(--line);
  border-radius: 32px;
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.arena-result__badge {
  position: absolute;
  top: 22px;
  right: 24px;
  display: block;
  width: auto;
  height: auto;
  padding: 0;
  color: var(--gold-dark, var(--gold));
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: 28px;
  transform: rotate(8deg);
}
.arena-dialog .arena-result::before {
  position: absolute;
  inset: 0 0 auto;
  height: 10px;
  background: linear-gradient(90deg, var(--primary) 0 33%, var(--gold) 33% 66%, var(--apricot) 66%);
  content: "";
}
.arena-result__announcement { display: grid; justify-items: center; }
.arena-result__art {
  display: grid;
  width: clamp(126px, 16vw, 176px);
  height: clamp(164px, 18vw, 196px);
  margin-top: 2px;
  place-items: end center;
  background: transparent;
}
.arena-result__art .mw-mascot { width: min(100%, 136px); height: auto; }
.arena-result__pi {
  display: grid;
  width: auto;
  min-height: 72px;
  aspect-ratio: auto;
  place-items: center;
  color: var(--navy);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: 54px;
  font-weight: 900;
}
.arena-result__kicker {
  margin: 0 0 6px;
  color: var(--primary-dark);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.arena-dialog .arena-result h3 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.08;
  letter-spacing: -.04em;
}
.arena-result__announcement h3::after {
  display: block;
  width: 88px;
  height: 6px;
  margin: 14px auto 0;
  background: linear-gradient(90deg,var(--primary) 0 50%,var(--apricot) 50%);
  border-radius: 999px;
  content: "";
}
.arena-result .arena-scores {
  display: grid;
  width: min(680px, 100%);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 24px 0 18px;
  gap: 14px;
}
.arena-result .arena-side {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: 15px 18px;
  gap: 2px 14px;
  color: var(--side-identity-fg);
  background: var(--side-identity-bg);
  border: 2px solid var(--side-identity-border);
  text-align: left;
}
.arena-result .arena-side > span {
  overflow-wrap: anywhere;
  font-weight: 850;
}
.arena-result .arena-side strong {
  grid-row: 1 / 3;
  grid-column: 2;
  font-size: clamp(30px, 4vw, 43px);
  font-variant-numeric: tabular-nums;
}
.arena-result .arena-side small {
  font-size: 12px;
  font-weight: 800;
}
.arena-result .arena-side__stats {
  display: flex;
  grid-row: 3;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  margin-top: 9px;
  gap: 5px;
}
.arena-result .arena-side__stats span {
  padding: 4px 7px;
  color: var(--navy);
  background: rgba(255,255,255,.74);
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}
.arena-result .arena-side.is-tied {
  border-color: var(--side-identity-border);
  border-style: dashed;
  opacity: .9;
}
.arena-result .arena-side.is-winner {
  border-color: var(--side-identity-border);
  box-shadow: 0 7px 0 var(--side-identity-shadow);
  transform: translateY(-3px);
}
.arena-result__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 2px 0 14px;
  gap: 8px;
}
.arena-result__facts span {
  padding: 7px 13px;
  color: var(--navy);
  background: #edf0ff;
  border: 1px solid #c9c7f1;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
}
.arena-result__prompt,
.arena-dialog .arena-result .iw-result-detail {
  width: min(680px, 100%);
  margin: 0 0 14px;
  padding: 13px 17px;
  color: var(--navy);
  background: #fff7dc;
  border: 1px solid #e8cc6b;
  border-radius: 14px;
  line-height: 1.5;
}
.arena-dialog .arena-result .iw-result-detail {
  background: var(--violet-soft);
  border-color: #c9bff4;
  font-size: 17px;
  font-weight: 800;
}
.arena-result__review {
  width: min(680px, 100%);
  margin: 18px 0 0;
  border-block: 1px solid var(--line);
  text-align: left;
}
.arena-result__review summary {
  min-height: 48px;
  padding: 13px 4px;
  cursor: pointer;
  font-weight: 800;
}
.arena-result__review[open] {
  max-height: 210px;
  padding-bottom: 10px;
  overflow: auto;
}
.arena-result__review p { margin: 8px 4px; line-height: 1.45; }
.arena-result__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.arena-result__actions .button--primary {
  min-width: 190px;
  min-height: 58px;
  border-radius: 999px;
  font-size: 17px;
}
.arena-result__actions .button--ghost { min-width:170px; min-height:58px; border-radius:999px; font-size:16px; }
body.high-contrast .arena-dialog .arena-result,
body.high-contrast .arena-result .arena-side,
body.high-contrast .arena-result__prompt,
body.high-contrast .arena-dialog .arena-result .iw-result-detail { border-color: #000; }
body.high-contrast .duel-lock,
body.high-contrast .arena-result__badge { border-color:#000; }
@media (max-height: 820px) and (min-width: 681px) {
  .arena-dialog .arena-result { padding: 22px 32px; }
  .arena-result__art { width: 132px; height: 164px; }
  .arena-result__art .mw-mascot { width: 120px; }
  .arena-dialog .arena-result h3 { font-size: clamp(29px, 3.2vw, 40px); }
  .arena-result .arena-scores { margin: 14px 0 12px; }
  .arena-result .arena-side { padding: 10px 15px; }
  .arena-result__facts { margin-bottom: 9px; }
  .arena-result__prompt,
  .arena-dialog .arena-result .iw-result-detail { margin-bottom: 9px; padding: 9px 15px; }
  .arena-result__review { margin-bottom: 10px; }
  .arena-result__review summary { min-height: 40px; padding: 9px 4px; }
  .arena-result__actions .button--primary { min-height: 50px; }
}
@media (max-width: 680px) {
  #arenaBody:has(> .arena-result) { padding: 14px 10px; }
  .arena-dialog .arena-result { padding: 24px 14px; border-radius: 22px; }
  .arena-result__art { width: 128px; height: 164px; }
  .arena-result__art .mw-mascot { width: 112px; }
  .arena-result .arena-scores { gap: 8px; }
  .arena-result .arena-side { padding: 11px 10px; gap: 2px 7px; }
  .arena-result .arena-side strong { font-size: 27px; }
  .arena-result__actions { width: 100%; flex-direction: column; }
  .arena-result__actions .button { width: 100%; }
}

/* ---------- Empty state ---------- */
.empty-state { border: 3px solid var(--navy); border-radius: 28px; box-shadow: var(--shadow-pop); background: #fff; }
.empty-state__symbol { background: var(--gold); border: 3px solid var(--navy); transform: rotate(-8deg); font-size: 38px; }

/* ---------- Transitions ---------- */
.view.is-active,
#classroomHub:not([hidden]),
#suggestionsView:not([hidden]) { animation: mwViewIn .3s var(--ease-out) both; }
@keyframes mwViewIn { from { opacity: 0; transform: translateY(10px); } }
.game-loading__shape { animation: mwWobble 1.2s ease-in-out infinite; }
@keyframes mwWobble { 50% { transform: rotate(6deg) scale(1.05); } }

/* ---------- Reduced motion ---------- */
/* body.motion-on marks an explicit user opt-in to motion that must override the OS preference. */
@media (prefers-reduced-motion: reduce) {
  body:not(.motion-on) .game-card,
  body:not(.motion-on) .game-card__preview,
  body:not(.motion-on) #roundStatus::after { transition: none; }
  body:not(.motion-on) .game-card:hover,
  body:not(.motion-on) .game-card:active,
  body:not(.motion-on) .game-card:hover .game-card__preview { transform: none; }
  body:not(.motion-on) .mw-mascot,
  body:not(.motion-on) .mw-mascot *,
  body:not(.motion-on) .mw-panda__limb,
  body:not(.motion-on) .mw-panda__entrance,
  body:not(.motion-on) .mw-panda__lane,
  body:not(.motion-on) .view.is-active,
  body:not(.motion-on) #classroomHub:not([hidden]),
  body:not(.motion-on) #suggestionsView:not([hidden]),
  body:not(.motion-on) .game-loading__shape {
    animation: none;
    transition: none;
  }
}
body.reduced-motion .game-card,
body.reduced-motion .game-card__preview,
body.reduced-motion #roundStatus::after { transition: none; }
body.reduced-motion .game-card:hover,
body.reduced-motion .game-card:active,
body.reduced-motion .game-card:hover .game-card__preview { transform: none; }
body.reduced-motion .mw-mascot,
body.reduced-motion .mw-mascot *,
body.reduced-motion .mw-panda__limb,
body.reduced-motion .mw-panda__entrance,
body.reduced-motion .mw-panda__lane,
body.reduced-motion .view.is-active,
body.reduced-motion #classroomHub:not([hidden]),
body.reduced-motion #suggestionsView:not([hidden]),
body.reduced-motion .game-loading__shape {
  animation: none;
  transition: none;
}

/* ---------- Panda mascot ---------- */
.mw-mascot {
  display: block;
  width: clamp(104px, 13vw, 156px);
  height: auto;
  aspect-ratio: 3 / 4;
  overflow: visible;
  transform-origin: center bottom;
  animation: mwMascotIn .5s var(--ease-bounce) 1 both;
}
.mw-panda__head,
.mw-panda__body,
.mw-panda__arm,
.mw-panda__paw,
.mw-panda__leg,
.mw-panda__foot,
.mw-panda__eyes,
.mw-panda__entrance,
.mw-panda__lane,
.mw-panda__contact-shadow {
  transform-box: fill-box;
  transform-origin: center;
}
.mw-panda__head { transform-origin: 50% 72%; }
.mw-panda__body { transform-origin: 50% 100%; }
.mw-panda__arm { transform-origin: 50% 12%; }
.mw-panda__paw { transform-origin: center; }
.mw-panda__leg { transform-origin: 50% 16%; }
.mw-panda__foot { transform-origin: center bottom; }
.mw-panda__eyes { transform-origin: center; }
.mw-panda__entrance { animation: mwPandaEntrance .45s ease-out 1 both; }
.mw-panda__lane,
.mw-panda__contact-shadow,
.mw-panda__platform {
  animation: none;
  transform: none;
}

.mw-mascot--idle .mw-panda__body { animation: mwPandaIdleSettle 2.8s ease-in-out 1 both; }
.mw-mascot--idle .mw-panda__eyes { animation: mwPandaBlink 3.2s ease-in-out 1 both; }

.mw-mascot--point .mw-panda__body { transform: rotate(-2deg) translate(-2px, -1px); animation: mwPandaPoint .72s ease-out 1 both; }
.mw-mascot--point .mw-panda__head { transform: rotate(-3deg) translate(-2px, -1px); animation: mwPandaPointNod .72s ease-out 1 both; }
.mw-mascot--point .mw-panda__arm--right { transform: rotate(-46deg) translate(-7px, -7px); }
.mw-mascot--point .mw-panda__paw--right { transform: translate(-10px, -26px); }

.mw-mascot--laugh .mw-panda__body { transform: translateY(-1px); animation: mwPandaLaughBody .95s ease-in-out 1 both; }
.mw-mascot--laugh .mw-panda__head { transform: rotate(-1deg) translateY(-1px); animation: mwPandaLaugh .95s ease-in-out 1 both; }
.mw-mascot--laugh .mw-panda__arm--left { transform: rotate(24deg) translate(6px, -4px); }
.mw-mascot--laugh .mw-panda__arm--right { transform: rotate(-24deg) translate(-6px, -4px); }
.mw-mascot--laugh .mw-panda__paw--left { transform: translate(10px, -17px); }
.mw-mascot--laugh .mw-panda__paw--right { transform: translate(-10px, -17px); }

.mw-mascot--clap .mw-panda__body { animation: mwPandaClapBody 1.08s ease-in-out 1 both; }
.mw-mascot--clap .mw-panda__arm--left { transform: rotate(-19deg) translate(15px, -13px); }
.mw-mascot--clap .mw-panda__arm--right { transform: rotate(19deg) translate(-15px, -13px); }
.mw-mascot--clap .mw-panda__paw--left { transform: translate(13px, -27px); animation: mwPandaClapLeft .96s ease-in-out 1 both; }
.mw-mascot--clap .mw-panda__paw--right { transform: translate(-13px, -27px); animation: mwPandaClapRight .96s ease-in-out 1 both; }

.mw-mascot--think .mw-panda__body { transform: rotate(1deg); animation: mwPandaThinkBody .8s ease-in-out 1 both; }
.mw-mascot--think .mw-panda__arm--right { transform: rotate(-58deg) translate(-9px, -10px); }
.mw-mascot--think .mw-panda__paw--right { transform: translate(-12px, -28px); }
.mw-mascot--think .mw-panda__head { transform: rotate(4deg); animation: mwPandaThink .8s ease-in-out 1 both; }

.mw-mascot--recovery .mw-panda__body { transform: scale(1.01); animation: mwPandaRecovery .85s ease-out 1 both; }
.mw-mascot--recovery .mw-panda__head { transform: rotate(-1deg); }
.mw-mascot--recovery .mw-panda__arm--left { transform: rotate(28deg) translate(7px, -2px); }
.mw-mascot--recovery .mw-panda__arm--right { transform: rotate(-28deg) translate(-7px, -2px); }
.mw-mascot--recovery .mw-panda__paw--left { transform: translate(7px, -9px); }
.mw-mascot--recovery .mw-panda__paw--right { transform: translate(-7px, -9px); }

@keyframes mwPandaEntrance {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes mwPandaIdleSettle {
  0%, 100% { transform: translateY(0) scale(1); }
  42% { transform: translateY(1px) scaleY(1.018); }
  68% { transform: translateY(-.5px) scaleY(1.008); }
}
@keyframes mwPandaBlink {
  0%, 44%, 54%, 80%, 90%, 100% { transform: scaleY(1); }
  48%, 52%, 84%, 88% { transform: scaleY(.12); }
}
@keyframes mwPandaPoint {
  0% { transform: rotate(0) translate(0, 0); }
  55% { transform: rotate(-3deg) translate(-2px, -2px); }
  100% { transform: rotate(-2deg) translate(-2px, -1px); }
}
@keyframes mwPandaPointNod {
  0% { transform: rotate(0) translate(0, 0); }
  55% { transform: rotate(-5deg) translate(-2px, -2px); }
  100% { transform: rotate(-3deg) translate(-2px, -1px); }
}
@keyframes mwPandaLaughBody {
  0%, 100% { transform: translateY(-1px) rotate(0); }
  26% { transform: translateY(-3px) rotate(-1deg); }
  52% { transform: translateY(0) rotate(1deg); }
  78% { transform: translateY(-2px) rotate(-1deg); }
}
@keyframes mwPandaLaugh {
  0%, 100% { transform: rotate(-1deg) translateY(-1px); }
  24% { transform: rotate(-4deg) translateY(-3px); }
  48% { transform: rotate(2deg) translateY(0); }
  72% { transform: rotate(-3deg) translateY(-2px); }
}
@keyframes mwPandaClapBody {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-1px) scaleY(1.01); }
  60% { transform: translateY(0); }
}
@keyframes mwPandaClapLeft {
  0%, 100% { transform: translate(13px, -27px) scale(1); }
  16%, 48%, 80% { transform: translate(13px, -27px) scale(.87); }
  32%, 64% { transform: translate(13px, -27px) scale(1.02); }
}
@keyframes mwPandaClapRight {
  0%, 100% { transform: translate(-13px, -27px) scale(1); }
  16%, 48%, 80% { transform: translate(-13px, -27px) scale(.87); }
  32%, 64% { transform: translate(-13px, -27px) scale(1.02); }
}
@keyframes mwPandaThinkBody {
  0%, 100% { transform: rotate(1deg); }
  48% { transform: rotate(2deg) translateY(-1px); }
}
@keyframes mwPandaThink {
  0% { transform: rotate(0); }
  48% { transform: rotate(6deg) translateY(-1px); }
  100% { transform: rotate(4deg); }
}
@keyframes mwPandaRecovery {
  0% { transform: scale(.98) translateY(2px); }
  54% { transform: scale(1.018) translateY(-2px); }
  100% { transform: scale(1.01) translateY(0); }
}

#gameShell:has(#pauseCurtain:not([hidden])) .mw-mascot,
#gameShell:has(#pauseCurtain:not([hidden])) .mw-mascot * {
  animation-play-state: paused;
  transition: none;
}

/* ---------- Referee-style simultaneous-duel results ---------- */
.arena-dialog .arena-result.arena-result--disqualification {
  --referee-ink: #181622;
  --referee-paper: #fffdf8;
  border: 3px solid var(--referee-ink);
  background:
    repeating-linear-gradient(135deg, rgba(24,22,34,.035) 0 14px, transparent 14px 28px),
    var(--referee-paper);
  box-shadow: 0 16px 0 rgba(24,22,34,.16), var(--shadow-lg);
}
.arena-dialog .arena-result.arena-result--disqualification::before {
  height: 14px;
  background: repeating-linear-gradient(135deg, var(--referee-ink) 0 18px, var(--gold) 18px 36px);
  content: "";
}
.arena-result__disqualification {
  width: min(680px, 100%);
  margin: 0 0 16px;
  padding: 13px 18px;
  color: var(--referee-ink);
  background: var(--apricot-soft);
  border: 2px solid var(--coral-dark);
  border-left: 8px solid var(--coral);
  border-radius: 12px;
  font-weight: 800;
  line-height: 1.45;
}
.arena-result--disqualification .arena-result__kicker { color: var(--coral-dark); }
.arena-result--disqualification .arena-result__badge { color: var(--referee-ink); background: transparent; }
.arena-result--disqualification .arena-side.is-disqualified {
  border: 2px dashed var(--side-identity-border);
  box-shadow: 0 4px 0 var(--side-identity-shadow);
  opacity: .68;
  filter: saturate(.78);
}
.arena-result--disqualification .arena-side.is-winner {
  border: 3px solid var(--side-identity-border);
  box-shadow: 0 9px 0 var(--side-identity-shadow);
  transform: translateY(-5px) scale(1.02);
}
.arena-result--disqualification .arena-side.is-winner::before {
  content: "★";
  grid-column: 1 / -1;
  justify-self: start;
  color: var(--side-identity-fg);
  font-size: 18px;
  font-weight: 950;
  line-height: 1;
}
.arena-result--disqualification .arena-side.is-winner strong { color: var(--side-identity-fg); }