/*!
 * Brimful — game-specific loading screen styles (LOOK only).
 * The engine + base (#tz-game-loader fixed overlay + fade-out) come from
 * kit/tz-game-loader.css. Load this AFTER it. A jar fills to the brim while the
 * game boots; the liquid hue cycles to hint the colour-sort theme.
 */

/* match the board's cozy purple so loader → game is one continuous surface */
#tz-game-loader.brimful-loader{
  background:
    radial-gradient(120% 80% at 50% 118%, rgba(40,210,196,.12), transparent 58%),
    radial-gradient(100% 72% at 50% -12%, #4a3a8f 0%, #2c2154 34%, #16112f 70%, #070512 100%);
  color:#eaf0ff;
}
.bl-card{ display:flex; flex-direction:column; align-items:center; gap:18px; padding:24px;
  font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }

/* the glass jar */
.bl-jar{ position:relative; width:78px; height:122px; border-radius:10px 10px 34px 34px; overflow:hidden;
  background:rgba(255,255,255,.05);
  box-shadow: inset 0 0 16px rgba(255,255,255,.08), 0 16px 30px rgba(0,0,0,.42); }
/* glass rim + sheen, painted ON TOP of the liquid */
.bl-glass{ position:absolute; inset:0; border-radius:inherit; z-index:3; pointer-events:none;
  border:2.5px solid rgba(255,255,255,.5); border-top-width:12px;
  background:linear-gradient(105deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.18) 50%, rgba(255,255,255,0) 60%);
  box-shadow: inset 0 0 14px rgba(255,255,255,.12), inset -6px 0 10px rgba(0,0,0,.18); }

/* the liquid — rises from below, holds at the brim, drains, loops.
   translateY keeps it on the compositor; hue-rotate cycles the colour. */
.bl-fill{ position:absolute; left:0; right:0; bottom:0; height:100%; z-index:1;
  background:linear-gradient(180deg, #ff6e8e, #d11f4e); transform:translateY(100%);
  animation: bl-rise 2.4s cubic-bezier(.45,.05,.4,1) infinite, bl-hue 7.2s linear infinite; }
/* wavy surface highlight (white → stays white under hue-rotate) */
.bl-fill::before{ content:""; position:absolute; top:-7px; left:0; right:0; height:14px; border-radius:50%;
  background:rgba(255,255,255,.30); }
.bl-fill::after{ content:""; position:absolute; top:2px; left:9%; width:24%; height:34%;
  background:linear-gradient(180deg, rgba(255,255,255,.55), transparent); border-radius:50%; }

@keyframes bl-rise{
  0%{ transform:translateY(100%); }
  50%{ transform:translateY(8%); }    /* filled almost to the brim */
  64%{ transform:translateY(8%); }    /* holds at the brim */
  100%{ transform:translateY(100%); } /* drains → loop */
}
@keyframes bl-hue{ from{ filter:hue-rotate(0deg); } to{ filter:hue-rotate(360deg); } }

/* rising bubbles */
.bl-bub{ position:absolute; bottom:10%; width:7px; height:7px; border-radius:50%; z-index:2;
  background:rgba(255,255,255,.5); opacity:0; }
.bl-bub1{ left:26%; animation: bl-bub 2.4s ease-in .4s infinite; }
.bl-bub2{ left:54%; width:5px; height:5px; animation: bl-bub 2.4s ease-in 1.0s infinite; }
.bl-bub3{ left:68%; width:6px; height:6px; animation: bl-bub 2.4s ease-in 1.5s infinite; }
@keyframes bl-bub{ 0%{ transform:translateY(0) scale(.5); opacity:0; } 20%{ opacity:.7; }
  80%{ opacity:.45; } 100%{ transform:translateY(-72px) scale(1); opacity:0; } }

.bl-title{ font-size:30px; font-weight:800; letter-spacing:.5px; line-height:1;
  background:linear-gradient(180deg,#fff,#e3c9ff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.bl-sub{ font-size:13px; opacity:.6; margin-top:-6px; }

@media (prefers-reduced-motion: reduce){
  .bl-fill{ animation:bl-hue 7.2s linear infinite; transform:translateY(22%); } /* sit filled, no rise/drain */
  .bl-bub{ display:none; }
}