:root {
  color-scheme: dark;
  --paper: #ead9b8;
  --paper-bright: #fff0d1;
  --muted: #aa9b83;
  --gold: #d3a45c;
  --gold-soft: #9f7743;
  --wine: #71363c;
  --ink: #090b0d;
  --panel: rgba(13, 14, 16, .96);
  --line: rgba(200, 155, 88, .38);
}

* { box-sizing: border-box; }

html, body { width: 100%; height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  color: var(--paper);
  background:
    radial-gradient(circle at center, #192127 0, #07090b 64%, #020304 100%);
  font-family: "Noto Serif SC", "Songti SC", SimSun, serif;
}

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

button:focus-visible,
input:focus-visible {
  outline: 2px solid #f0c77e;
  outline-offset: 3px;
}

[hidden] { display: none !important; }

.game-stage {
  position: relative;
  width: min(100vw, 177.7778vh);
  height: min(100vh, 56.25vw);
  overflow: hidden;
  isolation: isolate;
  background: #080b0d;
  box-shadow: 0 0 0 1px #624a2e55, 0 28px 90px #000;
}

.game-stage::after {
  content: "";
  position: absolute;
  z-index: 50;
  inset: 0;
  pointer-events: none;
  border: 1px solid rgba(223, 179, 105, .23);
  box-shadow: inset 0 0 90px rgba(0, 0, 0, .42);
}

.game-screen {
  position: absolute;
  inset: 0;
  z-index: 1;
  visibility: hidden;
  opacity: 0;
  transform: scale(1.018);
  transition: opacity .7s ease, transform 1.1s ease, visibility .7s;
}

.game-screen.active {
  z-index: 2;
  visibility: visible;
  opacity: 1;
  transform: scale(1);
}

.title-screen {
  background: url("assets/title-station.webp") center / cover no-repeat;
}

.screen-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(3, 8, 13, .98) 0, rgba(4, 9, 14, .82) 30%, rgba(3, 7, 11, .18) 59%, rgba(0, 0, 0, .18)),
    linear-gradient(0deg, rgba(2, 5, 8, .7), transparent 32%, rgba(2, 5, 8, .22));
}

.title-copy {
  position: absolute;
  z-index: 2;
  top: 13%;
  left: 6.3%;
  width: 37%;
  animation: title-arrive 1.2s ease both;
}

.title-kicker,
.panel-header small,
.lobby-header small,
.hotspot-label small {
  color: var(--gold);
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: .32em;
}

.title-kicker {
  margin: 0 0 1.2%;
  font-family: "Noto Serif SC", "Songti SC", SimSun, serif;
  font-size: clamp(9px, .86vw, 17px);
  letter-spacing: .18em;
}

h1 {
  margin: 0;
  color: #f2dfbc;
  font-size: clamp(34px, 5vw, 96px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: .1em;
  text-shadow: 0 6px 35px #000, 0 0 18px rgba(205, 161, 87, .15);
}

.title-subtitle {
  margin: 2.8% 0 0;
  color: #cdbb9d;
  font-size: clamp(10px, 1.22vw, 23px);
  letter-spacing: .16em;
}

.title-quote {
  max-width: 98%;
  margin: 5.5% 0 0;
  color: #9e927f;
  font-size: clamp(10px, .9vw, 18px);
  line-height: 1.85;
}

.title-actions {
  width: 80%;
  margin-top: clamp(34px, 7vh, 66px);
  display: grid;
  gap: clamp(4px, .62vh, 10px);
}

.menu-button {
  position: relative;
  min-height: clamp(34px, 5.7vh, 66px);
  padding: 1.2% 5%;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  border: 1px solid transparent;
  color: #c1b49f;
  background: linear-gradient(90deg, rgba(8, 12, 16, .72), transparent);
  cursor: pointer;
  text-align: left;
  transition: color .2s, border-color .2s, transform .2s, background .2s;
}

.menu-button::before {
  content: "";
  position: absolute;
  left: 0;
  width: 2px;
  height: 0;
  background: var(--gold);
  box-shadow: 0 0 14px var(--gold);
  transition: height .25s;
}

.menu-button span { font-size: clamp(11px, 1.24vw, 24px); letter-spacing: .12em; }
.menu-button small { color: #766e62; font: clamp(5px, .48vw, 9px)/1 Georgia, serif; letter-spacing: .14em; }
.menu-button:hover, .menu-button:focus-visible, .menu-button.primary-button {
  border-color: rgba(205, 159, 88, .35);
  color: #ffeac5;
  background: linear-gradient(90deg, rgba(99, 49, 36, .7), rgba(52, 32, 25, .1));
  transform: translateX(1.5%);
}
.menu-button:hover::before, .menu-button:focus-visible::before, .menu-button.primary-button::before { height: 100%; }

.title-progress { margin-top: 6%; display: flex; align-items: center; gap: 4%; color: #8f806a; font-size: clamp(6px, .62vw, 12px); }
.progress-rule { width: 32%; height: 1px; background: linear-gradient(90deg, #9b7446, transparent); }
.title-hint, .lobby-help {
  position: absolute;
  z-index: 2;
  bottom: 3.2%;
  left: 50%;
  margin: 0;
  color: rgba(226, 210, 183, .55);
  font-size: clamp(6px, .62vw, 12px);
  letter-spacing: .13em;
  transform: translateX(-50%);
}

.lobby-screen { background: url("assets/archive-lobby.webp") center / cover no-repeat; }
.lobby-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 48%, transparent 42%, rgba(1, 3, 5, .46) 100%),
    linear-gradient(180deg, rgba(3, 6, 8, .48), transparent 22%, transparent 76%, rgba(2, 4, 5, .62));
  transition: opacity .3s;
}

body.no-vignette .lobby-vignette { opacity: 0; }

.lobby-header {
  position: absolute;
  z-index: 4;
  top: 3.5%;
  left: 3.5%;
  right: 3.5%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
  text-shadow: 0 2px 12px #000;
}
.lobby-header div:first-child { display: grid; gap: .3vh; }
.lobby-header small { font-size: clamp(5px, .48vw, 9px); }
.lobby-header strong { font-size: clamp(11px, 1.4vw, 27px); font-weight: 500; letter-spacing: .14em; }
.lobby-status { padding: .7% 1.2%; border: 1px solid rgba(186, 143, 78, .27); color: #b6a488; background: rgba(5, 8, 10, .68); font-size: clamp(6px, .62vw, 12px); letter-spacing: .08em; }

.hotspot {
  position: absolute;
  z-index: 3;
  padding: 0;
  border: 0;
  border-radius: 18%;
  color: #f2d7a7;
  background: transparent;
  cursor: pointer;
}

.hotspot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse at center, rgba(220, 169, 87, .16), transparent 68%);
  opacity: 0;
  transition: opacity .35s;
}
.hotspot:hover::before, .hotspot:focus-visible::before { opacity: 1; }

.hotspot-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(14px, 1.65vw, 32px);
  aspect-ratio: 1;
  border: 1px solid rgba(237, 190, 111, .76);
  border-radius: 50%;
  opacity: .72;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 4px rgba(207, 156, 78, .08), 0 0 16px rgba(232, 179, 91, .45);
  animation: hotspot-pulse 2.8s ease-in-out infinite;
}
.hotspot-ring::after { content: ""; position: absolute; inset: 34%; border-radius: 50%; background: #f3c779; box-shadow: 0 0 12px #f3c779; }

.hotspot-label {
  position: absolute;
  left: 50%;
  top: 58%;
  min-width: clamp(100px, 10.8vw, 205px);
  padding: clamp(5px, .55vw, 11px) clamp(7px, .75vw, 14px);
  display: grid;
  gap: 2px;
  border: 1px solid rgba(205, 158, 85, .42);
  background: linear-gradient(100deg, rgba(8, 11, 13, .94), rgba(20, 18, 15, .82));
  box-shadow: 0 12px 30px #0009;
  opacity: .78;
  pointer-events: none;
  transform: translate(-50%, 0);
  transition: opacity .25s, transform .25s;
  text-align: left;
}
.hotspot:hover .hotspot-label, .hotspot:focus .hotspot-label, .hotspot:focus-visible .hotspot-label { opacity: 1; transform: translate(-50%, -3px); }
.hotspot-label small { font-size: clamp(4px, .38vw, 7px); }
.hotspot-label strong { font-size: clamp(8px, .86vw, 16px); font-weight: 500; letter-spacing: .12em; }
.hotspot-label em { color: #92846f; font-size: clamp(5px, .5vw, 10px); font-style: normal; }

.hotspot-chapters { left: 1.5%; top: 10%; width: 34%; height: 47%; }
.hotspot-memories { left: 56%; top: 13%; width: 22%; height: 39%; }
.hotspot-achievements { left: 84.5%; top: 7%; width: 14.5%; height: 51%; }
.hotspot-travelers { left: 72%; top: 54%; width: 25%; height: 43%; }
.hotspot-continue { left: 8%; top: 60%; width: 43%; height: 37%; }
.hotspot-continue .hotspot-label { left: 42%; top: 35%; }
.hotspot-travelers .hotspot-label { left: 38%; top: 44%; }
.hotspot-achievements .hotspot-label { left: 10%; top: 68%; }

.lobby-tools {
  position: absolute;
  z-index: 8;
  right: 2.7%;
  bottom: 3.2%;
  display: flex;
  gap: .5vw;
}
.lobby-tools button {
  width: clamp(28px, 2.8vw, 54px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(193, 149, 83, .3);
  color: #c5ac83;
  background: rgba(5, 8, 10, .73);
  cursor: pointer;
  font-family: Georgia, serif;
}
.lobby-tools button:hover { border-color: var(--gold); color: #ffe2ad; background: rgba(75, 46, 29, .84); }
.lobby-tools span { position: absolute; overflow: hidden; width: 1px; height: 1px; clip: rect(0 0 0 0); }

.panel-backdrop {
  position: absolute;
  z-index: 20;
  inset: 0;
  background: rgba(1, 3, 5, .71);
  backdrop-filter: blur(5px);
  animation: fade-in .25s ease;
}

.game-panels { position: absolute; z-index: 30; inset: 0; pointer-events: none; }
.game-panel {
  position: absolute;
  inset: 5.5% 6.5%;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  pointer-events: auto;
  border: 1px solid rgba(208, 163, 94, .55);
  color: var(--paper);
  background:
    linear-gradient(135deg, rgba(72, 47, 29, .13), transparent 34%),
    var(--panel);
  box-shadow: 0 24px 80px #000, inset 0 0 55px rgba(159, 110, 48, .06);
  animation: panel-in .32s ease both;
}
.game-panel::before, .game-panel::after { content: ""; position: absolute; z-index: 2; pointer-events: none; width: 5%; aspect-ratio: 1; }
.game-panel::before { left: 1%; top: 1.7%; border-left: 1px solid #c39554; border-top: 1px solid #c39554; }
.game-panel::after { right: 1%; bottom: 1.7%; border-right: 1px solid #c39554; border-bottom: 1px solid #c39554; }

.panel-header {
  position: relative;
  z-index: 3;
  min-height: clamp(48px, 10vh, 104px);
  padding: 2.1% 3.2% 1.8%;
  display: flex;
  align-items: center;
  gap: 3%;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(83, 48, 29, .25), transparent);
}
.panel-header > div { flex: 1; }
.panel-header small { display: block; margin-bottom: .25em; font-size: clamp(5px, .5vw, 10px); }
.panel-header h2 { margin: 0; color: #efd4a5; font-size: clamp(14px, 1.7vw, 32px); font-weight: 500; letter-spacing: .16em; }
.panel-header > p { margin: 0 5% 0 0; color: var(--muted); font-size: clamp(6px, .68vw, 13px); }
.panel-close {
  position: absolute;
  top: 17%;
  right: 1.8%;
  width: clamp(26px, 2.7vw, 52px);
  aspect-ratio: 1;
  border: 1px solid transparent;
  color: #bda885;
  background: transparent;
  cursor: pointer;
  font: 300 clamp(17px, 2vw, 38px)/1 Arial, sans-serif;
}
.panel-close:hover { border-color: #9f7443; color: #ffe1a9; background: #4c2f2244; }

.panel-scroll {
  min-height: 0;
  overflow: auto;
  padding: 2.4% 3.2% 3.5%;
  scrollbar-width: thin;
  scrollbar-color: #8b653c #161313;
}
.panel-intro { margin: 0 0 2%; color: #aa9c86; font-size: clamp(6px, .73vw, 14px); line-height: 1.7; }
.memory-empty-hint { display: none; }

.primary-button,
.chapter-card button {
  padding: clamp(6px, .68vw, 13px) clamp(10px, 1.2vw, 23px);
  border: 1px solid #ba8748;
  color: #ffebc5;
  background: linear-gradient(135deg, #71363c, #3f2026);
  box-shadow: 0 7px 22px #0007;
  cursor: pointer;
}
.primary-button:hover, .chapter-card button:hover:not(:disabled) { border-color: #e0b46c; background: linear-gradient(135deg, #8a4148, #54282f); }
.text-button { padding: .55em .8em; border: 0; color: #cdb38d; background: transparent; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }

.completion-banner, .journey-panel {
  margin: 0 0 2%;
  padding: 1.5%;
  border: 1px solid #806039;
  color: #d3bd99;
  background: #2d2019b8;
  font-size: clamp(6px, .7vw, 13px);
  line-height: 1.7;
}
.journey-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 2%; }
.journey-panel h3 { margin: .3em 0; color: #e7c383; }
.journey-panel p { margin: .5em 0; }

.chapter-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5%; }
.chapter-card { min-width: 0; overflow: hidden; display: grid; border: 1px solid #5e4b36; background: #131316; box-shadow: 0 12px 30px #0005; }
.chapter-card.completed { border-color: #9d7647; }
.chapter-card.locked { filter: grayscale(.8); opacity: .58; }
.chapter-art { min-height: clamp(90px, 18vh, 190px); background: linear-gradient(0deg, #121013, transparent 55%), var(--chapter-image) center / cover; transition: transform .5s; }
.chapter-card:hover .chapter-art { transform: scale(1.025); }
.chapter-copy { position: relative; z-index: 1; margin-top: -10%; padding: 5% 6% 6%; background: linear-gradient(0deg, #121013 80%, transparent); }
.chapter-meta { display: flex; justify-content: space-between; gap: 3%; color: #a58f70; font-size: clamp(5px, .58vw, 11px); }
.chapter-meta strong { color: #d3a65f; font-weight: 500; }
.chapter-card h3 { min-height: 2.7em; margin: 5% 0 4%; color: #ead1a9; font-size: clamp(8px, 1vw, 19px); font-weight: 500; line-height: 1.4; }
.chapter-stats { min-height: 3.8em; display: grid; gap: .2em; margin-bottom: 5%; color: #9f917e; font-size: clamp(5px, .58vw, 11px); }
.chapter-card button { width: 100%; font-size: clamp(6px, .66vw, 13px); }
.chapter-card button:disabled { cursor: not-allowed; opacity: .5; }

.gallery-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.8%; }
.memory-card { overflow: hidden; border: 1px solid #5d4a35; background: #141216; }
.memory-card.locked { opacity: .5; filter: grayscale(1); }
.memory-art { height: clamp(100px, 23vh, 230px); overflow: hidden; background: #0a0b0d; }
.memory-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.memory-card:hover img { transform: scale(1.04); }
.memory-card[data-collectible="干枯的野花"] .memory-art {
  position: relative;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, #1b1c1e 0, #090b0d 68%);
}
.memory-card[data-collectible="干枯的野花"] .memory-art img {
  position: absolute;
  inset: 0;
  width: auto;
  height: 90%;
  max-width: 90%;
  max-height: 90%;
  margin: auto;
  object-fit: contain;
  transform: none;
}
.memory-card[data-collectible="干枯的野花"]:hover .memory-art img { transform: none; }
.memory-card[data-collectible="折断的画笔"] .memory-art {
  position: relative;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, #17191b 0, #090b0d 70%);
}
.memory-card[data-collectible="折断的画笔"] .memory-art img {
  position: absolute;
  inset: 0;
  width: auto;
  height: 90%;
  max-width: 90%;
  max-height: 90%;
  margin: auto;
  object-fit: contain;
  transform: none;
}
.memory-card[data-collectible="折断的画笔"]:hover .memory-art img { transform: none; }
.memory-copy { padding: 5%; }
.memory-copy small { color: #a57d48; font-size: clamp(5px, .55vw, 11px); letter-spacing: .12em; }
.memory-copy h3 { margin: .35em 0; color: #e6c796; font-size: clamp(8px, 1vw, 19px); font-weight: 500; }
.memory-copy p { margin: 0; color: #a89982; font-size: clamp(5px, .6vw, 12px); line-height: 1.7; }
.hidden-ending-entry { margin-top: 2%; }
.covered-frame { width: 100%; padding: 1.5%; display: grid; grid-template-columns: 14% 1fr auto; align-items: center; gap: 2%; border: 1px solid #9a6f3b; color: #dfc49b; background: #25191a; cursor: pointer; text-align: left; }
.frame-preview {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  display: block;
  border: 1px solid #80613d;
  background: #151316;
}
.frame-preview img { width: 100%; height: 100%; display: block; object-fit: cover; }
.covered-frame strong { color: #efcd96; }
.covered-frame p { margin: .25em 0 0; color: #9f907a; font-size: clamp(5px, .58vw, 11px); white-space: pre-line; }
.entry-state { color: #c59555; font-size: clamp(5px, .58vw, 11px); }

.traveler-identity-panel { margin-bottom: 1.8%; padding: 1.8%; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 3%; border: 1px solid #725536; background: linear-gradient(120deg, #29191d, #120e11 72%); }
.traveler-identity-copy small { color: #a87d48; font-size: clamp(5px, .55vw, 11px); letter-spacing: .12em; }
.traveler-identity-copy h3 { margin: .35em 0; color: #e2c08a; font-size: clamp(8px, 1vw, 19px); font-weight: 500; }
.traveler-identity-copy p { margin: 0; color: #aa9a84; font-size: clamp(5px, .58vw, 11px); line-height: 1.65; }
.traveler-identity-form { display: grid; grid-template-columns: 1fr auto; gap: .6vw; }
.traveler-identity-form input[type="text"] { min-width: 0; padding: .65em .8em; border: 1px solid #70573b; border-radius: 0; outline: none; color: #f0dcc0; background: #0e0b0e; font-size: clamp(6px, .7vw, 13px); }
.traveler-identity-form input:disabled { opacity: .45; }
.traveler-consent { grid-column: 1 / -1; color: #9e8e79; font-size: clamp(5px, .52vw, 10px); }
.traveler-consent input { accent-color: #8b4a43; }
.traveler-visibility-button { grid-column: 1 / -1; justify-self: end; }
.traveler-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 2%; border-bottom: 1px solid #3f3329; }
.traveler-filters { display: flex; gap: .3vw; }
.traveler-filter { padding: .8em 1.2em; border: 0; border-bottom: 2px solid transparent; color: #9f907c; background: transparent; cursor: pointer; font-size: clamp(5px, .62vw, 12px); }
.traveler-filter.active { border-bottom-color: #cb9654; color: #e1bd83; }
.traveler-registry-status { min-height: 1.4em; margin: 1% 0; color: #8f826f; font-size: clamp(5px, .55vw, 10px); }
.traveler-registry-status[data-state="error"] { color: #d69a91; }
.traveler-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9vw; }
.traveler-card { min-width: 0; padding: 5%; border: 1px solid #534334; background: linear-gradient(145deg, #1b1518, #100d10); }
.traveler-card.current { border-color: #b98749; }
.traveler-card-top { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 3%; }
.traveler-rank { color: #8a6844; font-size: clamp(5px, .55vw, 10px); }
.traveler-card h3 { overflow: hidden; margin: 0; color: #e1c395; font-size: clamp(7px, .85vw, 16px); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.traveler-card-top small { color: #766b5c; font-size: clamp(4px, .45vw, 9px); }
.traveler-stats { display: flex; flex-wrap: wrap; gap: .4em 1em; margin: 5% 0; color: #b2a18a; font-size: clamp(5px, .55vw, 11px); }
.traveler-badges { min-height: clamp(22px, 2.4vw, 46px); display: flex; align-items: center; gap: 3%; }
.traveler-badges > span { width: clamp(20px, 2vw, 38px); aspect-ratio: 1; overflow: hidden; border: 1px solid #745835; border-radius: 50%; }
.traveler-badges img { width: 100%; height: 100%; object-fit: contain; }
.traveler-badges > small { margin-left: auto; color: #8c7b67; font-size: clamp(4px, .45vw, 9px); }
.traveler-quote { margin: 5% 0 0; padding-top: 4%; border-top: 1px solid #332a24; color: #958876; font-size: clamp(5px, .52vw, 10px); line-height: 1.6; }
.traveler-empty { grid-column: 1 / -1; padding: 3%; border: 1px dashed #4d3e31; color: #8c806e; text-align: center; }

.record-summary { margin-bottom: 2%; display: grid; grid-template-columns: repeat(3, 1fr) 1.25fr; gap: .8vw; }
.record-card { min-height: clamp(60px, 11vh, 116px); padding: 7%; display: grid; gap: .35em; border: 1px solid #574431; background: linear-gradient(145deg, #1d1519, #100d10); }
.record-card small { color: #9f815a; font-size: clamp(5px, .52vw, 10px); letter-spacing: .1em; }
.record-card strong { color: #efd09c; font: 500 clamp(10px, 1.45vw, 28px)/1.2 Georgia, serif; }
.record-card span { color: #af9e87; font-size: clamp(5px, .55vw, 11px); }
.journey-record { border-color: #9a7040; }
.featured-achievements { margin-bottom: 2%; padding: 1.5%; display: flex; align-items: center; justify-content: space-between; gap: 2%; border: 1px solid #5a4531; background: #181316; }
.featured-achievements h3 { margin: 0 0 .25em; color: #d8b47b; font-size: clamp(7px, .85vw, 16px); font-weight: 500; }
.featured-achievements p { margin: 0; color: #948773; font-size: clamp(5px, .52vw, 10px); }
.featured-achievement-list { display: flex; gap: .6vw; }
.featured-badge { width: clamp(50px, 5vw, 96px); padding: 5%; display: grid; justify-items: center; gap: .3em; border: 1px solid #80613c; color: #d8b982; background: #100d10; cursor: pointer; font-size: clamp(4px, .45vw, 9px); }
.featured-badge span { width: 70%; aspect-ratio: 1; }
.featured-badge img { width: 100%; height: 100%; object-fit: contain; }
.featured-empty { color: #7f7363; font-size: clamp(5px, .52vw, 10px); }
.achievement-groups { display: grid; gap: 2%; }
.achievement-group h3 { margin: 0 0 .8%; color: #c9a16a; font-size: clamp(7px, .85vw, 16px); font-weight: 500; }
.achievement-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8vw; }
.achievement-card { position: relative; min-width: 0; padding: 4%; display: grid; grid-template-columns: 23% 1fr; gap: 4%; align-items: center; border: 1px solid #493c31; color: inherit; background: #121014; text-align: left; }
button.achievement-card { cursor: pointer; }
.achievement-card.locked { opacity: .58; }
.achievement-card.unlocked { border-color: #82603a; background: linear-gradient(140deg, #21171a, #111013); }
.achievement-icon { aspect-ratio: 1; overflow: hidden; display: grid; place-items: center; border: 1px solid #6f5336; border-radius: 50%; }
.achievement-icon img { width: 100%; height: 100%; object-fit: contain; }
.achievement-icon.concealed img { display: none; }
.achievement-icon b { color: #9a815e; }
.achievement-copy { min-width: 0; }
.achievement-copy small { color: #8d7659; font-size: clamp(4px, .42vw, 8px); }
.achievement-copy strong { display: block; margin: .2em 0; color: #ddbd89; font-size: clamp(6px, .7vw, 13px); font-weight: 500; }
.achievement-copy p { margin: 0; color: #8f8271; font-size: clamp(4px, .46vw, 9px); line-height: 1.5; }
.featured-mark { position: absolute; top: 4%; right: 3%; color: #d5a65e; font-size: clamp(4px, .42vw, 8px); }

.settings-content { display: grid; align-content: start; gap: 1.4%; padding-left: 11%; padding-right: 11%; }
.setting-row { padding: 2.2%; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #4c3b2b; cursor: pointer; }
.setting-row span { display: grid; gap: .35em; }
.setting-row strong { color: #e2c18e; font-size: clamp(8px, 1vw, 19px); font-weight: 500; }
.setting-row small { color: #8e816f; font-size: clamp(5px, .58vw, 11px); }
.setting-row input { width: clamp(28px, 3vw, 58px); height: clamp(14px, 1.5vw, 29px); accent-color: #a46a3f; }
.setting-action { justify-self: start; margin-top: 2%; }
.danger-setting { margin-top: 2%; padding: 2%; border: 1px solid #5f3c37; background: #29191b; }
.danger-setting p { margin: 0 0 1%; color: #a98e82; font-size: clamp(5px, .62vw, 12px); }
.danger-setting .text-button { color: #d6a199; }

.portrait-notice { display: none; }
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after { animation: none !important; transition-duration: .01ms !important; }

@keyframes title-arrive { from { opacity: 0; transform: translateX(-3%); } }
@keyframes hotspot-pulse { 50% { opacity: 1; box-shadow: 0 0 0 7px rgba(207, 156, 78, .04), 0 0 22px rgba(232, 179, 91, .58); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes panel-in { from { opacity: 0; transform: translateY(2%) scale(.985); } }

@media (max-aspect-ratio: 1/1) and (max-width: 700px) {
  .game-stage { opacity: .16; pointer-events: none; }
  .portrait-notice {
    position: fixed;
    z-index: 100;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 10px;
    padding: 30px;
    color: #e8cfaa;
    background: radial-gradient(circle, #182027, #06080a 70%);
    text-align: center;
  }
  .portrait-notice span { font: 42px/1 Arial, sans-serif; color: #c99a55; animation: hotspot-pulse 2.5s infinite; }
  .portrait-notice strong { font-size: 20px; letter-spacing: .15em; }
  .portrait-notice small { color: #958a78; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}