/* 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 follows the famolu.com family: navy/royal blue with sky and gold accents, orange for
   the second player; 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: the page canvas lives in ui-overhaul.css. ---------- */

/* ---------- Typography ---------- */
.topic-group__header h2 { font-weight: 800; }

/* ---------- Catalogue cards ---------- */
.game-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease-bounce), box-shadow .22s var(--ease-out), border-color .22s;
}
.game-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 2;
  height: 4px;
  background: var(--card-accent);
}
.game-card.is-played::after { display: none; }
.game-card__art {
  position: relative;
  background-color: #eef5fc;
  background-image: radial-gradient(rgba(11, 27, 51, .07) 1px, transparent 1.2px);
  background-size: 14px 14px;
  border-bottom: 1px solid var(--line);
}
html[data-theme="dark"] .game-card__art {
  background-color: #14223a;
  background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.2px);
}
body.high-contrast .game-card__art { background: #ffffff; }
.game-card__preview { transition: transform .3s var(--ease-bounce); }
@media (hover: hover) {
  .game-card:hover { border-color: color-mix(in srgb, var(--card-accent) 55%, var(--line)); transform: translateY(-5px); box-shadow: var(--shadow-md), 0 0 0 1px color-mix(in srgb, var(--card-accent) 30%, transparent); }
  .game-card:hover .game-card__preview { transform: scale(1.04) rotate(-.5deg); }
}
.game-card:active { transform: translateY(1px); }
.game-card__title { font-size: clamp(20px, 1.6vw, 23px); font-weight: 750; letter-spacing: -.02em; }
.game-card__meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.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: 26px;
  padding: 3px 11px;
  border: 0;
  border-radius: 999px;
  background: var(--brand-tint);
  color: var(--brand-ink);
  font-size: 12px;
  font-weight: 650;
}
.card-shortcuts { gap: 8px; }
.card-shortcuts .button { min-height: 48px; border-radius: 12px; }
.card-shortcuts .button--primary { min-height: 50px; padding: 0 24px; font-size: 16px; }
.card-shortcuts [data-favorite] { width: 50px; min-width: 50px; padding: 0; font-size: 21px; color: var(--ink-3); }
.card-shortcuts [data-favorite][aria-pressed="true"] { color: var(--gold-ink); background: var(--gold-tint); }
/* Laboratuvar launchers (plan 102 §3.2): the topic cards' button and the unit rows' launchers are outlined, so they read as
   buttons. The 2px edge is 3:1 or better on what it sits on: --brand in light, --brand-ink in dark, ink in high contrast. */
.button.lab-launcher { --lab-edge: var(--brand); min-height: 52px; color: var(--brand-ink); background: var(--surface); border: 2px solid var(--lab-edge); }
html[data-theme="dark"] .button.lab-launcher { --lab-edge: var(--brand-ink); }
body.high-contrast .button.lab-launcher { --lab-edge: var(--ink); color: var(--ink); }
html:not([data-input="touch"]) .button.lab-launcher:hover { background: var(--brand-tint); border-color: var(--lab-edge); }
.lab-launcher__icon { flex: none; width: 22px; height: 22px; }
.lab-launcher__text { display: grid; line-height: 1.2; text-align: left; }
.lab-launcher__text small { color: var(--ink-2); font-size: 12px; font-weight: 600; }
.unit-labs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 20px; }
.unit-labs h3 { margin: 0; font-size: 19px; font-weight: 850; letter-spacing: -.01em; }
.unit-labs__list { display: flex; flex-wrap: wrap; min-width: 0; gap: 10px; }
.unit-labs .lab-launcher { justify-content: flex-start; padding: 6px 18px 6px 14px; }
/* Lab shelf (plan 102 step 2): the grade's labs in one row that scrolls inside the Konular hero. The arrows show from 681 px
   (phones swipe); the width, not the pointer type, decides because touch boards report pointer: coarse. The row has only vertical
   padding so it rests at scrollLeft 0 and the 2px focus outline still shows inside the launchpad's clipping. */
.lab-shelf { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "title title title" "prev list next"; align-items: center; column-gap: 8px; }
.lab-shelf[hidden] { display: none; }
.lab-shelf h2 { grid-area: title; margin: 0 0 2px; color: var(--ink-2); font-size: 15px; font-weight: 800; letter-spacing: .02em; }
.lab-shelf__list { grid-area: list; display: flex; gap: 10px; min-width: 0; padding: 4px; overflow-x: auto; overscroll-behavior-x: contain; scroll-padding-inline: 4px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.lab-shelf__list::-webkit-scrollbar { display: none; }
.lab-shelf .lab-launcher { flex: none; justify-content: flex-start; padding: 6px 18px 6px 14px; scroll-snap-align: start; white-space: nowrap; }
.lab-shelf__scroll { width: 44px; height: 52px; padding: 0; color: var(--brand-ink); background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; font-size: 28px; font-weight: 700; line-height: 1; cursor: pointer; }
.lab-shelf__scroll[data-lab-shelf-scroll="prev"] { grid-area: prev; }
.lab-shelf__scroll[data-lab-shelf-scroll="next"] { grid-area: next; }
.lab-shelf__scroll[aria-disabled="true"] { opacity: .35; cursor: default; }
html:not([data-input="touch"]) .lab-shelf__scroll:not([aria-disabled="true"]):hover { background: var(--brand-tint); }
body.high-contrast .lab-shelf__scroll { color: var(--ink); border: 2px solid var(--ink); }
@media (max-width: 680px) {
  .button.lab-launcher { min-height: 44px; }
  .unit-labs__list { flex-direction: column; width: 100%; }
  .unit-labs .lab-launcher { width: 100%; }
  .lab-shelf { column-gap: 0; }
  .lab-shelf__scroll { display: none; }
}
.game-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--gold-tint);
  color: var(--gold-ink);
  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: var(--line-strong); }
.game-card__badge .card-stars i.is-earned { color: var(--gold-base); }

/* ---------- 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: var(--glass-strong); border-bottom: 1px solid var(--line); }
.status-chip { color: var(--navy); border: 1px solid var(--line); border-radius: 14px; background: var(--surface); 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(--edge); }
.score-team > b { font-size: 30px; font-weight: 900; }
.versus-chip { background: var(--inverse); 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: var(--surface) radial-gradient(rgba(29, 79, 159, .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;
  animation: none;
}
.result-stars span.is-earned { color: var(--gold); filter: drop-shadow(0 2px 0 rgba(11, 27, 51,.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: var(--surface); 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),
    var(--surface-2);
}
.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: var(--surface) radial-gradient(rgba(29, 79, 159, .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);
  margin-top: 2px;
  place-items: end center;
  background: transparent;
}
.arena-result__art .mw-mascot { width: min(100%, 144px); 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));
  align-items: start;
  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: var(--glass);
  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);
  background: linear-gradient(135deg, var(--side-identity-bg), color-mix(in srgb, var(--side-identity-border) 24%, var(--surface)));
  box-shadow: inset 0 6px 0 var(--side-identity-border), 0 7px 0 var(--side-identity-shadow);
}
.arena-result .arena-side:not(.is-winner):not(.is-tied) {
  background: color-mix(in srgb, var(--side-identity-bg) 24%, var(--surface));
  box-shadow: none;
}
.arena-result .arena-side > .result-player__outcome,
.result-player__outcome {
  justify-self: start;
  width: fit-content;
  margin-top: 5px;
  padding: 5px 9px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 850;
}
.is-winner > .result-player__outcome {
  color: white;
  background: var(--side-identity-fg);
}
.is-winner > .result-player__outcome::before { content: "★ "; }
.final-score-row > .result-player {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 4px 12px;
  color: var(--side-identity-fg);
  background: color-mix(in srgb, var(--side-identity-bg) 24%, var(--surface));
  border-color: var(--side-identity-border);
  text-align: left;
}
.final-score-row .result-player > span { grid-column:1; grid-row:1; overflow-wrap:anywhere; font-size:16px; }
.final-score-row .result-player > strong { grid-column:2; grid-row:1 / 3; align-self:center; }
.final-score-row .result-player > small { grid-column:1; grid-row:2; }
.final-score-row > .result-player.is-winner {
  background: linear-gradient(135deg, var(--side-identity-bg), color-mix(in srgb, var(--side-identity-border) 24%, var(--surface)));
  box-shadow: inset 0 6px 0 var(--side-identity-border), 0 5px 0 var(--side-identity-shadow);
}
.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: var(--brand-tint);
  border: 1px solid var(--line);
  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: var(--gold-tint);
  border: 1px solid var(--gold-base);
  border-radius: 14px;
  line-height: 1.5;
}
.arena-dialog .arena-result .iw-result-detail {
  background: var(--violet-soft);
  border-color: var(--line-strong);
  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) {
  #arenaDialog #arenaBody:has(> .arena-result) { padding-block: 16px; }
  .arena-dialog .arena-result { padding: 22px 32px; }
  .arena-result__art { width: 132px; height: auto; }
  .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: auto; }
  .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(--edge-line); border-radius: 28px; box-shadow: var(--shadow-pop); background: var(--surface); }

/* ---------- 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) .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 .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: the 3D FAMO panda (animated WebP clips over a still poster) ---------- */
.mw-mascot {
  position: relative;
  display: block;
  width: clamp(104px, 13vw, 156px);
  height: auto;
  aspect-ratio: 1;
  overflow: visible;
  container-type: inline-size;
}
.mw-mascot,
.mw-mascot * {
  animation: none;
  transition: none;
}
.mw-mascot__clip {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}
/* The clips present to screen-left; a panda facing right is the same clip mirrored. */
.mw-mascot[data-mascot-facing="right"] .mw-mascot__clip { transform: scaleX(-1); }
/* ---------- Referee countdown: a stage beside the panda, never a card over it ---------- */
/* Sizes are in cqw of the panda (.mw-mascot is an inline-size container), so the token keeps its
   proportions at every panda size. Motion is Web Animations from visual-art.js (transform/opacity only). */
:root {
  --countdown-disc: var(--inverse);
  --countdown-numeral: var(--on-inverse);
  --countdown-arc: var(--gold-base);
  --countdown-track: rgba(255, 255, 255, .16);
  --countdown-halo: var(--surface);
  --countdown-banner: var(--gold-base);
  --countdown-banner-ink: #0b1628;
  --countdown-banner-edge: var(--edge);
  --countdown-ray: var(--gold-base);
  --countdown-glow: var(--gold-tint);
  --countdown-shadow: 0 14px 26px -12px rgba(11, 27, 51, .55);
  --countdown-floor: rgba(15, 12, 40, .26);
}
html[data-theme="dark"] {
  --countdown-halo: var(--line-strong);
  --countdown-glow: rgba(245, 185, 74, .2);
  --countdown-shadow: 0 14px 28px -10px rgba(0, 0, 0, .7);
  --countdown-floor: rgba(0, 0, 0, .45);
}
body.high-contrast {
  --countdown-disc: #fff;
  --countdown-numeral: #000;
  --countdown-arc: #000;
  --countdown-track: #c4c4c4;
  --countdown-halo: #000;
  --countdown-banner: #fff;
  --countdown-banner-ink: #000;
  --countdown-banner-edge: #000;
  --countdown-ray: #000;
  --countdown-glow: transparent;
  --countdown-shadow: 0 0 0 transparent;
}

/* 3, 2, 1: a disc at the panda's head height, just clear of its body, with a ring that drains each second. */
.mw-mascot__sign {
  position: absolute;
  z-index: 2;
  left: 84%;
  top: 1%;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 62cqw;
  height: 62cqw;
  color: var(--countdown-numeral);
  background: var(--countdown-disc);
  border-radius: 50%;
  box-shadow: 0 0 0 max(2px, 2cqw) var(--countdown-halo), var(--countdown-shadow);
  /* Each number pops from the edge facing the panda, so even the pop never reaches over its body. */
  transform-origin: 0 50%;
}
.mw-mascot__sign[hidden] { display: none; }
.mw-mascot__sign-text {
  position: relative;
  z-index: 1;
  font-size: 42cqw;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mw-mascot__ring { position: absolute; inset: 3.4cqw; border-radius: 50%; }
.mw-mascot__ring::before {
  position: absolute;
  inset: 0;
  border: 4.6cqw solid var(--countdown-track);
  border-radius: 50%;
  content: "";
}
.mw-mascot__ring-half { position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden; }
.mw-mascot__ring-half--right { right: 0; }
.mw-mascot__ring-half--left { left: 0; }
.mw-mascot__ring-half > i {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  border: 4.6cqw solid var(--countdown-arc);
}
/* Each half ring pivots on the disc centre; turning clockwise carries it out of its clipped half. */
.mw-mascot__ring-half--right > i { left: 0; border-left: 0; border-radius: 0 999px 999px 0; transform-origin: 0 50%; }
.mw-mascot__ring-half--left > i { right: 0; border-right: 0; border-radius: 999px 0 0 999px; transform-origin: 100% 50%; }

/* BAŞLA!: a banner above the head (it may touch the top tenth of the picture, never the body). */
.mw-mascot__sign.is-word {
  left: 50%;
  top: auto;
  bottom: 90%;
  width: max-content;
  height: auto;
  padding: 3.4cqw 9cqw 3cqw;
  color: var(--countdown-banner-ink);
  background: var(--countdown-banner);
  border: max(2px, 1.8cqw) solid var(--countdown-banner-edge);
  border-radius: 999px;
  box-shadow: 0 2.6cqw 0 var(--countdown-banner-edge), var(--countdown-shadow);
  transform-origin: 50% 100%;
  translate: -50% 0;
}
.mw-mascot__sign.is-word .mw-mascot__ring { display: none; }
.mw-mascot__sign.is-word .mw-mascot__sign-text { font-size: 24cqw; letter-spacing: .01em; }
/* Rays behind the banner; transparent except while BAŞLA! bursts in. */
.mw-mascot__burst {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: -7cqw;
  width: 150cqw;
  height: 76cqw;
  background: repeating-conic-gradient(var(--countdown-ray) 0 7deg, transparent 7deg 24deg);
  border-radius: 50%;
  -webkit-mask: radial-gradient(closest-side, transparent 46%, #000 50%, #000 74%, transparent 100%);
  mask: radial-gradient(closest-side, transparent 46%, #000 50%, #000 74%, transparent 100%);
  opacity: 0;
  translate: -50% -50%;
  pointer-events: none;
}
.mw-mascot__clip { transform-origin: 50% 100%; }

/* The stage: while a count shows (data-count) the referee is large and central. The size is the panda's. */
.referee-region { --stage-art: clamp(180px, 28vh, 280px); }
@media (max-width: 680px), (max-height: 520px) { .referee-region { --stage-art: 150px; } }
.referee-region[data-count] .mw-mascot::before {
  position: absolute;
  inset: -6% -14% 6%;
  z-index: -1;
  background: radial-gradient(closest-side, var(--countdown-glow), transparent);
  border-radius: 50%;
  content: "";
}
.referee-region[data-count] .mw-mascot::after {
  position: absolute;
  right: 18%;
  bottom: -2%;
  left: 18%;
  z-index: -1;
  height: 7%;
  background: radial-gradient(closest-side, var(--countdown-floor), transparent);
  border-radius: 50%;
  content: "";
}
.duel-lanes > .referee-region[data-count] .referee-art::before,
.duel-lanes > .referee-region[data-count] .referee-art::after,
.arena-referee-header > .referee-region[data-count] .referee-art::before,
.arena-referee-header > .referee-region[data-count] .referee-art::after { content: none; }
/* Duel lanes: the panda grows up out of its own podium cell, so the cell (and the lanes) never move. */
.duel-lanes > .referee-region[data-count] { position: relative; z-index: 4; }
.duel-lanes > .referee-region[data-count] .referee-art .mw-mascot {
  width: var(--stage-art);
  margin: calc(100% - var(--stage-art)) 0 0 calc(50% - var(--stage-art) / 2);
}
/* Topic duels and turn games: the referee's corner stays; the panda steps into the middle of the hidden play area. */
#sessionReferee .referee-region[data-count] .referee-art,
.arena-referee-header > .referee-region[data-count] .referee-art { position: static; }
#sessionReferee .referee-region[data-count] .referee-art .mw-mascot,
.arena-referee-header > .referee-region[data-count] .referee-art .mw-mascot {
  position: absolute;
  z-index: 30;
  left: 50%;
  top: 63%;
  width: var(--stage-art);
  /* Centre the panda and its number together (the disc reaches 1.46 panda widths). */
  translate: calc(-50% - .23 * var(--stage-art)) -50%;
}
#sessionReferee .referee-region[data-count="BAŞLA!"] .referee-art .mw-mascot,
.arena-referee-header > .referee-region[data-count="BAŞLA!"] .referee-art .mw-mascot { translate: -50% -50%; }

/* Referee cell sizes outside the countdown stage. */
#sessionReferee .referee-art { width:104px; }
@media (max-width:680px) {
  .duel-lanes .referee-art,
  .arena-referee-header .referee-art { width:104px; }
  .arena-referee-header { grid-template-columns:minmax(0,1fr) 110px; }
  .game-shell__body:has(#sessionReferee:not([hidden])) { grid-template-columns:minmax(0,1fr) 110px; }
  /* Once the count clears, the session referee is a corner panda as in the arena duels: its words stay for
     screen readers and the scores take the width. */
  #gameOverlay[data-referee-phase="playing"] .game-shell__body:has(#sessionReferee:not([hidden]) .referee-region:not([data-count])) { grid-template-columns:minmax(0,1fr) 62px; }
  #gameOverlay[data-referee-phase="playing"] #sessionReferee .referee-region:not([data-count]) .referee-art { width:56px; }
  #gameOverlay[data-referee-phase="playing"] #sessionReferee .referee-region:not([data-count]) .referee-message { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
}

@media (forced-colors: active) {
  .mw-mascot__sign, .mw-mascot__sign.is-word { color: CanvasText; background: Canvas; border: 2px solid CanvasText; box-shadow: none; }
  .mw-mascot__ring-half > i { border-color: CanvasText; }
  .mw-mascot__burst { display: none; }
}

/* ---------- Referee-style simultaneous-duel results ---------- */
.arena-dialog .arena-result.arena-result--disqualification {
  --referee-ink: #0a1220;
  --referee-paper: #fffdf8;
  /* Same 1px border box as the normal result, so no content shifts; the heavier frame is an outline. */
  border-color: var(--referee-ink);
  outline: 2px solid var(--referee-ink);
  outline-offset: -3px;
  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: "";
}
/* Occupies the closing prompt's slot with the prompt's box, so both results share one layout. */
.arena-result .arena-result__prompt.arena-result__disqualification {
  color: var(--referee-ink);
  background: var(--apricot-soft);
  border-color: var(--coral-dark);
  box-shadow: inset 7px 0 0 var(--coral);
  font-weight: 800;
}
.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: inset 0 6px 0 var(--side-identity-border), 0 4px 0 var(--side-identity-shadow);
  transform: none;
}
.arena-result--disqualification .arena-side.is-winner strong { color: var(--side-identity-fg); }
html[data-theme="dark"] .arena-dialog .arena-result.arena-result--disqualification {
  --referee-ink: #e6edf6;
  --referee-paper: #0b1628;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .03) 0 14px, transparent 14px 28px),
    var(--referee-paper);
  box-shadow: 0 16px 0 rgba(0, 0, 0, .3), var(--shadow-lg);
}

/* SAYI EVRENİ 3D collection link (Oyunlar, "Tüm oyunlar"). Its night-sky plate is
   the other site's identity, so it keeps fixed colours in both themes. */
.external-collection {
  display: grid;
  gap: 8px;
  max-width: 560px;
  padding: 24px 26px;
  border-radius: 20px;
  border: 1px solid #2c4a52;
  background: radial-gradient(circle at 90% 24%, transparent 0 34px, #d8f58b55 35px 37px, transparent 38px), radial-gradient(circle at 90% 24%, #d8f58b 0 7px, transparent 8px), linear-gradient(135deg, #0b2335, #16323a);
  color: #e6f1f4;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}
.external-collection__kicker { color: #9ee8d8; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.external-collection__title { font-size: clamp(28px, 4vw, 38px); font-weight: 900; letter-spacing: .02em; line-height: 1.05; }
.external-collection__text { font-size: 17px; line-height: 1.5; color: #d2e2e6; }
.external-collection__note { font-size: 15px; line-height: 1.45; color: #a9c0c6; }
.external-collection__cta { justify-self: start; margin-top: 6px; padding: 10px 18px; border-radius: 999px; background: #d8f58b; color: #102022; font-weight: 800; }
html:not([data-input="touch"]) .external-collection:hover { border-color: #d8f58b; box-shadow: var(--shadow-md); }
.external-collection:focus-visible { outline: 3px solid #d8f58b; outline-offset: 3px; }