:root {
  --ink: #eee8d8;
  --muted: #aaa38f;
  --night: #111713;
  --panel: #19221c;
  --panel-strong: #202b23;
  --line: #354438;
  --moss: #9fbd79;
  --moss-bright: #c4db99;
  --danger: #e59b8e;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--night);
}

* { box-sizing: border-box; }

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  background: var(--night);
  transition: background-color 420ms ease, color 420ms ease;
}

.scene-stage {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  background: var(--night);
  pointer-events: none;
}

.scene-layer {
  position: absolute;
  inset: -1.5rem;
  background-position: center;
  background-size: cover;
  filter: saturate(.78) contrast(1.04);
  opacity: 0;
  transform: scale(1.045);
  animation: scene-drift 48s ease-in-out infinite alternate;
  transition: filter 700ms ease, opacity 900ms ease;
}

.scene-layer:first-child { background-image: url("/images/harrow-keep.jpg"); }
.scene-layer-active { opacity: 1; }

.scene-shade,
.scene-ambience {
  position: absolute;
  inset: 0;
}

.scene-shade {
  background:
    radial-gradient(circle at 50% 30%, rgba(15, 20, 19, .16), rgba(8, 12, 11, .48) 62%),
    linear-gradient(180deg, rgba(8, 12, 11, .26), rgba(8, 12, 11, .72));
  transition: background 500ms ease;
}

.scene-ambience { opacity: 0; transition: opacity 700ms ease; }

body.room-active .scene-layer {
  filter: blur(8px) saturate(.92) contrast(1.02);
}

body.room-active .scene-shade {
  background:
    radial-gradient(circle at 50% 35%,
      color-mix(in srgb, var(--panel-strong) 18%, transparent), transparent 62%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--night) 46%, transparent),
      color-mix(in srgb, var(--night) 74%, transparent));
}

body[data-ambience="rain"] .scene-ambience {
  background: repeating-linear-gradient(110deg,
    transparent 0 16px, rgba(215, 229, 232, .26) 17px, transparent 18px 31px);
  background-size: 180% 180%;
  opacity: .055;
  animation: rain-drift 1.8s linear infinite;
}

body[data-ambience="mist"] .scene-ambience {
  background:
    radial-gradient(ellipse at 15% 55%, rgba(205, 215, 207, .2), transparent 38%),
    radial-gradient(ellipse at 82% 42%, rgba(205, 215, 207, .14), transparent 34%);
  opacity: .12;
  animation: mist-drift 32s ease-in-out infinite alternate;
}

body[data-ambience="embers"] .scene-ambience {
  background-image:
    radial-gradient(circle, rgba(235, 154, 86, .7) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(223, 112, 60, .5) 0 1px, transparent 1.5px);
  background-position: 0 0, 18px 26px;
  background-size: 43px 61px, 67px 83px;
  opacity: .09;
  animation: ember-rise 18s linear infinite;
}

@keyframes scene-drift {
  from { transform: scale(1.045) translate3d(-.3%, -.15%, 0); }
  to { transform: scale(1.075) translate3d(.35%, .2%, 0); }
}

@keyframes rain-drift {
  from { background-position: 0 -30%; }
  to { background-position: -12% 130%; }
}

@keyframes mist-drift {
  from { transform: translate3d(-2%, 0, 0) scale(1.04); }
  to { transform: translate3d(2%, -.5%, 0) scale(1.08); }
}

@keyframes ember-rise {
  from { background-position: 0 80px, 18px 106px; }
  to { background-position: 12px -80px, 8px -54px; }
}

main {
  position: relative;
  z-index: 1;
  width: min(1440px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  padding: clamp(1rem, 4vw, 3rem);
}

.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }

.gate {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(23rem, 30rem);
  width: min(1180px, 100%);
  min-height: calc(100vh - clamp(2rem, 8vw, 6rem));
  align-items: center;
  gap: clamp(2.5rem, 7vw, 7rem);
  margin: 0 auto;
}

.landing-hero { max-width: 44rem; text-shadow: 0 3px 22px rgba(0, 0, 0, .7); }
.gate h1 {
  margin: 0;
  color: #f2eddf;
  font: 500 clamp(3.8rem, 7.8vw, 7.4rem)/.86 Georgia, "Times New Roman", serif;
  letter-spacing: -.055em;
}
.gate h1 span,
.gate h1 strong { display: block; }
.gate h1 span { font-size: .52em; font-weight: 400; letter-spacing: .015em; }
.gate h1 strong { color: #e3c4ae; font-weight: 500; }
.landing-tagline {
  margin: 1.15rem 0 0;
  color: #c2c6bd;
  font-size: .82rem;
  font-weight: 650;
  letter-spacing: .06em;
}

.entry-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(1.35rem, 3vw, 2rem);
  border: 1px solid rgba(187, 198, 181, .2);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(29, 39, 34, .58), rgba(11, 17, 14, .68));
  backdrop-filter: blur(13px) saturate(.95);
  box-shadow: 0 20px 55px rgba(0, 0, 0, .25), inset 0 1px rgba(255, 255, 255, .035);
}
.entry-panel::before {
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  content: "";
  background: linear-gradient(90deg, transparent, #d4a88f 35%, #aabe8d 68%, transparent);
  opacity: .8;
}
.entry-panel:has(#code-step:not(.hidden)) {
  width: min(25rem, 100%);
  justify-self: end;
  padding: 1.2rem;
  border-radius: 14px;
}
.gate-step { animation: gate-step-in 260ms ease both; }
@keyframes gate-step-in {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}
.gate-step h2 {
  margin: 0 0 .9rem;
  color: #f0eadb;
  font: 500 clamp(1.65rem, 3vw, 2.15rem)/1.15 Georgia, "Times New Roman", serif;
}
.code-field label {
  display: block;
  color: #c4cbbf;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.gate .code-field input {
  width: 100%;
  margin: .45rem 0 1rem;
  padding: .9rem 1rem;
  color: #f3eddf;
  border: 1px solid rgba(146, 163, 149, .42);
  border-radius: 10px;
  outline: none;
  background: rgba(7, 12, 9, .38);
  font: 650 .91rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.gate .code-field input::placeholder { color: #626b63; }
.gate .code-field input:focus { border-color: #b7ca91; box-shadow: 0 0 0 3px rgba(174, 198, 134, .12); }
.entry-primary {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: .82rem 1rem;
  color: #151b16;
  border: 1px solid #c7dca0;
  background: linear-gradient(135deg, #d0e6a9, #a9c384);
  box-shadow: 0 8px 24px rgba(114, 145, 83, .15);
}
.entry-primary span { font-size: 1.2rem; line-height: 1; }
.entry-primary:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); }
#code-step .entry-primary {
  width: auto;
  gap: 2.5rem;
  margin-left: auto;
  padding: .65rem .85rem;
  color: #e1e8d7;
  border-color: rgba(177, 202, 139, .5);
  background: rgba(148, 174, 112, .13);
  box-shadow: none;
}

.class-grid { display: grid; gap: .65rem; margin: 0; }
.gate .class-choice {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .8rem;
  align-items: center;
  padding: .9rem;
  overflow: hidden;
  color: #d9d8cf;
  border: 1px solid #435148;
  border-radius: 12px;
  background: rgba(8, 14, 10, .48);
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}
.gate .class-choice:hover { border-color: #778d72; transform: translateY(-1px); }
.gate .class-choice:has(input:checked) {
  border-color: #b0ca8b;
  background: linear-gradient(135deg, rgba(161, 190, 123, .16), rgba(22, 32, 25, .72));
  box-shadow: inset 3px 0 #bad295;
}
.gate .class-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.gate .class-choice:focus-within { outline: 2px solid var(--moss-bright); outline-offset: 2px; }
.class-icon {
  display: grid;
  width: 2.7rem;
  height: 2.7rem;
  place-items: center;
  color: #afbdad;
  border: 1px solid #526057;
  border-radius: 10px;
  background: rgba(255, 255, 255, .035);
}
.class-icon svg { width: 1.55rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.class-choice:has(input:checked) .class-icon { color: #d4e7ad; border-color: #829a73; background: rgba(159, 189, 121, .1); }
.class-copy { display: grid; gap: .18rem; }
.gate .class-copy strong { color: #eee9dc; font: 600 1.05rem/1.2 Georgia, "Times New Roman", serif; }
.gate .class-copy small { color: #aeb2a9; font-size: .72rem; line-height: 1.35; }
.class-select {
  display: grid;
  width: 1.35rem;
  height: 1.35rem;
  place-items: center;
  color: transparent;
  border: 1px solid #536158;
  border-radius: 50%;
  font-size: .7rem;
}
.class-choice:has(input:checked) .class-select { color: #182016; border-color: #c5dc9d; background: #c5dc9d; }
.class-actions { display: grid; grid-template-columns: auto 1fr; gap: .65rem; margin-top: 1rem; }
.entry-back { padding: .75rem .9rem; color: #aeb5ab; border: 1px solid #46534a; background: transparent; }
.entry-back:hover:not(:disabled) { border-color: #829179; filter: none; }
.gate-error { margin-bottom: 0; font-size: .78rem; }
.gate-error:empty { display: none; }

h1 { margin: .15rem 0 .75rem; font-family: Georgia, serif; font-size: clamp(2.4rem, 8vw, 4.8rem); font-weight: 500; }
.eyebrow { margin: 0; color: var(--moss); font-size: .76rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.lede { max-width: 42ch; margin: 0 0 2.25rem; color: var(--muted); font-family: Georgia, serif; font-size: 1.15rem; line-height: 1.6; }

label, legend { color: var(--muted); font-size: .9rem; font-weight: 650; }
input, button { font: inherit; }
input[type="text"], input:not([type]) {
  width: 100%;
  margin: .5rem 0 1.25rem;
  padding: .9rem 1rem;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 9px;
  outline: none;
  background: #101612;
}
input:focus { border-color: var(--moss); box-shadow: 0 0 0 3px rgba(159, 189, 121, .13); }

fieldset { display: grid; gap: .7rem; margin: 0 0 1.4rem; padding: 0; border: 0; }
legend { margin-bottom: .6rem; }
.class-choice { display: flex; align-items: center; gap: .8rem; padding: .85rem; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; }
.class-choice:has(input:checked) { border-color: var(--moss); background: rgba(159, 189, 121, .08); }
.class-choice span { display: grid; gap: .15rem; }
.class-choice strong { color: var(--ink); }
.class-choice small { color: var(--muted); font-weight: 400; }

button {
  padding: .85rem 1.2rem;
  color: #10140f;
  border: 0;
  border-radius: 9px;
  background: var(--moss-bright);
  font-weight: 750;
  cursor: pointer;
}
button:hover:not(:disabled) { filter: brightness(1.08); }
button:disabled { cursor: not-allowed; opacity: .45; }
button.quiet { padding: .55rem .7rem; color: var(--muted); border: 1px solid var(--line); background: transparent; font-size: .82rem; }

.error { min-height: 1.3em; margin: .8rem 0 0; color: var(--danger); font-size: .9rem; }

.game {
  display: grid;
  grid-template-rows: auto minmax(20rem, 1fr) auto;
  height: calc(100vh - clamp(2rem, 8vw, 6rem));
  min-height: 40rem;
}
.game header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.game header h1 { margin: 0; font-size: clamp(1.7rem, 5vw, 2.7rem); }
.status-block { display: flex; align-items: center; gap: .8rem; }
.session-actions { display: flex; gap: .45rem; }
.status { color: var(--muted); font-size: .86rem; }
.status.ready { color: var(--moss-bright); }

.play-layout {
  display: grid;
  grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr) minmax(16rem, 20rem);
  gap: 1rem;
  min-height: 0;
}

.room-panel,
.character-panel {
  position: sticky;
  top: 1rem;
  align-self: start;
  max-height: 100%;
  padding: 1.15rem;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(155deg,
    color-mix(in srgb, var(--panel-strong) 92%, transparent),
    color-mix(in srgb, var(--night) 94%, transparent));
  backdrop-filter: blur(16px) saturate(1.08);
  box-shadow: 0 18px 45px rgba(0, 0, 0, .16);
}
.character-panel-empty .character-section { display: none; }
.character-panel h2 {
  margin: .3rem 0 .2rem;
  color: var(--moss-bright);
  font: 500 1.45rem/1.2 Georgia, "Times New Roman", serif;
}
.character-summary { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.4; }
.character-vitals { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin-top: .9rem; }
.vital-card, .ability-card {
  display: grid;
  justify-items: center;
  padding: .45rem .2rem;
  border: 1px solid #3e5142;
  border-radius: 7px;
  background: rgba(9, 14, 11, .45);
}
.vital-label, .ability-name { color: var(--muted); font-size: .62rem; font-weight: 750; letter-spacing: .08em; }
.vital-value { margin-top: .12rem; color: var(--ink); font-size: .92rem; }
.character-section { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.character-section h3 {
  margin: 0 0 .6rem;
  color: var(--muted);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.character-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.character-action {
  padding: .42rem .55rem;
  color: var(--moss-bright);
  border: 1px solid #455b49;
  border-radius: 6px;
  background: #101612;
  font-size: .7rem;
}
.character-action:hover:not(:disabled) { border-color: var(--moss); filter: none; }
.character-action:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }
.character-action:disabled { opacity: .55; }
.character-wild-shape { display: grid; gap: .45rem; }
.wild-shape-current { margin: 0; color: #d5d0c2; font-size: .76rem; }
.wild-shape-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
.wild-shape-option {
  display: grid;
  gap: .12rem;
  padding: .48rem .52rem;
  color: var(--moss-bright);
  border: 1px solid #455b49;
  border-radius: 6px;
  background: #101612;
  text-align: left;
}
.wild-shape-option:hover:not(:disabled) { border-color: var(--moss); filter: none; }
.wild-shape-option:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }
.wild-shape-option:disabled { opacity: .55; }
.wild-shape-name { font-size: .72rem; }
.wild-shape-details { color: var(--muted); font-size: .62rem; }
.ability-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; }
.ability-modifier { color: var(--moss-bright); font-size: .9rem; }
.ability-score { color: #7f887d; font-size: .62rem; }
.character-list { display: grid; gap: .34rem; margin: 0; padding: 0; list-style: none; }
.character-list-item { color: #d5d0c2; font-size: .78rem; line-height: 1.35; }
.character-list-empty { color: #7f887d; font-size: .76rem; font-style: italic; }
.character-copy { color: #d5d0c2; font-size: .76rem; line-height: 1.45; }
.spell-stat, .spell-line { margin: 0; }
.spell-line + .spell-line, .spell-stat + .spell-line { margin-top: .35rem; }
.character-spellbook { display: grid; gap: .4rem; margin-top: .65rem; }
.character-spell {
  overflow: hidden;
  border: 1px solid #3e5142;
  border-radius: 7px;
  background: rgba(9, 14, 11, .42);
}
.character-spell-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .45rem;
  align-items: baseline;
  padding: .48rem .55rem;
  cursor: pointer;
}
.character-spell-summary::marker { color: var(--moss); }
.character-spell[open] > .character-spell-summary {
  border-bottom: 1px solid #344438;
  background: rgba(159, 189, 121, .06);
}
.character-spell-name { color: var(--ink); font-size: .78rem; font-weight: 700; }
.character-spell-level { color: var(--muted); font-size: .65rem; }
.character-spell-body { padding: .55rem; }
.character-spell-description { margin: 0; color: #c6c0b1; font-size: .72rem; line-height: 1.45; }
.character-spell-target-title {
  margin: .55rem 0 .35rem;
  color: var(--muted);
  font-size: .62rem;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.character-spell-targets { display: flex; flex-wrap: wrap; gap: .35rem; }
.character-spell-target {
  padding: .38rem .48rem;
  color: var(--moss-bright);
  border: 1px solid #455b49;
  border-radius: 6px;
  background: #101612;
  font-size: .68rem;
}
.character-spell-target:hover:not(:disabled) { border-color: var(--moss); filter: none; }
.character-spell-target:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }
.character-carrying { margin: .5rem 0 0; color: #7f887d; font-size: .7rem; }
.character-item {
  overflow: hidden;
  border: 1px solid #3e5142;
  border-radius: 7px;
  background: rgba(9, 14, 11, .42);
}
.character-item-summary {
  padding: .46rem .52rem;
  color: #d5d0c2;
  cursor: pointer;
  font-size: .76rem;
  list-style-position: inside;
}
.character-item-summary::marker { color: var(--moss); }
.character-item[open] > .character-item-summary {
  border-bottom: 1px solid #344438;
  background: rgba(159, 189, 121, .06);
}
.character-item-body { padding: .5rem; }
.character-item-description { margin: 0 0 .45rem; color: var(--muted); font-size: .68rem; line-height: 1.4; }
.character-item-actions { display: flex; flex-wrap: wrap; gap: .35rem; }
.character-item-action {
  padding: .38rem .48rem;
  color: var(--moss-bright);
  border: 1px solid #455b49;
  border-radius: 6px;
  background: #101612;
  font-size: .68rem;
}
.character-item-action:hover:not(:disabled) { border-color: var(--moss); filter: none; }
.character-item-action:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }
.character-item-action:disabled { opacity: .55; }
.room-panel-empty .room-section { display: none; }
.room-panel h2 {
  margin: .3rem 0 .75rem;
  color: var(--moss-bright);
  font: 500 1.55rem/1.2 Georgia, "Times New Roman", serif;
}
.current-room-description {
  margin: 0;
  color: #d5d0c2;
  font: .9rem/1.55 Georgia, "Times New Roman", serif;
  white-space: pre-wrap;
}
.room-section { margin-top: 1.15rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.room-section h3 {
  margin: 0 0 .65rem;
  color: var(--muted);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.room-list { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.room-list-item { display: grid; gap: .08rem; }
.room-list-name { color: var(--ink); font-size: .87rem; font-weight: 650; }
.room-list-detail { color: var(--muted); font-size: .74rem; line-height: 1.35; }
.room-list-empty { color: #7f887d; font-size: .8rem; font-style: italic; }
.room-exit-action {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: .08rem;
  width: 100%;
  padding: .5rem .6rem;
  overflow: hidden;
  color: inherit;
  border: 1px solid #3e5142;
  border-radius: 7px;
  background: rgba(9, 14, 11, .55);
  text-align: left;
}
.room-exit-action-preview {
  min-height: 4.5rem;
  align-content: end;
  padding: .7rem .75rem;
  border-color: #526256;
  text-shadow: 0 1px 3px #000, 0 0 10px rgba(0, 0, 0, .9);
}
.room-exit-action-preview::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background: linear-gradient(to bottom, rgba(7, 10, 8, .08) 10%, rgba(7, 10, 8, .92) 100%);
}
.room-exit-preview {
  position: absolute;
  z-index: -2;
  inset: 0;
  background-position: center;
  background-size: cover;
  transform: scale(1.02);
  transition: transform 220ms ease, filter 220ms ease;
}
.room-exit-action-preview .room-list-name { color: #fff8e8; }
.room-exit-action-preview .room-list-detail { color: #ddd8cc; }
.room-exit-action:hover:not(:disabled) {
  border-color: var(--moss);
  background: rgba(159, 189, 121, .09);
  filter: none;
}
.room-exit-action-preview:hover:not(:disabled) .room-exit-preview {
  filter: brightness(1.12);
  transform: scale(1.07);
}
.room-exit-action:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }
.room-exit-action:disabled { opacity: .55; }
.room-exit-actions { display: flex; flex-wrap: wrap; gap: .4rem; padding: .45rem 0 0; }
.room-exit-option {
  padding: .38rem .5rem;
  color: var(--moss-bright);
  border: 1px solid #455b49;
  border-radius: 6px;
  background: #101612;
  font-size: .68rem;
}
.room-exit-option:hover:not(:disabled) { border-color: var(--moss); filter: none; }
.room-exit-option:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }
.room-exit-option:disabled { opacity: .55; }
.room-object-menu,
.room-actor-menu {
  overflow: hidden;
  border: 1px solid #3e5142;
  border-radius: 7px;
  background: rgba(9, 14, 11, .42);
}
.room-object-summary,
.room-actor-summary {
  display: grid;
  gap: .08rem;
  padding: .5rem .6rem;
  cursor: pointer;
  list-style-position: inside;
}
.room-entity-summary-preview {
  grid-template-columns: 3.2rem minmax(0, 1fr);
  align-items: center;
  padding: .35rem;
}
.room-entity-thumbnail {
  display: block;
  width: 3.2rem;
  height: 3.2rem;
  border: 1px solid #536055;
  border-radius: 5px;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}
.room-entity-copy { display: grid; gap: .08rem; min-width: 0; }
.room-object-summary::marker,
.room-actor-summary::marker { color: var(--moss); }
.room-object-menu[open] > .room-object-summary,
.room-actor-menu[open] > .room-actor-summary {
  border-bottom: 1px solid #344438;
  background: rgba(159, 189, 121, .06);
}
.room-object-actions,
.room-actor-actions { display: flex; flex-wrap: wrap; gap: .4rem; padding: .5rem; }
.room-object-action,
.room-actor-action {
  padding: .42rem .55rem;
  color: var(--moss-bright);
  border: 1px solid #455b49;
  border-radius: 6px;
  background: #101612;
  font-size: .73rem;
}
.room-object-action:hover:not(:disabled),
.room-actor-action:hover:not(:disabled) { border-color: var(--moss); filter: none; }
.room-object-action:focus-visible,
.room-actor-action:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }

.entity-preview {
  position: fixed;
  z-index: 8;
  top: var(--entity-preview-top, 1rem);
  left: var(--entity-preview-left, 1rem);
  width: var(--entity-preview-size, 22.5rem);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--moss) 72%, #c8c1ad);
  border-radius: 10px;
  background: #0d120f;
  box-shadow: 0 18px 54px rgba(0, 0, 0, .72);
  opacity: 0;
  pointer-events: none;
  transform: translateY(.35rem) scale(.985);
  transition: opacity 140ms ease, transform 140ms ease;
}
.entity-preview-visible { opacity: 1; transform: translateY(0) scale(1); }
.entity-preview img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}
.entity-preview span {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 2.25rem .8rem .65rem;
  color: #fff8e8;
  background: linear-gradient(transparent, rgba(5, 8, 6, .92));
  font-size: .78rem;
  font-weight: 750;
  letter-spacing: .02em;
  text-shadow: 0 1px 3px #000;
}

.chat-panel {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  grid-template-areas:
    "initiative"
    "transcript"
    "decision"
    "speech"
    "command";
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--night) 86%, transparent);
  backdrop-filter: blur(16px) saturate(1.08);
}

.initiative-roll-banner {
  position: absolute;
  z-index: 20;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1rem;
  color: #f8f1d6;
  background:
    radial-gradient(circle at center, rgba(91, 43, 31, .86), rgba(8, 11, 9, .96) 55%);
  backdrop-filter: blur(9px);
  font: 800 clamp(1.4rem, 4vw, 2.4rem)/1.1 Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .07em;
  text-align: center;
  text-transform: uppercase;
  pointer-events: none;
}
.initiative-die {
  display: grid;
  width: 5rem;
  height: 5rem;
  place-items: center;
  color: #17100c;
  background: var(--moss-bright);
  clip-path: polygon(50% 0, 96% 24%, 82% 80%, 50% 100%, 18% 80%, 4% 24%);
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--moss-bright) 55%, transparent));
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  animation: initiative-roll 650ms cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes initiative-roll {
  0% { transform: rotate(-12deg) scale(.94); }
  45% { transform: rotate(16deg) scale(1.08); }
  100% { transform: rotate(348deg) scale(.94); }
}

.initiative-bar {
  grid-area: initiative;
  display: flex;
  min-width: 0;
  align-items: center;
  gap: .75rem;
  padding: .58rem .8rem;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel-strong) 92%, transparent);
}
.initiative-label {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.initiative-order {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: .35rem;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: thin;
}
.initiative-combatant {
  flex: 0 0 auto;
  padding: .28rem .48rem;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(8, 12, 10, .42);
  font-size: .69rem;
  line-height: 1.2;
}
.initiative-combatant.active {
  color: #11160f;
  border-color: var(--moss-bright);
  background: var(--moss-bright);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--moss-bright) 22%, transparent);
  font-weight: 800;
}

#transcript {
  grid-area: transcript;
  min-height: 24rem;
  margin: 0;
  padding: clamp(1rem, 3vw, 1.6rem);
  overflow: auto;
  overflow-wrap: anywhere;
  color: #ddd8ca;
  border: 0;
  background: transparent;
  font: 16px/1.62 Georgia, "Times New Roman", serif;
}

.transcript-entry { white-space: pre-wrap; }
.transcript-entry + .transcript-entry { margin-top: 1rem; }
.transcript-spacer { height: .4rem; }
.transcript-entry.previous-room,
.transcript-spacer.previous-room {
  opacity: .32;
  filter: grayscale(.75);
  transition: opacity 160ms ease;
}
.transcript-entry.previous-room:hover,
.transcript-entry.previous-room:focus-within { opacity: .68; }

.player-input {
  display: grid;
  grid-template-columns: 1.2rem 1fr;
  gap: .35rem;
  padding: .7rem .8rem;
  color: var(--moss-bright);
  border-left: 2px solid var(--moss);
  background: rgba(159, 189, 121, .065);
  font: 14px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.input-marker { color: var(--moss); font-weight: 800; }

.speech {
  padding: .75rem 1rem .85rem;
  border-left: 3px solid #6f8b68;
  background: rgba(255, 255, 255, .025);
}
.speech-heading { display: flex; align-items: baseline; gap: .55rem; margin-bottom: .3rem; }
.speaker { color: var(--moss-bright); font: 700 .78rem/1.3 Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.speech-detail { color: var(--muted); font: italic .76rem/1.3 Inter, ui-sans-serif, system-ui, sans-serif; }
.dialogue { margin: 0; color: #f1ead9; font-size: 1.08rem; line-height: 1.55; }

.prologue { padding-bottom: 1.3rem; border-bottom: 1px solid var(--line); }
.prologue-title, .room-title {
  margin: 0 0 .65rem;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
}
.prologue-title { font-size: 1.7rem; letter-spacing: .04em; }
.prologue-text { color: #d8d1c0; white-space: normal; }
.prologue-paragraph { margin: 0; }
.prologue-paragraph + .prologue-paragraph { margin-top: 1rem; }

.room-entry { padding: 1.05rem 0 .25rem; }
.room-title { color: var(--moss-bright); font-size: 1.35rem; }

.help-reference {
  padding: 1rem;
  border: 1px solid #46594a;
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(32, 43, 35, .78), rgba(17, 23, 19, .88));
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  white-space: normal;
}
.help-title { margin: 0; color: var(--moss-bright); font: 600 1.35rem/1.3 Georgia, "Times New Roman", serif; }
.help-intro { margin: .55rem 0 1rem; color: #d8d1c0; font-size: .9rem; line-height: 1.55; white-space: pre-wrap; }
.help-section { border-top: 1px solid var(--line); }
.help-section:last-child { border-bottom: 1px solid var(--line); }
.help-section-title {
  padding: .78rem .2rem;
  color: var(--ink);
  font-size: .88rem;
  font-weight: 750;
  letter-spacing: .025em;
  cursor: pointer;
}
.help-section-title::marker { color: var(--moss); }
.help-section[open] > .help-section-title { color: var(--moss-bright); }
.help-section-description { margin: 0 .2rem .7rem; color: var(--muted); font-size: .8rem; line-height: 1.5; }
.help-entries { display: grid; gap: .55rem; margin: 0 0 .9rem; padding: 0 .2rem; list-style: none; }
.help-entry { display: grid; grid-template-columns: minmax(12rem, 2fr) 3fr; gap: .8rem; align-items: start; }
.help-command-block { display: grid; gap: .3rem; }
.help-command,
.help-command-label {
  display: block;
  width: 100%;
  padding: .48rem .6rem;
  overflow-wrap: anywhere;
  color: var(--moss-bright);
  border: 1px solid #455b49;
  border-radius: 6px;
  background: rgba(9, 14, 11, .72);
  font: 600 .78rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-align: left;
}
.help-command { cursor: pointer; }
.help-command:hover { border-color: var(--moss); background: rgba(159, 189, 121, .09); filter: none; }
.help-command:disabled { opacity: .5; cursor: default; }
.help-command-label { color: #c9c4b6; }
.help-example {
  padding-inline: .25rem;
  overflow-wrap: anywhere;
  color: #8f998c;
  font: .72rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.help-description { padding-top: .35rem; color: #c6c0b1; font-size: .82rem; line-height: 1.45; }

.check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .25rem .8rem;
  align-items: baseline;
  padding: .65rem .8rem;
  border: 1px solid #3e5042;
  border-radius: 7px;
  background: rgba(159, 189, 121, .055);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}
.check-title { color: var(--muted); font-size: .72rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.check-details { color: var(--ink); font-size: .88rem; font-weight: 650; }
.check-note { grid-column: 2; color: var(--muted); font-size: .82rem; }

.check-card {
  display: grid;
  width: min(100%, 34rem);
  gap: .55rem;
  padding: .75rem .85rem;
  border: 1px solid #536256;
  border-left: 4px solid #8f9b91;
  border-radius: 9px;
  background: linear-gradient(135deg, rgba(29, 38, 32, .94), rgba(14, 19, 16, .94));
  box-shadow: 0 5px 16px rgba(0, 0, 0, .18);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  white-space: normal;
}
.check-card.success { border-left-color: var(--moss-bright); }
.check-card.failure { border-left-color: #ba7064; }
.check-card-header { display: flex; align-items: center; justify-content: space-between; gap: .7rem; }
.check-name { color: var(--ink); font-size: .9rem; }
.check-outcome,
.check-roll span,
.check-consequence-defeated {
  padding: .2rem .46rem;
  border: 1px solid #4d5a50;
  border-radius: 999px;
  font-size: .66rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .025em;
  text-transform: uppercase;
}
.check-outcome.success { color: #dff1be; border-color: #758f5c; background: rgba(109, 141, 77, .2); }
.check-outcome.failure { color: #ffd2c8; border-color: #925f55; background: rgba(146, 69, 57, .2); }
.check-outcome.rolled { color: #d9ddd8; background: rgba(102, 108, 103, .17); }
.check-roll { display: flex; flex-wrap: wrap; gap: .32rem; color: var(--muted); }
.check-roll span { font-weight: 650; text-transform: none; }
.check-consequences { display: grid; gap: .36rem; }
.check-consequences:empty { display: none; }
.check-consequence {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  padding-top: .45rem;
  color: #d8d5ca;
  border-top: 1px solid #39463c;
  font-size: .78rem;
  line-height: 1.4;
}
.check-consequence.damage .check-consequence-text { color: #ffd4c9; font-weight: 800; }
.check-consequence.alarm .check-consequence-text { color: #f0c889; font-weight: 750; }
.check-consequence-detail { color: var(--muted); font-size: .68rem; text-transform: uppercase; }
.check-consequence-defeated { color: #fff0cf; border-color: #a17845; background: rgba(155, 102, 44, .25); }

.mechanic, .system, .vocalization {
  color: var(--muted);
  font: 14px/1.5 Inter, ui-sans-serif, system-ui, sans-serif;
}
.mechanic {
  width: fit-content;
  padding: .42rem .65rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel-strong) 88%, transparent);
}
.mechanic-damage, .mechanic-defeat { color: #e8afa5; }
.combat-action {
  display: grid;
  width: min(100%, 34rem);
  gap: .48rem;
  padding: .75rem .85rem;
  border: 1px solid #596259;
  border-left: 4px solid #a6aea1;
  border-radius: 9px;
  background: linear-gradient(135deg, rgba(31, 39, 33, .94), rgba(14, 19, 16, .94));
  box-shadow: 0 5px 16px rgba(0, 0, 0, .2);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  white-space: normal;
}
.combat-action.hit { border-left-color: var(--moss-bright); }
.combat-action.miss { border-left-color: #858b86; }
.combat-action-sentence { color: var(--ink); font-size: .9rem; }
.combat-actor { color: var(--moss-bright); }
.combat-target { color: #efd4ca; }
.combat-action-badges { display: flex; flex-wrap: wrap; gap: .35rem; }
.combat-action-badges span {
  padding: .22rem .48rem;
  border: 1px solid #4c574e;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .025em;
  text-transform: uppercase;
}
.combat-outcome.hit { color: #dff1be; border-color: #758f5c; background: rgba(109, 141, 77, .2); }
.combat-outcome.miss { color: #c5c8c4; background: rgba(102, 108, 103, .17); }
.combat-damage { color: #ffd4c9; border-color: #925f55 !important; background: rgba(146, 69, 57, .2); }
.combat-defeated { color: #fff0cf; border-color: #a17845 !important; background: rgba(155, 102, 44, .25); }
.combat-weapon { color: var(--muted); font-size: .68rem; }
.conclusion { padding: 1rem; color: var(--moss-bright); border: 1px solid var(--moss); border-radius: 8px; }

.decision-panel {
  grid-area: decision;
  padding: .85rem 1rem;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel-strong) 90%, transparent);
}
.decision-panel h2 { margin: 0; color: var(--moss-bright); font: 600 1rem/1.3 Georgia, "Times New Roman", serif; }
.decision-panel p { margin: .3rem 0 .65rem; color: #d5d0c2; font-size: .78rem; line-height: 1.4; }
.decision-options { display: flex; flex-wrap: wrap; gap: .42rem; }
.decision-option {
  padding: .48rem .65rem;
  color: var(--moss-bright);
  border: 1px solid #526956;
  border-radius: 7px;
  background: #101612;
  font-size: .75rem;
  text-align: left;
}
.decision-option:hover:not(:disabled) { border-color: var(--moss-bright); filter: none; }
.decision-option:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }
.decision-option-secondary { color: var(--muted); border-color: var(--line); }
.decision-option:disabled { opacity: .5; }
.decision-text-form { display: grid; gap: .5rem; }
.decision-text-form textarea {
  width: 100%;
  min-height: 5rem;
  resize: vertical;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(8, 12, 10, .7);
}
.decision-text-form button { justify-self: end; }
.speech-context {
  grid-area: speech;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: 2rem;
  padding: .35rem .65rem .3rem 1rem;
  color: var(--muted);
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  font-size: .68rem;
}
.speech-context .quiet { padding: .28rem .45rem; font-size: .64rem; }

.command-form { display: grid; grid-area: command; grid-template-columns: 1fr auto; border: 0; background: color-mix(in srgb, var(--panel) 92%, transparent); }
.command-form input { margin: 0; padding: 1rem; border: 0; border-radius: 0 0 0 11px; background: transparent; }
.command-form input:focus { box-shadow: inset 0 0 0 2px var(--moss); }
.command-form button { margin: .45rem; padding-inline: 1.4rem; }
.game-footer { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }

@media (prefers-reduced-motion: reduce) {
  body,
  .scene-layer,
  .scene-ambience,
  .scene-shade { transition: none; }
  .scene-layer,
  .scene-ambience,
  .initiative-die { animation: none !important; }
  .entity-preview { transition: none; }
}

@media (hover: none), (max-width: 860px) {
  .entity-preview { display: none; }
}

@media (max-width: 620px) {
  main { padding: .75rem; }
  .gate { gap: 1rem; }
  .gate h1 { font-size: clamp(3rem, 15vw, 4.25rem); }
  .entry-panel { padding: 1.15rem; border-radius: 15px; }
  .game { min-height: calc(100vh - 1.5rem); }
  .game header { align-items: end; }
  .status-block { align-items: end; flex-direction: column-reverse; gap: .4rem; }
  #transcript { font-size: 13px; }
  .help-reference { padding: .8rem; }
  .help-entry { grid-template-columns: 1fr; gap: .25rem; }
  .help-description { padding: 0 .25rem .25rem; }
  .command-form { grid-template-columns: 1fr; }
  .command-form input { border-radius: 0; }
  .command-form button { margin-top: 0; }
}

@media (max-height: 700px) and (min-width: 621px) {
  main { padding-block: .75rem; }
  .gate { min-height: calc(100vh - 1.5rem); }
  .gate h1 { font-size: clamp(3.8rem, 7vw, 5.4rem); }
  .entry-panel { padding: 1.2rem 1.35rem; }
  .gate .class-choice { padding-block: .65rem; }
}

@media (max-width: 860px) {
  .gate {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: 1.4rem;
    padding-block: .5rem 1.25rem;
  }
  .landing-hero { margin-inline: auto; text-align: center; }
  .gate h1 { font-size: clamp(3.35rem, 12vw, 5.2rem); }
  .entry-panel { width: min(32rem, 100%); margin-inline: auto; }
  .entry-panel:has(#code-step:not(.hidden)) { justify-self: center; }
  .game { height: auto; min-height: calc(100vh - 1.5rem); }
  .play-layout { grid-template-columns: 1fr; }
  .room-panel { position: static; max-height: none; }
  .chat-panel { min-height: 70vh; }
}