:root {
  color-scheme: dark;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  background: #0b1014;
  color: #f5f7fa;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

#game-shell {
  position: fixed;
  inset: 0;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  background:
    radial-gradient(circle at 50% 35%, rgba(68, 116, 124, 0.18), transparent 34%),
    linear-gradient(180deg, #111922 0%, #080b0e 100%);
}

#game-shell[data-scene="title"] {
  touch-action: pan-x pan-y;
}

#game-shell[data-scene="result"],
#game-shell[data-scene="synthesis"] {
  touch-action: pan-y;
}

#game-shell.denoise-wave-active::after {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border: 5px solid rgba(111, 243, 255, 0.78);
  box-shadow:
    inset 0 0 36px rgba(111, 243, 255, 0.44),
    0 0 28px rgba(111, 243, 255, 0.5);
  content: "";
  animation: wave-screen-pulse 900ms ease-in-out infinite;
}

#gameplay-canvas-host canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

#gameplay-layout {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

#gameplay-canvas-host {
  position: absolute;
  inset: 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  pointer-events: auto;
}

#gameplay-layout > :not(#gameplay-canvas-host) {
  pointer-events: auto;
}

.scene-screen {
  position: fixed;
  inset: 0;
  z-index: 6;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  padding:
    max(24px, env(safe-area-inset-top))
    max(24px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom))
    max(24px, env(safe-area-inset-left));
  background: rgba(3, 6, 8, 0.66);
  text-align: center;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.scene-screen.hidden {
  display: none;
}

#title-screen {
  align-content: start;
  isolation: isolate;
  overflow-y: auto;
  background:
    linear-gradient(180deg, rgba(3, 8, 11, 0.86), rgba(3, 6, 8, 0.98)),
    #030608;
}

#title-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(3, 6, 8, 0.38), rgba(3, 6, 8, 0.78));
  opacity: 0;
}

#title-screen.has-ui-background::before {
  opacity: 1;
}

#title-screen > :not(.ui-screen-background) {
  position: relative;
  z-index: 2;
}

.ui-screen-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
  opacity: 0;
}

.has-ui-background > .ui-screen-background {
  opacity: 1;
}

#title-screen h1 {
  font-size: clamp(42px, 7vw, 76px);
}

@media (min-width: 900px) {
  #title-screen.has-ui-background > :not(.ui-screen-background) {
    transform: translateX(clamp(-120px, -8vw, -56px));
  }
}

#result-screen {
  align-content: start;
  overflow-y: auto;
}

#synthesis-screen {
  align-content: start;
  gap: 9px;
  padding: 16px 24px 20px;
  overflow-y: auto;
  scroll-padding-bottom: 20px;
  background: rgba(3, 7, 10, 0.94);
}

#synthesis-screen h1 {
  font-size: clamp(32px, 5vw, 52px);
}

.scene-screen h1 {
  margin: 0;
  font-size: clamp(42px, 8vw, 92px);
  line-height: 1;
  letter-spacing: 0;
  text-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

.scene-screen p,
.scene-screen span,
#title-stats,
#result-history {
  margin: 0;
  color: #d7dde5;
  font-size: 14px;
}

.title-guide {
  display: grid;
  gap: 5px;
  width: min(620px, 88vw);
  margin: 0;
  padding: 10px 14px;
  border: 1px solid rgba(223, 243, 255, 0.16);
  border-radius: 6px;
  background: rgba(7, 11, 14, 0.52);
  color: #d7dde5;
  font-size: 13px;
  line-height: 1.35;
  text-align: left;
}

.title-guide li {
  margin-left: 16px;
}

.stage-select {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: min(680px, 88vw);
}

.stage-card {
  display: grid;
  gap: 4px;
  min-height: 96px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.055);
  color: #edf6ff;
  text-align: left;
  cursor: pointer;
}

.stage-card.selected {
  border-color: rgba(125, 255, 168, 0.82);
  background: rgba(125, 255, 168, 0.12);
}

.stage-card strong {
  font-size: 14px;
}

.stage-card span,
.stage-card small {
  color: #b7c3cf;
  font-size: 12px;
  line-height: 1.35;
}

.stage-card .stage-progress {
  color: #aeb9c6;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.stage-card .stage-progress.clear {
  color: #7dffa8;
}

.stage-card .stage-core-status {
  color: #d7dde5;
}

#stage-load-status {
  min-height: 18px;
  color: #bfc9d4;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
}

#stage-load-status[data-state="ready"] {
  color: #7dffa8;
}

#stage-load-status[data-state="error"] {
  color: #ff9a8f;
}

#stage-load-retry {
  border-color: rgba(255, 154, 143, 0.54);
}

#synthesis-progress {
  display: grid;
  gap: 6px;
  width: min(680px, 88vw);
  padding: 9px 12px;
  border: 1px solid rgba(223, 243, 255, 0.16);
  border-radius: 6px;
  background: rgba(7, 11, 14, 0.62);
  text-align: left;
}

#synthesis-progress > strong {
  color: #ffffff;
  font-size: 12px;
}

#synthesis-progress > div {
  display: flex;
  gap: 8px;
}

#synthesis-progress span {
  flex: 1;
  padding: 5px 7px;
  border: 1px solid rgba(223, 243, 255, 0.16);
  border-radius: 5px;
  color: #aeb9c6;
  font-size: 11px;
  text-align: center;
}

#synthesis-progress span.acquired {
  border-color: rgba(125, 255, 168, 0.58);
  background: rgba(125, 255, 168, 0.1);
  color: #ffffff;
}

#synthesis-progress-note {
  color: #aeb9c6;
  font-size: 11px;
}

#synthesis-progress-note.unlocked {
  color: #7dffa8;
  font-weight: 900;
}

.synthesis-kicker {
  color: #7dffa8;
  font-size: 12px;
  font-weight: 800;
}

.synthesis-core-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: min(780px, 90vw);
}

.synthesis-core {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 146px;
  overflow: hidden;
  border: 1px solid rgba(223, 243, 255, 0.18);
  border-radius: 6px;
  background: #0d141a;
  opacity: 0.42;
  transform: translateY(6px);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    opacity 180ms ease,
    transform 180ms ease;
}

.synthesis-core img {
  width: 100%;
  height: 98px;
  object-fit: cover;
  filter: grayscale(1) brightness(0.42);
}

.synthesis-core div {
  display: grid;
  gap: 3px;
  padding: 7px 9px;
  text-align: left;
}

.synthesis-core strong {
  color: #ffffff;
  font-size: 13px;
}

.synthesis-core span {
  color: #aeb9c6;
  font-size: 11px;
}

.synthesis-core.acquired {
  opacity: 0.72;
}

.synthesis-core.active {
  border-color: rgba(125, 255, 168, 0.88);
  box-shadow:
    0 0 0 1px rgba(125, 255, 168, 0.24),
    0 0 24px rgba(94, 235, 255, 0.25);
  opacity: 1;
  transform: translateY(0);
}

.synthesis-core.active img {
  filter: none;
}

.synthesis-output {
  display: grid;
  gap: 6px;
  width: min(780px, 90vw);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 260ms ease,
    transform 260ms ease;
}

#synthesis-screen.complete .synthesis-output {
  opacity: 1;
  transform: translateY(0);
}

.synthesis-reward {
  display: grid;
  gap: 4px;
  margin: 0;
}

.synthesis-reward img {
  width: 100%;
  max-height: min(34vh, 300px);
  aspect-ratio: 2 / 1;
  object-fit: cover;
  border: 1px solid rgba(223, 243, 255, 0.28);
  border-radius: 6px;
}

.synthesis-reward figcaption {
  color: #8aefff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
}

.synthesis-output > strong {
  color: #ffffff;
  font-size: 17px;
}

.synthesis-output > small {
  color: #92a1af;
  font-size: 11px;
}

.synthesis-actions {
  display: flex;
  gap: 8px;
}

.synthesis-actions button {
  min-width: 154px;
}

.scene-screen button {
  min-width: 184px;
  padding: 10px 14px;
  border: 1px solid rgba(223, 243, 255, 0.44);
  border-radius: 6px;
  background: rgba(223, 243, 255, 0.12);
  color: #f5f7fa;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.scene-screen button:hover {
  background: rgba(223, 243, 255, 0.2);
}

.scene-screen .stage-card {
  min-width: 0;
  padding: 10px;
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.055);
  font-weight: 500;
}

.scene-screen .stage-card:hover {
  background: rgba(255, 255, 255, 0.09);
}

.scene-screen .stage-card.selected {
  border-color: rgba(125, 255, 168, 0.82);
  background: rgba(125, 255, 168, 0.12);
}

.result-grid {
  display: grid;
  grid-template-columns: auto auto;
  gap: 8px 18px;
  min-width: min(320px, calc(100vw - 48px));
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  background: rgba(7, 11, 14, 0.72);
  text-align: left;
}

.result-grid span {
  color: #aeb9c6;
}

.result-grid strong {
  justify-self: end;
}

#result-fragment-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  max-width: min(520px, calc(100vw - 48px));
}

.result-chip {
  padding: 5px 7px;
  border: 1px solid rgba(255, 211, 90, 0.42);
  border-radius: 5px;
  background: rgba(255, 211, 90, 0.12);
  color: #ffffff;
  font-size: 12px;
  line-height: 1;
}

.result-chip.bonus {
  border-color: rgba(125, 255, 168, 0.54);
  background: rgba(125, 255, 168, 0.13);
}

.result-core-status {
  display: grid;
  gap: 3px;
  width: min(520px, calc(100vw - 48px));
  padding: 9px 12px;
  border: 1px solid rgba(125, 255, 168, 0.54);
  border-radius: 6px;
  background: rgba(125, 255, 168, 0.1);
  text-align: left;
}

.result-core-status strong {
  color: #ffffff;
  font-size: 13px;
}

.result-core-status span {
  color: #bfe8ca;
  font-size: 11px;
}

.scene-screen .sound-toggle {
  min-width: 124px;
  padding: 7px 10px;
  font-size: 12px;
}

.restored-image-panel {
  display: grid;
  gap: 8px;
  width: min(520px, calc(100vw - 48px));
}

.restored-image-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(223, 243, 255, 0.22);
  border-radius: 6px;
  background:
    linear-gradient(135deg, rgba(125, 255, 168, 0.12), transparent 28%),
    #101820;
}

#restored-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.restored-image-panel.locked #restored-image {
  filter: blur(5px) saturate(0.56) brightness(0.48);
  pointer-events: none;
  user-select: none;
}

.restored-image-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  display: none;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.05) 0 2px,
      transparent 2px 7px
    ),
    rgba(3, 6, 8, 0.34);
}

.restored-image-panel.locked .restored-image-frame::after {
  display: block;
}

.restored-image-lock {
  position: absolute;
  inset: auto 14px 14px 14px;
  z-index: 1;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  background: rgba(7, 11, 14, 0.76);
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
}

.restored-image-panel.unlocked .restored-image-lock {
  display: none;
}

.restored-image-panel.fallback #restored-image {
  display: none;
}

.restored-image-panel.fallback .restored-image-frame::before {
  content: "RESTORED IMAGE PREVIEW";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #d7dde5;
  font-size: 14px;
  font-weight: 800;
}

.restored-image-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
}

.restored-image-actions div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

#restored-image-title {
  color: #ffffff;
  font-size: 14px;
}

#restored-image-meta {
  color: #aeb9c6;
  font-size: 12px;
}

.scene-screen button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.reward-panel {
  display: grid;
  gap: 8px;
  width: min(520px, calc(100vw - 48px));
}

.reward-panel.hidden {
  display: none;
}

#reward-card {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(223, 243, 255, 0.22);
  border-radius: 6px;
  background: #101820;
}

.reward-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
}

.reward-actions div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

#reward-title {
  color: #ffffff;
  font-size: 14px;
}

#reward-meta {
  color: #aeb9c6;
  font-size: 12px;
}

.gallery-panel {
  display: grid;
  gap: 6px;
  width: min(520px, calc(100vw - 48px));
}

#gallery-title {
  color: #d7dde5;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
}

#gallery-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.gallery-entry {
  display: grid;
  gap: 3px;
  min-height: 58px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.055);
  text-align: left;
}

.gallery-entry strong {
  color: #ffffff;
  font-size: 11px;
  line-height: 1.25;
}

.gallery-entry span {
  color: #aeb9c6;
  font-size: 10px;
  line-height: 1.25;
}

#hud {
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  left: max(16px, env(safe-area-inset-left));
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  background: rgba(7, 11, 14, 0.72);
  backdrop-filter: blur(8px);
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0;
}

#hud span {
  white-space: nowrap;
}

.hud-sound-toggle {
  min-width: 92px;
  padding: 5px 7px;
  border: 1px solid rgba(223, 243, 255, 0.28);
  border-radius: 5px;
  background: rgba(223, 243, 255, 0.08);
  color: #f5f7fa;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

#game-shell.denoise-wave-active #hud {
  border-color: rgba(111, 243, 255, 0.84);
  background: rgba(5, 28, 36, 0.86);
  box-shadow:
    0 0 0 1px rgba(111, 243, 255, 0.28),
    0 0 22px rgba(111, 243, 255, 0.42);
}

#game-shell[data-scene="title"] #hud,
#game-shell[data-scene="title"] #fragment-panel,
#game-shell[data-scene="title"] #minimap-panel,
#game-shell[data-scene="title"] #hint,
#game-shell[data-scene="result"] #hud,
#game-shell[data-scene="result"] #fragment-panel,
#game-shell[data-scene="result"] #minimap-panel,
#game-shell[data-scene="result"] #hint,
#game-shell[data-scene="synthesis"] #hud,
#game-shell[data-scene="synthesis"] #fragment-panel,
#game-shell[data-scene="synthesis"] #minimap-panel,
#game-shell[data-scene="synthesis"] #hint {
  display: none;
}

#life,
#cut-rate {
  min-width: 128px;
  font-weight: 700;
}

#status {
  color: #bfc9d4;
}

#line-risk {
  color: #bffcff;
}

#line-risk[data-risk="near"] {
  color: #ffe36a;
}

#line-risk[data-risk="danger"] {
  color: #ff9c2f;
}

#line-risk[data-risk="critical"] {
  color: #ffd989;
}

#fragment-panel {
  position: fixed;
  top: calc(64px + env(safe-area-inset-top));
  left: max(16px, env(safe-area-inset-left));
  z-index: 3;
  width: min(280px, calc(100vw - 32px));
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  background: rgba(7, 11, 14, 0.68);
  backdrop-filter: blur(8px);
  color: #d7dde5;
  font-size: 12px;
}

#fragment-count {
  margin-bottom: 6px;
  color: #f5f7fa;
  font-weight: 800;
  line-height: 1;
}

#fragment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.fragment-chip {
  max-width: 100%;
  padding: 4px 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.06);
  color: #d7dde5;
  font-size: 11px;
  line-height: 1;
}

.fragment-chip.collected {
  color: #ffffff;
  border-color: rgba(255, 211, 90, 0.46);
  background: rgba(255, 211, 90, 0.13);
}

.fragment-chip.bonus {
  border-color: rgba(125, 255, 168, 0.54);
  background: rgba(125, 255, 168, 0.13);
}

#hint {
  position: fixed;
  left: max(16px, env(safe-area-inset-left));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 3;
  max-width: min(520px, calc(100vw - 32px));
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(7, 11, 14, 0.66);
  color: #d7dde5;
  font-size: 13px;
}

#minimap-panel {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 3;
  width: min(228px, calc(100vw - 32px));
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  background: rgba(7, 11, 14, 0.72);
  backdrop-filter: blur(8px);
}

#minimap-title {
  margin-bottom: 6px;
  color: #d7dde5;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

#minimap {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 4px;
  background: #13212a;
  image-rendering: pixelated;
}

.mobile-dpad {
  --dpad-size: 48px;
  --dpad-gap: 4px;
  position: fixed;
  bottom: max(12px, env(safe-area-inset-bottom));
  left: max(12px, env(safe-area-inset-left));
  z-index: 3;
  display: none;
  grid-template-columns: repeat(3, var(--dpad-size));
  grid-template-rows: repeat(3, var(--dpad-size));
  gap: var(--dpad-gap);
  width: calc(var(--dpad-size) * 3 + var(--dpad-gap) * 2);
  height: calc(var(--dpad-size) * 3 + var(--dpad-gap) * 2);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.mobile-dpad-button {
  display: grid;
  width: var(--dpad-size);
  height: var(--dpad-size);
  min-width: var(--dpad-size);
  min-height: var(--dpad-size);
  padding: 0;
  place-items: center;
  border: 1px solid rgba(191, 252, 255, 0.56);
  border-radius: 6px;
  background: rgba(7, 24, 30, 0.74);
  box-shadow:
    inset 0 0 14px rgba(111, 243, 255, 0.08),
    0 4px 14px rgba(0, 0, 0, 0.28);
  color: #dffcff;
  font: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.mobile-dpad-button.up {
  grid-column: 2;
  grid-row: 1;
}

.mobile-dpad-button.left {
  grid-column: 1;
  grid-row: 2;
}

.mobile-dpad-button.right {
  grid-column: 3;
  grid-row: 2;
}

.mobile-dpad-button.down {
  grid-column: 2;
  grid-row: 3;
}

.mobile-dpad-button.is-pressed {
  border-color: rgba(125, 255, 168, 0.92);
  background: rgba(31, 99, 83, 0.88);
  box-shadow:
    inset 0 0 18px rgba(125, 255, 168, 0.22),
    0 0 18px rgba(125, 255, 168, 0.24);
  color: #ffffff;
  transform: scale(0.94);
}

#game-shell.touch-controls-available[data-scene="playing"] .mobile-dpad:not([hidden]) {
  display: grid;
}

#game-shell.touch-controls-available[data-scene="playing"] #hint {
  display: none;
}

#overlay {
  position: fixed;
  inset: 0;
  z-index: 4;
  display: grid;
  place-content: center;
  gap: 12px;
  background: rgba(3, 6, 8, 0.56);
  text-align: center;
}

#overlay.hidden {
  display: none;
}

#overlay-title {
  font-size: clamp(36px, 8vw, 92px);
  line-height: 1;
  letter-spacing: 0;
  text-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

#overlay-note {
  color: #d7dde5;
  font-size: 16px;
}

#cut-flash {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: rgba(223, 243, 255, 0);
}

#cut-flash.active {
  animation: restore-flash 220ms ease-out;
}

#cut-flash.active.good {
  animation-duration: 280ms;
}

#cut-flash.active.great {
  animation-name: restore-flash-great;
  animation-duration: 360ms;
}

#cut-flash.active.massive,
#cut-flash.active.wave {
  animation-name: denoise-wave-flash;
  animation-duration: 520ms;
}

#denoise-pop {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 5;
  pointer-events: none;
  color: #eefaff;
  font-size: clamp(22px, 5vw, 52px);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  text-shadow:
    0 0 16px rgba(116, 214, 255, 0.82),
    0 10px 24px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.82);
}

#denoise-pop.active {
  animation: denoise-pop 800ms ease-out;
}

#denoise-pop.wave {
  color: #ffffff;
  padding: 18px 22px;
  border: 2px solid rgba(111, 243, 255, 0.88);
  border-radius: 6px;
  background: rgba(2, 20, 28, 0.76);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.24),
    0 0 42px rgba(111, 243, 255, 0.72);
  text-shadow:
    0 0 18px rgba(111, 243, 255, 0.95),
    0 0 44px rgba(255, 255, 255, 0.6),
    0 12px 28px rgba(0, 0, 0, 0.55);
}

#denoise-pop.wave span {
  display: block;
  margin-top: 8px;
  color: #aef5ff;
  font-size: clamp(13px, 2.2vw, 20px);
  font-weight: 900;
  line-height: 1;
}

#denoise-pop.wave.active {
  animation: denoise-wave-pop 1500ms ease-out;
}

@keyframes wave-screen-pulse {
  0%,
  100% {
    opacity: 0.48;
  }

  50% {
    opacity: 1;
  }
}

@keyframes restore-flash {
  0% {
    background: rgba(255, 255, 255, 0);
  }

  28% {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(223, 243, 255, 0.28));
  }

  100% {
    background: rgba(223, 243, 255, 0);
  }
}

@keyframes restore-flash-great {
  0% {
    background: rgba(255, 255, 255, 0);
  }

  24% {
    background:
      radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.42), rgba(116, 214, 255, 0.18) 42%, transparent 70%),
      rgba(223, 243, 255, 0.16);
  }

  100% {
    background: rgba(223, 243, 255, 0);
  }
}

@keyframes denoise-wave-flash {
  0% {
    background: rgba(255, 255, 255, 0);
  }

  18% {
    background:
      radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.55), rgba(94, 235, 255, 0.28) 38%, transparent 68%),
      linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), transparent);
  }

  48% {
    background:
      radial-gradient(circle at 50% 50%, transparent 22%, rgba(94, 235, 255, 0.2) 44%, transparent 72%),
      rgba(223, 243, 255, 0.1);
  }

  100% {
    background: rgba(223, 243, 255, 0);
  }
}

@keyframes denoise-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.72);
  }

  18% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -58%) scale(1.04);
  }
}

@keyframes denoise-wave-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7);
  }

  16% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.06);
  }

  48% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -62%) scale(1.16);
  }
}

@media (max-height: 700px) and (min-width: 701px) {
  #synthesis-screen {
    gap: 6px;
    padding: 10px 20px 14px;
  }

  #synthesis-screen h1 {
    font-size: 36px;
  }

  .synthesis-core-grid,
  .synthesis-output {
    width: min(680px, 88vw);
  }

  .synthesis-core {
    min-height: 110px;
  }

  .synthesis-core img {
    height: 72px;
  }

  .synthesis-reward img {
    max-height: min(28vh, 210px);
  }

  .synthesis-output > strong {
    font-size: 15px;
  }

  #synthesis-screen button {
    padding-block: 7px;
  }
}

@media (max-width: 700px) {
  #title-screen {
    gap: 8px;
    padding:
      max(12px, env(safe-area-inset-top))
      max(12px, env(safe-area-inset-right))
      max(12px, env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-left));
  }

  #title-screen h1 {
    font-size: clamp(34px, 12vw, 46px);
  }

  #title-screen > p,
  #title-screen > span,
  #title-stats {
    font-size: 11px;
  }

  .title-guide {
    gap: 2px;
    width: min(360px, calc(100vw - 24px));
    padding: 7px 10px;
    font-size: 11px;
    line-height: 1.22;
  }

  .title-guide li {
    margin-left: 14px;
  }

  #synthesis-progress {
    gap: 4px;
    width: min(360px, calc(100vw - 24px));
    padding: 7px 8px;
  }

  #synthesis-progress > div {
    gap: 4px;
  }

  #synthesis-progress span {
    padding: 4px;
    font-size: 10px;
  }

  #synthesis-progress-note {
    font-size: 10px;
  }

  .stage-select {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(230px, 82vw);
    width: min(100%, calc(100vw - 24px));
    padding-bottom: 3px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    touch-action: pan-x;
  }

  .stage-card {
    min-height: 78px;
    scroll-snap-align: center;
  }

  .scene-screen button,
  .hud-sound-toggle {
    min-height: 44px;
  }

  .synthesis-core-grid {
    grid-template-columns: 1fr;
    width: min(340px, 88vw);
  }

  .synthesis-core {
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-rows: none;
    min-height: 74px;
  }

  .synthesis-core img {
    height: 74px;
  }

  .synthesis-core div {
    align-content: center;
  }

  .synthesis-actions {
    flex-wrap: wrap;
    width: min(340px, 88vw);
  }

  .synthesis-actions button {
    flex: 1 1 150px;
    min-width: 0;
  }

  #gallery-list {
    grid-template-columns: 1fr;
  }

  .reward-actions {
    align-items: stretch;
    flex-direction: column;
  }

  #hud {
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    left: max(12px, env(safe-area-inset-left));
    flex-wrap: wrap;
    gap: 8px;
  }

  #hint {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    left: max(12px, env(safe-area-inset-left));
    text-align: center;
  }

  #fragment-panel {
    top: calc(124px + env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    left: max(12px, env(safe-area-inset-left));
    width: auto;
  }

  #minimap-panel {
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(72px + env(safe-area-inset-bottom));
    width: min(188px, calc(100vw - 24px));
  }

  #game-shell.touch-controls-available[data-scene="playing"] #minimap-panel {
    width: min(176px, calc(100vw - 184px));
  }
}

@media (pointer: coarse) {
  .scene-screen .sound-toggle,
  .hud-sound-toggle {
    min-height: 44px;
  }

  #game-shell[data-scene="playing"] #gameplay-layout {
    display: grid;
    grid-template-areas:
      "hud hud"
      "fragments fragments"
      "canvas canvas"
      "dpad minimap";
    grid-template-columns: minmax(148px, auto) minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 6px;
    padding:
      max(6px, env(safe-area-inset-top))
      max(8px, env(safe-area-inset-right))
      max(8px, env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left));
  }

  #game-shell[data-scene="playing"] .mobile-dpad {
    --dpad-size: clamp(48px, 10vmin, 72px);
    --dpad-gap: clamp(4px, 1vmin, 10px);
  }

  #game-shell[data-scene="playing"] #gameplay-canvas-host {
    position: relative;
    inset: auto;
    grid-area: canvas;
    border: 1px solid rgba(223, 243, 255, 0.12);
    border-radius: 5px;
  }

  #game-shell[data-scene="playing"] #hud {
    position: relative;
    inset: auto;
    grid-area: hud;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 4px 8px;
    width: auto;
    min-height: 0;
    padding: 5px 7px;
    font-size: 10px;
  }

  #game-shell[data-scene="playing"] #life,
  #game-shell[data-scene="playing"] #cut-rate {
    min-width: 0;
  }

  #game-shell[data-scene="playing"] #status {
    grid-column: 1 / 3;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  #game-shell[data-scene="playing"] #line-risk:not([hidden]) {
    grid-column: 1 / 3;
  }

  #game-shell[data-scene="playing"] .hud-sound-toggle {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
    min-width: 88px;
    padding: 4px 6px;
  }

  #game-shell[data-scene="playing"] #fragment-panel {
    position: relative;
    inset: auto;
    grid-area: fragments;
    display: flex;
    align-items: center;
    gap: 8px;
    width: auto;
    padding: 5px 7px;
    font-size: 10px;
  }

  #game-shell[data-scene="playing"] #fragment-count {
    flex: 0 0 auto;
    margin: 0;
  }

  #game-shell[data-scene="playing"] #fragment-list {
    flex-wrap: nowrap;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
  }

  #game-shell[data-scene="playing"] .fragment-chip {
    width: 12px;
    height: 12px;
    min-width: 12px;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
  }

  #game-shell[data-scene="playing"] #minimap-panel {
    position: relative;
    inset: auto;
    grid-area: minimap;
    align-self: center;
    justify-self: stretch;
    width: min(100%, 190px);
    padding: 6px;
  }

  #game-shell[data-scene="playing"] #minimap-title {
    margin-bottom: 4px;
    font-size: 9px;
  }

  #game-shell[data-scene="playing"] .mobile-dpad {
    position: relative;
    inset: auto;
    grid-area: dpad;
    align-self: center;
    justify-self: start;
  }

  #game-shell[data-scene="playing"] #hint {
    display: none;
  }
}

@media (pointer: coarse) and (orientation: landscape) {
  #game-shell[data-scene="playing"] #gameplay-layout {
    grid-template-areas:
      "hud hud fragments"
      "dpad canvas minimap";
    grid-template-columns: auto minmax(0, 1fr) minmax(148px, 22vw);
    grid-template-rows: auto minmax(0, 1fr);
  }

  #game-shell[data-scene="playing"] #fragment-panel {
    max-width: min(290px, 36vw);
  }

  #game-shell[data-scene="playing"] #minimap-panel {
    width: 100%;
  }
}

@media (max-height: 500px) {
  #title-screen {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 5px 8px;
    padding:
      max(8px, env(safe-area-inset-top))
      max(12px, env(safe-area-inset-right))
      max(8px, env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-left));
  }

  #title-screen > .ui-screen-background,
  #title-screen > h1,
  #title-screen > p,
  #title-screen > .title-guide,
  #title-screen > #title-stats,
  #title-screen > #synthesis-progress,
  #title-screen > #stage-select,
  #title-screen > span {
    grid-column: 1 / -1;
  }

  #title-screen h1 {
    font-size: 30px;
  }

  #title-screen > p,
  #title-screen > span,
  #title-stats {
    font-size: 10px;
  }

  #title-screen .title-guide {
    display: none;
  }

  #title-screen #synthesis-progress {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 4px 8px;
    width: min(680px, calc(100vw - 24px));
    padding: 5px 8px;
  }

  #title-screen #synthesis-progress > div {
    gap: 4px;
  }

  #title-screen #synthesis-progress span {
    padding: 3px 5px;
    font-size: 9px;
  }

  #title-screen #synthesis-progress-note {
    display: none;
  }

  #title-screen .stage-select {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow: row;
    width: min(680px, calc(100vw - 24px));
    padding: 0;
    overflow: visible;
  }

  #title-screen .stage-card {
    min-height: 62px;
    padding: 6px 8px;
  }

  #title-screen .stage-card small {
    display: none;
  }

  #title-screen > button {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 6px 10px;
  }

  #title-screen > span {
    line-height: 1.2;
  }
}