/* ui/SproksPlay — the Sproks menu's Play station. Contract: ./SproksPlay.spec.md.
   Mobile first: one column; the stage over the panel. Tokens only (ui/Theme C8). */

.sp-splay {
  display: grid;
  /* The ship, its name and Play are one group in the middle of the station (Jackson, 2026-10-03:
     "the ship is too high up in the menu"): the stage takes what it needs, never the whole
     height, so a tall window no longer strands the ship at the top with a gap under it. */
  grid-template-rows: minmax(160px, 460px) auto;
  align-content: safe center;
  justify-items: center;
  gap: 8px;
  height: 100%;
  min-height: 0;
  padding: 8px 16px 16px;
  color: var(--sp-text);
  box-sizing: border-box;
  overflow-y: auto;
}

.sp-splay__hero {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: stretch;
  width: 100%;
  min-height: 0;
}

/* The lift's edge: a strip of hazard tape under the ship. */
.sp-splay__hero::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 42px;
  width: min(72%, 330px);
  height: 10px;
  transform: translateX(-50%);
  background: var(--sp-tape);
  border: 1px solid var(--sp-seam);
  border-radius: 2px;
}

/* The ship's name plate under the stage: a brass tag, stamped with the name, its creator and tier small. */
.sp-splay__ship {
  position: absolute;
  bottom: 4px;
  left: 50%;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  padding: 5px 14px;
  white-space: nowrap;
  transform: translateX(-50%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--sp-quanta) 80%, white), color-mix(in srgb, var(--sp-quanta) 86%, black));
  border: 1px solid var(--sp-seam);
  border-radius: var(--sp-radius-sm);
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 45%, transparent), 0 2px 0 var(--sp-edge-dark);
}

.sp-splay__ship-name {
  font: 600 15px/1.2 var(--sp-font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sp-ink);
}

.sp-splay__ship-by { font: 500 12px/1.2 var(--sp-font-ui); color: color-mix(in srgb, var(--sp-ink) 82%, var(--sp-quanta)); }

.sp-splay__tier {
  align-self: center;
  padding: 2px 7px;
  font: 700 12px/1 var(--sp-font-mono);
  color: var(--sp-ink);
  border: 1px solid var(--sp-ink);
  border-radius: 2px;
}

/* On the dark panel (the best run's line) the tier chip is lettered light. */
.sp-splay__best .sp-splay__tier { margin-left: 8px; color: var(--sp-text); border-color: var(--sp-line-strong); }

.sp-splay__stage {
  width: min(100%, 420px);
  height: 100%;
  min-height: 160px;
  max-height: 420px;
  aspect-ratio: 1;
  /* The bay light from above, the ship's shadow on the lift. */
  background:
    radial-gradient(ellipse 44% 7% at 50% 93%, color-mix(in srgb, var(--sp-seam) 75%, transparent), transparent 72%),
    radial-gradient(ellipse 55% 85% at 50% 0%, color-mix(in srgb, var(--sp-quanta) 9%, transparent), transparent 72%);
}

.sp-splay__panel {
  display: grid;
  justify-items: center;
  gap: 10px;
  width: min(100%, 460px);
}

/* A hazard label: dark lettering on the tape's yellow. */
.sp-splay__title {
  margin: 0;
  padding: 4px 10px 3px;
  font: 600 13px/1 var(--sp-font-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sp-ink);
  background: var(--sp-hazard);
  border-radius: 2px;
}

.sp-splay__tagline {
  margin: 0;
  font: 700 30px/1.1 var(--sp-font-display);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 3px 0 var(--sp-edge-dark);
}

.sp-splay__rooms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  margin: 0;
  padding: 3px;
  border: 1px solid var(--sp-seam);
  border-radius: var(--sp-radius-sm);
  background: var(--sp-well);
  box-shadow: var(--sp-inset);
}

.sp-splay__room {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font: 700 13px/1 var(--sp-font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sp-text-dim);
  border-radius: var(--sp-radius-sm);
  cursor: pointer;
}

.sp-splay__room[data-selected] {
  color: var(--sp-ink);
  background: var(--sp-select);
}

.sp-splay__room:focus-within {
  outline: 2px solid var(--sp-accent-2);
  outline-offset: 1px;
}

.sp-splay__room-note {
  margin: 0;
  font: 400 13px/1.3 var(--sp-font-ui);
  color: var(--sp-text-dim);
  text-align: center;
}

.sp-splay__go {
  width: 100%;
  min-width: 0;
  min-height: 64px;
  margin-bottom: 8px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.2em;
}

.sp-splay__status, .sp-splay__region, .sp-splay__best {
  margin: 0;
  font: 400 13px/1.3 var(--sp-font-ui);
  color: var(--sp-text-dim);
  text-align: center;
}

.sp-splay__best { color: var(--sp-text); font-variant-numeric: tabular-nums; }

.sp-splay__error {
  margin: 0;
  font: 600 13px/1.3 var(--sp-font-ui);
  color: var(--sp-danger);
  text-align: center;
}

.sp-splay__cancel {
  min-height: 44px;
  padding: 0 18px;
  font: 600 14px/1 var(--sp-font-ui);
  color: var(--sp-text);
  background: var(--sp-space-2);
  border: 1px solid var(--sp-seam);
  border-radius: var(--sp-radius-sm);
  box-shadow: inset 0 1px 0 var(--sp-edge-light), 0 3px 0 var(--sp-edge-dark);
  cursor: pointer;
}

.sp-splay__masteries {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sp-splay__mastery {
  --weapon: var(--sp-accent);
  /* The weapon and its level on one line where they fit, the level under the name where they do
     not (Russian, German): never a word broken in two. The bar always takes its own line. */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 6px;
  align-items: baseline;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--sp-seam);
  border-radius: var(--sp-radius-sm);
  background: var(--sp-space-1);
  box-shadow: inset 0 1px 0 var(--sp-edge-light), 0 2px 0 var(--sp-edge-dark);
}

.sp-splay__mastery-name { font: 500 14px/1.1 var(--sp-font-display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--weapon); }
.sp-splay__mastery-level { font: 400 12px/1.1 var(--sp-font-mono); color: var(--sp-text-dim); }

.sp-splay__mastery-bar {
  flex: 0 0 100%;
  height: 6px;
  border-radius: 1px;
  background: linear-gradient(90deg, var(--weapon) var(--fill, 0%), var(--sp-well) var(--fill, 0%));
  box-shadow: var(--sp-inset);
}

@media (max-width: 599px) {
  .sp-splay { grid-template-rows: auto auto; align-content: start; padding: 4px 16px 12px; }
  .sp-splay__stage { height: min(34vh, 300px); min-height: 140px; width: auto; }
  .sp-splay__tagline { font-size: 24px; }
  .sp-splay__go { min-height: 60px; }
  .sp-splay__masteries { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .sp-splay__mastery { padding: 6px 8px; }
}

/* A landscape phone (844 × 390): the ship beside the panel, so Play and the
   masteries sit in view without scrolling. */
@media (max-height: 520px) and (min-width: 600px) {
  .sp-splay {
    grid-template-rows: minmax(0, 1fr);
    /* The ship keeps at least two fifths of the width: on a 667 px phone a 420 px panel left it a
       143 px sliver, and the square stage ran under the Play button and off the left edge. */
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: center;
    column-gap: 12px;
    padding: 8px max(16px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) 16px;
    overflow: hidden;
  }
  /* The stage fills its column whatever its shape (the parent fits the ship to the canvas), and the
     name tag stays inside it: the name gives way, its creator is left to the taller layouts. */
  .sp-splay__hero { height: 100%; overflow: hidden; }
  .sp-splay__stage { width: 100%; height: 100%; min-height: 0; max-height: 100%; aspect-ratio: auto; }
  .sp-splay__ship { box-sizing: border-box; max-width: 100%; }
  .sp-splay__ship-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .sp-splay__ship-by { display: none; }
  .sp-splay__panel { gap: 6px; width: 100%; justify-self: stretch; }
  .sp-splay__mastery { padding: 6px 8px; }
  .sp-splay__tagline { font-size: 20px; }
  .sp-splay__go { min-height: 52px; margin-bottom: 6px; font-size: 22px; }
  .sp-splay__hero::after { content: none; }
}