:root {
  color-scheme: dark;
  --ink: #020914;
  --night: #07132c;
  --deep-blue: #6e89b7;
  --electric-blue: #a8e7f2;
  --iris: #a6a9df;
  --violet: #c3aee2;
  --magenta: #edb4d4;
  --rose: #f4c8dc;
  --sun: #dffaf2;
  --gold: #bdebdc;
  --white: #f8fbff;
  --glass-dark: rgba(4, 10, 34, .24);
  --glass-light: rgba(190, 221, 255, .11);
  --glass-border: rgba(229, 243, 255, .48);
  --glass-inner-border: rgba(255,255,255,.17);
  --glass-edge-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.58),
    inset 1.5px 0 0 rgba(87,188,181,.2),
    inset 0 -1.5px 0 rgba(239,184,213,.22),
    inset -1px 0 0 rgba(255,255,255,.11);
  --glass-panel-surface:
    radial-gradient(130% 95% at 12% -12%, rgba(255,255,255,.25), transparent 43%),
    linear-gradient(132deg, rgba(230,248,255,.16), rgba(255,255,255,.035) 46%, rgba(158,231,213,.11)),
    rgba(29, 38, 68, .25);
  --glass-panel-shadow:
    var(--glass-edge-shadow),
    0 19px 54px rgba(1,4,25,.31),
    0 0 0 .5px rgba(163, 229, 215, .18);
  --material-card-edge-border: 1px solid var(--glass-border);
  --material-card-edge-radius: 34px;
  --liquid-scene-image: none;
  --liquid-lens-opacity: .26;
  --liquid-lens-scale: 1.028;
  --canvas-vw: 1vw;
  --canvas-vh: 1vh;
  font-family: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { color: var(--white); background: var(--ink); }
button, a { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }

.display-page,
.mobile-page,
.preview-page {
  isolation: isolate;
  background-color: var(--ink);
}

.display-page { --liquid-scene-image: url("../assets/backgrounds/v0.7-magic-tavern-liquor-cabinet-display.png"); }
.mobile-page,
.preview-page { --liquid-scene-image: url("../assets/backgrounds/v0.6-magic-tavern-fresh-mobile.png"); }

.mobile-page[data-route="underworld"] { --liquid-scene-image: url("../assets/backgrounds/routes/v0.8/underworld.png"); }
.mobile-page[data-route="legendary_classics"] { --liquid-scene-image: url("../assets/backgrounds/routes/v0.8/legendary_classics.png"); }
.mobile-page[data-route="beach_club"] { --liquid-scene-image: url("../assets/backgrounds/routes/v0.8/beach_club.png"); }
.mobile-page[data-route="wild_south_america"] { --liquid-scene-image: url("../assets/backgrounds/routes/v0.8/wild_south_america.png"); }
.mobile-page[data-route="shibuya_incident"] { --liquid-scene-image: url("../assets/backgrounds/routes/v0.8/shibuya_incident.png"); }
.mobile-page[data-route="botanist"] { --liquid-scene-image: url("../assets/backgrounds/routes/v0.8/botanist.png"); }
.mobile-page[data-route="sweet_cupcake"] { --liquid-scene-image: url("../assets/backgrounds/routes/v0.8/sweet_cupcake.png"); }
.mobile-page[data-route="london_theatre_district"] { --liquid-scene-image: url("../assets/backgrounds/routes/v0.8/london_theatre_district.png"); }

.display-page::before,
.mobile-page::before,
.preview-page::before {
  content: "";
  position: fixed;
  inset: -3%;
  z-index: -3;
  background-position: center;
  background-size: cover;
}

.display-page::before { background-image: url("../assets/backgrounds/v0.7-magic-tavern-liquor-cabinet-display.png"); }
.mobile-page::before,
.preview-page::before { background-image: var(--liquid-scene-image); }

.display-page::after,
.mobile-page::after,
.preview-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 48% 44%, rgba(238, 187, 217, .16), transparent 35%),
    radial-gradient(circle at 78% 32%, rgba(146, 232, 211, .15), transparent 32%),
    linear-gradient(180deg, rgba(31, 42, 70, .08), rgba(27, 38, 65, .38));
}

.ambient {
  position: fixed;
  z-index: 0;
  width: calc(42 * var(--canvas-vw));
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .3;
  pointer-events: none;
}
.ambient-cyan { left: calc(-12 * var(--canvas-vw)); top: calc(8 * var(--canvas-vh)); background: #9ce7d5; }
.ambient-pink { right: calc(-14 * var(--canvas-vw)); bottom: calc(-22 * var(--canvas-vh)); background: #efb8d5; }

.liquid-panel,
.liquid-button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  background: var(--glass-panel-surface);
  box-shadow: var(--glass-panel-shadow);
  -webkit-backdrop-filter: blur(15px) saturate(176%) contrast(108%);
  backdrop-filter: blur(15px) saturate(176%) contrast(108%);
}

.liquid-panel::before,
.liquid-button::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -9px;
  border-radius: inherit;
  pointer-events: none;
  background-image: var(--liquid-scene-image);
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  opacity: var(--liquid-lens-opacity);
  filter: saturate(142%) contrast(112%) brightness(1.03);
  transform: scale(var(--liquid-lens-scale)) translate3d(-1px, -1px, 0);
  transform-origin: 50% 50%;
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 33%, rgba(0,0,0,.08) 54%, rgba(0,0,0,.76) 82%, #000 100%);
  mask-image: radial-gradient(ellipse at center, transparent 33%, rgba(0,0,0,.08) 54%, rgba(0,0,0,.76) 82%, #000 100%);
  transition: transform .18s ease, opacity .18s ease;
}

.liquid-panel::after,
.liquid-button::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--glass-inner-border);
  background:
    radial-gradient(110% 74% at 14% -16%, rgba(255,255,255,.34), transparent 49%),
    radial-gradient(76% 54% at 104% 108%, rgba(255,80,218,.12), transparent 68%),
    linear-gradient(112deg, rgba(120,224,255,.10), transparent 20% 72%, rgba(255,255,255,.09) 83%, rgba(255,104,225,.08));
  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(85,63,210,.055);
  pointer-events: none;
  transition: transform .18s ease, opacity .18s ease;
}

.liquid-panel > *, .liquid-button > * { position: relative; z-index: 1; }
.kicker { margin: 0 0 5px; color: #a9e9ff; font-size: clamp(10px, calc(.76 * var(--canvas-vw)), 15px); font-weight: 850; letter-spacing: .22em; }

/* 预览入口 */
.preview-page { min-height: calc(100 * var(--canvas-vh)); display: grid; place-items: center; }
.preview-shell { width: min(680px, calc(100% - 32px)); padding: 54px; text-align: center; border-radius: 34px; background: rgba(4,9,34,.64); border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(28px); }
.preview-shell h1 { margin: 10px 0; font-size: clamp(36px, calc(8 * var(--canvas-vw)), 72px); }
.preview-links { display: flex; gap: 14px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }

/* 扫码组队 */
.lobby-display-page { height: calc(100 * var(--canvas-vh)); overflow: hidden; }
.lobby-stage { height: 100%; padding: calc(3 * var(--canvas-vh)) calc(3 * var(--canvas-vw)); display: grid; grid-template-rows: calc(11 * var(--canvas-vh)) minmax(0, 1fr) calc(12 * var(--canvas-vh)); gap: calc(2 * var(--canvas-vh)); }
.lobby-topbar { border-radius: 30px; padding: calc(1.4 * var(--canvas-vh)) calc(1.7 * var(--canvas-vw)); display: flex; justify-content: space-between; align-items: center; }
.lobby-topbar h1 { margin: 0; font-size: clamp(34px, calc(2.7 * var(--canvas-vw)), 58px); line-height: 1; }
.lobby-title { text-align: right; }
.lobby-title small { display: block; color: #a9e9ff; font-size: clamp(16px, calc(1 * var(--canvas-vw)), 23px); letter-spacing: .2em; }
.lobby-title strong { color: var(--sun); font-size: clamp(30px, calc(2.4 * var(--canvas-vw)), 54px); }
.lobby-hero { border-radius: 46px; padding: calc(4 * var(--canvas-vh)) calc(5 * var(--canvas-vw)); display: grid; grid-template-columns: .95fr 1.15fr; align-items: center; gap: calc(6 * var(--canvas-vw)); }
.qr-zone { display: grid; place-items: center; }
.qr-frame { width: min(calc(30 * var(--canvas-vw)), calc(52 * var(--canvas-vh))); aspect-ratio: 1; padding: min(calc(1.2 * var(--canvas-vw)), calc(2 * var(--canvas-vh))); border-radius: 10%; background: rgba(248,251,255,.96); box-shadow: 0 0 0 1px rgba(255,255,255,.8), 0 0 80px rgba(62,211,255,.3), 0 36px 90px rgba(0,0,0,.36); }
.qr-frame img { display: block; width: 100%; height: 100%; }
.qr-rule { min-height: 58%; display: flex; align-items: center; padding-left: calc(6 * var(--canvas-vw)); border-left: 1px solid rgba(225,238,255,.3); }
.qr-rule h2 { margin: 0; font-size: clamp(62px, calc(5.7 * var(--canvas-vw)), 122px); line-height: 1.22; letter-spacing: .025em; text-shadow: 0 0 36px rgba(99,214,255,.22), 0 8px 28px rgba(0,0,0,.35); }
.qr-rule h2 span { display: block; white-space: nowrap; }
.lobby-progress { border-radius: 28px; padding: calc(1.2 * var(--canvas-vh)) calc(1.6 * var(--canvas-vw)); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: calc(2 * var(--canvas-vw)); }
.lobby-count { min-width: calc(12 * var(--canvas-vw)); }
.lobby-count small { display: block; color: #a9e9ff; font-size: clamp(14px, calc(.9 * var(--canvas-vw)), 20px); }
.lobby-count strong { color: var(--sun); font-size: clamp(26px, calc(2.2 * var(--canvas-vw)), 48px); }
.lobby-choice-summary { display: flex; justify-content: center; gap: calc(.7 * var(--canvas-vw)); flex-wrap: wrap; }
.lobby-choice-summary span { padding: calc(.65 * var(--canvas-vh)) calc(.8 * var(--canvas-vw)); border-radius: 999px; color: #dff5ff; background: rgba(47,173,255,.12); border: 1px solid rgba(91,211,255,.28); font-size: clamp(15px, calc(1 * var(--canvas-vw)), 22px); }
.lobby-choice-summary b { color: var(--sun); }
.lobby-choice-summary .lobby-ready { color: #17102c; background: linear-gradient(135deg, var(--sun), var(--magenta)); border-color: rgba(255,255,255,.8); font-weight: 900; }
.lobby-reset { color: rgba(235,243,255,.58); background: transparent; border: 0; padding: calc(1 * var(--canvas-vh)) calc(1 * var(--canvas-vw)); font-size: clamp(13px, calc(.8 * var(--canvas-vw)), 17px); }
.lobby-hero.route-waiting { display: grid; grid-template-columns: 1fr; place-items: center; text-align: center; }
.route-waiting-copy p { margin: 0 0 calc(1 * var(--canvas-vh)); color: var(--sun); font-size: clamp(22px, calc(1.6 * var(--canvas-vw)), 34px); font-weight: 900; letter-spacing: .12em; }
.route-waiting-copy h2 { margin: 0; font-size: clamp(58px, calc(5 * var(--canvas-vw)), 106px); line-height: 1.08; }
.route-waiting-copy strong { display: block; margin-top: calc(2.2 * var(--canvas-vh)); color: #bfeaff; font-size: clamp(20px, calc(1.5 * var(--canvas-vw)), 32px); }

.team-count-page::before { background-position: 48% center; }
.team-count-stage { width: min(100%, 430px); min-height: calc(100 * var(--canvas-vh)); margin: 0 auto; padding: max(14px, env(safe-area-inset-top)) 13px max(24px, env(safe-area-inset-bottom)); display: grid; align-content: start; gap: 12px; }
.team-count-brand { padding: 14px 16px; }
.team-count-brand strong { font-size: 21px; }
.team-count-intro { border-radius: 28px; padding: 22px 18px 21px; text-align: center; }
.team-count-step { width: 38px; height: 38px; margin: 0 auto 9px; display: grid; place-items: center; border-radius: 50%; color: #160f2c; background: linear-gradient(135deg, var(--sun), var(--magenta)); font-weight: 950; }
.team-count-intro p { margin: 0 0 16px; color: var(--sun); font-size: 16px; font-weight: 900; }
.team-count-intro h1 { margin: 0; font-size: 34px; line-height: 1.15; }
.team-count-intro small { display: block; margin-top: 9px; color: #bceaff; font-size: 13px; }
.team-count-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.team-count-grid button { min-height: 83px; display: flex; justify-content: center; align-items: baseline; gap: 5px; border-radius: 24px; color: #eef8ff; border: 1px solid rgba(208,229,255,.28); background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(93,54,218,.18)), rgba(4,11,39,.54); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 16px 38px rgba(0,0,0,.22); backdrop-filter: blur(22px); transition: transform .14s, border-color .2s, background .2s; }
.team-count-grid button:active { transform: scale(.97); }
.team-count-grid button strong { font-size: 43px; line-height: 1; }
.team-count-grid button span { color: #c5e9ff; font-size: 18px; }
.team-count-grid button.selected { color: #17102c; border-color: rgba(255,255,255,.86); background: linear-gradient(135deg, var(--sun), #ff8bcf 62%, #ae7bff); box-shadow: inset 0 1px 0 white, 0 0 30px rgba(255,93,213,.3); }
.team-count-grid button.selected span { color: rgba(23,16,44,.72); }
.team-count-grid button:disabled:not(.selected) { opacity: .5; }
.team-count-status { padding: 14px 16px; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
.team-count-status div { min-width: 72px; }
.team-count-status small { display: block; color: #aee8ff; }
.team-count-status strong { color: var(--sun); font-size: 20px; }
.team-count-status p { margin: 0; text-align: right; color: #f3e6ff; font-size: 14px; font-weight: 800; }

/* 手机选择流派 */
.route-select-page::before { background-position: 48% center; }
.route-select-stage { width: min(100%, 430px); min-height: calc(100 * var(--canvas-vh)); margin: 0 auto; padding: max(12px, env(safe-area-inset-top)) 12px max(20px, env(safe-area-inset-bottom)); display: grid; align-content: start; gap: 10px; }
.route-select-brand { padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; }
.route-select-brand strong { font-size: 21px; }
.route-select-brand > span { min-width: 54px; padding: 7px 10px; border-radius: 999px; text-align: center; color: #17102c; background: linear-gradient(135deg, var(--sun), var(--magenta)); font-weight: 950; }
.route-select-choice { padding: 13px; display: grid; gap: 11px; border-radius: 25px; }
.route-select-choice h1 { margin: 0 2px; font-size: 24px; line-height: 1.2; }
.route-select-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.route-select-grid button { position: relative; overflow: hidden; min-width: 0; aspect-ratio: 3 / 2; padding: 0; border: 1px solid rgba(216,233,255,.34); border-radius: 19px; color: white; background: #071126; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 12px 28px rgba(0,0,0,.28); transition: transform .14s, border-color .16s, box-shadow .16s; }
.route-select-grid button::after { content: ""; position: absolute; inset: 38% 0 0; background: linear-gradient(180deg, transparent, rgba(1,5,21,.9)); pointer-events: none; }
.route-select-grid button:active { transform: scale(.97); }
.route-select-grid img { display: block; width: 100%; height: 100%; object-fit: cover; }
.route-select-grid span { position: absolute; z-index: 1; left: 12px; right: 10px; bottom: 9px; text-align: left; font-size: 17px; font-weight: 950; line-height: 1.1; text-shadow: 0 2px 10px rgba(0,0,0,.65); }
.route-select-grid button.selected { border-color: white; box-shadow: inset 0 0 0 3px var(--sun), 0 0 28px rgba(255,81,216,.58), 0 15px 34px rgba(0,0,0,.34); transform: translateY(-2px); }
.route-select-grid button.selected::before { content: "✓"; position: absolute; z-index: 2; top: 8px; right: 8px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: #17102c; background: linear-gradient(135deg, var(--sun), var(--magenta)); border: 1px solid white; font-weight: 950; }
.route-select-grid button:disabled:not(.selected) { opacity: .55; }
.route-select-status { padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.route-select-status strong { color: var(--sun); font-size: 15px; }
.route-select-status p { margin: 0; color: #e8e1ff; font-size: 13px; font-weight: 800; text-align: right; }
.route-select-status > div { min-width: 0; display: grid; gap: 3px; }
.route-select-status > div > p { text-align: left; overflow-wrap: anywhere; }
#route-confirm { flex: 0 0 auto; min-height: 44px; padding: 8px 13px; border: 1px solid rgba(235,248,255,.7); border-radius: 999px; color: #fff; background: rgba(225,241,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 7px 18px rgba(20,32,58,.18); font-size: 14px; font-weight: 900; }
#route-confirm[hidden] { display: none; }

/* 大屏 */
.display-page { height: calc(100 * var(--canvas-vh)); overflow: hidden; }
.display-stage { position: relative; height: 100%; padding: calc(2.2 * var(--canvas-vh)) calc(2.1 * var(--canvas-vw)); display: grid; grid-template-rows: calc(10 * var(--canvas-vh)) calc(11 * var(--canvas-vh)) minmax(0, 1fr); gap: calc(1.5 * var(--canvas-vh)); }
.display-topbar { position: relative; border-radius: 28px; padding: calc(1.2 * var(--canvas-vh)) calc(1.45 * var(--canvas-vw)); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: calc(2 * var(--canvas-vw)); }
.brand-block h1 { margin: 0; font-size: clamp(28px, calc(2.3 * var(--canvas-vw)), 48px); line-height: 1; letter-spacing: .04em; }
.round-track { position: absolute; left: 50%; display: flex; align-items: center; gap: clamp(8px, calc(.98 * var(--canvas-vw)), 21px); transform: translateX(-50%); }
.round {
  width: clamp(36px, calc(2.925 * var(--canvas-vw)), 60px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  color: rgba(235,242,255,.62); border: 1px solid rgba(185,205,255,.28); background: rgba(7,12,45,.44); font-size: clamp(16px, calc(1 * var(--canvas-vw)), 26px); font-weight: 850;
}
.round.done { color: #bbf1ff; background: rgba(38,189,255,.2); border-color: rgba(83,216,255,.56); }
.round.active { color: #130d30; background: linear-gradient(135deg, var(--sun), var(--magenta)); border-color: white; box-shadow: 0 0 25px rgba(255,91,224,.72); transform: scale(1.18); }
.round-copy { justify-self: end; text-align: right; }
.round-copy span { display: block; color: #a9e9ff; font-size: 13px; letter-spacing: .2em; }
.round-copy strong { font-size: clamp(26px, calc(2.15 * var(--canvas-vw)), 44px); font-variant-numeric: tabular-nums; }
.auction-callout { justify-self: center; width: min(1080px, calc(74 * var(--canvas-vw))); border-radius: 999px; display: grid; place-items: center; padding: calc(1.2 * var(--canvas-vh)) calc(2.1 * var(--canvas-vw)); }
.auction-callout[hidden] { display: none; }
.auction-callout strong { font-size: clamp(28px, calc(2.3 * var(--canvas-vw)), 48px); color: var(--sun); text-align: center; text-shadow: 0 0 22px rgba(255,196,112,.34); }
.classic-announcement { position: absolute; z-index: 30; left: 50%; top: calc(24 * var(--canvas-vh)); width: min(1500px, calc(88 * var(--canvas-vw))); padding: calc(3.2 * var(--canvas-vh)) calc(3.4 * var(--canvas-vw)); border-radius: calc(2.2 * var(--canvas-vw)); text-align: center; transform: translate(-50%, -12px) scale(.96); opacity: 0; background: linear-gradient(125deg, rgba(255,223,139,.9), rgba(255,126,211,.86) 48%, rgba(126,227,255,.86)); box-shadow: 0 0 0 2px rgba(255,255,255,.78), 0 calc(2 * var(--canvas-vh)) calc(8 * var(--canvas-vw)) rgba(15,3,27,.56); }
.classic-announcement[hidden] { display: none; }
.classic-announcement.is-revealing { animation: classic-reveal 8s cubic-bezier(.2,.8,.2,1) both; }
.classic-announcement span { display: block; margin-bottom: calc(.8 * var(--canvas-vh)); color: #48223c; font-size: clamp(18px, calc(1.25 * var(--canvas-vw)), 28px); font-weight: 950; letter-spacing: .16em; }
.classic-announcement strong { display: block; color: #241329; font-size: clamp(38px, calc(3.15 * var(--canvas-vw)), 68px); line-height: 1.18; text-wrap: balance; text-shadow: 0 1px rgba(255,255,255,.55); }
@keyframes classic-reveal { 0% { opacity: 0; transform: translate(-50%, -18px) scale(.92); } 8%, 86% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -8px) scale(.98); } }
.liquid-hot { background: linear-gradient(105deg, rgba(54,197,255,.17), rgba(124,60,255,.2), rgba(255,62,212,.2)), rgba(3,9,36,.5); }
.pulse-dot { width: 14px; aspect-ratio: 1; border-radius: 50%; background: #ff65df; box-shadow: 0 0 0 6px rgba(255,74,216,.14), 0 0 24px #ff50dd; animation: pulse 1.8s infinite; }
@keyframes pulse { 50% { transform: scale(.72); opacity: .55; } }
.material-deck { min-height: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(1.25 * var(--canvas-vw)); }
.finished-ranking-deck { grid-template-columns: repeat(var(--ranking-track-count, 4), minmax(0, 1fr)); align-items: stretch; }
.ranking-card { min-width: 0; padding: calc(3 * var(--canvas-vh)) calc(1.25 * var(--canvas-vw)); border-radius: 34px; display: grid; align-content: center; justify-items: center; gap: calc(1.4 * var(--canvas-vh)); text-align: center; background: linear-gradient(155deg, rgba(62,111,190,.3), rgba(119,43,151,.3)), rgba(4,11,39,.52); }
.ranking-card.champion { border-color: rgba(255,220,139,.85); background: linear-gradient(155deg, rgba(255,194,94,.3), rgba(255,73,198,.28)), rgba(4,11,39,.58); box-shadow: inset 0 1px 0 rgba(255,255,255,.48), 0 0 54px rgba(255,166,84,.22); transform: translateY(calc(-1.2 * var(--canvas-vh))); }
.ranking-card.champion { grid-column: span 2; gap: calc(.8 * var(--canvas-vh)); padding-top: calc(1.5 * var(--canvas-vh)); padding-bottom: calc(1.5 * var(--canvas-vh)); }
.champion-art { position: relative; width: 780px; max-width: 94%; aspect-ratio: 4 / 3; margin: calc(-.2 * var(--canvas-vh)) 0 0; overflow: hidden; border: 1px solid rgba(222,237,255,.64); border-radius: calc(1.3 * var(--canvas-vw)); background: #071229; box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 calc(.8 * var(--canvas-vh)) calc(2.2 * var(--canvas-vw)) rgba(3,8,27,.36), 0 0 calc(1.8 * var(--canvas-vw)) rgba(169,210,255,.18); }
.champion-scene { display: block; width: 100%; height: 100%; object-fit: cover; }
.ranking-place { padding: calc(.6 * var(--canvas-vh)) calc(.8 * var(--canvas-vw)); border-radius: 999px; color: #bfeaff; border: 1px solid rgba(117,218,255,.4); background: rgba(7,25,68,.38); font-size: clamp(16px, calc(1 * var(--canvas-vw)), 23px); }
.ranking-card h2 { margin: 0; font-size: clamp(38px, calc(3.2 * var(--canvas-vw)), 72px); }
.ranking-card small { color: #c9eaff; font-size: clamp(18px, calc(1.25 * var(--canvas-vw)), 28px); }
.ranking-card > strong { color: var(--sun); font-size: clamp(68px, calc(6.4 * var(--canvas-vw)), 138px); line-height: .95; font-variant-numeric: tabular-nums; text-shadow: 0 0 34px rgba(255,194,104,.26); }
.ranking-card em { color: #1b1230; padding: calc(.75 * var(--canvas-vh)) calc(.9 * var(--canvas-vw)); border-radius: 999px; background: linear-gradient(135deg, var(--sun), #ff86dd); font-size: clamp(16px, calc(1.15 * var(--canvas-vw)), 26px); font-style: normal; font-weight: 950; }
.display-page.task-finished .pulse-dot { display: none; }
.display-page.task-finished .display-stage { grid-template-rows: calc(10 * var(--canvas-vh)) minmax(0, 1fr); }
.deck-loading { grid-column: 1 / -1; align-self: center; justify-self: center; color: #c7edff; font-size: clamp(20px, calc(1.5 * var(--canvas-vw)), 32px); }
.deck-error { max-width: 70%; text-align: center; color: #ffe0e8; line-height: 1.45; }
.deck-error small { display: block; margin-top: calc(.7 * var(--canvas-vh)); color: #c7edff; font-size: .64em; }
.material-card { min-width: 0; border: var(--material-card-edge-border); border-radius: var(--material-card-edge-radius); padding: calc(1.5 * var(--canvas-vh)) calc(1.2 * var(--canvas-vw)) calc(1.7 * var(--canvas-vh)); position: relative; text-align: center; box-shadow: var(--glass-panel-shadow); transition: filter .28s, opacity .28s; }
.ingredient-orb { position: absolute; left: 50%; top: 45%; width: min(calc(15.4 * var(--canvas-vw)), calc(27 * var(--canvas-vh))); aspect-ratio: 1; display: grid; place-items: center; transform: translate(-50%, -50%); }
.ingredient-orb img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; transform: scale(var(--material-art-scale, 1)); filter: drop-shadow(0 17px 20px rgba(0,0,0,.34)); }
.orb-lime { --core:#7cff9c; --rim:#1d8f72; --glow:rgba(52,255,201,.34); }
.orb-gin { --core:#7ee7ff; --rim:#3560e1; --glow:rgba(52,198,255,.42); }
.orb-passion { --core:#ffd666; --rim:#ff7c9f; --glow:rgba(255,196,73,.4); }
.orb-tea { --core:#f5a85d; --rim:#9a42c8; --glow:rgba(255,97,212,.32); }
.material-card h2 { position: absolute; left: calc(.8 * var(--canvas-vw)); right: calc(.8 * var(--canvas-vw)); top: 64%; margin: 0; font-size: clamp(46px, calc(3.78 * var(--canvas-vw)), 77px); line-height: 1; text-shadow: 0 3px 16px rgba(0,0,0,.3); }
.tag-row { position: absolute; left: calc(.65 * var(--canvas-vw)); right: calc(.65 * var(--canvas-vw)); top: 75%; bottom: calc(1.4 * var(--canvas-vh)); display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: clamp(4px, calc(.38 * var(--canvas-vw)), 10px); overflow: hidden; }
.tag-row span { padding: calc(.48 * var(--canvas-vh)) calc(.46 * var(--canvas-vw)); border-radius: 999px; color: #dff3ff; border: 1px solid rgba(213,234,255,.2); background: rgba(4,15,51,.3); font-size: clamp(15px, calc(1.04 * var(--canvas-vw)), 23px); line-height: 1.1; white-space: nowrap; }
.tag-row .material-trait { color: #fff; border-color: rgba(255,222,156,.38); background: rgba(72,46,99,.34); font-weight: 800; }
.material-card.selected { filter: grayscale(1); opacity: .48; }
.claimed-ribbon { position: absolute; z-index: 3; right: calc(1 * var(--canvas-vw)); top: calc(1.6 * var(--canvas-vh)); padding: calc(.55 * var(--canvas-vh)) calc(.75 * var(--canvas-vw)); border-radius: 999px; background: rgba(255,255,255,.78); color: #10131d; font-size: clamp(22px, calc(1.35 * var(--canvas-vw)), 34px); line-height: 1.1; font-weight: 900; }
.team-strip { border-radius: 24px; display: grid; grid-template-columns: repeat(var(--team-count, 4), minmax(0, 1fr)); align-items: center; gap: clamp(5px, calc(.65 * var(--canvas-vw)), 14px); padding: calc(.8 * var(--canvas-vh)) calc(1.1 * var(--canvas-vw)); }
.team-chip { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(4px, calc(.45 * var(--canvas-vw)), 10px); padding: calc(.75 * var(--canvas-vh)) clamp(6px, calc(.55 * var(--canvas-vw)), 13px); border-radius: 999px; background: rgba(3,10,35,.32); border: 1px solid rgba(220,234,255,.16); }
.team-chip span { color: #dcecff; }
.team-chip strong { justify-self: end; font-size: clamp(16px, calc(1.25 * var(--canvas-vw)), 30px); font-variant-numeric: tabular-nums; }
.team-chip em { color: var(--sun); font-style: normal; font-weight: 900; }
.team-chip.leader { border-color: rgba(255,215,132,.7); box-shadow: inset 0 0 20px rgba(255,200,92,.12); }
.team-color { width: 10px; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 12px currentColor; }
.c1 { color:#ff63c8; background:currentColor; }.c2 { color:#4fdcff; background:currentColor; }.c3 { color:#ffd071; background:currentColor; }.c4 { color:#8f7aff; background:currentColor; }
.c5 { color:#70f0a0; background:currentColor; }.c6 { color:#ff8f6b; background:currentColor; }.c7 { color:#6ea6ff; background:currentColor; }.c8 { color:#d68cff; background:currentColor; }

/* 手机 */
.mobile-page { min-height: calc(100 * var(--canvas-vh)); background-attachment: fixed; }
.mobile-page::before { background-position: 44% center; filter: saturate(1.08); }
.phone-stage { width: min(100%, 430px); min-height: calc(100 * var(--canvas-vh)); margin: 0 auto; padding: max(14px, env(safe-area-inset-top)) 13px max(28px, env(safe-area-inset-bottom)); display: grid; align-content: start; gap: 11px; }
.compact-glass { border-radius: 20px; }
.phone-overview { display: grid; grid-template-columns: minmax(0, 1fr) 88px; gap: 9px; align-items: stretch; }
.phone-summary { min-width: 0; padding: 12px 13px; display: grid; gap: 10px; }
.bartender-identity { min-width: 0; }
.bartender-identity .kicker { margin-bottom: 3px; color: white; font-size: 15px; letter-spacing: .02em; }
.bartender-identity strong { display: block; color: #c5edff; font-size: 12px; line-height: 1.25; }
.bartender-identity small { display: block; margin-top: 4px; color: rgba(232,241,255,.7); font-size: 10px; }
.total-score { padding: 12px 9px; display: grid; align-content: center; justify-items: center; text-align: center; }
.total-score small { display: block; color: #b9e8ff; }
.total-score strong { color: var(--sun); font-size: 31px; font-variant-numeric: tabular-nums; }
.bond-content { min-width: 0; padding-top: 9px; box-shadow: inset 0 1px 0 rgba(209,236,255,.18); display: grid; gap: 7px; }
.bond-content[hidden] { display: none; }
.trait-board-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.trait-board-head small { color: #b9eaff; font-weight: 800; }
.trait-board-head span { color: #ffe09a; font-size: 11px; font-weight: 800; text-align: right; }
.trait-board-list { min-width: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.trait-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; border-radius: 999px; color: rgba(227,239,255,.64); background: rgba(10,20,54,.36); border: 1px solid rgba(200,225,255,.14); font-size: 11px; white-space: nowrap; }
.trait-chip i, .trait-chip em { font-style: normal; }
.trait-chip em { color: rgba(210,229,255,.58); font-variant-numeric: tabular-nums; }
.trait-chip.active { color: white; border-color: rgba(103,220,255,.58); background: rgba(33,148,213,.2); box-shadow: inset 0 0 10px rgba(59,198,255,.12); }
.trait-chip.selected { border-color: rgba(255,220,130,.78); box-shadow: inset 0 0 12px rgba(255,190,80,.16), 0 0 10px rgba(255,102,209,.15); }
.computer-guidance { margin: 0; padding: 6px 7px; border-radius: 9px; color: #f9e5ff; background: rgba(139,58,179,.16); border: 1px solid rgba(235,160,255,.22); font-size: 10px; line-height: 1.25; }
.computer-guidance[hidden] { display: none; }
.computer-guidance.is-choice { display: grid; gap: 1px; }
.computer-guidance .guidance-line { min-width: 0; }
.computer-guidance .guidance-choice { white-space: nowrap; font-weight: 850; }
.cup-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cup-card { border-radius: 23px; padding: 11px 7px 10px; text-align: center; }
.cup-stage-name { margin: 0; min-height: 24px; color: #d8f1ff; font-size: 13px; font-weight: 800; }
.cup-identity { min-height: 16px; margin: -5px 0 2px; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 5px; color: #ffe2a3; font-size: 11px; font-weight: 750; line-height: 1.25; }
.cup-identity span { white-space: nowrap; }
.cup-assets { min-height: 178px; height: auto; position: relative; margin: 0 auto 5px; display: grid; place-items: center; isolation: isolate; }
.cup-assets::before { content: ""; position: absolute; left: 12%; right: 12%; bottom: 20px; height: 16px; border-radius: 50%; background: radial-gradient(ellipse, rgba(60,214,255,.38), transparent 70%); filter: blur(5px); }
.cocktail-composition { width: 100%; display: grid; justify-items: center; position: relative; z-index: 1; }
.cocktail-render { width: 96px; height: 101px; position: relative; filter: drop-shadow(0 9px 8px rgba(0,0,0,.28)); }
.glass-vessel { position: absolute; z-index: 2; left: 50%; overflow: hidden; transform: translateX(-50%); background: linear-gradient(100deg, rgba(255,255,255,.26), rgba(150,209,255,.08) 42%, rgba(255,255,255,.22)); box-shadow: inset 2px 0 2px rgba(255,255,255,.46), inset -2px 0 2px rgba(153,208,255,.38), inset 0 -2px 2px rgba(202,232,255,.35); }
.liquid-layer { position: absolute; inset: auto 2px 2px; height: var(--fill); background: linear-gradient(180deg, var(--liquid-top), var(--liquid-bottom)); box-shadow: inset 0 5px 7px rgba(255,255,255,.2), 0 0 16px rgba(86,210,255,.28); }
.has-sink-layer .liquid-layer { background: linear-gradient(to top, var(--sink-bottom) 0 13%, var(--sink-top) 27%, var(--liquid-bottom) 34%, var(--liquid-top) 100%); }
.has-float-layer .liquid-layer { background: linear-gradient(to bottom, var(--float-top) 0 13%, var(--float-bottom) 27%, var(--liquid-top) 34%, var(--liquid-bottom) 100%); }
.opacity-clear .liquid-layer { opacity: .72; }
.opacity-translucent .liquid-layer { opacity: .88; }
.opacity-opaque .liquid-layer { opacity: 1; }
.cocktail-render.is-empty .liquid-layer { display: none; }
.glass-stem, .glass-foot { display: none; position: absolute; z-index: 1; left: 50%; transform: translateX(-50%); background: linear-gradient(90deg, rgba(155,207,255,.25), rgba(255,255,255,.7), rgba(155,207,255,.24)); }
.glass-martini .glass-vessel { top: 5px; width: 84px; height: 56px; clip-path: polygon(0 0,100% 0,60% 74%,55% 80%,55% 100%,45% 100%,45% 80%,40% 74%); }
.glass-martini .glass-stem, .glass-flute .glass-stem, .glass-dessert .glass-stem { display: block; top: 53px; width: 4px; height: 32px; }
.glass-martini .glass-foot, .glass-flute .glass-foot, .glass-dessert .glass-foot { display: block; top: 83px; width: 48px; height: 5px; border-radius: 50%; }
.glass-rocks .glass-vessel { top: 24px; width: 68px; height: 62px; border-radius: 7px 7px 16px 16px; clip-path: polygon(3% 0,97% 0,89% 100%,11% 100%); }
.glass-highball .glass-vessel { top: 5px; width: 51px; height: 84px; border-radius: 7px 7px 13px 13px; clip-path: polygon(2% 0,98% 0,88% 100%,12% 100%); }
.glass-hurricane .glass-vessel { top: 5px; width: 66px; height: 83px; border-radius: 38% 38% 27% 27%; clip-path: polygon(14% 0,86% 0,95% 19%,78% 50%,66% 68%,70% 100%,30% 100%,34% 68%,22% 50%,5% 19%); }
.glass-flute .glass-vessel { top: 3px; width: 42px; height: 66px; border-radius: 45% 45% 23% 23%; clip-path: polygon(5% 0,95% 0,82% 100%,18% 100%); }
.glass-flute .glass-stem { top: 63px; height: 23px; }
.glass-dessert .glass-vessel { top: 8px; width: 80px; height: 47px; border-radius: 8px 8px 45% 45%; clip-path: polygon(0 0,100% 0,83% 78%,66% 100%,34% 100%,17% 78%); }
.glass-dessert .glass-stem { top: 49px; height: 36px; }
.visual-ice, .visual-bubbles, .visual-foam, .visual-herb { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
.visual-ice { opacity: .7; background: linear-gradient(35deg, transparent 34%, rgba(235,250,255,.58) 35% 47%, transparent 48%) 1px 32px / 23px 20px, linear-gradient(-35deg, transparent 35%, rgba(208,240,255,.48) 36% 49%, transparent 50%) 11px 42px / 27px 22px; }
.visual-bubbles { background: radial-gradient(circle, rgba(255,255,255,.8) 0 1px, transparent 2px) 2px 4px / 13px 15px, radial-gradient(circle, rgba(207,245,255,.7) 0 1px, transparent 2px) 8px 10px / 17px 19px; }
.visual-foam { inset: auto 2px calc(var(--fill) - 5px); height: 8px; border-radius: 50%; background: radial-gradient(circle at 50% 70%, #fff8e7, #e8d8c2 70%, transparent 72%); box-shadow: 0 -2px 4px rgba(255,255,255,.25); }
.visual-foam.foam-crema { background: radial-gradient(circle at 50% 70%, #f1ce91, #9d6238 70%, transparent 72%); }
.visual-herb { opacity: .56; background: radial-gradient(ellipse at 56% 58%, rgba(85,238,139,.8) 0 3px, transparent 4px), radial-gradient(ellipse at 39% 72%, rgba(46,167,105,.8) 0 3px, transparent 4px); transform: rotate(-14deg); }
.cocktail-garnish { position: absolute; z-index: 5; top: -3px; right: 1px; width: 35px; height: 35px; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(0,0,0,.35)); transform: rotate(10deg); }
.shaker-composition { width: 100%; display: grid; justify-items: center; position: relative; z-index: 1; }
.shaker-render { width: 96px; height: 104px; position: relative; filter: drop-shadow(0 9px 8px rgba(0,0,0,.3)); }
.shaker-assembly { position: absolute; inset: 0; transform-origin: 50% 70%; }
.shaker-sprite { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.shaker-body-image { clip-path: inset(25% 0 0); }
.shaker-lid-image { z-index: 4; clip-path: inset(0 0 75%); transform-origin: 55% 25%; }
.shaker-mouth { position: absolute; z-index: 1; top: 23px; left: 31px; width: 34px; height: 10px; border-radius: 50%; background: radial-gradient(ellipse, #071122 0 43%, #86b8bb 47% 61%, #f3e7b7 64% 72%, transparent 74%); opacity: 0; transform: scale(.8); }
.shaker-count { min-height: 17px; margin-top: 2px; color: #bfeaff; font-size: 11px; letter-spacing: .02em; }
.shaker-composition .material-receipts { margin-top: 4px; }
.shaker-render.is-mixing .shaker-assembly { animation: shaker-idle-mix 1.35s cubic-bezier(.36,.07,.19,.97) infinite; }
.shaker-render.is-receiving .shaker-assembly { animation: shaker-catch 1.08s ease-in-out both; }
.shaker-render.is-receiving .shaker-lid-image { animation: shaker-lid-open 1.08s ease-in-out both; }
.shaker-render.is-receiving .shaker-mouth { animation: shaker-mouth-open 1.08s ease-in-out both; }
.incoming-material { position: absolute; z-index: 6; top: -52px; right: -8px; width: 48px; height: 48px; object-fit: contain; filter: drop-shadow(0 5px 5px rgba(0,0,0,.38)); animation: material-drop-in 1.08s cubic-bezier(.36,.08,.22,1) both; }
.phone-flow.is-animating .placement-pick { opacity: .3; pointer-events: none; }

@keyframes shaker-idle-mix {
  0%, 100% { transform: rotate(-2.4deg) translateX(-1px); }
  22% { transform: rotate(3.5deg) translate(2px,-1px); }
  48% { transform: rotate(-3.2deg) translate(-2px,1px); }
  72% { transform: rotate(2.8deg) translate(1px,-1px); }
}
@keyframes shaker-lid-open {
  0%, 15% { transform: translate(0,0) rotate(0); }
  34%, 62% { transform: translate(20px,-24px) rotate(18deg); }
  84%, 100% { transform: translate(0,0) rotate(0); }
}
@keyframes shaker-mouth-open {
  0%, 18%, 82%, 100% { opacity: 0; transform: scale(.8); }
  34%, 66% { opacity: 1; transform: scale(1); }
}
@keyframes material-drop-in {
  0%, 20% { opacity: 0; transform: translate(0,-14px) rotate(-12deg) scale(.9); }
  30% { opacity: 1; }
  67% { opacity: 1; transform: translate(-31px,76px) rotate(18deg) scale(.52); }
  72%, 100% { opacity: 0; transform: translate(-31px,88px) rotate(25deg) scale(.22); }
}
@keyframes shaker-catch {
  0%, 76% { transform: rotate(0); }
  84% { transform: rotate(-5deg); }
  91% { transform: rotate(5deg); }
  100% { transform: rotate(0); }
}
.material-receipts { min-height: 27px; margin-top: -9px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }
.material-receipts img { width: 27px; height: 27px; margin: 0 -4px; padding: 2px; object-fit: contain; border-radius: 50%; background: rgba(9,18,53,.74); border: 1px solid rgba(214,237,255,.35); filter: drop-shadow(0 3px 3px rgba(0,0,0,.28)); }
.material-receipts span { z-index: 2; min-width: 23px; height: 23px; margin-left: -3px; display: grid; place-items: center; border-radius: 50%; color: white; background: rgba(73,39,126,.9); border: 1px solid rgba(225,209,255,.4); font-size: 9px; font-weight: 900; }
.material-name-list { flex: 0 0 100%; margin-top: 3px; color: #dceeff; font-size: 10px; font-weight: 800; line-height: 1.25; text-align: center; }
.material-receipts .missing-receipt { margin: 0 -4px; background: rgba(62,87,126,.88); }
.cup-score { display: flex; justify-content: center; align-items: baseline; gap: 5px; }
.cup-score span { flex: 0 0 auto; color: #c6eaff; font-size: 12px; white-space: nowrap; }
.cup-score strong { color: var(--sun); font-size: 27px; font-variant-numeric: tabular-nums; }
.mini-tags { display: flex; justify-content: center; gap: 3px; margin-top: 4px; }
.mini-tags span { padding: 3px 5px; border-radius: 999px; background: rgba(5,15,52,.38); border: 1px solid rgba(206,231,255,.18); font-size: 9px; }
.cup-bonds { margin-top: 6px; padding-top: 6px; box-shadow: inset 0 1px 0 rgba(205,233,255,.16); text-align: left; }
.cup-bond-summary { min-height: 44px; padding: 8px 2px; display: grid; place-items: center; color: #ccecff; font-size: 12px; font-weight: 850; line-height: 1.3; text-align: center; }
.cup-bonds > div > small { display: block; margin-bottom: 7px; color: #9fdfff; font-size: 10px; line-height: 1.35; }
.cup-bonds p { margin: 0 0 7px; color: #dceeff; font-size: 12px; line-height: 1.35; }
.cup-bonds p:last-child { margin-bottom: 0; }
.cup-bonds b { display: block; color: var(--sun); font-size: 12px; }
.cup-bonds span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 4px; overflow-wrap: normal; word-break: keep-all; }
.cup-bonds span i { display: inline-block; white-space: nowrap; font-style: normal; }
.cup-bonds span i:not(:last-child)::after { content: "；"; }
.bid-state { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 10px; }
.bid-state-card { min-width: 0; padding: 12px 14px; display: flex; flex-direction: column; justify-content: center; }
.bid-state small { color: #aee8ff; }
.bid-state strong { display: block; overflow-wrap: anywhere; font-size: 20px; color: var(--sun); }
.best-choice-card { padding-inline: 10px; border-color: rgba(238,203,255,.42); }
.best-choice-card small { color: #efcfff; }
.auction-score-list { min-width: 0; display: grid; gap: 4px; margin-top: 5px; }
.auction-score-row { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 3px 5px; border-radius: 8px; background: rgba(7,18,48,.24); }
.auction-score-row b { min-width: 0; overflow: hidden; color: rgba(244,248,255,.9); font-size: 11px; font-weight: 800; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.auction-score-row em { color: #dce9f6; font-size: 14px; font-style: normal; font-weight: 950; line-height: 1; font-variant-numeric: tabular-nums; }
.auction-score-row.is-unavailable { opacity: .5; }
.best-choice-empty { color: #e5edf7; font-size: 20px; font-weight: 900; }

.display-page .tag-row {
  left: calc(.45 * var(--canvas-vw));
  right: calc(.45 * var(--canvas-vw));
  top: 72%;
  bottom: calc(.9 * var(--canvas-vh));
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: calc(.28 * var(--canvas-vw));
}
.display-page .tag-row span {
  width: 100%;
  min-width: 0;
  text-align: center;
  padding: calc(.35 * var(--canvas-vh)) calc(.28 * var(--canvas-vw));
  font-size: 57.5px;
  line-height: 1;
}
.phone-actions { display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px; }
.phone-actions[hidden] { display: none; }
.mobile-page.task-picking .bid-state,
.mobile-page.task-placing .bid-state { display: none; }
.mobile-page.task-placing .cup-grid { display: none; }
.mobile-page.task-finished .bond-content,
.mobile-page.task-finished .bid-state,
.mobile-page.task-finished .phone-actions { display: none; }
.mobile-page.task-finished #final-ranking { display: block; }
.liquid-button { min-height: 64px; border-radius: 22px; color: white; text-decoration: none; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; transition: transform .14s, opacity .2s, box-shadow .18s ease; }
.liquid-button:active { transform: translateY(1px) scale(.975); box-shadow: inset 0 2px 9px rgba(0,0,0,.18), inset 0 -1px 0 rgba(255,255,255,.45), 0 8px 24px rgba(1,4,25,.28); }
.liquid-button:active::before { transform: scale(1.045) translate3d(4px, 2px, 0); opacity: calc(var(--liquid-lens-opacity) + .08); }
.liquid-button:active::after { transform: translate3d(-2px, 2px, 0); }
.liquid-button span { font-size: 22px; font-weight: 950; }
.liquid-button small { color: rgba(235,244,255,.7); font-size: 11px; }
.liquid-button.gold { --liquid-lens-opacity: .11; color: #263550; border-color: rgba(223,250,244,.86); background: linear-gradient(135deg, rgba(204,245,235,.92), rgba(181,226,244,.86) 48%, rgba(239,187,216,.78)); box-shadow: inset 0 1px 0 white, inset 0 -1px 0 rgba(112,135,175,.22), 0 12px 35px rgba(172,221,237,.24), 0 0 28px rgba(235,181,214,.16); }
.liquid-button.gold small { color: rgba(28,16,43,.72); }
.action-plus span { font-size: 30px; }
.action-pass { background: linear-gradient(135deg, rgba(111,86,255,.22), rgba(255,255,255,.06)), rgba(4,10,35,.54); }
.action-pass.is-passed { opacity: .5; filter: grayscale(.5); }
.phone-flow { padding: 13px 14px; border-radius: 23px; }
.phone-flow[hidden] { display: none; }
.placement-flow { overflow: visible; }
.flow-copy { margin: -3px 0 10px; color: #bceaff; font-size: 12px; }
.material-picker-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.material-pick { min-width: 0; min-height: 132px; padding: 9px; border-radius: 17px; color: white; background: rgba(6,16,53,.52); border: 1px solid rgba(198,231,255,.3); display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 7px; align-items: start; text-align: left; }
.material-pick img { width: 54px; height: 68px; object-fit: contain; transform: scale(var(--material-art-scale, 1)); }
.material-pick strong { display: block; font-size: 15px; }
.material-pick small { display: flex; flex-wrap: wrap; gap: 3px 5px; margin-top: 5px; color: #bfeaff; font-size: 11px; line-height: 1.3; word-break: keep-all; }
.material-pick small i { white-space: nowrap; font-style: normal; }
.material-pick small i:not(:last-child)::after { content: " ·"; }
.placement-material { width: 100%; min-height: 256px; margin: 2px auto 12px; padding: 12px 12px 10px; display: grid; grid-template-rows: 216px auto; justify-items: center; align-items: center; border-radius: 19px; color: #fff; }
.placement-material img { width: 196px; height: 196px; object-fit: contain; transform: scale(var(--material-art-scale, 1)); filter: drop-shadow(0 9px 10px rgba(3,8,27,.34)); }
.placement-material strong { min-width: 0; max-width: 100%; color: #f7fbff; font-size: 14px; line-height: 1.25; text-align: center; overflow-wrap: anywhere; }
.placement-instruction { margin: 0 0 10px; color: #f7fbff; font-size: 15px; font-weight: 850; line-height: 1.35; text-align: center; text-shadow: 0 2px 10px rgba(1,4,25,.72); }
.placement-picker-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.placement-pick { min-width: 0; min-height: 132px; padding: 13px 10px; border-radius: 17px; color: white; }
.placement-pick.is-full { opacity: .58; filter: saturate(.55); cursor: not-allowed; }
.placement-pick strong { display: block; margin-top: 8px; color: var(--sun); font-size: 34px; line-height: 1; }
.placement-pick > span { display: block; font-size: 15px; font-weight: 900; }
.placement-pick small { display: block; margin-top: 9px; color: #c8efff; font-size: 13px; line-height: 1.3; }
.cocktail-composition.compact .cocktail-render { width: 70px; height: 80px; transform: scale(.76); transform-origin: 50% 100%; margin-top: -13px; }
.cocktail-composition.compact .material-receipts { margin-top: -7px; }
.shaker-composition.compact .shaker-render { width: 72px; height: 80px; }
.shaker-composition.compact .shaker-mouth { top: 18px; left: 24px; width: 25px; height: 7px; }
.shaker-composition.compact .shaker-count { margin-top: 1px; font-size: 11px; }
.shaker-composition.compact .material-receipts { margin-top: 2px; }
.material-receipts.compact img { width: 22px; height: 22px; }
.material-receipts.compact span { min-width: 20px; height: 20px; }
.final-shaker-composition { width: 100%; display: grid; justify-items: center; align-content: start; }
.final-shaker-image { width: 110px; height: 122px; display: block; object-fit: contain; filter: drop-shadow(0 9px 12px rgba(3,8,27,.34)); }
.final-shaker-composition .material-receipts { margin-top: -2px; }
.ranking-list { display: grid; gap: 7px; }
.ranking-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 15px; background: rgba(6,16,53,.44); }
.ranking-row span small { display: block; margin-top: 3px; color: #bfeaff; }
.ranking-row.is-self { border: 1px solid var(--sun); }
.liquid-button:disabled, .material-pick:disabled, .placement-pick:disabled { cursor: default; opacity: .42; filter: grayscale(.25); }
.section-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; }
.section-title span { min-width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.12); }
.test-host-controls { position: fixed; z-index: 20; left: max(8px, env(safe-area-inset-left)); bottom: max(8px, env(safe-area-inset-bottom)); display: grid; justify-items: start; gap: 7px; }
.test-host-controls[hidden], .test-host-menu[hidden] { display: none; }
.test-host-menu { display: grid; gap: 6px; max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain; padding: 7px; border: 1px solid rgba(217,238,255,.28); border-radius: 17px; background: rgba(2,9,30,.62); -webkit-backdrop-filter: blur(20px) saturate(175%); backdrop-filter: blur(20px) saturate(175%); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 10px 28px rgba(0,0,0,.28); }
.test-host-toggle { width: 44px; height: 44px; padding: 0; border-radius: 50%; color: rgba(235,247,255,.9); border: 1px solid rgba(217,238,255,.32); background: rgba(2,9,30,.64); -webkit-backdrop-filter: blur(18px) saturate(175%); backdrop-filter: blur(18px) saturate(175%); font-size: 16px; font-weight: 900; line-height: 1; letter-spacing: 1px; box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 8px 24px rgba(0,0,0,.26); }
.test-host-toggle[aria-expanded="true"] { color: #fff4ca; border-color: rgba(255,220,140,.5); }
.test-host-option { min-height: 38px; padding: 8px 12px; border-radius: 999px; color: rgba(240,249,255,.92); border: 1px solid rgba(217,238,255,.24); background: rgba(12,25,62,.72); font-size: 11px; font-weight: 850; white-space: nowrap; }
.test-host-option:disabled, .test-host-toggle:disabled { opacity: .42; }
.test-host-danger { color: #ffe4e8; border-color: rgba(255,145,165,.42); background: rgba(104,25,54,.76); }

@media (max-width: 1100px) and (orientation: landscape) {
  body.display-page:not(.fixed-canvas-page) .display-stage { grid-template-rows: calc(10 * var(--canvas-vh)) calc(11 * var(--canvas-vh)) minmax(0,1fr); }
  body.display-page:not(.fixed-canvas-page) .material-card { border-radius: 24px; }
  body.display-page:not(.fixed-canvas-page) .auction-callout { width: calc(90 * var(--canvas-vw)); }
}

@media (max-width: 380px) {
  body.mobile-page:not(.fixed-canvas-page) .material-picker-grid { grid-template-columns: 1fr; }
  body.mobile-page:not(.fixed-canvas-page) .material-pick { min-height: 112px; grid-template-columns: 64px minmax(0, 1fr); }
  body.mobile-page:not(.fixed-canvas-page) .material-pick img { width: 64px; height: 76px; }
}

@media (max-width: 380px) and (max-height: 740px) {
  body.mobile-page:not(.fixed-canvas-page) .team-count-stage { padding: 10px 13px 12px; gap: 8px; }
  body.mobile-page:not(.fixed-canvas-page) .team-count-brand { padding: 10px 14px; }
  body.mobile-page:not(.fixed-canvas-page) .team-count-intro { padding: 14px 16px; }
  body.mobile-page:not(.fixed-canvas-page) .team-count-step { width: 32px; height: 32px; margin-bottom: 5px; }
  body.mobile-page:not(.fixed-canvas-page) .team-count-intro p { margin-bottom: 8px; font-size: 15px; }
  body.mobile-page:not(.fixed-canvas-page) .team-count-intro h1 { font-size: 30px; }
  body.mobile-page:not(.fixed-canvas-page) .team-count-intro small { margin-top: 5px; font-size: 12px; }
  body.mobile-page:not(.fixed-canvas-page) .team-count-grid { gap: 8px; }
  body.mobile-page:not(.fixed-canvas-page) .team-count-grid button { min-height: 68px; border-radius: 20px; }
  body.mobile-page:not(.fixed-canvas-page) .team-count-status { padding: 10px 14px; }
}

@media (max-width: 340px) {
  body.mobile-page:not(.fixed-canvas-page) .cup-assets .cocktail-render { left: -10px; transform: scale(.75); }
  body.mobile-page:not(.fixed-canvas-page) .cup-assets .cocktail-composition { margin-top: -5px; }
  body.mobile-page:not(.fixed-canvas-page) .cup-score { gap: 3px; }
  body.mobile-page:not(.fixed-canvas-page) .cup-score span { font-size: 10px; }
  body.mobile-page:not(.fixed-canvas-page) .cup-score strong { font-size: 24px; }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .liquid-panel,
  .liquid-button {
    background: linear-gradient(135deg, rgba(25,38,81,.94), rgba(8,14,43,.96));
  }
  .liquid-panel::before,
  .liquid-button::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .liquid-button:active::before { transform: scale(var(--liquid-lens-scale)) translate3d(-1px,-1px,0); }
  .liquid-button:active::after { transform: none; }
  .shaker-render.is-receiving .shaker-lid-image { transform: translate(16px,-18px) rotate(14deg); }
  .shaker-render.is-receiving .shaker-mouth { opacity: 1; }
  .shaker-render.is-receiving .incoming-material { opacity: 0; }
}

/* LEGACY GLASS FIXED CANVAS V1
   冻结原毛玻璃视觉，同时沿用当前大屏与手机的固定比例合同。 */
.fixed-canvas-page {
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  background: #020914;
}

.fixed-canvas-page::before,
.fixed-canvas-page::after {
  display: none;
}

.fixed-canvas {
  --canvas-scale: 1;
  --canvas-offset-x: 0px;
  --canvas-offset-y: 0px;
  position: absolute;
  left: var(--canvas-offset-x);
  top: var(--canvas-offset-y);
  overflow: hidden;
  isolation: isolate;
  transform: scale(var(--canvas-scale));
  transform-origin: 0 0;
  background-color: var(--ink);
  box-shadow: 0 18px 70px rgba(0, 0, 0, .48);
}

.fixed-canvas[data-canvas-contract="display"] {
  --canvas-vw: 32px;
  --canvas-vh: 18px;
  width: 3200px;
  height: 1800px;
}

.fixed-canvas[data-canvas-contract="mobile"] {
  --canvas-vw: 3.9px;
  --canvas-vh: 8.44px;
  width: 390px;
  height: 844px;
}

/* 手机始终保持390×844的iPhone纵向比例，超出首屏的游戏内容只在画布内部纵向滑动。 */
.mobile-page .phone-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  min-height: 0;
  height: 100%;
  max-height: none;
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding-bottom: max(104px, calc(76px + env(safe-area-inset-bottom)));
  scroll-padding-block: 12px max(104px, calc(76px + env(safe-area-inset-bottom)));
}
.mobile-page .team-count-stage,
.mobile-page .route-select-stage {
  box-sizing: border-box;
  grid-auto-rows: max-content;
  min-height: 0;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding-bottom: max(92px, calc(68px + env(safe-area-inset-bottom)));
  scroll-padding-block: 12px max(92px, calc(68px + env(safe-area-inset-bottom)));
}
.mobile-page .phone-stage > * + * { margin-top: 11px; }
.mobile-page .fixed-canvas { overflow: clip; }

.fixed-canvas::before,
.fixed-canvas::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.fixed-canvas::before {
  z-index: -3;
  background-image: var(--liquid-scene-image);
  background-position: center;
  background-size: cover;
  filter: saturate(1.06) contrast(1.02);
  transform: scale(1.015);
}

.fixed-canvas::after {
  z-index: -2;
  background:
    radial-gradient(circle at 16% 16%, rgba(145, 231, 211, .18), transparent 31%),
    radial-gradient(circle at 84% 78%, rgba(239, 184, 213, .18), transparent 34%),
    linear-gradient(180deg, rgba(31, 42, 70, .06), rgba(27, 38, 65, .34));
}

.fixed-canvas[data-canvas-ready="true"] {
  visibility: visible;
}

.fixed-canvas:not([data-canvas-ready="true"]) {
  visibility: hidden;
}

/* v0.8 双屏排版合同：390×844 手机以可读性优先，完整信息纵向展开。 */
.fixed-canvas[data-canvas-contract="mobile"] {
  --type-caption: 14px;
  --type-body: 14px;
  --type-label: 15px;
  --type-title: 19px;
  --tap-min: 48px;
}

.mobile-page button { min-height: var(--tap-min); }
.mobile-page button.liquid-button { min-height: 68px; }
.mobile-page .kicker { font-size: var(--type-caption); line-height: 1.25; }
.bartender-identity .kicker { font-size: var(--type-title); line-height: 1.2; }
.bartender-identity strong { font-size: var(--type-label); line-height: 1.35; }
.bartender-identity small { font-size: var(--type-caption); line-height: 1.35; }
.total-score small,
.trait-board-head small,
.trait-board-head span { font-size: var(--type-caption); line-height: 1.3; }
.trait-chip { padding: 5px 8px; font-size: var(--type-caption); line-height: 1.25; }
.computer-guidance { padding: 8px 9px; font-size: var(--type-caption); line-height: 1.4; }
.trait-chip { color: rgba(235,245,255,.9); border-color: rgba(210,232,255,.28); background: rgba(10,20,54,.48); }
.trait-chip em { color: rgba(224,239,255,.84); }
.bartender-identity small { color: rgba(238,246,255,.9); }
.trait-board-head small,
.trait-board-head span,
.bid-state small { font-size: 14px; }

/* 两杯纵向呈现，完整羁绊不挤进窄栏。 */
.cup-grid { grid-template-columns: 1fr; gap: 10px; }
.cup-card {
  min-width: 0;
  padding: 13px;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) 64px;
  grid-template-areas:
    "assets stage score"
    "assets identity score"
    "assets bonds bonds";
  column-gap: 12px;
  align-items: start;
  text-align: left;
  overflow: visible;
}
.cup-stage-name { grid-area: stage; min-height: 0; margin: 1px 0 0; font-size: 17px; line-height: 1.25; text-align: left; }
.cup-identity { grid-area: identity; min-height: 0; margin: 3px 0 0; justify-content: flex-start; font-size: var(--type-body); line-height: 1.35; text-align: left; }
.cup-assets { grid-area: assets; width: 104px; min-height: 150px; height: 100%; margin: 0; align-self: stretch; }
.cup-assets .cocktail-render,
.cup-assets .shaker-render { transform: scale(.88); transform-origin: 50% 50%; }
.cup-score { grid-area: score; min-width: 0; min-height: 58px; justify-content: flex-end; align-items: center; }
.cup-score strong { font-size: 30px; line-height: 1; }
.cup-bonds { grid-area: bonds; min-width: 0; margin-top: 10px; padding-top: 9px; }
.cup-bond-summary { min-height: 0; padding: 0 0 8px; display: flex; justify-content: flex-start; gap: 10px; font-size: var(--type-label); line-height: 1.35; text-align: left; }
.cup-bonds > div > small { margin-bottom: 8px; font-size: var(--type-caption); line-height: 1.4; }
.cup-bonds p { margin-bottom: 8px; font-size: var(--type-body); line-height: 1.5; }
.cup-bonds b { display: inline; margin-right: 4px; font-size: var(--type-body); }
.cup-bonds span { display: inline-flex; line-height: 1.5; }
.material-name-list { font-size: 11px; line-height: 1.35; }
.cup-assets .material-name-list { max-width: 104px; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow-wrap: anywhere; }
.shaker-count { font-size: var(--type-caption); line-height: 1.3; }

.bid-state-card { min-height: 74px; padding: 13px 15px; }
.bid-state small { font-size: var(--type-caption); line-height: 1.3; }
.bid-state strong { margin-top: 3px; font-size: clamp(17px, 5.1vw, 21px); line-height: 1.2; }
.phone-actions { grid-template-columns: 1fr 1fr; gap: 10px; }
.liquid-button { min-height: 68px; padding: 8px 10px; }
.liquid-button span { font-size: 22px; line-height: 1.15; }
.liquid-button small { margin-top: 3px; font-size: var(--type-caption); line-height: 1.25; }
.action-plus span { font-size: 29px; }

.phone-flow { padding: 14px; }
.section-title strong { font-size: 16px; line-height: 1.3; }
.section-title span,
.flow-copy,
.material-pick small,
.placement-pick small { font-size: var(--type-body); line-height: 1.45; }
.material-pick strong { font-size: 16px; line-height: 1.3; }
.material-pick { min-height: 142px; padding: 10px; }
.placement-pick { min-height: 146px; }
.placement-pick > span { font-size: 16px; }

/* 组队与流派页共用同一字号和对齐节奏。 */
.team-count-stage,
.route-select-stage { width: 100%; }
.team-count-brand strong,
.route-select-brand strong { font-size: 22px; line-height: 1.2; }
.team-count-grid button { min-height: 82px; align-items: center; }
.team-count-grid button strong { font-size: 42px; line-height: 1; }
.team-count-grid button span { font-size: 21px; line-height: 1; font-weight: 850; }
.team-count-intro small,
.team-count-status p,
.route-select-status p { font-size: var(--type-body); line-height: 1.4; }
.team-count-status small { font-size: var(--type-caption); }
.route-select-choice h1 { font-size: 25px; line-height: 1.2; }
.route-select-grid span { left: 12px; right: 12px; bottom: 10px; font-size: 18px; line-height: 1.15; }
.route-select-status { min-height: 56px; }
.route-select-status strong { font-size: var(--type-label); line-height: 1.3; }
.route-classic-name { display: inline-block; white-space: nowrap; }

/* 测试操作不侵占正式交互基线，圆形入口严格居中。 */
.test-host-toggle { display: grid; place-items: center; padding: 0; line-height: 1; text-align: center; }
.mobile-page.task-finished .cup-assets { min-height: 168px; }
.mobile-page.task-finished .final-shaker-image { width: 104px; height: 130px; }
.mobile-page.task-finished .cup-bonds p { font-size: 12px; line-height: 1.45; }
.mobile-page.task-finished .ranking-row { min-height: 56px; padding: 10px 12px; }

/* v0.9 手机透明液态玻璃：只透过真实背景，不在组件内部重复贴背景图。 */
.mobile-page .liquid-panel,
.mobile-page .liquid-button {
  border-color: var(--glass-border);
  background:
    radial-gradient(150% 105% at 10% -18%, rgba(255,255,255,.065), transparent 42%),
    linear-gradient(135deg, rgba(240,250,255,.018), rgba(255,255,255,.004) 48%, rgba(216,246,239,.012)),
    rgba(235, 245, 255, .008);
  box-shadow:
    var(--glass-edge-shadow),
    0 10px 24px rgba(19,32,52,.13),
    0 0 0 .5px rgba(255,255,255,.17);
  -webkit-backdrop-filter: blur(6px) saturate(112%) contrast(102%) brightness(1.03);
  backdrop-filter: blur(6px) saturate(112%) contrast(102%) brightness(1.03);
}

.mobile-page .liquid-panel::before,
.mobile-page .liquid-button::before {
  inset: 0;
  background-image: none;
  background:
    radial-gradient(90% 38% at 18% 0%, rgba(255,255,255,.10), transparent 62%),
    radial-gradient(70% 42% at 100% 100%, rgba(214,242,237,.035), transparent 68%);
  background-attachment: initial;
  opacity: 1;
  filter: none;
  transform: none;
  -webkit-mask-image: none;
  mask-image: none;
}

.mobile-page .liquid-panel::after,
.mobile-page .liquid-button::after {
  border-color: var(--glass-inner-border);
  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(231,198,223,.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(85,63,210,.055);
}

/* 队伍数按钮与页面组件共用同一块透明玻璃；选中只增强轮廓，不改成彩色实体按钮。 */
.mobile-page .team-count-grid button,
.mobile-page .team-count-grid button.selected {
  color: #eef8ff;
  border-color: var(--glass-border);
  background:
    radial-gradient(150% 105% at 10% -18%, rgba(255,255,255,.065), transparent 42%),
    linear-gradient(135deg, rgba(240,250,255,.018), rgba(255,255,255,.004) 48%, rgba(216,246,239,.012)),
    rgba(235,245,255,.008);
  box-shadow:
    var(--glass-edge-shadow),
    0 10px 24px rgba(19,32,52,.13),
    0 0 0 .5px rgba(255,255,255,.17);
  -webkit-backdrop-filter: blur(6px) saturate(112%) contrast(102%) brightness(1.03);
  backdrop-filter: blur(6px) saturate(112%) contrast(102%) brightness(1.03);
}

.mobile-page .team-count-grid button.selected {
  border-color: rgba(229,243,255,.82);
  box-shadow:
    var(--glass-edge-shadow),
    inset 0 0 0 1px rgba(255,255,255,.2),
    0 0 0 2px rgba(174,228,220,.22),
    0 12px 28px rgba(19,32,52,.16);
}

.mobile-page .team-count-grid button span,
.mobile-page .team-count-grid button.selected span { color: #c5e9ff; }

.mobile-page .liquid-button.gold {
  color: #263550;
  border-color: rgba(244,255,252,.72);
  background:
    radial-gradient(130% 100% at 8% -12%, rgba(255,255,255,.15), transparent 48%),
    linear-gradient(135deg, rgba(207,247,238,.14), rgba(199,235,246,.09) 50%, rgba(242,204,225,.08)),
    rgba(240,250,255,.018);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    inset 0 -1px 0 rgba(102,130,156,.18),
    0 10px 25px rgba(51,91,105,.13),
    0 0 0 .5px rgba(255,255,255,.18);
}

.mobile-page .liquid-button.pink-glass {
  --liquid-lens-opacity: .17;
  color: #fff;
  border-color: rgba(255,211,232,.82);
  background:
    radial-gradient(130% 105% at 10% -14%, rgba(255,255,255,.3), transparent 46%),
    linear-gradient(135deg, rgba(255,210,232,.42), rgba(250,170,210,.3) 52%, rgba(232,145,195,.23)),
    rgba(145,45,91,.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    inset 0 -1px 0 rgba(166,91,129,.2),
    0 10px 26px rgba(218,105,163,.24),
    0 0 0 .5px rgba(255,232,244,.32);
  -webkit-backdrop-filter: blur(18px) saturate(154%) contrast(104%);
  backdrop-filter: blur(18px) saturate(154%) contrast(104%);
}

.mobile-page .action-plus span {
  color: #fff;
  font-size: 22px;
}

.mobile-page .action-pass {
  background:
    radial-gradient(130% 100% at 8% -12%, rgba(255,255,255,.07), transparent 48%),
    linear-gradient(135deg, rgba(121,128,190,.035), rgba(255,255,255,.008)),
    rgba(235,245,255,.006);
}

.mobile-page .liquid-panel :is(p, small, span, strong, h1, h2),
.mobile-page .liquid-button :is(span, small) {
  text-shadow: 0 1px 3px rgba(18,32,50,.58), 0 0 1px rgba(10,20,32,.35);
}