:root {
  --bg: #06030d;
  --panel: rgba(18, 8, 32, 0.9);
  --panel-soft: rgba(35, 16, 54, 0.86);
  --border: #a646ff;
  --text: #f3e8ff;
  --subtle: #ccb0ff;
  --glow: rgba(188, 88, 255, 0.45);
  --accent: #d279ff;
  --pixel-shadow: 0 0 0 2px rgba(0,0,0,0.55), 0 0 18px var(--glow);
  --font-main: "Trebuchet MS", "Verdana", monospace;
  --font-ui: "Courier New", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: #000;
}

body {
  font-family: var(--font-main);
  color: var(--text);
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

button, a { font: inherit; }

.background-layer {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 50% 20%, rgba(132, 0, 255, 0.10), transparent 35%),
    radial-gradient(circle at 50% 75%, rgba(128, 36, 255, 0.08), transparent 28%),
    radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.12) 0 1px, transparent 2px),
    radial-gradient(circle at 80% 30%, rgba(255, 255, 255, 0.12) 0 1px, transparent 2px),
    linear-gradient(180deg, #05030c, #080410 40%, #06020c 100%);
  background-size: auto, auto, 180px 180px, 240px 240px, auto;
  transition: background 400ms ease, filter 300ms ease, opacity 300ms ease;
  z-index: 0;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,0.02) 50%, transparent 50%);
  background-size: 100% 4px;
  opacity: 0.15;
  z-index: 1;
}

.app-shell {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  align-items: start;
  justify-items: center;
  padding: 22px 16px 20px;
}

.logo-button,
.mute-button,
.primary-button,
.orb-hitbox {
  appearance: none;
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
}


.logo-button {
  position: relative;
  padding: 8px 18px 12px;
  margin-top: 2px;
  border-radius: 0;
  transition: transform 160ms ease, filter 160ms ease;
  align-self: start;
  justify-self: center;
  min-width: clamp(220px, 32vw, 350px);
  overflow: visible;
}

.logo-button:hover,
.logo-button:focus-visible {
  transform: translateY(-1px) scale(1.015);
  filter: brightness(1.10);
}

.logo-mark {
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
  min-height: 72px;
}

.logo-mark::before {
  content: '';
  position: absolute;
  width: 108%;
  height: 48%;
  border: 3px solid rgba(210, 121, 255, 0.58);
  border-left-color: rgba(136, 56, 255, 0.18);
  border-right-color: rgba(249, 216, 255, 0.78);
  border-radius: 50%;
  transform: rotate(-8deg);
  box-shadow:
    0 0 6px rgba(225, 172, 255, 0.42),
    0 0 18px rgba(171, 65, 255, 0.28);
  z-index: -1;
}

.logo-orbit {
  position: absolute;
  width: 116%;
  height: 58%;
  border-radius: 50%;
  border-top: 2px solid rgba(255,255,255,0.78);
  border-bottom: 2px solid rgba(136, 54, 255, 0.14);
  transform: rotate(10deg);
  opacity: 0.52;
  filter: drop-shadow(0 0 7px rgba(210,121,255,0.5));
  z-index: -1;
}

.logo-wordmark {
  position: relative;
  display: inline-block;
  font-family: 'Pixelify Sans', 'Silkscreen', monospace;
  font-size: clamp(2.35rem, 5.2vw, 4rem);
  line-height: 0.95;
  font-weight: 700;
  letter-spacing: -0.06em;
  color: #ffffff;
  -webkit-text-stroke: 2px #6f21b7;
  text-shadow:
    2px 0 0 #b24cff,
    0 2px 0 #7a1bd1,
    -2px 0 0 #f0c5ff,
    0 -2px 0 #f0c5ff,
    4px 4px 0 #32105e,
    0 0 10px rgba(255,255,255,0.75),
    0 0 22px rgba(196,83,255,0.78),
    0 0 38px rgba(116,31,220,0.58);
  transform: skewX(-2deg);
}

.logo-eye-badge {
  position: absolute;
  left: 10.5%;
  top: 24%;
  width: clamp(17px, 2.4vw, 24px);
  height: clamp(17px, 2.4vw, 24px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff 0 8%, #9b42ff 9% 29%, #160522 30% 100%);
  border: 2px solid rgba(245,220,255,0.92);
  color: #fff;
  font-family: 'Silkscreen', monospace;
  font-size: clamp(0.5rem, 1vw, 0.68rem);
  line-height: 1;
  text-shadow: 0 0 5px #d67dff;
  box-shadow: 0 0 10px rgba(214,125,255,0.74);
  z-index: 3;
  pointer-events: none;
}

.logo-spark {
  position: absolute;
  color: #fff;
  text-shadow: 0 0 8px #fff, 0 0 14px #cf6cff;
  pointer-events: none;
}
.logo-spark-a {
  right: -2%;
  top: 4%;
  font-size: 1.05rem;
}
.logo-spark-b {
  left: -1%;
  bottom: 6%;
  font-size: 0.72rem;
  color: #d97dff;
}

.mute-button {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--text);
  background: rgba(12, 6, 22, 0.76);
  border: 2px solid rgba(193, 110, 255, 0.65);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.35), 0 0 14px rgba(173, 62, 255, 0.2);
  z-index: 5;
}

.mute-button:hover,
.mute-button:focus-visible { filter: brightness(1.08); }

.result-zone {
  width: min(740px, calc(100vw - 28px));
  min-height: 150px;
  display: flex;
  justify-content: center;
  align-items: end;
  margin-top: 6px;
}

.result-card {
  position: relative;
  width: min(680px, 100%);
  min-height: 116px;
  padding: 18px 20px 20px;
  background: linear-gradient(180deg, rgba(24, 10, 42, 0.96), rgba(12, 6, 24, 0.96));
  color: var(--text);
  border: 2px solid rgba(184, 96, 255, 0.98);
  box-shadow: var(--pixel-shadow);
  opacity: 0;
  transform: translateY(0) scale(0.985);
  transition: opacity 360ms ease, transform 360ms ease, box-shadow 360ms ease;
  clip-path: polygon(0 8px, 8px 8px, 8px 0, calc(100% - 8px) 0, calc(100% - 8px) 8px, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 8px), 0 calc(100% - 8px));
}

.result-card.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.result-card.hidden {
  visibility: hidden;
}

.result-card::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(255,255,255,0.09);
  pointer-events: none;
}

.result-meta {
  margin: 0 0 14px;
  font-family: var(--font-ui);
  font-size: clamp(0.8rem, 1.7vw, 1rem);
  color: var(--subtle);
  letter-spacing: 0.14em;
}

.result-text {
  margin: 0;
  font-size: clamp(1rem, 2.1vw, 1.55rem);
  line-height: 1.5;
  font-weight: 700;
  color: #fff7ff;
  text-wrap: balance;
}

.hero-zone {
  width: min(560px, 94vw);
  justify-self: center;
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

.predo-wrap {
  position: relative;
  width: min(460px, 74vw);
  aspect-ratio: 1/1;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 0 14px rgba(188, 88, 255, 0.24));
}

.predo-wrap.idle-glow::after,
.predo-wrap.flash::after,
.predo-wrap.hyper::after {
  content: '';
  position: absolute;
  inset: 14% 14% 10% 14%;
  border-radius: 50%;
  pointer-events: none;
}

.predo-wrap.idle-glow::after {
  animation: orbPulse 3.6s ease-in-out infinite;
  background: radial-gradient(circle at 50% 70%, rgba(178, 74, 255, 0.22), transparent 24%);
}

.predo-wrap.flash::after {
  background: radial-gradient(circle at 50% 68%, rgba(255,255,255,0.35), rgba(190, 78, 255, 0.22) 18%, transparent 33%);
  animation: flashBurst 560ms ease-out 1;
}

.predo-wrap.hyper::after {
  background: radial-gradient(circle at 50% 68%, rgba(255,255,255,0.7), rgba(190, 78, 255, 0.35) 20%, transparent 34%);
  animation: hyperPulse 900ms ease-out 1;
}

.predo-image {
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  user-select: none;
  pointer-events: none;
}

.orb-hitbox {
  position: absolute;
  width: 20%;
  height: 20%;
  left: 40%;
  top: 58%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 200, 255, 0.24), rgba(191, 91, 255, 0.16) 42%, rgba(0,0,0,0));
  box-shadow: 0 0 0 2px rgba(255,255,255,0.06), 0 0 28px rgba(194, 87, 255, 0.25);
  transition: transform 160ms ease, filter 160ms ease, opacity 160ms ease;
}

.orb-hitbox:hover,
.orb-hitbox:focus-visible { transform: scale(1.08); filter: brightness(1.15); }

.action-zone { margin-top: 2px; }

.primary-button {
  min-width: 210px;
  padding: 14px 18px;
  color: #f9eeff;
  background: rgba(19, 8, 31, 0.9);
  border: 2px solid rgba(180, 91, 255, 0.92);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.28), 0 0 18px rgba(173, 62, 255, 0.18);
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  clip-path: polygon(0 8px, 8px 8px, 8px 0, calc(100% - 8px) 0, calc(100% - 8px) 8px, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 8px), 0 calc(100% - 8px));
  transition: transform 150ms ease, filter 150ms ease;
}

.primary-button:hover,
.primary-button:focus-visible { transform: translateY(-1px); filter: brightness(1.07); }
.primary-button:disabled, .orb-hitbox:disabled { cursor: default; opacity: 0.65; }

.footer-zone {
  margin-top: 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links,
.disclaimer {
  margin: 0;
  font-family: var(--font-ui);
}

.footer-links {
  font-size: 0.95rem;
  color: rgba(222, 204, 255, 0.85);
}

.footer-links a {
  color: inherit;
  text-decoration: none;
  transition: color 150ms ease, text-shadow 150ms ease;
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: #fff;
  text-shadow: 0 0 12px rgba(199, 115, 255, 0.32);
}

.dot { padding: 0 10px; }

.disclaimer {
  font-size: 0.78rem;
  color: rgba(214, 194, 255, 0.58);
  letter-spacing: 0.1em;
}

/* Rarity themes */
body.theme-common .background-layer {
  filter: saturate(0.95);
}
body.theme-common .result-card { --glow: rgba(174, 90, 255, 0.25); }

body.theme-uncommon .background-layer {
  background:
    radial-gradient(circle at 50% 20%, rgba(132, 0, 255, 0.14), transparent 36%),
    radial-gradient(circle at 50% 75%, rgba(128, 36, 255, 0.10), transparent 28%),
    radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.22) 0 1px, transparent 2px),
    radial-gradient(circle at 80% 30%, rgba(255, 255, 255, 0.22) 0 1px, transparent 2px),
    radial-gradient(circle at 68% 68%, rgba(214, 160, 255, 0.24) 0 1px, transparent 2px),
    linear-gradient(180deg, #05030c, #090513 40%, #06020c 100%);
}

body.theme-rare .background-layer {
  background:
    radial-gradient(circle at 50% 52%, rgba(190, 88, 255, 0.18), transparent 18%),
    radial-gradient(circle at 50% 52%, rgba(190, 88, 255, 0.08), transparent 34%),
    radial-gradient(circle at 50% 20%, rgba(132, 0, 255, 0.16), transparent 36%),
    radial-gradient(circle at 20% 15%, rgba(255,255,255,0.26) 0 1px, transparent 2px),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,0.26) 0 1px, transparent 2px),
    linear-gradient(180deg, #04030c, #090514 42%, #06020c 100%);
}

body.theme-double-rare .background-layer {
  background:
    radial-gradient(circle at 50% 52%, rgba(231, 146, 255, 0.22), transparent 16%),
    radial-gradient(circle at 50% 52%, rgba(190, 88, 255, 0.09), transparent 35%),
    linear-gradient(135deg, transparent 46%, rgba(180, 90, 255, 0.18) 48%, transparent 50%),
    linear-gradient(225deg, transparent 42%, rgba(180, 90, 255, 0.10) 44%, transparent 46%),
    linear-gradient(180deg, #03020a, #090414 45%, #05020a 100%);
  background-size: auto, auto, 100% 100%, 100% 100%, auto;
}

body.theme-illustration .background-layer {
  background:
    radial-gradient(circle at 50% 22%, rgba(152, 86, 255, 0.18), transparent 24%),
    radial-gradient(circle at 50% 82%, rgba(140, 44, 255, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(0,0,0,0) 0 64%, rgba(90, 26, 150, 0.12) 64% 70%, rgba(8, 2, 18, 0.96) 70%),
    linear-gradient(180deg, #06030d, #10051b 56%, #04020a 100%);
}

body.illustration-9 .background-layer {
  background:
    radial-gradient(circle at 50% 23%, rgba(218, 170, 255, 0.18), transparent 18%),
    linear-gradient(90deg, transparent 44%, rgba(173, 96, 255, 0.26) 44% 56%, transparent 56%),
    linear-gradient(180deg, transparent 0 58%, rgba(71, 32, 118, 0.22) 58% 100%),
    linear-gradient(180deg, #07040f, #10081e 55%, #04020a 100%);
}
body.illustration-20 .background-layer {
  background:
    radial-gradient(circle at 50% 20%, rgba(228, 216, 255, 0.18), transparent 14%),
    radial-gradient(circle at 50% 36%, rgba(157, 74, 255, 0.18), transparent 28%),
    linear-gradient(180deg, transparent 0 72%, rgba(83, 36, 140, 0.18) 72% 100%),
    linear-gradient(180deg, #080511, #160a25 54%, #05020b 100%);
}
body.illustration-32 .background-layer {
  background:
    linear-gradient(180deg, rgba(8,4,16,0) 0 62%, rgba(73, 26, 120, 0.22) 62% 100%),
    radial-gradient(circle at 22% 28%, rgba(255,255,255,0.18) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 18%, rgba(255,255,255,0.22) 0 1px, transparent 2px),
    linear-gradient(180deg, #05030d, #0f081c 55%, #04020a 100%);
}
body.illustration-45 .background-layer {
  background:
    radial-gradient(circle at 70% 35%, rgba(231, 215, 255, 0.20), transparent 11%),
    linear-gradient(90deg, transparent 0 68%, rgba(161, 77, 255, 0.16) 68% 71%, transparent 71%),
    linear-gradient(180deg, transparent 0 72%, rgba(84, 36, 141, 0.15) 72% 100%),
    linear-gradient(180deg, #07040f, #120824 54%, #04020a 100%);
}
body.illustration-62 .background-layer {
  background:
    radial-gradient(circle at 30% 40%, rgba(220, 170, 255, 0.16), transparent 12%),
    radial-gradient(circle at 70% 32%, rgba(193, 103, 255, 0.12), transparent 18%),
    linear-gradient(180deg, transparent 0 64%, rgba(84, 36, 141, 0.18) 64% 100%),
    linear-gradient(180deg, #07040f, #150a26 56%, #04020a 100%);
}
body.illustration-74 .background-layer {
  background:
    radial-gradient(circle at 50% 18%, rgba(220, 208, 255, 0.16), transparent 12%),
    linear-gradient(180deg, transparent 0 63%, rgba(114, 40, 174, 0.20) 63% 70%, rgba(35, 16, 56, 0.26) 70% 100%),
    linear-gradient(180deg, #07040f, #120824 54%, #04020a 100%);
}
body.illustration-89 .background-layer {
  background:
    radial-gradient(circle at 72% 22%, rgba(255, 234, 180, 0.14), transparent 9%),
    linear-gradient(180deg, transparent 0 72%, rgba(74, 32, 121, 0.18) 72% 100%),
    linear-gradient(180deg, #07040f, #0f0719 55%, #04020a 100%);
}
body.illustration-108 .background-layer {
  background:
    linear-gradient(130deg, transparent 0 44%, rgba(199, 116, 255, 0.16) 44% 50%, transparent 50%),
    linear-gradient(180deg, transparent 0 68%, rgba(84, 36, 141, 0.16) 68% 100%),
    linear-gradient(180deg, #06030d, #11071f 55%, #04020a 100%);
}

body.theme-hyper .background-layer {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.18), transparent 9%),
    radial-gradient(circle at 50% 50%, rgba(188, 88, 255, 0.28), transparent 18%),
    linear-gradient(90deg, transparent 0 30%, rgba(255,255,255,0.03) 30% 31%, transparent 31% 66%, rgba(255,255,255,0.04) 66% 67%, transparent 67%),
    linear-gradient(180deg, #000000, #090013 34%, #020006 100%);
  filter: contrast(1.08) saturate(1.08);
}

body.theme-hyper .app-shell {
  animation: hyperDim 850ms ease-out 1;
}

body.theme-common .result-card { box-shadow: 0 0 0 2px rgba(0,0,0,0.55), 0 0 18px rgba(188, 88, 255, 0.20); }
body.theme-uncommon .result-card { box-shadow: 0 0 0 2px rgba(0,0,0,0.55), 0 0 22px rgba(188, 88, 255, 0.25); }
body.theme-rare .result-card { box-shadow: 0 0 0 2px rgba(0,0,0,0.55), 0 0 28px rgba(188, 88, 255, 0.34); }
body.theme-double-rare .result-card { box-shadow: 0 0 0 2px rgba(0,0,0,0.55), 0 0 34px rgba(211, 110, 255, 0.42); }
body.theme-illustration .result-card { box-shadow: 0 0 0 2px rgba(0,0,0,0.55), 0 0 30px rgba(188, 88, 255, 0.38); }
body.theme-hyper .result-card { box-shadow: 0 0 0 2px rgba(255,255,255,0.18), 0 0 40px rgba(237, 194, 255, 0.54), 0 0 64px rgba(188, 88, 255, 0.40); border-color: rgba(255,255,255,0.92); }
body.theme-hyper .result-meta { color: #fff; }

@keyframes orbPulse {
  0%, 100% { opacity: 0.28; transform: scale(0.98); }
  45% { opacity: 0.44; transform: scale(1); }
  65% { opacity: 0.54; transform: scale(1.02); }
}

@keyframes flashBurst {
  from { opacity: 0.76; transform: scale(0.9); }
  to { opacity: 0; transform: scale(1.25); }
}

@keyframes hyperPulse {
  0% { opacity: 0.95; transform: scale(0.92); }
  50% { opacity: 0.58; transform: scale(1.12); }
  100% { opacity: 0; transform: scale(1.3); }
}

@keyframes hyperDim {
  0% { filter: brightness(0.4); }
  45% { filter: brightness(1.12); }
  100% { filter: brightness(1); }
}

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

@media (max-width: 680px) {
  .app-shell { padding-top: 18px; }
  .mute-button { top: 14px; right: 14px; }
  .result-zone { min-height: 168px; }
  .result-card { padding: 16px 14px 18px; }
  .result-text { font-size: clamp(0.95rem, 4vw, 1.12rem); }
  .predo-wrap { width: min(420px, 84vw); }
  .primary-button { min-width: 190px; }
  .footer-links { font-size: 0.85rem; }
  .disclaimer { font-size: 0.68rem; }
}

/* v2: layered rarity scenery + readable pixel typography */
:root {
  --font-main: "Pixelify Sans", "Cascadia Mono", Consolas, monospace;
  --font-ui: "Silkscreen", "Pixelify Sans", "Cascadia Mono", Consolas, monospace;
}

body {
  font-family: var(--font-main);
  letter-spacing: 0.025em;
}

.logo-glow,
.result-meta,
.primary-button,
.footer-links,
.disclaimer,
.mute-button {
  font-family: var(--font-ui);
}

.result-text {
  font-family: var(--font-main);
  font-weight: 600;
  letter-spacing: 0.025em;
  line-height: 1.28;
}

.result-meta {
  letter-spacing: 0.05em;
}

.scene-layer {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
  isolation: isolate;
  transition: opacity 320ms ease, filter 320ms ease;
}

.scene-layer::before,
.scene-layer::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

.scene-object {
  --x: 50%;
  --y: 50%;
  --s: 1;
  --o: .7;
  --delay: 0s;
  position: absolute;
  left: var(--x);
  top: var(--y);
  opacity: var(--o);
  transform: translate(-50%, -50%) scale(var(--s));
  image-rendering: pixelated;
}

.scene-object--star {
  width: 3px;
  height: 3px;
  background: #f6edff;
  box-shadow: 0 0 8px rgba(215, 157, 255, .82);
  animation: starTwinkle 2.8s steps(2, end) var(--delay) infinite;
}

.scene-object--sparkle {
  width: 8px;
  height: 8px;
  background:
    linear-gradient(90deg, transparent 37%, #fff 37% 63%, transparent 63%),
    linear-gradient(0deg, transparent 37%, #fff 37% 63%, transparent 63%);
  filter: drop-shadow(0 0 5px #bd6aff);
  animation: sparklePulse 2.3s steps(3, end) var(--delay) infinite;
}

.scene-object--cloud {
  width: 86px;
  height: 22px;
  background: #351252;
  clip-path: polygon(0 70%, 10% 70%, 10% 48%, 21% 48%, 21% 31%, 39% 31%, 39% 14%, 58% 14%, 58% 29%, 72% 29%, 72% 46%, 88% 46%, 88% 63%, 100% 63%, 100% 100%, 0 100%);
  box-shadow: inset 0 -6px 0 #1b0a2e, 0 0 14px rgba(122, 57, 197, .25);
}

.scene-object--crystal {
  width: 15px;
  height: 42px;
  background: linear-gradient(90deg, #6f2ebf 0 25%, #d59aff 25% 58%, #8a43db 58% 100%);
  clip-path: polygon(50% 0, 100% 28%, 78% 100%, 22% 100%, 0 28%);
  filter: drop-shadow(0 0 8px rgba(200, 109, 255, .52));
}

.scene-object--island {
  width: 118px;
  height: 74px;
  background:
    linear-gradient(180deg, #24103f 0 28%, transparent 28%),
    linear-gradient(135deg, transparent 0 39%, #421565 40% 61%, transparent 62%);
  clip-path: polygon(5% 18%, 24% 8%, 48% 0, 78% 11%, 96% 24%, 91% 42%, 72% 47%, 62% 69%, 49% 100%, 38% 69%, 28% 49%, 9% 42%);
  filter: drop-shadow(0 0 12px rgba(150, 72, 226, .22));
}

.scene-object--pillar {
  width: 28px;
  height: 96px;
  border-left: 5px solid #3c155d;
  border-right: 5px solid #3c155d;
  background: linear-gradient(90deg, #150823, #2b0f45 50%, #150823);
  box-shadow: 0 0 12px rgba(141, 59, 216, .18);
}

.scene-object--pillar::before,
.scene-object--pillar::after {
  content: '';
  position: absolute;
  left: -8px;
  width: 34px;
  height: 8px;
  background: #4e1d74;
}
.scene-object--pillar::before { top: -4px; }
.scene-object--pillar::after { bottom: -4px; }

.scene-object--beam {
  width: 10px;
  height: 170px;
  background: linear-gradient(180deg, rgba(234,207,255,0), rgba(196,103,255,.28), rgba(234,207,255,0));
  filter: blur(1px);
}

.scene-common::before,
.scene-uncommon::before,
.scene-rare::before,
.scene-double-rare::before {
  left: 50%;
  top: 55%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: -1;
}

.scene-common::before {
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(163, 58, 255, .08), transparent 68%);
}

.scene-uncommon::before {
  width: 330px;
  height: 330px;
  background: radial-gradient(circle, rgba(173, 66, 255, .14), transparent 68%);
}

.scene-rare::before {
  width: 380px;
  height: 380px;
  border: 2px solid rgba(188, 91, 255, .22);
  box-shadow: 0 0 22px rgba(181, 75, 255, .16), inset 0 0 22px rgba(181, 75, 255, .12);
}

.scene-double-rare::before {
  width: 410px;
  height: 410px;
  border: 2px solid rgba(229, 176, 255, .34);
  box-shadow: 0 0 0 18px rgba(126, 45, 195, .05), 0 0 32px rgba(188, 91, 255, .24), inset 0 0 28px rgba(188, 91, 255, .16);
}

.scene-double-rare::after {
  left: 50%;
  bottom: 8%;
  width: min(620px, 92vw);
  height: 150px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, rgba(120, 44, 181, .08));
  border-top: 1px solid rgba(198, 110, 255, .14);
}

.scene-feature {
  position: absolute;
  pointer-events: none;
  image-rendering: pixelated;
}

/* ILLUSTRATION RARE: eight fixed fortune-specific scenes */
.scene-ir-door {
  background: linear-gradient(180deg, rgba(10,4,17,.12), rgba(31,8,48,.22));
}
.scene-feature--door {
  left: 13%;
  top: 40%;
  width: 78px;
  height: 146px;
  border: 5px solid #8240c2;
  background: linear-gradient(90deg, #170a24 0 54%, #e5bdff 54% 58%, #6c28a4 58% 100%);
  box-shadow: 0 0 30px rgba(210, 131, 255, .32);
}
.scene-feature--door::after {
  content: '';
  position: absolute;
  inset: 8px;
  border: 2px solid rgba(230, 199, 255, .18);
}
.scene-feature--path-light {
  left: 6%;
  top: 57%;
  width: 260px;
  height: 210px;
  background: linear-gradient(106deg, transparent 0 42%, rgba(184, 89, 255, .18) 43% 62%, transparent 63%);
  filter: blur(2px);
}

.scene-ir-crystal::after,
.scene-feature--mist-bed {
  left: 0;
  right: 0;
  bottom: 12%;
  height: 28%;
  background: linear-gradient(180deg, transparent, rgba(89, 34, 145, .16));
}
.scene-feature--crystal-garden {
  left: 7%;
  right: 7%;
  bottom: 18%;
  height: 140px;
  background:
    linear-gradient(78deg, transparent 0 6%, #6d2ead 6% 8%, #d9a4ff 8% 9%, transparent 9% 18%, #8b43d0 18% 21%, transparent 21% 68%, #7b36bd 68% 71%, #e2baff 71% 72%, transparent 72% 83%, #552384 83% 86%, transparent 86%);
  filter: drop-shadow(0 0 10px rgba(189, 103, 255, .34));
}

.scene-feature--castle-left,
.scene-feature--castle-right {
  bottom: 19%;
  width: 180px;
  height: 170px;
  background: #12081e;
  clip-path: polygon(0 100%, 0 54%, 8% 54%, 8% 42%, 18% 42%, 18% 26%, 29% 26%, 29% 46%, 39% 46%, 39% 15%, 50% 0, 61% 15%, 61% 37%, 71% 37%, 71% 21%, 81% 21%, 81% 53%, 92% 53%, 92% 38%, 100% 38%, 100% 100%);
  box-shadow: 0 0 18px rgba(144, 57, 214, .24);
}
.scene-feature--castle-left { left: -1%; transform: scale(.78); transform-origin: bottom left; }
.scene-feature--castle-right { right: -2%; transform: scale(.68) scaleX(-1); transform-origin: bottom right; }
.scene-feature--moon-large {
  right: 9%;
  top: 17%;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: #d9b8ff;
  box-shadow: 0 0 28px rgba(198, 133, 255, .42);
}
.scene-feature--moon-large::after {
  content: '';
  position: absolute;
  width: 72px;
  height: 78px;
  left: 26px;
  top: -5px;
  border-radius: 50%;
  background: #080412;
}

.scene-feature--tower-window {
  left: 8%;
  bottom: 20%;
  width: 150px;
  height: 220px;
  background: #10071b;
  clip-path: polygon(8% 100%, 8% 18%, 18% 18%, 18% 5%, 50% 0, 82% 5%, 82% 18%, 92% 18%, 92% 100%);
}
.scene-feature--tower-window::after {
  content: '';
  position: absolute;
  right: 35px;
  top: 60px;
  width: 19px;
  height: 26px;
  background: #f4d2ff;
  box-shadow: 0 0 18px #c06cff;
}
.scene-feature--horizon-city {
  right: 0;
  bottom: 19%;
  width: 58%;
  height: 90px;
  background: #0d0617;
  clip-path: polygon(0 100%, 0 66%, 8% 66%, 8% 46%, 16% 46%, 16% 76%, 24% 76%, 24% 31%, 33% 31%, 33% 64%, 43% 64%, 43% 41%, 51% 41%, 51% 76%, 61% 76%, 61% 50%, 72% 50%, 72% 25%, 82% 25%, 82% 60%, 92% 60%, 92% 43%, 100% 43%, 100% 100%);
}

.scene-feature--lake {
  left: 0;
  right: 0;
  bottom: 8%;
  height: 30%;
  background: repeating-linear-gradient(180deg, rgba(75, 26, 119, .12) 0 8px, rgba(183, 94, 255, .08) 8px 10px);
  border-top: 2px solid rgba(188, 97, 255, .22);
}
.scene-feature--lake-reflection {
  right: 12%;
  bottom: 11%;
  width: 86px;
  height: 180px;
  background: linear-gradient(180deg, rgba(215, 174, 255, .22), transparent);
  clip-path: polygon(24% 0, 76% 0, 88% 22%, 66% 29%, 84% 43%, 55% 51%, 76% 65%, 42% 74%, 61% 100%, 27% 100%, 45% 72%, 20% 61%, 46% 49%, 21% 36%, 49% 25%);
}

.scene-feature--storm-clouds {
  left: 0;
  right: 0;
  top: 10%;
  height: 170px;
  background: linear-gradient(180deg, rgba(68, 21, 104, .72), rgba(27, 8, 45, .42) 65%, transparent);
  clip-path: polygon(0 0, 100% 0, 100% 62%, 91% 62%, 91% 78%, 72% 78%, 72% 62%, 56% 62%, 56% 83%, 38% 83%, 38% 67%, 21% 67%, 21% 84%, 0 84%);
}
.scene-feature--lightning-left,
.scene-feature--lightning-right {
  top: 19%;
  width: 12px;
  height: 170px;
  background: #e6c6ff;
  clip-path: polygon(45% 0, 100% 0, 66% 38%, 100% 38%, 24% 100%, 43% 56%, 0 56%);
  filter: drop-shadow(0 0 8px #bf6fff);
}
.scene-feature--lightning-left { left: 18%; transform: rotate(8deg); }
.scene-feature--lightning-right { right: 18%; transform: rotate(-7deg) scale(.75); }

.scene-feature--bridge {
  left: 13%;
  right: 13%;
  bottom: 27%;
  height: 48px;
  border-top: 8px solid #3e145f;
  background: repeating-linear-gradient(90deg, transparent 0 36px, #2c0d45 36px 43px);
  transform: perspective(420px) rotateX(48deg);
}
.scene-feature--cliff-left,
.scene-feature--cliff-right {
  bottom: 14%;
  width: 30%;
  height: 200px;
  background: #11061d;
  clip-path: polygon(0 100%, 0 42%, 12% 30%, 28% 32%, 43% 12%, 61% 20%, 76% 4%, 100% 31%, 100% 100%);
}
.scene-feature--cliff-left { left: 0; }
.scene-feature--cliff-right { right: 0; transform: scaleX(-1); }

.scene-feature--temple {
  left: 50%;
  bottom: 20%;
  width: 320px;
  height: 160px;
  transform: translateX(-50%);
  background: #10071a;
  clip-path: polygon(12% 100%, 12% 42%, 0 42%, 50% 0, 100% 42%, 88% 42%, 88% 100%);
  opacity: .74;
}
.scene-feature--temple-pillars {
  left: 50%;
  bottom: 20%;
  width: 230px;
  height: 115px;
  transform: translateX(-50%);
  background: repeating-linear-gradient(90deg, #1c0b2e 0 16px, transparent 16px 47px);
}
.scene-feature--sigil-floor {
  left: 50%;
  bottom: 13%;
  width: 360px;
  height: 110px;
  transform: translateX(-50%) perspective(420px) rotateX(70deg);
  border: 2px solid rgba(203, 122, 255, .46);
  border-radius: 50%;
  box-shadow: 0 0 24px rgba(186, 94, 255, .26), inset 0 0 22px rgba(186, 94, 255, .18);
}

/* HYPER PRED: four fixed result-specific worlds */
.scene-hp-void {
  background: radial-gradient(circle at 50% 54%, rgba(160, 44, 230, .14), transparent 22%), rgba(0,0,0,.42);
}
.scene-feature--void-ring {
  left: 50%;
  top: 55%;
  width: 430px;
  height: 430px;
  border: 2px solid rgba(245, 225, 255, .45);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 18px rgba(137, 46, 197, .05), 0 0 42px rgba(206, 120, 255, .27);
}
.scene-feature--void-symbols {
  inset: 13% 11%;
  border: 2px dashed rgba(195, 109, 255, .16);
  clip-path: polygon(50% 0, 63% 19%, 88% 13%, 82% 39%, 100% 50%, 81% 63%, 88% 88%, 62% 81%, 50% 100%, 37% 80%, 12% 88%, 19% 62%, 0 50%, 18% 38%, 12% 12%, 37% 19%);
}

.scene-hp-glitch { filter: contrast(1.16) saturate(1.3); }
.scene-feature--glitch-bars {
  inset: 0;
  background: repeating-linear-gradient(180deg, transparent 0 23px, rgba(238, 213, 255, .05) 23px 26px, transparent 26px 51px);
  animation: glitchShift .8s steps(2, end) infinite;
}
.scene-feature--glitch-split {
  left: 10%;
  right: 10%;
  top: 46%;
  height: 26px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.15) 16% 34%, transparent 34% 54%, rgba(181,75,255,.24) 54% 80%, transparent);
  animation: glitchSplit .62s steps(2, end) infinite;
}

.scene-feature--hall-pillars {
  left: 4%;
  right: 4%;
  bottom: 12%;
  height: 58%;
  background: repeating-linear-gradient(90deg, #13091f 0 44px, #3b155a 44px 52px, transparent 52px 118px);
  opacity: .8;
}
.scene-feature--hall-throne {
  left: 50%;
  bottom: 18%;
  width: 180px;
  height: 210px;
  transform: translateX(-50%);
  background: #170922;
  clip-path: polygon(13% 100%, 13% 43%, 24% 43%, 24% 14%, 37% 14%, 50% 0, 63% 14%, 76% 14%, 76% 43%, 87% 43%, 87% 100%);
  box-shadow: 0 0 28px rgba(167, 63, 229, .18);
}
.scene-feature--hall-rays {
  left: 50%;
  top: 6%;
  width: 440px;
  height: 560px;
  transform: translateX(-50%);
  background: conic-gradient(from 180deg at 50% 0, transparent 0 42deg, rgba(216, 166, 255, .08) 42deg 53deg, transparent 53deg 76deg, rgba(216, 166, 255, .06) 76deg 83deg, transparent 83deg 360deg);
}

.scene-feature--orb-rift {
  left: 50%;
  top: 54%;
  width: 460px;
  height: 460px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, transparent 0 44%, rgba(215, 155, 255, .12) 44% 46%, transparent 46% 58%, rgba(177, 75, 241, .08) 58% 60%, transparent 60%);
}
.scene-feature--rift-lines {
  inset: 8%;
  background:
    linear-gradient(123deg, transparent 0 35%, rgba(232,202,255,.25) 35% 36%, transparent 36% 100%),
    linear-gradient(68deg, transparent 0 61%, rgba(166,64,225,.24) 61% 62%, transparent 62% 100%),
    linear-gradient(154deg, transparent 0 74%, rgba(232,202,255,.18) 74% 75%, transparent 75% 100%);
  filter: drop-shadow(0 0 7px #b55cff);
}
.scene-feature--orb-halo {
  left: 50%;
  top: 54%;
  width: 330px;
  height: 330px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-shadow: 0 0 75px 22px rgba(179, 69, 245, .13), inset 0 0 70px rgba(231, 196, 255, .11);
}

@keyframes starTwinkle {
  0%, 100% { opacity: calc(var(--o) * .65); }
  50% { opacity: var(--o); }
}

@keyframes sparklePulse {
  0%, 100% { transform: translate(-50%, -50%) scale(calc(var(--s) * .8)); opacity: .45; }
  50% { transform: translate(-50%, -50%) scale(var(--s)); opacity: var(--o); }
}

@keyframes glitchShift {
  0%, 100% { transform: translateY(0); opacity: .45; }
  50% { transform: translateY(8px); opacity: .8; }
}

@keyframes glitchSplit {
  0%, 100% { transform: translateX(-8px); opacity: .2; }
  50% { transform: translateX(11px); opacity: .62; }
}

/* Keep scenery visually behind the mascot and all controls. */
.app-shell { z-index: 3; }
.hero-zone { position: relative; z-index: 4; }
.predo-wrap { z-index: 4; }
.result-zone,
.action-zone,
.footer-zone,
.logo-button { position: relative; z-index: 5; }
.mute-button { z-index: 6; }

@media (max-width: 680px) {
  .scene-feature--castle-left,
  .scene-feature--castle-right { opacity: .75; }
  .scene-feature--moon-large { width: 66px; height: 66px; }
  .scene-feature--moon-large::after { width: 54px; height: 58px; left: 20px; }
  .scene-feature--void-ring { width: 310px; height: 310px; }
  .scene-feature--orb-rift { width: 340px; height: 340px; }
  .scene-feature--orb-halo { width: 260px; height: 260px; }
}

.preview-panel {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  width: 164px;
  padding: 8px;
  background: rgba(7, 3, 12, .92);
  border: 1px solid rgba(187, 92, 255, .65);
  box-shadow: 0 0 18px rgba(159, 57, 230, .18);
}

.preview-panel > span {
  font-family: var(--font-ui);
  font-size: .6rem;
  color: rgba(222, 191, 255, .68);
  margin-bottom: 2px;
}

.preview-panel button {
  appearance: none;
  border: 1px solid rgba(170, 79, 236, .34);
  background: rgba(33, 12, 49, .78);
  color: #eadbff;
  font-family: var(--font-main);
  font-size: .66rem;
  text-align: left;
  padding: 5px 7px;
  cursor: pointer;
}
.preview-panel button:hover { background: rgba(72, 25, 104, .88); }