/* klyo-uklad.css — the compact HUD every Klyo game starts with (01.11.2026), built to the layout contract in klyo-uklad.js: the interface lives at
   the edges, small and glassy, and the middle of the game stays free. Phone portrait: chips ≤ 48 px in the top bar (level left, score right, pause
   under the score), the one-line toast under the bar, the hint above the dock. Landscape: toast and hint hug the top and bottom edges.
   Markup: #hud > .tl-level (icon, b#lvl, .tl-track > i#bar) · .tl-pill (.tl-blob, b.tl-count#count) · button#pause · your dock (bottom, ≤ 72 px,
   44–56 px buttons) · #hint · and #toast outside the hud. Big transient words ("+20") are .tl-float (data-klyo-transient). Measure with
   browser_quality (it reports `layout`) or auditUi() from klyo-uklad.js. */
.tl-level, .tl-pill { position: fixed; top: max(8px, env(safe-area-inset-top)); display: flex; align-items: center; gap: 8px; padding: 6px 12px; min-height: 40px;
  border-radius: 16px; background: rgba(22, 30, 48, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); pointer-events: none;
  box-shadow: 0 6px 20px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.18); color: #fff; }
.tl-level { left: max(12px, env(safe-area-inset-left)); } .tl-pill { right: max(12px, env(safe-area-inset-right)); }
.tl-level svg { width: 30px; height: 22px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.3)); }
.tl-level b { font: 900 13px/1 system-ui, sans-serif; letter-spacing: .04em; display: block; margin-bottom: 5px; }
.tl-level .tl-track { width: min(30vw, 130px); height: 6px; }
.tl-blob { width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #bfe3ff 0 12%, #3d8cff 45%, #1d4fc4 100%); box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.tl-count { display: inline-block; font: 900 clamp(22px, 6vw, 32px)/1 system-ui, sans-serif; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.25), 0 6px 18px rgba(0,0,0,.35); }
.tl-count.tl-bump { animation: tl-bump .32s cubic-bezier(.2,.9,.3,1.4); } .tl-count[data-dir=up].tl-bump { color: #b9ffd0; } .tl-count[data-dir=down].tl-bump { color: #ffc2bd; }
@keyframes tl-bump { 0% { transform: scale(1.34); } 100% { transform: scale(1); } }
.tl-track { width: min(56vw, 320px); height: 6px; border-radius: 6px; background: rgba(255,255,255,.35); overflow: hidden; }
.tl-track i { display: block; height: 100%; background: #fff; transform-origin: 0 50%; transform: scaleX(0); }
/* pause: a 40 px icon under the score chip, right edge (the left column stays free for the level badge and its toast) */
#pause { position: fixed; right: max(12px, env(safe-area-inset-right)); top: calc(max(8px, env(safe-area-inset-top)) + 52px); width: 40px; height: 40px; min-width: 40px; min-height: 40px; padding: 0; font-size: 14px; }
/* hint and toast: one or two short lines, never in the middle; the toast under the top bar, the hint above the dock */
#hint, #toast { position: fixed; left: 50%; transform: translateX(-50%); padding: 8px 14px; border-radius: 12px; background: rgba(10,14,30,.72); color: #fff;
  font: 600 14px/1.25 system-ui, sans-serif; text-align: center; pointer-events: none; z-index: 2;
  width: max-content; box-sizing: border-box; }  /* left: 50% alone caps a fixed box at half the screen: the hint broke into three lines */
#hint { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 66px); max-width: min(92vw, 520px); }
#toast { top: calc(max(8px, env(safe-area-inset-top)) + 52px); max-width: min(64vw, 460px); }
@media (orientation: landscape) and (max-height: 540px) {
  #toast, #hint { font-size: 13px; padding: 6px 12px; max-width: 50vw; } #toast { top: 4px; } #hint { bottom: 4px; }
  .tl-level .tl-track { width: min(18vw, 130px); }
}
.tl-float { position: fixed; left: 50%; top: 38%; transform: translate(-50%, 0); font: 900 clamp(40px, 12vw, 84px)/1 system-ui, sans-serif; pointer-events: none;
  text-shadow: 0 4px 0 rgba(0,0,0,.25); animation: tl-up .9s cubic-bezier(.2,.8,.2,1) forwards; }
.tl-good { color: #7fe3ff; } .tl-bad { color: #ff6b6b; }
@keyframes tl-up { from { opacity: 0; transform: translate(-50%, 20px) scale(.6); } 25% { opacity: 1; transform: translate(-50%, 0) scale(1.1); } to { opacity: 0; transform: translate(-50%, -60px) scale(1); } }
@media (prefers-reduced-motion: reduce) { .tl-float { animation-duration: .01s; } .tl-count.tl-bump { animation: none; } }