/* Level-up banner (roadmap item 82, src/systems/level/level-up-fx.js): a large "เลเวลอัป! LV n" in the top layer for 2.6 s.
   It takes no clicks and has no dark backdrop, so play carries on underneath. */
#level-up-banner{position:fixed;inset:auto;left:50%;top:18vh;right:auto;bottom:auto;transform:translateX(-50%);margin:0;padding:0;border:0;background:transparent;overflow:visible;pointer-events:none;z-index:950;display:none;flex-direction:column;align-items:center;gap:2px;width:max-content;height:auto;max-width:calc(100vw - 32px);text-align:center;color:#ffd95a;font-family:"Noto Sans Thai",Tahoma,sans-serif;user-select:none;-webkit-user-select:none}
#level-up-banner.visible{display:flex}
#level-up-banner:popover-open{display:flex}
#level-up-banner::backdrop{background:transparent}
#level-up-banner .level-up-title{display:block;font-size:clamp(28px,6vw,56px);font-weight:800;line-height:1.08;letter-spacing:.02em;color:#ffd95a;-webkit-text-stroke:2px #4a2a08;paint-order:stroke fill;text-shadow:0 2px 0 #7a4210,0 4px 0 #3d2108}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  #level-up-banner .level-up-title{background:linear-gradient(180deg,#fffbe5 0%,#ffe27a 42%,#ffc23d 70%,#e08a1c 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:none}
}
#level-up-banner .level-up-level{display:block;font-size:clamp(20px,4vw,36px);font-weight:800;line-height:1.1;color:#fff6c8;-webkit-text-stroke:1.5px #4a2a08;paint-order:stroke fill;text-shadow:0 2px 0 #3d2108;white-space:nowrap}
#level-up-banner .level-up-sub{display:block;margin-top:4px;padding:3px 12px;border-radius:999px;background:#274336d9;color:#fffbe5;font-size:clamp(12px,2.2vw,17px);font-weight:600;white-space:nowrap}
#level-up-banner .level-up-sub[hidden]{display:none}
#level-up-banner.playing{animation:level-up-pop 2.6s ease-out both}
@keyframes level-up-pop{
  0%{opacity:0;transform:translateX(-50%) scale(.6)}
  12%{opacity:1;transform:translateX(-50%) scale(1.08)}
  20%{opacity:1;transform:translateX(-50%) scale(1)}
  80%{opacity:1;transform:translateX(-50%) scale(1)}
  100%{opacity:0;transform:translateX(-50%) scale(1)}
}
@keyframes level-up-fade{0%{opacity:0}10%{opacity:1}80%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){#level-up-banner.playing{animation-name:level-up-fade}}
/* Phones held sideways: higher up and smaller, clear of the joystick and the skill bar at the bottom. */
@media (max-height:500px){
  #level-up-banner{top:10vh}
  #level-up-banner .level-up-title{font-size:clamp(22px,8vh,36px);-webkit-text-stroke-width:1.5px}
  #level-up-banner .level-up-level{font-size:clamp(16px,5.5vh,24px)}
  #level-up-banner .level-up-sub{font-size:12px;padding:2px 10px}
}