/* ===========================================================
   Words Across v2 — Play Styles (HUD overlay, polished)
   CLEANED + DEDUPED + ORDERED Z-INDEX
   =========================================================== */

/* ---------- Tokens ---------- */
:root{
  /* Colors */
  --bg-0:#05070e;
  --bg-1:#0a1020;
  --ink:#eaf1ff;
  --ink-dim:#9ab0cf;
  --accent:#5ec8ff;

  --grid:#1a2440;
  --grid-bold:#233259;

  /* Sizing */
  --header-h:56px;
  --tabbar-h:56px;
  --dock-w:128px;
  --dock-gap:12px;

  /* Effects */
  --radius-sm:10px; --radius-md:14px; --radius-lg:18px;
  --glass:rgba(255,255,255,.06);
  --backdrop:saturate(140%) blur(10px);
  --shadow-1:0 6px 18px rgba(0,0,0,.35);
  --shadow-2:0 12px 32px rgba(0,0,0,.5);

  /* ---------- Z-Index Ladder (low → high) ----------
     Keep this order stable; only edit values here. */
  --z-canvas:0;      /* base canvas */
  --z-overlay:200;   /* non-interactive canvas overlay root */
  --z-hud:600;       /* HUD controls & LIVE */
  --z-panel:800;     /* right panels / sheets */
  --z-fab:1000;      /* dock/tabbar always tappable */
  --z-rack:5000;     /* rack above HUD/FAB but below header/nav */
  --z-tooltip:1800;  /* tooltips */
  --z-header:2000;   /* sticky header */
  --z-nav:2200;      /* mobile nav dropdown (over header) */
  --z-nav-toggle:2210; /* toggle above the dropdown */
  --z-scrim:9000;    /* emergency scrims/modals */
}

/* ===========================================================
   Reset & Utilities
   =========================================================== */
*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body.wa2{
  background:var(--bg-0); color:var(--ink);
  font:15px/1.4 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial;
}
:focus{ outline-color:transparent; }
:focus-visible{ outline:none; }
.u-hidden{ display:none !important; }
.u-no-events{ pointer-events:none !important; }

/* ===========================================================
   Header + Navigation
   =========================================================== */
.wa2__hdr{
  position:sticky; top:0; z-index:var(--z-header);
  height:var(--header-h); display:flex; align-items:center; gap:10px;
  padding:0 12px;
  background:linear-gradient(180deg, rgba(19,28,49,.9), rgba(10,16,32,.92));
  border-bottom:1px solid #132246; box-shadow:0 2px 18px rgba(0,0,0,.35);
}
.wa2__hdr .brand{
  flex:1 1 auto; min-width:0; font-weight:900; letter-spacing:.4px;
  background:linear-gradient(90deg, #36d1ff, var(--accent));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Inline nav (desktop) */
.wa2__nav{
  display:flex; gap:10px;
  position:relative; z-index:var(--z-nav);
}
.wa2__nav a{
  color:var(--ink); text-decoration:none; padding:6px 8px; border-radius:8px;
  border:1px solid transparent;
}
.wa2__nav a:hover{ border-color:#2a4480; background:rgba(255,255,255,.04); }

/* Mobile menu toggle */
.wa2__nav__toggle{
  display:none; background:transparent; color:var(--ink);
  border:1px solid #27406e; border-radius:8px; padding:6px 10px; cursor:pointer;
  position:relative; z-index:var(--z-nav-toggle);
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.brand__link { display: inline-flex; align-items: center; text-decoration: none; }
.brand__logo {
  height: 40px; margin-top: 5px;
  width: auto;
  display: block;
  filter: drop-shadow(0 0 6px rgba(94,200,255,0.4));
}

/* Mobile nav dropdown */
@media (max-width: 720px){
  .wa2__nav__toggle{ display:inline-block; }

  .wa2__nav{
    position:fixed;
    top:var(--header-h);
    right:8px; left:auto;
    z-index:var(--z-nav);
    display:block;
    background:rgba(10,16,32,.98);
    border:1px solid #20345e;
    border-radius:12px;
    padding:8px;
    box-shadow:0 12px 32px rgba(0,0,0,.5);
    transform:translateZ(0);
  }
  .wa2__nav[hidden]{ display:none !important; }
  .wa2__nav a{ display:block; }
}

/* ===========================================================
   Stage & Canvas
   =========================================================== */
.wa2__main{ position:relative; }
.wa2__stage{
  position:relative;
  height:calc(100dvh - var(--header-h));
  width:100%; overflow:hidden; touch-action:none;
  background:
    radial-gradient(1200px 800px at 10% -20%, #0a1230 0%, transparent 60%),
    radial-gradient(900px 600px at 110% 120%, #08102a 0%, transparent 60%),
    var(--bg-1);
  border-top:1px solid #0e1b3a;
}
#wa2-canvas{
  position:absolute; inset:0; width:100%; height:100%; display:block; z-index:var(--z-canvas);
}
.wa2__overlay{
  position:absolute; inset:0; z-index:var(--z-overlay); pointer-events:none;
}
.wa2__overlay *{ pointer-events:auto; } /* allow HUD/LIVE to be clickable */

/* ===========================================================
   Buttons (shared styles)
   =========================================================== */
.wa2__btn,
.wa2__dock__btn,
.btn{
  color:#fff; position:relative;
  border-radius:10px; border:1px solid #2b4a80;
  background:linear-gradient(180deg, rgba(45,73,128,.95), rgba(22,36,68,.92));
  padding:6px 10px;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 6px 14px rgba(0,0,0,.35);
  cursor:pointer; transition:transform .06s, box-shadow .2s, border-color .2s, background .2s;
}
.wa2__btn:hover, .wa2__dock__btn:hover, .btn:hover{
  border-color:#3c68ba;
  background:linear-gradient(180deg, rgba(58,92,160,.98), rgba(26,44,84,.96));
}
.wa2__btn:active, .wa2__dock__btn:active, .btn:active{ transform:translateY(1px); }
.wa2__btn:focus-visible, .wa2__dock__btn:focus-visible, .btn:focus-visible{
  outline:none; box-shadow:0 0 0 2px rgba(94,200,255,.55), 0 0 0 6px rgba(94,200,255,.22);
}
.wa2__btn.sm{ padding:4px 8px; font-size:12px; border-radius:9px; }
.icon-btn{ width:32px; height:32px; padding:0; display:grid; place-items:center; border-radius:9px; }
.icon-btn svg{ display:block; fill:currentColor; }

/* ===========================================================
   HUD (zoom/center & LIVE)
   =========================================================== */
.wa2__hud{
  position:absolute; z-index:var(--z-hud);
  display:flex; align-items:center; gap:8px; pointer-events:auto;
}
.wa2__hud--left{
  top:12px; left:12px;
  background:rgba(8,12,20,.72);
  border:1px solid rgba(44,66,110,.8);
  border-radius:12px; padding:6px; backdrop-filter:var(--backdrop);
  box-shadow:0 8px 22px rgba(0,0,0,.45);
}
.wa2__hud--right{ top:12px; right:12px; }

.live-pill{
  letter-spacing:.08em;
  background:linear-gradient(90deg, #33d477, #8be85e);
  color:#001b0b; font-weight:900; font-size:8px;
  padding:4px 6px; border-radius:999px;
  box-shadow:0 0 12px rgba(71,220,120,.65), 0 0 26px rgba(80,240,125,.45);
}

/* ===========================================================
   Tooltip
   =========================================================== */
.wa2__tooltip{
  position:absolute; left:0; top:0; transform:translate(10px,-10px);
  backdrop-filter:var(--backdrop);
  background:linear-gradient(180deg, rgba(10,14,22,.86), rgba(10,14,22,.94));
  border:1px solid #21335a; border-radius:10px;
  padding:8px 10px; color:var(--ink);
  font:12px/1.25 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial;
  box-shadow:0 10px 32px rgba(0,0,0,.5);
  pointer-events:none; z-index:var(--z-tooltip); max-width:260px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; -webkit-user-select:none; user-select:none;
}
.wa2__tooltip b{ color:#fff; }

/* ===========================================================
   Panels (right drawers / mobile sheets)
   =========================================================== */
.wa2__panel{
  position:absolute; right:12px; top:calc(var(--header-h) + 8px);
  bottom:calc(12px + var(--tabbar-h));
  width:320px; display:flex; flex-direction:column;
  background:linear-gradient(180deg, rgba(8,12,20,.90), rgba(8,12,20,.96));
  border:1px solid rgba(30,40,66,.9); border-radius:14px;
  box-shadow:var(--shadow-2); backdrop-filter:var(--backdrop);
  z-index:var(--z-panel); pointer-events:auto;
}
.wa2__panel[hidden]{ display:none !important; }

.wa2__panel__head{
  position:sticky; top:0; z-index:1;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px;
  background:linear-gradient(180deg, rgba(12,18,32,.95), rgba(9,14,26,.95));
  border-bottom:1px solid #223458;
}
.wa2__panel__head .title{ font-weight:800; color:#eaf1ff; letter-spacing:.02em; }

.wa2__panel__body{
  flex:1 1 auto; min-height:0;
  padding:10px; overflow:auto; display:flex; flex-direction:column; gap:8px;
  -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:#314a7a transparent;
}
.wa2__panel__body::-webkit-scrollbar{ width:10px; }
.wa2__panel__body::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, #2a3f66, #1c2a4a);
  border-radius:12px; border:2px solid transparent; background-clip:padding-box;
}

/* Recent list */
.wa2__recent__item{
  display:grid; grid-template-columns:36px 1fr auto; gap:8px; align-items:center;
  background:rgba(18,25,41,.82); border:1px solid rgba(28,42,74,.85);
  border-radius:12px; padding:8px; cursor:pointer;
  transition:transform .06s, outline-color .2s, background .2s, border-color .2s;
}
.wa2__recent__item:hover{
  transform:translateY(-1px); outline:1px solid var(--accent);
  background:rgba(26,36,58,.92); border-color:#2d4d8a;
}
.wa2__recent__avatar{ width:36px; height:36px; border-radius:50%; overflow:hidden; background:#0a1222; border:1px solid #24335a; }
.wa2__recent__avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.wa2__recent__main{ display:flex; flex-direction:column; min-width:0; }
.wa2__recent__word{ color:#fff; font-weight:800; letter-spacing:.02em; }
.wa2__recent__meta{ color:#a9b7d9; font-size:12px; opacity:.9; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wa2__recent__pts{
  color:#eaffc7; background:linear-gradient(180deg, rgba(88,198,104,.22), rgba(62,198,84,.14));
  border:1px solid rgba(88,198,104,.45); font-weight:800; font-size:14px; border-radius:10px; padding:2px 6px;
}

/* Leaderboard */
.wa2__leader__row{
  position:relative;
  display:grid; grid-template-columns:56px 1fr auto;
  gap:12px; align-items:center;
  padding:14px 14px 12px;
  border:1px solid #24385f; border-radius:14px;
  background:linear-gradient(180deg, rgba(16,26,50,.92), rgba(12,20,40,.96));
  box-shadow:0 10px 24px rgba(0,0,0,.28);
}
.leader-rank{
  position:absolute; top:-10px; right:12px;
  min-width:28px; height:28px; padding:0 8px;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:900; font-size:13px; letter-spacing:.02em;
  color:#2b1b00; border-radius:999px;
  background:
    radial-gradient(120% 120% at 30% 25%, #ffe8a6 0%, #ffd36b 40%, #ffbe36 60%, #eaa116 85%),
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 40%);
  border:1px solid rgba(210,150,30,.9);
  box-shadow:
    0 2px 0 rgba(255,255,255,.35) inset,
    0 -2px 10px rgba(140,80,0,.35) inset,
    0 8px 18px rgba(0,0,0,.45);
}
.wa2__leader__avatar{
  width:56px; height:56px; border-radius:12px; overflow:hidden;
  border:1px solid rgba(180,200,235,.38);
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)),
    radial-gradient(150% 120% at 30% 8%, rgba(255,255,255,.18), transparent 60%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.14) inset,
    0 -8px 16px rgba(0,0,0,.25) inset,
    0 8px 18px rgba(0,0,0,.35);
}
.wa2__leader__avatar a{ display:block; width:100%; height:100%; }
.wa2__leader__avatar img{ display:block; width:100%; height:100%; object-fit:cover; }
.wa2__leader__stack{ min-width:0; display:flex; flex-direction:column; gap:6px; }
.wa2__leader__title{ display:flex; align-items:baseline; gap:8px; min-width:0; flex-wrap:wrap; }
.wa2__leader__name{
  color:#eaf1ff; font-weight:900; text-decoration:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.wa2__leader__name:hover{ text-decoration:underline; }
.wa2__leader__handle{ color:#9ab0cf; font-size:12px; opacity:.95; white-space:nowrap; }
.wa2__leader__meta{
  display:flex; gap:6px; flex-wrap:wrap; align-items:center;
  color:#9ab0cf; font-size:12px; opacity:.95;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:2px 8px; border-radius:999px;
  border:1px solid #27406e;
  background:linear-gradient(180deg, rgba(24,36,64,.75), rgba(14,24,44,.85));
  color:#cfe0ff; font-size:12px;
}

/* Score column */
.wa2__leader__score{
  justify-self:end;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; min-width:84px; white-space:nowrap;
}
.leader-coin{
  min-width:25px; height:25px; padding:0 10px;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:900; font-size:12px; letter-spacing:.02em;
  color:#2b1b00; border-radius:999px;
  background:
    radial-gradient(120% 120% at 30% 25%, #ffe8a6 0%, #ffd36b 40%, #ffbe36 60%, #eaa116 85%),
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 40%);
  border:1px solid rgba(210,150,30,.9);
  box-shadow:
    0 2px 0 rgba(255,255,255,.35) inset,
    0 -2px 10px rgba(140,80,0,.35) inset,
    0 8px 18px rgba(0,0,0,.45);
  line-height:1;
}
.score-value{
  font-weight:900; color:#fff; font-variant-numeric:tabular-nums;
  padding:6px 12px; border-radius:14px;
  background:linear-gradient(180deg, rgba(62,90,160,.98), rgba(30,50,98,.96));
  border:1px solid #2b4a80;
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 8px 18px rgba(0,0,0,.35);
  white-space:nowrap; font-size:12px;
}

/* Leaderboard: responsive tweaks */
@media (min-width:880px){
  .wa2__leader__row{ grid-template-columns:64px 1fr auto; padding:16px 16px 14px; }
  .wa2__leader__avatar{ width:64px; height:64px; border-radius:14px; }
  .leader-rank{ top:-12px; right:16px; }
  .wa2__leader__score{ min-width:96px; gap:8px; }
  .leader-coin{ min-width:40px; height:40px; font-size:16px; }
  .score-value{ font-size:15px; }
}

/* Chat */
.wa2__chat{ display:flex; flex-direction:column; gap:10px; height:100%; }
.wa2__chat__log{ flex:1 1 auto; overflow:auto; display:flex; flex-direction:column; gap:8px; }
.wa2__chat__msg{ background:rgba(22,30,46,.9); border:1px solid #213459; border-radius:10px; padding:8px 10px; }
.wa2__chat__form{ display:flex; gap:8px; }
.wa2__chat__input{
  flex:1 1 auto; background:#0e1a30; color:#dfe9ff; border:1px solid #27406e; border-radius:10px; padding:8px 10px;
}

/* ===========================================================
   Dock (desktop) & Tabbar (mobile)
   =========================================================== */
.wa2__dock{
  position:absolute; right:12px; top:calc(var(--header-h) + 12px);
  display:none; flex-direction:column; gap:8px;
  width:var(--dock-w); align-items:stretch; z-index:var(--z-fab);
}
.wa2__dock__btn{ width:100%; padding:10px 12px; font-weight:700; }

.wa2__tabbar{
  position:absolute; left:12px; right:12px; bottom:0;
  display:flex; gap:8px; z-index:var(--z-fab);
  justify-content:space-between; pointer-events:auto;
  padding-bottom:max(12px, env(safe-area-inset-bottom));
  min-height:var(--tabbar-h);
}
.wa2__tab{
  pointer-events:auto; flex:1 1 0; border-radius:14px;
  background:linear-gradient(180deg, rgba(16,26,50,.95), rgba(12,20,40,.95));
  border:1px solid #1f355e; color:#fff; font-weight:800; padding:10px 0;
  transition:background .2s, transform .06s, border-color .2s;
}
.wa2__tab:hover{ border-color:#2f56a0; }
.wa2__tab:active{ transform:translateY(1px); }
.wa2__dock__btn.is-active,
.wa2__tab.is-active{
  background:linear-gradient(180deg, rgba(28,48,92,.98), rgba(18,30,58,.98));
  border-color:#3b6dd3; box-shadow:0 0 0 1px rgba(59,109,211,.45) inset;
}

/* Desktop shows dock, hides tabbar; shift panels to clear dock */
@media (min-width:992px){
  .wa2__dock{ display:flex; }
  .wa2__tabbar{ display:none; }
  .wa2__panel{ right:calc(12px + var(--dock-w) + var(--dock-gap)); bottom:12px; }
}

/* Panel sizing for smaller screens */
@media (max-width:900px){
  .wa2__panel{
    right:8px; top:calc(var(--header-h) + 6px);
    bottom:calc(8px + var(--tabbar-h));
    width:min(92vw, 360px);
  }
}
@media (max-width:768px){
  .wa2__panel{
    left:8px; right:8px; width:auto; top:auto;
    bottom:calc(8px + var(--tabbar-h));
    max-height:70vh;
  }
}

/* ===========================================================
   Rack — Always Visible (Bottom-Center)
   =========================================================== */
:root{
  --wa2-rack-tiles:7;
  --wa2-rack-gap:8px;
  --wa2-rack-tile:clamp(36px, 5vw, 56px);
  --wa2-rack-pad:12px;
  --wa2-ink:#ffffff;
}

/* Single source of truth for rack positioning */
#wa2-rack{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(var(--tabbar-h) + 8px + env(safe-area-inset-bottom));
  z-index:var(--z-rack); display:block;
}
@media (min-width:992px){
  #wa2-rack{ bottom:12px; }
}

.wa2__rackbar{
  padding:var(--wa2-rack-pad);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(18,25,41,.78), rgba(12,18,34,.68));
  border:1px solid rgba(150,185,255,.18);
  box-shadow:0 8px 28px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.08);
  color:var(--wa2-ink);
  backdrop-filter:blur(12px) saturate(120%);
  -webkit-backdrop-filter:blur(12px) saturate(120%);
}

/* Exact 7 slots wide */
.wa2__rack{
  display:grid;
  grid-template-columns:repeat(7, var(--wa2-rack-tile));
  gap:var(--wa2-rack-gap);
  align-items:center; justify-items:center;
  min-width:calc((var(--wa2-rack-tile) * var(--wa2-rack-tiles))
    + (var(--wa2-rack-gap) * (var(--wa2-rack-tiles) - 1)));
}

/* Tile */
.wa2__tile{
  width:var(--wa2-rack-tile); height:var(--wa2-rack-tile);
  border-radius:12px; display:grid; place-items:center;
  color:#0c1224; font-weight:800; position:relative; user-select:none;
  background:
    radial-gradient(120% 120% at 50% 0%,
      rgba(255,255,255,.35),
      rgba(255,255,255,.18) 45%,
      rgba(255,255,255,.12) 60%,
      rgba(255,255,255,.10) 100%),
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.12));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -6px 20px rgba(0,0,0,.18),
    0 6px 18px rgba(0,0,0,.35);
  border:1px solid rgba(0,0,0,.18);
  Z-INDEX: 5001;
}

.wa2__tile__ch{
  font-size: clamp(18px, 4.2vw, 28px);
  letter-spacing: .02em;
  color: #fff;
  /* Preferred crisp outline (Safari/Chromium) */
  -webkit-text-stroke: 2px rgba(0,0,0,.65);
  paint-order: stroke fill;

  /* Fallback outline (Firefox/others) */
  text-shadow:
    -1px -1px 0 rgba(0,0,0,.65),
     1px -1px 0 rgba(0,0,0,.65),
    -1px  1px 0 rgba(0,0,0,.65),
     1px  1px 0 rgba(0,0,0,.65),
     0    1px 0 rgba(0,0,0,.9); /* your existing soft drop */
}


/* Points micro-label */
.wa2__tile::after{
  content:attr(data-pts);
  position:absolute; right:8px; bottom:6px;
  font:700 11px/1 ui-sans-serif,system-ui;
  color:rgba(12,18,36,.9);
  text-shadow:0 1px 0 rgba(255,255,255,.5);
  opacity:.9;
}

/* Rack CTA (guest state) */
.wa2__rack__login{
  grid-column:1 / -1; width:100%;
  height:var(--wa2-rack-tile);
  border-radius:12px; font-weight:700; font-size:14px;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg, #2a62ff, #224bcc);
  color:#fff; cursor:pointer;
}
.wa2__rack__login:hover{ filter:brightness(1.06); }

/* Font lock for rack tiles */
#wa2-rack .wa2__tile,
#wa2-rack .wa2__tile .wa2__tile__ch{
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial;
}
#wa2-rack .wa2__tile .wa2__tile__ch{ font-weight:700; }

/* Tiny screens */
@media (max-width:360px){
  :root{ --wa2-rack-tile:32px; --wa2-rack-gap:12px; }
}

/* ===========================================================
   DnD Ghost (isolated, no leakage)
   =========================================================== */
.wa2__dragghost{ all:initial; position:fixed; z-index:var(--z-scrim); }
.wa2__dragghost .wa2__ghosttile{ all:initial; display:block; }
.wa2__dragghost .wg-tile{
  width:var(--wa2-rack-tile, 40px); height:var(--wa2-rack-tile, 40px);
  border-radius:8px; display:grid; place-items:center;
  background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.12));
  border:2px solid rgba(94,200,255,.65);
  box-shadow:0 0 0 1px rgba(94,200,255,.15) inset;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial;
  position:relative;
}
.wa2__dragghost .wg-ch{
  font-weight:700;
  font-size:calc(var(--wa2-rack-tile, 40px) * 0.58);
  color:#1a2544; line-height:1; transform:translateY(-2px);
}
.wa2__dragghost .wg-pts{
  position:absolute; right:5px; bottom:4px;
  font-weight:600;
  font-size:calc(var(--wa2-rack-tile, 40px) * 0.28);
  color:rgba(0,0,0,.65); line-height:1;
}

/* ===========================================================
   Responsive Helpers
   =========================================================== */
@media (prefers-reduced-motion:reduce){
  *{ scroll-behavior:auto !important; }
  .wa2__btn, .wa2__dock__btn, .btn, .wa2__recent__item{ transition:none !important; }
}
/* --- FIX: lift rack above the actual tabbar footprint (mobile/tablet) --- */
@media (max-width: 992px){
  /* tabbar has min-height + bottom padding + safe-area; give the rack extra air */
  :root{
    /* tweak gap if you want more/less clearance */
    --rack-gap-from-tabbar: 0px;
  }
  #wa2-rack{
    bottom: calc(
      var(--tabbar-h)                 /* tabbar min-height */
      + max(5px, env(safe-area-inset-bottom))  /* tabbar bottom padding */
      + var(--rack-gap-from-tabbar)   /* extra breathing room */
    ) !important;
  }
}
/* Discard tray sits ABOVE the rack, never over it */
#wa2-discard-tray {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  /* keep it above the rack height + some gap */
  bottom: calc(var(--wa2-rack-tile, 56px) + 28px);
  z-index: 1150;              /* below the rack (rack is 1200 in your CSS), above canvas */
  pointer-events: auto;       /* can be tapped/dragged */
}

/* The actual sheet */
#wa2-discard-tray .wa2__discard__sheet {
  display: grid;
  grid-auto-flow: column;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(18,25,41,.90), rgba(12,18,34,.92));
  border: 1px solid rgba(150,185,255,.22);
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
}

/* The drop target list */
#wa2-discard-list {
  display: grid;
  grid-auto-flow: column;
  gap: 8px;
}

/* Make sure the tray’s bounding box is just the sheet */
#wa2-discard-tray[hidden] { display: none !important; }
/* Plays pill (HUD right) */
.wa2__plays {
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  background:linear-gradient(180deg, rgba(24,36,64,.92), rgba(14,24,44,.96));
  border:1px solid #27406e; color:#eaf1ff;
  font:600 12px/1 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  white-space:nowrap;
}
.wa2__plays .dot {
  width:8px; height:8px; border-radius:999px; background:#8be85e; box-shadow:0 0 8px rgba(139,232,94,.7);
}
.wa2__plays .count { font-weight:900; }
.wa2__plays .hint  { color:#9ab0cf; opacity:.95; }

/* Tiny chip for mobile tabbar */
.wa2__playschip {
  pointer-events:none;
  position:absolute; right:12px; bottom:calc(12px + env(safe-area-inset-bottom));
  padding:4px 8px; border-radius:999px;
  background:rgba(24,36,64,.92); border:1px solid #27406e; color:#eaf1ff;
  font:800 11px/1 ui-sans-serif,system-ui; box-shadow:0 6px 16px rgba(0,0,0,.35);
}
@media (min-width:992px){ .wa2__playschip{ display:none; } }

.wa2__toast {
  transition: transform .25s cubic-bezier(.2,.8,.3,1.1), opacity .25s ease;
}
/* ===========================================================
   Words Across v2 — Chat Panel (Final Polished Version)
   =========================================================== */

/* ---------- Panel Shell ---------- */
.wa2__panel--chat {
  position: absolute;
  right: 160px;
  top: calc(var(--header-h) + 8px);
  bottom: calc(var(--tabbar-h) + 12px);
  width: 320px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(8,12,20,0.52), rgba(6,10,20,0.58));
  border: 1px solid rgba(30,40,66,0.9);
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  z-index: var(--z-panel);
  pointer-events: auto;
  min-height: 0;
  overflow: hidden;

}

/* ---------- Scrollable Message List ---------- */
.wa2__chat__list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 12px;
  display: grid;
  gap: 10px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(120,150,200,.35) transparent;
}

/* Chromium/WebKit scrollbar polish */
.wa2__chat__list::-webkit-scrollbar {
  width: 10px;
}
.wa2__chat__list::-webkit-scrollbar-track {
  background: transparent;
}
.wa2__chat__list::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom,
    rgba(120,150,200,.35),
    rgba(120,150,200,.20));
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.wa2__chat__list::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom,
    rgba(140,170,220,.5),
    rgba(140,170,220,.35));
  background-clip: content-box;
}

/* ---------- Message Rows ---------- */
.wa2__chat__row {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: start;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  color: var(--ink, #dfe9ff);
}

.wa2__chat__avatar {
  width: 40px;
  height: 40px;
  border-radius: 6px; /* grid style corners */
  overflow: hidden;
  background: #0a1222;
  border: 1px solid rgba(255,255,255,0.08);
}
.wa2__chat__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wa2__chat__stack {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.wa2__chat__title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  opacity: 0.9;
  flex-wrap: wrap;
}
.wa2__chat__name {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.wa2__chat__name:hover { text-decoration: underline; }
.wa2__chat__handle,
.wa2__chat__dot,
.wa2__chat__time {
  color: var(--ink-dim, #9ab0cf);
  opacity: 0.8;
  font-weight: 400;
}
.wa2__chat__body {
  margin-top: 2px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--ink);
  word-wrap: break-word;
  white-space: pre-wrap;
}

/* ---------- Dividers & Empty ---------- */
.wa2__chat__divider {
  text-align: center;
  font-size: 12px;
  color: var(--ink-dim,#9ab0cf);
  opacity: 0.7;
  margin: 6px 0;
}
.wa2__chat__pad { height: 4px; }
.wa2__chat__empty {
  text-align: center;
  color: var(--ink-dim,#9ab0cf);
  font-size: 14px;
  padding: 20px;
}

/* ---------- Composer (Text Field + Button) ---------- */
.wa2__chat__composer {
  border-top: 1px solid rgba(40,60,90,.6);
  background: linear-gradient(180deg, rgba(10,16,32,.96), rgba(6,10,20,.98));
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#chat-form {
  display: grid;
  grid-template-columns: 1fr 92px;
  gap: 8px;
  align-items: end;
}

/* Textarea — comfortable size & focus glow */
#chat-input {
  width: 100%;
  min-height: 44px;
  max-height: 140px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(90,120,170,.35);
  background: rgba(10,18,35,.9);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.45;
  resize: none;
  box-shadow: inset 0 0 6px rgba(0,0,0,.25);
  transition: border-color .15s, box-shadow .15s;
}
#chat-input:focus {
  outline: none;
  border-color: var(--accent,#5ec8ff);
  box-shadow: 0 0 6px rgba(94,200,255,.45);
}

/* Send button — bold neon accent */
#chat-send {
  height: 44px;
  padding: 0 16px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--accent,#5ec8ff), #4ab4ea);
  color: #000;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .3px;
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease, box-shadow .15s;
  box-shadow: 0 0 8px rgba(94,200,255,.4);
}
#chat-send:hover {
  filter: brightness(1.15);
  box-shadow: 0 0 12px rgba(94,200,255,.55);
  transform: translateY(-1px);
}
#chat-send:active {
  transform: translateY(0);
  filter: brightness(.95);
}

/* ---------- Meta line (status/pager) ---------- */
.wa2__chat__meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ink-dim,#9ab0cf);
  opacity: .8;
  padding-top: 2px;
}

/* ---------- Responsive ---------- */

/* Mobile (under 640px): full-width bottom sheet style */
@media (max-width: 640px) {
  .wa2__panel--chat {
    right: 0;
    left: 0;
    width: auto;
    top: var(--header-h);
    bottom: var(--tabbar-h);
    border-radius: 0;
    border-left: none;
    border-right: none;
    box-shadow: 0 -2px 24px rgba(0,0,0,0.6);
  }
  #chat-form {
    grid-template-columns: 1fr 72px;
  }
  #chat-send {
    height: 42px;
    font-size: 13px;
    padding: 0 12px;
  }
  #chat-input {
    font-size: 14px;
    min-height: 42px;
  }
  .wa2__chat__row {
    grid-template-columns: 36px 1fr;
    gap: 8px;
  }
  .wa2__chat__avatar {
    width: 36px;
    height: 36px;
  }
}

/* Desktop large (>1024px): slightly wider and spaced */
@media (min-width: 1024px) {
  .wa2__panel--chat {
    width: 360px;
  }
  #chat-form {
    grid-template-columns: 1fr 100px;
  }
  #chat-send {
    height: 46px;
  }
}
.wa2__hdr{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--panel,#0a1222);
  border-bottom:1px solid #0c1328;
  padding:0 16px;height:56px;z-index:30;
}
.wa2__nav__toggle{
  background:none;border:0;color:#eaf1ff;
  font-size:22px;cursor:pointer;
}
.wa2__nav a{
  color:#9bd3ff;text-decoration:none;margin-left:18px;font-weight:600;
}
.wa2__nav a:hover{text-decoration:underline}
.site-footer{
  border-top:1px solid rgba(255,255,255,.08);
  background:var(--panel,#0a1222);
  color:#cfe3ff;
  padding:24px clamp(20px,6vw,72px);
  font-size:14px;
}
.site-footer__row{
  display:flex;gap:16px;flex-wrap:wrap;
  align-items:center;justify-content:space-between;
}
.status-dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--accent,#24d47b);display:inline-block;margin-right:8px;
}
.wa2__hdr{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--panel,#0a1222);
  border-bottom:1px solid #0c1328;
  padding:0 16px;height:56px;z-index:30;
}
.wa2__nav__toggle{
  background:none;border:0;color:#eaf1ff;
  font-size:22px;cursor:pointer;
}
.wa2__nav a{
  color:#9bd3ff;text-decoration:none;margin-left:18px;font-weight:600;
}
.wa2__nav a:hover{text-decoration:underline}
.site-footer{
  border-top:1px solid rgba(255,255,255,.08);
  background:var(--panel,#0a1222);
  color:#cfe3ff;
  padding:24px clamp(20px,6vw,72px);
  font-size:14px;
}
.site-footer__row{
  display:flex;gap:16px;flex-wrap:wrap;
  align-items:center;justify-content:space-between;
}
.status-dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--accent,#24d47b);display:inline-block;margin-right:8px;
}
/* ===== Recent Plays — Compact & High-Contrast ===== */
:root {
  /* scale tweaks (slightly smaller than default) */
  --wa2-font-xs: 0.78rem;
  --wa2-font-sm: 0.86rem;
  --wa2-font-md: 0.95rem;
  --wa2-font-lg: 1.15rem; /* title sized down a touch */

  /* colors tuned for dark UI */
  --wa2-ink-1: #e9eef6;           /* primary text */
  --wa2-ink-2: #b7c2d2;           /* secondary text */
  --wa2-ink-3: #8fa0b8;           /* tertiary */
  --wa2-ink-inv: #0b1220;         /* inverted for pills */

  --wa2-bg-1: rgba(9, 14, 26, 0.72);     /* card bg */
  --wa2-bg-2: rgba(16, 24, 43, 0.72);    /* chip bg */
  --wa2-bg-3: rgba(28, 40, 72, 0.66);    /* hover/active */
  --wa2-ring: rgba(119, 186, 255, 0.45); /* focus ring */
  --wa2-sep:  rgba(255,255,255,0.06);    /* separators */

  --wa2-accent: #79f0b3;                 /* +points */
  --wa2-accent-ink: #042416;
}

/* Panel container spacing and subtle border */
.wa2__recent__list,
.wa2__recent__panel {
  padding: 6px;
  gap: 10px;
}
.wa2__recent__item {
  display: grid;
  grid-template-columns: 40px 1fr auto; /* avatar | main | points */
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--wa2-bg-1);
  border: 1px solid var(--wa2-sep);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.02);
  transition: background .15s ease, border-color .15s ease, transform .06s ease;
}
.wa2__recent__item:hover {
  background: linear-gradient(0deg, rgba(255,255,255,.02), rgba(255,255,255,.02)), var(--wa2-bg-1);
  border-color: rgba(255,255,255,.09);
}
.wa2__recent__item:active {
  transform: translateY(1px);
}

/* “Recent” glow edge (subtle) */
.wa2__recent__item.is-recent {
  box-shadow:
    0 0 0 1px rgba(121, 240, 179, 0.10),
    0 4px 14px rgba(121, 240, 179, 0.08),
    inset 0 1px 0 rgba(255,255,255,.03);
  border-color: rgba(121, 240, 179, 0.20);
}

/* Square avatars with tile-like rounding */
:root {
  /* match your tile corner radius here */
  --wa2-radius-tile: 12px; /* adjust to your tile UI (e.g., 10–14px) */
}

/* Avatar container */
.wa2__recent__avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--wa2-radius-tile);      /* ⟵ square + rounded corners */
  overflow: hidden;
  flex: 0 0 40px;
  box-shadow: 0 0 0 2px rgba(255,255,255,.06),  /* subtle bezel like tiles */
              0 2px 6px rgba(0,0,0,.35);       /* depth (optional) */
  background: rgba(255,255,255,.05);           /* fallback if no image yet */
}

/* Avatar image */
.wa2__recent__avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;        /* fill square without distortion */
  border-radius: inherit;   /* keep same rounding as container */
}

/* Hover/active (optional, keeps interaction consistent with cards) */
.wa2__recent__item:hover .wa2__recent__avatar {
  box-shadow: 0 0 0 2px rgba(255,255,255,.10),
              0 4px 10px rgba(0,0,0,.40);
}
.wa2__recent__item:active .wa2__recent__avatar {
  transform: translateY(1px);
}

/* Small screens */
@media (max-width: 640px) {
  .wa2__recent__avatar { width: 36px; height: 36px; flex-basis: 36px; }
}


/* Main block (title + meta + chips) */
.wa2__recent__main {
  min-width: 0; /* enable truncation */
}

/* Primary word — slightly smaller but bolder; tighter line-height */
.wa2__recent__word {
  color: var(--wa2-ink-1);
  font-weight: 800;
  font-size: var(--wa2-font-lg);
  line-height: 1.05;
  letter-spacing: .2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

/* Meta line — smaller, higher contrast, mono coords for clarity */
.wa2__recent__meta {
  color: var(--wa2-ink-2);
  font-size: var(--wa2-font-xs);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wa2__recent__meta code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.74rem;
  color: var(--wa2-ink-3);
}

/* Total points pill — crisper contrast, 1 step smaller */
.wa2__recent__pts {
  padding: 6px 10px;
  font-weight: 800;
  font-size: var(--wa2-font-sm);
  color: var(--wa2-accent-ink);
  background: radial-gradient(120% 140% at 10% 10%, #9fffcf 0%, #72e9ae 55%, #48c88e 100%);
  border-radius: 999px;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 4px 10px rgba(72,200,142,.28);
  white-space: nowrap;
}

/* Sub-word chips row: more contrast, 1 step smaller, better wrap */
.wa2__recent__subwords {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.wa2__chip {
  border: 1px solid rgba(255,255,255,.10);
  background: var(--wa2-bg-2);
  color: var(--wa2-ink-1);
  border-radius: 999px;
  padding: 3px 8px;
  font-size: var(--wa2-font-xs);
  line-height: 1.1;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .06s ease;
}
.wa2__chip:hover { background: var(--wa2-bg-3); border-color: rgba(255,255,255,.16); }
.wa2__chip:active { transform: translateY(1px); }
.wa2__chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--wa2-ring);
}

/* Chip content like “WORD · 28”: align dot for readability */
.wa2__chip::after { content: ''; }

/* Empty state, tightened */
.wa2__recent__empty {
  color: var(--wa2-ink-3);
  font-size: var(--wa2-font-sm);
  padding: 14px 8px;
  text-align: center;
  border: 1px dashed var(--wa2-sep);
  border-radius: 12px;
}

/* Compact scrollbars (WebKit) inside the panel, optional */
.wa2__recent__list::-webkit-scrollbar { height: 10px; width: 10px; }
.wa2__recent__list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 8px; }
.wa2__recent__list::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.18); }

/* Small screens: shrink avatar & points pill slightly */
@media (max-width: 640px) {
  .wa2__recent__item { grid-template-columns: 36px 1fr auto; padding: 9px 10px; }
  .wa2__recent__avatar { width: 36px; height: 36px; }
  .wa2__recent__word { font-size: 1.06rem; }
  .wa2__recent__pts { padding: 5px 9px; font-size: 0.82rem; }
}
/* Middle column must allow content to shrink/wrap */
.wa2__recent__main { min-width: 0; }

/* Horizontal chip row that wraps */
.wa2__recent__subwords {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

/* Chips behave like inline pills (not blocks), don’t stretch, keep text on one line */
.wa2__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;     /* WORD · 28 stays together */
  max-width: 100%;         /* respect column width */
  /* your existing visuals… */
}

/* If any parent grid causes vertical centering, prefer top-align so chips sit under the title */
.wa2__recent__item { align-items: start; }
#wa2__stage { position: relative;}
#wa2__canvas { position: absolute; left:0; top:0; z-index:10; }