/* css/bossring.css - the World Boss fight: the ring of players around the boss (docs/PLAN-BOSS-MOBIEL.md, design 3).
 * js/ui/bossring.js draws it; js/ui/battle.js puts `world-boss boss-ring` (+ `last-push` under 10 %) on the
 * arena. Ported from the pictures' docs/img/boss-mobiel/src/m-ring.css and docs/img/boss/src/boss-real.css
 * (the boss bar, the team-mates' name tags). The boss and you are the battle's own sprite stages, moved
 * here; js sets the sizes it measured on the arena: --ring-top (under the bar), --ring-cy (the ring's
 * centre = the boss's feet), --ring-front (your feet), --ring-boss / --ring-you (sprite scales) and
 * --ring-boss-h / --ring-you-h (the stages' heights). Everything else on the ring is in % of the arena,
 * so it scales from a 390 x 220 phone to a 1100 x 360 desktop. */

/* ------------------------------------------------------------------------ */
/* 1. The arena                                                              */
/* ------------------------------------------------------------------------ */

/* A little taller on a PC (300 -> 360, docs/PLAN-BOSS.md §2 asked 380 for the crowd): the bar, a big boss
   and the ring need the height. A phone's arena takes the room that is left (css/game.css, DECISIONS 462). */
@media (min-width: 601px) {
  .battle-arena.boss-ring { --arena-h: 360px; }
}
/* The vignette centred on the boss (the Dungeon one sits right, where a legendary stands), a warm glow
   behind him and the top darkened under the bar - in ::before, so it lies under the ring and the crowd. */
.battle-arena.boss-ring::before {
  background:
    linear-gradient(180deg, rgba(46, 10, 36, 0.42), rgba(8, 10, 22, 0) 42%),
    radial-gradient(ellipse 30% 36% at 50% 50%, rgba(255, 150, 90, 0.18), transparent 70%),
    radial-gradient(ellipse 80% 75% at 50% 58%, transparent 42%, rgba(6, 8, 20, 0.58) 100%);
}

/* The raid slot (the foe column) becomes the boss bar across the top; the foe's own box is not drawn:
   its HP is the shared pot, which the bar shows in points (js watches the box to drain the bar with it). */
.battle-arena.boss-ring .battle-foe-col { top: 10px; left: 10px; right: 10px; width: auto; z-index: 4; align-items: stretch; }
.battle-arena.boss-ring .battle-foe-col > .battle-info.opp,
.battle-arena.boss-ring .battle-foe { display: none; }

/* The boss: in the middle of the ring, his feet on its centre, scaled by js to fill the room under the bar. */
.battle .battle-arena.boss-ring .battle-sprite.opp {
  left: 50%; right: auto; width: 60%; translate: -50% 0; scale: none;
  top: calc(var(--ring-cy, 62%) - var(--ring-boss-h, 45%)); height: var(--ring-boss-h, 45%); padding-bottom: 0;
}
.battle .battle-arena.boss-ring .battle-sprite.opp .sprite-wrap { margin-bottom: 0; transform: scale(calc(var(--ring-boss, 1.3) * var(--grow, 1))); }
/* You: at the front of the ring, about 1.5x the others, over the green spot. */
.battle .battle-arena.boss-ring .battle-sprite.you {
  left: 50%; right: auto; width: 40%; translate: -50% 0; z-index: 2;
  top: calc(var(--ring-front, 82%) - var(--ring-you-h, 30%)); bottom: auto; height: var(--ring-you-h, 30%); padding-bottom: 0;
}
.battle .battle-arena.boss-ring .battle-sprite.you .sprite-wrap { margin-bottom: 0; transform: scale(calc(var(--ring-you, 0.8) * var(--grow, 1))); }
/* Your box, small and centred under your Pokémon (the ring needs the corners); no EXP row, the boss
   gives none and the room goes to the ring. YOU next to the level. */
.battle .battle-arena.boss-ring .battle-info.you {
  left: 50%; right: auto; bottom: 6px; translate: -50% 0;
  width: calc(min(210px, 60%) + max(0px, var(--val-w, 0px) - 44px));
  border-radius: 10px; border-color: rgba(157, 240, 171, 0.55);
}
.battle-arena.boss-ring .battle-info.you .battle-info-row + .battle-info-row { display: none; }
.you-tag { display: none; }
.battle-arena.boss-ring .you-tag {
  display: inline-block; flex: none; margin-left: 6px; padding: 0 5px; border-radius: 999px;
  font-size: 9px; font-weight: 800; line-height: 14px; letter-spacing: 0.06em;
  background: rgba(157, 240, 171, 0.2); color: #9df0ab;
}
.battle-arena.boss-ring .battle-info.you .battle-info-level { margin-left: auto; }

/* The spectator pill and the weather badge step under the bar (they sit top-left / top-right). */
.battle-arena.boss-ring .watch-pill { top: calc(var(--ring-top, 90px) + 6px); left: auto; right: 10px; }
.battle-arena.boss-ring .weather-badge { top: calc(var(--ring-top, 90px) + 6px); }

/* ------------------------------------------------------------------------ */
/* 2. The boss bar (docs/PLAN-BOSS.md §3.4; the raid strip's look, js bossBarEl) */
/* ------------------------------------------------------------------------ */

.boss-bar { padding: 6px 10px 7px; font-size: 0.78rem; border-radius: 10px 4px 10px 4px; }
.boss-bar .raid-bar { margin: 0; }
.boss-bar .raid-bar-head { align-items: center; gap: 10px; font-size: 0.8rem; flex-wrap: nowrap; min-width: 0; }
/* No bold text in the bar (owner, 27 September): only the boss's name stands out a little. */
.boss-bar .raid-tag { font-weight: 600; letter-spacing: 0.14em; }
.boss-bar .raid-name { font-size: 1rem; font-weight: 600; color: #fff; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boss-bar .raid-level { color: #cfc6ea; font-weight: 400; white-space: nowrap; }
.boss-bar .raid-clock { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: 0.85rem; font-weight: 500; white-space: nowrap; }
.boss-bar .raid-clock .icon, .boss-count .icon { width: 13px; height: 13px; opacity: 0.8; display: block; }
.boss-bar .raid-track { height: 12px; margin-top: 5px; }
.boss-bar .raid-hp-num { margin-left: auto; font-weight: 500; color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; }
.boss-bar-sub { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 0.74rem; color: #cfc6ea; white-space: nowrap; min-width: 0; }
.boss-count { display: inline-flex; align-items: center; gap: 4px; color: #e8dcff; }
.boss-synced { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* You against the number 1 (choice 2c): your points and rank, a green bar measured against #1, who that is. */
.boss-bar-you {
  display: flex; align-items: center; gap: 6px; margin-top: 4px; padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.72rem; color: #d8d0f0; white-space: nowrap; min-width: 0;
}
.boss-bar-you-me { color: #9df0ab; font-weight: 600; }
.boss-you-bar { flex: 1 1 auto; min-width: 24px; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.boss-you-bar > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4fbf6a, #9df0ab); transition: width 0.6s ease; }
.boss-you-top { flex: none; color: #ffe28a; font-variant-numeric: tabular-nums; }

/* A PC: the head and the numbers on one line (01b-concept-shell.png), the track, then you. */
@media (min-width: 601px) {
  .boss-bar .raid-bar {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 16px;
    grid-template-areas: "head sub" "track track" "you you";
  }
  .boss-bar .raid-bar-head { grid-area: head; }
  .boss-bar .raid-track { grid-area: track; }
  .boss-bar-sub { grid-area: sub; margin-top: 0; font-size: 0.78rem; }
  .boss-bar-you { grid-area: you; }
  .boss-you-bar { flex: 0 1 220px; }
}

/* LAST PUSH (under 10 %): the headline, the bar thick and red, who still stands. */
.boss-bar.push {
  border: 1px solid rgba(255, 90, 80, 0.75);
  box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.25), 0 0 22px rgba(229, 72, 77, 0.55);
  background: linear-gradient(180deg, rgba(70, 16, 30, 0.95), rgba(30, 10, 22, 0.95));
}
.boss-bar.push .raid-track {
  height: 16px;
  background: repeating-linear-gradient(135deg, rgba(229, 72, 77, 0.16) 0 6px, rgba(229, 72, 77, 0.06) 6px 12px);
  box-shadow: 0 0 0 1px rgba(255, 110, 90, 0.9), 0 0 12px rgba(255, 80, 60, 0.8);
}
.boss-bar.push .raid-fill { background: linear-gradient(90deg, #ff4d4d, #ffb070); box-shadow: 0 0 10px #ff5a4a; }
.push-title {
  font-size: 1.3rem; font-weight: 900; font-style: italic; letter-spacing: 0.06em; line-height: 1.1; color: #fff; white-space: nowrap;
  text-shadow: 0 0 12px rgba(255, 80, 60, 0.95), 0 2px 0 #5a0d12;
}
.boss-bar.push .raid-clock { color: #ffd2c8; }
.push-sub { color: #ffd9d2; }
.push-sub > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #fff; }

/* ------------------------------------------------------------------------ */
/* 3. The ring (js/ui/bossring.js: .boss-ring-layer)                         */
/* ------------------------------------------------------------------------ */

/* No z-index on the layer: its parts stack with the battle's own stages - the floor, the crowd and the
   back row (z 0) under the boss (z 1), the front row (z 1, later in the page) over him, you (z 2) in front. */
.boss-ring-layer { position: absolute; inset: 0; pointer-events: none; }
.battle-arena:not(.boss-ring) > .boss-ring-layer { display: none; }   /* the catch keeps the Dungeon look */
/* The ring on the floor: an ellipse around the boss's feet. */
.ring-floor {
  position: absolute; z-index: 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 214, 102, 0.13), rgba(255, 214, 102, 0.04) 72%, transparent);
  box-shadow: inset 0 0 0 1.5px rgba(255, 214, 102, 0.38), inset 0 0 22px rgba(255, 190, 90, 0.16), 0 0 16px rgba(255, 190, 90, 0.12);
  transition: box-shadow 0.6s ease;
}
/* Your place at the front: a green spot, so you find yourself at once. */
.ring-you-spot {
  position: absolute; z-index: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(157, 240, 171, 0.55), rgba(79, 191, 106, 0.25) 60%, transparent);
  box-shadow: 0 0 0 1.5px rgba(157, 240, 171, 0.7), 0 0 14px rgba(157, 240, 171, 0.45);
}
.battle-arena[data-ring-me="out"] .ring-you-spot { filter: grayscale(1) brightness(0.7); opacity: 0.6; }
/* The rest of the raid: small dim menu icons at the back of the ring, left and right of the boss. */
.ring-far-icon { position: absolute; z-index: 0; translate: -50% -100%; image-rendering: pixelated; opacity: 0.55; filter: brightness(0.75); object-fit: contain; }
.ring-far-icon.s-out { filter: grayscale(1) brightness(0.6); opacity: 0.4; }
.last-push .ring-far-icon { filter: grayscale(1) brightness(0.6); }
/* "+ 22 more": the raid chip without an avatar, in the strip's gold; "+ 22 out" grey. */
.ring-more {
  position: absolute; z-index: 3; translate: -50% 0; padding: 2px 9px; border-radius: 999px; white-space: nowrap;
  font-size: 0.7rem; line-height: 1.3; color: #ffe28a;
  background: rgba(18, 16, 40, 0.86); border: 1px solid rgba(255, 214, 102, 0.45);
}
.ring-more.all-out { color: #b8c0d4; border-color: rgba(255, 255, 255, 0.2); }

/* A team-mate: feet at its place on the ring (left/top), the back sprite facing the boss, the name tag
   under it whose bottom edge is their HP. The back row a notch dimmer. */
.boss-mate {
  position: absolute; z-index: 1; display: flex; flex-direction: column; align-items: center;
  translate: -50% calc(-100% + 11px);
}
.boss-mate.back { z-index: 0; }
.boss-mate > img { display: block; width: auto; image-rendering: pixelated; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.65)); }
.boss-mate.back > img { opacity: 0.8; filter: brightness(0.82) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6)); }
.boss-mate-tag {
  position: relative; overflow: hidden; margin-top: -2px; max-width: 76px;
  padding: 0 5px 2px; border-radius: 999px;
  font-size: 9.5px; line-height: 12px; white-space: nowrap; text-overflow: ellipsis; color: var(--text);
  background: rgba(18, 16, 40, 0.86); border: 1px solid rgba(255, 214, 102, 0.3);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.boss-mate-name { display: block; overflow: hidden; text-overflow: ellipsis; }
.boss-mate-tag > i { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--hp); transition: width 0.6s ease; }
.boss-mate-tag > i.mid { background: var(--hp-mid); }
.boss-mate-tag > i.low { background: var(--hp-low); }
/* Out: grey where they stood (they still count, and they cheer the ones who stand). */
.boss-mate.s-out > img { filter: grayscale(1) brightness(0.7); opacity: 0.55; }
.boss-mate.s-out .boss-mate-tag { opacity: 0.7; color: var(--muted); }
/* The one who just hit: the tag lights up gold for a moment. */
.boss-mate.hit .boss-mate-tag { border-color: rgba(255, 214, 102, 0.9); box-shadow: 0 0 8px rgba(255, 200, 80, 0.55); color: #fff; }
/* Someone new takes a place: a soft fade in, never a jump. */
.boss-mate.mate-in { animation: ring-mate-in 0.35s ease-out; }
@keyframes ring-mate-in { from { opacity: 0; } to { opacity: 1; } }

/* The streaks (js beam): an SVG over the field; the line shoots from the hitter to the boss in its move's
   type colour, a flash where it lands, then it fades. --d staggers a burst. */
.ring-beams { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; overflow: visible; pointer-events: none; }
.ring-beam { opacity: 0; animation: ring-beam-fade 1.3s ease-out var(--d, 0ms) both; }
.ring-beam line { fill: none; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ring-beam-shoot 0.22s ease-out var(--d, 0ms) forwards; }
.ring-beam-glow { stroke-width: 9; opacity: 0.45; }
.ring-beam-core { stroke-width: 3; }
.ring-beam.me .ring-beam-glow { stroke-width: 12; opacity: 0.5; }
.ring-beam.me .ring-beam-core { stroke-width: 4.5; }
.ring-beam-hit { transform-box: fill-box; transform-origin: center; animation: ring-beam-hit 0.45s ease-out calc(var(--d, 0ms) + 0.16s) both; }
@keyframes ring-beam-shoot { to { stroke-dashoffset: 0; } }
@keyframes ring-beam-fade { 0% { opacity: 1; } 65% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ring-beam-hit { 0% { opacity: 0; scale: 0.3; } 40% { opacity: 1; scale: 1.15; } 100% { opacity: 0.85; scale: 1; } }
/* The points of a hit, rising and fading (the look of css/dungeons.css .raid-float). */
.ring-fx { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.ring-hit-num {
  position: absolute; translate: -50% -50%; white-space: nowrap;
  font-weight: 900; font-size: 13px; color: #ffe28a;
  text-shadow: 0 2px 0 #3b2200, 0 0 8px rgba(0, 0, 0, 0.8);
  animation: ring-num-rise 1.3s ease-out var(--d, 0ms) both;
}
@keyframes ring-num-rise {
  0%   { opacity: 0; translate: -50% -30%; }
  15%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { opacity: 0; translate: -50% -180%; }
}

/* ------------------------------------------------------------------------ */
/* 4. LAST PUSH (under 10 %): the ring glows, a red rim, who stands in gold   */
/* ------------------------------------------------------------------------ */

.battle-arena.boss-ring.last-push { box-shadow: inset 0 0 60px rgba(229, 40, 50, 0.45), var(--shadow, 0 8px 24px rgba(0, 0, 0, 0.35)); }
.last-push .ring-floor {
  background: radial-gradient(closest-side, rgba(255, 120, 80, 0.22), rgba(255, 150, 80, 0.07) 72%, transparent);
  box-shadow: inset 0 0 0 2px rgba(255, 214, 102, 0.95), inset 0 0 26px rgba(255, 140, 70, 0.45), 0 0 24px rgba(255, 150, 70, 0.55), 0 0 4px rgba(255, 230, 150, 0.9);
  animation: ring-push-glow 1.6s ease-in-out infinite;
}
@keyframes ring-push-glow { 50% { box-shadow: inset 0 0 0 2px #fff0b0, inset 0 0 34px rgba(255, 140, 70, 0.6), 0 0 34px rgba(255, 150, 70, 0.75), 0 0 6px rgba(255, 230, 150, 1); } }
.battle-arena.boss-ring.last-push .battle-sprite.opp { animation: none; filter: drop-shadow(0 0 3px #ff6a5a) drop-shadow(0 0 10px #ff4a3a) drop-shadow(0 0 22px rgba(255, 60, 50, 0.85)); }
.battle-arena.boss-ring.last-push .battle-sprite.opp .sprite-wrap::before { background: radial-gradient(circle, rgba(255, 90, 70, 0.55), rgba(255, 60, 50, 0.2) 45%, transparent 70%); }
/* The ones still standing: a gold rim, so the eye goes to them. */
.boss-mate.standing > img { filter: drop-shadow(0 0 1px #fff3b0) drop-shadow(0 0 4px #ffd24a) drop-shadow(0 0 9px rgba(255, 200, 80, 0.9)); }
.boss-mate.standing .boss-mate-tag { border-color: rgba(255, 214, 102, 0.95); color: #fff; }

/* ------------------------------------------------------------------------ */
/* 5. The phone                                                              */
/* ------------------------------------------------------------------------ */

@media (max-width: 600px) {
  .battle-arena.boss-ring .battle-foe-col { top: 6px; left: 6px; right: 6px; }
  .boss-bar { padding: 5px 8px 6px; }
  .boss-bar .raid-bar-head { gap: 6px; font-size: 0.72rem; }
  .boss-bar .raid-tag { font-size: 0.56rem; letter-spacing: 0.1em; }
  .boss-bar .raid-name { font-size: 0.9rem; }
  .boss-bar .raid-clock { font-size: 0.78rem; }
  .boss-bar .raid-track { height: 10px; margin-top: 4px; }
  .boss-bar-sub { margin-top: 3px; font-size: 0.66rem; gap: 6px; }
  .boss-bar-you { margin-top: 4px; font-size: 0.68rem; }
  .push-title { font-size: 1.15rem; }
  .boss-bar.push .raid-track { height: 14px; }
  .battle .battle-arena.boss-ring .battle-info.you { bottom: 5px; }
  .battle-arena.boss-ring .watch-pill { right: 8px; }
  .ring-hit-num { font-size: 12.5px; }
}
/* A short arena (a small phone, under 300 px): the bar drops its numbers line (the percent moves into
   the head) and your box becomes one line, so the boss and the ring keep their room. */
.boss-pct { display: none; }
.battle-arena[data-ring="short"] .boss-bar-sub:not(.push-sub) { display: none; }
.battle-arena[data-ring="short"] .boss-pct { display: inline; margin-left: auto; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.battle-arena[data-ring="short"] .boss-pct + .raid-clock { margin-left: 0; }
.battle-arena[data-ring="short"] .boss-bar-you { margin-top: 3px; padding-top: 3px; }
.battle-arena[data-ring="short"] .boss-mate-tag { font-size: 8.5px; line-height: 11px; max-width: 60px; }
.battle .battle-arena.boss-ring[data-ring="short"] .battle-info.you {
  display: flex; align-items: center; gap: 8px; padding: 3px 8px; bottom: 4px; width: min(300px, 82%);
}
.battle-arena.boss-ring[data-ring="short"] .battle-info.you .battle-info-top { flex: 0 1 auto; min-width: 0; }
.battle-arena.boss-ring[data-ring="short"] .battle-info.you .battle-info-row { flex: 1 1 auto; min-width: 60px; margin-top: 0; }
.battle-arena.boss-ring[data-ring="short"] .battle-info.you .battle-info-val { display: none; }

@media (prefers-reduced-motion: reduce) {
  /* A still streak that fades, a still number: nothing flies. */
  .ring-beam line { animation: none; stroke-dashoffset: 0; }
  .ring-beam-hit { animation: none; }
  .ring-hit-num { animation: ring-num-still 1.2s linear var(--d, 0ms) both; }
  .boss-mate.mate-in, .last-push .ring-floor { animation: none; }
  .boss-you-bar > i, .boss-mate-tag > i, .ring-floor { transition: none; }
}
@keyframes ring-num-still { 0% { opacity: 0; } 10%, 80% { opacity: 1; } 100% { opacity: 0; } }