body{
  margin:0;
  font-family:'Segoe UI', Arial;
  background:radial-gradient(circle at top,#2c2c44,#0b0b12);
  color:white;
  transition:0.5s;
  min-height:100vh;
  overflow-x:hidden;
  position:relative;

  display:flex;
  flex-direction:column;
  align-items:center;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  touch-action:manipulation;
}

*,
*::before,
*::after{
  -webkit-tap-highlight-color:transparent;
}

button,
.card,
.dockBtn,
.autoOpenToggle,
.gameInfoBtn,
.appInstallBtn,
.freeRewardsBtn,
.codesBtn,
#kret,
#kret *,
.bossVisual,
.bossVisual *,
.eventBossVisual,
.eventBossVisual *,
.activePet,
.petVisual,
.skinPreview,
.eggVisual,
.crateVisual{
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  -webkit-user-drag:none;
  touch-action:manipulation;
}

input,
textarea{
  -webkit-user-select:text;
  user-select:text;
  touch-action:manipulation;
}

body::before,
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
}

body::before{
  background:var(--world-detail, radial-gradient(circle at 12% 18%, rgba(255,255,255,0.08), transparent 16%));
  opacity:.78;
  mix-blend-mode:screen;
}

body::after{
  background:var(--world-specks, radial-gradient(circle at 25% 30%, rgba(255,255,255,0.28) 0 1px, transparent 2px));
  background-size:220px 170px;
  opacity:.28;
  animation:worldDrift 18s linear infinite;
}

body > *{
  position:relative;
  z-index:1;
}

#topHud{
  box-sizing:border-box;
  width:min(920px, calc(100vw - 28px));
  margin:14px auto 8px;
  padding:12px 18px;
  display:grid;
  grid-template-columns:minmax(210px, 1fr) auto;
  align-items:center;
  gap:16px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:24px;
  background:
    radial-gradient(circle at 12% 8%, rgba(255,255,255,.18), transparent 34%),
    linear-gradient(135deg, rgba(12,16,30,.78), rgba(7,9,17,.54));
  box-shadow:0 18px 44px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.14);
  backdrop-filter:blur(16px) saturate(1.3);
}

h1{
  font-size:34px;
  line-height:1;
  margin:0;
  text-shadow:0 0 15px rgba(255,255,255,0.2);
}

#topTitle{
  min-width:0;
}

#rebirthLabel{
  margin-top:6px;
  font-size:14px;
  font-weight:900;
  letter-spacing:.06em;
  opacity:0.82;
}

#topCurrencies{
  display:grid;
  justify-items:end;
  gap:5px;
  min-width:230px;
}

#ui{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:12px;
  font-size:28px;
  font-weight:1000;
  line-height:1.08;
}

#ui span{
  display:inline-flex;
  align-items:center;
  gap:5px;
}

#ui .diamondCurrency{
  font-size:28px !important;
  opacity:1 !important;
  margin-left:0 !important;
}

#stats{
  font-size:13px;
  font-weight:900;
  opacity:0.78;
  margin:0;
}

.autoOpenToggle{
  position:fixed;
  left:14px;
  top:16px;
  z-index:36;
  min-width:158px;
  border:none;
  border-radius:18px;
  padding:11px 14px;
  cursor:pointer;
  color:#fff;
  font-weight:900;
  letter-spacing:.6px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.06)),
    rgba(9,12,22,.72);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 12px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter:blur(16px) saturate(1.35);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, opacity .18s ease;
}

.autoCrateToggle{
  top:62px;
  left:14px;
}

.autoOpenToggle:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 36px rgba(0,0,0,.4), 0 0 18px rgba(120,210,255,.18), inset 0 1px 0 rgba(255,255,255,.22);
}

.autoOpenToggle.on{
  background:linear-gradient(135deg,rgba(76,255,167,.88),rgba(46,169,255,.78));
  color:#06131b;
  box-shadow:0 0 22px rgba(76,255,167,.28),0 14px 34px rgba(0,0,0,.36);
}

.autoOpenToggle.locked{
  opacity:.68;
  filter:grayscale(.25);
  background:
    linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.04)),
    rgba(10,10,16,.74);
}

.gameInfoBtn,
.appInstallBtn,
.freeRewardsBtn{
  position:fixed;
  top:18px;
  z-index:36;
  width:40px;
  height:40px;
  border-radius:50%;
  display:grid;
  place-items:center;
  padding:0;
  line-height:1;
}

.gameInfoBtn{
  left:184px;
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
  font-weight:900;
  font-size:18px;
  cursor:pointer;
  background:
    radial-gradient(circle at 32% 22%, rgba(255,255,255,.32), transparent 34%),
    var(--panel-bg, rgba(9,12,22,.72));
  box-shadow:0 10px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter:blur(15px) saturate(1.35);
  transition:transform .18s ease, box-shadow .18s ease;
}

.gameInfoBtn:hover{
  transform:translateY(-2px) scale(1.04);
  box-shadow:0 14px 30px rgba(0,0,0,.4),0 0 18px rgba(255,255,255,.18);
}

.appInstallBtn{
  left:316px;
  border:1px solid rgba(120,220,255,.28);
  color:#fff;
  font-size:18px;
  cursor:pointer;
  background:
    radial-gradient(circle at 35% 18%, rgba(105,221,255,.35), transparent 38%),
    rgba(8,12,22,.7);
  box-shadow:0 10px 24px rgba(0,0,0,.35),0 0 18px rgba(82,205,255,.14), inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter:blur(15px) saturate(1.35);
  transition:transform .18s ease, box-shadow .18s ease;
}

.appInstallBtn:hover{
  transform:translateY(-2px) scale(1.04);
  box-shadow:0 14px 30px rgba(0,0,0,.4),0 0 22px rgba(93,218,255,.25);
}

.freeRewardsBtn{
  left:364px;
  border:1px solid rgba(255,230,118,.34);
  color:#fff;
  font-size:20px;
  cursor:pointer;
  background:
    radial-gradient(circle at 35% 18%, rgba(255,255,255,.36), transparent 34%),
    linear-gradient(145deg, rgba(255,84,142,.78), rgba(255,199,75,.76));
  box-shadow:0 12px 28px rgba(0,0,0,.36),0 0 22px rgba(255,204,83,.24), inset 0 1px 0 rgba(255,255,255,.2);
  backdrop-filter:blur(15px) saturate(1.35);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.freeRewardsBtn.ready{
  animation:freeGiftPulse 1.7s ease-in-out infinite;
}

.freeRewardsBtn:hover{
  transform:translateY(-2px) scale(1.06);
  filter:saturate(1.12);
}

.streakHud{
  position:fixed;
  left:232px;
  top:18px;
  z-index:36;
  min-width:58px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 11px;
  border:1px solid rgba(255,210,118,.24);
  border-radius:999px;
  color:#fff;
  background:
    radial-gradient(circle at 30% 0%, rgba(255,186,72,.25), transparent 58%),
    rgba(8,10,18,.66);
  box-shadow:0 12px 28px rgba(0,0,0,.26), 0 0 18px rgba(255,127,52,.12);
  backdrop-filter:blur(12px);
}

.streakTooltip{
  position:absolute;
  left:50%;
  top:calc(100% + 8px);
  width:230px;
  transform:translate(-50%, -4px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  z-index:80;
  display:grid;
  gap:4px;
  padding:12px;
  border-radius:16px;
  color:#fff;
  text-align:left;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,190,72,.22), transparent 50%),
    rgba(8,10,18,.92);
  border:1px solid rgba(255,210,118,.28);
  box-shadow:0 18px 42px rgba(0,0,0,.42),0 0 22px rgba(255,142,42,.16);
  backdrop-filter:blur(14px) saturate(1.25);
  transition:opacity .08s ease, transform .08s ease, visibility .08s ease;
}

.streakTooltip b,
.streakTooltip span,
.streakTooltip small,
.streakTooltip em{
  display:block;
}

.streakTooltip b{
  color:#ffd772;
  font-size:13px;
}

.streakTooltip span,
.streakTooltip small,
.streakTooltip em{
  color:rgba(255,255,255,.76);
  font-size:12px;
  line-height:1.28;
}

.streakTooltip em{
  color:rgba(255,204,126,.78);
  font-style:normal;
}

.streakHud:hover .streakTooltip,
.streakHud:focus-within .streakTooltip{
  opacity:0;
  visibility:hidden;
}

.kretHoverTooltip{
  position:fixed;
  z-index:99999;
  max-width:min(280px, calc(100vw - 24px));
  pointer-events:none;
  opacity:0;
  transform:translateY(4px) scale(.98);
  padding:10px 12px;
  border-radius:16px;
  color:#fff;
  white-space:pre-line;
  font-size:12px;
  line-height:1.32;
  font-weight:800;
  background:
    radial-gradient(circle at 18% 0%, rgba(255,190,72,.2), transparent 52%),
    rgba(8,10,18,.94);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 18px 42px rgba(0,0,0,.42),0 0 22px rgba(125,245,255,.14);
  backdrop-filter:blur(14px) saturate(1.25);
  transition:opacity .07s ease, transform .07s ease;
}

.kretHoverTooltip.show{
  opacity:1;
  transform:translateY(0) scale(1);
}

.streakHud b{
  font-size:15px;
  line-height:1;
}

.streakFlame{
  font-size:20px;
  filter:drop-shadow(0 0 8px rgba(255,126,42,.45));
}

.streakHud.doneToday{
  border-color:rgba(255,197,82,.42);
  box-shadow:0 12px 28px rgba(0,0,0,.26), 0 0 22px rgba(255,142,42,.24);
}

.streakHud.maxed .streakFlame{
  animation:streakFlamePulse 1.7s ease-in-out infinite;
}

.streakRecoveryBox{
  position:fixed;
  right:max(14px, env(safe-area-inset-right));
  top:96px;
  z-index:82;
  display:none;
  width:min(230px, calc(100vw - 28px));
  padding:10px;
  border:1px solid rgba(255,112,82,.42);
  border-radius:16px;
  color:#fff;
  background:linear-gradient(145deg,rgba(86,20,24,.9),rgba(14,10,19,.9));
  box-shadow:0 18px 38px rgba(0,0,0,.36),0 0 22px rgba(255,87,72,.16);
  backdrop-filter:blur(14px);
}

.streakRecoveryBox.show{
  display:grid;
  gap:5px;
  animation:uiCardIn .2s ease both;
}

.streakRecoveryBox span,
.streakRecoveryBox small{
  color:rgba(255,255,255,.76);
  font-size:11px;
  font-weight:900;
}

.streakRecoveryBox b{
  color:#ffcf85;
  font-size:14px;
}

.streakRecoveryBox button{
  margin-top:3px;
  padding:8px 10px;
  border-radius:12px;
  color:#fff;
  font-weight:1000;
  background:linear-gradient(135deg,#ff6a54,#c92f53);
}

@keyframes streakFlamePulse{
  0%,100%{transform:scale(1); filter:drop-shadow(0 0 8px rgba(255,126,42,.45));}
  50%{transform:scale(1.12); filter:drop-shadow(0 0 14px rgba(255,220,88,.7));}
}

.appInstallOverlay{
  position:fixed;
  inset:0;
  z-index:90;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(2,4,12,.58);
  backdrop-filter:blur(10px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .22s ease, visibility .22s ease;
}

.appInstallOverlay.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

#appInstallCard{
  width:min(430px, calc(100vw - 32px));
  max-height:calc(100vh - 36px);
  overflow:auto;
  border:1px solid rgba(130,225,255,.24);
  border-radius:28px;
  padding:18px;
  color:#fff;
  background:
    radial-gradient(circle at 12% 0%, rgba(96,213,255,.22), transparent 38%),
    linear-gradient(145deg, rgba(13,18,34,.94), rgba(7,9,18,.9));
  box-shadow:0 28px 80px rgba(0,0,0,.55),0 0 30px rgba(91,207,255,.16), inset 0 1px 0 rgba(255,255,255,.16);
  transform:translateY(12px) scale(.985);
  transition:transform .24s cubic-bezier(.2,.85,.25,1), opacity .2s ease;
  opacity:.92;
}

.appInstallOverlay.open #appInstallCard{
  transform:translateY(0) scale(1);
  opacity:1;
}

.appInstallTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}

.appInstallTop span{
  display:block;
  color:#8ee7ff;
  font-size:11px;
  font-weight:1000;
  letter-spacing:.14em;
}

.appInstallTop b{
  display:block;
  font-size:24px;
  line-height:1.05;
}

#appInstallClose{
  width:34px;
  height:34px;
  border:none;
  border-radius:50%;
  color:#fff;
  cursor:pointer;
  font-weight:1000;
  background:rgba(255,255,255,.12);
}

.appInstallBonus{
  display:grid;
  grid-template-columns:48px 1fr;
  gap:12px;
  align-items:center;
  padding:13px;
  border-radius:20px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
}

.appInstallBonus > span{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:linear-gradient(145deg, rgba(96,213,255,.34), rgba(84,255,170,.16));
  box-shadow:0 0 18px rgba(96,213,255,.18);
  font-size:25px;
}

.appInstallBonus b,
.appInstallBonus small{
  display:block;
}

.appInstallBonus small{
  margin-top:4px;
  color:rgba(255,255,255,.72);
  line-height:1.35;
}

.appInstallStatus{
  margin:12px 0;
  padding:10px 12px;
  border-radius:16px;
  color:#dce9ff;
  font-size:13px;
  font-weight:900;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
}

.appInstallStatus.active{
  color:#081914;
  background:linear-gradient(135deg, rgba(96,255,183,.95), rgba(96,213,255,.82));
}

.appInstallSteps{
  display:grid;
  gap:7px;
  padding:12px 2px 4px;
  color:rgba(255,255,255,.76);
  font-size:13px;
  line-height:1.35;
}

.appInstallSteps b{
  color:#fff;
  margin-top:4px;
}

.appInstallPromptBtn{
  width:100%;
  margin-top:14px;
  border:none;
  border-radius:18px;
  padding:13px 15px;
  cursor:pointer;
  color:#07131b;
  font-weight:1000;
  letter-spacing:.04em;
  background:linear-gradient(135deg,#79f0ff,#6dffb9);
  box-shadow:0 14px 34px rgba(0,0,0,.34),0 0 24px rgba(111,235,255,.22);
}

.appInstallPromptBtn[hidden]{
  display:none;
}

.freeRewardsOverlay{
  position:fixed;
  inset:0;
  z-index:91;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(3,4,13,.62);
  backdrop-filter:blur(11px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .22s ease, visibility .22s ease;
}

.freeRewardsOverlay.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

#freeRewardsCard{
  width:min(680px, calc(100vw - 32px));
  max-height:calc(100vh - 36px);
  overflow:auto;
  border:1px solid rgba(255,218,102,.26);
  border-radius:30px;
  padding:18px;
  color:#fff;
  background:
    radial-gradient(circle at 10% 0%, rgba(255,89,148,.22), transparent 38%),
    radial-gradient(circle at 88% 8%, rgba(255,216,93,.2), transparent 34%),
    linear-gradient(145deg, rgba(17,18,36,.96), rgba(8,10,20,.93));
  box-shadow:0 28px 80px rgba(0,0,0,.55),0 0 34px rgba(255,190,84,.15), inset 0 1px 0 rgba(255,255,255,.16);
  transform:translateY(12px) scale(.985);
  opacity:.92;
  transition:transform .24s cubic-bezier(.2,.85,.25,1), opacity .2s ease;
}

.freeRewardsOverlay.open #freeRewardsCard{
  transform:translateY(0) scale(1);
  opacity:1;
}

.freeRewardsTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:16px;
}

.freeRewardsTop span{
  display:block;
  color:#ffd86d;
  font-size:11px;
  font-weight:1000;
  letter-spacing:.14em;
}

.freeRewardsTop b{
  display:block;
  font-size:32px;
  line-height:1;
  text-shadow:0 0 18px rgba(255,216,109,.24);
}

#freeRewardsClose{
  width:36px;
  height:36px;
  border:none;
  border-radius:50%;
  color:#fff;
  cursor:pointer;
  font-weight:1000;
  background:rgba(255,255,255,.12);
}

.freeRewardsGrid{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(210px, 250px);
  gap:14px;
  align-items:start;
}

.freeRewardsGiftGrid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}

.freeRewardGift{
  position:relative;
  min-height:132px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:22px;
  padding:12px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:8px;
  cursor:pointer;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.15), transparent 48%),
    rgba(255,255,255,.065);
  box-shadow:0 14px 30px rgba(0,0,0,.26);
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.freeRewardGift.available{
  border-color:rgba(255,229,105,.52);
  box-shadow:0 16px 34px rgba(0,0,0,.3),0 0 26px rgba(255,209,86,.22);
  animation:freeGiftGlow 1.9s ease-in-out infinite;
}

.freeRewardGift.claimed{
  opacity:.72;
  filter:saturate(.8);
}

.freeRewardGift.locked{
  opacity:.62;
  cursor:default;
}

.freeRewardGift:hover.available{
  transform:translateY(-3px);
}

.freeRewardIcon{
  width:54px;
  height:54px;
  margin:0 auto;
  display:grid;
  place-items:center;
  border-radius:18px;
  font-size:28px;
  background:linear-gradient(145deg, rgba(255,255,255,.2), rgba(255,255,255,.06));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 18px rgba(255,255,255,.1);
}

.freeRewardGift b{
  display:block;
  text-align:center;
  font-size:13px;
  line-height:1.2;
}

.freeRewardGift small{
  display:block;
  text-align:center;
  color:rgba(255,255,255,.72);
  font-size:12px;
}

.freeRewardGift em{
  display:block;
  text-align:center;
  color:#ffe47d;
  font-style:normal;
  font-size:11px;
  font-weight:1000;
}

.freeRewardCheck{
  position:absolute;
  top:8px;
  right:8px;
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#071811;
  font-weight:1000;
  background:#70ffb4;
  box-shadow:0 0 14px rgba(112,255,180,.32);
}

.freeRewardGift.claimed .freeRewardCheck{
  animation:uiRewardCheck .32s cubic-bezier(.18,.9,.25,1.35) both;
}

.freeRewardsOddsPanel{
  max-height:min(58vh, 520px);
  overflow:auto;
  overscroll-behavior:contain;
  display:grid;
  gap:8px;
  padding:12px;
  border-radius:22px;
  background:rgba(255,255,255,.065);
  border:1px solid rgba(255,255,255,.12);
  scrollbar-width:thin;
  scrollbar-color:rgba(255,228,125,.45) transparent;
}

.freeRewardsOddsPanel > b{
  color:#ffe47d;
  font-size:13px;
}

.freeRewardsOddsPanel > span{
  color:rgba(255,255,255,.68);
  font-size:12px;
  line-height:1.3;
}

.freeRewardOddsCard{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center;
  gap:9px;
  padding:9px;
  border-radius:18px;
  background:
    radial-gradient(circle at 12% 0%, var(--reward-glow, rgba(255,255,255,.12)), transparent 58%),
    rgba(0,0,0,.2);
  border:1px solid var(--reward-border, rgba(255,255,255,.1));
  box-shadow:0 10px 24px rgba(0,0,0,.18), 0 0 18px color-mix(in srgb, var(--reward-glow, rgba(255,255,255,.08)) 42%, transparent);
  transform:translateZ(0);
}

.freeRewardOddsCard b{
  display:block;
  font-size:12px;
}

.freeRewardOddsCard small{
  display:block;
  color:rgba(255,255,255,.68);
  font-size:11px;
}

.freeRewardOddsCard strong{
  color:var(--reward-text, #ffe47d);
  font-weight:1000;
  font-size:12px;
}

.freeRewardOddsIcon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:15px;
  font-size:22px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--reward-glow, #ffe47d) 46%, rgba(255,255,255,.12)), rgba(255,255,255,.06));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 0 18px color-mix(in srgb, var(--reward-glow, #ffe47d) 36%, transparent);
}

.freeRewardOddsMeta{
  min-width:0;
}

.freeRewardOddsCard.reward-exclusive{
  --reward-glow:#ffe47d;
  --reward-border:rgba(255,228,125,.42);
  --reward-text:#ffe47d;
}

.freeRewardOddsCard.reward-mythic{
  --reward-glow:#ff68e8;
  --reward-border:rgba(255,104,232,.34);
  --reward-text:#ffb7f5;
}

.freeRewardOddsCard.reward-legendary{
  --reward-glow:#ffb84c;
  --reward-border:rgba(255,184,76,.34);
  --reward-text:#ffd48d;
}

.freeRewardOddsCard.reward-epic{
  --reward-glow:#9b78ff;
  --reward-border:rgba(155,120,255,.32);
  --reward-text:#c9bbff;
}

.freeRewardOddsCard.reward-rare{
  --reward-glow:#5bd8ff;
  --reward-border:rgba(91,216,255,.3);
  --reward-text:#9feaff;
}

.freeRewardOddsCard.reward-uncommon{
  --reward-glow:#6dffb2;
  --reward-border:rgba(109,255,178,.25);
  --reward-text:#a8ffd2;
}


.freeRewardsFooter{
  margin-top:15px;
  padding:12px 14px;
  border-radius:18px;
  display:grid;
  gap:4px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.11);
}

.freeRewardsFooter b{
  color:#ffe47d;
}

.freeRewardsFooter span{
  color:rgba(255,255,255,.72);
  font-size:13px;
}

.indexSectionHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:12px 0 9px;
  padding:10px 12px;
  border-radius:16px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.11);
}

#indexPanel{
  top:76px;
  width:390px;
  max-width:calc(100vw - 118px);
  max-height:calc(100vh - 94px);
}

.indexTabs{
  position:sticky;
  top:0;
  z-index:3;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:7px;
  margin:0 0 10px;
  padding:8px;
  border-radius:18px;
  background:
    radial-gradient(circle at 16% 0%, rgba(255,255,255,.1), transparent 45%),
    rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
  backdrop-filter:blur(14px) saturate(1.18);
}

.indexTabs button,
.indexVariantPicker button{
  border:1px solid rgba(255,255,255,.13);
  border-radius:999px;
  padding:8px 9px;
  color:#fff;
  font-weight:1000;
  font-size:11px;
  cursor:pointer;
  background:rgba(255,255,255,.07);
}

.indexTabs button.active,
.indexVariantPicker button.active{
  color:#07131b;
  background:linear-gradient(135deg,#7df5ff,#ffe47d);
  box-shadow:0 0 18px rgba(125,245,255,.2);
}

.indexVariantPicker{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:0 0 10px;
}

.indexVariantPicker button{
  padding:6px 8px;
  font-size:10px;
}

.indexSectionHeader b{
  font-size:13px;
  letter-spacing:.08em;
}

.indexProgressRing{
  --index-progress:0deg;
  position:relative;
  flex:0 0 auto;
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:conic-gradient(#7df5ff var(--index-progress), rgba(255,255,255,.1) 0);
  box-shadow:0 0 16px rgba(125,245,255,.18);
}

.indexProgressRing::before{
  content:"";
  position:absolute;
}

.indexProgressRing span{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:rgba(9,12,22,.9);
  font-size:10px;
  font-weight:1000;
}

.indexProgressRing.gold{background:conic-gradient(#ffd95b var(--index-progress), rgba(255,255,255,.1) 0);}
.indexProgressRing.diamond{background:conic-gradient(#72ecff var(--index-progress), rgba(255,255,255,.1) 0);}
.indexProgressRing.shiny{background:conic-gradient(#ff8df0 var(--index-progress), rgba(255,255,255,.1) 0);}
.indexProgressRing.shinyGold{background:conic-gradient(#ffd95b var(--index-progress), rgba(255,141,240,.25) 0);}
.indexProgressRing.shinyDiamond{background:conic-gradient(#72ecff var(--index-progress), rgba(255,141,240,.25) 0);}
.indexProgressRing.event{background:conic-gradient(#9ff8ff var(--index-progress), rgba(142,105,255,.22) 0);}

.indexVariantProgress{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
  margin:0 0 10px;
}

.indexVariantProgressItem{
  min-width:0;
  display:flex;
  align-items:center;
  gap:7px;
  padding:7px;
  border-radius:16px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.1);
}

.indexVariantProgressItem .indexProgressRing{
  width:36px;
  height:36px;
}

.indexVariantProgressItem .indexProgressRing span{
  width:26px;
  height:26px;
  font-size:8px;
}

.indexVariantProgressItem > span{
  min-width:0;
  color:rgba(255,255,255,.76);
  font-size:10px;
  font-weight:900;
  overflow:hidden;
  text-overflow:ellipsis;
}

.indexSectionHeader span{
  color:rgba(255,255,255,.68);
  font-size:12px;
  font-weight:800;
}

.indexSectionHeader .indexProgressRing span{
  color:#fff;
  font-size:10px;
  font-weight:1000;
}

.indexGrid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

.indexCard{
  min-width:0;
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;
  padding:10px;
  display:grid;
  grid-template-columns:54px 1fr;
  gap:10px;
  align-items:center;
  background:
    radial-gradient(circle at 20% 0%, var(--rarity-glow, rgba(255,255,255,.12)), transparent 48%),
    rgba(255,255,255,.06);
  box-shadow:0 12px 24px rgba(0,0,0,.22);
}

.indexCard.hiddenItem{
  opacity:.58;
  filter:grayscale(.45);
}

.indexVisual{
  width:54px;
  height:54px;
  border-radius:18px;
  display:grid;
  place-items:center;
  color:#fff;
  font-size:24px;
  background:linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.12),0 0 16px var(--rarity-glow, rgba(255,255,255,.08));
}

.indexCard.hiddenItem .indexVisual{
  background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(0,0,0,.32)) !important;
}

.indexMeta{
  min-width:0;
}

.indexMeta b,
.indexMeta small{
  display:block;
}

.indexMeta b{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
}

.indexMeta small{
  margin-top:3px;
  color:rgba(255,255,255,.68);
  font-size:11px;
  line-height:1.25;
}

.indexVariants{
  grid-column:1 / -1;
  display:flex;
  flex-wrap:wrap;
  gap:5px;
}

.indexVariants span{
  padding:4px 7px;
  border-radius:999px;
  color:rgba(255,255,255,.84);
  font-size:10px;
  font-weight:900;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.1);
}

.indexCard.hiddenItem .indexVariants{
  display:none;
}

@keyframes freeGiftPulse{
  0%,100%{transform:translateY(0) scale(1); box-shadow:0 12px 28px rgba(0,0,0,.36),0 0 18px rgba(255,204,83,.22)}
  50%{transform:translateY(-1px) scale(1.07); box-shadow:0 16px 34px rgba(0,0,0,.38),0 0 30px rgba(255,204,83,.38)}
}

@keyframes freeGiftGlow{
  0%,100%{filter:saturate(1); transform:translateY(0)}
  50%{filter:saturate(1.18); transform:translateY(-1px)}
}

#mainPlay{
  display:grid;
  grid-template-columns:168px minmax(320px, 380px) 168px;
  align-items:center;
  justify-content:center;
  justify-items:center;
  gap:18px;
  margin:18px auto 8px;
  width:min(820px, calc(100vw - 28px));
}

#kretWrap{
  position:relative;
  width:410px;
  height:410px;
  display:flex;
  align-items:center;
  justify-content:center;
  grid-column:2;
}

#rightPanels{
  position:relative;
  left:auto;
  top:auto;
  right:auto;
  bottom:auto;
  margin:0;
  transform:none;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:flex-start;
  z-index:26;
  pointer-events:none;
  width:168px;
  grid-column:3;
}

/* KRET */
#kret{
  width:285px;
  height:285px;
  background:#6a4a3a;
  border-radius:50%;
  position:relative;
  cursor:pointer;
  z-index:2;
  transition:0.1s;
}
#kret:active{transform:scale(0.9);}

.eye{
  width:21px;height:21px;background:black;
  border-radius:50%;position:absolute;top:96px;
}
.eye.left{left:80px;} .eye.right{right:80px;}

.nose{
  width:32px;height:32px;background:#ff9aa2;
  border-radius:50%;position:absolute;
  top:151px;left:50%;transform:translateX(-50%);
}

#kret.skin-miner{
  background:
    linear-gradient(180deg, transparent 0 13%, rgba(38,31,27,.95) 14% 24%, transparent 25%),
    radial-gradient(circle at 35% 28%, #a07a56 0%, #755442 42%, #4d352a 100%);
}
#kret.skin-singer{
  background:
    radial-gradient(circle at 72% 28%, rgba(255,205,240,.9) 0 7px, transparent 8px),
    radial-gradient(circle at 35% 28%, #b67a94 0%, #824f67 42%, #563245 100%);
}
#kret.skin-royal{
  background:
    linear-gradient(135deg, transparent 0 26%, rgba(255,220,84,.85) 27% 31%, transparent 32%),
    radial-gradient(circle at 35% 28%, #9d8bff 0%, #6354c0 42%, #312955 100%);
}
#kret.skin-pirate{
  background:
    linear-gradient(20deg, transparent 0 42%, rgba(20,20,28,.82) 43% 51%, transparent 52%),
    radial-gradient(circle at 35% 28%, #6f90ff 0%, #445cac 42%, #24305b 100%);
}
#kret.skin-astro{
  background:
    radial-gradient(circle at 48% 22%, rgba(255,255,255,0.9) 0 4px, transparent 5px),
    radial-gradient(circle at 28% 70%, rgba(140,230,255,0.75) 0 5px, transparent 6px),
    radial-gradient(circle at 35% 28%, #8fe6ff 0%, #4b93b4 42%, #2a4d5f 100%);
  animation:astroShimmer 2.6s ease-in-out infinite, rareAura 3.8s ease-in-out infinite;
}
#kret.skin-shadow{
  background:
    radial-gradient(circle at 70% 38%, rgba(120,95,255,0.42) 0 9px, transparent 10px),
    radial-gradient(circle at 35% 28%, #565665 0%, #242434 42%, #11111a 100%);
  animation:shadowAura 2.8s ease-in-out infinite, voidAura 3.2s ease-in-out infinite;
}
#kret.skin-gold{
  background:
    radial-gradient(circle at 68% 24%, rgba(255,255,255,0.86) 0 5px, transparent 6px),
    linear-gradient(145deg, transparent 0 42%, rgba(255,255,255,0.2) 43% 48%, transparent 49%),
    radial-gradient(circle at 35% 28%, #ffe07d 0%, #cc9834 42%, #7a5510 100%);
  animation:goldShine 2.2s ease-in-out infinite, royalAura 2.8s ease-in-out infinite;
}

#kret.skin-boss-dark,
#kret.skin-boss-gold,
#kret.skin-boss-radio,
#kret.skin-boss-ice,
#kret.skin-boss-hell,
#kret.skin-void-relic,
#kret.skin-void-eclipse,
#kret.skin-void-crown,
#kret.skin-chrono{
  animation:bossSkinPulse 2.4s ease-in-out infinite, rareAura 3.4s ease-in-out infinite;
}

#kret.skin-boss-dark{
  background:
    radial-gradient(circle at 66% 25%, rgba(160,90,255,.8) 0 6px, transparent 7px),
    radial-gradient(circle at 35% 28%, #39245e 0%, #17101f 44%, #050407 100%);
}

#kret.skin-boss-gold{
  background:
    radial-gradient(circle at 70% 25%, rgba(255,255,255,.92) 0 6px, transparent 7px),
    conic-gradient(from 40deg, #ffef8c, #d58a19, #fff0a6, #a75c10, #ffef8c);
}

#kret.skin-boss-radio{
  background:
    radial-gradient(circle at 68% 28%, rgba(190,255,120,.88) 0 7px, transparent 8px),
    radial-gradient(circle at 35% 28%, #c8ff63 0%, #429b30 43%, #103d19 100%);
}

#kret.skin-boss-ice{
  background:
    linear-gradient(140deg, transparent 0 38%, rgba(255,255,255,.45) 39% 46%, transparent 47%),
    radial-gradient(circle at 35% 28%, #d8fcff 0%, #6ab6e8 44%, #274b80 100%);
}

#kret.skin-boss-hell{
  background:
    radial-gradient(circle at 68% 28%, rgba(255,230,110,.9) 0 7px, transparent 8px),
    radial-gradient(circle at 35% 28%, #ff7a3d 0%, #a3131c 45%, #280006 100%);
}

#kret.skin-void-relic{
  background:
    radial-gradient(circle at 70% 24%, rgba(95,245,255,.86) 0 6px, transparent 7px),
    radial-gradient(circle at 35% 28%, #8875ff 0%, #30217c 43%, #080713 100%);
}

#kret.skin-void-eclipse{
  background:
    radial-gradient(circle at 66% 26%, rgba(255,112,240,.82) 0 7px, transparent 8px),
    radial-gradient(circle at 35% 28%, #ff74f0 0%, #2a0a34 36%, #020106 100%);
}

#kret.skin-void-crown{
  background:
    conic-gradient(from 35deg, #e9ffff, #61f6ff, #8a5cff, #ff72e8, #e9ffff);
}

#kret.skin-chrono{
  background:
    radial-gradient(circle at 68% 24%, rgba(255,255,255,.92) 0 6px, transparent 7px),
    conic-gradient(from 0deg, #fff7bf, #ffbd4a, #65ecff, #8d6dff, #fff7bf);
}

#kret.skin-astro::before,
#kret.skin-shadow::before,
#kret.skin-gold::before,
#kret.skin-boss-dark::before,
#kret.skin-boss-gold::before,
#kret.skin-boss-radio::before,
#kret.skin-boss-ice::before,
#kret.skin-boss-hell::before,
#kret.skin-void-relic::before,
#kret.skin-void-eclipse::before,
#kret.skin-void-crown::before,
#kret.skin-chrono::before{
  content:"";
  position:absolute;
  inset:-18px;
  border-radius:50%;
  pointer-events:none;
  z-index:-1;
}

#kret.skin-astro::before{
  background:conic-gradient(from 180deg, transparent, rgba(91,225,255,0.34), transparent, rgba(255,255,255,0.22), transparent);
  animation:skinAuraSpin 7s linear infinite;
}

#kret.skin-shadow::before{
  background:radial-gradient(circle, rgba(90,65,255,0.32), rgba(0,0,0,0) 68%);
  filter:blur(2px);
  animation:voidAura 3s ease-in-out infinite;
}

#kret.skin-gold::before{
  background:radial-gradient(circle, rgba(255,214,80,0.34), rgba(255,120,20,0.08) 58%, transparent 70%);
  animation:goldHalo 2.4s ease-in-out infinite;
}

#kret.skin-boss-dark::before{background:radial-gradient(circle, rgba(99,54,255,.34), transparent 68%);filter:blur(2px);}
#kret.skin-boss-gold::before{background:conic-gradient(from 0deg, transparent, rgba(255,225,88,.48), transparent, rgba(255,255,255,.32), transparent);animation:skinAuraSpin 4.8s linear infinite;}
#kret.skin-boss-radio::before{background:radial-gradient(circle, rgba(149,255,42,.42), rgba(36,255,130,.12) 55%, transparent 72%);}
#kret.skin-boss-ice::before{background:radial-gradient(circle, rgba(150,235,255,.42), rgba(255,255,255,.12) 55%, transparent 72%);}
#kret.skin-boss-hell::before{background:radial-gradient(circle, rgba(255,62,24,.42), rgba(255,183,54,.16) 55%, transparent 74%);}
#kret.skin-void-relic::before{background:radial-gradient(circle, rgba(124,92,255,.46), rgba(70,238,255,.14) 56%, transparent 74%);filter:blur(2px);}
#kret.skin-void-eclipse::before{background:radial-gradient(circle, rgba(255,95,232,.46), rgba(85,39,255,.16) 56%, transparent 74%);filter:blur(2px);}
#kret.skin-void-crown::before{background:conic-gradient(from 0deg, transparent, rgba(97,246,255,.5), transparent, rgba(255,114,232,.4), transparent);animation:skinAuraSpin 4.4s linear infinite;}
#kret.skin-chrono::before{background:conic-gradient(from 0deg, transparent, rgba(255,230,118,.62), transparent, rgba(101,236,255,.38), transparent);animation:skinAuraSpin 5.8s linear infinite;}

#kret.skin-crystal-mole{
  background:conic-gradient(from 0deg,#eaffff,#65f3ff,#9567ff,#ffffff,#65f3ff,#eaffff) !important;
  box-shadow:0 0 34px rgba(126,238,255,.6),0 0 70px rgba(135,103,255,.26), inset 0 1px 0 rgba(255,255,255,.44);
}

#kret.skin-crystal-mole::before{
  background:conic-gradient(from 0deg, transparent, rgba(143,246,255,.72), transparent, rgba(137,103,255,.56), transparent);
  animation:skinAuraSpin 4.8s linear infinite;
}

#kret.skin-boss-dark .eye{
  background:#cda2ff;
  box-shadow:0 0 14px rgba(200,140,255,.95);
}

#kret.skin-boss-radio .eye{
  background:#d8ff73;
  box-shadow:0 0 14px rgba(120,255,70,.95);
}

#kret.skin-boss-ice .eye{
  background:#e6fdff;
  box-shadow:0 0 14px rgba(130,230,255,.9);
}

#kret.skin-boss-hell .eye{
  background:#ffe15a;
  box-shadow:0 0 15px rgba(255,76,38,.95);
}

#kret.skin-boss-gold .eye{
  background:#fff2a0;
  box-shadow:0 0 16px rgba(255,220,70,.95);
}

#kret.skin-boss-hell .nose::before,
#kret.skin-boss-hell .nose::after{
  content:"";
  position:absolute;
  top:-76px;
  width:24px;
  height:42px;
  border-radius:60% 60% 10% 10%;
  background:linear-gradient(180deg,#ffd37a,#8b1717 72%,#210006);
}

#kret.skin-boss-hell .nose::before{left:-52px;transform:rotate(-24deg);}
#kret.skin-boss-hell .nose::after{right:-52px;transform:rotate(24deg);}

#kret.skin-boss-gold .nose::before{
  content:"";
  position:absolute;
  left:50%;
  top:-92px;
  width:76px;
  height:38px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,#fff19a,#d69b16);
  clip-path:polygon(0 100%, 8% 34%, 24% 72%, 42% 20%, 58% 72%, 76% 34%, 92% 100%);
  filter:drop-shadow(0 0 12px rgba(255,221,80,.54));
}

#kret.skin-boss-radio .nose::before,
#kret.skin-boss-dark .nose::before,
#kret.skin-boss-ice .nose::before{
  content:"";
  position:absolute;
  inset:-44px;
  border-radius:50%;
  pointer-events:none;
  z-index:-1;
}

#kret.skin-boss-radio .nose::before{
  background:repeating-radial-gradient(circle, rgba(120,255,70,.22) 0 5px, transparent 6px 13px);
}

#kret.skin-boss-dark .nose::before{
  background:radial-gradient(circle at 30% 30%, rgba(171,90,255,.22), transparent 24%), radial-gradient(circle at 70% 64%, rgba(100,60,255,.2), transparent 26%);
  filter:blur(3px);
}

#kret.skin-boss-ice .nose::before{
  background:linear-gradient(135deg, transparent 0 40%, rgba(255,255,255,.24) 41% 44%, transparent 45%), radial-gradient(circle, rgba(150,235,255,.2), transparent 66%);
}

@keyframes bossSkinPulse{
  0%,100%{filter:saturate(1) brightness(1);}
  50%{filter:saturate(1.24) brightness(1.12);}
}

/* HOLD PANEL */
#holdPanel,
#autoPanel,
#diamondClickPanel{
  position:relative;
  isolation:isolate;
  width:168px;
  min-height:118px;
  font-family:'Segoe UI', Arial, sans-serif;
  color:rgba(255,255,255,.95);
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  backdrop-filter:blur(10px) saturate(1.06);
  -webkit-backdrop-filter:blur(10px) saturate(1.06);
  border-radius:20px;
  padding:13px;
  border:1px solid var(--panel-border-soft, rgba(255,255,255,0.16));
  box-shadow:
    0 10px 28px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.07);
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:9px;
  pointer-events:none;
  overflow:hidden;
}

#holdPanel::before,
#autoPanel::before,
#diamondClickPanel::before{
  content:none;
}

#holdPanel::after,
#autoPanel::after,
#diamondClickPanel::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 10%, var(--panel-border-soft, rgba(255,255,255,.08)), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 48%);
  opacity:.75;
  z-index:-1;
}

#holdTitle,
#autoTitle,
#diamondClickTitle{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font-size:12px;
  letter-spacing:.08em;
  font-weight:900;
  opacity:.82;
  text-transform:uppercase;
}

#holdTitle::after,
#autoTitle::after,
#diamondClickTitle::after{
  content:"";
  width:7px;
  height:7px;
  flex:0 0 auto;
  border-radius:50%;
  background:var(--panel-border-soft, rgba(255,255,255,.36));
  box-shadow:0 0 10px var(--panel-border-soft, rgba(255,255,255,.2));
}

#holdState{
  padding:6px 8px;
  border-radius:14px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.075);
  font-size:14px;
  font-weight:900;
  letter-spacing:.02em;
  text-shadow:none;
}

#holdMeta,
#autoMeta,
#diamondClickMeta{
  display:grid;
  gap:5px;
  font-size:12px;
  opacity:.92;
  line-height:1.45;
}

#holdMeta div,
#autoMeta div,
#diamondClickMeta div{
  padding:4px 6px;
  border-radius:10px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.055);
  font-weight:800;
}

#holdBar,
#diamondClickBar{
  width:100%;
  height:13px;
  border-radius:999px;
  background:rgba(4,7,16,0.38);
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.11);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.22);
}

#holdFill,
#diamondClickFill{
  width:0%;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#ffcf5a,#ff6a3d,#ff4f9a);
  box-shadow:0 0 16px rgba(255,120,60,0.45);
  transition:width 0.1s linear;
}

#diamondClickFill{
  background:linear-gradient(90deg,#6ae5ff,#56b8ff,#7d5cff);
  box-shadow:0 0 16px rgba(86,184,255,0.48);
}

#holdHint,
#diamondClickHint{
  font-size:11px;
  opacity:.76;
  line-height:1.35;
  font-weight:800;
}

#autoPanel{
  min-height:96px;
}

#autoState{
  display:none;
}

#autoBar{
  display:none;
}

#autoFill{
  display:none;
}

#autoHint{
  display:none;
}

#diamondClickPanel{
  min-height:122px;
}

#autoPanel.toggleOff,
#diamondClickPanel.toggleOff{
  opacity:.72;
  filter:saturate(.55);
  border-style:dashed;
}

.panelToggleBtn{
  position:absolute;
  top:10px;
  right:10px;
  z-index:2;
  min-width:44px;
  padding:5px 8px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  color:#092416;
  background:linear-gradient(135deg,#8cffb8,#41e882);
  font-size:11px;
  font-weight:1000;
  cursor:pointer;
  pointer-events:auto;
  box-shadow:0 8px 18px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.42);
}

.panelToggleBtn.off{
  color:#fff;
  background:linear-gradient(135deg,#595d6d,#222631);
  box-shadow:0 8px 18px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.14);
}

/* LEFT UI */
#leftDock{
  position:fixed;
  left:12px;
  top:120px;
  z-index:30;
  display:flex;
  flex-direction:column;
  gap:14px;
  pointer-events:none;
}

#rightDock{
  position:fixed;
  right:12px;
  top:120px;
  z-index:30;
  display:flex;
  flex-direction:column;
  gap:14px;
  pointer-events:none;
}

.dockBtn{
  position:relative;
  width:56px;
  height:56px;
  border:none;
  border-radius:20px;
  background:linear-gradient(145deg,rgba(255,255,255,0.16),rgba(255,255,255,0.06));
  color:white;
  font-size:30px;
  cursor:pointer;
  pointer-events:auto;
  backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 10px 28px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.18);
  border:1px solid rgba(255,255,255,0.16);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.dockBtn:hover{
  transform:translateY(-2px) scale(1.03);
  box-shadow:0 14px 34px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.22);
}

.dockBtn:active,
.panelAction:active,
.panelTab:active,
.freeRewardGift:active,
.eggCard:active,
.petCard:active,
.bagCard:active,
.potionCard:active,
#codesBtn:active,
#codesClaim:active,
#codesClose:active{
  transform:translateY(1px) scale(.975);
}

.dockBtn.active{
  background:linear-gradient(135deg,rgba(255,255,255,0.22),rgba(255,255,255,0.08));
  box-shadow:0 0 14px rgba(255,255,255,0.18),0 8px 24px rgba(0,0,0,0.35);
}

.dockBtn.locked{
  filter:grayscale(.55);
  opacity:.58;
  box-shadow:0 8px 18px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.12);
}

.dockBtn.locked::after{
  content:"\1F512";
  position:absolute;
  right:-5px;
  bottom:-5px;
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-size:12px;
  background:rgba(8,10,18,.86);
  border:1px solid rgba(255,255,255,.18);
}

.eventDockBtn{
  color:#fff7cf;
  font-size:28px;
  isolation:isolate;
  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,.92), transparent 20%),
    radial-gradient(circle at 74% 76%, rgba(88,248,255,.5), transparent 34%),
    linear-gradient(145deg, rgba(255,202,79,.95), rgba(255,77,187,.74) 48%, rgba(73,91,255,.72));
  border-color:rgba(255,229,148,.55);
  box-shadow:
    0 0 18px rgba(255,207,80,.34),
    0 0 32px rgba(255,64,184,.22),
    0 14px 32px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.42);
  animation:eventDockGlow 2.4s ease-in-out infinite;
}

.eventDockBtn::before{
  content:"";
  position:absolute;
  inset:-4px;
  z-index:-1;
  border-radius:24px;
  background:conic-gradient(from 0deg, rgba(255,222,94,.0), rgba(255,222,94,.75), rgba(105,247,255,.42), rgba(255,91,205,.68), rgba(255,222,94,.0));
  opacity:.64;
  filter:blur(8px);
  animation:eventDockSpin 5.2s linear infinite;
}

.eventDockBtn::after{
  content:"CRYSTAL";
  position:absolute;
  left:50%;
  bottom:-9px;
  transform:translateX(-50%);
  padding:2px 6px;
  border-radius:999px;
  color:#251000;
  background:linear-gradient(135deg,#fff2a1,#ffb84f);
  border:1px solid rgba(255,255,255,.5);
  font-size:8px;
  font-weight:1000;
  letter-spacing:.06em;
  box-shadow:0 6px 14px rgba(0,0,0,.28);
}

.eventDockBtn:hover{
  transform:translateY(-3px) scale(1.07);
  box-shadow:
    0 0 24px rgba(255,207,80,.46),
    0 0 42px rgba(255,64,184,.28),
    0 16px 36px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.46);
}

.eventDockBtn.eventMystery::after{
  content:"???";
}

.eventDockQuestion{
  color:#e7f8ff;
  font-size:29px;
  font-weight:1000;
  text-shadow:0 0 14px rgba(156,239,255,.84), 0 0 28px rgba(172,96,255,.68);
}

.eventDockMysteryTooltip{
  position:absolute;
  left:calc(100% + 10px);
  top:50%;
  padding:7px 10px;
  border:1px solid rgba(170,242,255,.3);
  border-radius:12px;
  color:#e6fbff;
  background:rgba(9,7,24,.94);
  box-shadow:0 10px 28px rgba(0,0,0,.36), 0 0 18px rgba(120,90,255,.24);
  font-size:12px;
  font-weight:1000;
  letter-spacing:.12em;
  opacity:0;
  pointer-events:none;
  transform:translate(4px,-50%);
  transition:opacity .14s ease, transform .14s ease;
}

.eventDockBtn.eventMystery:hover .eventDockMysteryTooltip{
  opacity:1;
  transform:translate(0,-50%);
}

.crystalCurrencyIcon{
  display:inline-block;
  width:20px;
  height:22px;
  vertical-align:-5px;
  background:linear-gradient(145deg, rgba(255,255,255,.92), rgba(180,248,255,.72) 34%, rgba(96,183,255,.55) 72%, rgba(60,60,130,.65));
  clip-path:polygon(50% 0, 86% 22%, 74% 100%, 26% 100%, 14% 22%);
  box-shadow:0 0 12px rgba(160,246,255,.7), inset 0 2px 4px rgba(255,255,255,.72), inset 0 -6px 9px rgba(69,106,255,.24);
  filter:drop-shadow(0 0 8px rgba(112,235,255,.42));
}

.crystalCurrencyIcon::after{
  content:"";
  display:block;
  width:44%;
  height:76%;
  margin:12% auto 0;
  border-left:1px solid rgba(255,255,255,.55);
  border-right:1px solid rgba(255,255,255,.18);
  transform:skewX(-10deg);
}

.crystalCurrencyIcon.mini{
  width:18px;
  height:20px;
}

.crystalCurrencyIcon.tiny{
  width:14px;
  height:16px;
  vertical-align:-3px;
}

.dockCrystalIcon{
  width:27px;
  height:31px;
  vertical-align:middle;
  animation:crystalShardPulse 1.9s ease-in-out infinite;
}

@keyframes crystalShardPulse{
  0%,100%{transform:translateY(0) scale(1);}
  50%{transform:translateY(-2px) scale(1.08);}
}

@keyframes eventDockGlow{
  0%,100%{filter:saturate(1) brightness(1);}
  50%{filter:saturate(1.22) brightness(1.11);}
}

@keyframes eventDockSpin{
  to{transform:rotate(360deg);}
}

.codesBtn{
  position:fixed;
  left:210px;
  top:62px;
  z-index:36;
  min-width:78px;
  min-height:36px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  padding:0 15px;
  color:#fff;
  font-weight:1000;
  font-size:12px;
  letter-spacing:.08em;
  cursor:pointer;
  background:
    radial-gradient(circle at 30% 12%, rgba(255,255,255,.22), transparent 42%),
    linear-gradient(135deg, rgba(255,204,92,.72), rgba(255,92,154,.42), rgba(95,218,255,.34));
  box-shadow:0 12px 28px rgba(0,0,0,.32),0 0 18px rgba(255,204,92,.16), inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter:blur(14px) saturate(1.25);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.codesBtn:hover{
  transform:translateY(-2px) scale(1.03);
  filter:saturate(1.1) brightness(1.04);
  box-shadow:0 15px 32px rgba(0,0,0,.36),0 0 22px rgba(255,204,92,.22), inset 0 1px 0 rgba(255,255,255,.2);
}

.nextUpdateCountdown{
  position:fixed;
  left:max(14px, env(safe-area-inset-left));
  bottom:calc(max(14px, env(safe-area-inset-bottom)) + 18px);
  z-index:220;
  max-width:min(260px, calc(100vw - 150px));
  padding:9px 12px;
  border-radius:16px;
  color:#fff;
  font-size:12px;
  font-weight:900;
  line-height:1.25;
  background:rgba(8,10,18,.72);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 14px 32px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter:blur(12px) saturate(1.25);
  pointer-events:none;
}

.nextUpdateCountdown b{
  display:block;
  color:#ffe47d;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.nextUpdateCountdown span{
  display:block;
  margin-top:2px;
  color:rgba(255,255,255,.86);
}

.itemDropFeed{
  position:fixed;
  left:50%;
  bottom:96px;
  z-index:1800;
  display:flex;
  gap:10px;
  align-items:flex-end;
  justify-content:center;
  width:min(520px, calc(100vw - 28px));
  transform:translateX(-50%);
  pointer-events:none;
}

.itemDropTile{
  position:relative;
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.2);
  color:#fff;
  font-size:28px;
  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,.38), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.045));
  box-shadow:0 16px 34px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.24);
  backdrop-filter:blur(12px) saturate(1.25);
  animation:itemDropTileIn .22s cubic-bezier(.2,.9,.2,1) both, itemDropTileOut .28s ease 2.5s forwards;
}

.itemDropIcon{
  display:grid;
  place-items:center;
  line-height:1;
}

.itemDropCount{
  position:absolute;
  right:-5px;
  top:-6px;
  min-width:24px;
  padding:2px 5px;
  border:1px solid rgba(255,255,255,.38);
  border-radius:999px;
  color:#07101a;
  background:linear-gradient(135deg,#fff,#bff7ff);
  box-shadow:0 6px 14px rgba(0,0,0,.28);
  font-size:10px;
  font-weight:1000;
  line-height:1.1;
}

.itemDropTile.potion{
  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,.46), transparent 34%),
    linear-gradient(145deg, var(--drop-color, #7dff8f), rgba(72,54,160,.65));
}

.itemDropTile.bag{
  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,.42), transparent 34%),
    linear-gradient(145deg, var(--drop-color, #ffd35c), rgba(91,58,28,.74));
}

.itemDropTile.enchant{
  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,.45), transparent 34%),
    linear-gradient(145deg, var(--drop-color, #8bd3ff), rgba(28,22,74,.78));
}

.itemDropTile.diamonds{
  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,.48), transparent 34%),
    linear-gradient(145deg, var(--drop-color, #72ecff), rgba(20,58,92,.78));
}

.diamondRewardIcon{
  width:30px;
  height:30px;
}

.miniRewardBook{
  width:34px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:6px 11px 11px 6px;
  color:#06101d;
  font-size:10px;
  font-weight:1000;
  background:
    linear-gradient(90deg, rgba(0,0,0,.32) 0 15%, transparent 16%),
    radial-gradient(circle at 76% 18%, rgba(255,255,255,.72), transparent 22%),
    linear-gradient(135deg,#baf8ff,#7c8cff 55%,#30145d);
  box-shadow:0 0 18px rgba(125,220,255,.32), inset 0 1px 0 rgba(255,255,255,.35);
}

.bagRewardGrid{
  width:100%;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:6px;
  margin-top:8px;
}

.bagRewardGrid span{
  padding:6px 8px;
  border-radius:10px;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.12);
  font-size:11px;
  font-weight:900;
  color:rgba(255,255,255,.86);
}

@keyframes itemDropTileIn{
  from{opacity:0; transform:translateY(18px) scale(.72) rotate(-5deg);}
  to{opacity:1; transform:translateY(0) scale(1) rotate(0);}
}

@keyframes itemDropTileOut{
  to{opacity:0; transform:translateY(10px) scale(.88);}
}

.codesOverlay{
  position:fixed;
  inset:0;
  z-index:240;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  background:rgba(3,4,12,.5);
  backdrop-filter:blur(10px);
  transition:opacity .2s ease, visibility .2s ease;
}

.codesOverlay.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

#codesCard{
  width:min(380px, calc(100vw - 32px));
  display:grid;
  gap:12px;
  padding:18px;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  background:
    radial-gradient(circle at 12% 0%, rgba(255,216,105,.22), transparent 38%),
    linear-gradient(145deg, rgba(18,22,39,.96), rgba(8,10,20,.94));
  box-shadow:0 28px 78px rgba(0,0,0,.5),0 0 30px rgba(255,210,95,.14);
  transform:translateY(10px) scale(.985);
  opacity:.92;
  transition:transform .22s cubic-bezier(.2,.85,.25,1), opacity .18s ease;
}

.codesOverlay.open #codesCard{
  transform:translateY(0) scale(1);
  opacity:1;
}

.codesTop{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}

.codesTop span{
  display:block;
  color:#ffe47d;
  font-size:11px;
  font-weight:1000;
  letter-spacing:.14em;
}

.codesTop b{
  display:block;
  font-size:28px;
}

#codesClose{
  width:34px;
  height:34px;
  border:0;
  border-radius:50%;
  color:#fff;
  cursor:pointer;
  background:rgba(255,255,255,.12);
}

#codesInput{
  border:1px solid rgba(255,255,255,.16);
  border-radius:16px;
  padding:13px 14px;
  color:#fff;
  background:rgba(255,255,255,.08);
  font-weight:1000;
  outline:none;
  text-transform:uppercase;
}

#codesClaim{
  border:0;
  border-radius:16px;
  padding:13px 14px;
  color:#07131b;
  cursor:pointer;
  font-weight:1000;
  background:linear-gradient(135deg,#ffe47d,#7df5ff);
}

#codesStatus{
  min-height:18px;
  color:#9fffd3;
  font-size:13px;
  font-weight:900;
}

#codesStatus:not(:empty){
  animation:uiStatusIn .2s ease both;
}

#codesStatus.error{
  color:#ff9d9d;
}

#adminCodesPanel{
  margin-top:14px;
  padding:12px;
  border-radius:18px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
}

#adminNextUpdatePanel{
  margin-top:14px;
  padding:12px;
  border-radius:18px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
}

.adminNextUpdateGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.adminNextUpdateGrid input,
.adminNextUpdateGrid button{
  min-width:0;
}

#adminNextUpdateStatus{
  margin-top:8px;
  color:rgba(255,255,255,.72);
  font-size:12px;
  font-weight:800;
}

.adminWeatherMegaToggle{
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  color:#fff;
  background:rgba(255,255,255,.08);
  font-size:12px;
  font-weight:1000;
}

.adminWeatherMegaToggle input{
  accent-color:#ffcf5c;
}

.adminCodesGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
}

#adminCodesList{
  display:grid;
  gap:8px;
  margin-top:10px;
}

.adminCodeCard{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  align-items:center;
  padding:9px 10px;
  border-radius:14px;
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.1);
  font-size:12px;
}

.adminCodeCard b,
.adminCodeCard small{
  display:block;
}

.slidePanel{
  box-sizing:border-box;
  position:fixed;
  left:84px;
  width:280px;
  max-width:calc(50vw - 92px);
  max-height:calc(100vh - 116px);
  background:
    linear-gradient(145deg,rgba(255,255,255,0.16),rgba(255,255,255,0.045)),
    var(--panel-bg, rgba(8,8,15,0.78));
  backdrop-filter:blur(18px) saturate(1.45);
  border:1px solid var(--panel-border, rgba(255,255,255,0.14));
  border-radius:24px;
  box-shadow:0 20px 54px rgba(0,0,0,0.44), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(255,255,255,0.05);
  transform:translateX(calc(-100% - 46px)) scale(.98);
  transition:transform 0.28s ease, opacity 0.2s ease, visibility 0.2s ease;
  z-index:25;
  overflow:hidden;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  clip-path:inset(0 0 0 100% round 24px);
}

.slidePanel::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,rgba(255,255,255,0.18),transparent 34%,transparent 70%,rgba(255,255,255,0.06));
  pointer-events:none;
  opacity:.7;
}

.slidePanel.open{
  transform:translateX(0) scale(1);
  pointer-events:auto;
  opacity:1;
  visibility:visible;
  clip-path:inset(0 0 0 0 round 24px);
}

.slidePanel.rightSide{
  left:auto;
  right:84px;
  border:1px solid var(--panel-border, rgba(255,255,255,0.14));
  border-radius:24px;
  transform:translateX(calc(100% + 46px)) scale(.98);
  clip-path:inset(0 100% 0 0 round 24px);
  transform-origin:right center;
}

.slidePanel.rightSide.open{
  transform:translateX(0) scale(1);
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  clip-path:inset(0 0 0 0 round 24px);
}

.slideHeader{
  padding:14px 16px 12px;
  border-bottom:1px solid var(--panel-border-soft, rgba(255,255,255,0.08));
  position:relative;
  z-index:1;
  padding-right:48px;
}

.slideHeader b{
  display:block;
  font-size:19px;
  letter-spacing:1px;
}

.slideHeader span{
  display:block;
  margin-top:4px;
  font-size:13px;
  opacity:0.82;
}

.panelCloseBtn,
.adminPanelCloseBtn{
  position:absolute;
  top:10px;
  right:10px;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,0.18);
  border-radius:50%;
  background:rgba(255,255,255,0.1);
  color:#fff;
  font-size:18px;
  font-weight:1000;
  line-height:1;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.16),0 10px 18px rgba(0,0,0,0.2);
}

.panelCloseBtn:hover,
.adminPanelCloseBtn:hover{
  background:rgba(255,255,255,0.18);
}

#eggPanel{
  top:102px;
  max-height:calc(100dvh - 102px - 16px);
}

#cratePanel{
  top:188px;
  max-height:calc(100dvh - 188px - 16px);
}

#limitedEventPanel{
  top:188px;
  width:330px;
  max-width:calc(50vw - 96px);
  max-height:calc(100dvh - 188px - 16px);
  --panel-bg:rgba(15,10,32,.88);
  --panel-border:rgba(255,215,107,.34);
  --panel-border-soft:rgba(255,215,107,.16);
}

.limitedEventPanel .slideHeader b{
  color:#ffe889;
  text-shadow:0 0 18px rgba(255,207,80,.32);
}

.limitedEventPanel .panelScroll{
  padding:14px;
}

.limitedEventHero{
  position:relative;
  display:grid;
  gap:12px;
  padding:16px;
  border-radius:22px;
  overflow:hidden;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,238,143,.25), transparent 40%),
    radial-gradient(circle at 92% 24%, rgba(91,247,255,.2), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.045));
  border:1px solid rgba(255,232,137,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 18px 34px rgba(0,0,0,.22);
}

.limitedEventHero::before{
  content:"";
  position:absolute;
  inset:-42%;
  background:conic-gradient(from 80deg, transparent, rgba(255,221,110,.18), transparent 32%, rgba(105,247,255,.12), transparent 62%);
  animation:eventPanelShimmer 8s linear infinite;
  pointer-events:none;
}

.limitedEventHero > *{
  position:relative;
  z-index:1;
}

.limitedEventBadge{
  width:max-content;
  padding:5px 9px;
  border-radius:999px;
  color:#180b00;
  background:linear-gradient(135deg,#fff2a1,#ffbd52);
  font-size:10px;
  font-weight:1000;
  letter-spacing:.12em;
}

.limitedEventHero h3{
  margin:0;
  font-size:25px;
  line-height:1;
}

.limitedEventTimer{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:16px;
  background:rgba(0,0,0,.24);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.9);
  font-size:12px;
  font-weight:900;
}

.limitedEventTimer b{
  color:#84f7ff;
  white-space:nowrap;
}

.limitedEventReward{
  display:grid;
  grid-template-columns:64px 1fr;
  gap:12px;
  align-items:center;
  padding:12px;
  border-radius:18px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
}

.limitedEventPet{
  width:64px;
  height:64px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff6c7;
  font-size:30px;
  background:
    radial-gradient(circle at 34% 25%, rgba(255,255,255,.65), transparent 18%),
    linear-gradient(145deg,#3b245c,#101529 58%,#050712);
  box-shadow:0 0 20px rgba(255,212,88,.35),0 0 34px rgba(103,240,255,.18), inset 0 1px 0 rgba(255,255,255,.22);
  animation:eventPetFloat 2.8s ease-in-out infinite;
}

.limitedEventReward b,
.limitedEventBonus b{
  display:block;
  color:#fff;
  font-size:14px;
}

.limitedEventReward span,
.limitedEventBonus span{
  display:block;
  margin-top:3px;
  color:rgba(255,255,255,.76);
  font-size:12px;
  line-height:1.35;
}

.limitedEventBonusGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.limitedEventBonus{
  padding:10px;
  border-radius:16px;
  background:rgba(0,0,0,.2);
  border:1px solid rgba(255,255,255,.1);
}

@keyframes eventPanelShimmer{
  to{transform:rotate(360deg);}
}

@keyframes eventPetFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-4px);}
}

#petPanel{
  top:244px;
  width:340px;
  max-width:calc(50vw - 96px);
  max-height:calc(100dvh - 244px - 16px);
}

#petPanel .panelScroll{
  max-height:calc(100vh - 390px);
  padding:14px;
}

#upgradeHubPanel,
#potionCraftPanel,
#enchantCraftPanel,
#petForgePanel,
#petDiamondPanel{
  top:302px;
  width:370px;
  max-width:calc(50vw - 96px);
  max-height:calc(100dvh - 302px - 16px);
}

#potionCraftPanel .panelScroll{
  overflow-x:hidden;
}

#diamondPanel{
  top:102px;
  max-height:calc(100dvh - 102px - 16px);
}

#weatherPanel{
  top:314px;
  max-height:calc(100dvh - 314px - 16px);
}

#leaderboardPanel{
  top:172px;
  width:360px;
  max-width:calc(50vw - 96px);
  max-height:calc(100dvh - 172px - 16px);
}

#leaderboardContent{
  max-height:calc(100vh - 260px);
  padding:14px;
}

#globalBossPanel{
  top:244px;
  width:430px;
  max-width:calc(50vw - 96px);
}

#globalBossContent{
  max-height:calc(100vh - 332px);
  padding:14px;
}

.globalBossEventBannerBtn{
  width:min(920px, calc(100vw - 28px));
  margin:6px auto 8px;
  padding:10px 16px;
  display:grid;
  border:1px solid rgba(255,255,255,.2);
  border-radius:18px;
  color:#fff;
  text-align:center;
  cursor:pointer;
  background:
    radial-gradient(circle at 12% 22%, rgba(255,255,255,.24), transparent 24%),
    radial-gradient(circle at 88% 40%, rgba(255,69,96,.28), transparent 28%),
    linear-gradient(135deg, rgba(255,78,58,.92), rgba(127,49,255,.78), rgba(20,28,54,.9));
  box-shadow:0 14px 34px rgba(0,0,0,.28), 0 0 24px rgba(255,77,80,.18);
  overflow:hidden;
  position:relative;
  font-weight:1000;
}

.globalBossEventBannerBtn::after{
  content:"";
  position:absolute;
  inset:-70% auto -70% -28%;
  width:24%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.36), transparent);
  transform:rotate(18deg);
  animation:bossSweep 4.6s ease-in-out infinite;
}

.globalBossEventBannerBtn span{
  font-size:12px;
  letter-spacing:.14em;
  opacity:.84;
}

.globalBossEventBannerBtn b{
  font-size:18px;
  letter-spacing:.04em;
  line-height:1.05;
}

.globalBossEventBannerBtn small{
  font-size:13px;
  opacity:.82;
}

.globalBossEventView{
  position:fixed;
  inset:0;
  z-index:4600;
  display:none;
  padding:18px;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,56,62,.24), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(107,71,255,.24), transparent 30%),
    radial-gradient(circle at 50% 90%, rgba(255,185,55,.12), transparent 34%),
    rgba(5,6,12,.94);
  backdrop-filter:blur(12px) saturate(1.25);
  overflow:auto;
}

.globalBossEventView.open{
  display:block;
}

.crystalEventView{
  position:fixed;
  inset:0;
  z-index:4550;
  display:none;
  padding:18px;
  overflow:auto;
  color:#fff;
  background:
    radial-gradient(circle at 18% 20%, rgba(106,240,255,.2), transparent 30%),
    radial-gradient(circle at 76% 18%, rgba(181,82,255,.24), transparent 34%),
    radial-gradient(circle at 50% 100%, rgba(53,210,255,.18), transparent 35%),
    linear-gradient(180deg,#080b18,#090414 58%,#03040b);
  backdrop-filter:blur(10px) saturate(1.35);
}

.crystalEventView.open{
  display:block;
  animation:crystalDescend .48s cubic-bezier(.16,.9,.22,1) both;
}

.crystalEventView.closing{
  display:block;
  animation:crystalAscend .34s ease both;
}

.crystalTransitionVeil{
  position:fixed;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(45,225,255,.12), transparent);
  opacity:.75;
  animation:crystalVeil 7s ease-in-out infinite alternate;
}

.crystalCaveShell{
  width:min(1180px, 100%);
  min-height:calc(100vh - 36px);
  margin:0 auto;
  display:grid;
  grid-template-rows:auto 1fr;
  gap:14px;
}

.crystalEventTop,
.crystalMineCard,
.crystalUpgradeCard,
.crystalEggCard,
.crystalShopCard{
  border:1px solid rgba(137,241,255,.22);
  border-radius:26px;
  background:
    radial-gradient(circle at 15% 0%, rgba(161,242,255,.18), transparent 36%),
    linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.045));
  box-shadow:0 18px 48px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.16), 0 0 26px rgba(83,219,255,.1);
  backdrop-filter:blur(16px) saturate(1.25);
}

.crystalEventTop{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:12px;
  align-items:center;
  padding:14px 16px;
}

.crystalEventTop span{
  display:block;
  color:#91f6ff;
  font-size:12px;
  font-weight:1000;
  letter-spacing:.14em;
}

.crystalEventTop h2{
  margin:2px 0 0;
  font-size:32px;
  line-height:1;
  text-shadow:0 0 24px rgba(125,238,255,.28);
}

.crystalEventCountdown,
.crystalCurrencyPill{
  min-width:150px;
  padding:9px 13px;
  border-radius:18px;
  background:rgba(0,0,0,.24);
  border:1px solid rgba(137,241,255,.2);
}

.crystalEventCountdown small,
.crystalEventCountdown b,
.crystalCurrencyPill small,
.crystalCurrencyPill b{
  display:block;
}

.crystalEventCountdown small,
.crystalCurrencyPill small{
  color:rgba(255,255,255,.68);
  font-size:10px;
  font-weight:1000;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.crystalEventCountdown b,
.crystalCurrencyPill b{
  color:#aefaff;
  font-size:22px;
}

.crystalCurrencyPill b{
  display:flex;
  align-items:center;
  gap:8px;
}

.crystalCurrencyPill b span{
  display:inline;
  color:#aefaff;
  font-size:22px;
  letter-spacing:0;
  text-transform:none;
}

.crystalEventCountdown b{
  color:#ffe48a;
}

#crystalEventBackBtn,
#crystalMineBtn,
#crystalOpenEggBtn,
.crystalBuyBtn,
.crystalUpgradeBtn{
  border:1px solid rgba(255,255,255,.18);
  border-radius:16px;
  padding:11px 14px;
  color:#06111e;
  font-weight:1000;
  cursor:pointer;
  background:linear-gradient(135deg,#a8f7ff,#d19cff,#fff0a6);
  box-shadow:0 12px 28px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.35);
}

.crystalEventGrid{
  display:grid;
  grid-template-columns:minmax(260px, 1.05fr) minmax(260px, .95fr);
  gap:14px;
  align-items:start;
}

.crystalMineCard,
.crystalUpgradeCard,
.crystalEggCard,
.crystalShopCard{
  position:relative;
  overflow:hidden;
  padding:16px;
}

.crystalMineCard{
  min-height:430px;
  display:grid;
  place-items:center;
  gap:12px;
}

.crystalParticles{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 28%, rgba(149,248,255,.75) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 30%, rgba(204,132,255,.7) 0 2px, transparent 3px),
    radial-gradient(circle at 62% 78%, rgba(255,244,173,.62) 0 2px, transparent 3px);
  animation:crystalParticles 5.5s ease-in-out infinite alternate;
}

.crystalMole{
  position:relative;
  width:190px;
  height:170px;
  border-radius:48% 48% 42% 42%;
  cursor:pointer;
  background:
    radial-gradient(circle at 32% 22%, rgba(255,255,255,.8), transparent 14%),
    linear-gradient(145deg,#c9fbff,#795dff 55%,#23123d);
  box-shadow:0 0 34px rgba(127,238,255,.45),0 0 70px rgba(151,84,255,.24), inset 0 1px 0 rgba(255,255,255,.36);
  transition:transform .12s ease, filter .12s ease;
}

.crystalMole::before{
  content:"";
  position:absolute;
  left:20px;
  top:-18px;
  width:34px;
  height:54px;
  z-index:2;
  background:linear-gradient(150deg, rgba(255,255,255,.95), rgba(119,239,255,.72), rgba(102,86,255,.64));
  clip-path:polygon(50% 0, 88% 32%, 70% 100%, 28% 100%, 10% 32%);
  filter:drop-shadow(0 0 13px rgba(139,242,255,.72));
  transform:rotate(-18deg);
}

.crystalMole::after{
  content:"";
  position:absolute;
  right:18px;
  top:-10px;
  width:44px;
  height:70px;
  z-index:2;
  background:linear-gradient(140deg, rgba(255,255,255,.92), rgba(153,249,255,.78), rgba(143,103,255,.72));
  clip-path:polygon(52% 0, 90% 28%, 74% 100%, 24% 100%, 8% 28%);
  filter:drop-shadow(0 0 18px rgba(154,244,255,.76));
  transform:rotate(16deg);
}

.crystalMole.hit{
  transform:scale(.96) rotate(-1deg);
  filter:brightness(1.18);
}

.crystalPhaseShopOnly .crystalMineCard{
  filter:grayscale(.92);
  opacity:.64;
}

.crystalPhaseShopOnly .crystalMole{
  cursor:not-allowed;
  pointer-events:none;
}

.crystalPhaseTeaser .crystalEventTop > div:first-child,
.crystalPhaseTeaser .crystalCurrencyPill,
.crystalPhaseTeaser .crystalEventGrid{
  display:none;
}

.crystalPhaseTeaser .crystalEventTop{
  width:min(560px, 100%);
  margin:18vh auto 0;
  grid-template-columns:1fr auto;
}

.crystalPhaseTeaser .crystalEventCountdown{
  min-width:220px;
}

.crystalPhaseTeaser .crystalEventCountdown b{
  font-size:30px;
}

.crystalMoleFace::before,
.crystalMoleFace::after{
  content:"";
  position:absolute;
  top:62px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#07101e;
  box-shadow:0 0 12px rgba(255,255,255,.55);
}

.crystalMoleFace::before{left:58px;}
.crystalMoleFace::after{right:58px;}

.crystalMoleFace{
  position:absolute;
  inset:0;
}

.crystalMoleFace:after{
  content:"";
  position:absolute;
  left:50%;
  right:auto;
  top:92px;
  width:30px;
  height:20px;
  transform:translateX(-50%);
  border-radius:50%;
  background:#10304b;
}

.crystalMoleFace::before{
  left:58px;
  box-shadow:74px 0 0 #07101e, 0 0 12px rgba(255,255,255,.55), 74px 0 12px rgba(255,255,255,.55);
}

.crystalPickaxe{
  position:absolute;
  right:-28px;
  top:12px;
  z-index:4;
  width:82px;
  height:82px;
  display:grid;
  place-items:center;
  background:none;
  transform:rotate(-38deg);
  transform-origin:32px 50%;
}

.crystalPickaxe::before{
  content:"⛏️";
  font-size:58px;
  line-height:1;
  filter:drop-shadow(0 0 12px rgba(132,239,255,.55)) drop-shadow(0 8px 12px rgba(0,0,0,.32));
}

.crystalPickaxe::after{
  display:none;
}

.crystalPickaxe::before{
  content:"\26CF\FE0F";
}

.crystalMole.hit .crystalPickaxe{
  animation:pickaxeHit .22s ease;
}

.crystalFloatGain{
  position:absolute;
  left:50%;
  top:18%;
  z-index:3;
  color:#bdfbff;
  font-size:22px;
  font-weight:1000;
  text-shadow:0 0 14px rgba(117,239,255,.75), 0 2px 8px rgba(0,0,0,.45);
  pointer-events:none;
  transform:translate(-50%, 0);
  animation:crystalFloatGain 1s ease forwards;
}

.crystalMineStatus{
  width:min(260px, 92%);
  display:grid;
  gap:7px;
  color:rgba(255,255,255,.82);
  font-weight:900;
  text-align:center;
}

.crystalMineStatus span{
  min-height:18px;
  font-size:13px;
  letter-spacing:.02em;
}

.crystalCooldownBar{
  height:12px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(0,0,0,.36);
  border:1px solid rgba(170,248,255,.24);
  box-shadow:inset 0 1px 5px rgba(0,0,0,.5), 0 0 14px rgba(92,224,255,.12);
}

.crystalCooldownBar i{
  display:block;
  width:100%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#78efff,#dba8ff,#fff0a4);
  box-shadow:0 0 16px rgba(128,240,255,.55);
  transition:width .12s linear, filter .15s ease;
}

.crystalMineStatus.ready .crystalCooldownBar i{
  filter:brightness(1.22);
  animation:crystalReadyPulse 1.2s ease-in-out infinite;
}

@keyframes crystalReadyPulse{
  0%,100%{box-shadow:0 0 16px rgba(128,240,255,.55);}
  50%{box-shadow:0 0 24px rgba(255,235,147,.74);}
}

.crystalUpgradeCard h3,
.crystalEggCard h3,
.crystalShopCard h3{
  margin:0 0 12px;
  font-size:22px;
}

#crystalUpgradeList,
#crystalShopList{
  display:grid;
  gap:10px;
}

.crystalUpgradeRow,
.crystalShopItem,
.crystalPetChance{
  display:grid;
  gap:7px;
  padding:12px;
  border-radius:18px;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.12);
}

.crystalUpgradeRowTop,
.crystalShopItemTop,
.crystalPetChance{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
}

.crystalUpgradeRow small,
.crystalShopItem small,
.crystalPetChance small{
  color:rgba(255,255,255,.7);
  font-weight:800;
}

.crystalEggVisual{
  width:112px;
  height:142px;
  margin:4px auto 12px;
  border-radius:52% 52% 44% 44%;
  background:
    radial-gradient(circle at 32% 20%, rgba(255,255,255,.88), transparent 18%),
    linear-gradient(145deg,#d8fdff,#8a7dff 56%,#20113b);
  box-shadow:0 0 28px rgba(122,239,255,.42),0 0 64px rgba(177,91,255,.24), inset 0 1px 0 rgba(255,255,255,.42);
  animation:crystalEggFloat 3s ease-in-out infinite;
}

#crystalEggInfo{
  display:grid;
  gap:7px;
  margin-bottom:12px;
}

.crystalShopTop{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
}

#crystalShopTimer{
  color:#aefaff;
  font-size:12px;
  font-weight:1000;
}

.crystalBuyBtn:disabled,
.crystalUpgradeBtn:disabled,
#crystalOpenEggBtn:disabled,
#crystalMineBtn:disabled{
  opacity:.55;
  filter:grayscale(.45);
  cursor:not-allowed;
}

@keyframes crystalDescend{
  from{opacity:0; transform:translateY(-42px) scale(1.02);}
  to{opacity:1; transform:translateY(0) scale(1);}
}

@keyframes crystalAscend{
  from{opacity:1; transform:translateY(0) scale(1);}
  to{opacity:0; transform:translateY(-52px) scale(.985);}
}

@keyframes crystalVeil{
  0%{transform:translateY(-40%);}
  100%{transform:translateY(40%);}
}

@keyframes crystalParticles{
  to{transform:translateY(-8px); filter:brightness(1.25);}
}

@keyframes pickaxeHit{
  0%{transform:rotate(-34deg);}
  50%{transform:rotate(-62deg) translate(-8px, 2px);}
  100%{transform:rotate(-34deg);}
}

@keyframes crystalFloatGain{
  0%{opacity:0; transform:translate(-50%, 10px) scale(.82);}
  18%{opacity:1; transform:translate(-50%, 0) scale(1.08);}
  100%{opacity:0; transform:translate(-50%, -42px) scale(.94);}
}

@keyframes crystalEggFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-6px);}
}

.globalBossEventShell{
  width:min(1240px, 100%);
  min-height:calc(100vh - 36px);
  margin:0 auto;
  display:grid;
  grid-template-rows:auto 1fr;
  gap:14px;
}

.globalBossEventTop{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.045));
  box-shadow:0 18px 44px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.16);
}

.globalBossEventTop span{
  display:block;
  font-size:12px;
  font-weight:1000;
  letter-spacing:.14em;
  color:#ffcf68;
}

.globalBossEventTop h2{
  margin:3px 0 0;
  font-size:30px;
  line-height:1;
}

.globalBossEventTopActions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.globalBossBackBtn{
  border:1px solid rgba(255,255,255,.18);
  border-radius:16px;
  padding:10px 13px;
  color:#fff;
  font-weight:1000;
  cursor:pointer;
  background:rgba(255,255,255,.08);
  box-shadow:0 10px 24px rgba(0,0,0,.22);
}

.globalBossBackBtn{
  background:linear-gradient(135deg,#ff4c5f,#ff9b38);
}

.globalBossEventGrid{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(430px, 500px);
  gap:14px;
  align-items:stretch;
}

.globalBossArena,
.globalBossSide{
  border:1px solid rgba(255,255,255,.16);
  border-radius:30px;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.18), transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.035));
  box-shadow:0 24px 70px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.14);
  overflow:hidden;
}

.globalBossArena{
  min-height:650px;
  padding:24px;
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:18px;
  position:relative;
}

.globalBossArena::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,67,54,.16), transparent 28%),
    linear-gradient(120deg, transparent 0 42%, rgba(255,255,255,.06) 43% 45%, transparent 46%);
  pointer-events:none;
}

.globalBossHeader{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
}

.globalBossHeader h3{
  margin:0;
  font-size:38px;
  line-height:1;
}

.globalBossHeader p{
  max-width:650px;
  margin:8px 0 0;
  font-size:15px;
  line-height:1.45;
  opacity:.84;
}

.globalBossRewardTop{
  min-width:230px;
  padding:10px 12px;
  border-radius:18px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.1);
  font-size:13px;
  font-weight:1000;
  text-align:right;
}

.globalBossStage{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
}

.bossVisual.eventBossVisual{
  width:310px;
  height:310px;
  border-radius:42% 42% 49% 49%;
  box-shadow:0 38px 96px rgba(0,0,0,.58), 0 0 90px rgba(255,89,66,.24), inset -18px -24px 0 rgba(0,0,0,.18);
}

.bossVisual.eventBossVisual::before,
.bossVisual.eventBossVisual::after{
  top:106px;
  width:30px;
  height:18px;
  border-radius:50% 50% 45% 45%;
  box-shadow:0 -9px 0 -5px rgba(0,0,0,.82), 0 0 22px rgba(255,255,255,.42);
  transform:rotate(13deg);
}

.bossVisual.eventBossVisual::before{left:88px;}
.bossVisual.eventBossVisual::after{right:88px;transform:rotate(-13deg);}

.eventBossVisual .bossNose{
  top:160px;
  width:42px;
  height:34px;
  border-radius:48% 48% 58% 58%;
  background:linear-gradient(180deg,#ff8c93,#8f1f2e);
  box-shadow:0 0 20px rgba(255,88,100,.42), inset 0 -6px 0 rgba(0,0,0,.22);
}

.eventBossVisual .bossAura{
  inset:-42px;
  filter:blur(5px);
}

.eventBossVisual .bossAura::after{
  content:"";
  position:absolute;
  left:50%;
  top:206px;
  width:78px;
  height:28px;
  transform:translateX(-50%);
  border-bottom:8px solid rgba(18,3,6,.76);
  border-radius:0 0 60px 60px;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.45));
}

.eventBossVisual .bossAura::before{
  content:"";
  position:absolute;
  left:50%;
  top:221px;
  width:58px;
  height:18px;
  transform:translateX(-50%);
  background:
    linear-gradient(135deg, transparent 0 18%, rgba(255,255,255,.92) 19% 31%, transparent 32% 68%, rgba(255,255,255,.92) 69% 81%, transparent 82%);
  clip-path:polygon(0 0,100% 0,86% 100%,14% 100%);
  opacity:.88;
}

.eventBossVisual.boss-hell::before,
.eventBossVisual.boss-hell::after{
  background:#ffe15a;
}

.eventBossVisual.boss-hell .bossAura{
  background:
    radial-gradient(circle, rgba(255,41,25,.56), transparent 62%),
    conic-gradient(from 0deg, transparent, rgba(255,103,38,.34), transparent, rgba(120,0,0,.26), transparent);
}

.eventBossVisual.boss-hell .bossNose::before,
.eventBossVisual.boss-hell .bossNose::after{
  content:"";
  position:absolute;
  top:-114px;
  width:44px;
  height:66px;
  border-radius:60% 60% 10% 10%;
  background:linear-gradient(180deg,#ffd37a,#871314 70%,#210006);
  transform:rotate(-22deg);
}

.eventBossVisual.boss-hell .bossNose::before{left:-92px;}
.eventBossVisual.boss-hell .bossNose::after{right:-92px;transform:rotate(22deg);}

.eventBossVisual.boss-dark::before,
.eventBossVisual.boss-dark::after{
  background:#c79cff;
  box-shadow:0 0 24px rgba(188,127,255,.95);
}

.eventBossVisual.boss-dark .bossAura{
  background:
    radial-gradient(circle, rgba(104,54,255,.42), transparent 62%),
    radial-gradient(circle at 20% 40%, rgba(185,115,255,.24), transparent 28%);
}

.eventBossVisual.boss-dark{
  box-shadow:0 38px 96px rgba(0,0,0,.62),0 0 110px rgba(128,71,255,.28), inset -18px -24px 0 rgba(0,0,0,.22);
}

.eventBossVisual.boss-radio .bossAura{
  background:
    radial-gradient(circle, rgba(122,255,40,.48), transparent 60%),
    repeating-radial-gradient(circle, rgba(90,255,120,.16) 0 8px, transparent 9px 18px);
}

.eventBossVisual.boss-radio::before,
.eventBossVisual.boss-radio::after{
  background:#17230e;
  box-shadow:0 0 20px rgba(158,255,63,.95);
}

.eventBossVisual.boss-ice .bossAura{
  background:
    radial-gradient(circle, rgba(154,232,255,.45), transparent 62%),
    linear-gradient(135deg, transparent 0 44%, rgba(255,255,255,.22) 45% 47%, transparent 48%);
}

.eventBossVisual.boss-ice .bossNose{
  background:linear-gradient(180deg,#eaffff,#58bfe7);
}

.eventBossVisual.boss-gold .bossAura{
  background:
    radial-gradient(circle, rgba(255,218,70,.52), transparent 62%),
    conic-gradient(from 0deg, transparent, rgba(255,255,255,.32), transparent, rgba(255,211,61,.26), transparent);
}

.eventBossVisual.boss-gold::before,
.eventBossVisual.boss-gold::after{
  background:#2b1700;
  box-shadow:0 0 24px rgba(255,232,116,.95);
}

.eventBossVisual.boss-gold .bossNose::before{
  content:"";
  position:absolute;
  left:50%;
  top:-142px;
  width:124px;
  height:58px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,#fff19a,#d69b16);
  clip-path:polygon(0 100%, 8% 34%, 24% 72%, 42% 20%, 58% 72%, 76% 34%, 92% 100%);
  filter:drop-shadow(0 0 16px rgba(255,221,80,.54));
}

.eventBossStats{
  position:relative;
  z-index:1;
  display:grid;
  gap:12px;
}

.eventBossHpBar{
  height:36px;
  border-radius:999px;
  background:rgba(4,5,10,.62);
  border:1px solid rgba(255,255,255,.16);
  overflow:hidden;
  box-shadow:inset 0 4px 14px rgba(0,0,0,.44);
}

.eventBossHpFill{
  height:100%;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg,#ff224f,#ff8d36,#ffe05a);
  box-shadow:0 0 26px rgba(255,73,59,.52);
  transition:width .28s ease;
}

.eventBossHpText,
.eventBossInfoLine{
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:15px;
  font-weight:1000;
}

#eventBossHpCurrent,
#eventBossTotalDamage,
#eventBossMyDamage,
#eventBossRespawnTimer,
#bossLeaderboardRefreshTimer,
#leaderboardRefreshTimer,
.boostTime{
  font-variant-numeric:tabular-nums;
}

#eventBossHpCurrent,
#eventBossTotalDamage,
#eventBossMyDamage,
#eventBossRespawnTimer{
  display:inline-block;
  min-width:190px;
}

#eventBossTotalDamage,
#eventBossRespawnTimer{
  text-align:right;
}

#bossLeaderboardRefreshTimer{
  display:inline-block;
  min-width:190px;
  text-align:right;
}

.eventBossActionRow{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.globalBossSide{
  padding:16px;
  max-height:calc(100vh - 132px);
  overflow:auto;
}

.globalBossSide h3{
  margin:0 0 10px;
  font-size:22px;
}

.bossPlaceRewards{
  display:grid;
  gap:8px;
  margin-bottom:12px;
}

.bossPlaceReward{
  padding:9px 10px;
  border-radius:15px;
  background:rgba(255,255,255,.075);
  border:1px solid rgba(255,255,255,.09);
  font-size:12px;
  font-weight:900;
}

.globalBossLocked{
  min-height:560px;
  display:grid;
  place-items:center;
  text-align:center;
  padding:24px;
  border-radius:30px;
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.035));
  filter:grayscale(.2);
}

.globalBossLockedCard{
  max-width:460px;
  display:grid;
  gap:12px;
}

.globalBossLockIcon{
  font-size:64px;
  filter:drop-shadow(0 0 22px rgba(255,255,255,.24));
}

.globalBossLockedCard h3{
  margin:0;
  font-size:30px;
}

.globalBossLockedCard p{
  margin:0;
  font-size:15px;
  opacity:.84;
}

.onlineLockActions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
}

.globalBossLockedCard button{
  border:none;
  border-radius:18px;
  padding:14px 18px;
  color:#fff;
  font-weight:1000;
  cursor:pointer;
  background:linear-gradient(135deg,#ff4c5f,#ff9b38);
  box-shadow:0 16px 34px rgba(255,80,64,.24);
}

body.globalBossMode{
  overflow:hidden;
}

.bossHeroCard{
  position:relative;
  overflow:hidden;
  border-radius:24px;
  padding:16px;
  background:
    radial-gradient(circle at 22% 12%, rgba(255,255,255,.28), transparent 30%),
    linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
  border:1px solid var(--panel-border-soft, rgba(255,255,255,.16));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 16px 34px rgba(0,0,0,.24);
}

.bossHeroCard::after{
  content:"";
  position:absolute;
  inset:-60% auto -60% -40%;
  width:34%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transform:rotate(18deg);
  animation:bossSweep 4.5s ease-in-out infinite;
}

.bossTop{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:112px 1fr;
  gap:14px;
  align-items:center;
}

.bossVisual{
  position:relative;
  width:108px;
  height:108px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 28%, #765037 0%, #523828 44%, #2c1d14 100%);
  box-shadow:0 14px 34px rgba(0,0,0,.32), 0 0 34px rgba(255,255,255,.12);
  cursor:pointer;
  transition:transform .12s ease, filter .12s ease;
  animation:bossFloat 2.7s ease-in-out infinite;
}

.bossVisual:hover{transform:translateY(-2px) scale(1.02);}
.bossVisual.hit{animation:bossHit .22s ease, bossFloat 2.7s ease-in-out infinite;}
.bossVisual.defeated{animation:bossDefeat .9s ease forwards;filter:grayscale(.8) brightness(.75);}

.bossVisual::before,
.bossVisual::after{
  content:"";
  position:absolute;
  top:38px;
  width:13px;
  height:13px;
  border-radius:50%;
  background:#090909;
  box-shadow:0 0 0 3px rgba(255,255,255,.08);
}

.bossVisual::before{left:30px;}
.bossVisual::after{right:30px;}

.bossNose{
  position:absolute;
  left:50%;
  top:61px;
  width:20px;
  height:20px;
  transform:translateX(-50%);
  border-radius:50%;
  background:#ff9aa2;
  box-shadow:0 0 18px rgba(255,154,162,.36);
}

.bossAura{
  position:absolute;
  inset:-16px;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle, rgba(255,255,255,.22), transparent 68%);
  filter:blur(2px);
  animation:bossAuraPulse 2s ease-in-out infinite;
}

.bossMeta h3{
  margin:0;
  font-size:22px;
  line-height:1.05;
}

.bossMeta p{
  margin:7px 0 0;
  font-size:12px;
  line-height:1.42;
  opacity:.86;
}

.bossTags{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:10px;
}

.bossTag{
  padding:6px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.1);
  font-size:11px;
  font-weight:900;
}

.bossHpWrap{
  position:relative;
  z-index:1;
  margin-top:14px;
}

.bossHpBar{
  height:24px;
  border-radius:999px;
  background:rgba(10,8,16,.54);
  border:1px solid rgba(255,255,255,.12);
  overflow:hidden;
  box-shadow:inset 0 3px 10px rgba(0,0,0,.34);
}

.bossHpFill{
  height:100%;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg,#ff345d,#ff9c35,#ffe468);
  box-shadow:0 0 18px rgba(255,90,80,.44);
  transition:width .28s ease;
}

.bossHpText{
  display:flex;
  justify-content:space-between;
  margin-top:7px;
  font-size:12px;
  font-weight:900;
  opacity:.9;
}

.bossDamageFloat{
  position:absolute;
  left:50%;
  top:12px;
  transform:translateX(-50%);
  color:#fff4a6;
  font-size:18px;
  font-weight:1000;
  pointer-events:none;
  text-shadow:0 3px 12px rgba(0,0,0,.62);
  animation:bossDamageFloat 850ms ease forwards;
}

.bossInfoGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin:12px 0;
}

.bossInfoBox,
.bossUpgradeBox,
.bossRewardBox{
  border-radius:18px;
  padding:11px;
  background:var(--panel-card-bg, rgba(255,255,255,.08));
  border:1px solid var(--panel-border-soft, rgba(255,255,255,.1));
}

.bossInfoBox b,
.bossUpgradeBox b,
.bossRewardBox b{
  display:block;
  font-size:12px;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.bossInfoBox span,
.bossUpgradeBox span,
.bossRewardBox span{
  display:block;
  margin-top:4px;
  font-size:13px;
  font-weight:900;
}

.communityBossUpgrade{
  margin-top:10px;
}

.communityBossProgress{
  height:14px;
  margin-top:10px;
  border-radius:999px;
  background:rgba(5,7,14,.58);
  border:1px solid rgba(255,255,255,.12);
  overflow:hidden;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.3);
}

.communityBossProgress div{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#58e6ff,#7d5cff,#ffcf5a);
  box-shadow:0 0 18px rgba(94,220,255,.36);
  transition:width .24s ease;
}

.bossAttackBtn,
.bossUpgradeBtn{
  width:100%;
  margin-top:10px;
  border:0;
  border-radius:17px;
  padding:12px;
  color:#fff;
  font-weight:1000;
  cursor:pointer;
  background:linear-gradient(135deg,#ff3d5f,#ff9b36,#ffe25f);
  box-shadow:0 14px 30px rgba(255,86,68,.24);
  transition:transform .14s ease, filter .14s ease;
}

.bossAttackBtn:hover,
.bossUpgradeBtn:hover{transform:translateY(-1px);filter:brightness(1.08);}
.bossAttackBtn:disabled,
.bossUpgradeBtn:disabled{filter:grayscale(.7);opacity:.62;cursor:not-allowed;}

.communityBossDepositModal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:5600;
  background:radial-gradient(circle at 50% 35%, rgba(92,220,255,.16), transparent 34%), rgba(2,4,12,.64);
  backdrop-filter:blur(9px);
}

.communityBossDepositModal.open{
  display:flex;
}

.communityBossDepositCard{
  width:min(430px, calc(100vw - 28px));
  max-height:min(680px, calc(100vh - 36px));
  overflow:auto;
  border-radius:28px;
  padding:18px;
  color:#fff;
  background:
    linear-gradient(145deg, rgba(16,24,45,.94), rgba(7,9,21,.96)),
    radial-gradient(circle at 18% 12%, rgba(91,238,255,.16), transparent 32%);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 28px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.12);
}

.communityBossDepositTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  position:sticky;
  top:-18px;
  z-index:2;
  margin:-18px -18px 12px;
  padding:18px;
  background:linear-gradient(180deg, rgba(15,23,42,.98), rgba(15,23,42,.78));
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.1);
}

.communityBossDepositTop span{
  display:block;
  color:#8ff2ff;
  font-size:11px;
  font-weight:1000;
  letter-spacing:.12em;
}

.communityBossDepositTop h3{
  margin:4px 0 0;
  font-size:24px;
  line-height:1;
}

#communityBossDepositClose{
  width:34px;
  height:34px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
  color:#fff;
  background:rgba(255,255,255,.08);
  font-weight:1000;
  cursor:pointer;
}

.communityBossDepositCard p{
  margin:0 0 14px;
  color:rgba(255,255,255,.78);
  font-size:13px;
  line-height:1.45;
}

.communityBossDepositStats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.communityBossDepositStats div{
  padding:12px;
  border-radius:18px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);
}

.communityBossDepositStats b,
.communityBossDepositSliderLabel span{
  display:block;
  color:rgba(255,255,255,.66);
  font-size:11px;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.communityBossDepositStats span{
  display:block;
  margin-top:4px;
  font-size:14px;
  font-weight:1000;
  color:#fff2a1;
}

.communityBossDepositBar{
  height:16px;
  margin:14px 0;
  border-radius:999px;
  overflow:hidden;
  background:rgba(5,7,14,.7);
  border:1px solid rgba(255,255,255,.13);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.42);
}

.communityBossDepositBar div{
  height:100%;
  width:0;
  border-radius:999px;
  background:linear-gradient(90deg,#58e6ff,#7d5cff,#ffcf5a);
  box-shadow:0 0 20px rgba(125,92,255,.5);
  transition:width .2s ease;
}

.communityBossDepositSliderLabel{
  display:grid;
  gap:12px;
  padding:14px;
  border-radius:20px;
  background:linear-gradient(135deg, rgba(125,92,255,.16), rgba(88,230,255,.09));
  border:1px solid rgba(255,255,255,.12);
}

.communityBossDepositSliderLabel b{
  color:#9ff8ff;
  font-size:16px;
}

#communityBossDepositModalRange{
  --deposit-progress:0%;
  width:100%;
  height:16px;
  appearance:none;
  border-radius:999px;
  outline:none;
  cursor:pointer;
  background:
    linear-gradient(90deg,#58e6ff,#7d5cff var(--deposit-progress), rgba(255,255,255,.13) var(--deposit-progress)),
    rgba(255,255,255,.11);
  box-shadow:inset 0 1px 4px rgba(0,0,0,.38), 0 0 18px rgba(88,230,255,.12);
}

#communityBossDepositModalRange::-webkit-slider-thumb{
  appearance:none;
  width:26px;
  height:26px;
  border-radius:50%;
  background:radial-gradient(circle at 32% 28%, #fff, #9ff8ff 28%, #7d5cff 72%);
  border:2px solid rgba(255,255,255,.9);
  box-shadow:0 0 18px rgba(125,92,255,.75), 0 6px 14px rgba(0,0,0,.35);
}

#communityBossDepositModalRange::-moz-range-thumb{
  width:24px;
  height:24px;
  border-radius:50%;
  background:#9ff8ff;
  border:2px solid #fff;
  box-shadow:0 0 18px rgba(125,92,255,.75);
}

.communityBossDepositActions{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:10px;
  margin-top:14px;
}

.communityBossDepositActions button{
  border:0;
  border-radius:16px;
  padding:13px 12px;
  color:#fff;
  font-weight:1000;
  cursor:pointer;
}

#communityBossDepositCancel{
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.12);
}

#communityBossDepositConfirm{
  background:linear-gradient(135deg,#58e6ff,#7d5cff,#ffcf5a);
  box-shadow:0 16px 34px rgba(125,92,255,.24);
}

#communityBossDepositConfirm:disabled{
  cursor:not-allowed;
  filter:grayscale(.55) brightness(.78);
  box-shadow:none;
}

.bossLeaderboard{
  margin-top:12px;
}

.bossLeaderboardTitle{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
  font-size:13px;
  font-weight:1000;
}

.bossLeaderboardPanel{
  min-width:0;
}

.bossLeaderboardHead{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin-bottom:10px;
}

.bossLeaderboardHead h3{
  margin:0 0 4px;
  font-size:22px;
}

.bossLeaderboardHead small{
  color:rgba(255,255,255,.72);
  font-weight:900;
}

.bossLeaderboardTabs,
.bossMetricTabs{
  display:flex;
  gap:8px;
  padding:4px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background:rgba(0,0,0,.18);
}

.bossLeaderboardTab{
  flex:1;
  border:0;
  border-radius:14px;
  padding:9px 10px;
  color:rgba(255,255,255,.78);
  background:transparent;
  font-weight:1000;
  cursor:pointer;
  transition:transform .14s ease, background .14s ease, color .14s ease;
}

.bossLeaderboardTab.active{
  color:#fff;
  background:linear-gradient(135deg, rgba(255,91,73,.9), rgba(255,205,91,.8));
  box-shadow:0 10px 26px rgba(255,121,58,.2);
}

.bossMetricTabs{
  justify-content:center;
  margin-bottom:9px;
}

.bossMetricBtn{
  width:54px;
  height:46px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  color:#fff;
  background:rgba(255,255,255,.08);
  font-size:24px;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  transition:transform .14s ease, filter .14s ease, background .14s ease;
}

.bossMetricBtn:hover,
.bossLeaderboardTab:hover{
  transform:translateY(-1px);
  filter:brightness(1.08);
}

.bossMetricBtn.active{
  background:radial-gradient(circle at 35% 20%, rgba(255,255,255,.42), transparent 32%), linear-gradient(135deg,#6de7ff,#8a6cff,#ff5fd7);
  box-shadow:0 10px 28px rgba(109,231,255,.22), inset 0 1px 0 rgba(255,255,255,.2);
}

.bossLeaderboardHint{
  padding:9px 11px;
  margin-bottom:10px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.07);
  color:rgba(255,255,255,.9);
  font-size:12px;
  font-weight:1000;
  text-align:center;
}

.bossLeaderboardRows{
  min-height:260px;
}

.bossRewardList{
  display:grid;
  gap:8px;
  margin-top:10px;
}

.bossRewardChip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:9px 10px;
  border-radius:15px;
  background:linear-gradient(135deg, rgba(255,220,90,.18), rgba(95,205,255,.14));
  border:1px solid rgba(255,255,255,.12);
  font-size:12px;
  font-weight:900;
  animation:boostPulse 2.1s ease-in-out infinite;
}

.bossEmpty{
  padding:12px;
  border-radius:17px;
  background:rgba(255,255,255,.07);
  font-size:12px;
  line-height:1.45;
  opacity:.86;
}

.boss-dark{background:radial-gradient(circle at 35% 28%, #39245e 0%, #17101f 44%, #050407 100%);}
.boss-gold{background:conic-gradient(from 40deg, #ffef8c, #d58a19, #fff0a6, #a75c10, #ffef8c);}
.boss-radio{background:radial-gradient(circle at 35% 28%, #c8ff63 0%, #429b30 43%, #103d19 100%);}
.boss-ice{background:radial-gradient(circle at 35% 28%, #d8fcff 0%, #6ab6e8 44%, #274b80 100%);}
.boss-hell{background:radial-gradient(circle at 35% 28%, #ff7a3d 0%, #a3131c 45%, #280006 100%);}

@keyframes bossFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-6px);}
}

@keyframes bossHit{
  0%{transform:scale(1);}
  45%{transform:scale(.92) rotate(-2deg);filter:brightness(1.4);}
  100%{transform:scale(1);}
}

@keyframes bossDefeat{
  0%{opacity:1;transform:scale(1) rotate(0);}
  55%{opacity:.8;transform:scale(1.12) rotate(5deg);filter:brightness(1.6);}
  100%{opacity:.28;transform:scale(.72) rotate(-12deg);}
}

@keyframes bossAuraPulse{
  0%,100%{opacity:.46;transform:scale(.96);}
  50%{opacity:.86;transform:scale(1.06);}
}

@keyframes bossDamageFloat{
  0%{opacity:0;transform:translate(-50%, 12px) scale(.9);}
  18%{opacity:1;}
  100%{opacity:0;transform:translate(-50%, -44px) scale(1.12);}
}

@keyframes bossSweep{
  0%,45%{transform:translateX(0) rotate(18deg);}
  86%,100%{transform:translateX(430%) rotate(18deg);}
}

.leaderboardMine{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
  margin-bottom:14px;
}

.leaderboardStat{
  border:1px solid rgba(255,255,255,0.16);
  border-radius:18px;
  padding:11px 12px;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,0.18), transparent 38%),
    linear-gradient(145deg,rgba(103,147,255,0.16),rgba(255,255,255,0.045));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.14), 0 12px 24px rgba(0,0,0,0.12);
}

.leaderboardStat b{
  display:block;
  font-size:11.5px;
  letter-spacing:.04em;
  opacity:.82;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.leaderboardStat span{
  display:block;
  margin-top:4px;
  font-size:16px;
  font-weight:1000;
  color:#fff4aa;
  text-shadow:0 0 14px rgba(255,228,120,0.22);
}

.leaderboardSync{
  margin:10px 0 14px;
  padding:12px;
  border:1px solid rgba(255,255,255,0.16);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(0,0,0,0.2),rgba(255,255,255,0.06));
}

.leaderboardSyncTop{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  font-weight:900;
  opacity:.86;
  line-height:1.35;
}

#leaderboardRefreshTimer{
  display:inline-block;
  min-width:230px;
}

.leaderboardSaveBtn{
  width:100%;
  margin-top:10px;
  border:none;
  border-radius:14px;
  padding:11px 12px;
  background:linear-gradient(135deg,#ffe27a,#ff8b3d);
  color:#2a1808;
  font-weight:1000;
  cursor:pointer;
  box-shadow:0 12px 24px rgba(255,145,61,0.22);
}

.leaderboardSaveBtn:disabled{
  cursor:not-allowed;
  filter:grayscale(.45);
  opacity:.65;
}

.leaderboardSection{
  margin-top:14px;
}

.leaderboardSectionTitle{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:7px;
  font-size:12px;
  font-weight:1000;
  letter-spacing:.06em;
  opacity:.95;
}

.leaderboardRows{
  display:grid;
  gap:7px;
}

.leaderboardRow{
  display:grid;
  grid-template-columns:30px 1fr auto;
  align-items:center;
  gap:8px;
  padding:9px 10px;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:16px;
  background:
    linear-gradient(135deg,rgba(255,255,255,0.13),rgba(255,255,255,0.045));
  font-size:12px;
  animation:softCardIn .22s ease both;
}

.leaderboardRow.mine{
  border-color:rgba(255,220,104,0.58);
  box-shadow:0 0 18px rgba(255,207,77,0.12);
}

.leaderboardRank{
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:rgba(255,255,255,0.12);
  font-weight:1000;
}

.leaderboardName{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:900;
}

.leaderboardValue{
  font-weight:1000;
  text-align:right;
  min-width:86px;
  font-variant-numeric:tabular-nums;
}

.leaderboardEmpty,
.leaderboardMessage{
  padding:12px;
  border-radius:18px;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,0.16), transparent 42%),
    linear-gradient(135deg,rgba(255,255,255,0.12),rgba(255,255,255,0.055));
  border:1px solid rgba(255,255,255,0.13);
  font-size:12px;
  font-weight:800;
  opacity:.94;
  line-height:1.45;
}

.leaderboardMessage{
  margin-bottom:12px;
}

.leaderboardMessage b,
.leaderboardMessage span{
  display:block;
}

.leaderboardMessage b{
  margin-bottom:3px;
  color:#fff1a3;
  font-size:15px;
}

.leaderboardCategoryGrid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:8px;
  margin:10px 0 12px;
}

.leaderboardCategoryGrid.locked{
  filter:grayscale(.58);
  opacity:.72;
}

.leaderboardCategoryBtn{
  min-width:0;
  border:1px solid rgba(255,255,255,0.14);
  border-radius:18px;
  padding:9px 7px;
  color:#fff;
  cursor:pointer;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.22), transparent 44%),
    linear-gradient(160deg,rgba(91,119,255,0.22),rgba(255,255,255,0.055));
  box-shadow:0 10px 22px rgba(0,0,0,0.14), inset 0 1px 0 rgba(255,255,255,0.1);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.leaderboardCategoryBtn:hover{
  transform:translateY(-2px);
}

.leaderboardCategoryBtn.active{
  border-color:rgba(255,232,127,0.72);
  box-shadow:0 0 22px rgba(255,219,94,0.2), 0 12px 24px rgba(0,0,0,0.18);
  background:
    radial-gradient(circle at 50% 0%, rgba(255,238,153,0.38), transparent 45%),
    linear-gradient(160deg,rgba(255,190,73,0.34),rgba(126,93,255,0.18));
}

.leaderboardCategoryIcon{
  display:block;
  font-size:21px;
  line-height:1;
  margin-bottom:5px;
  filter:drop-shadow(0 0 8px rgba(255,255,255,0.18));
}

.leaderboardCategoryBtn b{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:10px;
  letter-spacing:.02em;
}

.leaderboardLocked{
  margin-top:12px;
  padding:20px 16px;
  border:1px solid rgba(255,255,255,0.14);
  border-radius:24px;
  background:
    linear-gradient(135deg,rgba(20,24,38,0.78),rgba(10,12,20,0.74)),
    repeating-linear-gradient(135deg,rgba(255,255,255,0.045) 0 8px, transparent 8px 16px);
  text-align:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.12);
}

.leaderboardLockIcon{
  width:54px;
  height:54px;
  margin:0 auto 10px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:linear-gradient(135deg,rgba(255,255,255,0.16),rgba(255,255,255,0.055));
  font-size:28px;
  filter:grayscale(.1);
}

.leaderboardLocked b{
  display:block;
  font-size:17px;
  color:#fff1a3;
}

.leaderboardLocked p{
  margin:7px auto 14px;
  max-width:260px;
  font-size:13px;
  line-height:1.45;
  opacity:.84;
}

.leaderboardLocked button{
  border:0;
  border-radius:16px;
  padding:12px 16px;
  color:#201206;
  background:linear-gradient(135deg,#ffe27a,#ff8f45);
  font-weight:1000;
  cursor:pointer;
  box-shadow:0 14px 28px rgba(255,143,69,0.22);
}

@keyframes softCardIn{
  from{opacity:0; transform:translateY(5px);}
  to{opacity:1; transform:translateY(0);}
}

#petForgeFx,
#petDiamondFx{
  position:relative;
  z-index:2;
  height:0;
  pointer-events:none;
}

#petForgeFx.burst::before,
#petDiamondFx.burst::before{
  content:"";
  position:absolute;
  left:50%;
  top:12px;
  width:76px;
  height:76px;
  border-radius:50%;
  transform:translateX(-50%);
  background:radial-gradient(circle,rgba(255,230,120,.95),rgba(255,185,44,.28) 45%,transparent 70%);
  animation:forgeBurst .9s ease forwards;
}

.panelScroll{
  max-height:calc(100vh - 260px);
  overflow:auto;
  overscroll-behavior:contain;
  padding:12px;
  position:relative;
  z-index:1;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,0.28) rgba(255,255,255,0.06);
}

.panelScroll::-webkit-scrollbar{
  width:8px;
}

.panelScroll::-webkit-scrollbar-track{
  background:rgba(255,255,255,0.055);
  border-radius:999px;
  margin:10px 0;
}

.panelScroll::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(255,255,255,0.34),rgba(110,205,255,0.28));
  border-radius:999px;
  border:2px solid rgba(8,10,18,0.55);
}

.panelScroll::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,rgba(255,255,255,0.48),rgba(110,205,255,0.42));
}

.panelActions{
  display:flex;
  gap:8px;
  padding:0 12px 12px;
}

.panelTabs{
  display:flex;
  gap:8px;
  padding:0 12px 10px;
}

#petPanel .panelTabs{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:7px;
  padding:0 12px 11px;
}

.panelTab{
  position:relative;
  overflow:hidden;
  flex:1;
  border:none;
  border-radius:12px;
  padding:9px 8px;
  font-weight:bold;
  color:white;
  cursor:pointer;
  background:rgba(255,255,255,0.08);
  box-shadow:0 8px 18px rgba(0,0,0,0.2);
  transition:transform .16s ease, background .16s ease, box-shadow .16s ease;
}

#petPanel .panelTab{
  min-width:0;
  padding:8px 7px;
  font-size:12px;
  line-height:1;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.panelTab.active{
  background:var(--panel-accent, linear-gradient(135deg,#7c6cff,#49c5ff));
  box-shadow:0 10px 22px rgba(73,197,255,.18), inset 0 1px 0 rgba(255,255,255,.2);
}

.panelTab::after{
  content:"";
  position:absolute;
  left:18%;
  right:18%;
  bottom:5px;
  height:2px;
  border-radius:999px;
  background:rgba(255,255,255,.8);
  transform:scaleX(0);
  opacity:0;
  transition:transform .18s ease, opacity .18s ease;
}

.panelTab.active::after{
  transform:scaleX(1);
  opacity:.9;
}

.upgradeHubCard{
  width:100%;
  display:grid;
  grid-template-columns:54px minmax(0, 1fr) auto;
  gap:12px;
  align-items:center;
  margin-bottom:10px;
  padding:12px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:20px;
  color:#fff;
  text-align:left;
  cursor:pointer;
  background:
    radial-gradient(circle at 15% 0%, rgba(111,224,255,.18), transparent 48%),
    linear-gradient(145deg, rgba(255,255,255,.1), rgba(255,255,255,.035));
  box-shadow:0 14px 28px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.12);
}

.upgradeHubCard.locked{
  opacity:.55;
  filter:grayscale(.35);
}

.upgradeHubIcon{
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  border-radius:16px;
  color:#07101a;
  background:linear-gradient(135deg,#fff,#7ee7ff);
  font-size:25px;
  font-weight:1000;
  line-height:1;
  text-shadow:0 2px 8px rgba(255,255,255,.35);
  box-shadow:0 0 18px rgba(114,236,255,.24), inset 0 1px 0 rgba(255,255,255,.45);
}

.upgradeHubCard b,
.upgradeHubCard small{
  display:block;
}

.upgradeHubCard small{
  margin-top:3px;
  color:rgba(255,255,255,.72);
  font-size:12px;
  line-height:1.25;
}

.upgradeHubCard > span{
  padding:7px 9px;
  border-radius:999px;
  color:#07101a;
  background:linear-gradient(135deg,#fff,#bff5ff);
  font-size:11px;
  font-weight:1000;
  white-space:nowrap;
}

.potionActiveBox{
  margin-bottom:12px;
}

.potionBuffHud{
  position:fixed;
  left:max(14px, env(safe-area-inset-left));
  bottom:max(14px, env(safe-area-inset-bottom));
  z-index:20;
  display:flex;
  flex-direction:column-reverse;
  gap:8px;
  pointer-events:none;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .18s ease, transform .18s ease;
}

#weatherHud{
  position:fixed;
  left:max(14px, env(safe-area-inset-left));
  bottom:calc(max(14px, env(safe-area-inset-bottom)) + 104px);
  z-index:221;
  pointer-events:auto;
}

.weatherHudCard{
  min-width:150px;
  display:grid;
  grid-template-columns:42px 1fr;
  gap:9px;
  align-items:center;
  position:relative;
  padding:9px 11px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:18px;
  color:#fff;
  background:rgba(9,12,22,.68);
  box-shadow:0 14px 30px rgba(0,0,0,.3), 0 0 20px rgba(125,220,255,.16);
  backdrop-filter:blur(12px);
  animation:weatherHudIn .28s ease both, weatherHudPulse 2.4s ease-in-out infinite;
}

.weatherHudCard span{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(255,255,255,.9), rgba(132,231,255,.55));
  font-size:22px;
}

.weatherHudCard b,
.weatherHudCard small{display:block;}

.weatherHudCard small{color:rgba(255,255,255,.72); font-size:12px;}

.weatherHudCard::after{
  content:attr(data-tip);
  position:absolute;
  left:0;
  bottom:calc(100% + 10px);
  width:min(260px, calc(100vw - 28px));
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:14px;
  color:#fff;
  background:rgba(8,10,18,.9);
  box-shadow:0 16px 36px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter:blur(12px) saturate(1.25);
  font-size:12px;
  font-weight:900;
  line-height:1.35;
  opacity:0;
  transform:translateY(6px) scale(.98);
  pointer-events:none;
  transition:opacity .14s ease, transform .14s ease;
}

.weatherHudCard:hover::after{
  opacity:1;
  transform:translateY(0) scale(1);
}

@keyframes weatherHudIn{from{opacity:0; transform:translateY(10px) scale(.96);}to{opacity:1; transform:translateY(0) scale(1);}}
@keyframes weatherHudPulse{50%{box-shadow:0 14px 30px rgba(0,0,0,.3), 0 0 28px rgba(125,220,255,.26);}}

.weatherNowCard,
.weatherForecastBox,
.weatherIndexCard{
  margin-bottom:12px;
  padding:13px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:20px;
  background:linear-gradient(145deg, rgba(255,255,255,.1), rgba(255,255,255,.04));
  color:#fff;
}

.weatherNowCard,
.weatherForecastItem,
.weatherIndexCard{
  display:grid;
  grid-template-columns:46px 1fr;
  gap:10px;
  align-items:center;
}

.weatherNowCard > span,
.weatherForecastItem > span,
.weatherIndexCard > span{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:linear-gradient(135deg,#f7fdff,#95e9ff);
  color:#09111d;
  font-size:23px;
  font-weight:900;
}

.weatherNowCard.active{
  border-color:rgba(124,222,255,.45);
  box-shadow:0 0 28px rgba(124,222,255,.18);
}

.weatherForecastBox button{
  width:100%;
  margin-top:9px;
  padding:9px 10px;
  border:0;
  border-radius:14px;
  color:#07101a;
  font-weight:1000;
  background:linear-gradient(135deg,#fff,#a8f1ff);
  cursor:pointer;
}

.weatherForecastItem{
  margin-top:9px;
  padding:9px;
  border-radius:15px;
  background:rgba(0,0,0,.18);
}

.weatherIndexCard.locked{
  opacity:.48;
  filter:grayscale(.55);
}

.weatherIndexCard small,
.weatherForecastBox small{
  display:block;
  margin-top:4px;
  color:rgba(255,255,255,.68);
  line-height:1.35;
}

.weatherIndexCard b,
.weatherForecastItem b,
.weatherNowCard b{
  display:block;
}

.weatherRollOverlay{
  position:fixed;
  inset:0;
  z-index:230;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 50% 44%, rgba(116,229,255,.18), transparent 34%),
    rgba(0,0,0,.62);
  backdrop-filter:blur(9px) saturate(1.2);
  animation:weatherRollFade .25s ease both;
  pointer-events:none;
}

.weatherRollOverlay.done{
  animation:weatherRollImpactShake .34s ease both;
}

.weatherRollBox{
  position:relative;
  width:min(560px, calc(100vw - 32px));
  padding:24px 22px 26px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.22);
  border-radius:28px;
  text-align:center;
  color:#fff;
  background:
    radial-gradient(circle at 50% 0%, rgba(132,236,255,.22), transparent 38%),
    linear-gradient(145deg, rgba(15,22,38,.96), rgba(32,18,50,.92));
  box-shadow:0 28px 70px rgba(0,0,0,.45), 0 0 45px rgba(111,224,255,.22), inset 0 1px 0 rgba(255,255,255,.16);
}

.weatherRollGlow{
  position:absolute;
  inset:-40%;
  background:conic-gradient(from 0deg, transparent, rgba(105,230,255,.22), transparent, rgba(255,219,92,.18), transparent);
  opacity:.6;
  animation:weatherRollGlowSpin 2s linear infinite;
  pointer-events:none;
}

.weatherRollPointer{
  position:absolute;
  left:50%;
  top:17px;
  width:4px;
  height:74px;
  border-radius:999px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,#fff7a8,rgba(255,247,168,0));
  box-shadow:0 0 18px rgba(255,239,123,.72);
  z-index:2;
}

.weatherRollStrip{
  position:relative;
  z-index:1;
  display:flex;
  gap:14px;
  width:max-content;
  margin:4px 0 18px;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.24));
  --weather-roll-end:-1900px;
  animation:weatherRollSpin 1.45s cubic-bezier(.08,.86,.18,1) both;
}

.weatherRollStrip span{
  width:62px;
  height:62px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border:1px solid rgba(255,255,255,.5);
  border-radius:20px;
  background:
    radial-gradient(circle at 30% 20%, #fff, transparent 34%),
    linear-gradient(135deg,#eaffff,#86e9ff,#8f7cff);
  font-size:30px;
  box-shadow:0 12px 24px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.58);
}

.weatherRollOverlay.done .weatherRollStrip span.winner{
  background:
    radial-gradient(circle at 30% 20%, #fff, transparent 34%),
    linear-gradient(135deg,#fff8ad,#9ff3ff,#ff82d7);
  box-shadow:0 14px 30px rgba(0,0,0,.3), 0 0 24px rgba(255,237,110,.42), inset 0 1px 0 rgba(255,255,255,.72);
}

.weatherRollResult{
  position:relative;
  z-index:3;
  display:grid;
  justify-items:center;
  gap:8px;
}

.weatherRollResult span{
  width:70px;
  height:70px;
  display:grid;
  place-items:center;
  border-radius:24px;
  background:linear-gradient(135deg,#fff,#a7efff,#ffdd76);
  color:#07101a;
  font-size:34px;
  box-shadow:0 16px 36px rgba(0,0,0,.32), 0 0 34px rgba(111,224,255,.34);
  transform:scale(.84);
  opacity:.72;
  transition:transform .22s ease, opacity .22s ease;
}

.weatherRollBox b{
  font-size:24px;
  letter-spacing:.04em;
  text-shadow:0 0 22px rgba(117,229,255,.32);
}

.weatherRollImpact{
  position:absolute;
  left:50%;
  top:50%;
  width:120px;
  height:120px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.6);
  transform:translate(-50%, -50%) scale(.2);
  opacity:0;
  pointer-events:none;
}

.weatherRollOverlay.done .weatherRollResult span{
  transform:scale(1);
  opacity:1;
  animation:weatherRollResultPop .36s cubic-bezier(.13,1.26,.32,1) both;
}

.weatherRollOverlay.done .weatherRollBox{
  animation:weatherRollBoxHit .34s ease both;
}

.weatherRollOverlay.done .weatherRollImpact{
  animation:weatherRollShockwave .48s ease-out both;
}

@keyframes weatherRollFade{from{opacity:0;}to{opacity:1;}}
@keyframes weatherRollSpin{
  from{transform:translateX(0);}
  78%{transform:translateX(calc(var(--weather-roll-end) - 42px));}
  to{transform:translateX(var(--weather-roll-end));}
}
@keyframes weatherRollGlowSpin{to{transform:rotate(360deg);}}
@keyframes weatherRollImpactShake{
  0%,100%{transform:translate(0,0);}
  20%{transform:translate(5px,-2px);}
  42%{transform:translate(-4px,2px);}
  64%{transform:translate(2px,1px);}
}
@keyframes weatherRollBoxHit{
  0%,100%{transform:scale(1);}
  42%{transform:scale(1.035);}
}
@keyframes weatherRollResultPop{
  0%{filter:brightness(1); transform:scale(.82) rotate(-4deg);}
  50%{filter:brightness(1.35); transform:scale(1.12) rotate(2deg);}
  100%{filter:brightness(1); transform:scale(1) rotate(0);}
}
@keyframes weatherRollShockwave{
  from{opacity:.85; transform:translate(-50%, -50%) scale(.2);}
  to{opacity:0; transform:translate(-50%, -50%) scale(4.2);}
}

#weatherFx{
  position:fixed;
  inset:0;
  z-index:4;
  pointer-events:none;
  opacity:0;
}

body.weather-rain #weatherFx,
body.weather-wind #weatherFx{filter:brightness(.96) saturate(.96);}
body.weather-storm #weatherFx{filter:brightness(.86) saturate(1.12);}
body.weather-toxic #weatherFx{filter:brightness(.95) saturate(1.25) hue-rotate(28deg);}
body.weather-golden #weatherFx,
body.weather-riches #weatherFx{filter:sepia(.16) saturate(1.18) brightness(1.04);}
body.weather-diamonds #weatherFx{filter:saturate(1.12) brightness(1.04);}

.weatherShellShop{
  background:
    radial-gradient(circle at 20% 0%, rgba(118,222,255,.2), transparent 55%),
    linear-gradient(145deg, rgba(255,255,255,.1), rgba(255,255,255,.04));
}

.weatherWaterOdds{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  margin:10px 0;
}

.weatherWaterOdds span{
  padding:6px 8px;
  border-radius:12px;
  color:#dffbff;
  background:rgba(80,190,255,.14);
  font-size:11px;
  font-weight:900;
}

.weatherClickable{
  position:fixed;
  z-index:31;
  width:var(--weather-size, 58px);
  height:var(--weather-size, 58px);
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.35);
  border-radius:18px;
  color:#07101a;
  background:linear-gradient(135deg,#fff,#9cefff);
  box-shadow:0 18px 35px rgba(0,0,0,.28), 0 0 28px rgba(116,229,255,.32);
  font-size:28px;
  cursor:pointer;
  animation:weatherClickableFall var(--weather-speed, 5.2s) linear both, weatherClickablePulse 1.1s ease-in-out infinite;
}

.weatherClickableIcon{
  pointer-events:none;
  filter:drop-shadow(0 4px 7px rgba(0,0,0,.2));
}

.weatherClickable-rare{
  background:linear-gradient(135deg,#fff,#bcfff0,#7ab8ff);
  box-shadow:0 18px 35px rgba(0,0,0,.28), 0 0 30px rgba(122,184,255,.38);
}

.weatherClickable-epic{
  color:#fff;
  background:linear-gradient(135deg,#fff1ff,#a66dff,#4f2bd6);
  box-shadow:0 18px 35px rgba(0,0,0,.3), 0 0 34px rgba(160,94,255,.44);
}

.weatherClickable-legendary{
  color:#2b1800;
  background:conic-gradient(from 10deg,#fff6a8,#ffbd45,#fff,#ff7b3f,#fff6a8);
  box-shadow:0 18px 35px rgba(0,0,0,.32), 0 0 44px rgba(255,197,72,.62);
}

.weatherClickable-tornado{
  width:118px;
  height:148px;
  border:0;
  border-radius:0;
  color:transparent;
  background:transparent;
  box-shadow:none;
  filter:drop-shadow(0 18px 20px rgba(0,0,0,.32)) drop-shadow(0 0 26px rgba(221,244,255,.35));
  animation:weatherTornadoMove var(--weather-speed, 5.8s) ease-in-out both;
  transform-origin:center center;
}

.tornadoCore{
  position:relative;
  width:112px;
  height:132px;
  display:block;
}

.tornadoCore i{
  position:absolute;
  left:50%;
  display:block;
  border-radius:50%;
  transform:translateX(-50%);
  background:
    radial-gradient(ellipse at 30% 35%, rgba(255,255,255,.88), rgba(220,244,255,.58) 34%, rgba(128,159,183,.22) 62%, transparent 72%);
  border:1px solid rgba(255,255,255,.3);
  box-shadow:inset 0 0 14px rgba(255,255,255,.34), 0 0 18px rgba(165,220,255,.2);
  animation:weatherTornadoSpin .58s linear infinite;
}

.tornadoCore i:nth-child(1){top:4px; width:104px; height:30px; animation-duration:.54s;}
.tornadoCore i:nth-child(2){top:34px; width:82px; height:28px; animation-duration:.48s; animation-direction:reverse;}
.tornadoCore i:nth-child(3){top:62px; width:58px; height:25px; animation-duration:.42s;}
.tornadoCore i:nth-child(4){top:88px; width:34px; height:42px; border-radius:50% 50% 44% 44%; animation-duration:.36s; animation-direction:reverse;}

.tornadoCore::before,
.tornadoCore::after{
  content:"";
  position:absolute;
  left:50%;
  pointer-events:none;
}

.tornadoCore::before{
  top:13px;
  width:78px;
  height:94px;
  transform:translateX(-50%) rotate(-8deg);
  border-radius:50%;
  background:linear-gradient(100deg, transparent 0 18%, rgba(242,252,255,.3) 20% 23%, transparent 25% 100%);
  filter:blur(.5px);
  animation:weatherTornadoRibbon .9s ease-in-out infinite alternate;
}

.tornadoCore::after{
  bottom:2px;
  width:62px;
  height:16px;
  border-radius:50%;
  transform:translateX(-50%);
  background:radial-gradient(ellipse, rgba(170,200,220,.42), transparent 70%);
  animation:weatherTornadoDustPulse .7s ease-in-out infinite;
}

.tornadoDust{
  position:absolute;
  left:50%;
  bottom:8px;
  width:92px;
  height:28px;
  border-radius:50%;
  transform:translateX(-50%);
  background:
    radial-gradient(circle at 16% 50%, rgba(255,255,255,.45) 0 2px, transparent 4px),
    radial-gradient(circle at 68% 62%, rgba(195,222,238,.38) 0 3px, transparent 5px),
    radial-gradient(circle at 44% 42%, rgba(150,180,205,.32) 0 2px, transparent 5px);
  animation:weatherTornadoDust 1s linear infinite;
}

.weatherClickable-diamonds{
  background:linear-gradient(135deg,#eaffff,#72ecff,#5d78ff);
}

.weatherDiamond-small{border-radius:15px;}
.weatherDiamond-large{
  box-shadow:0 18px 35px rgba(0,0,0,.3), 0 0 36px rgba(114,236,255,.52);
}

.weatherDiamond-special{
  color:#fff;
  background:conic-gradient(from 0deg,#fff,#74f6ff,#596eff,#ff8fff,#fff);
  box-shadow:0 18px 36px rgba(0,0,0,.34), 0 0 52px rgba(130,247,255,.8), 0 0 28px rgba(255,132,255,.48);
  animation:weatherClickableFall var(--weather-speed, 4s) linear both, weatherClickablePulse .62s ease-in-out infinite;
}

.tornadoLoot{
  position:absolute;
  inset:22px 14px 36px;
  display:block;
  pointer-events:none;
  opacity:.85;
}

.tornadoLoot em{
  position:absolute;
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  font-size:15px;
  font-style:normal;
  background:rgba(10,18,28,.42);
  box-shadow:0 0 12px rgba(255,255,255,.28);
  animation:tornadoLootSpin 1.2s linear infinite;
}

.tornadoLoot em:nth-child(1){left:12px; top:8px; animation-duration:1.05s;}
.tornadoLoot em:nth-child(2){right:12px; top:44px; animation-direction:reverse;}
.tornadoLoot em:nth-child(3){left:38px; bottom:0; animation-duration:.9s;}

.weatherTornado-small{filter:drop-shadow(0 14px 16px rgba(0,0,0,.28)) drop-shadow(0 0 18px rgba(221,244,255,.28));}
.weatherTornado-large{filter:drop-shadow(0 22px 24px rgba(0,0,0,.38)) drop-shadow(0 0 34px rgba(221,244,255,.44));}
.weatherTornado-huge{filter:drop-shadow(0 26px 30px rgba(0,0,0,.44)) drop-shadow(0 0 48px rgba(255,255,255,.5));}

.weatherShip{
  position:fixed;
  z-index:32;
  left:-170px;
  width:126px;
  height:94px;
  padding:0;
  border:0;
  color:#eafcff;
  background:transparent;
  filter:drop-shadow(0 16px 18px rgba(0,0,0,.35)) drop-shadow(0 0 14px rgba(94,210,255,.22));
  cursor:pointer;
  transform:scale(var(--ship-scale, 1));
  transform-origin:center bottom;
  animation:weatherShipSail var(--ship-speed, 16s) linear both;
}

.weatherShip.fromRight{
  left:auto;
  right:-170px;
  animation-name:weatherShipSailReverse;
}

.weatherShip small{
  position:absolute;
  left:50%;
  bottom:1px;
  transform:translateX(-50%);
  padding:2px 8px;
  border-radius:999px;
  color:#dff8ff;
  background:rgba(6,20,38,.64);
  font-size:10px;
  font-weight:1000;
  letter-spacing:.04em;
  white-space:nowrap;
}

.weatherShipHp{
  position:absolute;
  left:20px;
  top:0;
  width:86px;
  height:7px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.34);
  border-radius:999px;
  background:rgba(8,16,28,.68);
  box-shadow:0 0 10px rgba(95,220,255,.26);
}

.weatherShipHp i{
  display:block;
  width:100%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#60ffbf,#fff06b,#ff705f);
  transition:width .16s ease;
}

.weatherShipShape{
  position:absolute;
  left:50%;
  top:15px;
  width:104px;
  height:62px;
  transform:translateX(-50%);
  animation:weatherShipBob 2.3s ease-in-out infinite;
}

.weatherShipHull{
  position:absolute;
  left:8px;
  bottom:6px;
  width:88px;
  height:24px;
  border-radius:0 0 42px 42px / 0 0 24px 24px;
  background:linear-gradient(180deg,#9a6a3f,#5e341e 60%,#2b1720);
  box-shadow:inset 0 6px 0 rgba(255,214,139,.22), 0 4px 0 rgba(70,220,255,.16);
  clip-path:polygon(0 0,100% 0,86% 100%,14% 100%);
}

.weatherShipMast{
  position:absolute;
  left:50%;
  top:3px;
  width:5px;
  height:48px;
  border-radius:999px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,#f4d7a6,#8a5530);
  box-shadow:0 0 8px rgba(255,255,255,.18);
}

.weatherShipSail{
  position:absolute;
  left:50%;
  top:6px;
  width:38px;
  height:42px;
  border-radius:8px 18px 16px 8px;
  background:linear-gradient(135deg,#faffff,#a7ecff 62%,#5db2d9);
  clip-path:polygon(8% 0,100% 50%,8% 100%);
  transform:translateX(-4px);
  box-shadow:inset 7px 0 0 rgba(255,255,255,.34);
}

.weatherShip-raft .weatherShipSail{display:none;}
.weatherShip-raft .weatherShipMast{height:28px; top:19px;}
.weatherShip-raft .weatherShipHull{
  height:18px;
  border-radius:10px;
  background:
    repeating-linear-gradient(90deg,#9a6338 0 17px,#6e3e24 17px 21px);
  clip-path:polygon(4% 12%,96% 0,100% 78%,0 100%);
}

.weatherShip-ship .weatherShipHull,
.weatherShip-ark .weatherShipHull{height:28px; width:98px; left:3px;}
.weatherShip-ship .weatherShipSail{width:44px; height:45px; background:linear-gradient(135deg,#fff,#d8f8ff 55%,#78cfff);}
.weatherShip-ark .weatherShipSail{width:48px; height:48px; background:linear-gradient(135deg,#fff7d0,#ffcc68 58%,#b97925);}
.weatherShip-ark .weatherShipHull{background:linear-gradient(180deg,#bd8547,#70411f 62%,#28131a);}

@keyframes weatherShipSail{
  from{transform:translateX(0) translateY(0);}
  50%{transform:translateX(calc(50vw + 90px)) translateY(calc(var(--shipBob, 1) * 16px));}
  to{transform:translateX(calc(100vw + 300px)) translateY(0);}
}

@keyframes weatherShipSailReverse{
  from{transform:translateX(0) translateY(0) scale(var(--ship-scale, 1));}
  50%{transform:translateX(calc(-50vw - 90px)) translateY(calc(var(--shipBob, 1) * 16px)) scale(var(--ship-scale, 1));}
  to{transform:translateX(calc(-100vw - 300px)) translateY(0) scale(var(--ship-scale, 1));}
}

@keyframes weatherShipBob{
  0%,100%{transform:translateX(-50%) rotate(-2deg) translateY(0);}
  50%{transform:translateX(-50%) rotate(2deg) translateY(5px);}
}

.petStyleAvatar{
  box-shadow:0 0 0 3px rgba(255,255,255,.35), 0 0 24px rgba(114,236,255,.65), 0 0 42px rgba(255,180,80,.35) !important;
}

.petStyleAvatar::before{
  content:"";
  position:absolute;
  top:8px;
  left:50%;
  width:28px;
  height:8px;
  border-radius:999px;
  transform:translateX(-50%) rotate(90deg);
  background:#dffcff;
  box-shadow:0 0 10px rgba(255,255,255,.8);
}

.petStyleTornado{
  background:conic-gradient(from 20deg,#f7fdff,#b8cad6,#ffffff,#8fb8d1,#f7fdff) !important;
  box-shadow:0 0 26px rgba(220,245,255,.65) !important;
}

.petStyleWater{
  background:linear-gradient(180deg,#dffbff 0 22%, #65d8ff 23% 78%, #246bd8 79%) !important;
  box-shadow:0 0 22px rgba(94,210,255,.55) !important;
}

.petAuraAvatar,
.petAuraWind,
.petAuraWater{
  animation:petGlow 2.4s ease-in-out infinite !important;
}

@keyframes weatherClickableFall{
  from{transform:translateY(-30px) rotate(var(--weather-rotate-start, -8deg)); opacity:0;}
  10%{opacity:1;}
  to{transform:translate(var(--weather-drift, 0), var(--weather-fall, 180px)) rotate(var(--weather-rotate-end, 16deg)); opacity:0;}
}

@keyframes weatherClickablePulse{
  50%{filter:brightness(1.25); scale:1.06;}
}

@keyframes weatherTornadoMove{
  0%{transform:translateY(-40px) translateX(-18px) scale(calc(var(--tornado-scale, 1) * .86)); opacity:0;}
  10%{opacity:1;}
  45%{transform:translateY(calc(var(--tornado-drift-y, 130px) * .45)) translateX(calc(var(--tornado-drift-x, 42px) * .45)) scale(var(--tornado-scale, 1));}
  78%{opacity:1;}
  100%{transform:translateY(var(--tornado-drift-y, 155px)) translateX(var(--tornado-drift-x, -12px)) scale(calc(var(--tornado-scale, 1) * .96)); opacity:0;}
}

@keyframes tornadoLootSpin{
  from{transform:rotate(0deg) translateX(12px) rotate(0deg);}
  to{transform:rotate(360deg) translateX(12px) rotate(-360deg);}
}

@keyframes weatherTornadoSpin{
  from{transform:translateX(-50%) rotate(0deg) skewX(-8deg);}
  to{transform:translateX(-50%) rotate(360deg) skewX(-8deg);}
}

@keyframes weatherTornadoRibbon{
  from{opacity:.25; transform:translateX(-50%) rotate(-12deg) scaleX(.9);}
  to{opacity:.65; transform:translateX(-50%) rotate(10deg) scaleX(1.05);}
}

@keyframes weatherTornadoDustPulse{
  50%{transform:translateX(-50%) scale(1.18); opacity:.55;}
}

@keyframes weatherTornadoDust{
  from{background-position:0 0, 12px 2px, -8px 0;}
  to{background-position:60px 0, -46px 2px, 42px 0;}
}

body.weather-storm #weatherFx,
body.weather-rain #weatherFx,
body.weather-toxic #weatherFx,
body.weather-diamonds #weatherFx,
body.weather-wind #weatherFx,
body.weather-golden #weatherFx,
body.weather-riches #weatherFx,
body.weather-flood #weatherFx{
  position:fixed;
  inset:0;
  z-index:4;
  pointer-events:none;
  opacity:.5;
  overflow:hidden;
}

#weatherFx i,
#weatherFx b,
#weatherFx em{
  position:absolute;
  inset:-18%;
  display:block;
  pointer-events:none;
  content:"";
  opacity:0;
}

body.weather-rain #weatherFx,
body.weather-storm #weatherFx{
  background:
    radial-gradient(circle at 70% 18%, rgba(80,130,255,.08), transparent 28%),
    linear-gradient(180deg, rgba(120,170,220,.06), transparent 58%);
}

body.weather-rain #weatherFx i,
body.weather-storm #weatherFx i{
  opacity:.7;
  background:
    linear-gradient(112deg, transparent 0 11px, rgba(170,225,255,.38) 12px 14px, transparent 15px 43px),
    linear-gradient(106deg, transparent 0 27px, rgba(220,245,255,.22) 28px 30px, transparent 31px 70px);
  background-size:72px 118px, 137px 191px;
  animation:weatherRainIrregular .62s linear infinite;
}

body.weather-rain #weatherFx b,
body.weather-storm #weatherFx b{
  opacity:.42;
  background:
    linear-gradient(118deg, transparent 0 18px, rgba(150,210,255,.32) 19px 21px, transparent 22px 88px),
    linear-gradient(99deg, transparent 0 54px, rgba(255,255,255,.18) 55px 57px, transparent 58px 120px);
  background-size:115px 163px, 190px 250px;
  animation:weatherRainIrregular 1.05s linear infinite reverse;
}

body.weather-storm #weatherFx em{
  opacity:.9;
  background:
    linear-gradient(120deg, transparent 0 48%, rgba(235,248,255,.95) 49% 50%, transparent 51%),
    radial-gradient(circle at 52% 24%, rgba(120,190,255,.28), transparent 18%);
  clip-path:polygon(48% 0, 55% 28%, 50% 28%, 60% 58%, 48% 38%, 53% 38%);
  animation:weatherLightning 4.8s steps(1,end) infinite;
}

body.weather-toxic #weatherFx{
  background:radial-gradient(circle at 50% 25%, rgba(50,255,110,.18), transparent 35%);
}

body.weather-toxic #weatherFx i,
body.weather-toxic #weatherFx b{
  opacity:.65;
  background:
    linear-gradient(111deg, transparent 0 18px, rgba(80,255,112,.46) 19px 22px, transparent 23px 63px),
    radial-gradient(circle at 20% 20%, rgba(170,255,120,.35) 0 2px, transparent 4px);
  background-size:92px 132px, 155px 180px;
  animation:weatherRainIrregular .48s linear infinite;
}

body.weather-diamonds #weatherFx{
  background:radial-gradient(circle at 60% 20%, rgba(120,240,255,.18), transparent 34%);
}

body.weather-diamonds #weatherFx i,
body.weather-diamonds #weatherFx b{
  opacity:.75;
  background:
    radial-gradient(circle at 18% 4%, rgba(215,255,255,.9) 0 3px, transparent 6px),
    radial-gradient(circle at 72% 28%, rgba(95,230,255,.72) 0 4px, transparent 7px),
    radial-gradient(circle at 44% 64%, rgba(255,255,255,.65) 0 2px, transparent 5px);
  background-size:145px 190px, 210px 260px, 90px 140px;
  animation:weatherGemFall 2.1s linear infinite;
}

body.weather-wind #weatherFx{
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), transparent),
    radial-gradient(circle at 78% 18%, rgba(210,240,255,.08), transparent 34%);
}

body.weather-wind #weatherFx i,
body.weather-wind #weatherFx b{
  opacity:.58;
  background:
    linear-gradient(105deg, transparent 0 12px, rgba(235,250,255,.28) 13px 16px, transparent 17px 82px),
    linear-gradient(101deg, transparent 0 44px, rgba(190,225,255,.18) 45px 48px, transparent 49px 118px),
    linear-gradient(108deg, transparent 0 74px, rgba(255,255,255,.16) 75px 77px, transparent 78px 150px);
  background-size:250px 92px, 380px 132px, 520px 170px;
  animation:weatherWindLines 5.4s linear infinite;
}

body.weather-wind #weatherFx b{
  opacity:.34;
  animation-duration:7.2s;
  animation-direction:reverse;
}

body.weather-wind #weatherFx em{
  opacity:.38;
  background:
    linear-gradient(116deg, transparent 0 36px, rgba(255,255,255,.24) 37px 39px, transparent 40px 126px),
    linear-gradient(96deg, transparent 0 18px, rgba(180,220,255,.18) 19px 21px, transparent 22px 90px);
  background-size:320px 84px, 210px 58px;
  animation:weatherWindGusts 3.8s ease-in-out infinite;
}

body.weather-golden #weatherFx,
body.weather-riches #weatherFx{
  background:
    radial-gradient(circle at 50% 20%, rgba(255,211,91,.25), transparent 42%),
    radial-gradient(circle at 18% 72%, rgba(255,170,55,.12), transparent 24%);
}

body.weather-golden #weatherFx i,
body.weather-riches #weatherFx i{
  opacity:.48;
  background:
    radial-gradient(circle at 18% 8%, rgba(255,230,120,.85) 0 2px, transparent 5px),
    radial-gradient(circle at 72% 42%, rgba(255,180,70,.55) 0 3px, transparent 6px);
  background-size:150px 210px, 230px 270px;
  animation:weatherGemFall 3.4s linear infinite;
}

body.weather-flood #weatherFx{
  top:20%;
  background:
    radial-gradient(ellipse at 18% 18%, rgba(176,245,255,.18), transparent 28%),
    radial-gradient(ellipse at 82% 32%, rgba(70,177,255,.18), transparent 34%),
    linear-gradient(180deg, rgba(91,205,255,.10), rgba(31,113,216,.38));
  animation:weatherFlood 4.2s ease both;
}

body.weather-flood #weatherFx i{
  opacity:.46;
  background:
    radial-gradient(ellipse at 12% 20%, rgba(255,255,255,.22) 0 2px, transparent 3px 34px),
    radial-gradient(ellipse at 64% 38%, rgba(210,248,255,.18) 0 3px, transparent 4px 42px),
    radial-gradient(ellipse at 34% 82%, rgba(255,255,255,.12) 0 2px, transparent 3px 28px);
  background-size:210px 58px, 310px 74px, 170px 46px;
  animation:weatherWavesIrregular 4.4s ease-in-out infinite;
}

body.weather-flood #weatherFx b{
  opacity:.24;
  background:
    linear-gradient(105deg, transparent 0 20%, rgba(183,244,255,.2) 21% 23%, transparent 24% 100%),
    linear-gradient(72deg, transparent 0 48%, rgba(255,255,255,.13) 49% 51%, transparent 52% 100%);
  background-size:260px 90px, 360px 120px;
  animation:weatherWaterDrift 7.5s linear infinite;
}

body.weather-flood #weatherFx em{
  opacity:.18;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(255,255,255,.2) 0 1px, transparent 2px 24px),
    radial-gradient(ellipse at 74% 64%, rgba(116,221,255,.2) 0 2px, transparent 3px 30px);
  background-size:190px 64px, 280px 82px;
  animation:weatherWaterDriftAlt 9s linear infinite;
}

body.weather-mega #weatherFx{opacity:.78;}
body.weather-mega #weatherFx i{filter:brightness(1.25); animation-duration:.38s;}

@keyframes weatherRainIrregular{from{background-position:0 -180px, 40px -260px;}to{background-position:-90px 180px, -130px 260px;}}
@keyframes weatherGemFall{from{background-position:0 -220px, 80px -280px, -40px -160px;}to{background-position:-70px 220px, 30px 280px, -95px 160px;}}
@keyframes weatherWindLines{from{background-position:0 0, 120px 40px, 260px 90px;}to{background-position:-620px 0, -500px 40px, -360px 90px;}}
@keyframes weatherWindGusts{
  0%,100%{transform:translateX(0) skewX(-7deg); opacity:.2;}
  45%{transform:translateX(-64px) skewX(-13deg); opacity:.46;}
  70%{transform:translateX(-118px) skewX(-9deg); opacity:.28;}
}
@keyframes weatherLightning{0%,86%,91%,100%{opacity:0;}87%,89%{opacity:.92;}90%{opacity:.25;}}
@keyframes weatherWavesIrregular{
  0%,100%{transform:translateX(0) translateY(0) skewX(0deg);}
  33%{transform:translateX(-34px) translateY(4px) skewX(-1deg);}
  66%{transform:translateX(22px) translateY(-3px) skewX(1deg);}
}
@keyframes weatherWaterDrift{from{background-position:0 0, 80px 20px;}to{background-position:-520px 40px, -420px -20px;}}
@keyframes weatherWaterDriftAlt{from{background-position:0 0, -60px 20px;}to{background-position:360px 30px, 520px -40px;}}
@keyframes weatherFlood{from{transform:translateY(100%);}to{transform:translateY(0);}}

.potionBuffHud.show{
  opacity:1;
  transform:translateY(0);
}

.potionHudBuff{
  position:relative;
  min-width:118px;
  display:grid;
  grid-template-columns:40px 1fr;
  align-items:center;
  gap:9px;
  padding:8px 10px;
  border:1px solid color-mix(in srgb, var(--potion-color) 58%, rgba(255,255,255,.16));
  border-radius:17px;
  color:#fff;
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--potion-color) 34%, transparent), transparent 58%),
    rgba(8,10,18,.72);
  box-shadow:0 12px 28px rgba(0,0,0,.28), 0 0 18px color-mix(in srgb, var(--potion-color) 18%, transparent);
  backdrop-filter:blur(12px);
  pointer-events:auto;
}

.potionHudIcon{
  position:relative;
  width:38px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:14px 14px 18px 18px;
  border:2px solid color-mix(in srgb, var(--potion-color) 68%, rgba(255,255,255,.35));
  background:
    linear-gradient(180deg, rgba(255,255,255,.76) 0 16%, transparent 17%),
    linear-gradient(180deg, color-mix(in srgb, var(--potion-color) 76%, #fff 12%), color-mix(in srgb, var(--potion-color) 44%, #101827));
  box-shadow:inset 0 0 14px rgba(255,255,255,.2), 0 0 16px color-mix(in srgb, var(--potion-color) 30%, transparent);
  font-size:21px;
  overflow:hidden;
}

.potionHudIcon::before,
.potionIcon::before{
  content:"";
  position:absolute;
  top:4px;
  left:50%;
  width:48%;
  height:9px;
  border-radius:999px;
  transform:translateX(-50%);
  background:rgba(255,255,255,.78);
  box-shadow:0 0 8px rgba(255,255,255,.25);
}

.potionHudIcon::after,
.potionIcon::after{
  content:"";
  position:absolute;
  inset:28% 14% 12%;
  border-radius:45% 45% 58% 58%;
  background:
    radial-gradient(circle at 28% 28%, rgba(255,255,255,.58), transparent 18%),
    linear-gradient(180deg, color-mix(in srgb, var(--potion-color) 82%, #fff 8%), color-mix(in srgb, var(--potion-color) 52%, #101827));
  box-shadow:inset 0 0 14px rgba(255,255,255,.18), 0 0 14px color-mix(in srgb, var(--potion-color) 35%, transparent);
}

.potionHudIcon span,
.potionIcon span{
  position:relative;
  z-index:2;
  transform:translateY(7px);
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));
}

.potionHudInfo{
  display:grid;
  gap:2px;
}

.potionHudInfo b{
  font-size:14px;
  line-height:1;
}

.potionHudInfo span{
  font-size:12px;
  font-weight:900;
  color:rgba(255,255,255,.78);
}

.potionBuffGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
}

.potionBuffChip{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:2px 8px;
  align-items:center;
  min-height:54px;
  padding:9px 10px;
  border:1px solid color-mix(in srgb, var(--potion-color) 55%, transparent);
  border-radius:16px;
  background:
    radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--potion-color) 34%, transparent), transparent 54%),
    rgba(255,255,255,0.06);
  box-shadow:0 0 18px color-mix(in srgb, var(--potion-color) 20%, transparent);
}

.potionBuffChip span{
  grid-row:1 / span 2;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:color-mix(in srgb, var(--potion-color) 26%, rgba(0,0,0,.25));
  font-size:19px;
}

.potionBuffChip b{
  font-size:12px;
}

.potionBuffChip small{
  font-size:11px;
  opacity:.78;
}

.potionCard{
  position:relative;
  width:100%;
  min-height:88px;
  display:grid;
  grid-template-columns:58px 1fr auto;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
  padding:13px 12px;
  border:1px solid color-mix(in srgb, var(--potion-color) 46%, rgba(255,255,255,.12));
  border-radius:20px;
  color:#fff;
  cursor:pointer;
  text-align:left;
  background:
    radial-gradient(circle at 18% 8%, color-mix(in srgb, var(--potion-color) 30%, transparent), transparent 48%),
    linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.032));
  box-shadow:0 14px 28px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.12);
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
  animation:uiCardIn .18s ease both;
}

.potionCard:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 34px rgba(0,0,0,.28), 0 0 24px color-mix(in srgb, var(--potion-color) 24%, transparent);
}

.potionCard::after{
  content:"";
  position:absolute;
  inset:-40% auto auto -20%;
  width:120px;
  height:120px;
  border-radius:50%;
  background:color-mix(in srgb, var(--potion-color) 16%, transparent);
  filter:blur(18px);
}

.potionIcon{
  position:relative;
  z-index:1;
  width:54px;
  height:62px;
  display:grid;
  place-items:center;
  border-radius:18px 18px 24px 24px;
  border:2px solid color-mix(in srgb, var(--potion-color) 70%, rgba(255,255,255,.35));
  background:
    linear-gradient(180deg, rgba(255,255,255,.78) 0 14%, transparent 15%),
    linear-gradient(180deg, color-mix(in srgb, var(--potion-color) 76%, #fff 12%), color-mix(in srgb, var(--potion-color) 46%, #101827));
  box-shadow:inset 0 0 18px rgba(255,255,255,.22), 0 0 18px color-mix(in srgb, var(--potion-color) 32%, transparent);
  font-size:25px;
  overflow:hidden;
}

.potionType-luck .potionIcon,
.potionType-luck .potionHudIcon{
  border-radius:22px 22px 18px 18px;
}

.potionType-money .potionIcon,
.potionType-money .potionHudIcon{
  transform:skewX(-3deg);
}

.potionType-diamonds .potionIcon,
.potionType-diamonds .potionHudIcon{
  clip-path:polygon(50% 0%, 88% 16%, 100% 54%, 50% 100%, 0 54%, 12% 16%);
  border-radius:14px;
}

.potionMeta{
  position:relative;
  z-index:1;
  display:grid;
  gap:5px;
}

.potionMeta b{
  font-size:15px;
  letter-spacing:.02em;
}

.potionMeta small{
  opacity:.74;
  font-weight:800;
}

.potionUse{
  position:relative;
  z-index:1;
  padding:8px 10px;
  border-radius:999px;
  color:#071018;
  background:linear-gradient(135deg, #fff, color-mix(in srgb, var(--potion-color) 78%, #fff));
  font-size:11px;
  font-weight:1000;
  text-transform:uppercase;
}

.potionStack{
  position:absolute;
  right:10px;
  top:9px;
  z-index:2;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.12);
  font-size:11px;
  font-weight:1000;
}

.potionTier2{
  animation:potionSoftPulse 2.8s ease-in-out infinite;
}

.potionTier3{
  animation:potionSoftPulse 1.8s ease-in-out infinite;
}

.potionTier3 .potionIcon{
  box-shadow:inset 0 0 20px rgba(255,255,255,.25), 0 0 28px color-mix(in srgb, var(--potion-color) 58%, transparent);
}

.potionEmpty{
  padding:13px;
  border-radius:16px;
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.72);
  font-size:13px;
}

.potionCraftCard{
  width:100%;
  display:grid;
  grid-template-columns:48px minmax(0, 1fr);
  gap:10px;
  align-items:center;
  margin-bottom:10px;
  padding:12px;
  border-radius:18px;
  border:1px solid color-mix(in srgb, var(--potion-color) 42%, rgba(255,255,255,.12));
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--potion-color) 22%, transparent), transparent 48%),
    linear-gradient(145deg, rgba(255,255,255,.1), rgba(255,255,255,.035));
}

.potionCraftCard.locked{
  opacity:.58;
  filter:grayscale(.25);
}

.potionCraftMiniIcon{
  grid-row:1 / span 2;
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:linear-gradient(145deg, color-mix(in srgb, var(--potion-color) 74%, #fff 10%), rgba(16,24,39,.92));
  box-shadow:0 0 18px color-mix(in srgb, var(--potion-color) 34%, transparent), inset 0 1px 0 rgba(255,255,255,.24);
  font-size:24px;
}

.potionCraftActions{
  grid-column:2;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.potionCraftActions button{
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  padding:8px 11px;
  color:#08111b;
  background:linear-gradient(135deg,#fff,color-mix(in srgb, var(--potion-color) 78%, #fff));
  font-size:11px;
  font-weight:1000;
  cursor:pointer;
}

.potionCraftActions button:disabled{
  opacity:.45;
  cursor:not-allowed;
}

.enchantCard{
  --enchant-color:#8bd3ff;
  position:relative;
  width:100%;
  min-height:94px;
  display:grid;
  grid-template-columns:62px minmax(0, 1fr) auto;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
  padding:13px 12px;
  border:1px solid color-mix(in srgb, var(--enchant-color) 50%, rgba(255,255,255,.14));
  border-radius:22px;
  color:#fff;
  text-align:left;
  background:
    radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--enchant-color) 34%, transparent), transparent 52%),
    linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.035));
  box-shadow:0 14px 28px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.14);
  cursor:pointer;
  overflow:hidden;
  animation:uiCardIn .18s ease both;
}

.enchantCard.active{
  border-color:color-mix(in srgb, var(--enchant-color) 86%, #fff);
  box-shadow:0 0 26px color-mix(in srgb, var(--enchant-color) 30%, transparent), inset 0 1px 0 rgba(255,255,255,.22);
}

.enchantBook{
  position:relative;
  width:50px;
  height:58px;
  display:grid;
  place-items:center;
  border-radius:8px 14px 14px 8px;
  color:#07101a;
  font-size:12px;
  font-weight:1000;
  letter-spacing:.02em;
  background:
    linear-gradient(90deg, rgba(0,0,0,.32) 0 14%, transparent 15%),
    radial-gradient(circle at 76% 18%, rgba(255,255,255,.72), transparent 22%),
    linear-gradient(135deg, color-mix(in srgb, var(--enchant-color) 88%, #fff 8%), color-mix(in srgb, var(--enchant-color) 54%, #101827));
  box-shadow:0 0 18px color-mix(in srgb, var(--enchant-color) 38%, transparent), inset 0 1px 0 rgba(255,255,255,.35);
}

.enchantBook::before{
  content:"";
  position:absolute;
  inset:7px 8px 7px 16px;
  border:1px solid rgba(255,255,255,.38);
  border-radius:7px;
}

.enchantBook::after{
  content:"";
  position:absolute;
  right:5px;
  top:8px;
  width:5px;
  height:42px;
  border-radius:999px;
  background:rgba(255,255,255,.36);
}

.enchantBook span{
  position:relative;
  z-index:1;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}

.enchantTier2 .enchantBook,
.enchantTier2.enchantBook{
  filter:saturate(1.12);
}

.enchantTier3 .enchantBook,
.enchantTier3.enchantBook,
.enchantCard.exclusive .enchantBook{
  animation:softAuraPulse 2.4s ease-in-out infinite;
}

.enchantCraftCard{
  --potion-color:var(--enchant-color, #8bd3ff);
}

.enchantCraftCard .potionMeta b,
.enchantCard b{
  font-size:13px;
}

.enchantCard small{
  display:block;
  color:rgba(255,255,255,.7);
  font-size:11px;
  line-height:1.35;
}

.enchantCount{
  min-width:38px;
  padding:7px 9px;
  border-radius:999px;
  color:#07101a;
  background:linear-gradient(135deg,#fff,color-mix(in srgb, var(--enchant-color) 72%, #fff));
  font-size:12px;
  font-weight:1000;
  text-align:center;
}

.activeEnchantPanel{
  margin:8px 0 12px;
  padding:12px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(145deg, rgba(255,255,255,.1), rgba(255,255,255,.035));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}

.activeEnchantSlots{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
  margin-top:9px;
}

.activeEnchantSlot{
  --enchant-color:#8bd3ff;
  min-height:92px;
  border-radius:16px;
  border:1px solid color-mix(in srgb, var(--enchant-color) 42%, rgba(255,255,255,.14));
  color:#fff;
  background:
    radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--enchant-color) 28%, transparent), transparent 48%),
    rgba(0,0,0,.18);
  display:grid;
  grid-template-columns:28px 46px 1fr;
  align-items:center;
  gap:8px;
  padding:9px;
  text-align:left;
}

.activeEnchantSlot.filled{
  cursor:pointer;
  box-shadow:0 0 18px color-mix(in srgb, var(--enchant-color) 22%, transparent);
}

.activeEnchantSlot.empty{
  opacity:.55;
  grid-template-columns:28px 1fr;
  border-style:dashed;
}

.activeEnchantSlot > span{
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:rgba(255,255,255,.13);
  font-size:11px;
  font-weight:1000;
}

.activeEnchantSlot .enchantBook{
  width:42px;
  height:50px;
}

.activeEnchantSlot .enchantBook em{
  position:relative;
  z-index:1;
  font-style:normal;
  font-size:10px;
}

.activeEnchantSlot b{
  display:block;
  font-size:12px;
  line-height:1.1;
}

.activeEnchantSlot small{
  display:block;
  margin-top:3px;
  color:rgba(255,255,255,.72);
  font-size:10px;
}

.bagCard{
  position:relative;
  width:100%;
  min-height:92px;
  display:grid;
  grid-template-columns:62px 1fr auto;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
  padding:13px 12px;
  border:1px solid color-mix(in srgb, var(--bag-color) 48%, rgba(255,255,255,.12));
  border-radius:22px;
  color:#fff;
  cursor:pointer;
  text-align:left;
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--bag-color) 36%, transparent), transparent 52%),
    linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.035));
  box-shadow:0 14px 28px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.12);
  overflow:visible;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
  animation:uiCardIn .18s ease both;
}

.bagCard:hover{
  z-index:90;
  transform:translateY(-2px);
  box-shadow:0 18px 36px rgba(0,0,0,.3), 0 0 24px color-mix(in srgb, var(--bag-color) 24%, transparent);
}

.inventoryEggCard{
  position:relative;
  width:100%;
  min-height:118px;
  display:grid;
  grid-template-columns:76px 1fr;
  align-items:center;
  gap:12px;
  padding:14px;
  border:1px solid rgba(161,240,255,.3);
  border-radius:20px;
  color:#effdff;
  cursor:pointer;
  text-align:left;
  background:
    radial-gradient(circle at 16% 14%, rgba(190,250,255,.16), transparent 34%),
    linear-gradient(145deg, rgba(73,92,170,.34), rgba(31,15,65,.62));
  box-shadow:0 12px 30px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.14);
  transition:transform .16s ease, filter .16s ease, border-color .16s ease;
}

.inventoryEggCard:hover{
  z-index:90;
  transform:translateY(-2px);
  filter:brightness(1.09);
  border-color:rgba(182,249,255,.62);
}

.inventoryEggVisual{
  width:62px;
  height:78px;
  margin:auto;
  border-radius:52% 52% 44% 44%;
  box-shadow:0 0 20px rgba(128,239,255,.48), inset 0 1px 0 rgba(255,255,255,.46);
}

.inventoryEggStack{
  position:absolute;
  right:10px;
  top:9px;
  padding:3px 7px;
  border-radius:999px;
  color:#e9fdff;
  background:rgba(2,7,20,.72);
  border:1px solid rgba(177,245,255,.28);
  font-size:12px;
  font-weight:1000;
}

.chanceTooltip,
.inventoryEggTooltip{
  position:absolute;
  left:12px;
  right:12px;
  top:calc(100% - 8px);
  z-index:999;
  width:auto;
  display:grid;
  gap:7px;
  padding:12px;
  border:1px solid rgba(159,242,255,.36);
  border-radius:17px;
  color:#edfdff;
  background:rgba(6,9,26,.96);
  box-shadow:0 16px 38px rgba(0,0,0,.44), 0 0 22px rgba(110,99,255,.22);
  opacity:0;
  pointer-events:none;
  transform:translateY(7px);
  transition:opacity .14s ease, transform .14s ease;
}

.bagChanceTooltip{
  border-color:color-mix(in srgb, var(--bag-color) 54%, rgba(255,255,255,.2));
  box-shadow:0 16px 38px rgba(0,0,0,.44), 0 0 22px color-mix(in srgb, var(--bag-color) 26%, transparent);
}

.inventoryEggCard:hover .chanceTooltip,
.inventoryEggCard:focus-visible .chanceTooltip,
.bagCard:hover .chanceTooltip,
.bagCard:focus-visible .chanceTooltip{
  opacity:1;
  transform:translateY(0);
}

.chanceTooltip > strong{
  color:#bdf9ff;
  font-size:14px;
}

.chanceTooltipRow{
  display:grid;
  grid-template-columns:34px minmax(0, 1fr) auto;
  gap:7px;
  align-items:center;
}

.chanceTooltipRow i{
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#e9fdff;
  background:
    radial-gradient(circle at 34% 24%, rgba(255,255,255,.9), transparent 23%),
    linear-gradient(145deg, color-mix(in srgb, var(--chance-color, #cdfbff) 78%, #fff), color-mix(in srgb, var(--chance-color, #7e71ff) 54%, #24103f));
  box-shadow:0 0 12px color-mix(in srgb, var(--chance-color, #84efff) 38%, transparent);
  font-style:normal;
  font-size:15px;
}

.chanceTooltipRow i.secret,
.inventoryEggPetVisual.secret{
  box-shadow:0 0 15px rgba(255,229,142,.58), 0 0 20px rgba(163,98,255,.42);
}

.chanceTooltipRow b{
  overflow:hidden;
  color:rgba(239,253,255,.9);
  font-size:11px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.chanceTooltipRow em{
  color:#ffe991;
  font-size:11px;
  font-style:normal;
  font-weight:1000;
}

@media (max-width:760px){
  #petPanel .panelTabs{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .chanceTooltip,
  .inventoryEggTooltip{
    position:static;
    width:100%;
    grid-column:1 / -1;
    max-height:0;
    padding:0 10px;
    overflow:hidden;
    border-width:0;
    opacity:0;
    transform:none;
    transition:max-height .16s ease, padding .16s ease, opacity .16s ease;
  }

  .inventoryEggCard:hover .chanceTooltip,
  .inventoryEggCard:focus-visible .chanceTooltip,
  .bagCard:hover .chanceTooltip,
  .bagCard:focus-visible .chanceTooltip{
    max-height:280px;
    padding:10px;
    border-width:1px;
    opacity:1;
  }
}

.bagIcon{
  position:relative;
  z-index:1;
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  border-radius:20px;
  border:2px solid color-mix(in srgb, var(--bag-color) 70%, rgba(255,255,255,.36));
  background:
    radial-gradient(circle at 34% 24%, rgba(255,255,255,.82), transparent 18%),
    linear-gradient(135deg, color-mix(in srgb, var(--bag-color) 80%, #fff 10%), color-mix(in srgb, var(--bag-color) 42%, #101827));
  box-shadow:inset 0 0 18px rgba(255,255,255,.2), 0 0 18px color-mix(in srgb, var(--bag-color) 32%, transparent);
  font-size:27px;
}

.bag-best .bagIcon{
  animation:potionSoftPulse 1.9s ease-in-out infinite;
  box-shadow:inset 0 0 22px rgba(255,255,255,.25), 0 0 34px color-mix(in srgb, var(--bag-color) 56%, transparent);
}

.bagMeta{
  position:relative;
  z-index:1;
  display:grid;
  gap:5px;
}

.bagMeta b{
  font-size:15px;
}

.bagMeta small{
  opacity:.74;
  font-weight:800;
  line-height:1.35;
}

.bagUse{
  position:relative;
  z-index:1;
  padding:8px 10px;
  border-radius:999px;
  color:#071018;
  background:linear-gradient(135deg, #fff, color-mix(in srgb, var(--bag-color) 78%, #fff));
  font-size:11px;
  font-weight:1000;
  text-transform:uppercase;
}

.bagStack{
  position:absolute;
  right:10px;
  top:9px;
  z-index:2;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(0,0,0,.36);
  border:1px solid rgba(255,255,255,.12);
  font-size:11px;
  font-weight:1000;
}

.bagRewardOverlay{
  position:fixed;
  inset:0;
  z-index:1200;
  display:grid;
  place-items:center;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle, color-mix(in srgb, var(--bag-color) 18%, transparent), rgba(0,0,0,.36));
  transition:opacity .24s ease;
}

.bagRewardOverlay.show{
  opacity:1;
}

.bagRewardCard{
  min-width:min(330px, calc(100vw - 36px));
  padding:26px 22px;
  border:1px solid color-mix(in srgb, var(--bag-color) 62%, rgba(255,255,255,.18));
  border-radius:28px;
  text-align:center;
  color:#fff;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--bag-color) 36%, transparent), transparent 58%),
    rgba(9,10,18,.88);
  box-shadow:0 24px 70px rgba(0,0,0,.48), 0 0 42px color-mix(in srgb, var(--bag-color) 28%, transparent);
  transform:scale(.88) translateY(14px);
  transition:transform .24s cubic-bezier(.2,1.2,.2,1);
  backdrop-filter:blur(14px);
}

.bagRewardOverlay.show .bagRewardCard{
  transform:scale(1) translateY(0);
}

.bagRewardIcon{
  width:84px;
  height:84px;
  display:grid;
  place-items:center;
  margin:0 auto 12px;
  border-radius:26px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--bag-color) 80%, #fff 10%), rgba(255,255,255,.16));
  box-shadow:0 0 34px color-mix(in srgb, var(--bag-color) 46%, transparent);
  font-size:44px;
}

.bagRewardCard b,
.bagRewardCard span,
.bagRewardCard strong,
.bagRewardCard small{
  display:block;
}

.bagRewardCard strong{
  margin:8px 0;
  font-size:23px;
  color:color-mix(in srgb, var(--bag-color) 72%, #fff);
}

.bagRewardCard small{
  opacity:.72;
}

@keyframes potionSoftPulse{
  0%,100%{filter:saturate(1); box-shadow:0 14px 28px rgba(0,0,0,.24), 0 0 14px color-mix(in srgb, var(--potion-color) 14%, transparent)}
  50%{filter:saturate(1.2); box-shadow:0 16px 32px rgba(0,0,0,.26), 0 0 26px color-mix(in srgb, var(--potion-color) 30%, transparent)}
}

.sectionTitle{
  margin:8px 12px 10px;
  padding:8px 10px;
  border-radius:12px;
  background:rgba(255,255,255,0.06);
  font-size:12px;
  letter-spacing:0.6px;
  text-transform:uppercase;
  color:rgba(255,255,255,0.84);
}

.inventorySectionHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:10px 2px 9px;
  padding:9px 11px;
  border:1px solid rgba(255,255,255,0.11);
  border-radius:15px;
  background:linear-gradient(135deg,rgba(255,255,255,0.1),rgba(255,255,255,0.035));
  color:rgba(255,255,255,0.92);
}

.inventorySectionHeader b{
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.inventorySectionHeader span{
  min-width:36px;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(0,0,0,0.22);
  border:1px solid rgba(255,255,255,0.1);
  text-align:center;
  font-size:12px;
  font-weight:1000;
}

.activePetsPanel{
  margin-bottom:12px;
}

.activePetSlots{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
}

.activePetSlot{
  position:relative;
  min-width:0;
  min-height:132px;
  padding:10px 7px 9px;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:18px;
  color:#fff;
  background:
    radial-gradient(circle at 50% 12%, rgba(255,255,255,0.16), transparent 42%),
    linear-gradient(145deg,rgba(255,255,255,0.1),rgba(255,255,255,0.035));
  box-shadow:0 12px 22px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.1);
  overflow:hidden;
}

button.activePetSlot{
  cursor:pointer;
}

button.activePetSlot:hover{
  transform:translateY(-2px);
}

.activePetSlot.filled{
  border-color:rgba(107,222,255,0.34);
}

.activePetSlot.filled::after{
  content:"ZAŁOŻONY";
  position:absolute;
  left:50%;
  top:8px;
  transform:translateX(-50%);
  padding:3px 7px;
  border-radius:999px;
  background:linear-gradient(135deg,#79eaff,#7b61ff);
  color:#06121b;
  font-size:9px;
  font-weight:1000;
  letter-spacing:.05em;
  box-shadow:0 0 16px rgba(113,224,255,0.22);
}

.activePetSlot.empty{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  opacity:.58;
  border-style:dashed;
}

.activePetSlotIndex{
  position:absolute;
  top:8px;
  left:8px;
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:rgba(0,0,0,0.24);
  font-size:11px;
  font-weight:1000;
}

.activePetSlot .petCircle{
  display:block;
  width:50px;
  height:50px;
  margin:20px auto 8px;
}

.emptySlotIcon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  margin:14px auto 9px;
  border-radius:16px;
  background:rgba(255,255,255,0.08);
  font-size:24px;
  font-weight:1000;
}

.activePetSlotName{
  display:block;
  min-height:30px;
  font-size:11px;
  font-weight:1000;
  line-height:1.2;
  text-align:center;
  overflow:hidden;
}

.activePetSlot small{
  display:block;
  margin-top:5px;
  font-size:10px;
  line-height:1.2;
  opacity:.76;
  text-align:center;
}

.inventoryBonusCard{
  cursor:default;
  background:
    radial-gradient(circle at 18% 10%, rgba(255,224,113,0.18), transparent 42%),
    linear-gradient(135deg,rgba(255,255,255,0.12),rgba(255,255,255,0.045));
}

.panelAction{
  flex:1;
  border:none;
  border-radius:12px;
  padding:10px 8px;
  font-weight:bold;
  color:white;
  cursor:pointer;
  background:var(--panel-cta, linear-gradient(135deg,#ff8a4c,#ff4f81));
  box-shadow:0 8px 18px rgba(0,0,0,0.25);
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.panelAction:hover{
  filter:saturate(1.12) brightness(1.06);
  box-shadow:0 12px 24px rgba(0,0,0,0.28);
}

.panelAction.secondary{
  background:var(--panel-secondary, linear-gradient(135deg,#5d75ff,#38c7ff));
}

.diamondCard{
  background:linear-gradient(180deg,rgba(24,32,52,0.92),rgba(10,14,26,0.96));
}

.diamondCard .petBadge{
  background:rgba(89,191,255,0.15);
}

.eggCard,
.petCard{
  position:relative;
  background:var(--panel-card-bg, rgba(255,255,255,0.05));
  border:1px solid var(--panel-border-soft, rgba(255,255,255,0.08));
  border-radius:14px;
  padding:10px;
  margin-bottom:10px;
  cursor:pointer;
  transition:transform 0.18s ease, background 0.18s ease, opacity 0.18s ease, border-color .18s ease, box-shadow .18s ease;
  animation:uiCardIn .18s ease both;
}

.eggCard:hover,
.petCard:hover{
  transform:translateY(-2px);
  background:var(--panel-card-hover, rgba(255,255,255,0.08));
}

.eggCard.eggDenied{
  border-color:rgba(255,96,96,.62);
  box-shadow:0 14px 32px rgba(0,0,0,.3),0 0 24px rgba(255,82,82,.26);
  animation:eggDeniedShake .42s ease both;
}

@keyframes eggDeniedShake{
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-5px);}
  40%{transform:translateX(5px);}
  60%{transform:translateX(-3px);}
  80%{transform:translateX(3px);}
}

@keyframes uiCardIn{
  from{
    opacity:0;
    transform:translateY(6px) scale(.985);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

@keyframes uiStatusIn{
  from{
    opacity:0;
    transform:translateY(3px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes uiRewardCheck{
  0%{
    transform:scale(.55) rotate(-14deg);
    opacity:0;
  }
  70%{
    transform:scale(1.12) rotate(5deg);
    opacity:1;
  }
  100%{
    transform:scale(1) rotate(0);
    opacity:1;
  }
}

.eggSettingsBtn{
  position:absolute;
  top:9px;
  right:9px;
  z-index:4;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  color:#fff;
  background:rgba(255,255,255,.1);
  cursor:pointer;
  transition:transform .15s ease, background .15s ease;
}

.eggSettingsBtn:hover{
  transform:rotate(18deg) scale(1.05);
  background:rgba(255,255,255,.16);
}

.eggPetChanceRow{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
}

.eggPetChanceRow.autoDeleteOn{
  opacity:.45;
  text-decoration:line-through;
}

.eggCard.locked,
.petCard.locked{
  opacity:0.45;
  cursor:not-allowed;
}

.eggCard.notAffordable{
  opacity:.68;
  filter:grayscale(.22);
}

.eggCard.eggLocked::before{
  content:"\1F512";
  position:absolute;
  inset:0;
  z-index:3;
  display:grid;
  place-items:center;
  border-radius:inherit;
  color:rgba(255,255,255,.9);
  font-size:34px;
  background:linear-gradient(145deg, rgba(0,0,0,.48), rgba(20,22,34,.28));
  pointer-events:none;
  text-shadow:0 0 18px rgba(255,255,255,.35);
}

.eggTop,
.petTop{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}

.petCard .petTop{
  gap:12px;
  padding-top:8px;
}

.eggCircle,
.petCircle{
  width:42px;
  height:42px;
  border-radius:50%;
  position:relative;
  flex:0 0 auto;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,0.12),0 8px 16px rgba(0,0,0,0.22);
}

.petCircle,
.activePet,
.hatchPetVisual{
  overflow:visible;
}

.petCircle::before,
.petCircle::after,
.activePet::before,
.activePet::after,
.hatchPetVisual::before,
.hatchPetVisual::after{
  pointer-events:none;
}

.petAuraWeak{
  box-shadow:0 8px 16px rgba(0,0,0,.22), inset 0 0 0 2px rgba(255,255,255,.12), 0 0 10px rgba(255,255,255,.08);
}

.petAuraMid{
  box-shadow:0 0 20px rgba(84,220,255,.28),0 8px 16px rgba(0,0,0,.24), inset 0 0 0 2px rgba(255,255,255,.14);
}

.petAuraStrong{
  box-shadow:0 0 24px rgba(255,212,91,.34),0 0 38px rgba(255,111,219,.16),0 8px 18px rgba(0,0,0,.26), inset 0 0 0 2px rgba(255,255,255,.16);
}

.petAuraSecret{
  box-shadow:0 0 28px rgba(255,78,232,.5),0 0 48px rgba(95,245,255,.24),0 10px 20px rgba(0,0,0,.28), inset 0 0 0 2px rgba(255,255,255,.2);
}

.petAuraChrono{
  box-shadow:0 0 28px rgba(255,214,88,.54),0 0 52px rgba(101,236,255,.26),0 10px 20px rgba(0,0,0,.28), inset 0 0 0 2px rgba(255,255,255,.24);
}

.activePet.petAuraStrong,
.activePet.petAuraSecret,
.activePet.petAuraChrono,
.hatchPetVisual.petAuraStrong,
.hatchPetVisual.petAuraSecret,
.hatchPetVisual.petAuraChrono{
  filter:drop-shadow(0 0 9px rgba(255,245,160,.32));
}

.activePet.petAuraStrong .petTinyIcon,
.activePet.petAuraSecret .petTinyIcon,
.hatchPetVisual.petAuraStrong .petTinyIcon,
.hatchPetVisual.petAuraSecret .petTinyIcon{
  text-shadow:0 0 8px rgba(255,255,255,.72), 0 0 14px rgba(119,245,255,.45);
}

.petAuraNebula{
  animation:petNebulaBreathe 2.8s ease-in-out infinite;
}

.petAuraVoid{
  animation:petVoidDrift 3.4s ease-in-out infinite;
}

.petCircle.petStyleMiner,
.activePet.petStyleMiner,
.hatchPetVisual.petStyleMiner{
  background-image:linear-gradient(180deg, rgba(42,35,30,.96) 0 22%, transparent 23%), var(--pet-bg);
}

.petStyleMiner::before{
  box-shadow:12px 0 0 #111, 6px -13px 0 -1px #f5d66a;
}

.petStyleSinger::after{
  box-shadow:15px -7px 0 -1px rgba(45,45,55,.95),18px -10px 0 -3px rgba(255,255,255,.55);
}

.petStyleMechanic::after{
  box-shadow:15px -10px 0 -1px #b7c4d8,19px -14px 0 -4px #30384a;
}

.petStyleSailor::before{
  box-shadow:12px 0 0 #111, 6px -14px 0 -1px #f5f8ff, 6px -18px 0 -4px #4f8dff;
}

.petStyleExplorer::after{
  box-shadow:13px -10px 0 -2px #d2aa62,18px -12px 0 -4px #4e3424;
}

.petStyleNinja::before{
  box-shadow:12px 0 0 #111, 6px -2px 0 16px rgba(5,5,12,.36);
}

.petStyleRobot::after{
  border-radius:3px;
  background:#8ef5ff;
  box-shadow:13px -11px 0 -2px #cfd8ff,17px -15px 0 -5px #6e7aa8;
}

.petStyleKing::before{
  box-shadow:12px 0 0 #111, 0 -17px 0 -2px #ffd84f, 6px -20px 0 -2px #ffe980, 12px -17px 0 -2px #ffd84f;
}

.petStyleWind::after{
  box-shadow:14px -8px 0 -2px #fff06a,19px -14px 0 -5px #77f5ff;
  animation:windSpark 1.5s ease-in-out infinite;
}

.petStyleStar::after{
  box-shadow:13px -12px 0 -2px #fff6a8,20px -4px 0 -4px #ff9dff;
  animation:starTwinkle 1.8s ease-in-out infinite;
}

.petStyleNebula{
  background-image:
    radial-gradient(circle at 28% 24%, rgba(255,135,238,.95) 0 12%, transparent 13%),
    radial-gradient(circle at 70% 66%, rgba(96,245,255,.7) 0 10%, transparent 11%),
    var(--pet-bg);
}

.petStyleNebula::after{
  box-shadow:10px -12px 0 -3px #ff8df2,20px -5px 0 -5px #60f5ff,3px 3px 0 -5px #fff6a8;
  animation:cosmicSpark 2.4s ease-in-out infinite;
}

.petStyleDiamond::before{
  box-shadow:12px 0 0 #111, 6px -15px 0 -2px #bff8ff;
}

.petStyleCosmic::after,
.petStyleSecret::after{
  box-shadow:12px -11px 0 -2px #9c7bff,20px -3px 0 -4px #4ef5ff;
  animation:cosmicSpark 2.8s ease-in-out infinite;
}

.petStyleVoid,
.petStyleSingularity{
  box-shadow:0 0 24px rgba(114,88,255,.5),0 0 42px rgba(79,235,255,.2),0 10px 18px rgba(0,0,0,.26), inset 0 0 0 2px rgba(255,255,255,.18);
}

.petStyleVoid::after{
  box-shadow:12px -11px 0 -2px #8c62ff,20px -3px 0 -4px #64f7ff,4px 2px 0 -5px #ff79f2;
  animation:cosmicSpark 2.1s ease-in-out infinite;
}

.petStyleSingularity{
  animation:petGlow 2.2s ease-in-out infinite, voidAura 2.8s ease-in-out infinite;
}

.petStyleEcho{
  background-image:
    repeating-radial-gradient(circle at 50% 50%, rgba(119,245,255,.22) 0 3px, transparent 4px 9px),
    var(--pet-bg);
}

.petStyleEcho::after{
  box-shadow:12px -12px 0 -4px #9ff8ff,18px -7px 0 -6px #7b5cff;
  animation:petEchoPulse 1.9s ease-in-out infinite;
}

.petStyleOracle::before{
  background:radial-gradient(circle, #f5e9ff 0 34%, #8b6cff 36% 58%, transparent 60%);
  border-radius:50%;
  box-shadow:0 0 16px rgba(165,118,255,.55);
}

.petStyleBoss{
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.16), transparent 36%),
    var(--pet-bg);
}

.petStyleBoss::after{
  box-shadow:12px -14px 0 -4px #ff5959,20px -12px 0 -5px #ffd45f,4px -3px 0 -5px #8b6cff;
  animation:bossSkinPulse 2.1s ease-in-out infinite;
}

.petStyleChrono{
  background-image:
    repeating-conic-gradient(from 0deg, rgba(255,255,255,.26) 0 8deg, transparent 9deg 28deg),
    var(--pet-bg);
  animation:petGlow 2.4s ease-in-out infinite;
}

.petStyleChrono::before{
  box-shadow:12px 0 0 #111, 0 -17px 0 -2px #ffe584, 12px -17px 0 -3px #65ecff;
}

.petStyleChrono::after{
  box-shadow:12px -12px 0 -3px #ffe584,20px -5px 0 -5px #65ecff,4px 3px 0 -5px #8d6dff;
  animation:skinAuraSpin 5.5s linear infinite;
}

.petStyleCrystal{
  background-image:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,.65), transparent 18%),
    conic-gradient(from 0deg, rgba(255,255,255,.16), transparent, rgba(101,238,255,.22), transparent),
    var(--pet-bg);
  box-shadow:0 0 20px rgba(126,238,255,.45), inset 0 1px 0 rgba(255,255,255,.4);
}

.petStyleCrystal::before{
  content:"";
  position:absolute;
  left:50%;
  top:-14px;
  width:30px;
  height:34px;
  transform:translateX(-50%) rotate(-8deg);
  background:linear-gradient(145deg,#fff,#90f5ff,#806cff);
  clip-path:polygon(50% 0, 86% 28%, 70% 100%, 30% 100%, 14% 28%);
  filter:drop-shadow(0 0 12px rgba(139,242,255,.74));
}

.petStyleCrystal::after{
  content:"";
  position:absolute;
  inset:-11px;
  border-radius:50%;
  z-index:-1;
  background:
    conic-gradient(from 0deg, transparent, rgba(146,246,255,.62), transparent, rgba(133,101,255,.54), transparent),
    radial-gradient(circle at 24% 30%, rgba(255,255,255,.62) 0 2px, transparent 3px);
  animation:skinAuraSpin 5.4s linear infinite;
}

.petStyleCrystalOverlord{
  box-shadow:0 0 32px rgba(136,245,255,.65),0 0 54px rgba(135,103,255,.32), inset 0 1px 0 rgba(255,255,255,.48);
}

.petStyleCrystalOverlord::before{
  width:42px;
  height:46px;
  top:-20px;
}

.petAuraCrystal,
.petAuraCrystalStrong{
  animation:petGlow 2.4s ease-in-out infinite;
}

.petStyleMythic,
.petStyleLegendary,
.petStyleSecret{
  animation:petGlow 2.8s ease-in-out infinite, rareAura 3.2s ease-in-out infinite;
}

.activePet.petStyleMiner::before,
.hatchPetVisual.petStyleMiner::before,
.activePet.petStyleKing::before,
.hatchPetVisual.petStyleKing::before,
.activePet.petStyleDiamond::before,
.hatchPetVisual.petStyleDiamond::before,
.activePet.petStyleCosmic::before,
.hatchPetVisual.petStyleCosmic::before,
.activePet.petStyleStar::before,
.hatchPetVisual.petStyleStar::before,
.activePet.petStyleWind::before,
.hatchPetVisual.petStyleWind::before{
  content:"";
  position:absolute;
  left:50%;
  top:-8px;
  width:22px;
  height:14px;
  border-radius:10px 10px 4px 4px;
  transform:translateX(-50%);
  pointer-events:none;
  z-index:2;
}

.activePet.petStyleMiner::before,
.hatchPetVisual.petStyleMiner::before{
  background:linear-gradient(180deg,#ffd86a,#7b5d28);
  box-shadow:0 4px 0 #2b211a;
}

.activePet.petStyleKing::before,
.hatchPetVisual.petStyleKing::before{
  background:linear-gradient(135deg,#ffd84f,#fff3a8,#ffbd2f);
  clip-path:polygon(0 100%,0 35%,25% 70%,50% 20%,75% 70%,100% 35%,100% 100%);
  box-shadow:0 0 12px rgba(255,220,80,.5);
}

.activePet.petStyleDiamond::before,
.hatchPetVisual.petStyleDiamond::before{
  background:linear-gradient(135deg,#eaffff,#55dbff,#3477ff);
  clip-path:polygon(50% 0,100% 40%,70% 100%,30% 100%,0 40%);
  box-shadow:0 0 16px rgba(80,220,255,.55);
}

.activePet.petStyleCosmic::before,
.hatchPetVisual.petStyleCosmic::before{
  background:conic-gradient(from 0deg,#8b6cff,#64e8ff,#ff8dff,#8b6cff);
  border-radius:50%;
  animation:cosmicOrbit 2.8s linear infinite;
  box-shadow:0 0 18px rgba(130,100,255,.55);
}

.activePet.petStyleNebula::before,
.hatchPetVisual.petStyleNebula::before{
  content:"";
  position:absolute;
  left:50%;
  top:-11px;
  width:28px;
  height:18px;
  border-radius:50%;
  transform:translateX(-50%) rotate(-12deg);
  background:radial-gradient(circle at 35% 45%, #fff, #ff8df2 34%, transparent 36%), radial-gradient(circle at 72% 55%, #60f5ff 0 26%, transparent 28%);
  filter:blur(.2px);
  animation:petNebulaBreathe 2.8s ease-in-out infinite;
}

.activePet.petStyleVoid::before,
.hatchPetVisual.petStyleVoid::before{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:50%;
  background:conic-gradient(from 0deg, transparent, rgba(111,245,255,.32), transparent, rgba(145,82,255,.34), transparent);
  z-index:-1;
  animation:cosmicOrbit 4.6s linear infinite;
}

.activePet.petStyleVoid::after,
.hatchPetVisual.petStyleVoid::after,
.activePet.petStyleSecret::after,
.hatchPetVisual.petStyleSecret::after{
  content:"";
  position:absolute;
  inset:-13px;
  border-radius:50%;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.8) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 34%, rgba(111,245,255,.8) 0 2px, transparent 3px),
    radial-gradient(circle at 42% 86%, rgba(255,98,238,.72) 0 2px, transparent 3px);
  opacity:.82;
  z-index:-1;
  animation:petParticleOrbit 3.2s linear infinite;
}

.activePet.petStyleSingularity::after,
.hatchPetVisual.petStyleSingularity::after{
  background:
    conic-gradient(from 20deg, transparent 0 12%, rgba(126,246,255,.68) 13% 16%, transparent 17% 42%, rgba(255,97,236,.62) 43% 46%, transparent 47%),
    radial-gradient(circle, transparent 52%, rgba(117,82,255,.28) 54%, transparent 67%);
  animation:petVoidFullOrbit 4.8s linear infinite;
}

.activePet.petStyleSingularity::before,
.hatchPetVisual.petStyleSingularity::before{
  background:radial-gradient(circle, rgba(255,255,255,.62) 0 8%, rgba(120,84,255,.42) 20%, transparent 58%);
  filter:blur(1px);
}

@keyframes petNebulaBreathe{
  0%,100%{filter:saturate(1) brightness(1);}
  50%{filter:saturate(1.3) brightness(1.12);}
}

@keyframes petVoidDrift{
  0%,100%{filter:hue-rotate(0deg) brightness(1);}
  50%{filter:hue-rotate(18deg) brightness(1.12);}
}

@keyframes petEchoPulse{
  0%,100%{transform:scale(1); opacity:.82;}
  50%{transform:scale(1.08); opacity:1;}
}

@keyframes petParticleOrbit{
  from{transform:rotate(0deg) scale(1);}
  50%{opacity:1; filter:brightness(1.25);}
  to{transform:rotate(360deg) scale(1);}
}

@keyframes petVoidLightning{
  0%,72%,100%{opacity:.5; filter:brightness(1);}
  76%{opacity:1; filter:brightness(1.75);}
  82%{opacity:.68; filter:brightness(1.1);}
}

@keyframes petVoidFullOrbit{
  0%{transform:rotate(0deg); opacity:.78; filter:brightness(1);}
  50%{opacity:1; filter:brightness(1.28);}
  100%{transform:rotate(360deg); opacity:.78; filter:brightness(1);}
}

.activePet.petStyleMythic,
.activePet.petStyleLegendary,
.activePet.petStyleSecret,
.activePet.petStyleVoid,
.activePet.petStyleSingularity,
.activePet.petAuraNebula,
.activePet.petAuraVoid,
.activePet.shiny{
  animation:petFloat 1.8s ease-in-out infinite, petGlow 2.8s ease-in-out infinite, rareAura 3.2s ease-in-out infinite;
}

.activePet.petStyleSingularity,
.activePet.petAuraVoid{
  animation:petFloat 1.8s ease-in-out infinite, petGlow 2.2s ease-in-out infinite, voidAura 2.8s ease-in-out infinite;
}

.activePetWrap{
  animation:none !important;
}

.activePet{
  animation:none !important;
}

.slidePanel{
  display:flex;
  flex-direction:column;
  height:auto;
  max-height:min(760px, calc(100dvh - 118px));
}

.slidePanel .panelScroll{
  flex:1 1 auto;
  min-height:0;
  max-height:none;
  overflow:auto;
}

#petPanel .panelScroll,
#leaderboardContent{
  max-height:none;
}

.petInventoryCard .petCircle,
.activePetSlot .petCircle,
.petForgeCard .petCircle{
  animation:none !important;
}

.petInventoryCard .petCircle::before,
.petInventoryCard .petCircle::after,
.activePetSlot .petCircle::before,
.activePetSlot .petCircle::after,
.petForgeCard .petCircle::before,
.petForgeCard .petCircle::after{
  animation:none !important;
}

.petInventoryCard,
.petInventoryCard *,
.petInventoryCard::before,
.petInventoryCard::after,
.petEquippedRibbon,
.activePetSlot,
.activePetSlot *,
.activePetSlot::before,
.activePetSlot::after{
  animation:none !important;
  transition:none !important;
}

.activePet.petStyleStar::before,
.hatchPetVisual.petStyleStar::before{
  background:#fff5a8;
  clip-path:polygon(50% 0,62% 34%,98% 34%,68% 55%,80% 92%,50% 70%,20% 92%,32% 55%,2% 34%,38% 34%);
  animation:starTwinkle 1.6s ease-in-out infinite;
}

.activePet.petStyleWind::before,
.hatchPetVisual.petStyleWind::before{
  background:linear-gradient(135deg,#fff36c,#77f5ff);
  clip-path:polygon(45% 0,70% 0,57% 35%,88% 35%,33% 100%,45% 55%,14% 55%);
  animation:windSpark 1.4s ease-in-out infinite;
}

.skinPreview.skin-miner::before{box-shadow:12px 0 0 #111, 6px -13px 0 -1px #f5d66a;}
.skinPreview.skin-singer::after{box-shadow:15px -7px 0 -1px rgba(45,45,55,.95),18px -10px 0 -3px rgba(255,255,255,.55);}
.skinPreview.skin-royal::before{box-shadow:12px 0 0 #111, 0 -17px 0 -2px #ffd84f, 6px -20px 0 -2px #ffe980, 12px -17px 0 -2px #ffd84f;}
.skinPreview.skin-pirate::after{box-shadow:15px -8px 0 -1px #171724,20px -10px 0 -4px #fff;}
.skinPreview.skin-astro,
.skinPreview.skin-shadow,
.skinPreview.skin-gold{
  animation:petGlow 2.4s ease-in-out infinite, rareAura 3.4s ease-in-out infinite;
}
.skinPreview.skin-astro{box-shadow:0 0 18px rgba(90,220,255,.5),0 8px 16px rgba(0,0,0,.22);}
.skinPreview.skin-shadow{box-shadow:0 0 20px rgba(110,70,255,.52),0 8px 16px rgba(0,0,0,.22);}
.skinPreview.skin-gold{box-shadow:0 0 20px rgba(255,210,70,.58),0 8px 16px rgba(0,0,0,.22);}
.skinPreview.skin-boss-dark,
.skinPreview.skin-boss-gold,
.skinPreview.skin-boss-radio,
.skinPreview.skin-boss-ice,
.skinPreview.skin-boss-hell{
  box-shadow:0 0 28px rgba(255,255,255,.38),0 10px 18px rgba(0,0,0,.28);
  animation:bossSkinPulse 2.2s ease-in-out infinite, bossSkinAuraSpin 5.4s linear infinite;
}

.skinPreview.skin-boss-dark::before,
.skinPreview.skin-boss-gold::before,
.skinPreview.skin-boss-radio::before,
.skinPreview.skin-boss-ice::before,
.skinPreview.skin-boss-hell::before{
  content:"";
  position:absolute;
  inset:-12px;
  border-radius:50%;
  z-index:-1;
  filter:blur(2px);
  opacity:.72;
  animation:bossSkinHalo 2.4s ease-in-out infinite;
}
.skinPreview.skin-boss-dark{background:radial-gradient(circle at 35% 28%, #39245e 0%, #17101f 44%, #050407 100%) !important;}
.skinPreview.skin-boss-gold{background:conic-gradient(from 40deg, #ffef8c, #d58a19, #fff0a6, #a75c10, #ffef8c) !important;}
.skinPreview.skin-boss-radio{background:radial-gradient(circle at 35% 28%, #c8ff63 0%, #429b30 43%, #103d19 100%) !important;}
.skinPreview.skin-boss-ice{background:radial-gradient(circle at 35% 28%, #d8fcff 0%, #6ab6e8 44%, #274b80 100%) !important;}
.skinPreview.skin-boss-hell{background:radial-gradient(circle at 35% 28%, #ff7a3d 0%, #a3131c 45%, #280006 100%) !important;}
.skinPreview.skin-void-relic,
.skinPreview.skin-void-eclipse,
.skinPreview.skin-void-crown,
.skinPreview.skin-chrono{
  box-shadow:0 0 28px rgba(112,92,255,.5),0 0 46px rgba(86,236,255,.2),0 10px 18px rgba(0,0,0,.3);
  animation:bossSkinPulse 2.2s ease-in-out infinite, voidAura 3s ease-in-out infinite;
}
.skinPreview.skin-void-relic{background:radial-gradient(circle at 35% 28%, #8d7cff 0%, #342180 43%, #080713 100%) !important;}
.skinPreview.skin-void-eclipse{background:radial-gradient(circle at 38% 26%, #ff70f0 0%, #25082f 38%, #020106 100%) !important;}
.skinPreview.skin-void-crown{background:conic-gradient(from 30deg,#e9ffff,#61f6ff,#8a5cff,#ff72e8,#e9ffff) !important;}
.skinPreview.skin-chrono{background:conic-gradient(from 0deg,#fff7bf,#ffbd4a,#65ecff,#8d6dff,#fff7bf) !important;}
.skinPreview.skin-crystal-mole{background:conic-gradient(from 0deg,#eaffff,#65f3ff,#9567ff,#ffffff,#65f3ff,#eaffff) !important;box-shadow:0 0 24px rgba(126,238,255,.62),0 8px 16px rgba(0,0,0,.22) !important;}
.skinPreview.skin-boss-dark::before{background:radial-gradient(circle, rgba(121,73,255,.46), rgba(42,11,74,.16) 58%, transparent 74%);}
.skinPreview.skin-boss-gold::before{background:conic-gradient(from 0deg, transparent, rgba(255,235,112,.72), transparent, rgba(255,255,255,.36), transparent);}
.skinPreview.skin-boss-radio::before{background:radial-gradient(circle, rgba(164,255,63,.58), rgba(30,255,112,.18) 58%, transparent 74%);}
.skinPreview.skin-boss-ice::before{background:radial-gradient(circle, rgba(178,246,255,.58), rgba(255,255,255,.2) 58%, transparent 74%);}
.skinPreview.skin-boss-hell::before{background:radial-gradient(circle, rgba(255,70,24,.58), rgba(255,174,50,.2) 58%, transparent 74%);}
.skinPreview.skin-chrono::before{content:"";position:absolute;inset:-12px;border-radius:50%;z-index:-1;background:conic-gradient(from 0deg, transparent, rgba(255,230,118,.65), transparent, rgba(101,236,255,.38), transparent);animation:skinAuraSpin 5.8s linear infinite;}
.skinPreview.skin-crystal-mole::before{content:"";position:absolute;inset:-13px;border-radius:50%;z-index:-1;background:conic-gradient(from 0deg, transparent, rgba(143,246,255,.72), transparent, rgba(137,103,255,.56), transparent);animation:skinAuraSpin 4.8s linear infinite;}

.rarityRare{--rarity-glow:rgba(95,188,255,.28);}
.rarityEpic{--rarity-glow:rgba(201,116,255,.34);}
.rarityMythic{--rarity-glow:rgba(81,230,255,.38);}
.rarityLegendary{--rarity-glow:rgba(255,216,86,.42);}
.raritySecret{--rarity-glow:rgba(255,75,231,.48);}

.petInventoryCard.rarityEpic,
.petInventoryCard.rarityMythic,
.petInventoryCard.rarityLegendary,
.petInventoryCard.raritySecret,
.activePetSlot.rarityEpic,
.activePetSlot.rarityMythic,
.activePetSlot.rarityLegendary,
.activePetSlot.raritySecret{
  box-shadow:0 0 24px var(--rarity-glow, rgba(255,255,255,.14)),0 12px 22px rgba(0,0,0,0.2);
}

@keyframes bossSkinAuraSpin{
  to{filter:hue-rotate(16deg);}
}

@keyframes bossSkinHalo{
  0%,100%{transform:scale(.94);opacity:.52;}
  50%{transform:scale(1.08);opacity:.9;}
}

.eggCircle::before,
.petCircle::before{
  content:"";
  position:absolute;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#111;
  top:15px;
  left:12px;
  box-shadow:12px 0 0 #111;
}

.eggCircle::after,
.petCircle::after{
  content:"";
  position:absolute;
  width:8px;
  height:6px;
  border-radius:8px 8px 16px 16px;
  background:#ff9aa2;
  top:24px;
  left:17px;
}

.eggMeta,
.petMeta{
  flex:1;
  min-width:0;
}

.eggMeta b,
.petMeta b{
  display:block;
  font-size:13px;
  margin-bottom:4px;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.eggMeta small,
.petMeta small{
  display:block;
  opacity:0.72;
  line-height:1.35;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.petBadge{
  margin-top:8px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-radius:999px;
  font-size:11px;
  background:rgba(255,255,255,0.08);
}

.petStack{
  position:absolute;
  top:10px;
  right:10px;
  font-size:11px;
  font-weight:bold;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(0,0,0,0.35);
  border:1px solid rgba(255,255,255,0.1);
  z-index:2;
  box-shadow:0 4px 10px rgba(0,0,0,0.2);
}

.inventoryDeleteBtn{
  position:absolute;
  right:10px;
  bottom:10px;
  z-index:5;
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,125,125,.42);
  border-radius:10px;
  color:#fff;
  background:linear-gradient(135deg, rgba(255,77,77,.92), rgba(117,18,28,.9));
  box-shadow:0 8px 18px rgba(125,16,28,.28), inset 0 1px 0 rgba(255,255,255,.2);
  font-size:18px;
  line-height:1;
  font-weight:1000;
  cursor:pointer;
}

.inventoryDeleteBtn:hover{
  filter:brightness(1.12);
  transform:translateY(-1px);
}

.petInventoryCard .petBadge,
.skinInventoryCard .petBadge{
  padding-right:34px;
}

.petSelected{
  outline:2px solid rgba(120,220,255,0.8);
  box-shadow:0 0 0 2px rgba(120,220,255,0.2),0 0 26px rgba(90,210,255,0.18),0 8px 16px rgba(0,0,0,0.22);
}

.petInventoryCard.petSelected{
  background:
    radial-gradient(circle at 18% 12%, rgba(120,220,255,0.2), transparent 42%),
    linear-gradient(145deg,rgba(90,170,255,0.16),rgba(255,255,255,0.055));
}

.petEquippedRibbon{
  position:absolute;
  right:10px;
  bottom:10px;
  z-index:3;
  padding:4px 8px;
  border-radius:999px;
  color:#06121b;
  background:linear-gradient(135deg,#8cf3ff,#ffe86b);
  box-shadow:0 0 16px rgba(130,240,255,0.24);
  font-size:10px;
  font-weight:1000;
  letter-spacing:.06em;
}

.petVariantBadge{
  position:absolute;
  left:10px;
  top:10px;
  z-index:2;
  padding:3px 7px;
  border-radius:999px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.4px;
  color:#241706;
  background:linear-gradient(135deg,#fff4a6,#ffbd3d);
  border:1px solid rgba(255,255,255,.34);
  box-shadow:0 5px 12px rgba(0,0,0,.22);
}

.petVariantBadge.diamond{
  color:#052432;
  background:linear-gradient(135deg,#c8fbff,#51d8ff);
}

.petVariantBadge.shiny{
  color:#180926;
  background:linear-gradient(135deg,#fff,#ff8dff,#84f7ff);
}

.petForgeCard{
  overflow:hidden;
}

.petForgeCard::after{
  content:"";
  position:absolute;
  inset:-40% auto -40% -65%;
  width:52%;
  transform:rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  animation:forgeSweep 3s ease-in-out infinite;
}

.petForgeCard.ready{
  border-color:rgba(255,215,86,.45);
  box-shadow:0 0 0 1px rgba(255,215,86,.12),0 12px 24px rgba(0,0,0,.26);
}

.petForgeCard.diamondReady{
  border-color:rgba(100,220,255,.46);
  box-shadow:0 0 0 1px rgba(100,220,255,.14),0 12px 24px rgba(0,0,0,.26);
}

.petForgeCard.converting{
  animation:petForgePop .62s ease;
}

.petEmpty{
  text-align:center;
  padding:18px 14px;
  opacity:0.75;
  display:grid;
  gap:7px;
  min-height:auto;
  line-height:1.35;
  align-content:center;
  justify-items:center;
}

.petEmpty b,
.petEmpty small{
  display:block;
  max-width:100%;
}

.petEmpty b{
  font-size:15px;
}

.petEmpty small{
  font-size:12px;
  color:rgba(255,255,255,.72);
  white-space:normal;
}

#activePetStage{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:3;
}

.activePet{
  position:absolute;
  width:54px;
  height:54px;
  border-radius:50%;
  box-shadow:0 10px 18px rgba(0,0,0,0.22), inset 0 0 0 2px rgba(255,255,255,0.12);
  animation:petFloat 1.8s ease-in-out infinite, petGlow 2.8s ease-in-out infinite;
}

.activePet.gold,
.petCircle.gold,
.hatchPetVisual.gold{
  box-shadow:0 0 18px rgba(255,210,70,.42),0 10px 18px rgba(0,0,0,0.24), inset 0 0 0 2px rgba(255,255,255,0.18);
}

.activePet.diamond,
.petCircle.diamond,
.hatchPetVisual.diamond{
  box-shadow:0 0 20px rgba(90,220,255,.5),0 10px 18px rgba(0,0,0,0.24), inset 0 0 0 2px rgba(255,255,255,0.2);
}

.activePet.shiny,
.petCircle.shiny,
.hatchPetVisual.shiny{
  animation:petFloat 1.8s ease-in-out infinite, petGlow 2.8s ease-in-out infinite, shinyPetAura 2.2s linear infinite;
}

.activePet .petTinyFace,
.hatchPetVisual .petTinyFace{
  position:absolute;
  inset:0;
  border-radius:50%;
}

.activePet .petTinyFace::before,
.activePet .petTinyFace::after,
.hatchPetVisual .petTinyFace::before,
.hatchPetVisual .petTinyFace::after{
  content:"";
  position:absolute;
  background:#111;
  border-radius:50%;
  width:7px;
  height:7px;
  top:20px;
}

.activePet .petTinyFace::before{left:15px;}
.activePet .petTinyFace::after{right:15px;}

.hatchPetVisual .petTinyFace::before{left:28px;}
.hatchPetVisual .petTinyFace::after{right:28px;}

.activePet .petTinyMouth,
.hatchPetVisual .petTinyMouth{
  position:absolute;
  width:8px;
  height:6px;
  border-radius:8px 8px 16px 16px;
  background:#ff9aa2;
  left:23px;
  top:28px;
}

.hatchPetVisual .petTinyMouth{
  width:16px;
  height:12px;
  left:40px;
  top:56px;
}

.activePet .petTinyIcon,
.hatchPetVisual .petTinyIcon{
  position:absolute;
  right:-6px;
  top:-8px;
  width:22px;
  height:22px;
  border-radius:50%;
  background:rgba(0,0,0,0.22);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  border:1px solid rgba(255,255,255,0.12);
}

.activePet.secret{
  box-shadow:0 0 18px rgba(255,255,255,0.26), 0 0 30px rgba(140,80,255,0.7), inset 0 0 0 2px rgba(255,255,255,0.16);
}

.activePet.legendary{
  animation:petFloat 1.8s ease-in-out infinite, petGlow 2.8s ease-in-out infinite, petPulse 2.4s ease-in-out infinite;
}

@keyframes petFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-4px);}
}

@keyframes petGlow{
  0%,100%{filter:saturate(1);}
  50%{filter:saturate(1.2);}
}

@keyframes petPulse{
  0%,100%{box-shadow:0 10px 18px rgba(0,0,0,0.22), inset 0 0 0 2px rgba(255,255,255,0.12);}
  50%{box-shadow:0 0 20px rgba(255,255,255,0.26), 0 0 28px rgba(130,210,255,0.34), inset 0 0 0 2px rgba(255,255,255,0.16);}
}

@keyframes shinyPetAura{
  0%{filter:hue-rotate(0deg) saturate(1.05);}
  50%{filter:hue-rotate(70deg) saturate(1.35);}
  100%{filter:hue-rotate(0deg) saturate(1.05);}
}

@keyframes forgeSweep{
  0%,45%{left:-65%;opacity:0;}
  60%{opacity:1;}
  100%{left:120%;opacity:0;}
}

@keyframes petForgePop{
  0%{transform:scale(1);}
  35%{transform:scale(.96) rotate(-1deg);}
  70%{transform:scale(1.04) rotate(1deg);}
  100%{transform:scale(1);}
}

@keyframes forgeBurst{
  0%{opacity:0;transform:translateX(-50%) scale(.35);}
  35%{opacity:1;transform:translateX(-50%) scale(1);}
  100%{opacity:0;transform:translateX(-50%) scale(1.6);}
}

@keyframes starTwinkle{
  0%,100%{filter:brightness(1);transform:translateX(-50%) scale(1) rotate(0deg);}
  50%{filter:brightness(1.5);transform:translateX(-50%) scale(1.16) rotate(10deg);}
}

@keyframes windSpark{
  0%,100%{filter:brightness(1);transform:translateX(-50%) translateY(0);}
  50%{filter:brightness(1.35);transform:translateX(-50%) translateY(-3px);}
}

@keyframes cosmicOrbit{
  to{transform:translateX(-50%) rotate(360deg);}
}

@keyframes cosmicSpark{
  0%,100%{filter:hue-rotate(0deg) brightness(1);}
  50%{filter:hue-rotate(80deg) brightness(1.35);}
}

@keyframes goldShine{
  0%,100%{box-shadow:0 0 0 rgba(255,215,64,0);}
  50%{box-shadow:0 0 24px rgba(255,215,64,0.55);}
}

@keyframes shadowAura{
  0%,100%{filter:brightness(1);}
  50%{filter:brightness(0.78);}
}

@keyframes astroShimmer{
  0%,100%{box-shadow:0 0 10px rgba(92,214,255,0.2);}
  50%{box-shadow:0 0 30px rgba(92,214,255,0.55);}
}

@keyframes worldDrift{
  from{background-position:0 0;}
  to{background-position:220px 170px;}
}

@keyframes skinAuraSpin{
  to{transform:rotate(360deg);}
}

@keyframes rareAura{
  0%,100%{filter:saturate(1) brightness(1);}
  50%{filter:saturate(1.35) brightness(1.08);}
}

@keyframes voidAura{
  0%,100%{box-shadow:0 0 20px rgba(50,40,120,0.2);}
  50%{box-shadow:0 0 38px rgba(108,82,255,0.42);}
}

@keyframes royalAura{
  0%,100%{filter:saturate(1) brightness(1);}
  50%{filter:saturate(1.22) brightness(1.12);}
}

@keyframes goldHalo{
  0%,100%{transform:scale(.96); opacity:.7;}
  50%{transform:scale(1.08); opacity:1;}
}

@keyframes autoPanelSweep{
  0%,55%{transform:translateX(-120%);}
  78%,100%{transform:translateX(120%);}
}

/* CLICK ANIMATION */
#kret.clickAnim{
  animation:clickBounce 0.25s ease;
}
@keyframes clickBounce{
  0%{transform:scale(1);}
  50%{transform:scale(0.85);}
  100%{transform:scale(1);}
}
#kret.glow{
  box-shadow:0 0 40px rgba(255,255,255,0.4),
             0 10px 40px rgba(0,0,0,0.7);
}
#kret.critFlash{
  box-shadow:0 0 60px rgba(255,200,0,0.9),
             0 10px 40px rgba(0,0,0,0.7);
}

/* FRENZY EFFECT */
#kret.frenzy{
  box-shadow:0 0 80px rgba(0,255,255,0.9),
             0 0 120px rgba(0,255,255,0.6),
             0 10px 40px rgba(0,0,0,0.7);
}

/* POPUP */
.popup{
  position:absolute;
  left:50%;
  top:80px;
  transform:translateX(-50%);
  font-weight:bold;
  pointer-events:none;
  animation:pop 0.8s ease-out forwards;
  text-shadow:0 0 10px rgba(255,255,255,0.5);
}
.popup.crit{
  color:#ffcc00;
  font-size:22px;
  text-shadow:0 0 15px rgba(255,200,0,0.9);
}
.popup.frenzy{
  color:#00ffff;
  font-size:20px;
}
.popup.alert{
  color:#ff7b61;
  font-size:20px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,90,65,0.16);
  border:1px solid rgba(255,90,65,0.28);
  text-shadow:0 0 16px rgba(255,90,65,0.9);
  animation:popAlert 2.9s ease-out forwards;
}
@keyframes pop{
  0%{opacity:1; transform:translate(-50%,0) scale(1);}
  100%{opacity:0; transform:translate(-50%,-60px) scale(1.5);}
}
@keyframes popAlert{
  0%{opacity:0; transform:translate(-50%,4px) scale(.96);}
  10%,72%{opacity:1; transform:translate(-50%,-8px) scale(1);}
  100%{opacity:0; transform:translate(-50%,-38px) scale(1.08);}
}

#hatchOverlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:
    radial-gradient(circle at 50% 38%, rgba(123,97,255,0.25), transparent 34%),
    radial-gradient(circle at 22% 18%, rgba(95,218,255,0.18), transparent 28%),
    radial-gradient(circle at 82% 78%, rgba(255,179,76,0.16), transparent 30%),
    rgba(3,4,10,0.78);
  backdrop-filter:blur(11px) saturate(1.2);
  z-index:220;
  overflow-y:auto;
  overflow-x:hidden;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .24s ease, visibility .24s ease;
}

#hatchOverlay.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

#hatchOverlay.voidOpening{
  background:
    radial-gradient(circle at 50% 38%, rgba(104,79,255,0.38), transparent 35%),
    radial-gradient(circle at 22% 18%, rgba(90,245,255,0.24), transparent 28%),
    radial-gradient(circle at 82% 78%, rgba(255,93,232,0.18), transparent 30%),
    rgba(2,2,9,0.84);
}

#hatchOverlay.rareDrop #hatchCard{
  box-shadow:0 28px 96px rgba(0,0,0,0.52),0 0 64px rgba(126,104,255,0.26),0 0 36px rgba(94,236,255,0.16);
}

#hatchCard{
  position:relative;
  width:min(680px, calc(100vw - 36px));
  min-height:min(470px, calc(100vh - 36px));
  max-height:calc(100vh - 36px);
  overflow-y:auto;
  overflow-x:hidden;
  padding:24px 22px;
  border-radius:32px;
  background:
    radial-gradient(circle at 18% 8%, rgba(255,255,255,0.18), transparent 28%),
    linear-gradient(180deg,rgba(27,31,54,0.96),rgba(8,10,21,0.96));
  border:1px solid rgba(255,255,255,0.18);
  box-shadow:0 28px 96px rgba(0,0,0,0.52),0 0 54px rgba(105,121,255,0.14);
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  transform:translateY(14px) scale(.985);
  opacity:.92;
  transition:transform .26s cubic-bezier(.2,.85,.25,1), opacity .2s ease;
}

#hatchOverlay.open #hatchCard{
  transform:translateY(0) scale(1);
  opacity:1;
}

#hatchCard::before{
  content:"";
  position:absolute;
  inset:-45% -20% auto;
  height:280px;
  background:conic-gradient(from 0deg, transparent, rgba(255,255,255,0.16), transparent, rgba(123,97,255,0.18), transparent);
  opacity:.72;
  animation:hatchBackdropSpin 8s linear infinite;
  pointer-events:none;
}

#hatchCard > *{
  position:relative;
  z-index:1;
}

#hatchPhaseLabel{
  padding:8px 13px;
  border-radius:999px;
  background:rgba(255,255,255,0.09);
  border:1px solid rgba(255,255,255,0.12);
  font-size:13px;
  font-weight:1000;
  letter-spacing:1.7px;
  text-transform:uppercase;
  opacity:0.92;
  box-shadow:0 10px 22px rgba(0,0,0,0.16);
}

#hatchEggsRow{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(72px, 1fr));
  gap:18px;
  width:100%;
  max-width:520px;
  align-items:end;
}

.hatchEggVisual{
  width:72px;
  height:92px;
  border-radius:50% 50% 46% 46%;
  position:relative;
  box-shadow:0 20px 44px rgba(0,0,0,0.4),0 0 28px rgba(255,255,255,0.08), inset 0 0 0 3px rgba(255,255,255,0.16);
  transform-origin:center bottom;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto;
  overflow:hidden;
}

.hatchEggVisual::before{
  content:"";
  position:absolute;
  inset:10px 14px auto;
  height:18px;
  border-radius:50%;
  background:linear-gradient(90deg,rgba(255,255,255,0.4),rgba(255,255,255,0.06));
  filter:blur(2px);
}

.hatchEggVisual::after{
  content:"";
  position:absolute;
  inset:-20% auto -20% -60%;
  width:42%;
  transform:rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  animation:hatchShine 2.4s ease-in-out infinite;
}

.hatchCrateVisual{
  width:82px;
  height:76px;
  border-radius:18px;
  position:relative;
  margin:auto;
  background:linear-gradient(135deg,#b77a39,#6a3b1d);
  box-shadow:0 18px 36px rgba(0,0,0,.35), inset -10px -14px 0 rgba(0,0,0,.16);
  transform-origin:50% 80%;
}

.hatchCrateVisual::before{
  content:"";
  position:absolute;
  left:7px;
  right:7px;
  top:10px;
  height:16px;
  border-radius:9px;
  background:linear-gradient(135deg,rgba(255,255,255,.24),rgba(0,0,0,.1));
  box-shadow:0 22px 0 rgba(255,255,255,.16), inset 0 0 0 2px rgba(255,255,255,.1);
}

.hatchCrateVisual::after{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:14px;
  height:100%;
  transform:translateX(-50%);
  border-radius:10px;
  background:linear-gradient(180deg,#ffe082,#c88725);
  box-shadow:0 0 14px rgba(255,215,105,.22);
}

.hatchEggVisual.shaking{
  animation:hatchShake 0.4s ease-in-out infinite;
}

.hatchEggVisual.opening{
  animation:hatchOpen 0.8s ease forwards;
}

.hatchCrateVisual.shaking{
  animation:crateShake 0.36s ease-in-out infinite;
}

.hatchCrateVisual.opening{
  animation:crateOpen 0.82s ease forwards;
}

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

@keyframes hatchOpen{
  0%{transform:scale(1) rotate(0deg); opacity:1;}
  50%{transform:scale(1.08) rotate(0deg); opacity:1;}
  100%{transform:scale(0.76) rotate(8deg); opacity:0;}
}

@keyframes crateShake{
  0%,100%{transform:translateY(0) rotate(0);}
  25%{transform:translateY(-4px) rotate(-4deg);}
  50%{transform:translateY(0) rotate(0);}
  75%{transform:translateY(-4px) rotate(4deg);}
}

@keyframes crateOpen{
  0%{transform:scale(1) rotate(0deg); opacity:1; filter:brightness(1);}
  45%{transform:scale(1.08) rotate(-2deg); opacity:1; filter:brightness(1.3);}
  100%{transform:scale(.72) translateY(-18px) rotate(10deg); opacity:0; filter:brightness(1.8);}
}

#hatchResult{
  display:none;
  flex-direction:column;
  align-items:center;
  gap:12px;
  width:100%;
}

#hatchResult.show{
  display:flex;
  animation:uiCardIn .22s ease both;
}

#hatchPetsGrid{
  width:100%;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:16px;
}

#stopAutoEggBtn{
  display:none;
  width:100%;
  max-width:260px;
  margin-top:2px;
  background:linear-gradient(135deg,#ff5a5a,#c91c1c);
  box-shadow:0 14px 28px rgba(160,0,0,0.26);
}

#hatchOverlay.autoMode #stopAutoEggBtn{
  display:block;
}

.hatchPetCard{
  position:relative;
  padding:16px 12px 14px;
  border-radius:24px;
  background:
    radial-gradient(circle at 50% 8%, var(--rarity-glow, rgba(255,255,255,0.12)), transparent 44%),
    linear-gradient(160deg,rgba(255,255,255,0.12),rgba(255,255,255,0.045));
  border:1px solid rgba(255,255,255,0.13);
  box-shadow:0 16px 34px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.12);
  overflow:hidden;
  animation:hatchCardPop .42s cubic-bezier(.18,.9,.22,1.18) both;
}

.hatchPetCard::before{
  content:"";
  position:absolute;
  inset:-35% auto -35% -65%;
  width:54%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.22),transparent);
  transform:rotate(18deg);
  animation:hatchCardSweep 3.6s ease-in-out infinite;
}

.hatchPetCard.rarityEpic,
.hatchPetCard.rarityMythic,
.hatchPetCard.rarityLegendary,
.hatchPetCard.raritySecret{
  border-color:rgba(255,255,255,0.26);
  box-shadow:0 0 32px var(--rarity-glow, rgba(255,255,255,.2)),0 18px 38px rgba(0,0,0,0.34);
}

.hatchPetCard.secretDrop{
  animation:hatchCardPop .42s cubic-bezier(.18,.9,.22,1.18) both, secretDropPulse 1.8s ease-in-out infinite;
}

.hatchPetCard.autoDeletedDrop{
  filter:grayscale(.5) brightness(.74);
}

.hatchTrashOverlay{
  position:absolute;
  inset:10px;
  z-index:5;
  display:grid;
  place-items:center;
  border-radius:22px;
  background:rgba(20,8,10,.58);
  color:#fff;
  font-size:52px;
  text-shadow:0 0 18px rgba(255,80,80,.9);
  pointer-events:none;
}

#eggAutoDeleteOverlay{
  position:fixed;
  inset:0;
  z-index:9900;
  display:grid;
  place-items:center;
  padding:18px;
  background:rgba(3,5,12,.56);
  backdrop-filter:blur(8px);
}

#eggAutoDeleteCard{
  width:min(420px, calc(100vw - 28px));
  max-height:min(640px, calc(100vh - 32px));
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:12px;
  padding:16px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(145deg, rgba(22,26,48,.96), rgba(8,10,22,.96));
  color:#fff;
  box-shadow:0 24px 80px rgba(0,0,0,.48);
}

.autoDeleteTop{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
}

.autoDeleteTop b,
.autoDeleteTop span{
  display:block;
}

#eggAutoDeleteClose{
  width:36px;
  height:36px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
  color:#fff;
  background:rgba(255,255,255,.08);
  font-size:20px;
  cursor:pointer;
}

.autoDeleteList{
  display:grid;
  gap:9px;
  overflow:auto;
}

.autoDeleteOption{
  display:grid;
  grid-template-columns:46px 1fr auto;
  gap:10px;
  align-items:center;
  width:100%;
  border:1px solid rgba(255,255,255,.1);
  border-radius:17px;
  padding:10px;
  color:#fff;
  text-align:left;
  background:rgba(255,255,255,.06);
  cursor:pointer;
}

.autoDeleteOption.active{
  border-color:rgba(255,92,92,.52);
  background:linear-gradient(135deg, rgba(255,71,71,.18), rgba(255,255,255,.055));
}

.autoDeleteOption b,
.autoDeleteOption small{
  display:block;
}

.autoDeleteOption small,
.autoDeleteHint{
  opacity:.75;
}

.autoDeleteOption em{
  font-style:normal;
  font-size:10px;
  font-weight:1000;
  color:#a8ffda;
}

.autoDeleteOption.active em{
  color:#ff8d8d;
}

.autoDeleteHint{
  padding:10px 12px;
  border-radius:15px;
  background:rgba(255,255,255,.06);
  font-size:12px;
  font-weight:900;
  line-height:1.35;
}

.hatchPetVisual{
  width:104px;
  height:104px;
  border-radius:50%;
  position:relative;
  box-shadow:0 18px 44px rgba(0,0,0,0.34), inset 0 0 0 3px rgba(255,255,255,0.14);
  margin:0 auto 10px;
}

.hatchRarityBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  max-width:100%;
  margin:0 auto 8px;
  padding:5px 9px;
  border-radius:999px;
  color:#120d18;
  background:linear-gradient(135deg,#fff,#ffe27a);
  font-size:10px;
  font-weight:1000;
  letter-spacing:.07em;
  text-transform:uppercase;
  box-shadow:0 10px 20px rgba(0,0,0,0.18);
}

.hatchPetCard.gold .hatchRarityBadge{background:linear-gradient(135deg,#fff4a8,#ffbd3d);}
.hatchPetCard.diamond .hatchRarityBadge{background:linear-gradient(135deg,#d8fbff,#54d8ff);}
.hatchPetCard.shiny .hatchRarityBadge{background:linear-gradient(135deg,#fff,#ff8dff,#83f7ff);}
.hatchPetCard.rarityEpic .hatchRarityBadge{background:linear-gradient(135deg,#f0c8ff,#b66cff);}
.hatchPetCard.rarityMythic .hatchRarityBadge{background:linear-gradient(135deg,#d8fbff,#4ee8ff);}
.hatchPetCard.rarityLegendary .hatchRarityBadge{background:linear-gradient(135deg,#fff4a8,#ffce45,#ff8d45);}
.hatchPetCard.raritySecret .hatchRarityBadge{background:linear-gradient(135deg,#fff,#ff75ec,#6ef5ff);}

.hatchPetName{
  font-size:16px;
  font-weight:1000;
  margin-bottom:4px;
  overflow-wrap:anywhere;
  text-shadow:0 0 14px rgba(255,255,255,0.16);
}

.hatchPetStats{
  font-size:12px;
  opacity:0.88;
  line-height:1.45;
}

@keyframes hatchBackdropSpin{
  to{transform:rotate(360deg);}
}

@keyframes hatchShine{
  0%,45%{transform:translateX(0) rotate(18deg);opacity:0;}
  60%{opacity:1;}
  100%{transform:translateX(420%) rotate(18deg);opacity:0;}
}

@keyframes hatchCardPop{
  from{opacity:0;transform:translateY(18px) scale(.94);}
  to{opacity:1;transform:translateY(0) scale(1);}
}

@keyframes hatchCardSweep{
  0%,45%{transform:translateX(0) rotate(18deg);opacity:0;}
  60%{opacity:.9;}
  100%{transform:translateX(420%) rotate(18deg);opacity:0;}
}

@keyframes secretDropPulse{
  0%,100%{filter:saturate(1);transform:scale(1);}
  50%{filter:saturate(1.25) brightness(1.08);transform:scale(1.015);}
}

.screenBurst{
  position:fixed;
  inset:0;
  z-index:5200;
  pointer-events:none;
  display:grid;
  place-items:center;
  background:radial-gradient(circle, rgba(255,255,255,0.16), transparent 38%);
  animation:screenBurstFade 1.35s ease forwards;
}

.screenBurst::before{
  content:"";
  position:absolute;
  inset:18%;
  border-radius:50%;
  background:conic-gradient(from 0deg, transparent, rgba(255,255,255,.34), transparent, rgba(115,238,255,.25), transparent);
  filter:blur(1px);
  animation:screenBurstSpin 1.25s ease-out forwards;
}

.screenBurst b{
  position:relative;
  padding:14px 22px;
  border-radius:999px;
  color:#fff;
  background:rgba(7,8,16,.62);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 0 34px rgba(255,255,255,.18);
  font-size:24px;
  font-weight:1000;
  letter-spacing:.08em;
  text-shadow:0 0 18px rgba(255,255,255,.42);
}

.screenBurst.void{
  background:radial-gradient(circle, rgba(117,88,255,0.24), transparent 42%), radial-gradient(circle at 60% 45%, rgba(82,245,255,0.14), transparent 34%);
}

.screenBurst.ultra{
  background:radial-gradient(circle, rgba(255,214,90,0.22), transparent 40%), radial-gradient(circle at 56% 48%, rgba(117,88,255,0.2), transparent 38%);
}

.screenBurst.rare{
  background:radial-gradient(circle, rgba(255,220,100,0.2), transparent 38%), radial-gradient(circle at 56% 48%, rgba(255,95,232,0.14), transparent 36%);
}

@keyframes screenBurstFade{
  0%{opacity:0;transform:scale(.98);}
  18%{opacity:1;}
  100%{opacity:0;transform:scale(1.03);}
}

@keyframes screenBurstSpin{
  from{transform:rotate(0deg) scale(.82);}
  to{transform:rotate(170deg) scale(1.18);}
}

#eggChoiceOverlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(3,4,10,0.46);
  backdrop-filter:blur(5px);
  z-index:210;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s ease, visibility .2s ease;
}

#eggChoiceOverlay.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

#eggChoiceCard{
  width:min(360px, calc(100vw - 32px));
  border-radius:22px;
  padding:22px 20px;
  background:linear-gradient(180deg,rgba(20,22,35,0.98),rgba(10,12,18,0.96));
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 24px 70px rgba(0,0,0,0.38);
  text-align:center;
  transform:translateY(10px) scale(.985);
  opacity:.92;
  transition:transform .22s cubic-bezier(.2,.85,.25,1), opacity .18s ease;
}

#eggChoiceOverlay.open #eggChoiceCard{
  transform:translateY(0) scale(1);
  opacity:1;
}

#eggChoiceTitle{
  font-size:22px;
  font-weight:bold;
}

#eggChoiceInfo{
  margin-top:8px;
  opacity:0.82;
  line-height:1.5;
}

#eggChoiceActions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:18px;
}

.eggChoiceBtn{
  border:none;
  border-radius:16px;
  padding:14px 12px;
  color:white;
  cursor:pointer;
  font-weight:bold;
  background:linear-gradient(135deg,#ff934d,#ff5a71);
  box-shadow:0 12px 24px rgba(0,0,0,0.22);
}

.eggChoiceBtn.secondary{
  background:linear-gradient(135deg,#55c8ff,#4d6bff);
}

.eggChoiceBtn.cancel{
  margin-top:10px;
  width:100%;
  background:rgba(255,255,255,0.08);
}

/* SHOP */
#shop{
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:12px;
  max-width:1180px;
  margin:20px auto;
}

.shopColumn{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  max-width:900px;
}

.shopColumn.endlessColumn{
  width:260px;
  flex-direction:column;
  flex-wrap:nowrap;
  align-items:stretch;
}

#shop.voidPreviewLayout .normalColumn{
  grid-column:2;
  justify-self:center;
  max-width:680px;
}

#shop.voidPreviewLayout .endlessColumn.voidPreview{
  position:relative;
  grid-column:3;
  top:auto;
  left:auto;
  justify-self:start;
  width:210px;
  opacity:.78;
  z-index:0;
  pointer-events:none;
  transform:translateX(18px);
}

#shop.voidPreviewLayout .normalColumn{
  position:relative;
  z-index:1;
}

#shop.voidPreviewLayout .endlessColumn.voidPreview .shopSectionHeader{
  padding:11px 12px;
}

#shop.voidPreviewLayout{
  display:grid;
  grid-template-columns:210px minmax(0, 680px) 210px;
  justify-content:center;
  align-items:start;
  column-gap:18px;
  width:min(1180px, calc(100vw - 24px));
}

.shopColumn.endlessColumn.voidUnlocked{
  width:min(540px, calc(100vw - 24px));
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  align-items:stretch;
}

.shopColumn.endlessColumn.voidUnlocked .shopSectionHeader,
.shopColumn.endlessColumn.voidUnlocked .ultraCoreCard{
  grid-column:1 / -1;
}

.shopColumn.endlessColumn.voidPreview .shopSectionHeader,
.shopColumn.endlessColumn.voidUnlocked .shopSectionHeader,
.shopColumn.endlessColumn.voidUnlocked .endlessCard{
  position:relative;
  overflow:hidden;
}

.shopColumn.endlessColumn.voidPreview .shopSectionHeader::after,
.shopColumn.endlessColumn.voidUnlocked .shopSectionHeader::after,
.shopColumn.endlessColumn.voidUnlocked .endlessCard::after{
  content:"";
  position:absolute;
  inset:-55%;
  background:conic-gradient(from 0deg, transparent, rgba(120,246,255,.16), transparent, rgba(150,92,255,.18), transparent);
  animation:voidPanelSpin 9s linear infinite;
  pointer-events:none;
}

.shopColumn.endlessColumn.voidUnlocked .endlessCard{
  border-color:rgba(132,92,255,.34);
  box-shadow:0 18px 42px rgba(0,0,0,.34), 0 0 26px rgba(100,70,255,.14), inset 0 1px 0 rgba(255,255,255,.12);
}

@keyframes voidPanelSpin{
  to{transform:rotate(360deg);}
}

.shopSectionHeader{
  width:100%;
  border-radius:18px;
  padding:14px 16px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.045)),
    var(--panel-bg, rgba(8,8,15,.78));
  border:1px solid var(--panel-border, rgba(255,255,255,.14));
  box-shadow:0 14px 34px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.14);
}

.shopSectionHeader b{
  display:block;
  font-size:18px;
  letter-spacing:1px;
}

.shopSectionHeader small{
  display:block;
  margin-top:4px;
  opacity:.76;
  line-height:1.35;
}

.card{
  width:220px;
  background:var(--panel-card-bg, rgba(255,255,255,0.05));
  backdrop-filter:blur(10px);
  border-radius:14px;
  padding:12px;
  cursor:pointer;
  transition:0.2s;
  border:1px solid var(--panel-border, rgba(255,255,255,0.1));
  position:relative;
  overflow:hidden;
}

.card.endlessCard{
  width:auto;
  min-width:0;
  padding:10px;
  background:
    linear-gradient(145deg,rgba(102,216,255,.12),rgba(255,255,255,.045)),
    var(--panel-card-bg, rgba(255,255,255,.05));
  border-color:rgba(116,220,255,.24);
}

.voidLiveLine{
  margin-top:7px;
  opacity:.86;
  font-size:11px;
  line-height:1.25;
  min-height:28px;
}

.voidCostLine{
  margin-top:8px;
  font-weight:1000;
  color:#bff8ff;
  text-shadow:0 0 12px rgba(98,232,255,.24);
}

.card.endlessCard::before{
  content:"";
  position:absolute;
  inset:-45% auto -45% -65%;
  width:52%;
  transform:rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);
  animation:forgeSweep 4s ease-in-out infinite;
  pointer-events:none;
}

.card.ultraCoreCard{
  border-color:rgba(255,200,90,.38);
  background:
    radial-gradient(circle at 80% 12%, rgba(255,216,92,.18), transparent 34%),
    linear-gradient(145deg,rgba(255,188,76,.14),rgba(255,255,255,.04)),
    var(--panel-card-bg, rgba(255,255,255,.05));
}

.card.ultraCoreCard:not(.disabled){
  box-shadow:0 0 24px rgba(255,196,70,.14),0 12px 24px rgba(0,0,0,.24);
}
.cardTitleRow{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
  margin-bottom:4px;
}
.cardTitleText{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.card:hover{
  transform:translateY(-4px);
  background:var(--panel-card-hover, rgba(255,255,255,0.1));
}
.card.disabled{
  opacity:0.4;
  cursor:not-allowed;
}
.card.lockedUpgrade{
  opacity:0.64;
  background:linear-gradient(180deg, rgba(12,14,22,0.74), rgba(5,6,10,0.72));
  border-color:rgba(255,255,255,0.08);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.26);
}
.card.lockedUpgrade::after{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,0.045) 0 8px, transparent 8px 18px);
  pointer-events:none;
}
.lockMark{
  position:absolute;
  right:14px;
  bottom:12px;
  font-size:34px;
  opacity:0.22;
  filter:grayscale(1);
  pointer-events:none;
  z-index:1;
}
.cardStatus{
  margin-top:8px;
  font-size:12px;
  opacity:.84;
}
.card.lockedUpgrade .cardStatus{
  opacity:1;
  color:#d9e2ff;
  font-weight:700;
}

/* BUTTON */
#rebirthBtn{
  width:min(420px, calc(100vw - 34px));
  display:grid;
  gap:9px;
  margin:4px auto 14px;
  padding:14px 16px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:22px;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.3), transparent 28%),
    linear-gradient(135deg, rgba(255,82,82,.92), rgba(255,158,45,.82) 48%, rgba(255,216,91,.76));
  cursor:pointer;
  color:white;
  box-shadow:0 18px 42px rgba(0,0,0,.26), 0 0 26px rgba(255,139,45,.22), inset 0 1px 0 rgba(255,255,255,.24);
  font-family:Trebuchet MS, Verdana, sans-serif;
  text-align:left;
  transition:transform .16s ease, filter .16s ease, box-shadow .16s ease;
  overflow:hidden;
  position:relative;
}

#rebirthBtn:hover{
  transform:translateY(-2px);
  filter:brightness(1.06);
}

#rebirthBtn:active{
  transform:translateY(0) scale(.985);
}

#rebirthBtn.ready{
  animation:rebirthReadyPulse 1.55s ease-in-out infinite;
}

.rebirthBtnTop,
.rebirthBtnBottom{
  position:relative;
  z-index:1;
}

.rebirthBtnTop{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.rebirthBtnTop b{
  font-size:21px;
  letter-spacing:.08em;
  text-shadow:0 2px 10px rgba(0,0,0,.28);
}

.rebirthBtnTop small{
  padding:5px 9px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
  font-size:12px;
  font-weight:1000;
}

.rebirthBtnProgress{
  position:relative;
  z-index:1;
  height:11px;
  border-radius:999px;
  background:rgba(37,15,10,.28);
  box-shadow:inset 0 1px 5px rgba(0,0,0,.34);
  overflow:hidden;
}

.rebirthBtnProgress i{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#fff4a8,#8dfff0,#ffffff);
  box-shadow:0 0 16px rgba(255,255,255,.5);
  transition:width .18s ease;
}

.rebirthBtnBottom{
  color:rgba(255,255,255,.88);
  font-size:13px;
  font-weight:900;
}

@keyframes rebirthReadyPulse{
  0%,100%{box-shadow:0 18px 42px rgba(0,0,0,.26), 0 0 26px rgba(255,139,45,.22), inset 0 1px 0 rgba(255,255,255,.24);}
  50%{box-shadow:0 18px 44px rgba(0,0,0,.3), 0 0 42px rgba(255,235,111,.5), inset 0 1px 0 rgba(255,255,255,.3);}
}

.utilityBtn{
  background:linear-gradient(135deg,#ff5a5a,#c91c1c);
  color:#fff;
  border:1px solid rgba(255,120,120,0.38);
  border-radius:12px;
  padding:11px 16px;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  backdrop-filter:blur(10px);
  box-shadow:0 12px 30px rgba(140,0,0,0.28);
}

.utilityBtn:hover{
  background:linear-gradient(135deg,#ff6d6d,#d61f1f);
}

/* ADMIN */
#adminToggle{
  position:fixed;
  display:none;
  bottom:10px;
  right:10px;
  background:linear-gradient(135deg,#ff4f6d,#ffbf37,#7b61ff);
  color:#12111a;
  padding:12px 16px;
  border-radius:16px;
  cursor:pointer;
  font-weight:1000;
  letter-spacing:.04em;
  box-shadow:0 0 22px rgba(255,79,109,0.48), 0 14px 34px rgba(0,0,0,.32);
  z-index:1000;
  animation:adminPulse 2.4s ease-in-out infinite;
}

#adminToggle.adminVisible{
  display:block;
}

#adminPanel{
  position:fixed;
  bottom:60px;
  right:10px;
  width:520px;
  max-width:calc(100vw - 24px);
  max-height:calc(100vh - 92px);
  overflow:auto;
  background:
    radial-gradient(circle at 18% 0%, rgba(255,216,77,.18), transparent 34%),
    radial-gradient(circle at 100% 18%, rgba(123,97,255,.2), transparent 38%),
    linear-gradient(180deg,rgba(12,14,24,0.98),rgba(8,9,15,0.95));
  border-radius:24px;
  padding:18px;
  display:none;
  z-index:1000;
  border:1px solid rgba(255,255,255,0.2);
  box-shadow:0 28px 80px rgba(0,0,0,0.48), inset 0 1px 0 rgba(255,255,255,.12);
  scrollbar-width:thin;
}

#adminPanel h3{
  margin:0 0 12px;
  font-size:24px;
  letter-spacing:.04em;
  position:relative;
  padding-right:42px;
}

#adminPanel .adminRow{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:8px;
  margin-bottom:10px;
}

#adminPanel input,
#adminPanel select{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,0.09);
  color:white;
  font-weight:900;
  outline:none;
}

#adminPanel select option,
#adminBoostCard select option,
#adminGiveFields select option{
  background:#101525;
  color:#ffffff;
}

#adminPanel button{
  width:100%;
  margin-top:5px;
  padding:10px;
  border:none;
  border-radius:10px;
  cursor:pointer;
  background:rgba(255,255,255,0.12);
  color:white;
  font-weight:bold;
}

#adminPanel button:hover{
  background:rgba(255,255,255,0.2);
}

#adminAbuse{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,0.14);
}

#adminAbuse h4{
  margin:0 0 10px;
  font-size:16px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#ffd66b;
}

.adminAbuseControls{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:8px;
  margin-bottom:8px;
}

#adminAbuse select{
  width:100%;
  padding:10px 12px;
  border:none;
  border-radius:10px;
  background:rgba(255,255,255,0.1);
  color:white;
  font-weight:800;
}

#adminEventMessage{
  margin-bottom:8px;
}

.adminAbuseGrid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:9px;
}

#adminPanel .adminAbuseGrid button{
  min-height:48px;
  margin-top:0;
  padding:10px 9px;
  border:1px solid rgba(255,255,255,0.12);
  background:linear-gradient(135deg,rgba(255,255,255,0.14),rgba(255,255,255,0.06));
  font-size:12px;
  font-weight:900;
}

#adminPanel .adminAbuseGrid button.mega{
  grid-column:span 2;
  background:linear-gradient(135deg,#ffd84d,#ff4f9a,#5ccfff);
  color:#111827;
  box-shadow:0 0 24px rgba(255,210,80,0.26);
}

#adminPanel .adminAbuseGrid button.danger{
  grid-column:span 2;
  background:linear-gradient(135deg,#ff5c5c,#9d1d31);
}

#adminAbuseMessage{
  min-height:18px;
  margin-top:10px;
  font-size:12px;
  font-weight:900;
  color:#9ff8ff;
}

#adminAbuseMessage.error{
  color:#ffb0b0;
}

.adminLeaderboardVisibilityBox{
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:10px 0 12px;
  padding:11px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.035));
}

.adminLeaderboardVisibilityBox b{
  display:block;
  font-size:12px;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.adminLeaderboardVisibilityBox small{
  display:block;
  margin-top:3px;
  color:rgba(255,255,255,.72);
  font-size:11px;
  line-height:1.25;
}

#adminLeaderboardVisibilityBtn{
  flex:0 0 auto;
  min-width:86px;
  border:0;
  border-radius:14px;
  padding:10px 11px;
  color:#111827;
  background:linear-gradient(135deg,#9ff8ff,#66d4ff);
  font-size:11px;
  font-weight:1000;
  cursor:pointer;
}

#adminLeaderboardVisibilityBtn.danger{
  color:#fff;
  background:linear-gradient(135deg,#ff5c5c,#9d1d31);
}

#adminBossControls{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,0.14);
}

#adminBossControls h4{
  margin:0 0 10px;
  font-size:16px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#ff8b6e;
}

.adminBossGrid{
  display:grid;
  grid-template-columns:1fr auto;
  gap:9px;
  align-items:end;
}

.adminBossWideBtn{
  grid-column:1 / -1;
}

.adminBossGrid label{
  display:grid;
  gap:5px;
  font-size:11px;
  font-weight:1000;
  letter-spacing:.06em;
  text-transform:uppercase;
  opacity:.86;
}

#adminBossStatus{
  min-height:18px;
  margin-top:10px;
  font-size:12px;
  font-weight:900;
  color:#9ff8ff;
}

#adminBossStatus.error{
  color:#ffb0b0;
}

#adminSupportInbox{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,0.14);
}

#adminSupportInbox h4{
  margin:0 0 10px;
  font-size:16px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#78e6ff;
}

#adminSupportStatus{
  margin-bottom:9px;
  font-size:12px;
  font-weight:900;
  opacity:.78;
}

#adminSupportList{
  display:grid;
  gap:9px;
}

.supportTicket{
  padding:11px;
  border-radius:16px;
  background:linear-gradient(145deg,rgba(255,255,255,0.12),rgba(255,255,255,0.045));
  border:1px solid rgba(255,255,255,0.12);
}

.supportTicket.unread{
  border-color:rgba(120,230,255,0.5);
  box-shadow:0 0 22px rgba(92,207,255,0.12);
}

.supportTicketTop{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  font-weight:1000;
  color:#ffe179;
}

.supportTicketMeta{
  margin:5px 0 8px;
  font-size:11px;
  opacity:.72;
}

.supportTicketMessage{
  font-size:12px;
  line-height:1.45;
  white-space:pre-wrap;
}

.supportTicketActions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:9px;
}

#adminPanel .supportTicketActions button{
  margin:0;
  padding:8px;
  font-size:11px;
}

#adminBoostModal{
  position:fixed;
  inset:0;
  z-index:5200;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(22,15,9,0.52);
  backdrop-filter:blur(10px);
}

#adminBoostModal.open{
  display:flex;
}

#adminBoostCard{
  width:min(92vw, 430px);
  padding:24px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,0.46);
  background:
    radial-gradient(circle at 16% 10%, rgba(255,255,255,0.46), transparent 32%),
    linear-gradient(145deg, rgba(255,244,213,0.94), rgba(255,203,105,0.82));
  color:#2b1d12;
  box-shadow:0 28px 78px rgba(0,0,0,0.38), 0 0 36px rgba(255,191,73,0.26);
  animation:authPop .28s cubic-bezier(.17,.9,.24,1.18);
}

#adminBoostCard h3{
  margin:0 0 14px;
  font-size:25px;
  line-height:1.05;
}

#adminBoostCard label{
  display:block;
  margin:12px 0 6px;
  font-size:12px;
  font-weight:1000;
  letter-spacing:.06em;
  text-transform:uppercase;
}

#adminBoostCard input,
#adminBoostCard select{
  width:100%;
  padding:11px 12px;
  border:1px solid rgba(87,50,14,0.16);
  border-radius:15px;
  background:rgba(255,255,255,0.64);
  color:#2b1d12;
  font-weight:900;
  outline:none;
}

#adminGiveFields{
  display:none;
}

#adminGiveFields.open{
  display:grid;
  gap:8px;
}

#adminGiveFields select,
#adminGiveFields input{
  margin-bottom:2px;
}

#adminGiveFields .adminGiveHidden{
  display:none !important;
}

.adminItemPreview{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border-radius:16px;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.14);
}

.adminItemOrb{
  width:44px;
  height:44px;
  border-radius:50%;
  display:grid;
  place-items:center;
  box-shadow:0 0 18px rgba(255,255,255,0.18), inset 0 1px 0 rgba(255,255,255,0.28);
  flex:0 0 auto;
}

.adminItemOrb span{
  font-size:18px;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));
}

.adminItemPreview b,
.adminItemPreview small{
  display:block;
}

.adminItemPreview b{
  font-size:12px;
}

.adminItemPreview small{
  margin-top:2px;
  font-size:11px;
  opacity:.76;
}

@keyframes adminPulse{
  0%,100%{transform:translateY(0); filter:saturate(1);}
  50%{transform:translateY(-2px); filter:saturate(1.25);}
}

.adminBoostHidden{
  display:none !important;
}

#adminBoostModalStatus{
  min-height:18px;
  margin-top:10px;
  color:#2f7a35;
  font-size:12px;
  font-weight:1000;
}

#adminBoostModalStatus.error{
  color:#9f1f2e;
}

.adminBoostModalActions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:16px;
}

.adminBoostModalActions button{
  border:0;
  border-radius:15px;
  padding:12px;
  color:#fff;
  font-weight:1000;
  cursor:pointer;
  background:linear-gradient(135deg,#6e4c2b,#332216);
  box-shadow:0 12px 24px rgba(0,0,0,0.18);
}

#adminBoostModalConfirm{
  background:linear-gradient(135deg,#ffbf37,#ff5f87,#7b61ff);
}

.infoDot{
  position:absolute;
  top:10px;
  right:10px;
  width:22px;
  height:22px;
  border:none;
  border-radius:50%;
  background:rgba(255,255,255,0.12);
  color:white;
  cursor:pointer;
  font-weight:bold;
  line-height:22px;
}

#upgradeInfoOverlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.38);
  z-index:230;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s ease, visibility .2s ease;
}

#upgradeInfoOverlay.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

#upgradeInfoCard{
  width:min(560px, calc(100vw - 28px));
  max-height:calc(100vh - 34px);
  overflow:auto;
  border-radius:18px;
  padding:18px 18px 16px;
  background:linear-gradient(180deg,rgba(19,22,38,0.98),rgba(10,12,18,0.96));
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 24px 70px rgba(0,0,0,0.35);
  transform:translateY(10px) scale(.985);
  opacity:.92;
  transition:transform .22s cubic-bezier(.2,.85,.25,1), opacity .18s ease;
}

#upgradeInfoOverlay.open #upgradeInfoCard{
  transform:translateY(0) scale(1);
  opacity:1;
}

#upgradeInfoTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

#upgradeInfoTitle{
  font-size:20px;
  font-weight:bold;
}

#upgradeInfoClose{
  width:30px;
  height:30px;
  border:none;
  border-radius:50%;
  background:rgba(255,255,255,0.1);
  color:white;
  cursor:pointer;
  font-size:16px;
}

#upgradeInfoBody{
  margin-top:12px;
  line-height:1.55;
  opacity:0.88;
}

.gameInfoGrid{
  display:grid;
  gap:10px;
}

.gameInfoBlock{
  padding:11px 12px;
  border-radius:16px;
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.1);
}

.gameInfoBlock b{
  display:block;
  margin-bottom:4px;
  color:#ffe179;
}

.gameInfoBlock span{
  display:block;
  font-size:13px;
  line-height:1.45;
  opacity:.9;
}

.supportForm{
  display:none;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,0.12);
}

.supportForm.open{
  display:grid;
  gap:9px;
}

.supportFormTitle{
  font-size:15px;
  font-weight:1000;
  color:#78e6ff;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.supportForm input,
.supportForm textarea{
  width:100%;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:14px;
  padding:11px 12px;
  background:rgba(255,255,255,0.08);
  color:white;
  outline:none;
  font-weight:800;
  resize:vertical;
}

.supportForm textarea{
  min-height:110px;
}

.supportForm button{
  border:none;
  border-radius:14px;
  padding:12px;
  background:linear-gradient(135deg,#55d8ff,#7b61ff,#ff6fd8);
  color:white;
  font-weight:1000;
  cursor:pointer;
  box-shadow:0 12px 28px rgba(88,146,255,0.2);
}

#supportFormStatus{
  min-height:18px;
  font-size:12px;
  font-weight:900;
  opacity:.9;
}

#supportFormStatus.error{
  color:#ff8585;
}

#rebirthOverlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(2,4,10,0.78);
  backdrop-filter:blur(8px);
  z-index:260;
  overflow-y:auto;
  padding:18px 0;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .24s ease, visibility .24s ease;
}

#rebirthOverlay.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

#ultraPetKeepOverlay{
  position:fixed;
  inset:0;
  z-index:9995;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:radial-gradient(circle at 50% 35%, rgba(129,78,255,.22), transparent 36%), rgba(4,5,12,.78);
  backdrop-filter:blur(10px);
}

#ultraPetKeepCard{
  width:min(920px, 96vw);
  max-height:min(760px, 92vh);
  display:grid;
  grid-template-rows:auto auto auto minmax(0,1fr) auto;
  gap:14px;
  padding:18px;
  border-radius:28px;
  border:1px solid rgba(175,128,255,.36);
  background:
    radial-gradient(circle at 12% 8%, rgba(120,245,255,.16), transparent 28%),
    linear-gradient(145deg, rgba(25,18,48,.96), rgba(7,8,18,.96));
  box-shadow:0 30px 90px rgba(0,0,0,.55), 0 0 44px rgba(122,79,255,.18);
  color:#fff;
}

.ultraKeepTop,
.ultraKeepFooter{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.ultraKeepTop b{
  display:block;
  font-size:26px;
  letter-spacing:.08em;
  color:#d9c2ff;
  text-shadow:0 0 18px rgba(160,110,255,.36);
}

.ultraKeepTop span{
  color:rgba(255,255,255,.76);
  font-weight:900;
}

.ultraKeepWarning{
  padding:12px 14px;
  border-radius:18px;
  border:1px solid rgba(255,214,92,.28);
  background:linear-gradient(135deg, rgba(255,214,92,.12), rgba(116,244,255,.07));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

.ultraKeepWarning b,
.ultraKeepWarning span{
  display:block;
}

.ultraKeepWarning b{
  color:#ffe68a;
  font-size:15px;
}

.ultraKeepWarning span{
  margin-top:4px;
  color:rgba(255,255,255,.74);
  font-size:13px;
  font-weight:900;
  line-height:1.35;
}

#ultraPetKeepClose{
  width:42px;
  height:42px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:14px;
  color:#fff;
  background:rgba(255,255,255,.08);
  font-weight:1000;
  cursor:pointer;
}

.ultraKeepSummary{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.ultraKeepSummary div{
  padding:12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.07);
}

.ultraKeepSummary b,
.ultraKeepSummary span{
  display:block;
}

.ultraKeepSummary span{
  margin-top:3px;
  color:rgba(255,255,255,.72);
  font-weight:900;
}

#ultraPetKeepList{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:10px;
  min-height:160px;
  overflow:auto;
  padding-right:4px;
}

.ultraKeepPetCard{
  min-height:166px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.13);
  color:#fff;
  background:rgba(255,255,255,.07);
  cursor:pointer;
  transition:transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.ultraKeepPetCard:hover{
  transform:translateY(-2px);
}

.ultraKeepPetCard.selected{
  border-color:rgba(116,244,255,.72);
  box-shadow:0 0 28px rgba(116,244,255,.2), inset 0 0 0 1px rgba(255,255,255,.18);
}

.ultraKeepPetCard b{
  font-size:13px;
  text-align:center;
}

.ultraKeepPetCard small{
  color:rgba(255,255,255,.72);
  font-weight:900;
  line-height:1.3;
  text-align:center;
}

.ultraKeepOrb{
  width:58px;
  height:58px;
  border-radius:50%;
  display:grid;
  place-items:center;
  box-shadow:inset 0 -8px 14px rgba(0,0,0,.22), 0 0 18px rgba(255,255,255,.12);
}

.ultraKeepEmpty{
  grid-column:1/-1;
  display:grid;
  place-items:center;
  min-height:150px;
  border-radius:22px;
  border:1px dashed rgba(255,255,255,.18);
  color:rgba(255,255,255,.72);
  font-weight:1000;
}

#rebirthCard{
  width:min(520px, calc(100vw - 32px));
  min-height:420px;
  max-height:min(860px, calc(100vh - 36px));
  border-radius:28px;
  padding:28px 24px 24px;
  background:linear-gradient(180deg,rgba(22,25,40,0.98),rgba(9,12,20,0.96));
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:0 28px 90px rgba(0,0,0,0.42);
  text-align:center;
  position:relative;
  overflow:auto;
}

#rebirthCard::before{
  content:"";
  position:absolute;
  inset:-20% 15% auto;
  height:180px;
  background:radial-gradient(circle, rgba(255,170,95,0.28), rgba(255,170,95,0));
  filter:blur(14px);
  pointer-events:none;
}

#rebirthHero{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
}

#rebirthHeroRing{
  width:112px;
  height:112px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,0.18);
  background:radial-gradient(circle at 35% 35%, rgba(255,214,141,0.42), rgba(255,98,72,0.14));
  box-shadow:0 0 36px rgba(255,123,72,0.3);
  animation:rebirthPulse 1.8s ease-in-out infinite;
}

#rebirthHeroTitle{
  font-size:34px;
  font-weight:900;
  letter-spacing:2px;
  text-shadow:0 0 20px rgba(255,160,100,0.28);
}

#rebirthHeroSubtitle{
  font-size:14px;
  opacity:0.76;
  letter-spacing:1.2px;
  text-transform:uppercase;
}

#rebirthUnlockList{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:14px;
}

.rebirthUnlock{
  opacity:0;
  transform:translateY(18px) scale(0.98);
  padding:14px 16px;
  border-radius:18px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.09);
  box-shadow:0 12px 22px rgba(0,0,0,0.18);
}

.rebirthUnlock.show{
  animation:rebirthReveal 0.48s ease forwards;
}

.rebirthUnlock b{
  display:block;
  font-size:16px;
  margin-bottom:4px;
}

.rebirthUnlock small{
  display:block;
  opacity:0.8;
  line-height:1.45;
}

#rebirthContinueBtn{
  margin-top:22px;
  min-width:150px;
  border:none;
  border-radius:16px;
  padding:14px 18px;
  background:linear-gradient(135deg,#ff934d,#ff5f59);
  color:#fff;
  font-size:16px;
  font-weight:800;
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transform:translateY(12px);
  transition:opacity 0.3s ease, transform 0.3s ease;
  box-shadow:0 16px 32px rgba(255,96,80,0.22);
}

#rebirthContinueBtn.show{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}

@keyframes rebirthPulse{
  0%,100%{transform:scale(1); box-shadow:0 0 36px rgba(255,123,72,0.3);}
  50%{transform:scale(1.06); box-shadow:0 0 48px rgba(255,160,90,0.42);}
}

@keyframes rebirthReveal{
  0%{opacity:0; transform:translateY(18px) scale(0.98);}
  100%{opacity:1; transform:translateY(0) scale(1);}
}

/* ROCKET */
#rocketScene{
  position:fixed;
  inset:0;
  display:none;
  z-index:5200;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 72%, rgba(255,170,80,.2), transparent 28%),
    radial-gradient(circle at 50% 28%, rgba(92,210,255,.18), transparent 32%),
    linear-gradient(180deg, #070915, #020309);
  pointer-events:none;
}

#rocketScene::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 24%, rgba(255,255,255,.7) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 32%, rgba(255,255,255,.45) 0 1px, transparent 2px),
    radial-gradient(circle at 42% 18%, rgba(255,255,255,.5) 0 1px, transparent 2px),
    radial-gradient(circle at 84% 68%, rgba(255,255,255,.38) 0 1px, transparent 2px);
  background-size:220px 180px;
  opacity:.5;
  animation:rocketStarsDrift 2.8s linear forwards;
}

#rocketScene::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle, rgba(255,255,255,.32), transparent 34%);
  opacity:0;
  animation:rocketFinalFlash 3s ease forwards;
}

#rocketFlash{
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 62%, rgba(255,234,166,.45), transparent 34%);
  opacity:0;
  animation:rocketIgnitionFlash 3s ease forwards;
}

#rocketTrail{
  position:absolute;
  left:50%;
  bottom:-6vh;
  width:86px;
  height:62vh;
  transform:translateX(-50%);
  border-radius:999px 999px 0 0;
  background:linear-gradient(180deg, rgba(255,246,171,0), rgba(255,176,70,.6), rgba(255,80,68,.2), transparent);
  filter:blur(10px);
  opacity:0;
  animation:rocketTrailGlow 3s ease forwards;
}

#rocketClouds{
  position:absolute;
  left:50%;
  bottom:7vh;
  width:250px;
  height:90px;
  transform:translateX(-50%);
}

#rocketClouds i{
  position:absolute;
  bottom:0;
  width:74px;
  height:44px;
  border-radius:999px;
  background:rgba(215,225,235,.28);
  filter:blur(1px);
  animation:rocketSmoke 3s ease forwards;
}

#rocketClouds i:nth-child(1){left:4px; animation-delay:.08s;}
#rocketClouds i:nth-child(2){left:48px; width:92px; height:58px; animation-delay:.16s;}
#rocketClouds i:nth-child(3){left:112px; width:82px; height:52px; animation-delay:.11s;}
#rocketClouds i:nth-child(4){left:170px; width:70px; height:42px; animation-delay:.2s;}
#rocketClouds i:nth-child(5){left:82px; bottom:24px; width:68px; height:38px; animation-delay:.26s;}

#rocketScene .rocketSceneText{
  position:absolute;
  left:50%;
  bottom:15vh;
  transform:translateX(-50%);
  color:rgba(255,255,255,.76);
  font-size:12px;
  font-weight:1000;
  letter-spacing:.18em;
  text-shadow:0 0 18px rgba(255,209,98,.4);
  animation:rocketTextFade 3s ease forwards;
}

#rocket{
  position:absolute;
  bottom:8vh;
  left:50%;
  width:170px;
  height:270px;
  transform:translateX(-50%);
  animation:rocketLaunch 3s cubic-bezier(.18,.8,.22,1) forwards;
  filter:drop-shadow(0 0 34px rgba(255,214,92,.34));
}

.rocketBody{
  position:absolute;
  left:50%;
  bottom:62px;
  width:104px;
  height:166px;
  transform:translateX(-50%);
  border-radius:76px 76px 30px 30px;
  background:
    radial-gradient(circle at 50% 28%, rgba(118,224,255,.9) 0 18px, rgba(34,92,140,.95) 20px 31px, transparent 33px),
    linear-gradient(135deg, #fff3c4, #f25763 45%, #842b58);
  border:3px solid rgba(255,255,255,.42);
  box-shadow:inset 0 0 30px rgba(255,255,255,.24), 0 0 42px rgba(255,99,108,.25);
}

.rocketBody::before,
.rocketBody::after{
  content:"";
  position:absolute;
  bottom:4px;
  width:42px;
  height:58px;
  background:linear-gradient(180deg,#ffca66,#d84f4f);
  border-radius:18px 18px 7px 7px;
  z-index:-1;
}

.rocketBody::before{left:-27px; transform:rotate(-18deg);}
.rocketBody::after{right:-27px; transform:rotate(18deg);}

.rocketBody b{
  position:absolute;
  left:50%;
  top:-43px;
  width:0;
  height:0;
  transform:translateX(-50%);
  border-left:41px solid transparent;
  border-right:41px solid transparent;
  border-bottom:61px solid #ffe47d;
  filter:drop-shadow(0 0 16px rgba(255,228,125,.42));
}

.rocketBody em{
  position:absolute;
  left:50%;
  bottom:-18px;
  width:54px;
  height:32px;
  transform:translateX(-50%);
  border-radius:0 0 25px 25px;
  background:#30364f;
}

.rocketMole{
  position:absolute;
  left:50%;
  top:30px;
  width:70px;
  height:70px;
  transform:translateX(-50%);
  z-index:3;
  border-radius:50%;
  background:#8a5a3f;
  box-shadow:inset 0 -8px 0 rgba(0,0,0,.12),0 0 22px rgba(255,255,255,.22);
}

.rocketMole::before,
.rocketMole::after{
  content:"";
  position:absolute;
  top:24px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#15100e;
}

.rocketMole::before{left:20px;}
.rocketMole::after{right:20px;}

.rocketMole span{
  position:absolute;
  left:50%;
  top:38px;
  width:18px;
  height:12px;
  transform:translateX(-50%);
  border-radius:50%;
  background:#f2b0a0;
}

.rocketFlame{
  position:absolute;
  left:50%;
  bottom:8px;
  width:68px;
  height:108px;
  transform:translateX(-50%);
  border-radius:50% 50% 45% 45%;
  background:radial-gradient(circle at 50% 24%, #fffbd0, #ffd15f 34%, #ff6d4a 58%, rgba(255,60,70,0) 74%);
  filter:blur(.3px) drop-shadow(0 0 28px rgba(255,120,52,.68));
  animation:rocketFlameFlicker .12s ease-in-out infinite alternate;
}

@keyframes rocketLaunch{
  0%{transform:translate(-50%, 34px) scale(.9) rotate(-2deg);}
  18%{transform:translate(-50%, 18px) scale(1) rotate(2deg);}
  36%{transform:translate(-50%, 0) scale(1.03) rotate(-1deg);}
  72%{transform:translate(-50%, -48vh) scale(1.02) rotate(3deg);}
  100%{transform:translate(-50%, -142vh) scale(.78) rotate(0deg);}
}

@keyframes rocketFlameFlicker{
  from{height:94px; opacity:.86; transform:translateX(-50%) scaleX(.86);}
  to{height:124px; opacity:1; transform:translateX(-50%) scaleX(1.08);}
}

@keyframes rocketSmoke{
  0%{opacity:0; transform:translateY(18px) scale(.65);}
  26%{opacity:.78;}
  100%{opacity:0; transform:translateY(34px) scale(1.85);}
}

@keyframes rocketTrailGlow{
  0%,18%{opacity:0; transform:translateX(-50%) scaleY(.2);}
  38%{opacity:.75;}
  100%{opacity:0; transform:translateX(-50%) scaleY(1.1);}
}

@keyframes rocketIgnitionFlash{
  0%,18%{opacity:0;}
  26%{opacity:.75;}
  46%,100%{opacity:0;}
}

@keyframes rocketFinalFlash{
  0%,78%{opacity:0;}
  88%{opacity:.72;}
  100%{opacity:0;}
}

@keyframes rocketStarsDrift{
  to{background-position:0 -160px;}
}

@keyframes rocketTextFade{
  0%,18%{opacity:0; transform:translate(-50%, 10px);}
  30%,58%{opacity:1; transform:translate(-50%, 0);}
  80%,100%{opacity:0; transform:translate(-50%, -18px);}
}

@media (max-width:560px){
  #rocket{
    width:138px;
    height:220px;
    bottom:9vh;
  }

  .rocketBody{
    bottom:50px;
    width:84px;
    height:134px;
    border-radius:62px 62px 25px 25px;
  }

  .rocketBody::before,
  .rocketBody::after{
    width:34px;
    height:48px;
  }

  .rocketBody::before{left:-22px;}
  .rocketBody::after{right:-22px;}

  .rocketBody b{
    top:-35px;
    border-left-width:33px;
    border-right-width:33px;
    border-bottom-width:50px;
  }

  .rocketMole{
    top:24px;
    width:58px;
    height:58px;
  }

  .rocketMole::before,
  .rocketMole::after{
    top:20px;
    width:8px;
    height:8px;
  }

  .rocketMole::before{left:17px;}
  .rocketMole::after{right:17px;}

  .rocketMole span{
    top:31px;
    width:15px;
    height:10px;
  }

  .rocketFlame{
    width:54px;
    height:86px;
  }
}

/* MOON */
.moon{
  background:radial-gradient(circle at top,#444,#111);
}
#bgRocket{
  position:fixed;
  bottom:42px;
  right:34px;
  font-size:54px;
  display:none;
  opacity:.42;
  filter:drop-shadow(0 0 18px rgba(255,255,255,0.22));
  transform:rotate(-18deg);
  z-index:0;
  pointer-events:none;
  animation:bgRocketFloat 5s ease-in-out infinite;
}

#bgRocket.wrecked{
  opacity:.5;
  transform:rotate(24deg);
  filter:grayscale(.6) drop-shadow(0 0 18px rgba(255,80,60,0.28));
  animation:bgRocketWreck 4.2s ease-in-out infinite;
}

@keyframes bgRocketFloat{
  0%,100%{transform:translateY(0) rotate(-18deg);}
  50%{transform:translateY(-10px) rotate(-14deg);}
}

@keyframes bgRocketWreck{
  0%,100%{transform:translateY(0) rotate(24deg);}
  50%{transform:translateY(8px) rotate(18deg);}
}

/* ACCOUNT / FIREBASE */
.accountStatus{
  position:fixed;
  top:14px;
  right:16px;
  z-index:850;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,0.38);
  border-radius:18px;
  background:linear-gradient(135deg, rgba(255,255,255,0.72), rgba(255,255,255,0.42));
  box-shadow:0 16px 34px rgba(0,0,0,0.16);
  color:#2b241d;
  font-size:13px;
  font-weight:900;
  backdrop-filter:blur(14px) saturate(1.35);
}

.cloudSaveStatus{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-width:max-content;
  padding:5px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.34);
  background:rgba(255,255,255,.22);
  color:#2b241d;
  font-size:11px;
  line-height:1;
  letter-spacing:.02em;
  text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
}

.cloudSaveStatus::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:#8a8f98;
  box-shadow:0 0 10px rgba(138,143,152,.55);
}

.cloudSaveStatus.saving::before{
  background:#32d7ff;
  box-shadow:0 0 14px rgba(50,215,255,.9);
  animation:cloudSavePulse .9s ease-in-out infinite;
}

.cloudSaveStatus.saved::before{
  background:#31f07a;
  box-shadow:0 0 14px rgba(49,240,122,.78);
}

.cloudSaveStatus.error::before{
  background:#ff4d5f;
  box-shadow:0 0 14px rgba(255,77,95,.78);
}

@keyframes cloudSavePulse{
  0%,100%{transform:scale(.82); opacity:.62;}
  50%{transform:scale(1.25); opacity:1;}
}

#activeBoostPanel{
  position:relative;
  z-index:20;
  display:flex;
  flex-wrap:nowrap;
  justify-content:flex-start;
  gap:8px;
  width:min(920px, calc(100vw - 28px));
  max-width:min(920px, calc(100vw - 28px));
  min-height:0;
  margin:4px auto 8px;
  padding:4px 2px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  -ms-overflow-style:none;
  pointer-events:auto;
  transform:none;
}

#activeBoostPanel:empty{
  display:none;
}

#activeBoostPanel::-webkit-scrollbar{
  width:0;
  height:0;
  display:none;
}

#activeBoostPanel::-webkit-scrollbar-thumb{
  background:transparent;
}

.bossDropFeed{
  position:fixed;
  left:50%;
  bottom:22px;
  z-index:880;
  display:flex;
  flex-direction:column-reverse;
  align-items:center;
  gap:8px;
  width:min(360px, calc(100vw - 24px));
  pointer-events:none;
  transform:translateX(-50%);
}

.bossDropToast{
  display:grid;
  grid-template-columns:42px 1fr;
  align-items:center;
  gap:10px;
  min-width:min(320px, calc(100vw - 34px));
  padding:9px 12px;
  border:1px solid rgba(255,255,255,.34);
  border-radius:18px;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.5), transparent 34%),
    linear-gradient(135deg, rgba(35,25,68,.9), rgba(16,22,44,.82));
  color:#fff;
  box-shadow:0 18px 42px rgba(0,0,0,.38), 0 0 28px rgba(116,221,255,.18);
  backdrop-filter:blur(12px) saturate(1.3);
  animation:bossDropPop .38s cubic-bezier(.2,1.35,.35,1), bossDropFloat 3.2s ease-out forwards;
}

.bossDropToast.leaving{
  opacity:0;
  transform:translateY(18px) scale(.96);
  transition:opacity .45s ease, transform .45s ease;
}

.bossDropIcon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:linear-gradient(135deg, rgba(255,232,117,.95), rgba(255,97,174,.75));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 0 22px rgba(255,211,93,.35);
  font-size:22px;
}

.bossDropText{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

.bossDropText b,
.bossDropText span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.bossDropText b{
  font-size:14px;
  letter-spacing:.02em;
}

.bossDropText span{
  color:#bcecff;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
}

@keyframes bossDropPop{
  from{opacity:0; transform:translateY(24px) scale(.82);}
  to{opacity:1; transform:translateY(0) scale(1);}
}

@keyframes bossDropFloat{
  0%,78%{filter:brightness(1);}
  42%{filter:brightness(1.18);}
  100%{filter:brightness(1);}
}

.bossRewardModalOverlay{
  position:fixed;
  inset:0;
  z-index:6200;
  display:grid;
  place-items:center;
  padding:18px;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,210,96,.2), transparent 34%),
    radial-gradient(circle at 30% 20%, rgba(111,236,255,.18), transparent 28%),
    rgba(3,5,14,.72);
  backdrop-filter:blur(9px) saturate(1.15);
  animation:bossRewardOverlayIn .18s ease both;
}

.bossRewardModalOverlay.closing{
  animation:bossRewardOverlayOut .22s ease both;
}

.bossRewardModalCard{
  position:relative;
  width:min(520px, calc(100vw - 28px));
  max-height:min(86vh, 620px);
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:22px;
  border:1px solid rgba(190,244,255,.34);
  border-radius:28px;
  color:#f8feff;
  text-align:center;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,223,121,.2), transparent 34%),
    linear-gradient(155deg, rgba(23,28,58,.97), rgba(10,12,28,.96) 56%, rgba(34,18,54,.95));
  box-shadow:0 26px 90px rgba(0,0,0,.58), 0 0 44px rgba(126,227,255,.22);
  overflow:hidden;
  animation:bossRewardCardIn .28s cubic-bezier(.2,1.3,.32,1) both;
}

.bossRewardModalGlow{
  position:absolute;
  inset:-45%;
  background:conic-gradient(from 0deg, transparent, rgba(255,229,128,.22), transparent, rgba(103,230,255,.2), transparent);
  animation:bossRewardGlowSpin 7s linear infinite;
  pointer-events:none;
}

.bossRewardModalHeader,
.bossRewardModalItems,
.bossRewardModalOk{
  position:relative;
  z-index:1;
}

.bossRewardModalHeader{
  display:grid;
  gap:4px;
}

.bossRewardModalHeader span{
  color:#9df4ff;
  font-size:12px;
  font-weight:1000;
  letter-spacing:.16em;
}

.bossRewardModalHeader b{
  font-size:28px;
  font-weight:1000;
  text-shadow:0 0 22px rgba(255,226,126,.28);
}

.bossRewardModalHeader small{
  color:rgba(241,253,255,.72);
  font-weight:900;
}

.bossRewardModalItems{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(94px, 1fr));
  gap:11px;
  overflow-y:auto;
  padding:2px 2px 4px;
}

.bossRewardModalItem{
  min-height:106px;
  display:grid;
  place-items:center;
  gap:5px;
  padding:12px 8px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:20px;
  background:
    radial-gradient(circle at 50% 14%, rgba(255,255,255,.22), transparent 38%),
    linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.04));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 14px 28px rgba(0,0,0,.26);
  animation:bossRewardItemPop .3s ease both;
}

.bossRewardModalItem i{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:16px;
  font-style:normal;
  font-size:25px;
  background:linear-gradient(145deg, rgba(255,229,118,.92), rgba(104,226,255,.66));
  box-shadow:0 0 24px rgba(255,223,122,.26);
}

.bossRewardModalItem strong{
  font-size:13px;
  font-weight:1000;
}

.bossRewardModalItem small{
  color:#bcecff;
  font-size:11px;
  font-weight:1000;
  text-transform:uppercase;
}

.bossRewardModalOk{
  width:min(220px, 100%);
  margin:0 auto;
  padding:12px 18px;
  border:0;
  border-radius:999px;
  color:#140c1d;
  font-weight:1000;
  letter-spacing:.08em;
  cursor:pointer;
  background:linear-gradient(135deg,#fff0a6,#66e8ff);
  box-shadow:0 12px 28px rgba(0,0,0,.3), 0 0 22px rgba(118,233,255,.25);
}

@keyframes bossRewardOverlayIn{from{opacity:0;}to{opacity:1;}}
@keyframes bossRewardOverlayOut{from{opacity:1;}to{opacity:0;}}
@keyframes bossRewardCardIn{from{opacity:0;transform:translateY(20px) scale(.94);}to{opacity:1;transform:translateY(0) scale(1);}}
@keyframes bossRewardGlowSpin{to{transform:rotate(360deg);}}
@keyframes bossRewardItemPop{from{opacity:0;transform:translateY(10px) scale(.92);}to{opacity:1;transform:translateY(0) scale(1);}}

.boostChip{
  position:relative;
  flex:0 0 auto;
  min-width:130px;
  min-height:42px;
  display:grid;
  grid-template-columns:28px 1fr;
  gap:8px;
  align-items:center;
  padding:8px 10px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.32);
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,0.42), transparent 28%),
    linear-gradient(135deg, rgba(255,198,72,0.88), rgba(255,82,147,0.72) 52%, rgba(84,204,255,0.72));
  color:#fff;
  box-shadow:0 14px 34px rgba(0,0,0,0.34), 0 0 28px rgba(255,210,90,0.24);
  overflow:hidden;
  animation:boostPulse 1.9s ease-in-out infinite;
}

.boostChip::after{
  content:"";
  position:absolute;
  inset:-60% auto -60% -55%;
  width:42%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.46),transparent);
  transform:rotate(18deg);
  animation:boostSweep 2.6s ease-in-out infinite;
}

.boostIcon{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:12px;
  font-size:16px;
  line-height:1;
  place-items:center;
  border-radius:11px;
  background:rgba(255,255,255,0.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.3);
  font-size:17px;
}

.boostInfo{
  position:relative;
  z-index:1;
}

.boostInfo b{
  display:block;
  font-size:11px;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.boostInfo > span{
  display:block;
  margin-top:2px;
  font-size:11px;
  font-weight:900;
  opacity:.96;
}

.boostMeta{
  display:flex !important;
  align-items:center;
  gap:6px;
  flex-wrap:nowrap;
}

.boostValue,
.boostTime{
  display:inline-flex !important;
  align-items:center;
  min-width:0;
  white-space:nowrap;
  line-height:1;
}

.boostTime{
  padding-left:6px;
  border-left:1px solid rgba(255,255,255,.28);
}

#globalEventBanner{
  position:fixed;
  top:128px;
  left:50%;
  transform:translate(-50%, -18px) scale(.96);
  z-index:1800;
  width:min(620px, calc(100vw - 28px));
  padding:16px 22px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,0.42);
  background:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,0.4), transparent 24%),
    linear-gradient(135deg, rgba(255,190,55,.96), rgba(255,62,138,.92), rgba(70,190,255,.92));
  color:#fff;
  text-align:center;
  font-weight:1000;
  letter-spacing:.05em;
  box-shadow:0 24px 70px rgba(0,0,0,0.42), 0 0 42px rgba(255,190,80,0.3);
  opacity:0;
  pointer-events:none;
}

#globalEventBanner.show{
  animation:eventBannerPop 4.2s ease forwards;
}

@keyframes boostPulse{
  0%,100%{filter:saturate(1); transform:translateY(0) scale(1);}
  50%{filter:saturate(1.28) brightness(1.08); transform:translateY(-2px) scale(1.02);}
}

@keyframes boostSweep{
  0%,45%{transform:translateX(0) rotate(18deg);}
  80%,100%{transform:translateX(330%) rotate(18deg);}
}

@keyframes eventBannerPop{
  0%{opacity:0; transform:translate(-50%, -22px) scale(.92);}
  12%,82%{opacity:1; transform:translate(-50%, 0) scale(1);}
  100%{opacity:0; transform:translate(-50%, -12px) scale(.96);}
}

#logoutBtn{
  display:none;
  border:none;
  border-radius:12px;
  padding:7px 10px;
  background:linear-gradient(135deg,#ff6a5d,#d93446);
  color:#fff;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 10px 20px rgba(217,52,70,0.2);
}

#logoutBtn:hover{
  transform:translateY(-1px);
}

.accountMenuOverlay{
  position:fixed;
  inset:0;
  z-index:4300;
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  padding:70px 18px 18px;
  background:rgba(5,8,18,.24);
  backdrop-filter:blur(8px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s ease, visibility .2s ease;
}

.accountMenuOverlay.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.accountMenuCard{
  width:min(360px, calc(100vw - 28px));
  padding:16px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.24);
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.16), transparent 42%),
    linear-gradient(145deg, rgba(17,22,38,.96), rgba(8,10,20,.94));
  color:#fff;
  box-shadow:0 24px 80px rgba(0,0,0,.42);
  transform:translateY(-8px) scale(.985);
  opacity:.92;
  transition:transform .22s cubic-bezier(.2,.85,.25,1), opacity .18s ease;
}

.accountMenuOverlay.open .accountMenuCard{
  transform:translateY(0) scale(1);
  opacity:1;
}

.accountMenuTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.accountMenuTop span{
  display:block;
  font-size:11px;
  font-weight:1000;
  letter-spacing:.12em;
  opacity:.62;
}

.accountMenuTop b{
  display:block;
  margin-top:2px;
  font-size:20px;
}

.accountMenuCard button{
  width:100%;
  border:0;
  border-radius:16px;
  padding:12px 14px;
  margin-top:8px;
  color:#fff;
  font-weight:1000;
  cursor:pointer;
  background:linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}

#accountMenuClose{
  width:auto;
  min-width:38px;
  margin-top:0;
  padding:9px 12px;
}

#accountLogoutBtn{
  background:linear-gradient(135deg,#ff5c5c,#9d1d31);
}

.changePasswordForm{
  display:none;
  gap:8px;
  margin-top:10px;
}

.changePasswordForm.open{
  display:grid;
}

.changePasswordForm input{
  width:100%;
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  padding:11px 12px;
  color:#fff;
  background:rgba(255,255,255,.08);
  outline:none;
  font-weight:900;
}

#accountMenuMessage{
  min-height:18px;
  margin-top:10px;
  font-size:12px;
  font-weight:900;
  color:#8fffd0;
}

#accountMenuMessage.error{
  color:#ffb0b0;
}

.authOverlay{
  position:fixed;
  inset:0;
  z-index:5000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,212,120,0.34), transparent 30%),
    radial-gradient(circle at 82% 20%, rgba(97,204,255,0.26), transparent 32%),
    rgba(23,18,14,0.62);
  backdrop-filter:blur(10px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .22s ease, visibility .22s ease;
}

.authOverlay.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

#authCard{
  width:min(92vw, 430px);
  border:1px solid rgba(255,255,255,0.48);
  border-radius:32px;
  padding:28px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.88), rgba(255,247,228,0.72)),
    radial-gradient(circle at top left, rgba(255,190,92,0.4), transparent 38%);
  box-shadow:0 30px 70px rgba(0,0,0,0.28);
  color:#2a2119;
  text-align:center;
  animation:authPop 0.42s cubic-bezier(.17,.9,.24,1.18);
}

.authBrand{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:12px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,156,56,0.16);
  color:#9b4c0f;
  font-size:12px;
  font-weight:1000;
  letter-spacing:0.12em;
}

#authCard h2{
  margin:0;
  font-size:30px;
  line-height:1.08;
}

#authSubtitle{
  margin:10px auto 20px;
  max-width:330px;
  color:rgba(42,33,25,0.72);
  font-size:14px;
  font-weight:700;
  line-height:1.45;
}

.authMenu,
.authActions{
  display:grid;
  gap:10px;
}

.authMenu button,
.authActions button{
  border:none;
  border-radius:18px;
  padding:14px 16px;
  background:linear-gradient(135deg,#ffb14b,#ff6c4f);
  color:#fff;
  font-size:15px;
  font-weight:1000;
  cursor:pointer;
  box-shadow:0 15px 28px rgba(255,108,79,0.22);
  transition:transform 0.18s ease, filter 0.18s ease;
}

.authMenu button:hover,
.authActions button:hover{
  transform:translateY(-2px);
  filter:saturate(1.08);
}

.authMenu button.secondary,
.authActions button.secondary{
  background:linear-gradient(135deg,#f2f4ff,#dbe6ff);
  color:#354064;
  box-shadow:0 12px 24px rgba(74,88,132,0.14);
}

.authForm{
  display:none;
  gap:13px;
  text-align:left;
}

.authForm.open{
  display:grid;
}

.authForm label{
  display:grid;
  gap:7px;
  color:#4a3828;
  font-size:13px;
  font-weight:1000;
}

.authForm input{
  width:100%;
  box-sizing:border-box;
  border:1px solid rgba(98,66,38,0.22);
  border-radius:16px;
  padding:13px 14px;
  background:rgba(255,255,255,0.75);
  color:#2a2119;
  font-size:15px;
  font-weight:800;
  outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.7);
}

.authForm input:focus{
  border-color:rgba(255,132,54,0.64);
  box-shadow:0 0 0 4px rgba(255,132,54,0.14);
}

#authMessage{
  min-height:20px;
  margin-top:14px;
  color:#2f6b38;
  font-size:13px;
  font-weight:900;
}

#authMessage.error{
  color:#b62435;
}

@keyframes authPop{
  0%{opacity:0; transform:translateY(18px) scale(0.96);}
  100%{opacity:1; transform:translateY(0) scale(1);}
}

@media (max-width: 700px){
  body{
    padding-bottom:calc(132px + env(safe-area-inset-bottom));
  }

  #topHud{
    width:calc(100vw - 20px);
    margin:10px auto 6px;
    padding:11px 12px;
    grid-template-columns:1fr;
    gap:8px;
    text-align:center;
  }

  h1{
    font-size:28px;
  }

  #rebirthLabel{
    font-size:12px;
  }

  #topCurrencies{
    justify-items:center;
    min-width:0;
  }

  #ui{
    justify-content:center;
    gap:10px;
    font-size:24px;
  }

  #ui .diamondCurrency{
    font-size:24px !important;
  }

  #stats{
    font-size:12px;
  }

  .accountStatus{
    position:relative;
    top:auto;
    right:auto;
    flex-wrap:wrap;
    justify-content:center;
    margin:4px auto 6px;
    z-index:20;
  }

  #mainPlay{
    display:flex;
    flex-direction:column;
    margin-top:8px;
    width:min(100%, calc(100vw - 20px));
  }

  #kretWrap{
    width:min(92vw, 370px);
    height:min(92vw, 370px);
    grid-column:auto;
  }

  #kret{
    width:min(74vw, 250px);
    height:min(74vw, 250px);
  }

  .eye{
    width:clamp(17px, 6vw, 20px);
    height:clamp(17px, 6vw, 20px);
    top:33%;
  }

  .eye.left{left:28%;}
  .eye.right{right:28%;}

  .nose{
    width:clamp(26px, 8vw, 31px);
    height:clamp(26px, 8vw, 31px);
    top:53%;
  }

  .autoOpenToggle{
    position:relative;
    min-width:0;
    width:min(92vw, 280px);
    top:auto;
    left:auto;
    margin:3px auto;
    padding:10px 12px;
    font-size:12px;
  }

  .autoCrateToggle{
    top:auto;
    left:auto;
  }

  .gameInfoBtn{
    position:relative;
    left:auto;
    top:auto;
    margin:6px auto 0;
    width:38px;
    height:38px;
  }

  .appInstallBtn{
    position:relative;
    left:auto;
    top:auto;
    margin:6px auto 0;
    width:38px;
    height:38px;
  }

  .freeRewardsBtn{
    position:relative;
    left:auto;
    top:auto;
    margin:6px auto 0;
    width:38px;
    height:38px;
  }

  .streakHud{
    position:relative;
    left:auto;
    top:auto;
    margin:6px auto 0;
    width:max-content;
    height:38px;
  }

  .codesBtn{
    position:relative;
    left:auto;
    top:auto;
    margin:6px auto 0;
    min-height:36px;
    min-width:92px;
  }

  .nextUpdateCountdown{
    left:max(10px, env(safe-area-inset-left));
    bottom:calc(74px + env(safe-area-inset-bottom));
    max-width:calc(100vw - 20px);
    font-size:11px;
  }

  .streakTooltip{
    left:auto;
    right:0;
    transform:translate(0, -4px);
    width:min(230px, calc(100vw - 28px));
  }

  .streakHud:hover .streakTooltip,
  .streakHud:focus-within .streakTooltip{
    transform:translate(0, 0);
  }

  .streakRecoveryBox{
    top:auto;
    right:max(10px, env(safe-area-inset-right));
    bottom:calc(74px + env(safe-area-inset-bottom));
  }

  .freeRewardsGrid{
    grid-template-columns:1fr;
    gap:12px;
  }

  .freeRewardsGiftGrid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:9px;
  }

  .freeRewardsOddsPanel{
    max-height:220px;
  }

  .freeRewardGift{
    min-height:118px;
    padding:10px 8px;
  }

  .indexGrid{
    grid-template-columns:1fr;
  }

  #indexPanel{
    top:auto;
    width:min(94vw, 420px);
    max-width:none;
    max-height:86vh;
  }

  #activePetStage{
    inset:0;
  }

  #rightPanels{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    margin:0 !important;
    transform:none !important;
    width:min(92vw, 330px);
    display:grid;
    grid-template-columns:1fr;
    justify-items:center;
    pointer-events:none;
  }

  #holdPanel,
  #autoPanel,
  #diamondClickPanel{
    width:min(92vw, 260px);
    min-height:auto;
  }

  #shop{
    flex-direction:column;
    align-items:center;
  }

  #shop.voidPreviewLayout{
    display:flex;
    width:auto;
    column-gap:12px;
  }

  #shop.voidPreviewLayout .normalColumn{
    grid-column:auto;
    max-width:min(92vw, 320px);
  }

  #shop.voidPreviewLayout .endlessColumn.voidPreview{
    position:relative;
    grid-column:auto;
    top:auto;
    left:auto !important;
    right:auto;
    width:min(92vw, 320px);
    pointer-events:auto;
    transform:none;
  }

  .shopColumn,
  .shopColumn.endlessColumn{
    width:min(92vw, 320px);
    max-width:min(92vw, 320px);
  }

  .shopColumn.endlessColumn.voidUnlocked{
    grid-template-columns:1fr;
  }

  .slidePanel{
    position:fixed;
    left:max(10px, env(safe-area-inset-left)) !important;
    right:max(10px, env(safe-area-inset-right)) !important;
    top:auto !important;
    bottom:calc(10px + env(safe-area-inset-bottom));
    width:auto !important;
    max-width:none !important;
    max-height:min(82dvh, calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
    border-radius:26px;
    transform:translateY(calc(100% + 28px)) scale(1);
    clip-path:inset(100% 0 0 0 round 26px);
    z-index:940;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }

  .slidePanel.open,
  .slidePanel.rightSide.open{
    transform:translateY(0) scale(1) !important;
    clip-path:inset(0 0 0 0 round 26px) !important;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

  #petPanel{
    width:auto;
    max-width:none;
  }

  #petPanel .panelScroll{
    max-height:none;
  }

  .activePetSlots{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .activePetSlot{
    min-height:122px;
  }

  .slidePanel.rightSide{
    right:max(10px, env(safe-area-inset-right)) !important;
    transform:translateY(calc(100% + 28px)) scale(1);
    clip-path:inset(100% 0 0 0 round 26px);
  }

  .slideHeader{
    position:sticky;
    top:0;
    z-index:4;
    padding:13px 52px 11px 14px;
    background:
      linear-gradient(145deg,rgba(255,255,255,0.16),rgba(255,255,255,0.045)),
      var(--panel-bg, rgba(8,8,15,0.94));
    backdrop-filter:blur(18px) saturate(1.35);
  }

  .slideHeader b{
    font-size:17px;
  }

  .slideHeader span{
    font-size:12px;
    line-height:1.25;
  }

  .panelCloseBtn{
    top:10px;
    right:12px;
    width:34px;
    height:34px;
    background:rgba(255,255,255,0.14);
  }

  #leaderboardPanel{
    width:auto;
    max-width:none;
  }

  #leaderboardContent{
    max-height:calc(min(78dvh, 620px) - 120px);
    padding:12px;
  }

  .leaderboardMine{
    grid-template-columns:1fr;
  }

  .leaderboardCategoryGrid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

  .leaderboardSyncTop,
  .leaderboardSectionTitle{
    align-items:flex-start;
    flex-direction:column;
  }

  .leaderboardRow{
    grid-template-columns:28px minmax(0, 1fr);
  }

  .leaderboardValue{
    grid-column:2;
    text-align:left;
    opacity:.88;
  }

  #hatchOverlay{
    align-items:flex-start;
    padding:
      max(10px, env(safe-area-inset-top))
      max(10px, env(safe-area-inset-right))
      max(10px, env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left));
    overflow-y:auto;
    overflow-x:hidden;
  }

  #hatchCard{
    width:100%;
    min-height:auto;
    max-height:calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow-y:auto;
    overflow-x:hidden;
    padding:20px 14px;
    border-radius:26px;
    justify-content:flex-start;
    overscroll-behavior:contain;
  }

  #hatchEggsRow{
    grid-template-columns:repeat(auto-fit, minmax(58px, 1fr));
    gap:10px;
  }

  .hatchEggVisual{
    width:58px;
    height:74px;
  }

  #hatchPetsGrid{
    grid-template-columns:1fr;
    gap:10px;
  }

  .hatchPetCard{
    display:grid;
    grid-template-columns:82px 1fr;
    gap:8px 12px;
    align-items:center;
    text-align:left;
  }

  .hatchPetVisual{
    grid-row:1 / span 3;
    width:82px;
    height:82px;
    margin:0;
  }

  .hatchPetVisual .petTinyFace::before{left:22px;}
  .hatchPetVisual .petTinyFace::after{right:22px;}

  .hatchPetVisual .petTinyMouth{
    width:12px;
    height:9px;
    left:32px;
    top:45px;
  }

  .hatchRarityBadge{
    margin:0;
    justify-self:start;
  }

  #globalBossPanel{
    width:auto;
    max-width:none;
  }

  .panelScroll,
  #leaderboardContent,
  #globalBossContent,
  #diamondUpgradeList,
  #eggList,
  #crateList,
  #petForgeList,
  #petDiamondList{
    max-height:calc(min(78dvh, 620px) - 112px);
    overflow-y:auto;
    overscroll-behavior:contain;
  }

  #leftDock,
  #rightDock{
    top:auto;
    bottom:calc(10px + env(safe-area-inset-bottom));
    flex-direction:row;
    gap:8px;
    z-index:930;
    max-width:calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right));
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    -ms-overflow-style:none;
    padding:2px;
  }

  #leftDock::-webkit-scrollbar,
  #rightDock::-webkit-scrollbar{
    display:none;
    width:0;
    height:0;
  }

  #leftDock{
    left:max(8px, env(safe-area-inset-left));
  }

  #rightDock{
    right:max(8px, env(safe-area-inset-right));
    bottom:calc(64px + env(safe-area-inset-bottom));
  }

  .dockBtn{
    flex:0 0 44px;
    width:44px;
    height:44px;
    border-radius:15px;
    font-size:23px;
  }

  .leaderboardMine{
    grid-template-columns:1fr;
  }

  .bossTop,
  .bossInfoGrid{
    grid-template-columns:1fr;
  }

  .bossTop{
    justify-items:center;
    text-align:center;
  }

  #activeBoostPanel{
    width:calc(100vw - 20px);
    max-width:calc(100vw - 20px);
    max-height:56px;
    margin:4px auto 6px;
    padding:3px 0;
    gap:7px;
    scrollbar-width:none;
    overflow-x:auto;
    overflow-y:hidden;
  }

  .boostChip{
    min-width:118px;
    min-height:36px;
    padding:6px 8px;
    grid-template-columns:28px 1fr;
  }

  .boostIcon{
    width:28px;
    height:28px;
    font-size:16px;
  }

  .adminAbuseControls,
  .adminAbuseGrid{
    grid-template-columns:1fr 1fr;
  }

  .globalBossEventBannerBtn{
    width:calc(100vw - 20px);
    margin:6px auto;
    padding:9px 12px;
  }

  .globalBossEventBannerBtn b{
    font-size:16px;
  }

  .globalBossEventView{
    padding:
      max(8px, env(safe-area-inset-top))
      max(8px, env(safe-area-inset-right))
      max(8px, env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left));
    overflow:auto;
  }

  .crystalEventView{
    padding:
      max(10px, env(safe-area-inset-top))
      max(10px, env(safe-area-inset-right))
      max(10px, env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left));
  }

  .crystalCaveShell{
    min-height:calc(100dvh - 20px);
  }

  .crystalEventTop{
    grid-template-columns:1fr;
    align-items:stretch;
  }

  .crystalEventGrid{
    grid-template-columns:1fr;
  }

  .crystalMineCard{
    min-height:330px;
  }

  .crystalMole{
    width:150px;
    height:136px;
  }

  .crystalUpgradeRowTop,
  .crystalShopItemTop,
  .crystalPetChance{
    align-items:flex-start;
    flex-direction:column;
  }

  .globalBossEventShell{
    min-height:calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    gap:8px;
    max-height:none;
  }

  .globalBossEventTop{
    position:sticky;
    top:0;
    z-index:5;
    align-items:flex-start;
    flex-direction:column;
    border-radius:22px;
  }

  .globalBossEventTop h2{
    font-size:24px;
  }

  .globalBossEventTopActions{
    width:100%;
    justify-content:stretch;
  }

  .globalBossBackBtn{
    flex:1 1 auto;
    padding:10px 9px;
    font-size:12px;
  }

  .globalBossEventGrid{
    grid-template-columns:1fr;
  }

  .globalBossArena{
    min-height:calc(100vh - 190px);
    padding:14px;
    border-radius:24px;
  }

  .globalBossHeader{
    flex-direction:column;
  }

  .globalBossHeader h3{
    font-size:28px;
  }

  .globalBossRewardTop{
    min-width:0;
    width:100%;
    text-align:left;
  }

  .bossVisual.eventBossVisual{
    width:210px;
    height:210px;
  }

  .bossVisual.eventBossVisual::before,
  .bossVisual.eventBossVisual::after{
    top:72px;
    width:20px;
    height:20px;
  }

  .bossVisual.eventBossVisual::before{left:58px;}
  .bossVisual.eventBossVisual::after{right:58px;}

  .eventBossVisual .bossNose{
    top:110px;
    width:30px;
    height:30px;
  }

  .eventBossActionRow,
  .eventBossHpText,
  .eventBossInfoLine{
    grid-template-columns:1fr;
    flex-direction:column;
  }

  .globalBossSide{
    display:none;
    max-height:calc(100vh - 190px);
    border-radius:24px;
  }

  .globalBossEventGrid{
    grid-template-columns:1fr;
  }

  .bossMetricBtn{
    width:48px;
    height:42px;
    font-size:21px;
  }

  .globalBossEventView.leaderboardTab .globalBossArena{
    display:none;
  }

  .globalBossEventView.leaderboardTab .globalBossSide{
    display:block;
  }

  #authOverlay,
  .accountMenuOverlay,
  #upgradeInfoOverlay,
  #eggChoiceOverlay,
  #rebirthOverlay,
  #adminBoostModal{
    align-items:flex-start;
    justify-content:center;
    padding:
      max(10px, env(safe-area-inset-top))
      max(10px, env(safe-area-inset-right))
      max(10px, env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left));
    overflow:auto;
  }

  #authCard,
  .accountMenuCard,
  #upgradeInfoCard,
  #eggChoiceCard,
  #rebirthCard,
  #adminBoostCard{
    box-sizing:border-box;
    width:min(100%, calc(100vw - 20px));
    max-height:calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow-y:auto;
    overscroll-behavior:contain;
  }

  #authCard{
    padding:22px 18px;
    border-radius:26px;
  }

  #authCard h2{
    font-size:25px;
  }

  .accountMenuTop,
  #upgradeInfoTop{
    position:sticky;
    top:0;
    z-index:3;
    padding:10px 0;
    background:linear-gradient(180deg,rgba(15,18,30,0.98),rgba(15,18,30,0.9));
    backdrop-filter:blur(12px);
  }

  #upgradeInfoCard{
    padding-top:8px;
  }

  #eggChoiceCard{
    padding:18px 14px;
    border-radius:24px;
  }

  #eggChoiceActions{
    position:sticky;
    bottom:0;
    z-index:2;
    padding-top:10px;
    background:linear-gradient(180deg,rgba(18,21,37,0),rgba(18,21,37,0.96) 28%);
  }

  #rebirthCard{
    min-height:auto;
    padding:18px 14px 14px;
    border-radius:24px;
  }

  #rebirthHero{
    margin-bottom:12px;
  }

  #rebirthHeroRing{
    width:82px;
    height:82px;
  }

  #rebirthHeroTitle{
    font-size:27px;
  }

  #rebirthUnlockList{
    max-height:calc(100dvh - 310px);
    overflow-y:auto;
    overscroll-behavior:contain;
    padding-right:2px;
  }

  #rebirthContinueBtn,
  .adminBoostModalActions{
    position:sticky;
    bottom:0;
    z-index:3;
  }

  #rebirthContinueBtn{
    margin-bottom:2px;
  }

  #adminBoostCard{
    padding:18px;
    border-radius:24px;
  }

  #adminBoostCard h3{
    position:sticky;
    top:-18px;
    z-index:3;
    margin:0 -18px 12px;
    padding:16px 48px 12px 18px;
    background:linear-gradient(145deg, rgba(255,244,213,0.98), rgba(255,203,105,0.92));
    border-radius:24px 24px 0 0;
  }

  .adminBoostModalActions{
    margin:14px -18px -18px;
    padding:12px 18px 16px;
    background:linear-gradient(180deg,rgba(255,223,156,0),rgba(255,221,149,0.96) 30%);
  }

  #adminPanel{
    left:max(10px, env(safe-area-inset-left));
    right:max(10px, env(safe-area-inset-right));
    bottom:calc(10px + env(safe-area-inset-bottom));
    top:auto;
    width:auto;
    max-width:none;
    max-height:calc(86dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding:14px;
    border-radius:24px;
    overscroll-behavior:contain;
  }

  #adminPanel h3{
    position:sticky;
    top:-14px;
    z-index:4;
    margin:-14px -14px 12px;
    padding:15px 52px 12px 14px;
    background:linear-gradient(180deg,rgba(14,16,27,0.98),rgba(12,14,24,0.92));
    border-radius:24px 24px 0 0;
  }

  #adminPanel .adminRow,
  .adminBossGrid,
  .adminAbuseControls,
  .adminAbuseGrid,
  .supportTicketActions{
    grid-template-columns:1fr;
  }

  #adminPanel .adminAbuseGrid button.mega,
  #adminPanel .adminAbuseGrid button.danger{
    grid-column:auto;
  }

  #adminToggle{
    right:max(10px, env(safe-area-inset-right));
    bottom:calc(116px + env(safe-area-inset-bottom));
    padding:10px 12px;
    font-size:12px;
  }

  .leaderboardCategoryGrid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .eggCard,
  .petCard,
  .skinCard,
  .leaderboardCard,
  .bossCard{
    max-width:100%;
  }
}

@media (max-width: 700px) and (orientation: portrait){
  body{
    padding-bottom:calc(28px + env(safe-area-inset-bottom));
  }

  #leftDock,
  #rightDock{
    position:fixed;
    top:calc(142px + env(safe-area-inset-top));
    bottom:auto;
    flex-direction:column;
    flex-wrap:nowrap;
    gap:8px;
    max-height:calc(100dvh - 190px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow-y:auto;
    overflow-x:hidden;
    padding:4px;
    border-radius:18px;
    scrollbar-width:none;
  }

  #leftDock::-webkit-scrollbar,
  #rightDock::-webkit-scrollbar{
    display:none;
  }

  #leftDock{
    left:max(6px, env(safe-area-inset-left));
    right:auto;
  }

  #rightDock{
    right:max(6px, env(safe-area-inset-right));
    left:auto;
  }

  .dockBtn{
    flex:0 0 42px;
    width:42px;
    height:42px;
    min-width:42px;
    font-size:21px;
    border-radius:15px;
  }

  .eventDockBtn::after{
    bottom:-7px;
    font-size:7px;
    padding:1px 5px;
  }

  .dockCrystalIcon{
    width:23px;
    height:27px;
  }

  #mainPlay{
    width:calc(100vw - 92px);
    margin-left:auto;
    margin-right:auto;
  }

  #shop{
    width:calc(100vw - 92px);
    margin-left:auto;
    margin-right:auto;
  }

  .crystalEventView{
    padding:10px;
  }

  .crystalEventTop{
    grid-template-columns:1fr;
    text-align:center;
  }

  .crystalEventCountdown,
  .crystalCurrencyPill{
    min-width:0;
    width:100%;
  }
}

@media (max-width: 700px) and (orientation: portrait){
  :root{
    --mobile-bottom-ui:118px;
    --mobile-top-ui:92px;
  }

  body{
    width:100%;
    min-height:100dvh;
    padding:
      max(8px, env(safe-area-inset-top))
      max(8px, env(safe-area-inset-right))
      calc(var(--mobile-bottom-ui) + env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left));
    align-items:stretch;
    overflow-x:hidden;
  }

  #topHud{
    width:100%;
    margin:var(--mobile-top-ui) auto 8px;
    padding:9px 11px;
    grid-template-columns:1fr;
    gap:6px;
    border-radius:20px;
  }

  h1{
    font-size:clamp(23px, 7.3vw, 29px);
  }

  #rebirthLabel{
    margin-top:4px;
    font-size:11px;
    line-height:1.25;
  }

  #topCurrencies{
    width:100%;
    min-width:0;
    justify-items:center;
  }

  #ui{
    width:100%;
    justify-content:center;
    gap:8px;
    font-size:clamp(20px, 6vw, 25px);
  }

  #ui .diamondCurrency{
    font-size:clamp(20px, 6vw, 25px) !important;
  }

  #stats{
    font-size:11px;
  }

  .accountStatus{
    position:fixed;
    top:max(8px, env(safe-area-inset-top));
    right:max(8px, env(safe-area-inset-right));
    box-sizing:border-box;
    max-width:calc(100vw - 180px - env(safe-area-inset-left) - env(safe-area-inset-right));
    min-height:34px;
    padding:5px 6px;
    gap:4px;
    border-radius:16px;
    font-size:9px;
    z-index:240;
  }

  .cloudSaveStatus{
    padding:4px 7px;
    font-size:10px;
  }

  .accountStatus button{
    padding:7px 8px;
    border-radius:12px;
    font-size:10px;
  }

  #autoOpenToggle,
  #autoCrateToggle{
    position:fixed;
    left:max(8px, env(safe-area-inset-left));
    width:142px;
    min-width:0;
    min-height:34px;
    margin:0;
    padding:8px 9px;
    border-radius:15px;
    font-size:9px;
    z-index:235;
  }

  #autoOpenToggle{top:max(8px, env(safe-area-inset-top));}
  #autoCrateToggle{top:calc(max(8px, env(safe-area-inset-top)) + 40px);}

  .gameInfoBtn,
  .appInstallBtn,
  .freeRewardsBtn,
  .streakHud,
  .codesBtn{
    position:fixed;
    top:auto;
    bottom:calc(70px + env(safe-area-inset-bottom));
    z-index:238;
    margin:0;
  }

  .gameInfoBtn{left:calc(max(8px, env(safe-area-inset-left)) + 0px);}
  .streakHud{left:calc(max(8px, env(safe-area-inset-left)) + 46px);}
  .appInstallBtn{left:calc(max(8px, env(safe-area-inset-left)) + 136px);}
  .freeRewardsBtn{left:calc(max(8px, env(safe-area-inset-left)) + 182px);}
  .codesBtn{
    right:max(8px, env(safe-area-inset-right));
    left:auto;
    min-width:74px;
    min-height:36px;
    padding:0 12px;
    border-radius:18px;
    font-size:11px;
  }

  #leftDock,
  #rightDock{
    position:fixed;
    left:max(8px, env(safe-area-inset-left));
    right:max(8px, env(safe-area-inset-right));
    top:auto;
    bottom:calc(8px + env(safe-area-inset-bottom));
    width:auto;
    max-height:none;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    gap:8px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:6px;
    border-radius:20px;
    background:rgba(7,10,18,.72);
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 16px 42px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.12);
    backdrop-filter:blur(16px) saturate(1.25);
    scrollbar-width:none;
    z-index:236;
  }

  #leftDock{
    bottom:calc(8px + env(safe-area-inset-bottom));
    right:calc(50vw + 4px);
  }

  #rightDock{
    bottom:calc(8px + env(safe-area-inset-bottom));
    left:calc(50vw + 4px);
  }

  #leftDock::-webkit-scrollbar,
  #rightDock::-webkit-scrollbar{
    display:none;
  }

  .dockBtn{
    flex:0 0 42px;
    width:42px;
    height:42px;
    min-width:42px;
    border-radius:16px;
    font-size:21px;
  }

  #mainPlay{
    width:100%;
    min-height:auto;
    margin:4px auto 0;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
  }

  #kretWrap{
    width:min(72vw, 285px);
    height:min(72vw, 285px);
    margin:0 auto;
  }

  #kret{
    width:min(57vw, 220px);
    height:min(57vw, 220px);
  }

  #rebirthBtn{
    width:min(100%, 360px);
    margin:8px auto calc(var(--mobile-bottom-ui) + 14px + env(safe-area-inset-bottom));
    padding:12px 14px;
    gap:8px;
    border-radius:20px;
  }

  .rebirthBtnTop b{
    font-size:clamp(19px, 7vw, 24px);
  }

  .rebirthBtnBottom{
    font-size:12px;
  }

  #rightPanels{
    width:min(94vw, 360px);
    margin:0 auto !important;
  }

  #holdPanel,
  #autoPanel,
  #diamondClickPanel{
    width:100%;
    max-width:360px;
    border-radius:18px;
  }

  #shop,
  #shop.voidPreviewLayout{
    width:100%;
    margin:12px auto 0;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
  }

  .shopColumn,
  .shopColumn.endlessColumn,
  #shop.voidPreviewLayout .normalColumn,
  #shop.voidPreviewLayout .endlessColumn.voidPreview{
    width:100%;
    max-width:390px;
    transform:none;
  }

  .card{
    width:min(100%, 360px);
    box-sizing:border-box;
  }

  .slidePanel,
  .slidePanel.rightSide{
    left:max(8px, env(safe-area-inset-left)) !important;
    right:max(8px, env(safe-area-inset-right)) !important;
    bottom:calc(var(--mobile-bottom-ui) + env(safe-area-inset-bottom)) !important;
    width:auto !important;
    max-width:none !important;
    max-height:calc(100dvh - var(--mobile-bottom-ui) - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    border-radius:26px;
    z-index:950;
  }

  .slideHeader{
    position:sticky;
    top:0;
    z-index:5;
    background:linear-gradient(180deg, rgba(21,24,36,.96), rgba(21,24,36,.78));
    backdrop-filter:blur(12px);
  }

  .panelScroll{
    max-height:none;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }

  .itemDropFeed{
    bottom:calc(var(--mobile-bottom-ui) + 18px + env(safe-area-inset-bottom));
    width:calc(100vw - 18px);
  }

  .potionBuffHud{
    bottom:calc(var(--mobile-bottom-ui) + 14px + env(safe-area-inset-bottom));
    left:max(8px, env(safe-area-inset-left));
    z-index:180;
  }

  #weatherHud{
    bottom:calc(var(--mobile-bottom-ui) + 4px + env(safe-area-inset-bottom));
    left:max(8px, env(safe-area-inset-left));
    max-width:min(40vw, 178px);
    z-index:210;
  }

  .weatherHudCard{
    min-width:0;
    padding:8px 10px;
    border-radius:17px;
  }

  .weatherHudCard span{
    width:38px;
    height:38px;
    font-size:22px;
    border-radius:13px;
  }

  .weatherHudCard b{
    font-size:14px;
  }

  .nextUpdateCountdown{
    bottom:calc(var(--mobile-bottom-ui) + 12px + env(safe-area-inset-bottom));
    left:max(8px, env(safe-area-inset-left));
    max-width:calc(100vw - 16px);
    z-index:209;
  }

  #adminToggle{
    right:max(8px, env(safe-area-inset-right));
    bottom:calc(var(--mobile-bottom-ui) + 12px + env(safe-area-inset-bottom));
    z-index:245;
  }

  #adminPanel{
    left:max(8px, env(safe-area-inset-left));
    right:max(8px, env(safe-area-inset-right));
    bottom:calc(var(--mobile-bottom-ui) + 8px + env(safe-area-inset-bottom));
    width:auto;
    max-height:calc(100dvh - var(--mobile-bottom-ui) - 24px);
  }
}

@media (max-width: 700px) and (orientation: portrait) and (max-height: 760px){
  :root{
    --mobile-bottom-ui:110px;
    --mobile-top-ui:86px;
  }

  #topHud{
    padding:8px 10px;
    gap:5px;
  }

  h1{
    font-size:clamp(22px, 6.8vw, 26px);
  }

  #ui,
  #ui .diamondCurrency{
    font-size:clamp(18px, 5.6vw, 22px) !important;
  }

  #stats,
  #rebirthLabel{
    font-size:10px;
  }

  #autoOpenToggle,
  #autoCrateToggle{
    width:130px;
    min-height:32px;
    padding:7px 8px;
    font-size:8px;
  }

  #autoCrateToggle{
    top:calc(max(8px, env(safe-area-inset-top)) + 38px);
  }

  .accountStatus{
    max-width:calc(100vw - 170px - env(safe-area-inset-left) - env(safe-area-inset-right));
    padding:5px 6px;
  }

  #mainPlay{
    margin-top:2px;
    gap:2px;
  }

  #kretWrap{
    width:min(50vw, 190px);
    height:min(50vw, 190px);
  }

  #kret{
    width:min(42vw, 160px);
    height:min(42vw, 160px);
  }

  #rebirthBtn{
    min-height:0;
    padding:10px 12px;
    gap:7px;
  }

  .rebirthBtnTop b{
    font-size:clamp(18px, 6vw, 22px);
  }

  .rebirthBtnTop small{
    padding:4px 8px;
  }

  #weatherHud{
    display:none;
  }
}

@media (prefers-reduced-motion: reduce){
  .eggCard,
  .petCard,
  .bagCard,
  .potionCard,
  #hatchResult.show,
  .freeRewardGift.claimed .freeRewardCheck,
  #codesStatus:not(:empty){
    animation:none !important;
  }

  .dockBtn,
  .panelAction,
  .panelTab,
  .eggCard,
  .petCard,
  .bagCard,
  .potionCard,
  .freeRewardGift,
  #codesCard{
    transition:none !important;
  }
}