/* Klyo UI — premium interface for browser games (25.10.2026), next to Klyo Engine. Glass over the
   world, light from above (bright top edge, shadow below), one spacing and radius scale, targets of
   at least 44 px, motion 160–220 ms on transform and opacity only, off with reduced motion. Nothing
   spans the full width: buttons size to their text, cards have a ceiling. Theme with --k-accent. */
:root {
  --k-accent: #b6ed79; --k-accent-ink: #10140d; --k-ink: #f3f6ef; --k-muted: rgba(243, 246, 239, .66);
  --k-glass: rgba(16, 19, 15, .62); --k-line: rgba(255, 255, 255, .12); --k-top: rgba(255, 255, 255, .16);
  --k-r1: 10px; --k-r2: 16px; --k-r3: 24px; --k-s1: 6px; --k-s2: 12px; --k-s3: 20px; --k-s4: 32px;
  --k-font: "Manrope", ui-sans-serif, -apple-system, "Segoe UI", sans-serif; --k-ease: cubic-bezier(.2, .8, .2, 1);
}
.k-game { position: fixed; inset: 0; overflow: hidden; background: #0d1014; color: var(--k-ink); font: 500 16px/1.4 var(--k-font);
  -webkit-tap-highlight-color: transparent; touch-action: none; user-select: none; }
.k-game canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.k-glass { background: var(--k-glass); backdrop-filter: blur(16px) saturate(1.35); -webkit-backdrop-filter: blur(16px) saturate(1.35);
  border: 1px solid var(--k-line); box-shadow: inset 0 1px 0 var(--k-top), 0 18px 40px rgba(0, 0, 0, .35); }

/* HUD: corners stay free for the thumbs; safe areas on phones with a notch. */
.k-hud { position: absolute; z-index: 2; inset: max(var(--k-s2), env(safe-area-inset-top)) max(var(--k-s2), env(safe-area-inset-right)) auto max(var(--k-s2), env(safe-area-inset-left));
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--k-s2); pointer-events: none; }
.k-hud > * { pointer-events: auto; }
.k-stat { display: inline-flex; align-items: baseline; gap: var(--k-s1); padding: 8px 14px; border-radius: 999px;
  background: var(--k-glass); border: 1px solid var(--k-line); box-shadow: inset 0 1px 0 var(--k-top), 0 10px 24px rgba(0, 0, 0, .3);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); font-variant-numeric: tabular-nums; }
.k-stat b { font-size: clamp(18px, 4.6vw, 26px); font-weight: 800; letter-spacing: -.02em; }
.k-stat span { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--k-muted); }
.k-meter { width: clamp(120px, 30vw, 220px); height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.k-meter > i { display: block; height: 100%; width: var(--k-value, 50%); border-radius: inherit; background: linear-gradient(90deg, var(--k-accent), #e9ffcf);
  box-shadow: 0 0 14px rgba(182, 237, 121, .6); transition: width .2s var(--k-ease); }

/* Buttons: sized by their text, never full width, at least 44 px. */
.k-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--k-s1); min-height: 48px; min-width: 44px; width: fit-content;
  max-width: min(100%, 360px); padding: 0 22px; border: 0; border-radius: 999px; cursor: pointer; font: 800 15px/1 var(--k-font); letter-spacing: .02em;
  color: var(--k-accent-ink); background: linear-gradient(180deg, #d4ff9f, var(--k-accent)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 10px 26px rgba(182, 237, 121, .32);
  transition: transform .16s var(--k-ease), box-shadow .16s var(--k-ease); }
.k-btn:hover { transform: translateY(-1px); }
.k-btn:active { transform: translateY(1px) scale(.98); }
.k-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.k-btn--ghost { color: var(--k-ink); background: rgba(255, 255, 255, .08); box-shadow: inset 0 1px 0 var(--k-top), inset 0 0 0 1px var(--k-line); }
.k-btn--icon { width: 48px; padding: 0; }

/* Overlays: intro, pause, result. One card, readable over any world. */
.k-overlay { position: absolute; z-index: 3; inset: 0; display: grid; place-items: center; padding: var(--k-s3); background: radial-gradient(80% 60% at 50% 40%, rgba(0, 0, 0, .25), rgba(0, 0, 0, .65));
  opacity: 1; transition: opacity .22s var(--k-ease); }
.k-overlay[hidden] { display: grid; opacity: 0; pointer-events: none; }
.k-card { width: min(100%, 440px); padding: clamp(22px, 5vw, 36px); border-radius: var(--k-r3); background: var(--k-glass); border: 1px solid var(--k-line);
  box-shadow: inset 0 1px 0 var(--k-top), 0 30px 70px rgba(0, 0, 0, .5); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
  transform: translateY(0) scale(1); transition: transform .22s var(--k-ease); }
.k-overlay[hidden] .k-card { transform: translateY(12px) scale(.98); }
.k-eyebrow { margin: 0 0 var(--k-s1); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--k-accent); }
.k-title { margin: 0 0 var(--k-s2); font-size: clamp(28px, 7vw, 44px); line-height: 1.02; font-weight: 800; letter-spacing: -.03em; }
.k-text { margin: 0 0 var(--k-s3); color: var(--k-muted); }
.k-actions { display: flex; flex-wrap: wrap; gap: var(--k-s2); }
.k-keys { margin-top: var(--k-s3); font-size: 12px; letter-spacing: .06em; color: var(--k-muted); }

/* Touch: a stick appears where the thumb lands (left half), buttons on the right. */
.k-stick { position: absolute; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 0 0 1px var(--k-line); opacity: 0; transition: opacity .16s var(--k-ease); pointer-events: none; }
.k-stick.is-on { opacity: 1; }
.k-stick > i { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px; border-radius: 50%; background: rgba(255, 255, 255, .85);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35); transform: translate(var(--k-x, 0), var(--k-y, 0)); }
.k-toast { position: absolute; left: 50%; bottom: max(var(--k-s4), env(safe-area-inset-bottom)); transform: translate(-50%, 0); padding: 10px 18px; border-radius: 999px;
  background: var(--k-glass); border: 1px solid var(--k-line); box-shadow: inset 0 1px 0 var(--k-top); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  font-weight: 700; transition: opacity .2s var(--k-ease), transform .2s var(--k-ease); }
.k-toast[hidden] { display: block; opacity: 0; transform: translate(-50%, 10px); }

@media (prefers-reduced-motion: reduce) { .k-game * { transition: none !important; animation: none !important; } }
@media (prefers-reduced-transparency: reduce) { .k-glass, .k-card, .k-stat, .k-toast { backdrop-filter: none; -webkit-backdrop-filter: none; background: #14180f; } }