/* Rating reveal and ceremony live here so the shared application layout stays
   independent of the presentation. Without JavaScript the button remains
   hidden and the rating remains ordinary readable content. */
[data-rating-screen] { position: relative; }

/* The radar is one wide reading surface. Labels sit on their rays, so the
   separate numbered key is no longer needed. */
.rating-radar-wrap {
  display: block;
  width: 100%;
}

.rating-radar {
  display: block;
  width: 100%;
  max-width: none;
  height: clamp(26rem, 75vh, 50rem);
  margin-inline: auto;
  overflow: visible;
}

.rating-radar-label { font-size: 16px; }
.rating-radar-ring,
.rating-radar-axis {
  stroke-width: .7;
  vector-effect: non-scaling-stroke;
}
.rating-radar-shape {
  fill-opacity: .1;
  stroke-width: 1.4;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.rating-radar-point {
  fill: var(--team-color, #007AFF);
  stroke: #fff;
  stroke-width: .8;
  vector-effect: non-scaling-stroke;
}
.rating-radar-value,
.rating-radar-scale-value {
  paint-order: stroke;
  stroke: #fff;
  stroke-linejoin: round;
}
.rating-radar-value {
  fill: var(--team-color, #007AFF);
  font-size: 8px;
  font-weight: 600;
  stroke-width: 2.2px;
}
.rating-radar-scale-title {
  fill: #536579;
  font-size: 10px;
  font-weight: 700;
}
.rating-radar-scale-value {
  fill: #6b7788;
  font-size: 8px;
  font-weight: 700;
  stroke-width: 2px;
}
.projector .rating-radar { width: 100%; max-width: none; }
.rating-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .35rem 1.2rem;
}
.rating-radar-wrap > .muted { margin-inline: auto; text-align: center; }

.rating-reveal-button {
  display: block;
  min-width: min(18rem, 100%);
  margin: 1rem auto;
  padding: .8rem 1.4rem;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: #0066CC;
  box-shadow: 0 10px 30px rgba(0, 72, 145, .24);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 700;
}

.rating-reveal--locked {
  filter: blur(14px);
  opacity: .48;
  pointer-events: none;
  user-select: none;
  transition: filter .45s ease, opacity .45s ease;
}

.rating-reveal--open {
  filter: blur(0);
  opacity: 1;
  transition: filter .45s ease, opacity .45s ease;
}

/* Stable projector columns: one label column, then equal team columns. */
.projector .rating-table {
  width: 100%;
  table-layout: fixed;
}

.projector .rating-table thead th,
.projector .rating-table td {
  text-align: center;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}

.projector .rating-table thead th:first-child,
.projector .rating-table tbody th[scope="row"] {
  width: 30%;
  text-align: left;
}

.projector .rating-table th[data-rating-team] {
  overflow-wrap: anywhere;
}

/* A native modal covers the viewport without requesting browser fullscreen. */
.rating-ceremony {
  inset: 0;
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  border: 0;
  border-radius: 0;
  color: #fff;
  background: #071b2d url("brand/game-city.webp") center / cover no-repeat fixed;
}

.rating-ceremony::backdrop { background: rgba(3, 13, 24, .82); }

.rating-ceremony-scene {
  position: relative;
  isolation: isolate;
  min-height: 100dvh;
  padding: clamp(1rem, 3vw, 2.5rem);
  background:
    radial-gradient(circle at 50% 20%, rgba(0, 122, 255, .22), transparent 42%),
    linear-gradient(180deg, rgba(5, 22, 38, .72), rgba(5, 17, 30, .94));
}

.rating-ceremony-bar {
  position: sticky;
  z-index: 3;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: calc(-1 * clamp(1rem, 3vw, 2.5rem));
  margin-bottom: 1rem;
  padding: 1rem clamp(1rem, 3vw, 2.5rem);
  color: #fff;
  background: linear-gradient(180deg, rgba(5, 17, 30, .98), rgba(5, 17, 30, .82));
  backdrop-filter: blur(14px);
}

.rating-ceremony-bar h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1;
}

.rating-ceremony-bar button {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 999px;
  color: #fff;
  background: rgba(5, 17, 30, .68);
}

.rating-ceremony-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.rating-cards {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: clamp(.8rem, 2vw, 1.4rem);
  max-width: 92rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.rating-card {
  display: grid;
  flex: 1 1 15rem;
  min-width: 0;
  grid-template-rows: auto 1fr;
  gap: .7rem;
  min-height: 15rem;
  padding: clamp(1rem, 2vw, 1.5rem);
  overflow: hidden;
  border: 2px solid var(--team-color, #007AFF);
  border-color: color-mix(in srgb, var(--team-color, #007AFF) 72%, white);
  border-top-width: .65rem;
  border-radius: 1.25rem;
  color: #11243a;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .34);
}

.rating-card.is-revealed { animation: rating-card-in .7s cubic-bezier(.2, .8, .2, 1) both; }

.rating-award {
  display: grid;
  place-items: center;
  width: 5.25rem;
  height: 5.25rem;
  margin-inline: auto;
  color: var(--team-color, #007AFF);
}

.rating-award svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: currentColor;
  fill-opacity: .18;
  stroke: currentColor;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rating-card-copy { display: grid; align-content: end; gap: .3rem; text-align: center; }
.rating-card-place { color: #536579; font-size: clamp(1rem, 2vw, 1.3rem); }
.rating-ceremony .rating-card-name {
  color: #10233a;
  font-size: clamp(1.45rem, 3vw, 2.3rem);
  line-height: 1.05;
  overflow-wrap: anywhere;
}
.rating-card-result { color: #536579; font-size: clamp(.85rem, 1.4vw, 1rem); }

.rating-card--winner {
  flex-basis: 100%;
  order: -1;
  border-color: #ffbf00;
  background: linear-gradient(145deg, rgba(255, 252, 232, .98), rgba(255, 255, 255, .96));
  box-shadow: 0 24px 80px rgba(255, 191, 0, .32);
}
.rating-card--winner .rating-award { color: #d99a00; transform: scale(1.12); }
.rating-ceremony .rating-card--winner .rating-card-name { font-size: clamp(1.8rem, 4vw, 3rem); }
.rating-card--winner .rating-card-place { color: #8a6100; }

.rating-confetti {
  position: fixed;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.rating-confetti span {
  position: absolute;
  top: -2rem;
  left: var(--x);
  width: clamp(.55rem, 1.1vw, .9rem);
  height: clamp(1rem, 1.8vw, 1.5rem);
  border-radius: 2px;
  opacity: 0;
  background: var(--confetti-color);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .22);
}

.rating-ceremony[data-rating-complete="true"] .rating-confetti span {
  animation: rating-confetti-fall var(--duration, 4s) var(--delay, 0s) linear both;
}

.rating-confetti span:nth-child(6n + 1) { --confetti-color: #ffca0a; }
.rating-confetti span:nth-child(6n + 2) { --confetti-color: #ff3b30; }
.rating-confetti span:nth-child(6n + 3) { --confetti-color: #00c766; }
.rating-confetti span:nth-child(6n + 4) { --confetti-color: #0a84ff; }
.rating-confetti span:nth-child(6n + 5) { --confetti-color: #bf5af2; }
.rating-confetti span:nth-child(6n) { --confetti-color: #ff7a00; }
.rating-confetti span:nth-child(1) { --x: 3%; --drift: 8vw; --turn: 620deg; }
.rating-confetti span:nth-child(2) { --x: 8%; --drift: -5vw; --turn: -540deg; --delay: .18s; }
.rating-confetti span:nth-child(3) { --x: 13%; --drift: 4vw; --turn: 710deg; --duration: 4.1s; }
.rating-confetti span:nth-child(4) { --x: 18%; --drift: -7vw; --turn: -680deg; --delay: .32s; }
.rating-confetti span:nth-child(5) { --x: 23%; --drift: 6vw; --turn: 560deg; --duration: 3.6s; }
.rating-confetti span:nth-child(6) { --x: 28%; --drift: -4vw; --turn: -760deg; --delay: .1s; }
.rating-confetti span:nth-child(7) { --x: 33%; --drift: 7vw; --turn: 640deg; --delay: .26s; }
.rating-confetti span:nth-child(8) { --x: 38%; --drift: -6vw; --turn: -590deg; --duration: 4s; }
.rating-confetti span:nth-child(9) { --x: 43%; --drift: 5vw; --turn: 720deg; --delay: .36s; }
.rating-confetti span:nth-child(10) { --x: 47%; --drift: -3vw; --turn: -650deg; }
.rating-confetti span:nth-child(11) { --x: 51%; --drift: 7vw; --turn: 580deg; --delay: .14s; }
.rating-confetti span:nth-child(12) { --x: 55%; --drift: -6vw; --turn: -740deg; --duration: 4.2s; }
.rating-confetti span:nth-child(13) { --x: 59%; --drift: 4vw; --turn: 690deg; --delay: .3s; }
.rating-confetti span:nth-child(14) { --x: 63%; --drift: -8vw; --turn: -610deg; --duration: 3.7s; }
.rating-confetti span:nth-child(15) { --x: 67%; --drift: 5vw; --turn: 770deg; --delay: .08s; }
.rating-confetti span:nth-child(16) { --x: 71%; --drift: -5vw; --turn: -570deg; --delay: .34s; }
.rating-confetti span:nth-child(17) { --x: 75%; --drift: 8vw; --turn: 660deg; --duration: 4.1s; }
.rating-confetti span:nth-child(18) { --x: 79%; --drift: -4vw; --turn: -720deg; --delay: .2s; }
.rating-confetti span:nth-child(19) { --x: 83%; --drift: 6vw; --turn: 600deg; --duration: 3.6s; }
.rating-confetti span:nth-child(20) { --x: 87%; --drift: -7vw; --turn: -690deg; --delay: .28s; }
.rating-confetti span:nth-child(21) { --x: 91%; --drift: 4vw; --turn: 750deg; --duration: 4s; }
.rating-confetti span:nth-child(22) { --x: 95%; --drift: -6vw; --turn: -630deg; --delay: .12s; }
.rating-confetti span:nth-child(23) { --x: 35%; --drift: 10vw; --turn: 700deg; --delay: .38s; }
.rating-confetti span:nth-child(24) { --x: 68%; --drift: -10vw; --turn: -700deg; --delay: .22s; }

.rating-ceremony[data-rating-complete="true"] .rating-card--winner.is-revealed {
  animation:
    rating-card-in .7s cubic-bezier(.2, .8, .2, 1) both,
    rating-winner-glow 4s .35s ease-out both;
}

@keyframes rating-card-in {
  from { opacity: 0; transform: translateY(2rem) scale(.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes rating-confetti-fall {
  0% { opacity: 0; transform: translate3d(0, -8vh, 0) rotate(0); }
  8%, 82% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--drift), 108vh, 0) rotate(var(--turn)); }
}

@keyframes rating-winner-glow {
  0%, 100% { box-shadow: 0 24px 80px rgba(255, 191, 0, .32); }
  18%, 48% { box-shadow: 0 18px 95px rgba(255, 202, 10, .78), 0 0 0 5px rgba(255, 255, 255, .42); }
}

@media (max-width: 620px) {
  .rating-radar-wrap { overflow-x: auto; overscroll-behavior-inline: contain; }
  .rating-radar { height: 18rem; }
  .rating-radar-label { font-size: 20px; }
  .rating-radar-value { font-size: 14px; }
  .rating-radar-scale-title { font-size: 13px; }
  .rating-radar-scale-value { font-size: 12px; }
  .rating-radar--multi { width: 600px; min-width: 600px; height: 420px; }
  .rating-radar--multi .rating-radar-label { font-size: 16px; }
  .rating-radar--multi .rating-radar-value { font-size: 8px; }
  .rating-radar--multi .rating-radar-scale-title { font-size: 10px; }
  .rating-radar--multi .rating-radar-scale-value { font-size: 8px; }
  .rating-ceremony-bar { align-items: flex-start; }
  .rating-ceremony-bar h2 { font-size: 2rem; }
  .rating-card { min-height: 12rem; }
  .rating-award { width: 4.25rem; height: 4.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .rating-reveal--locked,
  .rating-reveal--open { transition: none; }
  .rating-card.is-revealed { animation: none; }
  .rating-ceremony[data-rating-complete="true"] .rating-card--winner.is-revealed,
  .rating-ceremony[data-rating-complete="true"] .rating-confetti span { animation: none; }
}