:root {
  color-scheme: dark;
  --black: #070809;
  --panel: #101216;
  --bone: #eee7da;
  --dim: #aaa397;
  --faint: rgba(238, 231, 218, 0.56);
  --line: rgba(238, 231, 218, 0.18);
  --gold: #dda94e;
  --gold-2: #f0c477;
  --green: #a9bd8c;
  --text: #eee7da;
  --accent: #dda94e;
  --serif: Georgia, serif;
  --display: "Geist", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; }
html { background: var(--black); }
body {
  margin: 0;
  overflow: hidden;
  background: var(--black);
  color: var(--bone);
  font-family: var(--display);
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }
[hidden] { display: none !important; }

.flow-atmosphere {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.5) brightness(0.34) contrast(1.08);
}
.flow-grain {
  position: fixed;
  z-index: 100;
  inset: 0;
  opacity: 0.04;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

.flow-nav {
  position: fixed;
  z-index: 80;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 72px;
  padding: 14px max(32px, env(safe-area-inset-right)) 14px max(32px, env(safe-area-inset-left));
  border-bottom: 1px solid rgba(238, 231, 218, 0.1);
  background: linear-gradient(180deg, rgba(6, 7, 9, 0.94), rgba(6, 7, 9, 0.5));
  backdrop-filter: blur(18px);
}
.flow-brand {
  width: max-content;
  color: var(--bone);
  font-family: Georgia, serif;
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-decoration: none;
}
.flow-progress { display: flex; align-items: center; gap: 12px; }
.flow-progress span { width: 42px; height: 1px; background: var(--line); }
.flow-progress button {
  min-height: 40px;
  border: 0;
  padding: 8px 4px;
  background: transparent;
  color: rgba(238, 231, 218, 0.48);
  font-size: 0.69rem;
  cursor: pointer;
}
.flow-progress button.active { color: var(--bone); }
.flow-progress button:disabled { cursor: default; }
.flow-legends {
  justify-self: end;
  min-height: 38px;
  border: 1px solid rgba(221, 169, 78, 0.42);
  padding: 7px 15px;
  background: rgba(10, 11, 14, 0.54);
  color: var(--gold-2);
  font-size: 0.65rem;
  letter-spacing: 0.035em;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease;
}
.flow-legends:hover { border-color: var(--gold); background: rgba(221, 169, 78, 0.09); }

main { position: relative; z-index: 2; width: 100%; height: 100%; overflow: hidden; }
.flow-screen {
  position: absolute;
  inset: 0;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease, visibility 260ms step-end;
}
.flow-screen.is-active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 260ms ease, visibility 0ms;
}

.flow-choose {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(20px, 3vh, 34px);
  padding: 108px max(5vw, 28px) 54px;
  background:
    radial-gradient(circle at 50% 18%, rgba(221, 169, 78, 0.11), transparent 26%),
    linear-gradient(180deg, rgba(6, 7, 8, 0.1), rgba(6, 7, 8, 0.76));
}
.choose-copy { width: min(960px, 86vw); margin: 0 auto; text-align: center; }
.choose-copy h1 {
  max-width: 960px;
  margin: 0;
  color: #f2ece0;
  font-family: Georgia, serif;
  font-size: clamp(4.8rem, 9vw, 8rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 0.82;
  text-indent: 0.14em;
  white-space: nowrap;
}
.choose-copy p {
  max-width: 720px;
  margin: 20px auto 0;
  color: rgba(238, 231, 218, 0.72);
  font-size: 0.92rem;
  line-height: 1.6;
}
.game-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 12px;
  width: min(1220px, 92vw);
  min-height: 0;
  margin: 0 auto;
}
.game-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  padding: 0;
  background: #090b0d;
  color: var(--bone);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.38);
}
.game-card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.58) brightness(0.58) contrast(1.08);
  transition: transform 800ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 700ms ease;
}
.game-nine > img { object-position: 58% 48%; filter: saturate(0.68) brightness(0.5) contrast(1.04); }
.game-card:hover > img,
.game-card:focus-visible > img { transform: scale(1.045); filter: saturate(0.82) brightness(0.68); }
.game-card-wash {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(4, 5, 6, 0.96) 0%, rgba(4, 5, 6, 0.7) 42%, transparent 78%),
    linear-gradient(90deg, rgba(4, 5, 6, 0.46), transparent 58%);
}
.game-card-copy {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 22px;
  padding: clamp(22px, 3vw, 42px);
}
.game-card-copy strong {
  grid-column: 1 / 3;
  font-size: clamp(2.1rem, 3.3vw, 3.7rem);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 0.92;
}
.game-card-copy > span { max-width: 36rem; color: rgba(238, 231, 218, 0.74); font-size: 0.81rem; line-height: 1.55; }
/* A card carrying a second descriptive line adds a grid row, so the choose
   button has to span one row further or it stops reaching the footnote. */
.game-card-detail { grid-column: 1; color: rgba(224, 173, 93, 0.82); font-size: 0.78rem; line-height: 1.5; }
.game-card-copy:has(.game-card-detail) b { grid-row: 2 / 5; }
.game-card-copy small { grid-column: 1; color: var(--dim); font-size: 0.63rem; letter-spacing: 0.04em; }
.game-card-copy b {
  grid-column: 2;
  grid-row: 2 / 4;
  align-self: end;
  min-width: 170px;
  padding: 14px 18px;
  background: var(--gold);
  color: #171006;
  font-size: 0.73rem;
  text-align: center;
}
.game-nine .game-card-copy b { background: var(--green); color: #10150e; }
.rules-marquee {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  border-top: 1px solid rgba(238, 231, 218, 0.1);
  padding: 9px 0;
  background: rgba(5, 6, 7, 0.66);
  color: rgba(238, 231, 218, 0.38);
  font-size: 0.53rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
}
.rules-marquee div { width: max-content; animation: flow-marquee 34s linear infinite; }
@keyframes flow-marquee { to { transform: translateX(-50%); } }

.flow-setup { padding: 96px max(4vw, 24px) 28px; background: rgba(6, 7, 9, 0.78); }
.setup-grid {
  display: grid;
  grid-template-columns: 0.82fr 1.34fr 0.84fr;
  grid-auto-flow: dense;
  gap: 10px;
  width: min(1360px, 94vw);
  height: min(760px, calc(100dvh - 124px));
  margin: 0 auto;
}
.setup-grid > * { min-width: 0; border: 1px solid var(--line); background: rgba(11, 13, 16, 0.84); }
.setup-game-card { position: relative; overflow: hidden; }
.setup-game-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.56) brightness(0.52);
  transition: transform 900ms ease;
}
.setup-game-card:hover .setup-game-image { transform: scale(1.035); }
.setup-nine-image { display: none; object-position: 58% 50%; filter: saturate(0.7) brightness(0.54); }
body[data-game="nine"] .setup-descent-image { display: none; }
body[data-game="nine"] .setup-nine-image { display: block; }
.setup-game-wash { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5, 6, 8, 0.96), rgba(5, 6, 8, 0.2) 76%); }
.setup-back {
  position: absolute;
  z-index: 3;
  top: 18px;
  left: 18px;
  min-height: 42px;
  border: 1px solid rgba(238, 231, 218, 0.32);
  padding: 9px 14px;
  background: rgba(5, 6, 8, 0.65);
  color: var(--bone);
  font-size: 0.68rem;
  cursor: pointer;
  backdrop-filter: blur(10px);
}
.setup-game-copy { position: absolute; z-index: 2; left: 24px; right: 24px; bottom: 24px; }
.setup-game-copy h2 { margin: 0; font-size: clamp(2.1rem, 3vw, 3.3rem); font-weight: 500; letter-spacing: -0.045em; line-height: 0.92; }
.setup-game-copy p { margin: 14px 0 0; color: rgba(238, 231, 218, 0.7); font-size: 0.76rem; line-height: 1.55; }

.hunter-stage { display: grid; grid-template-rows: minmax(0, 1fr) 92px; overflow: hidden; }
.hunter-portrait { position: relative; min-height: 0; overflow: hidden; background: #070809; }
.hunter-portrait > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 14%;
  filter: saturate(0.68) brightness(0.74);
  transition: opacity 180ms ease, transform 700ms ease;
}
.hunter-portrait:hover > img { transform: scale(1.025); }
.hunter-portrait::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5, 6, 8, 0.92), transparent 45%); }
.hunter-portrait > div { position: absolute; z-index: 2; left: 24px; right: 24px; bottom: 20px; }
.hunter-portrait span { display: block; color: var(--gold); font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; }
.hunter-portrait strong { display: block; margin-top: 5px; font-size: 1.35rem; }
.hunter-portrait small { display: block; margin-top: 5px; color: var(--dim); font-size: 0.7rem; }
.hunter-rail { display: flex; gap: 2px; min-width: 0; overflow: hidden; border-top: 1px solid var(--line); background: #080a0c; }
.hunter-rail button {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  border: 0;
  border-right: 1px solid var(--line);
  padding: 0;
  background: #090b0d;
  cursor: pointer;
  transition: flex 500ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hunter-rail button:hover { flex: 1.35; }
.hunter-rail button.active { flex: 1.8; box-shadow: inset 0 3px var(--gold); }
.hunter-rail img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; filter: saturate(0.25) brightness(0.52); transition: 450ms ease; }
.hunter-rail button:hover img,
.hunter-rail button.active img { filter: saturate(0.82) brightness(0.82); transform: scale(1.04); }
/* Aemil tiles are square full-figure cards: keep the whole character visible */
.hunter-rail button.rail-figure img { object-position: 50% 45%; }

.setup-controls { display: flex; flex-direction: column; justify-content: center; padding: clamp(22px, 3vw, 42px); }
.setup-game-kicker { margin: 0 0 9px; color: var(--gold); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; }
body[data-game="nine"] .setup-game-kicker { color: var(--green); }
.setup-controls h1 { max-width: 460px; margin: 0; font-size: clamp(2.5rem, 3.6vw, 4.1rem); font-weight: 500; letter-spacing: -0.05em; line-height: 0.9; text-wrap: balance; }
.setup-name { display: block; margin-top: 24px; color: var(--dim); font-size: 0.64rem; letter-spacing: 0.09em; text-transform: uppercase; }
.setup-name-input {
  display: block;
  width: 100%;
  min-height: 42px;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 7px 0;
  background: transparent;
  color: var(--bone);
  outline: none;
}
.setup-name-input:focus { border-bottom-color: var(--gold); }
.setup-name-input::placeholder { color: rgba(238, 231, 218, 0.5); font-style: italic; opacity: 1; }
.setup-name-hint { margin: 5px 0 0; color: rgba(238, 231, 218, 0.52); font-size: 0.57rem; line-height: 1.35; }
.setup-run { margin-top: 12px; border-left: 2px solid var(--gold); padding: 6px 9px; background: rgba(221, 169, 78, 0.07); }
.setup-run span { display: block; color: var(--gold-2); font-size: 0.53rem; letter-spacing: 0.08em; text-transform: uppercase; }
.setup-run strong { display: block; margin-top: 3px; color: var(--bone); font-size: 0.66rem; font-weight: 500; }
.setup-difficulty { margin: 18px 0 0; border: 0; padding: 0; }
.setup-difficulty legend { margin-bottom: 7px; color: var(--dim); font-size: 0.64rem; letter-spacing: 0.09em; text-transform: uppercase; }
.setup-modes { display: grid; grid-template-columns: 1fr 1fr; }
.setup-modes button {
  min-height: 52px;
  border: 1px solid var(--line);
  padding: 8px 12px;
  background: transparent;
  color: var(--dim);
  text-align: left;
  cursor: pointer;
}
.setup-modes button + button { border-left: 0; }
.setup-modes button.active { border-color: var(--gold); background: rgba(221, 169, 78, 0.09); color: var(--bone); }
.setup-modes button:disabled { cursor: default; opacity: 0.48; }
.setup-modes button.active:disabled { opacity: 0.9; }
.setup-modes span { display: block; margin-top: 3px; font-size: 0.57rem; opacity: 0.66; }
.setup-adventure { margin-top: 18px; border: 1px solid rgba(169, 189, 140, 0.42); padding: 13px 15px; background: rgba(99, 128, 84, 0.09); }
.setup-adventure span { color: #c3d2ae; font-size: 0.73rem; font-weight: 700; }
.setup-adventure p { margin: 5px 0 0; color: var(--dim); font-size: 0.66rem; line-height: 1.4; }
.setup-enter {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 18px;
  padding: 12px 18px;
  background: var(--gold);
  color: #171006;
  font-size: 0.75rem;
  font-weight: 800;
  text-decoration: none;
  transition: transform 180ms ease, background 180ms ease;
}
body[data-game="nine"] .setup-enter { background: var(--green); color: #10150e; }
.setup-enter:hover { transform: translateY(-2px); background: var(--gold-2); }
body[data-game="nine"] .setup-enter:hover { background: #c3d2ae; }
.setup-run-switch {
  align-self: center;
  min-height: 34px;
  border: 0;
  border-bottom: 1px solid rgba(238, 231, 218, 0.26);
  padding: 6px 2px 3px;
  background: transparent;
  color: var(--dim);
  font-size: 0.58rem;
  cursor: pointer;
}
.setup-note { margin: 7px 0 0; color: rgba(238, 231, 218, 0.44); font-size: 0.56rem; line-height: 1.35; text-align: center; }

#build-chip {
  position: fixed;
  z-index: 90;
  right: 10px;
  bottom: 38px;
  border: 1px solid rgba(217, 162, 75, 0.25);
  padding: 4px 7px;
  background: rgba(10, 11, 16, 0.66);
  color: rgba(217, 162, 75, 0.62);
  font: 700 10px/1 Consolas, monospace;
  letter-spacing: 0.04em;
  text-decoration: none;
}
#build-chip:hover { color: var(--gold); border-color: rgba(217, 162, 75, 0.6); }

.home-rotate { display: none; }

/* The leaderboard remains a focused overlay instead of a third page section. */
.legends-overlay {
  position: fixed;
  inset: 0;
  z-index: 180;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(5, 4, 6, 0.9);
  backdrop-filter: blur(12px);
}
.legends-overlay.on { display: flex; }
.legends-card {
  width: 100%;
  max-width: 480px;
  max-height: 86vh;
  overflow-y: auto;
  border: 1px solid rgba(217, 162, 75, 0.4);
  padding: 24px 24px 18px;
  background: #12141c;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.65);
}
.legends-card.legends-wide { max-width: 850px; }
.legends-card h2 { margin: 0 0 6px; color: var(--text); font-family: var(--serif); font-size: 1.35rem; font-weight: 600; }
.legends-sub { margin: 0 0 14px; color: var(--faint); font-size: 0.8rem; line-height: 1.5; }
.legends-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 26px; }
.home .legends-cols.legends-cols-3 { grid-template-columns: 1fr 1fr; }
.home .legends-cols > div:nth-child(3) { display: none; }
.legends-cols h3 { margin: 10px 0 4px; color: var(--accent); font-family: var(--serif); font-size: 0.98rem; font-weight: 600; }
.legends-rows { margin: 0; padding: 0; list-style: none; counter-reset: legend; }
.legends-rows li { counter-increment: legend; display: flex; align-items: baseline; gap: 12px; border-top: 1px solid rgba(217, 162, 75, 0.14); padding: 8px 2px; font-size: 0.9rem; }
.legends-rows li::before { content: counter(legend); min-width: 1.6em; color: var(--faint); font-family: var(--serif); text-align: right; }
.legends-rows li:nth-child(-n+3)::before { color: var(--accent); }
.legends-rows b { flex: 1; min-width: 0; overflow: hidden; color: var(--text); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.legends-floor { color: var(--dim); font-size: 0.74rem; letter-spacing: 0.04em; white-space: nowrap; }
.legends-score { color: var(--accent); font-variant-numeric: tabular-nums; }
.legends-detail { color: var(--faint); font-size: 0.76rem; white-space: nowrap; }
.legends-state { margin: 12px 0 0; color: var(--faint); font-size: 0.85rem; font-style: italic; }
.legends-close { display: block; width: 100%; margin-top: 16px; border: 0; padding: 11px 18px; background: var(--accent); color: #14100a; font: inherit; font-size: 0.9rem; cursor: pointer; }

@media (orientation: landscape) and (max-height: 520px) and (max-width: 980px) {
  .flow-nav {
    grid-template-columns: auto 1fr auto;
    min-height: 52px;
    padding: 5px max(12px, env(safe-area-inset-right)) 5px max(12px, env(safe-area-inset-left));
  }
  .flow-brand { font-size: 0.68rem; }
  .flow-progress { justify-self: center; gap: 7px; }
  .flow-progress span { width: 20px; }
  .flow-progress button { min-height: 40px; font-size: 0.56rem; }
  .flow-legends { min-height: 34px; padding: 5px 9px; font-size: 0.55rem; }

  .flow-choose {
    grid-template-rows: 82px minmax(0, 1fr);
    gap: 8px;
    padding: 56px max(10px, env(safe-area-inset-right)) 26px max(10px, env(safe-area-inset-left));
  }
  .choose-copy { width: min(92vw, 760px); }
  .choose-copy h1 { max-width: 100%; margin: 0 auto; font-size: clamp(2.75rem, 7.4vw, 3.9rem); line-height: 0.82; }
  .choose-copy p { max-width: 680px; margin-top: 8px; font-size: 0.63rem; line-height: 1.35; }
  .game-grid { width: 100%; gap: 7px; }
  .game-card-copy { grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; padding: 13px; }
  .game-card-copy strong { font-size: clamp(1.45rem, 3.9vw, 2rem); }
  .game-card-copy > span { font-size: 0.59rem; line-height: 1.35; }
  .game-card-copy small { font-size: 0.49rem; }
  .game-card-copy b { min-width: 116px; padding: 10px 11px; font-size: 0.58rem; }
  .rules-marquee { padding: 6px 0; font-size: 0.44rem; }

  .flow-setup { padding: 57px max(9px, env(safe-area-inset-right)) 8px max(9px, env(safe-area-inset-left)); }
  .setup-grid { grid-template-columns: 0.76fr 1.25fr 0.99fr; gap: 7px; width: 100%; height: calc(100dvh - 65px); }
  .setup-back { top: 9px; left: 9px; min-height: 38px; padding: 7px 10px; font-size: 0.56rem; }
  .setup-game-copy { left: 13px; right: 13px; bottom: 12px; }
  .setup-game-copy h2 { font-size: clamp(1.35rem, 3.3vw, 1.85rem); }
  .setup-game-copy p { margin-top: 7px; font-size: 0.54rem; line-height: 1.32; }

  .hunter-stage { grid-template-rows: minmax(0, 1fr) 52px; }
  .hunter-portrait > div { left: 13px; right: 13px; bottom: 10px; }
  .hunter-portrait span { font-size: 0.45rem; }
  .hunter-portrait strong { margin-top: 2px; font-size: 0.9rem; }
  .hunter-portrait small { margin-top: 2px; font-size: 0.52rem; }
  .hunter-rail { gap: 1px; }

  .setup-controls { padding: 9px 10px; }
  .setup-game-kicker { margin-bottom: 3px; font-size: 0.45rem; }
  .setup-controls h1 { max-width: 280px; font-size: clamp(1.45rem, 3.45vw, 1.9rem); line-height: 0.88; }
  .setup-name { margin-top: 6px; font-size: 0.47rem; }
  .setup-name-input { min-height: 28px; padding: 2px 0; font-size: 0.58rem; }
  .setup-name-hint { margin-top: 2px; font-size: 0.43rem; line-height: 1.15; white-space: nowrap; }
  .setup-run { margin-top: 5px; padding: 3px 6px; }
  .setup-run span { font-size: 0.41rem; }
  .setup-run strong { margin-top: 1px; font-size: 0.49rem; }
  .setup-difficulty { margin-top: 6px; }
  .setup-difficulty legend { margin-bottom: 3px; font-size: 0.45rem; }
  .setup-modes button { min-height: 37px; padding: 4px 7px; font-size: 0.59rem; }
  .setup-modes span { margin-top: 1px; font-size: 0.43rem; }
  .setup-adventure { margin-top: 7px; padding: 7px 8px; }
  .setup-adventure span { font-size: 0.58rem; }
  .setup-adventure p { margin-top: 2px; font-size: 0.46rem; line-height: 1.24; }
  .setup-enter { min-height: 37px; margin-top: 7px; padding: 6px 10px; font-size: 0.58rem; }
  .setup-run-switch { min-height: 22px; padding: 3px 2px 1px; font-size: 0.43rem; }
  .setup-note { margin-top: 2px; font-size: 0.41rem; line-height: 1.15; }
  #build-chip { display: none; }

  .legends-overlay { padding: 8px max(14px, env(safe-area-inset-right)) 8px max(14px, env(safe-area-inset-left)); }
  .legends-card { max-height: 94vh; padding: 12px 16px 10px; }
  .legends-card h2 { font-size: 1rem; }
  .legends-sub { margin-bottom: 5px; font-size: 0.58rem; }
  .legends-cols h3 { margin: 4px 0 2px; font-size: 0.7rem; }
  .legends-rows li { gap: 7px; padding: 3px 1px; font-size: 0.62rem; }
  .legends-floor, .legends-detail { font-size: 0.5rem; }
  .legends-state { margin-top: 5px; font-size: 0.58rem; }
  .legends-close { margin-top: 7px; padding: 6px 12px; font-size: 0.65rem; }
}

@media (orientation: portrait) and (pointer: coarse) and (max-width: 840px) {
  .home-rotate {
    position: fixed;
    z-index: 300;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 28px;
    background: #08090b;
    text-align: center;
  }
  .home-rotate strong { display: block; margin-top: 22px; font-family: Georgia, serif; font-size: 1.3rem; }
  .home-rotate p { margin: 8px 0 0; color: var(--dim); font-size: 0.78rem; }
  .rotate-device { display: block; width: 72px; height: 42px; margin: 0 auto; border: 2px solid var(--gold); border-radius: 7px; transform: rotate(-5deg); }
  .rotate-device::after { content: ""; display: block; width: 3px; height: 3px; margin: 17px 0 0 62px; border-radius: 50%; background: var(--gold); }
}

@media (max-width: 640px) {
  .legends-detail { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .flow-atmosphere { display: none; }
  body { background: #08090b url("../assets/lobby-bg.webp") center / cover no-repeat; }
}
.flow-play-artis {
  color: #f2dfb6;
  border: 1px solid rgba(217, 162, 75, 0.55);
  border-radius: 999px;
  padding: 0.62rem 1rem;
  font: 700 0.76rem/1 var(--font-ui, sans-serif);
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.flow-play-artis:hover,
.flow-play-artis:focus-visible {
  color: #fff6df;
  border-color: #d9a24b;
  background: rgba(217, 162, 75, 0.12);
}

.flow-start-artis {
  color: rgba(242, 223, 182, 0.72);
  font: 650 0.64rem/1 var(--font-ui, sans-serif);
  letter-spacing: 0.05em;
  text-decoration: underline;
  text-underline-offset: 0.2rem;
  white-space: nowrap;
}

.flow-start-artis:hover,
.flow-start-artis:focus-visible {
  color: #fff6df;
}

.archived-worlds {
  margin: 0.55rem auto 0;
  color: rgba(235, 225, 205, 0.44);
  font: 500 0.72rem/1.5 var(--font-ui, sans-serif);
  text-align: center;
}

.archived-worlds a {
  color: rgba(242, 223, 182, 0.66);
  text-decoration: underline;
  text-underline-offset: 0.2rem;
}

.archived-worlds a:hover,
.archived-worlds a:focus-visible {
  color: #fff6df;
}

.artis-attribution {
  margin: 0.8rem auto 0;
  color: rgba(235, 225, 205, 0.62);
  font-size: 0.7rem;
  text-align: center;
}

.artis-attribution a { color: rgba(224, 178, 99, 0.86); }