/* hud.css — owned by the HUD + finale lane. */
.hud-left, .hud-right { position: absolute; top: 24px; display: flex; align-items: center; gap: 20px; pointer-events: auto; }
.hud-left { left: 28px; }
.hud-right { right: 28px; }
.stat { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 5px; color: var(--mint); }
.stat b { font: 600 clamp(20px, 1.7vw, 25px)/1 var(--f-mono); font-variant-numeric: tabular-nums; }
.stat-label { font: 500 10px/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: #b8ccbf; }
.hud-left .div { width: 2px; height: 32px; background: var(--forest-700); }
.hud-hint { position: absolute; top: 30px; left: 50%; translate: -50% 0; font: 600 19px/1 var(--f-pixel); color: var(--mint); white-space: nowrap; transition: opacity .4s; }
body.scrolled .hud-hint { opacity: 0; }
.lang { display: flex; align-items: center; gap: 4px; font: 700 19px/1 var(--f-pixel); color: var(--mint); }
.lang button { background: none; border: 2px solid transparent; padding: 7px 9px; cursor: pointer; color: var(--mint); }
.lang button[aria-pressed="true"] { border-color: var(--mint); }
.lang span { opacity: .5; }
.hud-sound, .hud-laptop { background: none; border: 0; color: var(--mint); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 4px; }
.hud-sound svg { width: 31px; height: 28px; }
.hud-sound:not(.on) .w { opacity: .2; }
.hud-sound:not(.on) { opacity: .7; }
.lap-count { font: 700 15px/1 var(--f-mono); }
.hud-laptop.slap { animation: slap .5s ease-out; }
.hud-laptop.full .lap-count { color: var(--green); }
@keyframes slap { 0% { transform: scale(1.5) rotate(-8deg); } 60% { transform: scale(.92); } 100% { transform: none; } }
.sticker-toast {
  position: absolute; top: 64px; right: 20px; display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px;
  background: var(--paper); color: var(--ink); font: 600 15px/1 var(--f-pixel); opacity: 0; translate: 0 -8px; pointer-events: none;
  box-shadow: 4px 4px 0 var(--forest-700);
}
.sticker-toast img { height: 26px; max-width: 90px; object-fit: contain; }
.sticker-toast.show { animation: toast 2.2s ease both; }
@keyframes toast { 0% { opacity: 0; transform: scale(1.4) rotate(6deg); } 12% { opacity: 1; transform: rotate(-2deg); } 80% { opacity: 1; } 100% { opacity: 0; } }


@media (max-width: 760px) {
  .hud-left { left: 12px; top: 12px; gap: 8px; }
  .hud-right { right: 10px; top: 10px; gap: 6px; }
  .stat { gap: 4px; }
  .stat b { font-size: 17px; }
  .stat-label { font-size: 9px; letter-spacing: .04em; }
  .hud-hint { top: auto; bottom: 12px; font-size: 14px; }
  .hud-left .div, .lang span { display: none; }
  .lang button { padding: 3px 5px; font-size: 14px; }
}

.hud-left, .hud-right { filter: drop-shadow(0 2px 4px #000); }
.hud-sound, .hud-laptop { min-height: 44px; }
.lang button { min-height: 42px; }
.hud-laptop .px { width: 28px !important; height: auto !important; }
@media (max-width: 760px) {
  .hud-left { left: 10px; top: 12px; gap: 10px; }
  .hud-right { right: 8px; top: 7px; gap: 4px; }
  .lang { gap: 0; }
  .lang button { font-size: 15px; padding: 5px; min-height: 38px; }
  .hud-sound svg { width: 21px; height: 22px; }
  .hud-laptop { gap: 3px; padding: 3px; }
  .hud-laptop .px { width: 21px !important; }
  .lap-count { font-size: 10px; }
  .hud-hint { font-size: 15px; }
  .sticker-toast { top: 59px; right: 9px; max-width: calc(100vw - 18px); }
}

@media (prefers-reduced-motion: reduce) { .sticker-toast.show { animation: none; opacity: 1; translate: none; } }