/* ═══════════════════════════════════════════════════════════════════════
   Blood & Nectar — the client TOP BAR, on its own.
   ---------------------------------------------------------------------
   Split out of shell.css so /game/ can wear the exact same bar WITHOUT
   inheriting shell.css's global resets (`html,body{overflow:hidden}`,
   the `*` box-sizing reset, the :root token block). /game/ is a 10k-line
   page with its own layout; those globals would tear it apart.

   Everything here is SELF-CONTAINED: the tokens the bar needs are
   declared on .lol-top itself, not on :root, so the bar renders
   identically no matter what the host page's variables happen to be.

   Consumers:
     • web/game/shell.css      — @imports it (so every shell page gets it)
     • web/game/index.html     — links it directly

   Bump the ?v= on BOTH consumers when you edit this file — .css is not in
   battleApi's no-store list, so browsers keep a stale copy otherwise.
   ═══════════════════════════════════════════════════════════════════════ */

.lol-top{
  --gold:#c8aa6e;--gold-lt:#f0e6d2;--gold-dk:#785a28;--gold-d2:#463714;
  --teal:#0ac8b9;--text:#f0e6d2;--text-m:#a09b8c;--text-d:#5b5a56;
  --border:rgba(200,170,110,.15);
  --fd:'Cinzel Decorative',serif;--fu:'Alegreya Sans',sans-serif;

  height:54px;min-height:54px;display:flex;align-items:stretch;
  background:linear-gradient(180deg,#010a13,#04121d);
  border-bottom:1px solid var(--border);z-index:60;
  font-family:var(--fu);box-sizing:border-box;
}
.lol-top *,.lol-top *::before,.lol-top *::after{box-sizing:border-box;}

/* PLAY holds the top-left edge on EVERY client page, and the ampersand mark
   rides INSIDE it — one control, not a logo sitting next to a button. The
   Blood/Nectar wordmark is not repeated in the bar. */
.lol-play{
  display:flex;align-items:center;justify-content:center;gap:9px;
  min-width:180px;padding:0 24px 0 16px;text-decoration:none;cursor:pointer;
  font-family:var(--fd);font-size:15px;font-weight:900;letter-spacing:5px;color:var(--gold-lt);
  background:linear-gradient(180deg,#1e2d3d,#0a1622);
  border-right:1px solid var(--gold-dk);position:relative;
  clip-path:polygon(0 0,100% 0,calc(100% - 16px) 100%,0 100%);
}
.lol-play-amp{height:28px;width:auto;display:block;flex-shrink:0;transition:filter .18s;}
.lol-play-lbl{display:block;}
.lol-play::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--gold-dk),var(--gold),var(--gold-dk));transition:opacity .12s;}

/* ── PLAY on hover: the hand-made sequence ────────────────────────────────
   web/assets/playHoverSequence — 61 frames of the finished wedge (aqua, mark,
   label, beam, all composited) baked to one WebP strip by
   scripts/buildPlayHoverSprite.js and played with steps().

   The art CONTAINS the ampersand and the word PLAY, so the button's own <img>
   and <span> are hidden while it runs — leaving them visible stacked two sets
   of text on top of each other.

   EVERY width. The wedge is one fixed size now — 180×54, top bar or thumb bar,
   phone or desktop — precisely so this art always has the box it was painted
   for. It used to be gated to 701px and up, back when the phone turned PLAY
   into a 62px cell that a 3.4:1 painted banner could not fit.
   :active is in the trigger list because a phone has no hover: the press is
   the only gesture there, and it should get the same frames. */
.lol-play{transition:color .18s,background .18s;}
.lol-play-amp,.lol-play-lbl{transition:opacity .12s;}

@media all{
  .lol-play::before{
    content:'';position:absolute;inset:0;pointer-events:none;
    /* RELATIVE, not root-absolute: this file is served from /game/ on live but
       /beta/game/ on beta, and a leading slash would send beta players to the
       live build's asset. */
    background-image:url('../assets/ui/play-hover.webp');
    background-repeat:no-repeat;
    background-size:100% 6100%;
    background-position:0 0;
    opacity:0;transition:opacity .12s;
  }
  .lol-play:hover::before,
  .lol-play:active::before{
    opacity:1;
    /* jump-none, NOT plain steps(). With background-size:100% 6100% the
       position range spans 60 cells, so steps(61) lands on k*60/61 of a cell —
       fractional, which showed two half-frames stacked. steps(61,jump-none)
       emits 61 values from 0% to 100% INCLUSIVE, i.e. exactly k/60. */
    animation:playHover 3s steps(61,jump-none) infinite;
  }
  /* The art carries them now. */
  .lol-play:hover .lol-play-amp,
  .lol-play:hover .lol-play-lbl,
  .lol-play:active .lol-play-amp,
  .lol-play:active .lol-play-lbl{opacity:0;}
  /* The wedge's own gold underline would cut across the art. */
  .lol-play:hover::after,
  .lol-play:active::after{opacity:0;}
}
@keyframes playHover{from{background-position:0 0;}to{background-position:0 100%;}}

/* Reduced motion: hold a mid frame instead of running the sequence. */
@media(prefers-reduced-motion:reduce){
  .lol-play,.lol-play-amp,.lol-play-lbl,.lol-play::after,.lol-play::before{transition:none;}
  .lol-play:hover::before,
  .lol-play:active::before{animation:none;background-position:0 50%;}
}
.lol-tabs{display:flex;align-items:stretch;margin-left:6px;}
.lol-top .lol-tab{
  display:flex;align-items:center;padding:0 20px;text-decoration:none;
  font-family:var(--fd);font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;
  color:var(--text-m);border-bottom:2px solid transparent;transition:color .15s,border-color .15s;
  white-space:nowrap;background:none;border-top:none;border-left:none;border-right:none;cursor:pointer;
}
.lol-top .lol-tab:hover{color:var(--text);}
.lol-top .lol-tab.active{color:var(--gold);border-bottom-color:var(--gold);}
/* Vault — the odd one out in the tab strip, on purpose. It is a different
   place rather than another page of the client, so it gets its own boxed
   treatment and an outbound arrow instead of sitting flush with the tabs. */
.lol-vault{
  display:flex;align-items:center;gap:6px;align-self:center;margin-left:10px;
  padding:5px 11px;text-decoration:none;white-space:nowrap;
  font-family:var(--fd);font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--teal);border:1px solid rgba(10,200,185,.45);border-radius:3px;
  background:rgba(10,200,185,.07);transition:all .15s;cursor:pointer;
}
.lol-vault:hover{background:rgba(10,200,185,.16);border-color:var(--teal);color:#7ff3ea;}
.lol-vault .vx{font-size:9px;opacity:.8;}

/* ── The Training beacon ──────────────────────────────────────────────────
   Same shape as the Vault button next to it, but GOLD and breathing, because
   it is a nudge rather than a destination. shell.js only un-hides it while the
   player still owes a training, so it disappears for good on graduation —
   permanent chrome would stop reading as "do this next". */
.lol-train{
  position:relative;display:flex;align-items:center;gap:7px;align-self:center;margin-left:8px;
  padding:5px 12px;text-decoration:none;white-space:nowrap;cursor:pointer;
  font-family:var(--fd);font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:#f0d9a0;border:1px solid var(--gold);border-radius:3px;
  background:linear-gradient(180deg,rgba(200,170,110,.20),rgba(200,170,110,.07));
  box-shadow:0 0 0 rgba(200,170,110,.5);
  animation:lolTrainPulse 2.8s ease-in-out infinite;
}
.lol-train[hidden]{display:none;}
.lol-train:hover{background:linear-gradient(180deg,rgba(200,170,110,.34),rgba(200,170,110,.14));color:#fff6df;animation:none;box-shadow:0 0 16px rgba(200,170,110,.45);}
@keyframes lolTrainPulse{
  0%,100%{box-shadow:0 0 0 rgba(200,170,110,0);border-color:var(--gold-dk);}
  50%{box-shadow:0 0 14px rgba(200,170,110,.42);border-color:var(--gold);}
}
.lol-train .lt-ic{font-size:12px;}
.lol-train .lt-count{
  min-width:16px;height:16px;padding:0 4px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:var(--gold);color:#20180a;font-size:9px;font-weight:900;letter-spacing:0;
}
/* Hover card: every training still owed, and exactly what it pays. */
.lol-train-tip{
  position:absolute;top:calc(100% + 9px);right:0;z-index:200;
  display:none;flex-direction:column;gap:0;width:max-content;max-width:min(400px,92vw);
  padding:11px 0 0;text-align:left;text-transform:none;letter-spacing:normal;
  background:linear-gradient(180deg,#0c1a26,#070f18);
  border:1px solid var(--gold);border-radius:8px;
  box-shadow:0 16px 46px rgba(0,0,0,.7);cursor:default;
}
.lol-train:hover .lol-train-tip{display:flex;}
.lol-train-tip::before{
  content:'';position:absolute;top:-6px;right:22px;width:10px;height:10px;
  background:#0c1a26;border-left:1px solid var(--gold);border-top:1px solid var(--gold);
  transform:rotate(45deg);
}
.lol-train-tip .tt-head{
  font-family:var(--fd);font-size:9px;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--gold);padding:0 14px 9px;
}
.lol-train-tip .tt-row{
  display:grid;grid-template-columns:14px 18px 1fr auto;gap:8px;align-items:center;
  padding:7px 14px;font-family:var(--fu);border-top:1px solid rgba(255,255,255,.05);
}
.lol-train-tip .tt-m{font-size:9px;color:var(--text-d);text-align:center;}
.lol-train-tip .tt-e{font-size:14px;text-align:center;}
.lol-train-tip .tt-t{font-size:12.5px;font-weight:700;color:var(--text);}
.lol-train-tip .tt-r{font-size:11px;color:var(--gold);text-align:right;padding-left:14px;}
.lol-train-tip .tt-row.now{background:rgba(200,170,110,.09);}
.lol-train-tip .tt-row.now .tt-m{color:var(--teal);}
.lol-train-tip .tt-foot{
  font-family:var(--fu);font-size:10.5px;color:var(--text-m);line-height:1.5;
  padding:9px 14px;border-top:1px solid rgba(200,170,110,.22);background:rgba(0,0,0,.22);
  border-radius:0 0 7px 7px;
}
@media(max-width:900px){
  .lol-train .lt-lbl{display:none;}
  .lol-train{padding:5px 9px;margin-left:6px;}
}

.lol-top-right{margin-left:auto;display:flex;align-items:center;gap:0;}
.lol-cur{
  display:flex;align-items:center;gap:7px;padding:0 16px;height:100%;
  border-left:1px solid rgba(200,170,110,.08);
}
.lol-cur .cur-ic{font-size:13px;color:var(--gold);}
.lol-cur .cur-val{font-size:14px;font-weight:800;color:var(--text);}
.lol-cur .cur-lbl{font-family:var(--fd);font-size:8px;letter-spacing:1.5px;color:var(--text-d);text-transform:uppercase;}

/* ── Notifications ────────────────────────────────────────────────────────
   The bell stands in the readout row rather than beside the avatar: it is a
   number that changes, like the currencies, not a route to a place. It carries
   no border of its own — the .lol-cur divider on its left already fences it,
   and a second frame here turns the right end of the bar into a row of boxes. */
.lol-bell{
  position:relative;display:flex;align-items:center;justify-content:center;
  height:100%;padding:0 15px;background:none;border:0;cursor:pointer;
  opacity:.8;transition:opacity .15s,filter .15s;
}
/* shell.js hides the whole control while signed out, so the [hidden] attribute
   has to beat the display:flex above. */
.lol-bell[hidden]{display:none;}
.lol-bell:hover{opacity:1;filter:drop-shadow(0 0 6px rgba(200,170,110,.55));}
.lol-bell-ic{width:19px;height:19px;display:block;}
/* Red, not gold. Gold is this bar's resting colour, so a gold pill on a gold
   bell reads as decoration; the count only earns the corner if it alarms. */
.lol-bell-badge{
  position:absolute;top:11px;right:8px;min-width:15px;height:15px;padding:0 4px;
  display:flex;align-items:center;justify-content:center;
  border-radius:8px;background:#e5544b;border:1px solid #0a1420;
  font-family:var(--fu);font-size:9px;font-weight:900;line-height:1;color:#fff;
}
.lol-bell-badge[hidden]{display:none;}

/* Pinned to the VIEWPORT, not to .lol-top-right, even though that block ends at
   exactly the right edge this panel wants. The bar is a single no-wrap flex row
   and it can outgrow a narrow window; an absolutely-positioned panel then
   follows the bar's right edge off-screen and opens where nobody can see it.
   Measured off the viewport it lands in the same place while the bar fits and
   stays reachable once it doesn't. 54px is the bar's fixed height — the same
   constant /game/ already uses to start its views below it.
   z-index sits ABOVE .lol-top's own 60: anything lower paints underneath the
   very strip the panel hangs from. */
.lol-notif{
  position:fixed;top:calc(54px + 6px);right:12px;z-index:120;
  display:flex;flex-direction:column;
  width:340px;max-width:calc(100vw - 24px);max-height:420px;
  background:linear-gradient(180deg,#0c1a26,#070f18);
  border:1px solid var(--gold-dk);border-radius:6px;
  box-shadow:0 16px 46px rgba(0,0,0,.7);overflow:hidden;
}
.lol-notif[hidden]{display:none;}
.lol-notif-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 13px;border-bottom:1px solid rgba(200,170,110,.22);
  background:rgba(0,0,0,.25);
  font-family:var(--fd);font-size:9px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);
}
.lol-notif-head button{
  flex:0 0 auto;background:none;border:0;padding:0 2px;cursor:pointer;
  font-size:12px;line-height:1;color:var(--text-d);transition:color .15s;
}
.lol-notif-head button:hover{color:var(--text);}
/* min-height:0 or the list refuses to shrink inside the flex column and the
   panel grows past its max-height instead of scrolling. */
.lol-notif-list{flex:1 1 auto;min-height:0;overflow-y:auto;}
.lol-notif-item{
  padding:10px 13px 10px 15px;
  border-top:1px solid rgba(255,255,255,.05);border-left:3px solid transparent;
}
.lol-notif-item:first-child{border-top:0;}
/* Unread is an edge, not a background wash — the panel is scanned down its left
   side, and a tinted row reads as "selected" rather than "new". */
.lol-notif-item.unread{border-left-color:var(--gold);background:rgba(200,170,110,.05);}
.lol-notif-item .ni-t{font-size:12.5px;font-weight:700;line-height:1.35;color:var(--text);}
.lol-notif-item .ni-b{font-size:11.5px;line-height:1.45;color:var(--text-m);margin-top:2px;}
.lol-notif-item .ni-w{font-size:10px;letter-spacing:.5px;color:var(--text-d);margin-top:4px;}
.lol-notif-empty{padding:26px 13px;text-align:center;font-size:11.5px;color:var(--text-d);}
/* Clickable receipts: an <a> wearing the same row clothes. The destination
   hint lives on the when-line so the row itself never shifts. */
a.lol-notif-item{display:block;text-decoration:none;transition:background .15s;}
a.lol-notif-item:hover{background:rgba(200,170,110,.09);}
a.lol-notif-item .ni-w::after{content:" · open →";color:var(--gold-dim);}

.lol-profile{
  display:flex;align-items:center;gap:10px;padding:0 18px 0 20px;
  border-left:1px solid var(--border);cursor:pointer;text-decoration:none;
}
.lol-avatar{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;overflow:hidden;
  background:linear-gradient(135deg,var(--gold-d2),var(--gold-dk));
  border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;
  font-family:var(--fd);font-size:14px;color:var(--gold-lt);
}
.lol-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.lol-pname{font-family:var(--fd);font-size:12px;letter-spacing:2px;color:var(--gold);}
.lol-plvl{font-size:10px;color:var(--text-d);letter-spacing:1px;}

/* ── The portrait menu ────────────────────────────────────────────────────
   The portrait used to be a bare link straight to the profile, which left
   nowhere to sign out from: the ONLY way off an account was clearing cookies.
   It is a menu now — view, switch, sign out — and shell.js wires it onto
   whatever markup produced the portrait, because /game/ hand-writes its own
   bar while the other pages get shell.js's.

   Anchored to .lol-profile, which takes position:relative for the purpose. */
.lol-profile{position:relative;}

.lol-pmenu{
  position:absolute;top:calc(100% + 8px);right:12px;z-index:100010;
  min-width:210px;padding:6px;
  background:var(--panel,#07111d);
  border:1px solid rgba(200,170,110,.32);border-radius:10px;
  box-shadow:0 18px 46px rgba(0,0,0,.6);
  font-family:var(--fu,'Alegreya Sans',system-ui,sans-serif);
  animation:bn-pmenu-in .14s ease-out;
}
.lol-pmenu[hidden]{display:none;}

@keyframes bn-pmenu-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){ .lol-pmenu{animation:none;} }

/* The account this menu belongs to, so "sign out" is never ambiguous when
   somebody keeps two of them. */
.lol-pmenu-who{
  padding:8px 12px 9px;margin-bottom:4px;
  border-bottom:1px solid rgba(200,170,110,.16);
}
.lol-pmenu-who b{
  display:block;font-family:var(--fd);font-size:12px;letter-spacing:1.4px;
  color:var(--gold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.lol-pmenu-who span{display:block;margin-top:2px;font-size:10px;letter-spacing:.6px;color:var(--text-d);}

.lol-pmenu-item{
  display:block;width:100%;padding:9px 12px;border:0;border-radius:6px;
  background:none;font:inherit;font-size:12.5px;letter-spacing:.4px;
  color:var(--text,#cdd8e4);text-align:left;text-decoration:none;cursor:pointer;
  transition:background-color .12s ease,color .12s ease;
}
.lol-pmenu-item:hover{background:rgba(200,170,110,.11);color:var(--gold-lt,#f0d890);}
.lol-pmenu-item:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;}

/* Leaving is separated from the things you do while staying. */
.lol-pmenu-sep{height:1px;margin:5px 8px;background:rgba(200,170,110,.16);}
.lol-pmenu-item.is-leave{color:#d98a8a;}
.lol-pmenu-item.is-leave:hover{background:rgba(200,80,80,.14);color:#f0a8a8;}

/* On a phone the bar collapses to just the avatar (see the media query at the
   foot of this file), so the menu anchors to the screen edge instead. */
@media (max-width:520px){
  .lol-pmenu{right:6px;min-width:190px;}
}

/* ── The Tournament chip ──────────────────────────────────────────────────
   Lives in the top-right cluster, left of the portrait. Four states, each a
   different colour so the meaning survives a glance from across the room:
     queued  teal   — waiting, clock + count
     holding gold   — the lobby is holding for more players
     ready   gold, pulsing — the ready check is open and it COSTS you to miss it
     draft   purple — champion select is waiting
   It is a link back to /tourney/, because every one of those states has its
   controls there. */
.lol-qchip{
  display:flex;align-items:center;gap:9px;height:100%;padding:0 14px;
  flex:0 0 auto;white-space:nowrap;
  text-decoration:none;border-left:1px solid var(--border);
  background:linear-gradient(180deg,rgba(10,200,185,.10),transparent);
  transition:background .18s;
}
.lol-qchip[hidden]{display:none;}
.lol-qchip:hover{background:linear-gradient(180deg,rgba(10,200,185,.20),transparent);}
.qc-dot{width:8px;height:8px;border-radius:50%;background:var(--teal);flex:0 0 auto;
  box-shadow:0 0 8px rgba(10,200,185,.8);}
.qc-body{display:flex;flex-direction:column;line-height:1.15;min-width:0;overflow:hidden;}
/* A hard ceiling so no future state string can push the portrait off the bar
   again -- the chip may shrink its own text, never steal the face's space. */
.qc-lbl,.qc-sub{overflow:hidden;text-overflow:ellipsis;max-width:14ch;}
.qc-lbl{font-family:var(--fd);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--teal);white-space:nowrap;}
.qc-sub{font-size:10px;letter-spacing:1px;color:var(--text-d);font-variant-numeric:tabular-nums;white-space:nowrap;}

.lol-qchip.is-holding{background:linear-gradient(180deg,rgba(200,170,110,.14),transparent);}
.lol-qchip.is-holding .qc-dot{background:var(--gold);box-shadow:0 0 8px rgba(200,170,110,.8);}
.lol-qchip.is-holding .qc-lbl{color:var(--gold);}

.lol-qchip.is-draft{background:linear-gradient(180deg,rgba(138,111,192,.16),transparent);}
.lol-qchip.is-draft .qc-dot{background:#a98fe0;box-shadow:0 0 8px rgba(169,143,224,.8);}
.lol-qchip.is-draft .qc-lbl{color:#c3aeea;}

/* The ready check is the only state with a deadline and a penalty, so it is
   the only one that moves. */
.lol-qchip.is-ready{background:linear-gradient(180deg,rgba(200,170,110,.30),rgba(200,170,110,.06));
  animation:qcPulse 1.15s ease-in-out infinite;}
.lol-qchip.is-ready .qc-dot{background:var(--gold);box-shadow:0 0 10px rgba(200,170,110,1);}
.lol-qchip.is-ready .qc-lbl{color:#fff;}
.lol-qchip.is-ready .qc-sub{color:var(--gold-lt);}
@keyframes qcPulse{0%,100%{box-shadow:inset 0 0 0 0 rgba(200,170,110,0);}
  50%{box-shadow:inset 0 0 26px 0 rgba(200,170,110,.42);}}
@media(prefers-reduced-motion:reduce){.lol-qchip.is-ready{animation:none;}}

/* The chip adds ~120px to the right cluster. MEASURED: with it live the bar
   needs 1587px, so every laptop between the old 1280 breakpoint and ~1590 —
   1366, 1440, 1536, the three most common sizes there are — overflowed and
   pushed the portrait off the right edge.
   Two steps reclaim it, cheapest thing first. The currency WORDS go before
   anything else: the icon and the number still read, and a face falling off
   the bar is a far worse trade than "1,240" losing the word "Gold". */
@media(max-width:1600px){
  .lol-cur .cur-lbl{display:none;}
  .lol-cur{padding:0 12px;}
  .lol-tabs{min-width:0;}
}
@media(max-width:1440px){
  .lol-top .lol-tab{padding:0 13px;letter-spacing:2px;}
  .lol-cur{padding:0 9px;}
}

/* Narrow screens: currencies collapse, tabs stay */
/* PLAY is NOT in this list: the wedge holds one size at every width so the
   hover sequence always lands in the box it was painted for. */
@media(max-width:900px){
  /* Tighter than before: PLAY holds 180px at every width now, so the tabs are
     what has to give in the tablet range. */
  .lol-top .lol-tab{padding:0 9px;letter-spacing:1.6px;}
  .lol-cur .cur-lbl{display:none;}
  .lol-cur{padding:0 10px;}
  .lol-bell{padding:0 10px;}
  .lol-bell-badge{right:4px;}
}
@media(max-width:640px){
  /* Three readouts now (Gold / Chests / Keys), and with the words already gone
     they are icon-and-number chips. This used to trim a four-wide row down to
     two; trimming the new row would split chests from keys, which are the one
     pair that only means anything together. */
  /* Hide the NAME/LEVEL block only. This used to match both children, which
     took the avatar with it — the portrait disappeared entirely on phones and
     left an empty 39px stub where the face should be. */
  .lol-profile > div:not(.lol-avatar){display:none;}
  /* PORTRAIT: the currencies thin out and the profile loses its text, but the
     chip stays whole. It is the one readout up here you can be PENALISED for
     missing, so it outranks a gold count — and with the profile text gone it
     is also the only thing left that can carry "you are in a queue". */
  .lol-qchip{padding:0 10px;gap:7px;}
  .qc-lbl{font-size:10px;letter-spacing:1.2px;}
  .qc-sub{font-size:9px;}
}
/* Very narrow: drop the readouts entirely rather than the chip. Below this the
   bar is a dot, a clock and a face, which is the correct triage.
   The cut used to be 430px, back when PLAY and the five tabs were also in this
   row. They are at the bottom edge now (see the phone block below), so the
   readouts have the width to survive on an ordinary phone — which is what the
   bar is FOR up here. */
@media(max-width:339px){
  .lol-cur{display:none;}
}

/* ══ THE PHONE DRAWER ══════════════════════════════════════════════════════
   At phone width the tab strip was decoration — five targets crushed into
   whatever the currencies left over, half of them clipped past the edge. It
   spent a while as a fixed bottom bar, which fixed the reach and not the
   crush: eight-pixel type, PATCH NOTES still running off the edge, and 56px
   of every screen gone to it.

   Now it collapses into one ☰ in the top bar. Pressing it slides a panel in
   from the right over half the screen — the five places, PLAY at the head of
   them, Vault at the foot — and the bar itself keeps only what you LOOK at.
   Nothing here exists above 700px: the burger and the panel are display:none
   and the desktop strip is untouched.

   The panel is mounted by shell.js (mobileNavInit) on every page that carries
   the bar, cloning the strip's own links, so there is one list of places and
   this can never disagree with the desktop tabs. */
/* The burger and the panel are mounted on <body>, NOT inside .lol-top: /game/
   pins that bar position:fixed with a z-index, which makes it a stacking
   context — a ✕ inside it can never rise above the panel no matter what its
   z-index says. Living on <body> also puts them outside the bar's token
   block, so they carry their own copy of it. */
.lol-burger,.bn-drawer,.bn-drawer-scrim,.bn-thumb{
  --gold:#c8aa6e;--gold-lt:#f0e6d2;--gold-dk:#785a28;
  --teal:#0ac8b9;--text:#f0e6d2;--text-m:#a09b8c;
  --border:rgba(200,170,110,.15);
  --fd:'Cinzel Decorative',serif;--fu:'Alegreya Sans',sans-serif;
  box-sizing:border-box;
}
.bn-drawer *,.bn-drawer *::before,.bn-drawer *::after{box-sizing:border-box;}
.lol-burger{
  display:none;align-self:center;flex:0 0 auto;
  width:42px;height:38px;margin:0 6px 0 4px;padding:0;
  align-items:center;justify-content:center;gap:4px;flex-direction:column;
  background:rgba(200,170,110,.06);border:1px solid rgba(200,170,110,.28);
  border-radius:4px;cursor:pointer;transition:background .15s,border-color .15s;
}
.lol-burger:hover,.lol-burger[aria-expanded="true"]{background:rgba(200,170,110,.16);border-color:var(--gold);}
.lol-burger i{display:block;width:19px;height:2px;border-radius:1px;background:var(--gold);
  transition:transform .18s ease,opacity .12s ease;}
/* The phone thumb bar — the strip plus the cloned PLAY and Vault. Mounted on
   <body> by shell.js next to the drawer, and shown only by the phone block far
   below. */
.bn-thumb{display:none;}

/* Scrim + panel live on <body>, not in the bar: the bar is a 54px flex row and
   /game/ makes it a stacking context, either of which would trap them. */
.bn-drawer-scrim{
  position:fixed;inset:0;z-index:2147482000;background:rgba(2,7,12,.72);
  opacity:0;pointer-events:none;transition:opacity .2s ease;
}
.bn-drawer-scrim.on{opacity:1;pointer-events:auto;}
.bn-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:2147482001;
  width:min(74vw,300px);display:flex;flex-direction:column;
  padding:14px 0 calc(74px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,#0c1826,#040c14);
  border-left:1px solid var(--gold-dk);box-shadow:-14px 0 40px rgba(0,0,0,.6);
  font-family:var(--fu);overflow-y:auto;
  transform:translateX(100%);transition:transform .22s ease;
}
.bn-drawer.on{transform:translateX(0);}
@media(prefers-reduced-motion:reduce){
  .bn-drawer,.bn-drawer-scrim{transition:none;}
}
/* No ✕ up here: the ☰ turns into the ✕ down in the thumb bar, in the cell it
   was pressed in. */
.bn-drawer-head{
  display:flex;align-items:center;
  padding:0 14px 12px;border-bottom:1px solid var(--border);
}
.bn-drawer-head span{
  font-family:var(--fd);font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--gold-dk);
}
/* The links. Cloned nodes keep .lol-tab, so every rule here has to outrank the
   strip's own — hence .bn-drawer .lol-tab rather than a bare class. */
.bn-drawer .bn-drawer-link,
.bn-drawer .lol-tab{
  display:flex;align-items:center;gap:10px;
  padding:15px 16px;margin:0;text-decoration:none;
  font-family:var(--fd);font-size:12px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--text-m);background:none;border:none;border-bottom:1px solid rgba(200,170,110,.08);
  border-top:none;border-left:3px solid transparent;border-right:none;
  white-space:nowrap;cursor:pointer;width:100%;
}
.bn-drawer .lol-tab:hover{color:var(--text);background:rgba(200,170,110,.05);}
.bn-drawer .lol-tab.active{color:var(--gold);border-left-color:var(--gold);background:rgba(200,170,110,.07);}
/* PLAY and Vault are NOT in this list. Both are permanent controls in the
   thumb bar an inch below it, and a menu that repeats the two buttons already
   on screen is a menu you stop reading. The drawer is the five PLACES. */

/* ── Phones: the thumb bar ───────────────────────────────────────────────
   The top bar keeps exactly what you LOOK at — Vault's readouts, the bell, the
   portrait — and what you PRESS moves to the bottom edge, where the hand is:
   the PLAY wedge on the left, Vault in the middle, ☰ on the right.

   PLAY keeps its DESKTOP size here, 180×54 and the same wedge cut. That is the
   point: the hover sequence is one painted strip drawn for that exact box, so
   stretching the button on a phone was what put the art out of reach.
   Vault is centred in the band PLAY and ☰ leave — not on the viewport, which
   at 375px would slide it under the wedge's diagonal.
   The strip behind them is .bn-thumb-bg, mounted by shell.js; the three
   controls are position:fixed and would otherwise float over the page with the
   gaps between them showing through.
   body padding makes room so no page ends its content underneath the bar. */
@media(max-width:700px){
  body{padding-bottom:calc(56px + env(safe-area-inset-bottom));}
  /* z-index rides ABOVE /game/'s portrait rotate gate (z 100000) on purpose:
     the gate owns the game, not the navigation. A phone held upright can
     still walk to Quests or the Collection — it just can't fight there.
     /game/ pins its bar position:fixed, which turns the bar into a stacking
     context at z 60 and would trap the thumb bar underneath the gate — so
     THAT bar's whole context is lifted too. */
  #menu-topbar.lol-top{z-index:100001;}
  .lol-tabs{display:none;}           /* the five places live in the drawer */
  /* With PLAY, the tabs and Vault all gone from this row, the readouts would
     huddle against the right edge over a bar-width of nothing. They spread
     instead, and the bar reads as a row of readouts rather than a gap. */
  .lol-top-right{flex:1 1 auto;justify-content:space-between;}
  .bn-thumb{
    display:flex;align-items:center;position:fixed;left:0;right:0;bottom:0;z-index:100000;
    height:calc(56px + env(safe-area-inset-bottom));
    padding:0 62px 0 0;                /* the ☰ owns that cell */
    padding-bottom:env(safe-area-inset-bottom);
    background:linear-gradient(180deg,#0c1826,#050b13);
    border-top:1px solid var(--gold-dk);
  }
  /* The originals stay in the bar for the desktop layout and for anything that
     looks them up by id; down here the clones are what you press. */
  .lol-top .lol-play,.lol-top .lol-vault{display:none;}
  .bn-thumb .lol-play{height:54px;margin:0;flex:0 0 auto;}
  .bn-thumb .lol-vault{margin:0 auto;}   /* centred in what PLAY and ☰ leave */
  .lol-burger{
    display:flex;position:fixed;right:0;bottom:0;z-index:100001;
    width:62px;height:calc(56px + env(safe-area-inset-bottom));
    margin:0;padding:0 0 env(safe-area-inset-bottom);
    border-radius:0;border:none;background:none;
  }
  .lol-burger i{width:22px;}
  /* Open: the ☰ becomes the ✕, in the same cell, over the panel. The close
     control has to be where the open control was — the thumb is already
     there, and a ✕ in the panel's far top corner is a second journey. */
  .lol-burger[aria-expanded="true"]{
    z-index:2147482002;background:none;border:none;
  }
  .lol-burger[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg);}
  .lol-burger[aria-expanded="true"] i:nth-child(2){opacity:0;}
  .lol-burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
}