/* ui-kit v1.0.3 (2026-11-01) stage.css - Lit Stage tokens, glass HUD, celebration layer. Source: platform/ui-kit. */
/* Each game sets its own --ls-ground, --ls-key, --ls-metal, --ls-metal-hi, --ls-ink. Shapes come from posture.js:
   html[data-shape=cover|phone|landscape|square|desktop], html[data-fold=flat|book|tent]. */
:root {
  --ls-ground: #120e17; --ls-key: #2a2236; --ls-metal: #a597ff; --ls-metal-hi: #e9d9b0; --ls-ink: #efe9f5;
  --ls-t-tap: 120ms; --ls-t-ui: 220ms; --ls-t-deal: 260ms; --ls-t-reveal: 420ms; --ls-t-settle: 600ms;
  --ls-ease: cubic-bezier(.16, 1, .3, 1); --ls-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ls-safe-t: max(12px, env(safe-area-inset-top)); --ls-safe-r: max(12px, env(safe-area-inset-right));
  --ls-safe-b: max(12px, env(safe-area-inset-bottom)); --ls-safe-l: max(12px, env(safe-area-inset-left));
  --ls-glass: rgba(255, 255, 255, .06); --ls-glass-edge: rgba(255, 255, 255, .10);
  --ls-stage-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  --ls-vh: 100dvh; /* posture.js sets the visualViewport height in px */
  --ls-hinge: 0px;  /* posture.js: width of the hinge gap when a fold is reported */
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.ls-num { font-variant-numeric: tabular-nums; }

/* 1. backdrop: ground colour, one top key light, vignette */
.ls-backdrop {
  background:
    radial-gradient(130% 90% at 50% 30%, transparent 55%, rgba(0, 0, 0, .7) 100%),
    radial-gradient(120% 70% at 50% 0%, var(--ls-key) 0%, var(--ls-ground) 55%, #05040a 100%);
  background-color: var(--ls-ground);
}
/* 2. stage: the only layer with deep shadow and a metal rim */
.ls-stage { box-shadow: var(--ls-stage-shadow), inset 0 1px 0 rgba(255, 255, 255, .18); }
.ls-rim { padding: 3px; background: linear-gradient(180deg, var(--ls-metal-hi) 0%, var(--ls-metal) 45%, var(--ls-metal-hi) 100%); }
.ls-metal-text { background: linear-gradient(180deg, #fff6e0 0%, var(--ls-metal-hi) 45%, var(--ls-metal) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
/* 3. glass HUD (max 3 on screen; none in low-effects mode) */
.ls-glass { background: var(--ls-glass); border: 1px solid var(--ls-glass-edge); border-radius: 16px;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
html[data-fx="low"] .ls-glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(20, 20, 26, .82); }

/* thumb-zone button sizes */
.ls-tap { min-width: 44px; min-height: 44px; }
.ls-main { min-height: 56px; }

/* fold/unfold: 240 ms crossfade of whatever the client marks [data-ls-swap] */
@keyframes ls-xfade { from { opacity: .35; } to { opacity: 1; } }
html.ls-swapping [data-ls-swap] { animation: ls-xfade 240ms var(--ls-ease); }

/* winning spot pulse (T2+) */
@keyframes ls-pulse { 0% { box-shadow: 0 0 0 0 var(--ls-metal-hi); } 100% { box-shadow: 0 0 0 14px transparent; } }
.ls-pulse { animation: ls-pulse 400ms var(--ls-ease) 2; }

/* celebration layer (celebrate.js). Fixed and centred, so a fold/unfold re-centres it. */
.ls-cele { position: fixed; inset: 0; z-index: 9000; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; pointer-events: none; font-family: Archivo, system-ui, sans-serif;
  font-variant-numeric: tabular-nums; color: var(--ls-ink); text-align: center; }
.ls-cele.ls-t3, .ls-cele.ls-t4, .ls-cele.ls-t5 { pointer-events: auto; cursor: pointer; }
.ls-cele-dim { position: absolute; inset: 0; background: rgba(0, 0, 0, .4); animation: ls-fade var(--ls-t-reveal) var(--ls-ease) both; }
.ls-cele-plaque { position: relative; padding: 18px 28px; border-radius: 20px; background: rgba(10, 8, 14, .78);
  box-shadow: 0 0 0 3px var(--ls-metal), 0 0 0 5px var(--ls-metal-hi), 0 24px 60px rgba(0, 0, 0, .6);
  animation: ls-plaque var(--ls-t-reveal) var(--ls-ease) both; overflow: hidden; }
.ls-cele-banner { position: relative; font-weight: 800; font-stretch: 115%; letter-spacing: .06em; font-size: clamp(22px, 7vw, 40px);
  animation: ls-banner var(--ls-t-reveal) var(--ls-ease) 200ms both; }
.ls-cele-num { position: relative; font-weight: 800; font-size: clamp(30px, 10vw, 60px); line-height: 1.05;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .55); animation: ls-pop var(--ls-t-reveal) var(--ls-ease) both; }
.ls-t2 .ls-cele-num { font-size: clamp(26px, 8vw, 44px); }
.ls-cele-sweep { position: absolute; top: 0; bottom: 0; left: 0; width: 22%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); animation: ls-sweep 900ms var(--ls-ease) 100ms both; }
.ls-cele-ring { position: absolute; left: 50%; top: 50%; width: 40vmin; height: 40vmin; margin: -20vmin 0 0 -20vmin; border-radius: 50%;
  border: 3px solid var(--ls-metal-hi); animation: ls-ring 900ms var(--ls-ease) both; pointer-events: none; }
.ls-cele-skip { position: relative; margin-top: 4px; font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.ls-cele.ls-out { animation: ls-fade-out 200ms linear both; }
@keyframes ls-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ls-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes ls-pop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
@keyframes ls-banner { 0% { opacity: 0; transform: scale(.6); } 70% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } }
@keyframes ls-plaque { from { opacity: 0; transform: translateY(16px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes ls-sweep { from { transform: translateX(-140%) skewX(-18deg); } to { transform: translateX(560%) skewX(-18deg); } }
@keyframes ls-ring { from { opacity: .9; transform: scale(.2); } to { opacity: 0; transform: scale(2.4); } }
.ls-fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 8990; pointer-events: none; }

/* reduced motion: OS setting or a game's own switch (html[data-motion=reduce]) */
@media (prefers-reduced-motion: reduce) {
  .ls-cele *, .ls-cele, .ls-pulse, html.ls-swapping [data-ls-swap] { animation: ls-fade 200ms linear both !important; }
  .ls-cele-sweep, .ls-cele-ring { display: none; }
}
html[data-motion="reduce"] .ls-cele *, html[data-motion="reduce"] .ls-cele, html[data-motion="reduce"] .ls-pulse,
html[data-motion="reduce"].ls-swapping [data-ls-swap] { animation: ls-fade 200ms linear both !important; }
html[data-motion="reduce"] .ls-cele-sweep, html[data-motion="reduce"] .ls-cele-ring { display: none; }