@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap");
:root {
  color-scheme: dark;
  --bg: #101315;
  --panel: #191d20;
  --line: #343a3c;
  --muted: #a4aba7;
  --ink: #f1f3e9;
  --lime: #c6f783;
  --accent: var(--lime);
  font-family: "DM Sans", sans-serif;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
}
.now-playing {
  position: fixed;
  top: max(8px, env(safe-area-inset-top));
  right: max(8px, env(safe-area-inset-right));
  z-index: 100;
  max-width: calc(100vw - 16px);
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--lime);
  font-size: 12px;
  line-height: 1.4;
  pointer-events: none;
}
button,
input,
select {
  font: inherit;
}
button,
a,
input,
select {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
  color: inherit;
}
button:disabled {
  cursor: wait;
  opacity: 0.55;
}
a {
  color: inherit;
  text-decoration: none;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
.arena:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 5px;
}
[hidden] {
  display: none !important;
}
.topbar,
main,
.site-footer {
  max-width: 1320px;
  margin: auto;
}
.topbar {
  height: 113px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 13px;
  font:
    700 15px/1 "Space Grotesk",
    sans-serif;
  letter-spacing: -0.4px;
}
.brand-icon {
  font-size: 40px;
  color: var(--lime);
  letter-spacing: -13px;
  transform: rotate(-9deg);
  width: 51px;
}
.brand-icon span {
  display: inline-block;
  transform: translateY(7px);
}
.brand-dot {
  font-size: 8px;
  vertical-align: top;
  margin-left: 3px;
}
.edition {
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--muted);
}
.edition span {
  margin-left: 32px;
  color: var(--ink);
}
.quiet-button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  padding: 9px 14px;
  font-size: 12px;
}
.quiet-button:hover {
  background: #282e2d;
}
.topbar-actions { display: flex; align-items: center; gap: 18px; }
#login-open {
  min-width: 190px;
  min-height: 76px;
  padding: 14px 28px;
  border: 4px solid #00e5ff;
  border-radius: 12px;
  background: #102c32;
  color: #e6fcff;
  font-size: 30px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 0 20px #00e5ff30;
  animation: login-shake 2s ease-in-out infinite;
}
#login-open:hover { background: #16434c; }
#login-open:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
@keyframes login-shake {
  0%, 75%, 100% { transform: translateX(0) rotate(0); }
  80%, 90% { transform: translateX(-2px) rotate(-1deg); }
  85%, 95% { transform: translateX(2px) rotate(1deg); }
}
@media (prefers-reduced-motion: reduce) {
  #login-open { animation: none; }
}
html.account-reduced-motion #login-open { animation: none; }
/* A signed-in player sees their handle, so the button is a profile entry point
   rather than an invitation and must stop competing for attention. */
#login-open.signed-in {
  min-width: 0;
  max-width: 240px;
  min-height: 48px;
  padding: 11px 18px;
  border-width: 3px;
  border-color: var(--line);
  background: var(--panel);
  color: var(--ink);
  font-size: 18px;
  font-weight: 600;
  box-shadow: none;
  animation: none;
  overflow: hidden;
  text-overflow: ellipsis;
}
#login-open.signed-in:hover { background: #282e2d; }
#sound {
  min-width: 128px;
  min-height: 48px;
  padding: 11px 18px;
  border: 3px solid var(--lime);
  background: #222d24;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 0 0 3px #c6f7831a;
}
#sound:hover { background: #33432e; }
#sound[aria-pressed="false"] {
  background: #303030;
  border-color: #939393;
  color: #dedede;
  box-shadow: 0 0 0 3px #9393931a;
}
#sound[aria-pressed="false"]:hover { background: #414141; border-color: #b5b5b5; }
#sound:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 62px 0 46px;
  overflow: hidden;
}
.eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.8px;
  color: var(--muted);
  margin: 0 0 18px;
}
.intro .eyebrow {
  color: var(--lime);
}
.live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime);
  margin-right: 9px;
  vertical-align: 1px;
}
h1 {
  font:
    500 clamp(50px, 6.3vw, 82px) / 0.98 "Space Grotesk",
    sans-serif;
  letter-spacing: -5px;
  margin: 0 0 22px;
}
h1 em {
  font-style: normal;
  color: var(--lime);
}
.intro-copy {
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
  margin: 0;
}
.creator-credit {
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
}
.hero-art {
  position: relative;
  width: 400px;
  height: 260px;
  margin-right: 90px;
}
.pixel-face {
  border: 0;
  padding: 0;
  width: 145px;
  height: 145px;
  position: absolute;
  top: 44px;
  left: 130px;
  background: var(--lime);
  border-radius: 25px;
  transform: rotate(-14deg);
  animation: mascot-float 3.8s ease-in-out infinite;
  box-shadow:
    13px 13px 0 #6d8b44,
    25px 25px 0 #202b22;
}
#cubie-hint {
  width: min(900px, 90vw);
  max-height: 90dvh;
  min-height: min(650px, 85dvh);
  margin: auto;
  padding: clamp(24px, 5vw, 64px);
  overflow-y: auto;
  border: 3px solid var(--lime);
  border-radius: 28px;
  background: #17251a;
  color: #f1f5e9;
  text-align: center;
  box-shadow: 0 24px 100px #0009;
}
#cubie-hint::backdrop { background: rgb(5 10 8 / 85%); }
.cubie-hint-art { position: relative; height: 190px; }
.cubie-hint-art .pixel-face { top: 10px; left: calc(50% - 72px); }
#cubie-hint h2 { font-size: clamp(25px, 4vw, 42px); line-height: 1.15; }
#cubie-hint-copy { font-size: clamp(18px, 2.5vw, 25px); line-height: 1.6; margin: 24px auto; max-width: 650px; }
#cubie-hint-copy strong { color: var(--lime); overflow-wrap: anywhere; }
#cubie-hint-okay { min-width: 180px; min-height: 52px; padding: 12px 36px; background: var(--lime); color: #17251a; border-radius: 12px; font-weight: 800; }
.pixel-face i {
  transform-origin: center;
  animation: mascot-blink 4.8s ease-in-out infinite;
  position: absolute;
  top: 48px;
  width: 17px;
  height: 26px;
  background: #17251a;
  left: 35px;
}
.pixel-face i:nth-child(2) {
  left: 93px;
}
.pixel-face b {
  position: absolute;
  top: 90px;
  left: 52px;
  width: 41px;
  height: 14px;
  border: solid #17251a;
  border-width: 0 9px 7px;
}
.pixel-face::before, .pixel-face::after {
  content: "";
  position: absolute;
  top: 78px;
  width: 29px;
  height: 16px;
  border-radius: 50%;
  background: #f17f99;
  opacity: 0;
  transition: opacity 120ms ease;
  pointer-events: none;
}
.pixel-face::before { left: 16px; }
.pixel-face::after { right: 16px; }
.pixel-face.blushing::before, .pixel-face.blushing::after { opacity: .95; }
.pixel-face.custom-equipped::before, .pixel-face.custom-equipped::after { display: none; }
.cubie-blush { opacity: 0; transition: opacity 120ms ease; }
.pixel-face.blushing .cubie-blush { opacity: .95; }
@keyframes mascot-float {
  0%, 100% { transform: translateY(0) rotate(-14deg); }
  50% { transform: translateY(-11px) rotate(-11deg); }
}
@keyframes mascot-blink {
  0%, 91%, 97%, 100% { transform: scaleY(1); }
  94% { transform: scaleY(.08); }
}
#damage-flash, #healing-flash {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: 0;
  background: rgb(255 35 35 / 22%);
  box-shadow: inset 0 0 100px rgb(235 20 20 / 45%);
}
#healing-flash {
  background: rgb(55 255 115 / 22%);
  box-shadow: inset 0 0 100px rgb(30 220 85 / 45%);
}
#achievement-celebrations {
  position: fixed;
  inset: 0;
  z-index: 45;
  overflow: hidden;
  pointer-events: none;
}
.achievement-confetti {
  position: absolute;
  inset: 0;
  animation: confetti-fade 5s linear forwards;
}
.achievement-confetti i {
  position: absolute;
  left: var(--x);
  top: 0;
  width: 9px;
  height: 14px;
  background: linear-gradient(135deg, var(--confetti-color), #ffffff99, var(--confetti-color));
  animation: confetti-fall var(--fall) linear infinite;
  animation-delay: var(--delay);
}
.achievement-confetti[data-tier="crystal"] i,
.achievement-confetti[data-tier="diamond"] i,
.achievement-confetti[data-tier="rainbow"] i,
.achievement-confetti[data-tier="empyrorite"] i {
  clip-path: polygon(50% 0, 100% 35%, 75% 100%, 25% 100%, 0 35%);
}
.achievement-confetti[data-tier="rainbow"] i {
  background: var(--confetti-color);
  box-shadow: inset 1px 1px 0 #ffffff66;
}
@keyframes confetti-fall {
  from { transform: translate3d(0, -15vh, 0) rotate(0); }
  to { transform: translate3d(var(--drift), 115vh, 0) rotate(var(--turn)); }
}
@keyframes confetti-fade {
  0%, 80% { opacity: 1; }
  100% { opacity: 0; }
}
#name-surprise {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  background: rgb(210 0 0 / 72%);
  display: grid;
  place-items: center;
  padding: 24px;
  color: white;
  text-align: center;
  font: 600 clamp(26px, 6vw, 64px) / 1.2 "Space Grotesk", sans-serif;
  text-shadow: 0 3px 20px #000;
}
#name-surprise[data-secret="cubie"] { background: rgb(61 118 50 / 70%); }
#name-surprise[data-secret="boo"] { background: rgb(85 32 124 / 75%); }
#name-surprise[data-secret="starlight"] {
  background: radial-gradient(circle at 20% 30%, #fff8 0 2px, transparent 3px),
    radial-gradient(circle at 80% 65%, #fff8 0 3px, transparent 4px),
    radial-gradient(circle at 65% 20%, #fff8 0 2px, transparent 3px),
    linear-gradient(135deg, #142e70cc, #6b248dcc);
  background-size: 180px 160px, 250px 220px, 320px 260px, 100% 100%;
}
#gaster-blackout {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  background: #000;
}
body.gaster-active { overflow: hidden; cursor: none; }
@media (prefers-reduced-motion: reduce) {
  .pixel-face, .pixel-face i { animation: none; }
  #damage-flash, #healing-flash {
    background: transparent;
    box-shadow: inset 0 0 0 4px #f66;
  }
  #healing-flash { box-shadow: inset 0 0 0 4px #6f9; }
  .achievement-confetti i {
    animation: none;
    top: var(--y);
    transform: rotate(var(--turn));
  }
}
.orbit {
  --orbit-angle: -28deg;
  position: absolute;
  width: 330px;
  height: 130px;
  left: 45px;
  top: 56px;
  overflow: visible;
  transform: rotate(var(--orbit-angle));
  transform-origin: center;
  pointer-events: none;
  animation: hero-ring-rotation 16.363636s linear infinite;
}
.orbit-two {
  --orbit-angle: 31deg;
  animation-duration: 21.818182s;
  animation-direction: reverse;
}
@keyframes hero-ring-rotation {
  from { transform: rotate(var(--orbit-angle)); }
  to { transform: rotate(calc(var(--orbit-angle) + 360deg)); }
}
.orbit-track, .orbit-particle { fill: none; vector-effect: non-scaling-stroke; }
.orbit-track { stroke: #394836; stroke-width: 1px; }
/* A round dash shares the track's exact ellipse, keeping its center on the
   ring at every angle and screen size. Duration / 1.1 means 10% faster. */
.orbit-particle {
  stroke: var(--lime);
  stroke-width: 7px;
  stroke-linecap: round;
  stroke-dasharray: .001 99.999;
  filter: drop-shadow(0 0 4px #c6f78388);
  animation: hero-orbit-particle 16.363636s linear infinite;
}
.orbit-two .orbit-particle {
  animation-duration: 21.818182s;
  animation-direction: reverse;
}
@keyframes hero-orbit-particle { to { stroke-dashoffset: -100; } }
@keyframes cubie-sparkle {
  0%, 100% { opacity: .4; transform: translateY(0) scale(.8) rotate(-10deg); }
  50% { opacity: 1; transform: translateY(-8px) scale(1.1) rotate(20deg); }
}
.spark {
  pointer-events: none;
  animation: cubie-sparkle 3.4s ease-in-out infinite;
  color: var(--lime);
  position: absolute;
  font-size: 44px;
}
.s1 {
  right: -15px;
  top: 25px;
}
.s2 {
  animation-delay: -1.7s;
  left: 42px;
  bottom: 35px;
  font-size: 30px;
}
.art-label {
  position: absolute;
  right: 3px;
  bottom: 5px;
  transform: rotate(-8deg);
  font: 10px monospace;
  color: var(--muted);
  letter-spacing: 2px;
}
.art-label strong { color: var(--lime); line-height: 2; }
@media (prefers-reduced-motion: reduce) {
  .orbit, .orbit-particle, .spark { animation: none; }
}
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}
.section-heading h2 {
  font-size: 15px;
  font-weight: 500;
  margin: 0;
}
.section-heading h2 span {
  font: 10px monospace;
  color: var(--muted);
  margin-left: 9px;
  border: 1px solid var(--line);
  padding: 3px 6px;
  border-radius: 4px;
}
.section-heading p {
  font-size: 11px;
  color: var(--muted);
}
.game-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.game-card {
  background: #1a1e20;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px 19px;
  position: relative;
  transition:
    transform 0.15s,
    border-color 0.15s;
}
.game-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
}
.game-card.selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, #191d20);
}
.card-top {
  display: flex;
  justify-content: space-between;
  color: var(--accent);
  font: 11px monospace;
}
.card-top span {
  font:
    8px "DM Sans",
    sans-serif;
  letter-spacing: 1.2px;
  color: var(--muted);
}
.card-art {
  height: 97px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font:
    600 38px "Space Grotesk",
    sans-serif;
  letter-spacing: -2px;
}
.jukebox-art svg { overflow: visible; filter: drop-shadow(0 2px 1px #60285c65) drop-shadow(0 0 5px #f5a5dc25); }
/* Full-card code rain stays beneath the readable game information. */
.game-card[data-game="hangman"] { overflow: hidden; isolation: isolate; }
.hangman-matrix {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  opacity: .48;
  mask-image: linear-gradient(to bottom, #0005, #000 28%, #000b 65%, #0002);
}
.matrix-stream {
  position: absolute;
  top: 0;
  left: calc(var(--column) * 8%);
  white-space: pre;
  font: 9px/13px monospace;
  text-align: center;
  color: transparent;
  background: repeating-linear-gradient(to bottom, #235c3d 0, #3c9f5c 70px, #91edaa 115px, #dbffe2 130px, #235c3d 143px);
  background-clip: text;
  -webkit-background-clip: text;
  animation: hangman-code-fall var(--fall) linear var(--offset) infinite;
}
@keyframes hangman-code-fall {
  from { transform: translateY(-50%); }
  to { transform: translateY(0); }
}
.game-card[data-game="hangman"] .card-top,
.game-card[data-game="hangman"] .card-title,
.game-card[data-game="hangman"] .card-description {
  text-shadow: 0 1px 3px #07130b, 0 0 6px #07130b;
}
.word-art { gap: 5px; filter: drop-shadow(0 2px 2px #07190f); }
.word-art .word-letter {
  color: transparent;
  background: linear-gradient(135deg, #f1ffcd, #c6f783 30%, #6cbd84 65%, #c3f7a0);
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-stroke: .35px #d7ffb580;
}
.word-art .word-question {
  border-radius: 7px;
  color: #e6ffbe;
  background: radial-gradient(ellipse at 50% 60%, #122c20, #244d32);
  box-shadow: inset 0 2px 4px #061d13, inset 0 -1px 0 #e2ffb866,
    0 3px 0 #214b32, 0 0 10px #9cf58c20;
  text-shadow: 0 0 7px #bfff8770;
}
@media (prefers-reduced-motion: reduce) {
  .matrix-stream { animation: none; transform: translateY(-25%); }
}
html.account-reduced-motion .matrix-stream { animation: none; transform: translateY(-25%); }
html.account-reduced-motion .word-art * { animation: none; }
.word-art .word-question {
  transform: rotate(9deg);
  border: 1px solid var(--accent);
  padding: 0 10px;
  margin: 0 6px;
}
/* Sculpted letterforms with separate living gradients and etched facets. */
.word-art { gap: 0; }
.word-art .word-rune {
  display: block;
  width: 48px;
  height: 64px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  -webkit-text-stroke: 0;
}
.word-rune svg { width: 100%; height: 100%; overflow: visible; }
.rune-type { font: 700 43px "Space Grotesk", sans-serif; letter-spacing: -1px; }
.rune-stop { animation: rune-metal-flow 4.8s ease-in-out var(--stop-phase) infinite; }
.rune-orbit { transform-origin: 24px 32px; animation: rune-orbit-turn 18s linear var(--rune-phase) infinite; }
.word-rune:last-child .rune-orbit { animation-direction: reverse; }
.rune-aura { animation: rune-breathe 3.8s ease-in-out var(--rune-phase) infinite alternate; }
.rune-sparks { animation: rune-breathe 2.6s ease-in-out var(--rune-phase) infinite alternate; }
.rune-sheen { animation: rune-sheen-pass 4.2s ease-in-out var(--rune-phase) infinite; }
@keyframes rune-metal-flow {
  0%, 100% { stop-color: #d8ffb0; }
  25% { stop-color: #80dba9; }
  50% { stop-color: #318d79; }
  75% { stop-color: #afffd0; }
}
@keyframes rune-orbit-turn { to { transform: rotate(360deg); } }
@keyframes rune-breathe { from { opacity: .3; } to { opacity: 1; } }
@keyframes rune-sheen-pass {
  0%, 15% { transform: translateX(-10px); }
  80%, 100% { transform: translateX(65px); }
}
.keys-art { gap: 8px; }
.keys-art i {
  position: relative;
  display: grid;
  place-items: center;
  width: 39px;
  height: 43px;
  box-sizing: border-box;
  isolation: isolate;
  overflow: hidden;
  font-style: normal;
  font-size: 23px;
  letter-spacing: 0;
  color: #f0e9ff;
  border: 1px solid #b4a4f0;
  border-bottom: 4px solid #6658a2;
  border-radius: 8px;
  background:
    radial-gradient(ellipse at 20% 10%, #c3bbff70, transparent 65%),
    linear-gradient(135deg, #514b91, #292c59 58%, #454078);
  box-shadow: inset 0 1px 0 #e4dcff9c, inset 0 -2px 4px #12152f90,
    0 3px 0 #262145, 0 5px 7px #080a203d, 0 0 8px #a699ee20;
  transform: rotate(-8deg);
  --key-phase: 0s;
}
.keys-art i:nth-child(2) {
  transform: translateY(7px) rotate(5deg);
  --key-phase: -1.3s;
}
.keys-art i:nth-child(3) { --key-phase: -2.6s; }
.keys-art i::before {
  content: "";
  position: absolute;
  inset: 3px 3px 4px;
  z-index: 0;
  border: 1px solid #aca2e76b;
  border-radius: 4px;
  background: radial-gradient(ellipse at 50% 65%, #101631 15%, #171c42 55%, #34336a 100%);
  box-shadow: inset 0 3px 5px #030719ef, inset 2px 0 3px #060c2480,
    inset 0 -1px 1px #c6c0ff80, 0 1px 0 #d3c5ff40;
  background-size: 300% 100%;
  animation: key-color-flow 4s ease-in-out var(--key-phase) infinite alternate;
}
.keys-art i::after {
  content: "";
  position: absolute;
  inset: -20px -30px;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, #e9e5ff08 43%, #eef4ff55 49%, #e3eaff12 54%, transparent 62%);
  transform: translateX(-55px);
  animation: key-polish 4.8s ease-in-out var(--key-phase) infinite;
}
.key-cosmos {
  position: absolute;
  inset: 5px 5px 6px;
  border-radius: 3px;
  overflow: hidden;
  background: radial-gradient(ellipse at 70% 80%, #34559635, transparent 70%);
  box-shadow: inset 0 2px 4px #02071d;
}
.key-cosmos svg { width: 100%; height: 100%; display: block; }
.key-galaxy {
  transform-origin: 20px 20px;
  animation: key-galaxy-orbit 18s linear var(--key-phase) infinite;
}
.keys-art i:nth-child(2) .key-galaxy { animation-duration: 23s; animation-direction: reverse; }
.keys-art i:nth-child(3) .key-galaxy { animation-duration: 20s; }
.key-stars { animation: key-signal-glow 3.5s ease-in-out var(--key-phase) infinite alternate; }
@keyframes key-galaxy-orbit { to { transform: rotate(360deg); } }
.key-letter {
  position: relative;
  z-index: 1;
  margin-top: -2px;
  text-shadow: 0 2px 2px #030519, 0 0 3px #070b22, 0 0 7px #d4c7ff90;
}
.key-signal {
  position: absolute;
  bottom: 4px;
  width: 9px;
  height: 1.5px;
  border-radius: 2px;
  background: #96d9ff;
  box-shadow: 0 0 4px #8bcfff;
  animation: key-signal-glow 2.8s ease-in-out var(--key-phase) infinite alternate;
}
@keyframes key-color-flow {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}
@keyframes key-polish {
  0%, 15% { transform: translateX(-55px); }
  75%, 100% { transform: translateX(55px); }
}
@keyframes key-signal-glow {
  from { opacity: .4; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .keys-art i::before, .keys-art i::after { animation: none; }
}
html.account-reduced-motion .keys-art *,
html.account-reduced-motion .keys-art i::before,
html.account-reduced-motion .keys-art i::after { animation: none; }
.blocks-art {
  font-size: 55px;
  gap: 12px;
}
.blocks-art span:last-child {
  transform: rotate(15deg) translateY(10px);
}
.boss-art {
  font-size: 95px;
  position: relative;
  line-height: 1;
}
.boss-art span {
  position: absolute;
  font-size: 35px;
  color: #242022;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  letter-spacing: 3px;
}
.pumpkin-art {
  font-size: 72px;
  text-shadow: 6px 0 #99683c;
  transform: rotate(-9deg);
}
.wrath-art { color: #ffe066; }
.wrath-art svg {
  stroke: #17191d;
  stroke-width: 2.5;
  stroke-linejoin: round;
  paint-order: stroke fill;
}
.singularity-art svg { width: 100px; height: 80px; filter: drop-shadow(0 0 12px #a488ff66); }
.singularity-card { background: linear-gradient(135deg, #121625, #242039); }
.wrath-art svg { width: 48px; height: 48px; filter: drop-shadow(0 0 12px #ffe06633); }
/* The whole cylinder turns together; no independently squashed face or edge. */
.shop-card-art { position: relative; }
.shop-coin-scene {
  display: inline-block;
  position: relative;
  width: 90px;
  height: 90px;
  perspective: 450px;
  animation: shop-coin-float 4.8s ease-in-out infinite;
}
.shop-coin {
  position: absolute;
  inset: 2px;
  transform-style: preserve-3d;
  transform: rotateX(-12deg) rotateY(-25deg);
  animation: shop-coin-flip 5s ease-in-out infinite;
}
.shop-coin-face {
  position: absolute;
  inset: 0;
  width: 86px;
  height: 86px;
  backface-visibility: hidden;
}
.shop-coin-front { transform: translateZ(5px); }
.shop-coin-back { transform: rotateY(180deg) translateZ(5px); }
.shop-coin-ridge {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4.3px;
  height: 10px;
  background: linear-gradient(90deg, #153d76, #8cbcf0 36%, #447eb8 58%, #173c70);
  backface-visibility: hidden;
  transform: translate(-50%, -50%) rotateZ(calc(var(--ridge) * 5.625deg)) translateY(-42.95px) rotateX(90deg);
}
.shop-coin-sparkles {
  position: absolute;
  width: 90px;
  height: 90px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  overflow: visible;
  pointer-events: none;
}
.shop-sparkle {
  transform-box: fill-box;
  transform-origin: center;
  animation: shop-sparkle 3s ease-in-out infinite;
}
.shop-sparkle:nth-child(2) { animation-delay: -1s; }
.shop-sparkle:nth-child(3) { animation-delay: -2s; }
@keyframes shop-coin-float {
  0%, 100% { transform: translateY(2px); }
  50% { transform: translateY(-5px); }
}
@keyframes shop-coin-flip {
  0%, 65% { transform: rotateX(-12deg) rotateY(-25deg); }
  100% { transform: rotateX(-12deg) rotateY(335deg); }
}
@keyframes shop-sparkle {
  0%, 60%, 100% { opacity: 0; transform: scale(.35); }
  30% { opacity: 1; transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .shop-coin, .shop-coin-scene { animation: none; }
  .shop-sparkle { opacity: .7; }
}
html.account-reduced-motion .shop-coin-scene { animation: none; }
/* Quiet, independent idle motions keep the arcade selection alive. */
.word-art .word-question { animation: arcade-question 3s ease-in-out infinite; }
.keys-art i { animation: arcade-key-left 3.2s ease-in-out infinite; }
.keys-art i:nth-child(2) { animation: arcade-key-middle 3.8s ease-in-out -1.2s infinite; }
.keys-art i:nth-child(3) { animation: arcade-key-right 3.4s ease-in-out -.7s infinite; }
/* An illuminated blue panel, with flowing etched curves and a passing sheen. */
.turtle-prophecy { width: 180px; height: 97px; overflow: visible; filter: drop-shadow(0 3px 3px #02091d80); }
.prophecy-stars, .prophecy-comet { filter: url(#turtle-soft-glow); }
/* Separate gradient stops send blue color waves through each etched piece. */
/* Deep blues ebb independently beneath the brighter etched details. */
.prophecy-panel-gradient stop {
  animation: prophecy-panel-blue 6s ease-in-out var(--panel-phase) infinite;
}
@keyframes prophecy-panel-blue {
  0%, 100% { stop-color: #08132e; }
  25% { stop-color: #102857; }
  50% { stop-color: #164578; }
  75% { stop-color: #172d65; }
}
.prophecy-blue-gradient stop {
  animation: prophecy-blue-color var(--blue-duration) ease-in-out var(--blue-phase) infinite;
}
.prophecy-blue-depth stop { animation-name: prophecy-blue-depth; }
@keyframes prophecy-blue-color {
  0%, 100% { stop-color: #244cb4; }
  20% { stop-color: #387ee8; }
  40% { stop-color: #47b8f2; }
  55% { stop-color: #b5eeff; }
  70% { stop-color: #67cefa; }
  85% { stop-color: #455bd2; }
}
@keyframes prophecy-blue-depth {
  0%, 100% { stop-color: #102951; }
  25% { stop-color: #174582; }
  50% { stop-color: #3688c2; }
  75% { stop-color: #245d9e; }
}
.prophecy-space {
  /* One shared transform keeps every space detail drifting in the same direction. */
  animation: prophecy-space-drift 8s ease-in-out infinite alternate;
}
.prophecy-nebula {
  animation: prophecy-nebula-breathe 5s ease-in-out infinite alternate;
}
.prophecy-nebula-two { animation-duration: 6.5s; animation-delay: -3s; }
/* Fine background details stay inside the shared directional drift. */
.prophecy-galaxy {
  transform-box: fill-box;
  transform-origin: center;
  animation: prophecy-galaxy-turn 28s linear infinite;
}
.prophecy-stardust { animation: prophecy-nebula-breathe 7s ease-in-out -2s infinite alternate; }
.prophecy-comet { animation: prophecy-comet-glow 4.5s ease-in-out infinite; }
.prophecy-comet-second { animation-delay: -2.2s; }
@keyframes prophecy-galaxy-turn { to { transform: rotate(360deg); } }
@keyframes prophecy-comet-glow {
  0%, 100% { opacity: .2; }
  45%, 60% { opacity: .95; }
}
.prophecy-space-star {
  animation: prophecy-space-twinkle 3.8s ease-in-out var(--star-phase, 0s) infinite;
}
@keyframes prophecy-space-drift {
  from { transform: translate(-18px, -12px); }
  to { transform: translate(18px, 12px); }
}
@keyframes prophecy-nebula-breathe {
  from { opacity: .5; }
  to { opacity: 1; }
}
@keyframes prophecy-space-twinkle {
  0%, 100% { opacity: .3; }
  50% { opacity: 1; }
}
.prophecy-currents { animation: prophecy-current 3.2s ease-in-out infinite alternate; }
.prophecy-turtle { animation: prophecy-float 3s ease-in-out infinite; transform-origin: 90px 49px; }
.prophecy-shimmer { animation: prophecy-shine 2.8s linear infinite; mix-blend-mode: screen; }
.prophecy-stars { animation: prophecy-glint 2s ease-in-out infinite alternate; }
@keyframes prophecy-current {
  from { transform: translate(-5px, -2px); opacity: .45; }
  to { transform: translate(5px, 2px); opacity: .85; }
}
@keyframes prophecy-float {
  0%, 100% { transform: translateY(1px) rotate(-1deg); }
  50% { transform: translateY(-2px) rotate(1deg); }
}
@keyframes prophecy-shine {
  from { transform: translateX(0); }
  to { transform: translateX(245px); }
}
@keyframes prophecy-glint { from { opacity: .4; } to { opacity: 1; } }
html.account-reduced-motion .turtle-prophecy * { animation: none; }
.boss-art span {
  animation: arcade-boss-blink 4.4s ease-in-out -2s infinite,
    arcade-boss-look 8s ease-in-out infinite;
  transform-origin: center;
}
.pumpkin-art { animation: arcade-pumpkin-shift 4s ease-in-out infinite; }
.wrath-art svg { animation: arcade-crown-breathe 3.4s ease-in-out infinite; }
.singularity-art svg { animation: arcade-core-hover 4.8s ease-in-out infinite; }
.core-orbit-ring {
  transform-origin: 50px 40px;
  animation: core-ring-wobble 5s ease-in-out infinite;
}
@keyframes core-ring-wobble {
  0%, 100% { transform: rotate(-12deg) scaleY(.85); }
  50% { transform: rotate(12deg) scaleY(1.15); }
}
.core-infall-star {
  opacity: 0;
  animation: core-star-infall 3.6s linear var(--star-delay) infinite;
}
@keyframes core-star-infall {
  0% { opacity: 0; transform: rotate(0deg) translateY(-35px) scale(.3); }
  15% { opacity: 1; transform: rotate(15deg) translateY(-34px) scale(1); }
  45% { opacity: 1; transform: rotate(65deg) translateY(-26px) scale(.85); }
  70% { opacity: .9; transform: rotate(130deg) translateY(-16px) scale(.65); }
  90% { opacity: .5; transform: rotate(220deg) translateY(-5px) scale(.3); }
  100% { opacity: 0; transform: rotate(280deg) translateY(0) scale(0); }
}
.singularity-art circle {
  transform-box: fill-box;
  transform-origin: center;
  animation: arcade-core-pulse 4.4s ease-in-out infinite;
}
 .word-art .word-letter {
  display: inline-block;
  animation: arcade-letter 3.6s ease-in-out infinite;
}
.word-art .word-letter:last-child { animation-delay: -1.8s; }
@keyframes arcade-letter {
  0%, 100% { transform: rotate(-1.5deg); }
  50% { transform: translateY(-1px) rotate(1.5deg); }
}
@keyframes arcade-question {
  0%, 65%, 100% { transform: rotate(9deg) scale(1); }
  82% { transform: rotate(9deg) scale(1.16); }
}
@keyframes arcade-key-left {
  0%, 100% { transform: translate(0, 0) rotate(-8deg); }
  50% { transform: translate(-4px, -8px) rotate(-15deg); }
}
@keyframes arcade-key-middle {
  0%, 100% { transform: translateY(7px) rotate(5deg); }
  50% { transform: translateY(-3px) rotate(-2deg); }
}
@keyframes arcade-key-right {
  0%, 100% { transform: translate(0, 0) rotate(-8deg); }
  50% { transform: translate(4px, 6px) rotate(2deg); }
}
@keyframes arcade-block-drift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes arcade-block-turn {
  0%, 100% { transform: rotate(15deg) translateY(10px); }
  50% { transform: rotate(11deg) translate(1px, 13px); }
}
@keyframes arcade-boss-look {
  0%, 10%, 95%, 100% { translate: 0 0; }
  18%, 30% { translate: -5px -1px; }
  40%, 52% { translate: 5px 0; }
  62%, 72% { translate: 1px -3px; }
  82%, 88% { translate: -2px 2px; }
}
@keyframes arcade-boss-blink {
  0%, 42%, 49%, 100% { transform: translateX(-50%) scaleY(1); }
  45%, 46% { transform: translateX(-50%) scaleY(.08); }
}
@keyframes arcade-pumpkin-shift {
  0%, 100% { transform: translateX(-5px) rotate(-12deg); }
  50% { transform: translate(5px, -5px) rotate(-3deg); }
}
@keyframes arcade-crown-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}
@keyframes arcade-core-hover {
  0%, 100% { transform: translateY(2px) rotate(-4deg); }
  50% { transform: translateY(-7px) rotate(4deg); }
}
@keyframes arcade-core-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(.90); }
}
@media (prefers-reduced-motion: reduce) {
  .game-card .card-art,
  .game-card .card-art * { animation: none !important; }
}
#welcome-art svg { display: block; width: 56px; height: 56px; margin: auto; }
.card-title {
  font:
    500 17px "Space Grotesk",
    sans-serif;
  display: flex;
  justify-content: space-between;
  letter-spacing: -0.5px;
}
.card-title span {
  color: var(--accent);
  font-size: 18px;
}
.card-description {
  font-size: 10px;
  color: var(--muted);
  display: block;
  margin-top: 7px;
}
.play-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 264px;
  gap: 28px;
  padding: 44px 0 58px;
}
.game-main {
  min-width: 0;
  scroll-margin-top: 12px;
}
.game-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.game-heading .eyebrow {
  font-size: 9px;
  margin-bottom: 7px;
}
.game-heading h2 {
  font:
    500 29px "Space Grotesk",
    sans-serif;
  letter-spacing: -1px;
  margin: 0;
}
#runtime-status {
  font-size: 10px;
  color: var(--muted);
  max-width: 260px;
  text-align: right;
}
.arena {
  position: relative;
  min-height: 455px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background-color: #15191b;
  background-image: radial-gradient(#323937 1px, transparent 1px);
  background-size: 22px 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.arena.arcade {
  min-height: 0;
}
.player-health {
  position: relative;
  z-index: 3;
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: #191f21;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.player-health strong {
  color: var(--lime);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.health-track {
  height: 8px;
  max-width: 240px;
  flex: 1;
  overflow: hidden;
  background: #35403b;
  border-radius: 4px;
}
#player-health-fill {
  display: block;
  height: 100%;
  background: var(--lime);
}
.player-health[data-low="true"] strong {
  color: #ff9494;
}
.player-health[data-low="true"] #player-health-fill {
  background: #ff9494;
}
.welcome {
  text-align: center;
  padding: 32px 24px;
  width: 100%;
  max-width: 640px;
}
.welcome > span {
  font:
    500 49px "Space Grotesk",
    sans-serif;
  color: var(--accent);
  display: block;
  margin-bottom: 24px;
  letter-spacing: 7px;
}
.welcome h3,
.overlay h3 {
  font:
    500 29px "Space Grotesk",
    sans-serif;
  letter-spacing: -1px;
  margin: 0 0 12px;
}
.welcome p,
.overlay p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}
.primary-button {
  background: var(--accent);
  border: 0;
  border-radius: 7px;
  color: #182016;
  padding: 13px 28px;
  font-weight: 700;
  font-size: 13px;
  margin-top: 18px;
  box-shadow: 0 3px 0 #06090844;
}
.primary-button:hover {
  filter: brightness(1.08);
}
.welcome h4 {
  margin: 26px 0 14px;
  font-size: 13px;
  font-weight: 500;
}
.difficulty-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 10px;
  text-align: left;
}
.difficulty-choice {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: var(--panel);
  text-align: left;
}
.difficulty-choice:hover:not(:disabled) {
  border-color: var(--accent);
  background: #22292b;
}
.difficulty-choice[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: inset 4px 0 var(--accent);
}
#jukebox-controls {
  padding: 16px;
  margin: 20px 0;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--panel);
}
#jukebox-controls p { margin: 0 0 12px; }
#jukebox-controls button { margin: 0 8px; }
.difficulty-choice strong {
  display: block;
  color: var(--accent);
  font-size: 15px;
  margin-bottom: 6px;
}
.difficulty-choice span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.difficulty-choice.song-card {
  --accent: var(--song-color);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 176px;
  padding: 78px 18px 18px;
  border-color: color-mix(in srgb, var(--song-glow) 50%, #242b36);
  background: radial-gradient(ellipse at 90% 0%, color-mix(in srgb, var(--song-glow) 32%, transparent), transparent 75%), #121720;
  transition: border-color .15s, box-shadow .15s;
}
.song-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 63px;
  z-index: -1;
  opacity: .16;
  background: repeating-linear-gradient(135deg, transparent 0 14px, var(--song-color) 15px 16px, transparent 17px 30px);
  mask-image: linear-gradient(to right, #000, transparent 85%);
}
.song-card[data-motif="pixels"]::before,
.song-card[data-motif="keys"]::before,
.song-card[data-motif="letters"]::before {
  background: repeating-conic-gradient(var(--song-color) 0% 25%, transparent 0% 50%) 0 0 / 20px 20px;
}
.song-card[data-motif="signal"]::before,
.song-card[data-motif="circuit"]::before {
  background: repeating-linear-gradient(0deg, transparent 0 3px, var(--song-color) 4px 5px);
}
.song-card[data-motif="orbit"]::before,
.song-card[data-motif="moon"]::before,
.song-card[data-motif="comet"]::before {
  background: radial-gradient(circle, var(--song-color) 1px, transparent 2px) 0 0 / 19px 19px;
}
.song-card[data-motif="compass"]::before,
.song-card[data-motif="hourglass"]::before {
  background: repeating-radial-gradient(circle at 28px 28px, transparent 0 10px, var(--song-color) 11px 12px, transparent 13px 24px);
}
.song-card[data-motif="jellyfish"]::before,
.song-card[data-motif="anchor"]::before {
  background: radial-gradient(ellipse at 50% 0, transparent 12px, var(--song-color) 13px 14px, transparent 15px) 0 0 / 36px 20px;
}
.song-card[data-motif="kite"]::before,
.song-card[data-motif="butterfly"]::before {
  background: repeating-linear-gradient(60deg, transparent 0 16px, var(--song-color) 17px 18px, transparent 19px 34px), repeating-linear-gradient(-60deg, transparent 0 16px, var(--song-color) 17px 18px, transparent 19px 34px);
}
.song-card[data-motif="cassette"]::before,
.song-card[data-motif="train"]::before {
  background: repeating-linear-gradient(0deg, transparent 0 12px, var(--song-color) 13px 14px, transparent 15px 24px), repeating-linear-gradient(90deg, transparent 0 22px, var(--song-color) 23px 24px, transparent 25px 36px);
}
.song-card[data-motif="mushroom"]::before,
.song-card[data-motif="snowflake"]::before {
  background: radial-gradient(circle, var(--song-color) 2px, transparent 3px) 0 0 / 24px 24px, radial-gradient(circle, var(--song-color) 1px, transparent 2px) 12px 12px / 24px 24px;
}
.song-card .song-art {
  position: absolute;
  top: 12px;
  right: 16px;
  width: 54px;
  height: 54px;
  fill: none;
  stroke: var(--song-color);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 9px color-mix(in srgb, var(--song-glow) 65%, transparent));
}
.song-card strong { position: relative; line-height: 1.4; }
.song-card span { color: #bfc8d5; }
.difficulty-choice.song-card:hover:not(:disabled),
.difficulty-choice.song-card:focus-visible {
  border-color: var(--song-color);
  box-shadow: inset 0 0 30px color-mix(in srgb, var(--song-glow) 12%, transparent);
}
.difficulty-choice.song-card[aria-pressed="true"] {
  border-color: var(--song-color);
  box-shadow: inset 4px 0 var(--song-color), 0 0 16px color-mix(in srgb, var(--song-glow) 20%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .difficulty-choice.song-card { transition: none; }
}
.game-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 55px;
  color: var(--muted);
  font-size: 11px;
}
.game-footer > div {
  display: flex;
  gap: 6px;
}
.game-footer .quiet-button {
  font-size: 10px;
  padding: 7px 9px;
}
.sidebar {
  padding-top: 2px;
}
.setup {
  border-bottom: 1px solid var(--line);
  padding-bottom: 20px;
}
.setup h3,
.leaderboard h3 {
  font-size: 13px;
  font-weight: 500;
  margin: 0 0 24px;
}
.setup label {
  display: block;
  font-size: 9px;
  letter-spacing: 1.4px;
  color: var(--muted);
  margin: 17px 0 9px;
}
input,
select {
  background: #1a1e20;
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 7px;
  padding: 11px 12px;
  font-size: 12px;
  width: 100%;
}
input:disabled,
select:disabled {
  opacity: 0.6;
}
.setup p {
  font-size: 10px;
  line-height: 1.6;
  color: var(--muted);
  margin-bottom: 0;
  min-height: 32px;
}
.score-panel {
  padding: 24px 0 20px;
  border-bottom: 1px solid var(--line);
}
.score-panel .eyebrow {
  margin-bottom: 13px;
  font-size: 9px;
}
.score-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 12px 0;
  color: var(--muted);
  font-size: 12px;
}
.score-row strong {
  font:
    500 20px "Space Grotesk",
    sans-serif;
  color: var(--ink);
}
.best-row strong {
  color: var(--lime);
}
.leaderboard {
  padding-top: 22px;
}
.leaderboard h3 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}
.leaderboard h3 span {
  color: var(--muted);
}
.leaderboard ol {
  padding: 0;
  list-style: none;
  margin: 0;
}
.leaderboard li {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  font-size: 11px;
  color: var(--muted);
  border-bottom: 1px solid #252b2c;
}
.leaderboard li strong {
  color: var(--ink);
}
#storage-note {
  font-size: 9px;
  color: var(--muted);
  line-height: 1.5;
}
.global-filters { padding-top: 20px; }
.global-filters label { display: block; margin: 0 0 8px; font-size: 11px; color: var(--muted); }
.global-filters select { margin-bottom: 16px; }
#leaderboard-refresh { font-size: 10px; padding: 6px 9px; }
#leaderboard-status, #leaderboard-submission, .global-note { font-size: 11px; line-height: 1.6; color: var(--muted); }
#global-scores li { gap: 12px; }
#global-scores li span { overflow-wrap: anywhere; min-width: 0; }
#global-scores li strong { flex-shrink: 0; }
#global-scores .is-you { color: var(--lime); }
.sidebar-note {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
  display: flex;
  gap: 13px;
  margin-top: 30px;
}
.sidebar-note span {
  font-size: 33px;
  color: var(--lime);
  line-height: 1.1;
}
.site-footer {
  border-top: 1px solid var(--line);
  padding: 26px 0 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--muted);
}
.site-footer > span:first-child {
  color: var(--ink);
  font-weight: 700;
}
.site-footer p {
  font-size: 11px;
  letter-spacing: 0;
}
.hangman-game {
  padding: 24px;
  width: 100%;
  text-align: center;
}
#hangman-picture {
  font: bold 18px/1.2 monospace;
  text-align: left;
  width: 120px;
  margin: 0 auto 18px;
  color: var(--accent);
  height: 130px;
}
.word {
  font: 600 clamp(17px, 3vw, 29px) monospace;
  letter-spacing: 2px;
  overflow-wrap: anywhere;
  margin: 16px 0;
}
.alphabet {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  max-width: 550px;
  margin: 22px auto 0;
}
.alphabet button {
  width: 35px;
  height: 36px;
  background: #242b2b;
  border: 1px solid #465047;
  border-radius: 5px;
  font: 500 13px monospace;
}
.alphabet button:disabled {
  opacity: 0.25;
  cursor: default;
}
#guess-feedback {
  font-size: 12px;
  color: var(--muted);
  min-height: 18px;
}
.keyboard-game {
  text-align: center;
  padding: 35px;
  width: 100%;
}
.type-caption {
  font-size: 12px;
  color: var(--muted);
}
.sequence {
  font: 500 clamp(20px, 3.4vw, 36px) monospace;
  letter-spacing: 3px;
  margin: 35px 0;
  overflow-wrap: anywhere;
  line-height: 1.8;
}
.sequence .matched {
  color: var(--lime);
}
.sequence .next {
  border-bottom: 3px solid var(--accent);
}
.timer-track {
  height: 5px;
  border-radius: 4px;
  background: #374039;
  max-width: 400px;
  margin: 25px auto;
}
#timer-bar {
  height: 100%;
  background: var(--accent);
  width: 100%;
  transition: width 0.08s linear;
}
#typing-feedback {
  font-size: 12px;
  color: var(--muted);
}
.typing-mobile-label {
  display: none;
  font-size: 12px;
  color: var(--muted);
}
#game-canvas {
  width: 100%;
  height: auto;
  display: block;
}
.geomayhem-loadout {
  width: min(100%, 540px);
  padding: 18px;
  margin: 0 auto 22px;
  border: 1px solid #365950;
  background: #14221f;
  border-radius: 14px;
  text-align: left;
}
.geomayhem-loadout label { display: block; font: 11px monospace; letter-spacing: .1em; color: #71f5d2; margin-bottom: 10px; }
.geomayhem-loadout select { width: 100%; min-height: 44px; background: #101d21; color: #eafff7; border: 1px solid #52756c; border-radius: 8px; padding: 10px; }
.geomayhem-loadout p { font-size: 12px; margin: 8px 0; max-width: none; }
#geomayhem-weapon-preview { display: flex; justify-content: space-evenly; gap: 18px; padding: 20px 0 12px; }
.geomayhem-weapon-icon { display: inline-grid; place-content: center; width: 52px; height: 52px; position: relative; color: var(--weapon-color); font-size: 30px; }
.geomayhem-weapon-icon small { position: absolute; top: 100%; width: 100%; text-align: center; font-size: 9px; letter-spacing: 2px; }
.geomayhem-weapon-icon.tier-3 { border: 2px solid var(--weapon-color); border-radius: 12px; background: #ffffff0a; }
.geomayhem-weapon-icon.tier-5 { border: 3px double var(--weapon-color); border-radius: 50%; box-shadow: 0 0 18px color-mix(in srgb, var(--weapon-color), transparent 65%); text-shadow: 0 0 12px var(--weapon-color); }
.geomayhem-hud { width: 100%; padding: 9px 12px; color: #dbfff3; background: #14251f; border-bottom: 1px solid #365950; font-size: 11px; }
.geomayhem-hud > div { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
#geomayhem-build { text-align: right; color: #a7f2d2; }
#geomayhem-inventory { justify-content: flex-start; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
#geomayhem-inventory > span { border: 1px solid var(--weapon-color); border-radius: 5px; color: var(--weapon-color); padding: 3px 6px; font-size: 10px; }
#geomayhem-xp { width: 55%; height: 6px; accent-color: #71f5d2; }
.geomayhem-upgrade { z-index: 3; overflow-y: auto; }
#geomayhem-upgrade-choices { display: grid; gap: 10px; width: min(100%, 460px); }
#geomayhem-upgrade-choices button { text-align: left; padding: 16px; color: #eafff7; background: #193b32; border: 1px solid #71f5d2; border-radius: 12px; min-height: 64px; }
#geomayhem-upgrade-choices button:hover { background: #285345; }
#geomayhem-upgrade-choices strong, #geomayhem-upgrade-choices span { display: block; }
#geomayhem-upgrade-choices span { font-size: 12px; color: #bbd9ce; margin-top: 5px; }
@media (max-width: 600px) {
  .geomayhem-hud { font-size: 10px; padding: 6px 8px; }
  #geomayhem-upgrade-choices { gap: 6px; }
  #geomayhem-upgrade-choices button { padding: 10px; }
  .geomayhem-loadout { padding: 12px; }
}
.overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #101315eb;
  backdrop-filter: blur(7px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 28px;
}
.overlay .eyebrow {
  color: var(--accent);
}
.overlay .primary-button {
  margin-top: 15px;
}
.arena.arcade .overlay {
  top: var(--player-health-height, 0px);
}
.touch-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  gap: 10px;
}
.touch-controls button {
  background: #242b2b;
  border: 1px solid #465047;
  border-radius: 8px;
  padding: 16px;
  touch-action: none;
  user-select: none;
}
.touch-controls button.pressed {
  background: var(--accent);
  color: #101315;
}
.touch-joystick {
  width: 104px;
  height: 104px;
  flex: 0 0 auto;
  position: relative;
  border: 2px solid #465047;
  border-radius: 50%;
  background: radial-gradient(circle, #303b36 0 25%, #1b2323 26% 100%);
  touch-action: none;
  user-select: none;
}
.joystick-thumb {
  position: absolute;
  left: calc(50% - 21px);
  top: calc(50% - 21px);
  width: 42px;
  height: 42px;
  border: 2px solid #8b9b87;
  border-radius: 50%;
  background: #465047;
  pointer-events: none;
  transform: translate(var(--stick-x, 0px), var(--stick-y, 0px));
}
.touch-joystick.pressed .joystick-thumb {
  background: var(--accent);
}
.touch-controls > div:last-child {
  display: flex;
  gap: 10px;
}
@media (min-width: 1400px) {
  .topbar,
  main,
  .site-footer {
    max-width: 1200px;
  }
}
@media (max-width: 1399px) {
  .topbar,
  main,
  .site-footer {
    margin-left: 5%;
    margin-right: 5%;
  }
  .card-title {
    font-size: 15px;
  }
  .game-card {
    padding: 14px;
  }
}
@media (max-width: 950px) {
  .hero-art {
    margin-right: 10px;
    width: 330px;
  }
  .play-section {
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 20px;
  }
  .game-grid {
    gap: 8px;
  }
  .game-card {
    padding: 12px 10px;
  }
  .card-title {
    font-size: 13px;
  }
  .card-description {
    font-size: 9px;
  }
  .card-top span {
    font-size: 7px;
  }
  .card-art {
    height: 85px;
  }
  .keys-art i {
    padding: 3px 7px;
  }
  .intro {
    padding-top: 45px;
  }
}
@media (max-width: 700px) {
  .topbar {
    height: auto;
    min-height: 84px;
    padding-block: 14px;
    flex-wrap: wrap;
    gap: 16px;
  }
  .topbar-actions { margin-left: auto; gap: 12px; }
  #login-open { min-width: 170px; }
  #login-open.signed-in { max-width: 150px; }
  .edition {
    display: none;
  }
  .intro {
    padding: 35px 0;
    flex-direction: column;
    gap: 24px;
  }
  .intro h1 {
    letter-spacing: -3px;
  }
  .intro-copy {
    font-size: 12px;
  }
  .hero-art {
    width: 200px;
    height: 200px;
    margin: 0 auto;
  }
  .pixel-face {
    left: 25px;
    top: 10px;
  }
  .orbit {
    width: 190px;
    height: 85px;
    left: 5px;
    top: 45px;
  }
  .spark.s1 {
    right: -5px;
    top: -10px;
    font-size: 30px;
  }
  .spark.s2 {
    left: -5px;
    bottom: 25px;
    font-size: 22px;
  }
  .art-label {
    right: 0;
    bottom: 0;
  }
  .section-heading h2 {
    font-size: 13px;
  }
  .section-heading p {
    display: none;
  }
  .game-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .card-art {
    height: 75px;
  }
  .card-title {
    font-size: 16px;
  }
  .card-description {
    font-size: 10px;
  }
  .card-top span {
    font-size: 8px;
  }
  .play-section {
    grid-template-columns: 1fr;
    padding: 30px 0;
    gap: 20px;
  }
  .sidebar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .setup {
    grid-row: span 2;
    border: 0;
  }
  .sidebar-note {
    display: none;
  }
  .score-panel {
    padding: 0 0 8px;
  }
  .leaderboard {
    padding: 0;
  }
  .game-heading h2 {
    font-size: 25px;
  }
  #runtime-status {
    font-size: 9px;
    max-width: 160px;
  }
  .arena {
    min-height: 380px;
  }
  .welcome {
    padding: 30px 16px;
  }
  .welcome h3 {
    font-size: 25px;
  }
  .welcome p {
    font-size: 12px;
  }
  .game-footer {
    font-size: 10px;
    flex-wrap: wrap;
    padding: 10px 0;
  }
  .site-footer {
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 8px;
  }
  .site-footer p {
    margin: 0;
    font-size: 10px;
  }
  .site-footer > span:last-child {
    display: none;
  }
  .alphabet {
    gap: 5px;
  }
  .alphabet button {
    width: 31px;
    height: 33px;
  }
  .hangman-game {
    padding: 20px 12px;
  }
  .word {
    letter-spacing: 0;
  }
  .typing-mobile-label {
    display: block;
  }
  .typing-mobile-label input {
    display: block;
    max-width: 220px;
    margin: 10px auto;
  }
  .keyboard-game {
    padding: 24px 18px;
  }
  .sequence {
    letter-spacing: 2px;
  }
  .overlay h3 {
    font-size: 27px;
  }
}
@media (max-height: 500px) {
  .touch-joystick {
    width: 76px;
    height: 76px;
  }
  .game-heading {
    margin-bottom: 8px;
  }
  .game-heading .eyebrow {
    display: none;
  }
  .game-heading h2 {
    font-size: 22px;
  }
  .game-footer {
    min-height: 40px;
    padding: 4px 0;
    font-size: 10px;
  }
  .player-health {
    padding: 6px 12px;
  }
  .touch-controls {
    padding: 6px 0;
  }
  .touch-controls button {
    padding: 8px;
    min-height: 44px;
    font-size: 12px;
  }
  .overlay {
    padding: 12px;
  }
  .overlay h3 {
    font-size: 22px;
    margin-bottom: 8px;
  }
  .overlay p {
    margin: 6px 0;
    font-size: 12px;
  }
  .overlay .primary-button {
    margin-top: 8px;
    padding: 10px 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

/* Achievement medals use the same tier colors in the collection and toast. */
[data-tier="bronze"] { --medal: #e6ac7c; --metal-dark: #6d351d; --metal-light: #ffe0be; }
[data-tier="silver"] { --medal: #cedcea; --metal-dark: #566477; --metal-light: #ffffff; }
[data-tier="gold"] { --medal: #ffdb75; --metal-dark: #946018; --metal-light: #fff6ca; }
[data-tier="crystal"] { --medal: #d8a6ff; --prism-a: #a34ff0; --prism-b: #74e9ef; --prism-c: #f6b5ff; }
[data-tier="diamond"] { --medal: #a9f4ff; --prism-a: #51a5ff; --prism-b: #eeebff; --prism-c: #7bffe0; }
[data-tier="rainbow"] { --medal: #ffd0f0; --prism-a: #ff5470; --prism-b: #6ee89b; --prism-c: #56c7ff; }
[data-tier="empyrorite"] { --medal: #a4ffdb; --prism-a: #08764d; --prism-b: #e3fff3; --prism-c: #2cf5a0; }
[data-tier="black"] { --medal: #d6d6d6; --metal-dark: #000; --metal-light: #454545; }
.profile-summary { margin-top: 22px; }
#profile-score { color: var(--lime); font-size: 28px; }
#achievement-count, .achievement-legend, #achievement-empty {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.6;
}
.profile-tabs { display: flex; border-bottom: 1px solid var(--line); gap: 4px; }
.profile-tabs button {
  flex: 1;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 12px 5px;
  font-size: 12px;
  color: var(--muted);
}
.profile-tabs [aria-selected="true"] { color: var(--lime); border-bottom-color: var(--lime); }
#achievements-panel > label { display: block; font-size: 11px; margin: 14px 0 7px; }
#achievements-list {
  max-height: 580px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #64705f var(--panel);
  padding: 5px;
  margin: 10px -5px;
}
.achievement-card {
  position: relative;
  isolation: isolate;
  border: 0;
  border-radius: 18px;
  padding: 4px;
  margin-bottom: 14px;
  background: linear-gradient(125deg, var(--metal-dark), var(--medal) 18%,
    var(--metal-light) 27%, var(--medal) 33%, var(--metal-dark) 47%,
    var(--medal) 65%, var(--metal-light) 73%, var(--metal-dark));
  background-size: 300% 300%;
  box-shadow: 0 3px 12px #0006;
  animation: medal-shine 9s ease-in-out infinite alternate paused;
}
.achievement-content {
  position: relative;
  border-radius: 14px;
  padding: 16px 14px;
  background: linear-gradient(145deg, #252c30, #151a1d 65%);
  box-shadow: inset 0 1px 1px #fff3, inset 0 -1px 2px #0009;
}
.achievement-card.earned .achievement-content { background: linear-gradient(145deg, #303936, #171e20 70%); }
.achievement-card[data-tier="black"] .achievement-content { background: #050505; }
.achievement-card.redacted { background: #080808; animation: none; }
.achievement-card.redacted::before, .achievement-card.redacted::after { display: none; }
.achievement-card.redacted .achievement-content { background: #101010; }
.redacted strong { color: #777; font: 12px monospace; letter-spacing: 2px; }
.redacted-bar { display: block; height: 9px; margin-top: 14px; background: #030303; }
.redacted-bar:nth-of-type(2) { width: 78%; }
.redacted-bar:nth-of-type(3) { width: 56%; }
.achievement-card p.wingdings {
  font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "Noto Sans Symbols", "Apple Symbols", sans-serif;
  font-variant-emoji: text;
  font-size: 17px;
  letter-spacing: 2px;
  overflow-wrap: anywhere;
}
.achievement-card:not(.earned) {
  /* Dark gray frames and subdued progress; keep the descriptions readable. */
  filter: grayscale(1);
  --medal: #999;
  --metal-dark: #444;
  --metal-light: #aaa;
  --prism-a: #555;
  --prism-b: #999;
  --prism-c: #777;
  background-color: #666;
  background-blend-mode: multiply;
}
.achievement-card:not(.earned)::before, .achievement-card:not(.earned)::after { filter: brightness(.25); }
.achievement-card:is([data-tier="crystal"], [data-tier="diamond"], [data-tier="rainbow"], [data-tier="empyrorite"]) {
  --gem-shape: polygon(22px 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 22px 100%, 0 50%);
  border-radius: 0;
  padding: 2px;
  clip-path: var(--gem-shape);
  background-image: linear-gradient(120deg, var(--prism-a), var(--medal) 15%,
    var(--prism-b) 27%, #fff 32%, var(--prism-c) 40%, var(--prism-a) 56%,
    var(--medal) 70%, #fff 77%, var(--prism-b) 85%, var(--prism-a));
}
.achievement-card:is([data-tier="crystal"], [data-tier="diamond"], [data-tier="rainbow"], [data-tier="empyrorite"]) .achievement-content {
  border-radius: 0;
  clip-path: polygon(21px 0, calc(100% - 21px) 0, 100% 50%, calc(100% - 21px) 100%, 21px 100%, 0 50%);
  padding: 22px 26px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--medal) 12%, #171d24), #141b22 65%);
}
.achievement-card[data-tier="rainbow"] {
  background-size: 100% 100%;
  background-image: linear-gradient(120deg, #ff5470, #ff9e42 15%, #ffe663 30%,
    #6ee89b 45%, #56c7ff 60%, #bc8bff 75%, #ff89dc 90%, #ff5470);
}
.achievement-toast[data-tier="rainbow"] {
  border-color: transparent;
  background: linear-gradient(#1c2424, #1c2424) padding-box,
    linear-gradient(120deg, #ff5470, #ffe663, #6ee89b, #56c7ff, #bc8bff) border-box;
}
/* Empyrorite keeps an emerald tint while locked and glows strongly when earned. */
.empyrorite-legend { color: #a4ffdb; font-weight: 600; }
.empyrorite-gem { float: right; width: 46px; height: 46px; margin: 0 -6px 5px 8px; filter: drop-shadow(0 0 6px #38f7ae88); }
.achievement-card[data-tier="empyrorite"] {
  --medal: #a4ffdb;
  --prism-a: #08764d;
  --prism-b: #e3fff3;
  --prism-c: #2cf5a0;
  padding: 3px;
  filter: drop-shadow(0 0 6px #1de7a033);
  background-color: transparent;
  background-blend-mode: normal;
}
.achievement-card[data-tier="empyrorite"] .achievement-content {
  background:
    radial-gradient(circle at 17% 14%, #d5ffeb99 0 1px, transparent 2px),
    radial-gradient(circle at 86% 82%, #9fffe399 0 1px, transparent 2px),
    linear-gradient(135deg, #174b39, #102e27 68%, #173f34);
  box-shadow: inset 0 1px 2px #a4ffdb66, inset 0 -1px 3px #001f16;
}
.achievement-card[data-tier="empyrorite"].earned {
  filter: drop-shadow(0 0 10px #2cf5a066);
  background-image: linear-gradient(120deg, #058653, #80ffd0 17%, #f0fff8 27%, #2cf5a0 35%,
    #048a60 47%, #baffdf 60%, #ffffff 68%, #0dca90 82%, #058653);
}
.achievement-card[data-tier="empyrorite"].earned .achievement-content {
  background:
    radial-gradient(circle at 14% 12%, #effffbbb 0 1px, transparent 2px),
    radial-gradient(circle at 83% 78%, #c7ffe6aa 0 1.5px, transparent 2.5px),
    conic-gradient(from 30deg at 83% 19%, #51ffb522, #073e2900 17%, #baffda19 35%, #083d2900 55%, #51ffb522),
    linear-gradient(135deg, #1d704e, #0c3c2d 64%, #15573e);
}
.achievement-card[data-tier="empyrorite"] p { color: #cee6db; }
.achievement-card[data-tier="empyrorite"] .achievement-state { color: #b4d8c6; }
.achievement-card[data-tier="empyrorite"].earned .achievement-state { color: #a4ffdb; }
.achievement-toast[data-tier="empyrorite"] {
  background: linear-gradient(130deg, #1e684a, #0c3225);
  border: 2px solid #9affd0;
  box-shadow: 0 0 25px #2cf5a04d, inset 0 1px 1px #e3fff366;
}
.achievement-toast .empyrorite-gem { float: none; width: 40px; height: 44px; margin: 0; }
.achievement-card::before, .achievement-card::after {
  content: "";
  position: absolute;
  z-index: 2;
  pointer-events: none;
  width: 12px;
  height: 12px;
  background: radial-gradient(#fff 15%, var(--medal) 65%);
  clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%);
  animation: medal-sparkle 5s ease-in-out infinite paused;
}
.achievement-card::before { top: -3px; right: 29px; }
.achievement-card::after { bottom: -3px; left: 29px; animation-delay: -2.5s; }
.achievement-card[data-tier="empyrorite"]::before,
.achievement-card[data-tier="empyrorite"]::after { width: 16px; height: 16px; animation-duration: 3.2s; }
.achievement-card[data-tier="empyrorite"]:not(.earned)::before,
.achievement-card[data-tier="empyrorite"]:not(.earned)::after { filter: brightness(.75); }
.achievement-card.in-view, .achievement-card.in-view::before, .achievement-card.in-view::after { animation-play-state: running; }
@keyframes medal-shine { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
@keyframes medal-sparkle { 0%, 100% { opacity: .35; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) {
  .achievement-card, .achievement-card::before, .achievement-card::after { animation: none; }
}
.achievement-tier { color: var(--medal); text-transform: uppercase; font-size: 9px; letter-spacing: .6px; }
.achievement-card h4 { font: 500 16px/1.35 "Space Grotesk", sans-serif; margin: 9px 0; }
.achievement-card p { color: var(--muted); font-size: 11px; line-height: 1.6; margin: 0 0 12px; }
.achievement-card progress { display: block; width: 100%; height: 5px; accent-color: var(--medal); margin: 10px 0; border: 0; }
.achievement-card progress::-webkit-progress-bar { background: #343a3c; border-radius: 5px; }
.achievement-card progress::-webkit-progress-value { background: var(--medal); border-radius: 5px; }
.achievement-state { color: var(--muted); font-size: 10px; }
.earned .achievement-state { color: var(--medal); }
.achievement-toasts {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  width: min(365px, calc(100vw - 24px));
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.achievement-toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--medal);
  border-radius: 12px;
  background: #1c2223;
  box-shadow: 0 8px 28px #0008;
  pointer-events: none;
  animation: achievement-arrive 4.5s both;
}
.achievement-toast .medal { color: var(--medal); font-size: 30px; }
.achievement-toast div { flex: 1; min-width: 0; }
.achievement-toast small { color: var(--medal); text-transform: uppercase; font-size: 9px; letter-spacing: .6px; }
.achievement-toast strong { display: block; font-size: 15px; line-height: 1.4; margin-top: 5px; }
.achievement-toast button { pointer-events: auto; border: 0; background: transparent; color: var(--muted); padding: 6px; font-size: 22px; }
@keyframes achievement-arrive {
  0% { opacity: 0; transform: translateY(-12px); }
  8%, 83% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .achievement-toast { animation: none; }
}
@media (max-width: 700px) {
  .sidebar .setup { grid-row: auto; }
  .profile-summary { margin-top: 0; }
  .profile-tabs, #scores-panel, #achievements-panel, #global-panel, #storage-note { grid-column: 1 / -1; }
  #scores-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  #scores-panel .score-panel { border-bottom: 0; }
}

/* Cubie's closet: each Custom keeps the same eyes and smile. */
.cubie-custom-art { display: block; width: 100%; height: 100%; overflow: visible; }
.cubie-empyrorite {
  filter: drop-shadow(0 0 4px #54ffb566) drop-shadow(0 0 10px #12c78e33);
  animation: cubie-empyrorite-glow 3.8s ease-in-out infinite;
}
@keyframes cubie-empyrorite-glow {
  0%, 100% { filter: drop-shadow(0 0 3px #54ffb54d) drop-shadow(0 0 8px #12c78e26); }
  50% { filter: drop-shadow(0 0 10px #9effd9b3) drop-shadow(0 0 22px #22e7a76b); }
}
@media (prefers-reduced-motion: reduce) {
  .cubie-empyrorite { animation: none; }
}
.cubie-rainbow-stripes { animation: cubie-rainbow-slide 5s linear infinite; }
@keyframes cubie-rainbow-slide {
  from { transform: translateX(0); }
  to { transform: translateX(108px); }
}
@media (prefers-reduced-motion: reduce) {
  .cubie-rainbow-stripes { animation: none; }
}
.cubie-float { animation: custom-float 3.8s ease-in-out infinite; transform: rotate(-14deg); transform-origin: center; }
.cubie-eyes { animation: mascot-blink 4.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes custom-float { 0%, 100% { transform: translateY(0) rotate(-14deg); } 50% { transform: translateY(-11px) rotate(-11deg); } }
.custom-card-art .cubie-custom-art { width: 62px; height: 62px; }
.pixel-face.custom-equipped { background: transparent; box-shadow: none; }
.pixel-face.custom-equipped > i, .pixel-face.custom-equipped > b { display: none; }
.pixel-face.custom-equipped > svg { position: absolute; inset: 0; }
.pixel-face.custom-equipped .cubie-float { animation: none; transform: none; }
.pixel-face.custom-equipped::before, .pixel-face.custom-equipped::after { z-index: 1; }
#customs-room { padding: clamp(16px, 3vw, 32px); text-align: left; }
.customs-preview { display: flex; align-items: center; gap: 24px; padding: 22px; border: 1px solid #c6f78355; border-radius: 18px; background: radial-gradient(ellipse at 15% 50%, #c6f78318, transparent 70%), #1c2424; }
#customs-preview-art { width: 150px; height: 156px; flex-shrink: 0; }
#customs-preview-art .cubie-custom-art { width: 96px; height: 96px; margin: 36px auto 24px; }
.customs-preview h3 { font-size: clamp(22px, 3vw, 32px); margin: 8px 0; }
.customs-preview p { color: var(--muted); font-size: 13px; line-height: 1.6; margin: 6px 0; }
#customs-count { color: var(--lime); font-weight: 700; }
#customs-status { min-height: 21px; }
.customs-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 26px 0 16px; }
.customs-toolbar h4 { margin: 0; font-size: 18px; }
.customs-toolbar label { font-size: 12px; color: var(--muted); }
#customs-filter { margin-left: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #202728; color: var(--ink); }
#customs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.custom-tile { display: flex; flex-direction: column; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #1c2325; }
.custom-tile[data-equipped="true"] { border-color: var(--lime); background: #c6f7830a; }
.custom-swatch { height: 108px; padding: 3px 0 9px; margin-bottom: 8px; background: radial-gradient(ellipse, #ffffff0b, transparent 70%); }
.custom-swatch svg { width: 62px; height: 62px; margin: 24px auto 0; }
.custom-swatch .cubie-float, .custom-swatch .cubie-eyes { animation: none; }
.custom-tile h5 { font-size: 14px; line-height: 1.4; margin: 4px 0 8px; }
.custom-tile p { font-size: 11px; line-height: 1.6; color: var(--muted); margin: 0 0 16px; overflow-wrap: anywhere; flex-grow: 1; }
.custom-equip { min-height: 40px; padding: 8px; border-radius: 7px; border: 1px solid #c6f78366; background: #c6f78317; color: var(--lime); font: inherit; font-size: 12px; }
.custom-equip:disabled { background: #ffffff04; border-color: var(--line); color: #a2a8a6; cursor: not-allowed; }
.custom-locked .custom-swatch { opacity: .65; }
.custom-equip:focus-visible, #customs-filter:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
@media (max-width: 600px) {
  .customs-preview { gap: 12px; padding: 14px; }
  #customs-preview-art { width: 96px; height: 112px; }
  #customs-preview-art .cubie-custom-art { width: 62px; height: 62px; margin: 28px auto 22px; }
  #customs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .custom-tile { padding: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .cubie-float, .cubie-eyes { animation: none !important; }
}

.custom-preview-button { width: 100%; height: 130px; border: 1px solid transparent; border-radius: 8px; color: var(--muted); cursor: pointer; }
.custom-preview-button span { display: block; margin-top: 12px; font-size: 11px; }
.custom-preview-button:hover, .custom-preview-button[aria-pressed="true"] { border-color: #c6f78366; color: var(--lime); }
.custom-preview-button:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

/* Custom tiers stay visible for both locked and unlocked outfits. */
.custom-tile[data-tier], .customs-preview[data-tier] {
  border: 2px solid var(--medal);
}
.custom-tier {
  display: inline-block;
  align-self: flex-start;
  width: fit-content;
  margin: 0 0 12px;
  padding: 4px 8px;
  border: 1px solid currentColor;
  border-radius: 6px;
  background: #0003;
  color: var(--medal);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
}
#customs-preview-tier { margin: 4px 0 6px; font-size: 11px; }
.custom-tile[data-equipped="true"] { box-shadow: inset 0 0 0 2px #ffffff18; }
.custom-tile[data-tier="rainbow"], .customs-preview[data-tier="rainbow"] {
  border-color: transparent;
  background: linear-gradient(#1c2325, #1c2325) padding-box,
    linear-gradient(125deg, #ff657f, #ffce70, #a5ec87, #74dfe7, #a3a4ff, #ed9cdd) border-box;
}
[data-tier="rainbow"] > .custom-tier,
.customs-preview[data-tier="rainbow"] .custom-tier {
  background: linear-gradient(110deg, #f58d9e, #f4d48e, #b3eab0, #a9d7fa, #d7b6f1);
  color: #20232a;
  border-color: transparent;
}
.custom-tile[data-tier="empyrorite"], .customs-preview[data-tier="empyrorite"] {
  border-color: #39df9e;
}
.custom-tile[data-tier="black"], .customs-preview[data-tier="black"] {
  border-color: #050505;
  box-shadow: 0 0 0 1px #76767e, inset 0 0 0 1px #393942;
  background: #141418;
}
[data-tier="black"] .custom-tier { background: #050505; border-color: #65656e; }

/* Light travels around the fixed ring, disappearing behind Cubie's body. */
.cubie-gravity-flow {
  stroke-dasharray: 8 42;
  animation: cubie-gravity-flow 4.8s linear infinite;
}
@keyframes cubie-gravity-flow {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -100; }
}
@media (prefers-reduced-motion: reduce) {
  .cubie-gravity-flow { animation: none; }
}

/* The flame roots stay tucked behind Comet Cubie as the tips flicker. */
.cubie-comet-flame {
  transform-box: view-box;
  transform-origin: 54px 64px;
  animation: cubie-comet-flicker .9s ease-in-out infinite;
}
.comet-middle { animation-duration: .7s; animation-delay: -.25s; }
.comet-core { animation-duration: .55s; animation-delay: -.4s; }
@keyframes cubie-comet-flicker {
  0%, 100% { transform: scale(1) skewX(0deg); }
  25% { transform: scale(1.06, .95) skewX(-3deg); }
  55% { transform: scale(.94, 1.09) skewX(3deg); }
  80% { transform: scale(1.08, 1.04) skewX(-2deg); }
}
.cubie-comet-embers { animation: cubie-comet-embers 1.2s ease-out infinite; }
@keyframes cubie-comet-embers {
  0% { transform: translate(4px, 5px); opacity: 0; }
  20% { opacity: .9; }
  100% { transform: translate(-11px, -15px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cubie-comet-flame, .cubie-comet-embers { animation: none; }
}

/* Cubie Cash shop */
#shop-room { padding: clamp(16px, 3vw, 32px); text-align: left; }
.shop-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
#shop-balance { padding: 12px 18px; border: 1px solid #5d91dc; border-radius: 24px; background: #102c65; color: #c3e2ff; }
#shop-room > p, #shop-room details { color: var(--muted); font-size: 13px; line-height: 1.7; margin: 16px 0; }
#shop-room summary { cursor: pointer; color: #a8d0ff; }
#shop-rates p { margin: 10px 0; }
#shop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.shop-price { color: #a8d0ff; font-size: 12px; margin-bottom: 12px; }
@media (max-width: 700px) { #shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Avoid accidental selection without disabling scrolling or editable fields. */
*, *::before, *::after { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea { -webkit-user-select: text; user-select: text; }
#typing-touch { display: none; }
@media (pointer: coarse) {
  #typing-touch { display: block; max-width: 460px; margin: 16px auto; }
  .typing-key-row { display: flex; justify-content: center; gap: 3px; margin: 5px 0; }
  .typing-key-row button { flex: 1; max-width: 42px; min-width: 0; min-height: 44px; padding: 0; border: 1px solid #8a7ba8; border-radius: 6px; background: #302b40; color: #f7f2ff; font: 18px monospace; touch-action: manipulation; }
  .typing-key-row button:active, #typing-shift[aria-pressed="true"] { background: #b9a5f5; color: #171321; }
  .typing-key-tools button { max-width: none; font-family: inherit; font-size: 13px; }
  .typing-mobile-label { display: block; }
  .typing-mobile-label input { display: block; width: 100%; max-width: 220px; margin: 8px auto; font-size: 16px; }
  .keyboard-game { padding: 16px 10px; }
  .sequence { margin: 14px 0; }
}

.typing-device { display: none; margin: 10px auto; font-size: 12px; color: var(--muted); }
.typing-device summary { cursor: pointer; }
@media (pointer: coarse) { .typing-device { display: block; } }

/* Distinct ambient motion for premium Customs, shared by cards and equipped art. */
.custom-sparkle { transform-box: fill-box; transform-origin: center; animation: custom-twinkle 3.1s ease-in-out infinite; }
@keyframes custom-twinkle { 0%, 100% { opacity: .25; transform: scale(.55) rotate(0); } 45% { opacity: 1; transform: scale(1.4) rotate(35deg); } 70% { opacity: .5; transform: scale(.8) rotate(60deg); } }
.seraph-wing { transform-origin: 35px 65px; animation: seraph-wing-lift 4s ease-in-out infinite alternate; }
@keyframes seraph-wing-lift { from { transform: rotate(-5deg); } to { transform: rotate(7deg); } }
.seraph-sunwheel { transform-origin: 60px 62px; animation: whale-galaxy-turn 60s linear infinite; }
.seraph-halo { animation: seraph-halo-float 4s ease-in-out infinite; }
@keyframes seraph-halo-float { 50% { transform: translateY(-3px); opacity: .75; } }
.cartographer-astrolabe { transform-origin: 60px 67px; animation: whale-galaxy-turn 50s linear infinite; }
.cartographer-compass { animation: whale-galaxy-turn 24s linear infinite reverse; }
.cartographer-constellations { animation: constellation-glow 4s ease-in-out infinite; }
@keyframes constellation-glow { 50% { opacity: .4; } }
@media (prefers-reduced-motion: reduce) {
  .seraph-wing, .seraph-sunwheel, .seraph-halo,
  .cartographer-astrolabe, .cartographer-compass, .cartographer-constellations { animation: none; }
}
.ton-ring-flow { animation: ton-ring-spin 4s linear infinite; }
.ton-inner-swirl { transform-origin: 60px 67px; animation: ton-gas-swirl 28s linear infinite; }
.ton-inner-counter { animation-duration: 43s; animation-direction: reverse; }
@media (prefers-reduced-motion: reduce) {
  .ton-inner-swirl { animation: none; }
}
.ton-jet { transform-origin: 60px 33px; animation: ton-jet-breathe 4.6s ease-in-out infinite; }
@keyframes ton-jet-breathe { 50% { transform: scaleX(.7); opacity: .65; } }
.ton-jet-stream { animation: ton-jet-stream 1.3s linear infinite; }
@keyframes ton-jet-stream { to { stroke-dashoffset: -14; } }
.ton-infall { animation: ton-infall 5s linear infinite; }
@keyframes ton-infall {
  0% { transform: rotate(0deg) translateY(-64px) scale(.3); opacity: 0; }
  25% { opacity: .9; }
  85% { opacity: .8; }
  100% { transform: rotate(100deg) translateY(-39px) scale(.1); opacity: 0; }
}
.ton-lens-shimmer { animation: ton-lens-shimmer 6s ease-in-out infinite; }
@keyframes ton-lens-shimmer { 50% { opacity: .55; } }
.ton-disk-flare { animation: ton-disk-flare 4.8s ease-in-out infinite; }
@keyframes ton-disk-flare { 50% { transform: scale(1.3, .7); opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  .ton-jet, .ton-jet-stream, .ton-infall, .ton-lens-shimmer, .ton-disk-flare { animation: none; }
  .ton-infall { opacity: 0; }
}
.phantom-flame { transform-origin: 0 12px; animation: phantom-flame-dance 2.6s ease-in-out infinite alternate; }
@keyframes phantom-flame-dance {
  from { transform: scale(.92, .88) skewX(-6deg); }
  to { transform: scale(1.08, 1.14) skewX(7deg); }
}
.phantom-ghost-orbit { offset-rotate: 0deg; animation: ton-meteor-orbit 15s linear infinite; }
.phantom-ghost-bob { animation: phantom-ghost-bob 3s ease-in-out infinite alternate; }
@keyframes phantom-ghost-bob { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
.phantom-eye-fire { transform-origin: 0 8px; animation: phantom-flame-dance 1.7s ease-in-out infinite alternate; filter: drop-shadow(0 0 3px #ffe247); }
.cubie-custom-art[data-custom="phantom_king"] .cubie-eyes { filter: drop-shadow(0 0 4px #ffd52f); }
@media (prefers-reduced-motion: reduce) {
  .phantom-flame, .phantom-ghost-orbit, .phantom-ghost-bob, .phantom-eye-fire { animation: none; }
  .phantom-ghost-orbit { offset-distance: 20%; }
}
@keyframes ton-ring-spin { to { stroke-dashoffset: -100; } }
.ton-meteor { offset-rotate: auto; animation: ton-meteor-orbit 9s linear infinite; }
@keyframes ton-meteor-orbit { to { offset-distance: 100%; } }
.ton-gas { transform-origin: 60px 67px; animation: ton-gas-swirl 15s linear infinite; }
@keyframes ton-gas-swirl { to { transform: rotate(360deg); } }
.cubie-custom-art[data-custom="ton_618"] .cubie-eyes { filter: drop-shadow(0 0 3px #ff244f); }
@media (prefers-reduced-motion: reduce) {
  .ton-ring-flow, .ton-meteor, .ton-gas { animation: none; }
  .ton-meteor { offset-distance: 25%; }
}
.whale-galaxy { transform-origin: 60px 67px; animation: whale-galaxy-turn 30s linear infinite; }
@keyframes whale-galaxy-turn { to { transform: rotate(360deg); } }
.whale-fin { animation: whale-fin-swim 3.6s ease-in-out infinite alternate; }
.whale-fin-left { transform-origin: 24px 77px; }
.whale-fin-right { transform-origin: 96px 77px; animation-direction: alternate-reverse; }
@keyframes whale-fin-swim { from { transform: rotate(-13deg); } to { transform: rotate(13deg); } }
.whale-tail { transform-origin: 85px 40px; animation: whale-tail-swim 4s ease-in-out infinite alternate; }
@keyframes whale-tail-swim { to { transform: rotate(12deg); } }
.whale-spout { animation: whale-spout-glow 3.4s ease-in-out infinite; }
@keyframes whale-spout-glow { 50% { opacity: .5; transform: translateY(-4px); } }
.empyrorite-halo { transform-origin: 60px 68px; animation: whale-galaxy-turn 24s linear infinite reverse; }
.empyrorite-shard { animation: empyrorite-shard-float 3s ease-in-out infinite alternate; }
@keyframes empyrorite-shard-float { to { transform: translateY(-8px); } }
.empyrorite-sheen { animation: empyrorite-sheen-pass 5s ease-in-out infinite; }
@keyframes empyrorite-sheen-pass { 0%, 12% { transform: translateX(0); } 65%, 100% { transform: translateX(160px); } }
.sovereign-banner { transform-origin: 60px 25px; animation: sovereign-banner-wave 4s ease-in-out infinite alternate; }
@keyframes sovereign-banner-wave { to { transform: skewY(5deg); } }
.sovereign-aura { transform-origin: 60px 65px; animation: whale-galaxy-turn 35s linear infinite; }
.peacock-fan { transform-origin: 60px 93px; animation: peacock-fan-sway 5s ease-in-out infinite alternate; }
@keyframes peacock-fan-sway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
.globe-snow { animation: globe-snowfall 4s linear infinite; }
@keyframes globe-snowfall { from { transform: translate(-3px, -65px); } to { transform: translate(3px, 76px); } }
.custom-aurora { animation: custom-aurora-shift 5s ease-in-out infinite alternate; }
.aurora-ribbon { transform-origin:60px 68px; animation:aurora-drift 7s ease-in-out infinite alternate; }
.aurora-current { animation:aurora-current 4.5s linear infinite; }
.aurora-halo { transform-origin:60px 68px; animation:aurora-glow 5s ease-in-out infinite alternate; }
@keyframes aurora-drift { from { transform:translate(-7px,-3px) skewY(-5deg); } to { transform:translate(7px,4px) skewY(5deg); } }
@keyframes aurora-current { to { stroke-dashoffset:-104; } }
@keyframes aurora-glow { from { opacity:.65; transform:scale(.95); } to { opacity:1; transform:scale(1.08); } }
@media (prefers-reduced-motion:reduce) { .aurora-ribbon, .aurora-current, .aurora-halo { animation:none; } }
@keyframes custom-aurora-shift { to { filter: hue-rotate(45deg) brightness(1.15); opacity: .85; } }
@media (prefers-reduced-motion: reduce) {
  .custom-sparkle, .whale-galaxy, .whale-fin, .whale-tail, .whale-spout,
  .empyrorite-halo, .empyrorite-shard, .empyrorite-sheen, .sovereign-banner,
  .sovereign-aura, .peacock-fan, .globe-snow, .custom-aurora { animation: none; }
}

/* First scowl at 8 seconds; repeat every 8 seconds, angry for 3. */
.boss-art { animation: boss-angry-color 8s ease-in-out 8s infinite; }
.boss-art span::before, .boss-art span::after {
  content: "";
  position: absolute;
  top: 7px;
  width: 18px;
  height: 4px;
  background: #242022;
  opacity: 0;
  animation: boss-angry-brows 8s ease-in-out 8s infinite;
}
.boss-art span::before { left: 1px; --boss-brow-angle: 22deg; }
.boss-art span::after { right: 4px; --boss-brow-angle: -22deg; }
@keyframes boss-angry-brows {
  0%, 37.5%, 100% { opacity: 0; transform: translateY(-2px) rotate(0deg); }
  4.375%, 33.125% { opacity: 1; transform: translateY(0) rotate(var(--boss-brow-angle)); }
}
@keyframes boss-angry-color {
  0%, 37.5%, 100% { color: var(--accent); }
  4.375%, 33.125% { color: #ff5c68; }
}
@media (prefers-reduced-motion: reduce) {
  .boss-art, .boss-art span::before, .boss-art span::after { animation: none; }
}

/* Accessory motion: pivots use the original SVG coordinates so attachments
   remain connected at every display size. Shared float/blink stays separate. */
.cubie-motion { transform-box: view-box; }
.motion-wing { animation: cubie-wingbeat .75s ease-in-out infinite alternate; }
@keyframes cubie-wingbeat { from { transform: scaleX(1.05) rotate(-6deg); } to { transform: scaleX(.35) rotate(12deg); } }
.motion-sway { animation: cubie-accessory-sway 3.4s ease-in-out infinite alternate; }
@keyframes cubie-accessory-sway { from { transform: rotate(-8deg); } to { transform: rotate(9deg); } }
.motion-paper { animation: cubie-paper-feed 4s ease-in-out infinite; }
@keyframes cubie-paper-feed { 0%, 15%, 100% { transform: translateY(0); } 65%, 85% { transform: translateY(-7px); } }
.motion-keys { animation: cubie-type-keys 1.5s steps(2, end) infinite; }
@keyframes cubie-type-keys { 50% { stroke-dashoffset: 4; opacity: .6; } }
.motion-energy { animation: cubie-energy 3.6s ease-in-out infinite; }
@keyframes cubie-energy { 0%, 100% { opacity: .55; filter: drop-shadow(0 0 0 transparent); } 50% { opacity: 1; filter: drop-shadow(0 0 2px #ccedff99); } }
.motion-tread { animation: cubie-tread .65s linear infinite; }
@keyframes cubie-tread { to { stroke-dashoffset: -4; } }
.motion-thrust { animation: cubie-thrust 1s ease-in-out infinite alternate; }
@keyframes cubie-thrust { from { transform: scale(.9, .75); } to { transform: scale(1.12, 1.6); } }
.motion-paddle { animation: cubie-paddle 2.5s ease-in-out infinite alternate; }
@keyframes cubie-paddle { from { transform: rotate(-11deg); } to { transform: rotate(11deg); } }
.motion-bells { animation: cubie-bells 4s ease-in-out infinite; }
@keyframes cubie-bells { 0%, 35%, 100% { transform: rotate(0); } 55% { transform: rotate(-5deg); } 80% { transform: rotate(5deg); } }
.motion-heart { animation: cubie-heart 2.4s ease-in-out infinite; }
@keyframes cubie-heart { 0%, 35%, 100% { transform: scale(1); } 14% { transform: scale(1.2); } 25% { transform: scale(1.07); } }
.motion-hover { animation: cubie-accessory-hover 3.6s ease-in-out infinite alternate; }
@keyframes cubie-accessory-hover { to { transform: translateY(-8px); } }
.motion-horizon { animation: cubie-horizon 4s ease-in-out infinite alternate; }
@keyframes cubie-horizon { to { transform: scale(.89); opacity: .7; } }
.motion-orbit-flow { stroke-dasharray: 14 86; animation: cubie-orbit-flow 4s linear infinite; }
@keyframes cubie-orbit-flow { to { stroke-dashoffset: -100; } }
.motion-spin { animation: cubie-accessory-spin 8s linear infinite; }
@keyframes cubie-accessory-spin { to { transform: rotate(360deg); } }
.motion-binary { transform: translate(-30px, 0); animation: cubie-binary-orbit 6s linear infinite; }
.motion-binary:nth-child(2) { transform: translate(30px, 0); }
@keyframes cubie-binary-orbit {
  0% { transform: translate(-30.00px, -0.00px) scale(1.000); }
  6.25% { transform: translate(-27.72px, -4.59px) scale(0.931); }
  12.5% { transform: translate(-21.21px, -8.49px) scale(0.873); }
  18.75% { transform: translate(-11.48px, -11.09px) scale(0.834); }
  25% { transform: translate(-0.00px, -12.00px) scale(0.820); }
  31.25% { transform: translate(11.48px, -11.09px) scale(0.834); }
  37.5% { transform: translate(21.21px, -8.49px) scale(0.873); }
  43.75% { transform: translate(27.72px, -4.59px) scale(0.931); }
  50% { transform: translate(30.00px, -0.00px) scale(1.000); }
  56.25% { transform: translate(27.72px, 4.59px) scale(1.069); }
  62.5% { transform: translate(21.21px, 8.49px) scale(1.127); }
  68.75% { transform: translate(11.48px, 11.09px) scale(1.166); }
  75% { transform: translate(0.00px, 12.00px) scale(1.180); }
  81.25% { transform: translate(-11.48px, 11.09px) scale(1.166); }
  87.5% { transform: translate(-21.21px, 8.49px) scale(1.127); }
  93.75% { transform: translate(-27.72px, 4.59px) scale(1.069); }
  100% { transform: translate(-30.00px, 0.00px) scale(1.000); }
}
.motion-blade { animation: cubie-blade 4s ease-in-out infinite; }
@keyframes cubie-blade { 0%, 85%, 100% { transform: translateY(0); } 55%, 65% { transform: translateY(-11px); } }
.motion-rain { animation: cubie-raindrop 2.2s linear infinite; }
@keyframes cubie-raindrop { 0% { transform: translateY(-6px); opacity: 0; } 20%, 75% { opacity: 1; } 100% { transform: translateY(16px); opacity: 0; } }
.motion-echo { animation: cubie-echo 3.8s ease-in-out infinite; }
@keyframes cubie-echo { 0%, 100% { opacity: .4; transform: translate(-5px, -5px); } 50% { opacity: 1; transform: translate(3px, 3px); } }
.motion-clock { animation: cubie-accessory-spin 12s steps(12, end) infinite; }
.motion-bell { animation: cubie-jelly-bell 2.8s ease-in-out infinite alternate; }
@keyframes cubie-jelly-bell { to { transform: scale(1.06, .85); } }
.motion-tentacle { animation: cubie-tentacle 2.8s ease-in-out infinite alternate; }
@keyframes cubie-tentacle { from { transform: skewX(-15deg) scaleY(.92); } to { transform: skewX(15deg) scaleY(1.1); } }
.motion-steam { animation: cubie-steam 3.8s ease-out infinite; }
@keyframes cubie-steam { 0% { opacity: .25; transform: translate(0, 4px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(5px, -12px); } }
.motion-mailflag { animation: cubie-mailflag 7s ease-in-out infinite; }
@keyframes cubie-mailflag { 0%, 15%, 85%, 100% { transform: rotate(0); } 35%, 65% { transform: rotate(32deg); } }
.motion-polish { animation: cubie-polish 5.2s ease-in-out infinite; }
@keyframes cubie-polish { 0%, 25% { transform: translateX(0); } 75%, 100% { transform: translateX(160px); } }
.motion-color { animation: cubie-color-shift 8s ease-in-out infinite alternate; }
@keyframes cubie-color-shift { to { filter: hue-rotate(42deg) brightness(1.08); } }
.cubie-custom-art[data-custom="ghost"] .cubie-front { animation: cubie-ghost-fade 4s ease-in-out infinite alternate; }
@keyframes cubie-ghost-fade { to { opacity: .65; } }
@media (prefers-reduced-motion: reduce) {
  .cubie-custom-art, .cubie-custom-art * { animation: none !important; }
}

/* One full circuit, shared by the front and rear copy of each ring. */
.cubie-ring-particles {
  stroke-dasharray: 2 48;
  animation: cubie-ring-circuit 4.8s linear infinite;
}
@keyframes cubie-ring-circuit { to { stroke-dashoffset: -100; } }
@media (prefers-reduced-motion: reduce) {
  .cubie-ring-particles { animation: none; }
}

/* Hacker Cubie: irregular spatial glitches rather than rapid flashing. */
.hacker-claw { transform-origin: 114px 33px; animation: hacker-claw-reach 5.5s ease-in-out infinite; }
@keyframes hacker-claw-reach { 0%, 100% { transform: rotate(5deg) translateY(0); } 45% { transform: rotate(-7deg) translateY(-5px); } 47% { transform: rotate(-7deg) translate(2px, -5px); } 50% { transform: rotate(-7deg) translateY(-5px); } 75% { transform: rotate(-2deg) translateY(-2px); } }
.hacker-claw-echo { opacity: .4; animation: hacker-echo 4.7s steps(1, end) infinite; }
@keyframes hacker-echo { 0%, 45%, 100% { transform: translateX(-1px); opacity: .25; } 40%, 70% { transform: translate(3px, -1px); opacity: .55; } 74% { transform: translateX(-2px); opacity: .35; } }
.hacker-rift { animation: hacker-rift-color 7s linear infinite; }
@keyframes hacker-rift-color { to { filter: hue-rotate(360deg); } }
.hacker-screen-noise, .hacker-hand-noise { animation: hacker-data-shift 4.3s steps(1, end) infinite; }
.hacker-hand-noise { animation-delay: -1.4s; }
@keyframes hacker-data-shift { 0%, 100% { transform: translateX(0); opacity: .45; } 25% { transform: translateX(-2px); opacity: .7; } 28% { transform: translateX(2px); opacity: .5; } 58% { transform: translateY(2px); opacity: .65; } 62% { transform: translateX(-1px); opacity: .4; } }
.hacker-scan { animation: hacker-scan-pass 5s linear infinite; }
@keyframes hacker-scan-pass { to { transform: translateY(60px); } }
@media (prefers-reduced-motion: reduce) {
  .hacker-claw, .hacker-claw-echo, .hacker-rift, .hacker-screen-noise, .hacker-hand-noise, .hacker-scan { animation: none; }
}
/* Give Hacker's tall fingertips breathing room in the shop and closet cards. */
.custom-tile[data-custom="shop_hacker"] .custom-swatch { height: 124px; }
.custom-tile[data-custom="shop_hacker"] .custom-swatch svg { margin-top: 40px; }

.hacker-finger { animation: hacker-finger-curl 5.5s ease-in-out infinite alternate; }
@keyframes hacker-finger-curl { to { transform: rotate(var(--finger-angle)); } }
@media (prefers-reduced-motion: reduce) { .hacker-finger { animation: none; } }

.neon-noodles { filter: drop-shadow(0 0 1.5px #ffdf87) drop-shadow(0 0 3px #ff9944); }
.cubie-custom-art[data-custom="shop_prism_pop"] :is(.cubie-front, .cubie-side, .cubie-trim) {
  animation: prism-pop-colors .3s steps(6, end) infinite;
}
@keyframes prism-pop-colors { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .cubie-custom-art[data-custom="shop_prism_pop"] :is(.cubie-front, .cubie-side, .cubie-trim) { animation: none; }
}

.cubie-custom-art[data-custom="shop_neon_noodle"] .cubie-front > g > * {
  stroke: #fff;
  stroke-width: 1.5px;
  stroke-linejoin: round;
  paint-order: stroke fill;
}
.cubie-custom-art[data-custom="shop_neon_noodle"] .cubie-eyes rect {
  stroke: #fff;
  stroke-width: 2px;
  paint-order: stroke fill;
}

/* Achievement Empyrorite relics: independent accessory motion. */
.emperor-seal, .relic-orbit, .forge-gear { transform-origin:60px 68px; animation: relic-orbit 26s linear infinite; }
@keyframes relic-orbit { to { transform:rotate(360deg); } }
.emperor-mantle { transform-origin:60px 40px; animation: relic-mantle 4s ease-in-out infinite alternate; }
@keyframes relic-mantle { to { transform:scaleX(1.06) skewX(2deg); } }
.emperor-crown { animation: relic-crown 3.7s ease-in-out infinite alternate; }
@keyframes relic-crown { to { transform:translateY(-4px); } }
.emperor-ember { animation: relic-ember 3.4s ease-out infinite; }
@keyframes relic-ember { 0% { opacity:0; transform:translateY(8px); } 25% { opacity:.9; } 100% { opacity:0; transform:translate(5px,-35px); } }
.emperor-soul-ring { animation: relic-ring 4s linear infinite; }
@keyframes relic-ring { to { stroke-dashoffset:-64; } }
.grimoire-pages { transform-origin:60px 100px; animation: grimoire-pages 4s ease-in-out infinite alternate; }
@keyframes grimoire-pages { to { transform:scaleX(.94) skewY(2deg); } }
.tempest-wing { transform-origin:35px 65px; animation: tempest-wing 2.8s ease-in-out infinite alternate; }
@keyframes tempest-wing { to { transform:rotate(-7deg) scaleX(.94); } }
.tempest-bolt { animation: tempest-charge 3.5s ease-in-out infinite; filter:drop-shadow(0 0 2px #9ae9ff); }
@keyframes tempest-charge { 0%,100% { opacity:.25; } 45%,65% { opacity:1; } }
.relic-breathe { animation: relic-breathe 3s ease-in-out infinite alternate; filter:drop-shadow(0 0 3px #cdffeb); }
@keyframes relic-breathe { to { opacity:.55; } }
.forge-plume { transform-origin:60px 40px; animation: forge-plume 2s ease-in-out infinite alternate; }
@keyframes forge-plume { to { transform:scale(.94,1.1); opacity:.65; } }
.leviathan-fins { transform-origin:60px 60px; animation: leviathan-fins 3s ease-in-out infinite alternate; }
@keyframes leviathan-fins { to { transform:scaleX(.92) scaleY(1.04); } }
.leviathan-tail { transform-origin:70px 100px; animation: leviathan-tail 2.5s ease-in-out infinite alternate; }
@keyframes leviathan-tail { to { transform:rotate(-9deg); } }
@media (prefers-reduced-motion: reduce) {
  .emperor-seal, .relic-orbit, .forge-gear, .emperor-mantle, .emperor-crown,
  .emperor-ember, .emperor-soul-ring, .grimoire-pages, .tempest-wing, .tempest-bolt,
  .relic-breathe, .forge-plume, .leviathan-fins, .leviathan-tail { animation:none; }
}

.custom-unlock-art { display:flex; align-items:center; justify-content:center; flex:0 0 54px; height:60px; }
.custom-unlock-art .cubie-custom-art { width:34px; height:34px; overflow:visible; }

.grimoire-glyphs { animation: grimoire-ink 4s ease-in-out infinite alternate; filter:drop-shadow(0 0 2px #cc99ff); }
@keyframes grimoire-ink { from { opacity:.55; } to { opacity:1; filter:drop-shadow(0 0 4px #ddbbff); } }
.grimoire-ribbon { transform-origin:87px 105px; animation: grimoire-ribbon 3s ease-in-out infinite alternate; }
@keyframes grimoire-ribbon { to { transform:skewX(9deg); } }
.relic-drift { animation: relic-drift 4s ease-in-out infinite; }
@keyframes relic-drift { 0%,100% { opacity:0; transform:translate(0,5px); } 35% { opacity:.9; } 90% { opacity:0; transform:translate(3px,-22px); } }
.forge-inner-gear { transform-origin:60px 68px; animation: relic-orbit 34s linear infinite reverse; }
.forge-veins { animation: relic-breathe 2.5s ease-in-out infinite alternate; filter:drop-shadow(0 0 2px #ff943b); }
.leviathan-caustics { animation: leviathan-light 6s ease-in-out infinite alternate; }
@keyframes leviathan-light { to { transform:translate(2px,4px); opacity:.75; } }
.emperor-corona { transform-origin:60px 90px; animation: emperor-corona 3.2s ease-in-out infinite alternate; filter:drop-shadow(0 0 2px #b8ffba); }
@keyframes emperor-corona { to { transform:scaleX(1.06) scaleY(.95); opacity:.6; } }
@media (prefers-reduced-motion: reduce) {
  .grimoire-glyphs, .grimoire-ribbon, .relic-drift, .forge-inner-gear,
  .forge-veins, .leviathan-caustics, .emperor-corona { animation:none; }
}

/* Keep the victorious boss's laughing face visible above the rematch panel. */
.arena.arcade .overlay.boss-defeat {
  top: auto;
  backdrop-filter: none;
  background: linear-gradient(transparent, #101315e8 32%, #101315f5);
  justify-content: flex-end;
  padding: 14px;
  gap: 6px;
}
.overlay.boss-defeat .eyebrow { display: none; }
.overlay.boss-defeat h3 { margin: 0; font-size: clamp(18px, 2.5vw, 28px); }
.overlay.boss-defeat p { margin: 0; font-size: 12px; }
.overlay.boss-defeat .primary-button { margin-top: 4px; padding: 9px 18px; }

/* Detached blue-edged salvage drifts independently around Cubie's face. */
.space-metal-drift { animation: space-metal-drift 4s ease-in-out infinite alternate; }
@keyframes space-metal-drift {
  from { transform: translateX(-2px) rotate(-3deg); }
  to { transform: translateX(4px) rotate(4deg); }
}

.space-junk-fragment { transform-box: fill-box; transform-origin: center; animation: space-junk-fragment 3s ease-in-out infinite; }
@keyframes space-junk-fragment {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  40% { transform: translate(var(--junk-x), var(--junk-y)) rotate(var(--junk-turn)); }
  70% { transform: translate(calc(var(--junk-x) * -.35), calc(var(--junk-y) * .5)) rotate(calc(var(--junk-turn) * -.5)); }
}

.catalog-search { display: flex; flex-direction: column; gap: 7px; margin-top: 16px; font-size: 12px; color: var(--muted); }
.catalog-search input { box-sizing: border-box; width: 100%; min-width: 0; padding: 11px 13px; border: 1px solid var(--line); border-radius: 9px; background: #202728; color: var(--ink); font: inherit; font-size: 16px; }
.catalog-search input:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.catalog-search input::placeholder { color: #a3afb0; }
.search-status { min-height: 1.3em; margin: 8px 0 14px; color: var(--muted); font-size: 12px; }

.crabby-claw { transform-origin: 0px 12px; animation: crabby-claw 3.2s ease-in-out infinite; }
.crabby-pincer { transform-origin: 0px 8px; animation: crabby-pinch 2.2s ease-in-out infinite; }
.crabby-pincer-left { --claw-open: 16deg; --claw-shut: -6deg; }
.crabby-pincer-right { --claw-open: -16deg; --claw-shut: 6deg; }
@keyframes crabby-claw { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(7deg); } }
@keyframes crabby-pinch { 0%, 55%, 100% { transform: rotate(var(--claw-open)); } 70%, 82% { transform: rotate(var(--claw-shut)); } }

.koi-fin { animation: koi-fin 1.8s ease-in-out infinite alternate; }
.koi-tail { animation: koi-tail 2.4s ease-in-out infinite; }
@keyframes koi-fin { from { transform: rotate(-10deg) scaleY(.85); } to { transform: rotate(13deg) scaleY(1.08); } }
@keyframes koi-tail { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }

.prismatic-shine { animation: prismatic-sweep 5s ease-in-out infinite; }
.prismatic-reflection { animation-delay: -1.7s; opacity: .55; }
.crossfire-sweep { transform-origin:60px 66px; animation:crossfire-sweep 4s ease-in-out infinite alternate; }
.crossfire-sweep-1 { animation-direction:alternate-reverse; animation-delay:-1s; }
.crossfire-flow { animation:crossfire-flow 1.1s linear infinite; }
.crossfire-pulse { animation:crossfire-pulse 1.6s ease-in-out infinite; }
@keyframes crossfire-sweep { from { transform:rotate(-13deg); } to { transform:rotate(13deg); } }
@keyframes crossfire-flow { to { stroke-dashoffset:-110; } }
@keyframes crossfire-pulse { 0%,100% { opacity:.6; } 50% { opacity:1; } }
@media (prefers-reduced-motion:reduce) { .crossfire-sweep, .crossfire-flow, .crossfire-pulse { animation:none; } }
@keyframes prismatic-sweep { 0%, 12% { transform: translateX(-30px); } 85%, 100% { transform: translateX(180px); } }
@media (prefers-reduced-motion: reduce) { .prismatic-shine { animation: none; transform: translateX(65px); } .prismatic-reflection { transform: translateX(100px); } }

.ninja-bandana-tail { animation: ninja-bandana-wave 1.8s ease-in-out infinite alternate; }
.ninja-bandana-lower { animation-name: ninja-bandana-lower; animation-duration: 2.1s; animation-delay: -.6s; }
@keyframes ninja-bandana-wave {
  from { d: path("M98 37C112 22 126 39 141 22L137 40C121 51 110 33 99 44Z"); }
  to { d: path("M98 37C112 47 126 20 141 36L137 50C121 30 110 54 99 44Z"); }
}
@keyframes ninja-bandana-lower {
  from { d: path("M99 40C112 40 113 57 133 51L125 65C108 67 108 47 98 47Z"); }
  to { d: path("M99 40C114 32 120 51 136 43L129 57C114 62 110 43 98 47Z"); }
}

.knight-flag { animation: knight-flag-wave .65s ease-in-out infinite alternate; }
@keyframes knight-flag-wave {
  from { d: path("M58 3C69-10 83 13 96-2L91 13C78 29 68 3 58 14Z"); }
  to { d: path("M58 3C69 16 84-10 96 10L91 25C78 4 68 29 58 14Z"); }
}

.counter-shock { transform-box: fill-box; transform-origin: center; animation: counter-shock 1.2s ease-in-out infinite; }
@keyframes counter-shock {
  0%, 100% { opacity: .3; transform: scale(.85); filter: drop-shadow(0 0 0 #ffd38b); }
  35% { opacity: 1; transform: translateY(-2px) scale(1.18); stroke: #fff9d5; filter: drop-shadow(0 0 3px #ffb846); }
  55% { opacity: .65; transform: translateX(1px) scale(.95); }
  70% { opacity: 1; transform: translateY(1px) scale(1.1); filter: drop-shadow(0 0 2px #ffd38b); }
}
.cubie-custom-art[data-custom="attack_pumpkin_color_memory"] .cubie-front,
.prism-blue { animation: prism-blue-swap 2s steps(1, end) infinite; }
.prism-orange { animation: prism-orange-swap 2s steps(1, end) infinite; }
.cubie-custom-art[data-custom="attack_pumpkin_color_memory"] .cubie-side { animation: prism-side-swap 2s steps(1, end) infinite; }
@keyframes prism-blue-swap { 0%, 100% { fill: #72c9ff; } 50% { fill: #ffab60; } }
@keyframes prism-orange-swap { 0%, 100% { fill: #ffab60; } 50% { fill: #72c9ff; } }
@keyframes prism-side-swap { 0%, 100% { fill: #406f91; } 50% { fill: #96603b; } }

.chaos-cosmetic {
  transform-box: fill-box;
  transform-origin: center;
  animation: chaos-wiggle var(--chaos-speed, .9s) ease-in-out infinite alternate, chaos-colors .9s linear infinite;
}
@keyframes chaos-wiggle {
  0% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(var(--chaos-x), var(--chaos-y)) rotate(var(--chaos-tilt)); }
  100% { transform: translate(calc(var(--chaos-x) * -.5), calc(var(--chaos-y) * .5)) rotate(calc(var(--chaos-tilt) * -1)); }
}
@keyframes chaos-colors { from { filter: hue-rotate(0deg) saturate(1.4); } to { filter: hue-rotate(360deg) saturate(1.4); } }

.lattice-current { animation: lattice-current 2.4s linear infinite; }
.lattice-node { animation: lattice-node 2s ease-in-out infinite; }
.lattice-scan { animation: lattice-scan 3.2s linear infinite; }
.lattice-tile { transform-origin: 6px 6px; animation: lattice-tile 2.2s ease-in-out infinite alternate; }
@keyframes lattice-current { to { stroke-dashoffset: -100; } }
@keyframes lattice-node { 0%, 100% { opacity: .45; } 50% { opacity: 1; filter: drop-shadow(0 0 1.5px #7effe5); } }
@keyframes lattice-scan { from { transform: translateY(0); } to { transform: translateY(88px); } }
@keyframes lattice-tile { from { transform: translateY(-3px) rotate(-9deg); } to { transform: translateY(3px) rotate(9deg); } }

.attack-glimmer { animation: attack-glimmer 2.4s ease-in-out infinite; }
.attack-energy-flow { animation: attack-energy-flow 2.8s linear infinite; }
.attack-orbit-halo { transform-origin: 60px 68px; animation: attack-orbit-halo 18s linear infinite; }
@keyframes attack-glimmer { 0%, 100% { opacity: .55; } 50% { opacity: 1; filter: drop-shadow(0 0 1.5px #b5fff1); } }
@keyframes attack-energy-flow { to { stroke-dashoffset: -100; } }
@keyframes attack-orbit-halo { to { transform: rotate(360deg); } }

.cabinet-scan { animation: cabinet-scan 4s linear infinite; }
@keyframes cabinet-scan { to { transform: translateY(54px); } }

/* Joined latitude bands form a complete mirrored sphere, including its poles. */
.disco-volume { overflow: visible; }
.disco-scene { width: 145px; height: 145px; position: relative; perspective: 650px; overflow: visible; }
.disco-sphere {
  width: 145px;
  height: 145px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-12deg) rotateY(0deg);
  animation: disco-turn 12s linear infinite;
}
.disco-tile {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}
.disco-tile svg { display: block; width: 100%; height: 100%; overflow: visible; }
.disco-shading {
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 32% 25%, #ffffff55, transparent 40%),
    radial-gradient(circle at 40% 35%, transparent 36%, #111a2944 76%, #111a2980 100%);
}
/* Linger around the smile, accelerate across the back, then ease back in. */
@keyframes disco-turn {
  0% { transform: rotateX(-12deg) rotateY(0deg); }
  25% { transform: rotateX(-12deg) rotateY(45deg); }
  40% { transform: rotateX(-12deg) rotateY(90deg); }
  50% { transform: rotateX(-12deg) rotateY(180deg); }
  60% { transform: rotateX(-12deg) rotateY(270deg); }
  75% { transform: rotateX(-12deg) rotateY(315deg); }
  100% { transform: rotateX(-12deg) rotateY(360deg); }
}

/* Loco's body and face jiggle together. */
.cubie-custom-art[data-custom="shop_loco"] .cubie-float {
  transform-origin: 72.5px 90px;
  animation: loco-jiggle .7s ease-in-out infinite;
}
@keyframes loco-jiggle {
  0%, 100% { transform: rotate(-14deg) scale(1, 1); }
  25% { transform: translate(-3px, 1px) rotate(-19deg) scale(1.045, .955); }
  50% { transform: translate(0, -2px) rotate(-13deg) scale(.97, 1.035); }
  75% { transform: translate(3px, 1px) rotate(-8deg) scale(1.045, .955); }
}
@media (prefers-reduced-motion: reduce) {
  .cubie-custom-art[data-custom="shop_loco"] .cubie-float { animation: none; }
}

.matrix-code-column { animation:matrix-code-fall 3s linear infinite; }
@keyframes matrix-code-fall { from { transform:translateY(0); } to { transform:translateY(96px); } }
@media (prefers-reduced-motion:reduce) { .matrix-code-column { animation:none; } }

.cubie-3d-float { transform-origin: 72px 73px; animation: cubie-3d-bob 3.8s ease-in-out infinite; }
@keyframes cubie-3d-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .cubie-3d-float { animation: none; } }

.choo-wheel { animation: choo-wheel 2s linear infinite; }
@keyframes choo-wheel { to { transform: rotate(360deg); } }
.choo-steam { animation: choo-steam 2.4s ease-out infinite; }
@keyframes choo-steam { from { transform: translate(0, 0); opacity: .75; } to { transform: translate(16px, -28px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .choo-wheel, .choo-steam { animation: none; } }

.cubie-custom-art[data-custom="shop_balloon"] .cubie-float { animation: balloon-bob 4s ease-in-out infinite; transform-origin: 72.5px 72.5px; }
@keyframes balloon-bob { 0%, 100% { transform: translate(-2px, 2px) rotate(-7deg); } 50% { transform: translate(3px, -7px) rotate(5deg); } }
.balloon-string { transform-origin: 60px 116px; animation: balloon-string 3s ease-in-out infinite alternate; }
@keyframes balloon-string { from { transform: rotate(-9deg); } to { transform: rotate(10deg); } }
@media (prefers-reduced-motion: reduce) { .cubie-custom-art[data-custom="shop_balloon"] .cubie-float, .balloon-string { animation: none; } }

/* Party Cubie: an eight-second celebration with a quiet, readable face. */
.party-edge-glow { filter: drop-shadow(0 0 1.6px #ffe4a7aa) drop-shadow(0 0 3.2px #c493ff77); pointer-events: none; }
.cubie-custom-art[data-custom="party"] .cubie-float { animation: party-dance 8s ease-in-out infinite; }
.party-hat { transform-origin: 60px 33px; animation: party-hat 8s ease-in-out infinite; }
.party-confetti { animation: party-confetti 8s cubic-bezier(.2,.5,.45,1) infinite; }
.party-sparkle { transform-box: fill-box; transform-origin: center; animation: party-sparkle 4s ease-in-out infinite; }
.party-firework { animation: party-firework 8s ease-out infinite; }
.party-aura { transform-origin: 60px 62px; animation: party-aura 8s ease-in-out infinite; }
.party-orbit { transform-origin: 60px 68px; animation: party-orbit 24s linear infinite; }
.party-ribbon { transform-origin: 0px 0px; animation: party-ribbon 4s ease-in-out infinite alternate; }
.party-popper { transform-origin: 0px 10px; animation: party-popper 8s ease-in-out infinite; }
.party-popper-flash { animation: party-popper-flash 8s ease-in-out infinite; animation-delay: inherit; }
.party-sheen { animation: party-sheen 8s ease-in-out infinite; }
.party-hat-shine { animation: party-hat-shine 8s ease-in-out infinite; }
.party-topper { animation: party-topper 8s ease-in-out infinite; }
.party-bow { transform-origin: 60px 100px; animation: party-bow 8s ease-in-out infinite; }
@keyframes party-dance {
  0%, 100% { transform: translateY(0) rotate(-12deg); }
  18%, 58% { transform: translateY(-7px) rotate(-8deg); }
  26%, 66% { transform: translateY(-3px) rotate(-15deg); }
  38%, 78% { transform: translateY(-9px) rotate(-11deg); }
}
@keyframes party-hat {
  0%, 44%, 100% { transform: rotate(-2deg); }
  18%, 58% { transform: translateY(-1px) rotate(4deg); }
  28%, 68% { transform: rotate(-5deg); }
}
@keyframes party-confetti {
  0%, 100% { transform: translate(0, 9px) rotate(0deg) scale(.7); opacity: 0; }
  12% { opacity: 1; }
  38% { transform: translate(var(--party-drift), -18px) rotate(var(--party-twist)) scale(1); opacity: 1; }
  80% { transform: translate(calc(var(--party-drift) * 1.5), 14px) rotate(calc(var(--party-twist) * 2)) scale(.8); opacity: .65; }
  96% { opacity: 0; }
}
@keyframes party-sparkle { 0%, 100% { opacity: .35; transform: scale(.65); } 45% { opacity: 1; transform: scale(1.15); } }
@keyframes party-firework {
  0%, 12%, 64%, 100% { transform: scale(.2); opacity: 0; }
  20% { transform: scale(.5); opacity: .9; }
  36% { transform: scale(1); opacity: .85; }
  58% { transform: scale(1.18); opacity: 0; }
}
@keyframes party-aura { 0%, 100% { opacity: .55; transform: scale(.95); } 25%, 65% { opacity: 1; transform: scale(1.03); } }
@keyframes party-orbit { to { transform: rotate(360deg); } }
@keyframes party-ribbon { from { transform: rotate(-5deg) scaleY(.94); } to { transform: rotate(5deg) scaleY(1.04); } }
@keyframes party-popper { 0%, 14%, 40%, 100% { transform: rotate(0deg); } 20% { transform: translateY(3px) rotate(-7deg); } 29% { transform: rotate(3deg); } }
@keyframes party-popper-flash { 0%, 12%, 32%, 100% { opacity: 0; } 19%, 23% { opacity: 1; } }
@keyframes party-sheen { 0%, 12% { transform: translateX(-50px); } 48%, 100% { transform: translateX(150px); } }
@keyframes party-hat-shine { 0%, 38% { transform: translateX(-50px); } 70%, 100% { transform: translateX(90px); } }
@keyframes party-topper { 0%, 100% { transform: rotate(-10deg) scale(.9); } 40% { transform: rotate(80deg) scale(1.12); } 75% { transform: rotate(170deg) scale(.95); } }
@keyframes party-bow { 0%, 100% { transform: scale(1); } 20%, 60% { transform: scale(1.08, .94); } 30%, 70% { transform: scale(.98, 1.04); } }
@media (prefers-reduced-motion: reduce) {
  .cubie-custom-art[data-custom="party"] * { animation: none !important; }
  .party-firework { opacity: .65; transform: scale(.85); }
  .party-confetti { opacity: .8; }
  .party-sheen, .party-hat-shine, .party-popper-flash { opacity: 0; }
}

.rainbow-crayon-sparkle { animation: rainbow-crayon-sparkle 2.2s ease-in-out infinite alternate; }
@keyframes rainbow-crayon-sparkle { from { opacity: .3; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rainbow-crayon-sparkle { animation: none; } }

/* Puzzle Cube: closed, solid slices share one vertical axis and turn in sequence. */
.puzzle-volume { overflow: visible; }
.puzzle-scene { width: 145px; height: 145px; position: relative; perspective: 700px; overflow: visible; }
.puzzle-cube, .puzzle-face-anchor {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  transform-origin: 0 0;
  transform-style: preserve-3d;
  transform: scale(.9) rotateX(-16deg) rotateY(-22deg);
}
.puzzle-layer {
  position: absolute; left: -54px; width: 108px; height: 36px;
  transform-origin: 54px 18px; transform-style: preserve-3d;
  animation: puzzle-top 16s cubic-bezier(.65,0,.35,1) infinite;
}
.puzzle-layer-1 { animation-name: puzzle-middle; }
.puzzle-layer-2 { animation-name: puzzle-bottom; }
.puzzle-block { position:absolute; top:0; width:36px; height:36px; transform-style:preserve-3d; }
.puzzle-face { position:absolute; left:0; top:0; width:36px; height:36px; backface-visibility:hidden; }
.puzzle-face svg { display:block; width:100%; height:100%; }
.puzzle-face-front { transform:translateZ(18px); }
.puzzle-face-right { transform:rotateY(90deg) translateZ(18px); }
.puzzle-face-back { transform:rotateY(180deg) translateZ(18px); }
.puzzle-face-left { transform:rotateY(-90deg) translateZ(18px); }
.puzzle-face-top { transform:rotateX(90deg) translateZ(18px); }
.puzzle-face-bottom { transform:rotateX(-90deg) translateZ(18px); }
.puzzle-face-right svg, .puzzle-face-left svg { filter: brightness(.88); }
.puzzle-face-back svg, .puzzle-face-bottom svg { filter: brightness(.74); }
/* Separate compositing keeps the familiar face above every turning seam. */
.puzzle-face-overlay { position: absolute; inset: 0; perspective: 700px; pointer-events: none; }
.puzzle-expression { position: absolute; left: -54px; top: -54px; width: 108px; height: 108px; transform: translateZ(54px); }
.puzzle-expression svg { display: block; width: 100%; height: 100%; overflow: visible; }
@keyframes puzzle-top {
  0%, 8%, 28%, 100% { transform: rotateY(0deg); }
  16%, 20% { transform: rotateY(90deg); }
}
@keyframes puzzle-middle {
  0%, 40%, 60%, 100% { transform: rotateY(0deg); }
  48%, 52% { transform: rotateY(-90deg); }
}
@keyframes puzzle-bottom {
  0%, 72%, 92%, 100% { transform: rotateY(0deg); }
  80%, 84% { transform: rotateY(90deg); }
}
@media (prefers-reduced-motion: reduce) {
  .cubie-custom-art[data-custom="shop_puzzle_cube"] * { animation: none !important; }
}

.shop-sun-rays { transform-origin:60px 68px; animation:shop-sun-rays 35s linear infinite; }
@keyframes shop-sun-rays { to { transform:rotate(360deg); } }
.shop-six-twinkle, .shop-bulb-glow { animation:shop-six-glow 2.8s ease-in-out infinite alternate; }
@keyframes shop-six-glow { from { opacity:.4; } to { opacity:1; } }
@media (prefers-reduced-motion:reduce) { .shop-sun-rays, .shop-six-twinkle, .shop-bulb-glow { animation:none; } }

.impossible-ribbon { transform-origin:60px 70px; animation:impossible-ribbon 2s ease-in-out infinite alternate; }
@keyframes impossible-ribbon { from { transform:translateY(-2px) rotate(-2deg); } to { transform:translateY(2px) rotate(2deg); } }
.impossible-glow { animation:impossible-glow 2.5s ease-in-out infinite alternate; }
@keyframes impossible-glow { from { opacity:.5; } to { opacity:1; } }
@media (prefers-reduced-motion:reduce) { .impossible-ribbon, .impossible-glow { animation:none; } }

/* White Dwarf's slow stellar layers keep its expression easy to read. */
.dwarf-aura { transform-origin:60px 68px; animation:dwarf-breathe 4s ease-in-out infinite alternate; }
@keyframes dwarf-breathe { from { opacity:.6; transform:scale(.94); } to { opacity:1; transform:scale(1.05); } }
.dwarf-corona { transform-origin:60px 68px; animation:dwarf-orbit 60s linear infinite reverse; }
.dwarf-orbit { transform-origin:60px 68px; animation:dwarf-orbit 32s linear infinite; }
@keyframes dwarf-orbit { to { transform:rotate(360deg); } }
.dwarf-satellite { animation:dwarf-satellite 3s ease-in-out infinite alternate; }
@keyframes dwarf-satellite { from { transform:translateY(-2px) rotate(-12deg); } to { transform:translateY(2px) rotate(12deg); } }
.dwarf-crown { transform-origin:60px 33px; animation:dwarf-crown 4s ease-in-out infinite alternate; }
@keyframes dwarf-crown { to { transform:translateY(-2px); } }
.dwarf-heart, .dwarf-twinkle { animation:dwarf-twinkle 2.6s ease-in-out infinite alternate; }
@keyframes dwarf-twinkle { from { opacity:.55; } to { opacity:1; filter:drop-shadow(0 0 2px #f2faff); } }
.dwarf-surface { animation:dwarf-surface 5s ease-in-out infinite alternate; }
@keyframes dwarf-surface { to { transform:translateY(4px); opacity:.55; } }
.dwarf-shine { animation:dwarf-shine 6s ease-in-out infinite; }
@keyframes dwarf-shine { 0%, 15% { transform:translateX(0); } 65%, 100% { transform:translateX(180px); } }
@media (prefers-reduced-motion:reduce) {
  .dwarf-aura, .dwarf-corona, .dwarf-orbit, .dwarf-satellite, .dwarf-crown,
  .dwarf-heart, .dwarf-twinkle, .dwarf-surface, .dwarf-shine { animation:none; }
}

/* Chaos field guide: symbols supplement color so hazards remain identifiable. */
#block-guide-room { padding: clamp(16px, 4vw, 32px); text-align: left; width: 100%; box-sizing: border-box; }
#block-guide-room h3 { font-size: clamp(24px, 4vw, 38px); margin: 8px 0; }
.chaos-rules { background: #192339; border: 1px solid #48516a; border-radius: 12px; padding: 18px; margin: 20px 0; line-height: 1.6; }
#block-guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; }
.block-guide-card { border: 1px solid #465069; border-top: 3px solid var(--block-color); border-radius: 10px; padding: 18px; background: #141e31; }
.block-guide-card h4 { margin: 12px 0 6px; font-size: 17px; }
.block-guide-card p { line-height: 1.5; font-size: 14px; margin: 8px 0; }
.block-guide-icon { display: block; width: 180px; max-width: 100%; height: 110px; object-fit: contain; margin: 0 auto; background: #101827; border-radius: 8px; }
.block-guide-card .block-rarity { color: var(--block-color); font-size: 12px; }

/* Geomayhem's menu card: a tiny animated survivor scene. */
.geomayhem-card .card-art { overflow: hidden; }
.geomayhem-card .card-art svg { display: block; width: 100%; height: 100%; }
.geomayhem-card .geo-cubie { transform-origin: 90px 53px; animation: geo-cubie-hover 2.8s ease-in-out infinite; }
.geomayhem-card .geo-rings { transform-origin: 90px 52px; animation: geo-radar-turn 18s linear infinite; }
.geomayhem-card .geo-enemy { transform-box: fill-box; transform-origin: center; animation: geo-enemy-drift 3.6s ease-in-out infinite; }
.geomayhem-card .geo-pentagon { animation-duration: 4.2s; animation-delay: -1.8s; }
.geomayhem-card .geo-star { transform-box: fill-box; transform-origin: center; animation: geo-star-spin 8s linear infinite; }
.geomayhem-card .geo-shot { animation: geo-shot-flight 1.4s ease-out infinite; }
.geomayhem-card .geo-shot-second { animation-delay: -.7s; }
@keyframes geo-cubie-hover { 0%, 100% { transform: translateY(2px) rotate(-3deg); } 50% { transform: translateY(-3px) rotate(3deg); } }
@keyframes geo-radar-turn { to { transform: rotate(360deg); } }
@keyframes geo-enemy-drift { 0%, 100% { transform: translate(0, 0) rotate(-7deg); } 50% { transform: translate(5px, -5px) rotate(9deg); } }
@keyframes geo-star-spin { to { transform: rotate(360deg); } }
@keyframes geo-shot-flight { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: 1; } 75%, 100% { transform: translate(37px, -12px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .geomayhem-card .card-art svg * { animation: none; }
  .geomayhem-card .geo-shot { opacity: 0; }
}

.guide-tab-preview { width: 150px; height: 94px; object-fit: contain; display: block; }

/* Status feedback: light screen tints, slow particles, and tiny arena movement. */
.chaos-screen-effect { position: fixed; inset: 0; z-index: 25; pointer-events: none; overflow: hidden; }
#chaos-electric { background: rgb(255 222 70 / 8%); box-shadow: inset 0 0 90px rgb(255 216 54 / 28%); }
#chaos-electric svg { width: 100%; height: 100%; fill: none; stroke: #fff19d; stroke-width: 3; opacity: .65; stroke-dasharray: 70 35; animation: chaos-current 1.6s linear infinite; }
#chaos-frost { background: rgb(120 206 255 / 9%); box-shadow: inset 0 0 100px rgb(158 224 255 / 38%); }
#chaos-frost span { position: absolute; left: var(--snow-x); top: -5%; color: #e6f8ff; font-size: 24px; opacity: .7; animation: chaos-snow 10s linear infinite; animation-delay: var(--snow-delay); }
.arena.chaos-haste { animation: chaos-jiggle .42s ease-in-out infinite; }
.arena.chaos-frozen { animation: chaos-shiver .22s ease-in-out infinite; }
@keyframes chaos-current { to { stroke-dashoffset: -210; } }
@keyframes chaos-snow { from { transform: translate(-8px,-5vh) rotate(0); } to { transform: translate(12px,110vh) rotate(100deg); } }
@keyframes chaos-jiggle { 0%,100% { translate: 0 0; } 25% { translate: 1px -.5px; } 75% { translate: -1px .5px; } }
@keyframes chaos-shiver { 0%,100% { translate: -.65px 0; } 50% { translate: .65px 0; } }
.chaos-motion-off .arena.chaos-haste, .chaos-motion-off .arena.chaos-frozen,
.chaos-motion-off .chaos-screen-effect *, .chaos-motion-off .chaos-screen-effect { animation: none !important; }
.chaos-motion-off #chaos-frost span { top: 14%; }
.chaos-motion-off #chaos-frost span:nth-child(3n) { top: 73%; }
.chaos-motion-off #chaos-frost span:nth-child(3n+1) { top: 42%; }
@media (prefers-reduced-motion: reduce) {
  .arena.chaos-haste, .arena.chaos-frozen, .chaos-screen-effect * { animation: none !important; }
  #chaos-frost span { top: 18%; }
  #chaos-frost span:nth-child(2n) { top: 72%; }
}

/* Chaos achievement Customs: polished materials and individual motion. */
.chaos-material-sheen { animation: chaos-cubie-sheen 6s ease-in-out infinite; }
.chaos-jewel-glint { transform-origin: 0 0; animation: chaos-jewel-twinkle 3.2s ease-in-out infinite; }
.chaos-confetti { animation: chaos-cubie-confetti 3.8s ease-in-out infinite; }
.chaos-rain { animation: chaos-cubie-rain 2.1s linear infinite; }
.chaos-hat-tilt { transform-origin: 60px 30px; animation: chaos-cubie-hat 4s ease-in-out infinite; }
.chaos-card-flip { transform-box: fill-box; transform-origin: center; animation: chaos-card-turn 5s ease-in-out infinite; }
.chaos-baton { transform-origin: 105px 65px; animation: chaos-baton-conduct 2.4s ease-in-out infinite; }
.chaos-orbit-halo, .chaos-monarch-halo { transform-origin: 60px 68px; animation: chaos-regalia-orbit 24s linear infinite; }
.chaos-monarch-halo { transform-origin: 60px 65px; animation-duration: 36s; }
.chaos-orbit-crown { transform-origin: 60px 17px; animation: chaos-cubie-hat 5s ease-in-out infinite; }
.chaos-orbit-jewel { animation: chaos-jewel-hover 3.4s ease-in-out infinite; }
.chaos-glass-wing { transform-origin: 25px 65px; animation: chaos-glass-flutter 3s ease-in-out infinite; }
.chaos-prism-rays, .chaos-signal { animation: chaos-jewel-light 3s ease-in-out infinite; }
.chaos-thread { animation: chaos-stitch-flow 3s linear infinite; }
.chaos-needle { transform-origin: 93px 25px; animation: chaos-cubie-hat 2.8s ease-in-out infinite; }
.chaos-dancer-star { animation: chaos-star-dance 5s ease-in-out infinite; }
.chaos-healing-pulse { transform-box: fill-box; transform-origin: center; animation: chaos-heartbeat 2.8s ease-in-out infinite; }
.chaos-healing-mote { animation: chaos-jewel-hover 3s ease-in-out infinite; }
.chaos-monarch-aura { animation: chaos-jewel-light 4.6s ease-in-out infinite; }
.chaos-monarch-cape { transform-origin: 60px 38px; animation: chaos-royal-cape 4.8s ease-in-out infinite; }
.chaos-monarch-crown { transform-origin: 60px 28px; animation: chaos-crown-poise 5.5s ease-in-out infinite; }
.chaos-monarch-scepter { transform-origin: 111px 103px; animation: chaos-crown-poise 5s ease-in-out infinite reverse; }
@keyframes chaos-cubie-sheen { 0%, 15% { transform: translateX(0); } 70%, 100% { transform: translateX(160px); } }
@keyframes chaos-jewel-twinkle { 0%, 100% { opacity: .35; transform: scale(.55) rotate(-10deg); } 50% { opacity: 1; transform: scale(1.15) rotate(15deg); } }
@keyframes chaos-cubie-confetti { 0%, 100% { transform: translateY(-4px) rotate(-18deg); opacity: .45; } 50% { transform: translateY(5px) rotate(24deg); opacity: .95; } }
@keyframes chaos-cubie-rain { 0% { transform: translate(3px, -10px); opacity: 0; } 25% { opacity: .8; } 100% { transform: translate(-3px, 14px); opacity: 0; } }
@keyframes chaos-cubie-hat { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes chaos-card-turn { 0%, 25%, 100% { transform: scaleX(1) rotate(-8deg); } 55% { transform: scaleX(.22) rotate(8deg); } 80% { transform: scaleX(1) rotate(4deg); } }
@keyframes chaos-baton-conduct { 0%, 100% { transform: rotate(-9deg); } 40% { transform: rotate(8deg); } 65% { transform: rotate(-2deg); } }
@keyframes chaos-regalia-orbit { to { transform: rotate(360deg); } }
@keyframes chaos-jewel-hover { 0%, 100% { transform: translateY(2px); } 50% { transform: translateY(-4px); } }
@keyframes chaos-glass-flutter { 0%, 100% { transform: rotate(-3deg) scaleX(.94); } 50% { transform: rotate(4deg) scaleX(1.06); } }
@keyframes chaos-jewel-light { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes chaos-stitch-flow { to { stroke-dashoffset: -28; } }
@keyframes chaos-star-dance { 0%, 100% { transform: rotate(-9deg) translateY(0); } 50% { transform: rotate(9deg) translateY(-3px); } }
@keyframes chaos-heartbeat { 0%, 35%, 65%, 100% { transform: scale(1); } 45%, 55% { transform: scale(1.09); } }
@keyframes chaos-royal-cape { 0%, 100% { transform: skewX(-1.5deg) scaleX(.98); } 50% { transform: skewX(1.5deg) scaleX(1.02); } }
@keyframes chaos-crown-poise { 0%, 100% { transform: rotate(-1deg); } 50% { transform: rotate(1deg); } }
@media (prefers-reduced-motion: reduce) {
  .cubie-custom-art[data-custom^="chaos_"] * { animation: none !important; }
  .cubie-custom-art[data-custom^="chaos_"] .chaos-material-sheen { transform: translateX(65px); }
}

/* Swap Wild Card's symbol only during the completely hidden edge-on hold. */
.chaos-wild-card { transform-box: fill-box; transform-origin: center; animation: chaos-wild-card-turn 5s ease-in-out infinite; }
@keyframes chaos-wild-card-turn {
  0%, 6% { transform: rotate(-8deg) scaleX(0); opacity: 0; }
  7% { transform: rotate(-8deg) scaleX(0); opacity: 1; }
  25%, 73% { transform: rotate(-8deg) scaleX(1); opacity: 1; }
  93% { transform: rotate(-8deg) scaleX(0); opacity: 1; }
  94%, 100% { transform: rotate(-8deg) scaleX(0); opacity: 0; }
}
html.account-reduced-motion .chaos-wild-card { animation: none !important; transform: rotate(-8deg); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .chaos-wild-card { animation: none !important; transform: rotate(-8deg); opacity: 1; }
}

.jackpot-winner .chaos-card-flip { filter:drop-shadow(0 0 3px #ffe68a); }
/* Geomayhem expedition hub. */
#geomayhem-campaign { color: #c4ffe9; margin-bottom: 12px; font-size: 13px; line-height: 1.5; }
#geomayhem-workshop { display: grid; gap: 8px; margin-bottom: 20px; }
#geomayhem-workshop button { text-align: left; padding: 12px; border: 1px solid #52756c; border-radius: 8px; color: #eafff7; background: #19362c; font-size: 12px; }
#geomayhem-workshop button:disabled { opacity: .55; cursor: default; }
.difficulty-choice[data-campaign-locked="true"] { opacity: .45; }
#geomayhem-run-info { margin: 6px 0 0; color: #b9dfd4; font-size: 10px; line-height: 1.35; }
#geomayhem-reroll { margin-top: 12px; flex-shrink: 0; }

/* Chunky pixel HUD inspired by classic voxel-game status panels. */
#chaos-status-badges {
  position: absolute; top: 48px; right: 8px;
  z-index: 30; margin: 0; padding: 3px; list-style: none; display: grid; gap: 5px;
  width: 154px; pointer-events: none;
}
#chaos-status-badges[hidden] { display: none; }
#chaos-status-badges li {
  display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 6px;
  min-height: 30px; padding: 4px 6px; color: #f4f4ef; background: #292c29;
  border: 2px solid #111510; border-radius: 0;
  box-shadow: inset 2px 2px #70766b, inset -2px -2px #151915, 2px 2px #0009;
  font: bold 11px/1.15 ui-monospace, monospace; text-shadow: 1px 1px #000;
}
#chaos-status-badges svg { width: 20px; height: 20px; fill: var(--effect-color); shape-rendering: crispEdges; }
#chaos-status-badges small { color: #c2c8ba; font: inherit; font-size: 10px; }
@media (max-width: 600px) {
  #chaos-status-badges { width: 139px; gap: 3px; }
  #chaos-status-badges li { min-height: 26px; padding: 3px 5px; font-size: 10px; gap: 4px; }
}

@media (max-height: 500px) {
  #chaos-status-badges { width: 290px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.chaos-status-active .achievement-toasts { top: auto; bottom: 12px; left: auto; right: 12px; }

/* Geomayhem: subtle silver motion grows into layered endgame effects. */
.geo-signal { animation:geo-signal 3s ease-in-out infinite alternate; }
@keyframes geo-signal { to { opacity:.5; } }
.geo-hover { animation:geo-hover 3.8s ease-in-out infinite alternate; }
@keyframes geo-hover { to { transform:translateY(-2.5px); } }
.geo-plume { transform-origin:18px 94px; animation:geo-plume 1.4s ease-in-out infinite alternate; }
@keyframes geo-plume { to { transform:scaleY(.7); opacity:.6; } }
.geo-wing { transform-origin:60px 68px; animation:geo-wing 4s ease-in-out infinite alternate; }
@keyframes geo-wing { to { transform:scaleX(.95) scaleY(1.025); } }
.geo-orbit, .geo-orbit-reverse { transform-origin:60px 68px; animation:geo-orbit 32s linear infinite; }
.geo-orbit-reverse { animation-duration:43s; animation-direction:reverse; }
@keyframes geo-orbit { to { transform:rotate(360deg); } }
.geo-aura { animation:geo-aura 4s ease-in-out infinite alternate; }
@keyframes geo-aura { from { opacity:.5; } to { opacity:1; } }
.geo-sparkle { animation:geo-sparkle 2.8s ease-in-out infinite alternate; }
@keyframes geo-sparkle { from { opacity:.3; } to { opacity:1; filter:drop-shadow(0 0 1.5px #c6f9ff); } }
.geo-shine { animation:geo-shine 7s ease-in-out infinite; }
@keyframes geo-shine { 0%,15% { transform:translateX(0); } 65%,100% { transform:translateX(175px); } }
@media (prefers-reduced-motion:reduce) { .geo-signal,.geo-hover,.geo-plume,.geo-wing,.geo-orbit,.geo-orbit-reverse,.geo-aura,.geo-sparkle,.geo-shine { animation:none; } }

.chaos-status-active .now-playing {
  left: max(8px, env(safe-area-inset-left)); right: auto; max-width: calc(100vw - 180px);
}
@media (max-height: 500px) {
  .chaos-status-active .now-playing { max-width: calc(100vw - 320px); }
}

#chaos-status-badges.many-effects { width: min(290px, calc(100% - 16px)); grid-template-columns: repeat(2, minmax(0, 1fr)); }
#geomayhem-boss { margin-top: 7px; color: #ffafb9; font-size: 11px; gap: 8px; }
#geomayhem-boss[hidden] { display: none; }
#geomayhem-boss-health { width: 45%; height: 8px; accent-color: #ff526a; }
#geomayhem-upgrade-status { line-height: 1.4; }

/* Boss Crush: the original glyph and facial geometry, lit as a metal shell. */
.game-card[data-game="boss"] { overflow: hidden; isolation: isolate; }
.boss-card-scene { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.boss-card-scene svg { width: 100%; height: 100%; display: block; }
.game-card[data-game="boss"] .card-top,
.game-card[data-game="boss"] .card-title,
.game-card[data-game="boss"] .card-description { text-shadow: 0 1px 4px #201018, 0 0 5px #201018; }
@property --boss-metal-0 { syntax: "<color>"; inherits: false; initial-value: #ffd9d9; }
@property --boss-metal-1 { syntax: "<color>"; inherits: false; initial-value: #f1a3ac; }
@property --boss-metal-2 { syntax: "<color>"; inherits: false; initial-value: #b65a72; }
@property --boss-metal-3 { syntax: "<color>"; inherits: false; initial-value: #f4b6c1; }
@property --boss-metal-4 { syntax: "<color>"; inherits: false; initial-value: #8c405b; }
@property --boss-metal-5 { syntax: "<color>"; inherits: false; initial-value: #e896a5; }
.boss-shell {
  font: inherit;
  color: transparent;
  background: linear-gradient(125deg, var(--boss-metal-0) 0%, var(--boss-metal-1) 22%, var(--boss-metal-2) 45%, var(--boss-metal-3) 57%, var(--boss-metal-4) 78%, var(--boss-metal-5) 100%);
  background-size: 220% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  filter: drop-shadow(0 2px 0 #672e43) drop-shadow(0 4px 3px #160c1d70);
  animation: boss-shell-light 4.8s ease-in-out infinite alternate,
    boss-shell-rage 8s ease-in-out 8s infinite;
}
.boss-reactor { animation: boss-reactor-breathe 4s ease-in-out infinite alternate; }
.boss-target-ring { transform-origin: 120px 83px; animation: boss-target-rotate 28s linear infinite; }
.boss-target-brackets { animation: boss-reactor-breathe 3s ease-in-out -1s infinite alternate; }
.boss-scan { animation: boss-scan-pass 6s linear infinite; }
.boss-ember { animation: boss-ember-rise 5s ease-out var(--ember-delay) infinite; }
/* Match the eyebrow timing while retaining the metallic sheen underneath. */
@keyframes boss-shell-rage {
  0%, 37.5%, 100% { --boss-metal-0: #ffd9d9; --boss-metal-1: #f1a3ac; --boss-metal-2: #b65a72; --boss-metal-3: #f4b6c1; --boss-metal-4: #8c405b; --boss-metal-5: #e896a5; }
  4.375%, 33.125% { --boss-metal-0: #ffd2bd; --boss-metal-1: #ff746b; --boss-metal-2: #c72c37; --boss-metal-3: #ff9b88; --boss-metal-4: #831e32; --boss-metal-5: #ed4c54; }
}
@keyframes boss-shell-light { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes boss-reactor-breathe { from { opacity: .35; } to { opacity: .85; } }
@keyframes boss-target-rotate { to { transform: rotate(360deg); } }
@keyframes boss-scan-pass { from { transform: translateY(-20px); } to { transform: translateY(205px); } }
@keyframes boss-ember-rise {
  0% { opacity: 0; transform: translate(0, 8px); }
  20% { opacity: .7; }
  100% { opacity: 0; transform: translate(7px, -65px); }
}
.boss-terminal-windows { opacity: .65; }
.boss-code-text { font: 4.2px monospace; letter-spacing: .15px; }
.boss-code-scroll { animation: boss-code-scroll 12s linear infinite; }
.boss-terminal-cursor { animation: boss-cursor-blink 1.2s steps(1) infinite; }
.boss-terminal-leds { animation: boss-reactor-breathe 1.8s ease-in-out infinite alternate; }
.boss-terminal-bar {
  transform-box: fill-box;
  transform-origin: bottom;
  animation: boss-bar-activity 2s ease-in-out var(--bar-delay) infinite alternate;
}
.boss-signal-trace { stroke-dasharray: 70 30; animation: boss-signal-flow 3s linear infinite; }
@keyframes boss-code-scroll { to { transform: translateY(-80px); } }
@keyframes boss-cursor-blink { 50% { opacity: 0; } }
@keyframes boss-bar-activity { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
@keyframes boss-signal-flow { to { stroke-dashoffset: -100; } }
/* One eight-second cycle keeps the terminal failure aligned with the brows. */
.boss-terminal-windows { animation: boss-terminal-rage 8s linear 8s infinite; }
.boss-terminal-errors { opacity: 0; animation: boss-error-rage 8s linear 8s infinite; }
@keyframes boss-terminal-rage {
  0%, 37.5%, 100% { transform: translate(0); opacity: .65; filter: none; }
  4.375%, 10%, 16%, 22%, 28%, 33.125% { transform: translate(-1.7px, .8px); opacity: 1; filter: saturate(2) brightness(1.4); }
  7%, 13%, 19%, 25%, 31% { transform: translate(1.7px, -.8px); opacity: .8; filter: saturate(2) brightness(1.2); }
}
@keyframes boss-error-rage {
  0%, 37.5%, 100% { opacity: 0; transform: translate(0); }
  4.375%, 10%, 16%, 22%, 28%, 33.125% { opacity: .95; transform: translate(1px, -.6px); }
  7%, 13%, 19%, 25%, 31% { opacity: .65; transform: translate(-1px, .6px); }
}
@media (prefers-reduced-motion: reduce) {
  .boss-card-scene *, .boss-shell { animation: none; }
  .boss-scan { opacity: 0; }
}
html.account-reduced-motion .boss-card-scene *,
html.account-reduced-motion .boss-art,
html.account-reduced-motion .boss-art *,
html.account-reduced-motion .boss-art span::before,
html.account-reduced-motion .boss-art span::after { animation: none; }
html.account-reduced-motion .boss-scan { opacity: 0; }

/* Pumpkin King: a haunted throne and an illuminated royal diamond. */
.game-card[data-game="pumpkin"] { overflow: hidden; isolation: isolate; }
.pumpkin-card-scene { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.pumpkin-card-scene svg { display: block; width: 100%; height: 100%; }
.game-card[data-game="pumpkin"] .card-top,
.game-card[data-game="pumpkin"] .card-title,
.game-card[data-game="pumpkin"] .card-description { text-shadow: 0 1px 4px #20131b, 0 0 6px #20131b; }
.pumpkin-art { text-shadow: none; transform: none; animation: pumpkin-royal-float 5s ease-in-out infinite; }
.pumpkin-art svg { width: 100px; height: 97px; overflow: visible; filter: drop-shadow(0 3px 3px #130d2170); }
.pumpkin-metal-stop { animation: pumpkin-metal-flow 5.2s ease-in-out var(--metal-phase) infinite; }
.pumpkin-carving { filter: drop-shadow(0 0 2px #ffaf4b90); animation: pumpkin-firelight 3.2s ease-in-out infinite alternate; }
.pumpkin-crown-gem { animation: pumpkin-firelight 2.7s ease-in-out -1s infinite alternate; }
.pumpkin-candlelight { animation: pumpkin-firelight 2.4s ease-in-out infinite alternate; }
.pumpkin-royal-runes { animation: pumpkin-firelight 5s ease-in-out -2s infinite alternate; }
.pumpkin-throne-aura { animation: pumpkin-firelight 4.6s ease-in-out infinite alternate; }
.pumpkin-sigil { transform-origin: 50px 49px; animation: pumpkin-sigil-turn 40s linear infinite; }
.pumpkin-mist { animation: pumpkin-mist-drift 8s ease-in-out infinite alternate; }
.pumpkin-ember { animation: pumpkin-ember-rise 5.5s ease-out var(--ember-phase) infinite; }
@keyframes pumpkin-royal-float {
  0%, 100% { transform: translateY(1px) rotate(-3deg); }
  50% { transform: translateY(-3px) rotate(3deg); }
}
@keyframes pumpkin-metal-flow {
  0%, 100% { stop-color: #ffdfa1; }
  30% { stop-color: #eea454; }
  60% { stop-color: #b8663b; }
  80% { stop-color: #f4bb74; }
}
@keyframes pumpkin-firelight { from { opacity: .6; } to { opacity: 1; } }
@keyframes pumpkin-sigil-turn { to { transform: rotate(360deg); } }
@keyframes pumpkin-mist-drift { from { transform: translate(-12px, 0); opacity: .4; } to { transform: translate(12px, -4px); opacity: .8; } }
@keyframes pumpkin-ember-rise {
  0% { opacity: 0; transform: translate(0, 5px); }
  20% { opacity: .8; }
  100% { opacity: 0; transform: translate(9px, -66px); }
}
.pumpkin-arches { animation: pumpkin-arch-glow 6s ease-in-out infinite alternate; }
.pumpkin-tracery { animation: pumpkin-arch-glow 7.5s ease-in-out -3s infinite alternate; }
.pumpkin-bat-flight { animation: pumpkin-bat-flight 9s ease-in-out infinite alternate; }
.pumpkin-bat-distant { animation-duration: 12s; animation-delay: -4s; animation-direction: alternate-reverse; }
.pumpkin-bat {
  transform-box: fill-box;
  transform-origin: center;
  animation: pumpkin-bat-flutter .65s ease-in-out infinite alternate;
}
.pumpkin-bat-distant .pumpkin-bat { animation-duration: .8s; animation-delay: -.3s; }
.pumpkin-flame {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: pumpkin-flame-dance 1.3s ease-in-out infinite;
}
.pumpkin-flame-second { animation-duration: 1.7s; animation-delay: -.8s; }
.pumpkin-royal-runes text { animation: pumpkin-rune-glow 4s ease-in-out infinite alternate; }
.pumpkin-royal-runes text:nth-child(2) { animation-delay: -1.3s; }
.pumpkin-royal-runes text:nth-child(3) { animation-delay: -2.6s; }
@keyframes pumpkin-arch-glow {
  from { opacity: .18; stroke: #985039; }
  to { opacity: .42; stroke: #eab477; }
}
@keyframes pumpkin-bat-flight {
  0% { transform: translate(-10px, 8px); }
  50% { transform: translate(5px, -5px); }
  100% { transform: translate(17px, 2px); }
}
@keyframes pumpkin-bat-flutter { from { transform: scaleY(.55) rotate(-5deg); } to { transform: scaleY(1.12) rotate(5deg); } }
@keyframes pumpkin-flame-dance {
  0%, 100% { transform: scale(1, 1) skewX(-4deg); opacity: .85; }
  35% { transform: scale(.8, 1.15) skewX(7deg); opacity: 1; }
  70% { transform: scale(1.1, .9) skewX(-7deg); opacity: .7; }
}
@keyframes pumpkin-rune-glow { from { fill: #ac7047; opacity: .45; } to { fill: #ffda8c; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .pumpkin-card-scene *, .pumpkin-art, .pumpkin-art * { animation: none !important; }
}
html.account-reduced-motion .pumpkin-card-scene *,
html.account-reduced-motion .pumpkin-art,
html.account-reduced-motion .pumpkin-art * { animation: none; }

/* Freshly randomized Chaos tiles orbit the difficulty card's perimeter. */
.difficulty-choice.dodge-border-card {
  position: relative;
  isolation: isolate;
  padding: 23px;

}
.dodge-border-card .chaos-border-flight {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 8px;
}
.chaos-border-block {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--block-size);
  height: var(--block-size);
  object-fit: contain;
  transform: translate(-50%, -50%) rotate(var(--block-turn));
  animation: chaos-border-orbit var(--flight-time) linear var(--flight-delay) infinite;
}
@keyframes chaos-border-orbit {
  0%, 100% { transform: translate(-50%, -50%) rotate(var(--block-turn)); }
  25% { transform: translate(calc(var(--flight-width) - 50%), -50%) rotate(var(--block-turn)); }
  50% { transform: translate(calc(var(--flight-width) - 50%), calc(var(--flight-height) - 50%)) rotate(var(--block-turn)); }
  75% { transform: translate(-50%, calc(var(--flight-height) - 50%)) rotate(var(--block-turn)); }
}
@media (prefers-reduced-motion: reduce) {
  .chaos-border-block { animation: none; left: var(--flight-x); top: var(--flight-y); }
}
html.account-reduced-motion .chaos-border-block { animation: none; left: var(--flight-x); top: var(--flight-y); }
.chaos-border-flight:not(.border-in-view) .chaos-border-block,
html.border-page-hidden .chaos-border-block { animation-play-state: paused; }

@property --chaos-border-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.difficulty-choice.chaos-difficulty::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 2px;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(from var(--chaos-border-angle), var(--chaos-rainbow));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: chaos-rainbow-flow 8s linear infinite;
}
@keyframes chaos-rainbow-flow { to { --chaos-border-angle: 360deg; } }
.chaos-difficulty:not(:has(.border-in-view))::before,
html.border-page-hidden .chaos-difficulty::before { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .difficulty-choice.chaos-difficulty::before { animation: none; }
}
html.account-reduced-motion .chaos-difficulty::before { animation: none; }

.dodge-border-card > strong { color: var(--difficulty-title-color, var(--accent)); }
.difficulty-choice.chaos-difficulty > strong {
  color: transparent;
  background: linear-gradient(110deg, var(--chaos-rainbow));
  background-size: 300% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  animation: chaos-title-rainbow 5s ease-in-out infinite alternate;
}
@keyframes chaos-title-rainbow {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}
.chaos-difficulty:not(:has(.border-in-view)) > strong,
html.border-page-hidden .chaos-difficulty > strong { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .difficulty-choice.chaos-difficulty > strong { animation: none; }
}
html.account-reduced-motion .chaos-difficulty > strong { animation: none; }

/* Distinct atmospheric scenes share a small set of inexpensive motions. */
.game-card:has(.arcade-card-scene) { isolation: isolate; overflow: hidden; }
.arcade-card-scene { position: absolute; inset: 0; z-index: -1; pointer-events: none; color: var(--scene-color); }
.arcade-card-scene svg { width: 100%; height: 100%; display: block; }
.game-card:has(.arcade-card-scene) .card-top,
.game-card:has(.arcade-card-scene) .card-title,
.game-card:has(.arcade-card-scene) .card-description { text-shadow: 0 1px 3px #11171e, 0 0 5px #11171e; }
.scene-drift { animation: arcade-scene-drift 9s ease-in-out infinite alternate; }
.scene-rise { animation: arcade-scene-rise 8s ease-in-out infinite; }
.scene-breathe { animation: arcade-scene-breathe 5s ease-in-out infinite alternate; }
.scene-rotate { transform-origin: 120px 80px; animation: arcade-scene-rotate 45s linear infinite; }
.scene-signal { stroke-dasharray: 12 88; animation: arcade-scene-signal 6s linear infinite; }
.scene-equalizer { transform-box: fill-box; transform-origin: bottom; animation: arcade-scene-equalizer 2.6s ease-in-out var(--scene-delay) infinite alternate; }
.scene-scan { animation: arcade-scene-scan 7s ease-in-out infinite alternate; }
.jukebox-metal-stop { animation: jukebox-metal-glint 4s ease-in-out infinite alternate; }
@keyframes arcade-scene-drift { from { transform: translate(-5px, 2px); } to { transform: translate(5px, -3px); } }
@keyframes arcade-scene-rise { 0% { transform: translateY(12px); opacity: 0; } 25%, 75% { opacity: .5; } 100% { transform: translateY(-20px); opacity: 0; } }
@keyframes arcade-scene-breathe { from { opacity: .2; } to { opacity: .55; } }
@keyframes arcade-scene-rotate { to { transform: rotate(360deg); } }
@keyframes arcade-scene-signal { to { stroke-dashoffset: -100; } }
@keyframes arcade-scene-equalizer { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
@keyframes arcade-scene-scan { from { transform: translateY(0); opacity: .2; } to { transform: translateY(94px); opacity: .5; } }
@keyframes jukebox-metal-glint { from { stop-color: #ffdff7; } to { stop-color: #fff2fc; } }
.game-card.card-effects-paused *, .game-card.card-effects-paused *::before,
.game-card.card-effects-paused *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .arcade-card-scene *, .jukebox-metal-stop { animation: none !important; }
}
html.account-reduced-motion .arcade-card-scene *,
html.account-reduced-motion .jukebox-metal-stop { animation: none; }

/* All seven King's Wrath attacks, arranged around the crown. */
.wrath-memory-eye { animation: wrath-memory-colors 3.9s ease-in-out var(--attack-delay) infinite; }
.wrath-bone-slide { animation: wrath-bone-slide 4s ease-in-out infinite alternate; }
.wrath-ring-spin { animation: wrath-ring-spin 10s linear infinite; }
.wrath-finger-reach { animation: wrath-finger-reach 3.6s ease-in-out infinite; }
.wrath-finger-right { animation-name: wrath-finger-reach-right; animation-delay: -1.8s; }
.wrath-projectile-orbit { animation: wrath-ring-spin 7s linear infinite reverse; }
.wrath-slam-hand { animation: wrath-hand-slam 4.5s ease-in-out infinite; }
.wrath-slam-impact { animation: wrath-impact 4.5s ease-in-out infinite; }
.wrath-mouth-fire { transform-origin: 116px 142px; animation: wrath-fire-burst 4.5s ease-in-out infinite; }
.wrath-quadrant-haunt { animation: wrath-quadrant-cycle 8s steps(1) infinite; }
@keyframes wrath-memory-colors {
  0%, 100% { fill: #245d94; stroke: #78ccff; opacity: .35; }
  20% { fill: #6ecbff; stroke: #d4f0ff; opacity: .95; }
  45% { fill: #9d5b2c; stroke: #ffbc73; opacity: .4; }
  65% { fill: #ffac5a; stroke: #ffe4b6; opacity: .95; }
}
@keyframes wrath-bone-slide { from { transform: translateY(-7px); } to { transform: translateY(5px); } }
@keyframes wrath-ring-spin { to { transform: rotate(360deg); } }
@keyframes wrath-finger-reach { 0%, 100% { transform: translateX(-8px); opacity: .4; } 60%, 75% { transform: translateX(12px); opacity: .9; } }
@keyframes wrath-finger-reach-right { 0%, 100% { transform: translateX(8px); opacity: .4; } 60%, 75% { transform: translateX(-12px); opacity: .9; } }
@keyframes wrath-hand-slam { 0%, 100% { transform: translateY(0); } 30%, 45% { transform: translateY(-9px); } 55%, 65% { transform: translateY(4px); } }
@keyframes wrath-impact { 0%, 45%, 80%, 100% { opacity: 0; } 55%, 65% { opacity: .9; } }
@keyframes wrath-fire-burst { 0%, 60%, 100% { opacity: .15; transform: scale(.65); } 75%, 85% { opacity: .9; transform: scale(1.15); } }
@keyframes wrath-quadrant-cycle { 0% { transform: translate(0, 0); } 25% { transform: translate(18px, 0); } 50% { transform: translate(18px, 13px); } 75% { transform: translate(0, 13px); } }
@media (prefers-reduced-motion: reduce) {
  .arcade-card-scene [data-wrath-attack] * { animation: none !important; }
}
html.account-reduced-motion .arcade-card-scene [data-wrath-attack] * { animation: none; }

/* Quiet far-field layers deepen Key Rush without competing with the keys. */
.key-distant-lights { animation: key-distance-glow 7s ease-in-out infinite alternate; }
.key-distant-packets { animation: key-distance-drift 12s linear infinite; }
@keyframes key-distance-glow { from { opacity: .15; } to { opacity: .4; } }
@keyframes key-distance-drift {
  0% { transform: translate(-7px, 3px); opacity: 0; }
  25%, 75% { opacity: .3; }
  100% { transform: translate(7px, -3px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .key-distant-lights, .key-distant-packets { animation: none !important; }
}
html.account-reduced-motion .key-distant-lights,
html.account-reduced-motion .key-distant-packets { animation: none; }

.ocean-rays { animation: ocean-ray-sway 12s ease-in-out infinite alternate; transform-origin: center top; }
.ocean-kelp { animation: ocean-kelp-sway 7s ease-in-out infinite alternate; transform-origin: 120px 170px; }
.ocean-swimmer { animation: ocean-swim-right var(--swim-duration) linear var(--swim-delay) infinite; }
.ocean-swimmer-left { animation-name: ocean-swim-left; }
.ocean-swim-bob { translate: 0 0; animation: ocean-swim-bob 3s ease-in-out infinite alternate; }
@keyframes ocean-swim-right {
  from { transform: translate(-70px, var(--swim-depth)); }
  to { transform: translate(310px, var(--swim-depth)); }
}
@keyframes ocean-swim-left {
  from { transform: translate(310px, var(--swim-depth)); }
  to { transform: translate(-70px, var(--swim-depth)); }
}
@keyframes ocean-swim-bob { to { translate: 0 -3px; } }
@keyframes ocean-ray-sway { from { transform: skewX(-4deg); opacity: .5; } to { transform: skewX(4deg); opacity: 1; } }
@keyframes ocean-kelp-sway { from { transform: skewX(-2deg); } to { transform: skewX(2deg); } }
@media (prefers-reduced-motion: reduce) {
  .ocean-rays, .ocean-kelp, .ocean-swimmer, .ocean-swim-bob { animation: none !important; }
  .ocean-swimmer { transform: translate(var(--ocean-rest-x), var(--swim-depth)); }
}
html.account-reduced-motion .ocean-rays,
html.account-reduced-motion .ocean-kelp,
html.account-reduced-motion .ocean-swimmer,
html.account-reduced-motion .ocean-swim-bob { animation: none; }
html.account-reduced-motion .ocean-swimmer { transform: translate(var(--ocean-rest-x), var(--swim-depth)); }

/* Layered containment machine: a dark throat behind a luminous front disk. */
.singularity-art .core-machine {
  width: 140px; height: 100px; overflow: visible;
  filter: drop-shadow(0 2px 3px #050b2070);
  animation: core-machine-hover 7s ease-in-out infinite;
}
.singularity-art .core-machine circle { animation: none; }
.core-containment-rotor { transform-origin: 70px 50px; animation: core-machine-rotate 26s linear infinite; }
.core-lensing-arcs { transform-origin: 70px 50px; animation: core-machine-rotate 12s linear infinite reverse; }
.core-accretion-stream { animation: core-accretion-flow 5s linear infinite; }
.core-accretion-front { animation-duration: 3.8s; }
.core-corona-glow { animation: core-corona-breathe 4.8s ease-in-out infinite alternate !important; }
.core-polar-jets { animation: core-corona-breathe 6s ease-in-out -2s infinite alternate; }
.core-status-lights { animation: core-status-breathe 3.5s ease-in-out infinite alternate; }
.core-new-infall { animation: core-new-infall 4.23s linear var(--infall-delay) infinite; }
@keyframes core-machine-hover { 0%, 100% { transform: translateY(1px) rotate(-2deg); } 50% { transform: translateY(-2px) rotate(2deg); } }
@keyframes core-machine-rotate { to { transform: rotate(360deg); } }
@keyframes core-accretion-flow { to { stroke-dashoffset: -250; } }
@keyframes core-corona-breathe { from { opacity: .45; } to { opacity: .9; } }
@keyframes core-status-breathe { from { opacity: .35; } to { opacity: .95; } }
@keyframes core-new-infall {
  0% { transform: rotate(0deg) translateY(-25px) scale(.5); opacity: 0; }
  15% { opacity: .9; }
  65% { opacity: .8; }
  100% { transform: rotate(240deg) translateY(-2px) scale(.05); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .singularity-art .core-machine, .singularity-art .core-machine * { animation: none !important; }
  .core-new-infall { transform: translateY(-23px); opacity: .55; }
}
html.account-reduced-motion .singularity-art .core-machine,
html.account-reduced-motion .singularity-art .core-machine * { animation: none !important; }
html.account-reduced-motion .core-new-infall { transform: translateY(-23px); opacity: .55; }

/* Deep-space layers behind the Core; slow group motion limits rendering work. */
.cosmos-nebula-layer { animation: cosmos-cloud-drift 8s ease-in-out infinite alternate; transform-origin: 120px 90px; }
.cosmos-nebula-far { animation: cosmos-cloud-drift 11s ease-in-out -4s infinite alternate-reverse; transform-origin: 120px 90px; }
.cosmos-stars { animation: cosmos-starlight 4s ease-in-out var(--cosmos-phase) infinite alternate, cosmos-star-drift 13s ease-in-out var(--cosmos-phase) infinite alternate; }
.cosmos-galaxy-spin { animation: cosmos-galaxy-turn var(--galaxy-speed) linear var(--galaxy-phase) infinite; }
.cosmos-comet { animation: cosmos-comet-pass 8s linear infinite; }
@keyframes cosmos-cloud-drift {
  from { transform: translate(-9px, 5px) scale(.97) rotate(-2deg); opacity: .6; }
  to { transform: translate(9px, -5px) scale(1.07) rotate(2deg); opacity: 1; }
}
@keyframes cosmos-starlight { from { opacity: .35; } to { opacity: .85; } }
@keyframes cosmos-galaxy-turn { to { transform: rotate(360deg); } }
@keyframes cosmos-comet-pass {
  0% { transform: translate(-35px, -12px); opacity: 0; }
  15%, 70% { opacity: .65; }
  100% { transform: translate(70px, 25px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .core-cosmos * { animation: none !important; }
}
html.account-reduced-motion .core-cosmos * { animation: none; }

/* Additional parallax preserves each galaxy's original SVG placement. */
.cosmos-galaxy { animation: cosmos-galaxy-drift var(--galaxy-drift) ease-in-out var(--drift-phase) infinite alternate; }
.cosmos-planet-drift { animation: cosmos-planet-drift 10s ease-in-out infinite; }
.cosmos-moon-drift { animation: cosmos-planet-drift 13s ease-in-out -5s infinite reverse; }
.cosmos-meteor { animation: cosmos-meteor-pass 9s linear var(--meteor-delay) infinite; }
@keyframes cosmos-galaxy-drift {
  from { translate: -5px 3px; }
  to { translate: 5px -3px; }
}
@keyframes cosmos-star-drift {
  from { transform: translate(-7px, -3px); }
  to { transform: translate(7px, 3px); }
}
@keyframes cosmos-planet-drift {
  0%, 100% { translate: -4px 0; }
  25% { translate: 0 -4px; }
  50% { translate: 4px 0; }
  75% { translate: 0 4px; }
}
@keyframes cosmos-meteor-pass {
  0% { transform: translate(-35px, var(--meteor-y)); opacity: 0; }
  8%, 30% { opacity: .7; }
  42% { transform: translate(275px, calc(var(--meteor-y) + 65px)); opacity: 0; }
  100% { transform: translate(275px, calc(var(--meteor-y) + 65px)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .core-cosmos * { animation: none !important; }
  .cosmos-meteor { opacity: 0; }
}
html.account-reduced-motion .core-cosmos * { animation: none !important; }
html.account-reduced-motion .cosmos-meteor { opacity: 0; }

/* Polished chrome note; its parent retains the existing music-driven pulse. */
.jukebox-art .jukebox-note-deluxe { width: 76px; height: 76px; filter: drop-shadow(0 3px 2px #23102970); }
.jukebox-note-sheen { animation: jukebox-note-polish 4.6s ease-in-out infinite; }
.jukebox-note-sparks { animation: jukebox-sparks-glow 3s ease-in-out infinite alternate; }
.jukebox-record-grooves { transform-origin: 120px 77px; animation: jukebox-record-turn 24s linear infinite; }
.jukebox-stage-beams { transform-origin: 120px 0; animation: jukebox-beam-sway 9s ease-in-out infinite alternate; }
.jukebox-spectrum-bar { transform-box: fill-box; transform-origin: bottom; animation: jukebox-spectrum var(--spectrum-speed) ease-in-out var(--spectrum-phase) infinite alternate; }
.jukebox-cone-pulse { transform-box: fill-box; transform-origin: center; animation: jukebox-cone 1.7s ease-in-out infinite; }
.jukebox-sound-ripples { animation: jukebox-ripples 3s ease-in-out infinite; }
.jukebox-floating-notes { animation: jukebox-notes-drift 7s ease-in-out infinite alternate; }
@keyframes jukebox-note-polish { 0%, 15% { transform: translateX(-10px); } 80%, 100% { transform: translateX(65px); } }
@keyframes jukebox-sparks-glow { from { opacity: .25; } to { opacity: .9; } }
@keyframes jukebox-record-turn { to { transform: rotate(360deg); } }
@keyframes jukebox-beam-sway { from { transform: skewX(-7deg); opacity: .5; } to { transform: skewX(7deg); opacity: 1; } }
@keyframes jukebox-spectrum { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
@keyframes jukebox-cone { 0%, 100% { transform: scale(.9); } 30% { transform: scale(1.08); } 65% { transform: scale(.96); } }
@keyframes jukebox-ripples { 0%, 100% { opacity: .15; } 50% { opacity: .5; } }
@keyframes jukebox-notes-drift { from { transform: translateY(3px); } to { transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) {
  .jukebox-studio-scene *, .jukebox-note-deluxe * { animation: none !important; }
}
html.account-reduced-motion .jukebox-studio-scene *,
html.account-reduced-motion .jukebox-note-deluxe * { animation: none !important; }

/* Guide chances use the same tenth-percent tickets as gameplay. */
.block-guide-card { min-width: 0; }
.block-exact-chance { font-variant-numeric: tabular-nums; }

/* Keep Thunder guide text readable against the dark card. */
.block-guide-card[data-block="thunder"] .block-rarity { color: #ffe65b; }

/* Build-generated language shares, with an accessible text legend. */
.language-breakdown { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.language-breakdown h3 { margin: 0 0 20px; font-size: 15px; }
.language-pie { width: min(160px, 75%); aspect-ratio: 1; margin: 0 auto 22px; border-radius: 50%;
  box-shadow: 0 0 0 5px #ffffff08, 0 12px 28px #0004; }
.language-legend { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.language-legend li { display: grid; grid-template-columns: 10px 1fr auto; gap: 10px; align-items: center; font-size: 12px; }
.language-swatch { width: 9px; height: 9px; border-radius: 3px; background: var(--language-color); }
.language-legend strong { font-variant-numeric: tabular-nums; }
.language-breakdown p { color: var(--muted); font-size: 11px; line-height: 1.6; margin: 15px 0 0; }

/* Turtle Dodge: brighter turtle, contrasting blocks and opposing motion. */
.dodge-icon-upgraded .prophecy-turtle { filter: drop-shadow(0 0 3px #91dfed); }
.dodge-icon-hazards { filter: drop-shadow(0 1px 2px #020817); }
.dodge-icon-drop { animation: dodge-icon-drop 2.8s ease-in-out infinite alternate; }
.dodge-icon-drop-late { animation-delay: -1.4s; }
.dodge-icon-rise { animation: dodge-icon-drop 3.2s ease-in-out infinite alternate-reverse; }
.dodge-icon-wake { animation: dodge-icon-wake 1.6s ease-in-out infinite alternate; }
@keyframes dodge-icon-drop { from { transform: translateY(-3px); } to { transform: translateY(9px); } }
@keyframes dodge-icon-wake { to { opacity: .25; transform: translateX(-4px); } }
@media (prefers-reduced-motion: reduce) {
  .dodge-icon-drop, .dodge-icon-rise, .dodge-icon-wake { animation: none; }
}
html.account-reduced-motion .dodge-icon-drop,
html.account-reduced-motion .dodge-icon-rise,
html.account-reduced-motion .dodge-icon-wake { animation: none; }

/* Custom Cubie's illuminated wardrobe atelier; the selected Cubie is untouched. */
.cubie-atelier .atelier-aura { transform-origin: 150px 88px; animation: atelier-aura 7s ease-in-out infinite alternate; }
.cubie-atelier .atelier-beams { transform-origin: 150px 0; animation: atelier-beams 9s ease-in-out infinite alternate; }
.cubie-atelier .atelier-halo { transform-origin: 150px 87px; animation: atelier-halo 38s linear infinite; }
.cubie-atelier .atelier-orbit { transform-origin: 150px 88px; animation: atelier-orbit 12s ease-in-out infinite alternate; }
.cubie-atelier .atelier-rack-lights { animation: atelier-lights 4s ease-in-out infinite alternate; }
.cubie-atelier .atelier-platform-light { animation: atelier-platform 12s linear infinite; }
.cubie-atelier .atelier-swatch { animation: atelier-swatch 5s ease-in-out infinite alternate; }
.cubie-atelier .atelier-swatch-two { animation-duration: 6.5s; animation-delay: -3s; }
.cubie-atelier .atelier-swatch-three { animation-duration: 7s; animation-delay: -5s; }
.cubie-atelier .atelier-stardust { animation: atelier-dust 10s ease-in-out infinite alternate; }
.cubie-atelier .atelier-sparkles { animation: atelier-lights 3.6s ease-in-out -1.8s infinite alternate; }
@keyframes atelier-aura { from { opacity: .6; transform: scale(.93); } to { opacity: 1; transform: scale(1.08); } }
@keyframes atelier-beams { from { opacity: .45; transform: skewX(-8deg); } to { opacity: .9; transform: skewX(8deg); } }
@keyframes atelier-halo { to { transform: rotate(360deg); } }
@keyframes atelier-orbit { from { transform: rotate(-9deg) scale(.96); } to { transform: rotate(9deg) scale(1.04); } }
@keyframes atelier-lights { from { opacity: .25; } to { opacity: .9; } }
@keyframes atelier-platform { to { stroke-dashoffset: -182; } }
@keyframes atelier-swatch { from { transform: translateY(-4px) rotate(-2deg); } to { transform: translateY(5px) rotate(2deg); } }
@keyframes atelier-dust { from { opacity: .35; transform: translate(-2px, 7px); } to { opacity: .85; transform: translate(3px, -7px); } }

/* Thirty seconds of sand, one second to turn; both orientations share the face. */
.hourglass-turn { transform-origin: 72.5px 72.5px; animation: hourglass-turn 62s linear infinite; }
.hourglass-sand-top { animation: hourglass-top 62s linear infinite; }
.hourglass-sand-bottom { transform: translateY(34px); animation: hourglass-bottom 62s linear infinite; }
.hourglass-stream { animation: hourglass-stream 62s linear infinite, hourglass-grains .3s linear infinite; }
@keyframes hourglass-turn {
  0%, 48.387096% { transform: rotate(0deg); }
  50%, 98.387096% { transform: rotate(180deg); }
  100% { transform: rotate(360deg); }
}
@keyframes hourglass-top {
  0%, 100% { transform: translateY(0); }
  48.387096%, 50% { transform: translateY(34px); }
  98.387096% { transform: translateY(0); }
}
@keyframes hourglass-bottom {
  0%, 100% { transform: translateY(34px); }
  48.387096%, 50% { transform: translateY(0); }
  98.387096% { transform: translateY(34px); }
}
@keyframes hourglass-stream {
  0%, 48% { opacity: 1; transform: rotate(0deg); }
  48.387096%, 49.99% { opacity: 0; transform: rotate(0deg); }
  50%, 98% { opacity: 1; transform: rotate(180deg); }
  98.387096%, 100% { opacity: 0; transform: rotate(180deg); }
}
.hourglass-stream { transform-origin: 60px 68px; }
@keyframes hourglass-grains { to { stroke-dashoffset: -3; } }
.camera-flash { opacity: 0; animation: camera-flash 8s linear infinite; }
.camera-photo { transform: translateY(-49px); opacity: 0; animation: camera-print 8s linear infinite; }
@keyframes camera-flash {
  0%, 1% { opacity: 1; }
  4%, 100% { opacity: 0; }
}
@keyframes camera-print {
  0% { transform: translateY(-49px); opacity: 0; }
  3% { transform: translateY(-49px); opacity: 1; }
  35%, 75% { transform: translateY(0); opacity: 1; }
  90% { transform: translateY(8px); opacity: 0; }
  100% { transform: translateY(-49px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hourglass-turn, .hourglass-sand-top, .hourglass-sand-bottom, .hourglass-stream,
  .camera-flash, .camera-photo { animation: none; }
}
html.account-reduced-motion :is(.hourglass-turn, .hourglass-sand-top, .hourglass-sand-bottom, .hourglass-stream, .camera-flash, .camera-photo) { animation: none; }

/* Cubie Shop's blue-and-gold vault; all motion is confined to the background. */
.shop-vault .vault-bloom { transform-origin: 150px 85px; animation: shop-vault-bloom 6s ease-in-out infinite alternate; }
.shop-vault .vault-wheel { transform-origin: 150px 85px; animation: shop-vault-wheel 45s linear infinite; }
.shop-vault .vault-inner-ring { transform-origin: 150px 85px; animation: shop-vault-wheel 30s linear infinite reverse; }
.shop-vault .vault-ray { transform-origin: 150px 140px; animation: shop-vault-ray 8s ease-in-out infinite alternate; }
.shop-vault .vault-display-glow { animation: shop-vault-glow 4s ease-in-out infinite alternate; }
.shop-vault .vault-plinth-light { animation: shop-vault-glow 3s ease-in-out -1s infinite alternate; }
.shop-vault .vault-circuits { animation: shop-vault-circuit 6s linear infinite; }
.shop-vault .vault-ticket { animation: shop-vault-ticket 5s ease-in-out infinite alternate; }
.shop-vault .vault-ticket-two { animation-duration: 7s; animation-delay: -3s; }
.shop-vault .vault-motes { animation: shop-vault-motes 11s ease-in-out infinite alternate; }
.shop-vault .vault-glints { animation: shop-vault-glow 3.5s ease-in-out -2s infinite alternate; }
@keyframes shop-vault-bloom { from { opacity: .6; transform: scale(.94); } to { opacity: 1; transform: scale(1.07); } }
@keyframes shop-vault-wheel { to { transform: rotate(360deg); } }
@keyframes shop-vault-ray { from { opacity: .35; transform: skewX(-9deg); } to { opacity: .8; transform: skewX(9deg); } }
@keyframes shop-vault-glow { from { opacity: .25; } to { opacity: .85; } }
@keyframes shop-vault-circuit { to { stroke-dashoffset: -194; } }
@keyframes shop-vault-ticket { from { transform: translateY(-4px); } to { transform: translateY(5px); } }
@keyframes shop-vault-motes { from { opacity: .35; transform: translate(-2px, 6px); } to { opacity: .8; transform: translate(3px, -7px); } }

/* A synchronized 10-second action loop with tightly spaced waves. */
.geo2-story { --geo2-cycle: 10s; }
.geo2-story svg { overflow: visible; }
.geo2-story .geo2-hero { animation: geo2-hero-story var(--geo2-cycle) linear infinite; }
.geo2-story .geo2-shadow { transform-origin: 90px 87px; animation: geo2-shadow-story var(--geo2-cycle) linear infinite; }
.geo2-story .geo2-threat, .geo2-story .geo2-projectile, .geo2-story .geo2-hit,
.geo2-story .geo2-muzzle, .geo2-story .geo2-land { opacity: 0; }
.geo2-story .geo2-runner { animation: geo2-runner-story var(--geo2-cycle) linear infinite; }
.geo2-story .geo2-target { animation: geo2-target-story var(--geo2-cycle) linear infinite; }
.geo2-story .geo2-diver { animation: geo2-diver-story var(--geo2-cycle) linear infinite; }
.geo2-story .geo2-final-target { animation: geo2-final-story var(--geo2-cycle) linear infinite; }
.geo2-story .geo2-bullet-one { animation: geo2-shot-one var(--geo2-cycle) linear infinite; }
.geo2-story .geo2-bullet-two { animation: geo2-shot-two var(--geo2-cycle) linear infinite; }
.geo2-story .geo2-bullet-three { animation: geo2-shot-three var(--geo2-cycle) linear infinite; }
.geo2-story .geo2-hit-one { animation: geo2-hit-one var(--geo2-cycle) ease-out infinite; }
.geo2-story .geo2-hit-two { animation: geo2-hit-two var(--geo2-cycle) ease-out infinite; }
.geo2-story .geo2-muzzle { animation: geo2-muzzle var(--geo2-cycle) steps(1) infinite; }
.geo2-story .geo2-land { animation: geo2-landing var(--geo2-cycle) ease-out infinite; }
.geo2-arena .geo2-radar { transform-origin: 150px 84px; animation: geo2-radar 48s linear infinite; }
.geo2-arena .geo2-distant { animation: geo2-distant 12s ease-in-out infinite alternate; }
.geo2-arena .geo2-horizon { animation: geo2-horizon 7s ease-in-out infinite alternate; }
/* Cubic motion samples preserve continuous velocity instead of restarting easing at each pose. */
@keyframes geo2-hero-story {
 0% { transform: translate(90.000px, 65.000px) rotate(0.000deg); }
 0.5% { transform: translate(89.057px, 65.047px) rotate(-0.094deg); }
 1% { transform: translate(88.103px, 65.178px) rotate(-0.356deg); }
 1.5% { transform: translate(87.151px, 65.379px) rotate(-0.757deg); }
 2% { transform: translate(86.212px, 65.634px) rotate(-1.268deg); }
 2.5% { transform: translate(85.295px, 65.930px) rotate(-1.859deg); }
 3% { transform: translate(84.413px, 66.251px) rotate(-2.502deg); }
 3.5% { transform: translate(83.576px, 66.583px) rotate(-3.167deg); }
 4% { transform: translate(82.796px, 66.912px) rotate(-3.824deg); }
 4.5% { transform: translate(82.082px, 67.222px) rotate(-4.444deg); }
 5% { transform: translate(81.447px, 67.500px) rotate(-4.999deg); }
 5.5% { transform: translate(80.901px, 67.729px) rotate(-5.459deg); }
 6% { transform: translate(80.456px, 67.897px) rotate(-5.794deg); }
 6.5% { transform: translate(80.122px, 67.988px) rotate(-5.976deg); }
 7% { transform: translate(79.895px, 67.886px) rotate(-5.999deg); }
 7.5% { transform: translate(79.691px, 67.013px) rotate(-5.991deg); }
 8% { transform: translate(79.495px, 65.375px) rotate(-5.976deg); }
 8.5% { transform: translate(79.308px, 63.084px) rotate(-5.953deg); }
 9% { transform: translate(79.132px, 60.253px) rotate(-5.923deg); }
 9.5% { transform: translate(78.965px, 56.994px) rotate(-5.885deg); }
 10% { transform: translate(78.810px, 53.419px) rotate(-5.840deg); }
 10.5% { transform: translate(78.666px, 49.640px) rotate(-5.788deg); }
 11% { transform: translate(78.535px, 45.771px) rotate(-5.729deg); }
 11.5% { transform: translate(78.417px, 41.922px) rotate(-5.663deg); }
 12% { transform: translate(78.312px, 38.207px) rotate(-5.590deg); }
 12.5% { transform: translate(78.221px, 34.737px) rotate(-5.510deg); }
 13% { transform: translate(78.145px, 31.626px) rotate(-5.424deg); }
 13.5% { transform: translate(78.084px, 28.985px) rotate(-5.331deg); }
 14% { transform: translate(78.039px, 26.926px) rotate(-5.232deg); }
 14.5% { transform: translate(78.011px, 25.563px) rotate(-5.126deg); }
 15% { transform: translate(78.000px, 25.007px) rotate(-5.014deg); }
 15.5% { transform: translate(78.202px, 25.012px) rotate(-4.789deg); }
 16% { transform: translate(78.871px, 25.054px) rotate(-4.310deg); }
 16.5% { transform: translate(79.918px, 25.126px) rotate(-3.628deg); }
 17% { transform: translate(81.250px, 25.227px) rotate(-2.796deg); }
 17.5% { transform: translate(82.775px, 25.357px) rotate(-1.865deg); }
 18% { transform: translate(84.398px, 25.514px) rotate(-0.889deg); }
 18.5% { transform: translate(86.027px, 25.698px) rotate(0.081deg); }
 19% { transform: translate(87.569px, 25.909px) rotate(0.992deg); }
 19.5% { transform: translate(88.930px, 26.145px) rotate(1.792deg); }
 20% { transform: translate(90.018px, 26.406px) rotate(2.428deg); }
 20.5% { transform: translate(90.739px, 26.691px) rotate(2.848deg); }
 21% { transform: translate(91.000px, 27.000px) rotate(3.000deg); }
 21.5% { transform: translate(90.980px, 28.052px) rotate(2.940deg); }
 22% { transform: translate(90.924px, 30.389px) rotate(2.773deg); }
 22.5% { transform: translate(90.841px, 33.746px) rotate(2.522deg); }
 23% { transform: translate(90.736px, 37.856px) rotate(2.208deg); }
 23.5% { transform: translate(90.617px, 42.455px) rotate(1.852deg); }
 24% { transform: translate(90.492px, 47.276px) rotate(1.477deg); }
 24.5% { transform: translate(90.367px, 52.054px) rotate(1.102deg); }
 25% { transform: translate(90.250px, 56.522px) rotate(0.750deg); }
 25.5% { transform: translate(90.148px, 60.415px) rotate(0.443deg); }
 26% { transform: translate(90.067px, 63.468px) rotate(0.201deg); }
 26.5% { transform: translate(90.016px, 65.414px) rotate(0.047deg); }
 27% { transform: translate(90.000px, 65.990px) rotate(0.000deg); }
 27.5% { transform: translate(90.000px, 65.265px) rotate(0.000deg); }
 28% { transform: translate(90.000px, 63.650px) rotate(0.000deg); }
 28.5% { transform: translate(90.000px, 61.509px) rotate(0.000deg); }
 29% { transform: translate(90.000px, 59.209px) rotate(0.000deg); }
 29.5% { transform: translate(90.000px, 57.114px) rotate(0.000deg); }
 30% { transform: translate(90.000px, 55.589px) rotate(0.000deg); }
 30.5% { transform: translate(90.000px, 55.000px) rotate(0.000deg); }
 31% { transform: translate(90.024px, 55.000px) rotate(-0.008deg); }
 31.5% { transform: translate(90.093px, 55.000px) rotate(-0.031deg); }
 32% { transform: translate(90.201px, 55.000px) rotate(-0.067deg); }
 32.5% { transform: translate(90.343px, 55.000px) rotate(-0.114deg); }
 33% { transform: translate(90.514px, 55.000px) rotate(-0.171deg); }
 33.5% { transform: translate(90.709px, 55.000px) rotate(-0.236deg); }
 34% { transform: translate(90.922px, 55.000px) rotate(-0.307deg); }
 34.5% { transform: translate(91.148px, 55.000px) rotate(-0.383deg); }
 35% { transform: translate(91.382px, 55.000px) rotate(-0.461deg); }
 35.5% { transform: translate(91.618px, 55.000px) rotate(-0.539deg); }
 36% { transform: translate(91.852px, 55.000px) rotate(-0.617deg); }
 36.5% { transform: translate(92.078px, 55.000px) rotate(-0.693deg); }
 37% { transform: translate(92.291px, 55.000px) rotate(-0.764deg); }
 37.5% { transform: translate(92.486px, 55.000px) rotate(-0.829deg); }
 38% { transform: translate(92.657px, 55.000px) rotate(-0.886deg); }
 38.5% { transform: translate(92.799px, 55.000px) rotate(-0.933deg); }
 39% { transform: translate(92.907px, 55.000px) rotate(-0.969deg); }
 39.5% { transform: translate(92.976px, 55.000px) rotate(-0.992deg); }
 40% { transform: translate(93.000px, 55.000px) rotate(-1.000deg); }
 40.5% { transform: translate(92.888px, 55.430px) rotate(-0.957deg); }
 41% { transform: translate(92.572px, 56.562px) rotate(-0.844deg); }
 41.5% { transform: translate(92.080px, 58.164px) rotate(-0.684deg); }
 42% { transform: translate(91.441px, 60.000px) rotate(-0.500deg); }
 42.5% { transform: translate(90.685px, 61.836px) rotate(-0.316deg); }
 43% { transform: translate(89.840px, 63.438px) rotate(-0.156deg); }
 43.5% { transform: translate(88.935px, 64.570px) rotate(-0.043deg); }
 44% { transform: translate(88.000px, 65.000px) rotate(0.000deg); }
 44.5% { transform: translate(87.160px, 65.000px) rotate(-0.092deg); }
 45% { transform: translate(86.579px, 65.000px) rotate(-0.354deg); }
 45.5% { transform: translate(86.332px, 65.000px) rotate(-0.759deg); }
 46% { transform: translate(86.475px, 65.000px) rotate(-1.284deg); }
 46.5% { transform: translate(87.049px, 65.000px) rotate(-1.904deg); }
 47% { transform: translate(88.081px, 65.000px) rotate(-2.595deg); }
 47.5% { transform: translate(89.584px, 65.000px) rotate(-3.331deg); }
 48% { transform: translate(91.560px, 65.000px) rotate(-4.090deg); }
 48.5% { transform: translate(93.999px, 65.000px) rotate(-4.845deg); }
 49% { transform: translate(96.887px, 65.000px) rotate(-5.573deg); }
 49.5% { transform: translate(100.201px, 65.000px) rotate(-6.250deg); }
 50% { transform: translate(103.917px, 65.000px) rotate(-6.850deg); }
 50.5% { transform: translate(108.010px, 65.000px) rotate(-7.348deg); }
 51% { transform: translate(112.458px, 65.000px) rotate(-7.722deg); }
 51.5% { transform: translate(117.240px, 65.000px) rotate(-7.945deg); }
 52% { transform: translate(122.321px, 65.000px) rotate(-7.999deg); }
 52.5% { transform: translate(127.105px, 64.989px) rotate(-7.979deg); }
 53% { transform: translate(131.264px, 64.965px) rotate(-7.931deg); }
 53.5% { transform: translate(134.720px, 64.928px) rotate(-7.858deg); }
 54% { transform: translate(137.404px, 64.882px) rotate(-7.761deg); }
 54.5% { transform: translate(139.267px, 64.827px) rotate(-7.640deg); }
 55% { transform: translate(140.275px, 64.764px) rotate(-7.497deg); }
 55.5% { transform: translate(140.410px, 64.696px) rotate(-7.333deg); }
 56% { transform: translate(139.673px, 64.624px) rotate(-7.149deg); }
 56.5% { transform: translate(138.080px, 64.549px) rotate(-6.947deg); }
 57% { transform: translate(135.668px, 64.473px) rotate(-6.727deg); }
 57.5% { transform: translate(132.485px, 64.398px) rotate(-6.492deg); }
 58% { transform: translate(128.599px, 64.325px) rotate(-6.241deg); }
 58.5% { transform: translate(124.089px, 64.255px) rotate(-5.977deg); }
 59% { transform: translate(119.051px, 64.191px) rotate(-5.701deg); }
 59.5% { transform: translate(113.586px, 64.133px) rotate(-5.413deg); }
 60% { transform: translate(107.807px, 64.084px) rotate(-5.115deg); }
 60.5% { transform: translate(101.834px, 64.045px) rotate(-4.808deg); }
 61% { transform: translate(95.789px, 64.017px) rotate(-4.493deg); }
 61.5% { transform: translate(89.796px, 64.002px) rotate(-4.172deg); }
 62% { transform: translate(84.078px, 64.021px) rotate(-3.819deg); }
 62.5% { transform: translate(79.346px, 64.194px) rotate(-3.269deg); }
 63% { transform: translate(75.684px, 64.506px) rotate(-2.548deg); }
 63.5% { transform: translate(73.038px, 64.913px) rotate(-1.719deg); }
 64% { transform: translate(71.344px, 65.374px) rotate(-0.845deg); }
 64.5% { transform: translate(70.525px, 65.846px) rotate(0.012deg); }
 65% { transform: translate(70.493px, 66.288px) rotate(0.787deg); }
 65.5% { transform: translate(71.145px, 66.655px) rotate(1.419deg); }
 66% { transform: translate(72.359px, 66.907px) rotate(1.844deg); }
 66.5% { transform: translate(74.000px, 67.000px) rotate(2.000deg); }
 67% { transform: translate(75.821px, 66.585px) rotate(1.949deg); }
 67.5% { transform: translate(77.666px, 65.410px) rotate(1.806deg); }
 68% { transform: translate(79.520px, 63.576px) rotate(1.582deg); }
 68.5% { transform: translate(81.367px, 61.186px) rotate(1.291deg); }
 69% { transform: translate(83.193px, 58.341px) rotate(0.944deg); }
 69.5% { transform: translate(84.984px, 55.145px) rotate(0.554deg); }
 70% { transform: translate(86.723px, 51.698px) rotate(0.134deg); }
 70.5% { transform: translate(88.396px, 48.105px) rotate(-0.304deg); }
 71% { transform: translate(89.989px, 44.467px) rotate(-0.748deg); }
 71.5% { transform: translate(91.486px, 40.885px) rotate(-1.185deg); }
 72% { transform: translate(92.873px, 37.463px) rotate(-1.602deg); }
 72.5% { transform: translate(94.134px, 34.303px) rotate(-1.987deg); }
 73% { transform: translate(95.255px, 31.507px) rotate(-2.328deg); }
 73.5% { transform: translate(96.221px, 29.177px) rotate(-2.613deg); }
 74% { transform: translate(97.016px, 27.415px) rotate(-2.827deg); }
 74.5% { transform: translate(97.627px, 26.324px) rotate(-2.960deg); }
 75% { transform: translate(98.039px, 26.000px) rotate(-3.000deg); }
 75.5% { transform: translate(98.353px, 26.000px) rotate(-2.996deg); }
 76% { transform: translate(98.642px, 26.000px) rotate(-2.987deg); }
 76.5% { transform: translate(98.908px, 26.000px) rotate(-2.972deg); }
 77% { transform: translate(99.151px, 26.000px) rotate(-2.952deg); }
 77.5% { transform: translate(99.375px, 26.000px) rotate(-2.927deg); }
 78% { transform: translate(99.581px, 26.000px) rotate(-2.898deg); }
 78.5% { transform: translate(99.771px, 26.000px) rotate(-2.864deg); }
 79% { transform: translate(99.946px, 26.000px) rotate(-2.826deg); }
 79.5% { transform: translate(100.110px, 26.000px) rotate(-2.784deg); }
 80% { transform: translate(100.263px, 26.000px) rotate(-2.738deg); }
 80.5% { transform: translate(100.407px, 26.000px) rotate(-2.689deg); }
 81% { transform: translate(100.545px, 26.000px) rotate(-2.637deg); }
 81.5% { transform: translate(100.679px, 26.000px) rotate(-2.583deg); }
 82% { transform: translate(100.809px, 26.000px) rotate(-2.525deg); }
 82.5% { transform: translate(100.938px, 26.000px) rotate(-2.466deg); }
 83% { transform: translate(101.069px, 26.000px) rotate(-2.404deg); }
 83.5% { transform: translate(101.202px, 26.000px) rotate(-2.341deg); }
 84% { transform: translate(101.340px, 26.000px) rotate(-2.276deg); }
 84.5% { transform: translate(101.485px, 26.000px) rotate(-2.210deg); }
 85% { transform: translate(101.639px, 26.000px) rotate(-2.144deg); }
 85.5% { transform: translate(101.802px, 26.000px) rotate(-2.076deg); }
 86% { transform: translate(101.978px, 26.000px) rotate(-2.008deg); }
 86.5% { transform: translate(102.172px, 26.347px) rotate(-1.929deg); }
 87% { transform: translate(102.386px, 27.513px) rotate(-1.823deg); }
 87.5% { transform: translate(102.617px, 29.387px) rotate(-1.695deg); }
 88% { transform: translate(102.859px, 31.851px) rotate(-1.549deg); }
 88.5% { transform: translate(103.108px, 34.790px) rotate(-1.390deg); }
 89% { transform: translate(103.360px, 38.086px) rotate(-1.221deg); }
 89.5% { transform: translate(103.610px, 41.622px) rotate(-1.048deg); }
 90% { transform: translate(103.852px, 45.283px) rotate(-0.875deg); }
 90.5% { transform: translate(104.084px, 48.950px) rotate(-0.706deg); }
 91% { transform: translate(104.299px, 52.507px) rotate(-0.545deg); }
 91.5% { transform: translate(104.494px, 55.838px) rotate(-0.396deg); }
 92% { transform: translate(104.664px, 58.825px) rotate(-0.265deg); }
 92.5% { transform: translate(104.804px, 61.351px) rotate(-0.156deg); }
 93% { transform: translate(104.910px, 63.300px) rotate(-0.072deg); }
 93.5% { transform: translate(104.977px, 64.556px) rotate(-0.019deg); }
 94% { transform: translate(105.000px, 65.000px) rotate(0.000deg); }
 94.5% { transform: translate(104.776px, 65.000px) rotate(0.000deg); }
 95% { transform: translate(104.149px, 65.000px) rotate(0.000deg); }
 95.5% { transform: translate(103.182px, 65.000px) rotate(0.000deg); }
 96% { transform: translate(101.942px, 65.000px) rotate(0.000deg); }
 96.5% { transform: translate(100.494px, 65.000px) rotate(0.000deg); }
 97% { transform: translate(98.902px, 65.000px) rotate(0.000deg); }
 97.5% { transform: translate(97.233px, 65.000px) rotate(0.000deg); }
 98% { transform: translate(95.551px, 65.000px) rotate(0.000deg); }
 98.5% { transform: translate(93.921px, 65.000px) rotate(0.000deg); }
 99% { transform: translate(92.410px, 65.000px) rotate(0.000deg); }
 99.5% { transform: translate(91.081px, 65.000px) rotate(0.000deg); }
 100% { transform: translate(90.000px, 65.000px) rotate(0.000deg); }
}
@keyframes geo2-shadow-story {
 0% { transform: translateX(0.000px) scaleX(0.967); opacity: 0.622; }
 0.5% { transform: translateX(-0.943px) scaleX(0.967); opacity: 0.623; }
 1% { transform: translateX(-1.897px) scaleX(0.968); opacity: 0.624; }
 1.5% { transform: translateX(-2.849px) scaleX(0.971); opacity: 0.626; }
 2% { transform: translateX(-3.788px) scaleX(0.974); opacity: 0.628; }
 2.5% { transform: translateX(-4.705px) scaleX(0.977); opacity: 0.631; }
 3% { transform: translateX(-5.587px) scaleX(0.980); opacity: 0.634; }
 3.5% { transform: translateX(-6.424px) scaleX(0.984); opacity: 0.637; }
 4% { transform: translateX(-7.204px) scaleX(0.988); opacity: 0.640; }
 4.5% { transform: translateX(-7.918px) scaleX(0.991); opacity: 0.643; }
 5% { transform: translateX(-8.553px) scaleX(0.994); opacity: 0.645; }
 5.5% { transform: translateX(-9.099px) scaleX(0.997); opacity: 0.647; }
 6% { transform: translateX(-9.544px) scaleX(0.999); opacity: 0.649; }
 6.5% { transform: translateX(-9.878px) scaleX(1.000); opacity: 0.650; }
 7% { transform: translateX(-10.105px) scaleX(0.999); opacity: 0.649; }
 7.5% { transform: translateX(-10.309px) scaleX(0.989); opacity: 0.641; }
 8% { transform: translateX(-10.505px) scaleX(0.971); opacity: 0.626; }
 8.5% { transform: translateX(-10.692px) scaleX(0.945); opacity: 0.604; }
 9% { transform: translateX(-10.868px) scaleX(0.914); opacity: 0.578; }
 9.5% { transform: translateX(-11.035px) scaleX(0.877); opacity: 0.548; }
 10% { transform: translateX(-11.190px) scaleX(0.837); opacity: 0.514; }
 10.5% { transform: translateX(-11.334px) scaleX(0.795); opacity: 0.479; }
 11% { transform: translateX(-11.465px) scaleX(0.752); opacity: 0.443; }
 11.5% { transform: translateX(-11.583px) scaleX(0.709); opacity: 0.407; }
 12% { transform: translateX(-11.688px) scaleX(0.667); opacity: 0.373; }
 12.5% { transform: translateX(-11.779px) scaleX(0.629); opacity: 0.341; }
 13% { transform: translateX(-11.855px) scaleX(0.594); opacity: 0.312; }
 13.5% { transform: translateX(-11.916px) scaleX(0.564); opacity: 0.287; }
 14% { transform: translateX(-11.961px) scaleX(0.542); opacity: 0.268; }
 14.5% { transform: translateX(-11.989px) scaleX(0.526); opacity: 0.255; }
 15% { transform: translateX(-12.000px) scaleX(0.520); opacity: 0.250; }
 15.5% { transform: translateX(-11.798px) scaleX(0.520); opacity: 0.250; }
 16% { transform: translateX(-11.129px) scaleX(0.521); opacity: 0.251; }
 16.5% { transform: translateX(-10.082px) scaleX(0.521); opacity: 0.251; }
 17% { transform: translateX(-8.750px) scaleX(0.523); opacity: 0.252; }
 17.5% { transform: translateX(-7.225px) scaleX(0.524); opacity: 0.253; }
 18% { transform: translateX(-5.602px) scaleX(0.526); opacity: 0.255; }
 18.5% { transform: translateX(-3.973px) scaleX(0.528); opacity: 0.256; }
 19% { transform: translateX(-2.431px) scaleX(0.530); opacity: 0.258; }
 19.5% { transform: translateX(-1.070px) scaleX(0.533); opacity: 0.261; }
 20% { transform: translateX(0.018px) scaleX(0.536); opacity: 0.263; }
 20.5% { transform: translateX(0.739px) scaleX(0.539); opacity: 0.266; }
 21% { transform: translateX(1.000px) scaleX(0.542); opacity: 0.269; }
 21.5% { transform: translateX(0.980px) scaleX(0.554); opacity: 0.278; }
 22% { transform: translateX(0.924px) scaleX(0.580); opacity: 0.300; }
 22.5% { transform: translateX(0.841px) scaleX(0.618); opacity: 0.331; }
 23% { transform: translateX(0.736px) scaleX(0.664); opacity: 0.370; }
 23.5% { transform: translateX(0.617px) scaleX(0.715); opacity: 0.412; }
 24% { transform: translateX(0.492px) scaleX(0.769); opacity: 0.457; }
 24.5% { transform: translateX(0.367px) scaleX(0.822); opacity: 0.502; }
 25% { transform: translateX(0.250px) scaleX(0.872); opacity: 0.543; }
 25.5% { transform: translateX(0.148px) scaleX(0.915); opacity: 0.579; }
 26% { transform: translateX(0.067px) scaleX(0.949); opacity: 0.608; }
 26.5% { transform: translateX(0.016px) scaleX(0.971); opacity: 0.626; }
 27% { transform: translateX(0.000px) scaleX(0.978); opacity: 0.631; }
 27.5% { transform: translateX(0.000px) scaleX(0.969); opacity: 0.625; }
 28% { transform: translateX(0.000px) scaleX(0.951); opacity: 0.610; }
 28.5% { transform: translateX(0.000px) scaleX(0.928); opacity: 0.590; }
 29% { transform: translateX(0.000px) scaleX(0.902); opacity: 0.568; }
 29.5% { transform: translateX(0.000px) scaleX(0.878); opacity: 0.549; }
 30% { transform: translateX(0.000px) scaleX(0.861); opacity: 0.535; }
 30.5% { transform: translateX(0.000px) scaleX(0.855); opacity: 0.529; }
 31% { transform: translateX(0.024px) scaleX(0.855); opacity: 0.529; }
 31.5% { transform: translateX(0.093px) scaleX(0.855); opacity: 0.529; }
 32% { transform: translateX(0.201px) scaleX(0.855); opacity: 0.529; }
 32.5% { transform: translateX(0.343px) scaleX(0.855); opacity: 0.529; }
 33% { transform: translateX(0.514px) scaleX(0.855); opacity: 0.529; }
 33.5% { transform: translateX(0.709px) scaleX(0.855); opacity: 0.529; }
 34% { transform: translateX(0.922px) scaleX(0.855); opacity: 0.529; }
 34.5% { transform: translateX(1.148px) scaleX(0.855); opacity: 0.529; }
 35% { transform: translateX(1.382px) scaleX(0.855); opacity: 0.529; }
 35.5% { transform: translateX(1.618px) scaleX(0.855); opacity: 0.529; }
 36% { transform: translateX(1.852px) scaleX(0.855); opacity: 0.529; }
 36.5% { transform: translateX(2.078px) scaleX(0.855); opacity: 0.529; }
 37% { transform: translateX(2.291px) scaleX(0.855); opacity: 0.529; }
 37.5% { transform: translateX(2.486px) scaleX(0.855); opacity: 0.529; }
 38% { transform: translateX(2.657px) scaleX(0.855); opacity: 0.529; }
 38.5% { transform: translateX(2.799px) scaleX(0.855); opacity: 0.529; }
 39% { transform: translateX(2.907px) scaleX(0.855); opacity: 0.529; }
 39.5% { transform: translateX(2.976px) scaleX(0.855); opacity: 0.529; }
 40% { transform: translateX(3.000px) scaleX(0.855); opacity: 0.529; }
 40.5% { transform: translateX(2.888px) scaleX(0.860); opacity: 0.533; }
 41% { transform: translateX(2.572px) scaleX(0.872); opacity: 0.544; }
 41.5% { transform: translateX(2.080px) scaleX(0.890); opacity: 0.559; }
 42% { transform: translateX(1.441px) scaleX(0.911); opacity: 0.576; }
 42.5% { transform: translateX(0.685px) scaleX(0.931); opacity: 0.593; }
 43% { transform: translateX(-0.160px) scaleX(0.949); opacity: 0.608; }
 43.5% { transform: translateX(-1.065px) scaleX(0.962); opacity: 0.618; }
 44% { transform: translateX(-2.000px) scaleX(0.967); opacity: 0.622; }
 44.5% { transform: translateX(-2.840px) scaleX(0.967); opacity: 0.622; }
 45% { transform: translateX(-3.421px) scaleX(0.967); opacity: 0.622; }
 45.5% { transform: translateX(-3.668px) scaleX(0.967); opacity: 0.622; }
 46% { transform: translateX(-3.525px) scaleX(0.967); opacity: 0.622; }
 46.5% { transform: translateX(-2.951px) scaleX(0.967); opacity: 0.622; }
 47% { transform: translateX(-1.919px) scaleX(0.967); opacity: 0.622; }
 47.5% { transform: translateX(-0.416px) scaleX(0.967); opacity: 0.622; }
 48% { transform: translateX(1.560px) scaleX(0.967); opacity: 0.622; }
 48.5% { transform: translateX(3.999px) scaleX(0.967); opacity: 0.622; }
 49% { transform: translateX(6.887px) scaleX(0.967); opacity: 0.622; }
 49.5% { transform: translateX(10.201px) scaleX(0.967); opacity: 0.622; }
 50% { transform: translateX(13.917px) scaleX(0.967); opacity: 0.622; }
 50.5% { transform: translateX(18.010px) scaleX(0.967); opacity: 0.622; }
 51% { transform: translateX(22.458px) scaleX(0.967); opacity: 0.622; }
 51.5% { transform: translateX(27.240px) scaleX(0.967); opacity: 0.622; }
 52% { transform: translateX(32.321px) scaleX(0.967); opacity: 0.622; }
 52.5% { transform: translateX(37.105px) scaleX(0.966); opacity: 0.622; }
 53% { transform: translateX(41.264px) scaleX(0.966); opacity: 0.622; }
 53.5% { transform: translateX(44.720px) scaleX(0.966); opacity: 0.621; }
 54% { transform: translateX(47.404px) scaleX(0.965); opacity: 0.621; }
 54.5% { transform: translateX(49.267px) scaleX(0.965); opacity: 0.620; }
 55% { transform: translateX(50.275px) scaleX(0.964); opacity: 0.620; }
 55.5% { transform: translateX(50.410px) scaleX(0.963); opacity: 0.619; }
 56% { transform: translateX(49.673px) scaleX(0.962); opacity: 0.619; }
 56.5% { transform: translateX(48.080px) scaleX(0.961); opacity: 0.618; }
 57% { transform: translateX(45.668px) scaleX(0.961); opacity: 0.617; }
 57.5% { transform: translateX(42.485px) scaleX(0.960); opacity: 0.616; }
 58% { transform: translateX(38.599px) scaleX(0.959); opacity: 0.616; }
 58.5% { transform: translateX(34.089px) scaleX(0.958); opacity: 0.615; }
 59% { transform: translateX(29.051px) scaleX(0.957); opacity: 0.615; }
 59.5% { transform: translateX(23.586px) scaleX(0.957); opacity: 0.614; }
 60% { transform: translateX(17.807px) scaleX(0.956); opacity: 0.614; }
 60.5% { transform: translateX(11.834px) scaleX(0.956); opacity: 0.613; }
 61% { transform: translateX(5.789px) scaleX(0.956); opacity: 0.613; }
 61.5% { transform: translateX(-0.204px) scaleX(0.955); opacity: 0.613; }
 62% { transform: translateX(-5.922px) scaleX(0.956); opacity: 0.613; }
 62.5% { transform: translateX(-10.654px) scaleX(0.958); opacity: 0.615; }
 63% { transform: translateX(-14.316px) scaleX(0.961); opacity: 0.617; }
 63.5% { transform: translateX(-16.962px) scaleX(0.966); opacity: 0.621; }
 64% { transform: translateX(-18.656px) scaleX(0.971); opacity: 0.626; }
 64.5% { transform: translateX(-19.475px) scaleX(0.976); opacity: 0.630; }
 65% { transform: translateX(-19.507px) scaleX(0.981); opacity: 0.634; }
 65.5% { transform: translateX(-18.855px) scaleX(0.985); opacity: 0.637; }
 66% { transform: translateX(-17.641px) scaleX(0.988); opacity: 0.640; }
 66.5% { transform: translateX(-16.000px) scaleX(0.989); opacity: 0.641; }
 67% { transform: translateX(-14.179px) scaleX(0.984); opacity: 0.637; }
 67.5% { transform: translateX(-12.334px) scaleX(0.971); opacity: 0.626; }
 68% { transform: translateX(-10.480px) scaleX(0.951); opacity: 0.609; }
 68.5% { transform: translateX(-8.633px) scaleX(0.924); opacity: 0.587; }
 69% { transform: translateX(-6.807px) scaleX(0.892); opacity: 0.560; }
 69.5% { transform: translateX(-5.016px) scaleX(0.856); opacity: 0.530; }
 70% { transform: translateX(-3.277px) scaleX(0.818); opacity: 0.498; }
 70.5% { transform: translateX(-1.604px) scaleX(0.778); opacity: 0.465; }
 71% { transform: translateX(-0.011px) scaleX(0.737); opacity: 0.431; }
 71.5% { transform: translateX(1.486px) scaleX(0.697); opacity: 0.398; }
 72% { transform: translateX(2.873px) scaleX(0.659); opacity: 0.366; }
 72.5% { transform: translateX(4.134px) scaleX(0.624); opacity: 0.337; }
 73% { transform: translateX(5.255px) scaleX(0.593); opacity: 0.311; }
 73.5% { transform: translateX(6.221px) scaleX(0.567); opacity: 0.289; }
 74% { transform: translateX(7.016px) scaleX(0.547); opacity: 0.272; }
 74.5% { transform: translateX(7.627px) scaleX(0.535); opacity: 0.262; }
 75% { transform: translateX(8.039px) scaleX(0.531); opacity: 0.259; }
 75.5% { transform: translateX(8.353px) scaleX(0.531); opacity: 0.259; }
 76% { transform: translateX(8.642px) scaleX(0.531); opacity: 0.259; }
 76.5% { transform: translateX(8.908px) scaleX(0.531); opacity: 0.259; }
 77% { transform: translateX(9.151px) scaleX(0.531); opacity: 0.259; }
 77.5% { transform: translateX(9.375px) scaleX(0.531); opacity: 0.259; }
 78% { transform: translateX(9.581px) scaleX(0.531); opacity: 0.259; }
 78.5% { transform: translateX(9.771px) scaleX(0.531); opacity: 0.259; }
 79% { transform: translateX(9.946px) scaleX(0.531); opacity: 0.259; }
 79.5% { transform: translateX(10.110px) scaleX(0.531); opacity: 0.259; }
 80% { transform: translateX(10.263px) scaleX(0.531); opacity: 0.259; }
 80.5% { transform: translateX(10.407px) scaleX(0.531); opacity: 0.259; }
 81% { transform: translateX(10.545px) scaleX(0.531); opacity: 0.259; }
 81.5% { transform: translateX(10.679px) scaleX(0.531); opacity: 0.259; }
 82% { transform: translateX(10.809px) scaleX(0.531); opacity: 0.259; }
 82.5% { transform: translateX(10.938px) scaleX(0.531); opacity: 0.259; }
 83% { transform: translateX(11.069px) scaleX(0.531); opacity: 0.259; }
 83.5% { transform: translateX(11.202px) scaleX(0.531); opacity: 0.259; }
 84% { transform: translateX(11.340px) scaleX(0.531); opacity: 0.259; }
 84.5% { transform: translateX(11.485px) scaleX(0.531); opacity: 0.259; }
 85% { transform: translateX(11.639px) scaleX(0.531); opacity: 0.259; }
 85.5% { transform: translateX(11.802px) scaleX(0.531); opacity: 0.259; }
 86% { transform: translateX(11.978px) scaleX(0.531); opacity: 0.259; }
 86.5% { transform: translateX(12.172px) scaleX(0.535); opacity: 0.263; }
 87% { transform: translateX(12.386px) scaleX(0.548); opacity: 0.273; }
 87.5% { transform: translateX(12.617px) scaleX(0.569); opacity: 0.291; }
 88% { transform: translateX(12.859px) scaleX(0.596); opacity: 0.314; }
 88.5% { transform: translateX(13.108px) scaleX(0.629); opacity: 0.341; }
 89% { transform: translateX(13.360px) scaleX(0.666); opacity: 0.372; }
 89.5% { transform: translateX(13.610px) scaleX(0.706); opacity: 0.405; }
 90% { transform: translateX(13.852px) scaleX(0.746); opacity: 0.439; }
 90.5% { transform: translateX(14.084px) scaleX(0.787); opacity: 0.473; }
 91% { transform: translateX(14.299px) scaleX(0.827); opacity: 0.506; }
 91.5% { transform: translateX(14.494px) scaleX(0.864); opacity: 0.537; }
 92% { transform: translateX(14.664px) scaleX(0.898); opacity: 0.565; }
 92.5% { transform: translateX(14.804px) scaleX(0.926); opacity: 0.588; }
 93% { transform: translateX(14.910px) scaleX(0.948); opacity: 0.606; }
 93.5% { transform: translateX(14.977px) scaleX(0.962); opacity: 0.618; }
 94% { transform: translateX(15.000px) scaleX(0.967); opacity: 0.622; }
 94.5% { transform: translateX(14.776px) scaleX(0.967); opacity: 0.622; }
 95% { transform: translateX(14.149px) scaleX(0.967); opacity: 0.622; }
 95.5% { transform: translateX(13.182px) scaleX(0.967); opacity: 0.622; }
 96% { transform: translateX(11.942px) scaleX(0.967); opacity: 0.622; }
 96.5% { transform: translateX(10.494px) scaleX(0.967); opacity: 0.622; }
 97% { transform: translateX(8.902px) scaleX(0.967); opacity: 0.622; }
 97.5% { transform: translateX(7.233px) scaleX(0.967); opacity: 0.622; }
 98% { transform: translateX(5.551px) scaleX(0.967); opacity: 0.622; }
 98.5% { transform: translateX(3.921px) scaleX(0.967); opacity: 0.622; }
 99% { transform: translateX(2.410px) scaleX(0.967); opacity: 0.622; }
 99.5% { transform: translateX(1.081px) scaleX(0.967); opacity: 0.622; }
 100% { transform: translateX(0.000px) scaleX(0.967); opacity: 0.622; }
}
@keyframes geo2-runner-story { 0%, 1.25% { opacity: 0; transform: translate(250px, 72px); } 2% { opacity: 1; } 22.188% { opacity: 1; transform: translate(45px, 72px) rotate(-160deg); } 28.125%, 100% { opacity: 0; transform: translate(-25px, 72px) rotate(-220deg); } }
@keyframes geo2-target-story { 0%, 25.75% { opacity: 0; transform: translate(250px, 54px); } 30.5% { opacity: 1; transform: translate(190px, 54px); } 40% { opacity: 1; transform: translate(190px, 54px) rotate(36deg); } 40.025%, 100% { opacity: 0; transform: translate(190px, 54px) scale(.4); } }
@keyframes geo2-diver-story { 0%, 42% { opacity: 0; transform: translate(110px, -20px); } 44.824% { opacity: 1; } 58.941% { opacity: 1; transform: translate(96px, 78px) rotate(180deg); } 66%, 100% { opacity: 0; transform: translate(90px, 115px) rotate(240deg); } }
@keyframes geo2-final-story { 0%, 67% { opacity: 0; transform: translate(250px, 25px); } 74.941% { opacity: 1; transform: translate(200px, 25px); } 87.647% { opacity: 1; transform: translate(200px, 25px) rotate(-36deg); } 87.806%, 100% { opacity: 0; transform: translate(200px, 25px) scale(.4); } }
@keyframes geo2-shot-one { 0%, 33.944% { opacity: 0; transform: translate(129px, 56px); } 34.062% { opacity: 1; } 36.438% { opacity: 1; transform: translate(188px, 54px); } 36.556%, 100% { opacity: 0; transform: translate(190px, 54px); } }
@keyframes geo2-shot-two { 0%, 37.506% { opacity: 0; transform: translate(129px, 56px); } 37.625% { opacity: 1; } 40% { opacity: 1; transform: translate(190px, 54px); } 40.025%, 100% { opacity: 0; transform: translate(190px, 54px); } }
@keyframes geo2-shot-three { 0%, 81.135% { opacity: 0; transform: translate(138px, 25px); } 81.294% { opacity: 1; } 87.647% { opacity: 1; transform: translate(200px, 25px); } 87.806%, 100% { opacity: 0; transform: translate(200px, 25px); } }
@keyframes geo2-hit-one { 0%, 40% { opacity: 0; transform: translate(190px, 54px) scale(.4); } 40.025% { opacity: 1; } 44%, 100% { opacity: 0; transform: translate(190px, 54px) scale(1.7); } }
@keyframes geo2-hit-two { 0%, 87.647% { opacity: 0; transform: translate(200px, 25px) scale(.4); } 87.806% { opacity: 1; } 94%, 100% { opacity: 0; transform: translate(200px, 25px) scale(1.7); } }
@keyframes geo2-muzzle {
  0%, 3.7%, 18.8%, 32.7%, 35.012%, 38.575%, 49.7%, 56.8%, 59.7%, 61.7%, 82.565%, 85.8%, 95.2%, 100% { opacity: 0; }
  3%, 18%, 32%, 34.062%, 37.625%, 49%, 56%, 59%, 61%, 81.294%, 85%, 94.5% { opacity: 1; }
}
@keyframes geo2-landing { 0%, 25.75%, 31.688%, 92.412%, 96%, 100% { opacity: 0; } 26.938%, 94% { opacity: .7; } }
@keyframes geo2-radar { to { transform: rotate(360deg); } }
@keyframes geo2-distant { from { transform: translate(-3px, 3px); } to { transform: translate(3px, -4px); } }
@keyframes geo2-horizon { from { opacity: .15; } to { opacity: .4; } }
@media (prefers-reduced-motion: reduce) {
 .geo2-story .geo2-hero { transform: translate(90px, 65px); }
 .geo2-story .geo2-target { opacity: 1; transform: translate(190px, 54px); }
}
html.account-reduced-motion .geo2-story .geo2-hero { transform: translate(90px, 65px); }
html.account-reduced-motion .geo2-story .geo2-target { opacity: 1; transform: translate(190px, 54px); }

.geo2-story .geo2-scout { animation: geo2-scout var(--geo2-cycle) linear infinite; }
.geo2-story .geo2-shot-scout { animation: geo2-shot-scout var(--geo2-cycle) linear infinite; }
.geo2-story .geo2-burst-scout { animation: geo2-burst-scout var(--geo2-cycle) ease-out infinite; }
@keyframes geo2-scout {
  0%, 8% { opacity: 0; transform: translate(255px, 25px) rotate(-20deg); }
  14% { opacity: 1; transform: translate(186px, 25px); }
  23% { opacity: 1; transform: translate(178px, 25px) rotate(30deg); }
  24%, 100% { opacity: 0; transform: translate(178px, 25px) rotate(36deg) scale(.6); }
}
@keyframes geo2-shot-scout {
  0%, 17.9% { opacity: 0; transform: translate(122px, 26px); }
  18% { opacity: 1; }
  23% { opacity: 1; transform: translate(178px, 25px); }
  23.1%, 100% { opacity: 0; transform: translate(178px, 25px); }
}
@keyframes geo2-burst-scout {
  0%, 23% { opacity: 0; transform: translate(178px, 25px) scale(.4); }
  23.15% { opacity: .9; }
  27%, 100% { opacity: 0; transform: translate(178px, 25px) scale(1.5); }
}

.geo2-story .geo2-hex { animation: geo2-hex var(--geo2-cycle) linear infinite; }
.geo2-story .geo2-shot-hex { animation: geo2-shot-hex var(--geo2-cycle) linear infinite; }
.geo2-story .geo2-burst-hex { animation: geo2-burst-hex var(--geo2-cycle) ease-out infinite; }
@keyframes geo2-hex {
  0%, 44% { opacity: 0; transform: translate(-20px, 59px) rotate(25deg); }
  50% { opacity: 1; transform: translate(45px, 59px); }
  62% { opacity: 1; transform: translate(55px, 59px) rotate(-30deg); }
  63%, 100% { opacity: 0; transform: translate(55px, 59px) rotate(-36deg) scale(.5); }
}
@keyframes geo2-shot-hex {
  0%, 55.9% { opacity: 0; transform: translate(103.08px, 70.22px) rotate(-166.86deg); }
  56% { opacity: 1; }
  62% { opacity: 1; transform: translate(55px, 59px) rotate(-166.86deg); }
  62.1%, 100% { opacity: 0; transform: translate(55px, 59px) rotate(-166.86deg); }
}
@keyframes geo2-burst-hex {
  0%, 62% { opacity: 0; transform: translate(55px, 59px) scale(.35); }
  62.1% { opacity: .85; }
  65%, 100% { opacity: 0; transform: translate(55px, 59px) scale(1.5); }
}

.geo2-story .geo2-ace { animation: geo2-ace var(--geo2-cycle) linear infinite; }
.geo2-story .geo2-shot-ace { animation: geo2-shot-ace var(--geo2-cycle) linear infinite; }
.geo2-story .geo2-burst-ace { animation: geo2-burst-ace var(--geo2-cycle) ease-out infinite; }
@keyframes geo2-ace {
  0%, 72% { opacity: 0; transform: translate(255px, 25px) rotate(-20deg); }
  80% { opacity: 1; transform: translate(232px, 25px); }
  91% { opacity: 1; transform: translate(224px, 25px) rotate(30deg); }
  92%, 100% { opacity: 0; transform: translate(224px, 25px) rotate(36deg) scale(.6); }
}
@keyframes geo2-shot-ace {
  0%, 84.9% { opacity: 0; transform: translate(140px, 25px); }
  85% { opacity: 1; }
  91% { opacity: 1; transform: translate(224px, 25px); }
  91.1%, 100% { opacity: 0; transform: translate(224px, 25px); }
}
@keyframes geo2-burst-ace {
  0%, 91% { opacity: 0; transform: translate(224px, 25px) scale(.4); }
  91.15% { opacity: .9; }
  95%, 100% { opacity: 0; transform: translate(224px, 25px) scale(1.5); }
}

.geo2-story .geo2-orb { animation: geo2-orb var(--geo2-cycle) linear infinite; }
.geo2-story .geo2-shot-orb { animation: geo2-shot-orb var(--geo2-cycle) linear infinite; }
.geo2-story .geo2-burst-orb { animation: geo2-burst-orb var(--geo2-cycle) ease-out infinite; }
@keyframes geo2-orb {
  0%, 0% { opacity: 0; transform: translate(255px, 67px) rotate(-25deg); }
  2% { opacity: 1; transform: translate(202px, 67px); }
  8% { opacity: 1; transform: translate(190px, 67px) rotate(35deg); }
  9%, 100% { opacity: 0; transform: translate(190px, 67px) rotate(40deg) scale(.5); }
}
@keyframes geo2-shot-orb {
  0%, 2.9% { opacity: 0; transform: translate(121.42px, 65.63px) rotate(1.14deg); }
  3% { opacity: 1; }
  8% { opacity: 1; transform: translate(190px, 67px) rotate(1.14deg); }
  8.1%, 100% { opacity: 0; transform: translate(190px, 67px) rotate(1.14deg); }
}
@keyframes geo2-burst-orb {
  0%, 8% { opacity: 0; transform: translate(190px, 67px) scale(.35); }
  8.1% { opacity: .8; }
  11%, 100% { opacity: 0; transform: translate(190px, 67px) scale(1.5); }
}

.geo2-story .geo2-kite { animation: geo2-kite var(--geo2-cycle) linear infinite; }
.geo2-story .geo2-shot-kite { animation: geo2-shot-kite var(--geo2-cycle) linear infinite; }
.geo2-story .geo2-burst-kite { animation: geo2-burst-kite var(--geo2-cycle) ease-out infinite; }
@keyframes geo2-kite {
  0%, 24% { opacity: 0; transform: translate(255px, 37px) rotate(-25deg); }
  30% { opacity: 1; transform: translate(230px, 37px); }
  39% { opacity: 1; transform: translate(218px, 37px) rotate(35deg); }
  40%, 100% { opacity: 0; transform: translate(218px, 37px) rotate(40deg) scale(.5); }
}
@keyframes geo2-shot-kite {
  0%, 31.9% { opacity: 0; transform: translate(127.20px, 55.96px) rotate(-11.79deg); }
  32% { opacity: 1; }
  39% { opacity: 1; transform: translate(218px, 37px) rotate(-11.79deg); }
  39.1%, 100% { opacity: 0; transform: translate(218px, 37px) rotate(-11.79deg); }
}
@keyframes geo2-burst-kite {
  0%, 39% { opacity: 0; transform: translate(218px, 37px) scale(.35); }
  39.1% { opacity: .8; }
  42%, 100% { opacity: 0; transform: translate(218px, 37px) scale(1.5); }
}

.geo2-story .geo2-square { animation: geo2-square var(--geo2-cycle) linear infinite; }
.geo2-story .geo2-shot-square { animation: geo2-shot-square var(--geo2-cycle) linear infinite; }
.geo2-story .geo2-burst-square { animation: geo2-burst-square var(--geo2-cycle) ease-out infinite; }
@keyframes geo2-square {
  0%, 48% { opacity: 0; transform: translate(-20px, 76px) rotate(25deg); }
  55% { opacity: 1; transform: translate(15px, 76px); }
  66% { opacity: 1; transform: translate(25px, 76px) rotate(-30deg); }
  67%, 100% { opacity: 0; transform: translate(25px, 76px) rotate(-36deg) scale(.5); }
}
@keyframes geo2-shot-square {
  0%, 58.9% { opacity: 0; transform: translate(82.33px, 68.86px) rotate(172.90deg); }
  59% { opacity: 1; }
  66% { opacity: 1; transform: translate(25px, 76px) rotate(172.90deg); }
  66.1%, 100% { opacity: 0; transform: translate(25px, 76px) rotate(172.90deg); }
}
@keyframes geo2-burst-square {
  0%, 66% { opacity: 0; transform: translate(25px, 76px) scale(.35); }
  66.1% { opacity: .85; }
  69%, 100% { opacity: 0; transform: translate(25px, 76px) scale(1.5); }
}

.geo2-story .geo2-shard { animation: geo2-shard var(--geo2-cycle) linear infinite; }
.geo2-story .geo2-shot-shard { animation: geo2-shot-shard var(--geo2-cycle) linear infinite; }
.geo2-story .geo2-burst-shard { animation: geo2-burst-shard var(--geo2-cycle) ease-out infinite; }
@keyframes geo2-shard {
  0%, 85% { opacity: 0; transform: translate(255px, 65px) rotate(-25deg); }
  91% { opacity: 1; transform: translate(197px, 65px); }
  98.5% { opacity: 1; transform: translate(185px, 65px) rotate(35deg); }
  99.5%, 100% { opacity: 0; transform: translate(185px, 65px) rotate(40deg) scale(.5); }
}
@keyframes geo2-shot-shard {
  0%, 94.4% { opacity: 0; transform: translate(141.78px, 66.00px) rotate(-1.33deg); }
  94.5% { opacity: 1; }
  98.5% { opacity: 1; transform: translate(185px, 65px) rotate(-1.33deg); }
  98.6%, 100% { opacity: 0; transform: translate(185px, 65px) rotate(-1.33deg); }
}
@keyframes geo2-burst-shard {
  0%, 98.5% { opacity: 0; transform: translate(185px, 65px) scale(.35); }
  98.6% { opacity: .8; }
  100%, 100% { opacity: 0; transform: translate(185px, 65px) scale(1.5); }
}

.geo2-story .geo2-flanker { animation: geo2-flanker var(--geo2-cycle) linear infinite; }
@keyframes geo2-flanker {
  0%, 39% { opacity: 0; transform: translate(-20px, 40px) rotate(25deg); }
  45% { opacity: 1; transform: translate(63px, 40px); }
  53% { opacity: 1; transform: translate(73px, 40px) rotate(-30deg); }
  54%, 100% { opacity: 0; transform: translate(73px, 40px) rotate(-36deg) scale(.5); }
}

.geo2-story .geo2-shot-flanker { animation: geo2-shot-flanker var(--geo2-cycle) linear infinite; }
@keyframes geo2-shot-flanker {
  0%, 48.9% { opacity: 0; transform: translate(60.16px, 69.59px) rotate(-66.54deg); }
  49% { opacity: 1; }
  53% { opacity: 1; transform: translate(73px, 40px) rotate(-66.54deg); }
  53.1%, 100% { opacity: 0; transform: translate(73px, 40px) rotate(-66.54deg); }
}

.geo2-story .geo2-burst-flanker { animation: geo2-burst-flanker var(--geo2-cycle) ease-out infinite; }
@keyframes geo2-burst-flanker {
  0%, 53% { opacity: 0; transform: translate(73px, 40px) scale(.35); }
  53.1% { opacity: .85; }
  56%, 100% { opacity: 0; transform: translate(73px, 40px) scale(1.5); }
}

.geo2-story .geo2-stalker { animation: geo2-stalker var(--geo2-cycle) linear infinite; }
@keyframes geo2-stalker {
  0%, 49% { opacity: 0; transform: translate(-20px, 50px) rotate(25deg); }
  56% { opacity: 1; transform: translate(2px, 50px); }
  65% { opacity: 1; transform: translate(12px, 50px) rotate(-30deg); }
  66%, 100% { opacity: 0; transform: translate(12px, 50px) rotate(-36deg) scale(.5); }
}

.geo2-story .geo2-shot-stalker { animation: geo2-shot-stalker var(--geo2-cycle) linear infinite; }
@keyframes geo2-shot-stalker {
  0%, 60.9% { opacity: 0; transform: translate(58.98px, 67.91px) rotate(-159.13deg); }
  61% { opacity: 1; }
  65% { opacity: 1; transform: translate(12px, 50px) rotate(-159.13deg); }
  65.1%, 100% { opacity: 0; transform: translate(12px, 50px) rotate(-159.13deg); }
}

.geo2-story .geo2-burst-stalker { animation: geo2-burst-stalker var(--geo2-cycle) ease-out infinite; }
@keyframes geo2-burst-stalker {
  0%, 65% { opacity: 0; transform: translate(12px, 50px) scale(.35); }
  65.1% { opacity: .85; }
  68%, 100% { opacity: 0; transform: translate(12px, 50px) scale(1.5); }
}

/* Turn the whole character and weapon together while the dodge path continues. */
.geo2-story .geo2-facing { transform-origin: 0 0; animation: geo2-turn var(--geo2-cycle) cubic-bezier(.4,0,.6,1) infinite; }
@keyframes geo2-turn {
  0%, 43%, 71%, 100% { transform: rotateY(0deg); }
  47%, 66.5% { transform: rotateY(180deg); }
}

/* Object-recognition HUD: one synchronized scan for every catalog entry. */
.guide-scanner { width: 100%; display: grid; grid-template-columns: minmax(56px, 30%) minmax(0, 1fr); gap: 10px; align-items: center; height: 94px; font: 8px/1.4 monospace; letter-spacing: 0; color: #c8cfe7; }
.guide-scan-object { height: 77px; position: relative; display: grid; place-items: center; border: 1px solid #bda0ff55; border-radius: 5px; background: radial-gradient(ellipse, #9075d425, #10172255); }
.guide-scan-object::before, .guide-scan-object::after { content: ""; position: absolute; width: 10px; height: 10px; border-color: #d7c2ff; border-style: solid; pointer-events: none; }
.guide-scan-object::before { top: -2px; left: -2px; border-width: 2px 0 0 2px; }
.guide-scan-object::after { bottom: -2px; right: -2px; border-width: 0 2px 2px 0; }
.guide-scanner .guide-tab-preview { width: 100%; height: 60px; object-fit: contain; }
.guide-scan-beam { position: absolute; inset: 15% 3px auto; height: 1px; background: #ceb8ff; box-shadow: 0 0 5px #c6a6ff; animation: guide-hud-scan 2.5s ease-in-out infinite; opacity: .5; }
.guide-scan-id { position: absolute; bottom: 2px; left: 4px; color: #b69ace; font-size: 6px; }
.guide-scan-readout { min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 3px 0 3px 6px; border-left: 1px solid #a88ad844; background: linear-gradient(90deg, #141c28dd, #141c2855); }
.guide-scan-status { color: #9b91b9; font-size: 6px; letter-spacing: 1px; }
.guide-scan-name { color: #e3d4ff; font-size: 10px; line-height: 1.15; font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.guide-scan-meta { color: #91d4cf; font-size: 6px; letter-spacing: .2px; }
.guide-scan-analysis { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; min-height: 34px; font-size: 8px; line-height: 1.4; }
.guide-scanner.is-typing .guide-scan-analysis::after { content: "▏"; color: #deccff; }
.guide-scan-progress { height: 2px; background: #bba0ee22; margin-top: 2px; }
.guide-scan-progress i { display: block; height: 100%; background: linear-gradient(90deg, #8ba9e7, #c8a6ff); transform-origin: left; }
@keyframes guide-hud-scan { 0%, 100% { transform: translateY(0); opacity: .15; } 50% { transform: translateY(49px); opacity: .65; } }
@media (prefers-reduced-motion: reduce) { .guide-scan-beam { animation: none; opacity: 0; } }
html.account-reduced-motion .guide-scan-beam { animation: none; opacity: 0; }
/* Mobile cards normally shorten the art row; the scanner needs room for its readout. */
.game-card[data-game="guide"] .card-art { min-height: 100px; }

/* Status-specific edge effects leave the center clear and never intercept input. */
.chaos-status-layer[hidden] { display: none; }
.chaos-status-layer {
  color: var(--status-color);
  opacity: var(--status-strength, 1);
  background: radial-gradient(ellipse at center, transparent 55%, color-mix(in srgb, var(--status-color) 11%, transparent) 100%);
  box-shadow: inset 0 0 65px color-mix(in srgb, var(--status-color) 18%, transparent);
}
.chaos-effect-frame { position: absolute; inset: 10px; border: 1px solid currentColor; border-radius: 24px; opacity: .25; }
.chaos-effect-particle { position: absolute; width: 22px; height: 22px; opacity: .45; animation: chaos-status-drift 5s ease-in-out infinite alternate; animation-delay: var(--delay); }
.chaos-effect-particle svg { width: 100%; height: 100%; fill: currentColor; }
.chaos-effect-particle:nth-of-type(1) { left: 2%; top: 15%; }
.chaos-effect-particle:nth-of-type(2) { left: 4%; top: 45%; }
.chaos-effect-particle:nth-of-type(3) { left: 2%; top: 76%; }
.chaos-effect-particle:nth-of-type(4) { left: 25%; top: 3%; }
.chaos-effect-particle:nth-of-type(5) { right: 2%; top: 18%; }
.chaos-effect-particle:nth-of-type(6) { right: 4%; top: 48%; }
.chaos-effect-particle:nth-of-type(7) { right: 2%; top: 79%; }
.chaos-effect-particle:nth-of-type(8) { right: 25%; bottom: 3%; }
.chaos-screen-embers { background: linear-gradient(0deg, #ff8c3420, transparent 22%); }
.chaos-screen-embers .chaos-effect-particle { animation-name: chaos-embers-rise; animation-duration: 4s; }
.chaos-screen-bubbles .chaos-effect-particle { border: 1px solid currentColor; border-radius: 50%; padding: 5px; animation-name: chaos-bubble-rise; animation-duration: 6s; }
.chaos-screen-reverse .chaos-effect-particle { animation-name: chaos-reverse-drift; animation-duration: 4s; }
.chaos-screen-reverse .chaos-effect-frame { border-style: dashed; }
.chaos-screen-shield .chaos-effect-frame { border-width: 3px; border-radius: 40px; animation: chaos-shield-breathe 4s ease-in-out infinite alternate; }
.chaos-screen-protection .chaos-effect-particle { border: 1px solid currentColor; border-radius: 50%; padding: 8px; animation-name: chaos-bubble-rise; animation-duration: 7s; }
.chaos-screen-protection .chaos-effect-frame { border-style: double; border-width: 4px; border-radius: 50px; }
.chaos-screen-fall .chaos-effect-particle { animation: chaos-status-fall 2.5s linear infinite; animation-delay: var(--delay); }
.chaos-screen-float .chaos-effect-particle { animation-name: chaos-status-drift; animation-duration: 10s; }
.chaos-screen-float .chaos-effect-frame { border-style: dotted; }
.chaos-screen-stasis .chaos-effect-particle { animation: none; opacity: .5; }
.chaos-screen-stasis .chaos-effect-frame { border-radius: 2px; border-style: dashed; }
.chaos-screen-repellent .chaos-effect-frame { animation: chaos-repellent-ring 4s ease-out infinite; border-radius: 60px; }
.chaos-screen-amber .chaos-effect-particle { animation: none; border: 1px solid currentColor; padding: 5px; transform: rotate(12deg); }
.chaos-screen-amber .chaos-effect-frame { border-style: double; border-width: 3px; border-radius: 4px; }
.chaos-screen-target .chaos-effect-frame { border-style: dashed; border-radius: 0; animation: chaos-target-focus 3s ease-in-out infinite alternate; }
.chaos-screen-target .chaos-effect-particle { animation-name: chaos-target-drift; animation-duration: 3s; }
.chaos-screen-danger .chaos-effect-frame { inset: 3px; border: 5px dashed currentColor; border-radius: 0; opacity: .5; }
.chaos-screen-danger .chaos-effect-particle { animation-name: chaos-danger-breathe; animation-duration: 3s; }
.chaos-screen-shrink .chaos-effect-frame { border-width: 3px; border-radius: 0; animation: chaos-target-focus 4s ease-in-out infinite alternate; }
.chaos-screen-shrink .chaos-effect-particle { animation-name: chaos-target-drift; }
.chaos-screen-leaves .chaos-effect-particle { animation-name: chaos-leaf-drift; animation-duration: 8s; }
.chaos-screen-leaves .chaos-effect-frame { border-radius: 70px 20px; border-style: dotted; }
.chaos-screen-speed .chaos-effect-particle { animation-name: chaos-speed-drift; animation-duration: 1.8s; }
.chaos-screen-speed .chaos-effect-frame { border-style: dashed; }
@keyframes chaos-status-drift { from { transform: translateY(-9px); } to { transform: translateY(9px); } }
@keyframes chaos-embers-rise { from { transform: translateY(20px) scale(.8); opacity: .6; } to { transform: translateY(-45px) scale(.4); opacity: .15; } }
@keyframes chaos-bubble-rise { from { transform: translateY(18px) scale(.9); } to { transform: translateY(-28px) scale(1.15); } }
@keyframes chaos-reverse-drift { from { transform: translateX(-10px) rotate(-8deg); } to { transform: translateX(10px) rotate(8deg); } }
@keyframes chaos-shield-breathe { to { opacity: .45; box-shadow: inset 0 0 22px color-mix(in srgb, currentColor 15%, transparent); } }
@keyframes chaos-status-fall { from { transform: translateY(-24px); opacity: .15; } to { transform: translateY(45px); opacity: .55; } }
@keyframes chaos-repellent-ring { from { inset: 24px; opacity: .1; } to { inset: 3px; opacity: .4; } }
@keyframes chaos-target-focus { from { inset: 8px; opacity: .2; } to { inset: 26px; opacity: .4; } }
@keyframes chaos-target-drift { to { transform: translate(8px, 6px) scale(.85); } }
@keyframes chaos-danger-breathe { to { opacity: .25; transform: scale(1.1); } }
@keyframes chaos-leaf-drift { from { transform: translate(-5px,-12px) rotate(-20deg); } to { transform: translate(5px,16px) rotate(25deg); } }
@keyframes chaos-speed-drift { from { transform: translateX(-15px); opacity: .15; } to { transform: translateX(15px); opacity: .6; } }

/* A layered recognition lab behind the live catalog readout. */
.guide-lab .guide-lab-aura { transform-origin: 76px 91px; animation: guide-lab-breathe 8s ease-in-out infinite alternate; }
.guide-lab .guide-lab-radar { transform-origin: 76px 91px; animation: guide-lab-turn 40s linear infinite; }
.guide-lab .guide-lab-sweep { transform-origin: 76px 91px; animation: guide-lab-turn 10s linear infinite; }
.guide-lab .guide-lab-packets { animation: guide-lab-packets 5s linear infinite; }
.guide-lab .guide-lab-telemetry { animation: guide-lab-signal 3.5s ease-in-out infinite alternate; }
.guide-lab .guide-lab-samples { animation: guide-lab-float 7s ease-in-out infinite alternate; }
.guide-lab .guide-lab-locks { animation: guide-lab-signal 2.5s ease-in-out infinite alternate; }
.guide-lab .guide-lab-dust { animation: guide-lab-float 12s ease-in-out -3s infinite alternate; }
.guide-lab .guide-lab-scan { animation: guide-lab-scan 7s linear infinite; }
@keyframes guide-lab-breathe { from { opacity: .55; transform: scale(.95); } to { opacity: 1; transform: scale(1.08); } }
@keyframes guide-lab-turn { to { transform: rotate(360deg); } }
@keyframes guide-lab-packets { to { stroke-dashoffset: -172; } }
@keyframes guide-lab-signal { from { opacity: .2; } to { opacity: .5; } }
@keyframes guide-lab-float { from { transform: translateY(-3px); } to { transform: translateY(3px); } }
@keyframes guide-lab-scan { 0% { transform: translateY(15px); opacity: 0; } 12%, 75% { opacity: 1; } 100% { transform: translateY(180px); opacity: 0; } }

/* Labels use the shared catalog classification in the scanner and full guide. */
.block-disposition[data-disposition="harmful"] { color: #ff9caa; }
.block-disposition[data-disposition="neutral"] { color: #d4d8e4; }
.block-disposition[data-disposition="helpful"] { color: #91edb2; }
.block-guide-card .block-disposition { font-size: 12px; font-weight: 700; margin: 3px 0 8px; }
.guide-scan-disposition { font-size: 7px; line-height: 1.2; font-weight: 700; letter-spacing: .4px; }
.guide-scanner { height: 106px; }
.game-card[data-game="guide"] .card-art { min-height: 112px; }

/* Shared status colors and icons make the guide key match gameplay. */
.chaos-screen-key { margin: 22px 0; padding: clamp(14px, 3vw, 22px); border: 1px solid #465069; border-radius: 12px; background: #101827; }
.chaos-screen-key h4 { margin: 0 0 8px; font-size: 21px; }
.chaos-screen-key > p { line-height: 1.5; }
#chaos-screen-key-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 245px), 1fr)); gap: 12px; list-style: none; padding: 0; margin: 18px 0 0; }
#chaos-screen-key-list li { display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding: 14px; border: 1px solid #34415a; border-left: 3px solid var(--effect-color); border-radius: 8px; background: #141e31; }
#chaos-screen-key-list svg { flex: 0 0 24px; width: 24px; height: 24px; fill: var(--effect-color); margin-top: 2px; }
#chaos-screen-key-list strong { display: block; color: var(--effect-color); font-size: 15px; }
.chaos-key-appearance { display: block; margin-top: 5px; color: var(--effect-color); font-size: 12px; line-height: 1.4; }
#chaos-screen-key-list p { margin: 6px 0 0; font-size: 13px; line-height: 1.5; }

.chaos-screen-regeneration .chaos-effect-particle { animation-name: chaos-bubble-rise; animation-duration: 3s; }
.chaos-screen-regeneration .chaos-effect-frame { border-style: dotted; border-width: 3px; animation: chaos-shield-breathe 2s ease-in-out infinite alternate; }