:root {
  --gold: #e4bd73;
  --gold-bright: #ffe7a4;
  --gold-soft: rgba(229, 191, 115, 0.78);
  --gold-dim: rgba(229, 191, 115, 0.36);
  --gold-ghost: rgba(229, 191, 115, 0.13);
  --text: rgba(246, 228, 187, 0.86);
  --muted: rgba(246, 228, 187, 0.5);
  --line: rgba(229, 191, 115, 0.22);
  --panel: rgba(5, 4, 3, 0.48);
  --panel-strong: rgba(9, 7, 4, 0.68);
  --shadow: rgba(0, 0, 0, 0.72);
}

* { box-sizing: border-box; }
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  background: #000;
  color: var(--text);
  font-family: Georgia, 'Times New Roman', serif;
  user-select: none;
  overflow: hidden;
}
button, input { font: inherit; }
button { color: inherit; }

.game {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-width: 980px;
  min-height: 640px;
  isolation: isolate;
  background: #000;
}

.bg-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  filter: brightness(var(--bg-brightness, .96)) saturate(var(--bg-saturation, 1.08)) contrast(var(--bg-contrast, 1.04));
  transform: scale(var(--bg-scale, 1.018));
  transition: opacity 2.4s ease, filter 2.4s ease, transform 12s linear;
  pointer-events: none;
}
.bg-layer.visible { opacity: var(--bg-opacity, 1); transform: scale(calc(var(--bg-scale, 1.018) + .008)); }
.background-harmony {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,198,91,0.045) 0%, rgba(238,183,76,0.025) 24%, rgba(0,0,0,.035) 56%, rgba(0,0,0,.18) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.18) 0%, transparent 18%, transparent 78%, rgba(0,0,0,.26) 100%),
    linear-gradient(to right, rgba(0,0,0,.20), transparent 14%, transparent 86%, rgba(0,0,0,.20));
}

#fxCanvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 1;
  filter: brightness(1.35) drop-shadow(0 0 10px rgba(255, 203, 112, .25));
}

.core-button {
  --size: clamp(54px, 7vw, 112px);
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  width: var(--size);
  height: var(--size);
  translate: -50% -50%;
  border: 0;
  border-radius: 999px;
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: var(--core-opacity, 0);
  transform: scale(var(--core-scale, 1));
  transition: opacity 1.6s ease, transform .18s ease;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.core-button:hover { transform: scale(calc(var(--core-scale, 1) * 1.04)); }
.core-button:active { transform: scale(calc(var(--core-scale, 1) * .94)); }
.core-button:focus-visible { box-shadow: 0 0 0 2px var(--gold-dim); }
.core-aura, .core-ring, .core-inner { position: absolute; border-radius: inherit; pointer-events: none; }
.core-aura {
  inset: -35%;
  background: radial-gradient(circle, rgba(255, 242, 197, .78), rgba(238, 179, 78, .34) 18%, rgba(224,164,74,.12) 43%, transparent 70%);
  filter: blur(22px);
  animation: coreBreath var(--breath-speed, 5s) ease-in-out infinite;
}
.core-ring {
  width: 84%;
  height: 84%;
  border: 1px solid rgba(255, 217, 146, .46);
  box-shadow: 0 0 34px rgba(255, 194, 92, .32), inset 0 0 22px rgba(255, 202, 113, .18);
  animation: ringTurn 12s linear infinite;
}
.core-inner {
  width: clamp(7px, 1vw, 14px);
  height: clamp(7px, 1vw, 14px);
  background: radial-gradient(circle, #fff 0%, #ffe3a0 44%, rgba(225, 155, 56, .18) 100%);
  box-shadow: 0 0 22px rgba(255, 235, 185, 1), 0 0 70px rgba(255, 178, 61, .92);
  animation: coreFlicker 2.9s ease-in-out infinite;
}
@keyframes coreBreath { 0%,100% { transform: scale(.84); opacity:.42; } 50% { transform: scale(1.18); opacity:.94; } }
@keyframes coreFlicker { 0%,100% { transform: scale(.88); opacity:.82; } 36% { transform: scale(1.28); opacity:1; } 70% { transform: scale(.95); opacity:.9; } }
@keyframes ringTurn { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.ui-block { transition: opacity 1.25s ease, transform 1.25s ease, filter 1.25s ease; }
.panel {
  position: absolute;
  z-index: 7;
  background: linear-gradient(145deg, rgba(10, 8, 5, .66), rgba(0, 0, 0, .38));
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: inset 0 0 24px rgba(214, 154, 63, .045), 0 12px 44px var(--shadow);
  backdrop-filter: blur(7px);
  overflow: hidden;
}
.panel::before, .panel::after {
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-ghost), transparent);
  pointer-events: none;
}
.panel::before { top: 10px; }
.panel::after { bottom: 10px; }
.panel-kicker {
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(229, 191, 115, .44);
}
.panel-title {
  margin-top: 4px;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.small-note { font-size: 12px; color: var(--muted); line-height: 1.45; }

.stage-header {
  position: absolute;
  z-index: 6;
  top: clamp(22px, 4.4vh, 54px);
  left: 50%;
  translate: -50% 0;
  text-align: center;
  letter-spacing: .25em;
  color: var(--gold-soft);
  text-shadow: 0 0 20px rgba(221, 166, 76, .32);
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s ease, transform 1.2s ease;
}
.stage-header.visible { opacity: 1; }
.stage-header h1 { margin: 0; font-weight: 400; font-size: clamp(14px, 1.45vw, 25px); }
.stage-header p { margin: 12px 0 0; font-size: clamp(10px, .82vw, 14px); letter-spacing: .12em; color: rgba(240, 216, 168, .54); }
.ornament { position: relative; width: 78px; height: 12px; margin: 0 auto 14px; }
.ornament::before { content:''; position:absolute; inset:50% 0 auto 0; height:1px; background:linear-gradient(90deg, transparent, var(--gold-dim), transparent); }
.ornament::after { content:''; position:absolute; left:50%; top:50%; width:5px; height:5px; translate:-50% -50%; border-radius:50%; background:var(--gold-soft); box-shadow:0 0 14px var(--gold); }

.presence-panel {
  position: absolute;
  z-index: 7;
  left: 50%;
  bottom: clamp(70px, 9vh, 104px);
  translate: -50% 0;
  text-align: center;
  font-size: 13px;
  letter-spacing: .12em;
  color: rgba(236, 212, 166, .5);
  pointer-events: none;
}

.resource-panel { top: clamp(92px, 13vh, 142px); left: clamp(28px, 4.8vw, 76px); width: clamp(250px, 23vw, 360px); padding: 26px 28px 24px; }
.energy-value { margin-top: 14px; font-size: clamp(34px, 4vw, 62px); letter-spacing: .06em; color: rgba(250, 229, 181, .9); text-shadow: 0 0 26px rgba(229, 173, 82, .36); }
.rate-line { display: flex; justify-content: space-between; gap: 16px; margin: 6px 0 8px; color: rgba(245, 221, 172, .5); font-size: 12px; }
.progress-track, .mini-track { position: relative; height: 4px; border-radius: 999px; background: rgba(235, 199, 126, .08); border: 1px solid rgba(235, 199, 126, .18); overflow: hidden; }
.progress-fill, .mini-track > div { height: 100%; width: 0%; background: linear-gradient(90deg, rgba(182, 123, 39, .58), rgba(255, 224, 149, .94)); box-shadow: 0 0 14px rgba(225, 167, 70, .56); transition: width .35s ease; }
.resource-subline { margin: 0 0 14px; font-size: 11px; color: rgba(243, 220, 174, .42); }
#coherenceText { margin-top: 12px; }

.proto-actions {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 50%;
  width: min(840px, 72vw);
  height: min(430px, 54vh);
  translate: -50% -50%;
  pointer-events: none;
}
.proto-action {
  position: absolute;
  min-width: 245px;
  max-width: 310px;
  padding: 15px 18px;
  border: 1px solid rgba(228, 185, 95, .18);
  border-radius: 999px;
  background: rgba(5, 4, 2, .34);
  color: rgba(243, 220, 174, .72);
  cursor: pointer;
  text-align: center;
  backdrop-filter: blur(5px);
  box-shadow: inset 0 0 18px rgba(223, 164, 67, .035);
  pointer-events: auto;
  transition: border-color .2s ease, background .2s ease, transform .2s ease, opacity .2s ease;
}
.proto-action:hover { border-color: rgba(236, 198, 118, .45); background: rgba(16, 12, 6, .62); transform: translateY(-2px); }
.proto-action:disabled { opacity: .35; cursor: default; transform: none; }
.proto-action[data-action="feed"] { left: 50%; top: 0; translate: -50% 0; }
.proto-action[data-action="stabilize"] { right: 2%; top: 54%; translate: 0 -50%; }
.proto-action[data-action="resonate"] { left: 2%; top: 54%; translate: 0 -50%; }
.action-name { display: block; font-size: 14px; letter-spacing: .08em; }
.action-detail { display: block; margin-top: 7px; font-size: 12px; line-height: 1.32; color: rgba(243, 220, 174, .45); }

.branches-panel {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: clamp(72px, 11vh, 120px);
  width: min(980px, 72vw);
  translate: -50% 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.branch-card {
  min-height: 172px;
  padding: 18px 16px;
  border: 1px solid rgba(229, 191, 115, .22);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(10, 8, 4, .55), rgba(0,0,0,.32));
  color: var(--text);
  cursor: pointer;
  text-align: center;
  backdrop-filter: blur(7px);
  box-shadow: inset 0 0 20px rgba(214, 154, 63, .045), 0 10px 34px rgba(0,0,0,.36);
  transition: transform .2s ease, border-color .2s ease, opacity .2s ease, background .2s ease;
}
.branch-card:hover { transform: translateY(-4px); border-color: rgba(243, 204, 126, .55); background: linear-gradient(180deg, rgba(22, 16, 7, .76), rgba(4,3,2,.46)); }
.branch-card:disabled { opacity: .38; cursor: default; transform: none; }
.branch-glyph { display: block; font-size: 23px; color: var(--gold); text-shadow: 0 0 14px rgba(229, 191, 115, .5); }
.branch-name { display: block; margin-top: 8px; letter-spacing: .18em; text-transform: uppercase; font-size: 12px; color: var(--gold-soft); }
.branch-level { display: block; margin-top: 7px; font-size: 12px; }
.branch-cost { display: block; margin-top: 8px; color: rgba(248, 224, 175, .58); font-size: 12px; }
.branch-effect { display: block; margin-top: 9px; color: rgba(248, 224, 175, .42); font-size: 12px; line-height: 1.38; }

.progress-panel { top: clamp(92px, 13vh, 142px); right: clamp(28px, 4.8vw, 76px); width: clamp(270px, 23vw, 360px); padding: 26px 26px 22px; }
.stage-nodes { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; margin: 20px 0 14px; }
.stage-node { height: 28px; border-radius: 999px; border: 1px solid rgba(229, 191, 115, .18); display: grid; place-items: center; color: rgba(246, 224, 181, .35); font-size: 10px; background: rgba(0,0,0,.24); }
.stage-node.done { color: rgba(255, 227, 164, .78); background: rgba(229, 168, 72, .11); }
.stage-node.current { color: #fff2ca; border-color: rgba(255, 220, 146, .64); box-shadow: 0 0 16px rgba(229, 181, 86, .28); }
.gate-text { margin-top: 12px; color: rgba(243, 216, 160, .56); font-size: 12px; line-height: 1.45; }

.action-panel { left: clamp(28px, 4.8vw, 76px); bottom: clamp(74px, 9.8vh, 116px); width: clamp(250px, 22vw, 350px); padding: 24px; }
.panel-action {
  width: 100%;
  margin-top: 14px;
  padding: 13px 14px;
  border: 1px solid rgba(229,191,115,.2);
  border-radius: 12px;
  background: rgba(0,0,0,.28);
  color: var(--text);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  text-align: left;
  transition: border-color .2s ease, background .2s ease, opacity .2s ease, transform .2s ease;
}
.panel-action:hover { border-color: rgba(243,204,126,.54); background: rgba(20, 15, 7, .58); transform: translateY(-1px); }
.panel-action:disabled, .panel-action.locked { opacity: .36; cursor: default; transform: none; }
.panel-action small { color: rgba(246, 221, 173, .46); font-size: 11.5px; line-height: 1.35; max-width: 100%; }
.panel-action.primary { justify-content: center; flex-direction: column; text-align: center; background: rgba(229, 167, 72, .12); }

.threshold-panel { right: clamp(28px, 4.8vw, 76px); bottom: clamp(82px, 11vh, 130px); width: clamp(285px, 24vw, 376px); padding: 24px 26px; }
.threshold-main { margin: 18px 0 14px; font-size: clamp(26px, 3vw, 42px); color: rgba(255, 231, 179, .88); text-align: center; text-shadow: 0 0 24px rgba(229, 173, 82, .36); }
.threshold-panel .small-note { margin-top: 12px; }

.ring-panel { right: clamp(28px, 4.8vw, 76px); bottom: clamp(82px, 11vh, 130px); width: clamp(300px, 26vw, 410px); padding: 24px 26px; }
.ring-row { display: grid; grid-template-columns: 86px 1fr 44px; align-items: center; gap: 10px; margin-top: 15px; font-size: 12px; color: rgba(245, 221, 174, .63); }
.ring-row span:last-child { text-align: right; }

.bottom-nav {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: 22px;
  translate: -50% 0;
  min-width: min(760px, 54vw);
  height: 42px;
  padding: 0 18px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  border: 1px solid rgba(229,191,115,.18);
  border-radius: 999px;
  background: rgba(0,0,0,.42);
  backdrop-filter: blur(7px);
  box-shadow: 0 10px 34px rgba(0,0,0,.35);
}
.bottom-nav button {
  border: 0;
  background: transparent;
  color: rgba(244, 220, 173, .55);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 10px;
  cursor: pointer;
}
.bottom-nav button:hover { color: rgba(255, 234, 184, .86); }

.whisper {
  position: absolute;
  z-index: 9;
  left: 50%;
  bottom: clamp(28px, 5vh, 54px);
  max-width: min(780px, 74vw);
  translate: -50% 0;
  text-align: center;
  color: rgba(246, 226, 182, .52);
  text-shadow: 0 0 18px rgba(230, 169, 75, .28);
  letter-spacing: .08em;
  font-size: clamp(12px, .95vw, 16px);
  pointer-events: none;
  transition: opacity 1s ease, transform 1s ease;
}
.toast {
  position: absolute;
  z-index: 14;
  left: 50%;
  top: 21%;
  translate: -50% -50%;
  max-width: 680px;
  padding: 13px 20px;
  border: 1px solid rgba(229, 191, 115, .24);
  border-radius: 999px;
  background: rgba(2,2,2,.66);
  color: rgba(255, 235, 188, .9);
  letter-spacing: .07em;
  box-shadow: 0 0 30px rgba(229, 167, 72, .18);
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease, transform .45s ease;
}
.toast.show { opacity: 1; transform: translateY(-4px); }

.controls {
  position: absolute;
  z-index: 15;
  right: 18px;
  bottom: 16px;
  width: 360px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}
.control-row { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.control-row button, .mini-button {
  border: 1px solid rgba(229,191,115,.23);
  border-radius: 999px;
  background: rgba(0,0,0,.46);
  color: rgba(244, 220, 173, .74);
  padding: 8px 12px;
  cursor: pointer;
  font-size: 11px;
  backdrop-filter: blur(6px);
}
.control-row button:hover, .mini-button:hover, .mini-button.active { border-color: rgba(243,204,126,.56); color: rgba(255,238,194,.92); }
.volume-control {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid rgba(229,191,115,.23);
  border-radius: 999px;
  background: rgba(0,0,0,.46);
  color: rgba(244, 220, 173, .74);
  font-size: 11px;
  backdrop-filter: blur(6px);
}
.volume-control input { width: 92px; accent-color: #d9a84e; }
.music-player {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(229,191,115,.20);
  border-radius: 14px;
  background: rgba(0,0,0,.50);
  backdrop-filter: blur(7px);
  box-shadow: 0 10px 30px rgba(0,0,0,.32);
}
.music-top { display: flex; justify-content: space-between; gap: 12px; align-items: center; font-size: 10px; color: rgba(246, 226, 182, .58); letter-spacing: .09em; }
.music-row { margin-top: 8px; display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.music-seek { width: 100%; margin-top: 6px; accent-color: #d9a84e; }

.space-transition {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, rgba(236,187,89,.12), rgba(0,0,0,.84) 52%, #000 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.4s ease;
}
.space-transition.visible { opacity: 1; }
.space-transition p { max-width: 780px; text-align:center; letter-spacing: .14em; color: rgba(255, 233, 184, .86); font-size: clamp(18px, 2vw, 32px); text-shadow: 0 0 28px rgba(229, 174, 82, .42); }
.space-line { position:absolute; left:12%; right:12%; top:50%; height:1px; background: linear-gradient(90deg, transparent, rgba(255,220,145,.82), transparent); box-shadow:0 0 24px rgba(229,174,82,.42); }

.stage-header, .presence-panel, .resource-panel, .proto-actions, .branches-panel, .evolution-panel, .progress-panel, .action-panel, .threshold-panel, .ring-panel, .bottom-nav, .music-player {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  filter: blur(3px);
}
.reveal { opacity: 1 !important; transform: translateY(0) !important; pointer-events: auto !important; filter: blur(0) !important; }
.stage-header.reveal, .presence-panel.reveal, .whisper.reveal { pointer-events: none !important; }

@media (max-width: 1100px) {
  .game { min-width: 0; }
  .resource-panel, .progress-panel, .action-panel, .threshold-panel, .ring-panel { width: 280px; }
  .branches-panel { width: 68vw; }
  .controls { width: 330px; }
}

:root {
  --text: rgba(255, 239, 206, 0.98);
  --muted: rgba(251, 230, 186, 0.84);
  --line: rgba(244, 203, 120, 0.42);
  --panel: rgba(7, 5, 2, 0.78);
  --panel-strong: rgba(8, 6, 3, 0.88);
}

.ui-block, .panel, .proto-action, .branch-card, .panel-action, .music-player, .volume-control, .control-row button, .mini-button, .bottom-nav {
  text-shadow: 0 1px 0 rgba(0,0,0,.9), 0 0 10px rgba(255, 203, 112, .18);
}

.panel,
.music-player,
.volume-control,
.control-row button,
.mini-button,
.bottom-nav,
.proto-action,
.branch-card,
.panel-action,
.stage-header,
.presence-panel,
.whisper,
.toast {
  box-shadow: 0 14px 42px rgba(0,0,0,.55), 0 0 30px rgba(255, 190, 90, .08), inset 0 0 0 1px rgba(255, 220, 150, .03);
}

.panel {
  background: linear-gradient(160deg, rgba(9, 7, 3, .86), rgba(2, 2, 2, .70));
  border-color: rgba(244, 203, 120, .34);
  backdrop-filter: blur(10px);
}

.panel-kicker {
  color: rgba(255, 213, 130, .78);
  text-shadow: 0 0 10px rgba(230, 170, 65, .20);
}
.panel-title {
  color: rgba(255, 232, 184, .96);
  text-shadow: 0 0 14px rgba(234, 180, 79, .24);
}
.small-note,
.gate-text,
.rate-line,
.branch-cost,
.branch-effect,
.panel-action small,
.music-top,
.ring-row,
.stage-header p {
  color: rgba(252, 232, 190, .88);
}

.stage-header {
  padding: 12px 20px 14px;
  border-radius: 20px;
  background: radial-gradient(circle at 50% 50%, rgba(0,0,0,.38), rgba(0,0,0,.14) 55%, transparent 100%);
  text-shadow: 0 0 10px rgba(0,0,0,.95), 0 0 24px rgba(231, 176, 73, .40);
}
.stage-header h1 {
  color: rgba(255, 235, 194, .98);
  text-shadow: 0 0 16px rgba(0,0,0,.96), 0 0 26px rgba(236, 180, 78, .34);
}
.stage-header p {
  text-shadow: 0 0 10px rgba(0,0,0,.95);
}

.presence-panel {
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(244, 203, 120, .26);
  background: rgba(0,0,0,.44);
  color: rgba(255, 234, 192, .96);
  text-shadow: 0 0 10px rgba(0,0,0,.95), 0 0 16px rgba(231, 176, 73, .18);
  backdrop-filter: blur(8px);
}

.resource-panel .energy-value,
.threshold-main,
#thresholdValue,
#energyValue {
  color: rgba(255, 238, 198, 1);
  text-shadow: 0 0 16px rgba(0,0,0,.92), 0 0 30px rgba(229, 173, 82, .44);
}

.proto-action {
  background: rgba(5, 4, 2, .72);
  border-color: rgba(244, 203, 120, .34);
  color: rgba(255, 236, 196, .98);
  box-shadow: 0 8px 30px rgba(0,0,0,.54), inset 0 0 22px rgba(231,176,73,.08);
}
.proto-action:hover {
  background: rgba(18, 12, 5, .84);
  border-color: rgba(255, 220, 145, .64);
}
.action-name { font-size: 14px; font-weight: 650; }
.action-detail {
  color: rgba(252, 232, 190, .88);
  text-shadow: 0 0 8px rgba(0,0,0,.9);
}

.branch-card {
  background: linear-gradient(180deg, rgba(10, 8, 4, .82), rgba(3, 2, 1, .66));
  border-color: rgba(244, 203, 120, .34);
  box-shadow: 0 12px 36px rgba(0,0,0,.50), inset 0 0 20px rgba(214, 154, 63, .08);
}
.branch-name,
.branch-level,
.branch-cost,
.branch-effect,
.branch-glyph {
  text-shadow: 0 0 10px rgba(0,0,0,.94);
}
.branch-name { color: rgba(255, 236, 196, .98); }
.branch-level { color: rgba(251, 231, 193, .96); }
.branch-cost { color: rgba(255, 223, 169, .94); }
.branch-effect { color: rgba(248, 230, 197, .90); }

.progress-panel .stage-node {
  border-color: rgba(244, 203, 120, .28);
  background: rgba(0,0,0,.56);
  color: rgba(255, 233, 191, .78);
  text-shadow: 0 0 8px rgba(0,0,0,.92);
}
.progress-panel .stage-node.done {
  color: rgba(255, 236, 196, .98);
  background: rgba(229, 168, 72, .22);
}
.progress-panel .stage-node.current {
  color: #fff7dd;
  background: rgba(229, 168, 72, .30);
  box-shadow: 0 0 20px rgba(229, 181, 86, .34);
}

.panel-action,
.control-row button,
.mini-button,
.volume-control,
.music-player,
.bottom-nav {
  background: rgba(0,0,0,.68);
  border-color: rgba(244, 203, 120, .34);
  color: rgba(255, 236, 196, .96);
}
.panel-action:hover,
.control-row button:hover,
.mini-button:hover,
.bottom-nav button:hover {
  color: rgba(255, 243, 214, 1);
}
.bottom-nav button {
  color: rgba(255, 234, 192, .88);
  text-shadow: 0 0 8px rgba(0,0,0,.94);
}

.whisper {
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(244, 203, 120, .22);
  background: rgba(0,0,0,.48);
  color: rgba(255, 237, 199, .96);
  text-shadow: 0 0 12px rgba(0,0,0,.96), 0 0 18px rgba(230, 169, 75, .22);
  backdrop-filter: blur(8px);
}
.toast {
  padding: 14px 22px;
  border-color: rgba(244, 203, 120, .38);
  background: rgba(3,3,3,.82);
  color: rgba(255, 241, 210, 1);
  text-shadow: 0 0 12px rgba(0,0,0,.96), 0 0 14px rgba(229, 167, 72, .20);
  box-shadow: 0 0 36px rgba(0,0,0,.60), 0 0 24px rgba(229, 167, 72, .12);
}

.progress-track, .mini-track {
  background: rgba(235, 199, 126, .14);
  border-color: rgba(235, 199, 126, .26);
}
.progress-fill, .mini-track > div {
  box-shadow: 0 0 18px rgba(225, 167, 70, .72);
}

.music-top, .music-label, .music-time, #volumeValue, .volume-control span {
  color: rgba(255, 234, 192, .94);
}

.space-transition p {
  padding: 18px 24px;
  border-radius: 20px;
  background: rgba(0,0,0,.36);
  text-shadow: 0 0 16px rgba(0,0,0,.96), 0 0 26px rgba(229, 174, 82, .34);
}

.bg-layer {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  filter: brightness(1) saturate(1.04) contrast(1.04);
  transform: scale(1);
  image-rendering: auto;
}
.bg-layer.visible {
  opacity: 1;
  transform: scale(1);
}

.background-harmony {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 198, 91, 0.025) 0%, rgba(238, 183, 76, 0.012) 28%, transparent 62%, rgba(0,0,0,.12) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.08) 0%, transparent 18%, transparent 82%, rgba(0,0,0,.14) 100%),
    linear-gradient(to right, rgba(0,0,0,.10), transparent 12%, transparent 88%, rgba(0,0,0,.10));
}

#fxCanvas {
  opacity: 1;
  filter: brightness(1.46) contrast(1.06) drop-shadow(0 0 12px rgba(255, 203, 112, .30));
}

.panel,
.branch-card,
.proto-action,
.music-player,
.volume-control,
.control-row button,
.mini-button,
.bottom-nav,
.presence-panel,
.whisper,
.toast {
  background-color: rgba(3, 3, 2, .72);
  backdrop-filter: blur(9px);
  border-color: rgba(255, 216, 139, .38);
  text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 0 12px rgba(0,0,0,.75);
}

.stage-header {
  background: radial-gradient(circle at 50% 50%, rgba(0,0,0,.45), rgba(0,0,0,.18) 58%, transparent 100%);
  text-shadow: 0 0 14px rgba(0,0,0,.95), 0 0 26px rgba(231, 176, 73, .32);
}

.stage-header h1,
.panel-title,
.energy-value,
.threshold-main,
.branch-name,
.action-name {
  color: rgba(255, 238, 202, 1);
}

.small-note,
.gate-text,
.rate-line,
.branch-cost,
.branch-effect,
.action-detail,
.stage-header p,
.presence-panel,
.ring-row,
.music-top,
.music-time,
.volume-control span {
  color: rgba(255, 231, 188, .90);
}

.game.stage-0 .background-harmony {
  background: transparent;
}
.game.stage-0 #fxCanvas,
.game.stage-0 .core-button {
  opacity: 0 !important;
}

.proto-action { white-space: normal; }
.action-detail { font-size: 12px; line-height: 1.35; }
.branch-effect { font-size: 12px; line-height: 1.38; }
.branch-cost { font-size: 12px; }
.panel-action small { font-size: 12px; }
@media (max-width: 1100px) {
  .branches-panel { width: min(960px, 88vw); }
  .proto-actions { width: min(900px, 88vw); }
  .proto-action { min-width: 220px; max-width: 280px; }
}

.evolution-panel {
  top: clamp(92px, 13vh, 142px);
  right: clamp(28px, 4.8vw, 76px);
  width: clamp(330px, 27vw, 430px);
  padding: 22px 24px;
  max-height: calc(100vh - 260px);
  overflow: auto;
}
.evolution-section {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 216, 139, .16);
}
.evolution-section:first-of-type { border-top: 0; padding-top: 8px; }
.evolution-section.locked-section { opacity: .48; }
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  letter-spacing: .08em;
  color: rgba(255, 238, 202, .96);
}
.section-head strong {
  font-weight: 500;
  color: rgba(255, 220, 150, .94);
  white-space: nowrap;
}
.fragment-track { margin: 10px 0 9px; }
.fragment-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.fragment-button {
  min-height: 56px;
  padding: 9px 10px;
  border: 1px solid rgba(244, 203, 120, .30);
  border-radius: 12px;
  background: rgba(0,0,0,.48);
  color: rgba(255, 236, 196, .96);
  cursor: pointer;
  text-align: left;
  box-shadow: inset 0 0 16px rgba(231,176,73,.045);
}
.fragment-button:hover { border-color: rgba(255, 220, 145, .62); background: rgba(18, 12, 5, .74); }
.fragment-button:disabled { opacity: .36; cursor: default; }
.fragment-button span { display: block; font-size: 12px; letter-spacing: .06em; }
.fragment-button small { display: block; margin-top: 5px; color: rgba(255, 231, 188, .86); font-size: 11px; line-height: 1.25; }
.phenomenon-name {
  margin-top: 9px;
  color: rgba(255, 238, 202, 1);
  font-size: 13px;
  letter-spacing: .08em;
  text-shadow: 0 0 12px rgba(229, 173, 82, .28);
}
.panel-action.compact {
  margin-top: 10px;
  padding: 10px 12px;
}
.pre-row {
  display: grid;
  grid-template-columns: 78px 1fr 42px;
  align-items: center;
  gap: 9px;
  margin-top: 10px;
  font-size: 12px;
  color: rgba(255, 231, 188, .90);
}
.pre-row span:last-child { text-align: right; }
.game.stage-7 .progress-panel { top: auto; bottom: clamp(82px, 11vh, 130px); }
@media (max-height: 760px) {
  .evolution-panel { max-height: calc(100vh - 210px); }
  .fragment-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fragment-button { min-height: 52px; padding: 8px; }
  .evolution-section { margin-top: 12px; padding-top: 10px; }
}

:root {
  --ui-left: clamp(20px, 3.2vw, 54px);
  --ui-right: clamp(20px, 3.2vw, 54px);
  --right-col: clamp(300px, 24vw, 380px);
}

.stage-header {
  top: clamp(12px, 2vh, 24px);
  padding: 9px 18px 11px;
  max-width: min(580px, 48vw);
}
.stage-header h1 { font-size: clamp(13px, 1.18vw, 21px); }
.stage-header p { margin-top: 7px; font-size: clamp(9px, .74vw, 12px); }
.ornament { height: 8px; margin-bottom: 8px; }

.resource-panel {
  top: clamp(74px, 10vh, 112px);
  left: var(--ui-left);
  width: clamp(280px, 22vw, 350px);
  padding: 18px 20px 16px;
}
.energy-value { margin-top: 8px; font-size: clamp(30px, 3.2vw, 50px); }
.rate-line { margin: 4px 0 6px; font-size: 11px; }
.resource-subline { margin-bottom: 10px; font-size: 10.5px; }
#coherenceText { margin-top: 9px; }

.proto-actions {
  width: min(730px, 58vw);
  height: min(335px, 42vh);
  top: 52%;
}
.proto-action {
  min-width: 215px;
  max-width: 255px;
  padding: 11px 14px 10px;
  border-radius: 16px;
}
.proto-action[data-action="feed"] { top: -2%; }
.proto-action[data-action="stabilize"] { right: 0; top: 56%; }
.proto-action[data-action="resonate"] { left: 0; top: 56%; }
.action-name { font-size: 13px; letter-spacing: .07em; }
.action-detail {
  margin-top: 5px;
  font-size: 11.5px;
  line-height: 1.22;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.branches-panel {
  bottom: clamp(56px, 8vh, 86px);
  width: min(880px, 66vw);
  gap: 10px;
}
.branch-card {
  min-height: 112px;
  padding: 11px 12px 10px;
  border-radius: 15px;
}
.branch-glyph { font-size: 16px; }
.branch-name { margin-top: 4px; font-size: 10.5px; letter-spacing: .14em; }
.branch-level { margin-top: 4px; font-size: 11px; }
.branch-cost { margin-top: 5px; font-size: 11px; }
.branch-effect {
  margin-top: 5px;
  font-size: 11px;
  line-height: 1.22;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.evolution-panel {
  top: clamp(74px, 10vh, 112px);
  right: var(--ui-right);
  width: var(--right-col);
  padding: 16px 18px;
  max-height: calc(100vh - 250px);
  overflow: auto;
}
.evolution-panel .panel-title,
.progress-panel .panel-title,
.threshold-panel .panel-title,
.ring-panel .panel-title,
.action-panel .panel-title { font-size: 11px; letter-spacing: .22em; }
.evolution-section { margin-top: 11px; padding-top: 10px; }
.evolution-section:first-of-type { padding-top: 5px; }
.section-head { font-size: 11px; }
.small-note, .gate-text { font-size: 11px; line-height: 1.28; }
.fragment-track { margin: 7px 0 6px; }
.fragment-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.fragment-button { min-height: 48px; padding: 7px 6px; text-align: center; border-radius: 10px; }
.fragment-button span { font-size: 10px; letter-spacing: .03em; }
.fragment-button small { margin-top: 4px; font-size: 9.5px; line-height: 1.12; }
.phenomenon-name { margin-top: 6px; font-size: 12px; }
.panel-action.compact { margin-top: 7px; padding: 8px 10px; }
.pre-row, .ring-row { margin-top: 8px; font-size: 11px; }
.pre-row { grid-template-columns: 70px 1fr 36px; }
.ring-row { grid-template-columns: 72px 1fr 40px; }

.progress-panel,
.threshold-panel,
.ring-panel {
  right: var(--ui-right);
  width: var(--right-col);
  padding: 16px 18px;
}
.game.stage-8 .progress-panel {
  top: clamp(74px, 10vh, 112px);
  bottom: auto;
}
.game.stage-8 .threshold-panel {
  top: clamp(265px, 39vh, 330px);
  bottom: auto;
}
.game.stage-8 .action-panel {
  top: clamp(315px, 48vh, 390px);
  bottom: auto;
  left: var(--ui-left);
  width: clamp(260px, 21vw, 330px);
  padding: 15px 17px;
}
.game.stage-9 .ring-panel {
  top: clamp(88px, 13vh, 130px);
  bottom: auto;
}
.game.stage-9 .progress-panel,
.game.stage-9 .action-panel,
.game.stage-9 .threshold-panel { display: none !important; }

.stage-nodes { margin: 12px 0 9px; gap: 4px; }
.stage-node { height: 22px; font-size: 9px; }
.threshold-main { margin: 10px 0 10px; font-size: clamp(24px, 2.4vw, 34px); }
.panel-action { margin-top: 9px; padding: 10px 11px; border-radius: 11px; }
.panel-action small { font-size: 10.5px; line-height: 1.15; }

.bottom-nav { display: none !important; }
.whisper { bottom: 18px; max-width: min(640px, 54vw); font-size: clamp(11px, .8vw, 14px); }
.presence-panel { bottom: clamp(48px, 7vh, 80px); }
.controls { width: 320px; right: 14px; bottom: 12px; }
.music-player { padding: 8px 10px; }
.music-top { font-size: 9px; }
.music-row { margin-top: 6px; }
.control-row button, .mini-button { padding: 7px 10px; font-size: 10px; }
.volume-control { height: 31px; font-size: 10px; }

.game.stage-8 .branches-panel,
.game.stage-9 .branches-panel {
  width: min(660px, 48vw);
  bottom: clamp(52px, 7vh, 78px);
}
.game.stage-8 .branch-card,
.game.stage-9 .branch-card {
  min-height: 88px;
  padding: 8px 9px;
}
.game.stage-8 .branch-glyph,
.game.stage-9 .branch-glyph { display: none; }
.game.stage-8 .branch-effect,
.game.stage-9 .branch-effect { -webkit-line-clamp: 1; }

@media (max-height: 760px) {
  .stage-header { top: 8px; padding: 7px 16px 8px; }
  .resource-panel { top: 64px; padding: 14px 17px; }
  .evolution-panel { top: 64px; max-height: calc(100vh - 220px); }
  .game.stage-8 .progress-panel { top: 64px; }
  .game.stage-8 .threshold-panel { top: 238px; }
  .game.stage-8 .action-panel { top: 292px; }
  .branches-panel { bottom: 48px; }
  .branch-card { min-height: 96px; }
  .proto-actions { height: 300px; }
  .controls { transform: scale(.94); transform-origin: bottom right; }
}

@media (max-width: 1180px) {
  :root { --right-col: 310px; }
  .proto-actions { width: min(650px, 55vw); }
  .proto-action { min-width: 190px; max-width: 225px; }
  .game.stage-8 .branches-panel,
  .game.stage-9 .branches-panel { width: min(560px, 44vw); }
  .game.stage-8 .action-panel { width: 280px; }
}

.resource-subline,
#coherenceText {
  display: none !important;
}
.resource-panel .progress-track {
  margin-top: 12px;
}

.proto-actions {
  width: min(940px, 70vw) !important;
  height: min(460px, 52vh) !important;
  top: 50% !important;
  pointer-events: none !important;
}
.proto-action {
  --action-size: clamp(132px, 10.2vw, 164px);
  width: var(--action-size) !important;
  height: var(--action-size) !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 0 12px !important;
  border-radius: 50% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: stretch !important;
  align-items: center !important;
  overflow: hidden !important;
  text-align: center !important;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 228, 164, .13), transparent 56%),
    rgba(5, 4, 2, .40) !important;
  border-color: rgba(235, 199, 126, .30) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.50), inset 0 0 22px rgba(223, 164, 67, .055) !important;
  pointer-events: auto !important;
}
.proto-action::after {
  content: '';
  position: absolute;
  left: 18%;
  right: 18%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 224, 149, .70), transparent);
  box-shadow: 0 0 10px rgba(229, 174, 82, .34);
  pointer-events: none;
}
.proto-action:hover {
  transform: scale(1.035) !important;
  border-color: rgba(255, 220, 146, .55) !important;
}
.proto-action:active {
  transform: scale(.97) !important;
}
.proto-action:disabled {
  opacity: .34 !important;
  transform: none !important;
}
.proto-action[data-action="feed"] {
  left: 50% !important;
  top: -12% !important;
  translate: -50% 0 !important;
}
.proto-action[data-action="resonate"] {
  left: -4% !important;
  top: 58% !important;
  translate: 0 -50% !important;
}
.proto-action[data-action="stabilize"] {
  right: -4% !important;
  top: 58% !important;
  translate: 0 -50% !important;
}
.action-name {
  flex: 1 1 50% !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 8px 4px 3px !important;
  font-size: clamp(10.5px, .82vw, 13px) !important;
  line-height: 1.12 !important;
  letter-spacing: .045em !important;
  color: rgba(255, 238, 202, .92) !important;
}
.action-detail {
  flex: 1 1 50% !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 4px 4px 8px !important;
  font-size: clamp(9px, .68vw, 10.8px) !important;
  line-height: 1.16 !important;
  color: rgba(243, 220, 174, .78) !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: initial !important;
  overflow: visible !important;
}

@media (max-width: 1180px) {
  .proto-actions { width: min(760px, 62vw) !important; }
  .proto-action { --action-size: clamp(118px, 9.6vw, 142px); }
  .proto-action[data-action="resonate"] { left: -2% !important; }
  .proto-action[data-action="stabilize"] { right: -2% !important; }
}

@media (max-height: 760px) {
  .proto-actions { height: min(380px, 48vh) !important; }
  .proto-action { --action-size: clamp(112px, 9vw, 136px); }
  .proto-action[data-action="feed"] { top: -16% !important; }
  .proto-action[data-action="resonate"],
  .proto-action[data-action="stabilize"] { top: 60% !important; }
}

.proto-actions {
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  translate: none !important;
  pointer-events: none !important;
  z-index: 8 !important;
}
.proto-action {
  --action-size: clamp(122px, 8.8vw, 146px);
  width: var(--action-size) !important;
  height: var(--action-size) !important;
  min-width: 0 !important;
  max-width: none !important;
  position: absolute !important;
  right: auto !important;
  left: var(--orbit-left, 50%) !important;
  top: var(--orbit-top, 50%) !important;
  translate: -50% -50% !important;
  transform: none !important;
  pointer-events: auto !important;
  z-index: 9 !important;
}
.proto-action:hover {
  transform: scale(1.035) !important;
  border-color: rgba(255, 220, 146, .62) !important;
}
.proto-action:active {
  transform: scale(.97) !important;
}
.proto-action:disabled {
  transform: none !important;
}
.proto-action[data-action="feed"],
.proto-action[data-action="resonate"],
.proto-action[data-action="stabilize"] {
  right: auto !important;
  left: var(--orbit-left, 50%) !important;
  top: var(--orbit-top, 50%) !important;
  translate: -50% -50% !important;
}

@media (max-height: 760px), (max-width: 1180px) {
  .proto-action { --action-size: clamp(112px, 8.3vw, 134px); }
}

.controls {
  align-items: flex-end !important;
}
.music-player {
  width: min(286px, 100%) !important;
  align-self: flex-end !important;
  box-sizing: border-box !important;
  padding: 6px 8px !important;
  border-radius: 12px !important;
}
.music-top {
  font-size: 8.6px !important;
  line-height: 1 !important;
  letter-spacing: .055em !important;
}
.music-row {
  margin-top: 4px !important;
  gap: 6px !important;
}
.music-seek {
  margin-top: 3px !important;
  height: 4px !important;
}
.music-player .mini-button {
  padding: 5px 8px !important;
  font-size: 9px !important;
  line-height: 1 !important;
}
@media (max-height: 760px) {
  .music-player {
    width: min(268px, 100%) !important;
    padding: 5px 7px !important;
  }
}

.evolution-gauge-label,
.evolution-gauge-status {
  display: none;
}
.resource-panel.evolution-gauge-active .evolution-gauge-label {
  display: block;
  margin: 11px 0 5px;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: rgba(255, 229, 170, .78);
  text-shadow: 0 0 13px rgba(229, 174, 82, .22);
}
.resource-panel.evolution-gauge-active .evolution-gauge-status {
  display: block;
  margin-top: 7px;
  font-size: 11.5px;
  line-height: 1.35;
  white-space: normal;
  color: rgba(249, 224, 175, .72);
}
.resource-panel.evolution-gauge-active .evolution-gauge-track {
  height: 8px;
  margin-top: 8px;
  border-color: rgba(255, 219, 142, .38);
  background: rgba(255, 219, 142, .10);
  box-shadow:
    0 0 16px rgba(229, 174, 82, .22),
    inset 0 0 9px rgba(255, 219, 142, .10);
}
.resource-panel.evolution-gauge-active .evolution-gauge-track .progress-fill {
  background: linear-gradient(90deg, rgba(190, 125, 35, .72), rgba(255, 229, 159, 1));
  box-shadow: 0 0 20px rgba(255, 211, 119, .66);
}
.resource-panel.evolution-gauge-pulse-soft .evolution-gauge-track {
  animation: evolutionGaugePulseSoft 2.2s ease-in-out infinite;
}
.resource-panel.evolution-gauge-pulse-medium .evolution-gauge-track {
  animation: evolutionGaugePulseMedium 1.65s ease-in-out infinite;
}
.resource-panel.evolution-gauge-pulse-high .evolution-gauge-track {
  animation: evolutionGaugePulseHigh 1.05s ease-in-out infinite;
}
.resource-panel.evolution-gauge-ready .evolution-gauge-status {
  color: rgba(255, 236, 190, .96);
  text-shadow: 0 0 16px rgba(255, 207, 111, .60);
}
@keyframes evolutionGaugePulseSoft {
  0%, 100% {
    box-shadow:
      0 0 16px rgba(229, 174, 82, .22),
      inset 0 0 9px rgba(255, 219, 142, .10);
  }
  50% {
    box-shadow:
      0 0 22px rgba(255, 214, 127, .34),
      inset 0 0 10px rgba(255, 232, 174, .14);
  }
}
@keyframes evolutionGaugePulseMedium {
  0%, 100% {
    box-shadow:
      0 0 18px rgba(229, 174, 82, .26),
      inset 0 0 10px rgba(255, 219, 142, .12);
  }
  50% {
    box-shadow:
      0 0 30px rgba(255, 214, 127, .50),
      inset 0 0 13px rgba(255, 232, 174, .19);
  }
}
@keyframes evolutionGaugePulseHigh {
  0%, 100% {
    box-shadow:
      0 0 20px rgba(229, 174, 82, .32),
      inset 0 0 11px rgba(255, 219, 142, .16);
  }
  50% {
    box-shadow:
      0 0 40px rgba(255, 214, 127, .72),
      inset 0 0 17px rgba(255, 232, 174, .28);
  }
}

.proto-actions.reveal .proto-action {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  transition: transform .16s ease, border-color .18s ease, background .18s ease !important;
}
.proto-actions.reveal .proto-action:disabled {
  opacity: .74 !important;
  cursor: default !important;
}

.proto-actions.reveal .proto-action,
.proto-actions.reveal .proto-action:disabled {
  opacity: 1 !important;
}

.proto-action {
  border-color: rgba(235, 199, 126, .28) !important;
  box-shadow:
    0 12px 34px rgba(0,0,0,.50),
    inset 0 0 22px rgba(223, 164, 67, .055) !important;
}

.proto-action.action-ready {
  border-color: rgba(255, 219, 132, .92) !important;
  box-shadow:
    0 0 0 1px rgba(255, 222, 144, .28),
    0 0 22px rgba(255, 203, 94, .44),
    0 12px 34px rgba(0,0,0,.50),
    inset 0 0 24px rgba(255, 205, 111, .12) !important;
}

.proto-action.action-ready::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid rgba(255, 226, 153, .58);
  box-shadow: 0 0 18px rgba(255, 205, 103, .42);
  pointer-events: none;
}

.proto-action.action-ready::after {
  background: linear-gradient(90deg, transparent, rgba(255, 231, 164, .92), transparent);
  box-shadow: 0 0 14px rgba(255, 207, 106, .60);
}

.objective-panel {
  position: absolute;
  z-index: 9;
  right: clamp(26px, 4vw, 70px);
  top: clamp(160px, 20vh, 250px);
  width: clamp(310px, 28vw, 460px);
  padding: 20px 20px 18px;
}
.objective-hint {
  margin-top: 8px;
  margin-bottom: 14px;
  line-height: 1.45;
  font-size: 12px;
}
.objective-list {
  display: grid;
  gap: 8px;
}
.objective-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border: 1px solid rgba(229, 191, 115, .16);
  border-radius: 12px;
  background: rgba(0,0,0,.20);
  color: rgba(246, 228, 187, .70);
  font-size: 12px;
}
.objective-row strong {
  color: rgba(246, 228, 187, .84);
  font-weight: 700;
  letter-spacing: .02em;
}
.objective-row strong.ok {
  color: rgba(255, 231, 164, .96);
  text-shadow: 0 0 12px rgba(255, 203, 112, .45);
}
.objective-ready {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 999px;
  text-align: center;
  border: 1px solid rgba(229, 191, 115, .18);
  color: rgba(246, 228, 187, .58);
  background: rgba(0,0,0,.20);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.objective-ready.ok {
  border-color: rgba(255, 222, 145, .55);
  color: rgba(255, 239, 205, .98);
  background: rgba(229, 172, 78, .14);
  box-shadow: 0 0 22px rgba(255, 195, 91, .18);
}

.fragment-grid {
  display: none !important;
}
.phase1-hidden {
  display: none !important;
}
.constellation-grid {
  position: relative;
  height: 124px;
  margin-top: 14px;
  border-radius: 18px;
  border: 1px solid rgba(229, 191, 115, .16);
  background:
    radial-gradient(circle at 50% 45%, rgba(229, 191, 115, .08), transparent 62%),
    rgba(0,0,0,.20);
}
.constellation-dot {
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 999px;
  border: 1px solid rgba(229, 191, 115, .34);
  background: rgba(0,0,0,.55);
  box-shadow: inset 0 0 8px rgba(229, 191, 115, .08);
}
.constellation-dot:nth-child(1) { left: 50%; top: 18%; transform: translate(-50%, -50%); }
.constellation-dot:nth-child(2) { left: 25%; top: 42%; transform: translate(-50%, -50%); }
.constellation-dot:nth-child(3) { left: 75%; top: 42%; transform: translate(-50%, -50%); }
.constellation-dot:nth-child(4) { left: 36%; top: 75%; transform: translate(-50%, -50%); }
.constellation-dot:nth-child(5) { left: 64%; top: 75%; transform: translate(-50%, -50%); }
.constellation-dot.lit {
  background: radial-gradient(circle, #fff3cf 0%, #e5b760 58%, rgba(229, 191, 115, .2) 100%);
  border-color: rgba(255, 236, 184, .85);
  box-shadow: 0 0 14px rgba(255, 207, 116, .72), 0 0 32px rgba(255, 196, 85, .22);
}
.constellation-dot.ready {
  border-color: rgba(255, 226, 154, .80);
  box-shadow: 0 0 16px rgba(255, 207, 116, .46);
  animation: constellationReady 1.4s ease-in-out infinite;
}
@keyframes constellationReady {
  0%,100% { opacity: .65; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.22); }
}

.game.stage-7 .evolution-panel {
  width: clamp(260px, 22vw, 340px);
}
.game.stage-7 .phenomenon-section,
.game.stage-7 #phenomenonSection {
  display: none !important;
}
.game.stage-8 .objective-panel,
.game.stage-9 .objective-panel {
  top: clamp(142px, 18vh, 230px);
}
.game.stage-8 .threshold-panel {
  right: clamp(26px, 4vw, 70px);
  bottom: clamp(80px, 11vh, 128px);
}
.game.stage-8 .action-panel {
  left: clamp(26px, 4vw, 70px);
  bottom: clamp(80px, 11vh, 128px);
  width: clamp(240px, 22vw, 320px);
}
.game.stage-9 .ring-panel {
  right: clamp(26px, 4vw, 70px);
  bottom: clamp(82px, 12vh, 132px);
  width: clamp(280px, 24vw, 380px);
}

@media (max-width: 1180px) {
  .objective-panel {
    width: 300px;
    right: 22px;
  }
  .game.stage-8 .action-panel {
    width: 270px;
  }
}

#preThresholdSection { display: none !important; }

.objective-panel:not(.reveal) {
  opacity: 0 !important;
  transform: translateY(10px) !important;
  pointer-events: none !important;
  filter: blur(3px) !important;
}
.objective-panel.reveal {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
  filter: blur(0) !important;
}

.objective-panel {
  left: var(--ui-left) !important;
  right: auto !important;
  top: clamp(260px, 31vh, 338px) !important;
  width: clamp(280px, 22vw, 350px) !important;
  max-height: calc(100vh - 390px);
  overflow: auto;
}

.game:not(.stage-7) .evolution-panel {
  opacity: 0 !important;
  pointer-events: none !important;
  filter: blur(3px) !important;
}

.game.stage-7 .evolution-panel {
  right: var(--ui-right) !important;
  left: auto !important;
  top: clamp(92px, 12vh, 140px) !important;
  width: clamp(300px, 24vw, 380px) !important;
}
.game.stage-7 #phenomenonSection,
.game.stage-7 #preThresholdSection {
  display: none !important;
}

.game.stage-8 .action-panel {
  top: auto !important;
}

@media (max-width: 1180px) {
  .objective-panel {
    left: var(--ui-left) !important;
    right: auto !important;
    width: 300px !important;
    top: 258px !important;
  }
}

.objective-panel {
  top: clamp(310px, 37vh, 400px) !important;
  max-height: calc(100vh - 430px) !important;
}

.game:not(.stage-7):not(.stage-8):not(.stage-9) .constellation-dot {
  background: rgba(0,0,0,.55) !important;
  border-color: rgba(229, 191, 115, .34) !important;
  box-shadow: inset 0 0 8px rgba(229, 191, 115, .08) !important;
  animation: none !important;
}
.game:not(.stage-7):not(.stage-8):not(.stage-9) .constellation-dot.lit,
.game:not(.stage-7):not(.stage-8):not(.stage-9) .constellation-dot.ready {
  background: rgba(0,0,0,.55) !important;
  border-color: rgba(229, 191, 115, .34) !important;
  box-shadow: inset 0 0 8px rgba(229, 191, 115, .08) !important;
  animation: none !important;
}

@media (max-width: 1180px) {
  .objective-panel {
    top: 315px !important;
    max-height: calc(100vh - 430px) !important;
  }
}

.game.stage-8 .threshold-panel {
  right: var(--ui-right) !important;
  left: auto !important;
  top: clamp(205px, 24vh, 260px) !important;
  bottom: auto !important;
  width: clamp(285px, 24vw, 376px) !important;
  max-height: 190px !important;
  overflow: hidden !important;
  z-index: 9 !important;
}

.game.stage-8 .action-panel {
  right: var(--ui-right) !important;
  left: auto !important;
  top: clamp(405px, 44vh, 470px) !important;
  bottom: auto !important;
  width: clamp(285px, 24vw, 376px) !important;
  max-height: 150px !important;
  overflow: hidden !important;
  z-index: 9 !important;
}

.game.stage-8 .action-panel .panel-action {
  margin-top: 10px !important;
}

@media (max-height: 760px) {
  .game.stage-8 .threshold-panel {
    top: 168px !important;
    max-height: 170px !important;
  }
  .game.stage-8 .action-panel {
    top: 348px !important;
    max-height: 138px !important;
  }
}

@media (max-width: 1180px) {
  .game.stage-8 .threshold-panel,
  .game.stage-8 .action-panel {
    right: 22px !important;
    width: 300px !important;
  }
}

.game.stage-8 .action-panel {
  display: none !important;
}
.game.stage-8 .threshold-panel {
  right: var(--ui-right) !important;
  left: auto !important;
  top: clamp(150px, 17vh, 210px) !important;
  bottom: auto !important;
  width: clamp(300px, 25vw, 390px) !important;
  max-height: none !important;
  overflow: visible !important;
  z-index: 9 !important;
}
.game.stage-8 .threshold-panel .threshold-main {
  margin-top: 8px !important;
}
.game.stage-8 .threshold-panel .condense-core-button {
  margin-top: 14px !important;
}
.game.stage-8 .threshold-panel .threshold-next-button {
  margin-top: 10px !important;
}
.game.stage-8 .threshold-panel #deepCost,
.game.stage-8 .threshold-panel #thresholdHelp {
  margin-top: 8px !important;
  line-height: 1.25 !important;
}

@media (max-height: 760px) {
  .game.stage-8 .threshold-panel {
    top: 132px !important;
    width: 320px !important;
  }
  .game.stage-8 .threshold-panel .panel-action {
    padding: 9px 10px !important;
  }
}

@media (max-width: 1180px) {
  .game.stage-8 .threshold-panel {
    right: 22px !important;
    width: 310px !important;
  }
}

.game.stage-9 .ring-panel {
  width: clamp(260px, 18vw, 330px) !important;
  min-height: 0 !important;
  padding: 16px 16px 14px !important;
  top: clamp(122px, 15vh, 168px) !important;
  right: clamp(20px, 3.2vw, 48px) !important;
  bottom: auto !important;
  max-height: none !important;
}

.game.stage-9 .ring-panel .panel-kicker {
  margin-bottom: 4px !important;
  font-size: 10px !important;
}

.game.stage-9 .ring-panel .panel-title {
  margin-bottom: 10px !important;
  font-size: clamp(14px, 1.1vw, 18px) !important;
}

.game.stage-9 .ring-row {
  grid-template-columns: 72px 1fr 38px !important;
  gap: 8px !important;
  margin: 7px 0 !important;
  font-size: 11px !important;
  min-height: 18px !important;
}

.game.stage-9 .ring-row .mini-track,
.game.stage-9 .ring-panel .mini-track {
  height: 4px !important;
}

.game.stage-9 #openSpace {
  margin-top: 12px !important;
  padding: 10px 12px !important;
  min-height: 0 !important;
}

.game.stage-9 #openSpace span {
  font-size: 12px !important;
  letter-spacing: .08em !important;
}

.game.stage-9 #openSpace small {
  font-size: 10.5px !important;
  line-height: 1.18 !important;
}

@media (max-height: 760px) {
  .game.stage-9 .ring-panel {
    top: 112px !important;
    padding: 13px 14px 12px !important;
  }
  .game.stage-9 .ring-row {
    margin: 5px 0 !important;
  }
}

:root {
  --ga-side-gap: clamp(24px, 3.2vw, 54px);
  --ga-panel-top: clamp(132px, 15vh, 176px);
  --ga-side-col: clamp(300px, 24vw, 380px);
  --ga-panel-gap: 18px;
  --ga-resource-height: clamp(214px, 25vh, 252px);
}

.resource-panel {
  left: var(--ga-side-gap) !important;
  right: auto !important;
  top: var(--ga-panel-top) !important;
  width: var(--ga-side-col) !important;
  min-height: var(--ga-resource-height) !important;
  box-sizing: border-box !important;
}

.objective-panel {
  left: var(--ga-side-gap) !important;
  right: auto !important;
  top: calc(var(--ga-panel-top) + var(--ga-resource-height) + var(--ga-panel-gap)) !important;
  width: var(--ga-side-col) !important;
  max-height: calc(100vh - (var(--ga-panel-top) + var(--ga-resource-height) + var(--ga-panel-gap) + 94px)) !important;
  box-sizing: border-box !important;
}

.game.stage-7 .evolution-panel,
.game.stage-8 .threshold-panel,
.game.stage-9 .ring-panel {
  right: var(--ga-side-gap) !important;
  left: auto !important;
  top: var(--ga-panel-top) !important;
  bottom: auto !important;
  width: var(--ga-side-col) !important;
  box-sizing: border-box !important;
}

.game.stage-9 .ring-panel {
  min-height: 0 !important;
  max-height: none !important;
  padding: 16px 16px 14px !important;
}

.game.stage-8 .threshold-panel {
  max-height: none !important;
  overflow: visible !important;
}

.game.stage-8 .action-panel,
.game.stage-9 .action-panel,
.game.stage-9 .progress-panel,
.game.stage-9 .threshold-panel {
  display: none !important;
}

@media (max-height: 760px) {
  :root {
    --ga-panel-top: 104px;
    --ga-resource-height: 196px;
    --ga-panel-gap: 14px;
  }

  .resource-panel {
    min-height: var(--ga-resource-height) !important;
  }

  .objective-panel {
    max-height: calc(100vh - (var(--ga-panel-top) + var(--ga-resource-height) + var(--ga-panel-gap) + 76px)) !important;
  }

  .game.stage-7 .evolution-panel,
  .game.stage-8 .threshold-panel,
  .game.stage-9 .ring-panel {
    top: var(--ga-panel-top) !important;
  }
}

@media (max-width: 1180px) {
  :root {
    --ga-side-gap: 22px;
    --ga-side-col: 310px;
  }

  .resource-panel,
  .objective-panel {
    width: var(--ga-side-col) !important;
  }

  .game.stage-7 .evolution-panel,
  .game.stage-8 .threshold-panel,
  .game.stage-9 .ring-panel {
    width: var(--ga-side-col) !important;
    right: var(--ga-side-gap) !important;
  }
}

.controls {
  right: clamp(18px, 2.8vw, 44px) !important;
  bottom: clamp(16px, 2.4vh, 28px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 8px !important;
}

.music-player {
  width: clamp(286px, 23vw, 352px) !important;
  min-height: 0 !important;
  padding: 9px 10px 8px !important;
  border-radius: 15px !important;
  box-sizing: border-box !important;
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 224, 153, .10), transparent 46%),
    linear-gradient(180deg, rgba(14, 10, 4, .64), rgba(3, 2, 1, .46)) !important;
  border: 1px solid rgba(231, 192, 111, .22) !important;
  box-shadow:
    0 12px 34px rgba(0, 0, 0, .42),
    inset 0 0 22px rgba(229, 169, 73, .045) !important;
  backdrop-filter: blur(9px) !important;
}

.music-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 0 5px !important;
}

.music-title {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0 !important;
}

.music-dot {
  width: 7px !important;
  height: 7px !important;
  flex: 0 0 7px !important;
  border-radius: 999px !important;
  background: radial-gradient(circle, #fff1bd 0%, #e8b766 42%, rgba(214, 139, 42, .26) 100%) !important;
  box-shadow: 0 0 12px rgba(232, 180, 89, .72) !important;
}

.music-label {
  font-size: 10px !important;
  line-height: 1 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: rgba(255, 235, 190, .86) !important;
}

.music-time {
  flex: 0 0 auto !important;
  font-size: 10px !important;
  line-height: 1 !important;
  letter-spacing: .045em !important;
  color: rgba(246, 223, 176, .58) !important;
  text-align: right !important;
}

.music-seek {
  display: block !important;
  width: 100% !important;
  height: 5px !important;
  margin: 0 0 7px !important;
  accent-color: rgba(239, 197, 111, .95) !important;
}

.music-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin: 0 !important;
}

.music-row .mini-button {
  width: 100% !important;
  min-height: 26px !important;
  padding: 6px 8px !important;
  border-radius: 999px !important;
  font-size: 9.5px !important;
  line-height: 1 !important;
  letter-spacing: .08em !important;
  text-align: center !important;
  background: rgba(8, 6, 3, .44) !important;
  border: 1px solid rgba(229, 191, 115, .22) !important;
  color: rgba(246, 226, 182, .74) !important;
}

.music-row .mini-button.active {
  border-color: rgba(246, 205, 128, .52) !important;
  color: rgba(255, 236, 196, .92) !important;
  box-shadow: inset 0 0 14px rgba(236, 182, 85, .08), 0 0 12px rgba(230, 171, 73, .12) !important;
}

.control-row {
  width: clamp(286px, 23vw, 352px) !important;
  box-sizing: border-box !important;
  justify-content: flex-end !important;
}

@media (max-height: 760px) {
  .music-player {
    width: clamp(276px, 22vw, 338px) !important;
    padding: 7px 9px 7px !important;
  }

  .music-head {
    margin-bottom: 4px !important;
  }

  .music-seek {
    margin-bottom: 6px !important;
  }

  .music-row .mini-button {
    min-height: 24px !important;
    padding: 5px 7px !important;
    font-size: 9px !important;
  }

  .control-row {
    width: clamp(276px, 22vw, 338px) !important;
  }
}

.controls {
  right: clamp(18px, 2.8vw, 44px) !important;
  bottom: clamp(16px, 2.4vh, 28px) !important;
  align-items: flex-end !important;
}

.music-player,
.control-row {
  width: clamp(250px, 19.2vw, 306px) !important;
  max-width: calc(100vw - 36px) !important;
  box-sizing: border-box !important;
}

.music-player {
  padding: 9px 10px 8px !important;
  overflow: hidden !important;
}

.music-head {
  margin: 0 0 8px !important;
  min-height: 13px !important;
  align-items: center !important;
}

.music-title {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.music-label {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.music-time {
  min-width: 76px !important;
  flex: 0 0 76px !important;
  text-align: right !important;
  padding-left: 8px !important;
  transform: translateY(-1px) !important;
}

.music-seek {
  display: block !important;
  width: 100% !important;
  margin: 0 0 9px !important;
  height: 5px !important;
}

.music-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin: 0 !important;
}

.music-row .mini-button {
  min-width: 0 !important;
  white-space: nowrap !important;
}

.control-row {
  justify-content: space-between !important;
  gap: 7px !important;
}

.control-row button,
.volume-control {
  flex-shrink: 0 !important;
}

.volume-control {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

@media (max-height: 760px) {
  .music-player,
  .control-row {
    width: clamp(246px, 19vw, 300px) !important;
  }

  .music-head {
    margin-bottom: 7px !important;
  }

  .music-seek {
    margin-bottom: 8px !important;
  }
}

.music-player,
.control-row {
  width: clamp(258px, 19.8vw, 318px) !important;
  max-width: calc(100vw - 36px) !important;
}

.music-player {
  padding: 8px 10px 8px !important;
}

.music-head {
  margin: 0 0 10px !important;
  min-height: 12px !important;
  align-items: flex-start !important;
  overflow: visible !important;
}

.music-title {
  transform: translateY(-2px) !important;
}

.music-time {
  flex: 0 0 92px !important;
  min-width: 92px !important;
  max-width: 92px !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  font-size: 8.7px !important;
  line-height: 1 !important;
  letter-spacing: .025em !important;
  text-align: right !important;
  padding-left: 6px !important;
  transform: translateY(-3px) !important;
}

.music-seek {
  clear: both !important;
  margin: 0 0 9px !important;
  display: block !important;
}

@media (max-height: 760px) {
  .music-player,
  .control-row {
    width: clamp(254px, 19.5vw, 312px) !important;
  }

  .music-head {
    margin-bottom: 9px !important;
  }

  .music-time {
    flex-basis: 88px !important;
    min-width: 88px !important;
    max-width: 88px !important;
    font-size: 8.3px !important;
  }
}

.phase1-hidden,
#phenomenonSection,
#preThresholdSection {
  display: none !important;
}

.constellation-dot {
  cursor: default;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease, transform .18s ease, opacity .2s ease;
}

.constellation-dot.ready {
  cursor: pointer;
  border-color: rgba(255, 224, 147, .96) !important;
  background: radial-gradient(circle, rgba(255,245,202,.96), rgba(236,177,76,.66) 45%, rgba(236,177,76,.12) 72%) !important;
  box-shadow: 0 0 16px rgba(239, 184, 88, .82), 0 0 32px rgba(239, 184, 88, .24) !important;
  transform: scale(1.16);
}

.constellation-dot.lit {
  border-color: rgba(238, 196, 112, .72) !important;
  background: radial-gradient(circle, rgba(255,232,176,.82), rgba(221,151,54,.46) 54%, rgba(221,151,54,.10) 74%) !important;
  box-shadow: 0 0 12px rgba(231, 174, 80, .55) !important;
}

.game.stage-9 .ring-panel {
  width: var(--ga-side-col, clamp(300px, 24vw, 380px)) !important;
  min-height: 0 !important;
  padding: 18px 18px 16px !important;
}

.game.stage-9 .ring-row {
  display: none !important;
}

.open-space-ceremony {
  margin: 4px 0 14px !important;
  color: rgba(246, 224, 181, .62) !important;
  line-height: 1.35 !important;
}

.game.stage-9 #openSpace {
  margin-top: 8px !important;
}

.branch-effect {
  white-space: normal !important;
}

#actionPanel[aria-hidden="true"],
.game.stage-9 .threshold-panel,
.game.stage-9 .progress-panel {
  display: none !important;
}

.constellation-grid {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 7px !important;
  align-items: center !important;
  justify-items: center !important;
}

.constellation-dot {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 17px !important;
  height: 17px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  border: 1px solid rgba(222, 181, 101, .32) !important;
  background: radial-gradient(circle, rgba(255,230,170,.18), rgba(120,82,28,.08) 58%, rgba(0,0,0,.08) 100%) !important;
  cursor: default !important;
}

.constellation-dot.ready {
  cursor: pointer !important;
}

.constellation-dot.ready:hover {
  transform: scale(1.24) !important;
  border-color: rgba(255, 232, 164, 1) !important;
}

.constellation-dot.lit {
  cursor: default !important;
}

@media (max-height: 760px) {
  .constellation-grid {
    gap: 5px !important;
  }

  .constellation-dot {
    width: 15px !important;
    height: 15px !important;
  }
}

.constellation-grid {
  grid-template-columns: repeat(7, 22px) !important;
  justify-content: center !important;
  gap: 8px !important;
  overflow: visible !important;
}

.constellation-dot,
.constellation-dot.ready,
.constellation-dot.ready:hover,
.constellation-dot.lit,
.constellation-dot.lit:hover,
.constellation-dot:focus,
.constellation-dot:active {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  box-sizing: border-box !important;
  transform: none !important;
  translate: none !important;
  animation: none !important;
  transition:
    border-color .16s ease,
    box-shadow .16s ease,
    background .16s ease,
    opacity .16s ease !important;
  position: relative !important;
  display: block !important;
  flex: 0 0 20px !important;
}

.constellation-dot.ready {
  cursor: pointer !important;
  border-color: rgba(255, 229, 159, .98) !important;
  background: radial-gradient(circle, rgba(255,245,202,.96), rgba(236,177,76,.62) 45%, rgba(236,177,76,.14) 72%) !important;
  box-shadow:
    0 0 12px rgba(239, 184, 88, .72),
    0 0 24px rgba(239, 184, 88, .18) !important;
}

.constellation-dot.ready:hover {
  border-color: rgba(255, 240, 190, 1) !important;
  box-shadow:
    0 0 14px rgba(255, 210, 125, .84),
    0 0 28px rgba(239, 184, 88, .22) !important;
}

.constellation-dot.lit {
  cursor: default !important;
  border-color: rgba(238, 196, 112, .70) !important;
  background: radial-gradient(circle, rgba(255,232,176,.82), rgba(221,151,54,.46) 54%, rgba(221,151,54,.10) 74%) !important;
  box-shadow: 0 0 10px rgba(231, 174, 80, .42) !important;
}

.constellation-dot:not(.ready):not(.lit) {
  cursor: default !important;
}

.constellation-dot:focus-visible {
  outline: 1px solid rgba(255, 235, 180, .75) !important;
  outline-offset: 3px !important;
}

@media (max-height: 760px) {
  .constellation-grid {
    grid-template-columns: repeat(7, 20px) !important;
    gap: 7px !important;
  }

  .constellation-dot,
  .constellation-dot.ready,
  .constellation-dot.ready:hover,
  .constellation-dot.lit,
  .constellation-dot.lit:hover,
  .constellation-dot:focus,
  .constellation-dot:active {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    flex-basis: 18px !important;
  }
}

.constellation-grid {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 132px !important;
  min-height: 132px !important;
  max-height: 132px !important;
  margin-top: 14px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.constellation-dot,
.constellation-dot.ready,
.constellation-dot.ready:hover,
.constellation-dot.lit,
.constellation-dot.lit:hover,
.constellation-dot:focus,
.constellation-dot:active {
  position: absolute !important;
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  transform: translate(-50%, -50%) !important;
  translate: none !important;
  animation: none !important;
  flex: none !important;
}

.constellation-dot:nth-child(1) { left: 21% !important; top: 66% !important; }
.constellation-dot:nth-child(2) { left: 34% !important; top: 80% !important; }
.constellation-dot:nth-child(3) { left: 49% !important; top: 80% !important; }
.constellation-dot:nth-child(4) { left: 64% !important; top: 69% !important; }
.constellation-dot:nth-child(5) { left: 76% !important; top: 48% !important; }
.constellation-dot:nth-child(6) { left: 86% !important; top: 48% !important; }
.constellation-dot:nth-child(7) { left: 59% !important; top: 91% !important; }

.constellation-dot.ready {
  cursor: pointer !important;
  border-color: rgba(255, 229, 159, .98) !important;
  background: radial-gradient(circle, rgba(255,245,202,.96), rgba(236,177,76,.62) 45%, rgba(236,177,76,.14) 72%) !important;
  box-shadow:
    0 0 12px rgba(239, 184, 88, .72),
    0 0 24px rgba(239, 184, 88, .18) !important;
}

.constellation-dot.ready:hover,
.constellation-dot.ready:focus-visible {
  transform: translate(-50%, -50%) !important;
  border-color: rgba(255, 240, 190, 1) !important;
  box-shadow:
    0 0 14px rgba(255, 210, 125, .84),
    0 0 28px rgba(239, 184, 88, .22) !important;
}

.constellation-dot.lit {
  border-color: rgba(238, 196, 112, .70) !important;
  background: radial-gradient(circle, rgba(255,232,176,.82), rgba(221,151,54,.46) 54%, rgba(221,151,54,.10) 74%) !important;
  box-shadow: 0 0 10px rgba(231, 174, 80, .42) !important;
}

@media (max-height: 760px) {
  .constellation-grid {
    height: 122px !important;
    min-height: 122px !important;
    max-height: 122px !important;
  }

  .constellation-dot,
  .constellation-dot.ready,
  .constellation-dot.ready:hover,
  .constellation-dot.lit,
  .constellation-dot.lit:hover,
  .constellation-dot:focus,
  .constellation-dot:active {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
  }
}

.constellation-grid {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 136px !important;
  min-height: 136px !important;
  max-height: 136px !important;
  margin-top: 14px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 52% 48%, rgba(238, 185, 88, .09), transparent 54%),
    rgba(0,0,0,.16) !important;
}

.constellation-grid::before {
  content: "" !important;
  position: absolute !important;
  inset: 14px 14px 14px 14px !important;
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20100%20100%22%20preserveAspectRatio%3D%22none%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3Cfilter%20id%3D%22g%22%20x%3D%22-50%25%22%20y%3D%22-50%25%22%20width%3D%22200%25%22%20height%3D%22200%25%22%3E%0A%20%20%20%20%20%20%3CfeGaussianBlur%20stdDeviation%3D%220.4%22/%3E%0A%20%20%20%20%3C/filter%3E%0A%20%20%3C/defs%3E%0A%20%20%3Cpath%20d%3D%22M%2011%2068%20C%2015%2060%2C%2020%2058%2C%2024%2050%20S%2035%2048%2C%2038%2061%20S%2047%2066%2C%2052%2040%20S%2062%2034%2C%2066%2052%20S%2076%2056%2C%2080%2028%20S%2088%2022%2C%2090%2045%22%0A%20%20%20%20%20%20%20%20fill%3D%22none%22%20stroke%3D%22rgba%28255%2C217%2C140%2C0.22%29%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20filter%3D%22url%28%23g%29%22/%3E%0A%20%20%3Cpath%20d%3D%22M%2011%2068%20L%2024%2050%20L%2038%2061%20L%2052%2040%20L%2066%2052%20L%2080%2028%20L%2090%2045%22%0A%20%20%20%20%20%20%20%20fill%3D%22none%22%20stroke%3D%22rgba%28255%2C228%2C170%2C0.35%29%22%20stroke-width%3D%220.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%0A%20%20%3Ccircle%20cx%3D%2211%22%20cy%3D%2268%22%20r%3D%221.0%22%20fill%3D%22rgba%28255%2C232%2C185%2C0.22%29%22/%3E%0A%20%20%3Ccircle%20cx%3D%2224%22%20cy%3D%2250%22%20r%3D%221.0%22%20fill%3D%22rgba%28255%2C232%2C185%2C0.20%29%22/%3E%0A%20%20%3Ccircle%20cx%3D%2238%22%20cy%3D%2261%22%20r%3D%221.0%22%20fill%3D%22rgba%28255%2C232%2C185%2C0.18%29%22/%3E%0A%20%20%3Ccircle%20cx%3D%2252%22%20cy%3D%2240%22%20r%3D%221.0%22%20fill%3D%22rgba%28255%2C232%2C185%2C0.20%29%22/%3E%0A%20%20%3Ccircle%20cx%3D%2266%22%20cy%3D%2252%22%20r%3D%221.0%22%20fill%3D%22rgba%28255%2C232%2C185%2C0.18%29%22/%3E%0A%20%20%3Ccircle%20cx%3D%2280%22%20cy%3D%2228%22%20r%3D%221.0%22%20fill%3D%22rgba%28255%2C232%2C185%2C0.20%29%22/%3E%0A%20%20%3Ccircle%20cx%3D%2290%22%20cy%3D%2245%22%20r%3D%221.0%22%20fill%3D%22rgba%28255%2C232%2C185%2C0.18%29%22/%3E%0A%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 100% 100% !important;
  opacity: .96 !important;
  pointer-events: none !important;
}

.constellation-dot,
.constellation-dot.ready,
.constellation-dot.ready:hover,
.constellation-dot.lit,
.constellation-dot.lit:hover,
.constellation-dot:focus,
.constellation-dot:active {
  position: absolute !important;
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translate(-50%, -50%) !important;
  box-sizing: border-box !important;
  z-index: 1 !important;
}

.constellation-dot:nth-child(1) { left: 11% !important; top: 68% !important; }
.constellation-dot:nth-child(2) { left: 24% !important; top: 50% !important; }
.constellation-dot:nth-child(3) { left: 38% !important; top: 61% !important; }
.constellation-dot:nth-child(4) { left: 52% !important; top: 40% !important; }
.constellation-dot:nth-child(5) { left: 66% !important; top: 52% !important; }
.constellation-dot:nth-child(6) { left: 80% !important; top: 28% !important; }
.constellation-dot:nth-child(7) { left: 90% !important; top: 45% !important; }

.constellation-dot.ready {
  cursor: pointer !important;
  border-color: rgba(255, 233, 176, 1) !important;
  background:
    radial-gradient(circle, rgba(255,251,230,.98), rgba(245,197,94,.78) 38%, rgba(234,168,57,.24) 68%, rgba(234,168,57,.06) 100%) !important;
  box-shadow:
    0 0 6px rgba(255, 236, 188, .9),
    0 0 14px rgba(242, 186, 77, .72),
    0 0 26px rgba(242, 186, 77, .25) !important;
}

.constellation-dot.ready:hover,
.constellation-dot.ready:focus-visible {
  border-color: rgba(255, 243, 206, 1) !important;
  box-shadow:
    0 0 8px rgba(255, 244, 213, .92),
    0 0 18px rgba(245, 196, 99, .84),
    0 0 32px rgba(245, 196, 99, .30) !important;
}

.constellation-dot.lit {
  border-color: rgba(247, 211, 139, .82) !important;
  background:
    radial-gradient(circle, rgba(255,241,198,.9), rgba(231,176,76,.55) 44%, rgba(231,176,76,.12) 76%) !important;
  box-shadow:
    0 0 10px rgba(241, 187, 86, .56),
    0 0 22px rgba(241, 187, 86, .16) !important;
}

@media (max-height: 760px) {
  .constellation-grid {
    height: 126px !important;
    min-height: 126px !important;
    max-height: 126px !important;
  }

  .constellation-dot,
  .constellation-dot.ready,
  .constellation-dot.ready:hover,
  .constellation-dot.lit,
  .constellation-dot.lit:hover,
  .constellation-dot:focus,
  .constellation-dot:active {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
  }
}

.constellation-dot.pending {
  cursor: default !important;
  border-color: rgba(226, 184, 101, .38) !important;
  background:
    radial-gradient(circle, rgba(255,230,170,.20), rgba(120,82,28,.10) 58%, rgba(0,0,0,.10) 100%) !important;
  box-shadow:
    inset 0 0 8px rgba(229, 191, 115, .08),
    0 0 8px rgba(232, 177, 79, .12) !important;
}

.constellation-dot.pending:hover {
  border-color: rgba(226, 184, 101, .38) !important;
  box-shadow:
    inset 0 0 8px rgba(229, 191, 115, .08),
    0 0 8px rgba(232, 177, 79, .12) !important;
}

.game.stage-9 .ring-circle.ring-ghost {
  opacity: .36 !important;
  filter: saturate(.55) brightness(.78) !important;
}

.game.stage-9 .ring-circle.ring-ghost::before {
  opacity: .16 !important;
}

.game.stage-9 .ring-circle.ring-complete {
  opacity: 1 !important;
  filter: saturate(1.18) brightness(1.08) !important;
  box-shadow:
    0 0 14px rgba(255, 238, 198, .42),
    0 0 34px rgba(238, 184, 85, .22),
    inset 0 0 16px rgba(255, 231, 170, .10) !important;
}

.game.stage-9 .ring-circle.ring-complete::before {
  opacity: 1 !important;
}

.game.stage-9 .ring-value {
  min-width: 98px !important;
  text-align: right !important;
}

.game.stage-9 .ring-outer.waiting {
  opacity: .18 !important;
  filter: saturate(.45) brightness(.72) !important;
}

.game.stage-9 .ring-outer.complete {
  opacity: 1 !important;
  filter: saturate(1.2) brightness(1.1) !important;
}

.game.stage-9 .mini-track.seal-ghost > div {
  width: 0% !important;
  opacity: .28 !important;
}

.game.stage-9 .mini-track.seal-complete > div {
  width: 100% !important;
  opacity: 1 !important;
  box-shadow:
    0 0 12px rgba(255, 231, 176, .62),
    0 0 28px rgba(238, 184, 85, .24) !important;
}

.game.stage-9 .ring-panel.rings-waiting {
  border-color: rgba(229,191,115,.20) !important;
}

.game.stage-9 .ring-panel.rings-complete {
  border-color: rgba(255, 223, 151, .48) !important;
  box-shadow:
    0 14px 42px rgba(0,0,0,.55),
    0 0 34px rgba(255, 202, 111, .16),
    inset 0 0 0 1px rgba(255, 220, 150, .05) !important;
}

.game.stage-9 #openSpace:not(:disabled) {
  opacity: 1 !important;
  cursor: pointer !important;
  border-color: rgba(255, 226, 154, .72) !important;
  background: rgba(229, 167, 72, .22) !important;
  box-shadow:
    0 0 18px rgba(255, 205, 115, .24),
    inset 0 0 18px rgba(255, 221, 148, .05) !important;
}

.space-transition {
  position: absolute !important;
  inset: 0 !important;
  z-index: 40 !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 215, 143, .06), rgba(5, 3, 10, .82) 42%, #000 78%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 1.2s ease !important;
}

.space-transition.visible {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.game.space-opening-active .stage-header,
.game.space-opening-active .game-title-banner,
.game.space-opening-active .presence-panel,
.game.space-opening-active .resource-panel,
.game.space-opening-active .proto-actions,
.game.space-opening-active .branches-panel,
.game.space-opening-active .evolution-panel,
.game.space-opening-active .objective-panel,
.game.space-opening-active .progress-panel,
.game.space-opening-active .action-panel,
.game.space-opening-active .threshold-panel,
.game.space-opening-active .ring-panel,
.game.space-opening-active .bottom-nav,
.game.space-opening-active .controls,
.game.space-opening-active .whisper {
  opacity: 0 !important;
  filter: blur(8px) !important;
  transform: scale(.985) !important;
  pointer-events: none !important;
  transition: opacity 1.4s ease, filter 1.4s ease, transform 1.4s ease !important;
}

.space-depth {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 52%, rgba(13, 34, 88, .0) 0%, rgba(15, 22, 64, .22) 48%, rgba(4, 3, 12, .88) 75%, #000 100%),
    radial-gradient(circle at 48% 51%, rgba(255, 223, 161, .10), transparent 26%);
  opacity: 0;
  transform: scale(.82);
  transition: opacity 2.2s ease, transform 4s ease;
}

.space-end-visual {
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(145, 171, 255, .10), transparent 34%),
    radial-gradient(circle at 50% 82%, rgba(204, 226, 255, .08), transparent 28%),
    radial-gradient(circle at 50% 54%, rgba(0, 0, 0, 0) 16%, rgba(8, 10, 24, .16) 50%, rgba(0, 0, 0, .58) 100%),
    linear-gradient(180deg, rgba(1, 4, 13, .28), rgba(0, 0, 0, .26)),
    url("assets/backgrounds/space_opening_final.jpg") center center / cover no-repeat;
  transform: scale(1.24);
  filter: saturate(.84) brightness(.05) contrast(1.06);
  transition: opacity 4.4s ease, transform 8.8s cubic-bezier(.16,.72,.16,1), filter 6.4s ease;
  pointer-events: none;
}

.space-stars {
  display: none;
}

.space-rift {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(46vw, 430px);
  height: min(76vh, 680px);
  translate: -50% -50%;
  pointer-events: none;
  opacity: 0;
}

.space-rift::before,
.space-rift::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 0%;
  translate: -50% -50%;
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, rgba(174,198,255,.45), rgba(255,247,219,.98), rgba(174,198,255,.45), transparent);
  box-shadow:
    0 0 18px rgba(255,232,184,.72),
    0 0 48px rgba(119,153,255,.36),
    0 0 90px rgba(112,89,230,.22);
  transition: height 1.8s cubic-bezier(.16,.84,.16,1), width 1.9s ease, opacity 1.1s ease;
}

.space-rift::after {
  width: 16px;
  filter: blur(18px);
  opacity: .35;
}

.rift-core,
.rift-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  border-radius: 999px;
  pointer-events: none;
}

.rift-core {
  width: 10px;
  height: 10px;
  background: radial-gradient(circle, #fff 0%, #ffe8b8 42%, rgba(255,194,83,.0) 76%);
  box-shadow: 0 0 32px rgba(255,229,178,.95), 0 0 90px rgba(255,190,88,.35);
  transform: scale(.8);
  transition: transform 1.8s ease, opacity 1.2s ease;
}

.rift-glow {
  width: 2px;
  height: 2px;
  background: radial-gradient(ellipse, rgba(151,174,255,.30), rgba(151,174,255,0) 70%);
  filter: blur(2px);
  opacity: 0;
  transition: width 2.2s ease, height 2.2s ease, opacity 1.8s ease;
}

.opening-line {
  opacity: 0;
  left: 42% !important;
  right: 42% !important;
  top: 50% !important;
  height: 1px !important;
  transform-origin: center;
  transition: opacity 1s ease, left 2s ease, right 2s ease, transform 2s ease;
}

.opening-text {
  position: relative;
  z-index: 3;
  max-width: min(880px, 84vw);
  text-align: center;
  letter-spacing: .10em;
  color: rgba(247, 240, 224, .96);
  text-shadow: 0 0 18px rgba(255, 219, 158, .26), 0 0 44px rgba(118, 154, 255, .28), 0 2px 18px rgba(0,0,0,.55);
  pointer-events: none;
  transform: translateY(5vh);
}

.opening-text p {
  margin: 16px 0;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1.25s ease, transform 1.25s ease;
  font-size: clamp(18px, 2.2vw, 34px);
}

.opening-text .opening-line-3 {
  margin-top: 30px;
  font-size: clamp(15px, 1.45vw, 24px);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(203, 222, 255, .90);
}

.prototype-end-panel {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  width: min(520px, 82vw);
  translate: -50% -48%;
  padding: 30px 34px 28px;
  border: 1px solid rgba(216, 233, 255, .20);
  border-radius: 22px;
  background:
    linear-gradient(160deg, rgba(4, 8, 24, .88), rgba(0, 0, 0, .78)),
    radial-gradient(circle at 50% 0%, rgba(167, 191, 255, .14), transparent 60%);
  box-shadow:
    0 20px 76px rgba(0,0,0,.64),
    0 0 72px rgba(104,139,255,.18),
    inset 0 0 0 1px rgba(255,255,255,.04);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  backface-visibility: hidden;
  contain: paint;
  text-align: center;
  opacity: 0;
  transform: translateY(24px) scale(.98);
  pointer-events: none;
  transition: opacity 1.2s ease, transform 1.2s ease;
}

.prototype-end-panel p {
  margin: 16px 0 0;
  color: rgba(245, 225, 184, .72);
  line-height: 1.55;
  letter-spacing: .05em;
}

.prototype-next {
  color: rgba(205, 222, 255, .82) !important;
}

.prototype-thanks {
  margin-top: 14px !important;
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: .035em;
  color: rgba(226, 233, 247, .56) !important;
  max-width: 430px;
  margin-left: auto !important;
  margin-right: auto !important;
}

.prototype-end-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 24px;
}

.prototype-end-actions .mini-button {
  min-width: 150px;
  cursor: pointer;
}

.space-transition.opening-contract .opening-line {
  opacity: .75;
  left: 34% !important;
  right: 34% !important;
  transform: scaleX(.55);
}

.space-transition.opening-rift .space-rift {
  opacity: 1;
}

.space-transition.opening-rift .space-rift::before {
  height: 72%;
  width: 3px;
  opacity: 1;
}

.space-transition.opening-rift .space-rift::after {
  height: 62%;
  width: 22px;
  opacity: .55;
}

.space-transition.opening-rift .rift-core {
  transform: scale(1.6);
}

.space-transition.opening-reveal .space-depth {
  opacity: .96;
  transform: scale(1);
}

.space-transition.opening-reveal .space-end-visual {
  opacity: .46;
  transform: scale(1.12);
  filter: saturate(.92) brightness(.26) contrast(1.04);
}

.space-transition.opening-reveal .space-stars {
  opacity: 0;
  transform: scale(1);
}

.space-transition.opening-reveal .space-rift::before {
  height: 94%;
  width: clamp(10px, 2.3vw, 34px);
}

.space-transition.opening-reveal .space-rift::after {
  height: 96%;
  width: clamp(48px, 8vw, 126px);
  opacity: .78;
}

.space-transition.opening-reveal .rift-glow {
  opacity: 1;
  width: min(48vw, 560px);
  height: min(72vh, 680px);
}

.space-transition.text-1 .opening-line-1,
.space-transition.text-2 .opening-line-2,
.space-transition.text-3 .opening-line-3 {
  opacity: 1;
  transform: translateY(0);
}

.space-transition.opening-final .opening-text {
  opacity: 0;
  transition: opacity 1s ease;
}

.space-transition.opening-final .prototype-end-panel {
  opacity: 0;
  transform: translateY(18px) scale(.985);
  pointer-events: none;
}

.space-transition.opening-final.final-panel-ready .prototype-end-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.space-transition.opening-final .space-depth {
  opacity: .28;
  transform: scale(1);
}

.space-transition.opening-final .space-end-visual {
  opacity: 1;
  transform: scale(1);
  filter: saturate(1.08) brightness(1) contrast(1.02);
}

.space-transition.opening-final .space-rift {
  opacity: .08;
}

.space-transition.opening-final .space-stars {
  opacity: 0;
}

@media (max-height: 760px) {
  .opening-text p {
    margin: 10px 0;
  }
  .prototype-end-panel {
    padding: 22px 24px 20px;
  }
}

.constellation-grid.constellation-complete .constellation-dot,
.constellation-dot.complete {
  cursor: default !important;
  pointer-events: none !important;
  animation: none !important;
  border-color: rgba(255, 241, 196, 1) !important;
  background:
    radial-gradient(circle, rgba(255,255,246,1) 0%, rgba(255,228,158,.96) 34%, rgba(245,188,78,.46) 68%, rgba(245,188,78,.14) 100%) !important;
  box-shadow:
    0 0 8px rgba(255, 250, 220, .96),
    0 0 18px rgba(255, 221, 141, .86),
    0 0 38px rgba(243, 181, 68, .38),
    0 0 72px rgba(142, 166, 255, .10) !important;
  opacity: 1 !important;
  filter: saturate(1.12) brightness(1.08) !important;
}

.constellation-grid.constellation-complete .constellation-dot:hover,
.constellation-dot.complete:hover {
  transform: translate(-50%, -50%) !important;
}

.constellation-grid {
  overflow: hidden !important;
}

.constellation-grid.constellation-completion-pulse {
  border-color: rgba(255, 232, 173, .42) !important;
  box-shadow:
    inset 0 0 22px rgba(255, 213, 132, .10),
    0 0 36px rgba(255, 213, 132, .12) !important;
}

.constellation-grid.constellation-completion-pulse::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: -28%;
  top: 0;
  width: 28%;
  height: 100%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 242, 201, .74), rgba(255, 213, 132, .26) 42%, rgba(255, 213, 132, 0) 72%);
  filter: blur(7px);
  opacity: 0;
  animation: constellationWaveSweep 1.65s ease-out forwards;
}

.constellation-grid.constellation-completion-pulse .constellation-dot.complete {
  animation: constellationCompletionFlash 1.45s ease-out both !important;
}

.constellation-grid.constellation-completion-pulse .constellation-dot.complete:nth-child(1) { animation-delay: 0.00s !important; }
.constellation-grid.constellation-completion-pulse .constellation-dot.complete:nth-child(2) { animation-delay: 0.10s !important; }
.constellation-grid.constellation-completion-pulse .constellation-dot.complete:nth-child(3) { animation-delay: 0.20s !important; }
.constellation-grid.constellation-completion-pulse .constellation-dot.complete:nth-child(4) { animation-delay: 0.30s !important; }
.constellation-grid.constellation-completion-pulse .constellation-dot.complete:nth-child(5) { animation-delay: 0.40s !important; }
.constellation-grid.constellation-completion-pulse .constellation-dot.complete:nth-child(6) { animation-delay: 0.50s !important; }
.constellation-grid.constellation-completion-pulse .constellation-dot.complete:nth-child(7) { animation-delay: 0.60s !important; }

@keyframes constellationWaveSweep {
  0% { left: -30%; opacity: 0; transform: scaleY(.72); }
  16% { opacity: .86; }
  72% { opacity: .42; }
  100% { left: 102%; opacity: 0; transform: scaleY(1.12); }
}

@keyframes constellationCompletionFlash {
  0% {
    filter: saturate(1.12) brightness(1.08) !important;
    box-shadow:
      0 0 8px rgba(255, 250, 220, .96),
      0 0 18px rgba(255, 221, 141, .86),
      0 0 38px rgba(243, 181, 68, .38),
      0 0 72px rgba(142, 166, 255, .10) !important;
  }
  38% {
    filter: saturate(1.35) brightness(1.44) !important;
    box-shadow:
      0 0 12px rgba(255, 255, 242, 1),
      0 0 28px rgba(255, 229, 162, .96),
      0 0 58px rgba(243, 181, 68, .52),
      0 0 96px rgba(142, 166, 255, .18) !important;
  }
  100% {
    filter: saturate(1.12) brightness(1.08) !important;
    box-shadow:
      0 0 8px rgba(255, 250, 220, .96),
      0 0 18px rgba(255, 221, 141, .86),
      0 0 38px rgba(243, 181, 68, .38),
      0 0 72px rgba(142, 166, 255, .10) !important;
  }
}

.language-control {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid rgba(229,191,115,.23);
  border-radius: 999px;
  background: rgba(0,0,0,.46);
  color: rgba(244, 220, 173, .74);
  font-size: 11px;
  backdrop-filter: blur(6px);
}
.language-control select {
  border: 0;
  outline: 0;
  background: rgba(0,0,0,.35);
  color: rgba(255, 236, 196, .92);
  border-radius: 999px;
  padding: 4px 8px;
  font: inherit;
}
.language-control option { background: #090805; color: #f7dfae; }
@media (max-width: 980px) {
  .control-row { flex-wrap: wrap !important; }
}

.controls {
  align-items: flex-end !important;
}
.control-row {
  width: auto !important;
  min-width: 0 !important;
  max-width: calc(100vw - 36px) !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 7px !important;
}
.language-control {
  order: 0 !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  height: 34px !important;
  padding: 0 8px !important;
  gap: 6px !important;
  white-space: nowrap !important;
}
#soundToggle { order: 1 !important; flex: 0 0 auto !important; }
.volume-control { order: 2 !important; flex: 0 0 auto !important; min-width: 0 !important; }
#resetButton { order: 3 !important; flex: 0 0 auto !important; }
.language-control select {
  min-width: 78px !important;
  max-width: 92px !important;
}
@media (max-width: 760px) {
  .control-row {
    flex-wrap: wrap !important;
    width: clamp(258px, 92vw, 360px) !important;
  }
  .language-control { order: 0 !important; }
  #soundToggle { order: 1 !important; }
  .volume-control { order: 2 !important; flex: 1 1 100% !important; }
  #resetButton { order: 3 !important; }
}

.game.stage-5 .branches-panel,
.game.stage-6 .branches-panel,
.game.stage-7 .branches-panel,
.game.stage-8 .branches-panel,
.game.stage-9 .branches-panel {
  width: min(660px, 48vw) !important;
  bottom: clamp(52px, 7vh, 78px) !important;
}

.game.stage-5 .branch-card,
.game.stage-6 .branch-card,
.game.stage-7 .branch-card,
.game.stage-8 .branch-card,
.game.stage-9 .branch-card {
  min-height: 88px !important;
  padding: 8px 9px !important;
}

.game.stage-5 .branch-glyph,
.game.stage-6 .branch-glyph,
.game.stage-7 .branch-glyph,
.game.stage-8 .branch-glyph,
.game.stage-9 .branch-glyph {
  display: none !important;
}

.game.stage-5 .branch-effect,
.game.stage-6 .branch-effect,
.game.stage-7 .branch-effect,
.game.stage-8 .branch-effect,
.game.stage-9 .branch-effect {
  -webkit-line-clamp: 1 !important;
}

@media (max-width: 1180px) {
  .game.stage-5 .branches-panel,
  .game.stage-6 .branches-panel,
  .game.stage-7 .branches-panel,
  .game.stage-8 .branches-panel,
  .game.stage-9 .branches-panel {
    width: min(560px, 44vw) !important;
  }
}

@media (max-height: 760px) {
  .game.stage-5 .branch-card,
  .game.stage-6 .branch-card,
  .game.stage-7 .branch-card,
  .game.stage-8 .branch-card,
  .game.stage-9 .branch-card {
    min-height: 88px !important;
  }
}

.game-title-banner {
  position: absolute;
  z-index: 8;
  top: clamp(24px, 4.1vh, 48px);
  left: clamp(28px, 4.8vw, 76px);
  width: clamp(250px, 23vw, 360px);
  min-height: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-align: center;
  pointer-events: none;
}

.game-title-main {
  display: block;
  font-size: clamp(21px, 1.86vw, 31px);
  line-height: 1;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(247, 236, 214, .94);
  text-shadow:
    0 0 18px rgba(255, 214, 130, .18),
    0 0 34px rgba(118, 154, 255, .14),
    0 2px 18px rgba(0, 0, 0, .42);
}

.game-title-accent {
  display: block;
  width: min(76%, 250px);
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(244, 212, 153, .62), rgba(138, 165, 255, .42), rgba(255,255,255,0));
  box-shadow: 0 0 14px rgba(244, 212, 153, .12);
  opacity: .88;
}

@media (max-width: 1100px) {
  .game-title-banner {
    top: clamp(18px, 3vh, 32px);
    min-height: 38px;
    gap: 6px;
  }

  .game-title-main {
    font-size: clamp(18px, 2.1vw, 26px);
    letter-spacing: .11em;
  }
}

@media (max-width: 820px) {
  .game-title-banner {
    top: 14px;
    width: 280px;
  }

  .game-title-main {
    font-size: 18px;
    letter-spacing: .10em;
  }
}

.game-title-banner {
  top: clamp(22px, 3.6vh, 42px);
}
@media (max-height: 760px) {
  .game-title-banner {
    top: 12px;
  }
}

.game-title-version {
  display: block;
  margin-top: -1px;
  font-size: clamp(7.5px, .62vw, 10px);
  line-height: 1;
  font-weight: 400;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(226, 233, 247, .50);
  text-shadow:
    0 0 10px rgba(138, 165, 255, .16),
    0 1px 10px rgba(0, 0, 0, .30);
}

.game-title-banner {
  gap: 6px;
}

@media (max-width: 1100px) {
  .game-title-version {
    font-size: clamp(7px, .72vw, 9px);
    letter-spacing: .21em;
  }
}

@media (max-width: 820px) {
  .game-title-version {
    font-size: 7px;
    letter-spacing: .18em;
  }
}

.controls {
  width: max-content !important;
  max-width: calc(100vw - 36px) !important;
  align-items: stretch !important;
}

.music-player,
.control-row {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  align-self: stretch !important;
}

.control-row {
  justify-content: flex-end !important;
}

.music-player {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.music-title {
  min-width: 0 !important;
}

.music-label {
  max-width: 150px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (max-width: 760px) {
  .controls {
    width: clamp(258px, 92vw, 360px) !important;
  }

  .control-row {
    width: 100% !important;
    flex-wrap: wrap !important;
  }

  .music-label {
    max-width: 170px !important;
  }
}

.controls {
  width: max-content !important;
  max-width: calc(100vw - 36px) !important;
  align-items: flex-end !important;
}

.control-row {
  width: auto !important;
  max-width: calc(100vw - 36px) !important;
  align-self: flex-end !important;
}

.music-player {
  width: clamp(288px, 20vw, 326px) !important;
  max-width: calc(100vw - 36px) !important;
  align-self: flex-end !important;
  box-sizing: border-box !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}

.music-head {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
}

.music-title {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.music-label {
  max-width: none !important;
  width: auto !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  font-size: 8.6px !important;
  letter-spacing: .055em !important;
}

.music-time {
  flex: 0 0 88px !important;
  min-width: 88px !important;
  max-width: 88px !important;
  font-size: 8.2px !important;
}

@media (max-width: 760px) {
  .controls {
    width: clamp(258px, 92vw, 360px) !important;
  }

  .music-player,
  .control-row {
    width: 100% !important;
    max-width: 100% !important;
  }

  .control-row {
    flex-wrap: wrap !important;
  }

  .music-label {
    font-size: 8.2px !important;
    letter-spacing: .04em !important;
  }
}

.music-player {
  width: clamp(258px, 17.2vw, 302px) !important;
  max-width: calc(100vw - 36px) !important;
  align-self: flex-end !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}

.music-label {
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  font-size: 8.15px !important;
  letter-spacing: .035em !important;
}

.music-title {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.music-head {
  gap: 8px !important;
}

.music-time {
  flex: 0 0 82px !important;
  min-width: 82px !important;
  max-width: 82px !important;
  font-size: 8px !important;
}

@media (max-width: 760px) {
  .music-player {
    width: 100% !important;
  }

  .music-label {
    font-size: 8px !important;
    letter-spacing: .025em !important;
  }

  .music-time {
    flex-basis: 78px !important;
    min-width: 78px !important;
    max-width: 78px !important;
  }
}


.prototype-end-panel,
.prototype-end-panel * {
  filter: none !important;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

.space-transition.opening-final .prototype-end-panel,
.space-transition.opening-final.final-panel-ready .prototype-end-panel {
  filter: none !important;
  -webkit-filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  will-change: opacity, transform;
}


.proto-action {
  transition-property: border-color, background, opacity, box-shadow !important;
  transform-origin: center center !important;
  contain: layout paint style !important;
}

.proto-action[data-action="feed"] {
  will-change: auto !important;
}