/* RAWDM splash — the arena floor, not a page.
   No hero, no nav: a fullscreen control room. #playSlot decides,
   #cupSlot shows the bracket, #boardRail is the ladder, and a thin
   strip carries the last few links. Tokens + components: ziggurat.css. */

html { scroll-behavior: smooth; }

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* Faint arena backdrop under a near-opaque dark wash — level faces stay legible. */
body:before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background: url("/static/assets/gameplay-bg.png") center top / cover no-repeat;
  filter: grayscale(.65) contrast(1.1) brightness(.5);
  opacity: .10;
}

/* Embers — a sparse drift rising from the bottom edge, fading with height.
   Varied size/opacity; the mask kills them before they cross the content band. */
.sparks {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -2;
  mask-image: linear-gradient(to top, #000 55%, transparent 92%);
  -webkit-mask-image: linear-gradient(to top, #000 55%, transparent 92%);
}
.sparks i {
  position: absolute;
  background: var(--red);
  animation: emberRise linear infinite;
}
@keyframes emberRise {
  0% { transform: translate3d(0, 10vh, 0); opacity: 0; }
  10% { opacity: var(--ember-o, .6); }
  80% { opacity: var(--ember-o, .6); }
  100% { transform: translate3d(24px, -75vh, 0); opacity: 0; }
}

/* ============ THE FLOOR — fullscreen grid ============ */
.floor {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(290px, 1fr);
  gap: 14px;
  width: min(1680px, calc(100% - 28px));
  margin: 14px auto;
}
.floor-main {
  display: grid;
  grid-template-rows: minmax(200px, 1fr) minmax(0, 2fr);
  gap: 14px;
  min-height: 0;
}

/* ============ PLAY SLOT — the decision zone ============ */
#playSlot, #playSlot .play-state { height: 100%; min-height: 0; }
#playSlot .play-state.split {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
}

/* The slab: one verb, full-bleed. Red face = the queue is one click away. */
.play-slab {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 18px 30px;
  text-align: left;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid;
}
.play-slab strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(48px, 7vw, 120px);
  line-height: .9;
  letter-spacing: .02em;
}
.play-slab small {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .16em;
}
.play-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.play-slab.play {
  background: var(--red-face);
  border-color: var(--red-hi) var(--red-lo) var(--red-lo) var(--red-hi);
  color: #fff;
}
.play-slab.play small, .play-slab.play .play-kicker { color: rgba(255, 200, 195, 0.75); }
.play-slab.play:hover { background: var(--red-face-hot); }
.play-slab.play:active {
  border-color: var(--red-lo) var(--red-hi) var(--red-hi) var(--red-lo);
  transform: translate(1px, 1px);
}

/* Queued split: leave is a cool slab, practice an outlined invitation. */
.play-slab.leave {
  background: var(--g4);
  border-color: var(--hi) var(--lo) var(--lo) var(--hi);
  color: var(--signal);
}
.play-slab.leave strong { font-size: clamp(34px, 4.5vw, 72px); }
.play-slab.leave .play-kicker { color: var(--live); }
.play-slab.leave:hover { background: var(--g5-hot); }
.play-slab.leave:active {
  border-color: var(--lo) var(--hi) var(--hi) var(--lo);
  transform: translate(1px, 1px);
}

.play-slab.practice {
  background: transparent;
  border-color: var(--edge-hot);
  color: var(--signal);
}
.play-slab.practice strong { font-size: clamp(28px, 3.5vw, 56px); }
.play-slab.practice small { color: var(--ui); }
.play-slab.practice:hover { background: var(--g3); border-color: var(--signal); }

.play-slab.static {
  background: var(--g3);
  border-color: var(--edge);
  color: var(--signal);
  cursor: default;
}
.play-slab.static strong { font-size: clamp(34px, 4.5vw, 72px); color: var(--prose); }
.play-slab.static small { color: var(--meta); }
.play-slab.static .play-kicker { color: var(--live); }

/* ============ BRACKET ZONE ============ */
/* The floor's #cupSlot is the canonical fragment (shared with /match pages);
   its inline action rows are suppressed here — the play slot owns verbs. */
.floor #cupSlot, .floor .cup-panel { height: 100%; min-height: 0; }
.floor .cup-panel {
  overflow-y: auto;
  margin: 0;
}
.floor .cup-actions, .floor .cup-ready-card { display: none; }

/* ============ BOARD RAIL — the ladder as ambience ============ */
#boardRail {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--g2);
  border: var(--line-flat);
}
.rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: var(--line-flat);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--meta);
}
.rail-more { color: var(--ui); text-decoration: none; }
.rail-more:hover { color: var(--red-hot); }
.rail-list {
  flex: 1;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 0;
  min-height: 0;
}
.rail-row a {
  display: grid;
  grid-template-columns: 4ch 1fr auto;
  gap: 10px;
  align-items: baseline;
  padding: 7px 14px;
  border-bottom: 1px solid var(--edge-soft);
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--prose);
  text-decoration: none;
}
.rail-row a:hover { background: var(--g3); color: var(--signal); }
.rail-rank { color: var(--meta); }
.rail-row:nth-child(-n+3) .rail-rank { color: var(--gold-hot); }
.rail-name {
  font-family: var(--font-ui);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rail-elo { color: var(--red-hot); font-weight: 700; }
.rail-row.empty { padding: 12px 14px; font-size: 12px; color: var(--meta); }
.rail-row.me a { background: rgba(232, 25, 44, 0.10); }
.rail-row.me .rail-name { color: var(--red-hot); }
.rail-self { border-top: var(--line-flat); }

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
  body { display: block; }
  .floor {
    display: flex;
    flex-direction: column;
    width: calc(100% - 20px);
    margin: 10px auto;
  }
  .floor-main { display: contents; }
  #playSlot { height: auto; min-height: 34dvh; margin-bottom: 12px; }
  #playSlot .play-state { height: 100%; min-height: 34dvh; }
  #playSlot .play-state.split { min-height: 44dvh; }
  .floor .cup-panel { max-height: 70dvh; margin-bottom: 12px; }
  #boardRail { max-height: 60dvh; margin-bottom: 12px; }
}