/* PLAY: full-bleed plaza, heroes centre-right, the mode title bottom-left, mode tiles along the bottom and the big
   HOST MATCH button bottom-right. */

.play {
  --px: 0;
  --py: 0;
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.play-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 62% 40%, transparent 45%, rgba(8, 4, 30, 0.55) 100%),
    linear-gradient(90deg, rgba(14, 6, 40, 0.72) 0%, rgba(14, 6, 40, 0.35) 34%, transparent 55%),
    linear-gradient(0deg, rgba(8, 6, 28, 0.9) 0%, rgba(8, 6, 28, 0.55) 22%, transparent 42%);
}

/* Heroes */
.play-heroes {
  position: absolute;
  left: 38%;
  right: 1%;
  top: 2%;
  bottom: calc(var(--tile-h) + 4.4rem);
  pointer-events: none;
  transform: translate(calc(var(--px) * -1.4rem), calc(var(--py) * -0.6rem));
  transition: transform 0.6s ease-out;
}
.play { --tile-h: clamp(7.5rem, 17vh, 13.5rem); }
.hero-group { position: absolute; inset: 0; animation: heroes-in 0.55s var(--ease-out) both; }
.hero-group-out { animation: heroes-out 0.35s ease-in forwards; }
.hero {
  position: absolute;
  bottom: 0;
  height: 100%;
  transform-origin: 50% 100%;
}
.hero-img {
  position: relative;
  display: block;
  height: 100%;
  width: auto;
  filter: drop-shadow(0 1.4rem 1.6rem rgba(20, 0, 40, 0.45));
  animation: hero-float 5.5s ease-in-out infinite;
}
.hero-shadow {
  position: absolute;
  left: 50%;
  bottom: -1.1%;
  width: 72%;
  height: 7%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(10, 0, 30, 0.6), transparent);
  transform: translateX(-50%);
  animation: hero-shadow 5.5s ease-in-out infinite;
}
/* Front hero big in the middle; two behind, smaller and a touch hazier. */
.hero-pos-0 { left: 42%; height: 100%; z-index: 3; transform: translateX(-50%); }
.hero-pos-1 { left: 74%; height: 86%; bottom: 5%; z-index: 2; transform: translateX(-50%); }
.hero-pos-2 { left: 14%; height: 80%; bottom: 7%; z-index: 1; transform: translateX(-50%); }
.hero-pos-1 .hero-img { animation-delay: -1.8s; filter: drop-shadow(0 1rem 1.2rem rgba(20, 0, 40, 0.4)) saturate(0.92) brightness(0.94); }
.hero-pos-2 .hero-img { animation-delay: -3.4s; filter: drop-shadow(0 1rem 1.2rem rgba(20, 0, 40, 0.4)) saturate(0.88) brightness(0.9); }
.hero-pos-1 .hero-shadow { animation-delay: -1.8s; }
.hero-pos-2 .hero-shadow { animation-delay: -3.4s; }
.hero-count-2 .hero-pos-0 { left: 32%; }
.hero-count-2 .hero-pos-1 { left: 70%; height: 100%; bottom: 0; }
.hero-count-2 .hero-pos-1 .hero-img { filter: drop-shadow(0 1.4rem 1.6rem rgba(20, 0, 40, 0.45)); }
.hero-count-2 .hero-pos-0 .hero-img { transform: scaleX(1); }

@keyframes hero-float { 50% { transform: translateY(-1.2%); } }
@keyframes hero-shadow { 50% { transform: translateX(-50%) scale(0.92); opacity: 0.8; } }
@keyframes heroes-in { from { opacity: 0; transform: translateY(3%) scale(0.97); } }
@keyframes heroes-out { to { opacity: 0; transform: translateX(4%) scale(0.98); } }

/* Title */
.play-copy {
  position: absolute;
  left: var(--gutter);
  bottom: calc(var(--tile-h) + 5.2rem);
  max-width: 44%;
  transform: translate(calc(var(--px) * 0.5rem), 0);
  transition: transform 0.6s ease-out;
}
.play-kicker { font-size: 1.25rem; text-shadow: 0 0.12rem 0.5rem rgba(0, 0, 0, 0.6); }
.play-title {
  margin: 0.15rem 0 0.35rem -0.05em;
  font-size: clamp(4.5rem, 8.4vw, 9.5rem);
  font-weight: 900;
  line-height: 0.84;
  color: #fff;
  text-shadow: 0 0.35rem 0 rgba(30, 8, 70, 0.55), 0 0.8rem 2.4rem rgba(0, 0, 0, 0.45);
  animation: title-in 0.45s var(--ease-out);
}
.play-title[data-long="true"] { font-size: clamp(4rem, 7.2vw, 8.4rem); }
@keyframes title-in { from { opacity: 0; transform: translateX(-1.2rem); } }
.play-subline {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--display);
  font-style: italic;
  font-weight: 800;
  font-size: 1.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
  text-shadow: 0 0.12rem 0.6rem rgba(0, 0, 0, 0.55);
}
.play-sub-strong { color: var(--yellow); }
.play-sub-dot { width: 0.42rem; height: 0.42rem; border-radius: 50%; background: rgba(255, 255, 255, 0.6); }
.play-blurb { margin-top: 0.55rem; max-width: 34rem; font-size: 1.15rem; color: rgba(255, 255, 255, 0.86); text-shadow: 0 1px 0.4rem rgba(0, 0, 0, 0.7); }
.play-copy-chips { margin-top: 1rem; display: flex; gap: 0.6rem; }
.play-arena { font-size: 1.1rem; padding: 0.5em 0.9em 0.45em; background: rgba(8, 6, 30, 0.6); backdrop-filter: blur(10px); }
.play-arena .icon:last-child { width: 0.9em; opacity: 0.7; }

/* On now */
.play-now {
  position: absolute;
  top: 1.2rem;
  left: var(--gutter);
  display: grid;
  gap: 0.55rem;
  width: min(30rem, 34vw);
}
.play-now-title { display: flex; align-items: center; gap: 0.5rem; text-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.6); }
.now-chip {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "phase code score" "phase meta score";
  align-items: center;
  column-gap: 0.8rem;
  padding: 0.55rem 0.9rem 0.55rem 0.65rem;
  border-radius: 0.95rem;
  border: 0.14rem solid rgba(255, 255, 255, 0.16);
  background: rgba(8, 6, 30, 0.62);
  backdrop-filter: blur(12px);
  text-align: left;
  transition: border-color 0.15s, transform 0.15s var(--ease-out);
}
.now-chip:hover { border-color: rgba(255, 255, 255, 0.6); }
.now-chip:focus-visible { outline: none; border-color: #fff; box-shadow: var(--focus); }
.now-chip.is-paused { border-color: #ff8a93; }
.now-phase { grid-area: phase; font-size: 0.9rem; }
.now-code { grid-area: code; font-family: var(--display); font-style: italic; font-weight: 900; font-size: 1.5rem; letter-spacing: 0.06em; line-height: 1; }
.now-meta { grid-area: meta; font-size: 0.88rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.now-score { grid-area: score; font-family: var(--display); font-style: italic; font-weight: 900; font-size: 1.6rem; }
.now-more { justify-self: start; border: 0; background: none; color: var(--muted); font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; font-size: 1rem; padding: 0.2rem 0.4rem; }
.now-more:hover, .now-more:focus-visible { color: #fff; outline: none; }

/* Bottom row: tiles + HOST MATCH */
.play-bottom {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 2.2rem;
  display: flex;
  align-items: flex-end;
  gap: clamp(1rem, 2.4vw, 2.6rem);
}
.mode-row {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.7rem, 1.2vw, 1.3rem);
  max-width: 82rem;
}
.mode-tile {
  position: relative;
  display: block;
  height: var(--tile-h);
  padding: 0;
  overflow: hidden;
  border: 0.18rem solid rgba(255, 255, 255, 0.35);
  border-radius: 1.05rem;
  background: #120c30;
  color: #fff;
  text-align: left;
  box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.45);
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s, border-color 0.2s;
}
.mode-tile-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--ease-out), filter 0.3s; filter: saturate(0.9) brightness(0.92); }
.mode-tile-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6, 4, 24, 0.95) 0%, rgba(6, 4, 24, 0.55) 34%, transparent 62%), linear-gradient(180deg, rgba(6, 4, 24, 0.45), transparent 30%); }
.mode-tile-badge, .mode-tile-players {
  position: absolute;
  top: 0.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.28em 0.6em 0.22em;
  border-radius: 0.5rem;
  font-family: var(--display);
  font-style: italic;
  font-weight: 900;
  font-size: 1.08rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1;
}
.mode-tile-badge { left: 0.6rem; background: linear-gradient(180deg, var(--yellow-hi), var(--yellow)); color: #1b1500; box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.4); }
.mode-tile-players { right: 0.6rem; background: rgba(4, 4, 18, 0.72); border: 0.1rem solid rgba(255, 255, 255, 0.25); }
.mode-tile-players .icon { width: 0.95em; height: 0.95em; }
.mode-tile-text { position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0.7rem; display: grid; gap: 0.15rem; }
.mode-tile-name { font-family: var(--display); font-style: italic; font-weight: 900; font-size: 2.05rem; line-height: 0.9; text-transform: uppercase; text-shadow: 0 0.15rem 0.5rem rgba(0, 0, 0, 0.6); }
.mode-tile-meta { font-family: var(--display); font-style: italic; font-weight: 700; font-size: 1.02rem; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.78); }
.mode-tile:hover { border-color: rgba(255, 255, 255, 0.8); }
.mode-tile:hover .mode-tile-art { transform: scale(1.04); filter: none; }
.mode-tile:focus-visible { outline: none; }
.mode-tile.is-selected {
  border-color: #fff;
  border-width: 0.3rem;
  transform: translateY(-0.55rem) scale(1.035);
  box-shadow: 0 0 0 0.3rem rgba(255, 210, 26, 0.75), 0 0 2.4rem rgba(255, 210, 26, 0.35), 0 1.4rem 2.6rem rgba(0, 0, 0, 0.55);
}
.mode-tile.is-selected .mode-tile-art { filter: none; transform: scale(1.06); }
.mode-tile.is-selected::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.28) 45%, transparent 60%);
  background-size: 260% 100%;
  animation: shine 2.8s ease-in-out infinite;
  pointer-events: none;
}
.mode-tile:focus-visible:not(.is-selected) { box-shadow: var(--focus); }
@keyframes shine { 0% { background-position: 120% 0; } 60%, 100% { background-position: -40% 0; } }

.play-host-wrap { flex: none; display: grid; justify-items: end; gap: 0.6rem; }
.play-host { min-width: clamp(15rem, 22vw, 26rem); min-height: calc(var(--tile-h) * 0.62); font-size: clamp(2rem, 3vw, 3.4rem); border-radius: 1.2rem; }
.play-host-note { font-family: var(--display); font-style: italic; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 1.05rem; color: rgba(255, 255, 255, 0.85); text-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.6); }

/* Arena picker and CUSTOM sheet */
.sheet-wide { width: min(92vw, 62rem); }
.arena-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.9rem; }
.arena-pick-card {
  display: grid;
  gap: 0.35rem;
  padding: 0.6rem 0.6rem 0.8rem;
  border-radius: 1rem;
  border: 0.18rem solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
  text-align: left;
  transition: border-color 0.15s, transform 0.15s var(--ease-out), background 0.15s;
}
.arena-pick-card:hover { border-color: rgba(255, 255, 255, 0.6); }
.arena-pick-card:focus-visible { outline: none; box-shadow: var(--focus); border-color: #fff; }
.arena-pick-card.is-selected { border-color: #fff; background: rgba(255, 210, 26, 0.12); box-shadow: 0 0 0 0.22rem rgba(255, 210, 26, 0.6); }
.arena-pick-map { width: 100%; aspect-ratio: 16 / 10; border-radius: 0.6rem; background: rgba(0, 0, 0, 0.35); }
.arena-pick-name { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 1.45rem; text-transform: uppercase; line-height: 1; }
.arena-pick-meta { color: var(--muted); font-size: 0.92rem; }
.custom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem 2rem; }
.custom-section { display: grid; gap: 0.6rem; align-content: start; }
.custom-arena { grid-column: 1 / -1; }
.custom-arena .arena-pick { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.stepper { display: flex; align-items: center; gap: 0.8rem; }
.stepper-btn { width: 3.4rem; min-height: 3.4rem; font-size: 1.5rem; }
.stepper-readout { display: grid; justify-items: center; min-width: 6rem; }
.stepper-value { font-family: var(--display); font-style: italic; font-weight: 900; font-size: 3.4rem; line-height: 0.9; }
.stepper-sub { font-family: var(--display); font-style: italic; font-weight: 700; text-transform: uppercase; color: var(--yellow); letter-spacing: 0.08em; }
.custom-summary { font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; font-size: 1.3rem; color: var(--muted); }
.choices-big .choice { font-size: 1.6rem; padding: 0.7rem 1.2rem 0.6rem; }

@media (max-width: 1400px) {
  .play-title { font-size: clamp(4rem, 7.6vw, 8rem); }
  .mode-tile-name { font-size: 1.75rem; }
  .play-subline { font-size: 1.55rem; }
}
@media (max-aspect-ratio: 4/3) {
  .play-heroes { left: 40%; }
  .play-copy { max-width: 56%; }
}