#games .game-switch{
  display:flex;
  align-items:center;
  gap:18px;
  margin:-8px 0 24px;
}
#games .game-switch-btn{
  background:none;
  border:none;
  font-family:inherit;
  font-size:13px;
  letter-spacing:1px;
  color:var(--green-dim);
  text-transform:uppercase;
  cursor:pointer;
  padding:0;
  transition:color 0.15s ease, text-shadow 0.15s ease;
}
#games .game-switch-btn:hover,
#games .game-switch-btn.active{
  color:var(--green-bright);
  text-shadow:0 0 6px var(--glow);
}
#games .game-panel{ display:none; }
#games .game-panel.show{ display:block; }

#games #panel-mines{
  background:color-mix(in srgb, var(--void) 78%, transparent);
  padding:10px 8px 12px;
}

#games .ms-hud,
#games .tx-hud{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
}
#games .ms-timer{
  font-family:var(--font-display), monospace;
  font-size:34px;
  color:var(--green-bright);
  text-shadow:0 0 10px var(--glow);
  letter-spacing:2px;
}
#games .ms-timer.low{
  color:var(--red);
  text-shadow:0 0 10px rgba(255,77,77,0.7);
  animation:games-timer-pulse 0.6s infinite;
}
@keyframes games-timer-pulse{ 50%{ opacity:0.4; } }
#games .ms-stage{ font-size:11.5px; color:var(--green-dim); }
#games .ms-lives{ display:flex; gap:6px; font-size:18px; }
#games .ms-lives .life{ filter:drop-shadow(0 0 4px var(--glow)); }
#games .ms-lives .life.lost{ opacity:0.25; filter:none; }

#games #msShakeWrap,
#games #txWell{ position:relative; }
#games #msShakeWrap.shake,
#games #txWell.shake{ animation:games-ms-shake 0.4s; }
@keyframes games-ms-shake{
  0%,100%{ transform:translate(0,0); }
  10%{ transform:translate(-6px,3px); }
  20%{ transform:translate(6px,-4px); }
  30%{ transform:translate(-5px,-3px); }
  40%{ transform:translate(5px,4px); }
  50%{ transform:translate(-4px,2px); }
  60%{ transform:translate(4px,-2px); }
  70%{ transform:translate(-3px,3px); }
  80%{ transform:translate(3px,-2px); }
  90%{ transform:translate(-2px,1px); }
}

#games #reverseOverlay,
#games #txReverseOverlay{
  position:absolute; inset:-8px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  background:transparent;
  opacity:0;
  pointer-events:none;
  z-index:5;
}
#games #reverseOverlay.flash,
#games #txReverseOverlay.flash{
  animation:games-rewind-wash 0.9s ease-out;
}
@keyframes games-rewind-wash{
  0%{ opacity:0; background:color-mix(in srgb, var(--green) 0%, transparent); }
  8%{ opacity:1; background:color-mix(in srgb, var(--green) 14%, transparent); }
  22%{ opacity:1; background:color-mix(in srgb, var(--green) 8%, transparent); }
  100%{ opacity:0; background:color-mix(in srgb, var(--green) 0%, transparent); }
}
#games #reverseOverlay.flash::before,
#games #txReverseOverlay.flash::before{
  content:"◀◀   ◀◀   ◀◀   ◀◀   ◀◀   ◀◀   ◀◀   ◀◀";
  position:absolute;
  left:0; top:50%;
  transform:translateY(-50%);
  font-family:var(--font-display), monospace;
  font-size:34px;
  letter-spacing:22px;
  color:var(--green);
  text-shadow:0 0 10px var(--glow);
  white-space:nowrap;
  opacity:0.35;
  animation:games-rewind-marquee 0.28s linear infinite;
}
@keyframes games-rewind-marquee{
  0%{ transform:translate(8%, -50%); }
  100%{ transform:translate(-18%, -50%); }
}
#games .reverse-text,
#games .reverse-text{
  position:relative;
  z-index:1;
  font-family:var(--font-display), monospace;
  font-size:28px;
  letter-spacing:6px;
  color:var(--green-bright);
  text-shadow:0 0 12px var(--glow);
  opacity:0;
}
#games #reverseOverlay.flash .reverse-text,
#games #txReverseOverlay.flash .reverse-text{
  animation:games-rewind-text-show 0.9s ease-out;
}
@keyframes games-rewind-text-show{
  0%,10%{ opacity:0; transform:scale(1.4); }
  22%{ opacity:1; transform:scale(1); }
  70%{ opacity:1; }
  100%{ opacity:0; }
}
#games .ms-timer.rewinding,
#games #txTime.rewinding{
  animation:games-timer-rewind 0.9s steps(5,end);
}
@keyframes games-timer-rewind{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-4px); opacity:0.55; }
  40%{ transform:translateX(3px); }
  60%{ transform:translateX(-5px); opacity:0.7; }
  80%{ transform:translateX(2px); }
}

#games .rarrow,
#games .rarrow{
  position:absolute;
  font-family:var(--font-display), monospace;
  font-size:22px;
  letter-spacing:-2px;
  color:var(--green-bright);
  text-shadow:0 0 8px var(--glow);
  pointer-events:none;
  z-index:6;
  animation:games-rarrow-left 0.55s linear forwards;
}
@keyframes games-rarrow-left{
  0%{ transform:translateX(0) scale(1); opacity:0; }
  12%{ opacity:1; }
  100%{ transform:translateX(-200px) scale(0.85); opacity:0; }
}

#games .cell.exploding{
  animation:games-cell-boom 0.25s ease-out;
}
@keyframes games-cell-boom{
  0%{ background:rgba(255,90,40,0.9); transform:scale(1); }
  50%{ background:rgba(255,150,40,1); transform:scale(1.15); }
  100%{ background:color-mix(in srgb, var(--red) 12%, transparent); transform:scale(1); }
}

#games .ms-meta{
  display:flex; justify-content:space-between; align-items:center;
  font-size:11.5px; margin-bottom:14px; color:var(--green-dim);
}
#games .ms-meta .reset-btn,
#games .tx-reset{
  background:none; border:1px solid var(--line); color:var(--green-dim);
  font-family:inherit;
  padding:4px 10px; font-size:10.5px; cursor:pointer; text-transform:uppercase;
}
#games .ms-meta .reset-btn:hover,
#games .tx-reset:hover{ border-color:var(--green); color:var(--green-bright); }
#games .ms-meta .reset-btn:disabled{
  opacity:0.35; cursor:not-allowed;
}
#games .ms-meta .reset-btn:disabled:hover{ border-color:var(--line); color:var(--green-dim); }
#games .ms-meta-actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
#games .ms-demo-label{
  font-size:10.5px; color:var(--green-dim); text-transform:uppercase; letter-spacing:1px;
}
#games .ms-demo-pick{
  background:var(--void); border:1px solid var(--line); color:var(--green-dim);
  font-family:inherit; font-size:10.5px; text-transform:uppercase;
  padding:4px 8px; cursor:pointer; max-width:170px;
}
#games .ms-demo-pick:hover,
#games .ms-demo-pick:focus{
  border-color:var(--green); color:var(--green-bright); outline:none;
}
#games .ms-demo-pick option{
  background:var(--void); color:var(--green-bright);
}

#games #msShakeWrap.shake-hard{ animation:games-ms-shake-hard 0.7s; }
@keyframes games-ms-shake-hard{
  0%,100%{ transform:translate(0,0) rotate(0deg); }
  8%{ transform:translate(-12px,6px) rotate(-1.2deg); }
  16%{ transform:translate(14px,-8px) rotate(1.4deg); }
  24%{ transform:translate(-10px,-7px) rotate(-0.8deg); }
  32%{ transform:translate(11px,9px) rotate(1.1deg); }
  40%{ transform:translate(-9px,4px) rotate(-1.6deg); }
  48%{ transform:translate(8px,-5px) rotate(0.9deg); }
  56%{ transform:translate(-7px,6px) rotate(-1.1deg); }
  64%{ transform:translate(6px,-3px) rotate(0.6deg); }
  72%{ transform:translate(-5px,4px) rotate(-0.5deg); }
  80%{ transform:translate(4px,-2px) rotate(0.4deg); }
  90%{ transform:translate(-2px,1px) rotate(-0.2deg); }
}

.ms-fate{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  overflow:visible;
  opacity:0;
  pointer-events:none;
  z-index:2500;
}
.ms-fate.show{ animation:ms-fate-hold var(--ms-fate-ms, 2.8s) ease-in-out forwards; }
.ms-fate.fate-unlucky.show{ --ms-fate-ms:2.8s; }
.ms-fate.fate-rng.show{ --ms-fate-ms:4s; }
.ms-fate.fate-impossible.show{ --ms-fate-ms:2.8s; }
.ms-fate.fate-fail.show{ --ms-fate-ms:4s; }
.ms-fate.fate-gods.show{ --ms-fate-ms:3s; }
.ms-fate.fate-gameover.show{ --ms-fate-ms:4s; }
@keyframes ms-fate-hold{
  0%{ opacity:1; }
  86%{ opacity:1; }
  100%{ opacity:0; }
}
.ms-fate-veil{
  position:absolute; inset:0;
  z-index:1;
  background:color-mix(in srgb, var(--void) 28%, transparent);
}
.ms-fate.fate-unlucky .ms-fate-veil{
  background:color-mix(in srgb, var(--green) 12%, transparent);
}
.ms-fate.fate-rng .ms-fate-veil{
  background:
    repeating-linear-gradient(90deg, transparent 0 11px, color-mix(in srgb, var(--green) 18%, transparent) 11px 12px),
    color-mix(in srgb, var(--void) 22%, transparent);
}
.ms-fate.fate-impossible .ms-fate-veil{
  background:
    repeating-linear-gradient(-32deg, transparent 0 16px, color-mix(in srgb, var(--red) 18%, transparent) 16px 18px),
    radial-gradient(ellipse at 50% 50%, color-mix(in srgb, #ff7a1a 14%, transparent), transparent 62%);
}
.ms-fate.fate-fail .ms-fate-veil{
  background:
    linear-gradient(180deg, transparent 8%, color-mix(in srgb, var(--red) 16%, transparent) 100%),
    color-mix(in srgb, var(--void) 22%, transparent);
}
.ms-fate.fate-fail .ms-fate-veil::before,
.ms-fate.fate-fail .ms-fate-veil::after{
  content:"";
  position:absolute;
  inset:-8% 0 0 0;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      180deg,
      transparent 0 14px,
      rgba(255,70,70,0.07) 14px 22px
    );
  filter:blur(12px);
  transform-origin:50% 0;
  animation:ms-fail-melt-veil var(--ms-fate-ms, 4s) cubic-bezier(.45,.02,.55,1) forwards;
}
.ms-fate.fate-fail .ms-fate-veil::after{
  filter:blur(22px);
  opacity:0.55;
  animation-delay:0.35s;
}
@keyframes ms-fail-melt-veil{
  0%{ transform:scaleY(0.35); opacity:0; }
  10%{ opacity:0.7; }
  100%{ transform:scaleY(1.55) translateY(10%); opacity:0.5; }
}
.ms-fate.fate-gods .ms-fate-veil{
  background:
    linear-gradient(180deg, rgba(0,0,0,0.82) 0%, transparent 42%),
    radial-gradient(ellipse at 50% -10%, rgba(255,210,90,0.22), transparent 46%),
    radial-gradient(circle at 50% 118%, color-mix(in srgb, var(--red) 62%, transparent), transparent 52%),
    color-mix(in srgb, var(--void) 36%, transparent);
}
.ms-fate.fate-gods .ms-fate-veil::before,
.ms-fate.fate-gods .ms-fate-veil::after{
  content:"";
  position:absolute;
  top:0;
  width:2px;
  height:100%;
  background:linear-gradient(180deg, #ffd27a 0%, transparent 70%);
  opacity:0.4;
  pointer-events:none;
}
.ms-fate.fate-gods .ms-fate-veil::before{ left:16%; }
.ms-fate.fate-gods .ms-fate-veil::after{ right:16%; }
.ms-fate.fate-gameover .ms-fate-veil{
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,0.22) 0 3px, transparent 3px 8px),
    radial-gradient(ellipse at 50% 45%, color-mix(in srgb, #7a0000 55%, transparent), color-mix(in srgb, #1a0000 42%, transparent) 70%);
  animation:ms-fate-halt-veil var(--ms-fate-ms, 4s) linear forwards;
}
@keyframes ms-fate-halt-veil{
  0%{ opacity:1; filter:brightness(2.6); }
  5%{ filter:none; }
  82%{ opacity:1; }
  100%{ opacity:0.15; }
}
.ms-fate.fate-gameover .ms-fate-veil::before,
.ms-fate.fate-gameover .ms-fate-veil::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:1;
  mix-blend-mode:screen;
  background:
    linear-gradient(118deg, transparent 48.6%, #fff 49.15%, transparent 49.7%),
    linear-gradient(64deg, transparent 36%, rgba(255,210,210,0.95) 36.45%, transparent 37.1%),
    linear-gradient(-22deg, transparent 58%, #ffe4e4 58.5%, transparent 59.1%),
    linear-gradient(32deg, transparent 21%, rgba(255,255,255,0.85) 21.4%, transparent 21.9%),
    linear-gradient(-78deg, transparent 74%, rgba(255,160,160,0.7) 74.4%, transparent 75%);
  animation:ms-go-cracks var(--ms-fate-ms, 4s) ease-out forwards;
}
.ms-fate.fate-gameover .ms-fate-veil::after{
  background:
    linear-gradient(28deg, transparent 22%, #fff 22.4%, transparent 22.9%),
    linear-gradient(-70deg, transparent 71%, rgba(255,180,180,0.8) 71.4%, transparent 72%),
    linear-gradient(95deg, transparent 44%, rgba(255,255,255,0.7) 44.35%, transparent 44.8%);
  animation-delay:0s;
}
@keyframes ms-go-cracks{
  0%{ opacity:1; filter:brightness(3); }
  6%{ filter:brightness(1.15); }
  40%{ opacity:1; }
  100%{ opacity:0.12; }
}
.ms-fate-text{
  position:relative;
  z-index:5;
  font-family:var(--font-display), monospace;
  font-size:clamp(28px, 6vw, 72px);
  letter-spacing:0.12em;
  text-transform:uppercase;
  text-align:center;
  max-width:90%;
  color:var(--green-bright);
  text-shadow:0 0 18px var(--glow);
  opacity:1;
  animation:ms-fate-text-hold var(--ms-fate-ms, 2.8s) ease-out both;
}
@keyframes ms-fate-text-hold{
  0%{ transform:scale(1.08); letter-spacing:0.18em; }
  10%{ transform:scale(1); letter-spacing:0.12em; }
  100%{ transform:scale(1); letter-spacing:0.12em; }
}
.ms-fate.fate-rng .ms-fate-text{
  animation:
    ms-fate-text-hold var(--ms-fate-ms, 4s) ease-out both,
    ms-fate-text-glitch 0.55s ease-in-out 3;
}
.ms-fate.fate-fail .ms-fate-text{
  color:#ff4a4a;
  text-shadow:0 0 18px rgba(255,50,50,0.7);
  animation:ms-fail-melt-text var(--ms-fate-ms, 4s) cubic-bezier(.45,.02,.55,1) forwards;
}
@keyframes ms-fail-melt-text{
  0%{ transform:scaleY(1); filter:none; letter-spacing:0.12em; }
  16%{ transform:scaleY(1.12) translateY(10px); filter:blur(0.5px); }
  100%{ transform:scaleY(1.32) translateY(22px); filter:blur(1.5px); letter-spacing:0.2em; opacity:0.72; }
}
.ms-fate.fate-impossible .ms-fate-text{
  color:#ffd0a8;
  text-shadow:5px 0 #ff4d1a, -6px 0 #6b0000, 0 0 22px rgba(255,90,20,0.75);
  font-size:clamp(32px, 6.4vw, 84px);
  width:100%;
  max-width:none;
  padding:0.28em 4%;
  background:
    repeating-linear-gradient(-45deg, rgba(10,0,0,0.82) 0 9px, rgba(40,8,0,0.82) 9px 12px);
  border-top:1px solid #ff7a1a;
  border-bottom:1px solid #ff7a1a;
  animation:
    ms-fate-text-hold var(--ms-fate-ms, 2.8s) ease-out both,
    ms-fate-impossible-text 0.42s steps(2,end) infinite;
}
.ms-fate.fate-gameover .ms-fate-text{
  display:flex;
  justify-content:center;
  align-items:center;
  color:#ffe4e4;
  text-shadow:4px 0 #ff2a2a, -4px 0 #6b0000, 0 0 28px rgba(255,30,30,0.95);
  font-size:clamp(36px, 7vw, 96px);
  width:100%;
  max-width:none;
  padding:0.28em 4%;
  background:rgba(8,0,0,0.78);
  border-top:1px solid #ff3a3a;
  border-bottom:1px solid #ff3a3a;
  animation:none;
  transition:opacity 0.2s ease;
}
.ms-fate.fate-gameover .ms-fate-text.ms-go-title-gone{
  opacity:0;
}
.ms-fate.fate-gameover .ms-go-title{
  position:relative;
  z-index:3;
}
.ms-fate.fate-gameover .ms-go-title::before,
.ms-fate.fate-gameover .ms-go-title::after{
  content:attr(data-glitch);
  position:absolute;
  left:0; top:0;
  pointer-events:none;
}
.ms-fate.fate-gameover .ms-go-title::before{
  color:#7af7ff;
  text-shadow:none;
  animation:ms-fate-ghost-a 0.2s steps(2,end) infinite;
}
.ms-fate.fate-gameover .ms-go-title::after{
  color:#ff2a2a;
  text-shadow:none;
  animation:ms-fate-ghost-b 0.24s steps(2,end) infinite;
}
.ms-go-cracks{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  mix-blend-mode:screen;
  background:
    linear-gradient(118deg, transparent 48.8%, #fff 49.25%, transparent 49.7%),
    linear-gradient(70deg, transparent 41%, #ffe0e0 41.4%, transparent 42%),
    linear-gradient(-18deg, transparent 63%, #fff 63.4%, transparent 63.9%),
    linear-gradient(38deg, transparent 27%, rgba(255,200,200,0.9) 27.35%, transparent 27.8%),
    linear-gradient(-62deg, transparent 78%, #fff 78.35%, transparent 78.8%);
  opacity:1;
  animation:ms-go-title-cracks var(--ms-fate-ms, 4s) ease-out forwards;
}
@keyframes ms-go-title-cracks{
  0%{ opacity:1; filter:brightness(3.2); }
  5%{ filter:brightness(1.1); }
  38%{ opacity:1; }
  100%{ opacity:0; }
}
#msGoGlass{
  position:fixed;
  inset:0;
  z-index:2600;
  display:none;
  pointer-events:none;
}
#msGoGlass.is-on{ display:block; }
#msGoGlass .ms-go-glass-shard{
  position:absolute;
  overflow:hidden;
  background:rgba(28,0,0,0.42);
  border:1px solid rgba(255,170,170,0.6);
  box-shadow:inset 0 0 12px rgba(255,40,40,0.22);
  transition:transform 0.8s cubic-bezier(.5,0,.85,1), opacity 0.8s ease;
}
#msGoGlass .ms-go-glass-inner{
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
}
#msGoGlass .ms-go-glass-inner .ms-fate-text,
#msGoGlass .ms-go-clone{
  position:relative;
  z-index:5;
  font-family:var(--font-display), monospace;
  font-size:clamp(36px, 7vw, 96px);
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:#ffe4e4;
  text-shadow:4px 0 #ff2a2a, -4px 0 #6b0000, 0 0 28px rgba(255,30,30,0.95);
  width:100%;
  padding:0.28em 4%;
  background:rgba(8,0,0,0.78);
  border-top:1px solid #ff3a3a;
  border-bottom:1px solid #ff3a3a;
  display:flex;
  justify-content:center;
  align-items:center;
}
#msGoGlass .ms-go-title{ position:relative; z-index:3; }
#msGoGlass .ms-go-title::before,
#msGoGlass .ms-go-title::after{
  content:attr(data-glitch);
  position:absolute;
  left:0; top:0;
  pointer-events:none;
}
#msGoGlass .ms-go-title::before{
  color:#7af7ff;
  text-shadow:none;
  animation:ms-fate-ghost-a 0.2s steps(2,end) infinite;
}
#msGoGlass .ms-go-title::after{
  color:#ff2a2a;
  text-shadow:none;
  animation:ms-fate-ghost-b 0.24s steps(2,end) infinite;
}
#msGoGlass .ms-go-cracks{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  mix-blend-mode:screen;
  background:
    linear-gradient(118deg, transparent 48.8%, #fff 49.25%, transparent 49.7%),
    linear-gradient(70deg, transparent 41%, #ffe0e0 41.4%, transparent 42%),
    linear-gradient(-18deg, transparent 63%, #fff 63.4%, transparent 63.9%);
  opacity:1;
}
#msGoGlass .ms-go-glass-shard.fall{
  transform:translateY(115vh) rotate(var(--rot, 25deg));
  opacity:0;
}
#msGoGlass .ms-go-glass-shard.crack{
  animation:ms-go-glass-flash 0.2s ease-out;
}
@keyframes ms-go-glass-flash{
  0%{ border-color:rgba(255,170,170,0.6); box-shadow:inset 0 0 12px rgba(255,255,255,0.2); }
  40%{ border-color:#fff; box-shadow:inset 0 0 22px rgba(255,255,255,0.75), 0 0 12px rgba(255,80,80,0.7); }
  100%{ border-color:rgba(255,170,170,0.6); box-shadow:inset 0 0 12px rgba(255,40,40,0.22); }
}
.ms-fate.fate-gods .ms-fate-text{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.12em;
  width:auto;
  max-width:92%;
  padding:0;
  background:none;
  border:none;
  color:#fff6d8;
  font-size:clamp(30px, 6.2vw, 78px);
  letter-spacing:0.08em;
  line-height:1.05;
  text-shadow:
    0 0 18px rgba(255,210,90,0.75),
    0 18px 50px rgba(120,0,0,0.85);
  animation:ms-fate-gods-drop var(--ms-fate-ms, 3s) ease-out both;
}
.ms-fate.fate-gods .ms-fate-text span.ms-gods-kicker{
  font-size:0.42em;
  letter-spacing:0.46em;
  color:#ffd27a;
  text-indent:0.46em;
  font-weight:400;
  animation:ms-fate-gods-pulse 1.1s ease-in-out infinite;
}
.ms-fate.fate-gods .ms-fate-text .ms-gods-blow{
  display:flex;
  align-items:baseline;
  gap:0.28em;
}
.ms-fate.fate-gods .ms-gods-you{
  display:inline-block;
  font-size:0.72em;
  letter-spacing:0.2em;
  color:#e8c878;
  text-shadow:0 0 10px rgba(255,210,90,0.5);
  animation:ms-gods-you-shake 0.11s linear infinite;
}
.ms-fate.fate-gods .ms-gods-dead{
  font-size:1.4em;
  letter-spacing:0.06em;
  color:#fff;
  text-shadow:
    3px 0 currentColor, -3px 0 currentColor, 0 2px currentColor, 0 -2px currentColor,
    2px 2px currentColor, -2px -2px currentColor,
    0 0 22px rgba(255,40,40,0.85),
    0 18px 44px rgba(120,0,0,0.9);
}
.ms-fate.fate-impossible .ms-fate-text::before,
.ms-fate.fate-impossible .ms-fate-text::after{
  content:attr(data-glitch);
  position:absolute;
  left:0; right:0; top:0;
  padding:inherit;
  pointer-events:none;
  overflow:hidden;
}
.ms-fate.fate-impossible .ms-fate-text::before{
  color:#7af7ff;
  text-shadow:none;
  animation:ms-fate-ghost-a 0.36s steps(2,end) infinite;
}
.ms-fate.fate-impossible .ms-fate-text::after{
  color:#ff2a2a;
  text-shadow:none;
  animation:ms-fate-ghost-b 0.42s steps(2,end) infinite;
}
@keyframes ms-fate-text-glitch{
  0%{ transform:translate(0,0); clip-path:inset(0 0 0 0); }
  50%{ transform:translate(-3px,1px); clip-path:inset(6% 0 8% 0); }
  100%{ transform:translate(2px,-1px); }
}
@keyframes ms-fate-impossible-text{
  0%{ transform:translate(0,0) skewX(0deg); clip-path:inset(0 0 0 0); }
  35%{ transform:translate(-8px,3px) skewX(-5deg); clip-path:inset(8% 0 48% 0); }
  70%{ transform:translate(9px,-4px) skewX(4deg); clip-path:inset(36% 0 12% 0); }
  100%{ transform:translate(0,0); clip-path:inset(0 0 0 0); }
}
@keyframes ms-gods-you-shake{
  0%,100%{ transform:translate(0,0); }
  20%{ transform:translate(-4px,3px); }
  40%{ transform:translate(5px,-2px); }
  60%{ transform:translate(-3px,-3px); }
  80%{ transform:translate(4px,2px); }
}
@keyframes ms-fate-gods-drop{
  0%{ transform:translateY(-28%); opacity:0; letter-spacing:0.28em; }
  12%{ transform:translateY(0); opacity:1; letter-spacing:0.08em; }
  88%{ opacity:1; }
  100%{ opacity:0; transform:translateY(8%); }
}
@keyframes ms-fate-gods-pulse{
  0%,100%{ opacity:0.7; filter:none; }
  50%{ opacity:1; filter:drop-shadow(0 0 12px #ffd27a); }
}
@keyframes ms-fate-ghost-a{
  0%{ transform:translate(0,0); clip-path:inset(0 0 55% 0); opacity:0.85; }
  50%{ transform:translate(-11px,4px); clip-path:inset(40% 0 10% 0); opacity:0.55; }
  100%{ transform:translate(8px,-3px); clip-path:inset(15% 0 40% 0); opacity:0.8; }
}
@keyframes ms-fate-ghost-b{
  0%{ transform:translate(0,0); clip-path:inset(50% 0 0 0); opacity:0.8; }
  50%{ transform:translate(13px,-5px); clip-path:inset(8% 0 48% 0); opacity:0.5; }
  100%{ transform:translate(-9px,3px); clip-path:inset(30% 0 20% 0); opacity:0.75; }
}

html.ms-fate-live canvas#rain{ opacity:0.72; }
html.ms-fate-live .scanlines{
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 1px,
    var(--scan) 2px,
    rgba(0,0,0,0) 3px
  );
}
html.ms-fate-live .frame{
  animation:ms-site-shake var(--ms-fate-ms, 2.8s) linear;
}
html.ms-fate-live[data-ms-fate="unlucky"]{ --ms-fate-ms:2.8s; }
html.ms-fate-live[data-ms-fate="rng"]{
  --ms-fate-ms:4s;
}
html.ms-fate-live[data-ms-fate="rng"] .frame{
  animation:ms-site-glitch-soft 4s ease-in-out;
}
html.ms-fate-live[data-ms-fate="impossible"]{
  --ms-fate-ms:2.8s;
  --rain-glyph:#ff7a1a;
  --rain-named:#ffd0a0;
  --rain-spark:#ffe9c8;
  --green:#ff9a3c;
  --green-bright:#ffe0c0;
  --glow:rgba(255,122,26,0.5);
}
html.ms-fate-live[data-ms-fate="impossible"] .frame{
  animation:ms-site-glitch-slow 2.8s steps(2,end);
}
html.ms-fate-live[data-ms-fate="fail"]{
  --ms-fate-ms:4s;
  --rain-glyph:#ff4d4d;
  --rain-named:#ffb0b0;
  --rain-spark:#ffffff;
}
html.ms-fate-live[data-ms-fate="fail"] .frame{
  animation:ms-site-melt var(--ms-fate-ms, 4s) cubic-bezier(.45,.02,.55,1) forwards;
  transform-origin:50% 0;
}
html.ms-fate-live[data-ms-fate="fail"] header{
  animation:ms-site-melt-header var(--ms-fate-ms, 4s) cubic-bezier(.45,.02,.55,1) forwards;
  transform-origin:50% 0;
}
html.ms-fate-live[data-ms-fate="fail"]::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:2400;
  pointer-events:none;
  background:
    linear-gradient(180deg, transparent 0%, rgba(40,0,0,0.18) 100%);
  animation:ms-site-melt-haze var(--ms-fate-ms, 4s) cubic-bezier(.45,.02,.55,1) forwards;
}
html.ms-fate-live[data-ms-fate="gods"]{
  --ms-fate-ms:3s;
  --rain-glyph:#e8a020;
  --rain-named:#ffe7a8;
  --rain-spark:#fff6d0;
  --green:#ffd27a;
  --green-bright:#fff4d6;
  --glow:rgba(255,210,90,0.55);
}
html.ms-fate-live[data-ms-fate="gods"] .frame{
  animation:ms-site-quake var(--ms-fate-ms, 3s) linear;
}
html.ms-fate-live[data-ms-fate="gameover"]{
  --ms-fate-ms:4s;
  --rain-fade:rgba(20,0,0,0.16);
  --rain-glyph:#ff1f1f;
  --rain-named:#ffe0e0;
  --rain-spark:#ffffff;
  --green:#ff2a2a;
  --green-bright:#fff0f0;
  --green-dim:#c44;
  --glow:rgba(255,20,20,0.7);
  --line:rgba(255,60,60,0.5);
  --void:#070000;
}
html.ms-fate-live[data-ms-fate="gameover"] .frame{
  animation:ms-site-crack var(--ms-fate-ms, 4s) linear forwards;
  transform-origin:50% 38%;
}
html.ms-fate-live[data-ms-fate="gameover"] header{
  animation:ms-site-header-crack var(--ms-fate-ms, 4s) linear forwards;
}
html.ms-fate-live[data-ms-fate="gameover"] .scanlines{
  animation:ms-go-rumble 0.09s linear infinite;
}
html.ms-fate-live[data-ms-fate="gameover"] #games #msShakeWrap{
  animation:games-ms-shake-hard 0.16s linear infinite;
}
html.ms-fate-live[data-ms-fate="gameover"]::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:2400;
  pointer-events:none;
  background:
    linear-gradient(112deg, transparent 47.6%, #fff 48.2%, transparent 48.8%),
    linear-gradient(28deg, transparent 31%, rgba(255,230,230,0.7) 31.45%, transparent 32%),
    linear-gradient(-48deg, transparent 60%, rgba(255,180,180,0.65) 60.5%, transparent 61.1%),
    linear-gradient(78deg, transparent 18%, #ffe4e4 18.4%, transparent 18.9%),
    linear-gradient(-12deg, transparent 74%, rgba(255,255,255,0.55) 74.4%, transparent 74.9%);
  opacity:1;
  mix-blend-mode:screen;
  animation:ms-site-cracks var(--ms-fate-ms, 4s) ease-out forwards;
}
html.light.ms-fate-live[data-ms-fate="gameover"]{
  --void:#fff5f5;
  --rain-fade:rgba(255,255,255,0.2);
  --rain-glyph:#8a0000;
  --green:#111;
  --green-bright:#000;
}
@keyframes ms-site-shake{
  0%,100%{ transform:translate(0,0); }
  12%{ transform:translate(-6px,3px); }
  24%{ transform:translate(7px,-4px); }
  40%{ transform:translate(-4px,2px); }
  70%{ transform:translate(2px,-1px); }
}
@keyframes ms-site-shake-soft{
  0%,100%{ transform:translate(0,0); }
  20%{ transform:translate(-3px,1px); }
  28%{ transform:translate(0,0); }
  64%{ transform:translate(3px,-1px); }
  72%{ transform:translate(0,0); }
}
@keyframes ms-site-glitch-slow{
  0%,100%{ transform:none; filter:none; clip-path:none; }
  12%{ transform:translate(-8px,2px); filter:hue-rotate(16deg) contrast(1.25); }
  20%{ transform:none; filter:none; }
  42%{ clip-path:inset(10% 0 38% 0); transform:translate(7px,0); }
  52%{ clip-path:none; transform:none; }
  74%{ transform:translate(-5px,1px); filter:contrast(1.18); }
  82%{ transform:none; filter:none; }
}
@keyframes ms-site-glitch-soft{
  0%,100%{ transform:none; filter:none; }
  12%{ transform:translate(-3px,1px); filter:contrast(1.12); }
  20%{ transform:none; filter:none; }
  48%{ transform:translate(2px,0); }
  56%{ transform:none; }
}
@keyframes ms-site-melt{
  0%{ transform:none; filter:none; }
  12%{ transform:scaleY(1.04) translateY(10px); }
  40%{ transform:scaleY(1.1) translateY(24px) skewX(1deg); filter:blur(0.5px) contrast(1.08); }
  100%{ transform:scaleY(1.16) translateY(44px) skewX(1.8deg); filter:blur(1.3px) brightness(0.8); }
}
@keyframes ms-site-melt-header{
  0%{ transform:none; filter:none; }
  16%{ transform:scaleY(1.06) translateY(6px); filter:blur(0.3px); }
  100%{ transform:scaleY(1.2) translateY(18px); filter:blur(1px); opacity:0.75; }
}
@keyframes ms-site-melt-haze{
  0%{ opacity:0; backdrop-filter:blur(0); }
  12%{ opacity:1; }
  100%{ opacity:1; backdrop-filter:blur(2.4px) brightness(0.86) saturate(0.8); }
}
@keyframes ms-go-rumble{
  0%,100%{ transform:translate(0,0); }
  25%{ transform:translate(-3px,2px); }
  50%{ transform:translate(4px,-2px); }
  75%{ transform:translate(-2px,-2px); }
}
@keyframes ms-site-crack{
  0%{ transform:translate(0,0) rotate(0deg); filter:none; }
  4%{ transform:translate(-14px,8px) rotate(-0.5deg); }
  8%{ transform:translate(16px,-10px) rotate(0.6deg); }
  12%{ transform:translate(-12px,7px) rotate(-0.4deg); }
  16%{ transform:translate(14px,-6px) rotate(0.5deg); }
  22%{ transform:translate(-18px,10px) rotate(-0.8deg); filter:contrast(1.12); }
  28%{ transform:translate(15px,-8px) rotate(0.5deg); }
  36%{ transform:translate(-20px,12px) rotate(-1deg); }
  44%{ transform:translate(16px,6px) rotate(0.7deg); filter:contrast(1.18) brightness(0.92); }
  54%{ transform:translate(-24px,16px) rotate(-1.4deg); }
  64%{ transform:translate(14px,-8px) rotate(-0.9deg); filter:brightness(0.72); }
  74%{ transform:translate(-28px,28px) rotate(-1.9deg); }
  84%{ transform:translate(12px,18px) rotate(-1.6deg); filter:brightness(0.5); }
  100%{ transform:translate(-32px,44px) rotate(-2.4deg); filter:brightness(0.4); opacity:0.88; }
}
@keyframes ms-site-quake{
  0%,100%{ transform:translate(0,0) rotate(0deg); }
  6%{ transform:translate(-14px,8px) rotate(-0.6deg); }
  14%{ transform:translate(16px,-10px) rotate(0.7deg); }
  22%{ transform:translate(-10px,-8px) rotate(-0.4deg); }
  40%{ transform:translate(8px,6px); }
  70%{ transform:translate(-3px,2px); }
}
@keyframes ms-site-header-crack{
  0%,18%{ transform:none; opacity:1; }
  30%{ transform:translate(-3px,0); }
  48%{ transform:translate(-10px,-4px) rotate(-0.5deg); }
  72%{ transform:translate(-18px,10px) rotate(-1.1deg); opacity:0.7; }
  100%{ transform:translate(-24px,18px) rotate(-1.5deg); opacity:0.42; }
}
@keyframes ms-site-cracks{
  0%{ opacity:1; filter:brightness(3); }
  6%{ filter:brightness(1.1); }
  55%{ opacity:0.9; }
  100%{ opacity:0.18; }
}

#games #msGrid.ms-assembling{
  pointer-events:none;
  animation:ms-grid-build var(--ms-build-ms, 2.8s) linear both;
}
#games #msGrid.ms-assembling::after{
  content:"";
  position:absolute;
  left:0; right:0; height:2px;
  background:var(--green-bright);
  box-shadow:0 0 10px var(--glow);
  animation:ms-grid-scan var(--ms-build-ms, 2.8s) linear both;
  pointer-events:none;
}
@keyframes ms-grid-build{
  0%{ clip-path:inset(0 0 100% 0); filter:brightness(2); }
  8%{ filter:none; }
  100%{ clip-path:inset(0 0 0 0); }
}
@keyframes ms-grid-scan{
  0%{ top:0; opacity:1; }
  90%{ opacity:1; }
  100%{ top:100%; opacity:0; }
}

@media (prefers-reduced-motion:reduce){
  .ms-fate.show,
  .ms-fate-text,
  .ms-fate-text::before,
  .ms-fate-text::after,
  .ms-fate-veil::before,
  .ms-fate-veil::after,
  .ms-go-title::before,
  .ms-go-title::after,
  .ms-go-cracks,
  #msGoGlass .ms-go-glass-shard,
  .ms-gods-you,
  html.ms-fate-live .frame,
  html.ms-fate-live .scanlines,
  html.ms-fate-live::after,
  html.ms-fate-live[data-ms-fate="gameover"] header,
  html.ms-fate-live[data-ms-fate="fail"] header,
  html.ms-fate-live[data-ms-fate="gameover"] #games #msShakeWrap,
  #games #msGrid.ms-assembling,
  #games #msGrid.ms-assembling::after{
    animation:none !important;
  }
  .ms-fate.show{ opacity:1; }
}

#games #msShakeWrap.ms-huge{
  overflow:auto;
  max-height:70vh;
}
#games #msGrid.ms-huge{
  max-width:980px;
  gap:1px;
  padding:1px;
}
#games #msGrid.ms-huge .cell{
  font-size:0;
  border-width:1px;
}

#games #msGrid{
  display:grid;
  gap:3px;
  width:100%;
  max-width:520px;
  margin:0 auto;
  position:relative;
  background:color-mix(in srgb, var(--void) 82%, transparent);
  padding:3px;
}
#games #msGrid[data-cols="30"]{
  max-width:720px;
}
#games #msGrid[data-cols="30"] .cell{
  font-size:12px;
}
#games .cell{
  aspect-ratio:1;
  background:var(--void);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-size:14px;
  color:var(--green-bright);
  cursor:pointer;
  user-select:none;
}
#games .cell:hover{ background:color-mix(in srgb, var(--void) 88%, var(--green)); }
#games .cell.revealed{
  background:color-mix(in srgb, var(--void) 94%, var(--green));
  border-color:color-mix(in srgb, var(--line) 55%, var(--void));
  cursor:default;
}
#games .cell.flagged{
  color:var(--green-bright);
  text-shadow:0 0 8px var(--glow);
}
#games .cell.unknown{ color:var(--green-dim); }
#games .cell.mine{ color:var(--red); background:color-mix(in srgb, var(--red) 12%, transparent); }
#games .cell.misflagged{ color:var(--red); text-decoration:line-through; }
#games .cell.n1{ color:var(--green); }
#games .cell.n2{ color:var(--text-body); }
#games .cell.n3{ color:#ffa53c; }
#games .cell.n4{ color:#ff7a1a; }
#games .cell.n5{ color:#ff5a1a; }
#games .cell.n6{ color:#ff3d1a; }
#games .cell.n7{ color:#ff2020; }
#games .cell.n8{ color:#ff0000; }

#games .ms-status{
  text-align:center; margin-top:16px; font-size:13px; min-height:18px;
  color:var(--green-dim);
}

#games .tx-hud{ font-size:12px; color:var(--green-dim); }
#games .tx-hud strong{
  font-family:var(--font-display), monospace;
  font-size:26px; color:var(--green-bright);
  text-shadow:0 0 8px var(--glow);
  letter-spacing:2px;
}
#games .tx-play{ display:flex; gap:16px; justify-content:center; align-items:flex-start; }
#games #txWell{ width:336px; }
#games #txBoard{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  width:100%;
  gap:1px;
  background:var(--line);
  border:1px solid var(--green);
  box-shadow:0 0 18px var(--glow-faint);
  cursor:pointer;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}
#games .tx-cell{
  aspect-ratio:1;
  background:var(--void);
  position:relative;
}
#games .tx-cell.on::before,
#games .tx-cell.live::before{
  content:"";
  position:absolute;
  inset:12%;
  border:2px solid var(--green);
  box-sizing:border-box;
}
#games .tx-cell.on::after,
#games .tx-cell.live::after{
  content:"";
  position:absolute;
  inset:28%;
  background:var(--green);
}
#games .tx-cell.live::before{
  border-color:var(--green-bright);
}
#games .tx-cell.live::after{
  background:var(--green-bright);
}
#games .tx-cell.ghost::before{
  content:"";
  position:absolute;
  inset:12%;
  border:2px solid color-mix(in srgb, var(--green-bright) 45%, transparent);
  box-sizing:border-box;
}
#games .tx-side{ width:168px; flex-shrink:0; }
#games .tx-label{
  font-size:10px; letter-spacing:2px; text-transform:uppercase;
  color:var(--green-bright); margin-bottom:8px;
}
#games .tx-high{
  list-style:none;
  margin:0 0 14px;
  padding:0;
  counter-reset:tx-high;
  font-family:var(--font-display), monospace;
  font-size:16px;
  letter-spacing:2px;
  color:var(--green-dim);
}
#games .tx-high li{
  margin:0 0 4px;
  counter-increment:tx-high;
}
#games .tx-high li::before{
  content:counter(tx-high) ". ";
  color:var(--green);
  letter-spacing:0;
}
#games .tx-high li.new{
  color:var(--green-bright);
  text-shadow:0 0 8px var(--glow);
}
#games #txNext{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1px;
  width:72px;
  background:var(--line);
  border:1px solid var(--line);
  margin-bottom:14px;
}
#games .tx-goal{ font-size:12px; line-height:1.55; color:var(--green-dim); }
#games .tx-goal p{ margin:0 0 8px; }
#games .tx-goal p:last-child{ margin-bottom:0; }
#games .tx-status{
  text-align:center; margin-top:12px; font-size:12px; min-height:16px;
  color:var(--green-dim);
}
#games .tx-reset{ margin-top:12px; }

html.is-hand #games .ms-hud{ flex-wrap:wrap; gap:6px; }
html.is-hand #games .ms-timer{ font-size:28px; }
html.is-hand #games #msGrid{ max-width:none; }
html.is-hand #games .cell{ font-size:13px; }
html.is-hand #games .tx-hud{ font-size:10px; gap:8px; }
html.is-hand #games .tx-hud strong{ font-size:22px; }
html.is-hand #games .tx-play{
  flex-direction:row;
  align-items:flex-start;
  gap:10px;
}
html.is-hand #games #txWell,
html.is-hand #games #txBoard{
  width:min(72vw, 280px);
}
html.is-hand #games .tx-side{ width:108px; }
html.is-hand #games #txNext{ width:64px; }
html.is-hand #games .tx-goal{ font-size:10px; }
html.is-hand #games .tx-goal-desk{ display:none; }
html.is-hand #games .tx-goal-hand{ display:block; }

@media (max-width:720px){
  #games .tx-play{ flex-wrap:wrap; }
}

#games #panel-mines[data-ms-phase="1"]{
  --green-dim:#9aa89c;
  --green:#e8ffe9;
  --green-bright:#ffffff;
  --line:rgba(232,255,233,0.45);
  --glow:rgba(255,255,255,0.45);
  --tint-08:color-mix(in srgb, var(--green) 8%, transparent);
}
html.light #games #panel-mines[data-ms-phase="1"]{
  --green-dim:#333333;
  --green:#111111;
  --green-bright:#000000;
  --line:rgba(0,0,0,0.4);
  --glow:rgba(0,0,0,0.2);
}
#games #panel-mines[data-ms-phase="2"]{
  --green-dim:#c42a38;
  --green:#ff3a4a;
  --green-bright:#ff9aa3;
  --line:rgba(255,58,74,0.45);
  --glow:rgba(255,58,74,0.55);
  --tint-08:color-mix(in srgb, var(--green) 8%, transparent);
}
#games #panel-mines[data-ms-phase="3"]{
  --green-dim:#7a3cb0;
  --green:#b44cff;
  --green-bright:#e2b8ff;
  --line:rgba(180,76,255,0.45);
  --glow:rgba(180,76,255,0.55);
  --tint-08:color-mix(in srgb, var(--green) 8%, transparent);
}
#games #panel-mines[data-ms-phase="4"]{
  --green-dim:#1a7ad4;
  --green:#3df0ff;
  --green-bright:#c8fbff;
  --line:rgba(61,240,255,0.45);
  --glow:rgba(61,240,255,0.6);
  --tint-08:color-mix(in srgb, var(--green) 8%, transparent);
}
#games #panel-mines[data-ms-phase="5"]{
  --green-dim:#c47a12;
  --green:#ffb020;
  --green-bright:#ffe09a;
  --line:rgba(255,176,32,0.45);
  --glow:rgba(255,176,32,0.55);
  --tint-08:color-mix(in srgb, var(--green) 8%, transparent);
}
#games #panel-mines[data-ms-phase="6"]{
  --green-dim:#c43a7a;
  --green:#ff5aad;
  --green-bright:#ffc2e0;
  --line:rgba(255,90,173,0.45);
  --glow:rgba(255,90,173,0.55);
  --tint-08:color-mix(in srgb, var(--green) 8%, transparent);
}

#games #panel-mines.ms-phase-glitch{
  animation:games-ms-phase-glitch 0.55s steps(2,end);
}
@keyframes games-ms-phase-glitch{
  0%{ filter:none; transform:none; }
  12%{ transform:translate(-5px,1px); filter:drop-shadow(-4px 0 #00FFF7) drop-shadow(4px 0 #FF2D6B); }
  28%{ clip-path:inset(12% 0 58% 0); transform:translate(4px,-1px); }
  42%{ clip-path:inset(50% 0 8% 0); transform:translate(-3px,0); filter:brightness(1.5); }
  58%{ clip-path:inset(6% 0 72% 0); transform:translate(5px,1px); }
  74%{ clip-path:inset(0 0 0 0); transform:translate(-2px,0); }
  100%{ clip-path:inset(0 0 0 0); filter:none; transform:none; }
}
