:root {
  --zenx-ink: #eef4f6;
  --zenx-muted: #b8c6cf;
  --zenx-surface-top: #24465a;
  --zenx-surface-bottom: #121a30;
  --zenx-accent: #557fe8;
  --zenx-accent-soft: #42bfa9;
  --zenx-warm: #e9757e;
  --zenx-gold: #ddb35f;
  --zenx-pattern: rgba(255, 255, 255, .045);
}

html[data-zenx-game="pool-master"] { --zenx-surface-top:#245565; --zenx-surface-bottom:#14233d; --zenx-accent:#52a8c5; --zenx-accent-soft:#d2a75d; }
html[data-zenx-game="ludo"] { --zenx-surface-top:#356b7d; --zenx-surface-bottom:#24385f; --zenx-accent:#55a8c7; --zenx-accent-soft:#d3b45f; }
html[data-zenx-game="juno"] { --zenx-surface-top:#604f86; --zenx-surface-bottom:#29375e; --zenx-accent:#a586c0; --zenx-accent-soft:#dda85d; }
html[data-zenx-game="bubble-shooter-classic"] { --zenx-surface-top:#397588; --zenx-surface-bottom:#24375f; --zenx-accent:#63adc2; --zenx-accent-soft:#d2859f; }
html[data-zenx-game="carrom-strike"] { --zenx-surface-top:#81495a; --zenx-surface-bottom:#3c2945; --zenx-accent:#d08c68; --zenx-accent-soft:#78ad91; }
html[data-zenx-game="spider-solitaire"] { --zenx-surface-top:#326852; --zenx-surface-bottom:#142d30; --zenx-accent:#8eb77c; --zenx-accent-soft:#d1a95e; }
html[data-zenx-game="bubble-wipeout"] { --zenx-surface-top:#66577c; --zenx-surface-bottom:#30435f; --zenx-accent:#ac80b4; --zenx-accent-soft:#d18674; }
html[data-zenx-game="ludo-dash"] { --zenx-surface-top:#34798d; --zenx-surface-bottom:#253b65; --zenx-accent:#55b6b1; --zenx-accent-soft:#d1b35d; }
html[data-zenx-game="candy-fiesta"] { --zenx-surface-top:#865d78; --zenx-surface-bottom:#443e6d; --zenx-accent:#cc7f9f; --zenx-accent-soft:#dda866; }
html[data-zenx-game="bubble-smash"] { --zenx-surface-top:#607c87; --zenx-surface-bottom:#33475f; --zenx-accent:#68b5ad; --zenx-accent-soft:#dab05d; }

html,
body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background-color: var(--zenx-surface-bottom) !important;
  overscroll-behavior: none;
}

/* The native shells resize only the game overlay. Keep every recovered game
   anchored to that live viewport so browser chrome, cutouts, and fold/unfold
   changes cannot create a second layout surface or stale touch coordinates. */
@supports (height: 100dvh) {
  html,
  body {
    height: 100dvh;
    min-height: 100dvh;
  }
}

html[data-zenx-game="juno"] body,
html[data-zenx-game="carrom-strike"] body,
html[data-zenx-game="carrom-strike"] #content {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  overflow: hidden !important;
  background-color: var(--zenx-surface-bottom) !important;
}

html[data-zenx-game="juno"] #canvas {
  display: block;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

/* These elements become the visible letterbox on unusual phone ratios. Keeping
   them on-theme avoids the hard black bars that were especially obvious on
   Samsung devices while leaving the game canvas and its hit testing untouched. */
#Cocos3dGameContainer,
#c2canvas,
#gameContainer,
#gameBody {
  background-color: var(--zenx-surface-bottom) !important;
}

html[data-zenx-game="ludo"] #gameBody,
html[data-zenx-game="ludo-dash"] #gameBody {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

html[data-zenx-game="bubble-wipeout"] #gameContainer {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
}

#zenx-player-strip {
  position: fixed;
  z-index: 2147483646;
  top: max(7px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100vw - 92px);
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: color-mix(in srgb, var(--zenx-surface-bottom) 88%, transparent);
  box-shadow: 0 7px 22px rgba(9,18,31,.28);
  color: var(--zenx-ink);
  font: 650 12px/1.1 system-ui,-apple-system,"Segoe UI",sans-serif;
  pointer-events: none;
  backdrop-filter: blur(10px) saturate(.85);
}

#zenx-player-strip .zenx-player { display:flex; align-items:center; gap:6px; min-width:0; max-width:145px; }
#zenx-player-strip .zenx-player.is-you b { color:#b9d9dc; }
#zenx-player-strip img { width:22px; height:22px; flex:0 0 auto; border:1px solid rgba(255,255,255,.45); border-radius:50%; object-fit:cover; background:#e8edf0; }
#zenx-player-strip b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#zenx-player-strip i { color:var(--zenx-accent-soft); font-style:normal; font-size:10px; }

@media (max-width:420px) {
  #zenx-player-strip { gap:5px; padding:5px 8px; font-size:10px; }
  #zenx-player-strip img { width:19px; height:19px; }
}

/* Juno and Carrom render both player names inside their own responsive HUDs.
   Do not duplicate that information over the board/card surface. */
html[data-zenx-game="juno"] #zenx-player-strip,
html[data-zenx-game="carrom-strike"] #zenx-player-strip {
  display: none !important;
}

/* Candy Match must keep Phaser's FIT canvas anchored to one stable viewport.
   Browser scrolling previously shifted the board and invalidated touch coords. */
html[data-zenx-game="candy-fiesta"],
html[data-zenx-game="candy-fiesta"] body,
html[data-zenx-game="candy-fiesta"] #game,
html[data-zenx-game="candy-fiesta"] #theGame {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  overscroll-behavior: none;
  touch-action: none;
}

html[data-zenx-game="candy-fiesta"] #game { z-index:1; }
html[data-zenx-game="candy-fiesta"] #game canvas {
  display:block;
  touch-action:none !important;
  user-select:none;
  -webkit-user-select:none;
}
html[data-zenx-game="candy-fiesta"] #theGame {
  pointer-events:none;
  background:
    radial-gradient(circle at 24% 22%, rgba(197,151,170,.2), transparent 30%),
    linear-gradient(155deg, #554864, #344b62) !important;
}

#zenx-loader {
  position: fixed;
  z-index: 2147483647;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-content: center;
  justify-items: center;
  gap: 11px;
  padding: max(28px, env(safe-area-inset-top)) 28px max(28px, env(safe-area-inset-bottom));
  overflow: hidden;
  isolation: isolate;
  color: var(--zenx-ink);
  background:
    radial-gradient(circle at 19% 14%, color-mix(in srgb, var(--zenx-accent) 30%, transparent), transparent 32%),
    radial-gradient(circle at 84% 82%, color-mix(in srgb, var(--zenx-warm) 19%, transparent), transparent 36%),
    linear-gradient(155deg, var(--zenx-surface-top), var(--zenx-surface-bottom));
  font-family: Inter, ui-rounded, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: center;
  opacity: 1;
  transition: opacity .34s ease;
}

#zenx-loader::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -20%;
  opacity: .62;
  background-image:
    linear-gradient(30deg, transparent 48%, var(--zenx-pattern) 49%, var(--zenx-pattern) 51%, transparent 52%),
    linear-gradient(150deg, transparent 48%, var(--zenx-pattern) 49%, var(--zenx-pattern) 51%, transparent 52%);
  background-size: 46px 78px;
  transform: rotate(-7deg);
}

#zenx-loader::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 34%, rgba(6,14,27,.27) 100%);
  pointer-events: none;
}

#zenx-loader.is-hidden { opacity:0; pointer-events:none; }
#zenx-loader > * { position:relative; z-index:1; }

.zenx-loader-logo {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  margin-bottom:5px;
}

.zenx-loader-emblem {
  display:block;
  width:clamp(88px, 24vw, 116px);
  height:clamp(88px, 24vw, 116px);
  object-fit:contain;
  filter:drop-shadow(0 18px 34px rgba(4,12,30,.34));
}

.zenx-loader-wordmark {
  color:#f5f7fb;
  font-size:clamp(20px, 5.8vw, 28px);
  font-weight:850;
  letter-spacing:-.045em;
  line-height:1;
  text-shadow:0 5px 18px rgba(2,9,24,.28);
}

.zenx-loader-wordmark b {
  color:var(--zenx-warm);
  font:inherit;
}

.zenx-loader-title {
  max-width: 320px;
  margin-top: 3px;
  color:color-mix(in srgb, var(--zenx-ink) 92%, var(--zenx-accent));
  font-size: clamp(24px, 7vw, 36px);
  font-weight: 820;
  line-height: 1.04;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.zenx-loader-track {
  width: min(210px, 58vw);
  height: 6px;
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(7,16,29,.3);
}

.zenx-loader-progress {
  display: block;
  width: 100%;
  height: 100%;
  transform:scaleX(.08);
  transform-origin:left center;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--zenx-accent), var(--zenx-accent-soft), var(--zenx-gold));
  transition:transform .22s ease-out;
}

#zenx-loader[data-progress="indeterminate"] .zenx-loader-progress {
  width:42%;
  transform:translateX(-110%);
  animation:zenx-load 1.35s ease-in-out infinite;
}

.zenx-loader-copy {
  max-width: 290px;
  margin-top: 3px;
  color: color-mix(in srgb, var(--zenx-muted) 82%, var(--zenx-accent));
  font-size: 13px;
  line-height: 1.35;
  letter-spacing: .015em;
}

.zenx-loader-motif {
  position:absolute !important;
  z-index:0 !important;
  inset:0;
  pointer-events:none;
}

.zenx-loader-motif i {
  position:absolute;
  display:block;
  width:clamp(34px, 10vw, 56px);
  aspect-ratio:1;
  border-radius:50%;
  opacity:.18;
  background:radial-gradient(circle at 32% 27%, rgba(255,255,255,.7), transparent 20%), var(--zenx-accent);
  box-shadow:0 14px 30px rgba(4,12,29,.26);
}

.zenx-loader-motif i:nth-child(1) { left:7%; bottom:13%; transform:scale(.72); }
.zenx-loader-motif i:nth-child(2) { right:8%; top:12%; background-color:var(--zenx-warm); transform:scale(.52); }
.zenx-loader-motif i:nth-child(3) { right:4%; bottom:8%; background-color:var(--zenx-accent-soft); transform:scale(.9); }

html[data-zenx-game="pool-master"] .zenx-loader-motif i { opacity:.32; }
html[data-zenx-game="pool-master"] .zenx-loader-motif i:nth-child(1) { background-color:#151923; }
html[data-zenx-game="pool-master"] .zenx-loader-motif i:nth-child(1)::after {
  content:"8";
  position:absolute;
  inset:30%;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#f5f2e9;
  color:#151923;
  font:800 12px/1 system-ui,sans-serif;
}
html[data-zenx-game="pool-master"] .zenx-loader-motif i:nth-child(2) { background-color:#547bd1; }
html[data-zenx-game="pool-master"] .zenx-loader-motif i:nth-child(3) { background-color:#a86f9d; }

@keyframes zenx-load {
  0% { transform: translateX(-105%); }
  55%,100% { transform: translateX(230%); }
}

@media (prefers-reduced-motion:reduce) {
  #zenx-loader[data-progress="indeterminate"] .zenx-loader-progress { animation-duration:2.7s; }
}