/* ============================================
   sim_home.css — Extracted from sim_home.html
   Simulate hub: world map, mode cards, recent sims.
   ============================================ */

/* ============================================
   BALATRO THEME — SIMULATE HOME
   ============================================ */
.sim-page {
  --sim-bg: #0f1119;
  --sim-surface: #1a1f2e;
  --sim-surface-lit: #252b3d;
  --sim-accent: #e9c46a;
  --sim-teal: #2a9d8f;
  --sim-green: #4ade80;
  --sim-red: #f87171;
  --sim-blue: #58a6ff;
  --sim-text: #e8e8e8;
  --sim-text-sec: #9ca3af;
  --sim-text-dim: rgba(255,255,255,0.3);
  --sim-border: rgba(255,255,255,0.06);
  --sim-border-lit: rgba(255,255,255,0.12);

  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem 3rem;
}

/* ===== HERO ===== */
.sim-hero {
  position: relative;
  overflow: hidden;
  padding: 1.8rem 1rem 1.4rem;
  margin: 0.3rem 0 1.2rem;
  text-align: center;
  isolation: isolate;
}

.sim-hero-bg {
  position: absolute;
  inset: 0;
  font-size: 4.5rem;
  font-weight: 300;
  font-style: italic;
  color: rgba(255,255,255,0.025);
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sim-hero-welcome {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--sim-text-sec);
  text-transform: uppercase;
  letter-spacing: 2.5px;
  margin-bottom: 0.4rem;
  position: relative;
  z-index: 2;
}

.sim-hero-title {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--sim-accent);
  text-transform: uppercase;
  letter-spacing: 5px;
  margin: 0.25rem 0 0.4rem;
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
  position: relative;
  z-index: 2;
}

.sim-hero-sub {
  font-size: 0.72rem;
  color: var(--sim-text-sec);
  position: relative;
  z-index: 2;
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.5;
}

/* ===== GAME CARDS =====
   5-card grid: top row = 3 predictor tiers (each 2/6),
   bottom row = squad builder + explore (each 3/6, centered).
*/
.sim-games-head {
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--sim-text-dim);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0 0 0.7rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--sim-border);
}
.sim-games-head .mr-icon { font-variant-emoji: text; }

.sim-games {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.8rem;
}

.sim-game {
  --_accent: var(--sim-accent);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.4rem 1rem 1.2rem;
  border: 1px solid var(--sim-border);
  border-radius: 12px;
  background: var(--sim-surface);
  text-decoration: none;
  color: var(--sim-text);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  overflow: hidden;
  isolation: isolate;
}
.sim-game::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.03), transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.sim-game > * { position: relative; z-index: 1; }

.sim-game:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--_accent) 40%, transparent);
  box-shadow: 0 12px 32px -10px rgba(0,0,0,0.5),
              0 0 0 1px color-mix(in srgb, var(--_accent) 12%, transparent);
  color: var(--sim-text);
  text-decoration: none;
}
.sim-game:hover::before {
  background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--_accent) 10%, transparent), transparent 65%);
}

/* Badge (top-right pill) */
.sim-game-badge {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  background: rgba(233,196,106,0.1);
  color: var(--sim-accent);
  border: 1px solid rgba(233,196,106,0.25);
  z-index: 2;
}
.sim-game-badge.badge-rec {
  background: rgba(42,157,143,0.14);
  color: var(--sim-teal);
  border-color: rgba(42,157,143,0.35);
}
.sim-game-badge.badge-deep {
  background: rgba(88,166,255,0.12);
  color: var(--sim-blue);
  border-color: rgba(88,166,255,0.3);
}
.sim-game-badge.badge-sandbox {
  background: rgba(74,222,128,0.1);
  color: var(--sim-green);
  border-color: rgba(74,222,128,0.25);
}

/* Icon */
.sim-game-icon {
  font-size: 2.2rem;
  line-height: 1;
  margin-bottom: 0.65rem;
  color: var(--_accent);
  filter: drop-shadow(0 2px 10px color-mix(in srgb, var(--_accent) 45%, transparent));
  transition: transform 0.35s ease;
}
.sim-game-icon .mr-icon { font-variant-emoji: text; }
.sim-game:hover .sim-game-icon { transform: translateY(-5px) scale(1.06); }

/* Name */
.sim-game-name {
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--_accent);
  margin-bottom: 0.25rem;
}

/* Tagline (always visible, subtle) */
.sim-game-tag {
  font-size: 0.58rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--sim-text-sec);
  margin-bottom: 0.55rem;
}

/* Description (fades in on hover) */
.sim-game-desc {
  font-size: 0.68rem;
  color: var(--sim-text-sec);
  line-height: 1.55;
  max-width: 260px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.sim-game:hover .sim-game-desc {
  opacity: 1;
  transform: translateY(0);
}

/* Locked / coming soon state */
.sim-game-locked {
  pointer-events: none;
  opacity: 0.4;
  filter: grayscale(0.5);
}
.sim-game-locked .sim-game-desc {
  opacity: 1;
  transform: none;
}
.sim-game-badge.badge-soon {
  background: rgba(255,255,255,0.06);
  color: var(--sim-text-sec);
  border-color: var(--sim-border-lit);
}

/* Per-card accent overrides */
.sim-game-bracket  { --_accent: var(--sim-accent); }
.sim-game-manager  { --_accent: var(--sim-teal); }
.sim-game-analyst  { --_accent: var(--sim-blue); }
.sim-game-squad    { --_accent: var(--sim-green); }

/* ===== RECENT ACTIVITY ===== */
.sim-recent {
  margin-bottom: 1.8rem;
}

.sim-recent-head {
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--sim-text-dim);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0 0 0.7rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--sim-border);
}
.sim-recent-head .mr-icon { font-variant-emoji: text; }

.sim-recent-strip {
  display: flex;
  gap: 0.65rem;
  overflow-x: auto;
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.08) transparent;
}
.sim-recent-strip::-webkit-scrollbar { height: 4px; }
.sim-recent-strip::-webkit-scrollbar-track { background: transparent; }
.sim-recent-strip::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }

.sim-recent-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.3rem;
  min-width: 140px;
  max-width: 180px;
  padding: 0.9rem 0.8rem 0.7rem;
  background: var(--sim-surface);
  border: 1px solid var(--sim-border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--sim-text);
  flex-shrink: 0;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.sim-recent-card:hover {
  border-color: rgba(233,196,106,0.2);
  transform: translateY(-2px);
  color: var(--sim-text);
  text-decoration: none;
}

.sim-recent-icon {
  font-size: 1.4rem;
}
.sim-recent-icon .mr-icon { font-variant-emoji: text; }

.sim-recent-name {
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.sim-recent-meta {
  font-size: 0.52rem;
  color: var(--sim-text-sec);
}

.sim-recent-status {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  font-size: 0.45rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 2px 6px;
  border-radius: 8px;
  white-space: nowrap;
}

.sim-recent-status.s-groups {
  color: var(--sim-teal);
  border: 1px solid rgba(42,157,143,0.3);
  background: rgba(42,157,143,0.06);
}

.sim-recent-status.s-knockout {
  color: var(--sim-accent);
  border: 1px solid rgba(233,196,106,0.3);
  background: rgba(233,196,106,0.06);
}

.sim-recent-status.s-completed {
  color: var(--sim-green);
  border: 1px solid rgba(74,222,128,0.3);
  background: rgba(74,222,128,0.06);
}

.sim-recent-status.s-setup {
  color: var(--sim-text-sec);
  border: 1px solid var(--sim-border);
  background: rgba(255,255,255,0.02);
}

/* ===== WORLD MAP (D3) ===== */
.sim-map-section {
  margin-bottom: 1.8rem;
}

.sim-map-wrap {
  /* Card framing intentionally removed so the map sits on the page surface
     instead of feeling like a self-contained widget. The radial gradient
     below keeps the sense of depth. position:relative is still needed to
     anchor the .sim-map-tabs absolutely-positioned children of the wrap. */
  position: relative;
}

.sim-map-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 40%, rgba(42,157,143,0.06) 0%, transparent 65%);
  pointer-events: none;
}

#world-map {
  width: 100%;
  display: block;
}

/* Sphere outline */
#world-map .sphere {
  fill: none;
  stroke: rgba(255,255,255,0.12);
  stroke-width: 0.5;
}

/* Graticule grid lines (parallels + meridians) */
#world-map .graticule {
  fill: none;
  stroke: rgba(255,255,255,0.06);
  stroke-width: 0.3;
}

/* Country border mesh — decoupled from .graticule so the two can be
   tuned independently. Lives in #gBorders, painted above gLand. */
#world-map .border-mesh {
  fill: none;
  stroke: rgba(255,255,255,0.07);
  stroke-width: 0.4;
  stroke-linejoin: round;
  pointer-events: none;
}

/* Default land */
#world-map .land {
  fill: rgba(255,255,255,0.06);
  stroke: rgba(255,255,255,0.08);
  stroke-width: 0.3;
  stroke-linejoin: round;
  transition: fill 0.25s ease, stroke 0.25s ease, filter 0.25s ease;
  cursor: var(--cur-default, default);
}
/* Kill transitions during zoom so redrawAll() doesn't fight CSS interpolation */
.sim-map-wrap.is-zooming #world-map .land,
.sim-map-wrap.is-zooming #world-map .land-micro,
.sim-map-wrap.is-zooming #world-map .graticule,
.sim-map-wrap.is-zooming #world-map .sphere,
.sim-map-wrap.is-zooming #world-map .border-mesh {
  transition: none !important;
}

/* Team countries */
#world-map .land.has-team {
  fill: rgba(42,157,143,0.30);
  stroke: rgba(42,157,143,0.45);
  cursor: var(--cur-pointer, pointer);
}

#world-map .land.has-team:hover {
  stroke: rgba(42,157,143,0.7);
  filter: drop-shadow(0 0 5px rgba(42,157,143,0.35));
}

/* Flag-on state: source country/territory keeps the gold halo while
   the flag-filled clone fades in over it (in #flagOverlay). */
#world-map .land.flag-on {
  stroke: rgba(233,196,106,0.9);
  stroke-width: 0.7;
  filter: drop-shadow(0 0 6px rgba(233,196,106,0.55)) drop-shadow(0 0 14px rgba(233,196,106,0.25));
}

/* Overseas-territory overlay shapes (e.g. French Guiana → France).
   Look identical to a normal team country in the default state. */
#world-map .land-overseas {
  stroke-width: 0.4;
}

/* Flag-fill clone (lives inside #flagOverlay, fades opacity 0 ↔ 1) */
#world-map .flag-clone {
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.32s cubic-bezier(.4,0,.2,1);
  filter: drop-shadow(0 0 5px rgba(233,196,106,0.45));
}
#world-map .flag-clone.fade-in { opacity: 1; }

/* Micro-nation circles */
#world-map .land-micro {
  stroke-width: 0.8;
  transition: r 0.3s ease, fill 0.25s ease, filter 0.25s ease;
}

/* Tooltip — fixed-positioned so it can escape any clipped ancestor and
   render correctly when hovering countries near the wrap edges. */
.sim-map-tooltip {
  position: fixed;
  top: 0;
  left: 0;
  background: var(--sim-surface-lit);
  border: 1px solid var(--sim-border-lit);
  color: var(--sim-text);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.7rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 100;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}

.sim-map-tooltip.visible { opacity: 1; }

/* Continent revolver selector */
.sim-map-tabs {
  display: flex;
  justify-content: center;
  margin: 0 auto 0.15rem;
  position: relative;
  z-index: 2;
}

.sim-map-tabs-oval {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--sim-border-lit);
  border-radius: 100px;
  padding: 4px 6px;
  overflow: hidden;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.03);
}

.sim-map-tabs-track {
  display: flex;
  align-items: center;
  gap: 2px;
  transition: transform 0.5s cubic-bezier(.22,.68,.31,1.01);
  will-change: transform;
}

/* ===== LOOP MODE =====
   When JS adds the .loop class to the oval, the strip switches from a
   flex layout to absolute positioning. Each tab is anchored to the oval's
   center and shifted left/right by its "ring distance" from the active.
   Wrapping (the last pill connecting to the first) is handled in JS by
   snap-jumping a tab to off-screen on the opposite side before animating. */
.sim-map-tabs-oval.loop .sim-map-tabs-track {
  display: block;
  position: relative;
  width: 100%;
  /* height set inline by JS to match a tab's natural height */
}
.sim-map-tabs-oval.loop .sim-map-tab {
  position: absolute;
  top: 50%;
  /* left set inline by JS; transform combines centering translate with scale */
  transform: translate(-50%, -50%) scale(0.85);
  margin: 0;
}
.sim-map-tabs-oval.loop .sim-map-tab.adj {
  transform: translate(-50%, -50%) scale(0.92);
}
.sim-map-tabs-oval.loop .sim-map-tab.active {
  transform: translate(-50%, -50%) scale(1);
}
.sim-map-tabs-oval.loop .sim-map-tab.active::after {
  /* Re-anchor the active glow dot since the tab itself is centered via translate */
  bottom: -3px;
}

.sim-map-tab {
  padding: 0.4rem 0.75rem;
  font-size: 0.5rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--sim-text-dim);
  cursor: var(--cur-pointer, pointer);
  white-space: nowrap;
  border: none;
  border-radius: 80px;
  background: none;
  transition: all 0.45s cubic-bezier(.22,.68,.31,1.01);
  user-select: none;
  flex-shrink: 0;
  transform: scale(0.85);
  opacity: 0.45;
  position: relative;
}

.sim-map-tab:hover {
  color: var(--sim-text-sec);
  opacity: 0.7;
}

/* Adjacent to active */
.sim-map-tab.adj {
  transform: scale(0.92);
  opacity: 0.6;
  color: var(--sim-text-sec);
}

/* Active: centered, full size, gold glow */
.sim-map-tab.active {
  color: var(--sim-accent);
  background: rgba(233,196,106,0.1);
  border: 1px solid rgba(233,196,106,0.25);
  transform: scale(1);
  opacity: 1;
  box-shadow: 0 0 12px rgba(233,196,106,0.12), inset 0 1px 0 rgba(233,196,106,0.1);
}

/* Glow dot under active */
.sim-map-tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: var(--sim-accent);
  box-shadow: 0 0 6px rgba(233,196,106,0.5);
}

/* ===== PAGE LOADER (mirrors chess/news/blog pattern, bishop icon) ===== */
.sim-loader {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw; height: 100vh; margin: 0;
  z-index: 9999;
  background: rgba(12,14,22,0.94);
  backdrop-filter: blur(28px) saturate(1.25);
  -webkit-backdrop-filter: blur(28px) saturate(1.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s cubic-bezier(.4,0,.2,1);
}
.sim-loader.active { opacity: 1; pointer-events: auto; }

.sim-loader-wrap {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 140px; height: 140px;
  pointer-events: none;
}
.sim-loader-inner {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 1;
  transition: opacity 0.45s cubic-bezier(.4,0,.2,1);
}
.sim-loader:not(.active) .sim-loader-inner { opacity: 0; }
.sim-loader:not(.active) .sim-loader-icon,
.sim-loader:not(.active) .sim-loader-glow { animation-play-state: paused; }

.sim-loader-glow {
  position: absolute;
  top: 50%; left: 50%;
  width: 180px; height: 180px;
  margin: -90px 0 0 -90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(233,196,106,0.4) 0%, rgba(233,196,106,0.1) 45%, transparent 72%);
  animation: simLdPulse 1.8s ease-in-out infinite;
  pointer-events: none;
}
.sim-loader-icon {
  position: relative;
  width: 80px; height: 80px;
  filter: invert(1) drop-shadow(0 0 14px rgba(233,196,106,0.75)) drop-shadow(0 0 28px rgba(233,196,106,0.35));
  transform-origin: center center;
  will-change: transform;
  opacity: 0; transition: opacity .3s ease;
}
.sim-loader-icon.icon-ready { opacity: 1; }

/* 10 animation variants */
.sim-loader-icon.anim-shake     { animation: simLdShake 0.7s cubic-bezier(.36,.07,.19,.97) infinite !important; }
.sim-loader-icon.anim-hop       { animation: simLdHop 0.85s cubic-bezier(.5,0,.5,1) infinite !important; }
.sim-loader-icon.anim-swing     { animation: simLdSwing 1.4s ease-in-out infinite !important; }
.sim-loader-icon.anim-spin      { animation: simLdSpin 1.6s cubic-bezier(.7,0,.3,1) infinite !important; }
.sim-loader-icon.anim-float     { animation: simLdFloat 2.2s ease-in-out infinite !important; }
.sim-loader-icon.anim-knight    { animation: simLdKnight 1.3s cubic-bezier(.5,0,.5,1) infinite !important; }
.sim-loader-icon.anim-tumble    { animation: simLdTumble 1.5s cubic-bezier(.45,.05,.55,.95) infinite !important; }
.sim-loader-icon.anim-heartbeat { animation: simLdHeartbeat 1.1s ease-out infinite !important; }
.sim-loader-icon.anim-wobble    { animation: simLdWobble 1.2s ease-in-out infinite !important; }
.sim-loader-icon.anim-drop      { animation: simLdDrop 1.1s cubic-bezier(.5,.05,.5,.95) infinite !important; }

@keyframes simLdPulse {
  0%, 100% { opacity: 0.55; transform: scale(0.9); }
  50%      { opacity: 1;    transform: scale(1.12); }
}
@keyframes simLdShake {
  0%, 100% { transform: translate(0,0) rotate(0deg); }
  15% { transform: translate(-3px,-1px) rotate(-4deg); }
  30% { transform: translate(3px,1px) rotate(4deg); }
  45% { transform: translate(-3px,1px) rotate(-3deg); }
  60% { transform: translate(3px,-1px) rotate(3deg); }
  75% { transform: translate(-1px,0) rotate(-1deg); }
}
@keyframes simLdHop {
  0%, 100% { transform: translateY(0) scaleY(1) scaleX(1); }
  20% { transform: translateY(0) scaleY(0.85) scaleX(1.1); }
  50% { transform: translateY(-18px) scaleY(1.1) scaleX(0.92); }
  80% { transform: translateY(0) scaleY(0.9) scaleX(1.08); }
}
@keyframes simLdSwing {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(14deg); }
  75% { transform: rotate(-14deg); }
}
@keyframes simLdSpin {
  0%   { transform: rotate(0deg) scale(1); }
  40%  { transform: rotate(180deg) scale(1.05); }
  100% { transform: rotate(360deg) scale(1); }
}
@keyframes simLdFloat {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-10px) rotate(2deg); }
}
@keyframes simLdKnight {
  0%   { transform: translate(0,0); }
  25%  { transform: translate(0,-14px); }
  50%  { transform: translate(10px,-14px); }
  75%  { transform: translate(10px,0); }
  100% { transform: translate(0,0); }
}
@keyframes simLdTumble {
  0%   { transform: rotate(0deg) translateY(0); }
  25%  { transform: rotate(90deg) translateY(-6px); }
  50%  { transform: rotate(180deg) translateY(0); }
  75%  { transform: rotate(270deg) translateY(-6px); }
  100% { transform: rotate(360deg) translateY(0); }
}
@keyframes simLdHeartbeat {
  0%, 50%, 100% { transform: scale(1); }
  15% { transform: scale(1.18); }
  30% { transform: scale(0.95); }
}
@keyframes simLdWobble {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  15% { transform: translateX(-10px) rotate(-6deg); }
  30% { transform: translateX(8px) rotate(5deg); }
  45% { transform: translateX(-6px) rotate(-4deg); }
  60% { transform: translateX(4px) rotate(3deg); }
  75% { transform: translateX(-2px) rotate(-1deg); }
}
@keyframes simLdDrop {
  0%   { transform: translateY(-20px) scale(1,0.8); opacity: 0.6; }
  40%  { transform: translateY(0) scale(1.12,0.88); opacity: 1; }
  55%  { transform: translateY(-6px) scale(0.96,1.08); }
  80%  { transform: translateY(0) scale(1.04,0.96); }
  100% { transform: translateY(0) scale(1,1); }
}
.sim-loader-icon.anim-nod     { animation: simLdNod 1.8s ease-in-out infinite !important; }
.sim-loader-icon.anim-peek    { animation: simLdPeek 2.4s ease-in-out infinite !important; }
.sim-loader-icon.anim-breathe { animation: simLdBreathe 2.6s ease-in-out infinite !important; }
.sim-loader-icon.anim-wiggle  { animation: simLdWiggle 1.4s ease-in-out infinite !important; }
.sim-loader-icon.anim-tiptoe  { animation: simLdTiptoe 1.6s ease-in-out infinite !important; }
.sim-loader-icon.anim-nuzzle  { animation: simLdNuzzle 2s ease-in-out infinite !important; }
@keyframes simLdNod {
    0%, 100% { transform: rotate(0) translateY(0); }
    30%      { transform: rotate(3deg) translateY(-3px); }
    60%      { transform: rotate(-2deg) translateY(-1px); }
}
@keyframes simLdPeek {
    0%, 100% { transform: translateX(0) rotate(0); }
    25%      { transform: translateX(5px) rotate(3deg); }
    50%      { transform: translateX(0) rotate(0); }
    75%      { transform: translateX(-5px) rotate(-3deg); }
}
@keyframes simLdBreathe {
    0%, 100% { transform: scale(1) translateY(0); }
    50%      { transform: scale(1.06) translateY(-3px); }
}
@keyframes simLdWiggle {
    0%, 100% { transform: rotate(0); }
    20%      { transform: rotate(5deg); }
    40%      { transform: rotate(-4deg); }
    60%      { transform: rotate(3deg); }
    80%      { transform: rotate(-2deg); }
}
@keyframes simLdTiptoe {
    0%, 100% { transform: translateY(0) scaleY(1); }
    40%      { transform: translateY(-6px) scaleY(1.03); }
    55%      { transform: translateY(-4px) scaleY(1); }
    70%      { transform: translateY(-6px) scaleY(1.02); }
}
@keyframes simLdNuzzle {
    0%, 100% { transform: translate(0,0) rotate(0); }
    20%      { transform: translate(3px,-2px) rotate(4deg); }
    50%      { transform: translate(-2px,-3px) rotate(-3deg); }
    80%      { transform: translate(1px,-1px) rotate(2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .sim-loader-icon, .sim-loader-glow { animation: none !important; }
  /* D3 zoom transitions are handled in JS via matchMedia check */
}

/* ===== RESPONSIVE ===== */
@media (max-width: 880px) {
  .sim-games { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  #world-map { min-height: 260px; }
  .sim-map-tooltip { font-size: 0.68rem; }
  /* Show descriptions by default on touch-friendly screens */
  .sim-game-desc { opacity: 1; transform: none; }
}

@media (max-width: 560px) {
  .sim-hero-title { font-size: 1.2rem; letter-spacing: 3px; }
  .sim-games { grid-template-columns: 1fr; }
  .sim-game:nth-child(n) { grid-column: span 1; }
}

/* Touch devices: enlarge hit targets for country paths */
@media (pointer: coarse) {
  #world-map .land.has-team { stroke-width: 1.5px; }
  .sim-map-tooltip { font-size: 0.75rem; padding: 0.45rem 0.65rem; }
}

/* Mobile: no zoom cursor on blank map zones — pills are the only zoom control */
@media (max-width: 768px) {
  #world-map .land:not(.has-team) { cursor: var(--cur-default, default) !important; }
}