/* ---- responsive fixed-canvas scaling via container query units ---- */
.frame{
  container-type: inline-size;
  position:relative;
  overflow:hidden;
}
.art{
  width: 620px;
  height: 620px;
  transform: scale(calc(100cqw / 620));
  transform-origin: top left;
  position:absolute;
  inset:0;
}
.frame:hover .steam{ animation-duration: 3.8s; }

.composition{
  position:absolute;
  left:50%; top:50%;
  width:0; height:0;
}
.pin{
  position:absolute;
  left:0; top:0;
}

/* ---------------- ambient light + table shadow ---------------- */
.glow{
  width: 900px; height: 900px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(255,224,160,0.55) 0%, rgba(255,224,160,0.18) 40%, transparent 68%);
  transform: translate(-50%,-52%);
  pointer-events:none;
}
.counter-flakes{
  position:absolute; left:0; top:0;
  width:2px; height:2px; border-radius:50%;
  opacity: 0.7;
  box-shadow:
    -258.9px 178.4px 0 1.08px #B33F2E, -44.5px -335.3px 0 0.96px #8F2E20, -303.3px 162.7px 0 0.74px #B33F2E,
    203.2px -241.1px 0 0.91px #8F2E20, 319.4px -110.8px 0 0.76px #B33F2E, -309.0px -117.7px 0 0.47px #6B4226,
    278.2px -201.6px 0 0.59px #6B4226, 189.8px 302.4px 0 1.25px #6B4226, 138.0px 275.2px 0 0.78px #B33F2E,
    -209.6px -228.8px 0 0.52px #B33F2E, 108.5px 339.8px 0 0.63px #B33F2E, 140.5px -275.3px 0 0.45px #6B4226,
    225.2px -259.0px 0 0.77px #8F2E20, 236.0px 218.0px 0 1.23px #6B4226, -141.3px 304.8px 0 1.17px #B33F2E,
    119.5px 280.8px 0 0.44px #8F2E20;
}
.table-shadow{
  width: 560px; height: 560px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(60,40,15,0.30) 0%, rgba(60,40,15,0.12) 55%, transparent 75%);
  filter: blur(6px);
  transform: translate(-50%,-42%) translate(0px, 30px);
}

/* ---------------- bowl ---------------- */
.bowl{
  width: 560px; height: 560px;
  border-radius:50%;
  transform: translate(-50%,-50%);
  background:
    radial-gradient(circle at 36% 30%, #FFFDF8 0%, #F2EADA 45%, #DED0B4 76%, #C4B393 100%);
  box-shadow:
    inset 0 -18px 34px rgba(110,86,50,0.30),
    inset 0 10px 18px rgba(255,255,255,0.65),
    inset 0 0 0 2px rgba(255,255,255,0.4),
    0 34px 50px rgba(43,33,24,0.30);
}
.bowl::after{
  content:"";
  position:absolute; inset: 10px;
  border-radius:50%;
  box-shadow: inset 0 2px 3px rgba(255,255,255,0.55);
  pointer-events:none;
}

/* ---------------- completion celebration ---------------- */
.celebrate-ring{
  width: 560px; height: 560px;
  border-radius:50%;
  transform: translate(-50%,-50%) scale(0.94);
  border: 2px solid var(--gold-bright);
  opacity:0;
  pointer-events:none;
}
.composition.complete .celebrate-ring{
  animation: ringPulse 1.1s ease-out;
}
@keyframes ringPulse{
  0%   { opacity: 0.9; transform: translate(-50%,-50%) scale(0.92); }
  70%  { opacity: 0.25; transform: translate(-50%,-50%) scale(1.14); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.2); }
}

.broth{
  width: 486px; height: 486px;
  border-radius:50%;
  transform: translate(-50%,-50%);
  background:
    radial-gradient(circle at 40% 34%, #F4BE68 0%, #E29F42 42%, #BE7C2C 76%, #8F5A1F 100%);
  box-shadow:
    inset 0 14px 32px rgba(70,40,8,0.40),
    inset 0 -8px 16px rgba(255,224,160,0.30);
  overflow:hidden;
  transition: filter .6s ease;
}
/* ambient simmer — a slow drifting highlight so the broth feels alive even at rest */
.broth::before{
  content:"";
  position:absolute;
  width:220px; height:140px;
  left:18%; top:14%;
  border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,0.30), transparent 70%);
  filter: blur(10px);
  animation: simmerDrift 9s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes simmerDrift{
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(20px,-12px) scale(1.1); }
}
/* the more toppings, the richer the broth glow */
.composition.show-egg .broth,
.composition.show-garlic .broth,
.composition.show-scallion .broth,
.composition.show-chili .broth,
.composition.show-calamansi .broth{
  filter: saturate(1.08) brightness(1.03);
}

/* ---------------- hover previews ----------------
   Hovering a garnish chip (before clicking) ghosts a faint preview
   of that ingredient into the bowl. Uses :has() to reach across
   the page from the chip rail to the canvas with zero JavaScript. */
body:has(.chip-toggle[data-target="egg"]:hover) .composition:not(.show-egg) .egg{
  opacity: .32;
  transform: translate(-118px,-88px) rotate(-6deg) scale(0.85);
}
body:has(.chip-toggle[data-target="calamansi"]:hover) .composition:not(.show-calamansi) .calamansi{
  opacity: .32;
  transform: translate(196px,-198px) rotate(24deg) scale(0.85);
}
body:has(.chip-toggle[data-target="garlic"]:hover) .composition:not(.show-garlic) .opt-garlic{ opacity: .32; }
body:has(.chip-toggle[data-target="scallion"]:hover) .composition:not(.show-scallion) .opt-scallion{ opacity: .32; }
body:has(.chip-toggle[data-target="chili"]:hover) .composition:not(.show-chili) .opt-chili{ opacity: .32; }

/* ---------------- garnish layer (this is what swirls on click) ---------------- */
.garnish-layer{
  position:absolute; left:50%; top:50%; width:0; height:0;
  transform-origin: 0 0;
}
.garnish-layer.stirring{ animation: swirl 1.5s cubic-bezier(.36,.07,.19,.97); }
@keyframes swirl{
  0%   { transform: rotate(0deg) scale(1); }
  35%  { transform: rotate(140deg) scale(0.965); }
  70%  { transform: rotate(300deg) scale(0.99); }
  100% { transform: rotate(360deg) scale(1); }
}

.rice-grains{
  position:absolute; left:0; top:0;
  width:2px; height:2px; border-radius:50%;
  box-shadow:
    -74.0px -144.7px 0 0.79px #FBEFD6, 34.8px 158.9px 0 0.39px #FBEFD6, -27.9px -177.1px 0 0.28px #F1D9A6,
    -185.2px 21.2px 0 1.05px #FBEFD6, 32.4px -46.3px 0 1.08px #FBEFD6, 23.8px -151.7px 0 0.58px #FBEFD6,
    29.8px 19.1px 0 0.81px #FBEFD6, 34.3px 50.6px 0 0.54px #FBEFD6, 27.0px 42.6px 0 0.65px #F1D9A6,
    116.4px -18.8px 0 1.03px #FFF6E4, -84.1px 112.8px 0 0.83px #F6E3BC, -175.6px -84.9px 0 0.65px #FFF6E4,
    96.4px -89.8px 0 1.08px #FBEFD6, 5.0px -139.0px 0 0.51px #F1D9A6, -32.9px 179.8px 0 0.27px #FFF6E4,
    -67.1px -64.9px 0 0.65px #F1D9A6, -96.6px 73.8px 0 0.26px #FFF6E4, 61.8px 192.2px 0 0.94px #FFF6E4,
    91.0px 149.8px 0 0.51px #F1D9A6, -60.7px 39.4px 0 0.64px #F6E3BC, 112.7px -153.3px 0 0.42px #F1D9A6,
    175.1px -6.4px 0 0.35px #F1D9A6, 20.8px 148.4px 0 0.94px #FFF6E4, 76.7px -52.8px 0 0.41px #FBEFD6,
    -136.0px -112.2px 0 0.41px #F1D9A6, 139.1px -132.1px 0 0.45px #F6E3BC, -34.0px -57.3px 0 0.71px #F6E3BC,
    80.0px 1.2px 0 0.76px #FBEFD6, -18.2px 143.4px 0 1.06px #F1D9A6, -42.8px -47.4px 0 0.63px #F1D9A6,
    -122.3px -140.1px 0 0.51px #FBEFD6, -167.0px 21.7px 0 0.68px #FFF6E4, 47.8px -176.9px 0 0.39px #F1D9A6,
    -147.6px -104.1px 0 0.51px #FFF6E4, -10.9px -158.9px 0 0.64px #F1D9A6, -8.2px -80.3px 0 0.33px #FFF6E4,
    100.9px -13.6px 0 0.82px #FBEFD6, -58.1px 71.0px 0 1.02px #FFF6E4, 82.4px -100.6px 0 0.53px #F6E3BC,
    -60.6px -115.9px 0 0.69px #FFF6E4, 57.3px 40.3px 0 0.91px #F6E3BC, 128.6px 122.3px 0 0.87px #F6E3BC,
    -126.0px -7.9px 0 0.86px #FBEFD6, 121.8px -16.1px 0 0.37px #FFF6E4, -22.2px 169.8px 0 1.09px #FFF6E4,
    -12.6px -69.9px 0 0.63px #FBEFD6, -8.6px 56.2px 0 0.92px #FBEFD6, -46.8px 79.6px 0 0.38px #F6E3BC,
    -27.8px 49.3px 0 0.28px #F1D9A6, -15.5px 92.3px 0 0.28px #F6E3BC, 128.7px -146.5px 0 0.94px #F1D9A6,
    66.1px -64.8px 0 0.69px #F6E3BC, 95.1px -163.9px 0 0.87px #F6E3BC, -27.8px 143.7px 0 0.94px #F6E3BC,
    0.5px 100.5px 0 0.49px #F1D9A6, 100.8px 154.1px 0 0.8px #F1D9A6, 137.4px 146.3px 0 0.32px #F6E3BC,
    9.9px -197.5px 0 0.6px #F6E3BC, 45.6px 105.4px 0 0.33px #F6E3BC, -11.1px 85.1px 0 0.7px #FFF6E4,
    76.6px 7.3px 0 0.63px #FBEFD6, -168.9px -24.1px 0 0.23px #FBEFD6, -23.8px 40.0px 0 0.65px #F6E3BC,
    80.9px -24.1px 0 0.68px #F1D9A6, 3.3px -105.9px 0 0.67px #FFF6E4, -124.9px -26.0px 0 0.57px #F1D9A6,
    -24.3px -176.0px 0 0.42px #FBEFD6, -120.7px -83.9px 0 0.31px #F6E3BC, 184.6px 52.4px 0 0.53px #FFF6E4,
    -42.7px -10.1px 0 1.09px #F6E3BC, -142.2px -32.4px 0 0.66px #FFF6E4, -33.1px -62.4px 0 0.28px #FFF6E4,
    -48.6px 2.0px 0 0.47px #FBEFD6, -114.0px 145.6px 0 0.28px #FFF6E4, -96.4px -153.2px 0 0.58px #FFF6E4,
    -39.5px 9.6px 0 0.66px #F1D9A6, 84.2px -169.2px 0 0.25px #F6E3BC, 152.4px -23.5px 0 0.51px #F1D9A6,
    -100.0px -132.5px 0 1.04px #FFF6E4, 13.1px -122.7px 0 0.6px #F6E3BC, 21.4px -129.2px 0 0.63px #F1D9A6;
}

.pepper-flecks{
  position:absolute; left:0; top:0;
  width:1px; height:1px; border-radius:50%;
  box-shadow:
    -74.9px 10.4px 0 0.21px #6B4226, 72.3px 167.7px 0 0.11px #6B4226, 36.5px 51.4px 0 0.44px #6B4226,
    32.9px -93.6px 0 0.26px #6B4226, -20.7px -137.2px 0 0.45px #6B4226, 60.6px -142.6px 0 0.32px #6B4226,
    -68.5px -4.8px 0 0.19px #6B4226, -130.2px -121.0px 0 0.25px #6B4226, 81.9px 16.3px 0 0.12px #6B4226,
    82.2px 137.7px 0 0.41px #6B4226, -14.1px -166.2px 0 0.41px #6B4226, -126.6px 76.8px 0 0.2px #6B4226,
    76.7px -72.4px 0 0.12px #6B4226, -43.3px -74.0px 0 0.46px #6B4226, -79.9px -1.3px 0 0.32px #6B4226,
    39.5px 0.6px 0 0.39px #6B4226, 77.8px 7.2px 0 0.32px #6B4226, 122.6px 95.0px 0 0.28px #6B4226,
    47.3px -182.6px 0 0.36px #6B4226, -22.4px 4.0px 0 0.26px #6B4226, -38.4px -105.4px 0 0.12px #6B4226,
    -25.8px -97.4px 0 0.38px #6B4226, 123.7px 81.4px 0 0.28px #6B4226, -102.8px -45.5px 0 0.29px #6B4226,
    51.4px 171.2px 0 0.13px #6B4226;
}

/* shredded chicken — always present, the "base" of the dish */
.shred{
  position:absolute; left:0; top:0;
  width:52px; height:30px;
  background: linear-gradient(155deg, #A06B3E 0%, #7C4E29 60%, #603A1D 100%);
  box-shadow: inset 0 2px 3px rgba(255,224,180,0.25), 0 3px 5px rgba(60,35,10,0.25);
}
.shred1{ border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; transform: translate(52px,-128px) rotate(18deg); }
.shred2{ border-radius: 45% 55% 40% 60% / 55% 45% 55% 45%; width:60px;height:34px; transform: translate(146px,-30px) rotate(-24deg); }
.shred3{ border-radius: 55% 45% 60% 40% / 45% 55% 40% 60%; width:46px;height:28px; transform: translate(-158px,64px) rotate(35deg); }
.shred4{ border-radius: 50% 50% 40% 60% / 60% 40% 55% 45%; width:50px;height:28px; transform: translate(-52px,150px) rotate(-12deg); }

/* ---------------- optional garnishes: hidden until toggled ---------------- */
.opt-wrap{
  position:absolute; left:0; top:0; width:0; height:0;
  opacity:0;
  transition: opacity .45s ease;
}
.composition.show-scallion .opt-scallion{ opacity:1; }
.composition.show-chili .opt-chili{ opacity:1; }
.composition.show-garlic .opt-garlic{ opacity:1; }

/* soft-boiled egg half */
.egg{
  position:absolute; left:0; top:0;
  width:76px; height:64px;
  border-radius:50%;
  opacity:0;
  background: radial-gradient(circle at 42% 38%, #FFFDF6 0%, #FBF3E2 55%, #EDE0C4 100%);
  box-shadow: 0 4px 8px rgba(60,35,10,0.22), inset 0 -4px 8px rgba(180,150,100,0.18);
  transform: translate(-118px,-88px) rotate(-6deg) scale(0.35);
  transition: transform .5s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
}
.composition.show-egg .egg{ opacity:1; transform: translate(-118px,-88px) rotate(-6deg) scale(1); }
.egg::after{
  content:"";
  position:absolute;
  width:34px; height:32px;
  left:50%; top:52%;
  transform: translate(-50%,-50%);
  border-radius:50%;
  background: radial-gradient(circle at 38% 32%, #FBCB6B 0%, #E8A233 55%, #C97E1D 100%);
  box-shadow: inset 0 -3px 5px rgba(150,90,10,0.35), inset 0 2px 3px rgba(255,230,170,0.5);
}

.garlic{
  position:absolute; left:0; top:0;
  width:3px; height:3px; border-radius:50%;
  box-shadow:
    172.3px 112.8px 0 0.85px #E8C77A, 150.4px 129.6px 0 0.79px #F1D68C, 137.9px 115.3px 0 0.42px #F1D68C,
    147.5px 132.0px 0 0.43px #E8C77A, 142.8px 122.6px 0 0.46px #F1D68C, 131.7px 149.3px 0 0.75px #D9AE52,
    149.3px 130.7px 0 1.07px #E8C77A, 141.1px 123.6px 0 1.09px #D9AE52, 152.6px 134.2px 0 0.99px #E8C77A,
    125.9px 147.7px 0 1.19px #E8C77A, 158.3px 117.4px 0 0.43px #E8C77A, 147.8px 131.3px 0 1.26px #F1D68C,
    157.4px 145.2px 0 0.84px #D9AE52;
}

/* scallion rings */
.scallion{
  position:absolute; left:0; top:0;
  width:20px; height:16px;
  border-radius:50%;
  background: radial-gradient(circle, transparent 32%, #63784C 33% 62%, transparent 64%);
}
.sc1{ transform: translate(-8px,-172px) rotate(4deg) scaleY(0.85); }
.sc2{ transform: translate(46px,-158px) rotate(-10deg) scaleY(0.9); width:16px; height:13px; }
.sc3{ transform: translate(-104px,-104px) rotate(20deg) scaleY(0.8); }
.sc4{ transform: translate(96px,-70px) rotate(-6deg) scaleY(0.85); width:17px;height:14px; }
.sc5{ transform: translate(-176px,-8px) rotate(10deg) scaleY(0.9); }
.sc6{ transform: translate(2px,-4px) rotate(-14deg) scaleY(0.85); width:16px;height:13px; }

/* chili slivers */
.chili{
  position:absolute; left:0; top:0;
  width:38px; height:6px;
  border-radius:4px;
  background: linear-gradient(90deg, #C6503A, #8F2E20);
  box-shadow: 0 2px 3px rgba(60,20,10,0.25);
}
.ch1{ transform: translate(-138px,158px) rotate(24deg); }
.ch2{ transform: translate(-104px,178px) rotate(-18deg); width:32px; }
.ch3{ transform: translate(-166px,132px) rotate(58deg); width:30px; }

/* ---------------- calamansi wedge resting on the rim ---------------- */
.calamansi{
  position:absolute; left:0; top:0;
  width:74px; height:74px;
  border-radius:50%;
  opacity:0;
  background: repeating-conic-gradient(from 6deg, #DCE494 0deg 9deg, #C7D278 9deg 18deg);
  box-shadow:
    0 0 0 7px #A7C05A,
    0 0 0 9px rgba(255,255,255,0.5),
    0 6px 10px rgba(43,33,24,0.30);
  clip-path: inset(0 0 46% 0 round 50%);
  transform: translate(196px,-198px) rotate(24deg) scale(0.35);
  transition: transform .5s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
}
.composition.show-calamansi .calamansi{ opacity:1; transform: translate(196px,-198px) rotate(24deg) scale(1); }

/* ---------------- spoon resting on the rim — always present ---------------- */
.spoon{
  position:absolute; left:0; top:0;
  transform: translate(150px,206px) rotate(34deg);
}
.spoon-handle{
  position:absolute; left:-8px; top:-176px;
  width:14px; height:190px;
  border-radius:7px;
  background: linear-gradient(90deg, #E7E2D6 0%, #C7BFA9 45%, #9C917A 100%);
  box-shadow: 0 3px 5px rgba(43,33,24,0.25);
}
.spoon-bowl{
  position:absolute; left:-24px; top:-30px;
  width:48px; height:64px;
  border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%;
  background: linear-gradient(160deg, #F3F0E7 0%, #D6CEB9 45%, #A79C82 100%);
  box-shadow: 0 5px 10px rgba(43,33,24,0.30), inset 0 3px 6px rgba(255,255,255,0.6), inset 0 -4px 8px rgba(120,105,75,0.35);
}

/* ---------------- steam ---------------- */
.steam{
  position:absolute; left:0; top:0;
  width: 20px; height: 130px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: linear-gradient(to top, rgba(255,255,255,0.75), rgba(255,255,255,0));
  filter: blur(4px);
  opacity:0;
  transform-origin: bottom center;
}
.st1{ transform: translate(-56px,-250px); animation: rise 5s ease-in infinite; }
.st2{ transform: translate(6px,-268px); width:24px; height:150px; animation: rise 5s ease-in infinite 1.6s; }
.st3{ transform: translate(64px,-244px); animation: rise 5s ease-in infinite 3.2s; }
@keyframes rise{
  0%   { opacity:0; transform: translate(var(--tx,0px), var(--ty,0px)) scale(1) rotate(0deg); }
  12%  { opacity:0.65; }
  55%  { opacity:0.3; }
  100% { opacity:0; transform: translate(calc(var(--tx,0px) + 22px), calc(var(--ty,0px) - 130px)) scale(1.7) rotate(6deg); }
}
.stirred .steam{ animation-duration: 2.6s; }

.hit-area{
  position:absolute; inset:0;
  border-radius:50%;
  cursor: pointer;
  background: transparent;
  border:none;
  padding:0;
}
.hit-area:focus-visible{
  outline: 2px solid #B9782A;
  outline-offset: 6px;
}

@media (prefers-reduced-motion: reduce){
  .steam{ animation: none !important; opacity:0.3; }
  .garnish-layer.stirring{ animation: none; }
  .egg, .calamansi{ transition: opacity .2s ease; }
  .broth::before{ animation: none; }
  .celebrate-ring{ animation: none !important; opacity: 0; }
}