/* Brimful — capacity / packing sort puzzle. All rules scoped under .brimful so
   they never leak into the kit chrome (dock, modals, header). */
.brimful{
  --unit: clamp(46px, 14vmin, 92px);
  --rim: calc(var(--unit) * 0.16);
  position:relative; width:100%; min-height:78vh;
  display:flex; flex-direction:column; align-items:center;
  border-radius:18px; overflow:hidden;
  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; user-select:none; touch-action:manipulation;
  font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
/* in the native app the kit fullscreens the surface */
body.tz-app .brimful{ min-height:100svh; border-radius:0; }

.brimful .b-orb{ position:absolute; border-radius:50%; filter:blur(60px); z-index:0; pointer-events:none; opacity:.4;}
.brimful .b-orb.a{ width:300px;height:300px; background:#7d4dff; top:-70px; left:-50px; animation:bfl 16s ease-in-out infinite;}
.brimful .b-orb.b{ width:260px;height:260px; background:#ff3b9a; bottom:-60px; right:-40px; animation:bfl 18s ease-in-out -6s infinite;}
.brimful .b-orb.c{ width:220px;height:220px; background:#15c5b8; top:45%; left:62%; animation:bfl 20s ease-in-out -11s infinite;}
@keyframes bfl{ 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(30px) scale(1.08)} }
.brimful .b-vignette{ position:absolute; inset:0; z-index:1; pointer-events:none; box-shadow: inset 0 0 180px 40px rgba(0,0,0,.5); }
.brimful .b-stage{ position:absolute; left:50%; bottom:14%; transform:translateX(-50%); z-index:1; pointer-events:none;
  width:min(540px,90%); height:120px; border-radius:50%; background:radial-gradient(ellipse, rgba(150,110,255,.30), transparent 70%); filter:blur(22px); }

.brimful .b-head{ z-index:3; text-align:center; margin-top:14px; }
.brimful .b-sub{ font-size:11px; opacity:.55; margin-top:4px; letter-spacing:2px; text-transform:uppercase;}

.brimful .b-hud{ z-index:3; display:flex; gap:12px; margin-top:12px; }
.brimful .b-chip{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.13); padding:7px 14px; border-radius:999px;
  backdrop-filter:blur(10px); display:flex; gap:6px; align-items:center; font-size:13px; font-weight:600;
  box-shadow:0 4px 14px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.15);}
.brimful .b-chip b{ font-variant-numeric:tabular-nums; }
.brimful .ico{ width:17px; height:17px; display:inline-block; vertical-align:-3px; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.brimful .ico.fill{ fill:currentColor; stroke:none; }

.brimful #board{ z-index:3; flex:1; width:100%; max-width:640px;
  display:flex; flex-wrap:wrap; align-items:flex-end; align-content:center; justify-content:center;
  gap:clamp(14px,5vmin,30px) clamp(12px,4vmin,26px); padding:22px 18px; }

.brimful .tube{ position:relative; width:var(--unit);
  border-radius: calc(var(--unit)*0.12) calc(var(--unit)*0.12) calc(var(--unit)*0.55) calc(var(--unit)*0.55);
  cursor:pointer; transition: transform .3s cubic-bezier(.34,1.56,.64,1); filter: drop-shadow(0 14px 14px rgba(0,0,0,.35)); }
.brimful .fluidwrap{ position:absolute; inset:0; display:flex; flex-direction:column-reverse; border-radius:inherit; overflow:hidden; }
.brimful .tube::before{ content:""; position:absolute; inset:0; border-radius:inherit; z-index:2; pointer-events:none;
  border:2.5px solid rgba(255,255,255,.5); border-top-width: var(--rim);
  background:linear-gradient(105deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.16) 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); }
.brimful .tube::after{ content:""; position:absolute; top:var(--rim); bottom:6%; left:20%; width:13%; z-index:3; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.05) 70%, transparent); border-radius:50%; filter:blur(.5px); opacity:.65; }
.brimful .tube .shadow{ position:absolute; bottom:-15px; left:50%; transform:translateX(-50%);
  width:78%; height:13px; background:radial-gradient(ellipse, rgba(0,0,0,.5), transparent 70%); z-index:0; filter:blur(2px);}
.brimful .tube.selected{ transform:translateY(-26px) scale(1.04); }
.brimful .tube.selected::before{ border-color:rgba(200,160,255,.95); box-shadow:inset 0 0 16px rgba(190,150,255,.35), 0 0 22px rgba(150,90,255,.55); }
.brimful .tube.shake{ animation:bshake .34s; }
@keyframes bshake{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-7px)} 60%{transform:translateX(7px)} }
.brimful .tube.win{ animation:bwinPop .55s ease; }
@keyframes bwinPop{ 45%{ transform:translateY(-12px) scale(1.07);} }
.brimful .tube.valid::before{ border-color:rgba(64,232,142,.92); animation:bvalid 1.15s ease-in-out infinite; }
@keyframes bvalid{ 0%,100%{ box-shadow:inset 0 0 12px rgba(64,232,142,.20), 0 0 12px rgba(40,220,130,.32); }
  50%{ box-shadow:inset 0 0 18px rgba(64,232,142,.38), 0 0 24px rgba(40,220,130,.66); } }
.brimful .tube.done::before{ border-color:rgba(82,224,160,.95); box-shadow:inset 0 0 14px rgba(82,224,160,.22), 0 0 16px rgba(60,210,140,.5); }
.brimful .tube.done .cap{ color:#5fe6a8; }
.brimful .brim{ position:absolute; top:calc(var(--rim) + 3px); left:9%; right:9%; height:0; z-index:3; pointer-events:none;
  border-top:1.5px dashed rgba(255,255,255,.30); }
.brimful .cap{ position:absolute; top:calc(var(--rim) * -0.2); left:0; right:0; text-align:center; z-index:4; pointer-events:none;
  font-size:10px; font-weight:700; opacity:.55; letter-spacing:.3px; }

.brimful .liquid{ position:relative; width:100%; height:var(--unit); }
.brimful .liquid::before{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(255,255,255,.30) 0 8%, rgba(255,255,255,0) 26%, rgba(255,255,255,0) 74%, rgba(0,0,0,.22) 100%); pointer-events:none; }
.brimful .fluidwrap .liquid:last-child{ border-radius: 46% 46% 0 0 / 30% 30% 0 0; }
.brimful .fluidwrap .liquid:last-child::after{ content:""; position:absolute; top:0; left:6%; right:6%; height:32%;
  background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0)); border-radius:50%; pointer-events:none; }
.brimful .tube.selected .fluidwrap .liquid:last-child{ animation:bwobble 1.1s ease-in-out infinite; }
@keyframes bwobble{ 0%,100%{ transform:skewX(0) } 50%{ transform:skewX(-3deg) } }
/* drop + confetti render on document.body (position:fixed) → NOT scoped under .brimful */
.b-drop{ position:fixed; left:0; top:0; z-index:50; pointer-events:none;
  border-radius:46% 46% 50% 50%; box-shadow:inset 0 0 10px rgba(255,255,255,.4); }

.brimful .b-hint{ z-index:3; font-size:12px; opacity:.55; margin:2px 0 10px; text-align:center; padding:0 16px; min-height:16px; transition:color .2s, opacity .2s;}
.brimful .b-hint.warn{ color:#ffcf66; opacity:1; }
.brimful .b-controls{ z-index:3; display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:20px; padding:0 14px; }
.brimful .b-btn{ font-family:inherit; font-size:14px; font-weight:700; color:#fff; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px; border:1px solid rgba(255,255,255,.18); border-radius:15px; padding:12px 18px;
  background:rgba(255,255,255,.08); backdrop-filter:blur(10px); box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 6px 16px rgba(0,0,0,.3); transition:transform .12s; }
.brimful .b-btn:active{ transform:scale(.93); }
.brimful .b-btn.primary{ background:linear-gradient(180deg,#8a5aff,#5a2fe0); border-color:#a98aff;}
.brimful .b-btn.ad{ background:linear-gradient(180deg,#ff8a3d,#e0532f); border-color:#ffa770;}

.brimful #win{ position:absolute; inset:0; z-index:60; display:none; flex-direction:column; align-items:center; justify-content:center;
  background:rgba(8,6,20,.74); backdrop-filter:blur(8px); }
.brimful #win.show{ display:flex; animation:bfade .35s; }
@keyframes bfade{ from{opacity:0; transform:scale(.96)} to{opacity:1; transform:scale(1)} }
.brimful #win h2{ font-size:36px; font-weight:800; margin:4px 0; background:linear-gradient(180deg,#fff,#e3c9ff); -webkit-background-clip:text; background-clip:text; color:transparent;}
.brimful #win p{ opacity:.65; margin:4px 0 22px;}
.brimful .b-confetti{ position:fixed; width:11px; height:15px; top:-20px; z-index:59; pointer-events:none; border-radius:2px;}