/* AUTHOR-APPROVED GLASS — 2026-10-07.
 * Visual authority: ../../docs/art/liquid-glass-approved-20261007.png
 * Contract: ../../docs/liquid-glass-contract.md
 * Load AFTER page styles. Preserve the blurred background, crisp contents and
 * bright glass edges. Blue frosting and unblurred transparent panels are wrong.
 */
:is(.mobile-page,.display-page,.preview-page,.theme-legendary-cocktail-master) {
  --cocktail-glass-surface:
    radial-gradient(150% 105% at 10% -18%,rgba(255,255,255,.065),transparent 42%),
    linear-gradient(135deg,rgba(255,255,255,.018),rgba(255,255,255,.004) 48%,rgba(225,210,185,.012)),
    rgba(250,245,234,.008);
  --cocktail-glass-blur:blur(6px) saturate(112%) contrast(102%) brightness(1.03);
  --cocktail-glass-edge:rgba(250,245,234,.43);
  --cocktail-glass-inner:rgba(255,255,255,.17);
  --cocktail-glass-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.58),
    inset 1.5px 0 0 rgba(255,255,255,.12),
    inset 0 -1.5px 0 rgba(209,190,155,.12),
    inset -1px 0 0 rgba(255,255,255,.11),
    0 10px 24px rgba(35,31,27,.13),0 0 0 .5px rgba(255,255,255,.17);
  /* Existing small glass components consume these legacy names. */
  --glass-panel-surface:var(--cocktail-glass-surface);
  --glass-panel-shadow:var(--cocktail-glass-shadow);
  --glass-border:var(--cocktail-glass-edge);
  --glass-inner-border:var(--cocktail-glass-inner);
}
:is(.mobile-page,.display-page,.preview-page) :is(.liquid-panel,.liquid-button,.liquid-button.gold,.liquid-button.pink-glass,.coverflow-card .coverflow-card-shell),
.theme-legendary-cocktail-master :is(.card,.choice,.return-button,.retry-button) {
  border:1px solid var(--cocktail-glass-edge);
  background:var(--cocktail-glass-surface);
  box-shadow:var(--cocktail-glass-shadow);
  -webkit-backdrop-filter:var(--cocktail-glass-blur);
  backdrop-filter:var(--cocktail-glass-blur);
}
:is(.mobile-page,.display-page,.preview-page) :is(.liquid-panel,.liquid-button,.liquid-button.gold,.liquid-button.pink-glass,.coverflow-card .coverflow-card-shell)::before,
.theme-legendary-cocktail-master :is(.card,.choice,.return-button,.retry-button)::before {
  content:"";position:absolute;z-index:-1;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(90% 38% at 18% 0%,rgba(255,255,255,.1),transparent 62%),radial-gradient(70% 42% at 100% 100%,rgba(240,220,186,.025),transparent 68%);
  background-attachment:initial;opacity:1;filter:none;transform:none;
  -webkit-mask-image:none;mask-image:none;
}
:is(.mobile-page,.display-page,.preview-page) :is(.liquid-panel,.liquid-button,.liquid-button.gold,.liquid-button.pink-glass,.coverflow-card .coverflow-card-shell)::after,
.theme-legendary-cocktail-master :is(.card,.choice,.return-button,.retry-button)::after {
  content:"";position:absolute;z-index:0;inset:0;border-radius:inherit;pointer-events:none;
  border:1px solid var(--cocktail-glass-inner);
  background:linear-gradient(112deg,rgba(255,255,255,.035),transparent 18% 76%,rgba(255,255,255,.032)),radial-gradient(70% 34% at 50% 102%,rgba(236,222,193,.025),transparent 74%);
  box-shadow:inset 0 0 0 .7px rgba(255,255,255,.14),inset 0 10px 24px rgba(255,255,255,.035),inset 0 -10px 22px rgba(92,82,68,.035);
}
/* Material owns appearance only: preserve each page's positioning and scroll. */
.theme-legendary-cocktail-master :is(.card,.choice,.return-button,.retry-button) {
  position:relative;isolation:isolate;overflow:hidden;
}
:is(.mobile-page,.display-page,.preview-page) :is(.miniapp-return,.miniapp-host-return,.miniapp-seat-row .miniapp-seat,.ordered-room-line span,.host-finish-row) {
  background:var(--cocktail-glass-surface);
  border-color:var(--cocktail-glass-edge);
  box-shadow:var(--cocktail-glass-shadow);
  -webkit-backdrop-filter:var(--cocktail-glass-blur);
  backdrop-filter:var(--cocktail-glass-blur);
}
:is(.mobile-page,.display-page,.preview-page) :is(.liquid-button.gold,.liquid-button.pink-glass) { color:#fff8e9; }
.mobile-page .host-finish-confirm { box-shadow:var(--cocktail-glass-shadow),0 0 0 100vmax rgba(0,0,0,.76); }
.theme-legendary-cocktail-master { --veil:transparent;--ink:#f8fbff;--selected:#f0d6a6; }
.theme-legendary-cocktail-master .card { border-radius:24px; }
.theme-legendary-cocktail-master :is(.choice,.return-button,.retry-button) { border-radius:18px;color:#f8fbff;touch-action:manipulation; }
.theme-legendary-cocktail-master :is(.card,.choice,.return-button,.retry-button)>* { position:relative;z-index:1; }
.theme-legendary-cocktail-master .count-grid .choice.selected,
.mobile-page .team-count-grid button.selected {
  background:rgba(12,10,8,.66);
  box-shadow:var(--cocktail-glass-shadow),inset 0 0 0 2px rgba(240,214,166,.6);
  outline:0;opacity:1;color:#fff9ee;
}
/* No blur support must degrade to a legible neutral surface, never clear glass. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  :is(.mobile-page,.display-page,.preview-page) :is(.liquid-panel,.liquid-button,.liquid-button.gold,.liquid-button.pink-glass,.coverflow-card .coverflow-card-shell),
  .theme-legendary-cocktail-master :is(.card,.choice,.return-button,.retry-button) { background:rgba(33,29,24,.84); }
}
@media(prefers-reduced-transparency:reduce) {
  :is(.mobile-page,.display-page,.preview-page) :is(.liquid-panel,.liquid-button,.liquid-button.gold,.liquid-button.pink-glass,.coverflow-card .coverflow-card-shell),
  .theme-legendary-cocktail-master :is(.card,.choice,.return-button,.retry-button) { background:rgba(33,29,24,.84); }
}

/* Glass stays registered to the scene, without tonal or colour enhancement. */
.display-page { --cocktail-glass-blur:blur(6px); }
/* A transformed ancestor makes Chromium mis-sample backdrop pixels at fractional
 * scale. Layout zoom keeps the existing design coordinates and true backdrop. */
@supports (zoom:1) {
  .display-page .fixed-canvas {
    zoom:var(--canvas-scale);
    transform:none;
    left:calc(var(--canvas-offset-x) / var(--canvas-scale));
    top:calc(var(--canvas-offset-y) / var(--canvas-scale));
  }
}