/* Caytopia: combat, health & hospital UI (combat.js). Loads after mobile.css. */

/* ---- health bar: a thin strip at the bottom of the status tile / pill (only when hurt or fighting) ---- */
#hud .status { position: relative; }
.nl-hp { position: absolute; left: 12px; right: 12px; bottom: 3px; height: 5px; border-radius: 3px; background: rgba(120, 130, 150, .28); overflow: hidden; pointer-events: none; }
.nl-hp[hidden] { display: none; }
.nl-hp > i { display: block; height: 100%; width: 100%; border-radius: 3px; background: linear-gradient(90deg, #17b890, #5ce0a8); transition: width .25s ease, background .3s; }
.nl-hp.mid > i { background: linear-gradient(90deg, #f0a030, #ffd060); }
.nl-hp.low > i { background: linear-gradient(90deg, #d93a4a, #ff6b78); animation: cbPulse 1s ease-in-out infinite; }
.nl-hp > b { position: absolute; right: 0; top: -13px; font: 700 9px/1 var(--nl-font, system-ui); color: var(--nl-ink-2, #3A4566); opacity: 0; transition: opacity .2s; }
html:not(.nl-phone) .nl-hp { bottom: 4px; height: 6px; }
html:not(.nl-phone) .status:hover .nl-hp > b { opacity: .9; }
html.nl-phone .nl-hp { left: 40px; right: 14px; bottom: 2px; height: 4px; }
@keyframes cbPulse { 50% { opacity: .55; } }

/* ---- low-health vignette ---- */
#cbVig { position: fixed; inset: 0; pointer-events: none; z-index: 14; opacity: 0; transition: opacity .12s linear;
  background: radial-gradient(ellipse at center, rgba(160, 0, 20, 0) 45%, rgba(170, 10, 25, .55) 78%, rgba(120, 0, 15, .85) 100%); }

/* ---- the fight HUD ---- */
html.nl-fighting .actbar, html.nl-fighting #prompt, html.nl-fighting .hud-top, html.nl-fighting #chatBox, html.nl-fighting #dirCard { display: none !important; }
#cbPanel { position: absolute; left: 50%; top: calc(var(--st, 14px) + 56px); transform: translateX(-50%); z-index: 13; display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center;
  width: min(300px, calc(100vw - 210px)); min-width: 214px; padding: 6px 10px 8px; border-radius: 16px; background: rgba(11, 20, 48, .64); color: #fff;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 6px 20px rgba(0, 0, 0, .25); pointer-events: none; font-family: var(--nl-font, system-ui); }
#cbPanel[hidden] { display: none; }
html:not(.nl-phone) #cbPanel { top: 92px; width: 340px; }
.cb-side { min-width: 0; }
.cb-n { display: block; font: 700 11px/1.2 var(--nl-font, system-ui); letter-spacing: .02em; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-side.foe { text-align: right; }
.cb-bar { height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .22); overflow: hidden; }
.cb-bar > i { display: block; height: 100%; width: 100%; border-radius: 4px; background: linear-gradient(90deg, #17b890, #6ee8b0); transition: width .12s linear; }
.cb-side.foe .cb-bar > i { margin-left: auto; background: linear-gradient(90deg, #ff6b6b, #ffb04d); }
.cb-bar.low > i { background: linear-gradient(90deg, #d93a4a, #ff6b78); }
.cb-st { height: 3px; margin-top: 3px; border-radius: 2px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.cb-st > i { display: block; height: 100%; width: 100%; background: #ffd24d; }
.cb-side.foe .cb-st > i { margin-left: auto; }
.cb-mid { font: 800 15px/1 var(--nl-font, system-ui); min-width: 24px; text-align: center; font-variant-numeric: tabular-nums; opacity: .9; }
.cb-msg { grid-column: 1 / -1; text-align: center; font: 700 12px/1.2 var(--nl-font, system-ui); max-height: 0; opacity: 0; overflow: hidden; transition: opacity .2s, max-height .2s; }
.cb-msg.on { max-height: 20px; opacity: 1; margin-top: 3px; }

/* ---- touch buttons beside the joystick ---- */
#cbBtns { position: absolute; right: calc(var(--sr, 16px) + 126px); bottom: var(--row, 76px); z-index: 13; display: none; grid-template-columns: repeat(3, 54px); gap: 7px; touch-action: none; }
#cbBtns[hidden] { display: none !important; }
html.nl-touch #cbBtns:not([hidden]) { display: grid; }
html.nl-touch.nl-joy-left #cbBtns { right: auto; left: calc(var(--sl, 16px) + 126px); }
html.nl-phone.nl-land #cbBtns { bottom: calc(var(--row) + 4px); grid-template-columns: repeat(5, 46px); gap: 6px; right: calc(var(--sr, 16px) + 118px); }
html.nl-phone.nl-land.nl-joy-left #cbBtns { right: auto; left: calc(var(--sl, 16px) + 118px); }
#cbBtns button { width: 54px; height: 54px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .7); background: rgba(11, 20, 48, .55); color: #fff; font: 800 10px/1 var(--nl-font, system-ui);
  letter-spacing: .04em; text-transform: uppercase; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 3px 10px rgba(0, 0, 0, .25); touch-action: none; -webkit-tap-highlight-color: transparent; padding: 0; }
html.nl-phone.nl-land #cbBtns button { width: 46px; height: 46px; font-size: 9px; }
#cbBtns button[data-m="punch"] { background: rgba(217, 58, 74, .72); }
#cbBtns button[data-m="kick"] { background: rgba(240, 140, 40, .74); }
#cbBtns button[data-m="special"] { background: rgba(130, 70, 210, .78); }
#cbBtns button[data-m="block"] { background: rgba(30, 110, 200, .72); }
#cbBtns button[data-m="dodge"] { background: rgba(0, 166, 147, .72); }
#cbBtns button[data-m="bottle"] { background: rgba(120, 80, 30, .8); grid-column: 1 / -1; width: auto; border-radius: 22px; height: 40px; }
#cbBtns button.on { transform: scale(.92); border-color: #fff; filter: brightness(1.2); }
#cbHint { position: absolute; left: 50%; bottom: 76px; transform: translateX(-50%); z-index: 13; padding: 5px 12px; border-radius: 12px; background: rgba(11, 20, 48, .6); color: #fff; font: 600 12px/1.2 var(--nl-font, system-ui); pointer-events: none; white-space: nowrap; }
#cbHint[hidden] { display: none; }
html.nl-touch #cbHint { display: none; }

/* ---- floating damage numbers ---- */
#cbFx { position: fixed; inset: 0; pointer-events: none; z-index: 15; overflow: hidden; }
.cb-fx { position: absolute; transform: translate(-50%, -50%); font: 800 16px/1 var(--nl-font, system-ui); color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); opacity: .95; transition: transform .8s ease-out, opacity .8s ease-in; white-space: nowrap; }
.cb-fx.go { transform: translate(-50%, -48px); opacity: 0; }
.cb-fx.foe { color: #ffd24d; } .cb-fx.me { color: #ff6b78; } .cb-fx.miss { color: #cfe3ff; font-size: 12px; font-weight: 700; } .cb-fx.low { color: #ffb04d; font-size: 12px; }

/* ---- fade + hospital + press-charges panels ---- */
#cbFade { position: fixed; inset: 0; z-index: 9990; background: #000; opacity: 0; pointer-events: none; display: flex; align-items: center; justify-content: center; }
#cbFade::after { content: attr(data-t); color: #fff; font: 600 17px/1.3 var(--nl-font, system-ui); letter-spacing: .02em; text-align: center; padding: 0 24px; opacity: .92; }
#cbHosp, #cbCharge { position: fixed; z-index: 9995; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: min(380px, calc(100vw - 24px)); padding: 14px 16px 16px; border-radius: 20px;
  background: rgba(255, 255, 255, .94); color: var(--nl-ink, #0B1430); box-shadow: 0 12px 40px rgba(0, 0, 0, .35); font-family: var(--nl-font, system-ui); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hp-h, .pc-h { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.hp-h b, .pc-h b { font-size: 16px; } .hp-h span, .pc-h span { font-size: 12px; color: var(--nl-ink-2, #3A4566); }
.hp-prog { height: 8px; border-radius: 4px; background: rgba(11, 20, 48, .1); overflow: hidden; }
.hp-prog > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #17b890, #5ce0a8); }
.hp-clock { font-size: 11px; color: var(--nl-ink-3, #7A84A3); margin: 4px 0 8px; font-variant-numeric: tabular-nums; }
.hp-bill { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; } .hp-bill.tot { border-top: 1px solid rgba(11, 20, 48, .1); margin-top: 4px; padding-top: 8px; font-weight: 800; font-size: 15px; }
#cbHosp button, #cbCharge button { width: 100%; min-height: 46px; margin-top: 10px; border: 0; border-radius: 14px; background: var(--nl-ink, #0B1430); color: #fff; font: 700 15px/1 var(--nl-font, system-ui); cursor: pointer; }
#cbHosp button:disabled { opacity: .45; cursor: default; }
#cbCharge button { margin-top: 8px; background: rgba(11, 20, 48, .08); color: var(--nl-ink, #0B1430); }
#cbCharge button.pc-go { background: var(--nl-ink, #0B1430); color: #fff; } #cbCharge button.pc-quiet { background: transparent; text-decoration: underline; min-height: 38px; }
.sc-ch.cb-insult { color: #b3303c; }

@media (prefers-reduced-motion: reduce) { .nl-hp.low > i { animation: none; } .cb-fx { transition-duration: .01s; } }

/* ---- lock-on marker over the opponent (combatfx.js): ring at the feet, red bracket at the head, name + HP ---- */
#hud > #cbTgt, #hud > #cbTgt * { pointer-events: none; }
#cbTgt { position: fixed; inset: 0; z-index: 12; }
#cbTgt[hidden] { display: none; }
#cbTgt .tg-ring { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid rgba(255, 255, 255, .8); box-shadow: 0 0 0 1px rgba(0, 0, 0, .25), inset 0 0 8px rgba(255, 80, 80, .35); animation: cbRing 1.4s ease-in-out infinite; }
#cbTgt .tg-br { position: absolute; transform: translate(-50%, -50%); }
#cbTgt .tg-br i { position: absolute; width: 28%; height: 28%; border: 0 solid #ff4a55; filter: drop-shadow(0 0 2px rgba(0, 0, 0, .6)); }
#cbTgt .tg-br i:nth-child(1) { left: 0; top: 0; border-left-width: 2.5px; border-top-width: 2.5px; }
#cbTgt .tg-br i:nth-child(2) { right: 0; top: 0; border-right-width: 2.5px; border-top-width: 2.5px; }
#cbTgt .tg-br i:nth-child(3) { left: 0; bottom: 0; border-left-width: 2.5px; border-bottom-width: 2.5px; }
#cbTgt .tg-br i:nth-child(4) { right: 0; bottom: 0; border-right-width: 2.5px; border-bottom-width: 2.5px; }
#cbTgt .tg-lab { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; gap: 2px; font: 800 11px/1 var(--nl-font, system-ui); color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); white-space: nowrap; }
#cbTgt .tg-bar { display: block; width: 54px; height: 4px; border-radius: 2px; background: rgba(0, 0, 0, .45); overflow: hidden; }
#cbTgt .tg-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #ff4a55, #ffb04d); }
#cbTgt.ko .tg-br, #cbTgt.ko .tg-lab { opacity: .35; }
@keyframes cbRing { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { #cbTgt .tg-ring { animation: none; } }