/* BrawlTube in-game HUD. Sits inside #hqStage over the live game. */
/* EXP Tube UI with no meaning in BrawlTube (job skills are off, there is no
   EXP or level here, the shop and progression belong to EXP Tube) is hidden
   on brawltube.com's play page only. The minimap, chat, channel and utility
   buttons stay. */
.brawltube-play .pvp-board, .brawltube-play .pvp-feed, .brawltube-play .pvp-respawn, .brawltube-play .pvp-intro, .brawltube-play .pvp-hint,
.brawltube-play .maple-status-hud, .brawltube-play #hqJobBar, .brawltube-play #hqEconomyDock,
.brawltube-play .exp-progression-toggle, .brawltube-play .exp-progression-panel, .brawltube-play .stt,
.brawltube-play .hud-stack--map-info { display: none !important; }
.bl-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 40; }
.bl-hud { position: absolute; inset: 0; pointer-events: none; z-index: 45; font-family: "Russo One", Impact, system-ui, sans-serif; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.45); }
.bl-hud button, .bl-hud a, .bl-hud .bl-slot { pointer-events: auto; }
.bl-tl { position: absolute; bottom: 12px; left: 10px; display: flex; gap: 8px; align-items: center; background: linear-gradient(100deg, rgba(20,10,40,.85), rgba(20,10,40,.2)); padding: 6px 14px 6px 6px; clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); }
.bl-portrait { width: 46px; height: 46px; border-radius: 10px; display: grid; place-items: center; font-size: 22px; background: linear-gradient(135deg, #ff3d5a, #9d4edd); box-shadow: inset 0 0 0 2px rgba(255,255,255,.4); }
.bl-bars { display: flex; flex-direction: column; gap: 3px; width: 220px; }
.bl-name { font-size: 13px; letter-spacing: .5px; }
.bl-bar { position: relative; height: 12px; background: rgba(0,0,0,.55); border-radius: 3px; overflow: hidden; transform: skewX(-14deg); }
.bl-bar i { position: absolute; inset: 0 auto 0 0; transition: width .12s linear; }
.bl-bar span { position: absolute; inset: 0; font: 9px/12px "Russo One", system-ui; text-align: center; transform: skewX(14deg); }
.bl-hp { height: 15px; } .bl-hp i { background: linear-gradient(90deg, #3df58a, #c9ff5c); }
.bl-hp span { line-height: 15px; font-size: 10px; }
.bl-en i { background: linear-gradient(90deg, #3df5ff, #6c63ff); }
.bl-mt i { background: linear-gradient(90deg, #ffd23f, #ff3d5a); }
.bl-mt.full i { animation: blPulse .6s ease-in-out infinite alternate; }
@keyframes blPulse { to { filter: brightness(1.5); } }
.bl-tc { position: absolute; top: 44px; left: 50%; transform: translateX(-50%); text-align: center; }
.bl-map { font-size: 16px; letter-spacing: 1px; text-transform: uppercase; }
.bl-mode { font-size: 10px; letter-spacing: 1px; opacity: .8; text-transform: uppercase; }
.bl-clock { font-size: 22px; color: #ffd23f; }
.bl-tr { position: absolute; top: 10px; right: 96px; display: flex; gap: 6px; align-items: center; }
.bl-stat { font-size: 13px; background: rgba(20,10,40,.7); padding: 6px 10px; border-radius: 8px; }
.bl-stat:empty { display: none; }
.bl-btn { pointer-events: auto; border: 0; cursor: pointer; background: rgba(20,10,40,.85); color: #fff; font: 13px/1 "Russo One", system-ui; padding: 8px 10px; border-radius: 8px; text-decoration: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); display: inline-flex; align-items: center; justify-content: center; }
.bl-btn:hover { background: rgba(60,30,100,.95); }
.bl-btn.hot { background: linear-gradient(100deg, #ffd23f, #ff3d5a); color: #170a00; text-shadow: none; }
.bl-btn.wide { width: 100%; margin-top: 6px; }
.bl-btn.on { background: #3df58a; color: #04120a; text-shadow: none; }
.bl-slots { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
.bl-slot { position: relative; width: 64px; height: 64px; border: 0; padding: 0; border-radius: 12px; background: rgba(15,8,30,.85); box-shadow: inset 0 0 0 2px rgba(255,255,255,.22); cursor: pointer; color: #fff; display: grid; place-items: center; overflow: hidden; font-family: "Russo One", system-ui; }
.bl-ico { width: 46px; height: 46px; border-radius: 10px; display: grid; place-items: center; font-size: 24px; background: radial-gradient(circle at 30% 25%, var(--c2, #fff) 0%, var(--c1, #f35) 45%, #120a24 115%); text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.bl-key { position: absolute; top: 2px; left: 5px; font-size: 12px; color: #ffd23f; z-index: 2; }
.bl-sname { position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); font-size: 9px; white-space: nowrap; opacity: .85; }
.bl-slots .bl-sname { display: none; }
.bl-cd { position: absolute; inset: 0; display: grid; place-items: center; font-size: 20px; background: conic-gradient(rgba(5,2,12,.78) calc(var(--p, 0) * 360deg), transparent 0); z-index: 1; }
.bl-slot.blocked .bl-ico { filter: grayscale(.8) brightness(.6); }
.bl-slot.ult { box-shadow: inset 0 0 0 2px #ffd700; }
.bl-slot.ready-ult { animation: blUlt .5s ease-in-out infinite alternate; }
@keyframes blUlt { to { box-shadow: inset 0 0 0 3px #ffd700, 0 0 22px #ffd700; } }
.bl-slot.pressed { transform: scale(.92); }
.bl-slot.nope { animation: blNope .3s; }
@keyframes blNope { 25% { transform: translateX(-4px); box-shadow: inset 0 0 0 2px #ff3d5a; } 75% { transform: translateX(4px); } }
.bl-acts { position: absolute; bottom: 14px; right: 14px; display: none; flex-direction: column; gap: 8px; }
.bl-act { pointer-events: auto; width: 74px; height: 44px; border: 0; border-radius: 22px; background: rgba(15,8,30,.8); color: #fff; font: 12px/1 "Russo One", system-ui; box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); }
.bl-act.on { background: #9ad1ff; color: #04121a; }
.bl-act.cooling { opacity: .5; }
.bl-feed { position: absolute; top: 60px; right: 96px; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; max-width: 46%; }
.bl-feed-line { font: 12px/1.3 "Russo One", system-ui; background: rgba(20,10,40,.75); padding: 5px 10px; border-radius: 6px; animation: blFeed .25s ease; }
.bl-feed-line.mine { background: linear-gradient(100deg, rgba(255,61,90,.85), rgba(157,78,221,.75)); }
@keyframes blFeed { from { transform: translateX(20px); opacity: 0; } }
.bl-ann { position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%) scale(.6); opacity: 0; text-align: center; transition: transform .18s cubic-bezier(.2, 1.6, .4, 1), opacity .18s; pointer-events: none; }
.bl-ann.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.bl-ann b { display: block; font-size: clamp(30px, 6vw, 64px); letter-spacing: 2px; background: linear-gradient(100deg, #ffd23f, #ff7a2f 40%, #ff3d5a 75%, #9d4edd); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 0 rgba(0,0,0,.5)); }
.bl-ann.bad b { background: linear-gradient(100deg, #ffffff, #9ad1ff); -webkit-background-clip: text; background-clip: text; }
.bl-ann.quiet b { font-size: 26px; }
.bl-ann span { font-size: 16px; letter-spacing: 1px; }
.bl-msg { position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%); font-size: 14px; background: rgba(20,10,40,.85); padding: 6px 14px; border-radius: 8px; opacity: 0; transition: opacity .15s; }
.bl-msg.on { opacity: 1; }
.bl-help { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); font: 10px/1 "Russo One", system-ui; opacity: .55; white-space: nowrap; }
.bl-side { position: absolute; top: 230px; right: 96px; width: 230px; display: flex; flex-direction: column; gap: 4px; font: 12px/1.35 Inter, system-ui, sans-serif; text-shadow: none; }
.bl-side:not(:empty) { background: rgba(15,8,30,.82); padding: 10px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); pointer-events: auto; }
.bl-side b { font: 13px/1.2 "Russo One", system-ui; }
.bl-row { padding: 3px 6px; border-radius: 5px; background: rgba(255,255,255,.05); }
.bl-row.me { background: rgba(255,210,63,.18); }
.bl-row.out { opacity: .45; text-decoration: line-through; }
.bl-small { font-size: 11px; opacity: .75; }
.bl-vig { position: absolute; inset: 0; box-shadow: inset 0 0 120px 30px rgba(255,30,60,.0); pointer-events: none; }
.bl-vig.on { animation: blVig .35s ease-out; }
@keyframes blVig { from { box-shadow: inset 0 0 120px 30px rgba(255,30,60,.55); } to { box-shadow: inset 0 0 120px 30px rgba(255,30,60,0); } }
.bl-hud.stunned .bl-slots { filter: grayscale(1); }
.bl-hud.protected .bl-tl::after { content: 'SPAWN PROTECTED'; position: absolute; left: 62px; top: -14px; font-size: 9px; color: #9ad1ff; }
.bl-lo { position: absolute; inset: 6% 12%; z-index: 60; background: rgba(15,8,30,.96); border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.14); padding: 14px; display: flex; flex-direction: column; gap: 10px; color: #fff; font-family: Inter, system-ui, sans-serif; }
.bl-lo-head { display: flex; gap: 10px; align-items: center; }
.bl-lo-head b { font: 18px/1 "Russo One", system-ui; flex: 1; }
.bl-lo-slots { display: flex; gap: 10px; justify-content: center; padding-bottom: 16px; }
.bl-lo-slots .bl-slot { overflow: visible; }
.bl-lo-slots .bl-slot.sel { box-shadow: inset 0 0 0 3px #ffd23f; }
.bl-lo-search { background: #0f0820; color: #fff; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: 8px 10px; font: inherit; }
.bl-lo-list { flex: 1; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
.bl-lo-item { display: grid; grid-template-columns: 36px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left; border: 0; border-radius: 8px; padding: 6px; background: rgba(255,255,255,.05); color: #fff; cursor: pointer; font: 12px/1.2 "Russo One", system-ui; }
.bl-lo-item .bl-ico { width: 34px; height: 34px; font-size: 17px; grid-row: 1 / 3; }
.bl-lo-item small { font: 10px/1.2 Inter, system-ui; opacity: .7; }
.bl-lo-item.on { box-shadow: inset 0 0 0 2px #3df5ff; }
.bl-refused { position: fixed; inset: 0; z-index: 9999; display: grid; place-content: center; gap: 12px; text-align: center; background: rgba(8,4,16,.92); color: #fff; font: 16px/1.4 Inter, system-ui; }
.bl-refused b { font: 32px/1 "Russo One", system-ui; }
@media (pointer: coarse), (max-width: 760px) {
  .bl-acts { display: flex; }
  .bl-help { display: none; }
  .bl-slots { left: auto; right: 100px; transform: none; bottom: 14px; flex-wrap: wrap; width: 180px; justify-content: flex-end; gap: 6px; }
  .bl-slot { width: 52px; height: 52px; }
  .bl-ico { width: 38px; height: 38px; font-size: 19px; }
  .bl-bars { width: 150px; }
  .bl-side { top: 70px; width: 180px; }
  .bl-lo { inset: 3%; }
  .bl-feed { top: 110px; }
}