/* ============================================================
   Karooty — Friends & Presence system
   Shared brand styles. Anchored on the multiplayer green token set
   (matches Lobby / In-Game / Friends / Invite / Chat).

   FULLY SCOPED: every rule lives under `.kp-root` (the scoping root
   container) so nothing can leak onto a host page. The fixed,
   full-viewport overlay container `.kp-chrome` (also carries
   `.kp-root`) replaces the design's old `.screen` positioning root.
   ============================================================ */

.kp-root{
  /* The chrome must carry its OWN text colour. Every rule here is scoped under .kp-root so
     nothing leaks OUT — but without this the chrome leaked IN, inheriting `color` from the host
     page's body. Every shipped page happens to set `body{color:var(--text)}`, so this was
     invisible in production and showed up the moment the card was rendered on a bare page:
     near-black text on the near-black card. Declaring it here makes the component self-contained
     rather than quietly dependent on its host. */
  color:var(--text);
  --bg:#0a0d0c; --text:#eef5f0;
  --muted:rgba(238,245,240,.62); --faint:rgba(238,245,240,.40);
  --line:rgba(255,255,255,.14); --line-soft:rgba(255,255,255,.07);
  --panel:#0f1614; --panel2:#16201c;
  --gold:#f5b301; --gold-soft:#ffd25e; --gold-ink:#231a00;
  --ok:#5ec98a; --warn:#ffd25e; --danger:#ff7a52;
  --jak:#7b6cf0; --jak2:#4f43b8;   /* jackaroo accent */
  --g150:#1f9d57;                  /* 150 accent */
  --r:16px;
}
.kp-root button{font-family:inherit;}
.kp-root a{color:inherit;text-decoration:none;}
.kp-root :focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:8px;}

/* ---------------- chrome overlay root (replaces design's .screen) ---------------- */
.kp-chrome{position:fixed;inset:0;pointer-events:none;z-index:var(--kz-sheet,9999);}
/* re-enable interaction on the chrome's interactive surfaces
   (their children inherit; overlays are display:none until shown) */
.kp-chrome .dock,
.kp-chrome .notifPanel,
.kp-chrome .popWrap,
.kp-chrome .pwfSheet{pointer-events:auto;}

/* ---------------- top bar ---------------- */
/* Top safe area belongs HERE, once, for every page that wears the shared rail chrome
   (play/cosmetics/grp/add). Those four previously had no CSS top inset at all and leaned on the native
   `ios.contentInset:"always"`, while pages with their OWN inset (index/stats/…) then got it TWICE — the
   home-page "top drifts lower after scrolling down and back up" report of 2026-07-26. This lands the
   global fix that 2026-06-21 deferred, so `contentInset` can be flipped to "never" and CSS is the single
   source of truth. The fallback goes INSIDE env() — `env(x)` with no fallback is invalid-at-computed-value-time where the
   variable is undefined, which drops the whole declaration and would lose even the 14px base. */
.kp-root .topbar{position:relative;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:calc(14px + env(safe-area-inset-top, 0px)) 16px 12px;}
.kp-root .wordmark{display:inline-flex;align-items:center;gap:9px;}
.kp-root .mark{position:relative;width:24px;height:24px;flex:0 0 auto;border-radius:7px;display:flex;align-items:center;justify-content:center;
  background:conic-gradient(from 220deg, #e4493a, #f5b301, #5ec98a, #46b5d1, #7b6cf0, #e4493a);
  box-shadow:0 3px 12px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.4);}
.kp-root .mark::after{content:"";width:8px;height:8px;border-radius:50%;background:#0a0d0c;box-shadow:0 0 0 2px rgba(255,255,255,.12);}
.kp-root .wordmark .t{font-size:17px;font-weight:800;letter-spacing:-.4px;}
.kp-root .topRight{display:flex;align-items:center;gap:9px;}

/* bell */
.kp-root .bellBtn{position:relative;width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  color:var(--text);background:rgba(255,255,255,.06);border:1px solid var(--line-soft);cursor:pointer;transition:.14s;}
.kp-root .bellBtn:hover{background:rgba(255,255,255,.12);}
.kp-root .bellBtn svg{width:20px;height:20px;}
.kp-root .bellBtn.ring{animation:bellRing .6s ease;}
@keyframes bellRing{0%,100%{transform:rotate(0)}20%{transform:rotate(13deg)}40%{transform:rotate(-11deg)}60%{transform:rotate(7deg)}80%{transform:rotate(-4deg)}}
.kp-root .bellDot{position:absolute;top:-4px;inset-inline-end:-4px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;
  background:var(--gold);color:var(--gold-ink);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;
  border:2px solid #0d1411;transition:transform .18s cubic-bezier(.2,.8,.2,1);}
.kp-root .bellDot.hide{transform:scale(0);}
.kp-root .bellBtn.pop .bellDot{animation:badgePop .4s ease;}
@keyframes badgePop{0%{transform:scale(1)}40%{transform:scale(1.45)}100%{transform:scale(1)}}

.kp-root .myAvatar{width:38px;height:38px;}

/* ---------------- avatars ---------------- */
.kp-root .avatar{position:relative;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:16px;color:#1a1405;overflow:hidden;
  background:radial-gradient(circle at 34% 26%, color-mix(in srgb,var(--hue,#888) 55%,#fff 22%), color-mix(in srgb,var(--hue,#888) 92%,#000 16%));
  border:2px solid rgba(255,255,255,.24);box-shadow:0 2px 6px rgba(0,0,0,.35);}
.kp-root .avatar.off{filter:grayscale(.85) brightness(.72);}
.kp-root .avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* photo-mode silhouette (until real images plug in) */
.kp-root .avatar .sil{position:absolute;inset:0;display:none;}
.kp-root .avatar .sil::before{content:"";position:absolute;left:50%;top:24%;width:34%;height:34%;border-radius:50%;
  transform:translateX(-50%);background:rgba(255,255,255,.82);}
.kp-root .avatar .sil::after{content:"";position:absolute;left:50%;bottom:-22%;width:70%;height:60%;border-radius:50%;
  transform:translateX(-50%);background:rgba(255,255,255,.82);}
.kp-root.av-photo .avatar .ini{display:none;}
.kp-root.av-photo .avatar .sil{display:block;}
/* signed-out (per-avatar, unlike the root-level av-photo mode): the silhouette reads
   "a person goes here", where the old "?" read "help". Same recessed gradient as
   photo mode so the empty state sits back rather than shouting. */
.kp-root .avatar.av-anon .ini{display:none;}
.kp-root .avatar.av-anon .sil{display:block;}
.kp-root .avatar.av-anon{background:radial-gradient(circle at 34% 26%, color-mix(in srgb,var(--hue,#888) 42%,#26302b 30%), color-mix(in srgb,var(--hue,#888) 70%,#0c100e 40%));}
.kp-root.av-photo .avatar{background:radial-gradient(circle at 34% 26%, color-mix(in srgb,var(--hue,#888) 42%,#26302b 30%), color-mix(in srgb,var(--hue,#888) 70%,#0c100e 40%));}

.kp-root .avWrap{position:relative;flex:0 0 auto;}
.kp-root .presence{position:absolute;inset-inline-end:-2px;bottom:-2px;width:13px;height:13px;border-radius:50%;border:2.5px solid #0e1512;z-index:2;}
.kp-root .presence.on{background:var(--ok);box-shadow:0 0 7px color-mix(in srgb,var(--ok) 70%,transparent);}
.kp-root .presence.game{background:var(--gold);box-shadow:0 0 7px color-mix(in srgb,var(--gold) 65%,transparent);}
.kp-root .presence.off{background:var(--faint);box-shadow:none;}
/* tiny game glyph that overrides the presence dot when in-game */
.kp-root .gameGlyph{position:absolute;inset-inline-end:-5px;bottom:-5px;width:17px;height:17px;border-radius:6px;z-index:3;
  display:flex;align-items:center;justify-content:center;border:2px solid #0e1512;box-shadow:0 1px 4px rgba(0,0,0,.5);}
.kp-root .gameGlyph.jak{background:radial-gradient(circle at 35% 30%, var(--jak), var(--jak2));}
.kp-root .gameGlyph.g150{background:radial-gradient(circle at 50% 0%, var(--g150), #0e6b3a);}
.kp-root .gameGlyph i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:inset 0 1px 1px rgba(0,0,0,.3);}
.kp-root .gameGlyph.g150 i{width:auto;height:auto;background:none;box-shadow:none;font-size:7px;font-weight:800;font-style:normal;color:var(--gold-soft);}

/* ---------------- buttons ---------------- */
.kp-root .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;font-weight:700;font-size:15px;
  border-radius:13px;padding:13px 18px;border:1px solid transparent;transition:transform .14s, box-shadow .14s, background .14s, border-color .14s;}
.kp-root .btn:active{transform:translateY(1px) scale(.99);}
.kp-root .btn-gold{color:var(--gold-ink);border:none;background:linear-gradient(180deg,var(--gold-soft),var(--gold));
  box-shadow:0 6px 18px rgba(245,179,1,.28), inset 0 1px 0 rgba(255,255,255,.5);}
.kp-root .btn-gold:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(245,179,1,.4), inset 0 1px 0 rgba(255,255,255,.5);}
.kp-root .btn-ghost{color:var(--text);background:rgba(255,255,255,.06);border:1px solid var(--line);}
.kp-root .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);}
.kp-root .btn-block{width:100%;}
.kp-root .btn[disabled]{opacity:.55;cursor:not-allowed;pointer-events:none;}

/* small status pills shared */
.kp-root .pillRow{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;}
.kp-root .dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;display:inline-block;}
.kp-root .dot.ok{background:var(--ok);box-shadow:0 0 6px color-mix(in srgb,var(--ok) 70%,transparent);}
.kp-root .dot.game{background:var(--gold);}
.kp-root .dot.off{background:var(--faint);}

/* section heads inside panels */
.kp-root .secHead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 2px 9px;}
.kp-root .secHead h2{margin:0;font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--faint);
  display:flex;align-items:center;gap:8px;white-space:nowrap;}
.kp-root .secHead .count{font-size:12.5px;font-weight:600;color:var(--muted);white-space:nowrap;}
.kp-root .miniBadge{font-size:11px;font-weight:800;color:var(--gold-ink);background:linear-gradient(180deg,var(--gold-soft),var(--gold));
  border-radius:9px;padding:1px 7px;min-width:18px;text-align:center;}

/* ============================================================
   BACKDROP A — HOME HUB
   ============================================================ */
.kp-root .scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  padding:4px 16px 120px;}
.kp-root .backdrop{display:none;flex:1;min-height:0;flex-direction:column;}
.kp-root .backdrop.on{display:flex;}

.kp-root .hubHi{margin:6px 2px 2px;}
.kp-root .hubHi .hello{font-size:23px;font-weight:800;letter-spacing:-.5px;}
.kp-root .hubHi .sub{font-size:13.5px;color:var(--muted);margin-top:2px;}

.kp-root .pwfCard{position:relative;overflow:hidden;margin-top:16px;border-radius:18px;border:1px solid rgba(245,179,1,.28);
  background:linear-gradient(120deg, rgba(245,179,1,.12), rgba(245,179,1,.03));padding:16px;cursor:pointer;
  display:flex;align-items:center;gap:13px;transition:.16s;}
.kp-root .pwfCard:hover{transform:translateY(-2px);border-color:rgba(245,179,1,.45);}
.kp-root .pwfCard .pwfIco{width:46px;height:46px;border-radius:13px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,var(--gold-soft),var(--gold));box-shadow:0 6px 16px rgba(245,179,1,.3);}
.kp-root .pwfCard .pwfIco svg{width:24px;height:24px;color:var(--gold-ink);}
.kp-root .pwfCard .pwfMeta{flex:1;min-width:0;}
.kp-root .pwfCard .pwfMeta .t{font-size:16px;font-weight:800;letter-spacing:-.2px;}
.kp-root .pwfCard .pwfMeta .d{font-size:12.5px;color:var(--muted);margin-top:1px;}
.kp-root .pwfCard .pwfArrow{color:var(--gold-soft);font-size:18px;flex:0 0 auto;}

.kp-root .hubSecLabel{font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--faint);margin:22px 2px 11px;}
.kp-root .tiles{display:flex;flex-direction:column;gap:13px;}
.kp-root .tile{position:relative;display:flex;align-items:center;gap:14px;border-radius:18px;overflow:hidden;
  border:1px solid var(--line);background:linear-gradient(180deg,var(--panel2),var(--panel));padding:13px;transition:.18s;cursor:pointer;}
.kp-root .tile:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.22);}
.kp-root .tile.soon{opacity:.74;cursor:default;}
.kp-root .tile.soon:hover{transform:none;border-color:var(--line);}
.kp-root .tArt{position:relative;width:62px;height:78px;flex:0 0 auto;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 8px 20px rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;}
.kp-root .tArt.t150{background:radial-gradient(120% 100% at 50% 0%, var(--g150), #0e6b3a 75%, #073e22);}
.kp-root .tArt.t150 .hatch{position:absolute;inset:0;opacity:.4;background:repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 5px, transparent 5px 11px);}
.kp-root .tArt.t150 .num{position:relative;font-weight:800;font-size:20px;color:var(--gold-soft);transform:rotate(-7deg);text-shadow:0 1px 4px rgba(0,0,0,.5);}
.kp-root .tArt.tjak{background:radial-gradient(120% 100% at 50% 0%, var(--jak), var(--jak2) 75%, #2c2480);}
.kp-root .tArt.tjak .ring{position:absolute;width:42px;height:42px;border-radius:50%;border:2px dashed rgba(255,255,255,.32);}
.kp-root .tArt.tjak .mb{position:absolute;width:11px;height:11px;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.4), inset 0 1px 2px rgba(255,255,255,.4);}
.kp-root .tArt.tjak .mb.r{background:#ff6b6b;top:20%;left:50%;transform:translateX(-50%);}
.kp-root .tArt.tjak .mb.y{background:#ffd25e;top:50%;right:20%;}
.kp-root .tArt.tjak .mb.g{background:#54d98a;bottom:18%;left:50%;transform:translateX(-50%);}
.kp-root .tArt.tjak .mb.b{background:#6ea8ff;top:50%;left:20%;}
.kp-root .tArt.tsoon{background:rgba(255,255,255,.05);}
.kp-root .tArt.tsoon .q{font-size:24px;color:var(--faint);font-weight:800;}
.kp-root .tMeta{flex:1;min-width:0;}
.kp-root .tName{font-size:17px;font-weight:800;letter-spacing:-.3px;display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.kp-root .tDesc{font-size:12.5px;color:var(--muted);margin-top:3px;text-wrap:pretty;}
.kp-root .badge{font-size:9px;font-weight:800;letter-spacing:1px;text-transform:uppercase;padding:3px 7px;border-radius:6px;}
.kp-root .badge.live{color:#06351d;background:#54d98a;}
.kp-root .badge.soon{color:var(--muted);background:rgba(255,255,255,.08);border:1px solid var(--line);}
.kp-root .tGo{flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:17px;
  color:var(--gold-ink);background:linear-gradient(180deg,var(--gold-soft),var(--gold));box-shadow:0 4px 12px rgba(245,179,1,.3);}

/* shared hint pulse (kept; referenced by game-side chrome) */
@keyframes hintPulse{0%,100%{opacity:.7}50%{opacity:1}}

/* ============================================================
   OVERLAY SCRIM (shared)
   ============================================================ */
.kp-root .scrim{position:absolute;inset:0;z-index:40;background:rgba(6,9,8,.62);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .2s;}
.kp-root .scrim.on{opacity:1;pointer-events:auto;}

/* ============================================================
   PRESENCE DOCK (bottom-right)
   ============================================================ */
.kp-root .dock{position:absolute;inset-inline-end:14px;bottom:18px;z-index:55;}

/* FAB (collapsed) */
.kp-root .fab{position:relative;width:56px;height:56px;border-radius:20px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);cursor:pointer;
  box-shadow:0 12px 30px rgba(0,0,0,.5);transition:transform .16s, opacity .2s, background .16s;opacity:.62;}
.kp-root .fab:hover{opacity:1;transform:translateY(-2px);}
.kp-root .fab svg{width:25px;height:25px;color:var(--text);}
.kp-root.in-game .fab{opacity:.42;width:50px;height:50px;}
.kp-root.in-game .fab:hover{opacity:1;}
.kp-root .fabBadge{position:absolute;top:-6px;inset-inline-end:-6px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;gap:3px;font-size:11.5px;font-weight:800;
  color:#06351d;background:#54d98a;border:2px solid #0d1411;box-shadow:0 2px 8px rgba(0,0,0,.4);}
.kp-root .fabBadge .pdot{width:5px;height:5px;border-radius:50%;background:#06351d;}
/* slim-tab variant (attached to the inline-end screen edge; corners/padding/border in logical
   properties so the tab re-attaches to the LEFT edge, mirrored, under dir=rtl) */
.kp-root.dock-tab .fab{width:auto;height:46px;
  border-start-start-radius:14px;border-end-start-radius:14px;border-start-end-radius:0;border-end-end-radius:0;
  padding-block:0;padding-inline:16px 14px;gap:9px;border-inline-end:none;
  position:absolute;inset-inline-end:0;bottom:0;}
.kp-root.dock-tab .dock{inset-inline-end:0;bottom:84px;}
.kp-root .fabTabLabel{display:none;font-size:13px;font-weight:700;white-space:nowrap;}
.kp-root.dock-tab .fabTabLabel{display:inline;}
.kp-root.dock-tab .fabBadge{position:static;border:none;margin-inline-start:2px;}
/* gentle online pulse */
.kp-root .fab.pulse::after{content:"";position:absolute;inset:-3px;border-radius:inherit;border:2px solid var(--ok);
  animation:fabPulse 1.6s ease-out;}
@keyframes fabPulse{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.22)}}

/* dock panel (expanded) */
.kp-root .dockPanel{position:absolute;inset-inline-end:0;bottom:0;width:min(340px,calc(100vw - 28px));z-index:56;
  background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:20px;
  box-shadow:0 24px 60px rgba(0,0,0,.6);overflow:hidden;transform-origin:bottom right;
  display:none;flex-direction:column;max-height:min(560px,calc(100dvh - 120px));}
.kp-root .dockPanel.on{display:flex;animation:dockIn .22s cubic-bezier(.2,.8,.2,1);}
@keyframes dockIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
.kp-root .dockHead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 14px 10px;border-bottom:1px solid var(--line-soft);}
.kp-root .dockHead .ht{font-size:15px;font-weight:800;letter-spacing:-.2px;}
.kp-root .dockHead .hc{font-size:12px;color:var(--muted);margin-top:1px;}
.kp-root .dockHead .hbtns{display:flex;align-items:center;gap:7px;}
.kp-root .iconBtn{width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:15px;
  color:var(--muted);background:rgba(255,255,255,.05);border:1px solid var(--line-soft);cursor:pointer;transition:.14s;}
.kp-root .iconBtn:hover{color:var(--text);background:rgba(255,255,255,.1);}
.kp-root .iconBtn svg{width:17px;height:17px;}
.kp-root .dockList{flex:1;min-height:0;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:5px;}
.kp-root .dockGroupLabel{font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--faint);
  padding:8px 8px 4px;}

/* friend row (shared by dock + pick list) */
.kp-root .frow{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:13px;
  background:rgba(255,255,255,.025);border:1px solid var(--line-soft);transition:.14s;}
.kp-root .frow.off{opacity:.66;}
.kp-root .frow .avatar{width:40px;height:40px;font-size:16px;}
.kp-root .finfo{flex:1;min-width:0;}
.kp-root .fname{font-size:14.5px;font-weight:700;line-height:1.2;}
.kp-root .fstatus{font-size:12px;color:var(--muted);margin-top:1px;display:flex;align-items:center;gap:6px;}
.kp-root .fstatus.playing{color:var(--gold-soft);font-weight:600;}
.kp-root .fstatus .gmini{display:inline-flex;width:14px;height:14px;border-radius:5px;align-items:center;justify-content:center;}
.kp-root .fstatus .gmini.jak{background:radial-gradient(circle at 35% 30%, var(--jak), var(--jak2));}
.kp-root .fstatus .gmini.g150{background:radial-gradient(circle at 50% 0%, var(--g150), #0e6b3a);font-size:6px;font-weight:800;color:var(--gold-soft);}
.kp-root .fact{flex:0 0 auto;display:flex;gap:6px;}
.kp-root .actBtn{font-size:12.5px;font-weight:700;border-radius:11px;padding:9px 13px;cursor:pointer;white-space:nowrap;transition:.14s;border:1px solid transparent;}
.kp-root .actBtn.gold{color:var(--gold-ink);background:linear-gradient(180deg,var(--gold-soft),var(--gold));box-shadow:0 4px 12px rgba(245,179,1,.24);}
.kp-root .actBtn.gold:hover{transform:translateY(-1px);}
.kp-root .actBtn.ghost{color:var(--text);background:rgba(255,255,255,.07);border-color:var(--line);}
.kp-root .actBtn.ghost:hover{background:rgba(255,255,255,.12);}
.kp-root .actBtn.done{color:var(--ok);background:rgba(94,201,138,.12);border-color:rgba(94,201,138,.35);box-shadow:none;pointer-events:none;}

/* dock empty state */
.kp-root .dockEmpty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:11px;padding:30px 24px 26px;}
.kp-root .dockEmpty .ei{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--gold-soft);}
.kp-root .dockEmpty .ei svg{width:26px;height:26px;}
.kp-root .dockEmpty h3{margin:0;font-size:16px;font-weight:800;}
.kp-root .dockEmpty p{margin:0;font-size:13px;color:var(--muted);max-width:28ch;text-wrap:pretty;}

/* ============================================================
   NOTIFICATIONS PANEL (under bell)
   ============================================================ */
.kp-root .notifPanel{position:absolute;top:62px;right:14px;left:14px;z-index:50;
  background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:18px;
  box-shadow:0 24px 60px rgba(0,0,0,.6);overflow:hidden;display:none;flex-direction:column;
  max-height:min(540px,calc(100dvh - 90px));transform-origin:top right;}
.kp-root .notifPanel.on{display:flex;animation:notifIn .2s cubic-bezier(.2,.8,.2,1);}
@keyframes notifIn{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}
.kp-root .notifHead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 14px 11px;border-bottom:1px solid var(--line-soft);}
.kp-root .notifHead .nt{font-size:15px;font-weight:800;}
.kp-root .notifHead .clearBtn{font-size:12px;font-weight:600;color:var(--muted);background:none;border:none;cursor:pointer;padding:4px 6px;border-radius:8px;}
.kp-root .notifHead .clearBtn:hover{color:var(--text);background:rgba(255,255,255,.06);}
.kp-root .notifBody{flex:1;min-height:0;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:5px;}
.kp-root .notifGroup{font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--faint);padding:9px 8px 4px;}
.kp-root .nitem{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:13px;background:rgba(255,255,255,.025);border:1px solid var(--line-soft);transition:.18s;}
.kp-root .nitem.leaving{opacity:0;transform:translateX(14px);}
.kp-root .nitem .avatar{width:40px;height:40px;font-size:16px;}
.kp-root .ninfo{flex:1;min-width:0;}
.kp-root .ntext{font-size:13.5px;font-weight:600;line-height:1.25;}
.kp-root .ntext b{font-weight:800;}
.kp-root .ntime{font-size:11px;color:var(--faint);margin-top:1px;}
.kp-root .nact{flex:0 0 auto;display:flex;gap:6px;align-items:center;}
.kp-root .nAccept{font-size:12.5px;font-weight:700;color:var(--gold-ink);background:linear-gradient(180deg,var(--gold-soft),var(--gold));
  border:none;border-radius:11px;padding:9px 13px;cursor:pointer;white-space:nowrap;}
.kp-root .nAccept:hover{transform:translateY(-1px);}
.kp-root .nReject{width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:15px;
  color:var(--muted);background:rgba(255,255,255,.05);border:1px solid var(--line-soft);cursor:pointer;transition:.14s;}
.kp-root .nReject:hover{color:var(--danger);border-color:rgba(255,122,82,.35);}

/* notifications empty */
.kp-root .notifEmpty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:34px 24px;}
.kp-root .notifEmpty .ei{width:50px;height:50px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--ok);}
.kp-root .notifEmpty .ei svg{width:24px;height:24px;}
.kp-root .notifEmpty h3{margin:0;font-size:15px;font-weight:800;}
.kp-root .notifEmpty p{margin:0;font-size:13px;color:var(--muted);}

/* ============================================================
   TOASTS
   ============================================================ */
.kp-root .toastWrap{position:absolute;left:14px;right:14px;top:64px;z-index:60;display:flex;flex-direction:column;gap:8px;pointer-events:none;}
.kp-root .toast{pointer-events:auto;display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:15px;
  background:rgba(18,24,21,.96);border:1px solid var(--line);box-shadow:0 18px 44px rgba(0,0,0,.55);
  transform:translateY(-16px);opacity:0;transition:transform .28s cubic-bezier(.2,.8,.2,1), opacity .28s;}
.kp-root .toast.on{transform:none;opacity:1;}
.kp-root .toast.leaving{transform:translateY(-12px);opacity:0;}
.kp-root .toast .avatar{width:38px;height:38px;font-size:15px;}
.kp-root .toast .tinfo{flex:1;min-width:0;}
.kp-root .toast .tt{font-size:13.5px;font-weight:700;line-height:1.25;}
.kp-root .toast .tt b{font-weight:800;}
.kp-root .toast .ts{font-size:11px;color:var(--faint);margin-top:1px;}
.kp-root .toast .tact{flex:0 0 auto;display:flex;gap:6px;}
.kp-root .toast .tAccept{font-size:12.5px;font-weight:700;color:var(--gold-ink);background:linear-gradient(180deg,var(--gold-soft),var(--gold));
  border:none;border-radius:11px;padding:8px 12px;cursor:pointer;white-space:nowrap;}
.kp-root .toast .tReject{width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:14px;
  color:var(--muted);background:rgba(255,255,255,.06);border:1px solid var(--line-soft);cursor:pointer;}
.kp-root .toast .tReject:hover{color:var(--danger);}
.kp-root .toast.plain .tt{font-weight:600;}
.kp-root .toast .okMark{width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  background:rgba(94,201,138,.14);color:var(--ok);flex:0 0 auto;}

/* ============================================================
   PLAYER-CARD POPOVER
   ============================================================ */
/* The card must survive being TALLER than the viewport. It grew one when the rivalry block
   landed (RIVALRY_BUILD_SPEC.md §9): a full-tier card carries faces + ledger + form + tug +
   moment + five game rows on top of the existing stats/actions/mod rows.
   `align-items:center` on its own clips a too-tall flex item at BOTH ends and neither is
   reachable — the avatar and name vanish off the top while Message/Friends/Nickname/Mute/
   Block/Report sit below the fold with no way to scroll to them. (Reported on staging,
   2026-07-28.)
   `align-items:flex-start` + `margin:auto` on the card is the fix: auto margins still centre
   it when there IS spare room (bot card, empty state — unchanged), and collapse to 0 when
   there is not, so the card starts at the top and the wrap scrolls the whole thing.
   Safe-area insets matter here too — the Capacitor shell puts this under the status bar. */
.kp-root .popWrap{position:absolute;inset:0;z-index:64;display:none;align-items:flex-start;justify-content:center;
  padding:calc(18px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom));
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
.kp-root .popWrap.on{display:flex;}
.kp-root .popCard{position:relative;margin:auto;width:min(320px,calc(100vw - 36px));background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line);border-radius:22px;padding:20px 18px 18px;box-shadow:0 30px 70px rgba(0,0,0,.62);
  text-align:center;animation:popIn .22s cubic-bezier(.2,.8,.2,1);}
@keyframes popIn{from{opacity:0;transform:translateY(10px) scale(.95)}to{opacity:1;transform:none}}
.kp-root .popClose{position:absolute;top:11px;inset-inline-end:11px;width:32px;height:32px;border-radius:50%;border:1px solid var(--line-soft);
  background:rgba(255,255,255,.05);color:var(--muted);font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.kp-root .popClose:hover{background:rgba(255,255,255,.1);color:var(--text);}
.kp-root .popCard .avatar{width:74px;height:74px;font-size:30px;margin:2px auto 0;}
/* Name + its inline nickname-edit affordance. The row carries the top margin so the pencil sits
   on the name's optical centre; .popName keeps its own flex (it can hold status glyphs). */
.kp-root .popNameRow{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:11px;}
.kp-root .popName{font-size:20px;font-weight:800;letter-spacing:-.3px;display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;}
.kp-root .popNickBtn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:9px;cursor:pointer;color:var(--faint);
  background:rgba(255,255,255,.05);border:1px solid var(--line-soft);}
.kp-root .popNickBtn:hover{color:var(--text);background:rgba(255,255,255,.1);}
.kp-root .popNickBtn.on{color:var(--gold);border-color:rgba(245,179,1,.34);background:rgba(245,179,1,.1);}
.kp-root .popNickBtn[hidden]{display:none;}
.kp-root .popNickBtn svg{width:14px;height:14px;}
.kp-root .popHandle{font-size:12.5px;color:var(--faint);font-weight:500;margin-top:1px;}
.kp-root .popStatus{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;margin-top:10px;
  background:rgba(255,255,255,.05);border:1px solid var(--line-soft);border-radius:30px;padding:6px 13px;}
.kp-root .popStatus.playing{color:var(--gold-soft);}
.kp-root .popStats{display:flex;justify-content:center;gap:0;margin:15px 0 4px;}
.kp-root .popStat{flex:1;max-width:96px;}
.kp-root .popStat .v{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums;}
.kp-root .popStat .k{font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--faint);margin-top:1px;}
.kp-root .popStat + .popStat{border-inline-start:1px solid var(--line-soft);}
/* Rivalry block separator (RIVALRY_BUILD_SPEC.md §9). The block itself is styled by
   rivalry-block.css; presence owns only this rule, because the divider belongs to the CARD's
   rhythm, not to the block. Bleeds to the card edges like the card's own padding, and is
   [hidden] whenever showCard() decides the block does not appear (self / blocked / no library). */
.kp-root .popSep{height:1px;background:var(--line-soft);margin:16px -18px 14px;}
.kp-root .popSep[hidden]{display:none;}
.kp-root .popActions{display:flex;flex-direction:column;gap:9px;margin-top:16px;}
/* Icons injected into card buttons (presence.js ICON) need an explicit size — this file has no
   generic `svg` rule to inherit from, so an unsized icon renders at its intrinsic 24px. */
.kp-root .popActions .btn svg,
.kp-root .friendChip svg{width:17px;height:17px;flex:0 0 auto;}
.kp-root .friendChip svg{width:15px;height:15px;}
.kp-root .popNote{font-size:11.5px;color:var(--faint);margin-top:11px;text-wrap:pretty;}
.kp-root .friendChip{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--ok);
  background:rgba(94,201,138,.12);border:1px solid rgba(94,201,138,.32);border-radius:12px;padding:11px 16px;justify-content:center;}

/* ============================================================
   PLAY-WITH-A-FRIEND SHEET (full)
   ============================================================ */
.kp-root .pwfSheet{position:absolute;inset:0;z-index:66;background:radial-gradient(120% 70% at 50% -6%, #15211c 0%, #0a0d0c 58%);
  display:none;flex-direction:column;}
.kp-root .pwfSheet.on{display:flex;animation:sheetUp .28s cubic-bezier(.2,.8,.2,1);}
@keyframes sheetUp{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}
.kp-root .pwfTop{display:flex;align-items:center;gap:10px;padding:14px 16px 10px;}
.kp-root .pwfTop .back{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;
  color:var(--muted);background:rgba(255,255,255,.06);border:1px solid var(--line-soft);cursor:pointer;}
.kp-root .pwfTop .back:hover{color:var(--text);background:rgba(255,255,255,.1);}
.kp-root .pwfTop .ttl{font-size:17px;font-weight:800;letter-spacing:-.3px;}
.kp-root .pwfTop .step{margin-inline-start:auto;font-size:12px;font-weight:700;color:var(--faint);white-space:nowrap;}
.kp-root .pwfScroll{flex:1;min-height:0;overflow-y:auto;padding:4px 16px 16px;}
.kp-root .pwfFoot{padding:12px 16px calc(14px + env(safe-area-inset-bottom));background:linear-gradient(0deg, var(--bg) 60%, transparent);}

.kp-root .pwfStepLabel{font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--faint);margin:12px 2px 10px;}
/* game picker */
.kp-root .gamePick{display:flex;flex-direction:column;gap:11px;}
.kp-root .gpCard{display:flex;align-items:center;gap:13px;border-radius:16px;border:1px solid var(--line);
  background:linear-gradient(180deg,var(--panel2),var(--panel));padding:12px;cursor:pointer;transition:.14s;position:relative;}
.kp-root .gpCard:hover{border-color:rgba(255,255,255,.22);}
.kp-root .gpCard.sel{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold), 0 10px 26px rgba(245,179,1,.16);}
.kp-root .gpCard.soon{opacity:.6;cursor:default;}
.kp-root .gpCard.soon:hover{border-color:var(--line);}
.kp-root .gpCard .tArt{width:52px;height:66px;}
.kp-root .gpMeta{flex:1;min-width:0;}
.kp-root .gpMeta .n{font-size:16px;font-weight:800;display:flex;align-items:center;gap:8px;}
.kp-root .gpMeta .d{font-size:12px;color:var(--muted);margin-top:2px;}
.kp-root .gpCheck{width:24px;height:24px;border-radius:50%;border:2px solid var(--line);flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  color:var(--gold-ink);font-size:14px;transition:.14s;}
.kp-root .gpCard.sel .gpCheck{background:linear-gradient(180deg,var(--gold-soft),var(--gold));border-color:transparent;}

/* options */
.kp-root .optRow{margin-top:18px;}
.kp-root .optLabel{font-size:12.5px;font-weight:600;color:var(--muted);margin:0 2px 8px;}
.kp-root .seg{display:flex;gap:4px;background:rgba(0,0,0,.3);border:1px solid var(--line-soft);border-radius:13px;padding:4px;}
.kp-root .seg button{flex:1;border:none;background:none;color:var(--muted);font:inherit;font-weight:600;font-size:14px;padding:10px 8px;border-radius:9px;cursor:pointer;transition:.14s;}
.kp-root .seg button[aria-pressed=true]{background:rgba(255,255,255,.09);color:var(--text);box-shadow:inset 0 0 0 1px var(--line);}

/* selectable friend rows */
.kp-root .pickList{display:flex;flex-direction:column;gap:7px;}
.kp-root .frow.pick{cursor:pointer;}
.kp-root .frow.pick.sel{border-color:var(--gold);background:rgba(245,179,1,.08);}
.kp-root .pickCheck{width:24px;height:24px;border-radius:8px;border:2px solid var(--line);flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  color:var(--gold-ink);font-size:14px;transition:.14s;}
.kp-root .frow.pick.sel .pickCheck{background:linear-gradient(180deg,var(--gold-soft),var(--gold));border-color:transparent;}
.kp-root .frow.pick.disabled{opacity:.5;pointer-events:none;}

/* lobby seats (waiting state) */
.kp-root .lobbyHead{display:flex;align-items:center;gap:13px;margin:6px 2px 16px;}
.kp-root .lobbyHead .tArt{width:50px;height:64px;}
.kp-root .lobbyHead .lh{flex:1;min-width:0;}
.kp-root .lobbyHead .lh .n{font-size:19px;font-weight:800;letter-spacing:-.3px;}
.kp-root .lobbyHead .lh .d{font-size:12.5px;color:var(--muted);margin-top:2px;}
.kp-root .lobbyLink{display:flex;gap:8px;margin:0 0 16px;}
.kp-root .lobbyLink input{flex:1;min-width:0;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--text);letter-spacing:.2px;
  background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:11px;padding:11px 12px;}
.kp-root .lobbyLink input:focus{outline:none;border-color:var(--gold);}
.kp-root .copyBtn{flex:0 0 auto;font-weight:700;font-size:13px;color:var(--text);background:rgba(255,255,255,.07);
  border:1px solid var(--line);border-radius:11px;padding:0 15px;cursor:pointer;min-width:74px;transition:.14s;}
.kp-root .copyBtn.done{color:var(--gold-ink);background:linear-gradient(180deg,var(--gold-soft),var(--gold));border:none;}
.kp-root .lseats{display:flex;flex-direction:column;gap:9px;}
.kp-root .lseat{display:flex;align-items:center;gap:13px;padding:11px 13px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid var(--line-soft);}
.kp-root .lseat.you{background:linear-gradient(180deg, rgba(245,179,1,.1), rgba(245,179,1,.03));border-color:rgba(245,179,1,.28);}
.kp-root .lseat.open{border-style:dashed;background:rgba(255,255,255,.015);}
.kp-root .lseat .avatar{width:42px;height:42px;font-size:17px;}
.kp-root .lseat .avatar.ph{background:none;border:2px dashed var(--line);color:var(--faint);box-shadow:none;font-weight:800;}
.kp-root .lseat .avatar.bot{background:radial-gradient(circle at 30% 25%,#33403a,#1a221e);color:var(--muted);border:2px solid var(--line);}
.kp-root .lsInfo{flex:1;min-width:0;}
.kp-root .lsName{font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.kp-root .lseat.open .lsName{color:var(--muted);font-weight:600;}
.kp-root .lsSub{font-size:12px;color:var(--muted);margin-top:2px;display:flex;align-items:center;gap:6px;}
.kp-root .statusChip{font-size:11px;font-weight:800;letter-spacing:.4px;padding:4px 9px;border-radius:20px;white-space:nowrap;flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;}
.kp-root .statusChip.invited{color:var(--warn);background:rgba(255,210,94,.12);border:1px solid rgba(255,210,94,.3);}
.kp-root .statusChip.joined{color:var(--ok);background:rgba(94,201,138,.14);border:1px solid rgba(94,201,138,.34);}
.kp-root .statusChip.declined{color:var(--danger);background:rgba(255,122,82,.12);border:1px solid rgba(255,122,82,.3);}
.kp-root .statusChip.offline{color:var(--faint);background:rgba(255,255,255,.05);border:1px solid var(--line-soft);}
.kp-root .statusChip .spin{width:11px;height:11px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}
.kp-root .miniGhost{font-size:12px;font-weight:600;color:var(--muted);background:rgba(255,255,255,.05);border:1px solid var(--line-soft);
  border-radius:9px;padding:7px 11px;cursor:pointer;white-space:nowrap;transition:.14s;}
.kp-root .miniGhost:hover{color:var(--text);background:rgba(255,255,255,.1);}

/* expired / already-started state */
.kp-root .pwfMisc{display:flex;flex-direction:column;align-items:center;text-align:center;gap:13px;padding:50px 26px;flex:1;justify-content:center;}
.kp-root .pwfMisc .mi{width:62px;height:62px;border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:28px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);}
.kp-root .pwfMisc h2{margin:0;font-size:21px;font-weight:800;letter-spacing:-.3px;}
.kp-root .pwfMisc p{margin:0;font-size:13.5px;color:var(--muted);max-width:30ch;text-wrap:pretty;}

/* pick-friends empty (no friends yet) */
.kp-root .pickEmpty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:36px 24px;}
.kp-root .pickEmpty .ei{width:54px;height:54px;border-radius:17px;display:flex;align-items:center;justify-content:center;color:var(--gold-soft);
  background:rgba(255,255,255,.05);border:1px solid var(--line);}
.kp-root .pickEmpty .ei svg{width:27px;height:27px;}
.kp-root .pickEmpty h3{margin:0;font-size:16px;font-weight:800;}
.kp-root .pickEmpty p{margin:0;font-size:13px;color:var(--muted);max-width:30ch;text-wrap:pretty;}

/* staged-invite avatars summary on foot */
.kp-root .stagedRow{display:flex;align-items:center;gap:8px;margin-bottom:10px;min-height:24px;}
.kp-root .stagedAvs{display:flex;}
.kp-root .stagedAvs .avatar{width:28px;height:28px;font-size:11px;margin-inline-start:-8px;border:2px solid var(--panel);}
.kp-root .stagedAvs .avatar:first-child{margin-inline-start:0;}
.kp-root .stagedTxt{font-size:12.5px;color:var(--muted);font-weight:600;}

/* ============================================================
   IN-GAME CHROME
   hide the platform top bar (the live game has its own);
   lift dock above the hand
   ============================================================ */
.kp-root.in-game .topbar{display:none;}
.kp-root.in-game .dock{bottom:152px;}
.kp-root.in-game.dock-tab .dock{bottom:172px;}

.kp-root button.avatar{padding:0;cursor:pointer;font:inherit;}
.kp-root .myAvatar{cursor:pointer;}

/* Google glyph + provider button accents */
.kp-root .gIcon{width:18px;height:18px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:12px;color:#4285F4;flex:0 0 auto;box-shadow:0 1px 2px rgba(0,0,0,.2);}

/* ---------- friend DM chat sheet (Karooty addition; bottom sheet inside .kp-chrome) ---------- */
.kp-chrome .kchat{pointer-events:auto;}
.kp-root .kchat{position:absolute;left:0;right:0;bottom:0;z-index:70;max-height:76dvh;display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-bottom:none;
  border-radius:20px 20px 0 0;box-shadow:0 -16px 40px rgba(0,0,0,.5);transform:translateY(103%);opacity:0;
  transition:transform .26s cubic-bezier(.2,.8,.2,1),opacity .2s;}
.kp-root .kchat.on{transform:translateY(0);opacity:1;}
@media(min-width:560px){.kp-root .kchat{inset-inline-start:auto;inset-inline-end:18px;bottom:18px;width:370px;border-radius:18px;border-bottom:1px solid var(--line);}}
.kp-root .kchatHead{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line-soft);}
.kp-root .kchatTitle{flex:1;font-weight:800;font-size:15.5px;letter-spacing:-.2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.kp-root .kchatClose{width:34px;height:34px;border-radius:11px;border:none;background:rgba(255,255,255,.06);color:var(--muted);
  font-size:15px;cursor:pointer;flex:0 0 auto;}
.kp-root .kchatClose:hover{color:var(--text);background:rgba(255,255,255,.1);}
.kp-root .kchatMsgs{flex:1;overflow-y:auto;padding:14px 14px 6px;display:flex;flex-direction:column;gap:8px;min-height:120px;}
.kp-root .kchatEmpty{margin:auto;color:var(--faint);font-size:13.5px;text-align:center;padding:24px 10px;}
.kp-root .kmsg{display:flex;max-width:82%;}
.kp-root .kmsg.me{align-self:flex-end;}
.kp-root .kbub{font-size:14px;line-height:1.4;padding:9px 12px;border-radius:14px;border-start-start-radius:4px;text-wrap:pretty;word-break:break-word;
  background:rgba(255,255,255,.06);border:1px solid var(--line-soft);color:var(--text);}
.kp-root .kmsg.me .kbub{border-radius:14px;border-start-end-radius:4px;color:var(--gold-ink);border:none;
  background:linear-gradient(180deg,var(--gold-soft),var(--gold));}
.kp-root .kchatBar{display:flex;gap:9px;padding:11px 12px calc(11px + env(safe-area-inset-bottom));border-top:1px solid var(--line-soft);}
.kp-root .kchatBar input{flex:1;font:inherit;font-size:15px;padding:11px 15px;border-radius:22px;border:1px solid var(--line);
  background:rgba(0,0,0,.3);color:var(--text);outline:none;}
.kp-root .kchatBar input:focus{border-color:var(--gold);}
.kp-root .kchatSend{width:42px;height:42px;flex:0 0 auto;border-radius:50%;border:none;cursor:pointer;font-size:17px;font-weight:800;
  color:var(--gold-ink);background:linear-gradient(180deg,var(--gold-soft),var(--gold));}
.kp-root .kchatSend:disabled{opacity:.45;cursor:not-allowed;}

@media(prefers-reduced-motion:reduce){
  .kp-root *{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.06s!important;}
}

/* ============================================================================
   DESKTOP SIDE-DOCK — Friends + Notifications become an always-open right RAIL.
   Mobile-first: phones/tablets keep the FAB overlay idiom unchanged. From >=900px,
   presence.js adds `body.kp-railed` (HUB + signed-in only) and these rules re-anchor
   the EXISTING #kpNotif / #kpDockPanel (siblings inside the fixed .kp-chrome overlay)
   into two stacked, always-open cards in a fixed right gutter — no DOM moves, no new
   nodes. The panels are already populated (refreshFriends on mount + every 45s), so
   they need no open() call. !important overrides the JS-toggled .on/.hide/anim states.
   ============================================================================ */
@media(min-width:900px){
  /* center the play column in the space LEFT of the rail (rail reserves ~360px on the right). box-sizing
     so 520px INCLUDES the 32px horizontal padding — a content-box would push the column edge to ~572px
     and overlap the rail (which starts near 558px) around 900–911px. */
  body.kp-railed .kp-hub{ box-sizing:border-box; max-width:520px; margin-inline-start:max(20px, calc((100vw - 360px - 520px) / 2)); margin-inline-end:0; }

  /* Notifications = upper rail card (logical insets ⇒ the whole rail docks LEFT under dir=rtl) */
  body.kp-railed .kp-chrome .notifPanel{
    position:fixed; inset-inline-start:auto; inset-inline-end:20px; top:20px; width:320px; height:32dvh; max-height:340px;
    display:flex!important; opacity:1!important; transform:none!important; animation:none!important; }
  /* Friends = lower (taller) rail card */
  body.kp-railed .kp-chrome .dockPanel{
    position:fixed; inset-inline-start:auto; inset-inline-end:20px; top:calc(20px + 32dvh + 16px); bottom:20px; width:320px; max-height:none;
    display:flex!important; opacity:1!important; transform:none!important; animation:none!important; }

  /* always-open rail ⇒ no FAB, no page bell. Do NOT blanket-hide .scrim: the rail panels never get the
     `.on` class (force-open is pure CSS), so maybeScrim()/anyOpen() only raise the scrim for the player
     CARD or CHAT — which still need its dim + outside-click-close. Hiding it would break that dismissal. */
  body.kp-railed .kp-chrome .fab,
  body.kp-railed .bellBtn{ display:none!important; }
  /* When a card/chat modal raises the scrim, it must sit ABOVE every other rail-mode surface — the panels
     (z 50/56) AND the toast layer (z 60, whose toasts are pointer-events:auto) — so the rail + toasts dim
     and an outside click dismisses; only the player card (z 64) and chat (z 70) stay interactive above it. */
  body.kp-railed .kp-chrome .scrim.on{ z-index:63; }
}
/* ============================================================================
   IN-GAME SOCIAL (ingame-social.js) — room-chat FAB + panel, shown in MP games.
   Own fixed layer (kpig-root, below presence's kp-chrome 9999); NON-modal corner
   panel so the board stays visible. Bottom-LEFT so it never collides with
   presence's friends FAB (bottom-right). All under .kp-root for the token scope.
   ============================================================================ */
.kpig-root{position:fixed;inset:0;pointer-events:none;z-index:var(--kz-sheet,9990);}
.kpig-root .kpig-fab,
.kpig-root .kpig-panel{pointer-events:auto;}
.kpig-root .kpig-fab{position:absolute;inset-inline-start:max(14px,env(safe-area-inset-left));bottom:calc(14px + env(safe-area-inset-bottom));
  width:52px;height:52px;border-radius:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;
  color:var(--text);background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);
  box-shadow:0 10px 28px rgba(0,0,0,.5);transition:transform .14s;}
.kpig-root .kpig-fab:hover{transform:translateY(-2px);}
.kpig-root .kpig-fabDot{position:absolute;top:-3px;inset-inline-end:-3px;width:14px;height:14px;border-radius:50%;background:#e4572e;border:2px solid #0d1411;}
.kpig-root .kpig-fabDot.hide{display:none;}
.kpig-root .kpig-panel{position:absolute;inset-inline-start:max(14px,env(safe-area-inset-left));bottom:calc(14px + env(safe-area-inset-bottom));
  width:min(340px,calc(100vw - 28px));max-height:min(52vh,460px);display:none;flex-direction:column;overflow:hidden;
  background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:20px;box-shadow:0 24px 60px rgba(0,0,0,.6);}
.kpig-root.kpig-on .kpig-panel{display:flex;animation:kpigIn .2s cubic-bezier(.2,.8,.2,1);}
.kpig-root.kpig-on .kpig-fab{display:none;}
@keyframes kpigIn{from{opacity:0;transform:translateY(12px) scale(.98);}to{opacity:1;transform:none;}}
.kpig-root .kpig-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px 10px;font-weight:800;font-size:14px;border-bottom:1px solid var(--line-soft);}
.kpig-root .kpig-x{width:30px;height:30px;border-radius:9px;border:1px solid var(--line-soft);background:rgba(255,255,255,.05);color:var(--text);cursor:pointer;font-size:13px;flex:0 0 auto;}
.kpig-root .kpig-body{flex:1;min-height:0;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:8px;}
.kpig-root .kpig-msg{display:flex;flex-direction:column;gap:2px;max-width:84%;align-self:flex-start;}
.kpig-root .kpig-msg.me{align-self:flex-end;align-items:flex-end;}
.kpig-root .kpig-from{font-size:11px;font-weight:700;color:var(--gold-soft);padding:0 2px;}
.kpig-root .kpig-bubble{font-size:14px;line-height:1.35;padding:8px 12px;border-radius:13px;border-end-start-radius:4px;background:rgba(255,255,255,.07);border:1px solid var(--line-soft);color:var(--text);word-break:break-word;}
.kpig-root .kpig-msg.me .kpig-bubble{border-radius:13px;border-end-end-radius:4px;color:var(--gold-ink);background:linear-gradient(180deg,var(--gold-soft),var(--gold));border:none;}
.kpig-root .kpig-bar{display:flex;gap:9px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line-soft);}
.kpig-root .kpig-bar input{flex:1;font:inherit;font-size:15px;padding:10px 14px;border-radius:22px;border:1px solid var(--line);background:rgba(0,0,0,.3);color:var(--text);outline:none;}
.kpig-root .kpig-bar input:focus{border-color:var(--gold);}
.kpig-root .kpig-send{width:40px;height:40px;flex:0 0 auto;border-radius:50%;border:none;cursor:pointer;font-size:17px;font-weight:800;color:var(--gold-ink);background:linear-gradient(180deg,var(--gold-soft),var(--gold));}
.kpig-root .kpig-send:disabled{opacity:.45;cursor:not-allowed;}

@media(min-width:1280px){
  body.kp-railed .kp-hub{ max-width:560px; margin-inline-start:max(24px, calc((100vw - 392px - 560px) / 2)); }
  body.kp-railed .kp-chrome .notifPanel,
  body.kp-railed .kp-chrome .dockPanel{ inset-inline-end:32px; width:344px; }
}

/* ============================================================
   RTL (html[dir=rtl]) — structural mirrors with NO 1:1 logical
   property: transform/animation origins, slide directions, the
   directional arrow glyph, and physical env(safe-area-inset-*)
   sides. All positional anchoring above already mirrors via
   logical inset/margin/border properties — so the friends dock
   (inline-end) and the table-chat corner (inline-start) swap
   screen corners TOGETHER and never collide.
   ============================================================ */
html[dir=rtl] .kp-root .dockPanel{transform-origin:bottom left;}
html[dir=rtl] .kp-root .notifPanel{transform-origin:top left;}
html[dir=rtl] .kp-root .nitem.leaving{transform:translateX(-14px);}
html[dir=rtl] .kp-root .pwfArrow{transform:scaleX(-1);}
/* inline-start = the RIGHT screen edge in RTL ⇒ swap the physical safe-area side */
html[dir=rtl] .kpig-root .kpig-fab,
html[dir=rtl] .kpig-root .kpig-panel{inset-inline-start:max(14px,env(safe-area-inset-right));}

/* ============================================================
   SPECTATOR §7 — HONEST WATCH-REFUSAL CARDS
   When "Watch" is refused (private / friends-only / ended / viewers-off),
   presence.js renders an honest refusal CARD in the same bottom-anchored
   .kp-watchLayer / .kp-watchSheet idiom as the watch-confirm — never a bare
   toast. These sheets are appended to <body> OUTSIDE .kp-root, so their core
   look is set by presence.js's injectWatchCss() inline <style>. The rules below
   MIRROR that styling so the refusal cards are also coherent if presence.css is
   present and the inline injector hasn't run (defensive parity). The refusal
   kicker is a neutral situational label (gold), not the green "spectator" accent;
   the actions keep the gold-primary / ghost-secondary pairing. A viewers-off card
   has a single full-width gold button by design (one honest next step).
   ============================================================ */
.kp-watchLayer{position:fixed;inset:0;z-index:var(--kz-modal,2147483200);display:flex;align-items:flex-end;justify-content:center;padding:16px;
  background:rgba(2,5,4,.58);backdrop-filter:blur(8px);}
.kp-watchSheet{width:min(440px,100%);border:1px solid rgba(255,255,255,.14);border-radius:22px;
  background:linear-gradient(180deg,#17231f,#0f1513);box-shadow:0 28px 70px rgba(0,0,0,.55);padding:18px;color:#eef5f0;}
.kp-refuseSheet{text-align:center;}
.kp-refuseSheet .kp-watchK{color:#ffd25e;}
/* §7 refusal-card icon glyph (Spectator Mode design): centered lock/eye-off/clock, cyan for friends-only. */
.kp-refuseGlyph{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  margin:2px auto 14px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.05);color:rgba(238,245,240,.5);}
.kp-refuseGlyph svg{width:26px;height:26px;}
.kp-refuseGlyph.watch{background:rgba(70,198,221,.12);border-color:rgba(70,198,221,.34);color:#92e0ef;}
.kp-watchK{font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#7edc9e;margin-bottom:8px;}
.kp-watchTitle{font-size:24px;font-weight:900;margin-bottom:8px;}
.kp-watchBody{font-size:14px;line-height:1.45;color:rgba(238,245,240,.72);margin-bottom:16px;}
.kp-watchActions{display:flex;gap:10px;}
.kp-watchActions button{flex:1;border:0;border-radius:13px;padding:12px 14px;font-weight:900;cursor:pointer;}
.kp-watchGo{background:#f5b301;color:#1b1709;}
.kp-watchCancel{background:rgba(255,255,255,.08);color:#eef5f0;}
.kp-refuseActions{flex-direction:column;}
.kp-refuseActions button{width:100%;min-width:0;}
@media (min-width:700px){.kp-watchLayer{align-items:center;}.kp-watchSheet{border-radius:24px;}}

/* ============================================================
   A010 — ONE OVERLAY POLICY (platform/layers.js → window.KarootyLayers)
   Every rule here is scoped to html.kl-on, the class the layer manager sets ONLY when
   KAROOTY_FLAGS.layers is on (or ?beta=layers). Off — the live default, every shell page,
   every older game build — none of this applies and the page renders as it did. The
   stacking roots above read the manager's --kz-* tiers with today's numbers as the
   fallback (so off = the same numbers): .kp-chrome / .kpig-root = sheet, .kp-watchLayer
   = modal. Inner z-indexes stay literal: they order things INSIDE .kp-chrome's own
   stacking context.
   --kl-lane-top is the manager's "below the game's top bar" line; it already includes
   the top safe area, so nothing here adds env(safe-area-inset-top) to it again.
   ============================================================ */
/* Feedback toasts (Muted / Saved / Request sent …) stay in the chrome, above the card's
   scrim — but below the top bar and the notch, and the text lets a tap through (R2).
   Invites, friend requests and DMs no longer land here: they go to the lane (presence.js). */
html.kl-on .kp-root .toastWrap{top:var(--kl-lane-top,calc(64px + env(safe-area-inset-top,0px)));}
html.kl-on .kp-root .toast{pointer-events:none;}
html.kl-on .kp-root .toast button{pointer-events:auto;}
/* The notifications panel opens from a friend-request notice in-game: under the top bar,
   clear of the landscape side insets and the home bar. */
html.kl-on .kp-root .notifPanel{top:var(--kl-lane-top,calc(62px + env(safe-area-inset-top,0px)));
  left:max(14px,env(safe-area-inset-left,0px));right:max(14px,env(safe-area-inset-right,0px));
  max-height:min(540px,calc(100dvh - 28px - env(safe-area-inset-bottom,0px) - var(--kl-lane-top,calc(62px + env(safe-area-inset-top,0px)))));}
/* The friend DM floats in the inline-end corner from 560px (phones in landscape): keep its
   Close / Send out of the side inset. Its bottom already pads env() inside .kchatBar. */
@media(min-width:560px){
  html.kl-on .kp-root .kchat{inset-inline-end:max(18px,env(safe-area-inset-right,0px));}
  html.kl-on[dir=rtl] .kp-root .kchat{inset-inline-end:max(18px,env(safe-area-inset-left,0px));}
}