:root {
  color-scheme: dark;
  --bg: #020503;
  --panel: #07110b;
  --panel-2: #0b1710;
  --line: rgba(57, 255, 136, 0.48);
  --soft-line: rgba(57, 255, 136, 0.22);
  --text: #eafff1;
  --muted: #89a895;
  --green: #39ff88;
  --yellow: #f4ff6a;
  --red: #ff4f7a;
  --cyan: #75f0ff;
  --shadow: 0 0 34px rgba(57, 255, 136, 0.16);
  --display-font: "Zpix", "Fusion Pixel", "Unifont", "SimHei", "Microsoft YaHei UI", ui-monospace, monospace;
  --body-font: "Zpix", "Fusion Pixel", "SimHei", "Microsoft YaHei UI", ui-monospace, monospace;
  font-family: var(--body-font);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at 50% 0%, #102116 0, #020503 42rem);
  color: var(--text);
  font-weight: 700;
  text-rendering: geometricPrecision;
}

button,
input,
textarea {
  font: inherit;
  font-weight: 700;
}

button {
  color: inherit;
}

.app-shell {
  min-height: 100vh;
}

.screen {
  position: relative;
  width: min(100%, 480px);
  min-height: 100svh;
  margin: 0 auto;
  padding: max(20px, env(safe-area-inset-top)) 18px calc(126px + env(safe-area-inset-bottom));
  overflow-x: hidden;
  background:
    linear-gradient(rgba(57, 255, 136, 0.032) 50%, rgba(0, 0, 0, 0.1) 50%) 0 0 / 100% 4px,
    radial-gradient(circle at 18% 14%, rgba(57, 255, 136, 0.12), transparent 17rem),
    radial-gradient(circle at 90% 70%, rgba(117, 240, 255, 0.08), transparent 18rem),
    var(--bg);
}

.crt,
.screen::after {
  pointer-events: none;
  position: fixed;
  inset: 0;
}

.crt {
  opacity: 0.24;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.04), transparent 18%, rgba(57, 255, 136, 0.04) 50%, transparent 82%);
  mix-blend-mode: screen;
}

.screen::after {
  content: "";
  opacity: 0.18;
  background-image: radial-gradient(rgba(255,255,255,.45) 1px, transparent 1px);
  background-size: 5px 5px;
}

.scan-corner {
  position: fixed;
  z-index: 2;
  top: max(10px, env(safe-area-inset-top));
  right: 14px;
  color: rgba(57, 255, 136, 0.45);
  font-size: 10px;
}

.audio-toggle {
  position: fixed;
  z-index: 12;
  top: max(10px, env(safe-area-inset-top));
  left: 12px;
  border: 1px solid rgba(57, 255, 136, 0.38);
  border-radius: 999px;
  padding: 7px 9px;
  background: rgba(2, 5, 3, 0.72);
  color: var(--green);
  font-family: var(--display-font);
  font-size: 10px;
  box-shadow: 0 0 18px rgba(57, 255, 136, 0.12);
  backdrop-filter: blur(8px);
}

.my-adventure-button {
  position: fixed;
  z-index: 12;
  top: max(38px, calc(env(safe-area-inset-top) + 34px));
  right: 12px;
  border: 1px solid rgba(244, 255, 106, 0.4);
  border-radius: 999px;
  padding: 7px 9px;
  background: rgba(2, 5, 3, 0.72);
  color: var(--yellow);
  font-family: var(--display-font);
  font-size: 10px;
  box-shadow: 0 0 18px rgba(244, 255, 106, 0.1);
  backdrop-filter: blur(8px);
}

.presented-mark {
  position: relative;
  z-index: 1;
  margin-top: 26px;
  padding: 10px 0 0;
  border-top: 1px solid rgba(57, 255, 136, 0.16);
  color: rgba(57, 255, 136, 0.58);
  font-family: var(--display-font);
  font-size: 11px;
  line-height: 1.35;
  text-align: center;
  text-shadow: 0 0 10px rgba(57, 255, 136, 0.18);
}

.signal-interrupted {
  position: fixed;
  top: max(72px, calc(env(safe-area-inset-top) + 66px));
  left: 50%;
  z-index: 30;
  width: min(330px, calc(100% - 28px));
  transform: translateX(-50%);
  border: 1px solid rgba(57, 255, 136, 0.62);
  background: rgba(0, 8, 3, 0.92);
  box-shadow: 0 0 22px rgba(57, 255, 136, 0.22), inset 0 0 18px rgba(57, 255, 136, 0.12);
  color: var(--green);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  align-items: center;
  padding: 10px 12px;
  text-align: left;
}

.signal-interrupted strong {
  grid-column: 1 / -1;
  font-family: var(--display-font);
  font-size: 13px;
  letter-spacing: 0.08em;
}

.signal-interrupted span {
  color: rgba(219, 255, 224, 0.78);
  font-size: 12px;
}

.signal-interrupted button {
  border: 1px solid rgba(57, 255, 136, 0.5);
  background: rgba(57, 255, 136, 0.12);
  color: var(--green);
  font-family: var(--display-font);
  padding: 6px 9px;
}

.boot-screen {
  display: grid;
  place-items: center;
  padding-bottom: 20px;
}

.pre-event-screen {
  min-height: 100svh;
  display: grid;
  align-content: center;
  gap: 16px;
}

.boot-panel,
.story-panel,
.create-console,
.form-panel,
.log-console,
.quest-panel,
.locked-panel,
.mission-panel,
.passport-panel,
.pre-home,
.story-mode,
.event-info,
.checkin-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 22px;
  background: rgba(7, 17, 11, 0.76);
  box-shadow: var(--shadow);
}

.boot-panel {
  min-height: 80svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.boot-sequence p {
  margin: 0 0 9px;
  color: var(--green);
  opacity: 0;
  animation: bootLine 0.42s ease forwards;
  animation-delay: calc(var(--delay) * 0.36s);
  text-shadow: 0 0 12px rgba(57, 255, 136, 0.5);
}

.cursor {
  animation: blink 1s steps(1) infinite;
}

.terminal-lines p,
.tiny,
.date,
.eyebrow,
.fineprint,
small {
  color: var(--muted);
  text-transform: uppercase;
}

.loadbar {
  height: 14px;
  margin: 18px 0 8px;
  border: 1px solid var(--green);
  padding: 2px;
  width: 100%;
  background: rgba(2, 5, 3, 0.86);
  box-shadow: inset 0 0 14px rgba(57, 255, 136, 0.12), 0 0 20px rgba(57, 255, 136, 0.14);
}

.loadbar span {
  display: block;
  width: 0;
  height: 100%;
  background: repeating-linear-gradient(90deg, var(--green) 0 18px, transparent 18px 22px);
  box-shadow: 0 0 18px rgba(57, 255, 136, 0.5);
}

.loadbar:not(.boot-load) span {
  width: 100%;
  animation: loadPulse 1.8s ease-in-out infinite;
}

.boot-load {
  overflow: hidden;
}

.boot-load span {
  transition: width 80ms linear;
}

.boot-progress {
  color: var(--green);
  text-shadow: 0 0 12px rgba(57, 255, 136, 0.45);
}

.boot-title {
  width: 100%;
  margin-top: 38px;
}

.boot-title span {
  position: relative;
  display: block;
  margin-bottom: 14px;
  color: var(--green);
  font-size: 34px;
  line-height: 1.12;
  text-shadow: 0 0 18px rgba(57, 255, 136, 0.62);
}

.boot-title h1 {
  position: relative;
  color: var(--green);
  font-size: 56px;
  line-height: 1;
  text-shadow: 0 0 22px rgba(57, 255, 136, 0.72), 0 0 44px rgba(57, 255, 136, 0.26);
}

.boot-title p {
  color: var(--green);
  font-size: 18px;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 14px;
  font-size: 34px;
  line-height: 1.06;
  color: #fff;
  text-shadow: 0 0 18px rgba(57, 255, 136, 0.4);
  font-family: var(--display-font);
  font-weight: 900;
}

h2 {
  font-size: 28px;
  line-height: 1.12;
  font-family: var(--display-font);
  font-weight: 900;
}

h3 {
  font-size: 18px;
  font-family: var(--display-font);
  font-weight: 900;
}

.subcopy {
  color: var(--muted);
}

.btn {
  width: 100%;
  min-height: 52px;
  border: 1px solid var(--green);
  border-radius: 6px;
  margin-top: 18px;
  background: transparent;
  cursor: pointer;
  letter-spacing: 0;
  text-shadow: 0 0 10px rgba(57, 255, 136, 0.28);
  font-family: var(--display-font);
  font-weight: 900;
}

.eyebrow,
.btn,
.map-node strong,
.export-panel span,
.card-top,
dt,
.vote-meter span,
.scan-corner {
  font-family: var(--display-font);
}

.glitch-title {
  isolation: isolate;
}

.glitch-title::before,
.glitch-title::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.34;
  mix-blend-mode: screen;
}

.glitch-title::before {
  color: var(--cyan);
  transform: translate(1px, 0);
  clip-path: inset(0 0 58% 0);
}

.glitch-title::after {
  color: var(--red);
  transform: translate(-1px, 1px);
  clip-path: inset(58% 0 0 0);
}

.btn.primary {
  background: var(--green);
  color: #001807;
  box-shadow: 0 0 24px rgba(57, 255, 136, 0.28);
}

.btn.secondary {
  color: var(--green);
}

.story-panel {
  margin-top: 18svh;
}

.pre-home,
.story-mode,
.event-info,
.checkin-panel {
  display: grid;
  gap: 16px;
  margin-top: 5svh;
}

.pre-event-screen .pre-home {
  min-height: 62svh;
  align-content: center;
  justify-items: center;
  margin-top: 0;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(57, 255, 136, 0.08), transparent 30%),
    rgba(7, 17, 11, 0.82);
}

.pre-event-screen .liu-guide {
  justify-content: center;
  align-items: center;
}

.pre-event-screen .liu-guide figcaption {
  max-width: 260px;
  text-align: left;
}

.pre-title-block {
  width: 100%;
  display: grid;
  gap: 10px;
  justify-items: center;
}

.pre-home h1,
.story-mode h1 {
  color: var(--green);
  font-size: 46px;
}

.pre-event-screen .pre-home .eyebrow {
  color: var(--green);
  font-size: 20px;
  line-height: 1.2;
  text-shadow: 0 0 16px rgba(57, 255, 136, 0.55);
}

.pre-event-screen .pre-home h1 {
  max-width: 8em;
  margin-bottom: 0;
  font-size: 58px;
  line-height: 0.96;
  text-shadow: 0 0 24px rgba(57, 255, 136, 0.7), 0 0 52px rgba(57, 255, 136, 0.28);
}

.pre-event-screen .access-badge {
  justify-self: center;
}

.pre-status {
  max-width: 300px;
  color: #e6fff0;
}

.pre-actions {
  width: min(100%, 320px);
  display: grid;
  gap: 10px;
}

a.btn {
  display: grid;
  place-items: center;
  text-decoration: none;
}

.access-badge {
  width: fit-content;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px;
}

.locked-badge {
  color: var(--red);
}

.live-badge {
  color: var(--yellow);
  margin-bottom: 14px;
}

.locked-preview {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
}

.locked-preview article {
  min-height: 110px;
  display: grid;
  align-content: space-between;
  border: 1px solid rgba(255, 79, 122, 0.28);
  border-radius: 8px;
  padding: 12px;
  background: rgba(7, 17, 11, 0.56);
  opacity: 0.78;
}

.locked-preview span {
  color: var(--red);
}

.locked-preview strong {
  color: #fff;
}

.liu-guide {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin: 0;
}

.liu-guide img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 12px rgba(57, 255, 136, 0.34));
}

.liu-guide figcaption {
  position: relative;
  flex: 1;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  padding: 12px;
  color: var(--text);
  background: rgba(2, 5, 3, 0.72);
  font-size: 13px;
  line-height: 1.5;
}

.pose-walk img {
  animation: spriteWalk 1.8s ease-in-out infinite;
}

.pose-wave img,
.pose-happy img,
.pose-complete img {
  animation: spriteBounce 1.6s ease-in-out infinite;
}

.story-progress {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

.story-progress span {
  height: 5px;
  background: rgba(57, 255, 136, 0.16);
}

.story-progress .active {
  background: var(--green);
  box-shadow: 0 0 12px rgba(57, 255, 136, 0.45);
}

.story-visual {
  position: relative;
  min-height: 260px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, transparent 62%, rgba(57, 255, 136, 0.1)),
    #030704;
}

.story-visual .liu-guide {
  z-index: 2;
  display: grid;
  justify-items: center;
}

.story-visual .liu-guide img {
  width: 128px;
  height: 128px;
}

.story-visual .liu-guide figcaption {
  display: none;
}

.visual-stage {
  position: absolute;
  inset: 26px;
  border-bottom: 1px solid rgba(57, 255, 136, 0.35);
}

.visual-stage::before,
.visual-stage::after {
  content: "";
  position: absolute;
}

.visual-start-line .visual-stage::after,
.visual-glitch-road .visual-stage::after {
  inset: 20px;
  border: 1px dashed rgba(57, 255, 136, 0.3);
}

.visual-start-line .visual-stage::before {
  left: 24px;
  right: 24px;
  bottom: 22px;
  height: 22px;
  background: repeating-linear-gradient(90deg, #39ff88 0 18px, transparent 18px 34px);
  opacity: 0.78;
}

.visual-start-line::before {
  content: "大家好，我是刘仁铖！";
  position: absolute;
  z-index: 3;
  top: 26px;
  left: 22px;
  max-width: 190px;
  border: 1px solid rgba(57, 255, 136, 0.72);
  border-radius: 6px;
  padding: 10px 12px;
  background: rgba(2, 5, 3, 0.9);
  color: var(--green);
  font-family: var(--display-font);
  font-size: 14px;
  line-height: 1.35;
  box-shadow: 0 0 18px rgba(57, 255, 136, 0.18);
  text-shadow: 0 0 12px rgba(57, 255, 136, 0.4);
}

.visual-start-line::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 84px;
  left: 108px;
  width: 14px;
  height: 14px;
  border-right: 1px solid rgba(57, 255, 136, 0.72);
  border-bottom: 1px solid rgba(57, 255, 136, 0.72);
  background: rgba(2, 5, 3, 0.9);
  transform: rotate(45deg);
}

.visual-monitor-stage .visual-stage::before {
  inset: -26px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 79, 122, 0.24) 0 20px, rgba(2, 5, 3, 0.24) 20px 40px),
    linear-gradient(90deg, rgba(80, 7, 24, 0.9), rgba(16, 2, 6, 0.95) 50%, rgba(80, 7, 24, 0.9));
  box-shadow: inset 0 -24px 50px rgba(0, 0, 0, 0.65);
}

.visual-monitor-stage .visual-stage::after {
  left: 50%;
  top: -24px;
  width: 150px;
  height: 244px;
  background: radial-gradient(ellipse at 50% 0%, rgba(244,255,106,.44), rgba(244,255,106,.16) 38%, transparent 72%);
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  opacity: 0.94;
  transform: translateX(-50%);
}

.visual-city-map .visual-stage::before {
  inset: 26px;
  background:
    radial-gradient(circle at 50% 52%, rgba(244,255,106,.26) 0 34px, transparent 36px),
    linear-gradient(22deg, transparent 48%, rgba(57,255,136,.3) 49%, transparent 51%),
    linear-gradient(70deg, transparent 49%, rgba(117,240,255,.24) 50%, transparent 52%),
    linear-gradient(112deg, transparent 49%, rgba(255,79,122,.18) 50%, transparent 52%);
  opacity: 0.9;
}

.visual-city-map .visual-stage::after {
  left: 42px;
  top: 38px;
  width: 16px;
  height: 16px;
  border-radius: 50% 50% 4px 4px;
  background: #39ff88;
  box-shadow:
    0 18px 0 -3px #39ff88,
    54px 86px 0 0 #f4ff6a,
    54px 104px 0 -3px #f4ff6a,
    122px 12px 0 0 #75f0ff,
    122px 30px 0 -3px #75f0ff,
    190px 76px 0 0 #ff4f7a,
    190px 94px 0 -3px #ff4f7a,
    226px 20px 0 0 #eafff1,
    226px 38px 0 -3px #eafff1;
  opacity: 0.96;
  animation: meetPulse 2.2s ease-in-out infinite;
}

.visual-glitch-road .visual-stage::before {
  left: -18px;
  right: -18px;
  top: 54px;
  height: 132px;
  background:
    repeating-linear-gradient(90deg, rgba(57,255,136,.6) 0 10px, transparent 10px 22px),
    linear-gradient(180deg, transparent 0 16px, rgba(2,5,3,.94) 16px 116px, transparent 116px),
    repeating-linear-gradient(90deg, rgba(57,255,136,.14) 0 86px, rgba(244,255,106,.12) 86px 172px, rgba(255,79,122,.12) 172px 258px, rgba(117,240,255,.12) 258px 344px);
  border-top: 1px solid rgba(57,255,136,.42);
  border-bottom: 1px solid rgba(57,255,136,.42);
  animation: filmRoll 5.2s steps(4) infinite;
}

.visual-glitch-road .visual-stage::after {
  inset: 70px 2px auto;
  height: 86px;
  content: "工作      恋爱      沮丧      哈哈哈";
  display: flex;
  align-items: center;
  border: 0;
  padding-left: 18px;
  color: var(--yellow);
  font-family: var(--display-font);
  font-size: 18px;
  letter-spacing: 0;
  word-spacing: 32px;
  text-shadow: 0 0 14px rgba(244,255,106,.45);
  animation: filmText 5.2s steps(4) infinite;
}

.visual-perth-zoom .visual-stage::before {
  inset: 8px;
  display: grid;
  place-items: center;
  content: "PERTH";
  color: rgba(57, 255, 136, 0.18);
  font-family: var(--display-font);
  font-size: 84px;
  text-shadow: 0 0 26px rgba(57,255,136,.26);
}

.visual-perth-zoom .visual-stage::after {
  left: -34px;
  top: 108px;
  width: 136px;
  height: 16px;
  background: repeating-linear-gradient(90deg, rgba(57,255,136,.7) 0 16px, transparent 16px 28px);
  box-shadow:
    38px -30px 0 -5px rgba(117,240,255,.52),
    76px 32px 0 -5px rgba(244,255,106,.52),
    118px -8px 0 -5px rgba(255,79,122,.42);
  opacity: 0;
  animation: flightTrail 2.4s ease-out infinite;
}

.visual-perth-zoom .liu-guide {
  animation: liuFlyIn 2.4s cubic-bezier(.16,.78,.32,1) infinite;
}

.visual-blank-page .visual-stage::before {
  left: 52px;
  right: 52px;
  top: 32px;
  bottom: 24px;
  border: 1px solid rgba(57,255,136,.4);
  background: linear-gradient(rgba(57,255,136,.08), transparent);
}

.visual-blank-page .visual-stage::after {
  left: 82px;
  top: 78px;
  width: 16px;
  height: 42px;
  background: var(--green);
  box-shadow: 0 0 18px rgba(57,255,136,.6);
  animation: blink 1s steps(1) infinite;
}

.info-list {
  grid-template-columns: 68px 1fr;
  border-top: 1px solid var(--soft-line);
  border-bottom: 1px solid var(--soft-line);
  padding: 16px 0;
}

.cinematic-copy h1 {
  margin: 22px 0;
  color: var(--green);
  font-size: 58px;
}

.cinematic-copy p {
  font-size: 18px;
  line-height: 1.7;
}

.route-line {
  display: grid;
  gap: 8px;
  margin: 28px 0 8px;
  color: var(--yellow);
  font-size: 12px;
}

.route-line span {
  height: 1px;
  background: linear-gradient(90deg, var(--green), transparent);
}

label,
fieldset {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--green);
}

fieldset {
  border: 0;
  padding: 0;
}

input,
textarea {
  width: 100%;
  border: 1px solid rgba(57, 255, 136, 0.42);
  border-radius: 6px;
  padding: 14px;
  background: #020503;
  color: var(--text);
}

textarea {
  min-height: 96px;
  resize: vertical;
}

input[type="range"] {
  accent-color: var(--green);
  padding: 0;
}

.create-console {
  margin-top: 6svh;
}

.field-label,
.hp-picker {
  color: var(--green);
}

.hp-picker strong {
  justify-self: end;
  color: #fff;
}

.status-wheel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.status-chip {
  min-height: 46px;
  place-items: center;
  margin: 0;
  border: 1px solid rgba(57, 255, 136, 0.34);
  border-radius: 6px;
  color: var(--text);
}

.status-chip input {
  width: auto;
  position: absolute;
  opacity: 0;
}

.status-chip:has(input:checked) {
  background: rgba(57, 255, 136, 0.16);
  border-color: var(--green);
  color: #fff;
}

.random-note {
  display: grid;
  gap: 6px;
  border: 1px dashed var(--soft-line);
  border-radius: 6px;
  padding: 12px;
  color: var(--muted);
}

.random-note strong {
  color: var(--yellow);
  font-size: 12px;
}

.stack {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 16px;
}

.page-head {
  position: relative;
  z-index: 1;
  padding: 24px 0 12px;
}

.page-head.tight {
  padding-top: 8px;
}

.page-head p,
.map-head p {
  color: var(--muted);
}

.player-card,
.ticket {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--green);
  border-radius: 8px;
  padding: 20px;
  background:
    linear-gradient(135deg, rgba(57, 255, 136, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.04), transparent),
    #040805;
  box-shadow: var(--shadow);
}

.player-card {
  min-height: 560px;
  display: grid;
  align-content: space-between;
}

.card-gridline {
  position: absolute;
  inset: 58px 20px auto;
  height: 1px;
  background: var(--soft-line);
  box-shadow: 0 140px 0 var(--soft-line), 0 280px 0 var(--soft-line), 0 420px 0 var(--soft-line);
}

.card-sprite,
.ticket-sprite {
  position: absolute;
  z-index: 1;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 14px rgba(57, 255, 136, 0.3));
}

.card-sprite {
  right: 14px;
  bottom: 46px;
  width: 92px;
  height: 92px;
  opacity: 0.86;
}

.card-top,
.action-row {
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.card-top {
  position: relative;
  z-index: 1;
  color: var(--muted);
  font-size: 12px;
}

.identity-block {
  position: relative;
  z-index: 1;
}

.identity-block p {
  color: var(--green);
}

.player-card h2 {
  margin: 0;
  color: #fff;
  font-size: 42px;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.hp-module {
  position: relative;
  z-index: 1;
}

.hp-line {
  height: 10px;
  border: 1px solid var(--green);
  margin: 0 0 10px;
}

.hp-line span {
  display: block;
  height: 100%;
  background: var(--green);
}

dl {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 12px 10px;
}

dt {
  color: var(--muted);
}

dd {
  margin: 0;
  color: var(--green);
}

.player-card footer {
  color: var(--muted);
  font-size: 11px;
}

.export-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  padding: 12px;
  background: rgba(7, 17, 11, 0.68);
}

.export-panel span {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 12px;
}

.export-panel .btn,
.action-row .btn {
  margin: 0;
}

.map-head {
  position: relative;
  z-index: 1;
  padding: 24px 0 10px;
}

.map-head h2 {
  margin: 0 0 6px;
  color: #fff;
  font-size: 26px;
  text-shadow: 0 0 18px rgba(57,255,136,.22);
}

.xp-panel {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  border: 1px solid rgba(57,255,136,.28);
  border-radius: 8px;
  margin-bottom: 14px;
  padding: 14px;
  background: rgba(7,17,11,.78);
}

.xp-panel div:first-child {
  display: flex;
  justify-content: space-between;
  align-items: end;
}

.xp-panel span,
.xp-panel b,
.xp-panel code {
  color: var(--green);
  font-family: var(--display-font);
  font-size: 12px;
}

.xp-panel strong {
  color: var(--yellow);
  font-size: 30px;
}

.xp-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.xp-panel em {
  position: absolute;
  right: 14px;
  top: -12px;
  color: var(--yellow);
  font-family: var(--display-font);
  font-style: normal;
  animation: xpFloat 1.6s ease both;
}

.xp-panel code {
  width: fit-content;
  border: 1px solid rgba(244,255,106,.42);
  padding: 5px 7px;
  color: var(--yellow);
}

.reward-unlock-signal {
  display: grid !important;
  gap: 6px;
  border: 1px solid rgba(244,255,106,.48);
  padding: 12px;
  background:
    repeating-linear-gradient(0deg, rgba(244,255,106,.08) 0 2px, transparent 2px 7px),
    rgba(2,5,3,.9);
  text-align: center;
  animation: signalDisturbance .2s steps(2) 7;
}

.reward-unlock-signal strong {
  color: var(--yellow);
  font-size: 24px;
}

.reward-unlock-signal p {
  color: #fff;
}

.xp-bar,
.runner-progress {
  height: 12px;
  border: 1px solid rgba(57,255,136,.52);
  padding: 2px;
  background: rgba(2,5,3,.84);
}

.xp-bar i,
.runner-progress i {
  display: block;
  height: 100%;
  background: repeating-linear-gradient(90deg, var(--green) 0 18px, transparent 18px 23px);
  box-shadow: 0 0 14px rgba(57,255,136,.38);
  transition: width .45s ease;
}

.next-action {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  margin: 12px 0;
  border: 1px solid rgba(244,255,106,.34);
  border-radius: 8px;
  padding: 14px;
  background: linear-gradient(90deg, rgba(244,255,106,.1), rgba(57,255,136,.05));
}

.next-action span {
  color: var(--yellow);
  font-family: var(--display-font);
  font-size: 10px;
}

.next-action strong {
  color: #fff;
  font-size: 18px;
}

.level-map {
  position: relative;
  z-index: 1;
  min-height: 760px;
  margin: 18px -4px 8px;
  padding: 0;
  background:
    radial-gradient(circle at 22% 9%, rgba(244,255,106,.11), transparent 72px),
    radial-gradient(circle at 78% 26%, rgba(117,240,255,.09), transparent 82px),
    radial-gradient(circle at 20% 57%, rgba(255,79,122,.075), transparent 78px),
    radial-gradient(circle at 74% 78%, rgba(57,255,136,.08), transparent 86px),
    linear-gradient(rgba(57,255,136,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57,255,136,.05) 1px, transparent 1px);
  background-size: auto, auto, auto, auto, 32px 32px, 32px 32px;
  overflow: hidden;
}

.level-map::before {
  content: "";
  position: absolute;
  inset: 30px 18px 34px;
  border: 2px dashed rgba(57,255,136,.2);
  border-left-color: transparent;
  border-bottom-color: rgba(244,255,106,.18);
  border-radius: 42% 58% 48% 52% / 16% 22% 78% 84%;
  filter: drop-shadow(0 0 12px rgba(57,255,136,.18));
  opacity: .8;
}

.level-map::after {
  content: "PERTH LEVEL ROUTE";
  position: absolute;
  right: -26px;
  top: 48%;
  color: rgba(57,255,136,.08);
  font-family: var(--display-font);
  font-size: 44px;
  transform: rotate(90deg);
  transform-origin: center;
  pointer-events: none;
}

.map-node {
  position: absolute;
  z-index: 1;
  display: block;
  width: 164px;
  min-height: 146px;
  border: 0;
  padding: 0;
  text-align: center;
  background: transparent;
  transform: translate(-50%, -50%);
}

.map-node::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 118px;
  height: 2px;
  top: 38px;
  left: 92px;
  background: repeating-linear-gradient(90deg, rgba(57,255,136,.62) 0 8px, transparent 8px 14px);
  box-shadow: 0 0 10px rgba(57,255,136,.25);
  transform-origin: left center;
}

.map-node:nth-child(1) { left: 26%; top: 9%; }
.map-node:nth-child(1)::before { width: 142px; transform: rotate(32deg); }
.map-node:nth-child(2) { left: 72%; top: 23%; }
.map-node:nth-child(2)::before { left: -44px; width: 140px; transform: rotate(125deg); }
.map-node:nth-child(3) { left: 28%; top: 39%; }
.map-node:nth-child(3)::before { width: 150px; transform: rotate(26deg); }
.map-node:nth-child(4) { left: 73%; top: 54%; }
.map-node:nth-child(4)::before { left: -48px; width: 146px; transform: rotate(126deg); }
.map-node:nth-child(5) { left: 30%; top: 70%; }
.map-node:nth-child(5)::before { width: 144px; transform: rotate(28deg); }
.map-node:nth-child(6) { left: 72%; top: 86%; }
.map-node:nth-child(6)::before { display: none; }

.map-node:disabled,
.map-node.status-locked {
  pointer-events: auto;
}

.map-node small {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin: 0 auto 8px;
  border: 2px solid currentColor;
  border-radius: 50%;
  color: var(--green);
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.18), transparent 18px),
    radial-gradient(circle, rgba(57,255,136,.18), rgba(2,5,3,.96) 62%);
  font-family: var(--display-font);
  font-size: 18px;
  box-shadow: 0 0 0 6px rgba(57,255,136,.06), 0 0 24px rgba(57,255,136,.22);
}

.map-node strong {
  display: block;
  width: max-content;
  max-width: 164px;
  margin: 0 auto;
  border: 1px solid rgba(57,255,136,.26);
  border-radius: 4px;
  padding: 6px 8px 5px;
  background: rgba(2,5,3,.86);
  color: #fff;
  font-size: 14px;
  box-shadow: 0 0 16px rgba(0,0,0,.36);
}

.map-node strong i {
  display: block;
  margin-top: 4px;
  color: var(--green);
  font-size: 12px;
  font-style: normal;
}

.map-node span {
  display: block;
  max-width: 156px;
  margin: 5px auto 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.map-node b {
  display: inline-block;
  margin-top: 5px;
  border: 1px solid rgba(57,255,136,.32);
  padding: 3px 6px;
  color: var(--green);
  background: rgba(57,255,136,.06);
  font-size: 9px;
}

.status-new {
  box-shadow: 0 0 24px rgba(244, 255, 106, 0.14), inset 0 0 0 1px rgba(244,255,106,.08);
}

.status-new b,
.status-new small {
  color: var(--yellow);
}

.status-new small {
  animation: mapBeacon 1.8s ease-in-out infinite;
}

.status-unlocking {
  animation: signalDisturbance 0.22s steps(2) infinite;
}

.status-unlocking b,
.status-unlocking small {
  color: var(--red);
}

.status-completed b,
.status-completed small {
  color: var(--cyan);
}

.status-completed {
  filter: saturate(1.12);
}

.status-completed small {
  border-color: rgba(117,240,255,.75);
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.22), transparent 18px),
    radial-gradient(circle, rgba(117,240,255,.22), rgba(2,5,3,.96) 64%);
  box-shadow: 0 0 0 6px rgba(117,240,255,.06), 0 0 28px rgba(117,240,255,.22);
}

.status-completed::after {
  content: "CLEARED";
  position: absolute;
  left: 50%;
  top: -10px;
  transform: translateX(-50%);
  color: rgba(117,240,255,.24);
  font-family: var(--display-font);
  font-size: 10px;
}

.status-locked {
  opacity: 0.52;
  filter: grayscale(.85);
}

.status-locked b,
.status-locked small {
  color: var(--red);
}

.status-locked::before {
  background: repeating-linear-gradient(90deg, rgba(255,79,122,.35) 0 5px, transparent 5px 12px);
}

.status-locked small {
  background:
    repeating-linear-gradient(135deg, rgba(255,79,122,.12) 0 6px, rgba(0,0,0,.75) 6px 12px),
    #020503;
  box-shadow: 0 0 0 6px rgba(255,79,122,.04);
}

.status-dormant {
  opacity: .68;
  filter: grayscale(.4) contrast(1.08);
}

.status-dormant b,
.status-dormant small {
  color: rgba(231,255,239,.54);
}

.status-dormant small {
  border-style: dashed;
  background:
    radial-gradient(circle, rgba(231,255,239,.08), rgba(2,5,3,.96) 64%),
    repeating-linear-gradient(90deg, rgba(57,255,136,.08) 0 2px, transparent 2px 8px);
  box-shadow: 0 0 0 6px rgba(231,255,239,.03), 0 0 18px rgba(57,255,136,.08);
}

.adventure-party {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
  margin-top: 8px;
}

.adventure-party h2 {
  margin: 2px 0 0;
  color: #fff;
  font-size: 18px;
}

.party-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.party-npc {
  display: grid;
  justify-items: center;
  gap: 5px;
  min-height: 126px;
  border: 1px solid rgba(57, 255, 136, 0.24);
  border-radius: 6px;
  padding: 10px 6px;
  background: rgba(255, 255, 255, 0.025);
  color: #fff;
  text-align: center;
}

.npc-avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(57,255,136,.55);
  background:
    linear-gradient(135deg, rgba(57,255,136,.18), rgba(244,255,106,.08)),
    #020503;
  color: var(--green);
  font-family: var(--display-font);
  font-size: 11px;
  box-shadow: 0 0 18px rgba(57,255,136,.14);
}

.party-npc.is-hidden .npc-avatar,
.npc-avatar.is-silhouette {
  color: rgba(231,255,239,.3);
  background: repeating-linear-gradient(135deg, rgba(57,255,136,.12) 0 5px, rgba(0,0,0,.7) 5px 10px);
  filter: grayscale(1);
}

.party-npc small {
  color: var(--green);
  font-family: var(--display-font);
  font-size: 8px;
}

.party-npc strong {
  color: #fff;
  font-size: 10px;
}

.party-npc em,
.party-npc b {
  color: var(--muted);
  font-family: var(--display-font);
  font-size: 10px;
  font-style: normal;
}

.npc-profile,
.partner-cameo,
.terminal-feed p {
  border: 1px solid rgba(57, 255, 136, 0.24);
  border-radius: 6px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.025);
}

.npc-profile {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 12px;
  margin-top: 12px;
  background: rgba(2,5,3,.92);
  box-shadow: 0 0 30px rgba(57,255,136,.14);
}

.profile-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(57,255,136,.4);
  background: transparent;
  color: var(--green);
  font-family: var(--display-font);
}

.npc-profile-head {
  display: flex;
  gap: 12px;
  align-items: center;
}

.npc-profile h2 {
  margin: 0;
  color: #fff;
  font-size: 22px;
}

.npc-profile strong,
.npc-profile b,
.npc-profile dd {
  display: block;
  color: var(--green);
  font-family: var(--display-font);
  font-size: 12px;
}

.npc-profile dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 12px;
  margin: 0;
}

.npc-profile dt {
  color: var(--muted);
}

.npc-profile dd {
  margin: 0;
  text-align: right;
}

.partner-cameo {
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
  background: linear-gradient(90deg, rgba(57,255,136,.08), transparent);
}

.partner-cameo span,
.partner-cameo b {
  color: var(--green);
  font-family: var(--display-font);
  font-size: 11px;
}

.partner-cameo strong {
  color: #fff;
  font-size: 18px;
}

.partner-cameo p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.npc-discovery-toast {
  position: fixed;
  left: 50%;
  bottom: 92px;
  z-index: 30;
  width: min(300px, calc(100vw - 34px));
  transform: translateX(-50%);
  border: 1px solid rgba(57,255,136,.52);
  padding: 12px 14px;
  background: rgba(2,5,3,.94);
  color: var(--green);
  text-align: center;
  box-shadow: 0 0 28px rgba(57,255,136,.22);
  animation: npcDiscover 1.8s ease both;
}

.npc-discovery-toast span,
.npc-discovery-toast b {
  display: block;
  font-family: var(--display-font);
  font-size: 10px;
}

.npc-discovery-toast strong {
  display: block;
  color: #fff;
  font-size: 18px;
}

.world-links {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.world-links .btn {
  margin: 0;
}

.download-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
}

.download-row .btn {
  margin: 0;
  min-width: 0;
  padding-inline: 10px;
  font-size: 11px;
}

.signal-unlock {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 12px;
  border: 1px solid rgba(255,79,122,.44);
  border-radius: 8px;
  margin: 8px 0 16px;
  padding: 16px;
  background:
    repeating-linear-gradient(0deg, rgba(255,79,122,.08) 0 2px, transparent 2px 6px),
    rgba(2,5,3,.88);
  text-align: center;
  box-shadow: 0 0 26px rgba(255,79,122,.16);
  animation: signalDisturbance 0.26s steps(2) 8;
}

.signal-unlock h2 {
  margin: 0;
  color: var(--red);
  font-size: 40px;
}

.signal-unlock p,
.signal-unlock span {
  color: var(--green);
  font-family: var(--display-font);
  font-size: 12px;
}

.log-console {
  display: grid;
  gap: 14px;
}

.photo-capture {
  min-height: 220px;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(57, 255, 136, 0.48);
  border-radius: 8px;
  margin: 0;
  background:
    linear-gradient(135deg, rgba(57,255,136,.1), transparent),
    #050805;
  color: var(--green);
}

.photo-capture input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.count {
  color: var(--muted);
  float: right;
}

.consent {
  grid-template-columns: 22px 1fr;
  align-items: start;
  color: var(--text);
  line-height: 1.45;
}

.consent input {
  width: 18px;
  margin-top: 2px;
}

.needs-attention {
  color: var(--red);
}

.form-error {
  min-height: 18px;
  margin: 0;
  color: var(--red);
  font-size: 12px;
}

.success {
  color: var(--yellow);
}

.saved-message {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(57,255,136,.28);
  border-radius: 8px;
  padding: 16px;
  background: rgba(57,255,136,.06);
  text-align: center;
}

.saved-message h2 {
  margin: 0;
  color: var(--green);
  font-size: 22px;
}

.saved-message p {
  margin: 0;
  color: #fff;
}

.saved-message .btn {
  margin-top: 4px;
}

.voting-console {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(57,255,136,.32);
  border-radius: 8px;
  padding: 14px;
  background:
    repeating-linear-gradient(90deg, rgba(57,255,136,.08) 0 5px, transparent 5px 11px),
    rgba(0,0,0,.42);
  text-align: center;
}

.voting-console strong,
.your-votes span,
.your-votes em {
  font-family: var(--display-font);
}

.voting-console strong {
  color: var(--yellow);
  font-size: 16px;
}

.voting-console p {
  margin: 0;
  color: rgba(231,255,239,.82);
}

.voting-console.status-finalized {
  border-color: rgba(244,255,106,.62);
  box-shadow: 0 0 24px rgba(244,255,106,.12);
}

.your-votes {
  display: grid;
  justify-items: center;
  gap: 4px;
}

.your-votes span,
.your-votes em {
  color: var(--green);
  font-size: 10px;
}

.your-votes b {
  display: flex;
  gap: 8px;
  color: rgba(57,255,136,.28);
  font-size: 24px;
}

.your-votes i {
  font-style: normal;
}

.your-votes i.is-cast {
  color: var(--yellow);
  text-shadow: 0 0 14px rgba(244,255,106,.45);
}

.hall-feedback {
  border: 1px solid rgba(244,255,106,.44);
  border-radius: 6px;
  padding: 10px;
  background: rgba(244,255,106,.08);
  color: var(--yellow);
  font-family: var(--display-font);
  font-size: 12px;
}

.hall-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
}

.hall-card {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 14px;
  border: 1px solid rgba(57, 255, 136, 0.36);
  border-radius: 8px;
  padding: 12px;
  background:
    linear-gradient(90deg, rgba(57,255,136,.08), transparent),
    var(--panel);
}

.vote-btn.is-voted {
  border-color: rgba(244,255,106,.78);
  color: var(--yellow);
  box-shadow: 0 0 18px rgba(244,255,106,.14);
}

.vote-btn.is-self {
  border-color: rgba(255,255,255,.18);
  color: rgba(231,255,239,.62);
}

.avatar-art {
  position: relative;
  overflow: hidden;
  min-height: 154px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #050805 center / cover no-repeat;
  color: var(--muted);
}

.avatar-art img {
  width: 100%;
  height: 100%;
  min-height: 154px;
  object-fit: cover;
  image-rendering: auto;
}

.avatar-art span {
  position: absolute;
  left: 8px;
  bottom: 8px;
  color: #001807;
  background: var(--green);
  padding: 3px 6px;
  font-size: 10px;
}

.hall-card h3 {
  margin-bottom: 8px;
  color: #fff;
}

.hall-card p {
  margin-bottom: 10px;
  font-size: 13px;
  line-height: 1.45;
}

.hall-card em {
  display: block;
  margin-bottom: 10px;
  color: var(--yellow);
  font-size: 11px;
  font-style: normal;
}

.preview-card {
  grid-template-columns: 96px 1fr;
  margin-bottom: 4px;
}

.preview-card .avatar-art {
  min-height: 132px;
}

.vote-meter {
  position: relative;
  overflow: hidden;
  height: 30px;
  border: 1px solid var(--soft-line);
  border-radius: 6px;
}

.vote-meter span {
  position: relative;
  z-index: 1;
  display: block;
  padding: 7px 10px;
  color: var(--yellow);
  font-size: 12px;
}

.vote-meter i {
  position: absolute;
  inset: 0 auto 0 0;
  background: rgba(244, 255, 106, 0.16);
}

.hall-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 12px 0;
}

.hall-tabs button {
  min-height: 38px;
  border: 1px solid rgba(57,255,136,.28);
  border-radius: 6px;
  background: rgba(57,255,136,.07);
  color: var(--muted);
  font-family: var(--display-font);
  font-size: 12px;
}

.hall-tabs button.active {
  border-color: rgba(244,255,106,.58);
  color: var(--yellow);
  background: rgba(244,255,106,.1);
}

.vote-btn {
  min-width: 102px;
  min-height: 36px;
  border: 1px solid rgba(244, 255, 106, 0.7);
  border-radius: 6px;
  background: transparent;
  color: var(--yellow);
}

.vote-btn:disabled {
  opacity: 0.5;
}

.quest-panel,
.locked-panel,
.mission-panel,
.passport-panel {
  margin-top: 14svh;
}

.runner-active {
  touch-action: none;
  overscroll-behavior: none;
  padding-bottom: 28px;
}

.runner-screen {
  position: relative;
  z-index: 1;
  min-height: calc(100svh - 56px);
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 10px;
  padding-top: 12px;
}

.runner-hud {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  color: var(--green);
  font-family: var(--display-font);
}

.runner-hud strong {
  color: var(--yellow);
}

.runner-canvas {
  width: 100%;
  max-height: 62svh;
  align-self: center;
  border: 1px solid rgba(57,255,136,.42);
  border-radius: 8px;
  background: #020503;
  image-rendering: pixelated;
  touch-action: none;
}

.runner-tip {
  margin: 0;
  color: rgba(57,255,136,.68);
  text-align: center;
  font-family: var(--display-font);
  font-size: 12px;
}

.runner-start h1 {
  color: var(--green);
}

.runner-start h2,
.runner-result h2 {
  color: var(--yellow);
}

.run-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}

.run-stats dt,
.run-stats dd {
  margin: 0;
  border: 1px solid rgba(57,255,136,.24);
  padding: 10px;
  background: rgba(2,5,3,.58);
}

.run-stats dt {
  color: var(--muted);
}

.run-stats dd {
  color: var(--green);
  font-size: 22px;
  text-align: right;
}

.quest-text {
  color: #fff;
  font-size: 24px;
  line-height: 1.35;
}

.xp {
  color: var(--yellow);
}

.terminal-feed {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.perth-terminal h1 {
  margin-bottom: 2px;
  color: var(--green);
  font-size: 46px;
}

.perth-terminal h2 {
  color: #fff;
  font-size: 22px;
}

.perth-terminal > p:not(.eyebrow) {
  color: var(--muted);
  font-family: var(--display-font);
  font-size: 12px;
}

.perth-terminal label small {
  display: block;
  margin: 8px 0 10px;
  color: rgba(231,255,239,.66);
  font-family: var(--display-font);
  font-size: 12px;
  line-height: 1.5;
}

.bug-confirm {
  display: grid;
  gap: 5px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(57,255,136,.38);
  background: rgba(57,255,136,.08);
  color: var(--green);
  text-transform: uppercase;
}

.bug-confirm span {
  color: rgba(231,255,239,.76);
  font-family: var(--display-font);
  font-size: 12px;
}

.bug-feed {
  gap: 12px;
}

.bug-report {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(57,255,136,.26);
  background:
    linear-gradient(90deg, rgba(57,255,136,.08), transparent 45%),
    rgba(0, 0, 0, .5);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}

.bug-report small,
.bug-report dt {
  color: var(--green);
  font-family: var(--display-font);
  font-size: 11px;
  letter-spacing: 0;
}

.bug-report p {
  margin: 6px 0 0;
  color: #fff;
  font-size: 20px;
  line-height: 1.35;
}

.bug-report dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  margin: 0;
  padding: 9px 0;
  border-top: 1px dashed rgba(57,255,136,.24);
  border-bottom: 1px dashed rgba(57,255,136,.24);
}

.bug-report dd {
  margin: 0;
  color: var(--yellow);
  font-family: var(--display-font);
  font-size: 11px;
  text-align: right;
}

.bug-react {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(244,255,106,.55);
  background: rgba(244,255,106,.08);
  color: var(--yellow);
  font-family: var(--display-font);
  font-size: 13px;
  cursor: pointer;
}

.bug-report.is-liked .bug-react,
.bug-react:disabled {
  border-color: rgba(57,255,136,.45);
  background: rgba(57,255,136,.12);
  color: var(--green);
  cursor: default;
}

.final-locked,
.final-unlocking,
.final-complete,
.final-mission-panel {
  overflow: hidden;
}

.final-locked::before,
.final-mission-panel::before,
.final-complete::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px dashed rgba(57,255,136,.22);
  pointer-events: none;
}

.final-unlocking {
  display: grid;
  justify-items: center;
  text-align: center;
  animation: signalDisturbance .2s steps(2) 12;
}

.final-unlocking h1 {
  color: var(--red);
  font-size: 64px;
  animation: finalResolve 2.8s steps(3) both;
}

.final-unlocking h2,
.final-unlocking b {
  color: var(--green);
  opacity: 0;
  animation: endingFadeIn .6s ease 1.8s both;
}

.final-unlocking b {
  color: var(--yellow);
  font-family: var(--display-font);
  animation-delay: 2.5s;
}

.final-mission-panel {
  display: grid;
  gap: 16px;
}

.final-mission-panel h1 {
  color: var(--green);
  margin-bottom: 0;
}

.final-mission-panel h2 {
  color: #fff;
}

.save-point-copy p {
  opacity: 0;
  animation: endingFadeIn .7s ease both;
}

.save-point-copy p:nth-child(2) {
  animation-delay: 1.2s;
}

.final-mission-panel textarea {
  min-height: 126px;
}

.save-command {
  justify-self: center;
  color: rgba(57,255,136,.62);
  font-family: var(--display-font);
  font-size: 11px;
}

.final-mission-panel.is-saving > *:not(.liu-guide) {
  opacity: 0.26;
}

.final-mission-panel.is-saving::after {
  content: "SAVING...\A ██████████";
  white-space: pre;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(2,5,3,.82);
  color: var(--green);
  font-family: var(--display-font);
  font-size: 18px;
  line-height: 1.8;
  text-align: center;
}

.final-complete {
  display: grid;
  justify-items: center;
  text-align: center;
}

.final-complete h1 {
  color: var(--green);
  font-size: 34px;
}

.final-complete strong {
  color: var(--yellow);
  font-family: var(--display-font);
  font-size: 26px;
}

.final-complete blockquote {
  width: 100%;
  border: 1px solid rgba(57,255,136,.26);
  margin: 8px 0;
  padding: 16px;
  color: #fff;
  background: rgba(2,5,3,.64);
}

.final-complete .btn {
  opacity: 0;
  animation: endingFadeIn .7s ease 2.6s both;
}

.secret-reveal {
  min-height: 66svh;
  align-content: center;
  gap: 18px;
  background:
    radial-gradient(circle at 50% 22%, rgba(255,79,122,.18), transparent 28%),
    repeating-linear-gradient(0deg, rgba(57,255,136,.07) 0 2px, transparent 2px 7px),
    rgba(2,5,3,.92);
}

.secret-reveal::after,
.transmission-panel::after,
.secret-final-reveal::after,
.secret-item-drop::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(transparent 50%, rgba(0,0,0,.18) 50%);
  background-size: 100% 4px;
  mix-blend-mode: screen;
  opacity: .32;
}

.secret-reveal p {
  color: var(--red);
  font-family: var(--display-font);
  font-size: 12px;
}

.secret-beats,
.save-sequence,
.drop-sequence {
  display: grid;
  gap: 9px;
  width: min(100%, 310px);
  color: var(--green);
  font-family: var(--display-font);
  font-size: 11px;
  text-align: center;
}

.secret-beats span,
.save-sequence span,
.drop-sequence span {
  opacity: 0;
  animation: secretBeat .55s steps(2) calc(.48s * var(--delay)) both;
}

.transmission-panel {
  min-height: 72svh;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 15px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 22%, rgba(57,255,136,.15), transparent 30%),
    linear-gradient(180deg, rgba(57,255,136,.04), rgba(255,79,122,.05)),
    rgba(2,5,3,.9);
  touch-action: pan-y;
}

.transmission-panel.is-paused::before {
  content: "PAUSED";
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  border: 1px solid rgba(57,255,136,.42);
  padding: 5px 8px;
  background: rgba(2,5,3,.72);
  color: var(--green);
  font-family: var(--display-font);
  font-size: 10px;
}

.transmission-panel.is-paused *,
.transmission-panel.is-paused::after {
  animation-play-state: paused !important;
}

.transmission-panel .liu-guide {
  margin-bottom: -4px;
}

.transmission-panel h1 {
  color: var(--green);
  font-size: 34px;
}

.transmission-copy {
  width: min(100%, 330px);
  min-height: 188px;
  display: grid;
  align-content: center;
  gap: 10px;
  border: 1px solid rgba(57,255,136,.34);
  border-radius: 8px;
  padding: 20px 16px;
  background:
    linear-gradient(135deg, rgba(57,255,136,.08), transparent 52%),
    rgba(0,0,0,.46);
  box-shadow: 0 0 28px rgba(57,255,136,.12), inset 0 0 0 1px rgba(255,255,255,.04);
}

.transmission-copy p {
  margin: 0;
  color: #fff;
  font-size: 18px;
  line-height: 1.62;
}

.transmission-count {
  color: rgba(231,255,239,.62);
  font-family: var(--display-font);
  font-size: 10px;
}

.transmission-panel > small {
  color: rgba(231,255,239,.48);
  font-family: var(--display-font);
  font-size: 10px;
}

.secret-final-reveal {
  min-height: 68svh;
  align-content: center;
  gap: 14px;
  background:
    radial-gradient(circle at 50% 28%, rgba(244,255,106,.16), transparent 30%),
    rgba(2,5,3,.9);
}

.secret-final-reveal span {
  color: rgba(231,255,239,.68);
  font-family: var(--display-font);
  font-size: 10px;
}

.save-sequence {
  margin: 4px 0 8px;
}

.secret-item-drop {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 10px;
  width: min(100%, 330px);
  margin-top: 14px;
  border: 1px solid rgba(244,255,106,.42);
  border-radius: 8px;
  padding: 18px 14px;
  background:
    radial-gradient(circle at 50% 30%, rgba(244,255,106,.18), transparent 34%),
    repeating-linear-gradient(135deg, rgba(57,255,136,.07) 0 6px, transparent 6px 12px),
    rgba(2,5,3,.88);
  box-shadow: 0 0 34px rgba(244,255,106,.12), inset 0 0 0 1px rgba(255,255,255,.04);
}

.secret-item-drop p,
.secret-item-drop b,
.secret-item-drop span {
  margin: 0;
  color: var(--green);
  font-family: var(--display-font);
  font-size: 10px;
}

.secret-item-drop h2 {
  margin: 0;
  color: var(--yellow);
  font-size: 22px;
  animation: itemGlow 1.8s ease-in-out infinite;
}

.secret-item-drop strong {
  font-size: 18px;
}

.secret-item-drop em {
  color: rgba(231,255,239,.68);
  font-size: 12px;
  font-style: normal;
}

.secret-item-placeholder {
  width: 116px;
  height: 116px;
  border: 2px solid rgba(244,255,106,.7);
  border-radius: 10px;
  background:
    linear-gradient(45deg, transparent 38%, rgba(244,255,106,.25) 38% 45%, transparent 45%),
    radial-gradient(circle at 50% 34%, rgba(57,255,136,.46) 0 18px, transparent 19px),
    radial-gradient(ellipse at 50% 72%, rgba(57,255,136,.34) 0 34px, transparent 35px),
    rgba(0,0,0,.72);
  box-shadow: 0 0 28px rgba(244,255,106,.34), inset 0 0 18px rgba(57,255,136,.18);
  animation: itemDrop 1.6s cubic-bezier(.16,.8,.24,1) both;
}

.secret-item-media {
  position: relative;
  overflow: hidden;
  width: 150px;
  aspect-ratio: 1;
  border: 2px solid rgba(244,255,106,.72);
  border-radius: 10px;
  background: #020503;
  box-shadow: 0 0 28px rgba(244,255,106,.34), inset 0 0 18px rgba(57,255,136,.18);
  animation: itemDrop 1.6s cubic-bezier(.16,.8,.24,1) both;
}

.secret-item-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(transparent 50%, rgba(0,0,0,.18) 50%),
    radial-gradient(circle at 50% 50%, transparent 52%, rgba(57,255,136,.18));
  background-size: 100% 4px, 100% 100%;
  mix-blend-mode: screen;
}

.secret-item-media video,
.secret-item-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(1.18) contrast(1.12);
}

.inventory-item .secret-item-media {
  width: 76px;
  justify-self: start;
  margin: 2px 0 4px;
  animation: none;
}

.secret-item-detail {
  position: relative;
  overflow: hidden;
  display: grid;
  justify-items: center;
  gap: 12px;
  border: 1px solid rgba(244,255,106,.5);
  border-radius: 8px;
  padding: 18px 14px;
  background:
    radial-gradient(circle at 50% 26%, rgba(244,255,106,.18), transparent 34%),
    repeating-linear-gradient(0deg, rgba(57,255,136,.045) 0 2px, transparent 2px 7px),
    rgba(2,5,3,.84);
  text-align: center;
  box-shadow: 0 0 34px rgba(244,255,106,.13), inset 0 0 0 1px rgba(255,255,255,.035);
}

.secret-item-detail::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(transparent 50%, rgba(0,0,0,.18) 50%);
  background-size: 100% 4px;
  opacity: .32;
}

.secret-item-detail h2 {
  margin: 0;
  color: var(--yellow);
  font-size: 26px;
}

.secret-item-detail .secret-item-media {
  width: min(68vw, 220px);
  animation: itemDrop .8s cubic-bezier(.16,.8,.24,1) both;
}

.secret-item-detail dl {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 12px;
  border-top: 1px dashed rgba(57,255,136,.24);
  border-bottom: 1px dashed rgba(57,255,136,.24);
  margin: 4px 0;
  padding: 12px 0;
}

.secret-item-detail dt,
.secret-item-detail dd {
  margin: 0;
  font-family: var(--display-font);
  font-size: 10px;
}

.secret-item-detail dt {
  color: rgba(231,255,239,.58);
}

.secret-item-detail dd {
  color: var(--green);
  text-align: right;
}

.secret-item-detail p {
  margin: 0;
  color: rgba(231,255,239,.7);
  font-size: 12px;
}

.legendary-detail {
  border-color: rgba(244,255,106,.72);
  box-shadow: 0 0 38px rgba(244,255,106,.18), inset 0 0 24px rgba(57,255,136,.1);
}

.legendary-shell {
  display: grid;
  place-items: center;
  gap: 8px;
  width: min(100%, 260px);
  min-height: 220px;
  border: 2px solid rgba(244,255,106,.82);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 30%, rgba(244,255,106,.26), transparent 34%),
    repeating-linear-gradient(90deg, rgba(57,255,136,.1) 0 6px, transparent 6px 12px),
    rgba(2,5,3,.88);
  color: var(--yellow);
  font-family: var(--display-font);
  text-align: center;
}

.legendary-shell span {
  font-size: 16px;
}

.legendary-shell strong {
  color: #fff;
  font-size: 24px;
}

.legendary-shell b {
  color: var(--green);
  font-size: 14px;
}

.secret-records {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.secret-records > .eyebrow {
  grid-column: 1 / -1;
  margin: 0 0 2px;
}

.secret-records article {
  border: 1px solid rgba(57,255,136,.24);
  border-radius: 6px;
  padding: 10px;
  background: rgba(2,5,3,.56);
}

.secret-records span {
  display: block;
  color: rgba(231,255,239,.6);
  font-family: var(--display-font);
  font-size: 9px;
}

.secret-records strong {
  display: block;
  margin-top: 5px;
  color: var(--green);
  font-family: var(--display-font);
  font-size: 11px;
}

.fragment-panel,
.reconstruction-panel,
.reconstruction-victory {
  display: grid;
  justify-items: center;
  gap: 16px;
  text-align: center;
  overflow: hidden;
}

.fragment-panel h1,
.reconstruction-panel h1,
.reconstruction-victory h1 {
  margin: 0;
  color: var(--green);
}

.fragment-panel h2,
.reconstruction-victory h2 {
  color: var(--yellow);
  font-size: 18px;
}

.fragment-slots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  width: 100%;
}

.fragment-slots span {
  display: grid;
  place-items: center;
  min-height: 72px;
  border: 1px solid rgba(57,255,136,.26);
  border-radius: 6px;
  padding: 8px 4px;
  background: rgba(0,0,0,.34);
}

.fragment-slots span.is-owned {
  border-color: rgba(244,255,106,.62);
  background:
    radial-gradient(circle at 50% 36%, rgba(244,255,106,.16), transparent 42%),
    rgba(0,0,0,.4);
  box-shadow: 0 0 18px rgba(244,255,106,.12);
}

.fragment-slots b {
  color: var(--green);
  font-size: 20px;
}

.fragment-slots .is-owned b {
  color: var(--yellow);
  animation: mapBeacon 1.8s ease-in-out infinite;
}

.fragment-slots small {
  color: rgba(231,255,239,.68);
  font-family: var(--display-font);
  font-size: 8px;
  line-height: 1.35;
}

.assembly-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  width: min(100%, 312px);
  border: 2px solid rgba(57,255,136,.5);
  border-radius: 10px;
  padding: 6px;
  background:
    radial-gradient(circle at 50% 45%, rgba(57,255,136,.12), transparent 62%),
    rgba(0,0,0,.52);
  box-shadow: inset 0 0 24px rgba(57,255,136,.08), 0 0 28px rgba(57,255,136,.12);
}

.assembly-slot {
  position: relative;
  aspect-ratio: 1;
  min-height: 0;
  border: 1px dashed rgba(57,255,136,.42);
  border-radius: 4px;
  padding: 8px 5px;
  background:
    repeating-linear-gradient(90deg, rgba(57,255,136,.08) 0 4px, transparent 4px 8px),
    repeating-linear-gradient(0deg, rgba(57,255,136,.05) 0 4px, transparent 4px 8px),
    rgba(0,0,0,.42);
  color: var(--green);
  font-family: var(--display-font);
  text-align: center;
  overflow: hidden;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.assembly-slot:active,
.fragment-piece:active {
  transform: translateY(1px) scale(.98);
}

.assembly-slot b,
.assembly-slot span,
.assembly-slot small {
  display: block;
}

.assembly-slot b {
  margin-top: 16%;
  color: rgba(57,255,136,.75);
  font-size: 24px;
  line-height: 1;
}

.assembly-slot span {
  margin-top: 6px;
  color: #fff;
  font-size: 11px;
}

.assembly-slot small {
  margin: 7px auto 0;
  max-width: 9em;
  color: rgba(231,255,239,.68);
  font-size: 8px;
  line-height: 1.35;
}

.assembly-slot.is-placed {
  border-style: solid;
  border-color: rgba(244,255,106,.74);
  color: var(--yellow);
  padding: 0;
  box-shadow: 0 0 24px rgba(244,255,106,.16), inset 0 0 16px rgba(57,255,136,.08);
}

.assembly-slot.is-placed span {
  position: absolute;
  left: 6px;
  bottom: 18px;
  z-index: 2;
  margin: 0;
  color: var(--yellow);
  text-shadow: 0 1px 0 #000, 0 0 8px rgba(0,0,0,.8);
}

.assembly-slot.is-placed small {
  position: absolute;
  left: 6px;
  bottom: 6px;
  z-index: 2;
  margin: 0;
  color: rgba(255,255,255,.82);
  text-shadow: 0 1px 0 #000;
}

.assembly-slot.is-mismatch {
  border-color: rgba(255,77,77,.88);
  animation: signalMismatch .24s steps(2, end) 3;
}

.fragment-bank {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: min(100%, 350px);
}

.fragment-piece {
  display: grid;
  grid-template-columns: 58px 1fr;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(57,255,136,.38);
  border-radius: 6px;
  padding: 7px;
  background:
    linear-gradient(90deg, rgba(57,255,136,.12), transparent 58%),
    rgba(2,5,3,.78);
  color: var(--green);
  font-family: var(--display-font);
  text-align: left;
}

.fragment-piece b,
.fragment-piece span {
  display: block;
  grid-column: 2;
}

.fragment-piece b {
  color: #fff;
  font-size: 9px;
  line-height: 1.25;
}

.fragment-piece span {
  margin-top: 6px;
  color: rgba(244,255,106,.82);
  font-size: 9px;
}

.fragment-piece.is-selected {
  border-color: rgba(244,255,106,.86);
  box-shadow: 0 0 22px rgba(244,255,106,.22), inset 0 0 14px rgba(244,255,106,.08);
}

.fragment-piece.is-used {
  opacity: .55;
}

.liu-puzzle-tile {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  background:
    var(--puzzle-src);
  background-size: 200% 200%;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  overflow: hidden;
  filter: saturate(1.18) contrast(1.16) drop-shadow(0 0 8px rgba(57,255,136,.22));
}

.liu-puzzle-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle, rgba(244,255,106,.18) 0 1.5px, transparent 1.5px 6px),
    repeating-linear-gradient(0deg, rgba(57,255,136,.11) 0 1px, transparent 1px 5px),
    rgba(0,0,0,.52);
  mix-blend-mode: screen;
  pointer-events: none;
}

.tile-top-left { background-position: 0 0; }
.tile-top-right { background-position: 100% 0; }
.tile-bottom-left { background-position: 0 100%; }
.tile-bottom-right { background-position: 100% 100%; }

.assembly-slot .liu-puzzle-tile {
  height: 100%;
}

.fragment-piece .liu-puzzle-tile {
  width: 58px;
  border: 1px solid rgba(57,255,136,.32);
  border-radius: 3px;
  background-color: rgba(0,0,0,.55);
}

.liu-puzzle-tile.is-ghost {
  opacity: .28;
  filter: grayscale(1) brightness(.85);
}

.liu-puzzle-tile.is-ghost::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px dashed rgba(57,255,136,.45);
  box-shadow: inset 0 0 18px rgba(57,255,136,.14);
}

.signal-feedback {
  width: min(100%, 320px);
  border: 1px solid rgba(57,255,136,.28);
  border-radius: 6px;
  padding: 10px;
  background: rgba(0,0,0,.38);
  color: var(--yellow);
  font-family: var(--display-font);
  font-size: 10px;
}

.signal-feedback span {
  display: block;
  margin-top: 5px;
  color: rgba(231,255,239,.72);
  font-size: 10px;
  line-height: 1.45;
}

.signal-feedback.is-error {
  border-color: rgba(255,77,77,.55);
  color: #ff5f5f;
}

.reconstruction-victory {
  min-height: 70svh;
  align-content: center;
  background:
    radial-gradient(circle at 50% 34%, rgba(244,255,106,.16), transparent 34%),
    rgba(2,5,3,.86);
}

.completed-puzzle {
  width: min(100%, 300px);
  gap: 0;
  padding: 8px;
  border-color: rgba(244,255,106,.78);
  box-shadow:
    0 0 34px rgba(244,255,106,.22),
    inset 0 0 22px rgba(57,255,136,.12);
  animation: puzzleVictoryLock .9s steps(3, end) both;
}

.completed-puzzle .assembly-slot {
  border-style: solid;
  border-color: rgba(57,255,136,.28);
  border-radius: 0;
}

.completed-puzzle .assembly-slot:nth-child(1) { border-top-left-radius: 4px; }
.completed-puzzle .assembly-slot:nth-child(2) { border-top-right-radius: 4px; }
.completed-puzzle .assembly-slot:nth-child(3) { border-bottom-left-radius: 4px; }
.completed-puzzle .assembly-slot:nth-child(4) { border-bottom-right-radius: 4px; }

.victory-readout {
  display: grid;
  gap: 6px;
  width: min(100%, 320px);
  border: 1px solid rgba(57,255,136,.24);
  border-radius: 6px;
  padding: 12px;
  background: rgba(0,0,0,.34);
}

.victory-readout span,
.victory-readout strong {
  font-family: var(--display-font);
}

.victory-readout span {
  color: var(--green);
  font-size: 10px;
}

.victory-readout strong {
  color: var(--yellow);
  font-size: 18px;
}

.victory-readout p {
  margin: 0;
  color: rgba(231,255,239,.76);
}

.pixel-fireworks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.pixel-fireworks i {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--green);
  box-shadow:
    18px 10px 0 var(--yellow),
    -18px 14px 0 var(--cyan),
    8px -18px 0 var(--red),
    -12px -12px 0 var(--green);
  animation: pixelBurst 1.5s ease-in-out infinite;
}

.pixel-fireworks i:nth-child(1) { left: 18%; top: 24%; }
.pixel-fireworks i:nth-child(2) { right: 18%; top: 30%; animation-delay: .25s; }
.pixel-fireworks i:nth-child(3) { left: 22%; bottom: 24%; animation-delay: .5s; }
.pixel-fireworks i:nth-child(4) { right: 22%; bottom: 22%; animation-delay: .75s; }

.adventure-signature {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(244,255,106,.28);
  border-radius: 8px;
  padding: 14px;
  background: rgba(244,255,106,.045);
}

.adventure-signature h2 {
  margin: 0;
  color: var(--yellow);
  font-size: 22px;
}

.fragment-toast {
  top: 50%;
  bottom: auto;
  z-index: 60;
  width: min(340px, calc(100vw - 28px));
  transform: translate(-50%, -50%);
  border-color: rgba(244,255,106,.55);
  padding: 18px 16px;
  background:
    repeating-linear-gradient(0deg, rgba(57,255,136,.08) 0 1px, transparent 1px 5px),
    rgba(2,5,3,.96);
  box-shadow: 0 0 42px rgba(244,255,106,.22), inset 0 0 22px rgba(57,255,136,.08);
  animation: fragmentAcquire 2.45s ease both;
}

.fragment-toast em {
  display: block;
  margin: 6px 0;
  color: #fff;
  font-family: var(--display-font);
  font-size: 18px;
  font-style: normal;
  text-shadow: 0 0 14px rgba(57,255,136,.38);
}

.fragment-toast strong {
  color: var(--yellow);
  font-size: 20px;
}

.fragment-toast::after {
  content: "◆";
  position: absolute;
  right: 18px;
  top: 18px;
  color: var(--yellow);
  font-size: 18px;
  animation: fragmentFly 1.25s ease-in both;
}

.fragment-mini-progress {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin-top: 12px;
}

.fragment-mini-progress i {
  display: block;
  height: 8px;
  border: 1px solid rgba(57,255,136,.32);
  background: rgba(0,0,0,.42);
}

.fragment-mini-progress i.is-owned {
  border-color: rgba(244,255,106,.68);
  background: var(--yellow);
  box-shadow: 0 0 12px rgba(244,255,106,.28);
}

.fragment-mini-progress i.is-active {
  animation: fragmentPulse .5s steps(2, end) 4;
}

.final-message-board {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
  border: 1px solid rgba(57,255,136,.24);
  border-radius: 8px;
  margin-top: 16px;
  padding: 16px;
  background:
    linear-gradient(180deg, rgba(57,255,136,.07), transparent 36%),
    rgba(2,5,3,.68);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}

.final-message-board.is-compact {
  margin-top: 12px;
}

.final-message-board h2 {
  margin: 4px 0 2px;
  color: #fff;
  font-size: 24px;
}

.final-message-board > div > span {
  color: rgba(231,255,239,.62);
  font-size: 12px;
}

.final-message-list {
  display: grid;
  gap: 10px;
}

.final-message-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 10px;
  border: 1px solid rgba(57,255,136,.26);
  border-radius: 8px;
  padding: 14px;
  background:
    repeating-linear-gradient(90deg, rgba(57,255,136,.045) 0 2px, transparent 2px 9px),
    rgba(0,0,0,.36);
}

.final-message-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--green);
  opacity: .5;
}

.final-message-card.is-mine {
  border-color: rgba(244,255,106,.42);
  background:
    linear-gradient(135deg, rgba(244,255,106,.09), transparent 46%),
    rgba(0,0,0,.38);
}

.final-message-card.is-mine::before {
  background: var(--yellow);
}

.final-message-card small {
  color: var(--green);
  font-family: var(--display-font);
  font-size: 10px;
}

.final-message-card.is-mine small {
  color: var(--yellow);
}

.final-message-card p {
  margin: 0;
  color: #fff;
  font-size: 16px;
  line-height: 1.55;
}

.final-like {
  justify-self: start;
  min-height: 34px;
  padding: 7px 10px;
}

.cinematic-end {
  min-height: 66svh;
  display: grid;
  align-content: center;
}

.save-lines {
  display: grid;
  gap: 8px;
  margin-top: 18px;
  color: var(--muted);
  font-size: 12px;
}

.credits {
  position: relative;
  z-index: 1;
  min-height: calc(100svh - 120px);
  display: grid;
  align-content: center;
  gap: 18px;
}

.credits-roll {
  max-height: 360px;
  overflow: hidden;
  text-align: center;
  mask-image: linear-gradient(transparent, #000 15%, #000 86%, transparent);
}

.credits-roll p {
  margin-bottom: 8px;
  color: var(--muted);
}

.credits-roll h2 {
  color: var(--green);
  margin-bottom: 34px;
}

.credits-roll span {
  display: block;
  margin: -24px 0 34px;
  color: var(--muted);
  font-size: 12px;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.stats-grid article {
  border: 1px solid rgba(57, 255, 136, 0.28);
  border-radius: 6px;
  padding: 12px;
}

.stats-grid strong {
  display: block;
  color: var(--green);
  font-size: 26px;
}

.stats-grid span {
  color: var(--muted);
  font-size: 11px;
}

.ending-screen {
  width: 100%;
  max-width: none;
  min-height: 100svh;
  padding: 0;
  background: #000;
}

.ending-screen .scan-corner {
  display: none;
}

.ending-sequence,
.ending-frame,
.ending-act {
  position: relative;
  min-height: 100svh;
}

.ending-sequence {
  overflow: hidden;
  background:
    linear-gradient(rgba(57, 255, 136, 0.04) 50%, rgba(0, 0, 0, 0.24) 50%) 0 0 / 100% 4px,
    radial-gradient(circle at 50% 46%, rgba(57,255,136,.11), transparent 28rem),
    #000;
}

.ending-sequence::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(57,255,136,.08);
  mix-blend-mode: screen;
  opacity: 0;
  animation: crtFlicker 2.4s steps(1) infinite;
}

.ending-sequence.is-paused *,
.ending-sequence.is-paused::before {
  animation-play-state: paused !important;
}

.ending-paused,
.ending-control-hint {
  position: fixed;
  z-index: 6;
  pointer-events: none;
  font-family: var(--display-font);
  text-shadow: 0 0 10px rgba(57,255,136,.28);
}

.ending-paused {
  top: max(14px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid rgba(57,255,136,.34);
  border-radius: 4px;
  padding: 5px 9px;
  background: rgba(2,5,3,.72);
  color: rgba(57,255,136,.82);
  font-size: 11px;
  opacity: 0;
}

.ending-sequence.is-paused .ending-paused {
  opacity: 1;
}

.ending-control-hint {
  left: 18px;
  bottom: max(18px, env(safe-area-inset-bottom));
  max-width: 220px;
  color: rgba(57,255,136,.52);
  font-size: 10px;
  line-height: 1.45;
  opacity: 0.65;
  transition: opacity .3s ease;
}

.ending-sequence.has-control .ending-control-hint {
  opacity: 0.32;
}

.ending-act {
  display: grid;
  place-items: center;
  padding: 28px;
  text-align: center;
  animation: endingFadeIn 0.9s ease both;
}

.ending-act h1,
.ending-act h2,
.ending-act p,
.ending-act b,
.ending-act span {
  position: relative;
  z-index: 1;
}

.ending-act h1 {
  color: var(--green);
  font-size: 42px;
}

.ending-act h2 {
  color: #fff;
}

.ending-act p {
  max-width: 330px;
  color: #eafff1;
  line-height: 1.65;
}

.ending-quiet {
  align-content: center;
  gap: 26px;
  background: #000;
}

.ending-quiet .quiet-dots {
  color: rgba(57,255,136,.7);
  font-size: 24px;
  opacity: 0;
  animation: endingFadeIn 0.5s ease 1.2s both, fadeOut 0.5s ease 3.1s both;
}

.ending-quiet h1 {
  opacity: 0;
  animation: endingFadeIn 0.7s ease 4s both;
}

.ending-save {
  align-content: center;
  gap: 22px;
}

.ending-save h1 {
  font-size: 30px;
  opacity: 0;
  animation: endingFadeIn 0.7s ease 1.4s both;
}

.ending-save p,
.ending-save b {
  color: var(--green);
  font-family: var(--display-font);
}

.ending-save p {
  opacity: 0;
  animation: endingFadeIn 0.6s ease 0.4s both;
}

.save-meter {
  width: min(72vw, 520px);
  height: 18px;
  border: 1px solid var(--green);
  padding: 3px;
  background: rgba(2,5,3,.9);
  opacity: 0;
  animation: endingFadeIn 0.5s ease 2.4s both;
}

.save-meter i {
  display: block;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(90deg, var(--green) 0 28px, transparent 28px 36px);
  transform-origin: left;
  animation: saveFill 4.9s steps(10) 2.5s both;
}

.ending-save b {
  opacity: 0;
  animation: endingFadeIn 0.6s ease 6.9s both;
}

.ending-character {
  align-content: center;
  gap: 26px;
}

.ending-liu {
  margin: 0;
  animation: endingLiuWalk 7.2s ease both;
}

.ending-liu img {
  width: 150px;
  height: 150px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 20px rgba(57,255,136,.34));
}

.ending-lines {
  display: grid;
  gap: 14px;
}

.ending-lines p {
  margin: 0;
  opacity: 0;
  animation: endingLine 7.8s ease both;
}

.ending-lines p:nth-child(2) {
  animation-delay: 2.2s;
}

.ending-lines p:nth-child(3) {
  color: var(--yellow);
  animation-delay: 5s;
}

.credits-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent);
}

.credits-track {
  display: grid;
  gap: 46px;
  width: min(86vw, 620px);
  transform: translateY(78svh);
  animation: creditsTravel var(--scroll-duration) linear both;
}

.credits-track h1 {
  font-size: 38px;
  margin-bottom: -34px;
}

.credits-track h2 {
  color: #fff;
  font-size: 30px;
}

.credits-track section {
  display: grid;
  gap: 8px;
}

.credits-track p,
.credits-track span {
  margin: 0;
  color: var(--green);
  font-family: var(--display-font);
  font-size: 13px;
}

.credits-track span {
  color: var(--muted);
}

.credit-memory-card {
  display: grid;
  justify-items: center;
  gap: 12px;
}

.credit-memory-photo {
  width: min(58vw, 210px);
  aspect-ratio: 4 / 5;
  border: 1px solid rgba(57,255,136,.42);
  border-radius: 6px;
  background:
    linear-gradient(135deg, rgba(57,255,136,.15), transparent),
    #050805 center / cover no-repeat;
  box-shadow: 0 0 28px rgba(57,255,136,.14), inset 0 0 0 1px rgba(255,255,255,.04);
}

.credit-memory-card h2 {
  color: var(--yellow);
  font-size: 22px;
}

.credit-memory-card span {
  max-width: min(74vw, 360px);
  color: #fff;
  line-height: 1.55;
}

.ending-stats {
  align-content: center;
  gap: 18px;
}

.stat-reel {
  position: relative;
  width: min(86vw, 520px);
  min-height: 360px;
}

.stat-reel article {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 16px;
  opacity: 0;
  animation: statBeat 2.1s ease both;
  animation-delay: calc(var(--delay) * 2s);
}

.stat-reel strong {
  color: var(--green);
  font-size: 84px;
  font-family: var(--display-font);
  text-shadow: 0 0 30px rgba(57,255,136,.42);
}

.stat-reel p,
.stat-reel span {
  margin: 0;
  color: #fff;
  font-size: 18px;
}

.stat-reel span {
  color: var(--muted);
}

.ending-last-save {
  align-content: center;
  gap: 18px;
}

.ending-last-save h1 {
  margin: 0;
  font-size: 34px;
}

.last-save-reel {
  position: relative;
  width: min(86vw, 520px);
  min-height: 260px;
}

.last-save-reel article {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 16px;
  opacity: 0;
  animation: statBeat 2.1s ease both;
  animation-delay: calc(var(--delay) * 1.45s);
}

.last-save-reel p {
  margin: 0;
  color: #fff;
  font-size: 21px;
  line-height: 1.65;
}

.last-save-reel span,
.ending-last-save b {
  color: var(--green);
  font-family: var(--display-font);
}

.ending-last-save b {
  color: var(--yellow);
  font-size: 16px;
  line-height: 1.6;
}

.ending-award {
  align-content: center;
  gap: 13px;
}

.award-liu,
.thanks-liu {
  margin: 0;
}

.award-liu img,
.thanks-liu img {
  width: 82px;
  height: 82px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 14px rgba(57,255,136,.32));
}

.ending-award h1 {
  margin: 0;
}

.award-photo {
  width: min(62vw, 280px);
  aspect-ratio: 4 / 5;
  border: 1px solid var(--green);
  box-shadow: 0 0 28px rgba(57,255,136,.22);
}

.ending-award b {
  margin-top: 8px;
  color: var(--yellow);
  font-family: var(--display-font);
  line-height: 1.45;
}

.ending-thanks {
  align-content: center;
  gap: 13px;
}

.thanks-liu {
  animation: thanksWalkAway 7.2s ease both;
}

.ending-thanks h2 {
  color: var(--yellow);
  font-size: 26px;
}

.ending-fake {
  align-content: center;
  gap: 24px;
}

.ending-fake h1 {
  color: #fff;
  opacity: 1;
  animation: endingFadeIn 0.55s ease .45s both;
}

.ending-fake h2,
.ending-fake b,
.ending-fake p {
  opacity: 1;
  font-family: var(--display-font);
  animation: endingFadeIn 0.6s ease .35s both;
}

.ending-award strong {
  color: var(--yellow);
  font-family: var(--display-font);
  font-size: 18px;
  text-shadow: 0 0 18px rgba(244,255,106,.32);
}

.ending-award.is-pending {
  align-content: center;
}

.ending-fake h2 {
  color: #fff;
  font-size: 46px;
  animation: endingFadeIn 0.5s ease .35s both, glitchShake .24s steps(2) 1.6s 5;
}

.ending-fake b {
  color: var(--red);
  font-size: 58px;
  font-family: var(--display-font);
  animation: endingFadeIn 0.25s ease .9s both, glitchShake .18s steps(2) .95s 4;
}

.ending-fake p {
  color: var(--green);
  font-size: 28px;
}

.fake-glitch {
  color: var(--green);
  font-family: var(--display-font);
  font-size: 11px;
  animation: glitchShake .18s steps(2) 5;
}

.ending-item {
  align-content: center;
  gap: 12px;
}

.ending-reward-hint {
  display: grid;
  justify-items: center;
  gap: 7px;
  width: min(100%, 310px);
  margin: 6px auto 2px;
  border: 1px dashed rgba(244,255,106,.62);
  border-radius: 6px;
  padding: 14px 12px;
  background:
    radial-gradient(circle at 50% 34%, rgba(244,255,106,.14), transparent 38%),
    repeating-linear-gradient(90deg, rgba(57,255,136,.08) 0 4px, transparent 4px 9px),
    rgba(0,0,0,.48);
  box-shadow: 0 0 24px rgba(244,255,106,.12), inset 0 0 18px rgba(57,255,136,.08);
}

.ending-reward-hint span {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(57,255,136,.58);
  color: var(--yellow);
  font-family: var(--display-font);
  font-size: 16px;
  box-shadow: inset 0 0 14px rgba(57,255,136,.12);
  animation: mapBeacon 1.8s ease-in-out infinite;
}

.ending-reward-hint strong {
  color: var(--green);
  font-family: var(--display-font);
  font-size: 14px;
}

.ending-reward-hint p {
  margin: 0;
  color: rgba(231,255,239,.78);
  font-size: 13px;
}

.ticket-drop {
  width: 172px;
  height: 230px;
  border: 2px solid var(--green);
  background:
    radial-gradient(circle at 50% 28%, rgba(244,255,106,.16), transparent 24%),
    linear-gradient(135deg, rgba(57,255,136,.2), transparent 45%),
    rgba(2,5,3,.86);
  box-shadow: 0 0 38px rgba(57,255,136,.32);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 58%, 10% 52%, 0 46%);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  animation: itemDrop 2.6s cubic-bezier(.16,.8,.24,1) both, ticketRevealFill 0.6s ease 3.5s both;
}

.ticket-drop img {
  width: 112px;
  height: 112px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 16px rgba(57,255,136,.45));
  opacity: .92;
}

.ticket-drop span {
  color: var(--green);
  font-family: var(--display-font);
  font-size: 10px;
}

.item-reveal {
  display: grid;
  justify-items: center;
  gap: 10px;
  opacity: 0;
  animation: endingFadeIn 0.8s ease 3.8s both;
}

.ending-item span,
.ending-item b {
  color: var(--yellow);
  font-family: var(--display-font);
}

.ending-item h1 {
  margin: 0;
  font-size: 34px;
}

.ending-item h2 {
  margin: 0;
  color: #fff;
  font-size: 24px;
}

.ending-item p {
  margin: 0;
  color: var(--green);
}

.item-cta {
  width: min(100%, 320px);
  margin-top: 18px;
  opacity: 0;
  pointer-events: none;
  animation: endingFadeIn 0.7s ease 5.8s both;
  animation-fill-mode: forwards;
}

.final-save-panel {
  min-height: 72svh;
  align-content: center;
  justify-items: center;
  text-align: center;
}

.final-save-primary,
.final-save-question,
.final-save-actions {
  display: grid;
  justify-items: center;
  gap: 12px;
}

.final-save-primary h1 {
  color: var(--green);
  font-size: 38px;
}

.final-save-primary {
  animation: endingFadeIn 0.8s ease both;
}

.final-save-question {
  margin-top: 22px;
  opacity: 0;
  animation: endingFadeIn 0.8s ease 2.8s both;
}

.final-save-question span,
.final-save-question b {
  color: var(--yellow);
  font-family: var(--display-font);
}

.final-save-question b {
  color: var(--green);
  line-height: 1.45;
}

.final-save-actions {
  width: min(100%, 320px);
  margin-top: 24px;
  opacity: 0;
  animation: endingFadeIn 0.8s ease 5.4s both;
}

.ending-sequence.reward-ready .item-cta {
  pointer-events: auto;
}

.skip-credits {
  position: fixed;
  z-index: 5;
  right: 18px;
  bottom: max(18px, env(safe-area-inset-bottom));
  width: auto;
  min-height: 38px;
  border: 1px solid rgba(57,255,136,.42);
  border-radius: 6px;
  padding: 0 12px;
  background: rgba(2,5,3,.72);
  color: rgba(57,255,136,.82);
  font-family: var(--display-font);
}

.ticket {
  min-height: 620px;
  display: grid;
  align-content: space-between;
  text-align: center;
  background:
    linear-gradient(135deg, rgba(57,255,136,.18), transparent 34%),
    linear-gradient(180deg, rgba(244,255,106,.08), transparent 42%),
    #040805;
}

.ticket-sprite {
  right: 20px;
  bottom: 86px;
  width: 112px;
  height: 112px;
  opacity: 0.9;
}

.ticket::before,
.ticket::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--green) 0 10px, transparent 10px 18px);
  opacity: 0.5;
}

.ticket::before {
  top: 76px;
}

.ticket::after {
  bottom: 76px;
}

.ticket h1 {
  color: #fff;
  font-size: 42px;
}

.ticket h2,
.ticket div,
.ticket strong,
.ticket em,
.ticket b,
.ticket small {
  display: block;
  color: var(--green);
}

.ticket strong {
  font-size: 28px;
}

.ticket b {
  color: var(--yellow);
  font-size: 24px;
}

.ticket small {
  color: rgba(231,255,239,.72);
  font-family: var(--display-font);
  font-size: 10px;
}

.arcade-panel,
.items-panel,
.my-adventure-panel {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 16px;
}

.arcade-game-card,
.inventory-item,
.personal-progress article {
  border: 1px solid rgba(57,255,136,.28);
  border-radius: 8px;
  padding: 16px;
  background:
    linear-gradient(135deg, rgba(57,255,136,.08), transparent 48%),
    rgba(2,5,3,.68);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}

.arcade-game-card small,
.inventory-item span,
.personal-progress span {
  color: var(--green);
  font-family: var(--display-font);
  font-size: 10px;
}

.arcade-game-card h2,
.inventory-item h2 {
  margin: 8px 0 2px;
  color: #fff;
  font-size: 28px;
}

.arcade-game-card b,
.inventory-item strong {
  display: block;
  color: var(--yellow);
  font-family: var(--display-font);
  font-size: 12px;
}

.arcade-game-card dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 12px;
  margin: 16px 0;
  padding: 12px 0;
  border-top: 1px dashed rgba(57,255,136,.26);
  border-bottom: 1px dashed rgba(57,255,136,.26);
}

.arcade-game-card dt,
.arcade-game-card dd {
  margin: 0;
  font-family: var(--display-font);
  font-size: 11px;
}

.arcade-game-card dd {
  color: var(--green);
  text-align: right;
}

.inventory-list,
.personal-progress,
.my-links {
  display: grid;
  gap: 10px;
}

.inventory-item {
  display: grid;
  gap: 6px;
}

.inventory-item.is-locked {
  opacity: .58;
  filter: grayscale(.7);
}

.inventory-item.is-legendary {
  border-color: rgba(244,255,106,.72);
  background:
    radial-gradient(circle at 16% 18%, rgba(244,255,106,.18), transparent 34%),
    linear-gradient(135deg, rgba(57,255,136,.13), rgba(244,255,106,.08) 52%, transparent),
    rgba(2,5,3,.82);
  box-shadow: 0 0 28px rgba(244,255,106,.16), inset 0 0 18px rgba(57,255,136,.08);
}

.inventory-item.is-legendary span {
  color: var(--yellow);
  text-shadow: 0 0 12px rgba(244,255,106,.38);
}

.inventory-item p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.personal-progress {
  grid-template-columns: 1fr 1fr;
}

.personal-progress strong {
  display: block;
  margin-top: 6px;
  color: #fff;
  font-size: 18px;
}

.bottom-nav {
  position: fixed;
  z-index: 5;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  width: min(calc(100% - 24px), 456px);
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  border: 1px solid rgba(57, 255, 136, 0.34);
  border-radius: 8px;
  padding: 6px;
  background: rgba(2, 5, 3, 0.92);
  backdrop-filter: blur(12px);
}

.bottom-nav button {
  display: grid;
  place-items: center;
  min-height: 50px;
  border: 0;
  border-radius: 4px;
  background: rgba(57, 255, 136, 0.08);
  color: var(--green);
}

.bottom-nav button.active {
  background: rgba(57, 255, 136, 0.18);
  box-shadow: inset 0 0 0 1px rgba(57,255,136,.36), 0 0 16px rgba(57,255,136,.12);
}

.bottom-nav button span {
  font-size: 13px;
}

.bottom-nav button b {
  color: rgba(231,255,239,.58);
  font-family: var(--display-font);
  font-size: 8px;
}

@keyframes loadPulse {
  0%, 100% { opacity: 0.72; }
  50% { opacity: 1; }
}

@keyframes bootLine {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes bootLoad {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes spriteBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes spriteWalk {
  0%, 100% { transform: translateX(-4px); }
  50% { transform: translateX(6px); }
}

@keyframes meetPulse {
  0%, 100% { transform: translate(0, 0); filter: drop-shadow(0 0 0 rgba(57,255,136,0)); }
  50% { transform: translate(6px, -4px); filter: drop-shadow(0 0 10px rgba(57,255,136,0.5)); }
}

@keyframes filmRoll {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-34px); }
  50% { transform: translateX(-68px); }
  75% { transform: translateX(-102px); }
}

@keyframes filmText {
  0%, 100% { transform: translateX(0); color: var(--green); }
  25% { transform: translateX(-18px); color: var(--yellow); }
  50% { transform: translateX(-36px); color: var(--red); }
  75% { transform: translateX(-54px); color: var(--cyan); }
}

@keyframes liuFlyIn {
  0% { transform: translate(-180px, 48px) rotate(-10deg); opacity: 0; }
  16% { opacity: 1; }
  62%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
}

@keyframes flightTrail {
  0% { transform: translateX(-40px); opacity: 0; }
  12% { opacity: 0.9; }
  58% { transform: translateX(160px); opacity: 0; }
  100% { transform: translateX(160px); opacity: 0; }
}

@keyframes endingFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOut {
  to { opacity: 0; }
}

@keyframes crtFlicker {
  0%, 9%, 100% { opacity: 0; }
  10%, 11% { opacity: 0.22; }
  42%, 43% { opacity: 0.12; }
  74%, 75% { opacity: 0.2; }
}

@keyframes saveFill {
  from { transform: scaleX(0); }
  80% { transform: scaleX(.8); }
  to { transform: scaleX(1); }
}

@keyframes endingLiuWalk {
  0% { transform: translateX(-42vw); opacity: 0; }
  18% { opacity: 1; }
  38%, 72% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(42vw); opacity: 0; }
}

@keyframes thanksWalkAway {
  0%, 62% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(38vw); opacity: 0; }
}

@keyframes endingLine {
  0%, 12% { opacity: 0; transform: translateY(8px); }
  22%, 78% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-8px); }
}

@keyframes creditsTravel {
  from { transform: translateY(74svh); }
  to { transform: translateY(-128%); }
}

@keyframes statBeat {
  0%, 100% { opacity: 0; transform: scale(.96); }
  14%, 82% { opacity: 1; transform: scale(1); }
}

@keyframes fakeEndOne {
  0%, 34% { opacity: 1; }
  35%, 100% { opacity: 0; }
}

@keyframes glitchShake {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(5px, -2px); }
}

@keyframes signalDisturbance {
  0%, 100% { transform: translate(0, 0); filter: hue-rotate(0deg); }
  50% { transform: translate(2px, -1px); filter: hue-rotate(20deg); }
}

@keyframes xpFloat {
  0% { opacity: 0; transform: translateY(8px); }
  20%, 70% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-16px); }
}

@keyframes npcDiscover {
  0% { opacity: 0; transform: translate(-50%, 18px) scale(.96); }
  14% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  78% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -10px) scale(.98); }
}

@keyframes mapBeacon {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 6px rgba(244,255,106,.06), 0 0 24px rgba(244,255,106,.18); }
  50% { transform: scale(1.06); box-shadow: 0 0 0 10px rgba(244,255,106,.09), 0 0 34px rgba(244,255,106,.34); }
}

@keyframes finalResolve {
  0%, 42% { opacity: 1; transform: translateX(-3px); }
  58% { opacity: .42; transform: translateX(4px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes itemDrop {
  0% { opacity: 0; transform: translateY(-120px) scale(.58) rotate(-8deg); }
  58% { opacity: 1; transform: translateY(8px) scale(1.04) rotate(2deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

@keyframes secretBeat {
  0% { opacity: 0; transform: translateY(7px); filter: blur(2px); }
  38% { opacity: .45; transform: translateY(0); filter: blur(0); }
  48% { opacity: .12; transform: translateX(-3px); }
  100% { opacity: 1; transform: translateX(0); filter: blur(0); }
}

@keyframes itemGlow {
  0%, 100% { text-shadow: 0 0 10px rgba(244,255,106,.24); }
  50% { text-shadow: 0 0 24px rgba(244,255,106,.62), 0 0 14px rgba(57,255,136,.26); }
}

@keyframes pixelBurst {
  0%, 100% { opacity: .25; transform: scale(.72); }
  35% { opacity: 1; transform: scale(1.2); }
  70% { opacity: .55; transform: translateY(12px) scale(.92); }
}

@keyframes fragmentFly {
  0% { opacity: 0; transform: translate(0, 14px) scale(.7) rotate(0deg); }
  20% { opacity: 1; transform: translate(0, 0) scale(1) rotate(45deg); }
  100% { opacity: 0; transform: translate(72px, -96px) scale(.35) rotate(180deg); }
}

@keyframes fragmentAcquire {
  0% { opacity: 0; transform: translate(-50%, -42%) scale(.9); filter: brightness(1.7); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(1.02); }
  76% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -58%) scale(.96); }
}

@keyframes fragmentPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(2.2); }
}

@keyframes signalMismatch {
  0%, 100% { transform: translateX(0); filter: none; }
  50% { transform: translateX(-4px); filter: hue-rotate(120deg) brightness(1.6); }
}

@keyframes puzzleVictoryLock {
  0% { opacity: .55; transform: scale(.96); filter: brightness(1.7) contrast(1.4); }
  35% { opacity: 1; transform: scale(1.03); }
  70% { transform: scale(.99); }
  100% { opacity: 1; transform: scale(1); filter: brightness(1) contrast(1.1); }
}

@keyframes ticketRevealFill {
  to {
    background:
      linear-gradient(135deg, rgba(57,255,136,.22), transparent 45%),
      linear-gradient(180deg, rgba(244,255,106,.08), transparent 55%),
      rgba(2,5,3,.94);
    box-shadow: 0 0 54px rgba(57,255,136,.42), inset 0 0 24px rgba(57,255,136,.12);
  }
}

@media (min-width: 760px) {
  body {
    display: grid;
    place-items: center;
    padding: 28px;
  }

  .screen {
    min-height: min(844px, calc(100vh - 56px));
    border: 1px solid rgba(57, 255, 136, 0.2);
    border-radius: 18px;
  }

  .boot-title span {
    font-size: 40px;
  }

  .boot-title h1 {
    font-size: 64px;
  }

  .pre-event-screen .pre-home h1 {
    font-size: 76px;
  }

  .pre-event-screen .pre-home .eyebrow {
    font-size: 24px;
  }
}

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