/* Gladling.
   The bench next door is a cold instrument; this is the game, and it wears the other face:
   flat poster colour, thick edges, chunky display type — cartoon outside, hard numbers
   inside (docs/DESIGN.md §8.7 art note). Torchlit sand against a dusk sky, and the only
   two semantic colours are damage that landed and damage that was stopped. */

:root {
  --night:  #241d33;
  --dusk:   #33294a;
  --sand:   #e8b96a;
  --sand-d: #c99a4c;
  --bone:   #f7f1e4;
  --flare:  #e2503f;   /* damage that landed */
  --moss:   #46a180;   /* damage that was stopped */

  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }

/* Any class that sets display (.view--entrance is a grid) would otherwise override the
   attribute, and the entrance stayed on screen above the game. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--night);
  color: var(--bone);
  font-family: var(--display);
  font-size: 16px;
  line-height: 1.5;
}

b { font-weight: 800; }

/* ---------- entrance ---------- */

.view--entrance {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 2rem 1.25rem;
  background:
    radial-gradient(120% 80% at 50% 110%, rgba(232,185,106,.35), transparent 60%),
    var(--night);
}

.entrance { width: min(30rem, 100%); text-align: center; }

.logo {
  font-size: clamp(3rem, 13vw, 6rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: .9;
  margin: 0;
  color: var(--sand);
}

.tagline {
  font-size: clamp(1rem, 3.5vw, 1.2rem);
  color: rgba(247,241,228,.72);
  margin: .9rem 0 2.5rem;
}

.tagline em { color: var(--bone); font-style: normal; font-weight: 800; }

.enter { display: grid; gap: .8rem; text-align: left; }

.enter__label,
.card__note,
.enter__note {
  font-family: var(--mono);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(247,241,228,.5);
}

.enter__note, .card__note { text-transform: none; letter-spacing: 0; font-size: .78rem; }

.enter__input {
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 600;
  padding: .8rem 1rem;
  border: 3px solid var(--sand);
  border-radius: 6px;
  background: var(--dusk);
  color: var(--bone);
  width: 100%;
}

.enter__input:focus { outline: 3px solid var(--flare); outline-offset: 2px; }

.enter__error { color: var(--flare); font-size: .85rem; min-height: 1.2em; margin: 0; }

/* ---------- buttons ---------- */

.btn {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.01em;
  padding: .7rem 1.4rem;
  border: 0;
  border-radius: 6px;
  background: var(--sand);
  color: var(--night);
  cursor: pointer;
  box-shadow: 0 4px 0 var(--sand-d);
}

.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--sand-d); }
.btn--big { font-size: 1.15rem; padding: .95rem 1.4rem; }

.btn--ghost {
  background: transparent;
  color: var(--bone);
  border: 2px solid rgba(247,241,228,.28);
  box-shadow: none;
}

.btn--ghost:hover { border-color: var(--sand); color: var(--sand); }
.btn--ghost:active { transform: none; }

.btn--flare { background: var(--flare); color: var(--bone); box-shadow: 0 4px 0 #a83526; }
.btn--flare:active { box-shadow: 0 2px 0 #a83526; }

button:focus-visible, input:focus-visible, a:focus-visible {
  outline: 3px solid var(--flare);
  outline-offset: 2px;
}

/* ---------- shell ---------- */

.shell { max-width: 68rem; margin: 0 auto; padding: 0 1rem 4rem; }

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.1rem 0;
  border-bottom: 3px solid var(--dusk);
}

.topbar__who { display: flex; align-items: baseline; gap: .8rem; }
.topbar__name { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.03em; color: var(--sand); }
.topbar__level { font-family: var(--mono); font-size: .82rem; color: rgba(247,241,228,.65); }
.topbar__right { display: flex; align-items: center; gap: .9rem; }

.fights {
  font-family: var(--mono);
  font-size: .78rem;
  color: rgba(247,241,228,.65);
}

.fights b { color: var(--sand); font-size: 1.1rem; }

.tabs { display: flex; gap: .4rem; padding: 1rem 0; flex-wrap: wrap; }

.tab {
  font-family: var(--display);
  font-weight: 600;
  font-size: .95rem;
  padding: .5rem 1.1rem;
  border: 2px solid rgba(247,241,228,.18);
  border-radius: 99px;
  background: transparent;
  color: rgba(247,241,228,.7);
  cursor: pointer;
}

.tab.is-on { background: var(--sand); border-color: var(--sand); color: var(--night); }

/* ---------- cards ---------- */

.card {
  background: var(--dusk);
  border: 3px solid rgba(0,0,0,.25);
  border-radius: 10px;
  padding: 1.1rem 1.2rem 1.3rem;
}

.card--hero { margin-bottom: 1rem; }

/* The gladiator's own look, drawn from the stored slot indices (look.js). Placeholder
   shapes today, PSB parts later — the markup and this rule do not change with that. */
.portrait {
  display: block;
  width: 120px;
  height: 120px;
  margin: 0 auto .9rem;
  border-radius: 50%;
  background: rgba(0,0,0,.22);
  box-shadow: inset 0 0 0 2px rgba(247,241,228,.14);
}

.card__heading {
  font-family: var(--mono);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: rgba(247,241,228,.5);
  margin: 0 0 .6rem;
}

.card__heading + .card__heading { margin-top: 1.1rem; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
}

/* ---------- barracks ---------- */

.hero__bar {
  height: 1.1rem;
  background: rgba(0,0,0,.3);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: .5rem;
}

.hero__xp { display: block; height: 100%; background: var(--sand); width: 0; transition: width .4s ease; }
.hero__xplabel { font-family: var(--mono); font-size: .8rem; color: rgba(247,241,228,.6); margin: 0 0 1.2rem; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .9rem; margin: 0; }
.stat { display: grid; gap: .1rem; }
.stat dt { font-family: var(--mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .14em; color: rgba(247,241,228,.5); }
.stat dd { margin: 0; font-size: 2rem; font-weight: 800; line-height: 1; color: var(--sand); }
.stat__why { font-size: .78rem; color: rgba(247,241,228,.45); }

.tags { display: flex; flex-wrap: wrap; gap: .35rem; }

.tag {
  font-family: var(--mono);
  font-size: .74rem;
  padding: .25rem .55rem;
  border-radius: 4px;
  background: rgba(0,0,0,.25);
  color: rgba(247,241,228,.8);
}

.carry { font-size: 1.05rem; font-weight: 600; margin: 0 0 .3rem; color: var(--bone); }
.record { font-family: var(--mono); font-size: 1rem; margin: 0 0 .4rem; }
.record b { color: var(--sand); font-size: 1.3rem; }

/* ---------- arena ---------- */

.arena__intro { color: rgba(247,241,228,.65); max-width: 46ch; margin: 0 0 1.2rem; }

.rivals { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .9rem; }

.rival {
  background: var(--dusk);
  border: 3px solid rgba(0,0,0,.25);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  display: grid;
  gap: .5rem;
}

.rival__name { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.rival__meta { font-family: var(--mono); font-size: .76rem; color: rgba(247,241,228,.6); margin: 0; }
.rival__power { color: var(--sand); }
.rival__acts { display: flex; gap: .5rem; margin-top: .3rem; flex-wrap: wrap; }
.rival__acts .btn { font-size: .88rem; padding: .5rem 1rem; }

/* ---------- level up ---------- */

.levelup {
  background: var(--sand);
  color: var(--night);
  border-radius: 10px;
  padding: 1.2rem;
  margin-bottom: 1.2rem;
}

.levelup__heading { font-size: 1.15rem; font-weight: 800; margin: 0 0 .9rem; letter-spacing: -0.02em; }

.offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .7rem; margin-bottom: .8rem; }

.offer {
  text-align: left;
  background: var(--bone);
  border: 3px solid rgba(0,0,0,.15);
  border-radius: 8px;
  padding: .8rem .9rem;
  cursor: pointer;
  font-family: var(--display);
  color: var(--night);
}

.offer:hover { border-color: var(--flare); }
.offer__label { display: block; font-weight: 800; font-size: 1.05rem; margin-bottom: .15rem; }
.offer__detail { font-size: .82rem; color: rgba(36,29,51,.7); }

.levelup .btn--ghost { border-color: rgba(36,29,51,.35); color: var(--night); }
.levelup .btn--ghost:hover { border-color: var(--night); color: var(--night); }
.levelup .btn--ghost:disabled { opacity: .4; cursor: not-allowed; }

/* ---------- fight ---------- */

.outcome {
  font-size: clamp(1.8rem, 7vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: .6rem;
}

.outcome--won { color: var(--sand); }
.outcome--lost { color: var(--flare); }
.outcome__tag { font-family: var(--mono); font-size: .8rem; letter-spacing: .1em; color: rgba(247,241,228,.5); display: block; font-weight: 400; margin-top: .3rem; }

.verdict {
  font-size: clamp(1.05rem, 2.6vw, 1.4rem);
  line-height: 1.4;
  max-width: 52ch;
  margin: 0 0 1.6rem;
  padding-left: .9rem;
  border-left: 4px solid var(--flare);
}

.verdict .n { font-family: var(--mono); font-weight: 600; color: var(--sand); }

.trace { margin: 0 0 1.2rem; }

.trace__cap {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; flex-wrap: wrap;
  font-family: var(--mono); font-size: .7rem; text-transform: uppercase;
  letter-spacing: .14em; color: rgba(247,241,228,.5); margin-bottom: .5rem;
}

.trace__legend { display: flex; align-items: center; gap: .35rem; letter-spacing: .04em; }
.sw { width: .8rem; height: 3px; display: inline-block; }
.sw--a { background: var(--sand); }
.sw--b { background: var(--moss); }
.sw--turn { background: var(--flare); width: 2px; height: 11px; }

#trace {
  display: block; width: 100%;
  height: clamp(170px, 28vw, 300px);
  background: var(--dusk);
  border-radius: 10px;
}

.ledger { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: .84rem; }
.ledger td { padding: .35rem 0; border-bottom: 1px solid rgba(247,241,228,.1); }
.ledger td:first-child { color: rgba(247,241,228,.55); }
.ledger td:not(:first-child) { text-align: right; }

.fired__row {
  display: flex; justify-content: space-between; gap: .8rem;
  font-family: var(--mono); font-size: .8rem;
  padding: .35rem 0; border-bottom: 1px solid rgba(247,241,228,.1);
}

.fired__row--silent .fired__what { color: var(--flare); }

.steps { list-style: none; margin: 0; padding: 0; max-height: 22rem; overflow-y: auto; font-family: var(--mono); font-size: .8rem; }
.steps li { display: flex; gap: .55rem; padding: .25rem .3rem; }
.steps li.is-turn { background: rgba(226,80,63,.16); border-left: 3px solid var(--flare); }
/* The log is uncovered in step with the replay: a blow the canvas has not thrown yet stays
   greyed out, and the one it just threw is marked. */
.steps li.is-pending { opacity: .22; }
.steps li.is-now {
  background: rgba(247,241,228,.09);
  box-shadow: inset 2px 0 0 var(--bone);
}
.steps li { transition: opacity .18s ease; }
.step__i { color: rgba(247,241,228,.35); min-width: 3ch; text-align: right; }
.step--hit { color: var(--flare); }
.step--stop { color: var(--moss); }
.step--skill { color: var(--sand); }
.step--heal { color: var(--moss); }

.foot {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: 3rem; padding-top: 1rem;
  border-top: 3px solid var(--dusk);
  font-family: var(--mono); font-size: .72rem; color: rgba(247,241,228,.4);
}

.foot a { color: var(--sand); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- replay stage ---------- */

.stage { position: relative; margin: 0 0 1.4rem; }

/* The fight log, on the sand. Bottom right of the arena, dark and translucent so the
   fighters stay visible through it — the combat text box every RPG has. It scrolls, and
   while the replay runs it scrolls itself. */
.stagelog {
  position: absolute;
  right: .7rem;
  bottom: .7rem;
  width: min(24rem, 44%);
  max-height: 34%;
  display: flex;
  flex-direction: column;
  background: rgba(11, 8, 18, .58);
  backdrop-filter: blur(3px);
  border: 1px solid rgba(247, 241, 228, .14);
  border-radius: 8px;
  padding: .45rem .3rem .35rem .5rem;
  pointer-events: auto;
}

.stagelog__cap {
  margin: 0 0 .35rem;
  font-family: var(--mono);
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: rgba(247, 241, 228, .45);
}

/* On the sand the list carries its own height; the standalone card rule below no longer
   applies to it. */
.stagelog .steps {
  max-height: none;
  flex: 1;
  min-height: 0;
  font-size: .72rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(247, 241, 228, .25) transparent;
}

.stagelog .steps::-webkit-scrollbar { width: 6px; }
.stagelog .steps::-webkit-scrollbar-thumb {
  background: rgba(247, 241, 228, .25);
  border-radius: 3px;
}

/* Narrow screens have no room beside the fighters, and the controls wrap onto a second line
   that an overlay would cover. So the log leaves the sand and sits between the arena and
   the controls, at a fixed height that still scrolls with the replay. */
@media (max-width: 620px) {
  .stagelog { position: static; width: auto; max-height: 11rem; margin-top: .5rem; }
  .stagelog .steps { font-size: .66rem; }
}

#stage {
  display: block;
  width: 100%;
  height: clamp(280px, 40vw, 440px);
  border-radius: 10px;
  background: var(--dusk);
}

.stage__controls {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
  margin-top: .6rem;
}

.stage__controls .btn { font-size: .9rem; padding: .45rem 1.1rem; }

.stage__speed {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--mono);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(247,241,228,.5);
}

.stage__speed input { width: 6rem; accent-color: var(--sand); }
.stage__speed output { color: var(--sand); }

.stage__count {
  font-family: var(--mono);
  font-size: .72rem;
  color: rgba(247,241,228,.4);
  margin-left: auto;
}

/* ---------- shared fight viewer ---------- */

.watch { display: grid; gap: .6rem; margin: 1.4rem 0 1rem; }
.watch__kind {
  font-family: var(--mono);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(247,241,228,.5);
  margin: 0;
}
.watch__title { font-size: clamp(1.6rem, 6vw, 2.6rem); font-weight: 800; letter-spacing: -0.03em; margin: 0; }
.watch__cta { justify-self: start; text-decoration: none; }

.enter__challenge { margin: 0 0 1rem; font-size: 1.05rem; }

/* ---------- share ---------- */

.share { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: .4rem 0 1rem; }
.share__why,
.share__done { font-family: var(--mono); font-size: .78rem; color: rgba(247,241,228,.6); }
.share__done { color: var(--moss); }