/* =====================================================================
   Remote Raids — mockup component layer (snk-rr-*)
   Token-driven: every color uses var(--snk-*) from snk-theme.css so the
   whole thing themes automatically in light & dark. This is the proposed
   new component family; in production it would live in snk-remote-raids.css.
   ===================================================================== */

:root{
  --rr-live:#e0392b;        /* live / now */
  --rr-live-soft:#ff5b4c;
  --rr-ok:var(--snk-success);
  /* amber text for gold-brand tints (invite tags, gift badges, badge icons).
     Light: dark amber for AA contrast on the pale-gold brand surface.
     Dark: bright amber to read on the dark-surface brand mix. */
  --rr-amber:#8a6a0d;
  /* violet "veteran" trust accent (no semantic --snk-* purple exists) */
  --rr-violet:#7c3aed;
  /* reputation-star gold */
  --rr-star:#e8a90c;
  /* compact radii — intentional smaller variants vs --snk-radius (18px) */
  --rr-r-sm:10px;           /* inputs, small chips, pips */
  --rr-r-md:12px;           /* tiles, slots, counters */
  --rr-r-lg:14px;           /* cards, lobby rows, host strips */
  /* sticky offsets so RR sub-headers clear the fixed floating chrome.
     Top bar = .snk-nav-wrap (fixed, ~.75rem float + ~52px bar ≈ 64px).
     Bottom = .snk-nav-bottom (mobile, ~44px tall + .7rem float + safe area). */
  --rr-topgap:4.25rem;      /* desktop: clears the floating top bar + a little air */
  --rr-botgap:calc(3.6rem + env(safe-area-inset-bottom)); /* mobile bottom-tab clearance */
}
html[data-bs-theme=dark]{ --rr-live:#ff6f61; --rr-live-soft:#ff8a7e; --rr-amber:#f0c34a; --rr-violet:#a78bfa; --rr-star:#f5cf6d; }

.rr-shell{max-width:1140px;margin-inline:auto;padding:1.1rem 1rem 6rem;}
.rr-shell.rr-narrow{max-width:900px;}

/* ---------- icon discipline ----------
   Lucide replaces <i data-lucide> with an <svg> that, unsized, defaults to
   ~24px and can blow out inline text. Baseline every standalone RR icon to
   ~1rem. Wrapped in :where() so it carries ZERO specificity — every explicit
   component rule below (.rr-empty i 2rem, .rr-hero h1 i 1.4rem, framed .ic/.ico)
   still wins and can size its icon UP without an !important arms race. */
:where(.rr-shell,[class^="rr-"],[class*=" rr-"]) :where(i[data-lucide],svg.lucide){width:1rem;height:1rem}

/* ---------- status hero ---------- */
.rr-hero{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;justify-content:space-between;
  padding:1.15rem 1.35rem;border-radius:var(--snk-radius);border:1px solid var(--snk-border);
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb,var(--snk-brand) 22%,transparent), transparent 55%),
    linear-gradient(135deg, color-mix(in srgb,var(--snk-accent) 16%,var(--snk-surface)), var(--snk-surface));}
.rr-hero-l{min-width:0}
.rr-hero h1{font-size:1.6rem;font-weight:800;letter-spacing:-.025em;margin:0;display:flex;align-items:center;gap:.55rem;color:var(--snk-text)}
.rr-hero h1 i{width:1.4rem;height:1.4rem;color:var(--snk-accent)}
.rr-hero .rr-sub{color:var(--snk-ink-600);font-size:.92rem;margin-top:.25rem;max-width:46ch}
.rr-livecount{display:flex;gap:1.4rem;align-items:center}
.rr-livecount .grp{text-align:center}
.rr-livecount .n{font-size:1.7rem;font-weight:800;line-height:1;color:var(--snk-text);font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:.4rem;justify-content:center}
.rr-livecount .l{font-size:.66rem;text-transform:uppercase;letter-spacing:.07em;color:var(--snk-text-muted);margin-top:.3rem;font-weight:700}
.rr-livedot{width:.62rem;height:.62rem;border-radius:50%;background:var(--rr-live);animation:rrpulse 1.8s infinite}
@keyframes rrpulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--rr-live) 55%,transparent)}70%{box-shadow:0 0 0 .55rem transparent}100%{box-shadow:0 0 0 0 transparent}}

/* sign-in banner (visitor) */
.rr-guestbar{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;justify-content:space-between;margin-top:.9rem;
  padding:.7rem 1rem;border-radius:var(--rr-r-lg);border:1px dashed var(--snk-border-strong);
  background:color-mix(in srgb,var(--snk-brand) 14%,var(--snk-surface));color:var(--snk-ink-700);font-weight:600;font-size:.9rem}
.rr-guestbar i{color:var(--snk-warning)}

/* ---------- filter bar ---------- */
.rr-filter{position:sticky;top:var(--rr-topgap);z-index:5;display:flex;gap:.45rem;flex-wrap:wrap;align-items:center;margin:1.05rem 0;
  padding:.5rem .55rem;border-radius:999px;border:1px solid var(--snk-border);
  background:color-mix(in srgb,var(--snk-surface) 85%,transparent);backdrop-filter:blur(10px)}
.rr-seg{display:inline-flex;background:var(--snk-surface-3);border-radius:999px;padding:.2rem;border:1px solid var(--snk-hairline)}
.rr-seg button,.rr-seg a{border:0;background:none;font-weight:700;font-size:.84rem;padding:.34rem .85rem;border-radius:999px;color:var(--snk-ink-600);cursor:pointer;text-decoration:none;display:inline-block}
.rr-seg button.on,.rr-seg a.on{background:var(--snk-accent);color:#fff;box-shadow:0 2px 8px color-mix(in srgb,var(--snk-accent) 40%,transparent)}
.rr-chip{border:1px solid var(--snk-border-strong);background:var(--snk-surface);border-radius:999px;padding:.36rem .72rem;font-size:.8rem;font-weight:600;color:var(--snk-ink-700);display:inline-flex;gap:.32rem;align-items:center;cursor:pointer}
.rr-chip i{width:.95rem;height:.95rem}
.rr-chip.on{background:color-mix(in srgb,var(--snk-accent) 14%,var(--snk-surface));border-color:var(--snk-accent);color:var(--snk-accent)}
.rr-filter .rr-search{margin-left:auto;display:flex;align-items:center;gap:.4rem;color:var(--snk-text-muted);font-size:.85rem;padding:.34rem .7rem;border:1px solid var(--snk-hairline);border-radius:999px;background:var(--snk-surface)}
.rr-filter .rr-search input{border:0;background:none;outline:none;font:inherit;color:var(--snk-text);min-width:8rem;width:9rem}
.rr-filter .rr-search input::placeholder{color:var(--snk-text-muted)}
@media(max-width:560px){.rr-filter{flex-wrap:wrap}.rr-filter .rr-search{margin-left:0;width:100%}.rr-filter .rr-search input{width:100%}}

/* ---------- section heads ---------- */
.rr-sec{display:flex;align-items:center;gap:.5rem;margin:1.5rem 0 .8rem;font-weight:800;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--snk-ink-600)}
.rr-sec::before{content:"";width:.32rem;height:1.05rem;border-radius:3px;background:var(--snk-accent)}
.rr-sec .cnt{margin-left:auto;font-weight:700;color:var(--snk-text-muted);text-transform:none;letter-spacing:0}

/* ---------- boss grid ---------- */
.rr-bossgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:.85rem}
.rr-boss{position:relative;border:1px solid var(--snk-border);border-radius:var(--rr-r-lg);background:var(--snk-surface);text-decoration:none;color:inherit;
  padding:.85rem .7rem .75rem;text-align:center;overflow:hidden;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,border-color .12s}
.rr-boss,.rr-boss *{text-decoration:none}
.rr-boss:hover{transform:translateY(-3px);box-shadow:0 12px 26px var(--snk-shadow);border-color:color-mix(in srgb,var(--type,var(--snk-accent)) 50%,var(--snk-border))}
.rr-boss::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--type,var(--snk-accent))}
.rr-boss .tier{position:absolute;top:.55rem;left:.55rem;font-size:.62rem;font-weight:800;letter-spacing:.02em;
  background:var(--type,var(--snk-accent));color:#fff;border-radius:7px;padding:.12rem .38rem;text-shadow:0 1px 1px rgba(0,0,0,.25)}
.rr-boss .shy{position:absolute;top:.5rem;right:.5rem;width:19px;height:19px}
.rr-boss .sprite{width:88px;height:88px;object-fit:contain;margin:.5rem auto .15rem;filter:drop-shadow(0 4px 6px rgba(0,0,0,.18))}
.rr-boss .nm{font-weight:800;font-size:.9rem;line-height:1.12;color:var(--snk-text)}
.rr-boss .types{display:flex;gap:.2rem;justify-content:center;margin:.3rem 0 .15rem}
.rr-boss .types img{width:16px;height:16px}
.rr-boss .meta{display:flex;justify-content:center;gap:.55rem;font-size:.76rem;color:var(--snk-text-muted);margin-top:.4rem;font-weight:700}
.rr-boss .meta .live{color:var(--rr-live);display:inline-flex;align-items:center;gap:.18rem}
.rr-boss .meta .wait{display:inline-flex;align-items:center;gap:.18rem}
.rr-boss .meta i{width:.85rem;height:.85rem}
.rr-boss.is-empty{opacity:.78}
.rr-boss .cta{margin-top:.55rem;font-size:.74rem;font-weight:800;color:var(--snk-accent)}

/* ---------- trainer chip + avatar ---------- */
.rr-av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;font-size:.85rem;flex:0 0 auto;box-shadow:inset 0 0 0 2px rgba(255,255,255,.25)}
.rr-av.lg{width:54px;height:54px;font-size:1.2rem}
.team-mystic{background:linear-gradient(135deg,#1b6ec2,#2aa5e6)}
.team-valor{background:linear-gradient(135deg,#d23b3b,#f0683f)}
.team-instinct{background:linear-gradient(135deg,#e0a800,#f5d042)}
.team-none{background:linear-gradient(135deg,#64748b,#94a3b8)}
.rr-trainer{display:flex;align-items:center;gap:.6rem;min-width:0}
.rr-trainer .who{min-width:0}
.rr-trainer .who b{display:block;font-weight:800;font-size:.95rem;color:var(--snk-text);line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rr-trainer .who .sub{font-size:.76rem;color:var(--snk-text-muted);display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;margin-top:.12rem}

/* rep + trust */
.rr-rep{display:inline-flex;align-items:center;gap:.18rem;font-weight:800;color:var(--snk-ink-700);font-size:.8rem;font-variant-numeric:tabular-nums}
.rr-rep .s{color:var(--rr-star);font-size:.95rem;line-height:1}
html[data-bs-theme=dark] .rr-rep .s{color:var(--rr-star)}
.rr-trust{font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;border-radius:6px;padding:.08rem .36rem}
.rr-trust.veteran{background:color-mix(in srgb,var(--rr-violet) 18%,var(--snk-surface));color:var(--rr-violet)}
.rr-trust.trusted{background:color-mix(in srgb,var(--snk-success) 18%,var(--snk-surface));color:var(--snk-success)}
.rr-trust.new{background:var(--snk-surface-3);color:var(--snk-ink-500)}
html[data-bs-theme=dark] .rr-trust.veteran{color:#c4b5fd;background:color-mix(in srgb,var(--rr-violet) 24%,var(--snk-surface))}
html[data-bs-theme=dark] .rr-trust.trusted{color:#86efac}

/* presence dot */
.rr-pres{width:.6rem;height:.6rem;border-radius:50%;flex:0 0 auto}
.rr-pres.on{background:var(--snk-success);box-shadow:0 0 0 3px color-mix(in srgb,var(--snk-success) 22%,transparent)}
.rr-pres.away{background:var(--snk-warning)}
.rr-pres.off{background:var(--snk-ink-300)}

/* ---------- lobby cards (list on boss page) ---------- */
.rr-lobbies{display:flex;flex-direction:column;gap:.7rem}
/* table-like grid: every row aligns column-for-column, equal height */
.rr-lobby{display:grid;align-items:center;column-gap:1.1rem;row-gap:.55rem;
  grid-template-columns:minmax(0,1fr) 104px 124px 82px 116px;
  grid-template-areas:"host boost slots timer btn";
  border:1px solid var(--snk-border);border-radius:var(--rr-r-lg);background:var(--snk-surface);
  padding:.85rem 1.1rem;transition:border-color .12s,box-shadow .12s}
.rr-lobby:hover{border-color:color-mix(in srgb,var(--snk-accent) 45%,var(--snk-border));box-shadow:0 6px 16px var(--snk-shadow)}
.rr-lobby-host{grid-area:host;min-width:0}
.rr-cell-boost{grid-area:boost}
.rr-cell-slots{grid-area:slots}
.rr-cell-timer{grid-area:timer}
.rr-lobby .rr-btn{grid-area:btn;width:100%}
.rr-slots-mini{display:flex;gap:.25rem;align-items:center}
@media(max-width:640px){
  .rr-lobby{grid-template-columns:auto 1fr auto;grid-template-areas:"host host host" "boost slots timer" "btn btn btn";row-gap:.75rem}
  .rr-cell-slots{justify-self:center}
  .rr-cell-timer{justify-self:end}
}
.rr-slots-mini .pip{width:.7rem;height:.7rem;border-radius:50%;background:var(--snk-success)}
.rr-slots-mini .pip.free{background:var(--snk-surface-3);box-shadow:inset 0 0 0 1.5px var(--snk-border-strong)}
.rr-slots-mini .lab{font-size:.78rem;color:var(--snk-text-muted);font-weight:700;margin-left:.35rem}
.rr-cd{display:inline-flex;align-items:center;gap:.3rem;font-weight:800;font-variant-numeric:tabular-nums;color:var(--snk-ink-700);font-size:.9rem}
.rr-cd i{width:.95rem;height:.95rem;color:var(--snk-text-muted)}
.rr-cd.low{color:var(--rr-live)}
.rr-wb{display:inline-flex;align-items:center;gap:.25rem;font-size:.76rem;font-weight:700;color:var(--snk-warning)}
html[data-bs-theme=dark] .rr-wb{color:var(--snk-warning)}
.rr-wb i{width:.95rem;height:.95rem}

/* buttons */
.rr-btn{border:0;border-radius:var(--rr-r-md);padding:.6rem 1.05rem;font-weight:800;font-size:.9rem;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;justify-content:center}
.rr-btn i{width:1rem;height:1rem}
.rr-btn-primary{background:var(--snk-accent);color:#fff;box-shadow:0 3px 10px color-mix(in srgb,var(--snk-accent) 35%,transparent)}
.rr-btn-primary:hover{background:var(--snk-accent-2)}
.rr-btn-live{background:var(--rr-live);color:#fff;box-shadow:0 3px 12px color-mix(in srgb,var(--rr-live) 38%,transparent)}
.rr-btn-ghost{background:var(--snk-surface);color:var(--snk-ink-700);border:1px solid var(--snk-border-strong)}
.rr-btn-ghost:hover{border-color:var(--snk-accent);color:var(--snk-accent)}
.rr-btn-block{width:100%}
.rr-btn-lg{padding:.8rem 1.3rem;font-size:1rem}

/* ---------- boss detail header ---------- */
.rr-bosshead{display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap;border:1px solid var(--snk-border);border-radius:var(--snk-radius);
  padding:1.2rem 1.35rem;background:linear-gradient(135deg,color-mix(in srgb,var(--type,var(--snk-accent)) 18%,var(--snk-surface)),var(--snk-surface))}
.rr-bosshead .sprite{width:120px;height:120px;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.22))}
.rr-bosshead h1{font-size:1.7rem;font-weight:800;letter-spacing:-.02em;margin:0;color:var(--snk-text);display:flex;align-items:center;gap:.5rem}
.rr-bosshead .facts{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.55rem}
.rr-fact{display:inline-flex;align-items:center;gap:.3rem;font-size:.82rem;font-weight:700;color:var(--snk-ink-700);background:var(--snk-surface);border:1px solid var(--snk-border);border-radius:999px;padding:.28rem .65rem}
.rr-fact img{width:16px;height:16px}
.rr-fact i{width:.95rem;height:.95rem;color:var(--snk-text-muted)}

/* counters panel */
.rr-counters{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:.55rem}
.rr-counter{border:1px solid var(--snk-border);border-radius:var(--rr-r-md);background:var(--snk-surface);padding:.5rem;text-align:center}
.rr-counter img{width:52px;height:52px;object-fit:contain}
.rr-counter .nm{font-size:.74rem;font-weight:700;color:var(--snk-text);line-height:1.05;margin-top:.1rem}
.rr-counter .mv{font-size:.66rem;color:var(--snk-text-muted);margin-top:.15rem;line-height:1.1}

/* ---------- lobby room ---------- */
.rr-room{border:1px solid var(--snk-border);border-radius:var(--snk-radius);background:var(--snk-surface);overflow:hidden}
.rr-room-head{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;padding:1rem 1.2rem;
  background:linear-gradient(135deg,color-mix(in srgb,var(--type,var(--snk-accent)) 22%,var(--snk-surface)),var(--snk-surface));
  border-bottom:1px solid var(--snk-border)}
/* opt-in sticky sub-header (e.g. a lobby boss header that should pin while the
   slot list scrolls). Pins BELOW the fixed top bar (never hides behind it). */
.rr-stick-top,.rr-room-head.rr-sticky{position:sticky;top:var(--rr-topgap);z-index:4}
/* the room overflow:hidden clips children; sticky needs a visible-overflow host,
   so when pinning the head, allow the room to let it stick. */
.rr-room.rr-room-sticky{overflow:visible}
.rr-room-head .sprite{width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(0,0,0,.2))}
.rr-room-head .ttl{flex:1 1 auto;min-width:0}
.rr-room-head h1{font-size:1.3rem;font-weight:800;margin:0;color:var(--snk-text);display:flex;align-items:center;gap:.4rem;letter-spacing:-.02em}
.rr-room-head .ttl .sub{font-size:.8rem;color:var(--snk-ink-600);font-weight:600;margin-top:.15rem;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.rr-statuspill{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;border-radius:999px;padding:.25rem .6rem;display:inline-flex;align-items:center;gap:.3rem}
.rr-statuspill.open{background:color-mix(in srgb,var(--snk-success) 18%,var(--snk-surface));color:var(--snk-success)}
.rr-statuspill.full{background:color-mix(in srgb,var(--snk-warning) 20%,var(--snk-surface));color:color-mix(in srgb,var(--snk-warning) 72%,#3a2400)}
html[data-bs-theme=dark] .rr-statuspill.open{color:#86efac}
html[data-bs-theme=dark] .rr-statuspill.full{color:var(--snk-warning)}

.rr-room-body{padding:1.1rem 1.2rem}
.rr-steps{display:flex;gap:.5rem;flex-wrap:wrap;background:color-mix(in srgb,var(--snk-accent) 8%,var(--snk-surface));
  border:1px solid color-mix(in srgb,var(--snk-accent) 22%,var(--snk-border));border-radius:var(--rr-r-md);padding:.7rem .85rem;margin-bottom:1rem}
.rr-step{display:flex;align-items:center;gap:.4rem;font-size:.82rem;font-weight:700;color:var(--snk-ink-700)}
.rr-step .num{width:1.25rem;height:1.25rem;border-radius:50%;background:var(--snk-accent);color:#fff;display:inline-flex;align-items:center;justify-content:center;line-height:1;font-size:.72rem;font-weight:800;flex:0 0 auto}
.rr-step.done{color:var(--snk-success)}
.rr-step.done .num{background:var(--snk-success)}
.rr-step .arrow{color:var(--snk-text-muted)}

/* host strip + friend code */
.rr-host{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;border:1px solid var(--snk-border);border-radius:var(--rr-r-lg);
  background:var(--snk-surface-2);padding:.85rem 1rem;margin-bottom:1rem}
.rr-host .hostlbl{font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--snk-text-muted)}
.rr-fc{display:flex;align-items:center;gap:.5rem;margin-left:auto;background:var(--snk-surface-3);border:1px dashed var(--snk-border-strong);
  border-radius:var(--rr-r-sm);padding:.45rem .7rem;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.04em;color:var(--snk-text);font-size:1rem}
.rr-fc button{border:0;background:var(--snk-accent);color:#fff;border-radius:8px;width:1.9rem;height:1.9rem;display:grid;place-items:center;cursor:pointer}
.rr-fc button i{width:1rem;height:1rem}
.rr-fc-note{flex-basis:100%;font-size:.74rem;color:var(--snk-text-muted);margin-top:.1rem}

/* slots */
.rr-slotlist{display:flex;flex-direction:column;gap:.55rem}
.rr-slot{display:flex;align-items:center;gap:.7rem;border:1px solid var(--snk-border);border-radius:var(--rr-r-md);padding:.6rem .75rem;background:var(--snk-surface)}
.rr-slot.you{border-color:var(--snk-accent);box-shadow:0 0 0 1px var(--snk-accent) inset;background:color-mix(in srgb,var(--snk-accent) 6%,var(--snk-surface))}
.rr-slot.free{border-style:dashed;background:transparent;color:var(--snk-text-muted);justify-content:center;font-weight:700;font-size:.85rem;padding:.7rem}
.rr-slot .idx{width:1.3rem;text-align:center;font-weight:800;color:var(--snk-text-muted);font-size:.8rem}
.rr-slot .sig{margin-left:auto;display:flex;gap:.35rem;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.rr-sigtag{font-size:.7rem;font-weight:800;border-radius:7px;padding:.16rem .45rem;background:var(--snk-surface-3);color:var(--snk-ink-600);display:inline-flex;align-items:center;gap:.25rem}
.rr-sigtag.added{background:color-mix(in srgb,var(--snk-accent) 15%,var(--snk-surface));color:var(--snk-accent)}
.rr-sigtag.ready{background:color-mix(in srgb,var(--snk-success) 16%,var(--snk-surface));color:var(--snk-success)}
.rr-sigtag.invite{background:color-mix(in srgb,var(--snk-brand) 30%,var(--snk-surface));color:var(--rr-amber)}
html[data-bs-theme=dark] .rr-sigtag.ready{color:#86efac}
html[data-bs-theme=dark] .rr-sigtag.invite{color:var(--rr-amber)}

/* my-signal controls */
.rr-signals{display:flex;gap:.5rem;flex-wrap:wrap;margin-left:auto}
.rr-sigbtn{border:1px solid var(--snk-border-strong);background:var(--snk-surface);border-radius:var(--rr-r-sm);padding:.45rem .75rem;font-weight:800;font-size:.82rem;cursor:pointer;display:inline-flex;gap:.35rem;align-items:center;color:var(--snk-ink-700)}
.rr-sigbtn i{width:1rem;height:1rem}
.rr-sigbtn.on{background:var(--snk-success);color:#fff;border-color:var(--snk-success)}
.rr-sigbtn.next{border-color:var(--snk-accent);color:var(--snk-accent)}

.rr-queue{margin-top:1rem;border:1px dashed var(--snk-border-strong);border-radius:var(--rr-r-md);padding:.7rem .9rem;background:var(--snk-surface-2);
  display:flex;align-items:center;gap:.6rem;font-size:.85rem;font-weight:700;color:var(--snk-ink-600)}
.rr-queue i{color:var(--snk-text-muted)}

/* sticky action bar (mobile esp.) */
.rr-actionbar{display:flex;gap:.6rem;margin-top:1.1rem}
.rr-secondary{display:flex;gap:.9rem;margin-top:.9rem;font-size:.8rem;color:var(--snk-text-muted)}
.rr-secondary a{color:var(--snk-text-muted);text-decoration:none;display:inline-flex;gap:.25rem;align-items:center;font-weight:700}
.rr-secondary a:hover{color:var(--snk-danger)}

/* ---------- host wizard ---------- */
.rr-wizard{border:1px solid var(--snk-border);border-radius:var(--snk-radius);background:var(--snk-surface);overflow:hidden}
.rr-wiz-steps{display:flex;border-bottom:1px solid var(--snk-border);background:var(--snk-surface-2)}
.rr-wiz-steps .s{flex:1;padding:.8rem 1rem;font-weight:800;font-size:.85rem;color:var(--snk-text-muted);display:flex;align-items:center;gap:.45rem;justify-content:center}
.rr-wiz-steps .s.on{color:var(--snk-accent);box-shadow:inset 0 -3px 0 var(--snk-accent)}
.rr-wiz-steps .s .num{width:1.45rem;height:1.45rem;border-radius:50%;background:var(--snk-surface-3);color:var(--snk-text-muted);display:inline-flex;align-items:center;justify-content:center;line-height:1;font-size:.78rem;font-weight:800;flex:0 0 auto}
.rr-wiz-steps .s.on .num{background:var(--snk-accent);color:#fff}
.rr-wiz-steps .s.done .num{background:var(--snk-success);color:#fff}
.rr-wiz-steps .s .num{width:1.3rem;height:1.3rem;border-radius:50%;background:var(--snk-surface-3);display:grid;place-items:center;font-size:.74rem}
.rr-wiz-steps .s.on .num{background:var(--snk-accent);color:#fff}
.rr-wiz-body{padding:1.2rem 1.35rem}
.rr-pickgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:.55rem;max-height:340px;overflow:auto;padding:.15rem}
.rr-pick{border:1px solid var(--snk-border);border-radius:var(--rr-r-md);background:var(--snk-surface);padding:.45rem .35rem;text-align:center;cursor:pointer;position:relative}
.rr-pick.sel{border-color:var(--snk-accent);box-shadow:0 0 0 2px var(--snk-accent) inset;background:color-mix(in srgb,var(--snk-accent) 8%,var(--snk-surface))}
.rr-pick img{width:54px;height:54px;object-fit:contain}
.rr-pick .nm{font-size:.7rem;font-weight:700;color:var(--snk-text);line-height:1.05}
.rr-pick .tier{font-size:.6rem;font-weight:800;color:var(--snk-text-muted)}
.rr-field{margin:1rem 0}
.rr-field label{display:block;font-weight:800;font-size:.84rem;color:var(--snk-ink-700);margin-bottom:.4rem}
.rr-field .hint{font-weight:600;color:var(--snk-text-muted);font-size:.76rem}
.rr-slotsel{display:flex;gap:.4rem}
.rr-slotsel button{flex:1;border:1px solid var(--snk-border-strong);background:var(--snk-surface);border-radius:var(--rr-r-sm);padding:.6rem;font-weight:800;cursor:pointer;color:var(--snk-ink-700);font-size:1.05rem}
.rr-slotsel button.on{background:var(--snk-accent);color:#fff;border-color:var(--snk-accent)}
.rr-toggle{display:flex;align-items:center;gap:.6rem;padding:.7rem .9rem;border:1px solid var(--snk-border);border-radius:var(--rr-r-md);background:var(--snk-surface-2);font-weight:700;color:var(--snk-ink-700)}
.rr-toggle .sw{margin-left:auto;width:2.6rem;height:1.5rem;border-radius:999px;background:var(--snk-accent);position:relative}
.rr-toggle .sw::after{content:"";position:absolute;top:.15rem;right:.15rem;width:1.2rem;height:1.2rem;border-radius:50%;background:#fff}
.rr-input{width:100%;border:1px solid var(--snk-border-strong);border-radius:var(--rr-r-sm);padding:.6rem .8rem;background:var(--snk-surface);color:var(--snk-text);font-size:.92rem;font-family:inherit}

/* empty state */
.rr-empty{text-align:center;padding:2rem 1rem;border:1px dashed var(--snk-border-strong);border-radius:var(--rr-r-lg);background:var(--snk-surface-2);color:var(--snk-ink-600)}
.rr-empty i{width:2rem;height:2rem;color:var(--snk-text-muted)}
.rr-empty h3{font-weight:800;margin:.5rem 0 .3rem;color:var(--snk-text);font-size:1.05rem}

.rr-grid2{display:grid;grid-template-columns:1.6fr 1fr;gap:1.1rem;align-items:start}
@media(max-width:860px){.rr-grid2{grid-template-columns:1fr}}

/* ---------- mobile nav-offset (clears fixed top bar + floating bottom tabs) ----------
   The bottom tab bar (.snk-nav-bottom) shows ≤991.98px, so clearance must apply
   across the whole mobile range — not just ≤640px. */
@media(max-width:991.98px){
  /* slimmer top bar on mobile (brand + search only) -> smaller sticky offset */
  :root{--rr-topgap:3.5rem}
  .rr-shell{padding-bottom:var(--rr-botgap)}
  /* sticky action bar must float ABOVE the bottom tab bar, not under it */
  .rr-actionbar{position:sticky;bottom:var(--rr-botgap);z-index:6}
}

@media(max-width:560px){
  .rr-hero{flex-direction:column;align-items:flex-start}
  .rr-bossgrid{grid-template-columns:repeat(2,1fr);gap:.6rem}
  .rr-boss .sprite{width:74px;height:74px}
  .rr-room-head h1{font-size:1.12rem}
  .rr-fc{margin-left:0;flex-basis:100%;justify-content:space-between}
  .rr-signals{margin-left:0;width:100%}
  .rr-sigbtn{flex:1;justify-content:center}
}

/* ===================== profile / dashboard / trades / notifications ===================== */
/* profile hero */
.rr-phero{position:relative;border-radius:var(--snk-radius);overflow:hidden;border:1px solid var(--snk-border);padding:1.6rem 1.6rem;color:#fff}
.rr-phero.t-instinct{background:linear-gradient(135deg,#d39a00,#f5d042)}
.rr-phero.t-mystic{background:linear-gradient(135deg,#1b6ec2,#33b6ef)}
.rr-phero.t-valor{background:linear-gradient(135deg,#c92f2f,#f0683f)}
.rr-phero .top{display:flex;gap:1.1rem;align-items:center;flex-wrap:wrap}
.rr-phero h1{font-size:1.75rem;font-weight:800;margin:0;letter-spacing:-.02em}
.rr-phero .meta{opacity:.96;font-weight:600;margin-top:.25rem;display:flex;gap:.4rem;flex-wrap:wrap;font-size:.92rem}
.rr-pchips{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}
/* glassy chips on the colored team hero. A dark translucent base + text-shadow
   keeps white text AA-legible on the bright instinct-gold gradient too. */
.rr-pchip{background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.45);border-radius:999px;padding:.36rem .72rem;font-size:.82rem;font-weight:700;display:inline-flex;gap:.35rem;align-items:center;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4);backdrop-filter:blur(2px)}
.rr-pchip i{width:.95rem;height:.95rem}
.rr-pfc{margin-left:auto;background:rgba(0,0,0,.32);border:1px dashed rgba(255,255,255,.6);border-radius:var(--rr-r-md);padding:.5rem .8rem;font-weight:800;letter-spacing:.04em;display:flex;gap:.6rem;align-items:center;color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.rr-pfc button{border:0;background:#fff;color:var(--snk-ink-800);border-radius:7px;width:1.85rem;height:1.85rem;display:grid;place-items:center;cursor:pointer}
.rr-pfc button i{width:1rem;height:1rem}

/* badges */
.rr-badges{display:flex;gap:.55rem;flex-wrap:wrap}
.rr-badge{display:flex;gap:.5rem;align-items:center;border:1px solid var(--snk-border);background:var(--snk-surface);border-radius:var(--rr-r-md);padding:.5rem .75rem;font-weight:700;font-size:.83rem;color:var(--snk-ink-700)}
.rr-badge .ic{width:2rem;height:2rem;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,var(--snk-brand) 32%,var(--snk-surface));color:var(--rr-amber)}
.rr-badge .ic i{width:1.1rem;height:1.1rem}
.rr-badge.locked{opacity:.45}
.rr-badge.locked .ic{background:var(--snk-surface-3);color:var(--snk-text-muted)}

/* stats */
.rr-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem}
.rr-stat{border:1px solid var(--snk-border);border-radius:var(--rr-r-md);background:var(--snk-surface);padding:.9rem;text-align:center}
.rr-stat .n{font-size:1.55rem;font-weight:800;color:var(--snk-text);line-height:1;font-variant-numeric:tabular-nums}
.rr-stat .l{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--snk-text-muted);margin-top:.35rem;font-weight:700}

/* mini sprite chips + trade columns */
.rr-tradecols{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.rr-spritewrap{display:flex;flex-wrap:wrap;gap:.4rem}
.rr-sprite-mini{width:50px;height:50px;border:1px solid var(--snk-border);border-radius:var(--rr-r-sm);background:var(--snk-surface);padding:3px;position:relative}
.rr-sprite-mini img{width:100%;height:100%;object-fit:contain}
.rr-sprite-mini .shy{position:absolute;top:0;right:0;width:14px;height:14px}
.rr-more{width:50px;height:50px;border:1px dashed var(--snk-border-strong);border-radius:var(--rr-r-sm);display:grid;place-items:center;font-weight:800;font-size:.78rem;color:var(--snk-text-muted)}

/* trade match cards */
.rr-match{border:1px solid var(--snk-border);border-radius:var(--rr-r-lg);background:var(--snk-surface);padding:1rem 1.1rem}
.rr-match-head{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.rr-match-score{margin-left:auto;display:inline-flex;align-items:center;gap:.3rem;font-weight:800;color:var(--snk-accent);background:color-mix(in srgb,var(--snk-accent) 12%,var(--snk-surface));border-radius:999px;padding:.28rem .65rem;font-size:.82rem}
.rr-match-score i{width:.9rem;height:.9rem}
.rr-twoway{font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--snk-success);background:color-mix(in srgb,var(--snk-success) 16%,var(--snk-surface));border-radius:6px;padding:.14rem .45rem}
html[data-bs-theme=dark] .rr-twoway{color:#86efac}
.rr-match-row{margin-top:.75rem}
.rr-match-row .lbl{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--snk-text-muted);margin-bottom:.4rem;display:flex;align-items:center;gap:.3rem}
.rr-match-row .lbl i{width:.9rem;height:.9rem}

/* dashboard */
.rr-dash{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.rr-dashcard{border:1px solid var(--snk-border);border-radius:var(--rr-r-lg);background:var(--snk-surface);padding:1.1rem 1.2rem}
.rr-dashcard.span2{grid-column:1 / -1}
.rr-dashcard h3{font-size:.96rem;font-weight:800;margin:0 0 .85rem;display:flex;align-items:center;gap:.45rem;color:var(--snk-text)}
.rr-dashcard h3 i{width:1.05rem;height:1.05rem;color:var(--snk-accent)}
.rr-dashcard h3 .cnt{margin-left:auto;font-size:.78rem;color:var(--snk-text-muted);font-weight:700}
.rr-quick{display:flex;gap:.8rem;flex-wrap:wrap}
.rr-quick .rr-btn{flex:1;min-width:150px}
.rr-meter{height:.65rem;border-radius:999px;background:var(--snk-surface-3);overflow:hidden;margin-top:.55rem}
.rr-meter span{display:block;height:100%;background:linear-gradient(90deg,var(--snk-accent),var(--snk-accent-2))}
.rr-mini-list{display:flex;flex-direction:column;gap:.55rem}
.rr-mini-item{display:flex;align-items:center;gap:.6rem;font-size:.88rem;color:var(--snk-ink-700)}
.rr-mini-item img.sp{width:38px;height:38px;object-fit:contain}
.rr-mini-item .rr-btn{margin-left:auto;padding:.4rem .8rem;font-size:.82rem}

/* notifications */
.rr-notif{display:flex;gap:.85rem;align-items:flex-start;padding:.85rem .6rem;border-radius:var(--rr-r-sm);border-bottom:1px solid var(--snk-hairline)}
.rr-notif.unread{background:color-mix(in srgb,var(--snk-accent) 6%,transparent)}
.rr-notif .ic{width:2.4rem;height:2.4rem;border-radius:var(--rr-r-md);display:grid;place-items:center;flex:0 0 auto;background:color-mix(in srgb,var(--snk-accent) 13%,var(--snk-surface));color:var(--snk-accent)}
.rr-notif .ic i{width:1.15rem;height:1.15rem}
.rr-notif .bd{flex:1;min-width:0}
.rr-notif .bd .tx b{font-weight:800;color:var(--snk-text)}
.rr-notif .bd .tx{color:var(--snk-ink-700);font-size:.9rem}
.rr-notif .bd .tm{font-size:.74rem;color:var(--snk-text-muted);margin-top:.2rem}
.rr-notif .dot{width:.55rem;height:.55rem;border-radius:50%;background:var(--rr-live);flex:0 0 auto;margin-top:.55rem}
.rr-prefrow{display:flex;align-items:center;gap:.8rem;padding:.75rem 0;border-bottom:1px solid var(--snk-hairline)}
.rr-prefrow .nm{font-weight:700;color:var(--snk-text);font-size:.9rem}
.rr-prefrow .nm .sub{display:block;font-weight:500;color:var(--snk-text-muted);font-size:.78rem}
.rr-prefrow .ch{margin-left:auto;display:flex;gap:.45rem}
.rr-ch{font-size:.74rem;font-weight:800;border-radius:8px;padding:.3rem .6rem;border:1px solid var(--snk-border-strong);color:var(--snk-text-muted);display:inline-flex;gap:.28rem;align-items:center;cursor:pointer}
.rr-ch i{width:.85rem;height:.85rem}
.rr-ch.on{background:var(--snk-accent);color:#fff;border-color:var(--snk-accent)}
.rr-ch.on.tg{background:#229ed9;border-color:#229ed9}
.rr-tg{display:flex;align-items:center;gap:.95rem;flex-wrap:wrap;border:1px solid color-mix(in srgb,#229ed9 35%,var(--snk-border));border-radius:var(--rr-r-md);background:color-mix(in srgb,#229ed9 10%,var(--snk-surface));padding:1rem 1.15rem;margin-bottom:1.3rem}
.rr-tg .tgic{width:2.7rem;height:2.7rem;border-radius:50%;background:#229ed9;color:#fff;display:grid;place-items:center;flex:0 0 auto}
.rr-tg .tgbd{flex:1;min-width:180px}
.rr-tg .tgbd b{font-weight:800;color:var(--snk-text)}
.rr-tg .tgbd span{display:block;color:var(--snk-text-muted);font-size:.85rem;margin-top:.1rem}
.rr-btn-tg{background:#229ed9;color:#fff}

@media(max-width:760px){.rr-dash{grid-template-columns:1fr}.rr-dashcard.span2{grid-column:auto}}
@media(max-width:560px){.rr-stats{grid-template-columns:repeat(2,1fr)}.rr-tradecols{grid-template-columns:1fr}.rr-pfc{margin-left:0;flex-basis:100%;justify-content:space-between}}

/* =====================================================================
   NEW component classes (v2). Page/JS rely on these names verbatim.
   Token-driven, light+dark, mobile-friendly.
   ===================================================================== */

/* ---------- sprite + overlay (mirrors snacknap-ui .snk-tile .pkmn-list-img
   .overlay treatment + home.css .glow-image red halo, scoped to rr) ---------- */
.rr-sprite{position:relative;display:inline-block;width:var(--rr-spr,72px);height:var(--rr-spr,72px);flex:0 0 auto;overflow:visible}
.rr-sprite>img{width:100%;height:100%;object-fit:contain;display:block;position:relative;z-index:1}
.rr-sprite .overlay{position:absolute;width:46%;height:46%;left:50%;top:50%;transform:translate(-50%,-50%);object-fit:contain;pointer-events:none;z-index:2}
.rr-sprite .shy{position:absolute;top:0;right:0;width:30%;height:30%;max-width:18px;max-height:18px;z-index:3}
/* Dynamax red-halo — identical to the site's home.css .glow-image used on events/max (no custom discs). */
.rr-sprite.glow-image::before{content:"";position:absolute;inset:-6px;border-radius:50%;background:radial-gradient(circle,rgba(226,59,59,.28),rgba(226,59,59,0) 70%);z-index:0}
/* Dynamax cloud above the sprite — the site's /assets/img/dynamax.png (as in the graphics engine). */
.rr-sprite .cloud{position:absolute;left:50%;top:-20%;transform:translateX(-50%);width:78%;height:auto;z-index:3;pointer-events:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}

/* ---------- live-now strip (Phase E) ---------- */
.rr-live{margin:1.1rem 0}
.rr-live-head{display:flex;align-items:center;gap:.5rem;margin-bottom:.7rem;font-weight:800;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--snk-ink-600)}
.rr-live-head .rr-livedot{margin-right:.05rem}
.rr-live-head .cnt{margin-left:auto;font-weight:700;color:var(--snk-text-muted);text-transform:none;letter-spacing:0}
/* desktop: responsive grid; mobile: horizontal snap-scroll row */
.rr-live-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.7rem}
.rr-livecard{display:flex;align-items:center;gap:.7rem;border:1px solid var(--snk-border);border-radius:var(--rr-r-lg);
  background:var(--snk-surface);padding:.7rem .8rem;text-decoration:none;color:inherit;min-width:0;
  border-left:3px solid var(--rr-live);transition:border-color .12s,box-shadow .12s,transform .12s}
.rr-livecard:hover{box-shadow:0 6px 16px var(--snk-shadow);transform:translateY(-2px)}
.rr-livecard .spr{width:48px;height:48px;flex:0 0 auto;display:grid;place-items:center}
.rr-livecard .spr img{width:100%;height:100%;object-fit:contain}
.rr-livecard .meta{min-width:0;flex:1;display:flex;flex-direction:column;gap:.12rem}
.rr-livecard .meta b{font-weight:800;font-size:.9rem;color:var(--snk-text);line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rr-livecard .meta span,.rr-livecard .meta .sub{font-size:.74rem;color:var(--snk-text-muted);font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rr-livecard .spr{width:54px;height:54px}
.rr-livecard .cd{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;gap:.25rem;font-weight:800;font-variant-numeric:tabular-nums;font-size:.84rem;color:var(--rr-live)}
.rr-livecard .cd i{width:.85rem;height:.85rem}

/* ---------- dynamic slot picker (Phase C) — variable button count, wraps ---------- */
.rr-slotsel{display:flex;gap:.4rem;flex-wrap:wrap}
.rr-slotsel button{flex:0 0 auto;width:2.7rem;height:2.7rem;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;line-height:1}
.rr-slotsel button:hover{border-color:var(--snk-accent);color:var(--snk-accent)}
.rr-slotsel button.on,.rr-slotsel button.on:hover{background:var(--snk-accent);color:#fff;border-color:var(--snk-accent)}
/* legible hover states (avoid inherited dark-on-dark) */
.rr-seg a:hover:not(.on),.rr-seg button:hover:not(.on){background:color-mix(in srgb,var(--snk-accent) 12%,transparent);color:var(--snk-text)}
.rr-pick:hover{border-color:var(--snk-accent);background:color-mix(in srgb,var(--snk-accent) 6%,var(--snk-surface))}
.rr-slotsel-note{margin-top:.45rem;font-size:.76rem;font-weight:600;color:var(--snk-text-muted);line-height:1.4;display:flex;gap:.3rem;align-items:flex-start}
.rr-slotsel-note i{width:.95rem;height:.95rem;flex:0 0 auto;margin-top:.1rem;color:var(--snk-text-muted)}
/* mobile-first refinements (≈95% of usage is mobile) */
@media(max-width:560px){
  .rr-wiz-steps .s{flex-direction:column;gap:.25rem;padding:.65rem .3rem;font-size:.74rem;text-align:center;justify-content:flex-start}
  .rr-slotsel{justify-content:center}
  .rr-live-row{grid-template-columns:1fr}
  .rr-timerset{flex-wrap:wrap}
}

/* ---------- large-lobby compact view (Phase C) ---------- */
.rr-slot-summary{display:inline-flex;align-items:baseline;gap:.35rem;font-weight:800;font-variant-numeric:tabular-nums;
  color:var(--snk-text);font-size:1.6rem;line-height:1}
.rr-slot-summary .cap{font-size:1rem;color:var(--snk-text-muted);font-weight:700}
.rr-slot-summary .lbl{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--snk-text-muted);align-self:center;margin-left:.35rem}
.rr-slot-groups{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.7rem}
.rr-slot-group{display:inline-flex;align-items:center;gap:.32rem;border:1px solid var(--snk-border);border-radius:999px;
  background:var(--snk-surface-2);padding:.3rem .6rem;font-size:.78rem;font-weight:800;color:var(--snk-ink-700);font-variant-numeric:tabular-nums}
.rr-slot-group .pip{width:.55rem;height:.55rem;border-radius:50%;background:var(--snk-success);flex:0 0 auto}
.rr-slot-group.full{border-color:color-mix(in srgb,var(--snk-success) 45%,var(--snk-border));background:color-mix(in srgb,var(--snk-success) 12%,var(--snk-surface));color:var(--snk-success)}
html[data-bs-theme=dark] .rr-slot-group.full{color:#86efac}
.rr-slot-group.empty{color:var(--snk-text-muted)}
.rr-slot-group.empty .pip{background:var(--snk-surface-3);box-shadow:inset 0 0 0 1.5px var(--snk-border-strong)}

/* ---------- battle countdown (Phase D) — distinct accent from lobby-TTL .rr-cd ---------- */
.rr-battlecd{display:inline-flex;align-items:center;gap:.4rem;font-weight:800;font-variant-numeric:tabular-nums;
  font-size:1.05rem;border-radius:999px;padding:.35rem .8rem;border:1px solid transparent;line-height:1}
.rr-battlecd i{width:1.05rem;height:1.05rem}
.rr-battlecd .lab{font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;opacity:.85}
/* "starts in" — accent/blue */
.rr-battlecd.starts{color:var(--snk-accent);background:color-mix(in srgb,var(--snk-accent) 12%,var(--snk-surface));border-color:color-mix(in srgb,var(--snk-accent) 30%,var(--snk-border))}
/* "ends in" — warning/red */
.rr-battlecd.ends{color:var(--snk-danger);background:color-mix(in srgb,var(--snk-danger) 12%,var(--snk-surface));border-color:color-mix(in srgb,var(--snk-danger) 30%,var(--snk-border))}
html[data-bs-theme=dark] .rr-battlecd.ends{color:var(--snk-danger)}
/* low/urgent state — pulse to draw attention regardless of starts/ends */
.rr-battlecd.low{color:var(--rr-live);background:color-mix(in srgb,var(--rr-live) 14%,var(--snk-surface));border-color:color-mix(in srgb,var(--rr-live) 38%,var(--snk-border));animation:rrpulse 1.6s infinite}

/* ---------- host timer inputs (Phase D) ---------- */
.rr-timerset{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.rr-timerset input{width:5.5rem;border:1px solid var(--snk-border-strong);border-radius:var(--rr-r-sm);
  padding:.5rem .65rem;background:var(--snk-surface);color:var(--snk-text);font-size:.95rem;font-weight:800;
  font-variant-numeric:tabular-nums;text-align:center;font-family:inherit}
.rr-timerset input:focus-visible{outline:2px solid var(--snk-accent);outline-offset:1px;border-color:var(--snk-accent)}
.rr-timerset .sep{font-weight:800;color:var(--snk-text-muted)}
.rr-timerset .unit{font-size:.78rem;font-weight:700;color:var(--snk-text-muted)}

/* ---------- OCR upload (Phase F) ---------- */
.rr-ocr{display:flex;flex-direction:column;gap:.7rem}
.rr-ocr-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;text-align:center;
  border:2px dashed var(--snk-border-strong);border-radius:var(--rr-r-lg);background:var(--snk-surface-2);
  padding:1.4rem 1rem;color:var(--snk-ink-600);font-weight:700;font-size:.88rem;cursor:pointer;transition:border-color .12s,background .12s}
.rr-ocr-drop:hover,.rr-ocr-drop.dragover{border-color:var(--snk-accent);background:color-mix(in srgb,var(--snk-accent) 7%,var(--snk-surface))}
.rr-ocr-drop i{width:1.6rem;height:1.6rem;color:var(--snk-accent)}
.rr-ocr-drop .hint{font-weight:600;font-size:.76rem;color:var(--snk-text-muted)}
.rr-ocr-preview{position:relative;display:block;width:96px;height:96px;border-radius:var(--rr-r-md);overflow:hidden;border:1px solid var(--snk-border);background:var(--snk-surface-3);flex:0 0 auto}
.rr-ocr-preview img{width:100%;height:100%;object-fit:cover;display:block}
.rr-ocr-fields{display:flex;flex-wrap:wrap;gap:.45rem}
.rr-ocr-chip{display:inline-flex;flex-direction:column;gap:.05rem;border:1px solid var(--snk-border);border-radius:var(--rr-r-sm);
  background:var(--snk-surface);padding:.35rem .65rem;min-width:0}
.rr-ocr-chip .k{font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--snk-text-muted)}
.rr-ocr-chip .v{font-size:.86rem;font-weight:800;color:var(--snk-text);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rr-ocr-chip.ok{border-color:color-mix(in srgb,var(--snk-success) 40%,var(--snk-border));background:color-mix(in srgb,var(--snk-success) 8%,var(--snk-surface))}
.rr-ocr-chip.warn{border-color:color-mix(in srgb,var(--snk-warning) 45%,var(--snk-border));background:color-mix(in srgb,var(--snk-warning) 10%,var(--snk-surface))}

/* ---------- new-component mobile breakpoints ---------- */
@media(max-width:640px){
  /* live strip becomes a horizontal snap-scroll rail */
  .rr-live-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    gap:.6rem;padding-bottom:.35rem;margin:0 -1rem;padding-inline:1rem}
  .rr-livecard{flex:0 0 78%;max-width:300px;scroll-snap-align:start}
  .rr-battlecd{font-size:.95rem;padding:.3rem .65rem}
  .rr-timerset input{width:4.75rem}
  .rr-ocr-drop{padding:1.1rem .8rem}
}