/* =========================================================================
   POUSSE CAFÉ — Phase 1
   Palette: midnight navy / walnut / brass / amber, lit like a back bar.
   ========================================================================= */

:root {
  --ink:        #05060a;
  --navy:       #0b1730;
  --walnut:     #5a3418;
  --gold:       #e8bd6a;
  --gold-hi:    #fff0c6;
  --gold-dim:   #9b7635;
  --amber:      #ffcb78;

  /* Bowl geometry, shared with the renderer (see js/renderer.js GEO).      */
  --bowl-top:    3.63%;
  --bowl-bottom: 59.31%;

  --lift: 13px;              /* how far a selected glass rises            */
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- liquids ---------------------------------------------------- */
.c-red    { --lq-hi:#ff9a72; --lq:#e0331f; --lq-lo:#7a0c0c; }
.c-yellow { --lq-hi:#ffeaa0; --lq:#f5c026; --lq-lo:#9a6a03; }
.c-green  { --lq-hi:#9df3b8; --lq:#3fc46f; --lq-lo:#0a6437; }
.c-blue   { --lq-hi:#a8dcff; --lq:#2f8ff5; --lq-lo:#0d2f96; }
.c-pink   { --lq-hi:#ffc4de; --lq:#ff6fb0; --lq-lo:#a52065; }
.c-purple { --lq-hi:#dcb8ff; --lq:#a361ef; --lq-lo:#4a1785; }
.c-orange { --lq-hi:#ffcf96; --lq:#ff8a12; --lq-lo:#8a3a00; }
.c-cyan   { --lq-hi:#b6f4ff; --lq:#22c3e0; --lq-lo:#065b78; }
/* the ninth and tenth pours, for the stages that need them (LEVEL 31+).
   Chosen to read apart from the eight above at a glance on a phone: one is
   the pale cream of a liqueur, the other the dark roast of a coffee. */
.c-cream  { --lq-hi:#fff6e2; --lq:#efd9ab; --lq-lo:#a07e42; }
.c-coffee { --lq-hi:#c08a5c; --lq:#6b3f22; --lq-lo:#2a1408; }

/* ---------- shell ------------------------------------------------------ */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--ink);
}

body {
  font-family: Cinzel, "Hiragino Mincho ProN", Georgia, "Times New Roman", serif;
  color: var(--gold);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

.defs { position: absolute; width: 0; height: 0; }

#app {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  max-width: 720px;
  margin: 0 auto;
  padding:
    max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right))
    max(10px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
  background: #05060a url("../assets/background/bar.webp") center 28% / cover no-repeat;
  overflow: hidden;
}

/* light pooling on the counter + darkened corners */
#app::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 55% at 50% 42%, rgba(255,186,92,.10), transparent 62%),
    radial-gradient(140% 90% at 50% 55%, transparent 38%, rgba(0,0,0,.62) 100%);
}

/* ---------- top bar ---------------------------------------------------- */
#topbar {
  position: relative;
  z-index: 4;
  flex: 0 0 auto;
  padding-top: 2px;
  text-align: center;
}

#logo {
  display: block;
  width: 52%;
  min-width: 190px;
  max-width: 310px;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.65));
}

#readout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 2px;
}

#readout .stat {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
#readout b {
  font-size: 19px;
  font-weight: 600;
  color: var(--gold-hi);
  text-shadow: 0 0 12px rgba(255,190,90,.45);
  font-variant-numeric: tabular-nums;
  min-width: 1.1em;
}
#readout i {
  font-style: normal;
  font-size: 10px;
  letter-spacing: .22em;
  color: var(--gold-dim);
}
#readout .rule {
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
}

#sound {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(232,189,106,.35);
  border-radius: 50%;
  background: rgba(8,14,30,.55);
  color: var(--gold);
  cursor: pointer;
}
#sound span {
  display: block;
  width: 100%;
  height: 100%;
  background: currentColor;
  -webkit-mask: var(--ico) center / 17px 17px no-repeat;
  mask: var(--ico) center / 17px 17px no-repeat;
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M4 9v6h4l5 4V5L8 9H4zm12.5 3a4.5 4.5 0 0 0-2.5-4v8a4.5 4.5 0 0 0 2.5-4zM14 2.3v2.1c3.4.9 6 4 6 7.6s-2.6 6.7-6 7.6v2.1c4.6-.9 8-5 8-9.7s-3.4-8.8-8-9.7z'/%3E%3C/svg%3E");
}
#sound[aria-pressed="false"] { color: var(--gold-dim); opacity: .65; }
#sound[aria-pressed="false"] span {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M4 9v6h4l5 4V5L8 9H4zm17.1-1.5-1.4-1.4L17 8.8l-2.7-2.7-1.4 1.4L15.6 10.2 12.9 13l1.4 1.4 2.7-2.7 2.7 2.7 1.4-1.4-2.7-2.7 2.7-2.8z'/%3E%3C/svg%3E");
}

/* ---------- stage ------------------------------------------------------ */
#stage {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 4px;
}

/* shelves ---------------------------------------------------------------*/
.shelf {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.7));
}

/* glass foot shadows — these stay on the wood when a glass is lifted ------*/
.gshadow {
  position: absolute;
  z-index: 2;
  opacity: .78;
  pointer-events: none;
  transition: opacity .18s linear, transform .18s var(--ease);
}
.gshadow.away { opacity: .3; transform: scale(.86); }

/* glasses ---------------------------------------------------------------*/
.glass {
  position: absolute;
  z-index: 3;
  transform: translate3d(0,0,0);
  transition: transform .2s var(--ease);
  will-change: transform;
  cursor: pointer;
}
.glass.lifted { z-index: 6; }
.glass.moving { z-index: 8; transition: none; }

.glass-inner {
  position: absolute;
  inset: 0;
}
.glass-inner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.55));
}

/* the liquid column, clipped to the bowl silhouette */
.liquid {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  clip-path: url(#bowlClip);
  -webkit-clip-path: url(#bowlClip);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3Cpath d='M 0.1913,0.0363 L 0.1893,0.0442 L 0.1873,0.0521 L 0.1852,0.0599 L 0.1831,0.0678 L 0.1811,0.0757 L 0.1791,0.0836 L 0.177,0.0915 L 0.175,0.0994 L 0.1729,0.1073 L 0.1709,0.1151 L 0.1688,0.123 L 0.1668,0.1309 L 0.167,0.1388 L 0.1649,0.1467 L 0.1627,0.1546 L 0.1606,0.1625 L 0.1608,0.1703 L 0.1588,0.1782 L 0.1567,0.1861 L 0.1545,0.194 L 0.1547,0.2019 L 0.1526,0.2098 L 0.1526,0.2177 L 0.1506,0.2256 L 0.1506,0.2334 L 0.1485,0.2413 L 0.1485,0.2492 L 0.1465,0.2571 L 0.1465,0.265 L 0.1465,0.2729 L 0.1465,0.2808 L 0.1442,0.2886 L 0.1442,0.2965 L 0.1442,0.3044 L 0.1465,0.3123 L 0.1465,0.3202 L 0.1462,0.3281 L 0.1462,0.336 L 0.1483,0.3438 L 0.1506,0.3517 L 0.1504,0.3596 L 0.1524,0.3675 L 0.1547,0.3754 L 0.1567,0.3833 L 0.1588,0.3912 L 0.1606,0.3991 L 0.1647,0.4069 L 0.169,0.4148 L 0.1709,0.4227 L 0.175,0.4306 L 0.1791,0.4385 L 0.1854,0.4464 L 0.1893,0.4543 L 0.1955,0.4621 L 0.1993,0.47 L 0.2077,0.4779 L 0.2137,0.4858 L 0.2219,0.4937 L 0.2301,0.5016 L 0.2472,0.5095 L 0.2725,0.5174 L 0.2981,0.5252 L 0.3284,0.5331 L 0.3584,0.541 L 0.3888,0.5489 L 0.4165,0.5568 L 0.4424,0.5647 L 0.4667,0.5726 L 0.4762,0.5804 L 0.4775,0.5883 L 0.4775,0.5931 L 0.5275,0.5931 L 0.5275,0.5883 L 0.5262,0.5804 L 0.5358,0.5726 L 0.5601,0.5647 L 0.5885,0.5568 L 0.6162,0.5489 L 0.6466,0.541 L 0.6766,0.5331 L 0.7069,0.5252 L 0.735,0.5174 L 0.7603,0.5095 L 0.7774,0.5016 L 0.7856,0.4937 L 0.7938,0.4858 L 0.8022,0.4779 L 0.8082,0.47 L 0.8145,0.4621 L 0.8207,0.4543 L 0.8271,0.4464 L 0.8309,0.4385 L 0.835,0.4306 L 0.8392,0.4227 L 0.8435,0.4148 L 0.8453,0.4069 L 0.8494,0.3991 L 0.8537,0.3912 L 0.8558,0.3833 L 0.8578,0.3754 L 0.8576,0.3675 L 0.8597,0.3596 L 0.8619,0.3517 L 0.8617,0.3438 L 0.8638,0.336 L 0.8638,0.3281 L 0.866,0.3202 L 0.866,0.3123 L 0.8658,0.3044 L 0.8658,0.2965 L 0.8658,0.2886 L 0.866,0.2808 L 0.866,0.2729 L 0.866,0.265 L 0.866,0.2571 L 0.864,0.2492 L 0.864,0.2413 L 0.8619,0.2334 L 0.8619,0.2256 L 0.8599,0.2177 L 0.8599,0.2098 L 0.8578,0.2019 L 0.8556,0.194 L 0.8558,0.1861 L 0.8537,0.1782 L 0.8517,0.1703 L 0.8494,0.1625 L 0.8474,0.1546 L 0.8476,0.1467 L 0.8455,0.1388 L 0.8433,0.1309 L 0.8412,0.123 L 0.8392,0.1151 L 0.8371,0.1073 L 0.835,0.0994 L 0.833,0.0915 L 0.8309,0.0836 L 0.8289,0.0757 L 0.8268,0.0678 L 0.8248,0.0599 L 0.8228,0.0521 L 0.8207,0.0442 L 0.8186,0.0363 Z' fill='%23fff'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3Cpath d='M 0.1913,0.0363 L 0.1893,0.0442 L 0.1873,0.0521 L 0.1852,0.0599 L 0.1831,0.0678 L 0.1811,0.0757 L 0.1791,0.0836 L 0.177,0.0915 L 0.175,0.0994 L 0.1729,0.1073 L 0.1709,0.1151 L 0.1688,0.123 L 0.1668,0.1309 L 0.167,0.1388 L 0.1649,0.1467 L 0.1627,0.1546 L 0.1606,0.1625 L 0.1608,0.1703 L 0.1588,0.1782 L 0.1567,0.1861 L 0.1545,0.194 L 0.1547,0.2019 L 0.1526,0.2098 L 0.1526,0.2177 L 0.1506,0.2256 L 0.1506,0.2334 L 0.1485,0.2413 L 0.1485,0.2492 L 0.1465,0.2571 L 0.1465,0.265 L 0.1465,0.2729 L 0.1465,0.2808 L 0.1442,0.2886 L 0.1442,0.2965 L 0.1442,0.3044 L 0.1465,0.3123 L 0.1465,0.3202 L 0.1462,0.3281 L 0.1462,0.336 L 0.1483,0.3438 L 0.1506,0.3517 L 0.1504,0.3596 L 0.1524,0.3675 L 0.1547,0.3754 L 0.1567,0.3833 L 0.1588,0.3912 L 0.1606,0.3991 L 0.1647,0.4069 L 0.169,0.4148 L 0.1709,0.4227 L 0.175,0.4306 L 0.1791,0.4385 L 0.1854,0.4464 L 0.1893,0.4543 L 0.1955,0.4621 L 0.1993,0.47 L 0.2077,0.4779 L 0.2137,0.4858 L 0.2219,0.4937 L 0.2301,0.5016 L 0.2472,0.5095 L 0.2725,0.5174 L 0.2981,0.5252 L 0.3284,0.5331 L 0.3584,0.541 L 0.3888,0.5489 L 0.4165,0.5568 L 0.4424,0.5647 L 0.4667,0.5726 L 0.4762,0.5804 L 0.4775,0.5883 L 0.4775,0.5931 L 0.5275,0.5931 L 0.5275,0.5883 L 0.5262,0.5804 L 0.5358,0.5726 L 0.5601,0.5647 L 0.5885,0.5568 L 0.6162,0.5489 L 0.6466,0.541 L 0.6766,0.5331 L 0.7069,0.5252 L 0.735,0.5174 L 0.7603,0.5095 L 0.7774,0.5016 L 0.7856,0.4937 L 0.7938,0.4858 L 0.8022,0.4779 L 0.8082,0.47 L 0.8145,0.4621 L 0.8207,0.4543 L 0.8271,0.4464 L 0.8309,0.4385 L 0.835,0.4306 L 0.8392,0.4227 L 0.8435,0.4148 L 0.8453,0.4069 L 0.8494,0.3991 L 0.8537,0.3912 L 0.8558,0.3833 L 0.8578,0.3754 L 0.8576,0.3675 L 0.8597,0.3596 L 0.8619,0.3517 L 0.8617,0.3438 L 0.8638,0.336 L 0.8638,0.3281 L 0.866,0.3202 L 0.866,0.3123 L 0.8658,0.3044 L 0.8658,0.2965 L 0.8658,0.2886 L 0.866,0.2808 L 0.866,0.2729 L 0.866,0.265 L 0.866,0.2571 L 0.864,0.2492 L 0.864,0.2413 L 0.8619,0.2334 L 0.8619,0.2256 L 0.8599,0.2177 L 0.8599,0.2098 L 0.8578,0.2019 L 0.8556,0.194 L 0.8558,0.1861 L 0.8537,0.1782 L 0.8517,0.1703 L 0.8494,0.1625 L 0.8474,0.1546 L 0.8476,0.1467 L 0.8455,0.1388 L 0.8433,0.1309 L 0.8412,0.123 L 0.8392,0.1151 L 0.8371,0.1073 L 0.835,0.0994 L 0.833,0.0915 L 0.8309,0.0836 L 0.8289,0.0757 L 0.8268,0.0678 L 0.8248,0.0599 L 0.8228,0.0521 L 0.8207,0.0442 L 0.8186,0.0363 Z' fill='%23fff'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.liquid.instant .layer { transition: none !important; }

.layer {
  position: absolute;
  left: -4%;
  width: 108%;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--lq-hi) 70%, var(--lq)) 0%,
      var(--lq) 34%,
      var(--lq-lo) 100%);
  box-shadow: inset 0 -6px 10px -6px rgba(0,0,0,.55);
  transition: top .24s var(--ease), height .24s var(--ease);
}
/* browsers without color-mix still get a correct two-stop gradient */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .layer { background: linear-gradient(180deg, var(--lq-hi) 0%, var(--lq) 34%, var(--lq-lo) 100%); }
}

/* meniscus: the visible surface of the topmost layer */
.layer.surface::after {
  content: "";
  position: absolute;
  left: 8%;
  top: -3px;
  width: 84%;
  height: 9px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.12));
  filter: blur(.4px);
}
/* a soft vertical sheen so the column reads as liquid, not paint */
.liquid::after {
  content: "";
  position: absolute;
  left: 22%;
  top: 0;
  width: 13%;
  height: 62%;
  border-radius: 40%;
  background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,0));
  pointer-events: none;
  z-index: 3;
}

/* selection halo */
.halo {
  position: absolute;
  left: 4%;
  top: 0;
  width: 92%;
  height: 60%;
  z-index: 0;
  border-radius: 46% 46% 42% 42%;
  opacity: 0;
  background: radial-gradient(60% 55% at 50% 45%, rgba(255,214,140,.55), rgba(255,190,90,0) 70%);
  transition: opacity .18s linear;
  pointer-events: none;
}
.glass.lifted .halo { opacity: 1; }

/* invalid-move nudge */
@keyframes nudge {
  0%,100% { transform: translateX(0); }
  22%     { transform: translateX(-6px) rotate(-2deg); }
  55%     { transform: translateX(6px) rotate(2deg); }
  80%     { transform: translateX(-3px); }
}
.glass.refuse .glass-inner { animation: nudge .3s var(--ease); }

/* a finished glass catches the light once */
@keyframes served {
  0%   { filter: drop-shadow(0 0 0 rgba(255,214,140,0)) brightness(1); }
  35%  { filter: drop-shadow(0 0 16px rgba(255,224,160,.95)) brightness(1.35); }
  100% { filter: drop-shadow(0 0 0 rgba(255,214,140,0)) brightness(1); }
}
.glass.served .glass-inner { animation: served .62s ease-out; }

/* the stream ------------------------------------------------------------*/
.stream {
  position: absolute;
  z-index: 7;
  transform-origin: 50% 0;
  border-radius: 50px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--lq-hi) 65%, var(--lq)) 0%, var(--lq) 45%, var(--lq-lo) 100%);
  box-shadow: 0 0 8px 1px color-mix(in srgb, var(--lq) 60%, transparent);
  pointer-events: none;
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .stream { background: linear-gradient(180deg, var(--lq-hi), var(--lq) 45%, var(--lq-lo)); }
}
.splash {
  position: absolute;
  z-index: 7;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, var(--lq-hi), transparent 70%);
  opacity: .0;
}

/* ---------- tutorial --------------------------------------------------- */
#tutorial {
  position: absolute;
  z-index: 9;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: min(92%, 420px);
  padding: 9px 14px;
  border: 1px solid rgba(232,189,106,.3);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(6,12,26,.9), rgba(6,10,20,.78));
  box-shadow: 0 8px 22px rgba(0,0,0,.55);
  text-align: left;
  transition: opacity .3s linear;
}
#tutorial p {
  margin: 3px 0;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  font-size: 12.5px;
  letter-spacing: .01em;
  color: #f0e0bd;
}
#tutorial b {
  display: inline-block;
  width: 17px;
  height: 17px;
  margin-right: 2px;
  border-radius: 50%;
  background: var(--gold);
  color: #10182c;
  font-size: 11px;
  line-height: 17px;
  text-align: center;
}
#tutorial.fade { opacity: 0; }

/* a glass the tutorial is pointing at */
@keyframes beckon {
  0%,100% { opacity: 0; }
  50%     { opacity: .95; }
}
.glass.hintful .halo { animation: beckon 1.3s ease-in-out infinite; }

/* ---------- controls --------------------------------------------------- */
#controls {
  position: relative;
  z-index: 4;
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  gap: clamp(26px, 8.5vw, 54px);
  padding: 6px 0 2px;
}

.coin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--gold);
  cursor: pointer;
  transition: transform .12s var(--ease), opacity .15s linear;
}
.coin img {
  width: 54px;
  height: 54px;
  filter: drop-shadow(0 5px 10px rgba(0,0,0,.6));
}
.coin span {
  font-size: 9.5px;
  letter-spacing: .2em;
  color: var(--gold-dim);
}
.coin:active { transform: scale(.93); }
.coin:disabled { opacity: .32; cursor: default; }
.coin:disabled:active { transform: none; }
.coin:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 50%; }

/* ---------- level clear ------------------------------------------------ */
#clear {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(3,5,10,.72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: fadein .3s ease-out;
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

#clear .card {
  width: min(78%, 330px);
  padding: 26px 22px 22px;
  text-align: center;
  border: 1px solid rgba(232,189,106,.45);
  border-radius: 4px;
  background: linear-gradient(180deg, #101c36, #070c18);
  box-shadow: 0 18px 50px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,224,160,.25);
}
#clear h2 {
  margin: 0;
  font-size: 23px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--gold-hi);
  text-shadow: 0 0 18px rgba(255,190,90,.5);
}
#clear p {
  margin: 8px 0 20px;
  font-size: 12px;
  letter-spacing: .24em;
  color: var(--gold-dim);
}
#next {
  width: 100%;
  padding: 11px 0;
  border: 1px solid var(--gold);
  border-radius: 3px;
  background: linear-gradient(180deg, #d8a94f, #9d6f21);
  color: #14100a;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .18em;
  cursor: pointer;
}
#next:active { transform: translateY(1px); filter: brightness(.94); }

.hidden { display: none !important; }

/* ---------- landscape / desktop trim ----------------------------------- */
@media (min-height: 900px) {
  #logo { max-width: 340px; }
  .coin img { width: 60px; height: 60px; }
}
@media (max-height: 620px) {
  #logo { width: 42%; min-width: 150px; }
  #readout b { font-size: 16px; }
  .coin img { width: 44px; height: 44px; }
  #controls { gap: clamp(20px, 7vw, 44px); }
}

@media (prefers-reduced-motion: reduce) {
  .glass, .layer, .gshadow { transition-duration: .01ms !important; }
  .glass.refuse .glass-inner, .glass.served .glass-inner,
  .glass.hintful .halo { animation: none; }
}

/* =========================================================================
   Phase 4 — hints and the daily challenge
   ========================================================================= */

/* ---------- the hint coin ---------------------------------------------- */
/* Drawn rather than shipped as art: it has to sit beside undo.png and
   restart.png at any size, and a bottle-cap of light does that.           */
.ic-coin {
  display: block;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 34%, rgba(255,236,190,.95), rgba(232,189,106,.18) 46%, transparent 62%),
    linear-gradient(180deg, #23304f, #0b1226);
  background-color: #131f3a;
  border: 1px solid rgba(232,189,106,.55);
  box-shadow: 0 5px 10px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,224,160,.3);
  position: relative;
}
.ic-hint::after {
  content: "?";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Cinzel, "Hiragino Mincho ProN", serif;
  font-size: 25px;
  font-weight: 600;
  color: var(--gold-hi);
  text-shadow: 0 0 12px rgba(255,190,90,.75);
}
@keyframes stirring {
  0%,100% { transform: rotate(-7deg); }
  50%     { transform: rotate(7deg); }
}
.coin.busy .ic-coin { animation: stirring .7s ease-in-out infinite; }
.coin.busy .ic-hint::after { opacity: .55; }

/* ---------- the suggested pour ----------------------------------------- */
/* The source glass keeps the familiar tutorial glow; the glass it should
   land in gets a steadier ring, so the pair reads as from → to.           */
@keyframes landing {
  0%,100% { box-shadow: 0 0 0 2px rgba(255,203,120,.55), 0 0 18px 4px rgba(255,190,90,.28); }
  50%     { box-shadow: 0 0 0 3px rgba(255,236,190,.95), 0 0 26px 8px rgba(255,190,90,.5); }
}
.glass.hint-target .glass-inner {
  border-radius: 40% / 22%;
  animation: landing 1.3s ease-in-out infinite;
}

/* ---------- daily result ------------------------------------------------ */
#clear .streak {
  margin: -12px 0 18px;
  color: var(--amber);
  letter-spacing: .16em;
}

@media (min-height: 900px) { .ic-coin { width: 60px; height: 60px; } }
@media (max-height: 620px) {
  .ic-coin { width: 44px; height: 44px; }
  .ic-hint::after { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .coin.busy .ic-coin, .glass.hint-target .glass-inner { animation: none; }
  .glass.hint-target .glass-inner {
    box-shadow: 0 0 0 3px rgba(255,236,190,.9), 0 0 24px 6px rgba(255,190,90,.45);
  }
}

/* =========================================================================
   Phase 4–6 — unlock celebration, stuck notice, extra glass, settings cog
   ========================================================================= */

/* ---------- NEW COCKTAIL! ---------------------------------------------- */
#unlock {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  background: rgba(2,3,7,.86);
  animation: fadein .25s ease-out;
}
#unlock .burst {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 44%, rgba(255,205,120,.32), transparent 44%),
    radial-gradient(circle at 50% 44%, rgba(255,236,190,.16), transparent 22%);
  animation: halo 1s ease-out both;
}
@keyframes halo {
  from { opacity: 0; transform: scale(.72) rotate(-8deg); }
  60%  { opacity: 1; }
  to   { opacity: .75; transform: scale(1) rotate(0deg); }
}
#unlock .card {
  position: relative;
  width: min(86%, 340px);
  max-height: 100%;
  padding: 20px 20px 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  text-align: center;
  border: 1px solid rgba(255,214,140,.6);
  border-radius: 5px;
  background: linear-gradient(180deg, #16233f, #070c18);
  box-shadow: 0 20px 60px rgba(0,0,0,.75), 0 0 40px rgba(255,190,90,.25),
              inset 0 1px 0 rgba(255,232,180,.3);
  animation: risein .42s cubic-bezier(.19,1,.22,1) both;
}
@keyframes risein {
  from { opacity: 0; transform: translateY(16px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
#unlock .tag {
  margin: 0;
  font-family: Cinzel, serif;
  font-size: 15px;
  letter-spacing: .3em;
  color: var(--gold-hi);
  text-shadow: 0 0 20px rgba(255,190,90,.75);
  animation: shine 1.6s ease-in-out infinite;
}
@keyframes shine {
  0%,100% { text-shadow: 0 0 14px rgba(255,190,90,.5); }
  50%     { text-shadow: 0 0 26px rgba(255,220,150,.95); }
}
#unlock .no {
  margin: 8px 0 0;
  font-size: 10px;
  letter-spacing: .3em;
  color: var(--gold-dim);
}
#unlock .shot {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 190px;
  margin: 6px 0 2px;
}
#unlock .shot img {
  max-height: 100%;
  max-width: 72%;
  object-fit: contain;
  filter: drop-shadow(0 16px 26px rgba(0,0,0,.65)) drop-shadow(0 0 22px rgba(255,190,90,.35));
  animation: pourin .7s ease-out both .12s;
}
@keyframes pourin {
  from { opacity: 0; transform: translateY(10px) scale(.94); }
  to   { opacity: 1; transform: none; }
}
#unlock h3 {
  margin: 4px 0 0;
  font-family: Cinzel, serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--gold-hi);
}
#unlock .ja {
  margin: 3px 0 0;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--gold);
}
#unlock .blurb {
  margin: 10px 2px 16px;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 11.5px;
  line-height: 1.75;
  color: rgba(240,226,198,.82);
}
#unlock button {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 12px 0;
  border: 0;
  border-radius: 3px;
  background: linear-gradient(180deg, #f2d79b, #c9973f);
  color: #2a1b06;
  font-family: Cinzel, serif;
  font-size: 13px;
  letter-spacing: .2em;
  cursor: pointer;
}
#unlock button.ghost {
  background: none;
  border: 1px solid rgba(232,189,106,.5);
  color: var(--gold);
}
#unlock button:active { transform: translateY(1px); filter: brightness(.95); }

/* ---------- "no legal moves" ------------------------------------------- */
#stuck {
  position: absolute;
  left: 50%;
  bottom: 8px;
  z-index: 12;
  transform: translateX(-50%);
  width: min(92%, 340px);
  padding: 12px 14px 14px;
  text-align: center;
  border: 1px solid rgba(232,189,106,.45);
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(20,32,58,.97), rgba(7,12,24,.97));
  box-shadow: 0 14px 34px rgba(0,0,0,.6);
  animation: risein .3s ease-out both;
}
#stuck p {
  margin: 0 0 10px;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--gold-hi);
}
#stuck .ways { display: flex; gap: 8px; }
#stuck .ways button {
  flex: 1 1 0;
  min-height: 40px;
  border: 1px solid rgba(232,189,106,.5);
  border-radius: 3px;
  background: rgba(6,10,20,.8);
  color: var(--gold);
  font-family: Cinzel, serif;
  font-size: 11px;
  letter-spacing: .14em;
  cursor: pointer;
}
#stuck .ways button:active { transform: translateY(1px); }

/* ---------- extra glass coin ------------------------------------------- */
.ic-glass::after {
  content: "+";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Cinzel, serif;
  font-size: 26px;
  font-weight: 600;
  color: var(--gold-hi);
  text-shadow: 0 0 12px rgba(255,190,90,.75);
}
/* the little "▶ AD" flag: a reward has a price, and it says so up front */
.coin .ad {
  position: absolute;
  top: -4px;
  right: -10px;
  padding: 1px 4px;
  border-radius: 2px;
  background: linear-gradient(180deg, #f2d79b, #c9973f);
  color: #2a1b06;
  font-size: 7.5px;
  letter-spacing: .08em;
  line-height: 1.5;
}
.coin { position: relative; }
.coin.paid .ic-coin { border-color: rgba(255,214,140,.85); }

/* ---------- level clear grade ------------------------------------------ */
#clear .grade {
  margin: 6px 0 2px;
  font-family: Cinzel, serif;
  font-size: 13px;
  letter-spacing: .28em;
  color: var(--amber);
}

/* ---------- settings cog ----------------------------------------------- */
#title .cog {
  position: absolute;
  top: max(8px, env(safe-area-inset-top));
  right: max(8px, env(safe-area-inset-right));
  left: auto;                     /* .chip pins itself left; this one is right */
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
}
#title .cog svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: var(--gold);
}
#title .cog:active svg { fill: var(--gold-hi); }

@media (prefers-reduced-motion: reduce) {
  #unlock .burst, #unlock .card, #unlock .tag, #unlock .shot img, #stuck { animation: none; }
}

/* the "1 / 2" counter sits with the NEW COCKTAIL! line, same weight */
#unlock .tag { font-size: 14px; }

/* a back button that says where it goes ---------------------------------- */
.chip.wide {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: auto;
  min-width: 44px;
  padding: 0 14px 0 11px;
  border-radius: 22px;
}
.chip.wide .ico-home { flex: 0 0 auto; width: 17px; height: 17px; }
.chip.wide .lbl {
  font-family: Cinzel, serif;
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--gold);
}