/* Real-time beat combat HUD (js/rt-hud.js), over the map's own box while a beat fight runs. The hotbar takes the
   stick's bottom-right corner (the stick and the turn buttons hide), clear of the action pill by --fp-bot. */
.mapview.rt .fwstick, .mapview.rt .fwturns, .mapview.rt .m3pad, .mapview.rt .fpfoe { display:none !important; }
/* The tile's ENGAGE pill is the fight already on screen: gone while it runs (the rail's slot keeps its width). */
body.rt-fight #mapfs-primary { display:none !important; }
body.rt-fight .ma-actrow .ar-ctx > * { visibility:hidden; }
.rt-hud { position:absolute; inset:0; z-index:9; pointer-events:none; font:600 calc(11px*var(--tscale))/1.2 var(--mono); color:var(--txt);
  -webkit-user-select:none; user-select:none; }
.rt-hud.hurt::after { content:''; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 60px rgba(255,40,40,.55); animation:rtHurt .35s ease-out forwards; }
@keyframes rtHurt { from { opacity:1; } to { opacity:0; } }
.rt-top { position:absolute; left:50%; top:44px; transform:translateX(-50%); display:flex; gap:6px; align-items:center; white-space:nowrap; }
.rt-intent:not(:empty) { padding:3px 8px; border-radius:999px; background:rgba(8,11,16,.78); border:1px solid var(--line-strong); color:var(--sub); }
.rt-intent b.wind { color:var(--red); }
.rt-autob .sp-auto { padding:3px 8px; border-radius:999px; background:rgba(8,11,16,.78); border:1px solid var(--amber); color:var(--amber); }
.rt-intent b.ready { color:var(--neon-text); }
/* AUTO carried over from the last fight: the badge and the lit button pulse for the fight's first seconds. */
.rt-autob .sp-auto.carry, .rt-b.auto.carry { animation:rtCarry .6s ease-in-out infinite alternate; }
@keyframes rtCarry { from { box-shadow:0 0 0 0 rgba(255,183,51,0); } to { box-shadow:0 0 14px 3px rgba(255,183,51,.75); } }
/* Foes: a name and a bar standing on each sprite's head in 3D (the loop translates its foot there, rtBarLayout keeps a pack's
   bars apart), a row under the chips on the 2D map. Names 12px, HP 11px: 9-10px was unreadable on the phone (MuMu). */
.rt-foe { position:absolute; left:0; top:0; width:84px; margin:0; text-align:center; pointer-events:auto; cursor:pointer;
  padding:2px 3px; border-radius:6px; background:rgba(8,11,16,.6); border:1px solid transparent; will-change:transform; }
.rt-foe b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--title-gold); font-size:calc(12px*var(--tscale)); }
.rt-foe span { display:block; color:var(--dim); font-size:calc(11px*var(--tscale)); }
.rt-foe.aim { border-color:var(--amber); }
.rt-foe.dead { opacity:.35; }
.rt-fhp, .rt-hp, .rt-mp { position:relative; height:6px; margin:2px 0 1px; border-radius:3px; background:var(--inset); overflow:hidden; }
.rt-fhp i, .rt-hp i, .rt-mp i { position:absolute; inset:0; transform-origin:left center; transition:transform .35s ease-out; background:var(--hp); }
.rt-mp i { background:var(--mp); } .rt-mp.blood i { background:var(--bld); }
.rt-wd { position:relative; height:14px; margin:2px 0 1px; border-radius:3px; background:var(--inset); overflow:hidden; }
.rt-wd i { position:absolute; inset:0; transform-origin:left center; transition:transform .35s ease-out; background:var(--cyan); }
.rt-wd span { position:absolute; inset:0; padding-left:4px; font-size:calc(11px*var(--tscale)); line-height:14px; color:var(--txt); }
.rt-hud.flat .rt-foes { position:absolute; left:8px; right:8px; top:72px; display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.rt-hud.flat .rt-foe { position:relative; width:92px; margin:0; transform:none !important; }
/* You: bottom left, the left half the right thumb never needs. */
.rt-me { position:absolute; left:10px; bottom:calc(12px + var(--fp-bot,0px)); width:min(150px, calc(100% - 240px)); min-width:110px; padding:5px 7px;
  border-radius:8px; background:rgba(8,11,16,.72); border:1px solid var(--line-strong); }
.rt-me b { display:block; color:var(--title-gold); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rt-hp, .rt-mp { height:14px; }
.rt-hp span, .rt-mp span { position:absolute; inset:0; padding-left:4px; font-size:calc(11px*var(--tscale)); line-height:14px; color:var(--txt); }
/* The hotbar: three columns under the right thumb; Attack in the corner inside the beat ring, flee the farthest reach. */
.rt-bar { position:absolute; right:10px; bottom:calc(10px + var(--fp-bot,0px)); pointer-events:auto; display:grid; gap:5px;
  grid-template-columns:58px 58px 78px; grid-template-rows:46px 52px 52px 78px;
  grid-template-areas:". gr au" "a3 a4 flee" "a1 a2 dodge" "pot def atk"; }   /* "au": grid-area:auto is the keyword, not a name */
.rt-b { position:relative; margin:0; padding:2px; min-width:0; border:1px solid var(--line-strong); border-radius:9px; background:rgba(28,36,52,.92);
  color:var(--txt); font:700 calc(11px*var(--tscale))/1.1 var(--mono); touch-action:manipulation; -webkit-tap-highlight-color:transparent; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; overflow:hidden; }
.rt-b b { font-size:calc(11px*var(--tscale)); white-space:nowrap; }
.rt-b small { font-size:calc(11px*var(--tscale)); color:var(--dim); font-weight:600; white-space:nowrap; }   /* 8.5px was unreadable on the phone (MuMu) */
.rt-b .cnt { position:absolute; top:2px; right:4px; font:800 calc(11px*var(--tscale))/1 var(--mono); font-style:normal; color:var(--red); }
.rt-b:disabled { opacity:.45; cursor:default; }
.rt-b:active:not(:disabled) { background:var(--raised); }
.rt-b.armed { border:2px solid var(--title-gold); box-shadow:0 0 10px rgba(255,212,121,.45); }
.rt-b.armed.by-auto { border-color:var(--amber); }   /* not .auto: that is the AUTO button's class, and its grid-area pulled an auto-armed ability onto it */
.rt-b.queued { border:2px dashed var(--title-gold); }
.rt-b .cd { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(5,7,10,.62); color:var(--title-gold);
  font:800 calc(18px*var(--tscale))/1 var(--mono); font-style:normal; }
.rt-b em { position:absolute; left:0; right:0; bottom:0; padding:1px 0; background:rgba(160,20,20,.92); color:var(--txt); font:800 calc(11px*var(--tscale))/1.2 var(--mono); font-style:normal; }
.rt-b.a1 { grid-area:a1; } .rt-b.a2 { grid-area:a2; } .rt-b.a3 { grid-area:a3; } .rt-b.a4 { grid-area:a4; }
.rt-b.pot { grid-area:pot; } .rt-b.def { grid-area:def; } .rt-b.flee { grid-area:flee; color:var(--amber); } .rt-b.auto { grid-area:au; }
.rt-b.auto.on { border:2px solid var(--amber); background:rgba(255,183,51,.24); color:var(--amber); }
.rt-b.auto.on small { color:var(--amber); }
/* GEAR: the free weapon swing (rt-combat.js rtGear), next to AUTO. */
.rt-b.gear { grid-area:gr; color:var(--title-gold); }
/* DODGE (rt-dodge.js): right above Attack; it glows red while a blow is winding up at you. */
.rt-b.dodge { grid-area:dodge; color:var(--cyan); }
.rt-b.dodge.warn:not(:disabled) { border:2px solid var(--red); color:var(--txt); animation:rtWarn .7s ease-in-out infinite alternate; }
@keyframes rtWarn { from { box-shadow:0 0 0 0 rgba(255,59,59,0); } to { box-shadow:0 0 12px 2px rgba(255,59,59,.55); } }
.rt-num.dodged { color:var(--cyan); font-size:calc(14px*var(--tscale)); }
.rt-b.ult:not(:disabled) { border-color:var(--title-gold); color:var(--title-gold); }
/* The beat ring: the beat in progress as a sweep, a pulse on each boundary (server clock, rt-combat.js). */
.rt-ring { grid-area:atk; position:relative; border-radius:50%; padding:5px; --bp:0;
  background:conic-gradient(var(--title-gold) calc(var(--bp) * 1turn), rgba(150,178,214,.18) 0); }
.rt-ring.tick { animation:rtTick .25s ease-out; }
@keyframes rtTick { from { box-shadow:0 0 0 0 rgba(255,212,121,.75); } to { box-shadow:0 0 0 10px rgba(255,212,121,0); } }
.rt-ring .rt-b { width:100%; height:100%; border-radius:50%; background:rgba(40,22,18,.95); border-color:var(--st-aggressive); }
.rt-ring .rt-b b { font-size:calc(12px*var(--tscale)); color:var(--title-gold); }
.rt-ring .rt-b.armed { border-color:var(--title-gold); }
/* The opening grace (server: beat.grace): the ring sweeps green and Attack counts READY down. */
.rt-ring.grace { background:conic-gradient(var(--neon-text) calc(var(--bp) * 1turn), rgba(150,178,214,.18) 0); }
/* First person: a blow winding up at you reddens the screen's edges and the ring through the beat (rt-dodge.js rtTeleEdge). */
.rt-hud.tele::before { content:''; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 calc(3px + 4px * var(--tf)) rgba(255,59,59,.85), inset 0 0 calc(24px + 50px * var(--tf)) rgba(255,59,59,calc(.45 + .45 * var(--tf))); }
.rt-hud.tele-armed::before { box-shadow:inset 0 0 0 calc(3px + 4px * var(--tf)) rgba(255,179,64,.85), inset 0 0 calc(24px + 50px * var(--tf)) rgba(255,179,64,calc(.35 + .35 * var(--tf))); }
.rt-hud.tele .rt-ring { background:conic-gradient(var(--red) calc(var(--bp) * 1turn), rgba(255,59,59,.3) 0); }
/* Numbers: the server's rise and fade; a predicted one is dimmed and marked "~" until the reply replaces it. */
.rt-fx { position:absolute; inset:0; overflow:hidden; }
.rt-num { position:absolute; transform:translate(-50%,-50%); font:800 calc(15px*var(--tscale))/1 var(--mono); color:var(--amber); white-space:nowrap;
  text-shadow:0 1px 0 var(--inset), 0 0 4px var(--inset); animation:rtRise 1.1s ease-out forwards; }
.rt-num.pred { opacity:.45; font-style:italic; animation:rtPred .3s ease-out forwards; }
.rt-num.crit { color:var(--title-gold); font-size:calc(19px*var(--tscale)); }
.rt-num.crew { color:var(--cyan); font-size:calc(12px*var(--tscale)); }
.rt-num.ouch { color:var(--red); }
.rt-num.heal { color:var(--neon-text); }
.rt-num.tag { color:var(--sub); font-size:calc(11px*var(--tscale)); }
@keyframes rtRise { 0% { opacity:0; margin-top:6px; } 15% { opacity:1; margin-top:0; } 100% { opacity:0; margin-top:-34px; } }
@keyframes rtPred { from { margin-top:6px; } to { margin-top:-8px; } }
body.no-motion .rt-num, body.no-motion .rt-ring.tick, body.no-motion .rt-b.dodge.warn, body.no-motion .carry { animation:none; }
@media (prefers-reduced-motion:reduce) { .rt-num, .rt-ring.tick, .rt-b.dodge.warn, .rt-hud .carry { animation:none; } }
/* newcomer.js: the first real-time fight's card (in #compare, sat low so GOT IT is under the right thumb) and the result
   card a beat fight ends on (where toasts sit, tap or 5 s; held while #combat is up: the Path pick, a revive). */
#compare:has(.rt-intro) { align-items:flex-end; padding-bottom:calc(96px + env(safe-area-inset-bottom, 0px)); }
.rt-intro { max-width:380px; width:100%; }
.rt-intro p { margin:0 0 10px; line-height:1.45; color:var(--sub); }
.rt-intro p b { color:var(--txt); }
.rt-intro button { width:100%; margin-top:4px; }
.rt-res { position:fixed; z-index:131; left:50%; top:calc(var(--toast-top, 74px) + env(safe-area-inset-top, 0px)); transform:translateX(-50%);
  min-width:min(300px, 84vw); max-width:92vw; box-sizing:border-box; padding:10px 14px; text-align:center; cursor:pointer;
  background:var(--raised); border:1px solid var(--line); border-left:3px solid var(--neon-text); border-radius:10px; box-shadow:var(--shadow-card);
  animation:toastIn .3s ease; }
.rt-res.fled { border-left-color:var(--amber); }
.rt-res-w { display:block; font-size:calc(15px*var(--tscale)); letter-spacing:1.5px; color:var(--neon-text); }
.rt-res.fled .rt-res-w { color:var(--amber); }
.rt-res .cx-spoils { justify-content:center; margin:4px 0 2px; }
.rt-res-l { display:block; color:var(--dim); font-size:calc(11.5px*var(--tscale)); }
body:has(#combat:not(.hide)) .rt-res { display:none; }