/*
 * Candy-kitchen / royal-pet parlor theme.
 * Layers: #world-bg → #board-table → Phaser canvas → #ui-overlay
 */

:root {
  --ck-frosting: #FF8FB7;
  --ck-cream: #FFF6E8;
  --ck-mint: #7DFFB3;
  --ck-lemon: #FFE566;
  --ck-blueberry: #6BA3FF;
  --ck-grape: #C89BFF;
  --ck-chocolate: #5A3A2A;
  --ck-orange: #FF9B4A;
  --ck-strawberry: #FF6B8A;
  --ck-ink: #5A3A2A;
  --ck-panel: rgba(255, 246, 232, 0.94);
  --ck-text: #5A3A2A;
  --ck-muted: #8B5E4A;

  --jh-teal: #FFF6E8;
  --jh-teal-deep: #FFE8D2;
  --jh-gold: #FF8FB7;
  --jh-gold-dim: #E06A98;
  --jh-magenta: #FF8FB7;
  --jh-cyan: #7DFFB3;
  --jh-violet: #C89BFF;
  --jh-ink: #5A3A2A;
  --jh-panel: rgba(255, 246, 232, 0.94);
  --jh-text: #5A3A2A;
  --jh-muted: #8B5E4A;
}

#world-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #FFF6E8;
}

.world-sky {
  position: absolute;
  inset: -16%;
  background:
    radial-gradient(ellipse 72% 48% at 16% 18%, rgba(255, 143, 183, 0.55), transparent 62%),
    radial-gradient(ellipse 58% 42% at 84% 12%, rgba(255, 229, 102, 0.32), transparent 58%),
    radial-gradient(ellipse 80% 50% at 70% 92%, rgba(125, 255, 179, 0.22), transparent 62%),
    radial-gradient(ellipse 50% 36% at 10% 78%, rgba(200, 155, 255, 0.18), transparent 55%),
    linear-gradient(180deg, #FFD6E8 0%, #FFF6E8 44%, #FFEFD6 100%);
  background-size: 140% 140%, 150% 150%, 130% 130%, 160% 160%, 100% 100%;
  animation: worldSkyDrift 26s ease-in-out infinite alternate;
}

@keyframes worldSkyDrift {
  0%   { background-position: 0% 18%, 100% 0%, 80% 100%, 10% 90%, 0 0; transform: scale(1); }
  50%  { background-position: 28% 36%, 72% 22%, 42% 70%, 18% 58%, 0 0; }
  100% { background-position: 52% 10%, 40% 58%, 22% 42%, 48% 28%, 0 0; transform: scale(1.04); }
}

.world-orbs { position: absolute; inset: 0; }
.world-orbs::before,
.world-orbs::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(8px);
  opacity: 0.7;
}
.world-orbs::before {
  width: 38vw; height: 38vw; left: -10vw; top: 22vh;
  background: radial-gradient(circle at 35% 35%, rgba(255, 143, 183, 0.55), rgba(255, 246, 232, 0) 70%);
  animation: orbFloat 18s ease-in-out infinite;
}
.world-orbs::after {
  width: 32vw; height: 32vw; right: -8vw; top: 10vh;
  background: radial-gradient(circle at 40% 30%, rgba(125, 255, 179, 0.4), rgba(255, 246, 232, 0) 70%);
  animation: orbFloat 21s ease-in-out infinite reverse;
}
@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(3vw, -2vh) scale(1.08); }
}

.world-floor {
  position: absolute;
  left: -20%; right: -20%; bottom: -22%; height: 42%;
  background:
    linear-gradient(to top, rgba(255, 214, 186, 0.7) 0%, rgba(255, 246, 232, 0.18) 58%, transparent 100%),
    repeating-linear-gradient(90deg, rgba(255, 143, 183, 0.14) 0 3px, transparent 3px 52px);
  transform: perspective(900px) rotateX(58deg);
  transform-origin: center bottom;
  pointer-events: none;
}

.world-sparkles {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 1.5px, transparent 2.5px),
    radial-gradient(circle, rgba(255, 143, 183, 0.85) 0 1.5px, transparent 2.5px),
    radial-gradient(circle, rgba(255, 229, 102, 0.8) 0 1.5px, transparent 2.5px);
  background-size: 170px 190px, 230px 210px, 150px 250px;
  background-position: 10% 20%, 70% 40%, 40% 80%;
  animation: sparkleDrift 20s linear infinite;
  opacity: 0.4;
  mix-blend-mode: multiply;
}
@keyframes sparkleDrift {
  from { background-position: 10% 20%, 70% 40%, 40% 80%; }
  to   { background-position: 18% 8%, 62% 52%, 48% 68%; }
}

body.match3-bg {
  background: #FFF6E8 !important;
  animation: none !important;
}

canvas {
  position: relative;
  z-index: 10;
}

/* Under-canvas candy frame hugging the 5×9 board */
#board-table {
  position: fixed;
  z-index: 5;
  pointer-events: none;
  transform: none;
  transform-origin: center center;
  box-sizing: border-box;
}
#board-table.is-hidden {
  display: none;
}

.ui-center-wrap {
  position: relative;
  min-height: 0;
  display: flex;
  perspective: none;
}

.table-surface {
  position: absolute;
  inset: 2% 1% 0;
  border-radius: 28px;
  pointer-events: none;
  transform: none;
  transform-origin: center center;
  background:
    radial-gradient(ellipse 80% 46% at 50% 0%, rgba(255, 255, 255, 0.7), transparent 58%),
    linear-gradient(180deg, #FFF6E8 0%, #FFE4CC 100%);
  border: 6px solid var(--ck-frosting, #FF8FB7);
  box-shadow:
    0 6px 0 var(--ck-chocolate, #5A3A2A),
    0 12px 28px rgba(90, 58, 42, 0.22),
    inset 0 3px 0 rgba(255, 255, 255, 0.72);
  overflow: hidden;
}
#board-table.table-surface {
  inset: auto;
}

.table-surface::before {
  content: "";
  position: absolute;
  left: 10%; right: 10%; top: 6%; height: 26%;
  border-radius: 40%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.55), transparent);
  filter: blur(6px);
  opacity: 0.75;
  animation: tableSheen 8s ease-in-out infinite;
}
.table-surface::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 20px;
  border: 3px solid var(--ck-chocolate, #5A3A2A);
  box-shadow: inset 0 0 18px rgba(255, 143, 183, 0.18);
}
@keyframes tableSheen {
  0%, 100% { transform: translateX(-5%); opacity: 0.5; }
  50% { transform: translateX(7%); opacity: 0.85; }
}

.ui-overlay--match3 .overlay-table,
.ui-overlay--match3 .ui-center-label {
  display: none !important;
}
.ui-overlay--match3 .ui-center-stage {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.ui-overlay--overworld .overlay-table {
  transform: none;
}