/*
 * Ozvěna Heleny — a gamebook read mostly on a phone, in the dark.
 *
 * Three things drive every decision below:
 *
 *   Legibility over decoration. The artwork is atmosphere; the text is the
 *   game. A scrim sits between them and never gets thinner than the longest
 *   paragraph needs.
 *
 *   Thumb reach. Choices live at the bottom, are at least 52px tall, and never
 *   depend on hover. The status bar stays out of the way at the top.
 *
 *   No layout jump. Backgrounds cross-fade behind fixed chrome, so arriving in
 *   a new scene never moves the text the player is already reading.
 */

:root {
  --ink:            #eef1f6;
  --ink-dim:        #a8b1c0;
  --ink-faint:      #6f7a8c;

  --bg:             #07090f;
  --panel:          rgba(14, 18, 27, 0.92);
  --panel-solid:    #0e121b;
  --line:           rgba(148, 168, 200, 0.18);
  --line-strong:    rgba(148, 168, 200, 0.34);

  --amber:          #f0a83c;
  --amber-dim:      #8a5f1d;
  --cyan:           #4fd1c5;
  --red:            #e2564a;
  --green:          #63d18a;

  --radius:         14px;
  --radius-sm:      10px;

  --shadow:         0 18px 44px rgba(0, 0, 0, 0.55);
  --measure:        34rem;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  /* The emoji families are explicit: item icons and the sound toggle are
     pictographs, and a bare system-ui stack renders them as tofu on Linux. */
  --emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
           "Twemoji Mozilla", "Segoe UI Symbol", sans-serif;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
          sans-serif, var(--emoji);
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }

/* Several components below set `display`, which outranks the user-agent rule
   for [hidden] and would leave hidden elements on screen. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  /* Czech sets long words and diacritics; give them room to breathe. */
  line-height: 1.62;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
}

body { overflow: hidden; }

button, input { font: inherit; color: inherit; }

/* ------------------------------------------------------------ backdrop -- */

.backdrop { position: fixed; inset: 0; z-index: 0; background: var(--bg); }

.backdrop__layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 900ms ease;
  /* A slow drift keeps a still image from reading as a frozen screenshot. */
  animation: drift 48s ease-in-out infinite alternate;
  will-change: opacity, transform;
}
.backdrop__layer.is-active { opacity: 1; }

@keyframes drift {
  from { transform: scale(1.06) translate3d(-0.8%, -0.6%, 0); }
  to   { transform: scale(1.12) translate3d(0.8%, 0.6%, 0); }
}

.backdrop__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 9, 15, 0.86) 0%, rgba(7, 9, 15, 0.38) 26%,
                             rgba(7, 9, 15, 0.62) 62%, rgba(7, 9, 15, 0.95) 100%),
    radial-gradient(120% 80% at 50% 40%, transparent 30%, rgba(7, 9, 15, 0.7) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .backdrop__layer { animation: none; transition-duration: 240ms; }
}

/* ------------------------------------------------------------- screens -- */

.app { position: relative; z-index: 1; height: 100dvh; }

.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  padding: calc(var(--safe-t) + 0.75rem) calc(var(--safe-r) + 1rem)
           calc(var(--safe-b) + 0.75rem) calc(var(--safe-l) + 1rem);
}
.screen.is-active { display: flex; }

.boot { margin: auto; }

.spinner {
  width: 34px; height: 34px;
  border: 2px solid var(--line-strong);
  border-top-color: var(--amber);
  border-radius: 50%;
  animation: spin 900ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------- title -- */

.title {
  margin: auto;
  width: 100%;
  max-width: var(--measure);
  text-align: center;
}

.title__eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amber);
}

.title__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 11vw, 3.8rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.8);
}

.title__sub {
  margin: 0.75rem 0 0;
  color: var(--ink-dim);
  font-size: 0.95rem;
}

.title__synopsis {
  margin: 1.6rem auto 0;
  max-width: 30rem;
  color: var(--ink-dim);
  font-size: 1rem;
}

.title__actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 2rem;
}

.title__hint {
  margin: 1.4rem 0 0;
  font-size: 0.8rem;
  color: var(--ink-faint);
}

.title__foot {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding-top: 1rem;
}

/* -------------------------------------------------------------- pieces -- */

.btn {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 0.85rem 1.2rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgba(18, 23, 34, 0.82);
  backdrop-filter: blur(10px);
  color: var(--ink);
  font-size: 1rem;
  text-align: center;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 90ms ease;
}
.btn:hover { background: rgba(28, 35, 50, 0.9); border-color: var(--line-strong); }
.btn:active { transform: scale(0.985); }

.btn--primary {
  border-color: rgba(240, 168, 60, 0.5);
  background: linear-gradient(180deg, rgba(240, 168, 60, 0.22), rgba(240, 168, 60, 0.10));
  color: #fde4bb;
}
.btn--primary:hover { background: linear-gradient(180deg, rgba(240, 168, 60, 0.32), rgba(240, 168, 60, 0.16)); }

.btn--quiet {
  min-height: 44px;
  border-color: transparent;
  background: transparent;
  color: var(--ink-faint);
  font-size: 0.9rem;
}
.btn--quiet:hover { background: rgba(255, 255, 255, 0.05); color: var(--ink-dim); }

.btn[disabled] { opacity: 0.45; cursor: not-allowed; }

.chip {
  min-height: 40px;
  padding: 0.4rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(14, 18, 27, 0.7);
  color: var(--ink-dim);
  font-size: 0.85rem;
  cursor: pointer;
}
.chip:hover { color: var(--ink); border-color: var(--line-strong); }

.icon-btn {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}
.icon-btn:hover { background: rgba(255, 255, 255, 0.07); }
.icon-btn[aria-pressed="true"] { color: var(--amber); }

.badge {
  position: absolute;
  top: 2px; right: 2px;
  min-width: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--amber);
  color: #1a1206;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 18px;
}

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

/* ---------------------------------------------------------------- menu -- */

.bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
}
.bar__title { margin: 0; font-size: 1.05rem; font-weight: 600; }
.bar__spacer { flex: 1; }

.sheet {
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto 1.2rem;
  overflow-y: auto;
}
.sheet__head {
  margin: 0.4rem 0 0.7rem;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

#screen-menu { overflow-y: auto; }

.card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  margin-bottom: 0.55rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.card:hover { border-color: var(--line-strong); }
.card__body { flex: 1; min-width: 0; }
.card__title { display: block; font-weight: 600; }
.card__meta {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.82rem;
  color: var(--ink-faint);
}
.card__tag {
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: rgba(99, 209, 138, 0.14);
  color: var(--green);
  font-size: 0.72rem;
  white-space: nowrap;
}
.card__tag--bad { background: rgba(226, 86, 74, 0.14); color: var(--red); }

.card__del {
  flex: none;
  min-width: 40px; min-height: 40px;
  border: 0; border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
}
.card__del:hover { background: rgba(226, 86, 74, 0.16); color: var(--red); }

.empty {
  padding: 1.2rem;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--ink-faint);
  font-size: 0.9rem;
  text-align: center;
}

/* ---------------------------------------------------------------- play -- */

.screen--play { padding-left: 0; padding-right: 0; }

.hud {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: none;
  padding: 0 calc(var(--safe-r) + 0.5rem) 0.5rem calc(var(--safe-l) + 0.5rem);
}

.hud__stats {
  display: flex;
  flex: 1;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0.15rem 0.25rem;
}
.hud__stats::-webkit-scrollbar { display: none; }

.stat {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: none;
  padding: 0.26rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(10, 13, 20, 0.72);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.stat__icon { opacity: 0.85; font-family: var(--emoji); }
.stat__value { font-weight: 600; }
.stat__bonus { color: var(--cyan); font-size: 0.76rem; }
.stat--hp { border-color: rgba(226, 86, 74, 0.4); }
.stat--low { animation: pulse-danger 1.6s ease-in-out infinite; }

@keyframes pulse-danger {
  50% { border-color: var(--red); box-shadow: 0 0 12px rgba(226, 86, 74, 0.4); }
}

.hud__tools { display: flex; flex: none; }

/* The scrolling pane and its "more below" cue share one stacking box, so the
   cue can sit on the pane's bottom edge wherever the choices bar happens to
   start. `min-height: 0` on both: without it a flex child refuses to shrink
   below its content and the pane never scrolls, it just overflows the screen. */
.scene-wrap {
  position: relative;
  display: flex;
  flex: 1;
  min-height: 0;
}

.scene {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0.5rem calc(var(--safe-r) + 1.1rem) 1rem calc(var(--safe-l) + 1.1rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* Shown only while something is still below the fold. A phone-sized screen
   with the choices bar taking its share cuts long scenes off mid-sentence,
   and a hard edge reads as "that is the end of the text" rather than "scroll". */
.scene__more {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3.4rem;
  opacity: 0;
  transition: opacity 220ms ease;
  background: linear-gradient(to top, rgba(7, 9, 15, 0.9), rgba(7, 9, 15, 0));
  pointer-events: none;
}
.scene-wrap.has-more .scene__more { opacity: 1; }
.scene__more::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0.55rem;
  width: 0.6rem;
  height: 0.6rem;
  margin-left: -0.3rem;
  border-right: 2px solid var(--amber);
  border-bottom: 2px solid var(--amber);
  animation: nudge 1.8s ease-in-out infinite;
}

@keyframes nudge {
  0%, 100% { transform: rotate(45deg) translate(-1px, -1px); opacity: 0.5; }
  50%      { transform: rotate(45deg) translate(1px, 1px);   opacity: 1; }
}

.scene__title {
  margin: 0.5rem 0 1rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 6vw, 2rem);
  line-height: 1.15;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.8);
}

.scene__text p {
  margin: 0 0 1.05em;
  font-size: 1.06rem;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.75);
  text-wrap: pretty;
}
.scene__text em { color: #fbe6c4; font-style: italic; }

/* Notes are the engine talking: what an effect just did to you. The two
   groups sit on opposite sides of the prose -- see Transition in engine.py --
   so they read in the order the player lived them. */
.scene__notes:not(:empty) { margin: 1.2rem 0 0; }
.scene__notes--action:not(:empty) { margin: 0 0 1.3rem; }
.note {
  margin: 0 0 0.5rem;
  padding: 0.7rem 0.9rem;
  border-left: 2px solid var(--amber);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgba(240, 168, 60, 0.09);
  color: #f6dfba;
  font-size: 0.95rem;
  /* Notes are set as textContent; some carry deliberate line breaks
     (the AI's longer replies), which must survive. */
  white-space: pre-line;
  animation: rise 380ms ease both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Rides with the action notes above the prose: gaining a level is feedback on
   the move you just made, and it is the one thing that must never be missed. */
.levelup {
  margin: 0 0 1.3rem;
  padding: 0.8rem 1rem;
  border: 1px solid rgba(79, 209, 197, 0.4);
  border-radius: var(--radius-sm);
  background: rgba(79, 209, 197, 0.1);
  color: #b9f1ea;
  font-size: 0.95rem;
  text-align: center;
  animation: rise 380ms ease both;
}

.ending {
  margin: 1.6rem 0 0.5rem;
  padding: 1.4rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
  text-align: center;
}
.ending__kicker {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.ending__title {
  margin: 0.4rem 0 1.2rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.6rem;
}
.ending--good .ending__title { color: var(--green); }
.ending--bad  .ending__title { color: var(--red); }
.ending__actions { display: flex; flex-direction: column; gap: 0.55rem; }

/* ------------------------------------------------------------- choices -- */

.choices {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0.4rem calc(var(--safe-r) + 1.1rem) 0.4rem calc(var(--safe-l) + 1.1rem);
  max-height: 46dvh;
  overflow-y: auto;
}
.choices:empty { display: none; }

.choice {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 54px;
  padding: 0.8rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgba(13, 17, 26, 0.86);
  backdrop-filter: blur(12px);
  color: var(--ink);
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
  animation: rise 320ms ease both;
  transition: background 160ms ease, border-color 160ms ease, transform 90ms ease;
}
.choice:hover { background: rgba(24, 31, 46, 0.92); border-color: rgba(240, 168, 60, 0.45); }
.choice:active { transform: scale(0.99); }

.choice::before {
  content: "›";
  flex: none;
  color: var(--amber);
  font-size: 1.3rem;
  line-height: 1;
}

.choice--locked {
  border-style: dashed;
  border-color: var(--line);
  background: rgba(10, 13, 20, 0.6);
  color: var(--ink-faint);
  cursor: not-allowed;
}
.choice--locked::before { content: "🔒"; font-size: 0.9rem; }
.choice__why {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.82rem;
  font-style: italic;
  color: var(--ink-faint);
}

/* -------------------------------------------------------------- combat -- */

.combat {
  flex: none;
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0.75rem calc(var(--safe-r) + 1rem) 0.5rem calc(var(--safe-l) + 1rem);
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(10, 13, 20, 0.55), rgba(10, 13, 20, 0.94));
  backdrop-filter: blur(14px);
}

.combat__enemy { display: flex; align-items: center; gap: 0.85rem; }

.combat__sprite {
  width: 68px; height: 68px;
  flex: none;
  object-fit: contain;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.7));
}
.combat__sprite.is-hit { animation: shake 260ms ease; }

@keyframes shake {
  25% { transform: translateX(-6px) rotate(-2deg); }
  75% { transform: translateX(6px) rotate(2deg); }
}

.combat__info { flex: 1; min-width: 0; }
.combat__name { margin: 0 0 0.35rem; font-weight: 600; font-size: 0.98rem; }
.combat__round {
  margin: 0.3rem 0 0;
  font-size: 0.78rem;
  color: var(--ink-faint);
}

.bar-hp {
  height: 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  overflow: hidden;
}
.bar-hp__fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--red), #f08a5d);
  transition: width 420ms cubic-bezier(0.2, 0.8, 0.3, 1);
}

.combat__log {
  max-height: 5.6rem;
  margin: 0.7rem 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  font-size: 0.86rem;
  color: var(--ink-dim);
}
.combat__log li { margin-bottom: 0.2rem; animation: rise 260ms ease both; }
.combat__log .is-player { color: var(--cyan); }
.combat__log .is-enemy  { color: #f0968c; }
.combat__log .is-big    { color: var(--amber); font-weight: 600; }
.combat__log .is-round  {
  margin-top: 0.35rem;
  padding-top: 0.3rem;
  border-top: 1px solid var(--line);
  color: var(--ink-faint);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.combat__actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.45rem;
}
.combat__actions .btn { min-height: 48px; padding: 0.6rem 0.8rem; font-size: 0.95rem; }
.combat__actions .btn--wide { grid-column: 1 / -1; }

/* ------------------------------------------------------- drawers/modal -- */

.drawer, .modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;
  background: rgba(3, 5, 9, 0.6);
  backdrop-filter: blur(3px);
}
.drawer.is-open, .modal.is-open { display: block; }

.drawer__panel {
  position: absolute;
  inset: auto 0 0 0;
  max-height: 82dvh;
  display: flex;
  flex-direction: column;
  border-radius: 20px 20px 0 0;
  border-top: 1px solid var(--line-strong);
  background: var(--panel-solid);
  box-shadow: var(--shadow);
  animation: slide-up 260ms cubic-bezier(0.2, 0.8, 0.3, 1) both;
  padding-bottom: var(--safe-b);
}

@keyframes slide-up {
  from { transform: translateY(100%); }
  to   { transform: none; }
}

.modal__panel {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(26rem, calc(100vw - 2rem));
  max-height: 88dvh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel-solid);
  box-shadow: var(--shadow);
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex: none;
  padding: 1rem 0.75rem 0.75rem 1.2rem;
  border-bottom: 1px solid var(--line);
}
.drawer__head h3 { margin: 0; font-size: 1rem; font-weight: 600; }

.drawer__body, .modal__body {
  padding: 1rem 1.2rem calc(1.2rem + var(--safe-b));
  overflow-y: auto;
}

/* ----------------------------------------------------------- inventory -- */

.item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line);
}
.item:last-child { border-bottom: 0; }
.item__icon {
  flex: none;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
  font-size: 1.2rem;
}
.item__body { flex: 1; min-width: 0; }
.item__name { font-weight: 600; font-size: 0.95rem; }
.item__qty { color: var(--amber); font-weight: 700; }
.item__desc { margin: 0.15rem 0 0; font-size: 0.86rem; color: var(--ink-dim); }
.item__bonus {
  display: inline-block;
  margin-top: 0.3rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: rgba(79, 209, 197, 0.14);
  color: var(--cyan);
  font-size: 0.76rem;
}
.item__use {
  flex: none;
  align-self: center;
  min-height: 40px;
  padding: 0.4rem 0.9rem;
  border: 1px solid rgba(240, 168, 60, 0.45);
  border-radius: var(--radius-sm);
  background: rgba(240, 168, 60, 0.14);
  color: #fde4bb;
  font-size: 0.88rem;
  cursor: pointer;
}
.item__use[disabled] { opacity: 0.4; cursor: not-allowed; }

/* ------------------------------------------------------------- journal -- */

.entry {
  position: relative;
  padding: 0 0 1rem 1.4rem;
  border-left: 1px solid var(--line);
}
.entry:last-child { border-left-color: transparent; padding-bottom: 0; }
.entry::before {
  content: "";
  position: absolute;
  left: -4.5px; top: 6px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ink-faint);
}
.entry--combat_win::before  { background: var(--green); }
.entry--combat_lose::before { background: var(--red); }
.entry--ending::before      { background: var(--amber); }

.entry__where {
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.entry__what { margin: 0.1rem 0 0; font-size: 0.95rem; }
.entry__kind { font-size: 0.82rem; color: var(--ink-dim); font-style: italic; }

/* ---------------------------------------------------------------- form -- */

.account__who {
  margin: 0 0 1rem;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.9rem;
  color: var(--ink-dim);
}

.form { display: flex; flex-direction: column; gap: 0.85rem; }
.form__lead { margin: 0; font-size: 0.9rem; color: var(--ink-dim); }

.field { display: flex; flex-direction: column; gap: 0.3rem; }
.field span { font-size: 0.82rem; color: var(--ink-faint); }
.field input {
  min-height: 48px;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.35);
  /* 16px keeps iOS from zooming the viewport when the field takes focus. */
  font-size: 16px;
}
.field input:focus { border-color: var(--amber); outline: none; }

.form__error {
  margin: 0;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-sm);
  background: rgba(226, 86, 74, 0.14);
  color: #f4a79f;
  font-size: 0.88rem;
}

/* --------------------------------------------------------------- toast -- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--safe-b) + 1.5rem);
  z-index: 60;
  transform: translateX(-50%);
  max-width: min(24rem, calc(100vw - 2rem));
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(14, 18, 27, 0.96);
  box-shadow: var(--shadow);
  font-size: 0.9rem;
  animation: rise 240ms ease both;
}

/* ------------------------------------------------------------ wide-ish -- */

@media (min-width: 780px) and (min-height: 620px) {
  :root { --measure: 40rem; }
  .title__actions { flex-direction: row; justify-content: center; }
  .title__actions .btn { width: auto; min-width: 12rem; }
  .ending__actions { flex-direction: row; justify-content: center; }
  .ending__actions .btn { width: auto; min-width: 10rem; }
  .combat__actions { grid-template-columns: repeat(4, 1fr); }
  .combat__actions .btn--wide { grid-column: auto; }
  .combat__log { max-height: 7rem; }
}