/* ===== FX ===== */
/* Overlay effects layer, dice gloss, and celebration extras (see js/fx.js) */

.fx-canvas,
.fx-layer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3050;
}

.fx-layer {
  overflow: hidden;
}

/* ----- Dice polish ----- */

/* Specular highlight + soft bevel on every face (works across themes) */
.die-face::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 22% 12%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(160deg, rgba(255,255,255,0) 55%, rgba(0,0,0,0.07) 100%);
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,0.5),
    inset 0 -3px 4px rgba(0,0,0,0.08);
}

/* Drilled-in pips */
.die-face .pip {
  box-shadow: inset 0 1.5px 2px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.6);
}

/* Held dice: breathing golden glow */
.die-container.held .die-face {
  animation: fxHeldGlow 1.8s ease-in-out infinite;
}

@keyframes fxHeldGlow {
  0%, 100% { box-shadow: 0 0 0 3px var(--tile-orange), 0 0 12px var(--tile-orange), inset 0 0 8px rgba(0,0,0,0.1); }
  50%      { box-shadow: 0 0 0 3px var(--tile-orange), 0 0 22px var(--tile-yellow), inset 0 0 8px rgba(0,0,0,0.1); }
}

/* Combo flash on all dice */
.die-container.fx-combo .die-face::after {
  animation: fxComboShine 0.9s ease-out;
}

@keyframes fxComboShine {
  0%   { background-color: rgba(255,235,150,0.0); }
  25%  { background-color: rgba(255,235,150,0.55); }
  100% { background-color: rgba(255,235,150,0.0); }
}

/* Dice exit: tumble away instead of just shrinking */
.die-container.dice-exit {
  animation-name: fxDiceExit;
}

@keyframes fxDiceExit {
  0%   { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
  30%  { opacity: 1; transform: translateY(-8px) rotate(-8deg) scale(1.04); }
  100% { opacity: 0; transform: translateY(34px) rotate(28deg) scale(0.45); }
}

/* ----- Scorecard ----- */

/* Selected score slot gently pulses */
.icebox.selected {
  animation: fxSelectedPulse 1.2s ease-in-out infinite;
}

@keyframes fxSelectedPulse {
  0%, 100% { box-shadow: inset 0 3px 0 var(--ice-shadow), 0 0 0 3px var(--tile-orange); }
  50%      { box-shadow: inset 0 3px 0 var(--ice-shadow), 0 0 0 3px var(--tile-yellow), 0 0 16px rgba(249,199,79,0.85); }
}

/* Roll button: light sweep on press */
.btn-roll {
  overflow: hidden;
}

.btn-roll::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-20deg);
  pointer-events: none;
  opacity: 0;
}

.btn-roll.fx-sweep::after {
  animation: fxSweep 0.6s ease-out;
}

@keyframes fxSweep {
  0%   { left: -60%; opacity: 1; }
  100% { left: 130%; opacity: 1; }
}

/* ----- Floating text ----- */

.fx-float-text {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: clamp(20px, 3.6vh, 30px);
  color: #fff;
  -webkit-text-stroke: 1px rgba(160,90,0,0.35);
  text-shadow: 0 2px 0 #c47f10, 0 0 14px rgba(255,200,60,0.9);
  white-space: nowrap;
  animation: fxFloatUp 1.25s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}

.fx-float-text.fx-big {
  font-size: clamp(26px, 4.8vh, 40px);
  color: #fff7d1;
}

.fx-float-text.fx-bot {
  text-shadow: 0 2px 0 #b91c1c, 0 0 14px rgba(255,100,100,0.9);
  -webkit-text-stroke: 1px rgba(150,0,0,0.3);
}

.fx-float-text.fx-bonus {
  color: #eafff6;
  text-shadow: 0 2px 0 #0d7a8a, 0 0 16px rgba(120,255,200,0.95);
  -webkit-text-stroke: 1px rgba(0,90,80,0.3);
}

.fx-float-text.fx-zero {
  color: rgba(255,255,255,0.85);
  text-shadow: 0 2px 0 rgba(0,50,70,0.35);
  -webkit-text-stroke: 0;
  animation-name: fxSink;
}

@keyframes fxFloatUp {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  18%  { opacity: 1; transform: translate(-50%, -80%) scale(1.25); }
  35%  { transform: translate(-50%, -95%) scale(1); }
  75%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -230%) scale(0.95); }
}

@keyframes fxSink {
  0%   { opacity: 0; transform: translate(-50%, -80%) scale(0.8); }
  20%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, 20%) scale(0.9) rotate(8deg); }
}

/* ----- Combo callout ----- */

.fx-callout {
  position: absolute;
  transform: translate(-50%, -100%);
  animation: fxCallout 1.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.fx-callout-text {
  display: block;
  position: relative;
  overflow: hidden;
  padding: 0.25em 0.8em;
  border-radius: 999px;
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: clamp(16px, 2.8vh, 24px);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0,0,0,0.2);
  background: linear-gradient(180deg, #4ecdc4 0%, #1a9ab8 100%);
  box-shadow: 0 4px 0 #0d6f80, 0 8px 18px rgba(0,0,0,0.25);
}

.fx-callout.fx-epic .fx-callout-text {
  background: linear-gradient(180deg, #f9c74f 0%, #f0a020 100%);
  box-shadow: 0 4px 0 #c47f10, 0 0 24px rgba(255,200,60,0.8), 0 8px 18px rgba(0,0,0,0.25);
}

.fx-callout-text::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -50%;
  width: 35%;
  background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,0.8), rgba(255,255,255,0));
  transform: skewX(-20deg);
  animation: fxCalloutShine 0.8s 0.25s ease-out forwards;
}

@keyframes fxCallout {
  0%   { opacity: 0; transform: translate(-50%, -40%) scale(0.3) rotate(-6deg); }
  20%  { opacity: 1; transform: translate(-50%, -100%) scale(1.1) rotate(2deg); }
  32%  { transform: translate(-50%, -100%) scale(1) rotate(0deg); }
  80%  { opacity: 1; transform: translate(-50%, -110%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -150%) scale(0.85); }
}

@keyframes fxCalloutShine {
  0%   { left: -50%; }
  100% { left: 130%; }
}

/* ----- Jatzee extras ----- */

.fx-flash {
  position: absolute;
  inset: 0;
  animation: fxFlash 0.6s ease-out forwards;
}

@keyframes fxFlash {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  100% { opacity: 0; }
}

.fx-rays {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 180vmax;
  height: 180vmax;
  margin: -90vmax 0 0 -90vmax;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255,220,120,0.32) 0deg 9deg, rgba(255,220,120,0) 9deg 22.5deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0,0,0,0.6) 25%, transparent 55%);
  mask-image: radial-gradient(circle, #000 0%, rgba(0,0,0,0.6) 25%, transparent 55%);
  animation: fxRays 3.3s ease-out forwards;
}

@keyframes fxRays {
  0%   { opacity: 0; transform: rotate(0deg) scale(0.3); }
  15%  { opacity: 1; transform: rotate(20deg) scale(1); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(110deg) scale(1.1); }
}

/* ----- Game over ----- */

.game-over-score-box {
  position: relative;
  overflow: hidden;
}

.game-over-score-box.fx-shine::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -50%;
  width: 35%;
  background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,0.7), rgba(255,255,255,0));
  transform: skewX(-20deg);
  pointer-events: none;
  animation: fxCalloutShine 0.9s ease-out forwards;
}

/* ----- Reduced motion ----- */

@media (prefers-reduced-motion: reduce) {
  .die-container.held .die-face,
  .icebox.selected,
  .fx-rays {
    animation: none;
  }
}

/* ===== BOT SPEECH BUBBLE ===== */

.bot-bubble {
  --bubble-a: #8b5cf6;
  --bubble-b: #6d28d9;
  --bubble-edge: #4c1d95;
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(330px, calc(100vw - 20px));
  padding: 10px 16px 10px 10px;
  border-radius: 20px;
  background: linear-gradient(180deg, var(--bubble-a) 0%, var(--bubble-b) 100%);
  box-shadow: 0 5px 0 var(--bubble-edge), 0 12px 28px rgba(0,0,0,0.3);
  color: #fff;
  font-family: 'Nunito', sans-serif;
  opacity: 0;
  transform: scale(0.3);
  transition: opacity 0.18s ease, transform 0.42s cubic-bezier(0.34, 1.7, 0.5, 1);
}

.bot-bubble.visible {
  opacity: 1;
  transform: scale(1);
}

.bot-bubble.leaving {
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s ease, transform 0.25s ease-in;
}

.bot-bubble.mood-mad { --bubble-a: #fb7185; --bubble-b: #e11d48; --bubble-edge: #9f1239; }
.bot-bubble.mood-meh { --bubble-a: #64748b; --bubble-b: #475569; --bubble-edge: #334155; }

/* Tail */
.bot-bubble::before {
  content: '';
  position: absolute;
  left: var(--tail-x, 50%);
  width: 18px;
  height: 18px;
  margin-left: -9px;
  border-radius: 3px;
  transform: rotate(45deg);
}

.bot-bubble.place-below::before {
  top: -7px;
  background: var(--bubble-a);
}

.bot-bubble.place-above::before {
  bottom: -7px;
  background: var(--bubble-b);
  box-shadow: 4px 4px 0 var(--bubble-edge);
}

.bot-bubble-avatar {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: rgba(255,255,255,0.18);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bot-bubble.visible .bot-bubble-avatar {
  animation: fxAvatarBob 0.5s ease-in-out infinite alternate;
}

@keyframes fxAvatarBob {
  from { transform: translateY(1px) rotate(-3deg); }
  to   { transform: translateY(-2px) rotate(3deg); }
}

.bot-face {
  width: 38px;
  height: 38px;
  overflow: visible;
}

.bot-head { fill: #f1f5f9; }
.bot-screen { fill: #1e1b2e; }
.bot-antenna { stroke: #f1f5f9; stroke-width: 2.5; stroke-linecap: round; }
.bot-antenna-light { fill: #ff4d6d; animation: fxAntenna 0.9s steps(2) infinite; }
.bot-eye { fill: #5eead4; transform-box: fill-box; transform-origin: center; animation: fxBlink 3.2s infinite; }
.bot-brow { stroke: #5eead4; stroke-width: 2.2; stroke-linecap: round; transform-box: fill-box; transform-origin: center; }
.bot-mouth { fill: #5eead4; transform-box: fill-box; transform-origin: center; }

.bot-bubble.talking .bot-mouth { animation: fxTalk 0.16s ease-in-out infinite alternate; }

/* Mood faces */
.mood-gloat .bot-brow-l { transform: translateY(-1.5px) rotate(-12deg); }
.mood-gloat .bot-brow-r { transform: translateY(1px) rotate(8deg); }
.mood-gloat .bot-eye    { ry: 2.2px; }
.mood-mad .bot-brow-l   { transform: translateY(1px) rotate(22deg); }
.mood-mad .bot-brow-r   { transform: translateY(1px) rotate(-22deg); }
.mood-mad .bot-eye,
.mood-mad .bot-mouth    { fill: #ff6b81; }
.mood-mad .bot-brow     { stroke: #ff6b81; }
.mood-meh .bot-brow     { transform: translateY(1.5px); }
.mood-meh .bot-eye      { ry: 1.6px; }

.bot-bubble.mood-mad.visible .bot-bubble-avatar { animation: fxMadShake 0.35s 0.3s ease-in-out 2; }

@keyframes fxBlink {
  0%, 92%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.1); }
}

@keyframes fxTalk {
  from { transform: scaleY(0.6) scaleX(0.9); }
  to   { transform: scaleY(2.4) scaleX(0.7); }
}

@keyframes fxAntenna {
  0%   { opacity: 1; }
  100% { opacity: 0.25; }
}

@keyframes fxMadShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px) rotate(-6deg); }
  75% { transform: translateX(4px) rotate(6deg); }
}

.bot-bubble-text {
  font-size: clamp(14px, 2.2vh, 18px);
  font-weight: 800;
  line-height: 1.25;
  text-shadow: 0 1px 0 rgba(0,0,0,0.25);
}

/* Untyped remainder holds the space so the bubble never resizes mid-sentence */
.bot-bubble-ghost {
  visibility: hidden;
}

/* ===== RESULTS SCREEN ===== */

.game-over-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.game-over-score-box {
  z-index: 1;
  flex-direction: column;
}

/* Rotating light rays behind the score */
.game-over-halo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 230%;
  aspect-ratio: 1;
  translate: -50% -50%;
  transform: scale(0.2);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  background:
    radial-gradient(circle, rgba(255,240,180,0.55) 0%, rgba(255,240,180,0) 45%),
    repeating-conic-gradient(from 0deg, rgba(255,255,255,0.22) 0deg 10deg, rgba(255,255,255,0) 10deg 24deg);
  -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 68%);
  mask-image: radial-gradient(circle, #000 20%, transparent 68%);
  transition: opacity 0.8s ease 0.3s, transform 0.9s cubic-bezier(0.34, 1.4, 0.64, 1) 0.3s;
}

.game-over-overlay.visible .game-over-halo {
  opacity: 1;
  transform: scale(1);
  animation: fxHaloSpin 24s linear infinite;
}

@keyframes fxHaloSpin {
  from { rotate: 0deg; }
  to   { rotate: 360deg; }
}

.result-win .game-over-halo,
.result-best .game-over-halo {
  background:
    radial-gradient(circle, rgba(255,215,0,0.75) 0%, rgba(255,200,60,0) 48%),
    repeating-conic-gradient(from 0deg, rgba(255,226,120,0.45) 0deg 10deg, rgba(255,226,120,0) 10deg 24deg);
}

.result-lose .game-over-halo {
  background: radial-gradient(circle, rgba(20,40,70,0.35) 0%, rgba(20,40,70,0) 55%);
}

/* Spotlight / vignette over the theme background */
.game-over-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(ellipse 80% 55% at 50% 30%, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,30,50,0.28) 100%);
}

.game-over-overlay.result-lose::before {
  background: radial-gradient(ellipse at 50% 40%, rgba(0,0,0,0) 30%, rgba(10,20,40,0.45) 100%);
}

/* Score box labels */
.game-over-score-label,
.game-over-score-sub {
  position: absolute;
  text-align: center;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 2px 0 var(--text-shadow);
  font-size: clamp(11px, 3vw, 17px);
  white-space: nowrap;
}

.game-over-score-label {
  top: 11%;
  left: 0;
  right: 0;
}

.game-over-score-sub {
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,0.14);
}

.game-over-score-sub:empty {
  display: none;
}

/* Counting: number thrums, glow builds */
.game-over-score-box.counting .game-over-score-value {
  animation: fxCountThrum 0.12s linear infinite alternate;
}

.game-over-score-box.counting {
  animation: fxGlowBuild 2.4s ease-in forwards;
}

@keyframes fxCountThrum {
  from { transform: scale(1); }
  to   { transform: scale(1.04); }
}

@keyframes fxGlowBuild {
  from { box-shadow: 0 8px 0 var(--tile-shadow), 0 20px 40px rgba(0,0,0,0.2); }
  to   { box-shadow: 0 8px 0 var(--tile-shadow), 0 20px 40px rgba(0,0,0,0.2), 0 0 50px rgba(255,220,100,0.9); }
}

/* Landing slam */
.game-over-score-box.landed {
  animation: fxSlam 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes fxSlam {
  0%   { transform: scale(1.14); }
  40%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

/* Losing: the box droops and loses some colour */
.game-over-overlay.result-lose.show-message .game-over-score-box {
  transform: rotate(-4deg) scale(0.96);
  filter: saturate(0.65) brightness(0.95);
  transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.8s ease;
}

.game-over-overlay.result-lose .game-over-score-box.landed {
  animation: none;
}

/* Result message */
.game-over-overlay.show-message .game-over-message {
  animation: fxMessagePop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.result-win .game-over-message,
.result-best .game-over-message {
  color: #fff8dc;
  text-shadow: 0 3px 0 #c47f10, 0 0 24px rgba(255,210,80,0.9);
}

.game-over-overlay.result-lose.show-message .game-over-message {
  animation: fxMessageSlump 0.7s ease-out;
}

@keyframes fxMessagePop {
  0%   { transform: translateY(20px) scale(0.6); }
  60%  { transform: translateY(0) scale(1.12); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes fxMessageSlump {
  0%   { transform: translateY(-14px); }
  50%  { transform: translateY(4px) rotate(-1.5deg); }
  100% { transform: translateY(0) rotate(0); }
}

/* Badges stamped onto the score box corner */
.game-over-badges {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -60%);
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
}

.game-over-badges:empty {
  display: none;
}

.game-over-badge {
  padding: 5px 11px;
  border-radius: 10px;
  font-size: clamp(11px, 2.8vw, 15px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(0,0,0,0.25);
  opacity: 0;
  --tilt: -6deg;
  transform: rotate(var(--tilt)) scale(2.4);
  animation: fxStamp 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) forwards;
}

.game-over-badge.badge-best   { background: linear-gradient(180deg, #ff6b6b, #e11d48); box-shadow: 0 3px 0 #9f1239, 0 0 16px rgba(255,80,100,0.6); }
.game-over-badge.badge-jatzee { background: linear-gradient(180deg, #a78bfa, #7c3aed); box-shadow: 0 3px 0 #5b21b6; }
.game-over-badge.badge-bonus  { background: linear-gradient(180deg, #34d399, #059669); box-shadow: 0 3px 0 #065f46; }

.game-over-badge:nth-child(2) { --tilt: 5deg; }
.game-over-badge:nth-child(3) { --tilt: -3deg; }

@keyframes fxStamp {
  0%   { opacity: 0; transform: rotate(calc(var(--tilt) * 2)) scale(2.4); }
  60%  { opacity: 1; transform: rotate(var(--tilt)) scale(0.92); }
  100% { opacity: 1; transform: rotate(var(--tilt)) scale(1); }
}

/* Buttons rise in one after another */
.game-over-buttons > .btn-play-again,
.game-over-buttons > .share-action-row > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.1s;
}

.game-over-overlay.show-message .game-over-buttons > .btn-play-again,
.game-over-overlay.show-message .game-over-buttons > .share-action-row > * {
  opacity: 1;
  transform: translateY(0);
}

.game-over-overlay.show-message .game-over-buttons > .btn-play-again { transition-delay: 0.25s, 0.25s, 0s; }
.game-over-overlay.show-message .share-action-row > :nth-child(1)  { transition-delay: 0.38s, 0.38s, 0s; }
.game-over-overlay.show-message .share-action-row > :nth-child(2)  { transition-delay: 0.5s, 0.5s, 0s; }

/* Keep the original press feel */
.game-over-overlay.show-message .game-over-buttons > .btn-play-again:hover,
.game-over-overlay.show-message .share-action-row > :hover {
  transform: translateY(-2px);
  transition: transform 0.1s, box-shadow 0.1s;
}

.game-over-overlay.show-message .game-over-buttons > .btn-play-again:active,
.game-over-overlay.show-message .share-action-row > :active {
  transform: translateY(3px);
  transition: transform 0.1s, box-shadow 0.1s;
}

/* Play Again: periodic shine */
.btn-play-again {
  position: relative;
  overflow: hidden;
}

.btn-play-again::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 35%;
  background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,0.75), rgba(255,255,255,0));
  transform: skewX(-20deg);
  pointer-events: none;
}

.game-over-overlay.show-message .btn-play-again::after {
  animation: fxPeriodicShine 3.2s 1s ease-in-out infinite;
}

@keyframes fxPeriodicShine {
  0%   { left: -60%; }
  30%  { left: 130%; }
  100% { left: 130%; }
}

@media (prefers-reduced-motion: reduce) {
  .game-over-halo,
  .game-over-score-box.counting,
  .game-over-score-box.counting .game-over-score-value,
  .btn-play-again::after,
  .bot-bubble.visible .bot-bubble-avatar {
    animation: none !important;
  }
}

/* ===== THEME ATMOSPHERES (js/atmosphere.js) ===== */
/* The canvas sits above each screen's theme background and beneath all of its content.
   isolation keeps its z-index:-1 inside the screen instead of behind the page. */
.app,
.home-stage {
  isolation: isolate;
}

.app {
  position: relative;
}

.atmo-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}