/* Turn-based battle HUD (js/battle/ui.js). Uses the navy/gold tokens from style.css when present. */
#battle-ui {
  --bt-panel: var(--panel, rgba(16, 32, 64, 0.9));
  --bt-border: var(--border, #3a6fc9);
  --bt-hi: var(--border-hi, #6fa6ff);
  --bt-gold: var(--gold, #ffcf4a);
  --bt-hp: var(--hp, #3ee07a);
  position: fixed; inset: 0; pointer-events: none; z-index: 6; font-family: Nunito, system-ui, sans-serif; color: #f4f7ff;
}
#battle-ui > * { pointer-events: auto; }
#battle-ui .panel { background: var(--bt-panel); border: 2px solid var(--bt-border); border-radius: 10px; box-shadow: 0 0 0 2px #0a1630, 0 6px 18px rgba(0, 0, 0, 0.35); }
#battle-ui button { font: inherit; color: inherit; cursor: pointer; }

/* Everything else on the HUD steps aside during a battle */
body.battle-active #movebar, body.battle-active #hotbar, body.battle-active #menu, body.battle-active #prompt,
body.battle-active #quests, body.battle-active #party, body.battle-active #help-card, body.battle-active #chat { display: none !important; }

/* ---------- HP boxes ---------- */
.bt-panel {
  position: absolute; width: 300px; padding: 8px 12px 10px; border-radius: 12px;
  background: linear-gradient(#173979, #0f2552); border: 2px solid var(--bt-hi); box-shadow: 0 0 0 2px #0a1630, 0 8px 20px rgba(0,0,0,.4);
  transition: transform .35s, opacity .35s;
}
.bt-panel.foe { top: 84px; left: 24px; }
.bt-panel.me { right: 24px; bottom: 176px; width: 320px; }
.bt-panel.out { opacity: 0; transform: translateY(-8px); }
.bt-panel[hidden] { display: none; }
.bt-top { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.bt-top .bt-name { flex: 1; font-weight: 900; text-shadow: 0 1px 2px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-lv { color: var(--bt-gold); font-weight: 900; font-size: 14px; }
.bt-st { font-size: 10px; font-weight: 900; padding: 1px 6px; border-radius: 6px; letter-spacing: .5px; }
.bt-st:empty { display: none; }
.st-PAR { background: #e6c21f; color: #3a2a00; } .st-BRN { background: #ef6a3a; } .st-PSN, .st-TOX { background: #a04fc8; }
.st-SLP { background: #8a97a8; } .st-FRZ { background: #6fd0ff; color: #0a2a3a; } .st-FNT { background: #c43c3c; }
.bt-hpbar { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.bt-hpbar i { font-style: normal; font-size: 10px; font-weight: 900; color: var(--bt-gold); background: #0a1838; padding: 0 5px; border-radius: 4px; }
.bt-hp { flex: 1; height: 12px; background: #0a1838; border-radius: 7px; overflow: hidden; border: 1px solid #2c4f96; }
.bt-hp.small { height: 8px; margin: 4px 0 2px; }
.bt-hp-fill { height: 100%; width: 100%; background: linear-gradient(#6ff59d, var(--bt-hp)); }
.bt-hp-fill.mid { background: linear-gradient(#ffe36e, #f0b71c); }
.bt-hp-fill.low { background: linear-gradient(#ff8c8c, #e83b3b); }
.bt-hpnum { text-align: right; font-weight: 900; font-size: 14px; margin-top: 2px; letter-spacing: .5px; }
.bt-exp { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.bt-exp i { font-style: normal; font-size: 9px; font-weight: 900; color: #fff; background: #2c8be8; padding: 0 4px; border-radius: 4px; }
.bt-exp-bar { flex: 1; height: 6px; background: #0a1838; border-radius: 4px; overflow: hidden; border: 1px solid #2c4f96; }
.bt-exp-bar div { height: 100%; width: 0; background: linear-gradient(#7fd0ff, #2c8be8); }
.bt-balls { display: flex; gap: 4px; margin-top: 6px; }
.bt-balls:empty { display: none; }
.bb { width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(#ee4040 0 45%, #222 45% 55%, #f5f5f5 55%); box-shadow: 0 0 0 1px #0a1630; }
.bb.status { filter: hue-rotate(60deg); }
.bb.fnt { filter: grayscale(1) brightness(.6); }
.bb.empty { background: #0a1838; border: 1px dashed #4a6fb0; box-shadow: none; }

/* ---------- bottom: dialog + menu ---------- */
.bt-bottom { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); width: min(980px, calc(100vw - 28px)); display: flex; gap: 10px; align-items: stretch; }
.bt-dialog { position: relative; flex: 1; min-height: 132px; padding: 16px 22px; font-size: 19px; font-weight: 800; line-height: 1.45; cursor: pointer;
  background: linear-gradient(#152c5c, #0f2148); border: 3px solid #6c7cff; box-shadow: 0 0 0 3px #0a1630, 0 0 24px rgba(108,124,255,.25); }
.bt-dialog.info { font-size: 15px; color: #c8e7ff; }
.bt-text { white-space: pre-wrap; text-shadow: 0 1px 2px #000; }
.bt-next { position: absolute; right: 16px; bottom: 10px; color: var(--bt-gold); opacity: 0; font-size: 14px; }
.bt-next.on { opacity: 1; animation: bt-bob .7s infinite alternate; }
@keyframes bt-bob { to { transform: translateY(3px); } }
.bt-menu { width: 400px; padding: 10px; border: 3px solid #6c7cff; box-shadow: 0 0 0 3px #0a1630; background: linear-gradient(#152c5c, #0f2148); }
.bt-menu[hidden] { display: none; }
.bt-cmd, .bt-yesno { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; height: 100%; }
.bt-btn {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 6px 12px;
  font-weight: 900; font-size: 18px; border-radius: 10px; border: 2px solid #2d5bb3; background: linear-gradient(#1b3c80, #10275a);
}
.bt-btn:hover, .bt-btn.sel { border-color: var(--bt-gold); box-shadow: 0 0 10px rgba(255, 207, 74, 0.45); }
.bt-btn:disabled { opacity: .4; cursor: not-allowed; }
.bt-btn.c-fight { background: linear-gradient(#c8473a, #8f2a22); }
.bt-btn.c-bag { background: linear-gradient(#d39a2a, #9a6a12); }
.bt-btn.c-pokemon { background: linear-gradient(#3fa35a, #23703a); }
.bt-btn.c-run { background: linear-gradient(#3f6fd0, #234a98); }
.k { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 3px; border-radius: 4px; background: #e8eefc; color: #12264d; font-size: 11px; font-weight: 900; }
.bt-btn .k { position: absolute; left: 8px; top: 8px; }

/* moves */
.bt-moves { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bt-moves.list { grid-template-columns: 1fr; }
.bt-move {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center;
  min-height: 52px; padding: 6px 10px; text-align: left; border-radius: 10px; border: 2px solid color-mix(in srgb, var(--c) 70%, #000);
  background: linear-gradient(color-mix(in srgb, var(--c) 55%, #10275a), color-mix(in srgb, var(--c) 25%, #0b1d45));
}
.bt-move .k { grid-row: span 2; }
.bt-move b { font-size: 15px; text-shadow: 0 1px 2px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-move .bt-type { grid-row: span 2; font-size: 10px; font-weight: 900; background: var(--c); color: #0a1630; padding: 2px 6px; border-radius: 6px; }
.bt-move .bt-pp { font-size: 11px; font-weight: 900; color: #fff3c4; }
.bt-pp.low { color: #ffb84a; } .bt-pp.zero { color: #ff6b6b; }
.bt-move:hover, .bt-move.sel { border-color: var(--bt-gold); box-shadow: 0 0 10px rgba(255, 207, 74, 0.5); }
.bt-move[data-empty] { opacity: .5; }
.bt-move.new { border-style: dashed; }
.bt-back { grid-column: span 2; padding: 4px; border-radius: 8px; border: 1px solid #2d5bb3; background: #0f2552; font-size: 12px; font-weight: 800; color: #a9bde6; }

/* sheets (bag / party / learn / level up) */
.bt-overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(5, 10, 25, 0.45); }
.bt-overlay[hidden] { display: none; }
.bt-sheet { width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 80px); overflow: auto; padding: 0 0 12px;
  background: linear-gradient(#152c5c, #0f2148); border: 3px solid #6c7cff; box-shadow: 0 0 0 3px #0a1630, 0 0 30px rgba(108,124,255,.35); }
.bt-sheet.small { width: min(460px, calc(100vw - 32px)); }
.bt-sheet-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 2px solid #2d5bb3; font-size: 18px; }
.bt-sheet-head b { flex: 1; }
.bt-x { width: auto; padding: 4px 10px; border-radius: 8px; background: #0f2552; border: 2px solid var(--bt-hi); font-size: 12px; font-weight: 900; }
.bt-tabs { display: flex; gap: 6px; }
.bt-tabs button { padding: 4px 10px; border-radius: 8px; border: 2px solid #2d5bb3; background: #0f2552; font-weight: 900; font-size: 12px; }
.bt-tabs button.on { border-color: var(--bt-gold); color: var(--bt-gold); }
.bt-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; padding: 12px; }
.bt-item { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 10px; border: 2px solid #2d5bb3; background: linear-gradient(#1b3c80, #10275a); text-align: left; font-weight: 800; font-size: 13px; }
.bt-item:hover { border-color: var(--bt-gold); }
.bt-item img { width: 32px; height: 32px; object-fit: contain; }
.bt-item small { color: var(--bt-gold); font-weight: 900; }
.bt-empty { padding: 20px; color: #a9bde6; }
.bt-party { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; }
.bt-pcard { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 8px; align-items: center; padding: 8px 10px 8px 8px; text-align: left;
  border-radius: 10px; border: 2px solid var(--bt-hi); background: linear-gradient(#173979, #0f2552); }
.bt-pcard .k { position: absolute; left: -6px; top: -6px; }
.bt-pcard img { width: 44px; height: 44px; border-radius: 8px; background: radial-gradient(#3e6bc0, #16326b); image-rendering: auto; }
.bt-pball { width: 30px; height: 30px; margin: 7px; border-radius: 50%; background: linear-gradient(#ee4040 0 45%, #222 45% 55%, #f5f5f5 55%); }
.bt-pcard.active { border-color: var(--bt-gold); }
.bt-pcard.fnt { filter: grayscale(.85) brightness(.8); }
.bt-pcard:hover { border-color: #fff; }
.bt-pcard[data-why] { opacity: .65; }
.bt-pcard em { position: absolute; right: 8px; top: 6px; font-size: 10px; color: #ffb4b4; font-style: normal; font-weight: 900; }
.bt-pcard.nope { animation: bt-nope .3s; }
@keyframes bt-nope { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.bt-ptop, .bt-pbot { display: flex; justify-content: space-between; gap: 6px; font-size: 13px; }
.bt-ptop span { color: var(--bt-gold); font-weight: 900; font-size: 12px; }
.bt-pbot { font-size: 11px; font-weight: 800; color: #c8d8f8; }
.bt-row { display: flex; justify-content: center; padding: 8px 12px 0; }
.bt-sheet .bt-moves { padding: 12px; }
.bt-lvup table { width: 100%; padding: 8px 18px; font-size: 16px; font-weight: 800; }
.bt-lvup td:nth-child(2) { text-align: right; } .bt-lvup td.up { color: #7dff9f; text-align: right; width: 60px; }

/* log */
.bt-log { position: absolute; left: 50%; bottom: 162px; transform: translateX(-50%); width: min(980px, calc(100vw - 28px)); max-height: 34vh; overflow: auto;
  background: rgba(4, 10, 24, 0.82); border: 1px solid #2d5bb3; border-radius: 10px; padding: 8px 12px; font-size: 13px; font-weight: 700; color: #c8d8f8; }
.bt-log[hidden] { display: none; }
.bt-log div { padding: 1px 0; border-bottom: 1px solid rgba(111, 166, 255, .12); }

/* floating numbers */
.bt-float { position: fixed; z-index: 7; transform: translate(-50%, -50%); pointer-events: none; font-weight: 900; font-size: 22px; color: #ffdd55;
  text-shadow: 0 2px 0 #3a2400, 0 0 6px #000; animation: bt-float 1.2s ease-out forwards; white-space: nowrap; font-family: Nunito, system-ui, sans-serif; }
.bt-float.crit { font-size: 30px; color: #ff9a3d; }
.bt-float.heal { color: #7dff9f; text-shadow: 0 2px 0 #0a3a1a, 0 0 6px #000; }
.bt-float.miss { color: #e8eefc; font-size: 18px; }
.bt-float.eff { color: #ffe14d; font-size: 16px; }
.bt-float.weak { color: #a9bde6; font-size: 15px; }
.bt-float.stat { color: #6fd0ff; font-size: 15px; }
.bt-float.statdown { color: #ff8c8c; font-size: 15px; }
@keyframes bt-float { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.6); } 15% { opacity: 1; transform: translate(-50%, -60%) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -190%) scale(1); } }

/* banner + flash */
.bt-banner { position: absolute; left: 0; right: 0; top: 34%; padding: 18px 0; text-align: center; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(16, 32, 64, .92) 20%, rgba(16, 32, 64, .92) 80%, transparent); border-top: 3px solid var(--bt-gold); border-bottom: 3px solid var(--bt-gold); }
.bt-banner[hidden] { display: none; }
.bt-banner.go { animation: bt-banner 1.6s ease-out; }
@keyframes bt-banner { 0% { transform: scaleY(0); opacity: 0; } 12% { transform: scaleY(1); opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }
.bt-vs { font-size: 46px; font-weight: 900; color: var(--bt-gold); text-shadow: 0 3px 0 #7a4a00, 0 0 18px rgba(255,207,74,.6); letter-spacing: 4px; font-style: italic; }
.bt-bn-title { font-size: 26px; font-weight: 900; }
.bt-bn-sub { font-size: 14px; color: #c8e7ff; font-weight: 800; }
.bt-flash { position: absolute; left: 50%; top: 24%; transform: translateX(-50%); padding: 10px 24px; border-radius: 24px; background: linear-gradient(#ffd85e, #f3a51e);
  color: #3a2400; font-weight: 900; font-size: 18px; box-shadow: 0 6px 20px rgba(0,0,0,.4); animation: bt-pop 2.2s ease-out forwards; pointer-events: none; }
@keyframes bt-pop { 0% { opacity: 0; transform: translate(-50%, 10px); } 10% { opacity: 1; transform: translate(-50%, 0); } 85% { opacity: 1; } 100% { opacity: 0; } }

/* PvP lobby (js/battle/index.js openLobby) */
.bt-lobby { position: fixed; right: 16px; top: 120px; width: 280px; z-index: 6; padding: 0 0 10px; font-family: Nunito, system-ui, sans-serif; color: #f4f7ff;
  background: linear-gradient(#152c5c, #0f2148); border: 3px solid #6c7cff; border-radius: 10px; box-shadow: 0 0 0 3px #0a1630; }
.bt-lobby h4 { margin: 0; padding: 8px 12px; border-bottom: 2px solid #2d5bb3; display: flex; justify-content: space-between; align-items: center; }
.bt-lobby h4 button { background: #0f2552; border: 2px solid #6fa6ff; border-radius: 8px; color: #fff; font-weight: 900; cursor: pointer; }
.bt-lobby .peer { display: flex; justify-content: space-between; align-items: center; padding: 6px 12px; font-weight: 800; font-size: 13px; }
.bt-lobby .peer button, .bt-lobby .invite button { border-radius: 8px; border: 2px solid #2d5bb3; background: linear-gradient(#c8473a, #8f2a22); color: #fff; font-weight: 900; padding: 3px 10px; cursor: pointer; }
.bt-lobby .invite { margin: 6px 10px; padding: 8px; border: 2px solid var(--gold, #ffcf4a); border-radius: 8px; font-size: 13px; font-weight: 800; }
.bt-lobby .invite div { display: flex; gap: 6px; margin-top: 6px; }
.bt-lobby .invite button + button { background: linear-gradient(#3f6fd0, #234a98); }
.bt-lobby .empty { padding: 8px 12px; font-size: 12px; color: #a9bde6; }

@media (max-width: 900px) {
  .bt-bottom { flex-direction: column; }
  .bt-menu { width: auto; }
  .bt-dialog { min-height: 80px; font-size: 16px; }
  .bt-panel { width: 230px; }
  .bt-panel.me { bottom: 250px; width: 240px; }
  .bt-panel.foe { top: 60px; left: 10px; }
  .bt-party { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .bt-panel { width: calc(50vw - 16px); padding: 6px 8px; }
  .bt-panel.foe { top: 8px; left: 8px; }
  .bt-panel.me { top: 8px; right: 8px; bottom: auto; width: calc(50vw - 16px); }
  .bt-top { font-size: 13px; }
  .bt-hpnum { font-size: 12px; }
  .bt-btn { min-height: 40px; font-size: 15px; }
  .bt-dialog { min-height: 64px; padding: 10px 14px; }
}

/* turn pill (trainer / PvP) */
.bt-turn { position: absolute; left: 50%; bottom: 158px; transform: translateX(-50%); padding: 4px 16px; border-radius: 16px; font-weight: 900; font-size: 13px; letter-spacing: .5px;
  background: #0f2552; border: 2px solid #2d5bb3; color: #a9bde6; box-shadow: 0 0 0 2px #0a1630; }
.bt-turn[hidden] { display: none; }
.bt-turn.mine { background: linear-gradient(#ffd85e, #f3a51e); color: #3a2400; border-color: #fff3c4; }
@media (max-width: 900px) { .bt-turn { bottom: auto; top: 8px; } }

/* ---------- real-time wild battles (js/battle/realtime.js) ---------- */
.nametag.bt-np { padding: 2px 6px; border-radius: 6px; border: 2px solid transparent; background: rgba(10, 22, 48, .45); }
.nametag.bt-np.bt-target { border-color: #ff3b3b; box-shadow: 0 0 8px rgba(255, 59, 59, .6); }
.nametag.bt-np .np-lv { color: var(--gold, #ffcf4a); font-size: 10px; }
.nametag.bt-np .np-mood { font-size: 10px; margin-left: 2px; }
.nametag.bt-np .np-mood.ag { color: #ff6b6b; }
.nametag.bt-np .np-st { margin-left: 3px; font-size: 10px; }
.nametag.bt-np .np-hp { width: 70px; height: 5px; margin: 2px auto 0; background: #0a1838; border-radius: 3px; overflow: hidden; border: 1px solid #2c4f96; }
.nametag.bt-np .np-hp i { display: block; height: 100%; background: linear-gradient(#6ff59d, #3ee07a); }
.nametag.bt-np .np-hp i.mid { background: linear-gradient(#ffe36e, #f0b71c); }
.nametag.bt-np .np-hp i.low { background: linear-gradient(#ff8c8c, #e83b3b); }
.nametag.bt-np .np-catch { font-size: 10px; color: #ffe9a8; }
.nametag.bt-np .np-catch b { color: #12264d; background: #e8eefc; border-radius: 3px; padding: 0 3px; }
/* cooldown sweep over the town move bar buttons */
#movebar .move { overflow: hidden; }
#movebar .move .bt-cd { position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: conic-gradient(rgba(5, 10, 25, .62) var(--p, 0deg), transparent 0); }
#movebar .move .bt-cd[hidden] { display: none; }
/* status chip on party cards */
#party .pm .bt-chip { position: absolute; top: -6px; right: 6px; font-size: 9px; font-weight: 900; padding: 0 5px; border-radius: 6px; line-height: 14px; }

/* phones: the HP boxes sit side by side at the top, so the turn pill goes just below them */
@media (max-width: 600px) { .bt-turn { top: calc(env(safe-area-inset-top, 0px) + 104px); } }