/* ZAZA World: RuneScape layout, ZAZA navy/gold/electric-blue palette, pixel UI font. */
:root {
  --navy-950: #030a2c;
  --navy-900: #06124f;
  --navy-800: #0a1a6b;
  --stone: #1c2750;
  --stone-2: #243263;
  --stone-3: #2e3d74;
  --edge-dark: #070b1c;
  --edge-light: #4a5c98;
  --gold: #ffd23f;
  --gold-2: #e8b52a;
  --gold-dark: #8a6410;
  --blue: #1d4bff;
  --cyan: #7fd4ff;
  --text: #f1ecd8;
  --muted: #a9b3d6;
  --rs-yellow: #ffff00;
  --rs-orange: #ff981f;
  --green: #5fe86f;
  --red: #ff5d5d;
  --ui-font: "Jersey 10", ui-monospace, monospace;
  --display: "Titan One", "Arial Black", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0b1533; color: var(--text); font-family: var(--ui-font); touch-action: manipulation; }
/* iPhone Safari enlarges long paragraphs when the phone turns sideways (owner, 2026-10-07: the Character tab's notes came
   out bigger than the gear around them). The World sizes its own text for every layout. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; overscroll-behavior: none; font-variant-ligatures: none; font-synthesis: none; letter-spacing: 0.02em; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }
/* One scrollbar style everywhere (popups, chat, side panel, title): gold thumb on a navy track. */
* { scrollbar-width: thin; scrollbar-color: var(--gold-2) rgba(3, 10, 44, 0.85); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(3, 10, 44, 0.85); border-radius: 8px; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #ffe066, var(--gold-2)); border-radius: 8px; border: 2px solid rgba(3, 10, 44, 0.85); }
::-webkit-scrollbar-thumb:hover { background: #ffe066; }
::-webkit-scrollbar-corner { background: transparent; }
kbd { font-family: var(--ui-font); font-size: 14px; padding: 1px 6px; border-radius: 4px; background: #0d1638; border: 1px solid #3b4c80; border-bottom-width: 2px; color: #e8e2cc; }

#game {
  position: fixed; inset: 0; width: 100%; height: 100%; display: block;
  image-rendering: pixelated; image-rendering: crisp-edges;
  touch-action: none; outline: none; cursor: default;
}

/* ---------------------------------------------------------------- stone panels */
.stonebox, .side, .chatbox, .hud-panel, .modal, .ctx {
  background: linear-gradient(180deg, var(--stone-2), var(--stone));
  border: 2px solid var(--edge-dark);
  box-shadow: inset 0 0 0 1px var(--edge-light), inset 0 0 0 3px #141d40, 0 6px 18px rgba(0, 0, 0, 0.45);
  border-radius: 6px;
}

.hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
.hud > * { pointer-events: auto; }
.hud-tl, .hud-tr, .area-banner { pointer-events: none; }
/* Links in the top right take clicks too: the 𝕏 Raid call's Go ↗ is one (xraid-call.js), and without this a click on it
   fell through to the map. */
.hud-tl a, .hud-tl button, .hud-tr a, .hud-tr button, .hud-tr canvas { pointer-events: auto; }

/* ---------------------------------------------------------------- top left */
.hud-tl { position: absolute; left: 12px; top: 10px; z-index: 7; display: flex; flex-direction: column; gap: 6px; max-width: min(240px, calc(100vw - 300px)); }
.title-row { display: flex; align-items: center; gap: 10px; }
.brand-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 9px; border-radius: 999px;
  background: var(--navy-900); border: 2px solid var(--gold); color: var(--gold); text-decoration: none;
  font-family: var(--display); font-size: 15px; letter-spacing: 0.02em; box-shadow: 0 3px 0 #000a2e;
}
.brand-pill:hover { background: var(--navy-800); }
.world-name { font-family: var(--display); font-size: 18px; color: #fff; text-shadow: 2px 2px 0 #000a2e, -1px -1px 0 #000a2e, 1px -1px 0 #000a2e, -1px 1px 0 #000a2e; letter-spacing: 0.03em; }
.chip { font-family: var(--ui-font); font-size: 13px; font-weight: 700; color: var(--navy-900); background: var(--gold); padding: 2px 6px; border-radius: 4px; vertical-align: 3px; margin-left: 4px; text-shadow: none; }
.hover-text {
  min-height: 20px; font-size: 18px; font-weight: 600; color: #fff;
  text-shadow: 1px 1px 0 #000, -1px 0 0 #000, 0 -1px 0 #000, 1px 0 0 #000;
}
.hover-text .t-npc { color: var(--rs-yellow); }
.hover-text .t-obj { color: #62e8ff; }
.hover-text .t-player, .ctx .t-player { color: #fff; }
.hover-text .t-more { color: #fff; font-weight: 400; }

/* ---------------------------------------------------------------- left panel: $ZAZA market cap + your wallet, one card */
.hud-panel { position: absolute; left: 12px; top: 48px; width: 264px; display: flex; flex-direction: column; overflow: visible; transition: width 0.18s ease, transform 0.18s ease; }
.hud-panel.holder { box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 0 3px #141d40, 0 6px 18px rgba(0, 0, 0, 0.45); }
.hud-panel-head {
  display: flex; align-items: center; gap: 6px; padding: 6px 7px 6px 9px; border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, rgba(29, 75, 255, 0.32), rgba(29, 75, 255, 0.08)); border-bottom: 1px solid rgba(255, 210, 63, 0.28);
}
/* One title bar: coin, the ZAZA WORLD wordmark and a small PREVIEW tag, then the minimize button. */
.panel-world { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; font-family: var(--display); font-size: 16px; line-height: 1; color: #fff; white-space: nowrap; text-shadow: 2px 2px 0 #000a2e; letter-spacing: 0.02em; }
.panel-world b { font-weight: 400; color: var(--gold); }
.panel-coin { flex: none; width: 24px; height: 24px; border-radius: 5px; box-shadow: 0 0 0 1px #000a2e, 0 0 10px rgba(255, 210, 63, 0.45); } /* ZAZA World's app icon (it has its own gold rim) */
/* The website, X, Telegram and Discord under one ☰ beside the title (owner, 2026-10-22: "add also discord, but now there
   are too many, so have one 3 liner that can drop and have all the links"): the same dark tab as the –, its list drops
   under it (ui.js folds it on a pick, a tap elsewhere or Esc); gone when the box is minimized. */
.panel-links { position: relative; flex: none; }
.panel-links-btn { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; color: var(--gold); background: #141d40; border: 1px solid #000; border-radius: 5px; cursor: pointer; }
.panel-links-btn:hover, .panel-links-btn[aria-expanded="true"] { color: #fff; background: #1f2b5c; }
.panel-links svg { width: 15px; height: 15px; fill: currentColor; }
.panel-links .ico-web { fill: none; stroke: currentColor; stroke-width: 2.2; }
.panel-links-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 12; min-width: 150px; display: flex; flex-direction: column; gap: 2px; padding: 5px;
  border-radius: 8px; background: linear-gradient(180deg, var(--stone-2), var(--stone)); border: 2px solid var(--edge-dark);
  box-shadow: inset 0 0 0 1px var(--edge-light), 0 10px 26px rgba(0, 0, 0, 0.5); pointer-events: auto;
}
.panel-links-menu[hidden] { display: none; }
.panel-links-menu a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 5px; font: 18px/1 var(--ui-font); color: #fff; text-decoration: none; }
.panel-links-menu a:hover, .panel-links-menu a:focus-visible { color: var(--gold); background: #1f2b5c; outline: 0; }
.panel-links-menu svg { flex: none; width: 16px; height: 16px; color: var(--gold); }
.hud-panel.is-minimized .panel-links { display: none; }
/* Minimize: the same dark "–" tab button as the chat's; "+" when minimized. */
.hud-minimize {
  flex: none; width: 32px; height: 28px; padding: 0 0 2px; display: grid; place-items: center;
  font: 600 16px var(--ui-font); color: var(--muted); background: #141d40; border: 1px solid #000; border-radius: 5px; cursor: pointer;
}
.hud-minimize:hover { color: #fff; }
.hm-mini { display: none; align-items: center; gap: 6px; white-space: nowrap; }
.hm-mini img { border-radius: 50%; flex: none; }
/* the coin's ring: how far ZAZA is through his level, like the portrait's in the open box (ui.js renderZaza --lv) */
.hm-ring { flex: none; display: grid; place-items: center; margin: -3px 0; padding: 4px; border-radius: 50%; background: conic-gradient(var(--gold) calc(var(--lv, 0) * 1turn), #1b2350 0); box-shadow: 0 0 0 1px #000a2e, 0 0 8px rgba(255, 210, 63, 0.3); }
.hm-ring img { display: block; width: 20px; height: 20px; box-shadow: 0 0 0 2px #000a2e; }
.hm-mini b { font-family: var(--display); font-weight: 400; font-size: 16px; color: #fff; }
.hud-panel.is-minimized { width: auto; }
.hud-panel.is-minimized .hud-panel-head { gap: 10px; padding: 5px 5px 5px 8px; border: 0; border-radius: 4px; cursor: pointer; }
.hud-panel.is-minimized .panel-world,
.hud-panel.is-minimized .zaza-card, .hud-panel.is-minimized .charge-card, .hud-panel.is-minimized .wallet-card { display: none; }
.hud-panel.is-minimized .hm-mini { display: inline-flex; }
/* Phones: the card hunt clock hangs just under the box (ui.js placeOnline), as wide as it (owner, 2026-10-06), so it
   follows its bottom edge as it opens and closes. Empty on desktop. */
.hud-under { position: absolute; left: -2px; right: -2px; top: calc(100% + 8px); display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.hud-under:empty { display: none; }
.hud-under > * { pointer-events: auto; }
.zaza-card { display: flex; flex-direction: column; align-items: stretch; gap: 7px; padding: 8px 11px 10px 9px; width: 100%; text-align: left; cursor: pointer; background: none; border: 0; }
.zaza-top { display: flex; gap: 10px; align-items: center; }
.zaza-live { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font: 700 12px var(--ui-font); font-style: normal; letter-spacing: 0.1em; color: #ff8a80; text-shadow: none; }
.zaza-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ff5d5d; box-shadow: 0 0 0 3px rgba(255, 93, 93, 0.25); animation: blink 1.6s infinite; }
/* Market-cap chart (inline SVG) and ZAZA's level bar. */
.zaza-charts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; align-items: stretch; }
.zaza-chart, .mc-chart { position: relative; display: block; border-radius: 6px; background: rgba(3, 10, 44, 0.55); box-shadow: inset 0 0 0 1px #0b1022; overflow: hidden; --r: 6px; }
.zaza-chart { height: 64px; flex-shrink: 0; }
.mc-plot { position: absolute; inset: 0 var(--r) 0 0; display: block; }
.zaza-chart .mc-plot { inset: 18px var(--r) 15px 0; }
.zaza-chart .ax { font-size: 10px; }
.zaza-chart .ax.span { left: 2px; right: auto; bottom: 1px; background: none; }
.zaza-chart:empty { display: none; }
.zaza-chart svg, .mc-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mc-line { filter: drop-shadow(0 0 3px rgba(255, 210, 63, 0.75)); } /* the line glows over its bright gold fill (owner, 2026-10-10: "more alive") */
.mc-dot { position: absolute; right: var(--r); width: 7px; height: 7px; border-radius: 50%; background: #ffd23f; transform: translate(-50%, -50%); box-shadow: 0 0 0 3px rgba(255, 210, 63, 0.3); animation: blink 1.6s infinite; }
.ax { position: absolute; font-size: 12px; color: var(--muted); pointer-events: none; white-space: nowrap; padding: 0 4px; border-radius: 3px; background: rgba(3, 10, 44, 0.75); }
.ax.rg { left: 4px; top: 3px; }
.ax.hi { left: 8px; top: 5px; } .ax.lo { left: 8px; bottom: 5px; } .ax.span { right: 14px; bottom: 5px; }
/* The market cap's 24h change in the box chart's top right corner (ui.js renderZaza), a size up from the axis labels so
   it reads (owner, 2026-10-10). */
.zaza-chart .ax.ch { right: 4px; top: 2px; font-size: 12px; line-height: 15px; }
.ax.ch i { font-style: normal; font-weight: 700; }
.ax.ch i.up { color: var(--green); }
.ax.ch i.down { color: var(--red); }
/* The World's last 7 days, above the market-cap chart (owner, 2026-10-10; ui.js renderZaza): new and returning players, blue
   and gold as in Growth, the players window's bright bevelled bars in small (owner, 2026-10-10: "more alive and colorly"). */
.zaza-act { display: block; flex-shrink: 0; padding: 5px 6px; border-radius: 6px; background: rgba(3, 10, 44, 0.55); box-shadow: inset 0 0 0 1px #0b1022; }
.zaza-act:not([hidden]) { cursor: help; }
.players-heading { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 2px 4px; color: #dce7ff; line-height: 14px; }
.players-heading b { font: 700 10px var(--ui-font); white-space: nowrap; }
.players-legend { display: flex; align-items: center; gap: 3px; font: 9px var(--ui-font); white-space: nowrap; min-width: 0; }
.players-legend i { width: 6px; height: 6px; border-radius: 1px; }
.zaza-act .new { background: linear-gradient(180deg, #62aaff, #3a7fe8); }
.zaza-act .returning { background: linear-gradient(180deg, #ffd23f, #e2aa1d); }
.players-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; margin-top: 5px; }
.players-day { min-width: 0; display: flex; flex-direction: column; align-items: stretch; }
.players-stack { height: 49px; display: flex; align-items: end; border-bottom: 1px solid #52648a; background: repeating-linear-gradient(to top, transparent 0, transparent 23px, #ffffff0a 24px, transparent 25px); }
.players-fill { display: flex; flex-direction: column; width: 100%; overflow: hidden; border-radius: 3px 3px 0 0; box-shadow: 0 0 0 1px rgba(3, 10, 44, 0.7); }
.players-fill i { min-height: 0; box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.3), inset -1px 0 0 rgba(0, 0, 0, 0.2); }
.players-day small { text-align: center; font: 8px/14px var(--ui-font); color: var(--muted); white-space: nowrap; overflow: hidden; }
.players-day:last-child small { color: #fff; }
/* Under the bars, inside the player box (ui.js renderZaza): the week's growth and active hours per player. */
.players-foot { display: flex; justify-content: space-between; gap: 6px; margin-top: 5px; font: 11px/14px var(--ui-font); color: var(--muted); white-space: nowrap; overflow: hidden; }
.players-foot :is(b, i) { font-style: normal; font-weight: 700; color: #dce7ff; }
.players-foot i.up { color: var(--green); }
.players-foot i.down { color: var(--red); }
.zaza-lv { display: flex; flex-direction: column; gap: 3px; }
.zaza-lv-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.zaza-lv-row b { font-family: var(--display); font-weight: 400; font-size: 15px; color: var(--gold); }
.zaza-lv-row small { font-size: 13px; color: var(--muted); }
.zaza-card:hover { background: rgba(255, 255, 255, 0.04); }
/* ZAZA's portrait sits in a ring that fills with his progress to the next level. */
.zaza-portrait { flex: none; width: 60px; height: 60px; padding: 3px; border-radius: 50%; background: conic-gradient(var(--gold) calc(var(--lv, 0) * 1turn), #1b2350 0); box-shadow: 0 0 0 2px #000a2e, 0 0 12px rgba(255, 210, 63, 0.3); }
.zaza-portrait > span { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle at 40% 35%, #3a66ff, var(--navy-900)); box-shadow: inset 0 0 0 2px #000a2e; }
.zaza-portrait img { width: 64px; height: 64px; image-rendering: pixelated; margin-top: 4px; }
.zaza-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.zaza-name { display: flex; align-items: center; gap: 6px; font-family: var(--display); font-size: 21px; color: var(--gold); line-height: 1; text-shadow: 2px 2px 0 #000a2e; }
.zaza-name b { font: 700 14px var(--ui-font); color: var(--navy-900); background: linear-gradient(180deg, #ffe066, var(--gold-2)); border: 1px solid #000a2e; border-radius: 4px; padding: 1px 5px 2px; text-shadow: none; }
.zaza-stage { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cyan); }
/* Market-cap mode: the live market cap and the holders side by side, each a small label over a big number, the 24h
   change in the market cap's label (ui.js renderZaza). Phones put the change in the name row instead (.zaza-ch). */
.zaza-card.mc .zaza-stage { display: none; }
.zaza-card.mc .zaza-xp { font-size: 15px; color: var(--muted); display: grid; grid-template-columns: auto auto; justify-content: space-between; gap: 10px; margin-top: 4px; }
.zaza-stat { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.zaza-stat + .zaza-stat { padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, 0.12); }
.zaza-stat small { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyan); white-space: nowrap; }
.zaza-stat small i { margin-left: 4px; letter-spacing: 0; }
.zaza-card.mc .zaza-xp b { font-family: var(--display); font-weight: 400; font-size: 21px; color: #fff; line-height: 1.05; white-space: nowrap; }
.zaza-ch { display: none; margin-left: auto; font: 700 12px var(--ui-font); text-shadow: none; }
:is(.zaza-xp, .zaza-ch) i, .stat b.up, .stat b.down { font-style: normal; font-weight: 700; }
:is(.zaza-xp, .zaza-ch) i.up, .stat b.up { color: var(--green); }
:is(.zaza-xp, .zaza-ch) i.down, .stat b.down { color: var(--red); }
.bar { display: block; height: 8px; border-radius: 4px; background: #0a102a; border: 1px solid #000; overflow: hidden; }
.bar > span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffb020, var(--gold), #fff3a0); transition: width 0.5s; }
.zaza-xp { font-size: 13px; color: var(--muted); }
/* The ZAZA players popup (ui.js zazaPlayerPanel), in the look of the windows beside it (owner, 2026-10-10, on its studded
   navy tiles and parchment sheet: "adjust this to stay same style as the rank page ... or the mcap one"): the week's
   players big in gold with their growth beside them, as ZAZA's window shows the market cap (.mc-head); the bars on that
   window's plain dark chart panel, in the box's bright blue and gold; the other numbers in its plain stat boxes (.stat);
   the top 10 on the Rankings' parchment scroll (.rk-scroll, .rk-table). The HUD box stays compact. */
.players-title { display: flex; align-items: center; gap: 10px; padding-right: 36px; }
/* ZAZA World's app icon (192 px, with its own gold rim): shrunk smoothly like the HUD's, never pixel-sampled (owner,
   2026-10-11: "shwoing very low quality the icon"; nearest-neighbour at this size dropped ZAZA's face) */
.players-title img { flex: none; width: 36px; height: 36px; border-radius: 7px; box-shadow: 0 0 0 1px #000a2e, 0 0 10px rgba(255, 210, 63, 0.45); }
.player-chart { margin: 8px 0 12px; padding: 12px 14px 10px; border-radius: 10px; }
.player-chart .players-heading { line-height: 1.2; }
.player-chart .players-heading b { font: 700 15px var(--ui-font); color: #dce7ff; }
.player-chart .players-legend { gap: 6px; font-size: 14px; color: var(--muted); }
.player-chart .players-legend i { width: 10px; height: 10px; border-radius: 2px; }
.player-chart .new { background: linear-gradient(180deg, #62aaff, #3a7fe8); }
.player-chart .returning { background: linear-gradient(180deg, #ffd23f, #e2aa1d); }
.player-chart .players-days { gap: 8px; margin-top: 10px; }
.player-chart .players-stack { height: 112px; border-bottom: 1px solid #52648a; background: repeating-linear-gradient(to top, transparent 0 27px, rgba(255, 255, 255, 0.05) 27px 28px); }
.player-chart .players-fill { border-radius: 4px 4px 0 0; }
.player-chart .players-fill i { box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.28), inset -2px 0 0 rgba(0, 0, 0, 0.22); }
.player-chart .players-day small { margin-top: 4px; font-size: 14px; line-height: 16px; color: var(--muted); }
.player-chart .players-day:last-child small { color: #fff; }
/* Its other four numbers in ZAZA's window's stat boxes, the word over the number. A number never runs out of its box
   (owner, 2026-10-10: "make sure the growth fits"): each box is a size container and ui.js statNum puts the number's
   length in --n, so a long one shrinks to the box's width (cqi = 1% of it; Titan One's digits are up to ~0.68em wide, 0.7
   leaves a margin) and a short one keeps the boxes' 21px. */
.stats.player-stats { grid-template-columns: repeat(4, 1fr); }
.player-stats .stat { container-type: inline-size; min-width: 0; }
.player-stats .stat b { font-size: min(var(--num, 21px), 100cqi / (var(--n, 4) * 0.7)); line-height: var(--num, 21px); white-space: nowrap; font-variant-numeric: tabular-nums; }
.player-stats .stat small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 520px) { .stats.player-stats { grid-template-columns: repeat(2, 1fr); } }
/* The top 10 on the Rankings' scroll: rank, name, hours a day (the 7-day total is the row's tooltip); the first three's
   rank on a gold, silver or bronze coin, the Rankings podium's colours. */
.players-scroll { margin-top: 18px; }
.players-scroll .rk-body { padding-bottom: 24px; } /* the last row clear of the bottom roll */
.player-hours .rk-c:last-child { width: 7em; }
.ph-medal { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font: 400 14px/1 var(--display); font-style: normal; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45); background: linear-gradient(180deg, var(--m), var(--m2)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 0 0 1px rgba(60, 36, 8, 0.55); vertical-align: middle; }
.ph-medal.m1 { --m: #ffd23f; --m2: #b07a10; }
.ph-medal.m2 { --m: #cfd8ea; --m2: #7d8aa8; }
.ph-medal.m3 { --m: #e59a5a; --m2: #8a4a22; }
/* The popup's bars read a day's new and returning players out under them: hover (desktop) or tap (ui.js zazaPlayerPanel). */
.player-chart { cursor: default; }
.player-chart .players-day { cursor: pointer; border-radius: 3px; }
.player-chart .players-day:focus-visible { outline: 1px solid var(--gold); outline-offset: 1px; }
.player-chart .players-day.on .players-stack { background-color: rgba(255, 255, 255, 0.07); }
.player-chart .players-day.on .players-fill { filter: brightness(1.12) saturate(1.1); }
.player-chart .players-day.on small { color: var(--gold); }
.players-readout { display: block; margin-top: 10px; font: 17px/1.3 var(--ui-font); color: #dfe6ff; }
.players-readout b { font-weight: 400; color: var(--gold); }

/* ---------------------------------------------------------------- wallet section (read-only holder view) */
/* The multisig charge, the number ZAZA's gold ring on the plaza shows (click: the charge panel). */
.charge-card { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 7px 11px 9px 9px; text-align: left; cursor: pointer; color: inherit; font: inherit; background: none; border: 0; border-top: 1px solid #0b1022; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.charge-card[hidden] { display: none; }
.charge-card:hover { background: rgba(255, 255, 255, 0.04); }
.charge-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; white-space: nowrap; }
.charge-row b { font-family: var(--display); font-weight: 400; font-size: 15px; color: var(--gold); }
.charge-row b i { font-style: normal; }
.charge-row span { font-size: 16px; color: #fff; }
.charge-row small { font-size: 13px; color: var(--muted); }
.wallet-card { display: flex; flex-direction: column; gap: 4px; padding: 7px 10px 8px; border-top: 1px solid #0b1022; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); background: rgba(3, 10, 44, 0.28); }
.wallet-card > small { font-size: 14px; color: var(--muted); line-height: 1.25; text-align: center; }
.wallet-connect {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 6px 10px; border-radius: 999px;
  background: linear-gradient(180deg, #ffe066, var(--gold-2)); color: var(--navy-900); border: 2px solid #3a2a00;
  font-family: var(--display); font-size: 16px; box-shadow: inset 0 0 0 1px #fff3b0, 0 3px 0 var(--gold-dark);
}
.wallet-connect:hover { filter: brightness(1.06); }
.wallet-connect img { width: 22px; height: 22px; image-rendering: pixelated; }
.wallet-top { display: flex; align-items: center; gap: 4px; }
.wallet-head { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; padding: 0; background: none; border: 0; text-align: left; }
.wallet-coin { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid var(--gold); background: var(--navy-800); }
.wallet-head span { min-width: 0; flex: 1; }
.wallet-head b { display: flex; align-items: center; gap: 5px; font-size: 18px; color: #fff; white-space: nowrap; min-width: 0; }
.wallet-head b .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wallet-head b em { flex: none; }
.wallet-head em { font-style: normal; font-size: 12px; padding: 1px 5px; vertical-align: 0; margin-left: 0; }
.wallet-head small { display: block; font-size: 13px; color: var(--muted); }
.wallet-icon { flex: none; width: 28px; height: 28px; padding: 0; border-radius: 6px; background: rgba(255, 255, 255, 0.06); border: 1px solid #0b1022; color: var(--muted); font-size: 14px; }
.wallet-icon:hover { color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.wallet-row { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: baseline; column-gap: 6px; padding: 1px 2px; font-size: 15px; }
.wallet-row + .wallet-row { border-top: 1px dashed rgba(169, 179, 214, 0.18); }
.wallet-row > span { color: var(--muted); font-size: 13px; }
.wallet-row b { color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wallet-row small { font-size: 13px; color: #dfe6ff; white-space: nowrap; text-align: right; }
/* Buy tiles: glossy buttons with the token / card icon on top. The Fight boost's three (.xpb-buys) are built the same. */
.wallet-buys-h { display: flex; align-items: center; gap: 8px; margin-top: 2px; font-family: var(--display); font-size: 12px; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); text-shadow: 1px 1px 0 #000a2e; }
.wallet-buys-h::before, .wallet-buys-h::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255, 210, 63, 0), rgba(255, 210, 63, 0.45)); }
.wallet-buys-h::after { background: linear-gradient(90deg, rgba(255, 210, 63, 0.45), rgba(255, 210, 63, 0)); }
.wallet-buys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding-bottom: 3px; }
/* Buy and the Fight boost fold to their headings (ui.js toggleRow; owner, 2026-10-16: "keep the fight boost option
   minimized.. and the buy as well.."): the heading is a button, its chevron pointing down while folded, up while open. */
button.wallet-buys-h { width: 100%; padding: 3px 0; border: 0; background: none; cursor: pointer; }
button.wallet-buys-h:hover { color: #ffe066; }
.wallet-buys-h .wb-h { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.fold-chev { flex: none; width: 5px; height: 5px; margin: 0 1px 3px 0; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform 0.15s, margin 0.15s; }
[aria-expanded="true"] > * > .fold-chev { margin: 3px 1px 0 0; transform: rotate(-135deg); }
:is(.wallet-buys, .xpb-buys) button {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; height: 44px; padding: 2px;
  border-radius: 10px; border: 2px solid #0b1022; color: var(--navy-900); overflow: hidden; cursor: pointer;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6), inset 0 -3px 0 rgba(0, 0, 0, 0.2), 0 3px 0 #0b1022;
  transition: transform 0.08s ease, filter 0.12s ease, box-shadow 0.08s ease;
}
:is(.wallet-buys, .xpb-buys) button::before { content: ""; position: absolute; left: 5px; right: 5px; top: 3px; height: 45%; border-radius: 7px 7px 14px 14px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); pointer-events: none; }
:is(.wallet-buys, .xpb-buys) button:hover { transform: translateY(-1px); filter: brightness(1.08) saturate(1.1); }
:is(.wallet-buys, .xpb-buys) button:active { transform: translateY(2px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), inset 0 -2px 0 rgba(0, 0, 0, 0.2), 0 1px 0 #0b1022; }
.wallet-buys img { position: relative; width: 20px; height: 20px; object-fit: contain; filter: drop-shadow(0 2px 0 rgba(0, 10, 46, 0.35)); }
:is(.wallet-buys, .xpb-buys) b { position: relative; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--display); font-weight: 400; font-size: 14px; line-height: 1; letter-spacing: 0.02em; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); }
.wb-zaza img { border-radius: 50%; }
.wb-packs img { width: 24px; height: 24px; margin: -2px 0; }
.wb-zaza { background: linear-gradient(180deg, #9dffbd 0%, #45cc75 55%, #2b9d55 100%); }
.wb-cards { background: linear-gradient(180deg, #b4efff 0%, #56b8ff 55%, #2d82e2 100%); }
.wb-packs { background: linear-gradient(180deg, #ffd690 0%, #ff9f35 55%, #e8700a 100%); }
.link-btn { background: none; border: 0; color: var(--cyan); text-decoration: underline; font-size: 17px; }

/* ---------------------------------------------------------------- top right: minimap + orbs */
.hud-tr { position: absolute; right: 12px; top: 10px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.minimap-wrap { position: relative; width: 230px; height: 204px; }
#minimap {
  position: absolute; right: 4px; top: 4px; width: 152px; height: 152px; border-radius: 50%;
  border: 3px solid var(--edge-dark); box-shadow: 0 0 0 3px var(--gold-2), 0 0 0 5px var(--edge-dark), 0 6px 18px rgba(0, 0, 0, 0.5);
  cursor: pointer; image-rendering: pixelated; background: #10204a;
}
.orb {
  position: absolute; min-width: 50px; height: 34px; border-radius: 17px; padding: 0 3px 0 9px; display: flex; flex-direction: row-reverse; align-items: center; gap: 4px;
  background: linear-gradient(180deg, #2a3668, #151d42); border: 2px solid var(--edge-dark); box-shadow: inset 0 0 0 1px var(--edge-light), 0 3px 8px rgba(0, 0, 0, 0.4);
}
.orb:hover { box-shadow: inset 0 0 0 1px var(--gold), 0 3px 8px rgba(0, 0, 0, 0.4); }
.orb-icon { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 40% 35%, #4a5c98, #10183a); border: 1px solid #000; font-size: 16px; flex: none; }
.orb-icon img { width: 18px; height: 18px; image-rendering: pixelated; }
.orb-val { font-size: 16px; font-weight: 700; color: var(--green); text-shadow: 1px 1px 0 #000; min-width: 18px; text-align: left; }
.orb-run { left: 0; top: 30px; }
.orb-run.on .orb-icon { background: radial-gradient(circle at 40% 35%, #ffe066, #b88a10); }
.orb-sparks { left: 0; top: 66px; }
.orb-sparks .orb-val { color: #fff27a; }
.orb-map { left: 30px; top: 140px; min-width: 36px; padding: 0 4px; }
/* Attack mode (F): lock onto a player and chase them. Red while it's on. */
.orb-fight { left: 0; top: 176px; min-width: 36px; padding: 0 4px; }
.orb-fight.on { box-shadow: inset 0 0 0 1px #ff6b6b, 0 0 14px rgba(255, 59, 74, 0.75); }
.orb-fight.on .orb-icon { background: radial-gradient(circle at 40% 35%, #ff8a8a, #9a1420); }
/* In ZAZA Town's safe zone (no player fights; game.js checkSafe): a green ring and a white dove on the orb's outer corner
   (away from the minimap). Attack mode's red wins while it's on. */
.orb-fight.safe:not(.on) { box-shadow: inset 0 0 0 1px #8fe3a0, 0 0 10px rgba(110, 225, 140, 0.6); }
.orb-fight.safe::after { content: "🕊"; position: absolute; left: -9px; bottom: -7px; font-size: 15px; line-height: 1; filter: drop-shadow(0 1px 0 #000) drop-shadow(0 0 1px #000); pointer-events: none; }
/* Sparks switched off (the live layout): the minimap's ring runs down its left and under it, nothing on its right (owner,
   2026-10-27: "they all stay under or left of the mini map nothing to the right"): run, the World map, attack mode, the
   fold, 🏠 your island (Kingdom Isles), then − and +, each icon 8px off the map's rim (radius 106 round its middle) and
   24° on from the one before, as far apart as the ring's buttons were before (owner, 2026-10-27: "i want to keep similar
   spacing as before... all around the map uniform and sharp"), from -32° (run, its top just under the box's) to 112°
   (+, under the map). On your own Kingdom island 🔨 Build stands where attack mode does (kingdom-town.js) and 🏠 is the
   way back; the Open World's menu (further down) puts its own in the same places, and its two more after +. Anchored by
   `right`, so an icon stays put as its number grows. */
.no-sparks :is(.orb-run, .orb-fight, .orb-map) { left: auto; }
.no-sparks .orb-run { top: 7px; right: 152px; }
.no-sparks .orb-map { top: 48px; right: 166px; }
.no-sparks .orb-fight, .orb-build { top: 92px; right: 163px; }
.orb-quests { top: 131px; right: 142px; }
.orb-home { top: 158px; right: 107px; }
/* 🏠 is on everyone's ring (world/index.html), shaped like the fold, greyed out: only Kingdom Isles' wallets can use it
   (kingdom.js lights it up; owner, 2026-10-27: "make sure the island button is not available for everybody else... keep
   it grayed out"). */
.orb-home { left: auto; min-width: 36px; padding: 0 4px; }
#kgHome:disabled, #kgHome:disabled:hover { filter: grayscale(1) brightness(0.85); opacity: 0.8; cursor: default; box-shadow: inset 0 0 0 1px var(--edge-light), 0 3px 8px rgba(0, 0, 0, 0.4); }
.no-sparks .minimap-wrap { height: 204px; }
/* A computer's − and + (ui.js #zoom2d: the mouse wheel's steps) take the ring's last two places, orbs like the map's and
   the fold's with their pixel − and + in the same round icon (owner, 2026-10-27: "the - and plus dont have the same
   style"): the group is a point on the minimap box's top right corner (.hud-tr's), so its buttons are placed as the orbs
   are. Phones place theirs in the PHONE block; the 3D view's on a touch screen (sail3d.js #zoom3d) are its own. The Open
   World's menu puts ⚓ and ⚔ in their places and them two further round, 39 px past the minimap's box on the right, so it
   moves the corner 42 px in. */
@media (min-width: 761px) and (min-height: 501px) {
  #zoom2d { position: absolute; z-index: 6; top: 10px; right: 12px; display: block; width: 0; height: 0; }
  #zoom2d[hidden] { display: none; }
  #zoom2d > button { position: absolute; box-sizing: border-box; min-width: 36px; height: 34px; padding: 0 4px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--edge-dark); border-radius: 17px; background: linear-gradient(180deg, #2a3668, #151d42); box-shadow: inset 0 0 0 1px var(--edge-light), 0 3px 8px rgba(0, 0, 0, 0.4); cursor: pointer; }
  #zoom2d > button:hover { box-shadow: inset 0 0 0 1px var(--gold), 0 3px 8px rgba(0, 0, 0, 0.4); }
  #zoom2d > button:active { translate: 0 2px; }
  #zoom2d > button:last-child { top: 169px; right: 65px; }
  #zoom2d > button:first-child { top: 161px; right: 21px; }
  html.ow-menu :is(.hud-tr, #zoom2d) { right: 42px; }
  html.ow-menu #zoom2d > button:last-child { top: 137px; right: -15px; }
  html.ow-menu #zoom2d > button:first-child { top: 99px; right: -39px; }
}
/* … the fold (ui.js foldHud): the quest and daily trackers with the ✨ Golden or 💫 Silver Hour button, the card hunt
   clock (with the 🎙 ZAZA live on X card) and boosts; "N online" never folds (owner, 2026-10-27: "minimize button (quests
   and drop) the online never minimizes"). Phones had folds first (owner, 2026-10-05); every screen since 2026-10-14 (owner:
   "allow to also minize tabs from desktop too"). Folded: a gold ring and a gold +. A party gathering against the hour's
   boss, or your own, stays like any raid's Join, and the + and − stay (owner, 2026-10-24: "when you hide stuff is not
   hidding silver hour sign.. also when i click to hide, it hides the zoom buttons,, it shouldnt"). On your Kingdom island
   attack mode steps aside for 🔨 Build (kingdom-town.js sets html.in-kingdom): islands are peaceful. */
.orb-fold, .orb-build { left: auto; min-width: 36px; padding: 0 4px; }
.orb-build[hidden], html.in-kingdom #orbFight { display: none; }
.orb-build.on { box-shadow: inset 0 0 0 1px var(--gold), 0 0 10px rgba(255, 210, 63, 0.55); } /* the Build shelves open */
.hud.fold-quests :is(#questTrack, #dailyTrack, #caminoTrack, #xTask, .dt-row), .hud.fold-quests #raidChips > .raid-chip.golden:is([data-golden="info"], [data-golden="go"]), .hud.fold-quests :is(#huntPill, #xLive, #miniBuffs, .awards-cta--world) { display: none; }
/* … or one at a time, ticked in the list beside the button (hud-pick.js): kept on this device, a dungeon's fold never is. */
.hud.hide-vote .awards-cta--world, .hud.hide-drop #huntPill, .hud.hide-live #xLive, .hud.hide-quests #questTrack, .hud.hide-daily #dailyTrack, .hud.hide-camino #caminoTrack, .hud.hide-x #xTask, .hud.hide-daily.hide-x .dt-row, .hud.hide-hour #raidChips > .raid-chip.golden:is([data-golden="info"], [data-golden="go"]), .hud.hide-boosts #miniBuffs { display: none; }
.hud-pick {
  position: fixed; z-index: 12; box-sizing: border-box; display: flex; flex-direction: column; gap: 2px; width: max-content; max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; padding: 8px;
  border-radius: 8px; background: linear-gradient(180deg, var(--stone-2), var(--stone)); border: 2px solid var(--edge-dark);
  box-shadow: inset 0 0 0 1px var(--edge-light), 0 10px 26px rgba(0, 0, 0, 0.5); font: 18px/1.1 var(--ui-font); color: #fff;
}
.hud-pick[hidden] { display: none; }
.hud-pick h3 { margin: 0 0 4px; padding: 0 6px; font: inherit; color: var(--gold); }
.hud-pick label { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 5px; cursor: pointer; }
.hud-pick label:hover { background: #1f2b5c; }
.hud-pick input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--gold); }
.hud-pick .btn { margin-top: 4px; padding: 4px 10px; font-size: 16px; }
.hud-pick small { padding: 4px 6px 0; font-size: 13px; color: var(--muted); }
.orb-fold.on { box-shadow: inset 0 0 0 1px var(--gold), 0 0 10px rgba(255, 210, 63, 0.55); }
.orb-fold.on::after { content: "+"; position: absolute; right: -4px; top: -4px; width: 13px; height: 13px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); border: 1px solid var(--edge-dark); color: #1a1030; font: 700 11px/1 system-ui, sans-serif; }

/* ---------------------------------------------------------------- banners */
.area-banner {
  position: absolute; left: 50%; top: 14px; transform: translate(-50%, -140%); opacity: 0; visibility: hidden;
  transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.18s ease, visibility 0s linear 0.32s;
  padding: 8px 26px 9px; text-align: center; min-width: 240px;
  background: linear-gradient(180deg, #a8744a, #7a4f2c); border: 3px solid #3a2616; border-radius: 6px;
  box-shadow: inset 0 0 0 2px #c8945e, 0 6px 16px rgba(0, 0, 0, 0.45);
}
.area-banner.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition-delay: 0s; }
.area-banner b { display: block; font-family: var(--display); font-size: 22px; color: #fff6e0; text-shadow: 2px 2px 0 #3a2616; }
.area-banner small { display: block; font-size: 16px; color: #ffe6b0; }

/* ---------------------------------------------------------------- chatbox (the social heart of the preview) */
/* Settings → Chat height moves it by --chat-dh-desk (ui.js applyChatSize). Its top never goes up past the minimap column
   (--chat-top, ui.js fitChatTop: 8 px under the quest, Daily, 𝕏 and Camino trackers; owner, 2026-10-08: "the chat tab
   never overlaps the daily quets, x stuff"): a short laptop screen gets a shorter chat, down to the tabs, a line or two
   and the typing box. */
.chatbox { position: absolute; right: 12px; bottom: 12px; width: min(480px, calc(100vw - 300px)); height: max(160px, min(calc(100vh - 12px - var(--chat-top, 218px)), calc(480px + var(--chat-dh-desk, 0px)))); display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(36, 50, 99, calc(0.93 * var(--chat-alpha, 1))), rgba(24, 34, 72, calc(0.95 * var(--chat-alpha, 1)))); }
/* Settings → Chat background (ui.js applyChatAlpha): the map shows through; the tabs and the typing box stay solid, the
   lines get a dark edge, and a conversation with an NPC (its parchment) is always solid. */
html.chat-clear .chat-log { text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
html.dialog-open .chatbox { --chat-alpha: 1; }
/* The tabs, emote buttons and typing box fade with it, a little less than the backing since they're for tapping (owner,
   2026-10-05: "could tre buttons and typing window have transparency too ?"): 25% backing = 48% buttons. Their words get
   the same dark edge; the gold Send button and the phone's channel list stay solid. */
html.chat-clear .chatbox { --chat-ui-a: calc(0.3 + 0.7 * var(--chat-alpha, 1)); }
html.chat-clear :is(.chat-tabs button, .chat-emotes button) { background: rgba(20, 29, 64, var(--chat-ui-a)); }
html.chat-clear .chat-tabs button.active { background: rgba(46, 61, 116, var(--chat-ui-a)); }
html.chat-clear .chat-tabs .chat-side-tabs button.active { background: linear-gradient(180deg, rgba(122, 42, 42, var(--chat-ui-a)), rgba(74, 26, 26, var(--chat-ui-a))); }
html.chat-clear .chat-input { background: rgba(3, 10, 44, calc(0.45 * var(--chat-alpha, 1))); }
html.chat-clear .chat-input input { background: rgba(10, 20, 64, var(--chat-ui-a)); }
html.chat-clear .chat-input input::placeholder { color: #a9b3d6; }
html.chat-clear :is(.chat-tabs, .chat-input input, .chat-input label, .chat-status) { text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
.chat-tabs { display: flex; gap: 2px; padding: 4px 4px 0; border-bottom: 2px solid var(--edge-dark); }
.chat-tabs button { flex: 1; padding: 4px 2px 5px; font-size: 16px; font-weight: 600; color: var(--muted); background: #141d40; border: 1px solid #000; border-bottom: 0; border-radius: 5px 5px 0 0; white-space: nowrap; }
.chat-tabs button.active { color: #fff; background: var(--stone-3); box-shadow: inset 0 2px 0 var(--gold); }
.chat-tabs button:hover:not(.active) { color: #fff; }
.chat-tabs .chat-toggle { flex: 0 0 32px; }
/* Phones swap the channel tabs for one "who you're talking to" button + a drop-down list (see the 760px block). */
.chat-channel { display: none; }
.chat-channels { display: contents; }
/* 🧹 Clear chat (ui.js clearChat): a narrow tab before – on a computer; on a phone the Chat ▾ list's last row, in words. */
.chat-tabs .chat-wipe { flex: 0 0 32px; padding-left: 0; padding-right: 0; }
.chat-wipe span { display: none; }
/* ⚙ Chat settings (chat-filter.js openChatPrefs): the tab being set, a dot on any tab that doesn't show what it used to. */
.cf-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.cf-tabs .btn { position: relative; padding: 5px 10px; font-size: 16px; }
.cf-tabs .btn.active { border-color: var(--gold); box-shadow: inset 0 0 0 2px var(--gold); color: #fff; }
.cf-dot { display: none; position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.cf-tabs .changed .cf-dot { display: block; }
.cf-kind small { display: block; font-size: 13px; line-height: 1.2; color: var(--muted); }
.cf-kind input { flex: none; }
.cf-own { opacity: 0.6; }
.cf-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cf-muted { margin-top: 14px; }
.cf-muted h3 { margin: 0 0 6px; font-size: 18px; }
.cf-muted p { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 6px; }
.cf-muted span { min-width: 0; overflow-wrap: anywhere; }
.cf-muted .btn { flex: none; padding: 3px 10px; font-size: 16px; }
.chat-tabs .chat-side-tabs { flex: 0 0 auto; display: flex; gap: 2px; padding: 0; border-bottom: 0; margin-left: auto; }
.chat-tabs .chat-side-tabs button {
  flex: 0 0 34px; width: 34px; height: 29px; display: grid; place-items: center; padding: 0;
  background: #141d40; border: 1px solid #000; border-bottom: 0; border-radius: 5px 5px 0 0;
}
.chat-tabs .chat-side-tabs button img { width: 22px; height: 22px; image-rendering: pixelated; }
.chat-tabs .chat-side-tabs button.active { background: linear-gradient(180deg, #7a2a2a, #4a1a1a); box-shadow: inset 0 2px 0 var(--gold); }
.chat-tabs .chat-side-tabs button:hover:not(.active) { background: var(--stone-3); }
.chat-status { font-size: 15px; color: #7dffa0; white-space: nowrap; }
.chat-log { flex: 1; overflow-y: auto; padding: 6px 12px; font-size: 19px; line-height: 1.35; }
.chat-log p { margin: 0 0 1px; overflow-wrap: anywhere; }
.chat-log .m-game { color: #ece6d2; }
.chat-log .m-quest { color: var(--rs-orange); }
.chat-log .m-npc { color: #b4ec7a; }
.chat-log .m-public b { color: #fff; }
.chat-log .m-public span { color: var(--cyan); }
.chat-log .m-public b.holder-name { color: var(--gold); }
.chat-log .m-system { color: #c9a8ff; }
.chat-log .m-announce { color: #ffd23f; font-weight: 700; }
.chat-log .chat-empty { color: var(--muted); font-size: 16px; text-align: center; padding: 18px 10px; }
.chat-av { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; vertical-align: -5px; margin-right: 5px; border: 1px solid var(--gold); background: var(--navy-800); }
.holder-name i { font-style: normal; font-size: 13px; color: var(--navy-900); background: var(--gold); border-radius: 3px; padding: 0 3px; margin-left: 4px; vertical-align: 2px; }
.chat-input { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px 8px; padding: 6px 8px 8px; border-top: 1px solid #0b1022; background: rgba(3, 10, 44, 0.45); border-radius: 0 0 4px 4px; }
.chat-input label { font-weight: 700; font-size: 18px; color: #fff; white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.chat-input input { min-width: 0; padding: 6px 10px; border-radius: 6px; background: #0a1440; border: 2px solid #3b4c80; outline: 0; color: var(--cyan); font: 19px var(--ui-font); }
.chat-input input:focus { border-color: var(--gold); }
.chat-input input::placeholder { color: #6a78a8; }
.chat-tools { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chat-emotes { display: flex; flex: none; gap: 3px; }
.chat-emotes button { width: 32px; height: 32px; padding: 0; border-radius: 6px; background: #141d40; border: 1px solid #000; font-size: 16px; line-height: 1; }
.chat-emotes button:hover { box-shadow: inset 0 0 0 1px var(--gold); background: var(--stone-3); }
.chat-send { padding: 6px 16px; border-radius: 6px; background: linear-gradient(180deg, #ffe066, var(--gold-2)); color: var(--navy-900); border: 2px solid #3a2a00; font-family: var(--display); font-size: 16px; box-shadow: inset 0 0 0 1px #fff3b0; }
.chat-send:hover { filter: brightness(1.06); }
.chat-open { position: absolute; right: 12px; bottom: 12px; padding: 8px 14px; border-radius: 8px; background: var(--stone-2); border: 2px solid var(--edge-dark); box-shadow: inset 0 0 0 1px var(--edge-light); font-weight: 700; font-size: 18px; }

/* RuneScape-style dialogue: it takes over the chatbox. */
.dialog { position: absolute; inset: 0; display: flex; gap: 12px; align-items: center; padding: 10px 16px; background: linear-gradient(180deg, #f4ead0, #e4d4a8); border-radius: 4px; color: #2a1e10; cursor: pointer; }
.dialog canvas { width: 120px; height: 132px; image-rendering: pixelated; flex: none; background: radial-gradient(circle at 50% 40%, #fff8e0, #d8c48a); border: 2px solid #8a6a3a; border-radius: 6px; }
.dialog-body { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.dialog-name { font-family: var(--display); font-size: 20px; color: #8a1a10; }
.dialog-name small { font-family: var(--ui-font); font-size: 14px; color: #6a5a3a; margin-left: 6px; }
.dialog-text { font-size: 21px; font-weight: 600; line-height: 1.3; min-height: 3.9em; max-width: 560px; }
.dialog-rest { visibility: hidden; } /* the words still to type: the box and each line's break are already where they end */
.dialog-next { background: none; border: 0; color: #1d3ab8; font-weight: 700; font-size: 17px; padding: 0; }
.dialog-next:hover { color: #0a1a8a; text-decoration: underline; }
.dialog-link { padding: 6px 14px; font-size: 16px; text-decoration: none; }
.dialog-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.dialog-links[hidden] { display: none; }

/* ---------------------------------------------------------------- side panel */
.side { position: absolute; left: 12px; bottom: 12px; width: 264px; height: 356px; display: flex; flex-direction: column; } /* as wide as the ZAZA panel */
.side-tabs { display: flex; gap: 2px; padding: 4px 4px 0; border-bottom: 2px solid var(--edge-dark); }
.side-tabs button { flex: 1; height: 34px; display: grid; place-items: center; background: #141d40; border: 1px solid #000; border-bottom: 0; border-radius: 5px 5px 0 0; padding: 0; }
.side-tabs button img { width: 24px; height: 24px; image-rendering: pixelated; }
.side-tabs button.active { background: linear-gradient(180deg, #7a2a2a, #4a1a1a); box-shadow: inset 0 2px 0 var(--gold); }
.side-tabs button:hover:not(.active) { background: var(--stone-3); }
.side-body { flex: 1; overflow-y: auto; padding: 8px; }
/* Collapsed until a tab is picked, so the world and the chat get the room. */
.side:not(.open) { height: auto; }
/* Desktop: ui.js fitSide sets --side-room, the height left under the ZAZA panel; the open panel fills exactly that, so
   the two stack down the whole left edge and it never covers the ZAZA panel. */
@media (min-width: 761px) and (min-height: 501px) { .side.open { height: var(--side-room, 356px); } }
/* Desktop: the tab icons stay put at the bottom; the panel opens above them. */
#side { flex-direction: column-reverse; }
#side .side-tabs { padding: 0 4px 4px; border-bottom: 0; border-top: 2px solid var(--edge-dark); }
#side .side-tabs button { border: 1px solid #000; border-top: 0; border-radius: 0 0 5px 5px; }
#side .side-tabs button.active { box-shadow: inset 0 -2px 0 var(--gold); }
#side:not(.open) .side-tabs { padding: 4px; border-top: 0; }
#side:not(.open) .side-tabs button { border-top: 1px solid #000; border-radius: 5px; }
.side:not(.open) .side-body { display: none; }
.side:not(.open) .side-tabs { border-bottom: 0; padding-bottom: 4px; }
.side:not(.open) .side-tabs button { border-bottom: 1px solid #000; border-radius: 5px; }
/* Phones only: the tabs move to the chat bar, so the open panel carries its own close button. */
.side-close { display: none; position: absolute; top: 6px; right: 6px; z-index: 2; width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 2px solid var(--gold); background: #141d40; color: #fff; font-size: 16px; line-height: 1; box-shadow: 0 2px 0 #000; }
.side-close:hover { background: #7a2a2a; }
.pane-title { font-family: var(--display); font-size: 18px; color: var(--gold); margin: 0 0 6px; display: flex; justify-content: space-between; align-items: baseline; }
.pane-title small { font-family: var(--ui-font); font-size: 14px; color: var(--muted); }
.pane-note { font-size: 14px; color: var(--muted); line-height: 1.35; margin: 8px 0 0; }



.cardex { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.cardex .card { aspect-ratio: 63 / 88; border-radius: 4px; border: 1px solid #000; display: grid; place-items: center; background: #0a102a; overflow: hidden; padding: 0; }
.cardex .card img { width: 100%; height: 100%; display: block; }
.cardex .card:hover { box-shadow: 0 0 0 2px var(--gold); }
.cardex .card.missing { color: #3b4c80; font-family: var(--display); font-size: 20px; background: repeating-linear-gradient(45deg, #0d1535, #0d1535 4px, #111b42 4px, #111b42 8px); }

.emotes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.emotes button, .btn {
  padding: 8px 6px; border-radius: 6px; font-weight: 700; font-size: 17px; color: #fff;
  background: linear-gradient(180deg, #34457e, #1f2b58); border: 2px solid var(--edge-dark); box-shadow: inset 0 0 0 1px var(--edge-light);
}
.emotes button:hover, .btn:hover { box-shadow: inset 0 0 0 1px var(--gold); }
.btn-gold { background: linear-gradient(180deg, #ffe066, var(--gold-2)); color: var(--navy-900); box-shadow: inset 0 0 0 1px #fff3b0, 0 3px 0 var(--gold-dark); border-color: #3a2a00; }
.btn-gold:hover { box-shadow: inset 0 0 0 1px #fff, 0 3px 0 var(--gold-dark); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.settings { display: flex; flex-direction: column; gap: 8px; font-size: 17px; }
.toggle { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 5px; background: rgba(8, 12, 32, 0.35); }
.toggle input { flex: none; width: 18px; height: 18px; accent-color: var(--gold); }
.zoom-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 8px; border-radius: 5px; background: rgba(8, 12, 32, 0.35); }
.zoom-row button { min-width: 32px; height: 28px; padding: 0 8px; font-size: 16px; }
.zoom-row button:disabled { opacity: 0.4; cursor: default; }
.touch-zoom { display: none; }
html.modal-open .touch-zoom { display: none !important; }
.call-min-row small, .tr-toggle small, .pk-toggle small, .hold-steer-toggle small, .top-clear-toggle small, .hd-toggle small, .shadow-tactics .toggle small { display: block; font-size: 13px; line-height: 1.2; color: var(--muted); }
.call-min-row input { flex: none; width: 64px; padding: 4px 6px; border-radius: 6px; border: 2px solid #3b4c80; background: #0a1440; color: #fff; font: 17px var(--ui-font); text-align: center; }
.call-min-row input:focus { outline: 0; border-color: var(--gold); }
.tr-lang-row select { flex: 0 1 auto; min-width: 0; max-width: 64%; padding: 4px 6px; border-radius: 6px; border: 2px solid #3b4c80; background: #0a1440; color: #fff; font: 16px var(--ui-font); }
.tr-lang-row select:focus { outline: 0; border-color: var(--gold); }
.chat-size-row b, .chat-alpha-row b { margin-left: 4px; color: var(--gold); font-weight: 400; }
/* ⚔ Fight sounds and 📻 Radio volume (ui.js settings): a slider each, the % beside the name */
.vol-row b { margin-left: 4px; color: var(--gold); font-weight: 400; }
.vol-row small { display: block; font-size: 13px; line-height: 1.2; color: var(--muted); }
.vol-row input[type="range"] { flex: 0 1 42%; min-width: 96px; margin: 0; accent-color: var(--gold); cursor: pointer; }
.vol-row input[type="range"]:disabled { opacity: 0.4; cursor: default; }
.hats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.hat { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 4px; border-radius: 6px; background: rgba(8, 12, 32, 0.45); border: 1px solid #000; }
.hat img { width: 32px; height: 32px; image-rendering: pixelated; }
.hat span { font-size: 15px; font-weight: 700; }
.hat small { font-size: 12px; color: var(--muted); text-align: center; line-height: 1.1; }
.hat:hover:not([disabled]) { box-shadow: inset 0 0 0 1px var(--gold); }
.hat.on { box-shadow: inset 0 0 0 2px var(--gold); background: rgba(255, 210, 63, 0.1); }
.hat[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ---------------------------------------------------------------- context menu (RuneScape "Choose Option") */
.ctx { position: fixed; z-index: 30; min-width: 170px; padding: 0 0 3px; border-radius: 2px; background: #5d5447; border: 1px solid #000; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); font-size: 18px; font-weight: 600; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.ctx-head { background: #000; color: #5d5447; padding: 2px 6px; font-weight: 700; }
.ctx button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 2px 8px; color: #fff; white-space: nowrap; text-shadow: 1px 1px 0 #000; }
.ctx button:hover, .ctx button:focus { color: var(--rs-yellow); outline: none; background: rgba(0, 0, 0, 0.18); }
.ctx .t-npc { color: var(--rs-yellow); }
.ctx .t-obj { color: #62e8ff; }

/* ---------------------------------------------------------------- player card (hover or click a player) */
.player-card {
  position: fixed; left: 0; top: 0; z-index: 15; width: 262px; padding: 10px 12px; border-radius: 10px; pointer-events: none;
  background: linear-gradient(180deg, rgba(13, 34, 133, 0.97), rgba(6, 18, 79, 0.97)); border: 2px solid #000a2e;
  box-shadow: 0 0 0 2px var(--edge-light), 0 10px 24px rgba(0, 0, 0, 0.5);
}
.player-card.holder { box-shadow: 0 0 0 2px var(--gold), 0 0 22px rgba(255, 210, 63, 0.3), 0 10px 24px rgba(0, 0, 0, 0.5); }
.player-card.pinned { pointer-events: auto; }
.pc-close { display: none; }
.pc-top { display: flex; gap: 10px; align-items: center; }
.pc-av { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid var(--gold); background: var(--navy-800); }
.pc-av.pixel { image-rendering: pixelated; border-radius: 10px; border-color: var(--edge-light); background: radial-gradient(circle at 50% 40%, #3a66ff, var(--navy-900)); }
.pc-id { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.pc-id b { max-width: 172px; font-family: var(--display); font-weight: 400; font-size: 19px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-id .chip { margin-left: 0; font-size: 12px; }
.chip.guest { background: var(--stone-3); color: #fff; }
.pc-id small { font-size: 13px; color: var(--muted); }
.pc-row { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; padding: 3px 8px; border-radius: 5px; background: rgba(3, 10, 44, 0.55); font-size: 16px; }
.pc-row span { color: var(--muted); }
.pc-row b { color: var(--gold); }
.pc-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.pc-tags span { font-size: 13px; color: var(--cyan); border: 1px solid #1d4bff; border-radius: 4px; padding: 1px 6px; }
.pc-note { font-size: 15px; color: var(--muted); margin: 8px 0 0; line-height: 1.3; }
.pc-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
/* Fighter info: level, class, weapon and shield */
.pc-fight { margin-top: 8px; padding: 6px 8px; border-radius: 6px; background: rgba(3, 10, 44, 0.55); display: grid; gap: 6px; }
.pc-lvl, .pc-item { display: flex; align-items: center; gap: 7px; min-width: 0; }
.pc-lvl img, .pc-item img { width: 28px; height: 28px; image-rendering: pixelated; flex: none; }
.pc-lvl span, .pc-item span { display: grid; min-width: 0; line-height: 1.15; }
.pc-lvl b { color: var(--gold); font-size: 16px; }
.pc-lvl small, .pc-item small { color: var(--muted); font-size: 12px; }
.pc-item b { color: #fff; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-gear { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
/* Squad line on the card, and the squad tag in the online list (same blue as the tag over players on the map) */
.pc-squad { display: flex; align-items: center; gap: 7px; min-width: 0; }
.pc-squad i { width: 28px; flex: none; text-align: center; font-style: normal; font-size: 18px; }
.pc-squad span { display: grid; min-width: 0; line-height: 1.15; }
.pc-squad small { color: var(--muted); font-size: 12px; }
.pc-squad b { color: #fff; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-squad em, .sq-tag { color: #9fe0ff; font-style: normal; }
.pc-squad.mate small { color: #9fe0ff; }
.pc-squad.none { opacity: 0.7; }
.pc-squad.dragon small { color: #ff9a4a; }
.pc-squad.arena small { color: var(--gold); }
.pc-busy { justify-self: start; padding: 1px 8px; border-radius: 4px; background: #d6283c; color: #fff; font-size: 14px; animation: pc-busy 1s ease-in-out infinite alternate; }
@keyframes pc-busy { from { opacity: 0.75; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pc-busy { animation: none; } }
.pc-actions .btn { padding: 5px 9px; font-size: 15px; }

/* ---------------------------------------------------------------- modal */
.modal-backdrop { position: fixed; inset: 0; z-index: 20; background: rgba(3, 8, 30, 0.55); display: grid; place-items: center; padding: 16px; }
.modal { position: relative; width: min(560px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 22px 22px 18px; }
.modal-x { position: absolute; right: 10px; top: 8px; width: 30px; height: 30px; border-radius: 6px; background: #7a2a2a; border: 2px solid #000; font-weight: 700; }
.modal h2 { font-family: var(--display); font-weight: 400; color: var(--gold); font-size: 24px; margin: 0 0 4px; }
.modal .sub { color: var(--muted); font-size: 17px; margin: 0 0 12px; }
.modal p { font-size: 18px; line-height: 1.45; }
/* The 🏆 vote's window before PlayToEarn (ui.js voteNote): the three categories and the how-to video. */
.vote-cats { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.vote-cats li { padding: 2px 10px; border: 1px solid var(--gold-2); border-radius: 999px; background: rgba(255, 210, 63, 0.1); color: var(--gold); font-size: 17px; }
.vote-video { display: flex; align-items: center; gap: 12px; padding: 6px; border: 2px solid #000; border-radius: 8px; background: var(--navy-950); color: var(--text); text-decoration: none; }
.vote-video:hover, .vote-video:focus-visible { border-color: var(--gold); outline: 0; }
.vote-video i { position: relative; flex: none; width: 128px; aspect-ratio: 16 / 9; border-radius: 5px; overflow: hidden; background: #000; }
.vote-video i::after { content: "▶"; position: absolute; inset: 0; margin: auto; width: 34px; height: 24px; display: grid; place-items: center; border-radius: 6px; background: #e62117; color: #fff; font-size: 13px; font-style: normal; }
.vote-video img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vote-video b { display: block; font-family: var(--display); font-weight: 400; font-size: 17px; color: var(--gold); }
.vote-video small { color: var(--muted); font-size: 15px; }
.modal .sub.vote-leave { margin: 10px 0 0; font-size: 15px; }
/* The RuneScape kit for windows (ZAZA's window and the ZAZA players popup): a brass stud for each corner of a slab
   (-s: the small one, for the level cells), the stone's faint courses, the bevel (light top left, dark bottom right), a
   sunken pit for charts and bars, and parchment with its inks. */
.modal {
  --rs-stud: radial-gradient(circle at 42% 38%, #fff6c8 0 1px, #ffd23f 1.4px 2.4px, #b07d12 2.6px 3.6px, #2a1a00 3.8px 4.6px, transparent 5px);
  --rs-studs: var(--rs-stud) left 3px top 3px / 10px 10px no-repeat, var(--rs-stud) right 3px top 3px / 10px 10px no-repeat, var(--rs-stud) left 3px bottom 3px / 10px 10px no-repeat, var(--rs-stud) right 3px bottom 3px / 10px 10px no-repeat;
  --rs-stud-s: radial-gradient(circle at 42% 38%, #fff6c8 0 0.7px, #ffd23f 1px 1.7px, #b07d12 1.9px 2.5px, #2a1a00 2.7px 3.2px, transparent 3.5px);
  --rs-studs-s: var(--rs-stud-s) left 2px top 2px / 7px 7px no-repeat, var(--rs-stud-s) right 2px top 2px / 7px 7px no-repeat, var(--rs-stud-s) left 2px bottom 2px / 7px 7px no-repeat, var(--rs-stud-s) right 2px bottom 2px / 7px 7px no-repeat;
  --rs-courses: repeating-linear-gradient(180deg, transparent 0 15px, rgba(0, 0, 0, 0.16) 15px 16px);
  --rs-slab: linear-gradient(180deg, #27376f, #121a45);
  --rs-bevel: inset 1px 1px 0 rgba(255, 255, 255, 0.14), inset -1px -1px 0 rgba(0, 0, 0, 0.5), 0 3px 0 #000a2e;
  --rs-pit: inset 0 3px 6px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.08);
  --rs-pit-bg: linear-gradient(180deg, #040922, #0a1236);
  --rs-ink: #3a2812; --rs-ink-2: #6e5532; --rs-red: #8a2a14; --rs-line: rgba(92, 62, 24, 0.5);
  --rs-paper: radial-gradient(ellipse 60% 40% at 30% 22%, rgba(255, 250, 228, 0.5), transparent 70%), radial-gradient(ellipse 50% 35% at 78% 72%, rgba(150, 108, 50, 0.13), transparent 70%), repeating-linear-gradient(90deg, rgba(120, 84, 36, 0.035) 0 2px, transparent 2px 5px), linear-gradient(90deg, #c4a066, #e4cd98 6%, #eddcb0 50%, #e4cd98 94%, #c4a066);
}
.dragonbreaker-title { padding-right: 40px; }
.dragonbreaker-pop { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 16px; align-items: center; }
.dragonbreaker-pop canvas { width: 120px; height: 132px; image-rendering: pixelated; background: radial-gradient(circle at 50% 38%, #46211b, #120718); border: 2px solid var(--gold); border-radius: 8px; box-shadow: inset 0 0 0 2px #000, 0 4px 0 #0006; }
.dragonbreaker-pop b { display: block; color: #fff; font-family: var(--display); font-size: 22px; line-height: 1; margin-bottom: 6px; }
.dragonbreaker-pop p { margin: 0 0 10px; }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 12px 0; }
/* ZAZA's window: Holders over Price on the left, and Liquidity beside both, tall enough for the community's part, its
   providers' faces and ⓘ How to add liquidity (at its foot), so no box stands half empty under its number (owner,
   2026-10-13: "make it all fit better"). A number shrinks with its box only on the narrowest phones (15cqi: the price's ~6.2em).
   At the bottom right, as tall as both too, the runners tile (runners.js; owner, 2026-10-15). Phones: Holders and Price
   beside Liquidity as before, the tile across both under them. */
.stats.mc-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats.mc-stats > .stat { container-type: inline-size; min-width: 0; }
.stats.mc-stats > .stat b { font-size: min(21px, 15cqi); white-space: nowrap; }
.stats.mc-stats > .mc-liq, .stats.mc-stats > .mc-run { grid-row: 1 / span 2; display: flex; flex-direction: column; }
.stats.mc-stats > .mc-liq { grid-column: 2; }
.stats.mc-stats > .mc-run { grid-column: 3; }
@media (max-width: 640px) {
  .stats.mc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats.mc-stats > .mc-run { grid-column: 1 / -1; grid-row: 3; }
}
.stats.mc-stats .lp-how { margin-top: auto; padding-top: 8px; }
/* its sources line as small print: .modal p's 18px had made it five big lines on a phone */
.stats.mc-stats + .pane-note { font-size: 13px; line-height: 1.4; }
.stat { padding: 10px; border-radius: 6px; background: rgba(8, 12, 32, 0.45); border: 1px solid #000; }
.stat small { display: block; font-size: 14px; color: var(--muted); }
.stat b { display: block; font-family: var(--display); font-weight: 400; font-size: 21px; color: #fff; margin-top: 2px; }
.stat b.gold { color: var(--gold); }
.stat small.stat-sub { font-size: 12px; line-height: 1.25; margin-top: 3px; } /* ZAZA's window: the liquidity the community added */
@media (max-width: 560px) { .stat small.stat-sub { font-size: 11px; } }
/* ZAZA's window, Liquidity box: the faces of the wallets that added liquidity, ringed in their aura's colour, and the way to
   the docs' Liquidity providers page (ui.js loadLpFaces) */
.lp-how { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; margin-top: 7px; padding: 0; border: 0; background: none; color: #7fd4ff; font: inherit; font-size: 12px; line-height: 1.25; text-align: left; cursor: pointer; }
.lp-how:hover .lp-how-t, .lp-how:focus-visible .lp-how-t { text-decoration: underline; }
.lp-faces { display: inline-flex; align-items: center; padding-left: 7px; }
.lp-faces:empty { display: none; }
.lp-face { flex: none; width: 30px; height: 30px; margin-left: -7px; border-radius: 50%; overflow: hidden; border: 2px solid var(--ring, #7fd8ff); background: #0b1430; box-shadow: 0 0 6px var(--ring, #7fd8ff); }
.lp-face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lp-face img.px { image-rendering: pixelated; }
.lp-more { margin-left: 4px; font-style: normal; font-size: 11px; color: var(--muted); }
@media (max-width: 560px) { .lp-how { font-size: 11px; } .lp-face { width: 24px; height: 24px; } }
/* ZAZA's window, bottom right: the animal runners (runners.js), a box like the others beside it (owner, 2026-10-15: "keep
   same color as resst.. and smaller"): CARDS and ZAZA, the multiple to the runners' average in gold, a bar against the
   biggest runner, ZAZA's proportion and the runners' average, and ⓘ at its foot like Liquidity's. Both market caps are at
   the window's top. The whole tile is the button to the runners' window. */
.stats.mc-stats > .mc-run { gap: 5px; font: inherit; text-align: left; color: #fff; cursor: pointer; }
.stats.mc-stats > .mc-run:hover, .stats.mc-stats > .mc-run:focus-visible { background: rgba(29, 75, 255, 0.22); }
.mcr-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 14px; line-height: 1.2; color: var(--muted); }
.stats.mc-stats > .mc-run .mcr-head b { display: inline-flex; align-items: center; gap: 5px; margin: 0; font: inherit; color: inherit; }
.mcr-head img { width: 14px; height: 14px; }
.mcr-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 8px; font-family: var(--display); font-size: 15px; line-height: 1.1; }
.mcr-rows em { display: block; font: 400 13px/1.1 var(--ui-font); color: var(--muted); }
.mcr-hero { display: flex; align-items: center; gap: 8px; }
.mcr-hero strong { flex: none; font-family: var(--display); font-weight: 400; font-size: 24px; line-height: 1; color: var(--gold); }
.stats.mc-stats > .mc-run .mcr-hero small { font-size: 13px; line-height: 1.15; }
.mcr-bar { display: block; height: 4px; border-radius: 2px; background: rgba(169, 179, 214, 0.15); overflow: hidden; }
.mcr-bar i { display: block; height: 100%; border-radius: 2px; background: var(--gold); }
.mcr-how { margin-top: auto; font-size: 12px; line-height: 1.25; color: var(--cyan); }
.mc-run:hover .mcr-how, .mc-run:focus-visible .mcr-how { text-decoration: underline; }
@media (max-width: 560px) { .mcr-how { font-size: 11px; } }
/* ⓘ on that tile: the runners' window, the other chains' mascots and ZAZA live in one table, then how it's worked out */
.modal h2.run-title { display: flex; align-items: center; gap: 10px; padding-right: 40px; }
.run-title img { flex: none; width: 30px; height: 30px; }
.run-scroll { overflow-x: auto; margin: 0 0 12px; }
.run-table { width: 100%; border-collapse: collapse; font-size: 17px; }
.run-table th, .run-table td { padding: 6px 8px; text-align: right; white-space: nowrap; border-bottom: 1px solid rgba(169, 179, 214, 0.15); }
.run-table thead th { padding-top: 0; font-weight: 400; font-size: 14px; color: var(--muted); }
.run-table th:first-child { text-align: left; }
.run-table tbody th b { font-family: var(--display); font-weight: 400; font-size: 16px; color: #fff; }
.run-table tbody th small { margin-left: 6px; font-size: 14px; color: var(--muted); }
.run-table td small { margin-left: 4px; font-size: 13px; color: var(--muted); }
.run-table .rt-p { width: 92px; color: var(--gold); }
.rt-bar { display: block; height: 4px; margin-top: 4px; border-radius: 2px; background: rgba(169, 179, 214, 0.15); overflow: hidden; }
.rt-bar i { display: block; height: 100%; border-radius: 2px; background: var(--gold); }
.run-table tr.rt-zaza > * { background: var(--gold); color: var(--navy-900); border-bottom: 0; }
.run-table tr.rt-zaza > :first-child { border-radius: 6px 0 0 6px; }
.run-table tr.rt-zaza > :last-child { border-radius: 0 6px 6px 0; }
.run-table tr.rt-zaza b, .run-table tr.rt-zaza small { color: var(--navy-900); }
.run-table tr.rt-zaza .rt-bar { background: rgba(6, 18, 79, 0.18); }
.run-table tr.rt-zaza .rt-bar i { background: var(--navy-900); }
.modal h3.run-h { margin: 0 0 4px; font-family: var(--display); font-weight: 400; font-size: 18px; color: var(--gold); }
.run-math { margin: 0; padding-left: 20px; font-size: 17px; line-height: 1.4; }
.run-math li + li { margin-top: 3px; }
.run-math + .pane-note { font-size: 13px; line-height: 1.4; }
@media (max-width: 560px) {
  .run-table { font-size: 15px; }
  .run-table th, .run-table td { padding: 5px 4px; }
  .run-table tbody th small { display: block; margin: 0; font-size: 12px; }
  .run-table td small { display: none; }
  .run-table .rt-p { width: 64px; }
  .run-math { font-size: 15px; }
}
/* The Saiyan Chamber's window (saiyan-ui.js): your character powering up on a stage of cyan light, your power level, three
   steps and the perks */
.sc-title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.sc-club { padding: 4px 10px 3px; border-radius: 999px; background: linear-gradient(#ffe36a, #e0a92a); color: #1b1424; font: 400 12px/1.2 var(--display); letter-spacing: 0.5px; box-shadow: 0 2px 0 #7a5410; }
.sc-top { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; margin: 12px 0; }
.sc-stage-wrap { flex: 0 0 auto; display: grid; justify-items: center; gap: 8px; padding: 10px; border-radius: 10px; border: 1px solid rgba(127, 212, 255, 0.45); background: radial-gradient(ellipse at 50% 72%, rgba(63, 200, 255, 0.26), rgba(8, 12, 32, 0.88) 70%); box-shadow: inset 0 0 24px rgba(63, 200, 255, 0.18); }
.sc-stage { display: block; width: 144px; height: 174px; image-rendering: pixelated; }
.sc-tiers { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 230px; }
.sc-tier { padding: 3px 8px; border: 1px solid rgba(127, 212, 255, 0.35); border-radius: 999px; background: rgba(8, 12, 32, 0.6); color: #bfe8ff; font: inherit; font-size: 11px; cursor: pointer; }
.sc-tier.on { border-color: #7fd4ff; background: #7fd4ff; color: #0b1430; }
.sc-me { flex: 1 1 260px; min-width: 0; padding: 12px 14px; border: 1px solid #000; border-radius: 10px; background: rgba(8, 12, 32, 0.45); }
.sc-power { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.sc-power small { font-size: 13px; color: var(--muted); }
.sc-power b { font: 400 34px/1 var(--display); color: #7fd4ff; text-shadow: 0 0 12px rgba(63, 200, 255, 0.6); }
.sc-over { padding: 4px 8px 3px; border-radius: 6px; background: #ffd23f; color: #1b1424; font: 400 13px/1 var(--display); font-style: normal; transform: rotate(-3deg); box-shadow: 0 2px 0 #7a5410; }
.sc-line { margin: 8px 0 6px; }
.sc-bar { height: 10px; overflow: hidden; border: 1px solid #000; border-radius: 99px; background: rgba(255, 255, 255, 0.08); }
.sc-bar span { display: block; height: 100%; background: linear-gradient(90deg, #2a7dff, #7fd8ff); box-shadow: 0 0 8px #3fb8ff; }
.sc-next, .sc-none { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.sc-super { margin: 10px 0 0; padding-top: 9px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 13px; }
.sc-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 10px; padding: 0; list-style: none; counter-reset: sc; }
.sc-steps li { padding: 10px; border: 1px solid #000; border-radius: 8px; background: rgba(8, 12, 32, 0.45); font-size: 13px; counter-increment: sc; }
.sc-steps li::before { content: counter(sc); display: grid; place-items: center; width: 22px; height: 22px; margin-bottom: 5px; border-radius: 50%; background: #ffd23f; color: #1b1424; font: 400 13px/1 var(--display); }
.sc-steps b { display: block; color: #fff; }
.sc-steps span { color: var(--muted); }
.sc-perks { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; }
.sc-perks li { padding: 4px 10px; border: 1px solid rgba(127, 212, 255, 0.35); border-radius: 999px; background: rgba(63, 200, 255, 0.12); color: #cdeeff; font-size: 12px; }
@media (max-width: 560px) { .sc-steps { grid-template-columns: 1fr; } .sc-stage-wrap { flex: 1 1 100%; } }
/* The whale chat's window (whale-chat-ui.js): the VIP Lounge poster beside what you need, then the three steps in Telegram. */
.wc-title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.wc-club { padding: 4px 10px 3px; border-radius: 999px; background: linear-gradient(#ffe36a, #e0a92a); color: #1b1424; font: 400 12px/1.2 var(--display); letter-spacing: 0.5px; box-shadow: 0 2px 0 #7a5410; }
.wc-top { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; margin: 12px 0; }
.wc-pic { flex: 0 0 auto; display: block; width: 200px; height: auto; aspect-ratio: 527 / 530; border: 2px solid #c9a227; border-radius: 10px; box-shadow: 0 0 18px rgba(255, 200, 60, 0.35); background: #140b07; }
.wc-me { flex: 1 1 240px; min-width: 0; padding: 12px 14px; border: 1px solid #000; border-radius: 10px; background: rgba(8, 12, 32, 0.45); }
.wc-me .sub { margin: 0; }
.wc-status { margin: 10px 0 0; padding-top: 9px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 13px; color: var(--muted); }
.wc-status.ok { color: #9ff0b0; }
.wc-h { margin: 0 0 6px; font: 400 15px/1.25 var(--display); color: var(--gold); }
.wc-h small { margin-left: 6px; font: 400 15px/1.25 var(--ui-font); color: var(--muted); }
.wc-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 10px; padding: 0; list-style: none; counter-reset: wc; }
.wc-steps li { padding: 10px; border: 1px solid #000; border-radius: 8px; background: rgba(8, 12, 32, 0.45); font-size: 13px; counter-increment: wc; }
.wc-steps li::before { content: counter(wc); display: grid; place-items: center; width: 22px; height: 22px; margin-bottom: 5px; border-radius: 50%; background: #ffd23f; color: #1b1424; font: 400 13px/1 var(--display); }
.wc-steps b { display: block; color: #fff; }
.wc-steps span { color: var(--muted); }
.wc-steps span b { display: inline; }
@media (max-width: 560px) { .wc-steps { grid-template-columns: 1fr; } .wc-pic { width: min(200px, 100%); margin: 0 auto; } }
.live-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 700; color: #fff; background: #b8302a; border-radius: 4px; padding: 2px 7px; vertical-align: 3px; margin-left: 6px; }
.live-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: blink 1.2s infinite; }
.demo-tag { display: inline-block; font-size: 14px; font-weight: 700; color: var(--navy-900); background: var(--cyan); border-radius: 4px; padding: 2px 7px; vertical-align: 3px; margin-left: 6px; }
@keyframes blink { 50% { opacity: 0.2; } }
.board { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.board-row { width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 0; border-radius: 6px; background: rgba(8, 12, 32, 0.45); color: inherit; font: inherit; font-size: 18px; text-align: left; cursor: pointer; transition: background 0.12s, box-shadow 0.12s; }
.board-row:hover, .board-row:focus-visible { background: rgba(29, 75, 255, 0.35); box-shadow: inset 0 0 0 1px var(--cyan); outline: none; }
.board .rank { flex: none; width: 26px; font-family: var(--display); color: var(--gold); text-align: center; }
.board img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; border: 1px solid #000; background: #0a1a6b; }
.board .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board .val { white-space: nowrap; text-align: right; line-height: 1.05; }
.board .val b { display: block; font-family: var(--display); font-weight: 400; font-size: 22px; color: var(--gold); }
.board .val small { display: block; font-size: 15px; color: #dfe6ff; }
.board .nm .tier-ico { width: 16px; height: 16px; margin-right: 6px; }

/* ---------------------------------------------------------------- live multiplayer */
.mini-legend { position: absolute; z-index: 3; right: 131px; top: 1px; pointer-events: auto; }
.mini-legend summary { box-sizing: border-box; width: 18px; height: 18px; display: grid; place-items: center; list-style: none; border: 1px solid var(--edge-dark); border-radius: 50%; background: rgba(6, 12, 40, 0.88); box-shadow: inset 0 0 0 1px rgba(255, 210, 63, 0.45); color: #dfe6ff; font: 700 11px/1 system-ui, sans-serif; cursor: pointer; }
.mini-legend summary::-webkit-details-marker { display: none; }
.mini-legend summary:hover, .mini-legend summary:focus-visible, .mini-legend[open] summary { color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold), 0 0 7px rgba(255, 210, 63, 0.5); outline: none; }
.mini-legend-key { position: absolute; right: 0; top: 21px; display: none; flex-direction: column; align-items: flex-start; gap: 3px; padding: 4px 6px; border: 1px solid rgba(255, 210, 63, 0.45); border-radius: 6px; background: rgba(6, 12, 40, 0.94); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4); font-size: 9px; line-height: 1; color: #dfe6ff; white-space: nowrap; }
.mini-legend:hover .mini-legend-key, .mini-legend:focus-within .mini-legend-key, .mini-legend[open] .mini-legend-key { display: flex; }
.mini-legend span { display: inline-flex; align-items: center; gap: 3px; }
.mini-legend i { flex: none; border: 1px solid #1b1424; }
.mini-legend .lg-you { width: 7px; height: 7px; background: #fff; box-shadow: 0 0 0 1.5px #5fd0ff; }
.mini-legend .lg-player { width: 6px; height: 6px; border-radius: 50%; background: #ffffff; }
/* The eye (ui.js hideHud, like H): the minimap box's top right corner, on the line from the map's middle at 45°, 2 px off
   its dark rim; a circle smaller than the ring's buttons (owner, 2026-10-28: "make the button smaller than the others"),
   lit gold while the HUD is hidden, when it's the one thing left by the minimap. A computer's map key moves up left of
   the map, between it and the run button. Phones place it in the PHONE block. */
.hud-hide {
  position: absolute; z-index: 3; top: 2px; right: 2px; box-sizing: border-box; width: 22px; height: 22px; padding: 0; display: grid; place-items: center;
  border: 2px solid var(--edge-dark); border-radius: 50%; background: linear-gradient(180deg, #2a3668, #151d42); box-shadow: inset 0 0 0 1px var(--edge-light), 0 2px 6px rgba(0, 0, 0, 0.4); cursor: pointer;
}
.hud-hide:hover { box-shadow: inset 0 0 0 1px var(--gold), 0 2px 6px rgba(0, 0, 0, 0.4); }
.hud-hide:active { translate: 0 1px; }
.hud-hide img { width: 16px; height: 16px; image-rendering: pixelated; }
.hud-hide.on { box-shadow: inset 0 0 0 1px var(--gold), 0 0 10px rgba(255, 210, 63, 0.55); }
.mini-legend .lg-holder { width: 8px; height: 8px; background: #ffd23f; transform: rotate(45deg); margin: 0 2px; }
.mini-legend span:last-child { color: var(--gold); font-weight: 700; }
/* Hidden cards under the minimap: found so far · left to discover (opens the world map) */
.mini-cards { display: inline-flex; align-items: center; justify-content: center; gap: 5px; box-sizing: border-box; height: 25px; padding: 0 10px; border-radius: 8px; background: rgba(6, 12, 40, 0.8); border: 1px solid rgba(255, 210, 63, 0.45); font-size: 14px; color: #dfe6ff; white-space: nowrap; cursor: pointer; }
.mini-cards b { color: var(--gold); }
.mini-cards:hover { border-color: var(--gold); }
.mini-cards.done { color: var(--gold); border-color: var(--gold); }
/* The potion boosts you have running, under the card tracker: the potion's icon, what it gives and a countdown; green
   like a boost, the clock blinking in its last minute. Words centred like the other chips. */
.mini-buffs { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px; max-width: 230px; padding: 0; margin: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.mini-buffs[hidden] { display: none; }
.mini-buffs .mb { display: inline-flex; align-items: center; gap: 5px; box-sizing: border-box; height: 25px; padding: 0 8px 0 4px; border-radius: 8px; background: rgba(6, 12, 40, 0.8); border: 1px solid rgba(110, 230, 140, 0.6); box-shadow: 0 0 6px rgba(110, 230, 140, 0.25); font-size: 13px; color: #b8f5c4; white-space: nowrap; }
.mini-buffs:hover .mb { border-color: #6ee68c; }
.mini-buffs .mb img { width: 18px; height: 18px; image-rendering: pixelated; animation: mb-glow 2.4s ease-in-out infinite; }
.mini-buffs .mb > span, .mini-buffs .mb > em { display: block; line-height: 1; translate: 0 0.09em; }
.mini-buffs .mb > em { font-style: normal; color: var(--gold); font-variant-numeric: tabular-nums; }
.mini-buffs .mb.ending { border-color: rgba(255, 152, 31, 0.8); }
.mini-buffs .mb.ending > em { color: #ff981f; animation: mb-blink 1s steps(2, start) infinite; }
/* The potions and a cooked fish share one pill (ui-expansion.js boostPillHTML), a part each split by a thin line: the icon,
   then what it gives over its countdown, so three sit on one row (owner, 2026-11-08: "consolidate the view of the potions
   so they all display on same line but dont take too much space"). Line boxes a little shorter than the font keep the two
   lines' capitals centred in the pill without text-box trimming. Four or more (.many) a size smaller; five wrap in the pill. */
.mini-buffs .mbs { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; max-width: 100%; box-sizing: border-box; min-height: 25px; padding: 0 1px; border-radius: 8px; background: rgba(6, 12, 40, 0.8); border: 1px solid rgba(110, 230, 140, 0.6); box-shadow: 0 0 6px rgba(110, 230, 140, 0.25); color: #b8f5c4; white-space: nowrap; }
.mini-buffs:hover .mbs { border-color: #6ee68c; }
.mini-buffs .mbp { display: flex; align-items: center; gap: 3px; height: 23px; padding: 0 5px 0 3px; }
.mini-buffs .mbp + .mbp { box-shadow: inset 1px 0 rgba(110, 230, 140, 0.3); }
.mini-buffs .mbp img { flex: none; width: 18px; height: 18px; image-rendering: pixelated; animation: mb-glow 2.4s ease-in-out infinite; }
.mini-buffs .mbp > span { display: flex; flex-direction: column; align-items: flex-start; font-size: 12px; }
.mini-buffs .mbp :is(b, em) { display: block; line-height: 11px; font-weight: 400; font-style: normal; }
.mini-buffs .mbp em { color: var(--gold); font-variant-numeric: tabular-nums; }
.mini-buffs .mbp.ending em { color: #ff981f; animation: mb-blink 1s steps(2, start) infinite; }
.mini-buffs .many .mbp { gap: 2px; padding: 0 4px 0 2px; }
.mini-buffs .many .mbp img { width: 16px; height: 16px; }
.mini-buffs .many .mbp > span { font-size: 11px; }
.mini-buffs .many .mbp :is(b, em) { line-height: 10px; }
@keyframes mb-glow { 50% { filter: drop-shadow(0 0 3px rgba(140, 255, 170, 0.9)); } }
@keyframes mb-blink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .mini-buffs .mbp img, .mini-buffs :is(.mb, .mbp).ending em { animation: none; } }
/* The quest tracker under the minimap (rpg/ui-quests.js): the quest, the step you're on, and a fold button. Gold edge
   when the giver has your reward. */
/* The start screen's look (owner, 2026-11-07, of the strip: "update the style of the banner to better fit the new zaza style"):
   navy glass, a thin gold edge, small gold Titan names. */
.quest-track { display: flex; align-items: stretch; max-width: 230px; box-sizing: border-box; border-radius: 12px; background: linear-gradient(180deg, rgba(26, 38, 99, 0.95), rgba(9, 14, 52, 0.95)); border: 1.5px solid rgba(232, 181, 42, 0.85); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 240, 200, 0.12); }
#questTrack { overflow: hidden; }
.quest-track[hidden] { display: none; }
/* One row a quest line you're on (rpg/ui-quests.js): Pip's or the story, the Storm Watch, the Most Wanted; a thin line between. */
.qt-lines { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.qt-line { display: flex; align-items: stretch; min-width: 0; }
.qt-line + .qt-line { border-top: 1px solid rgba(232, 196, 106, 0.2); }
/* Folded: the lines side by side, each its icon and count, one strip (owner, 2026-10-13, of three stacked rows: "so it
   doesnt take as much space, any way you can put them all side by side... when not expanded"). */
.quest-track.folded .qt-lines { flex-direction: row; flex-wrap: wrap; }
.quest-track.folded .qt-line + .qt-line { border-top: 0; border-left: 1px solid rgba(232, 196, 106, 0.2); }
/* It takes the width it needs, out to the left of the minimap: at 230 px a fourth line cut every count to its first digit (the North's row made four). */
.quest-track.folded { width: max-content; max-width: calc(100vw - 16px); align-self: flex-end; }
.quest-track.folded .qt-line { flex: 1 0 auto; }
.quest-track.folded .qt-lines > .qt-go { flex: 1 0 auto; min-height: 28px; }
.qt-line .qt-main { flex: 1 1 auto; }
.qt-ico { flex: none; width: 24px; font-size: 19px; line-height: 1; text-align: center; }
.qt-row { display: contents; } /* the quest and daily trackers (rpg/ui-quests.js): one under the other, as if not wrapped */
.quest-track button { margin: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.quest-track .qt-main { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 4px 6px; text-align: left; color: #dfe6ff; }
.quest-track .qt-main img { flex: none; width: 24px; height: 24px; image-rendering: pixelated; }
.qt-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.qt-name { display: flex; align-items: baseline; gap: 5px; min-width: 0; font: 400 11px/1 var(--display); letter-spacing: 0.02em; color: var(--gold); white-space: nowrap; }
.qt-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.qt-name b { flex: none; color: #fff; font-weight: 400; }
.qt-step { display: block; font-size: 16px; line-height: 1; color: #fff; }
.quest-track .qt-fold { flex: none; width: 22px; padding: 0; border-left: 1px solid rgba(232, 196, 106, 0.25); color: var(--gold); font: 400 15px/1 var(--display); }
.quest-track .qt-fold:hover, .quest-track .qt-main:hover .qt-step { color: var(--gold); }
/* The fold and the list's button, one over the other (rpg/quest-focus.js), side by side on the folded strip. */
.qt-side { flex: none; display: flex; flex-direction: column; width: 22px; border-left: 1px solid rgba(232, 196, 106, 0.2); }
.quest-track .qt-side > button { flex: 1 1 0; display: grid; place-items: center; width: 100%; min-height: 20px; padding: 0; border: 0; color: #f2d58c; line-height: 1; }
.quest-track .qt-side > button:hover { color: var(--gold); }
.quest-track .qt-adj { font-size: 14px; border-bottom: 1px solid rgba(232, 196, 106, 0.2); }
.quest-track .qt-adj[hidden] { display: none; }
.quest-track .qt-adj.on { color: var(--gold); }
.quest-track .qt-adj.ready { color: #1b1424; background: linear-gradient(180deg, #ffe778, var(--gold)); }
.quest-track.solo:has(.qt-adj:not([hidden])) .qt-main { min-height: 44px; box-sizing: border-box; } /* one row: tall enough for the two buttons' taps */
.quest-track.folded .qt-side { flex-direction: row; width: auto; }
.quest-track.folded .qt-side > button { width: 22px; }
.quest-track.folded .qt-adj { border-bottom: 0; border-right: 1px solid rgba(232, 196, 106, 0.2); }
.quest-track.folded.solo:has(.qt-adj:not([hidden])) .qt-main { min-height: 0; }
.qt-pick .qp-row { display: flex; align-items: center; gap: 6px; }
.qt-pick .qp-row label { flex: 1 1 auto; min-width: 0; max-width: 220px; }
.qt-pick .qp-row label.last { cursor: default; }
.qt-pick .qp-row label img { flex: none; width: 22px; height: 22px; image-rendering: pixelated; }
.qt-pick .qp-row label span:last-child { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.qt-pick .qt-ico { flex: none; width: 22px; font-size: 17px; line-height: 1; text-align: center; }
.qt-pick .qp-only { flex: none; margin: 0; padding: 3px 8px; border-radius: 99px; border: 1px solid rgba(232, 196, 106, 0.45); background: none; font: inherit; font-size: 15px; color: #f2d58c; cursor: pointer; white-space: nowrap; }
.qt-pick .qp-only:hover { color: var(--gold); border-color: var(--gold); }
.qt-pick .qp-only[aria-pressed="true"] { color: #1b1424; border-color: var(--gold); background: var(--gold); }
.quest-track.folded .qt-main { justify-content: center; padding: 4px 7px; }
.quest-track.folded .qt-name { font-size: 12px; }
.quest-track.folded .qt-ico { width: 18px; font-size: 15px; }
.quest-track.ready { border-color: var(--gold); box-shadow: 0 0 8px rgba(255, 210, 63, 0.4); }
.quest-track.pulse { animation: qt-pulse 1.4s ease-out 1; }
@keyframes qt-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 210, 63, 0.9); } 100% { box-shadow: 0 0 0 14px rgba(255, 210, 63, 0); } }
@media (prefers-reduced-motion: reduce) { .quest-track.pulse { animation: none; } }
/* ➜ Go on the tracker and the quest banner (rpg/quest-guide.js): walk to the next step and do it. Plain gold, like the
   game's other gold buttons; the arrow in its own box, the word in a line-height-1 box. */
.quest-track .qt-go, .quest-banner .qn-go { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 3px; padding: 0 8px; background: linear-gradient(180deg, #ffe066, var(--gold-2)); color: var(--navy-900); font: 14px/1 var(--display); border-left: 1px solid #3a2a00; }
.quest-track .qt-go[hidden] { display: none; }
.qt-go-i, .qt-go-w { display: block; line-height: 1; }
.qt-go-i { font-size: 0.95em; }
.quest-track .qt-go:hover, .quest-banner .qn-go:hover { background: linear-gradient(180deg, #fff08a, #ffd23f); }
/* The quest banner (rpg/ui-quests.js): a step done, with its XP, the steps so far and the next one; tap to close. */
.quest-banner { position: absolute; left: 50%; top: 92px; z-index: 8; display: flex; align-items: center; gap: 10px; width: max-content; max-width: min(470px, calc(100vw - 24px)); box-sizing: border-box; padding: 8px 10px 8px 9px; border-radius: 10px; background: rgba(6, 12, 40, 0.95); border: 2px solid var(--gold); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); color: #fff; cursor: pointer; pointer-events: auto; opacity: 0; visibility: hidden; transform: translate(-50%, -10px); transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.18s ease, visibility 0s linear 0.28s; }
.quest-banner.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.qn-mark { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #1d3a8a; border: 2px solid var(--gold); font: 18px/1 var(--display); }
.quest-banner.done .qn-mark { background: var(--gold); color: var(--navy-900); }
.qn-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.qn-kicker { display: block; font-size: 14px; line-height: 1; color: var(--gold); translate: 0 0.09em; }
.qn-title { display: block; font: 17px/1.1 var(--display); color: #fff; }
.qn-dots { display: flex; gap: 4px; }
.qn-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); box-shadow: inset 0 0 0 1px rgba(255, 210, 63, 0.5); }
.qn-dots i.on { background: var(--gold); }
.qn-line { display: block; font-size: 15px; line-height: 1.1; color: #dfe6ff; }
.quest-banner .qn-go { align-self: stretch; margin: -8px -10px -8px 2px; padding: 0 14px; border-radius: 0 8px 8px 0; font-size: 17px; }
@media (prefers-reduced-motion: reduce) { .quest-banner { transition: none; } }
/* Daily tasks (rpg/ui-daily.js): one line under the quest tracker, in its look; blue until all three are done. Wider than
   the quest tracker when its chips need it, so Draw! is never cut by the edge. */
.daily-track { align-items: center; gap: 4px; max-width: none; margin: 0; padding: 3px 5px; border-color: rgba(127, 212, 255, 0.7); box-shadow: 0 0 6px rgba(127, 212, 255, 0.2); font: inherit; color: #dfe6ff; cursor: pointer; text-align: left; }
.daily-track img { flex: none; width: 22px; height: 22px; image-rendering: pixelated; }
.daily-track .dt-name { font-size: 15px; line-height: 1; color: #9fdcff; white-space: nowrap; translate: 0 0.09em; }
.daily-track .dt-name b { color: var(--gold); font-weight: 400; }
.daily-track .dt-streak { display: inline-flex; align-items: center; gap: 2px; font-size: 15px; line-height: 1; color: #ffb36b; }
.daily-track .dt-streak i { font-style: normal; font-size: 12px; line-height: 1; }
.daily-track .dt-streak b { font-weight: 400; translate: 0 0.09em; }
.daily-track:hover .dt-name { color: var(--gold); }
.daily-track.ready { border-color: #3ddc84; box-shadow: 0 0 6px rgba(61, 220, 132, 0.3); }
.daily-track .dt-goty { flex: none; display: inline-flex; align-items: center; gap: 2px; padding: 1px 4px; border-radius: 9px; white-space: nowrap; background: var(--gold); border: 1px solid var(--gold); font-size: 14px; line-height: 1; color: #1a1405; }
.daily-track .dt-goty i { font-style: normal; font-size: 12px; line-height: 1; }
.daily-track .dt-goty b { font-weight: 400; translate: 0 0.09em; }
/* Phones can carry Daily, a streak, an egg and Weekly Loot at once. Keep the calendar, but the count alone says enough. */
@media (max-width: 760px) {
  .daily-track { gap: 3px; padding: 2px 4px 2px 3px; }
  .daily-track > img { width: 18px; height: 18px; }
  .daily-track .dt-name { font-size: 0; }
  .daily-track .dt-name b { font-size: 13px; }
  .daily-track .dt-streak { gap: 1px; font-size: 13px; }
  .daily-track .dt-streak i { font-size: 11px; }
  .daily-track .dt-goty { gap: 1px; padding: 1px 3px; font-size: 12px; }
  .daily-track .dt-goty i { font-size: 11px; }
  .daily-track .dt-radio b { display: none; }
}
/* El Camino (rpg/ui-camino.js): its tracker in the Camino's blue and yellow, the pilgrim passport, the certificate. */
.camino-track { align-items: center; gap: 5px; margin: 0; padding: 3px 7px 3px 5px; border-color: rgba(255, 210, 63, 0.8); background: linear-gradient(180deg, rgba(31, 84, 190, 0.92), rgba(16, 44, 110, 0.92)); box-shadow: 0 0 6px rgba(255, 210, 63, 0.25); font: inherit; color: #dfe6ff; cursor: pointer; text-align: left; }
.camino-track img { flex: none; width: 22px; height: 22px; image-rendering: pixelated; }
.camino-track .ct-name { font-size: 15px; line-height: 1; color: #fff3c4; white-space: nowrap; translate: 0 0.09em; }
.camino-track .ct-name b { color: var(--gold); font-weight: 400; }
.camino-track .ct-next { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 1; color: #bcd0ff; translate: 0 0.09em; }
.camino-track:hover .ct-name { color: var(--gold); }
.camino-book .cm-next { margin: 0 0 12px; font-size: 17px; line-height: 1.35; color: var(--text); }
.camino-book .cm-next b { color: var(--gold); font-weight: 400; }
.camino-book .cm-shell { margin: 0 0 8px; padding: 8px 10px; border-radius: 8px; background: rgba(31, 84, 190, 0.18); border: 1px solid rgba(127, 160, 230, 0.4); font-size: 16px; color: #dfe6ff; }
.camino-book .cm-shell.t1 { border-color: #c98a3a; }
.camino-book .cm-shell.t2 { border-color: #c8d0dc; }
.camino-book .cm-shell.t3 { border-color: var(--gold); }
.camino-book .cm-shell.t4 { border-color: #e8bfd0; }
.camino-book .cm-shell.t5 { border-color: #6a92f4; }
.camino-book .cm-shell.t6 { border-color: #a8ecff; }
.camino-book .cm-safe { margin: 0 0 12px; font-size: 15px; color: #9fb4e8; }
/* The pilgrim passport (rpg/ui-camino.js): cream pages printed with a fine guilloche, each stop's stamp in its own ink
   (roughened by the page's #cppInk filter), in a blue cover with a gold edge. The certificate opens it on the holder's page
   and the full stamps page, side by side; one under the other on phones. */
.cpp-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.cpp-page { position: relative; padding: 12px 12px 10px; border-radius: 8px; color: #3a2a14; background:
  repeating-radial-gradient(circle at 50% 130%, transparent 0 7px, rgba(31, 84, 190, 0.06) 7px 8px),
  repeating-linear-gradient(115deg, transparent 0 11px, rgba(160, 110, 40, 0.05) 11px 12px),
  linear-gradient(180deg, #fbf5e2, #f0e4c2); }
.cpp-page .cpp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid rgba(58, 42, 20, 0.25); font-size: 12px; line-height: 1; }
.cpp-head b { font: 15px/1 var(--display); color: #1f3a8a; letter-spacing: 0.06em; text-transform: uppercase; }
.cpp-head small { font-size: 11px; color: #7a6238; letter-spacing: 0.06em; text-transform: uppercase; }
.cpp-stamps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 6px; }
.cpp-st { display: grid; justify-items: center; align-content: start; gap: 3px; text-align: center; }
.cpp-st b { font-weight: 700; font-size: 11px; line-height: 1.1; color: #7a6238; }
.cpp-st .cs-svg { display: block; width: 100%; max-width: 80px; aspect-ratio: 1; color: var(--ink); rotate: var(--rot); filter: url(#cppInk); opacity: 0.9; mix-blend-mode: multiply; overflow: visible; }
.cs-svg .cs-ring, .cpp-seal .cs-ring { fill: none; stroke: currentColor; stroke-width: 4; }
.cs-svg .cs-thin, .cpp-seal .cs-thin { fill: none; stroke: currentColor; stroke-width: 1.6; }
.cs-svg .cs-glyph { fill: currentColor; }
.cs-svg .cs-glyph .cs-line { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.cs-svg .cs-glyph .cs-cut { fill: none; stroke: #f6eed6; stroke-width: 2.5; stroke-linecap: round; }
.cs-svg text, .cpp-seal text { fill: currentColor; font-family: var(--display); }
.cs-svg .cs-name { font-size: 12.5px; letter-spacing: 0.03em; }
.cs-svg .cs-day { font-size: 9.5px; letter-spacing: 0.04em; }
.cpp-slot { display: grid; place-items: center; width: 82%; max-width: 62px; aspect-ratio: 1; margin-top: 4px; border-radius: 50%; border: 2px dashed rgba(106, 85, 48, 0.4); font: 20px/1 var(--display); color: rgba(106, 85, 48, 0.5); }
.cpp-st.now .cpp-slot { border-color: #c99a1a; color: #a87810; background: rgba(255, 210, 63, 0.2); box-shadow: 0 0 0 3px rgba(255, 210, 63, 0.25); }
.cpp-st.now b { color: #8a5a10; }
.cpp-visa { overflow: hidden; }
.cpp-seal { position: absolute; right: 0; bottom: -2%; width: 34%; max-width: 128px; color: #b8202e; rotate: -14deg; filter: url(#cppInk); opacity: 0.86; mix-blend-mode: multiply; pointer-events: none; }
.cpp-seal .cs-name.big { font-size: 10.5px; letter-spacing: 0.06em; }
.cpp-seal .cs-day { font-size: 8.5px; letter-spacing: 0.06em; }
.cpp-seal .cs-walked { font-size: 17px; letter-spacing: 0.08em; }
.cpp-seal .cs-cape { font-size: 10.5px; letter-spacing: 0.12em; }
.cpp .cpp-kicker { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; font: 18px/1 var(--display); color: #8fb4ff; }
.cpp-kicker img { width: 28px; height: 28px; image-rendering: pixelated; }
.cpp h2 { margin: 6px 0 4px; text-align: center; font-size: 28px; }
.cpp .cpp-lead { margin: 0 auto 12px; max-width: 34em; text-align: center; font-size: 16px; line-height: 1.35; color: #cfd8f0; }
.cpp-book { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 7px; border-radius: 14px; background: linear-gradient(180deg, #1c3f8f, #12296a); border: 2px solid #000; box-shadow: inset 0 0 0 2px rgba(255, 210, 63, 0.55), 0 6px 18px rgba(0, 0, 0, 0.45); }
.cpp-book > .cpp-id { border-radius: 8px 0 0 8px; box-shadow: inset -16px 0 16px -12px rgba(60, 40, 10, 0.45); }
.cpp-book > .cpp-visa { border-radius: 0 8px 8px 0; box-shadow: inset 16px 0 16px -12px rgba(60, 40, 10, 0.45); }
.cpp-bio { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; align-items: start; }
.cpp-photo { position: relative; display: grid; place-items: end center; width: 84px; height: 98px; overflow: hidden; border-radius: 4px; border: 2px solid #3a2a14; background: linear-gradient(180deg, #d6e4f6, #a9c3e8); }
.cpp-photo img { width: 80px; height: 88px; image-rendering: pixelated; }
.cpp-photo-stamp { position: absolute; right: 2px; bottom: 2px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(251, 245, 226, 0.85); border: 1px solid rgba(58, 42, 20, 0.5); }
.cpp-photo-stamp img { width: 16px; height: 16px; image-rendering: pixelated; }
.cpp-fields { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 10px; }
.cpp-fields div { min-width: 0; }
.cpp-fields dt { font-size: 10px; line-height: 1.1; letter-spacing: 0.08em; text-transform: uppercase; color: #8a7350; }
.cpp-fields dd { margin: 0; font-size: 14px; line-height: 1.15; font-weight: 700; color: #1f2a5a; overflow-wrap: anywhere; }
.cpp-fields .cpp-name { grid-column: 1 / -1; }
.cpp-fields .cpp-name dd { font: 20px/1.1 var(--display); color: #1f2a5a; }
.cpp-page .cpp-sign { display: grid; justify-items: end; margin: 10px 0 6px; font-size: 12px; line-height: 1.1; }
.cpp-sign span { padding: 0 6px 2px; border-bottom: 1px solid rgba(58, 42, 20, 0.4); font: italic 22px/1 "Brush Script MT", "Segoe Script", "Snell Roundhand", cursive; color: #1f3a8a; }
.cpp-sign small { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: #8a7350; }
.cpp-page .cpp-mrz { margin: 6px 0 0; padding-top: 6px; border-top: 1px dashed rgba(58, 42, 20, 0.3); overflow: hidden; white-space: nowrap; font: 600 9.5px/1.45 ui-monospace, "Courier New", monospace; letter-spacing: 0; color: #3a2a14; }
.cpp .cpp-reward { margin: 12px 0 6px; text-align: center; font: 18px/1.2 var(--display); color: var(--gold); }
.cpp-shield { display: flex; align-items: center; gap: 10px; max-width: 30em; margin: 4px auto 10px; padding: 8px 12px; border-radius: 10px; background: rgba(31, 84, 190, 0.18); border: 2px solid rgba(127, 160, 230, 0.5); }
.cpp-shield img { flex: none; width: 48px; height: 48px; image-rendering: pixelated; }
.cpp .cpp-shield p { margin: 0; display: grid; gap: 2px; }
.cpp-shield b { font: 18px/1.1 var(--display); color: #fff3c4; }
.cpp-shield span { font-size: 15px; line-height: 1.3; color: #cfd8f0; }
.cpp .actions { justify-content: center; }
.camino-book .cm-page { margin: 0 0 12px; }
.cm-bags { display: grid; gap: 6px; margin: 0 0 8px; }
.cm-bag { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 10px; border-radius: 10px; border: 2px solid rgba(127, 160, 230, 0.5); background: rgba(31, 84, 190, 0.2); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.cm-bag img { flex: none; width: 32px; height: 32px; image-rendering: pixelated; }
.cm-bag span { display: grid; gap: 1px; min-width: 0; }
.cm-bag b { font: 16px/1.1 var(--display); color: #fff3c4; }
.cm-bag small { font-size: 14px; line-height: 1.25; color: #bcd0ff; }
.cm-bag.t1 { border-color: #c98a3a; }
.cm-bag.t2 { border-color: #c8d0dc; }
.cm-bag.t4 { border-color: #e8bfd0; }
.cm-bag.t5 { border-color: #6a92f4; }
.cm-bag.t6 { border-color: #a8ecff; }
.cm-bag.t3, .cm-bag:hover { border-color: var(--gold); }
@media (max-width: 620px) {
  .cpp-book { grid-template-columns: minmax(0, 1fr); }
  .cpp-book > .cpp-id { border-radius: 8px 8px 0 0; box-shadow: inset 0 -16px 16px -12px rgba(60, 40, 10, 0.45); }
  .cpp-book > .cpp-visa { border-radius: 0 0 8px 8px; box-shadow: inset 0 16px 16px -12px rgba(60, 40, 10, 0.45); }
  .cpp h2 { font-size: 24px; }
}
.daily-book .dl-streak { margin: 0 0 12px; color: var(--text); }
.daily-book .dl-streak b { color: #ffb36b; }
/* The Daily window's task cards (owner, 2026-10-10: "go ahead.. professional and clean"): icon, task and XP on top; a bar,
   the count and ✓ Done or ⚔ Find a fight under it; the bonus as a gold strip. First white like the promo posters' quest
   card, now the website's navy cards like the card hunt window's (owner, 2026-10-11: "this is too white"). */
.daily-book .dl-streak { font-size: 16px; line-height: 1.35; color: var(--muted); }
.dc-sec { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 2px 8px; font-size: 16px; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; color: #a3acd6; }
.dc-sec b { color: #fff; font-weight: 400; }
.dc-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.dc { padding: 11px 13px; border-radius: 14px; background: linear-gradient(180deg, #1a2663, #141e52); border: 1px solid #34468a; color: #fff; box-shadow: 0 3px 0 rgba(3, 10, 44, 0.35); }
.dc.done { background: linear-gradient(180deg, #1f4168, #1a3a59); border-color: rgba(61, 220, 132, 0.55); }
.dc-top { display: flex; align-items: flex-start; gap: 10px; }
.dc-ico { flex: none; width: 40px; height: 40px; border-radius: 10px; background: rgba(3, 10, 44, 0.55); box-shadow: inset 0 0 0 1px #2e3d74; display: grid; place-items: center; }
.dc-ico img { width: 32px; height: 32px; image-rendering: pixelated; }
.dc-txt { flex: 1; min-width: 0; min-height: 40px; display: grid; gap: 3px; align-content: center; }
.dc-txt b { font-weight: 400; font-size: 20px; line-height: 1.1; color: #fff; }
.dc-txt small { font-size: 15px; line-height: 1.25; color: #bcc5ea; }
/* The reach task's X searches (rpg/ui-daily.js reachFind): a pill per community, its newest posts on X. Each row fits on
   one line (owner, 2026-10-15, with a shot of Collector Crypt and $PURR alone on a second line: "MAKE SURE IT FITS SIDE BY
   SIDE"): the block spans the card under its top line, not the text column beside Required, so a computer's 434 px hold
   the label and the pills (~400 px, both rows' pills lined up); narrower (a phone's ~306 px), the label goes above and
   the pills shrink to fit in one row (19.65em of pills and gaps: 4.9cqi keeps them inside). */
.dc-finds { container-type: inline-size; display: grid; gap: 5px; margin: 8px 0 0 50px; }
.dc-finds small { font-size: 15px; line-height: 1.25; color: #bcc5ea; }
.dc-find { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 0.4em; font-size: 15px; }
.dc-find em { min-width: 6.4em; font-style: normal; line-height: 1.25; color: #bcc5ea; margin-right: 2px; }
.dc-find a { flex: none; padding: 0.27em 0.67em; border-radius: 99px; background: rgba(3, 10, 44, 0.55); box-shadow: inset 0 0 0 1px #34468a; color: var(--gold); line-height: 1.2; text-decoration: none; white-space: nowrap; }
@container (max-width: 409px) {
  .dc-find { font-size: min(15px, 4.9cqi); }
  .dc-find em { flex-basis: 100%; font-size: 15px; }
}
.dc-find a:hover, .dc-find a:focus-visible { background: rgba(255, 210, 63, 0.12); box-shadow: inset 0 0 0 1px var(--gold); }
.dc-xp { flex: none; font: 18px/40px var(--display); font-style: normal; color: var(--gold); white-space: nowrap; }
.dc-bar { height: 10px; margin: 9px 0 0 50px; border-radius: 99px; background: rgba(3, 10, 44, 0.7); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5); overflow: hidden; }
.dc-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #ffb300, #ffd23f); }
.dc.done .dc-bar i { background: linear-gradient(90deg, #22a957, #4fd77e); }
.dc-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 24px; margin: 6px 0 0 50px; }
.dc-n { font-size: 18px; line-height: 1; color: #bcc5ea; }
.dc-ok { font-size: 18px; line-height: 1; color: #4fd77e; }
.dc-foot .lff-go { margin: 0; }
.dc-more { list-style: none; }
.daily-book .dc-more .raid-book { margin: 0; }
.dc-bonus { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 11px 13px; border-radius: 14px; background: linear-gradient(90deg, rgba(255, 210, 63, 0.16), rgba(255, 210, 63, 0.04)), #141e52; border: 1px solid rgba(255, 210, 63, 0.6); color: #fff; }
.dc-bonus.got { background: linear-gradient(90deg, rgba(61, 220, 132, 0.16), rgba(61, 220, 132, 0.04)), #141e52; border-color: rgba(61, 220, 132, 0.55); }
.dc-bonus .dc-ico { background: var(--navy-900); }
.dc-bonus p { flex: 1; min-width: 0; margin: 0; font-size: 19px; line-height: 1.2; }
.dc-bonus b { color: var(--gold); font-weight: 400; }
.dc-bonus.got b { color: #4fd77e; }
.dc-streak { flex: none; font: 18px/1 var(--display); font-style: normal; color: #ffb36b; white-space: nowrap; }
.dc.dc-goty { background: linear-gradient(90deg, rgba(255, 210, 63, 0.18), rgba(255, 210, 63, 0.04)), #1a2663; border-color: rgba(255, 210, 63, 0.75); }
.dc-goty .dc-ico i { font-style: normal; font-size: 26px; line-height: 1; }
.dc-goty .dc-foot { justify-content: flex-start; flex-wrap: wrap; }
.dc-goty .dc-foot .btn { margin: 0; }
/* The cheers after it (rpg/daily.js CHEERS: PlayToEarn, DEX Screener, CoinGecko): its layout, in blue; on a story quest step, their two buttons in a row */
.dc.dc-cheer { background: linear-gradient(90deg, rgba(91, 156, 255, 0.2), rgba(91, 156, 255, 0.04)), #1a2663; border-color: rgba(91, 156, 255, 0.75); }
.jq-cheer { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.jq-cheer .btn { margin: 0; padding: 4px 10px; font-size: 14px; }
.dc-cheer a.btn, .jq-cheer a.btn { text-decoration: none; }
/* 📻 Try ZAZA RADIO (rpg/ui-daily.js), for a hero who never tuned in: the Game of the Year's gold, glowing till it's done */
.dc.dc-radio { box-shadow: 0 0 12px rgba(255, 210, 63, 0.3); animation: dc-radio-glow 2.4s ease-in-out infinite; }
@keyframes dc-radio-glow { 50% { box-shadow: 0 0 22px rgba(255, 210, 63, 0.6); } }
@media (prefers-reduced-motion: reduce) { .dc.dc-radio { animation: none; } }
@media (max-width: 480px) {
  .dc-txt b { font-size: 18px; }
  .dc-bar, .dc-foot, .dc-finds { margin-left: 0; }
}
/* The X task under the minimap's legend (xposts-ui.js renderTask): one small row in the Daily tracker's look with X's
   white edge: a square to tick, and where to do it (ZAZA's post on X, in a new tab; the square lights up once you've
   gone). Ticked: a green ✓, then it fades out and goes until ZAZA's next post. */
.x-task { pointer-events: auto; display: flex; align-items: center; gap: 6px; box-sizing: border-box; padding: 3px 8px 3px 5px; border-radius: 8px; background: rgba(6, 12, 40, 0.86); border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: 0 0 6px rgba(255, 255, 255, 0.18); flex-wrap: wrap; }
.x-task[hidden] { display: none; }
.xt-box { flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin: 0; padding: 0; box-sizing: border-box; border: 2px solid rgba(255, 255, 255, 0.75); border-radius: 4px; background: rgba(0, 0, 0, 0.35); color: #06210f; font: 700 13px/1 var(--ui-font); cursor: pointer; }
.x-task.opened .xt-box { border-color: var(--gold); box-shadow: 0 0 6px rgba(255, 210, 63, 0.55); }
/* Locked till the post was opened from here; checking X (xpost.check): the square breathes. */
.x-task:not(.opened) .xt-box { opacity: 0.45; cursor: default; }
.x-task.asking .xt-box { animation: xt-ask 0.8s ease-in-out infinite alternate; }
@keyframes xt-ask { to { opacity: 0.35; } }
/* A check that found nothing yet: one short line under the row. contain + the margin that cancels the gap: it never
   widens the row. */
.xt-note { flex: 0 0 calc(100% - 6px); contain: inline-size; margin: 0 -6px 1px 0; font-size: 12px; line-height: 1.3; color: rgba(255, 255, 255, 0.85); white-space: normal; }
.xt-note button { margin: 0; padding: 0; border: 0; background: none; font: inherit; color: var(--gold); text-decoration: underline; cursor: pointer; }
.xt-go { display: flex; align-items: center; gap: 5px; font-size: 15px; line-height: 1; color: #fff; text-decoration: none; white-space: nowrap; }
.xt-go img { flex: none; width: 22px; height: 22px; image-rendering: pixelated; }
.xt-go span { translate: 0 0.09em; }
.xt-go:hover span { color: var(--gold); }
/* The 𝕏 cut (rpg/xcut.js): "50% XP" in gold while ZAZA's newest post waits for this hero (owner: yellow, "less agressive"). */
.xt-cut { flex: none; padding: 2px 5px; border-radius: 5px; background: rgba(255, 210, 63, 0.14); border: 1px solid rgba(255, 210, 63, 0.7); color: var(--gold); font: 700 12px/1 var(--ui-font); font-style: normal; white-space: nowrap; }
.xt-cut.off { background: rgba(61, 220, 132, 0.16); border-color: #3ddc84; color: #8ff0b8; } /* done: "Full XP" as the row goes */
.x-task.done { border-color: #3ddc84; box-shadow: 0 0 6px rgba(61, 220, 132, 0.35); opacity: 0; transition: opacity 0.4s ease 0.75s; }
.x-task.done .xt-box { background: #3ddc84; border-color: #3ddc84; box-shadow: none; opacity: 1; animation: none; }
.x-task.done.seen { transition-delay: 2.2s; } /* what X showed they did ("✓ Liked · Reposted") stays a little longer */
.x-task.pulse { animation: qt-pulse 1.4s ease-out 1; }
@media (prefers-reduced-motion: reduce) { .x-task.pulse, .x-task.asking .xt-box { animation: none; } .x-task.done { transition: none; opacity: 1; } }
/* The X task and the Daily tracker side by side (rpg/ui-daily.js #dailyRow): "☐ 𝕏 Engage" on the left of "Daily ✓ 🔥3"
   (owner, 2026-10-07: "put the x engage on the side of the daily streak"). A check's line under Engage doesn't stretch the
   Daily tracker; with both hidden the row goes too (no extra gap in the column). */
.dt-row { display: flex; justify-content: flex-end; align-items: stretch; gap: 6px; }
.dt-row:has(.xt-note) { align-items: flex-start; }
.dt-row:not(:has(> :not([hidden]))) { display: none; }
/* The 𝕏 Raid streak (xraid-ui.js) in that row, between Engage and Daily (owner, 2026-10-07: "put it on the side of
   Daily"): the Daily tracker's look with the X task's white edge, green once today's five are in. Its window: today's five
   as boxes, the streak, what counts, how it's checked. */
.xr-boxes { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 4px 0 12px; padding: 0; }
.xr-boxes li { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 2px; border-radius: 8px; border: 2px dashed rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.04); text-align: center; }
.xr-boxes li b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--stone-3); color: var(--text); font: 15px/1 var(--display); }
.xr-boxes li span { font-size: 13px; line-height: 1; color: var(--muted); }
.xr-boxes li.done { border-style: solid; border-color: #3ddc84; background: rgba(61, 220, 132, 0.1); }
.xr-boxes li.done b { background: #2f8a4a; color: #fff; }
.xr-boxes li.done span { color: #bff5d2; }
.raid-book .dl-streak { margin: 0 0 10px; color: var(--text); }
.raid-book .dl-streak b { color: #ffb36b; }
.daily-book .raid-book { margin: 10px 0 0 -26px; }
.xr-what { margin: 0 0 10px; padding-left: 20px; font-size: 16px; line-height: 1.4; color: #dfe6ff; }
.xr-what em { font-style: normal; font-size: 15px; color: var(--muted); }
.xr-what .link-btn { padding: 0; font-size: inherit; }
.modal .xr-how, .modal .xr-free { margin: 0 0 8px; font-size: 15px; line-height: 1.35; color: #cfd8f0; }
.modal .xr-free { color: var(--muted); }
.modal .xr-note { margin: 0 0 10px; padding: 6px 10px; border-radius: 8px; background: rgba(61, 220, 132, 0.1); border: 1px solid rgba(61, 220, 132, 0.45); font-size: 15px; }
.modal .xr-note.is-error { background: rgba(255, 120, 100, 0.1); border-color: rgba(255, 120, 100, 0.5); }
.raid-book .actions { flex-wrap: wrap; }
/* The banners at the top (ui.js hudBars), one under the other where the team's announcement alone used to sit: the
   announcement first, then ZAZA's new X post (xposts-ui.js bar). */
.hud > .hud-bars { position: absolute; left: 50%; top: 44px; transform: translateX(-50%); z-index: 9; display: flex; flex-direction: column; align-items: center; gap: 6px; width: max-content; max-width: min(560px, calc(100vw - 24px)); pointer-events: none; }
.hud-bars > .announce-bar { position: relative; left: auto; top: auto; transform: none; max-width: 100%; box-sizing: border-box; }
@media (max-width: 640px) { .hud > .hud-bars { top: 92px; } }
/* ZAZA's new post for everyone: the announcement's look with X's white edge, two rows on every screen: the title, Open on
   X as a gold pill and ✕, then the words (a click opens the X tab). */
.announce-bar.x-news { flex-wrap: wrap; align-items: center; gap: 6px 10px; border-color: rgba(255, 255, 255, 0.85); box-shadow: 0 0 10px rgba(255, 255, 255, 0.16), 0 6px 18px rgba(0, 0, 0, 0.5); }
.announce-bar.x-news b { flex: 1 1 auto; display: inline-flex; align-items: center; gap: 6px; }
.x-news span[data-xn] { flex: 1 1 100%; order: 3; }
.x-news b img { flex: none; width: 18px; height: 18px; image-rendering: pixelated; }
.x-news b small { color: var(--muted); font-size: 0.85em; }
.x-news span[data-xn] { cursor: pointer; }
.x-news span[data-xn]:hover { color: #fff; }
.x-news .xn-go { flex: none; padding: 5px 11px; border-radius: 999px; background: var(--gold); color: #1a1030; font-size: 14px; font-weight: 700; line-height: 1.15; text-decoration: none; white-space: nowrap; }
.x-news .xn-go:hover, .x-news .xn-go:focus-visible { background: #ffe27a; outline: none; }
/* The quest window: every step, the done ones struck through, the one you're on with its how-to. */
.quest-book h2 { display: flex; align-items: center; gap: 8px; padding-right: 36px; }
.quest-book h2 img { flex: none; width: 32px; height: 32px; image-rendering: pixelated; }
.qb-steps { list-style: none; counter-reset: qs; margin: 4px 0 12px; padding: 0; display: grid; gap: 6px; }
.qb-steps > li { counter-increment: qs; position: relative; padding: 8px 10px 8px 40px; border-radius: 8px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); }
.qb-steps > li::before { content: counter(qs); position: absolute; left: 10px; top: 7px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--stone-3); color: var(--text); font-size: 15px; line-height: 1; }
.qb-steps > li.done::before { content: "✓"; background: #2f8a4a; color: #fff; }
.qb-steps > li.now { border-color: var(--gold); background: rgba(255, 210, 63, 0.08); }
.qb-steps > li.now::before { background: var(--gold); color: var(--edge-dark); }
.qb-steps > li.next { opacity: 0.62; }
.qb-line { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 18px; line-height: 1.25; }
.qb-line s { color: var(--muted); }
.qb-line em { flex: none; font-style: normal; color: var(--gold); }
.qb-steps > li > p { margin: 4px 0 0; font-size: 16px; line-height: 1.35; color: #cfd8f0; }
.modal .qb-reward { margin: 0 0 12px; padding: 8px 10px; border-radius: 8px; background: rgba(255, 152, 31, 0.1); border: 1px solid rgba(255, 152, 31, 0.45); font-size: 17px; }
.qb-reward b { color: var(--rs-orange); font-weight: 400; }
.modal .qb-next { margin: -4px 0 12px; padding: 7px 10px; border-radius: 8px; background: rgba(159, 224, 255, 0.08); border: 1px solid rgba(159, 224, 255, 0.35); color: var(--muted); font-size: 16px; } /* squads open at level 5 (ui-quests.js) */
.qb-next b { color: #9fe0ff; font-weight: 400; }
/* The Most Wanted's quest page (rpg/ui-wanted.js): chapter and difficulty, the quest's story, its objectives with your
   counts and where to find them. (The Shattered Core's journey has its own in world/journey.css.) */
.story-book .sb-chapter { margin: 2px 0 4px; font-size: 16px; color: var(--muted); }
.story-book .sb-hard { display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: 999px; font-size: 14px; line-height: 20px; vertical-align: 1px; color: #10131f; }
.story-book .h-easy { background: #6fdc8c; }
.story-book .h-medium { background: #ffd23f; }
.story-book .h-hard { background: #ff9a3c; }
.story-book .h-vhard { background: #ff5a5a; }
.story-book .sb-name { margin: 0 0 6px; font-size: 22px; font-weight: 400; color: var(--gold); }
.story-book .sb-name small { display: block; font-size: 15px; color: var(--muted); }
.story-book .sb-log { margin: 0 0 10px; font-size: 16px; line-height: 1.4; color: #cfd8f0; font-style: italic; }
.story-book .sb-wait, .story-book .sb-ready { margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; font-size: 17px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.14); }
.story-book .sb-ready { border-color: var(--gold); background: rgba(255, 210, 63, 0.1); color: var(--gold); }
/* The Most Wanted's wall (rpg/ui-wanted.js) keeps the old journey's ring, kicker, quest card and chips. The journey (ui-quests.js
   storyPanel) has its own look in world/journey.css, and keeps the rank box below. */
.jr-ring { --p: 0; flex: none; position: relative; width: 74px; height: 74px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--hc) calc(var(--p) * 1%), rgba(255, 255, 255, 0.1) 0); box-shadow: 0 0 18px color-mix(in srgb, var(--hc) 40%, transparent); }
.jr-ring::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #16246a, #070d2c); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6); }
.jr-ring b { position: relative; font-family: var(--display); font-weight: 400; font-size: 22px; line-height: 1; color: #fff; text-shadow: 0 2px 0 #000a2e; }
.jr-ring b small { font-size: 13px; }
.jr-kicker { font-size: 15px; color: var(--muted); }
/* Where you stand among the heroes (rpg/story.js storyRank), on the header's right: a medal in your tier's colours (Iron
   below the top 50%, then Bronze, Silver, Gold, Diamond, Mythic for the top 1%) over a slow ray burst, Top X% in big
   letters, your place, the ladder of the five tiers (yours ringed in white, the next one dashed) and how many more to
   pass. --rk1/--rk2: a tier's light and deep colour. It pops in once per opening of the window (ui-quests.js rankIn). */
.t-iron { --rk1: #b9c6ff; --rk2: #4b5ea8; }
.t-bronze { --rk1: #ffc08a; --rk2: #b0612a; }
.t-silver { --rk1: #f2f5ff; --rk2: #8d9bc4; }
.t-gold { --rk1: #ffe066; --rk2: #d99a0b; }
.t-diamond { --rk1: #b8f4ff; --rk2: #2aa8de; }
.t-mythic { --rk1: #ffb8f2; --rk2: #8b4dff; }
.jr-rank { position: relative; isolation: isolate; overflow: hidden; flex: none; box-sizing: border-box; width: 256px; margin-left: auto; display: grid; grid-template-columns: 52px minmax(0, 1fr); grid-template-areas: "m k" "m b" "l l" "p p"; column-gap: 10px; align-items: center; padding: 8px 12px 9px; border-radius: 14px; border: 2px solid color-mix(in srgb, var(--rk1) 75%, transparent); background: radial-gradient(60% 75% at 14% 32%, color-mix(in srgb, var(--rk2) 50%, transparent), transparent 72%), linear-gradient(180deg, #121e58, #070d2c); box-shadow: 0 0 18px color-mix(in srgb, var(--rk1) 28%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.14); }
.jrk-medal { grid-area: m; position: relative; width: 52px; height: 62px; display: grid; place-items: center; }
.jrk-medal svg { position: relative; width: 48px; height: 60px; filter: drop-shadow(0 2px 0 #000a2e); }
.jrk-rays { position: absolute; z-index: -1; left: 50%; top: 40%; width: 130px; height: 130px; margin: -65px 0 0 -65px; border-radius: 50%; background: repeating-conic-gradient(color-mix(in srgb, var(--rk1) 38%, transparent) 0 9deg, transparent 9deg 24deg); -webkit-mask: radial-gradient(circle, #000 22%, transparent 68%); mask: radial-gradient(circle, #000 22%, transparent 68%); animation: jrk-spin 40s linear infinite; }
@keyframes jrk-spin { to { rotate: 360deg; } }
.jrk-rib { fill: var(--rk2); stroke: #000a2e; stroke-width: 1.5; stroke-linejoin: round; }
.jrk-rim { fill: var(--rk1); stroke: #000a2e; stroke-width: 2; }
.jrk-face { fill: var(--rk2); stroke: color-mix(in srgb, var(--rk1) 55%, #fff); stroke-width: 1.5; }
.jrk-shine { fill: #fff; opacity: 0.5; }
.jrk-ico { fill: var(--rk1); stroke: #000a2e; stroke-width: 1.5; stroke-linejoin: round; }
.jrk-ico.line { fill: none; stroke: var(--rk1); stroke-width: 3.6; stroke-linecap: round; }
.jrk-fac { fill: none; stroke: #000a2e; stroke-width: 1; opacity: 0.55; }
.jrk-k { grid-area: k; align-self: end; font-size: 15px; line-height: 1.15; color: #c9d3ff; }
.jrk-k i { display: inline-block; margin-right: 6px; padding: 0 7px; border-radius: 99px; font-style: normal; font-size: 14px; line-height: 18px; letter-spacing: 0.06em; text-transform: uppercase; color: #0a0f2e; background: linear-gradient(180deg, #fff, var(--rk1) 55%); box-shadow: 0 1px 0 #000a2e; }
.jrk-top { grid-area: b; align-self: start; font-family: var(--display); font-weight: 400; font-size: 31px; line-height: 1.08; white-space: nowrap; color: var(--rk1); background: linear-gradient(180deg, #fff 12%, var(--rk1) 52%, var(--rk2) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 0 #000a2e) drop-shadow(0 0 10px color-mix(in srgb, var(--rk1) 35%, transparent)); }
.jrk-ladder { grid-area: l; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 7px; }
.jrk-ladder span { height: 20px; display: grid; place-items: center; border-radius: 6px; font-size: 14px; line-height: 1; color: #6f7cb5; background: rgba(3, 10, 44, 0.85); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.jrk-ladder .on { color: #0a0f2e; background: linear-gradient(180deg, var(--rk1), var(--rk2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 1px 0 #000a2e; }
.jrk-ladder .me { outline: 2px solid #fff; outline-offset: 1px; }
.jrk-ladder .up { color: var(--rk1); box-shadow: none; outline: 1.5px dashed var(--rk1); outline-offset: -1.5px; }
.jrk-push { grid-area: p; margin-top: 6px; font-style: normal; font-size: 16px; line-height: 1.15; text-align: center; color: #8ff0a8; }
.jr-rank.lead .jrk-push { color: var(--rk1); }
.jr-rank.pop { animation: jrk-pop 0.55s cubic-bezier(0.2, 1.5, 0.4, 1) var(--rk-late, 0ms) both; }
.jr-rank.pop .jrk-medal svg { animation: jrk-medal 0.8s cubic-bezier(0.2, 1.6, 0.4, 1) calc(var(--rk-late, 0ms) + 0.12s) both; }
@keyframes jrk-pop { from { opacity: 0; scale: 0.82; } to { opacity: 1; scale: 1; } }
@keyframes jrk-medal { from { scale: 0.3; rotate: -30deg; } to { scale: 1; rotate: 0deg; } }
@media (prefers-reduced-motion: reduce) { .jrk-rays, .jr-rank.pop, .jr-rank.pop .jrk-medal svg { animation: none; } }
.jr-card { --hc: var(--gold); display: flex; align-items: center; gap: 12px; margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--hc) 45%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--hc) 16%, transparent), transparent 70%), rgba(6, 12, 40, 0.5); }
.jr-card-text { flex: 1; min-width: 0; }
.story-book .jr-card .sb-chapter { margin: 0; }
.story-book .jr-card .sb-name { margin: 2px 0 0; }
.jr-card-text > small { display: block; font-size: 15px; color: var(--muted); }
.jr-st { display: inline-block; margin: 0 0 8px; padding: 1px 10px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, 0.22); font-style: normal; font-size: 16px; color: #dfe6ff; }
.jr-card .jr-st { flex: none; margin: 0; }
.jr-st.ok { color: var(--green); border-color: color-mix(in srgb, var(--green) 50%, transparent); }
.jr-st.now { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 50%, transparent); background: rgba(255, 210, 63, 0.1); }
.jr-st.skip, .jr-st.lock { color: var(--muted); }
/* A narrow window (an upright phone): a smaller ring, a card's chip on a row of its own. Measured on the window itself, so a
   phone turned sideways gets the wide layout. */
.story-book { container-type: inline-size; }
@container (max-width: 520px) {
  .jr-ring { width: 62px; height: 62px; }
  .jr-ring b { font-size: 19px; }
  .jr-card { flex-wrap: wrap; }
  .jr-card-text { flex-basis: calc(100% - 64px); }
  .jr-card .jr-st { margin-left: 60px; }
}
/* Pip's quest window, RuneScape style (owner, 2026-10-10: "make the quests window be more like runescape vibe"; ui-quests.js
   questPanel, .pip-book), in the Old School kit of ZAZA's window and the Rankings (the --rs-* on .modal, the .rk-scroll
   parchment): the quest written on the parchment like a quest journal (.rs-scroll): blue ink, the giver and places in red
   (.rs-k), done steps struck through, the reward one thing a line and a red QUEST COMPLETE! once done (.rs-done). Buttons
   stay the World's plain gold. The Shattered Core's journey had this look too until the owner asked for pictures and a
   cooler look the same day (world/journey.css). */
.pip-book { --q-red: #ff3b2f; --q-green: #2fe02f; --q-ink: #0b1a78; --q-ink-2: #3a4a8a; --q-done: #2f7a1f; }
/* The quest journal: the Rankings' parchment scroll (unrolled once per opening, not on a redraw), in a journal's inks. */
.rk-scroll.rs-journal { margin: 18px 14px 14px; }
.rk-scroll.rs-journal.still, .rk-scroll.rs-journal.still::after { animation: none; }
.rk-body.rs-scroll { padding: 20px 26px 16px; color: var(--q-ink); }
.rs-scroll .rs-k { font-weight: 400; color: var(--rs-red); }
.rs-scroll .rs-intro { margin: 0 0 10px; color: var(--q-ink); }
.rs-scroll .qb-steps { gap: 5px; margin: 4px 0 12px; }
.rs-scroll .qb-steps > li { padding: 1px 0 1px 30px; border: 0; border-radius: 0; background: none; }
.rs-scroll .qb-steps > li::before { left: 0; top: 2px; width: 22px; height: 22px; box-sizing: border-box; border: 1px solid rgba(11, 26, 120, 0.5); background: rgba(255, 250, 228, 0.4); color: var(--q-ink); font-size: 15px; }
.rs-scroll .qb-steps > li.done::before { border-color: var(--q-done); background: var(--q-done); color: #f6e7bd; }
.rs-scroll .qb-steps > li.now { border: 0; background: none; }
.rs-scroll .qb-steps > li.now::before { border-color: var(--q-ink); background: var(--q-ink); color: #f6e7bd; }
.rs-scroll .qb-steps > li.next { opacity: 0.72; }
.rs-scroll .qb-line s { color: var(--q-ink-2); text-decoration-thickness: 2px; }
.rs-scroll .qb-line em { color: var(--rs-red); }
.rs-scroll .qb-steps > li > p { color: var(--q-ink); }
/* The step you're on: a bar and its count on the parchment (the promo posters' quest card, owner 2026-10-10). */
.rs-scroll .qb-bar { display: block; height: 9px; margin: 6px 0 0; border-radius: 99px; background: rgba(11, 26, 120, 0.14); box-shadow: inset 0 1px 2px rgba(11, 26, 120, 0.25); overflow: hidden; }
.rs-scroll .qb-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #f0a400, #ffd23f); box-shadow: inset 0 -1px 0 rgba(120, 70, 0, 0.35); }
.rs-scroll .qb-n { display: block; margin-top: 3px; font-size: 16px; line-height: 1; color: var(--q-ink); }
.rs-scroll .qb-reward { margin: 0 0 10px; padding: 10px 0 0; border: 0; border-top: 2px solid var(--rs-line); border-radius: 0; background: none; text-align: center; font-size: 18px; }
.rs-scroll .qb-reward b { display: block; color: var(--rs-red); font-weight: 400; }
.rs-scroll .qb-reward ul { list-style: none; margin: 2px 0 0; padding: 0; }
.rs-scroll .qb-reward li { line-height: 1.3; color: var(--q-ink); }
.rs-scroll .qb-next { margin: 0 0 8px; padding: 8px 0 0; border: 0; border-top: 2px solid var(--rs-line); border-radius: 0; background: none; color: var(--q-ink); }
.rs-scroll .qb-next b { color: var(--rs-red); }
.rs-scroll .rs-done { margin: 2px 0 8px; text-align: center; font-family: var(--ui-font); font-size: 28px; line-height: 1.1; letter-spacing: 0.08em; text-transform: uppercase; color: #b3200c; }
.rs-scroll > :last-child { margin-bottom: 0; }
@media (max-width: 520px) { .rk-body.rs-scroll { padding: 18px 18px 14px; } }
.chat-status.on { color: #7dffa0; }
/* Players online: a live pill next to the world name, and a line on the title screen. */
.online-wrap { position: relative; display: inline-flex; pointer-events: auto; }
/* The players-online dropdown under the counter (desktop). */
.online-drop {
  position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); width: 340px; max-height: min(60vh, 460px); overflow-y: auto;
  padding: 10px; border-radius: 12px; background: linear-gradient(180deg, var(--stone-2), var(--stone)); border: 2px solid var(--edge-dark);
  box-shadow: inset 0 0 0 1px var(--edge-light), 0 10px 26px rgba(0, 0, 0, 0.5); pointer-events: auto; text-align: left;
}
.online-drop .drop-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 2px; }
.online-drop .drop-head b { font-family: var(--display); font-weight: 400; font-size: 16px; color: #7dffa0; }
.online-drop .drop-head small { font-size: 13px; color: var(--muted); }
.online-drop .online-list { margin-top: 8px; gap: 6px; }
.online-drop .online-player { padding: 6px 8px; }
.online-drop .online-player img { width: 32px; height: 32px; }
.online-player img.pixel { border-radius: 8px; object-fit: contain; background: radial-gradient(circle at 50% 40%, #3a66ff, var(--navy-900)); }
.online-player small .online-rank { display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: -3px; background: center / contain no-repeat; } /* the tier's painted emblem (world/assets/ranks), as on the fight boxes */
.online-player small .online-cls { font-style: normal; color: #dfe6ff; } /* their class, under the level chip */
/* Desktop: the online counter sits at the top centre; the area banner drops in just below it.
   The ZAZA box takes the top-left corner, with the hover text ("Walk here") just to its right. */
@media (min-width: 761px) and (min-height: 501px) {
  .hud-panel { top: 12px; }
  .hud-tl { left: 288px; top: 14px; max-width: max(150px, calc(50vw - 350px)); }
  .hud-tl .online-wrap { position: fixed; left: 50%; top: 10px; transform: translateX(-50%); z-index: 8; }
  .area-banner { top: 50px; }
}
/* top-clear.js: "N online", the vote button, the drop clock and the X live card fade away while your hero stands under
   them (at the map's top edge) and come back as you walk lower. They keep their place, and taps go through to the map. */
.top-clear { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity 0.2s ease-in, visibility 0s linear 0.2s !important; }
.online-faces { display: none; }
.online-faces .face { position: relative; width: 32px; height: 32px; margin-left: -6px; padding: 0; border-radius: 50%; border: 2px solid var(--tc); background: var(--navy-800); box-shadow: 0 0 8px var(--tc), 0 2px 0 #000a2e; }
.online-faces .face img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.online-faces .face.top { width: 36px; height: 36px; }
.online-faces .face em { position: absolute; right: -6px; bottom: -5px; font-style: normal; font-size: 11px; font-weight: 700; padding: 0 3px; border-radius: 4px; color: var(--navy-900); background: var(--tc); border: 1px solid #1b1424; }
.online-faces .face:hover { transform: translateY(-2px); z-index: 1; }
.online-faces .face-more { margin-left: 6px; font-size: 14px; font-weight: 700; color: #fff; text-shadow: 0 1px 0 #000; }
.online-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: rgba(6, 12, 40, 0.85); border: 1.5px solid #37a862; color: #fff; font-size: 15px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.online-pill b { color: #7dffa0; font-size: 17px; }
.online-pill i, .title-online i { width: 8px; height: 8px; border-radius: 50%; background: #5fe86f; box-shadow: 0 0 0 3px rgba(95, 232, 111, 0.25); animation: blink 1.6s infinite; }
.online-list { display: grid; gap: 8px; margin-top: 12px; }
.online-player {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; text-align: left;
  border-radius: 8px; border: 2px solid #0b1022; background: rgba(8, 18, 70, 0.9); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.online-player:hover { border-color: var(--gold); }
/* The online list's rows in the holder's rank colour, the card skins' base box (owner, 2026-11-03, "make the plain step
   look a bit cooler.. and i think it might look nicer if the avatars squares are a bit bigger"): the colour fills the
   row, deep enough for white words, with a glass sheen, a foil streak, the rank's stripe down the left edge and a light
   pool at the right, where the rank's painted emblem (ui.js .online-crest, world/assets/ranks) glows big behind 👁 Watch,
   faded so it stays discreet, never on the words; your own row has no Watch, so its badge shows whole. A player without
   $ZAZA is slate (--tc), with no badge. The faces are 42 px in the dropdown, 46 in the phone's window. The Creators
   boards' rows (.board-row) keep their plain look. */
.online-player:not(.board-row) {
  position: relative; isolation: isolate; overflow: hidden; border-color: var(--tc);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 44%),
    linear-gradient(112deg, transparent 54%, rgba(255, 255, 255, 0.13) 54% 60%, transparent 60% 63%, rgba(255, 255, 255, 0.08) 63% 65%, transparent 65%),
    radial-gradient(46% 150% at 97% 50%, color-mix(in srgb, var(--tc) 70%, transparent), transparent 72%),
    linear-gradient(160deg, color-mix(in oklch, var(--tc) 72%, #000), color-mix(in oklch, var(--tc) 40%, #000) 45%, color-mix(in oklch, var(--tc) 22%, #000));
  box-shadow: 0 0 0 1px #1b1424, inset 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 -3px 0 rgba(0, 0, 0, 0.3), inset 0 0 18px color-mix(in srgb, var(--tc) 40%, transparent), 0 0 12px color-mix(in srgb, var(--tc) 35%, transparent);
}
.online-player:not(.board-row):hover { border-color: var(--gold); }
.online-player:not(.board-row)::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; z-index: -1; width: 4px; background: linear-gradient(180deg, color-mix(in oklch, var(--tc) 55%, #fff), var(--tc)); box-shadow: 0 0 10px var(--tc); }
.online-crest { position: absolute; right: 4px; top: 50%; z-index: -1; height: 100%; aspect-ratio: 1; translate: 0 -50%; background: center / contain no-repeat; opacity: 0.5; filter: drop-shadow(0 0 4px var(--tc)); pointer-events: none; } /* whole and the same size on every row, yours too */
.online-player:not(.board-row) b { text-shadow: 0 2px 0 #000, 0 0 8px rgba(0, 0, 0, 0.7); }
.online-player:not(.board-row) small, .online-player:not(.board-row) small .online-cls { color: #f2edf9; text-shadow: 0 1px 0 #000, 0 0 6px rgba(0, 0, 0, 0.9); }
.online-player:not(.board-row) small .online-rank { filter: drop-shadow(0 1px 0 #000); }
.online-player:not(.board-row) b .online-lv { background: rgba(10, 8, 30, 0.6); box-shadow: inset 0 0 0 1px rgba(255, 210, 63, 0.65); text-shadow: none; }
.online-player:not(.board-row) img { width: 46px; height: 46px; border-radius: 9px; box-shadow: 0 0 0 1px #1b1424, 0 0 10px color-mix(in srgb, var(--tc) 60%, transparent); }
.online-drop .online-player:not(.board-row) img { width: 42px; height: 42px; }
.online-player img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid var(--tc); background: var(--navy-800); image-rendering: pixelated; flex: none; }
/* One line each, fixed heights: every row is the same size whatever the name; a long name ends in "…" but keeps its squad tag. */
.online-player span { flex: 1; min-width: 0; display: grid; gap: 2px; }
.online-player b { display: flex; gap: 5px; height: 20px; font-size: 17px; line-height: 20px; color: #fff; white-space: nowrap; overflow: hidden; }
.online-player b i { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-style: normal; }
.online-player b em { flex: none; font-style: normal; }
.online-player b .online-lv { align-self: center; height: 17px; padding: 0 6px; border-radius: 999px; background: rgba(255, 210, 63, 0.16); box-shadow: inset 0 0 0 1px rgba(255, 210, 63, 0.45); color: var(--gold); font-size: 13px; line-height: 17px; }
.online-player small { display: block; height: 17px; color: var(--muted); font-size: 14px; line-height: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* A vault charger's ⚡ is never cut: the words before it end in "…" first (ui.js onlineRowsHTML). */
.online-player small.online-sub { display: flex; }
.online-sub .online-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-style: normal; }
.online-sub .online-charge { flex: none; font-style: normal; }
/* 👁 Watch on everyone's row but yours (the row itself still finds them on the map). */
.online-row { position: relative; }
.online-row .online-player { padding-right: 86px; }
.online-watch {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; height: 24px; padding: 0 7px;
  border-radius: 999px; border: 2px solid #0b1022; color: var(--navy-900); background: linear-gradient(180deg, #ffe778, var(--gold-2)); cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -2px 0 rgba(0, 0, 0, 0.18), 0 2px 0 #000a2e, 0 0 0 1px rgba(0, 0, 0, 0.35); font: 400 12px/1 var(--display); white-space: nowrap;
}
.online-watch span { display: block; translate: 0 0.06em; }
.online-watch:hover { filter: brightness(1.08); }
.online-watch:active { transform: translateY(calc(-50% + 1px)); }
/* 👁 Watch (live-view.js): a window that follows the player you watch. Desktop: under the "N online" pill; an upright phone:
   just above the chat (--watch-bottom, set from the chat's height); sideways: bottom left of the map, clear of the
   trackers under the minimap. Dragged by its top bar, it stays where it's put (.moved). */
.watch-view {
  position: fixed; z-index: 7; left: 50%; top: 48px; transform: translateX(-50%); width: 340px; pointer-events: auto; overflow: hidden;
  border-radius: 12px; background: linear-gradient(180deg, var(--stone-2), var(--stone)); border: 2px solid var(--tc, var(--edge-dark));
  box-shadow: inset 0 0 0 1px var(--edge-light), 0 0 12px color-mix(in srgb, var(--tc, #000) 35%, transparent), 0 10px 26px rgba(0, 0, 0, 0.5);
}
.watch-view.moved { transform: none; }
.watch-head { display: flex; align-items: center; gap: 6px; padding: 6px; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.watch-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0 2px; border: 0; background: none; color: #fff; text-align: left; cursor: pointer; }
.watch-who img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid var(--tc); background: var(--navy-800); flex: none; }
.watch-who img.pixel { border-radius: 8px; object-fit: contain; image-rendering: pixelated; background: radial-gradient(circle at 50% 40%, #3a66ff, var(--navy-900)); }
.watch-who span { min-width: 0; display: grid; gap: 2px; }
.watch-who b, .watch-who small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.watch-who b { font: 400 16px/1.1 var(--display); letter-spacing: 0.01em; display: flex; align-items: center; gap: 6px; }
.watch-who b i { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-style: normal; }
.watch-who b .watch-lv { flex: none; padding: 1px 6px; border-radius: 999px; background: rgba(255, 210, 63, 0.16); box-shadow: inset 0 0 0 1px rgba(255, 210, 63, 0.45); color: var(--gold); font-size: 12px; font-style: normal; }
.watch-who b .watch-lv[hidden] { display: none; }
.watch-who small { font-size: 15px; font-weight: 700; line-height: 1.1; color: #dfe6ff; }
.watch-view.fight .watch-who small { color: #ff8f9a; }
.watch-who:hover b { color: var(--gold); }
.watch-btn {
  flex: none; display: flex; align-items: center; justify-content: center; height: 30px; min-width: 30px; padding: 0 10px; border-radius: 999px; border: 2px solid #0b1022;
  background: rgba(8, 18, 70, 0.9); color: #fff; font: 400 14px/1 var(--display); white-space: nowrap; cursor: pointer;
}
.watch-btn span { display: block; translate: 0 0.06em; }
.watch-btn em { font-style: normal; }
.watch-btn.watch-x { padding: 0; width: 30px; font: 700 16px/1 var(--ui-font); }
.watch-btn:hover, .watch-btn:focus-visible { border-color: var(--gold); outline: none; }
.watch-screen { position: relative; height: 210px; margin: 0 6px 6px; border-radius: 8px; overflow: hidden; border: 2px solid #0b1022; background: #070b1f; }
.watch-screen canvas { display: block; width: 100%; height: 100%; }
.watch-live { position: absolute; left: 6px; top: 6px; display: flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: 999px; background: rgba(6, 12, 40, 0.82); color: #fff; font: 400 12px/1 var(--display); font-style: normal; letter-spacing: 0.08em; pointer-events: none; }
.watch-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 6px #ff4d4d; animation: blink 1.6s infinite; }
.watch-off { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 14px; text-align: center; background: rgba(3, 8, 30, 0.78); color: #dfe6ff; font-size: 19px; font-weight: 700; line-height: 1.25; }
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (min-width: 561px) {
  .watch-view:not(.moved) { top: auto; bottom: var(--watch-bottom, 120px); left: 8px; right: 8px; width: auto; max-width: 380px; margin: 0 auto; transform: none; }
  .watch-view.moved { width: min(340px, calc(100vw - 16px)); }
  .watch-screen { height: 170px; }
}
@media (orientation: landscape) and (max-height: 500px) and (min-width: 561px) {
  .watch-view:not(.moved) { left: max(8px, var(--sw-l)); right: auto; bottom: max(8px, var(--sw-b)); width: 236px; margin: 0; }
  .watch-view.moved { width: 236px; }
  .watch-screen { height: 112px; }
  .watch-btn em { display: none; } /* 🗺 alone: room for where they are */
  .hud:has(.dpad:not(.right):not([hidden])) .watch-view:not(.moved) { left: calc(max(8px, var(--sw-l)) + 128px); } /* beside the D-pad (a right one leaves it be) */
}
.chat-status.wait { color: var(--gold); }
.chat-status.off { color: var(--muted); }
.dm-chip { min-width: 0; margin-right: auto; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--dm, #ff9fd0) 15%, transparent); border: 1px solid var(--dm, #ff9fd0); color: var(--dm-t, #ffb8dc); font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* one line beside the 8 emotes: a long name ends in … */
/* One-on-one messages (dm-color.js): each player you talk with has a colour of their own, in the order they first come
   up (owner, 2026-10-13: "make colors alternative for different people"); your own lines (.dm-out) are white with
   their name in their colour, so a talk alternates. The ✉ To chip and their chip in a fight wear it too. */
.dm-c0 { --dm: #ff9fd0; --dm-t: #ffb8dc; }
.dm-c1 { --dm: #ff9a85; --dm-t: #ffcdc2; }
.dm-c2 { --dm: #dfa0ff; --dm-t: #efd2ff; }
.dm-c3 { --dm: #5fe3cf; --dm-t: #c0f5ec; }
.dm-c4 { --dm: #8fb8ff; --dm-t: #d0e1ff; }
.chat-log .m-private { color: var(--dm-t, #ffb8dc); }
.chat-log .m-private b { color: var(--dm, #ff9fd0); }
.chat-log .m-private.dm-out { color: #f2f4ff; }
.chat-log .m-private.dm-out b { color: #a9b3d6; }
.chat-log .m-private.dm-out b i { font-style: normal; color: var(--dm, #ff9fd0); }
.chat-log [data-peer], .chat-log [data-pf], .chat-log p.m-private { cursor: pointer; } /* a name: the profile (data-pf) or a message; a one-on-one line: answer it (ui.js answerDm) */
.chat-log [data-peer]:hover, .chat-log [data-pf]:hover { text-decoration: underline; }
/* A player's line (ui.js appendMsg): the time it was sent, ↩ Reply and ✉ Message on hover, or after a tap on phones
   (your own lines: just the time); a reply shows the line it answers above it, and one that answers you gets a gold
   edge. They sit at the right end of the LAST line, one line tall, and ::after keeps their width (--acts-w) free after
   the words, so they never cover any (owner, 2026-10-06: "if two lines dont let the icons go over text"): a last line
   too full for them gets a row of its own. A card line keeps its card clear of them instead. */
.chat-log p[data-mid] { position: relative; border-radius: 6px; --acts-w: 124px; }
.chat-log p[data-mid]:not(:has(> .chat-acts button)) { --acts-w: 52px; }
/* …more room for a longer row (chat-mod.js, 2026-10-17): 🌐 Translate and ⚑ Report after ↩ ✉, and the team's 🔇 ⛔; a
   private message to you has ⚑ alone. Never wider than the line (a narrow chat sideways on a phone). */
.chat-log p[data-mid]:has(> .chat-acts button:only-of-type) { --acts-w: 90px; }
.chat-log p[data-mid]:has(> .chat-acts button:nth-of-type(3)) { --acts-w: min(162px, 100%); }
.chat-log p[data-mid]:has(> .chat-acts button:nth-of-type(4)) { --acts-w: min(200px, 100%); }
.chat-log p[data-mid]:has(> .chat-acts button:nth-of-type(5)) { --acts-w: min(238px, 100%); }
.chat-log p[data-mid]:has(> .chat-acts button:nth-of-type(6)) { --acts-w: min(276px, 100%); }
.chat-log p[data-mid]:has(> .chat-acts button:nth-of-type(7)) { --acts-w: min(314px, 100%); }
.chat-log p.sel { background: rgba(169, 179, 214, 0.1); }
.chat-acts { position: absolute; bottom: 0; right: 0; max-width: 100%; display: none; align-items: center; gap: 4px; height: 26px; height: 1lh; }
@media (hover: hover) { .chat-log p[data-mid]:hover .chat-acts { display: flex; } .chat-log p[data-mid]:hover { background: rgba(169, 179, 214, 0.08); } .chat-log p[data-mid]:hover::after { content: ""; display: inline-block; width: var(--acts-w); } }
.chat-log p.sel .chat-acts, .chat-log p:focus-within .chat-acts { display: flex; }
.chat-log p[data-mid].sel::after, .chat-log p[data-mid]:focus-within::after { content: ""; display: inline-block; width: var(--acts-w); }
.chat-log p[data-mid]:has(> .chat-card)::after { content: none; }
#chatLog p[data-mid] > .chat-card { max-width: calc(100% - var(--acts-w)); }
.chat-time { padding: 0 3px 0 6px; font-size: 14px; line-height: 1; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; text-shadow: 0 1px 0 #000a2e; }
.chat-acts button { width: 34px; height: 100%; padding: 0; border-radius: 8px; border: 1px solid #2e3d74; background: #121c45; color: #dfe6ff; font-size: 16px; line-height: 1; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); }
.chat-acts button:hover, .chat-acts button:focus-visible { border-color: var(--gold); color: var(--gold); }
.chat-log p span.chat-re { display: block; margin-top: 2px; padding-left: 8px; border-left: 3px solid rgba(169, 179, 214, 0.45); color: var(--muted); font-size: 15px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-log p span.chat-re b { color: #dfe6ff; }
.chat-log p.re-you { padding-left: 6px; box-shadow: inset 3px 0 0 var(--gold); background: rgba(255, 210, 63, 0.08); }
/* 🌐 A line's translation, under it (chat-mod.js trHTML), and ⚑ a line hidden by a report, in its place. */
.chat-log p span.chat-tr { display: block; margin-top: 2px; padding-left: 8px; border-left: 3px solid rgba(95, 227, 207, 0.55); color: #c9f3ec; font-size: 0.92em; line-height: 1.3; }
.chat-log p span.chat-tr i { font-style: normal; color: var(--muted); }
.chat-log p span.chat-tr.is-note { color: var(--muted); }
.chat-log p.m-hidden { color: var(--muted); font-size: 0.85em; font-style: italic; opacity: 0.8; }
/* 👁 right after a player's name (ui.js appendMsg): where they are, live. Just the eye, in the chat's own blue so it sits
   in with the words (owner, 2026-10-07: "put the eye to see the person in blue instead, so it blends better with the
   text"), on the text's middle; a fingertip gets a few px of slack around it (::after). Lit while the live window shows
   them (.on); gone once they leave the World (ui.js markChatEyes). */
.chat-eye { position: relative; display: inline-block; width: 18px; height: 12px; margin: 0 1px 0 5px; padding: 0; vertical-align: 0; border: 0; background: none; color: var(--cyan); cursor: pointer; opacity: 0.85; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.7)); }
.chat-eye::after { content: ""; position: absolute; inset: -8px -5px; }
.chat-eye svg { display: block; width: 100%; height: 100%; }
.chat-eye[hidden] { display: none; }
.chat-eye:hover, .chat-eye:focus-visible { opacity: 1; outline: none; }
.chat-eye.on { opacity: 1; filter: drop-shadow(0 0 3px rgba(127, 212, 255, 0.95)); }
.reply-chip { background: rgba(127, 212, 255, 0.15); border-color: #7fd4ff; color: #bfe9ff; }
.ch-tag { font-style: normal; font-size: 12px; font-weight: 700; padding: 0 5px; margin-right: 5px; border-radius: 3px; vertical-align: 2px; text-shadow: none; } /* a solid chip: the clear chat's dark edge (html.chat-clear) only smudged its word */
.ch-trade { background: var(--green); color: var(--navy-900); }
.ch-vault { background: var(--cyan); color: var(--navy-900); }
.ch-guest { background: #4a5266; color: #d4d9e6; } /* a live player without $ZAZA */
.ch-squad { background: #9fe0ff; color: var(--navy-900); cursor: pointer; } /* a squad line in All: opens the 👥 Squad tab */
/* ✉ DMs and 👥 Squad (ui.js setChat; 2026-10-17, players: "we need some better DM system", "maybe better to have squad
   chat in normal window + that small pin message on top?"): tabs of the chat, rows of Chat ▾ on a phone. 👥 Squad only
   while you're in a squad. Each counts what came while you were elsewhere (ui.js renderChatBadges); a phone's Chat ▾ and
   💬 Chat count them all. */
.chat-squad[hidden] { display: none !important; }
.chat-unread { display: inline-block; min-width: 17px; margin-left: 3px; padding: 0 4px; border-radius: 999px; background: var(--red); color: #fff; font-size: 13px; font-style: normal; line-height: 17px; text-align: center; vertical-align: 1px; text-shadow: none; }
/* A computer's 440 px chat (up to 1100 px wide) has no room for the words beside a count: ✉ 2, 👥 1 (the words in the title). */
@media (min-width: 761px) and (max-width: 1100px) and (min-height: 501px) { .chat-tabs :is(.chat-dms, .chat-squad):has(.chat-unread) .w { display: none; } }
.chat-channel[data-unread] { position: relative; } /* 💬 Chat is positioned already */
.chat-channel[data-unread]::before, .chat-open[data-unread]::before { content: attr(data-unread); position: absolute; top: -6px; right: -4px; z-index: 1; min-width: 18px; padding: 0 4px; border-radius: 999px; background: var(--red); color: #fff; font-size: 13px; line-height: 18px; text-align: center; text-shadow: none; box-shadow: 0 0 0 2px #141d40; }
.chat-tabs .chat-channel[data-unread]::before { top: -3px; right: -2px; min-width: 16px; padding: 0 3px; font-size: 12px; line-height: 16px; }
/* ✉ DMs' strip (ui.js convosHTML): everyone you talk with one-on-one this visit, newest first, each in their colour
   (dm-color.js); the one you write to is lit, a red dot says they wrote while you weren't looking, a faded one has left
   the World. One row: more scroll sideways. */
.chat-convos { flex: none; display: flex; align-items: center; gap: 5px; min-height: 36px; padding: 4px 8px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; border-bottom: 1px solid #0b1022; background: rgba(3, 10, 44, calc(0.45 * var(--chat-alpha, 1))); }
.chat-convos::-webkit-scrollbar { display: none; }
.chat-convos[hidden], .chat-pin[hidden] { display: none; }
.cv { flex: none; display: inline-flex; align-items: center; max-width: 160px; height: 28px; border-radius: 999px; border: 1px solid var(--dm, #ff9fd0); background: color-mix(in srgb, var(--dm, #ff9fd0) 12%, #0a1440); color: var(--dm-t, #ffb8dc); }
.cv.on { background: color-mix(in srgb, var(--dm, #ff9fd0) 34%, #0a1440); box-shadow: inset 0 0 0 1px var(--dm, #ff9fd0); color: #fff; }
.cv.away { opacity: 0.55; }
.cv-who { min-width: 0; height: 100%; display: inline-flex; align-items: center; gap: 5px; padding: 0 2px 0 11px; border: 0; background: none; color: inherit; font: 700 15px var(--ui-font); cursor: pointer; }
.cv-who span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-new { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px rgba(10, 20, 64, 0.9); }
.cv-x { flex: none; width: 26px; height: 100%; padding: 0 4px 0 0; border: 0; background: none; color: inherit; font-size: 12px; line-height: 1; opacity: 0.7; cursor: pointer; }
.cv-x:hover, .cv-x:focus-visible { opacity: 1; outline: none; }
.cv-none { margin: 0; color: var(--muted); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 👥 Squad: the leader's 📌 notice in a strip on top (squad-chat.js pinHTML): two lines at most, one on a phone; a tap
   shows it all (.open). */
.chat-pin { flex: none; margin: 0; padding: 4px 10px; border-bottom: 1px solid #0b1022; background: rgba(255, 210, 63, 0.1); color: var(--gold); font-size: 15px; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; cursor: pointer; }
.chat-pin.open { -webkit-line-clamp: 8; }
.chat-pin span { color: #fff; }
/* …under its members' faces (squad-chat.js rosterHTML): one slim row, online ones in colour first, the others greyed
   out, the online count, and a gold ▴ to minimize it (.min) to the count alone (the ▾ that shows it again, upside down). */
.chat-roster { flex: none; display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 2px 0 8px; border-bottom: 1px solid #0b1022; background: rgba(3, 10, 44, calc(0.45 * var(--chat-alpha, 1))); overflow: hidden; }
.chat-roster[hidden] { display: none; }
.chat-roster.min { height: 22px; }
.sqr-count { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: var(--muted); font: 700 15px var(--ui-font); line-height: 1; white-space: nowrap; }
.sqr-count b { color: #7dffa0; }
.sqr-count em { font-style: normal; color: var(--gold); margin-left: 4px; }
button.sqr-count { width: 100%; height: 100%; cursor: pointer; }
.sqr-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #5fe86f; box-shadow: 0 0 4px #5fe86f; }
.sqr-dot.off { background: var(--muted); box-shadow: none; }
.sqr-faces { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.sqr-faces::-webkit-scrollbar { display: none; }
.sqr-face { flex: none; width: 22px; height: 22px; padding: 0; border: 1px solid #0b1022; border-radius: 4px; background: #1a2350; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } /* held for a profile: no picture menu or text selection */
.sqr-face img { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.sqr-face.on { border-color: rgba(95, 232, 111, 0.7); background: #26346e; }
.sqr-face:not(.on) img { filter: grayscale(1); opacity: 0.55; }
.sqr-min { flex: none; width: 18px; height: 100%; padding: 0; border: 0; background: none; color: var(--gold); font: 700 15px var(--ui-font); line-height: 1; cursor: pointer; }
:is(.sqr-min, button.sqr-count):is(:hover, :focus-visible) { color: #fff; outline: none; }
/* The same row over All and Chat (everyone online) and Trade (the Marketplace's square): each squad's heroes in a box of
   its colour, no tag (chat-faces.js groupsHTML); those without a squad in a dashed grey one, last. Faces that don't fit
   on one row wrap onto a second (the count and ▴ stay on the first; a box too long for a row wraps inside), and more
   than two rows scroll down. */
.chat-roster:has(.sqr-grp) { height: auto; padding-block: 1px; align-items: flex-start; }
.chat-roster:has(.sqr-grp) > :is(.sqr-count, .sqr-min) { height: 26px; }
.sqr-faces:has(.sqr-grp) { flex-wrap: wrap; align-items: flex-start; gap: 2px 4px; max-height: 54px; overflow: hidden auto; }
.sqr-none { min-width: 0; color: var(--muted); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sqr-grp { flex: none; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; max-width: 100%; min-height: 26px; padding: 1px; border: 1px solid var(--sc, #56618a); border-radius: 5px; background: color-mix(in srgb, var(--sc, #56618a) 30%, transparent); }
.sqr-grp.none { border-style: dashed; background: none; }
.sqr-grp .sqr-face.on { border-color: #0b1022; }
/* 👥 Who's online (chat-faces.js buttonHTML, ui.js showCrowd): the pixel 👥 (icons.js tab_online) in a tab right of Chat ▾
   on a phone, one of the panel icons' size, and after the channel tabs on a computer (before ⚙ 🧹 –). A tap opens
   everyone's faces above the tabs (under them on a phone held sideways), a tap again closes them. */
.chat-tabs .chat-crowd { flex: 0 0 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0; order: 1; }
.chat-tabs :is(.chat-channels > .chat-prefs, .chat-channels > .chat-wipe, .chat-toggle) { order: 2; }
.chat-tabs .chat-crowd[hidden] { display: none; }
.chat-tabs .chat-crowd.open { color: #fff; background: var(--stone-3); box-shadow: inset 0 2px 0 var(--gold); }
.chat-crowd img { width: 22px; height: 22px; image-rendering: pixelated; }
.chat-crowd-pop { position: absolute; left: 0; right: 0; bottom: 100%; z-index: 7; display: flex; flex-direction: column; gap: 6px; padding: 7px 8px 9px; background: #141d40; border: 2px solid var(--edge-dark); border-bottom: 0; border-radius: 8px 8px 0 0; box-shadow: 0 -8px 18px rgba(0, 0, 0, 0.5); }
.chat-crowd-pop[hidden] { display: none; }
.chat-crowd-pop.down { bottom: auto; border: 0; border-bottom: 2px solid var(--edge-dark); border-radius: 0 0 8px 8px; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.5); }
.chatbox.crowd-up { overflow: visible; }
.crowd-head { flex: none; display: flex; align-items: center; gap: 8px; }
.crowd-head b { flex: none; color: #fff; font: 700 17px var(--ui-font); }
.crowd-head b i { font-style: normal; color: #7dffa0; }
.crowd-head small { flex: 1; min-width: 0; color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#chatCrowdPop .sqr-faces { flex: 1 1 auto; min-height: 0; flex-wrap: wrap; align-content: flex-start; gap: 4px 6px; max-height: none; overflow: hidden auto; }
#chatCrowdPop .sqr-face { width: 30px; height: 30px; }
#chatCrowdPop .sqr-grp { min-height: 34px; padding: 1px; }
.wallet-verify { width: 100%; padding: 5px 8px; border-radius: 6px; font-size: 14px; font-weight: 700; color: var(--navy-900); background: linear-gradient(180deg, #ffe066, var(--gold-2)); border: 2px solid #3a2a00; text-align: center; }
.wallet-verify.ok { background: rgba(95, 232, 111, 0.12); border-color: rgba(95, 232, 111, 0.5); color: #7dffa0; }
.wallet-rankings {
  display: flex; flex: none; align-items: center; justify-content: center; gap: 7px; width: 100%; height: 40px; margin: 3px 0 1px; padding: 0 10px;
  border-radius: 9px; border: 2px solid #000; color: var(--navy-900); background: linear-gradient(180deg, #ffe778, var(--gold-2));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), inset 0 -3px 0 rgba(0, 0, 0, 0.18), 0 2px 0 #000a2e;
  font-family: var(--display); font-size: 20px; line-height: 1; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}
.wallet-rankings:hover { filter: brightness(1.08) saturate(1.08); }
.wallet-rankings:active { transform: translateY(1px); }
/* Rankings and League side by side (ui.js renderWallet: the row keeps #walletRankings), each half the row, except that
   Rankings is never narrower than its trophy and whole word (min-content) and League takes what's left: a phone's 200 px
   box gave each half 87 px, 8 short of "🏆 Rankings", which showed as "Ranki…" (owner, 2026-10-13, on a phone shot:
   "make sure this is fixed on mobile on the best way possible"). League shows your league and points, gold-lit with 🔑
   while you hold a key to a league pack. */
.wallet-rank-row { display: grid; grid-template-columns: minmax(min-content, 1fr) minmax(0, 1fr); flex: none; gap: 6px; margin: 3px 0 1px; container-type: inline-size; }
.wallet-rank-row .wallet-rankings { width: 100%; min-width: 0; box-sizing: border-box; margin: 0; padding: 0 6px; gap: 5px; font-size: 17px; white-space: nowrap; overflow: hidden; }
.wallet-rank-row .wr-ico { flex: none; font-size: 18px; line-height: 1; transform: translateY(-1px); }
.wallet-rank-row .wr-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wallet-league small { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-family: system-ui, sans-serif; font-size: 13px; font-weight: 800; opacity: 0.8; }
.wallet-league.is-key { background: linear-gradient(180deg, #fff6c2, #ffd23f); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6), inset 0 -3px 0 rgba(0, 0, 0, 0.18), 0 0 0 2px #fff3a0, 0 2px 0 #000a2e; }
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (min-width: 561px) { .wallet-rank-row { gap: 5px; } .wallet-rank-row .wallet-rankings { height: 38px; padding: 0 5px; font-size: 15px; } .wallet-rank-row .wr-ico { font-size: 16px; } .wallet-league small { font-size: 12px; } }
/* A narrow box (a phone's, a 180 px row): smaller words and tight spacing, so the whole "🏆 Rankings" (about 94 px) leaves
   League room for "🏅 League" or its medal and "1,234 pts" (or the key), without the league's name. */
@container (max-width: 280px) { .wallet-rank-row .wallet-rankings { font-size: 13px; gap: 2px; padding: 0 3px; } .wallet-rank-row .wr-ico { font-size: 14px; } .wallet-league .lg-name { display: none; } .wallet-league small { font-size: 11px; } }
/* "Play in webapp" over Rankings: both the same height, and neither squeezed when the wallet runs short of room (it
   scrolls instead). Owner, 2026-10-11, on a phone where the webapp button stood twice as tall as a squashed Rankings (its
   trophy sticking out): "make that button less tall and the rankings one taller. keep them both sizes". */
.wallet-handoff { display: flex; flex: none; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 10px; border-radius: 9px; line-height: 1; }
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (min-width: 561px) { .wallet-rankings { height: 32px; gap: 5px; font-size: 16px; border-radius: 8px; } .wallet-handoff { height: 32px; border-radius: 8px; } }
.badge-box { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; margin: 0 0 10px; border-radius: 10px; background: rgba(3, 10, 44, 0.55); border: 1px solid #1d2f8a; font-size: 16px; }
.badge-box span { flex: 1; min-width: 200px; }

/* First finders, moderation. */
.first-finder { padding: 8px 10px; border-radius: 8px; background: rgba(255, 210, 63, 0.12); border: 1px solid rgba(255, 210, 63, 0.5); font-size: 16px !important; }
.first-finder b { color: var(--gold); }
.cardex .card { position: relative; }
.cardex .card.first::after { content: "🏆"; position: absolute; right: -2px; top: -4px; font-size: 14px; filter: drop-shadow(0 1px 0 #000); }
/* Won first by another player (you don't have it yet): greyed out, their name along the bottom. */
.cardex .card.taken img { filter: grayscale(1) brightness(0.5); }
.cardex .card.taken:hover img { filter: grayscale(0.6) brightness(0.75); }
.cardex .card.taken .taken-by { position: absolute; left: 0; right: 0; bottom: 0; padding: 1px 3px; background: rgba(6, 12, 40, 0.88); color: #dfe6ff; font-size: 11px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cardex .card .card-wins { position: absolute; left: 2px; top: 2px; padding: 0 4px; border-radius: 4px; background: rgba(6, 12, 40, 0.88); color: var(--gold); font-size: 11px; line-height: 1.35; pointer-events: none; }
.cardex-sum { margin: -4px 0 8px; font-size: 15px; color: #dfe6ff; }
.cardex-sum b { color: var(--gold); }
.ff-title { margin: 12px 0 4px; font-family: var(--display); font-weight: 400; font-size: 15px; color: var(--gold); }
.ff-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.ff-list li { display: flex; justify-content: space-between; gap: 8px; padding: 2px 6px; border-radius: 4px; background: rgba(3, 10, 44, 0.45); }
.ff-list li.me { box-shadow: inset 0 0 0 1px var(--gold); }
.ff-list span { color: var(--muted); } .ff-list b { color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ff-list b small { color: var(--muted); font-weight: 400; font-size: 12px; }
.pc-admin { align-items: center; padding-top: 6px; border-top: 1px dashed rgba(255, 93, 93, 0.4); }
.pc-admin span { font-size: 12px; font-weight: 700; color: var(--red); text-transform: uppercase; letter-spacing: 0.05em; }
.report-reasons { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.report-reasons .btn[aria-pressed="true"] { border-color: var(--gold); box-shadow: inset 0 0 0 2px var(--gold); }
.report-other .field textarea { width: 100%; box-sizing: border-box; min-height: 64px; font-size: 16px; } /* 16px: no zoom on iPhones */
.report-send { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin: 8px 0 0; }
.report-send small { margin-right: auto; color: var(--red); }

/* Power line popup: the multisig charge as a segmented battery. */
.power-box { padding: 14px 16px 12px; margin: 6px 0 12px; border-radius: 12px; border: 2px solid var(--gold); background: radial-gradient(ellipse at 15% 0%, rgba(255, 210, 63, 0.18), transparent 60%), linear-gradient(180deg, #0d2285, var(--navy-900)); box-shadow: 0 0 20px rgba(255, 210, 63, 0.25); }
.power-head { display: flex; align-items: baseline; gap: 10px; }
.power-head b { font-family: var(--display); font-weight: 400; font-size: 36px; color: var(--gold); text-shadow: 0 3px 0 #8a6410; }
.power-head span { font-size: 17px; color: #dfe6ff; }
.power-head em { margin-left: auto; font-style: normal; font-family: var(--display); font-size: 22px; color: #fff; }
.power-bar { position: relative; display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin: 10px 14px 6px 0; padding: 5px; border-radius: 8px; background: #050a1e; border: 2px solid #1b1424; box-shadow: inset 0 0 0 1px #3b4c80; }
.power-bar i { height: 26px; border-radius: 3px; background: linear-gradient(90deg, #ffd23f var(--f), #14203f var(--f)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.25); }
.power-bar .power-tip { position: absolute; right: -12px; top: 50%; width: 8px; height: 16px; transform: translateY(-50%); border-radius: 0 3px 3px 0; background: #3b4c80; border: 2px solid #1b1424; border-left: 0; }
.power-box p { margin: 6px 0 0; font-size: 16px; color: #dfe6ff; }
.power-shop { margin: 0 0 12px; padding: 10px 12px; border-radius: 6px; background: rgba(8, 12, 32, 0.45); border: 1px solid #000; }
.power-shop-row + .power-shop-row { margin-top: 10px; padding-top: 8px; border-top: 1px dashed rgba(255, 255, 255, 0.15); }
.power-shop-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.power-shop-head span { font-size: 15px; font-weight: 700; color: #fff; }
.power-shop-head b { font-family: var(--display); font-weight: 400; font-size: 21px; color: var(--gold); }
.power-shop p { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.power-shop ul { list-style: none; margin: 8px 0 0; padding: 6px 0 0; border-top: 1px dashed rgba(255, 255, 255, 0.15); }
.power-shop li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 2px 0; font-size: 15px; color: #fff; }
.power-shop li small { flex: none; font-size: 13px; color: var(--muted); text-align: right; white-space: nowrap; }
/* The Marketplace's split (ui.js powerPanel splitHTML): rare goods, and its 10% of $ZAZA sales between players; and each row's
   latest sales or skips, folded. */
.power-split { display: grid; gap: 4px; margin: 8px 0 0; }
.power-split > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; padding: 5px 9px; border-radius: 6px; background: rgba(255, 255, 255, 0.04); }
.power-split span { font-size: 15px; font-weight: 700; color: #fff; }
.power-split b { grid-row: span 2; font-family: var(--display); font-weight: 400; font-size: 17px; color: var(--gold); }
.power-split small { font-size: 13px; color: var(--muted); }
.power-latest { margin: 6px 0 0; }
.power-latest > summary { cursor: pointer; width: fit-content; font-size: 14px; color: var(--muted); }
.power-latest > summary:hover, .power-latest[open] > summary { color: #fff; }
.power-shop .power-latest ul { margin-top: 4px; }
/* The cards the Card Hunt budget can give away right now (ui.js powerCardsHTML), as on the team page's Cards the funds pay
   for (admin/tools.css .fd-*): one sealed pack per card, 10 a row (7 on phones), green in the World, gold ready to buy,
   dimmed still in the vault (dashed: the multisig), the next card filling up; its "PKMN 25" tag in the machine's colour
   (Starter orange, Elite white, Bronze copper, Legendary gold on black, Hyper green, Grail magenta), a pink dot for the
   ambassador pool's. */
.pc-box { margin: 0 0 12px; padding: 12px 14px; border-radius: 10px; border: 2px solid var(--gold); background: rgba(8, 12, 32, 0.45); }
.pc-head { display: flex; align-items: center; gap: 12px; }
.pc-big { flex: none; font-family: var(--display); font-weight: 400; font-size: 54px; line-height: 0.9; color: var(--gold); text-shadow: 0 3px 0 #8a6410; }
.pc-big.is-zero { color: var(--muted); text-shadow: none; }
.pc-head > span { display: grid; gap: 3px; min-width: 0; }
.pc-head strong { font-family: var(--display); font-weight: 400; font-size: 19px; line-height: 1.15; color: #fff; text-wrap: balance; }
.pc-head small { font-size: 13px; line-height: 1.35; color: var(--muted); }
.pc-packs { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); align-items: end; gap: 9px 6px; margin: 10px 0 8px; padding: 12px 8px 8px; border-radius: 8px; border: 1px solid #000; background: radial-gradient(ellipse at 50% 120%, rgba(255, 210, 63, 0.16), transparent 70%), #050a1e; }
.pc-pack { --pk: #e9edf7; --pk-ink: #06124f; position: relative; display: block; aspect-ratio: 192 / 310; }
.pc-pack[data-pk="pokemon_25"] { --pk: #f7a823; }
.pc-pack[data-pk="pokemon_100"] { --pk: #d0712b; }
.pc-pack[data-pk="pokemon_250"] { --pk: #e3bb4a; --pk-ink: #111; }
.pc-pack[data-pk="pokemon_500"] { --pk: #45c983; }
.pc-pack[data-pk="pokemon_1000"] { --pk: #e35bd2; }
.pc-pack img { display: block; width: 100%; height: 100%; border-radius: 3px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5)); }
.pc-pack.is-hidden img { outline: 2px solid var(--green); outline-offset: 1px; }
.pc-pack.is-ready img { outline: 2px solid var(--gold); outline-offset: 1px; }
.pc-pack.is-vault img { filter: saturate(0.35) brightness(0.62); }
.pc-pack.is-ms img { filter: saturate(0.35) brightness(0.62); outline: 2px dashed #7f93c9; outline-offset: 1px; }
.pc-pack b { position: absolute; left: 50%; bottom: -3px; transform: translateX(-50%); padding: 0 4px; border-radius: 999px; background: var(--green); color: #06124f; font-size: 8px; font-weight: 800; letter-spacing: 0.04em; line-height: 1.5; white-space: nowrap; }
.pc-pack.is-ready b { background: var(--gold); }
.pc-pack.is-next > img:first-child { filter: grayscale(1) brightness(0.45); }
.pc-pack.is-next .pc-fill { position: absolute; inset: 0; clip-path: inset(calc(100% - var(--fill)) 0 0 0); }
.pc-pack.is-next b { top: 50%; bottom: auto; transform: translate(-50%, -50%); background: var(--gold); font-size: 11px; }
.pc-pk { position: absolute; left: 50%; top: -6px; z-index: 1; transform: translateX(-50%); padding: 0 3px; border-radius: 999px; background: var(--pk); color: var(--pk-ink); font-size: 8px; font-style: normal; font-weight: 800; line-height: 1.5; white-space: nowrap; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.pc-pack.is-amb::after { content: ""; position: absolute; right: -3px; top: 8px; width: 8px; height: 8px; border: 2px solid #040a35; border-radius: 50%; background: #dd5299; }
.pc-more { grid-column: span 2; justify-self: center; align-self: center; padding: 3px 9px; white-space: nowrap; border: 2px solid var(--gold); border-radius: 999px; color: var(--gold); font-family: var(--display); font-size: 16px; }
.pc-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--muted); }
.pc-legend span { display: inline-flex; align-items: center; gap: 5px; }
.pc-legend i { display: inline-block; width: 9px; height: 13px; border-radius: 2px; background: var(--gold); }
.pc-legend i.is-hidden { background: var(--green); }
.pc-legend i.is-vault { background: #6b6a55; }
.pc-legend i.is-ms { background: #4d5a85; }
.pc-legend i.is-next { background: linear-gradient(to top, var(--gold) 50%, #3a3f63 50%); }
.pc-legend i.is-amb { width: 9px; height: 9px; border-radius: 50%; background: #dd5299; }
.pc-box .pane-note { margin: 8px 0 0; font-size: 13px; }
@media (max-width: 720px) { .pc-packs { grid-template-columns: repeat(7, minmax(0, 1fr)); } .pc-big { font-size: 44px; } .pc-head strong { font-size: 17px; } }

/* Vault popup: the site's vault.js charge flow, styled for the World. */
.vault-charge-title { margin-top: 16px; }
.wv { font-size: 17px; line-height: 1.4; }
.wv p { font-size: 17px; margin: 0 0 10px; }
.wv strong { color: #fff; }
.wv .muted { color: var(--muted); }
.wv a { color: var(--gold); }
.wv .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; }
.wv .btn-yellow { background: linear-gradient(180deg, #ffe066, var(--gold-2)); color: var(--navy-900); border: 2px solid #3a2a00; box-shadow: inset 0 0 0 1px #fff3b0, 0 3px 0 var(--gold-dark); }
.wv .btn-yellow:hover:not([disabled]) { filter: brightness(1.06); }
.wv .btn-outline { background: transparent; border: 2px solid #3b4c80; color: #fff; box-shadow: none; }
.wv .btn-sm { padding: 7px 12px; font-size: 16px; }
.wv .btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.wv .vault-charge-button { width: 100%; padding: 12px; font-family: var(--display); font-size: 20px; font-weight: 400; margin: 4px 0 2px; }
.wv .link-button { background: none; border: 0; padding: 0; color: var(--cyan); text-decoration: underline; font: inherit; }
.wv .vault-caps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 12px; }
.wv .vault-caps button { padding: 8px 12px; border-radius: 8px; background: #141d40; border: 2px solid #3b4c80; color: #fff; font-weight: 700; font-size: 16px; }
.wv .vault-caps button[aria-pressed="true"] { border-color: var(--gold); background: rgba(255, 210, 63, 0.15); color: var(--gold); }
.wv .vault-caps .vault-cap-max { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 1px; font-family: var(--display); font-weight: 400; font-size: 18px; }
.wv .vault-cap-max small { font-family: var(--ui-font); font-size: 14px; color: var(--muted); }
.wv .vault-caps-or { width: 100%; font-size: 15px; color: var(--muted); }
.wv .vault-caps input { width: 110px; padding: 8px 10px; border-radius: 8px; border: 2px solid #3b4c80; background: #0a1440; color: #fff; font: 16px var(--ui-font); }
.wv .vault-caps input:focus { outline: none; border-color: var(--gold); }
.wv .vault-flag { margin: 10px 0; padding: 10px 12px; border-radius: 10px; background: rgba(255, 152, 31, 0.12); border: 1px solid rgba(255, 152, 31, 0.5); }
.wv .vault-flag strong { display: block; color: #ffc070; font-size: 16px; }
.wv .vault-flag p { font-size: 15px; margin: 4px 0 0; }
.wv .vault-expect { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: rgba(3, 10, 44, 0.55); border: 1px solid #1d2f8a; font-size: 15px; }
.wv .vault-expect .label { display: block; margin-bottom: 4px; font-weight: 700; color: var(--cyan); }
.wv .vault-expect ul { margin: 0; padding-left: 18px; }
.wv .vault-expect li { margin: 3px 0; }
.wv .vault-expect p { font-size: 15px; margin: 6px 0 0; }
/* Donate with no connecting (vault.js): the multisig's address to copy, and its QR code unless the popup is phone-narrow. */
.wv .vault-donate-direct { container-type: inline-size; display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 12px; border-radius: 10px; border: 1px dashed rgba(255, 210, 63, 0.55); background: rgba(3, 10, 44, 0.55); }
.wv .vault-donate-direct > div { flex: 1; min-width: 0; }
.wv .vault-donate-direct .label { display: block; margin-bottom: 4px; font-weight: 700; color: var(--gold); }
.wv .vault-donate-direct p { font-size: 15px; margin: 0; }
.wv .vault-donate-qr { flex: none; width: 123px; height: 123px; padding: 6px; border-radius: 8px; background: #fff; } /* 37 modules × 3 px */
.wv .vault-donate-address { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.wv .vault-donate-address code { flex: 1; min-width: 0; padding: 6px 8px; border-radius: 8px; border: 2px solid #3b4c80; background: #0a1440; color: var(--gold); font: 16px/1.25 var(--ui-font); overflow-wrap: anywhere; user-select: all; }
.wv .vault-donate-address .btn { flex: none; }
@container (max-width: 400px) {
  .wv .vault-donate-qr { display: none; }
}
/* Folded details in the World's vault popup (the Phantom notes): one line until you open them. */
.wv details.vault-fold > summary { cursor: pointer; list-style: none; font-weight: 700; color: var(--cyan); }
.wv details.vault-fold > summary::-webkit-details-marker { display: none; }
.wv details.vault-fold > summary::before { content: "▸ "; color: var(--muted); }
.wv details.vault-fold[open] > summary::before { content: "▾ "; }
.wv details.vault-flag.vault-fold > summary { color: #ffc070; font-size: 15px; }
.wv details.vault-fold[open] > summary { margin-bottom: 6px; }
/* The vault popup's live numbers: one compact row under your charge (two rows on phones). */
.stats.vault-live { grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 14px 0 6px; }
.stats.vault-live .stat { padding: 7px 8px; }
.stats.vault-live .stat small { font-size: 12px; line-height: 1.2; }
.stats.vault-live .stat b { font-size: 17px; }
@media (max-width: 560px) { .stats.vault-live { grid-template-columns: repeat(2, 1fr); } }
/* The chargers' faces in the World's Community Vault window (ui.js vaultPanel): round, gold-ringed and overlapping like
   zazadog.fun's row. They sit in the window itself, outside the site's vault box (.wv), so these rules aren't scoped to it. */
.vault-faces { display: flex; flex-wrap: wrap; align-items: center; gap: 0; row-gap: 6px; margin: 8px 0 10px 9px; }
.vault-face { display: grid; place-items: center; width: 34px; height: 34px; margin-left: -9px; overflow: hidden; border: 2px solid var(--gold); border-radius: 50%; background: #13288f; box-shadow: 0 0 0 2px #081656; color: #fff; font-size: 15px; font-weight: 800; text-decoration: none; }
.vault-face img { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: auto; }
a.vault-face:hover, a.vault-face:focus-visible { position: relative; z-index: 1; transform: translateY(-2px) scale(1.08); }
.vault-face-more { border-color: #3b4c80; font-size: 12px; }
/* Donate card (vault.js): $CARDS or USDC straight to the marketing multisig. */
.wv .vault-gift-tokens { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin: 8px 0; }
.wv .vault-gift-tokens button { display: grid; justify-items: center; gap: 2px; padding: 10px 6px; border-radius: 10px; background: #141d40; border: 2px solid #3b4c80; color: #fff; font: 16px var(--ui-font); cursor: pointer; }
.wv .vault-gift-tokens button[aria-pressed="true"] { border-color: var(--gold); background: rgba(255, 210, 63, 0.15); }
.wv .vault-gift-tokens strong { font-family: var(--display); font-weight: 400; font-size: 18px; }
.wv .vault-gift-tokens small { color: var(--muted); font-size: 14px; }
.wv .vault-gift-icon { display: block; width: 28px; height: 28px; overflow: hidden; border-radius: 50%; }
.wv .vault-gift-icon img, .wv .vault-gift-icon svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.wv .vault-gift-amounts input { flex: 1 1 110px; }
.wv .vault-gift-note { margin: 2px 0 8px; font-size: 15px; color: var(--muted); }
.wv .vault-gift-note.is-warn { color: #ffc070; }
.wv .vault-gift-emoji { display: grid; width: 100%; height: 100%; place-items: center; background: rgba(255, 210, 63, 0.16); font-size: 17px; }
.wv .vault-gift-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; max-height: 380px; margin: 8px 0; padding: 2px; overflow-y: auto; }
.wv .vault-gift-cards button { display: grid; align-content: start; gap: 4px; padding: 6px; border-radius: 10px; background: #141d40; border: 2px solid #3b4c80; color: #fff; font: 14px var(--ui-font); text-align: left; cursor: pointer; }
.wv .vault-gift-cards button[aria-pressed="true"] { border-color: var(--gold); background: rgba(255, 210, 63, 0.15); }
.wv .vault-gift-cards button:disabled { opacity: 0.5; cursor: not-allowed; }
.wv .vault-gift-cards img, .wv .vault-gift-noimg { display: grid; width: 100%; aspect-ratio: 3 / 4; place-items: center; border-radius: 6px; background: #0a1440; object-fit: contain; font-size: 28px; }
.wv .vault-gift-cards strong { display: -webkit-box; overflow: hidden; line-height: 1.2; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.wv .vault-gift-cards small { color: var(--muted); font-size: 13px; line-height: 1.25; }
@media (max-width: 560px) { .wv .vault-gift-tokens { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wv .vault-me { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.wv .vault-me div { padding: 10px; border-radius: 8px; background: rgba(3, 10, 44, 0.45); border: 1px solid #000; }
.wv .vault-me dt { font-size: 14px; color: var(--muted); }
.wv .vault-me dd { margin: 2px 0 0; font-family: var(--display); font-size: 20px; color: var(--gold); }
.wv .vault-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.wv .vault-msg { margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.06); }
.wv .vault-msg.is-error { color: #ffb0a0; background: rgba(255, 93, 93, 0.1); }
.wv .vault-msg.is-ok { color: #7dffa0; }
.wv .vault-test-banner { padding: 8px 10px; border-radius: 8px; background: rgba(127, 212, 255, 0.12); }

/* ZAZA popup: big chart, level progress and the level ladder. */
.mc-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.modal h2 .h2-coin { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--gold); vertical-align: -6px; margin-right: 8px; box-shadow: 0 2px 0 #000a2e; }
.mc-head .mc-coin { width: 30px; height: 30px; border-radius: 50%; align-self: center; border: 2px solid var(--gold); }
.mc-head b { font-family: var(--display); font-weight: 400; font-size: 34px; color: var(--gold); }
.mc-head i { font-style: normal; font-weight: 700; font-size: 18px; }
.mc-head i.up { color: var(--green); } .mc-head i.down { color: var(--red); }
.mc-head small { font-size: 15px; color: var(--muted); }
.mc-chart { height: 170px; margin: 8px 0 12px; --r: 10px; }
.mc-chart .ax { font-size: 14px; }
/* The high (top left) and the price now (top right, ui.js chartHTML) sit in a strip over the plot, never on the line
   (owner, 2026-10-11: "without overlapping the beams"). */
.mc-chart .mc-plot { top: 28px; }
.mc-chart .ax.hi, .mc-chart .ax.px { line-height: 18px; }
.ax.px { right: 8px; top: 5px; color: var(--gold); font-weight: 700; }
.ax.px.cards { color: #5beaff; }
.ax.px small { font-size: inherit; font-weight: 400; color: var(--muted); }
/* $ZAZA's market cap on the left, $CARDS' on the right (ui.js cardsMcHTML), each number over its words and its chart;
   $CARDS in its logo's cyan (owner, 2026-10-11). */
.mc-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.mc-col { min-width: 0; }
.mc-duo .mc-head { gap: 0 8px; }
.mc-duo .mc-head b { font-size: 30px; }
.mc-duo .mc-head small { flex-basis: 100%; }
.mc-col.cards .mc-coin { border-color: #5beaff; background: #0a1438; padding: 3px 5px; object-fit: contain; }
.mc-col.cards .mc-head b { color: #5beaff; }
.mc-line.cards { filter: drop-shadow(0 0 3px rgba(91, 234, 255, 0.75)); }
.mc-dot.cards { background: #5beaff; box-shadow: 0 0 0 3px rgba(91, 234, 255, 0.3); }
.mc-wait { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 8px; text-align: center; color: var(--muted); font-size: 14px; }
@media (max-width: 560px) {
  .mc-duo { gap: 8px; }
  .mc-duo .mc-head { gap: 0 5px; }
  .mc-duo .mc-head .mc-coin { width: 20px; height: 20px; border-width: 1px; }
  .mc-col.cards .mc-coin { padding: 2px 3px; }
  .mc-duo .mc-head b { font-size: 20px; }
  .mc-duo .mc-head i { font-size: 13px; }
  .mc-duo .mc-head small { font-size: 12px; }
  .mc-duo .mc-chart { height: 110px; margin-top: 4px; }
  .mc-duo .mc-chart .ax { font-size: 11px; }
  .mc-duo .ax.hi { left: 4px; top: 3px; } .mc-duo .ax.lo { left: 4px; bottom: 3px; } .mc-duo .ax.span { right: 8px; bottom: 3px; }
  .mc-duo .mc-chart .mc-plot { top: 20px; }
  .mc-duo .mc-chart .ax.hi, .mc-duo .mc-chart .ax.px { line-height: 15px; }
  .mc-duo .ax.px { right: 4px; top: 3px; }
}
.lv-box { padding: 10px 12px; border-radius: 8px; background: rgba(3, 10, 44, 0.45); margin-bottom: 10px; }
.lv-box .bar { height: 12px; margin-top: 6px; }
.lv-box .zaza-lv-row b { font-size: 18px; } .lv-box .zaza-lv-row small { font-size: 15px; }
.lv-box .zaza-lv-row b { color: var(--lc, var(--gold)); }
.lv-box .bar > span { background: linear-gradient(90deg, var(--lc, #ffb020), var(--lc2, var(--gold))); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); }
/* Level ladder: each tile has its level's colour (--lc). Reached = bright with a tick, current = glowing gold with
   its own progress bar, not reached yet = faded with a padlock. */
.lv-ladder { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px 6px; }
.lv-ladder li {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 11px 4px 9px; border-radius: 10px; text-align: center;
  background: linear-gradient(180deg, rgba(40, 60, 170, 0.45), rgba(3, 10, 44, 0.7));
  background: linear-gradient(180deg, color-mix(in srgb, var(--lc, #ffd23f) 16%, #0c1650), #070d33);
  border: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 0 #000a2e;
  transition: opacity 0.2s, transform 0.15s;
}
.lv-ladder li:not(.evo)::before { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--lc); box-shadow: 0 0 8px var(--lc); }
.lv-ladder li:not(.evo) b { color: var(--lc); text-shadow: 0 2px 0 #000a2e; }
.lv-ladder li.locked:not(.evo) { opacity: 0.55; filter: saturate(0.45); }
.lv-ladder li:not(.evo) b { white-space: nowrap; }
.lv-ladder li.locked:not(.evo)::before { box-shadow: none; }
.lv-ladder li.now:not(.evo) {
  border-color: var(--gold); background: linear-gradient(180deg, rgba(255, 210, 63, 0.32), rgba(255, 210, 63, 0.07) 70%, rgba(7, 13, 51, 0.9));
  box-shadow: 0 0 0 2px var(--gold), 0 0 16px rgba(255, 210, 63, 0.45), 0 2px 0 #000a2e; animation: lv-glow 2.4s ease-in-out infinite;
}
@keyframes lv-glow { 50% { box-shadow: 0 0 0 2px var(--gold), 0 0 26px rgba(255, 210, 63, 0.7), 0 2px 0 #000a2e; } }
.lv-tag { position: absolute; right: -5px; top: -6px; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; border: 1px solid #000; font-style: normal; font-size: 10px; font-weight: 800; line-height: 1; box-shadow: 0 2px 0 #000a2e; }
.lv-tag.ok { background: var(--green); color: #062b10; }
.lv-tag.lock { background: #1a2466; color: #c9d0f0; }
.lv-now { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); padding: 2px 7px; border-radius: 6px; font-style: normal; font-family: var(--display); font-size: 11px; line-height: 1.1; letter-spacing: 0.06em; color: #2a1a00; background: linear-gradient(180deg, #fff3a0, var(--gold)); border: 1px solid #000; box-shadow: 0 2px 0 #000a2e; white-space: nowrap; }
.lv-mini { display: block; width: 82%; height: 5px; margin-top: 5px; border-radius: 3px; background: rgba(3, 10, 44, 0.85); border: 1px solid #000; overflow: hidden; }
.lv-mini > span { display: block; height: 100%; background: linear-gradient(90deg, #ffb020, var(--gold), #fff3a0); }
/* Level 11: the evolution, a "Who's that Pokémon?" showpiece with a rotating rainbow border. */
@property --evo-ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.lv-ladder li.evo {
  grid-column: 1 / -1; position: relative; overflow: hidden; display: grid; grid-template-columns: 88px 1fr; align-items: center; gap: 14px;
  padding: 14px 16px; text-align: left; border: 3px solid transparent; border-radius: 12px;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(255, 210, 63, 0.25), transparent 60%) padding-box,
    linear-gradient(135deg, #1a0f4a, #0d2285 55%, #3a0f5a) padding-box,
    conic-gradient(from var(--evo-ang), #ff6ad0, #ffe36a, #6affc8, #6ab4ff, #c06aff, #ff6ad0) border-box;
  box-shadow: 0 0 22px rgba(255, 210, 63, 0.45), 0 0 44px rgba(192, 106, 255, 0.25);
  animation: evo-spin 4s linear infinite;
}
@keyframes evo-spin { to { --evo-ang: 360deg; } }
.evo-sil { position: relative; width: 88px; height: 88px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, rgba(255, 246, 200, 0.9), rgba(255, 210, 63, 0.35) 45%, transparent 70%); animation: evo-pulse 2.4s ease-in-out infinite; }
.evo-sil img { width: 80px; height: auto; image-rendering: pixelated; filter: brightness(0) drop-shadow(0 0 2px #fff) drop-shadow(0 0 8px #ffd23f); }
.evo-sil.evo-done img { filter: drop-shadow(0 0 6px #ffd23f); } /* evolved (evolution-art.js mascotStill): ZAZA himself, no silhouette */
.evo-sil em { position: absolute; font-style: normal; font-family: var(--display); font-size: 40px; color: #fff; text-shadow: 0 3px 0 #8a6410, 0 0 14px #ffd23f; animation: bob 2s ease-in-out infinite; }
@keyframes evo-pulse { 50% { transform: scale(1.06); filter: brightness(1.2); } }
.evo-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lv-ladder li.evo .evo-body b { font-family: var(--display); font-weight: 400; font-size: 24px; line-height: 1.05; background: linear-gradient(90deg, #fff6c8, #ffd23f, #ff9fd0, #7fd4ff, #ffd23f); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: evo-text 3s linear infinite; text-shadow: none; }
@keyframes evo-text { to { background-position: 200% 0; } }
.lv-ladder li.evo .evo-body > span { font-size: 17px; color: #fff; font-weight: 700; }
.lv-ladder li.evo .evo-body small { font-size: 14px; color: #dfe6ff; }
.evo-bar { display: block; height: 8px; margin-top: 4px; border-radius: 4px; background: rgba(3, 10, 44, 0.8); border: 1px solid #000; overflow: hidden; }
.evo-bar span { display: block; height: 100%; background: linear-gradient(90deg, #ff6ad0, #ffe36a, #6affc8, #6ab4ff); }
.evo-spark { position: absolute; width: 10px; height: 10px; pointer-events: none; background: radial-gradient(circle, #fff 0 20%, transparent 22%), linear-gradient(#fff, #fff) center / 2px 100% no-repeat, linear-gradient(#fff, #fff) center / 100% 2px no-repeat; opacity: 0; animation: evo-twinkle 2.2s ease-in-out infinite; }
.evo-spark.s1 { left: 18%; top: 12%; } .evo-spark.s2 { left: 62%; top: 18%; animation-delay: 0.6s; }
.evo-spark.s3 { left: 84%; top: 62%; animation-delay: 1.2s; } .evo-spark.s4 { left: 8%; top: 74%; animation-delay: 1.7s; }
@keyframes evo-twinkle { 0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); } 50% { opacity: 1; transform: scale(1.1) rotate(45deg); } }
/* ZAZA popup title: portrait, text and LIVE tag on one centred line (the portrait as on the HUD card). */
.modal h2.zaza-title { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding-right: 36px; }
.modal h2.zaza-title .h2-zaza { margin-right: 0; vertical-align: 0; flex: none; }
.modal h2.zaza-title .live-tag { margin-left: 0; vertical-align: 0; }
.modal h2 .h2-zaza { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-right: 8px; vertical-align: -10px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 40% 35%, #3a66ff, var(--navy-900)); border: 2px solid var(--gold); box-shadow: 0 2px 0 #000a2e; }
.modal h2 .h2-zaza img { width: 46px; height: auto; margin-top: 4px; image-rendering: pixelated; }

.lv-ladder b { font-family: var(--display); font-weight: 400; font-size: 15px; color: var(--gold); }
.lv-ladder span { font-size: 15px; color: #fff; }
.lv-ladder small { font-size: 13px; color: var(--muted); }

/* Holder tiers: seven ranks, each with its own badge. */
.tier-ico { width: 1em; height: 1em; vertical-align: -0.14em; flex: none; }
.tier-chip {
  display: inline-flex; align-items: center; gap: 3px; font-family: var(--ui-font); font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  padding: 1px 6px 1px 4px; border-radius: 4px; color: var(--tc); background: rgba(3, 10, 44, 0.75); border: 1px solid var(--tc); white-space: nowrap; vertical-align: 3px;
}
.modal h2 .tier-chip { font-size: 14px; vertical-align: 5px; margin-left: 6px; }
/* Buy panel: SOL -> $ZAZA / $CARDS through Jupiter, approved in the player's wallet. */
.modal h2.buy-title { display: flex; align-items: center; gap: 10px; padding-right: 36px; }
.buy-title img { width: 34px; height: 34px; border-radius: 50%; object-fit: contain; background: var(--navy-900); border: 2px solid var(--gold); padding: 2px; }
.buy-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 0 8px; }
.buy-tabs button { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px; border-radius: 6px; font-size: 17px; font-weight: 700; color: var(--muted); background: rgba(8, 12, 32, 0.45); border: 2px solid #1d2f8a; }
.buy-tabs button img { width: 20px; height: 20px; border-radius: 50%; object-fit: contain; }
.buy-tabs button.on { color: var(--navy-900); background: linear-gradient(180deg, #ffe066, var(--gold-2)); border-color: #3a2a00; }
.buy-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 10px; }
.buy-chips button { padding: 3px 10px; border-radius: 6px; font-size: 15px; font-weight: 700; color: var(--text); background: #0d1638; border: 1px solid #3b4c80; }
.buy-chips button:hover { border-color: var(--gold); color: var(--gold); }
.buy-chips small { margin-left: auto; font-size: 14px; color: var(--muted); }
.buy-quote { padding: 10px 12px; border-radius: 8px; font-size: 17px; background: rgba(3, 10, 44, 0.55); border: 1px solid #1d2f8a; }
.buy-quote b { color: var(--gold); font-size: 19px; }
.buy-quote span { color: #dfe6ff; }
.buy-quote small { display: block; margin-top: 3px; font-size: 14px; color: var(--muted); }
.buy-quote.warn small { color: #ffb35c; }
.buy-msg { margin-top: 8px; padding: 8px 12px; border-radius: 8px; font-size: 16px; background: rgba(95, 140, 255, 0.12); border: 1px solid rgba(95, 140, 255, 0.45); }
.buy-msg.ok { background: rgba(95, 232, 111, 0.12); border-color: rgba(95, 232, 111, 0.5); color: #7dffa0; }
.buy-msg.err { background: rgba(255, 90, 90, 0.12); border-color: rgba(255, 90, 90, 0.5); color: #ffb0b0; }
.buy-msg a { color: var(--cyan); }
.chat-log .holder-name .tier-ico { margin-left: 4px; }
.tier-next { font-size: 17px !important; margin: 0 0 8px; }
.tier-next b { color: var(--gold); }
.tier-ladder { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.tier-ladder li { display: flex; flex-direction: column; align-items: center; padding: 6px 2px; border-radius: 6px; background: rgba(3, 10, 44, 0.45); }
.tier-ladder li .tier-ico { width: 22px; height: 22px; margin-bottom: 2px; }
.tier-ladder li b { color: var(--tc); font-size: 13px; }
.tier-ladder li small { color: var(--muted); font-size: 12px; }
.tier-ladder li.now { box-shadow: inset 0 0 0 2px var(--tc); background: rgba(255, 255, 255, 0.06); }
.board .vault-mark { color: var(--cyan); font-size: 14px; margin-left: 6px; }
.board .board-row.you { box-shadow: inset 0 0 0 2px var(--gold); }
.holder-top { margin: 4px 36px 4px 0; }
.holder-top .pc-av { width: clamp(56px, 16vw, 72px); height: clamp(56px, 16vw, 72px); }
.holder-top .pc-id b { max-width: 100%; font-size: clamp(18px, 5.2vw, 26px); }
.holder-top .pc-id small { font-size: 15px; }
.flex-total {
  text-align: center; padding: 14px 12px 12px; margin: 10px 0 12px; border-radius: 10px; border: 2px solid var(--gold);
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 210, 63, 0.28), transparent 70%), linear-gradient(180deg, #0d2285, var(--navy-900));
  box-shadow: 0 4px 0 var(--gold-dark), 0 10px 26px rgba(0, 0, 0, 0.35);
}
.flex-total small { display: block; font-size: 15px; font-weight: 700; color: var(--cyan); letter-spacing: 0.08em; text-transform: uppercase; }
.flex-total b { display: block; font-family: var(--display); font-weight: 400; font-size: 48px; line-height: 1.1; margin: 4px 0 2px; color: var(--gold); text-shadow: 0 3px 0 #8a6410, 0 6px 0 #000a2e; }
.flex-total span { font-size: 18px; color: #fff; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.actions .btn, .actions a.btn { text-decoration: none; display: inline-block; }
.worldmap { width: 100%; height: 100%; image-rendering: pixelated; cursor: crosshair; display: block; }
.worldmap.smooth { image-rendering: auto; } /* drawn smaller than it's painted: smoothed, no flickering rows (map-zoom.js) */
/* The map in its window (map-zoom.js): zoomed in, part of it shows and a drag moves it; + and − in its corner, like the
   World's own (#zoom2d). */
.map-view { position: relative; }
.map-wrap { position: relative; overflow: hidden; border: 2px solid #000; border-radius: 6px; background: rgba(3, 10, 44, 0.55); touch-action: none; overscroll-behavior: contain; }
.map-wrap.dragging, .map-wrap.dragging .worldmap { cursor: grabbing; }
.map-inner { position: relative; margin: 0 auto; }
.map-zoom { position: absolute; z-index: 3; top: 8px; right: 8px; display: grid; gap: 6px; }
.map-zoom button { display: grid; place-items: center; width: 36px; height: 34px; padding: 0 0 2px; border: 2px solid var(--edge-dark); border-radius: 17px; background: linear-gradient(180deg, #2a3668, #151d42); box-shadow: inset 0 0 0 1px var(--edge-light), 0 3px 8px rgba(0, 0, 0, 0.4); color: #fff; font: 400 22px/1 var(--display); cursor: pointer; }
.map-zoom button:hover:not(:disabled) { background: linear-gradient(180deg, #34428a, #1b2552); }
.map-zoom button:disabled { opacity: 0.45; cursor: default; }
/* What shows at each zoom (map-zoom.js lodFor): the areas' names always, the places' from one step in, each building's
   closest. A name wearing a 🎴 badge always shows. */
.map-inner[data-lod="0"] :is(.lod1, .lod2):not(:has(.map-left)), .map-inner[data-lod="1"] .lod2 { display: none; }
.map-label.map-bld { font-size: 13px; }
/* World map: the card tracker above it, and "N left" badges under the area names */
.map-cards { display: grid; gap: 6px; margin: 2px 0 10px; }
.mc-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; font-size: 16px; color: var(--muted); }
.mc-row b { color: var(--gold); font-size: 19px; }
.mc-row .mc-found { color: #fff; }
.mc-you .bar > span { background: linear-gradient(90deg, #2a9ee0, #5fd0ff, #c8f0ff); }
.mc-you b { color: #9fe0ff; }
.map-cards small { color: var(--muted); font-size: 15px; line-height: 1.35; }
.map-cards small b { color: var(--gold); }
.map-left { display: block; width: max-content; margin: 2px auto 0; padding: 0 6px; border-radius: 6px; background: rgba(6, 12, 40, 0.85); border: 1px solid var(--gold); font-family: var(--ui-font); font-size: 13px; font-style: normal; color: var(--gold); text-shadow: none; }
.map-label { position: absolute; transform: translate(-50%, -50%); font-family: var(--display); font-size: 16px; color: #fff; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; pointer-events: none; white-space: nowrap; }
.map-label.map-area { color: #b4e2ff; } /* the wide areas (town, woods, lake, wilds, lands): pale blue beside the buildings' white */
.map-landmark { position: absolute; z-index: 2; translate: -50% -50%; font-size: 20px; line-height: 1; filter: drop-shadow(1px 1px 0 #000) drop-shadow(-1px -1px 0 #000); pointer-events: none; }
/* a land the team previews before it opens: "preview · Level 4" under its name (lands-ui.js landMapLabels) */
.map-note { display: block; text-align: center; font-family: var(--ui-font); font-size: 13px; font-weight: 700; font-style: normal; color: var(--gold); }
/* Picked from the "N online" list or 👁 Watch's 🗺: their profile view, one window (ui.js mapPanel). Across the top their
   picture, name and chip with where they are now in a pill; down the left their card's level, squad, gear, tags and
   buttons; on the right the map with a pin that follows them. On a narrow screen the map comes under their name and the
   rest under the map. */
.pv { display: grid; grid-template-columns: 280px minmax(0, 1fr); grid-template-areas: "head head" "side map"; gap: 14px 18px; align-items: start; }
.pv-head { grid-area: head; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; min-width: 0; padding: 0 40px 14px 0; border-bottom: 1px solid rgba(169, 179, 214, 0.2); }
.pv-head .pc-top { gap: 12px; min-width: 0; }
.pv-head .pc-av { width: 64px; height: 64px; }
.pv-head .pc-id b { max-width: min(440px, 62vw); font-size: 26px; }
.pv-head .pc-id small { font-size: 14px; }
.pv .map-where { margin: 0 0 0 auto; padding: 5px 14px; border-radius: 999px; border: 2px solid rgba(255, 210, 63, 0.55); background: rgba(3, 10, 44, 0.6); color: #fff; font-size: 17px; font-weight: 700; line-height: 1.2; }
.pv-side { grid-area: side; min-width: 0; }
.pv-side > :first-child { margin-top: 0; }
.pv-side .pc-fight { gap: 8px; padding: 10px 12px; }
.pv-side .pc-gear { grid-template-columns: minmax(0, 1fr); } /* one a row: their whole names */
.pv-side .pc-lvl b { font-size: 18px; }
.pv-side :is(.pc-lvl, .pc-item, .pc-squad) small { font-size: 13px; }
.pv-side :is(.pc-item, .pc-squad) b { font-size: 15px; }
.pv-side .pc-tags { margin-top: 10px; }
.pv-side .pc-tags span { font-size: 14px; }
.pv-side .pc-actions { margin-top: 12px; }
.pv-side .pc-actions .btn { padding: 6px 10px; font-size: 16px; }
.pv .pc-note { font-size: 15px; line-height: 1.3; }
.pv-map { grid-area: map; min-width: 0; }
.pv .pv-tip { margin: 6px 0 0; color: var(--muted); font-size: 14px; line-height: 1.3; }
@media (max-width: 760px) {
  .pv { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "map" "side"; gap: 10px; }
  .pv-head { padding: 0 34px 10px 0; gap: 8px; }
  .pv-head .pc-av { width: 52px; height: 52px; }
  .pv-head .pc-id b { font-size: 21px; }
  .pv .map-where { margin: 0; font-size: 14px; padding: 3px 11px; }
  .pv-side .pc-gear { grid-template-columns: 1fr 1fr; }
}
.map-pin { position: absolute; width: 0; height: 0; pointer-events: none; z-index: 2; }
.map-pin[hidden] { display: none; }
.map-pin i { position: absolute; left: -12px; top: -12px; width: 24px; height: 24px; border-radius: 50%; border: 3px solid var(--tc); box-sizing: border-box; box-shadow: 0 0 0 1.5px #000, inset 0 0 0 1.5px #000; }
.map-pin i::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 3px solid var(--tc); animation: map-ping 1.3s ease-out infinite; }
.map-pin b { position: absolute; left: 0; bottom: 15px; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; height: 22px; padding: 0 8px; border-radius: 6px; background: rgba(6, 12, 40, 0.92); border: 1.5px solid var(--tc); font-family: var(--display); font-weight: 400; font-size: 15px; line-height: 1; color: #fff; white-space: nowrap; }
.map-pin.pin-beside b { left: 16px; top: 0; bottom: auto; transform: translateY(-50%); } /* near the map's top edge its tag sits beside the dot (open-world/sea-map.js) */
@keyframes map-ping { from { transform: scale(1); opacity: 0.9; } to { transform: scale(2.1); opacity: 0; } }

/* Quest complete: the classic scroll. */
.scroll { background: linear-gradient(180deg, #f4ead0, #e2d0a0); color: #2a1e10; border: 3px solid #6a4a22; border-radius: 10px; padding: 20px; text-align: center; box-shadow: inset 0 0 0 2px #fff6dc; }
.scroll h2 { color: #8a1a10; }
.scroll .qname { font-family: var(--display); font-size: 20px; color: #1d3ab8; margin: 4px 0 10px; }
.scroll ul { list-style: none; padding: 0; margin: 10px 0; font-weight: 700; font-size: 19px; }
.scroll li { padding: 2px 0; }
.scroll .qp-big { display: inline-grid; place-items: center; width: 64px; height: 64px; }
.scroll .qp-big img { width: 56px; height: 56px; image-rendering: pixelated; }
/* Pip's quest: the Daily tasks come next (ui.js questScroll) */
.scroll .qs-next { display: flex; align-items: center; gap: 10px; max-width: 420px; margin: 12px auto 0; padding: 10px 12px; text-align: left; background: #fff6dc; border: 2px solid #6a4a22; border-radius: 8px; }
.scroll .qs-next img { flex: none; width: 32px; height: 32px; image-rendering: pixelated; }
.scroll .qs-next p { margin: 0; font-size: 15px; line-height: 1.35; }
.scroll .qs-next p > b:first-child { display: block; margin-bottom: 2px; font-family: var(--display); font-weight: 400; font-size: 17px; color: #1d3ab8; }

/* Card reveal: flash, then flip. */
.flash { position: fixed; inset: 0; z-index: 40; background: #fff; animation: flash 0.9s ease-out forwards; pointer-events: none; }
@keyframes flash { 0% { opacity: 0; } 10% { opacity: 1; } 22% { opacity: 0.1; } 34% { opacity: 1; } 100% { opacity: 0; } }
.reveal { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; justify-content: center; }
.flip { width: 190px; height: 265px; perspective: 800px; flex: none; }
.flip-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: flipit 1s 0.4s cubic-bezier(0.3, 0.8, 0.3, 1) forwards; }
.flip-inner > * { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 10px; overflow: hidden; }
.flip-inner img { width: 100%; height: 100%; image-rendering: pixelated; }
.card-front { transform: rotateY(180deg); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); }
.card-front img { image-rendering: auto; }
.card-front .sample { font-family: var(--display); font-size: 16px; background: #b8302a; color: #fff; padding: 3px 8px; border-radius: 4px; transform: rotate(-6deg); }
.card-front .num { font-family: var(--display); font-size: 44px; color: var(--navy-900); margin: 10px 0 4px; }
.card-front .rar { font-weight: 700; font-size: 17px; }
.card-front small { font-size: 14px; margin-top: 8px; }
@keyframes flipit { to { transform: rotateY(180deg); } }
.reveal-copy { flex: 1; min-width: 220px; }
.find-steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; font-size: 17px; line-height: 1.3; }
.find-steps b { color: var(--gold); }
.tut-row { display: flex; flex-wrap: wrap; gap: 8px; }
.cards-preview { width: 100%; margin-top: 10px; font-size: 16px; }

/* ---------------------------------------------------------------- tutorial (opens on every visit) */
/* Owner, 2026-10-14: "improve the overall style of the tutorial": the kicker in a cyan pill, the heading with a chunky drop,
   the tiles as framed cards, the page dots as a bar, Pip's line as a speech bubble. */
.tut { text-align: center; }
.tut-kicker { width: fit-content; margin: 0 auto 6px !important; padding: 4px 12px 3px; border-radius: 999px; border: 1.5px solid rgba(127, 212, 255, 0.45); background: rgba(127, 212, 255, 0.08); font-size: 13px !important; font-weight: 700; line-height: 1.1; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan); }
.tut h2 { font-size: 28px; margin-bottom: 8px; text-shadow: 0 3px 0 #0a1233, 0 0 18px rgba(255, 210, 63, 0.25); }
.tut > p { max-width: 560px; margin: 8px auto; }
.tut-list { list-style: none; margin: 12px auto 0; padding: 0; max-width: 560px; text-align: left; display: flex; flex-direction: column; gap: 6px; }
.tut-list li { display: flex; gap: 10px; align-items: flex-start; padding: 7px 10px; border-radius: 8px; background: rgba(3, 10, 44, 0.5); font-size: 18px; line-height: 1.3; }
.tut-list i { font-style: normal; flex: none; width: 26px; text-align: center; }
.tut-list b { color: var(--gold); font-weight: 700; }
.tut-callout { display: flex; gap: 12px; align-items: center; max-width: 560px; margin: 12px auto 0; padding: 10px 12px; border-radius: 10px; text-align: left; font-size: 18px; line-height: 1.3; background: rgba(255, 210, 63, 0.12); border: 2px solid var(--gold); }
.tut-callout img { border-radius: 50%; flex: none; }
.tut-callout b { color: var(--gold); }
.tut-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; }
.tut-dots { display: flex; gap: 6px; }
.tut-dots i { width: 10px; height: 10px; border-radius: 999px; background: #3b4c80; transition: width 0.2s; }
.tut-dots i.on { width: 28px; background: var(--gold); }
.tut-btns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.tut-btns .tut-never { background: transparent; box-shadow: none; opacity: 0.85; }
.tut-btns .tut-never:hover { opacity: 1; }
/* The tutorial's picture tiles (owner, 2026-10-05: short, simple, a picture for every step). Captions sit under the
   pictures, never on them. */
.tut-tiles { list-style: none; margin: 10px auto 0; padding: 0; max-width: 600px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tut-tiles-4 { max-width: none; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tut-tiles-5 { max-width: none; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tut-tiles li { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 6px 9px; border-radius: 12px; background: linear-gradient(180deg, #1a2866, #0c1648); border: 1.5px solid rgba(122, 150, 255, 0.28); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 3px 0 rgba(0, 0, 0, 0.28); }
.tut-tiles li.done { opacity: 0.55; }
.tut-tiles li > b { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 3px; color: var(--gold); font-size: 19px; line-height: 1; }
.tut-tiles li > b > i { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--gold); color: var(--navy-900); font-style: normal; font-size: 15px; line-height: 1; }
.tut-tiles li.done > b > i { background: var(--green); }
.tut-tiles li > small { font-size: 15px; line-height: 1.15; color: var(--muted); }
.tut-pic { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 3 / 2; box-sizing: border-box; border-radius: 8px; border: 2px solid #070d2e; overflow: hidden; background: radial-gradient(circle at 50% 60%, #22357c, #0b1a52); }
.tut-pic img { display: block; height: 76%; width: auto; max-width: 86%; object-fit: contain; image-rendering: pixelated; }
.tut-pic img[width="420"] { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.tut-pic img[data-tut="me"], .tut-pic img[data-tut="ivy"] { height: 70%; }
.tut-pic img[data-tut="map"], .tut-pic img[data-tut="attack"] { height: 60%; }
.tut-pic-grass { background: linear-gradient(transparent 62%, rgba(0, 0, 0, 0.16) 62%), #5c9e3f; }
.tut-pic-town { background: linear-gradient(transparent 62%, rgba(0, 0, 0, 0.12) 62%), #c9c0a8; }
.tut-pic-card { background: radial-gradient(circle at 50% 50%, #5a3a9e, #1b1046); }
.tut-pic-radio { background: radial-gradient(circle at 50% 55%, #8a5cff, #2a1660 58%, #120b33); } /* Pip's radio step: the 📻 button's own icon */
.tut-pic-radio img { height: 64%; }
.tut-pic-card img { height: 84%; image-rendering: auto; border-radius: 4px; transform: rotate(-6deg); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); }
.tut-bubble { position: relative; padding: 8px 14px; border-radius: 12px; background: #fff; color: var(--navy-900); font-size: 22px; line-height: 1; }
.tut-bubble::after { content: ""; position: absolute; left: 18px; bottom: -8px; border: 8px solid transparent; border-top-color: #fff; border-bottom: 0; }
/* The Run tile: the run button as it sits by the minimap (.orb-run), big; the options tile: the "Choose Option" menu (.ctx). */
.tut-orb { display: flex; align-items: center; gap: 6px; height: 46px; padding: 0 4px 0 12px; border-radius: 23px; background: linear-gradient(180deg, #2a3668, #151d42); border: 2px solid var(--edge-dark); box-shadow: inset 0 0 0 1px var(--edge-light), 0 3px 8px rgba(0, 0, 0, 0.4); }
.tut-orb b { font-size: 21px; color: var(--green); text-shadow: 1px 1px 0 #000; }
.tut-orb span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid #000; background: radial-gradient(circle at 40% 35%, #4a5c98, #10183a); }
.tut-pic .tut-orb img { width: 24px; height: 24px; max-width: none; }
.tut-menu { display: flex; flex-direction: column; min-width: 62%; padding-bottom: 2px; border: 1px solid #000; border-radius: 2px; background: #5d5447; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45); text-align: left; font-size: 13px; font-weight: 600; line-height: 1.3; }
.tut-menu i { padding: 0 5px; background: #000; color: #5d5447; font-style: normal; font-weight: 700; }
.tut-menu span { padding: 0 6px; color: #fff; white-space: nowrap; text-shadow: 1px 1px 0 #000; }
.tut-menu span:nth-child(2) { color: var(--rs-yellow); background: rgba(0, 0, 0, 0.18); }
.tut-menu em { font-style: normal; color: var(--rs-yellow); }
/* Running, taught on the way (rpg/ui-quests.js runTip): the run button glows until you've run once. A soft, blurred gold
   halo round the button, never a solid ring (owner, 2026-11-08, of the thick gold ring: "make this a highlight with blurred
   golden color, not a thick color.. so its still noticable but more gentle"). */
.orb-run.run-hint { animation: runHint 1s ease-in-out 6; }
@keyframes runHint { 50% { box-shadow: inset 0 0 0 1px rgba(255, 224, 130, 0.7), 0 0 16px 6px rgba(255, 210, 63, 0.75), 0 3px 8px rgba(0, 0, 0, 0.4); } }
@media (prefers-reduced-motion: reduce) { .orb-run.run-hint { animation: none; box-shadow: inset 0 0 0 1px rgba(255, 224, 130, 0.7), 0 0 14px 5px rgba(255, 210, 63, 0.65), 0 3px 8px rgba(0, 0, 0, 0.4); } }
/* …and a new hero's breathes, the same halo, whenever they could run and aren't (ui.js runFlash), as the tutorial's Run
   picture does. After .run-hint, so it wins while both are on. */
.orb-run.run-flash, .tut-orb.run-flash { animation: runFlash 1.6s ease-in-out infinite; }
.orb-run.run-flash .orb-icon, .tut-orb.run-flash > span { animation: runFlashIcon 1.6s ease-in-out infinite; }
@keyframes runFlash {
  0%, 100% { box-shadow: inset 0 0 0 1px var(--edge-light), 0 0 8px 2px rgba(255, 210, 63, 0.3), 0 3px 8px rgba(0, 0, 0, 0.4); }
  50% { box-shadow: inset 0 0 0 1px rgba(255, 224, 130, 0.7), 0 0 16px 6px rgba(255, 210, 63, 0.75), 0 3px 8px rgba(0, 0, 0, 0.4); }
}
@keyframes runFlashIcon { 50% { filter: brightness(1.3) saturate(1.15); } }
@media (prefers-reduced-motion: reduce) {
  .orb-run.run-flash, .tut-orb.run-flash { animation: none; box-shadow: inset 0 0 0 1px rgba(255, 224, 130, 0.7), 0 0 14px 5px rgba(255, 210, 63, 0.65), 0 3px 8px rgba(0, 0, 0, 0.4); }
  .orb-run.run-flash .orb-icon, .tut-orb.run-flash > span { animation: none; }
}
/* Pip's quarry step: the rock's Mine ×3 on the picture, as its options menu shows it (ui.js QUEST_TILES). */
.tut-pic-x3 { position: relative; }
.tut-x3 { position: absolute; right: 6px; bottom: 6px; padding: 1px 7px; border: 1px solid #000; border-radius: 2px; background: #5d5447; color: var(--rs-yellow); font-size: 14px; font-weight: 700; line-height: 1.35; text-shadow: 1px 1px 0 #000; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); white-space: nowrap; }
.tut-rule { max-width: 600px; margin: 10px auto 0 !important; font-size: 16px; line-height: 1.25; color: var(--muted); }
.tut-rule b { color: var(--gold); }
.tut-pip { display: flex; align-items: center; gap: 12px; max-width: 600px; margin: 4px auto 0; text-align: left; }
.tut-pip img { flex: none; width: 60px; height: 66px; image-rendering: pixelated; border-radius: 8px; background: #22357c; }
.tut-pip p { position: relative; margin: 0; padding: 8px 12px; border-radius: 10px; background: #26346f; border: 1.5px solid rgba(122, 150, 255, 0.35); font-size: 18px; line-height: 1.25; }
.tut-pip p::before { content: ""; position: absolute; left: -9px; top: 50%; margin-top: -8px; border: 8px solid transparent; border-left: 0; border-right-color: #26346f; filter: drop-shadow(-1.5px 0 0 rgba(122, 150, 255, 0.35)); }
.tut-pip p b { color: var(--gold); }
/* ➜ Go on the first-quest page (ui.js showTutorial; owner, 2026-10-14: "showcase better the go button"): the quest tracker
   as it sits under the minimap (.quest-track) with a bigger ➜ Go, a hand tapping it and a ring at each tap, a line beside. */
.tut-go { display: flex; align-items: center; justify-content: center; gap: 16px; max-width: 600px; margin: 12px auto 0; padding: 10px 14px 14px; border-radius: 12px; background: rgba(3, 10, 44, 0.45); border: 1.5px dashed rgba(255, 210, 63, 0.5); text-align: left; }
.tut-go p { margin: 0; font-size: 16px; line-height: 1.25; color: #dfe6ff; }
.tut-go p b { display: block; margin-bottom: 2px; font-family: var(--display); font-weight: 400; font-size: 21px; line-height: 1.1; color: var(--gold); }
.tut-qt { position: relative; flex: none; display: flex; align-items: stretch; width: 240px; border-radius: 12px; background: linear-gradient(180deg, rgba(26, 38, 99, 0.97), rgba(9, 14, 52, 0.97)); border: 1.5px solid rgba(232, 181, 42, 0.85); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 240, 200, 0.12); }
.tut-qt-main { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; padding: 5px 6px; }
.tut-qt-main img { flex: none; width: 24px; height: 24px; image-rendering: pixelated; }
.tut-qt-main > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tut-qt-main small { font: 400 11px/1 var(--display); letter-spacing: 0.02em; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tut-qt-main small b { color: #fff; font-weight: 400; }
.tut-qt-main em { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-style: normal; font-size: 14px; line-height: 1.1; color: #fff; }
.tut-qt-go { position: relative; flex: none; display: flex; align-items: center; gap: 4px; padding: 0 12px; border-radius: 0 10px 10px 0; background: linear-gradient(180deg, #ffe066, var(--gold-2)); color: var(--navy-900); font: 20px/1 var(--display); border-left: 1px solid #3a2a00; }
.tut-qt-go i { font-style: normal; font-size: 0.9em; }
.tut-qt-go::after { content: ""; position: absolute; inset: 0; border-radius: 0 10px 10px 0; animation: tutRing 1.6s ease-out infinite; pointer-events: none; }
.tut-tap { position: absolute; right: 14px; top: 64%; width: 32px; height: 32px; image-rendering: pixelated; filter: drop-shadow(1px 2px 0 rgba(0, 0, 0, 0.5)); animation: tutTap 1.6s ease-in-out infinite; pointer-events: none; }
@keyframes tutTap { 0%, 100% { transform: translate(7px, 8px); } 38%, 52% { transform: translate(0, 0) scale(0.92); } }
@keyframes tutRing { 0%, 40% { box-shadow: 0 0 0 0 rgba(255, 222, 90, 0.85); } 100% { box-shadow: 0 0 0 12px rgba(255, 222, 90, 0); } }
@media (prefers-reduced-motion: reduce) { .tut-tap, .tut-qt-go::after { animation: none; } .tut-qt-go::after { box-shadow: 0 0 0 3px rgba(255, 222, 90, 0.7); } }
/* Phones: the tracker on top (room under it for the hand), the line under it; Pip's steps as wider pictures with
   their titles only (➜ Go knows where each one is), so the page still fits a 390x844 screen with the faucet's card. */
@media (max-width: 520px) {
  .tut-go { flex-direction: column; gap: 14px; padding: 8px 10px 9px; text-align: center; }
  .tut-go p { font-size: 14px; }
  .tut-go p b { display: inline; font-size: 17px; }
  .tut-qt { width: 232px; }
  .tut-quest .tut-pic { aspect-ratio: 2 / 1; }
  .tut-quest li > small { display: none; }
  .tut-pip img { width: 48px; height: 53px; }
  .tut-pip p { font-size: 15px; padding: 6px 10px; }
}
/* Upright phones: two pictures a row (layout.js UPRIGHT). */
@media (max-width: 560px), (max-width: 760px) and (min-height: 501px) { .tut-tiles-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* …and Pip's five, three a row, the last two in the middle. */
@media (max-width: 560px), (max-width: 760px) and (min-height: 501px) { .tut-tiles-5 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .tut-tiles-5 > li { grid-column: span 2; } .tut-tiles-5 > li:nth-child(4) { grid-column: 2 / span 2; } }
/* Upright phones, How to play: turn sideways (ui.js turnNote). A phone turns from upright to sideways, then the D-pad (the
   real one's thin white ring and knob, .dpad) comes up in its bottom-left corner and nudges the hero on. Sideways, the Walk
   tile shows the pad itself (.tut-dpad). */
.tut-turn { display: flex; align-items: center; gap: 12px; max-width: 560px; margin: 8px auto 0; padding: 4px 12px 4px 6px; border-radius: 10px; background: rgba(3, 10, 44, 0.5); text-align: left; }
.tut-turn p { margin: 0; font-size: 15px; line-height: 1.25; color: var(--muted); }
.tut-turn p b { display: block; color: var(--gold); font-size: 17px; }
.tut-phone { display: grid; place-items: center; flex: none; width: 84px; height: 84px; }
.tut-phone > span {
  position: relative; width: 80px; height: 44px; box-sizing: border-box; overflow: hidden; border: 4px solid #0b1024; border-radius: 9px;
  background: linear-gradient(transparent 64%, rgba(0, 0, 0, 0.16) 64%), #5c9e3f; box-shadow: 0 0 0 1px #4a5c98, 0 4px 10px rgba(0, 0, 0, 0.45);
  animation: tutTurn 4.5s ease-in-out infinite;
}
.tut-phone img { position: absolute; left: 50%; top: 3px; width: 13px; height: 26px; margin-left: -6px; image-rendering: pixelated; animation: tutStep 4.5s ease-in-out infinite; }
.tut-pad { position: absolute; left: 3px; bottom: 3px; width: 17px; height: 17px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.85); background: rgba(8, 12, 32, 0.15); animation: tutPad 4.5s ease-in-out infinite; }
.tut-pad.right { left: auto; right: 3px; } /* Settings → D-pad side: Right */
.tut-pad i { position: absolute; inset: 0; margin: auto; width: 46%; height: 46%; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); animation: tutKnob 4.5s ease-in-out infinite; }
@keyframes tutTurn { 0%, 18% { transform: rotate(-90deg); } 38%, 92% { transform: rotate(0deg); } 100% { transform: rotate(-90deg); } }
@keyframes tutPad { 0%, 40% { opacity: 0; } 48%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes tutKnob { 0%, 52% { transform: none; } 58%, 82% { transform: translateX(4px); } 88%, 100% { transform: none; } }
@keyframes tutStep { 0%, 56% { transform: none; } 82%, 90% { transform: translateX(14px); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .tut-phone > span, .tut-phone img, .tut-pad, .tut-pad i { animation: none; } }
.tut-pic .tut-dpad { position: relative; flex: none; width: 54px; height: 54px; margin-right: 12px; box-sizing: border-box; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.8); background: rgba(8, 12, 32, 0.15); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); }
.tut-pic .tut-dpad i { position: absolute; inset: 0; margin: auto; width: 46%; height: 46%; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35); transform: translateX(9px); }

/* ---------------------------------------------------------------- holder customisation */
.holder-tag { background: var(--gold); }
/* ---------------------------------------------------------------- Style, Costumes and Colours (rpg/ui-character.js)
   Once the Customise window, now tabs of the Character window (.cw): the picks on dark panels, gold for what's picked,
   violet for the vault's VIP styles and costumes. */
.cz-box { display: grid; gap: 10px; padding: 12px; border-radius: 10px; background: #0e1336; border: 2px solid #000; box-shadow: inset 0 0 0 1px rgba(255, 210, 63, 0.18); }
.cz-box .cw-note .cw-chip { margin-right: 4px; }
.style-row { display: grid; grid-template-columns: 82px minmax(0, 1fr); align-items: center; gap: 8px; }
.style-row > span { font-size: 13px; line-height: 1.1; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.style-row[hidden] { display: none; }
.style-note { margin: 0; font-size: 14px; color: var(--muted); }
/* The picks: squares like the Character window's (dark, a black edge, a fine light rim), gold once picked. */
.style-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.style-chips button { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 0.18em 10px 0; border-radius: 7px; border: 2px solid #000; cursor: pointer;
  background: linear-gradient(180deg, #1c2150, #0b0e2a); box-shadow: inset 0 0 0 1px #4a5088, 0 2px 0 #0008; color: #dfe6ff; font: 400 16px/1 var(--ui-font); }
.style-chips button:hover, .style-outfits button:hover { filter: brightness(1.18); }
.style-chips button.sel, .style-outfits button.sel { border-color: var(--gold); color: #fff; box-shadow: inset 0 0 0 1px #fff3b0, 0 0 12px rgba(255, 210, 63, 0.55); }
/* Vault costumes: each on a little violet stage; locked ones (not a charger) dimmed with a padlock, still tappable to try on. */
.style-outfits { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.style-outfits button { position: relative; display: grid; justify-items: center; align-content: end; gap: 5px; padding: 10px 4px 8px; border-radius: 9px; border: 2px solid #000; cursor: pointer;
  color: #e9ddff; font: 400 14px/1.05 var(--ui-font); text-align: center;
  background: radial-gradient(ellipse 60% 14% at 50% 70%, rgba(150, 120, 255, 0.4), transparent 72%), radial-gradient(ellipse at 50% 0%, #2c2370, #0d1030 78%);
  box-shadow: inset 0 0 0 1px #7a3ad8, 0 2px 0 #0008; }
.style-outfits button img { width: 48px; height: 96px; image-rendering: pixelated; }
.style-outfits button.none { color: var(--muted); background: linear-gradient(180deg, #1c2150, #0b0e2a); box-shadow: inset 0 0 0 1px #4a5088, 0 2px 0 #0008; }
.style-outfits button.none b { display: grid; place-items: center; height: 96px; font-size: 26px; color: #6a78b0; }
.style-outfits button.locked img { opacity: 0.7; filter: grayscale(0.35); }
.style-outfits button.sel img { opacity: 1; filter: none; }
.toggle-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 17px; }
.toggle-inline input { width: 18px; height: 18px; accent-color: var(--gold); }

/* ---------------------------------------------------------------- title screen */
/* The start screen in the Harbour lobby's look (owner, 2026-10-25: "can we implement some of this also for the character
   personalization page ? .. even for the website for registrations", then of the demo: "looks nice, lets buid all
   that"). harbour.css .lb-* only loads for the island's wallets and the Wardrobe's .wd-* are tuned to its window, so the
   start screen has its own copy of the look: ZAZA Town at dusk from a terrace painted over the whole window
   (assets/start/; its terrace is the painting's bottom fifth, so the painting keeps its foot on the window's and your hero
   stands 20.5% up it), the title on a plate in the sky, Play as one big word between gold rules with the ways in under it,
   and dark glass panels down both sides under small gold capitals (title.js fills them). One screen on a computer, each
   side scrolling on its own; on phones the scene fills the first screen and the panels follow it; a phone on its side
   keeps the scene on the left. */
.title { --k: 6; --tan: #e8c46a; --line: rgba(232, 196, 106, 0.34); --soft: #b9bfdc; --mute: #9ea6cc; --top: env(safe-area-inset-top, 0px); --barh: 58px;
  --imgh: max(100dvh, 100vw * 0.5583); --feet: max(var(--imgh) * 0.205, var(--goh, 170px) + 18px);
  position: fixed; inset: 0; z-index: 10; max-width: 100vw; overflow: hidden auto; overscroll-behavior-x: none; touch-action: pan-y; background: #0b0a1c; color: var(--text); }
html.standalone .title { --top: var(--mobile-top-safe, env(safe-area-inset-top, 0px)); }
.title-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: linear-gradient(180deg, #2a2142 50%, #7b6257 50%); }
/* --lift (title.js): the painting rises until its terrace meets your hero's feet, the stone's colour carrying on under it. */
.title-bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; translate: 0 calc(-1 * var(--lift, 0px)); -webkit-mask-image: linear-gradient(0deg, transparent, #000 32px); mask-image: linear-gradient(0deg, transparent, #000 32px); }
.title-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 8, 28, 0.55), transparent 24%, transparent 76%, rgba(5, 8, 28, 0.55)), linear-gradient(0deg, rgba(5, 8, 28, 0.72), rgba(5, 8, 28, 0.2) 22%, transparent 34%); }
/* the top: back to the website on the left, the app (and its home-screen button) on the right */
.title-top { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; box-sizing: border-box; min-height: calc(var(--barh) + var(--top)); padding: calc(10px + var(--top)) max(20px, (100% - 1320px) / 2) 10px;
  background: linear-gradient(180deg, rgba(6, 10, 36, 0.78), rgba(6, 10, 36, 0)); }
.title-back, .title .title-app-link, .title .title-app-add { display: inline-flex; align-items: center; gap: 6px; height: 36px; box-sizing: border-box; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: rgba(6, 10, 32, 0.62);
  color: #e2e6fa; font: 400 17px/1 var(--ui-font); text-decoration: none; white-space: nowrap; cursor: pointer; backdrop-filter: blur(4px); }
.title-back { padding-left: 8px; }
.title .title-app-link, .title .title-app-add { display: inline-block; line-height: 34px; } /* "📱 My holdings" and its <span> as one line of words */
.title-back svg { flex: none; }
.title-back:hover, .title-back:focus-visible, .title .title-app-link:hover, .title .title-app-add:hover { border-color: var(--tan); color: #fff; outline: none; }
.title .title-app { flex-wrap: wrap; justify-content: flex-end; margin: 0 0 0 auto; }
.title .title-app-add { border-color: rgba(255, 210, 63, 0.55); color: var(--gold); }

/* the lobby: the panels either side, the plate, your hero and Play down the middle */
.title-lb { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr) minmax(0, 300px); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "l plate r" "l stage r" "l go r";
  gap: 0 28px; box-sizing: border-box; height: calc(100dvh - var(--barh) - var(--top)); padding: 4px max(24px, (100% - 1320px) / 2) 16px; }
.title-scene, .title-cols { display: contents; }
.title-plate { grid-area: plate; justify-self: center; position: relative; z-index: 1; display: grid; justify-items: center; gap: 3px; min-width: 250px; padding: 10px 56px 9px; text-align: center;
  background: radial-gradient(closest-side, rgba(8, 10, 32, 0.8), rgba(8, 10, 32, 0.58) 62%, rgba(8, 10, 32, 0) 100%); }
.title-kicker { display: inline-flex; align-items: center; gap: 7px; color: var(--tan); font: 400 12px/1 var(--display); letter-spacing: 0.32em; text-transform: uppercase; }
.title-kicker img { width: 20px; height: 20px; }
/* ZAZA WORLD lettered like the ZAZA World logo and the homepage's title (owner, 2026-11-03): ZAZA over WORLD, the logo's
   gold and white, and behind each word a copy in the logo's dark brown that is its outline and its solid 3D block, down
   and to the right. The copy and a light rim on the letters' tops are the words' ::before and ::after (data-t), left out
   of what screen readers say. Stacked it's 1.76 times its size tall and 3.78 wide. */
.title h1 { display: grid; justify-items: center; margin: 4px 0 0.06em; font: 400 62px/0.8 var(--display); letter-spacing: 0.01em; white-space: nowrap; isolation: isolate; }
.title h1 > span { position: relative; color: transparent; -webkit-background-clip: text; background-clip: text; }
.title h1 .zw-z { margin-bottom: 0.06em; font-size: 1.12em; letter-spacing: 0.03em; background-image: linear-gradient(180deg, #fff1b0 0%, #ffe07a 22%, #ffd548 42%, #f6c336 60%, #e9ad28 80%, #dc9a1c 100%); }
.title h1 .zw-w { background-image: linear-gradient(180deg, #ffffff 0%, #eef2ff 35%, #d2dcff 70%, #a9baff 100%); }
.title h1 > span::before, .title h1 > span::after { content: attr(data-t); content: attr(data-t) / ""; position: absolute; left: 0; top: 0; pointer-events: none; }
.title h1 > span::before { z-index: -1; color: #2b170b; -webkit-text-stroke: 0.1em #2b170b;
  text-shadow: 0.01em 0.015em 0 #2b170b, 0.02em 0.03em 0 #2b170b, 0.03em 0.045em 0 #2b170b, 0.04em 0.06em 0 #2b170b, 0.05em 0.075em 0 #2b170b, 0.06em 0.09em 0 #2b170b, 0.04em 0.13em 0.12em rgba(10, 5, 30, 0.55); }
.title h1 > span::after { color: transparent; -webkit-text-stroke: 0.012em rgba(255, 255, 255, 0.55); clip-path: inset(0 0 62% 0); }
.title .tagline { margin: 0; color: #e2e6fa; font-size: 17px; text-shadow: 0 1px 2px #000; }
.title-stats { display: flex; margin-top: 3px; }
.title-stats > span { display: grid; justify-items: center; gap: 3px; padding: 0 14px; }
.title-stats > span + span { border-left: 1px solid var(--line); }
.title-stats b { display: inline-flex; align-items: center; gap: 6px; color: #fff; font: 400 20px/1 var(--display); }
.title-stats b > img { width: auto; height: 1em; } /* the $CARDS logo beside $CARDS rewards, as tall as the number */
.title-stats small { color: var(--soft); font: 400 10px/1 var(--display); letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; }
.title-orn { position: relative; width: 190px; height: 12px; margin-top: 3px; background: linear-gradient(90deg, transparent, var(--tan) 30%, var(--tan) 70%, transparent) center / 100% 1px no-repeat; }
.title-orn::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border: 1px solid var(--tan); background: var(--gold); translate: -50% -50%; rotate: 45deg; box-shadow: 0 0 8px rgba(255, 210, 63, 0.8); }
/* your hero on the stone: the map sprite, a pixel of breath, a shadow at the feet, the name over the head */
.title-stage { grid-area: stage; position: static; }
.title-hero { position: absolute; z-index: 1; left: 50%; bottom: var(--feet); width: calc(16px * var(--k)); height: calc(var(--rows, 32) * var(--k) * 1px); translate: -50% 0; image-rendering: pixelated; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.7)); animation: title-breathe 1.8s steps(1, end) infinite; }
.title-shadow { position: absolute; left: 50%; bottom: var(--feet); width: calc(15px * var(--k)); height: calc(4px * var(--k)); translate: -50% 50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), transparent); }
@keyframes title-breathe { 50% { translate: -50% calc(var(--k) * 1px); } }
.title-tag { position: absolute; z-index: 2; left: 50%; bottom: calc(var(--feet) + var(--rows, 32) * var(--k) * 1px + 10px); translate: -50% 0; padding: 3px 10px 2px; border-radius: 4px; background: rgba(6, 10, 32, 0.72); color: #fff; font: 400 15px/1 var(--display); white-space: nowrap; }
.title-tag:empty { display: none; }
.title-tag em { font-style: normal; color: var(--gold); }

/* Play: the big word between gold rules, what's missing (or who you go in as) under it, then the ways in: a name, or a
   wallet (the main way: 9 in 10 regulars sign in with one), or X. */
.title-go { grid-area: go; justify-self: center; position: relative; z-index: 2; display: grid; justify-items: center; gap: 6px; max-width: 680px; text-align: center; }
.play-btn { display: flex; align-items: center; gap: 18px; margin: 0; padding: 0; border: 0; background: none; color: #fff1cc; font: 400 clamp(34px, 3.8vw, 56px)/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase;
  text-shadow: 0 3px 0 #3a2200, 0 0 26px rgba(255, 210, 63, 0.4); white-space: nowrap; cursor: pointer; }
.play-btn:hover:not([disabled]) > span, .play-btn:focus-visible > span { color: #fff; text-shadow: 0 3px 0 #3a2200, 0 0 34px rgba(255, 210, 63, 0.85); }
.play-btn:active:not([disabled]) { translate: 0 2px; }
/* Busy (the page still on its way): the word stays gold, a shine passing over it, never faded. */
.play-btn[disabled] { cursor: progress; }
.play-btn[disabled] > span { color: transparent; background: linear-gradient(105deg, #fff1cc 40%, #ffffff 50%, #fff1cc 60%) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; text-shadow: none; filter: drop-shadow(0 3px 0 #3a2200); animation: playShine 1.8s linear infinite; }
@keyframes playShine { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .play-btn[disabled] > span { animation: none; } }
.title-line { position: relative; flex: none; width: clamp(36px, 8vw, 120px); height: 12px; background: linear-gradient(90deg, transparent, var(--tan)) center / 100% 2px no-repeat; }
.title-line::after { content: ""; position: absolute; right: -3px; top: 50%; width: 8px; height: 8px; border: 2px solid var(--tan); background: #1c1634; translate: 0 -50%; rotate: 45deg; }
.title-line.r { transform: scaleX(-1); }
.title-sub { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin: 0; color: #e2e6fa; font-size: 18px; line-height: 1.2; text-shadow: 0 1px 2px #000; }
.title-sub.wants-name { color: #ffe39a; }
.title-sub .gate-lock.mini { width: 13px; height: 19px; margin-right: 8px; filter: none; animation: none; }
.title-way { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 10px; margin-top: 4px; }
.title .name-row { display: inline-flex; align-items: center; gap: 10px; width: 250px; height: 42px; margin: 0; padding: 0 14px; box-sizing: border-box; border: 1px solid var(--tan); border-radius: 999px; background: rgba(6, 10, 32, 0.82); box-shadow: 0 0 0 3px rgba(232, 196, 106, 0.08); }
.title .name-row:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255, 210, 63, 0.25); }
.title .name-row label { color: var(--tan); font: 400 11px/1 var(--display); letter-spacing: 0.16em; }
.title .name-row input { height: 100%; padding: 0; border: 0; border-radius: 0; background: none; font-size: 22px; }
.title .name-row input::placeholder { color: rgba(220, 225, 245, 0.5); }
.title .name-row.need { border-color: #ff9aa8; animation: gate-nudge 0.5s ease; }
.title .name-row.need input { animation: none; }
.title-or { color: var(--soft); font-size: 16px; text-shadow: 0 1px 2px #000; }
.title-or:has(+ #loginBtn[hidden]) { display: none; }
.title .login-btn, .title .x-name-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: auto; height: 42px; min-height: 0; margin: 0; box-sizing: border-box; border-radius: 999px; font: 400 16px/1 var(--display); cursor: pointer; }
.title .login-btn { padding: 0 18px 0 5px; border: 1px solid #ffe27a; background: linear-gradient(180deg, #ffe27a, var(--gold) 55%, #e8b52a); color: #0b1636; }
.title .login-btn:hover { filter: brightness(1.06); }
.title .login-btn img { width: 32px; height: 32px; border-radius: 50%; }
.title .x-name-btn { padding: 0 16px 0 5px; border: 1px solid #6f8bff; background: rgba(20, 30, 90, 0.85); color: #fff; font-size: 15px; }
.title .x-name-btn:hover, .title .x-name-btn:focus-visible { border-color: #a9bbff; background: rgba(40, 56, 150, 0.9); }
.title .x-name-btn svg { width: 15px; height: 15px; padding: 8.5px; }
.title .x-name-btn img { width: 32px; height: 32px; }
.title .x-name-btn.on { border-color: var(--green); background: rgba(20, 60, 40, 0.85); color: #c8ffd4; }
.title .x-name-btn > span { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.title .title-way > button[hidden] { display: none; }
/* a pill's second line shows only while a tap waits for the page (early-taps.js writes "One moment…" there) */
.title .title-way > button > small { display: none; }
.title .title-way > button > small[data-was] { display: inline; font: 400 15px/1 var(--ui-font); opacity: 0.85; }
.title .name-help { margin: 0; text-align: center; text-shadow: 0 1px 2px #000; }
.title .login-msg { max-width: 560px; margin: 0; padding: 8px 12px; border-radius: 8px; background: rgba(6, 10, 32, 0.82); text-align: left; }
.title .load-error { margin: 0; padding: 6px 12px; border-radius: 8px; background: rgba(6, 10, 32, 0.82); }
.title-hint { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 10px; margin: 0; color: var(--soft); font-size: 16px; line-height: 1.2; text-shadow: 0 1px 2px #000; }
.title-go:has(#loginBtn[hidden]) .title-hint > span:first-child { display: none; }
.title-key { color: rgba(220, 225, 245, 0.62); font: 400 10px/1 var(--display); letter-spacing: 0.22em; text-transform: uppercase; }
.title-key kbd { display: inline-block; margin-left: 5px; padding: 3px 5px 2px; border: 1px solid rgba(220, 225, 245, 0.45); border-radius: 4px; background: none; color: inherit; font: inherit; letter-spacing: 0.12em; }
@media (hover: none) { .title-key { display: none; } }
.title #newCharBtn { color: var(--gold); font-size: 17px; text-shadow: 0 1px 2px #000; }
.title-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 18px; margin: 0; }
.title-links:not(:has(> :not([hidden]))) { display: none; }
.title #codeBtn { color: var(--soft); font-size: 15px; text-shadow: 0 1px 2px #000; }
/* 📲 Play on another device (device-link.js): the QR code beside the code to type, on the start card and in the Wallet window */
.dl { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.dl-qr { flex: none; line-height: 0; border-radius: 8px; overflow: hidden; background: #fff; }
.dl-qr svg { display: block; width: 172px; height: 172px; }
.dl-how { flex: 1 1 190px; display: grid; gap: 6px; text-align: left; }
.dl-how p { margin: 0; }
.dl-code { font: 400 28px/1 var(--display); letter-spacing: 3px; color: var(--gold); user-select: all; }
.dl-left { font-size: 14px; color: var(--muted); }
.dl-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.dl-btns .btn { padding: 5px 12px; font-size: 15px; }
.dl.gone .dl-qr { opacity: 0.12; }
.dl-note { display: block; margin-top: 8px; font-size: 13px; color: var(--muted); }
.login-msg .dl-note, .login-msg .dl-left { color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .title-hero { animation: none; } }

/* the panels: dark glass, a thin gold edge, small gold capitals over label / value rows */
.title-col { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.title-col::-webkit-scrollbar { display: none; }
.title-col.l { grid-area: l; }
.title-col.r { grid-area: r; }
.title-p { flex: none; padding-bottom: 11px; border: 1px solid var(--line); border-radius: 4px; background: linear-gradient(180deg, rgba(12, 16, 44, 0.88), rgba(7, 10, 30, 0.88)); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 240, 200, 0.06); backdrop-filter: blur(4px); }
.title-p[hidden] { display: none; }
.title-ph { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; padding: 9px 12px 8px; border-bottom: 1px solid rgba(232, 196, 106, 0.16); }
.title-ph b { color: var(--tan); font: 400 12px/1 var(--display); letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; }
.title-ph > span { color: var(--soft); font-size: 16px; line-height: 1; }
.title-p > :not(.title-ph) { margin-left: 12px; margin-right: 12px; }
.title-kv { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 17px; line-height: 1.45; }
.title-kv > span { color: var(--mute); font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.title-kv > b { min-width: 0; color: #fff; font-weight: 400; text-align: right; }
.title-kv > b small { color: var(--gold); font-size: 15px; }
.title-kv.on > b, .title-kv.on > span { color: var(--gold); }
.title .title-note { margin-top: 9px; margin-bottom: 0; color: var(--mute); font-size: 15px; line-height: 1.25; }
.title-note b { color: #dfe3f7; font-weight: 400; }
.title-live { display: inline-flex; align-items: center; gap: 6px; color: #8ff0b8 !important; }
.title-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.title-chip { padding: 4px 7px 3px; border-radius: 5px; background: rgba(255, 210, 63, 0.16); color: var(--gold) !important; font: 400 11px/1 var(--display) !important; letter-spacing: 0.05em; text-transform: uppercase; }
/* a new hero's free looks: ◀ value ▶, a Random look */
.title-step { display: grid; grid-template-columns: 82px 28px minmax(0, 1fr) 28px; align-items: center; gap: 6px; height: 34px; }
.title-step + .title-step { margin-top: 4px; }
.title-step > span { color: var(--mute); font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; }
.title-step > b { color: #fff; font-size: 17px; font-weight: 400; text-align: center; }
.title-step button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: rgba(0, 0, 0, 0.3); color: var(--tan); cursor: pointer; }
.title-step button:hover { border-color: var(--tan); color: #fff3c4; }
.title-btn { display: flex; align-items: center; justify-content: center; gap: 7px; box-sizing: border-box; width: calc(100% - 24px); height: 32px; margin-top: 10px; padding: 0 10px; border: 1px solid var(--line); border-radius: 3px; background: rgba(232, 196, 106, 0.07);
  color: var(--tan); font: 400 12px/1 var(--display); letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; }
.title-btn:hover { border-color: var(--tan); background: rgba(232, 196, 106, 0.16); color: #fff3c4; }
/* a hero coming back: their face, name, class and squad */
.title-me { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.title-face { flex: none; display: grid; place-items: center; width: 46px; height: 46px; overflow: hidden; border: 2px solid var(--tan); border-radius: 50%; background: radial-gradient(circle at 50% 35%, #3a4a8a, #141c48); }
.title-face img { width: 40px; height: 44px; margin-top: -2px; image-rendering: pixelated; }
.title-me > span:last-child { display: grid; gap: 1px; min-width: 0; }
.title-me b { overflow: hidden; color: #fff; font: 400 18px/1.1 var(--display); text-overflow: ellipsis; white-space: nowrap; }
.title-me small { color: var(--soft); font-size: 16px; }
/* the wallet: its card once one is in, else why to bring one */
.title-signed:has(#loginCard[hidden]) { display: none; }
.title-col:has(#loginCard:not([hidden])) .title-why { display: none; }
.title .login { margin-top: 0; margin-bottom: 0; text-align: left; }
.title .login-card { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.title-col .title-gate { margin: 0; }
.title-perks { display: grid; gap: 5px; margin-top: 0; margin-bottom: 0; padding: 0; list-style: none; }
.title-perks li { display: flex; align-items: center; gap: 8px; color: #e2e6fa; font-size: 17px; line-height: 1.15; }
.title-perks li::before { content: "✓"; flex: none; color: var(--green); font: 400 14px/1 var(--display); }
/* the card hunt: the packs over turning rays above the countdown (hunt.css draws them; titleLine writes the words) */
.title-huntp .title-hunt { flex-direction: column; gap: 6px; margin-top: 0; margin-bottom: 0; padding: 8px 8px 10px; border-radius: 10px; box-shadow: 0 0 0 2px #000a2e, 0 0 18px rgba(179, 107, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.16); }
.title-huntp .title-hunt::before { left: 50%; top: 42px; }
.title-huntp .title-hunt-packs { align-self: stretch; width: 100%; height: 78px; margin: 0; }
.title-huntp .title-hunt-packs img,
.title-huntp .title-hunt-packs img:nth-child(2) { left: 50%; translate: -50% 0; }
.title-huntp .title-hunt > span { align-self: stretch; width: 100%; }
.title-huntp .title-hunt small { font-size: 15px; }
.title-huntp .title-hunt strong { font-size: 18px; }
.title-huntp .th-clock i { min-width: 50px; padding: 5px 3px 3px; }
.title-huntp .th-clock em { font-size: 24px; }
/* what the drops ask, under the countdown (title.js fills it from the live hunt), then a gold Buy $ZAZA link (.title-btn) */
.title-ask { margin-top: 10px; }
.title-buy { border-color: rgba(255, 210, 63, 0.4); background: rgba(255, 210, 63, 0.12); color: var(--gold); text-decoration: none; }
.title-buy:focus-visible { border-color: var(--tan); background: rgba(232, 196, 106, 0.16); color: #fff3c4; }

/* sizes: wider columns on a wide screen, a bigger hero on a tall one, a smaller hero and plate on a short one */
@media (min-width: 1700px) { .title-lb { grid-template-columns: minmax(0, 340px) minmax(0, 1fr) minmax(0, 340px); padding-left: max(32px, (100% - 1640px) / 2); padding-right: max(32px, (100% - 1640px) / 2); } }
@media (max-width: 1240px) { .title-lb { grid-template-columns: minmax(0, 260px) minmax(0, 1fr) minmax(0, 260px); gap: 0 18px; } .title h1 { font-size: 50px; } .title .name-row { width: 220px; } }
@media (min-width: 761px) and (min-height: 880px) { .title { --k: 7; } }
@media (min-width: 1500px) and (min-height: 1020px) { .title { --k: 8; } }
@media (min-width: 761px) and (max-height: 800px) { .title-col { gap: 8px; } .title-p { padding-bottom: 9px; } .title-ph { margin-bottom: 7px; padding-top: 8px; padding-bottom: 7px; } .title-kv { line-height: 1.3; } }
@media (min-width: 761px) and (max-height: 760px) { .title { --k: 5; } .title h1 { font-size: 40px; } .title .tagline { display: none; } .play-btn { font-size: clamp(32px, 3.6vw, 48px); } .title-go { gap: 4px; } }
@media (min-width: 761px) and (max-height: 640px) { .title { --k: 4; --barh: 50px; } .title-kicker, .title-orn, .title-hint > span:first-child { display: none; } .title h1 { font-size: 32px; } .title-stats b { font-size: 16px; } .play-btn { font-size: 32px; } }

/* phones upright, and tablets held upright: the scene fills the first screen (plate, hero, Play), the panels follow */
@media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) {
  .title { --k: 5; --barh: 52px; --lift: 56px; --sceneh: max(560px, 100svh - var(--barh) - var(--top) - 40px); --feet: max(var(--sceneh) * 0.205, var(--goh, 170px) + 14px); }
  .title .title-app-link > span { display: none; } /* "📱 My holdings" */
  .title-top { padding: calc(8px + var(--top)) 10px 8px; }
  .title-back, .title .title-app-link, .title .title-app-add { height: 34px; padding: 0 12px; font-size: 16px; }
  .title-back { padding-left: 6px; }
  .title-lb { display: block; height: auto; padding: 0 0 calc(16px + env(safe-area-inset-bottom, 0px)); }
  .title-scene { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; box-sizing: border-box; width: 100%; min-width: 0; min-height: var(--sceneh); height: auto; margin-top: calc(-1 * var(--barh) - var(--top)); padding: calc(var(--barh) + var(--top)) 10px 12px; overflow: hidden; }
  .title-bg { position: absolute; inset: 0; }
  /* Keep the terrace anchored while dropping the castle out from behind the title plate. */
  .title-bg img { transform-origin: 50% 100%; scale: 1 0.95; }
  .title-bg::after { background: linear-gradient(0deg, rgba(5, 8, 28, 0.9), rgba(5, 8, 28, 0.35) 30%, transparent 46%), linear-gradient(180deg, rgba(5, 8, 28, 0.5), transparent 18%); }
  /* Centre the full logo/stat plate in the portrait sky, shared by mobile browsers and the installed web app. */
  /* Lower the complete plate together so the subtitle clears the castle flag; its internal rhythm stays unchanged. */
  .title-plate { grid-area: 1 / 1; min-width: 0; padding: 6px 26px 8px; translate: 0 52px; }
  /* Mobile/webapp: keep the three World totals together, put the live count on its own line underneath, and leave the
     $CARDS mark out of the compact plate (owner, 2026-11-05: "don't display cards logo near rewards and move the online
     players number under"). Desktop keeps the four-column plate and its logo. */
  .title-stats { flex-wrap: wrap; justify-content: center; row-gap: 5px; }
  .title-stats > span { padding: 0 7px; }
  .title-stats > .title-online { order: 1; flex-basis: 100%; padding-top: 1px; border-left: 0; }
  .title-stats > .title-online + span { border-left: 0; }
  .title-stats b > img { display: none; }
  .title-stats small { font-size: 8px; letter-spacing: 0.1em; }
  /* The hero owns the middle grid row on phones. Its canvas can never climb into the title plate when the wallet help
     below grows; the scene simply gets taller and keeps Play beneath the hero's feet. */
  .title-stage { grid-area: 2 / 1; position: relative; width: 100%; min-height: calc(var(--rows, 32) * var(--k) * 1px + 16px); margin-top: 44px; }
  .title-hero, .title-shadow { bottom: 8px; }
  .title-tag { bottom: calc(var(--rows, 32) * var(--k) * 1px + 18px); }
  .title-go { grid-area: 3 / 1; width: 100%; max-width: 520px; }
  .title h1 { font-size: 46px; }
  .title .tagline { font-size: 16px; }
  .play-btn { gap: 10px; font-size: 36px; }
  .title-line { width: 34px; }
  .title-sub { font-size: 16px; }
  .title-way { gap: 7px; }
  .title .name-row { width: 100%; }
  .title-or { display: none; }
  .title .login-btn { flex: 1; }
  .title .x-name-btn { padding-right: 12px; }
  .title-hint > span:first-child { display: none; }
  .title-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px 10px 0; }
  .title-col { display: grid; gap: 10px; overflow: visible; }
  .title-col.l, .title-col.r { grid-area: auto; }
  /* In the single-column phone lobby the generic Hunt fan scales too far down. Give the packs their visual weight back
     and lower their bottoms toward the countdown, instead of leaving a hollow band between the two. */
  .title-huntp .title-hunt-packs { height: 94px; }
  .title-huntp .title-hunt-packs img { top: 10px; width: 40px; }
  .title-huntp .title-hunt-packs img:nth-child(1) { transform: translateX(-27px) rotate(-17deg); }
  .title-huntp .title-hunt-packs img:nth-child(3) { transform: translateX(27px) rotate(17deg); }
  .title-huntp .title-hunt-packs img:nth-child(2) { top: 5px; width: 52px; }
}
@media (max-width: 359px) { .title-plate { padding-inline: 12px; } } /* the four numbers on the smallest phones */
@media (min-width: 600px) and (max-width: 1100px) and (orientation: portrait) {
  .title { --k: 6; --sceneh: clamp(620px, 66svh, 820px); }
  .title-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .title h1 { font-size: 48px; }
  .play-btn { font-size: 44px; }
}
/* a phone on its side (the installed app too: --sw-* keep everything clear of the notch and the home bar): the scene on
   the left, the panels scrolling on the right */
@media (orientation: landscape) and (max-height: 500px) {
  .title { --k: 3; --barh: 46px; --feet: max(var(--imgh) * 0.205, var(--goh, 110px) + 8px); overflow: hidden; }
  .title .title-app-link > span { display: none; }
  .title-top { padding: calc(5px + var(--top)) max(10px, var(--sw-r, 0px)) 5px max(10px, var(--sw-l, 0px)); }
  .title-back, .title .title-app-link, .title .title-app-add { height: 32px; padding: 0 11px; font-size: 15px; }
  .title-lb { grid-template-columns: minmax(0, 52%) minmax(0, 1fr); grid-template-areas: "plate cols" "stage cols" "go cols"; gap: 0 10px; height: calc(100dvh - var(--barh) - var(--top)); padding: 0 max(10px, var(--sw-r, 0px)) var(--sw-b, 0px) max(6px, var(--sw-l, 0px)); }
  .title-bg img { object-position: 30% 100%; }
  .title-hero, .title-shadow, .title-tag { left: 26%; }
  .title-plate { margin-top: 2px; min-width: 0; padding: 4px 24px; }
  .title-kicker, .title-orn, .title .tagline { display: none; }
  .title h1 { font-size: 24px; }
  .title-stats > span { padding: 0 9px; }
  .title-stats { flex-wrap: wrap; justify-content: center; row-gap: 3px; }
  .title-stats > .title-online { order: 1; flex-basis: 100%; border-left: 0; }
  .title-stats > .title-online + span { border-left: 0; }
  .title-stats b > img { display: none; }
  .title-stats b { font-size: 14px; }
  .title-stats small { font-size: 8px; }
  .title-go { gap: 2px; padding-bottom: 4px; }
  .play-btn { gap: 8px; font-size: 24px; }
  .title-line { width: 22px; }
  .title-sub { font-size: 14px; }
  .title-way { gap: 5px 6px; margin-top: 2px; }
  .title .name-row, .title .login-btn, .title .x-name-btn { height: 34px; }
  .title .name-row { width: 170px; padding: 0 12px; }
  .title .name-row label { display: none; }
  .title .name-row input { font-size: 19px; }
  .title .login-btn { padding-right: 12px; font-size: 14px; }
  .title .x-name-btn { padding: 0 4px; font-size: 14px; }
  .title .x-name-btn:not(.on) > span { display: none; } /* the X mark alone */
  .title .login-btn img, .title .x-name-btn img { width: 26px; height: 26px; }
  .title .x-name-btn svg { width: 12px; height: 12px; padding: 7px; }
  .title-or, .title-hint { display: none; }
  .title-cols { grid-area: cols; position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; padding: 4px 0 10px; scrollbar-width: none; }
  .title-cols > .title-col { flex: none; overflow: visible; }
}
/* the old start card's pieces the name prompt (ui.js namePrompt) and the gate share */
@keyframes bob { 50% { transform: translateY(-6px); } }
.mini-cards[hidden] { display: none; } /* the demo-card tracker, once the real hunt has started (ui.js renderCardTracker) */
.name-row { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.name-row label { font-size: 15px; color: var(--muted); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.name-row input { flex: 1; min-width: 0; height: 48px; padding: 0 14px; border-radius: 12px; border: 2px solid #3b4c80; background: rgba(3, 10, 44, 0.6); color: #fff; font: 21px var(--ui-font); }
.name-row input::placeholder { color: #7f8bb8; }
.name-row input:focus { outline: none; border-color: var(--gold); }
/* No name yet (main.js askName): the box shakes and goes red, with a line under it. */
.name-row.need input { border-color: #ff8a8a; animation: gate-nudge 0.5s ease; }
.name-help { margin: -4px 0 12px; font-size: 15px; line-height: 1.3; color: #ffb0b0; text-align: left; }
/* "Use my X" (x-name.js) under the name box, on the title screen and in the name prompt: X's sign-in puts their X name in
   the box, and their X picture is theirs in the World. Owner, 2026-10-07 (on X's black button): "make the x connect button
   a little better fitting on the layout, better collors to match the rest". So it's Connect wallet's twin: the same
   height, corners, border and Titan One, on the card's navy with ZAZA's electric blue for an edge, X's mark in a round
   white badge where Connect wallet has its coin. Green with their picture once it's done. */
.x-name-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; margin: 0 0 10px; padding: 5px 10px; border-radius: 12px; border: 2px solid #4a6dff; background: linear-gradient(180deg, rgba(29, 75, 255, 0.22), rgba(29, 75, 255, 0.06)); color: #fff; font: 400 clamp(15px, 4.1vw, 17px)/1.15 var(--display); text-wrap: balance; cursor: pointer; } /* one line from 360 px wide phones */
.x-name-btn:hover, .x-name-btn:focus-visible { border-color: var(--cyan); background: rgba(29, 75, 255, 0.38); outline: none; }
.x-name-btn svg { flex: none; box-sizing: content-box; width: 12px; height: 12px; padding: 6px; border-radius: 50%; background: #fff; color: #000; }
.x-name-btn img { flex: none; width: 24px; height: 24px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--green); }
.x-name-btn.on { border-color: var(--green); background: rgba(95, 232, 111, 0.1); color: #c8ffd4; }
.x-name-btn.on:hover, .x-name-btn.on:focus-visible { border-color: #a8ffb2; background: rgba(95, 232, 111, 0.18); }
.x-name-btn:disabled { opacity: 0.6; cursor: progress; }
/* "What's your hero's name?" (ui.js namePrompt): a wallet the server knows no name for. Over everything, the tutorial too,
   until they give one. */
.name-prompt { position: fixed; inset: 0; z-index: 35; display: grid; place-items: center; padding: 16px; background: rgba(3, 8, 30, 0.72); }
.np-card { width: min(420px, 100%); padding: 20px 18px 16px; border-radius: 14px; background: linear-gradient(180deg, #13237a, #06124f); border: 2px solid var(--gold); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6); text-align: center; }
.np-card h2 { margin: 0 0 6px; font: 400 24px/1.15 var(--display); color: var(--gold); text-shadow: 0 2px 0 #000a2e; }
.np-sub { margin: 0 0 12px; color: var(--muted); font-size: 16px; line-height: 1.3; }
.np-go { width: 100%; padding: 10px; font: 400 19px var(--display); }
/* Chargers-only entry gate on the title screen: a pixel padlock that fills with vault energy, then springs open. */
.title-gate { margin: 0 0 12px; padding: 12px 14px 10px; border-radius: 12px; text-align: left; font-size: 16px; line-height: 1.35; color: #ffe6b0; background: linear-gradient(180deg, rgba(255, 152, 31, 0.16), rgba(255, 152, 31, 0.06)); border: 2px solid rgba(255, 152, 31, 0.6); }
.title-gate a { color: var(--gold); font-weight: 700; }
.gate-head { display: flex; align-items: center; gap: 14px; }
.gate-head > div { display: grid; gap: 2px; min-width: 0; }
.gate-head em { font-style: normal; font-size: 14px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #ff981f; }
.gate-head strong { font-family: var(--display); font-weight: 400; font-size: 21px; line-height: 1.1; text-wrap: balance; color: var(--gold); text-shadow: 0 2px 0 #000a2e; }
.gate-head span { color: #fff; font-size: 16px; }
.gate-note { margin: 10px 0 0; font-size: 15px; color: #ffe6b0; }
.gate-lock { flex: none; width: 56px; height: 80px; overflow: visible; filter: drop-shadow(0 3px 0 rgba(0, 10, 46, 0.7)); animation: lock-tug 3.6s ease-in-out infinite; transform-origin: 50% 90%; }
.gate-shackle rect { fill: #c7d0f5; } .gate-shackle rect.hi { fill: #fff; }
.gate-rim { fill: #050b2e; }
.gate-body { fill: #22358f; }
.gate-fill { fill: var(--gold); transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(var(--charge, 0)); animation: gate-fill 1s ease-out; }
.gate-shine { fill: rgba(255, 255, 255, 0.3); }
.gate-bolt { fill: #050b2e; }
@keyframes gate-fill { from { transform: scaleY(var(--from, 0)); } }
@keyframes lock-tug { 0%, 84%, 100% { transform: none; } 88% { transform: rotate(-7deg); } 92% { transform: rotate(6deg); } 96% { transform: rotate(-3deg); } }
.title-gate.ok { color: #c8ffd4; background: linear-gradient(180deg, rgba(95, 232, 111, 0.16), rgba(95, 232, 111, 0.05)); border-color: rgba(95, 232, 111, 0.6); }
.title-gate.ok em { color: var(--green); }
.title-gate.ok .gate-lock { animation: none; filter: drop-shadow(0 3px 0 rgba(0, 10, 46, 0.7)) drop-shadow(0 0 10px rgba(255, 210, 63, 0.75)); }
.title-gate.ok .gate-shackle { transform: translateY(-4px); }
.title-gate.opening .gate-shackle { animation: shackle-pop 0.8s cubic-bezier(0.3, 1.7, 0.5, 1); }
.title-gate.opening .gate-lock { animation: lock-flash 1s ease-out; }
@keyframes shackle-pop { 0%, 25% { transform: none; } 100% { transform: translateY(-4px); } }
@keyframes lock-flash { 0%, 20% { filter: drop-shadow(0 0 0 transparent); } 45% { filter: drop-shadow(0 0 22px #fff) drop-shadow(0 0 12px var(--gold)); } }
.title-gate ul { list-style: none; margin: 10px 0 6px; padding: 0; display: grid; gap: 5px; }
.title-gate li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 9px; border-radius: 8px; background: rgba(3, 10, 44, 0.55); }
.title-gate li i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-style: normal; font-size: 14px; font-weight: 700; color: #ffe6b0; background: rgba(255, 152, 31, 0.25); }
.title-gate li.ok i { color: #000a2e; background: var(--green); } .title-gate li.no i { color: #fff; background: var(--red); }
.title-gate li span { color: #fff; font-weight: 700; }
.title-gate li a { margin-left: auto; font-size: 15px; }
.title-gate small { display: block; font-size: 14px; color: var(--muted); }
.title-gate.nudge { animation: gate-nudge 0.5s ease; box-shadow: 0 0 0 3px rgba(255, 210, 63, 0.6); }
.title-gate.nudge .gate-lock { animation: lock-tug 0.5s ease-in-out; animation-delay: -3.1s; }
@keyframes gate-nudge { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.gate-lock.mini .gate-shackle rect, .gate-lock.mini .gate-body { fill: var(--navy-900); }
.gate-lock.mini .gate-rim, .gate-lock.mini .gate-fill, .gate-lock.mini .gate-shine { display: none; }
.gate-lock.mini .gate-bolt { fill: var(--gold); }
.login-card { padding: 10px 12px; border-radius: 12px; background: rgba(3, 10, 44, 0.6); border: 2px solid var(--gold); box-shadow: 0 0 18px rgba(255, 210, 63, 0.2); }
.login-top { display: flex; align-items: center; gap: 10px; }
.login-av { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid var(--gold); background: var(--navy-800); }
.login-id { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.login-id b { max-width: 100%; font-family: var(--display); font-weight: 400; font-size: 19px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.login-id small { font-size: 14px; color: var(--muted); }
.login-top .link-btn { font-size: 15px; flex: none; }
.login-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.login-stats span { min-width: 0; padding: 6px 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.05); }
.login-stats small { display: block; font-size: 13px; color: var(--muted); }
.login-stats b { display: block; font-size: 16px; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.login-wait { margin: 8px 0 0; font-size: 16px; color: var(--muted); }
.login-saved { display: block; margin-top: 8px; font-size: 14px; color: #7dffa0; }
.login-msg { margin: 8px 0 0; font-size: 16px; color: #ffb0a0; line-height: 1.35; }
/* Waiting on the wallet or the World (main.js wraps those words in .busy): not an error, so not the errors' red. */
.login-msg .busy { color: var(--text); }
.login-msg a { color: var(--gold); }
/* phones: open ZAZA World in Phantom's own browser */
.login-msg.help { display: grid; gap: 8px; padding: 10px 12px; border-radius: 12px; color: var(--text); background: rgba(171, 159, 242, 0.12); border: 1px solid rgba(171, 159, 242, 0.5); }
.login-msg.help b { color: #fff; }
.login-msg .ph-open { display: block; width: 100%; padding: 10px 14px; border: 0; border-radius: 12px; text-align: center; text-decoration: none; font-family: var(--display); font-size: 18px; color: #fff; background: linear-gradient(180deg, #ab9ff2, #7c6bd8); box-shadow: 0 3px 0 #4a3aa8; cursor: pointer; }
.login-msg small { font-size: 14px; color: var(--muted); }
.login-msg .ph-copy { margin: 0 2px; padding: 1px 8px; border-radius: 6px; border: 1px solid var(--gold); background: none; color: var(--gold); font: inherit; cursor: pointer; }
.handoff-code { display: inline-block; width: max-content; max-width: 100%; padding: 4px 9px; border-radius: 8px; background: rgba(3, 10, 44, 0.75); border: 1px solid rgba(255, 210, 63, 0.55); color: var(--gold); font-family: var(--mono); font-size: 20px; letter-spacing: 0.08em; }
.handoff-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.handoff-row input { min-width: 0; padding: 7px 9px; border-radius: 8px; border: 1px solid rgba(255, 210, 63, 0.5); background: rgba(3, 10, 44, 0.8); color: #fff; font: 18px/1 var(--mono); text-transform: uppercase; }
.swatches { display: flex; gap: 5px; flex-wrap: wrap; }
.swatches button { width: 26px; height: 26px; border-radius: 6px; border: 2px solid #000; padding: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 2px 0 #0008; }
.swatches button.sel { box-shadow: inset 0 0 0 1px #fff3b0, 0 0 0 2px var(--gold), 0 0 10px rgba(255, 210, 63, 0.55); }
.swatches button.none { background: #141d40; color: var(--muted); font-size: 13px; line-height: 1; }
.load-error { color: #ffb0a0; font-size: 17px; }
.noscript { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 30px; text-align: center; background: var(--navy-900); color: #fff; font: 18px/1.5 system-ui, sans-serif; }
.noscript a { color: var(--gold); }

/* ---------------------------------------------------------------- smaller screens */
@media (max-width: 1100px) {
  .chatbox { width: min(440px, calc(100vw - 290px)); }
}
@media (min-width: 761px) and (min-height: 501px) and (max-height: 720px) {
  .side { height: 300px; }
  .wallet-card > small { display: none; }
}
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (min-width: 561px) {
  :root { --mobile-top-safe: 0px; --mobile-panel-top: 8px; --mobile-chat-bottom: 0px; --mobile-chat-safe: env(safe-area-inset-bottom, 0px); --mobile-chat-input-safe: 0px; --mobile-chat-open-bottom: var(--mobile-chat-bottom); --mobile-chat-base: 224px; --mobile-chat-min: calc(var(--mobile-chat-base) - 66px); --mobile-chat-height: min(calc(var(--mobile-chat-base) + var(--chat-dh, 0px)), max(var(--mobile-chat-base), 52dvh), max(var(--mobile-chat-min), var(--chat-fit, 100dvh))); --mobile-chat-clearance: calc(var(--mobile-chat-bottom) + var(--mobile-chat-height) + 8px); }
  html.standalone { --mobile-top-safe: max(34px, env(safe-area-inset-top, 0px)); --mobile-panel-top: calc(8px + var(--mobile-top-safe)); --mobile-chat-base: 248px; }
  /* A navy strip under the chat: Android browsers draw the page under the system's ◁ ○ ||| buttons, which covered the chat
     input, so the chat sits above them; the installed app gets a thin one so the curved corners don't clip Send and 💬 Chat.
     iOS Safari keeps the chat on the bottom edge. The iPhone app pads the chat input clear of the home indicator. iOS 26
     lays home-screen apps out a status bar's height short of the screen (WebKit bug 301108) and nothing paints in that
     dead band (the build-300 stretch into it cut the chat input off), so with html.ios-short the chat ends where the page
     does, the home indicator sits in the band, and the band gets the chat strip's navy instead of the page background.
     With the chat collapsed, 💬 Chat floats over the map just above that band: no strip of its own (owner, 2026-10-04). */
  html.standalone { --mobile-chat-bottom: 0px; --mobile-chat-input-safe: max(14px, env(safe-area-inset-bottom, 0px)); }
  html.standalone.ios-short { --mobile-chat-input-safe: 0px; --mobile-chat-open-bottom: 6px; }
  html.standalone.ios-short, html.standalone.ios-short body { background: var(--stone); }
  html.standalone.ios-short .chatbox { border-radius: 6px 6px 0 0; }
  html.standalone.chat-collapsed #game, html.standalone.chat-collapsed .hud { inset: 0; width: 100vw; height: 100vh; height: 100lvh; min-height: 100dvh; }
  html.standalone.ios-short.chat-collapsed #game, html.standalone.ios-short.chat-collapsed .hud { height: 100dvh; min-height: 100dvh; }
  html.android { --mobile-chat-bottom: max(40px, env(safe-area-inset-bottom, 0px)); }
  html.android.standalone { --mobile-chat-bottom: max(10px, env(safe-area-inset-bottom, 0px)); }
  html.android .hud::after, html.standalone .hud::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--mobile-chat-bottom); z-index: -1; background: var(--stone); border-top: 2px solid var(--edge-dark); pointer-events: none; }
  html.standalone .chat-open { right: 10px; }
  html.standalone.ios-short .chat-open { position: fixed; right: 10px; bottom: var(--mobile-chat-open-bottom); z-index: 12; min-width: 104px; min-height: 46px; }
  .hud-tl { display: none; } /* phones: no hover text, and ui.js moves the "N online" pill under the ZAZA WORLD box */
  .hover-text { display: none; }
  .hud-panel { top: var(--mobile-panel-top); left: 8px; width: 200px; }
  .hud-panel:not(.is-minimized) { z-index: 1; } /* opened (a tap: phones start folded): over the trackers by the minimap, */
  .minimap-wrap { z-index: 2; } /* but under the minimap and its buttons */
  .hud-panel-head { gap: 5px; padding: 6px 6px 4px 9px; cursor: pointer; }
  /* Phones: folded, the header is just ZAZA's coin ring and level; tapping it opens or collapses the box. */
  .panel-coin { display: none; }
  .hud-panel .panel-world { margin-left: 0; font-size: 12px; }
  /* The ☰ as tall as the opened box's –, its icon 14 px (owner, 2026-10-22: "the icons of the socials stil slightly too
     smal on mobile"); its list keeps finger-sized rows. */
  .panel-links-btn { width: 24px; height: 24px; }
  .panel-links-btn svg { width: 14px; height: 14px; }
  .panel-links-menu a { padding: 9px 10px; }
  .hud-panel.is-minimized { width: auto; min-width: 148px; }
  .hud-panel.is-minimized .hm-mini { display: inline-flex; }
  .hud-panel.is-minimized .panel-world { display: none; }
  .hud-panel.is-minimized .hud-panel-head { gap: 7px; padding: 4px 4px 4px 6px; }
  .hud-panel.is-minimized .hm-mini { gap: 5px; } /* the ring's 28 px, then the words: the line the whole stack keeps (hunt.css) */
  .hud-minimize { width: 28px; height: 24px; font-size: 15px; } /* (22 px squeezed ZAZA's ring against the folded bar's edges: owner, 2026-10-22) */
  .hud-panel.is-minimized .hud-minimize { font-size: 19px; color: #ffcf8a; }
  .hud-panel:not(.is-minimized) .hud-minimize { width: 24px; }
  /* An installed app has extra top-safe-area geometry. Keep the first tracker fully below the folded Level box instead
     of letting its border/shadow ride over the box's lower edge. The XP strip has its own joined-box placement below. */
  html.standalone .hud-panel:not(:has(> .hud-under > .hero-xp:not([hidden]))) > .hud-under { top: calc(100% + 14px); }
  /* The map gets the same obvious touch zoom as 3D: + and − on the minimap's ring, after the folds (their places are with
     the ring's, below). The box is a point on the minimap box's top right corner (where each layout puts .hud-tr), so
     the buttons go by the same right/top as the ring's. */
  .touch-zoom { position: absolute; z-index: 6; top: var(--mobile-panel-top); right: 40px; display: block; width: 0; height: 0; }
  .touch-zoom[hidden] { display: none; }
  .touch-zoom > button { position: absolute; }
  /* Exactly the ring's orbs: dark rim, pale inner edge, navy fill, and the map's − and + in a round icon like theirs
     (owner, 2026-10-27: "the - and plus dont have the same style"). */
  .touch-zoom button { box-sizing: border-box; width: 28px; height: 28px; padding: 0; display: grid; place-items: center; border: 2px solid var(--edge-dark); border-radius: 50%; background: linear-gradient(180deg, #2a3668, #151d42); box-shadow: inset 0 0 0 1px var(--edge-light), 0 3px 8px rgba(0, 0, 0, 0.4); color: #fff; font: 18px/1 var(--ui-font); cursor: pointer; touch-action: manipulation; }
  .touch-zoom button:active { translate: 0 2px; box-shadow: 0 1px 0 #0b1340, 0 3px 8px rgba(0, 0, 0, 0.45); }
  /* Open World's 3D camera uses the same responsive minimap-orbit controls as the 2D map, rather than a separate
     oversized pair in the bottom interaction zone. sail3d.js clears its desktop placement while PHONE matches. */
  #zoom3d { position: absolute; z-index: 6; }
  #zoom3d[hidden] { display: none; }
  #zoom3d button { box-sizing: border-box !important; width: 28px !important; height: 28px !important; padding: 0 !important; border: 2px solid var(--edge-dark) !important; border-radius: 50% !important; background: radial-gradient(circle at 40% 35%, #4a5c98, #10183a) !important; box-shadow: inset 0 0 0 1px var(--edge-light), 0 3px 8px rgba(0, 0, 0, 0.4) !important; color: #fff !important; font: 18px/1 var(--ui-font) !important; }
  /* On the island the six-stock strip is as wide as the ZAZA box over it; folded, the box keeps its own snug width (owner,
     2026-10-22, of a 200 px folded bar: "the top left zaza circle is now not fitting well, before was better"). */
  .hud-panel > .hud-under > .isle-strip { width: 100%; max-width: none; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: stretch; }
  .hud-panel > .hud-under > .isle-strip > span { min-width: 0; justify-content: center; padding-inline: 3px; }
  .zaza-card { padding: 4px 9px 4px 5px; gap: 5px; }
  .zaza-portrait { width: 40px; height: 40px; padding: 2px; }
  .zaza-portrait img { width: 42px; height: 42px; }
  .zaza-xp { display: none; }
  .zaza-card.mc .zaza-xp { display: grid; gap: 8px; margin-top: 2px; }
  .zaza-card.mc .zaza-xp b { font-size: 17px; }
  .zaza-stat + .zaza-stat { padding-left: 8px; }
  .zaza-stat small { font-size: 10px; letter-spacing: 0.06em; }
  .zaza-stat small i, .zaza-card.mc .zaza-live { display: none; } /* the 24h change takes LIVE's place in the name row */
  .zaza-card.mc .zaza-ch { display: inline; }
  .zaza-chart .ax.ch { display: none; } /* the name row has it */
  .zaza-act { padding: 4px 5px; }
  .players-stack { height: 38px; }
  .zaza-name { font-size: 18px; }
  .charge-card { padding: 4px 9px 6px 7px; gap: 3px; }
  .charge-row b { font-size: 14px; }
  .charge-row b i { display: none; } /* just "⚡ Multisig" */
  .charge-row span { font-size: 15px; }
  .zaza-name b { font-size: 13px; padding: 1px 4px; }
  .zaza-live { font-size: 11px; padding: 1px 4px; }
  .hud-tr { right: 40px; top: var(--mobile-panel-top); } /* the Open World's ring reaches 33 px past the minimap's box on the right */
  .minimap-wrap { width: 168px; height: 146px; }
  #minimap { width: 100px; height: 100px; }
  .orb { min-width: 40px; height: 28px; padding: 0 2px 0 6px; }
  .orb-icon { width: 20px; height: 20px; }
  .orb-icon img { width: 14px; height: 14px; }
  .orb-val { font-size: 13px; }
  .minimap-wrap { height: 146px; }
  /* Sparks off (the live layout): the same ring as a computer's, down the minimap's left and under it, nothing on its
     right (owner, 2026-10-27), each icon 8px off its rim and 24° from the next (radius 77 around its centre, 54/54 in from
     the box's top right; from -31°, the run button's top level with the box's, to 113°): run, the map, attack mode (🔨
     Build on your Kingdom island), the fold, 🏠 Home (kingdom.js), − and + (the map's own or the 3D view's). The ones
     without a number are 28 px circles, like + and − (owner, 2026-10-24: "make all those nicely around the mini map, so
     all stay uniform and fitting together"). Anchored by `right`, so an icon stays put as its number grows. */
  .no-sparks :is(.orb-run, .orb-fight, .orb-map) { left: auto; }
  .no-sparks .orb-run { top: 0; right: 106px; } .no-sparks .orb-map { top: 31px; right: 116px; } .no-sparks .orb-fight, .orb-build { top: 62px; right: 114px; }
  /* The run button hugs its number and icon (45 px wide at "100", was 54), which leaves room at the top for "N online"
     (owner, 2026-10-06: "shrink the run width of that button and the cards one"). */
  .orb-run { min-width: 0; padding-left: 4px; gap: 2px; }
  .orb-run .orb-val { min-width: 0; }
  :is(.orb-fight, .orb-map, .orb-fold, .orb-build, .orb-home) { width: 28px; min-width: 0; padding: 0; justify-content: center; }
  .orb-quests { top: 90px; right: 98px; }
  .orb-home { top: 110px; right: 72px; }
  .touch-zoom > button:last-child { top: 117px; right: 41px; }
  .touch-zoom > button:first-child { top: 111px; right: 10px; }
  .no-sparks .minimap-wrap { height: 146px; }
  .mini-legend { display: none; }
  .hud-hide { top: -4px; right: -4px; width: 20px; height: 20px; }
  .mini-cards { height: 19px; gap: 4px; font-size: 11px; padding: 0 7px; }
  /* Side by side, never wider than the quest tracker below (212 px; owner, 2026-11-01: "the potions boost are occupying
     too much space verticall one on top of the other.. put they side by side and condense, and as wide as quests maximum"). */
  .mini-buffs { max-width: 212px; gap: 3px; }
  .mini-buffs .mb { height: 19px; gap: 3px; font-size: 11px; padding: 0 4px 0 2px; border-radius: 6px; }
  .mini-buffs .mbs { min-height: 21px; border-radius: 6px; }
  .mini-buffs .mbs .mbp { gap: 2px; height: 19px; padding: 0 3px 0 2px; }
  .mini-buffs .mbs .mbp img { width: 13px; height: 13px; }
  .mini-buffs .mbs .mbp > span { font-size: 10px; }
  .mini-buffs .mbs .mbp :is(b, em) { line-height: 9px; }
  .quest-track { max-width: 212px; }
  .quest-track .qt-main { gap: 4px; padding: 3px 4px; }
  .quest-track .qt-main img { width: 18px; height: 18px; }
  .qt-ico { width: 18px; font-size: 15px; }
  .qt-text { gap: 2px; }
  .qt-name { font-size: 11px; }
  .qt-step { font-size: 13px; }
  .qt-side { width: 20px; }
  .quest-track .qt-side > button { font-size: 13px; }
  .quest-track .qt-fold { width: 20px; font-size: 15px; }
  .quest-track .qt-go { padding: 0 6px; font-size: 12px; }
  /* Folded, one slim line like the Daily row under it (owner, 2026-11-07, with a shot of the strip half as wide again as that row:
     "make sure on mobile the quests dont take all that space.. shall be as the bottom one as before.."). The ≡ stays on the open
     tracker, and comes here only with something to say (+N, a hidden quest's reward waiting). */
  .quest-track.folded .qt-main { gap: 2px; min-height: 22px; padding: 0 3px; box-sizing: border-box; }
  .quest-track.folded .qt-main img { width: 16px; height: 16px; }
  .quest-track.folded .qt-ico { width: 15px; font-size: 12px; }
  .quest-track.folded .qt-name { font-size: 11px; }
  .quest-track.folded .qt-lines > .qt-go { min-height: 22px; }
  .quest-track.folded .qt-side > button { width: 18px; min-height: 22px; }
  .quest-track.folded .qt-adj:not(.on, .ready) { display: none; }
  .dt-row { gap: 5px; }
  /* On phones, completed Daily tasks leave no tracker until the next day only when there is no Weekly Loot bar in it. */
  .qt-row.daily-done .daily-track { display: none; }
  .qt-row.daily-done .dt-row:not(:has(#xTask:not([hidden]))) { display: none; }
  .hud.fold-quests .qt-row { display: contents; }
  /* Just "☐ 𝕏 Engage", only as wide as that, and only for $ZAZA holders (.hud-panel.holder, ui.js renderWallet; owner,
     2026-10-06: "still a little too big. put it just as X engage, and put it only visible for holders"). */
  .x-task { gap: 5px; padding: 2px 7px 2px 4px; }
  .hud:has(.hud-panel:not(.holder)) #xTask:not(.cut) { display: none; } /* with the 𝕏 cut on, every hero's (xposts-ui.js) */
  .xt-cut { padding: 1px 4px; font-size: 10px; }
  .xt-box { width: 16px; height: 16px; font-size: 11px; }
  .xt-go { gap: 4px; font-size: 12px; }
  .xt-go img { width: 18px; height: 18px; }
  /* 𝕏 Raid: as small as Engage, just "𝕏 2/5 🔥4" (the X mark says what it is); holders only, like Engage. */
  .xt-note { flex-basis: calc(100% - 5px); min-width: 170px; margin-right: -5px; font-size: 11px; } /* the small row widens while it shows */
  /* "N online" at the top, in the middle between the ZAZA WORLD box (it ends 156 px from the left at levels 1-9, 162-165
     px at 10-99) and the run button (its left edge 156 px in from the minimap column's right edge, so 164 px from the
     screen's): the blinking dot, the count and the word (ui.js placeOnline; owner, 2026-10-06: "move the online players
     to the top middle of screen, bettwen the world and the run button", then "show 9 online, not just nine"; 2026-10-07:
     "on mobile, show the blinking green dot of the online epople"). The dot is slimmer than desktop's and the padding
     tighter to make room, and under 400 px wide the words go a pixel smaller: "● 12 online" is 62 px, the gap at 390 px
     64-70. */
  .hud > .online-wrap { position: absolute; top: calc(var(--mobile-panel-top) + 8px); left: calc(50% - 2px); transform: translateX(-50%); }
  .hud > .online-wrap .online-pill { gap: 3px; height: 28px; padding: 0 7px 0 5px; font-size: 14px; }
  .hud > .online-wrap .online-pill i { flex: none; width: 6px; height: 6px; box-shadow: 0 0 0 2px rgba(95, 232, 111, 0.25); }
  .hud > .online-wrap .online-pill b { font-size: 16px; line-height: 1; }
  @media (max-width: 399px) { .hud > .online-wrap .online-pill { padding: 0 6px 0 5px; font-size: 13px; } .hud > .online-wrap .online-pill b { font-size: 15px; } }
  .quest-banner { top: auto; bottom: calc(var(--mobile-chat-clearance) + 50px); max-width: calc(100vw - 16px); gap: 8px; padding: 6px 8px 6px 7px; }
  .qn-mark { width: 28px; height: 28px; font-size: 15px; }
  .qn-title { font-size: 15px; }
  .qn-kicker { font-size: 12px; }
  .qn-line { font-size: 13px; }
  .quest-banner .qn-go { margin: -6px -8px -6px 0; padding: 0 11px; font-size: 15px; }
  .mc-row { grid-template-columns: 1fr auto; gap: 2px 8px; font-size: 14px; }
  .mc-row .bar { grid-column: 1 / -1; grid-row: 2; }
  .mc-row b { font-size: 16px; }
  .map-label { font-size: 12px; }
  .map-label.map-bld { font-size: 11px; }
  .map-landmark { font-size: 14px; }
  .map-zoom { top: 6px; right: 6px; gap: 5px; }
  .map-zoom button { width: 32px; height: 30px; font-size: 20px; }
  .map-pin i { left: -9px; top: -9px; width: 18px; height: 18px; border-width: 2px; }
  .map-pin i::after { border-width: 2px; inset: -2px; }
  .map-pin b { bottom: 11px; height: 18px; padding: 0 6px; font-size: 12px; }
  .map-left { font-size: 10px; padding: 0 4px; }
  .map-note { font-size: 10px; }
  .orb-run { top: 6px; left: 0; } .orb-sparks { top: 36px; left: 0; } .orb-map { top: 102px; left: 40px; min-width: 30px; } .orb-fight { top: 134px; left: 0; min-width: 30px; }
  .wallet-card { padding: 6px 8px; gap: 3px; }
  .wallet-card > small { display: none; }
  .wallet-connect { font-size: 13px; padding: 4px 8px; }
  :is(.wallet-buys, .xpb-buys) { gap: 4px; }
  :is(.wallet-buys, .xpb-buys) button { height: 46px; gap: 3px; padding: 4px 1px; border-radius: 8px; }
  .wallet-buys img { width: 20px; height: 20px; }
  .wb-packs img { width: 24px; height: 24px; }
  :is(.wallet-buys, .xpb-buys) b { font-size: 11px; }
  .wallet-buys-h { font-size: 11px; }
  .wallet-connect img { width: 18px; height: 18px; }
  .wallet-coin { width: 28px; height: 28px; }
  .wallet-head b { font-size: 16px; }
  .wallet-head em { display: none; }
  .zaza-chart { height: 54px; }
  .zaza-lv-row b { font-size: 13px; }
  .bar { height: 6px; }
  .zaza-lv-row small { display: none; }
  .tier-ladder { grid-template-columns: repeat(4, 1fr); }
  .lv-ladder { gap: 11px 4px; }
  .lv-ladder li { padding: 8px 2px 6px; }
  .lv-ladder li:not(.evo)::before { left: 8px; right: 8px; }
  .lv-tag { width: 14px; height: 14px; right: -4px; top: -5px; font-size: 8px; }
  .lv-tag.lock svg { width: 7px; height: 9px; }
  .lv-ladder li:not(.evo) b { font-size: 11px; letter-spacing: -0.02em; }
  .lv-now { font-size: 9px; padding: 1px 5px; top: -8px; }
  .lv-ladder b { font-size: 12px; } .lv-ladder span { font-size: 11px; } .lv-ladder small { font-size: 10px; }
  .modal-backdrop { align-items: start; place-items: start center; padding: var(--mobile-panel-top) 8px 8px; }
  .modal { width: min(560px, 100%); max-height: calc(100dvh - var(--mobile-panel-top) - 8px); padding: 20px 18px 16px; }
  .modal-x { top: 6px; right: 8px; }
  /* Players and MCAP can be taller than the phone. Scroll their contents, not the frame, so the close control stays
     neatly inside the same top-right corner instead of drifting with or sitting across the window's artwork. */
  .modal.mobile-corner-modal { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
  .modal.mobile-corner-modal > #modalBody { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; padding: 20px 18px 16px; }
  .modal.mobile-corner-modal > .modal-x { top: 12px; right: 12px; z-index: 5; border-radius: 50%; }
  .modal.mobile-corner-modal > #modalBody > :first-child { padding-right: 42px; }
  .modal h2.zaza-title { font-size: 20px; gap: 7px; flex-wrap: nowrap; white-space: nowrap; }
  .modal h2.zaza-title .h2-zaza { width: 34px; height: 34px; }
  .modal h2.zaza-title .h2-zaza img { width: 40px; }
  .modal h2.zaza-title .live-tag { font-size: 12px; padding: 2px 6px; }
  .dragonbreaker-pop { grid-template-columns: 88px minmax(0, 1fr); gap: 10px; align-items: start; }
  .dragonbreaker-pop canvas { width: 80px; height: 88px; }
  .dragonbreaker-pop b { font-size: 19px; }
  .dragonbreaker-pop p { font-size: 17px; line-height: 1.32; margin-bottom: 8px; overflow-wrap: anywhere; }
  .lv-ladder li.evo { grid-template-columns: 62px 1fr; gap: 10px; padding: 10px; }
  .evo-sil { width: 62px; height: 62px; } .evo-sil img { width: 56px; } .evo-sil em { font-size: 30px; }
  .lv-ladder li.evo .evo-body b { font-size: 18px; } .lv-ladder li.evo .evo-body > span { font-size: 14px; } .lv-ladder li.evo .evo-body small { font-size: 12px; }
  .mc-chart { height: 130px; }
  .player-chart { padding: 10px 10px 8px; }
  .player-chart .players-days { gap: 5px; }
  .player-chart .players-stack { height: 96px; }
  .player-chart .players-day small { font-size: 13px; }
  .wallet-row { font-size: 14px; grid-template-columns: 50px minmax(0, 1fr); padding: 1px 0; }
  .wallet-row small { display: none; }
  .wallet-icon { width: 24px; height: 24px; }
  .player-card { width: 214px; }
  /* View profile: the card docks on the left side (ui.js placePlayerCard), never under the options menu. ✕ closes it. */
  .player-card.docked { left: max(8px, var(--sw-l, 0px)); top: var(--mobile-panel-top); width: min(250px, calc(100vw - 16px)); max-height: calc(100dvh - var(--mobile-panel-top) - var(--mobile-chat-clearance)); overflow-y: auto; z-index: 16; }
  .player-card.docked .pc-top { padding-right: 30px; }
  .player-card.docked .pc-av { width: 46px; height: 46px; }
  .player-card.docked .pc-id { flex: 1; } /* the name stops short of the ✕ */
  .player-card.docked .pc-id b { max-width: 100%; font-size: 16px; }
  .player-card.docked .pc-close { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 2px solid var(--gold); background: #141d40; color: #fff; font-size: 15px; line-height: 1; box-shadow: 0 2px 0 #000; }
  .side { left: 0; right: 0; top: var(--mobile-panel-top); bottom: var(--mobile-chat-clearance); width: auto; height: auto; max-height: none; }
  .side .side-body { display: none; max-height: calc(46vh - 40px); }
  .side:not(.open) { display: none; } /* phones: the tabs live in the chat bar (ui.js moves them) */
  .side.open { display: flex; z-index: 8; } /* over the minimap column and the ZAZA box with its clock and "N online" */
  .side.open .side-body { display: block; max-height: none; }
  .side.open .side-close { display: grid; place-items: center; }
  .side.open .side-body > :first-child { padding-right: 40px; }
  .chatbox { left: 0; right: 0; bottom: var(--mobile-chat-bottom); width: auto; height: var(--mobile-chat-height); overflow: hidden; }
  html.dialog-open .chatbox { height: min(168px, calc(100dvh - var(--mobile-panel-top) - 12px)); }
  html.dialog-open :is(.chat-tabs, .chat-convos, .chat-roster, .chat-crowd-pop, .chat-pin, .chat-log, .chat-input) { display: none; }
  html.dialog-open .dialog { position: relative; inset: auto; min-height: 100%; }
  .chat-tools, .chat-input label { display: none; }
  /* Keep the original compact phone row. Messages and Squad live inside Chat ▾, so the game-panel icons still share
     the remaining width exactly as they did before those chat channels were added. */
  .chat-tabs { position: relative; z-index: 6; align-items: stretch; min-width: 0; overflow: visible; gap: 2px; padding: 4px 4px 0; }
  .chat-tabs > button { height: 44px; min-height: 44px; padding-top: 0; padding-bottom: 0; display: flex; align-items: center; justify-content: center; }
  .chat-tabs .chat-toggle { flex: 0 0 38px; width: 38px; min-width: 0; }
  .chat-tabs .chat-side-tabs { flex: 1 1 auto; min-width: 0; gap: 2px; margin-left: 0; }
  .chat-tabs .chat-side-tabs button { flex: 1 1 0; width: auto; min-width: 0; height: 44px; }
  .chat-tabs [data-chat="all"] { flex: 0 0 42px; min-width: 0; padding-left: 3px; padding-right: 3px; }
  .chat-tabs .chat-channel { gap: 3px; flex: 0 0 60px; min-width: 0; padding-left: 3px; padding-right: 3px; }
  /* 👥 Who's online: right of Chat ▾, the panel icons' size; they and it share the row evenly. Just the count and the faces in its box: the top online pill has the list. */
  .chat-tabs :is(.chat-crowd, .chat-toggle) { order: 0; }
  .chat-tabs .chat-crowd { flex: 1 1 0; min-width: 0; }
  .chat-tabs .chat-side-tabs { display: contents; }
  .crowd-head small { display: none; }
  .chat-tabs .chat-channel span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .chat-tabs .chat-channel::after { content: "▾"; flex: none; color: var(--gold); }
  .chat-tabs .chat-channel[aria-expanded="true"]::after { content: "▴"; }
  .chat-channels { display: none; position: absolute; top: 100%; left: 4px; z-index: 5; min-width: 168px; flex-direction: column; gap: 2px; padding: 4px; background: #141d40; border: 2px solid var(--edge-dark); border-top: 0; border-radius: 0 0 8px 8px; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.5); }
  .chat-channels.open { display: flex; }
  .chat-tabs .chat-channels button { flex: none; min-height: 34px; text-align: left; padding: 4px 10px; font-size: 16px; border-bottom: 1px solid #000; border-radius: 5px; }
  .chat-tabs .chat-channels button.active { box-shadow: inset 3px 0 0 var(--gold); }
  .chat-tabs .chat-channels .chat-wipe { margin-top: 4px; color: var(--muted); }
  .chat-tabs .chat-channels .chat-prefs + .chat-wipe { margin-top: 0; } /* ⚙ Chat settings, then 🧹 Clear chat */
  .chat-wipe span { display: inline; }
  /* Where it wouldn't fit under the button inside the chat (an upright phone's chat is short), it opens above the tabs
     (ui.js showChannels sets its height), over the map and everything on it. The chat stops clipping meanwhile: a list
     fixed to the screen inside it was still cut off on iPhones. */
  .chat-tabs:has(.chat-channels.open) { z-index: 30; }
  .chat-channels.up { top: auto; bottom: 100%; overflow-y: auto; border-top: 2px solid var(--edge-dark); border-bottom: 0; border-radius: 8px 8px 0 0; box-shadow: 0 -8px 18px rgba(0, 0, 0, 0.5); }
  .chatbox.channels-up { overflow: visible; }
  .chat-pin { -webkit-line-clamp: 1; }
  .chat-roster:not(.min) .w { display: none; } /* "3/12": room for twelve faces */
  .sqr-face { width: 20px; height: 20px; }
  .sqr-grp { min-height: 24px; }
  .chat-roster:has(.sqr-grp) > :is(.sqr-count, .sqr-min) { height: 24px; }
  .sqr-faces:has(.sqr-grp) { max-height: 50px; }
  .chat-convos { min-height: 34px; padding: 3px 6px; }
  .chat-input { grid-template-columns: minmax(0, 1fr) auto; padding-bottom: calc(8px + var(--mobile-chat-input-safe)); }
  .chat-log { font-size: 17px; padding: 4px 8px; }
  .chat-input input { font-size: 18px; padding: 5px 9px; }
  .chat-send { padding: 5px 12px; font-size: 15px; }
  .chat-open { left: auto; right: 0; bottom: var(--mobile-chat-open-bottom); min-width: 104px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }
  /* A place's name: small, centred between --ab-l and --ab-r from the edges, and with the D-pad on, right of the pad
     (owner, 2026-10-05: "on mobile make titles of towns smaller so they dont go on d pad"; pad 10 + 128 px, + 8). */
  .area-banner { --ab-l: 12px; --ab-r: 12px; top: auto; bottom: var(--mobile-chat-clearance); left: calc((var(--ab-l) + 100vw - var(--ab-r)) / 2); width: max-content; min-width: 0; max-width: calc(100vw - var(--ab-l) - var(--ab-r)); padding: 4px 12px 5px; border-width: 2px; z-index: 6; transform: translate(-50%, 190%); }
  .hud:has(> .dpad:not([hidden])) .area-banner { --ab-l: 146px; }
  .hud:has(> .dpad.right:not([hidden])) .area-banner { --ab-l: 12px; --ab-r: 146px; } /* Settings → D-pad side: Right */
  .area-banner.show { transform: translate(-50%, 0); }
  .area-banner b { font-size: 15px; }
  .area-banner small { font-size: 12px; }
  /* Room inside the parchment, so the words never sit in a screen's rounded corner (owner, 2026-10-13: "dont look too much
     on corner... tiny little extra margin on the inside"); the home bar's room too, where the page draws under it. */
  .dialog { gap: 10px; padding: 14px 18px calc(14px + var(--mobile-chat-input-safe, 0px)); }
  .dialog canvas { width: 60px; height: 66px; }
  .dialog-body { gap: 4px; min-width: 0; }
  .dialog-name { font-size: 17px; }
  .dialog-name small { font-size: 12px; }
  .dialog-text { font-size: 16px; line-height: 1.22; max-width: 100%; overflow-wrap: anywhere; }
  .dialog-next { font-size: 15px; }
  .dialog-links:has(#dialogLink2:not([hidden])) { flex-wrap: nowrap; gap: 6px; } /* two buttons (Mystic's) stay on one row */
  .dialog-links:has(#dialogLink2:not([hidden])) .dialog-link { padding: 5px 10px; font-size: 14px; white-space: nowrap; }
  .tut h2 { font-size: 21px; }
  .tut-tiles { gap: 6px; }
  .tut-tiles li { padding: 4px 4px 7px; }
  .tut-tiles li > b { font-size: 17px; }
  .tut-tiles li > small { font-size: 14px; }
  .tut-pip p { font-size: 16px; }
}
/* Upright phones: zoom belongs to the minimap, not the bottom interaction zone. The two little controls ride its right
   rim below the menu switch; Settings and either HUD fold can still remove them. Landscape has its own clearances. */
@media (max-width: 760px) and (orientation: portrait) {
  /* The Open World's ring reaches 24 px past the minimap's box: 28 px in from the screen's edge, it ends 4 px inside it. */
  .hud-tr { right: 28px; }
  /* The Main World has no extra Open World orbs past the ring: use the same tight right edge already proven in Kingdom
     mode, leaving the Online pill its full lane instead of wasting 20 px between the cluster and the screen. */
  html:not(.ow-menu) :is(.hud-tr, .touch-zoom) { right: max(8px, var(--sw-r, 0px)); }
  /* The phone map breathes inside its orbit: a slightly smaller circle, moved inward while keeping the same vertical
     centre. The desktop and sideways maps keep their existing scale. */
  #minimap { right: 12px; top: 8px; width: 92px; height: 92px; }
  .hud-hide { top: -1px; right: 3px; } /* the eye on the smaller map's corner, as far off its rim as sideways */
  /* The same ring drawn in round the smaller map: radius 69 around its centre (58/54 in from the box's top right), 24°
     apart in the same order from -24° (closer, run's number would touch the map button) to 120°, each button 4 px off its
     rim (the Open World's further down). */
  .no-sparks .orb-run { top: 12px; right: 107px; } .no-sparks .orb-map { top: 40px; right: 113px; } .no-sparks .orb-fight, .orb-build { top: 68px; right: 107px; }
  .orb-quests { top: 91px; right: 90px; }
  .orb-home { top: 106px; right: 65px; }
  .touch-zoom { right: 28px; }
  .touch-zoom > button:last-child { top: 109px; right: 37px; }
  .touch-zoom > button:first-child { top: 100px; right: 10px; }
  .isle-rotate { position: absolute; z-index: 24; left: 50%; top: 47%; translate: -50% -50%; width: min(280px, calc(100vw - 48px)); display: grid; grid-template-columns: 34px 1fr 28px; align-items: center; gap: 8px; padding: 9px 8px 9px 11px; border: 2px solid var(--edge-dark); border-radius: 11px; background: linear-gradient(180deg, rgba(36, 55, 138, 0.97), rgba(13, 24, 65, 0.97)); box-shadow: inset 0 0 0 1px var(--edge-light), 0 6px 18px rgba(0,0,0,.42); color: #fff; text-align: left; pointer-events: auto; }
  .isle-rotate[hidden] { display: none; }
  .isle-rotate > .rotate-phone { position: relative; width: 30px; height: 42px; margin: auto; border: 3px solid var(--gold); border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), 0 0 10px rgba(255,210,63,.35); animation: isle-phone-turn 2.4s ease-in-out infinite; }
  .isle-rotate > .rotate-phone::before { content: ""; position: absolute; left: 50%; top: 3px; width: 9px; height: 2px; translate: -50% 0; border-radius: 2px; background: var(--gold); }
  .isle-rotate > .rotate-phone i { position: absolute; inset: 7px 4px 4px; border-radius: 3px; background: linear-gradient(145deg, #2459a7, #111b4a); }
  @keyframes isle-phone-turn { 0%, 22% { transform: rotate(0deg); } 48%, 82% { transform: rotate(90deg); } 100% { transform: rotate(0deg); } }
  .isle-rotate b, .isle-rotate small { display: block; }
  .isle-rotate b { color: var(--gold); font: 18px/1 var(--ui-font); }
  .isle-rotate small { margin-top: 3px; color: #dce6ff; font: 13px/1.15 system-ui, sans-serif; }
  .isle-rotate button { width: 28px; height: 28px; padding: 0; border: 1px solid var(--edge-light); border-radius: 50%; background: #111a45; color: #fff; font: 20px/1 system-ui, sans-serif; }
}
@media (prefers-reduced-motion: reduce) {
  .lv-ladder li.evo, .lv-ladder li.now, .evo-sil, .evo-sil em, .evo-body b, .evo-spark { animation: none; }
  .flash, .flip-inner { animation-duration: 0.01s; }
  .area-banner { transition: none; }
}

/* ---------------------------------------------------------------- adventure: shared bits */
.ri { width: 24px; height: 24px; image-rendering: pixelated; vertical-align: middle; flex: none; }
.ri.big { width: 40px; height: 40px; }
.rbar { display: block; height: 7px; border-radius: 4px; background: #0a102a; border: 1px solid #000; overflow: hidden; }
.rbar > span { display: block; height: 100%; background: linear-gradient(180deg, #7ef08a, #3cb44b); transition: width 0.25s ease; }
.rbar.mid > span { background: linear-gradient(180deg, #ffe066, #e8b52a); }
.rbar.low > span { background: linear-gradient(180deg, #ff8a80, #d83a3a); }
.rbar.xp > span { background: linear-gradient(180deg, #9fe0ff, #3a8ad8); }
.sample-tag { display: inline-block; font-size: 13px; font-weight: 700; color: #fff; background: #b8302a; border-radius: 4px; padding: 1px 6px; letter-spacing: 0.04em; vertical-align: 2px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Mining progress, above the chat on desktop. */
.gather-bar { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; background: rgba(6, 12, 40, 0.92); border: 2px solid var(--edge-dark); box-shadow: inset 0 0 0 1px var(--edge-light); font-size: 16px; min-width: 260px; }
.gather-bar > span:first-child { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.gather-bar .rbar { flex: 1; min-width: 70px; }
.gather-bar .rbar > span { background: linear-gradient(180deg, #ffe066, #e8b52a); transition: width 0.2s linear; }
.gather-bar button { background: #141d40; border: 1px solid #000; border-radius: 5px; color: var(--muted); padding: 1px 7px; }

/* A guardian found you. */
.lease-card { position: absolute; left: 50%; top: 58px; transform: translateX(-50%); z-index: 7; width: min(430px, calc(100vw - 24px)); padding: 12px 14px; }
.lease-top { display: flex; gap: 12px; align-items: center; }
.lease-pic { width: 84px; height: 84px; image-rendering: pixelated; object-fit: contain; flex: none; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.5)); }
.lease-card .kicker { color: var(--rs-orange); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; }
.lease-card h3 { font-family: var(--display); font-weight: 400; color: var(--gold); font-size: 22px; margin: 0 0 2px; }
.lease-card p { margin: 2px 0; font-size: 15px; line-height: 1.3; }
.lease-card .rec { color: var(--cyan); }
.lease-card .terms { margin: 8px 0; padding: 6px 8px; border-radius: 6px; background: rgba(3, 10, 44, 0.6); color: #dfe6ff; font-size: 14px; }
.lease-card .party { list-style: none; margin: 0 0 8px; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; font-size: 14px; }
.lease-card .party li { padding: 1px 8px; border-radius: 999px; background: #141d40; border: 1px solid #3b4c80; }
.lease-card select { font: inherit; font-size: 15px; background: #0d1638; color: var(--text); border: 1px solid #3b4c80; border-radius: 6px; padding: 5px 6px; }
.lease-card .wait { color: var(--muted); font-size: 15px; }
.lease-card .expires { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; }
/* A raid party gathering at the dragon. */
.lease-card.raid { border-color: #ff6a2a; box-shadow: 0 0 0 3px #1b1424, 0 0 28px rgba(255, 90, 30, 0.35); background: linear-gradient(180deg, rgba(58, 12, 8, 0.96), rgba(20, 12, 30, 0.96)); }
.lease-card.raid .lease-pic { width: 128px; height: 100px; image-rendering: auto; }
.lease-card.raid h3 small { font-family: var(--ui, inherit); color: #ffb347; font-size: 15px; }
.lease-card .raid-party li { display: flex; align-items: center; gap: 4px; padding: 1px 8px 1px 3px; }
.lease-card .raid-party li .ri { width: 20px; height: 20px; }
.lease-card .raid-party li small { color: var(--cyan); }
/* The leader's ✕ by a name: puts that hero out of the party (ui-legends.js partyKickHTML). */
.lease-card .party li .kick { margin: 0 -5px 0 1px; border: 0; background: transparent; color: #ff8a8a; font: inherit; font-size: 12px; line-height: 1; padding: 2px 5px; border-radius: 999px; cursor: pointer; }
.lease-card .party li .kick:hover, .lease-card .party li .kick:focus-visible { background: #4a1b2a; color: #fff; outline: none; }
.lease-card .raid-tip { color: #ffcf8a; font-size: 14px; }
/* Your rewards from this boss are resting (its cooldown): the clock to when it pays you again. */
.lease-card .raid-back { margin: 8px 0 0; padding: 6px 8px; border-radius: 6px; background: rgba(255, 179, 71, 0.12); border: 1px solid rgba(255, 179, 71, 0.6); color: #ffe2a8; font-size: 14px; }
.lease-card .raid-back b { color: var(--gold); font-variant-numeric: tabular-nums; }
/* Its – folds it down to one line (renderLeaseMini): the name, the heroes in, the time left and + to open it again. */
.lease-min { position: absolute; top: 8px; right: 8px; width: 30px; height: 26px; padding: 0 0 2px; display: grid; place-items: center; font: 600 16px var(--ui-font); color: var(--muted); background: #141d40; border: 1px solid #000; border-radius: 5px; cursor: pointer; }
.lease-min:hover { color: #fff; }
.lease-card:has(> .lease-min) .lease-top { padding-right: 30px; }
/* Under the minimap (renderRaidChips): your folded card, and every raid gathering that you could join. */
.raid-chips { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.raid-chips[hidden] { display: none; }
.raid-chip { display: flex; align-items: center; gap: 6px; max-width: 230px; box-sizing: border-box; height: 28px; margin: 0; padding: 0 3px 0 7px; border-radius: 8px; background: rgba(6, 12, 40, 0.86); border: 1px solid rgba(255, 152, 31, 0.75); box-shadow: 0 0 6px rgba(255, 152, 31, 0.25); font: inherit; font-size: 14px; color: #dfe6ff; white-space: nowrap; cursor: pointer; }
.raid-chip.raid { border-color: #ff6a2a; box-shadow: 0 0 8px rgba(255, 90, 30, 0.45); background: linear-gradient(180deg, rgba(58, 12, 8, 0.92), rgba(20, 12, 30, 0.92)); }
.raid-chip b { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-family: var(--display); font-weight: 400; color: var(--gold); font-size: 15px; }
.raid-chip span { color: var(--cyan); font-size: 13px; }
.raid-chip small { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.raid-chip i { flex: none; min-width: 22px; height: 20px; padding: 0 5px; box-sizing: border-box; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 13px; color: var(--muted); background: #141d40; border: 1px solid #000; border-radius: 5px; }
.raid-chip.join i { color: #1a1206; background: linear-gradient(180deg, #ffe066, #e8b52a); }
.raid-chip:hover i { color: #fff; }
.raid-chip.join:hover i { color: #000; background: linear-gradient(180deg, #fff09a, #ffd23f); }
/* 📋 An offer or a counter waiting for your answer at the Marketplace (rpg/ui-market.js marketChipHTML): opens your offers. */
.raid-chip.market { border-color: rgba(255, 210, 63, 0.9); box-shadow: 0 0 8px rgba(255, 210, 63, 0.35); }
/* 🪦 Loot to find: everyone else's dropped loot still out there (rpg/ui-grave.js lootChipHTML), pale like the light over a
   pile. Tapped, each pile's place, how many things and Go open under it (.fight-pick.loot-pick), no clocks. */
.raid-chip.loot { border-color: rgba(200, 225, 255, 0.75); box-shadow: 0 0 6px rgba(200, 225, 255, 0.3); }
.raid-chip.loot.open i { color: #fff; background: #141d40; }
.fight-pick.loot-pick { border-color: rgba(200, 225, 255, 0.75); }
/* A ❗ call for help is a card under the minimap, as wide as the chips (renderRaidChips), in two lines: the caller, their
   👁 and 🛡 Join, then "needs help vs <foe> in <place>" (the place in gold; a long one wraps once, then ends in …).
   Two or more callers on one side of a fight share the card: "& name 👁" goes on beside the first, or under it when
   there's no room before Join. The fight's round is a tab on its top edge, over Join (R6/10: call-chip.js
   callRoundHTML), so the card keeps its height and the names their room; gold two rounds before the last round a
   helper can join in, red in it. */
.raid-chip.call { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 1px 5px; width: 230px; height: auto; white-space: normal; padding: 3px 3px 4px 7px; touch-action: pan-y; transition: transform 160ms ease, opacity 160ms ease; }
.help-who { display: flex; flex-wrap: wrap; align-items: center; gap: 1px 5px; min-width: 0; }
.help-who b { flex: 0 1 auto; white-space: nowrap; }
.raid-chip .help-one { display: flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%; color: #eef2ff; font-size: 14px; }
.raid-chip.call .help-foe { grid-column: 1 / -1; margin: 0; color: #eef2ff; font: 13px/1.15 var(--ui-font); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.raid-chip.call .help-foe span { font: inherit; color: var(--gold); }
.raid-chip.call .call-go i { height: 22px; padding: 0 7px; }
.raid-chip.call .call-rd { position: absolute; top: -7px; right: 34px; z-index: 1; height: 12px; padding: 0 4px; border: 1px solid rgba(185, 196, 255, 0.6); border-radius: 6px; background: #1b1424; color: #b9c4ff; font: 700 10px/12px var(--ui-font); font-variant-numeric: tabular-nums; white-space: nowrap; cursor: help; }
.raid-chip.call .call-rd.late { border-color: var(--gold); color: var(--gold); }
.raid-chip.call .call-rd.last { border-color: #ff6b5e; color: #ff6b5e; }
.raid-chip.call .call-x { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.42); border-radius: 50%; background: rgba(12, 10, 25, 0.76); color: #fff; font: 700 16px/1 var(--ui-font); cursor: pointer; }
.raid-chip.call .call-x:hover { border-color: #fff; background: rgba(255, 77, 61, 0.75); }
.raid-chip.call.swiping { animation: none; transition: none; }
/* A squadmate's ❗ call for help (rpg/core-calls.js): 🛡 Help walks you to their fight (game.js goHelp). */
.raid-chip.call { border-color: #ff4d3d; background: linear-gradient(180deg, rgba(70, 10, 14, 0.94), rgba(24, 10, 30, 0.94)); animation: call-glow 1.2s ease-in-out infinite; }
.raid-chip.call em { font: 400 17px "Titan One", var(--display), sans-serif; line-height: 1; color: #ff4d3d; text-shadow: 1px 1px 0 #1b1424, -1px -1px 0 #1b1424, 1px -1px 0 #1b1424, -1px 1px 0 #1b1424; }
@keyframes call-glow { 0%, 100% { box-shadow: 0 0 6px rgba(255, 77, 61, 0.45); } 50% { box-shadow: 0 0 14px rgba(255, 77, 61, 0.9); } }
/* Its 👁 (where they are, live: ui.js eyeTap) and 🛡 Help are two buttons in one chip (a div). */
.raid-chip.call .chat-eye { flex: none; margin: 0 0 0 -1px; }
.raid-chip .call-go { flex: none; display: flex; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .raid-chip.call { animation: none; transition: none; } }
/* ⚔ A player fight you could join (rpg/core-calls.js pushFights): who vs whom and the sides' sizes, cyan (calm: fights
   aren't red); one with your squadmate in it glows. Tapped, the sides you may take open under it (.fight-pick). */
.raid-chip.fight { border-color: var(--cyan); box-shadow: 0 0 6px rgba(127, 212, 255, 0.3); }
.raid-chip.fight.mate { box-shadow: 0 0 10px rgba(127, 212, 255, 0.75); }
.raid-chip.fight { gap: 5px; }
.raid-chip.fight em { flex: none; font-style: normal; font-size: 13px; color: var(--cyan); }
.raid-chip.fight b { flex: 0 1 auto; font-size: 14px; } /* both names share the room, each cut with a … only if it must */
.raid-chip.fight span { flex: none; }
.raid-chip.fight.open i { color: #fff; background: #141d40; }
.fight-pick { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 5px 6px; width: 230px; box-sizing: border-box; margin-top: -3px; padding: 6px; border-radius: 8px; background: rgba(6, 12, 40, 0.94); border: 1px solid var(--cyan); }
.fight-pick small { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12px; }
.fight-pick .chat-eye { flex: none; margin: 0 2px; }
/* each side: its heroes, strongest first, each with a gold level tag, and 🛡 Join on a side you may take */
.fight-pick .fp-side { flex: 1 1 100%; display: flex; align-items: center; gap: 6px; min-width: 0; padding: 4px 4px 4px 7px; border-radius: 6px; background: rgba(127, 212, 255, 0.06); border: 1px solid #2e3d74; }
.fight-pick ul { flex: 1 1 0; min-width: 0; list-style: none; margin: 0; padding: 2px 0; display: grid; gap: 3px; }
.fight-pick li { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 14px; line-height: 1.2; }
.fight-pick li b { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; color: #dfe6ff; }
.fight-pick li span { flex: none; margin-left: auto; padding: 0 5px; border-radius: 4px; font-size: 12px; line-height: 16px; color: var(--gold); background: rgba(255, 210, 63, 0.12); border: 1px solid rgba(255, 210, 63, 0.45); font-variant-numeric: tabular-nums; }
.fight-pick .btn { flex: none; margin: 0; padding: 4px 8px; font-size: 14px; white-space: nowrap; }
.fight-pick > em { flex: 1 1 100%; margin: -3px 0; text-align: center; font-style: normal; font-size: 12px; line-height: 1; color: var(--cyan); }
/* ⚔ Find a fight (rpg/ui-findfight.js): calm gold, never red. Someone's call has 👁 + ⚔ Fight (a rematch for you glows);
   yours shows its clock, then 👻 Shadow once a shadow can stand in, and ✕; 👻 Your shadow opens how it did. */
.raid-chip.lff { border-color: rgba(255, 210, 63, 0.8); box-shadow: 0 0 6px rgba(255, 210, 63, 0.25); gap: 5px; }
.raid-chip.lff em { flex: none; font-style: normal; font-size: 13px; color: var(--gold); }
.raid-chip.lff .chat-eye { flex: none; margin: 0 -2px 0 -3px; }
.raid-chip.lff span { flex: none; }
.raid-chip.lff.re { box-shadow: 0 0 10px rgba(255, 210, 63, 0.75); }
.raid-chip.lff.mate { box-shadow: 0 0 8px rgba(127, 212, 255, 0.6); }
.raid-chip.lff.mine { border-style: dashed; cursor: default; }
.raid-chip.lff.wait { border-style: dashed; box-shadow: none; } /* you called a moment ago: the time to your next call */
.raid-chip.lff.wait em, .raid-chip.lff.wait b { opacity: 0.6; }
.raid-chip.lff.pending { border-style: solid; animation: lff-calling 0.5s ease-in-out infinite alternate; } /* you pressed Call: the World's answer is on its way */
@keyframes lff-calling { from { box-shadow: 0 0 4px rgba(255, 210, 63, 0.3); } to { box-shadow: 0 0 12px rgba(255, 210, 63, 0.9); } }
@media (prefers-reduced-motion: reduce) { .raid-chip.lff.pending { animation: none; box-shadow: 0 0 10px rgba(255, 210, 63, 0.75); } }
.raid-chip.lff .lff-wait { display: flex; align-items: center; gap: 2px; color: #b9c4ff; font-size: 12px; }
.raid-chip.lff .lff-shadow { flex: none; height: 20px; margin: 0; padding: 0 6px; border-radius: 5px; border: 1px solid #000; font: inherit; font-size: 12px; font-weight: 700; color: #0a102a; background: linear-gradient(180deg, #dfe4ff, #a9b6ff); cursor: pointer; }
.raid-chip.lff .lff-shadow:hover { background: linear-gradient(180deg, #fff, #c6cfff); }
.raid-chip.lff.note { border-color: #a9b6ff; box-shadow: 0 0 6px rgba(169, 182, 255, 0.35); }
.raid-chip.lff.note em { color: inherit; }
.lff-go { margin: 6px 0 0; padding: 4px 10px; font-size: 14px; } /* ⚔ Find a fight on a daily task or a quest step */
.lff-notes .lff-list { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 8px; }
.lff-notes .lff-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: rgba(169, 182, 255, 0.08); border: 1px solid #3a4680; }
.lff-notes .lff-list span { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.lff-notes .lff-list b { font-weight: 400; color: #dfe6ff; }
.lff-notes .lff-list small { color: var(--muted); font-size: 12px; }
.lff-notes .lff-list .btn { flex: none; margin: 0; padding: 4px 10px; font-size: 14px; white-space: nowrap; }
.lff-notes .lff-asked { flex: none; font-style: normal; font-size: 13px; color: var(--muted); }
/* Your squad's wars (rpg/ui-wars.js warChipsHTML): gold, glowing from the reminder on, popping in at each new step. */
.raid-chip.war { border-color: var(--gold); box-shadow: 0 0 8px rgba(255, 210, 63, 0.35); background: linear-gradient(180deg, rgba(40, 30, 8, 0.94), rgba(10, 14, 40, 0.94)); }
.raid-chip.war .sqw-live { font-size: 11px; line-height: 16px; }
.raid-chip.war.hot { animation: war-glow 1.4s ease-in-out infinite; }
.raid-chip.war.pop { animation: war-pop 0.5s ease-out 3; }
.raid-chip.war.hot.pop { animation: war-pop 0.5s ease-out 3, war-glow 1.4s ease-in-out 1.5s infinite; }
@keyframes war-glow { 0%, 100% { box-shadow: 0 0 6px rgba(255, 210, 63, 0.45); } 50% { box-shadow: 0 0 16px rgba(255, 210, 63, 0.95); } }
@keyframes war-pop { 0% { transform: scale(1); } 40% { transform: scale(1.12); box-shadow: 0 0 18px rgba(255, 210, 63, 1); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .raid-chip.war.hot, .raid-chip.war.pop { animation: none; } }
/* The Golden Hour's ✨ chip (rpg/ui-golden.js), first under the minimap from an hour before it to its end: gold on navy,
   a slow shimmer while Goldyena is out (Go / Join), still before it and once it's beaten. */
.raid-chip.golden { border-color: #ffd23f; background: linear-gradient(180deg, rgba(60, 44, 8, 0.94), rgba(12, 16, 44, 0.94)); box-shadow: 0 0 8px rgba(255, 210, 63, 0.4); }
.raid-chip.golden em { flex: none; font-style: normal; font-size: 14px; line-height: 1; }
.raid-chip.golden b { color: #ffe680; }
.raid-chip.golden span { color: #ffd23f; font-weight: 700; }
.raid-chip.golden.join { animation: golden-glow 1.8s ease-in-out infinite; }
@keyframes golden-glow { 0%, 100% { box-shadow: 0 0 6px rgba(255, 210, 63, 0.4); } 50% { box-shadow: 0 0 16px rgba(255, 222, 90, 0.95); } }
@media (prefers-reduced-motion: reduce) { .raid-chip.golden.join { animation: none; } }
/* The fight against Solmane is on: Join jumps in (gold button); a hero who fell in it sees it greyed, out until the next party. */
.raid-chip.golden.live i { color: #1a1030; background: #ffd23f; }
.raid-chip.golden.fell { filter: saturate(0.35); opacity: 0.8; box-shadow: none; }
.raid-chip.golden .gold-q { cursor: help; } /* its one "?": the Golden Hour's page of the docs (ui-golden.js) */
/* A raid gathering's and the Golden/Silver Hour's ×: hides that chip (ui-rpg.js renderRaidChips, ui-golden.js goldenHidden).
   Plain, so it never reads as a second Join. */
.raid-chip i.chip-x, .raid-chip:hover i.chip-x { min-width: 20px; padding: 0; color: var(--muted); background: #141d40; font-size: 15px; }
.raid-chip i.chip-x:hover { color: #fff; background: #4a1f2e; }
.raid-chip.golden .gold-q:hover { color: #1a1030; background: #ffd23f; }
/* The Silver Hour's chip (10:00 UTC, ui-golden.js): the same chip in moonlit silver. */
.raid-chip.golden.silver { border-color: #c9d6f2; background: linear-gradient(180deg, rgba(40, 48, 72, 0.94), rgba(12, 16, 44, 0.94)); box-shadow: 0 0 8px rgba(190, 210, 255, 0.4); }
.raid-chip.golden.silver b { color: #e8eeff; }
.raid-chip.golden.silver span { color: #c9d6f2; }
.raid-chip.golden.silver.join { animation-name: silver-glow; }
@keyframes silver-glow { 0%, 100% { box-shadow: 0 0 6px rgba(190, 210, 255, 0.35); } 50% { box-shadow: 0 0 14px rgba(210, 225, 255, 0.85); } }
.raid-chip.golden.silver.live i, .raid-chip.golden.silver .gold-q:hover { color: #141a30; background: #c9d6f2; }
/* On a phone, the Golden or Silver Hour's chip is the boosts' size, not a computer's (owner, 2026-11-01: "the silver/golden
   hour tags are still too big on mobile"): 21 px tall, no wider than the quest tracker. After the rules above, so the ×'s
   own size (.raid-chip:hover i.chip-x) doesn't win back on a tap. */
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (min-width: 561px) {
  .raid-chip.golden { max-width: 212px; height: 21px; gap: 4px; padding: 0 2px 0 5px; border-radius: 6px; }
  .raid-chip.golden em { font-size: 11px; }
  .raid-chip.golden b { font-size: 12px; }
  .raid-chip.golden :is(span, small) { font-size: 11px; }
  .raid-chip.golden i { min-width: 0; height: 16px; padding: 0 4px; border-radius: 4px; font-size: 11px; }
  .raid-chip.golden .gold-q { min-width: 16px; padding: 0; }
  .raid-chip.golden i.chip-x, .raid-chip.golden:hover i.chip-x { min-width: 16px; padding: 0; font-size: 12px; }
}
/* The Siege Hour's chip (the hour before and after each boss hour, rpg/ui-siege.js shChipHTML): the same chip in castle stone;
   it shimmers while sieges can be laid (Siege / Defend). */
.raid-chip.golden.siegehr { border-color: #aebbd4; background: linear-gradient(180deg, rgba(58, 64, 80, 0.95), rgba(12, 16, 44, 0.94)); box-shadow: 0 0 8px rgba(174, 187, 212, 0.4); }
.raid-chip.golden.siegehr b { color: #eef2fa; }
.raid-chip.golden.siegehr.join { animation-name: siegehr-glow; }
@keyframes siegehr-glow { 0%, 100% { box-shadow: 0 0 6px rgba(174, 187, 212, 0.35); } 50% { box-shadow: 0 0 15px rgba(159, 208, 255, 0.9); } }
.raid-chip.golden.siegehr .gold-q:hover { color: #141a30; background: #aebbd4; }
/* The Golden Ring's window (rpg/ui-golden.js goldenMarkPanel): where Solmane fell, its best rewards, the next Golden Hour. */
.gm-panel h3 { margin: 0 0 8px; font: 15px/1.2 "Titan One", sans-serif; color: #ffe680; }
.gm-box { margin: 12px 0; padding: 12px 14px; border: 1px solid rgba(255, 210, 63, 0.55); border-radius: 12px; background: linear-gradient(180deg, rgba(60, 44, 8, 0.55), rgba(12, 16, 44, 0.6)); }
.gm-rows { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.gm-rows li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; background: rgba(10, 16, 48, 0.7); }
.gm-rows li:first-child { box-shadow: inset 0 0 0 1px #ffd23f; }
.gm-rank { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #ffd23f; color: #1a1030; font: 13px/1 "Titan One", sans-serif; }
.gm-rows li:not(:first-child) .gm-rank { background: #8a7a4a; color: #fff6d8; }
.gm-name { min-width: 0; overflow-wrap: anywhere; font-weight: 700; }
.gm-name small { opacity: 0.7; font-weight: 400; }
.gm-xp { font: 15px/1 "Titan One", sans-serif; color: #ffd23f; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gm-when { margin: 0; font-size: 15px; }
.gm-when b { font: 22px/1.1 "Titan One", sans-serif; color: #ffd23f; }
.gm-count { margin: 4px 0 6px; font: 15px/1 "Titan One", sans-serif; color: #fff0a0; font-variant-numeric: tabular-nums; }
.gm-panel a { color: #ffd23f; }
/* 🗿 The Golden Obelisk's window (rpg/ui-golden.js obeliskHTML): what's on, then each boss fight of the hour as a card that
   folds open to its damage meter (the .bt-stats table a team fight shows at its end). */
.ob-stats h3 { margin: 14px 0 6px; font: 15px/1.2 "Titan One", sans-serif; color: #ffe680; }
.ob-fight { margin: 8px 0; border: 1px solid rgba(255, 210, 63, 0.4); border-radius: 10px; background: rgba(10, 16, 48, 0.7); }
.ob-fight.lost { border-color: rgba(200, 210, 255, 0.25); }
.ob-fight > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 8px 12px; cursor: pointer; list-style-position: inside; }
.ob-fight > summary b { color: #fff; }
.ob-fight > summary span { color: #ffd23f; font-size: 14px; }
.ob-fight.lost > summary span { color: #c9d3ff; }
.ob-fight > summary small { flex-basis: 100%; color: var(--muted); font-size: 13px; }
.ob-fight .bt-stats { margin: 0 8px 8px; max-height: none; }
.ob-fight .ob-xp { margin: 0 12px 10px; font-size: 13px; }
/* The 𝕏 Raid call (xraid-call.js): after 1, 2 and 3 hours of play, for 5 minutes, its own box under the raid chips: a row
   like the X task's (.x-task above: its square, X's icon), a little more compact, with today's count in gold. */
.xcall-box { display: flex; flex-direction: column; align-items: flex-end; }
.xcall-box[hidden] { display: none; }
.x-task.xcall { gap: 5px; padding: 2px 8px 2px 4px; }
.x-task.xcall .xt-go { font-size: 14px; }
.x-task.xcall .xt-go img { width: 18px; height: 18px; }
.x-task.xcall .xt-go b { color: var(--gold); }
/* 🎙 ZAZA live on X (x-live.js): a show on X that ZAZA is on, a card right under the card hunt clock from a day before it
   (owner, 2026-10-14: "put this in the middle unther the countdown"): its head (🎙 ZAZA on 𝕏, the start in UTC, the
   countdown in gold), the show, its two links side by side (🔔 Set a reminder on X in X's white, Join the host's Telegram
   in Telegram's blue) and a gold line asking you to come support ZAZA; red with LIVE while it's on. Its head folds it to
   that one line. Desktop: fixed at the top centre under the clock, as hunt.css lifts the clock, and the quest and area
   banners drop below it; phones: under the clock under the ZAZA WORLD box, as wide as it, short labels one a row. */
.xlive-box { display: flex; flex-direction: column; align-items: center; pointer-events: auto; }
.xlive-box[hidden] { display: none; }
/* In X Spaces' purple (owner, 2026-10-14: "make it pop more.. cooler colors", then "that is a bit too much.. put the mic
   bigger"): a deep violet card with a soft violet border, standing still, and a big 🎙. */
.xlive-card { display: flex; flex-direction: column; gap: 6px; box-sizing: border-box; width: max-content; max-width: 100%; padding: 6px 8px 7px; border-radius: 12px; border: 2px solid #a78bfa; background: linear-gradient(135deg, rgba(67, 32, 158, 0.95), rgba(13, 22, 80, 0.95)); box-shadow: 0 0 10px rgba(167, 139, 250, 0.35), 0 4px 12px rgba(0, 0, 0, 0.4); color: #ede9fe; font-size: 14px; line-height: 1.2; }
.xlive-card.folded { padding: 4px 6px; }
.xl-head { display: flex; align-items: center; gap: 7px; width: 100%; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; white-space: nowrap; text-align: left; cursor: pointer; }
.xl-head em { flex: none; margin: -3px 0; font-style: normal; font-size: 24px; line-height: 1; }
.xl-head b { font-family: var(--display); font-weight: 400; font-size: 16px; color: #fff; }
.xl-head mark { background: none; color: #d8b4fe; } /* "Spaces" */
.xl-head u { text-decoration: none; font-size: 15px; font-weight: 700; color: #ddd6fe; }
.xl-head small { margin-left: auto; color: var(--gold); font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; text-shadow: 0 1px 0 #000a2e; }
.xl-head span { color: #ff6b78; font-weight: 700; letter-spacing: 0.04em; }
.xl-head span + u { margin-left: auto; }
.xl-head i { flex: none; min-width: 22px; height: 20px; padding: 0 5px; box-sizing: border-box; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 13px; color: #fff; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 5px; }
.xl-head:hover i { background: rgba(255, 255, 255, 0.24); }
.xl-what { margin: 0; font-size: 13px; color: #c4b5fd; }
.xl-what b { color: #fff; }
.xl-links { display: flex; flex-wrap: wrap; gap: 6px; }
.xl-go { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; min-height: 30px; padding: 3px 10px; border-radius: 8px; font-weight: 700; font-size: 14px; white-space: nowrap; text-decoration: none; box-shadow: 0 2px 0 #000a2e; }
.xl-go:hover { filter: brightness(1.08); }
.xl-go:active { transform: translateY(1px); box-shadow: none; }
.xl-go em { flex: none; font-style: normal; font-size: 15px; line-height: 1; }
.xl-go i { flex: none; font-style: normal; opacity: 0.75; }
.xl-go.xl-x { background: #fff; border: 1px solid #000; color: #0f1419; }
.xl-go.xl-tg { background: #229ed9; border: 1px solid #0b5f8a; color: #fff; }
.xl-go .tg-logo { flex: none; display: block; }
.xl-go.xl-tg .tg-logo circle { fill: #fff; }
.xl-go.xl-tg .tg-logo path { fill: #229ed9; }
.xl-go .xl-s { display: none; }
.xl-go .xl-n { flex: none; font-weight: 800; } /* its step, 1) or 2), before its logo */
.xl-ask { margin: 0; text-align: center; font-size: 13px; font-weight: 700; color: var(--gold); }
.xlive-card.live { border-color: #ff3b4e; background: linear-gradient(180deg, rgba(70, 8, 16, 0.94), rgba(14, 10, 30, 0.94)); animation: xlive-glow 1.6s ease-in-out infinite; }
.xlive-card.live .xl-head i { color: #fff; background: #e0243a; }
@keyframes xlive-glow { 0%, 100% { box-shadow: 0 0 6px rgba(255, 59, 78, 0.45); } 50% { box-shadow: 0 0 16px rgba(255, 59, 78, 0.95); } }
@media (prefers-reduced-motion: reduce) { .xlive-card.live { animation: none; } }
@media (min-width: 761px) and (min-height: 501px) {
  .hud-tr .xlive-box { position: fixed; left: 50%; top: 82px; z-index: 6; transform: translateX(-50%); max-width: max(260px, calc(100vw - 580px)); }
  .hud-tr .hunt-pill[hidden] + .xlive-box, .hud.hide-drop .hud-tr .xlive-box { top: 44px; }
  html:has(.hud:not(.fold-quests, .hide-live) .hud-tr #xLive:not([hidden])) :is(.quest-banner, .area-banner) { translate: 0 var(--xlive-push, 130px); }
  html:has(.hud-tr #xLive .xlive-card.folded) { --xlive-push: 46px; }
}
@media (min-width: 900px) and (min-height: 501px) { .hud-tr .xlive-box { top: 88px; } }
/* … a narrow window: the head wraps after the fold button, the start in UTC and the countdown under it, and the show's
   line goes. */
@media (min-width: 761px) and (max-width: 899px) and (min-height: 501px) {
  .hud-tr .xl-head { flex-wrap: wrap; row-gap: 3px; }
  .hud-tr .xl-head i { order: 2; margin-left: auto; }
  .hud-tr .xl-head::after { content: ""; order: 3; flex-basis: 100%; height: 0; }
  .hud-tr .xl-head u { order: 5; }
  .hud-tr .xl-head small { order: 6; }
  .hud-tr .xl-what { display: none; }
}
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (min-width: 561px) {
  .hud-under > .xlive-box { align-items: stretch; }
  .hud-under .xlive-card { width: auto; gap: 4px; padding: 4px 5px 5px; border-width: 1.5px; font-size: 12px; }
  .hud-under .xl-head { flex-wrap: wrap; gap: 2px 5px; }
  .hud-under .xl-head em { margin: -2px 0; font-size: 16px; }
  .hud-under .xl-head b { font-size: 12px; } /* "ZAZA on 𝕏 Spaces" and the fold button on one line, the 🎙 left out */
  .hud-under .xlive-card:not(.live) .xl-head em { display: none; }
  .hud-under .xl-head u { order: 5; flex: 1 1 auto; font-size: 11px; }
  .hud-under .xl-head small { order: 6; font-size: 14px; }
  .hud-under .xl-head i { order: 2; margin-left: auto; min-width: 18px; height: 17px; font-size: 11px; }
  .hud-under .xl-head::after { content: ""; order: 3; flex-basis: 100%; height: 0; } /* the fold button ends the first line */
  .hud-under .xl-head span { order: 4; font-size: 11px; }
  .hud-under .xl-head span + u { margin-left: 0; }
  .hud-under :is(.xl-what, .xl-ask) { display: none; }
  .hud-under .xl-links { flex-direction: column; gap: 4px; }
  .hud-under .xl-go { justify-content: flex-start; gap: 5px; min-height: 24px; padding: 2px 6px; font-size: 12px; }
  .hud-under .xl-go em { font-size: 13px; }
  .hud-under .xl-go .tg-logo { width: 14px; height: 14px; }
  .hud-under .xl-go i { margin-left: auto; }
  .hud-under .xl-go .xl-l { display: none; }
  .hud-under .xl-go .xl-s { display: inline; }
  .hud-panel:not(.is-minimized) > .hud-under > .xlive-box { display: none; } /* the opened box has the screen: no room */
}

/* Invitations: duels, parties and squads. */
.invites { position: absolute; right: 12px; top: 200px; z-index: 10; display: grid; gap: 8px; width: min(320px, calc(100vw - 24px)); pointer-events: none; }
.invite { pointer-events: auto; padding: 10px 12px; animation: inv-in 0.25s ease; }
.invite b { color: var(--gold); font-size: 16px; }
.invite p { margin: 4px 0 8px; font-size: 14px; line-height: 1.3; color: #dfe6ff; }
.invite small { color: var(--muted); margin-left: auto; }
.invite.arena .row + .row { margin-top: 6px; }
.invite.arena select { flex: 1; min-width: 0; font: inherit; font-size: 15px; background: #0d1638; color: var(--text); border: 1px solid #3b4c80; border-radius: 6px; padding: 5px 6px; }
.siege-rally { position: relative; display: grid; gap: 5px; border-color: #ff6a2a; box-shadow: 0 0 0 2px #1b1424, 0 0 18px rgba(255, 90, 30, 0.3); background: linear-gradient(180deg, rgba(58, 12, 8, 0.96), rgba(20, 12, 30, 0.96)); }
.siege-rally > b { padding-right: 34px; }
.siege-rally > .siege-min { top: 7px; right: 7px; }
.siege-rally > p { margin: 0; padding: 4px 6px; border: 1px solid rgba(255, 210, 63, 0.2); border-radius: 5px; background: rgba(3, 10, 44, 0.35); font-size: 13px; }
.siege-rally > p strong { color: #fff; }
.siege-rally > .row { flex-wrap: wrap; gap: 6px; }
.siege-rally > .row .btn { flex: 1 1 155px; }
.siege-rally > .row small { white-space: nowrap; }
/* ⭐ The line-up (rpg/ui-rpg.js renderInvites): the side's commander taps names to pick who fights; the rest see ⭐ by them. */
.siege-rally .sg-picks { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.siege-rally .sg-pk { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border: 1px solid #5a4a7a; border-radius: 999px; background: rgba(3, 10, 44, 0.6); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.siege-rally .sg-pk small { color: var(--muted); }
.siege-rally .sg-pk.on { border-color: var(--gold); background: rgba(255, 210, 63, 0.16); color: #fff; box-shadow: 0 0 6px rgba(255, 210, 63, 0.35); }
.siege-rally .sg-pk.out:not(.on) { opacity: 0.55; }
.siege-rally .sg-pk:disabled { opacity: 0.6; cursor: progress; }
.siege-rally p i[aria-label="picked"] { font-style: normal; margin-right: 2px; }
.siege-rally .sg-cmd { display: block; color: #ffd23f; font-size: 12px; line-height: 1.35; }
.raid-chip.siege-chip { border-color: #ff6a2a; box-shadow: 0 0 8px rgba(255, 90, 30, 0.45); }

/* Trading with another player (ui-rpg.js renderTrade): both offers side by side, your bag below. */
.trade { position: absolute; left: 50%; top: 58px; transform: translateX(-50%); z-index: 9; width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 80px); overflow-y: auto; padding: 10px 12px 12px; display: grid; gap: 8px; }
.trade h4 { margin: 0 0 4px; font-size: 14px; color: var(--gold); letter-spacing: 0.06em; text-transform: uppercase; }
.trade h4 small { color: var(--muted); text-transform: none; letter-spacing: 0; font-size: 13px; }
.trade-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.trade-head b { font-family: var(--display); font-weight: 400; color: var(--gold); font-size: 21px; }
.trade-x { flex: none; width: 30px; height: 30px; border-radius: 6px; background: #7a2a2a; border: 1px solid #000; color: #fff; }
.trade-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.trade-side { min-width: 0; min-height: 96px; padding: 8px; border-radius: 8px; background: rgba(3, 10, 44, 0.6); border: 2px solid #2e3d74; }
.trade-side.ok { border-color: #5fe86f; }
.trade-side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.trade-side li { display: flex; align-items: center; gap: 6px; font-size: 15px; }
.trade-side li > span { flex: 1; min-width: 0; }
.trade-side li small, .trade-gear small { color: var(--muted); font-size: 12px; }
.trade-none { color: var(--muted); font-size: 14px; }
.trade-rm { flex: none; background: #141d40; border: 1px solid #000; border-radius: 5px; color: var(--muted); padding: 0 6px; }
.trade-ok { display: block; margin-top: 6px; color: #7dffa0; font-size: 14px; }
.trade-warn { font-style: normal; color: #ffb36b; font-size: 12px; }
.trade-bag { padding: 8px; border-radius: 8px; background: rgba(3, 10, 44, 0.45); }
.trade-bag .pane-note { margin: 4px 0 0; }
.trade-bag-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; } /* a phone puts the picker under Your bag */
.trade-step { display: flex; gap: 2px; }
.trade-step button { min-width: 36px; padding: 2px 8px; font-size: 14px; color: var(--muted); background: #141d40; border: 1px solid #000; border-radius: 5px; }
.trade-step button.on { color: var(--navy-900); background: var(--gold); }
.trade-mats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: 4px 0; }
.trade-mats button { display: grid; justify-items: center; gap: 1px; padding: 4px 2px; border-radius: 6px; background: #141d40; border: 1px solid #2e3d74; color: var(--text); }
.trade-mats button:disabled { opacity: 0.4; cursor: default; }
.trade-mats b { font-size: 15px; }
.trade-mats small { font-size: 11px; line-height: 1.1; color: var(--muted); text-align: center; }
.trade-gear { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.trade-gear button { display: flex; align-items: center; gap: 4px; padding: 3px 8px 3px 4px; border-radius: 6px; background: #141d40; border: 1px solid #2e3d74; color: var(--text); font-size: 14px; text-align: left; }
.trade-mats button:not(:disabled):hover, .trade-gear button:hover { border-color: var(--gold); }
.trade-foot { display: flex; align-items: center; gap: 6px; }
.trade-msg { flex: 1; margin: 0; font-size: 14px; line-height: 1.3; color: #dfe6ff; }
.trade-msg b { color: #7dffa0; font-weight: 400; }
/* $ZAZA in a trade (rpg/core-ztrade.js): the amount over your bag, its row on a side, and once both accept the payment step. */
.trade-zz { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 8px; padding: 7px 9px; border-radius: 8px; background: rgba(255, 210, 63, 0.08); border: 1px solid rgba(255, 210, 63, 0.45); }
.trade-zz > img { border-radius: 50%; image-rendering: auto; }
.trade-zz > b { color: var(--gold); font-size: 16px; }
.trade-zz input { flex: 1 1 120px; min-width: 0; height: 32px; padding: 0 8px; border-radius: 6px; background: #0b1440; border: 1px solid #3a4c8a; color: #fff; font: inherit; font-size: 16px; font-variant-numeric: tabular-nums; }
.trade-zz input:focus { outline: 0; border-color: var(--gold); }
.trade-zz .btn { min-height: 32px; }
.trade-zz-no { flex: 1 1 200px; color: var(--muted); font-size: 13px; line-height: 1.3; }
.trade-side li.trade-zz-row { align-items: flex-start; }
.trade-zz-row > img { flex: none; margin-top: 1px; border-radius: 50%; image-rendering: auto; }
.trade-zz-row b { color: var(--gold); }
.trade-zz-row small { display: block; line-height: 1.25; }
.trade-pay { padding: 10px 12px; border-radius: 8px; background: rgba(255, 210, 63, 0.08); border: 1px solid rgba(255, 210, 63, 0.5); }
.trade-pay p { margin: 0 0 8px; font-size: 15px; line-height: 1.35; color: #eef1ff; }
.trade-pay p b { color: var(--gold); font-weight: 400; }
.trade-pay-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.trade-pay-left { color: #ffd98a; font-size: 14px; font-variant-numeric: tabular-nums; }
.trade-pay .trade-pay-line { margin: 8px 0 0; font-size: 14px; color: #dfe6ff; }
.trade-pay .trade-pay-line.err { color: #ff9b9b; }
.trade-pay .trade-pay-line.ok { color: #7dffa0; }
.bag-gear > span small { font-size: 12px; color: var(--muted); }
.follow-bar { min-width: 0; flex-direction: column; align-items: stretch; gap: 4px; }
.follow-bar > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.follow-bar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (min-width: 561px) {
  .trade { top: 8px; width: calc(100vw - 16px); max-height: calc(100vh - 222px); } /* above the chat */
  .trade-head b { font-size: 18px; }
}
@keyframes inv-in { from { transform: translateX(30px); opacity: 0; } }

/* ---------------------------------------------------------------- battles: first-person scene + Pokémon-style boxes */
.battle { position: fixed; inset: 0; z-index: 30; overflow: hidden; background: #030a2c; }
.bt-scene { position: absolute; left: 0; top: 0; image-rendering: pixelated; image-rendering: crisp-edges; }
.battle::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 90px rgba(3, 10, 44, 0.55); }
/* GBA-style info boxes. */
.bt-foes { position: absolute; left: 16px; top: 16px; z-index: 2; display: grid; gap: 6px; width: min(300px, 46vw); }
/* Your box sits top-right, across from the foe's, so both hands stay in view; teammates stack under it. */
.bt-me { position: absolute; right: 16px; top: 16px; z-index: 2; width: min(320px, 46vw); }
.bt-allies { position: absolute; right: 16px; top: 128px; z-index: 2; display: grid; gap: 6px; width: min(240px, 36vw); }
/* What's going on out there while you fight (rpg/ui-fight-alerts.js): your squad's wars, raids gathering and messages to
   you, one chip each, under your box (ui-fight-alerts.js placeFightAlerts sets top, right and width from your box;
   teammates go under; opened past their room, it lies over their boxes). */
.bt-alerts { position: absolute; right: 16px; top: 0; z-index: 3; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; pointer-events: none; }
.bt-alerts[hidden] { display: none; }
.bt-alerts > * { pointer-events: auto; max-width: 100%; }
.bt-alerts .raid-chip { max-width: 100%; }
.raid-chip.dm { border-color: var(--dm, #ff9fd0); box-shadow: 0 0 6px color-mix(in srgb, var(--dm, #ff9fd0) 30%, transparent); }
.raid-chip.dm b { flex: 0 0 auto; max-width: 45%; color: var(--dm, #ff9fd0); } /* the name stays whole; the message gets the … */
.raid-chip.dm span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--dm-t, #ffd6ea); font-size: 14px; }
.raid-chip.queued i, .raid-chip.join.queued i { color: #06102e; background: var(--cyan); }
.raid-chip.fa-more { border-color: #4a5c9a; box-shadow: none; color: var(--cyan); font-size: 13px; }
.bt-alerts .raid-chip.dm, .bt-alerts .raid-chip.fa-more { background: rgba(6, 12, 40, 0.96); } /* readable over a teammate's box when opened */
.fa-dm { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.fa-note { width: 100%; box-sizing: border-box; padding: 6px 8px; border-radius: 8px; background: rgba(6, 12, 40, 0.94); border: 1px solid var(--dm, #ff9fd0); color: #fff; font-size: 14px; line-height: 1.3; }
.fa-note p { margin: 0 0 4px; overflow-wrap: anywhere; }
.fa-note div { display: flex; justify-content: flex-end; gap: 6px; }
.fa-note .btn { min-height: 30px; padding: 0 10px; font-size: 14px; }
.gba { position: relative; padding: 7px 12px 8px; border-radius: 10px 10px 10px 2px; background: linear-gradient(180deg, #fbf8e8, #ebe3c4); color: #1b1424; border: 3px solid #2a2a3a; box-shadow: 0 4px 0 rgba(3, 10, 44, 0.6), inset 0 0 0 2px #fff; }
.gba.big { border-radius: 10px 10px 2px 10px; }
/* Each fighter's picture sits at the left of its box: profile picture, class avatar or creature portrait. */
.gba.pic { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center; }
.gba-main { min-width: 0; }
.gba-pic { width: 44px; height: 44px; border: 2px solid #2a2a3a; border-radius: 8px; background: radial-gradient(circle at 50% 40%, #fffbe8, #d9cfa3); object-fit: cover; box-shadow: inset 0 0 0 2px #fff; }
.gba-pic.px { object-fit: contain; image-rendering: pixelated; }
.gba.big .gba-pic { width: 58px; height: 58px; }
@media (max-width: 560px) { .gba-pic { width: 34px; height: 34px; } .gba.big .gba-pic { width: 42px; height: 42px; } }
/* A player's box (rpg/ui-rpg.js gbaBox): its border in a holder's tier colour (.gba-tier), dark on anyone else, with a dark
   line outside; their face on a dark tile framed and lit in their class's colour, and the class's
   name on a small tag across the tile's bottom edge. The tile's inside is a whole number of the face's 16 px (3× on a
   computer, 2.5× elsewhere), so its pixels stay even. */
.gba.cls, .gba.gba-tier { box-shadow: 0 0 0 2px #1b1424, 0 4px 0 2px rgba(3, 10, 44, 0.6), inset 0 0 0 2px #fff; }
.gba.gba-tier { border-color: var(--tc); }
/* The box itself is filled with the holder's tier colour, deepened (in oklch, so gold stays gold) and glowing toward the
   right; a player without $ZAZA gets the same in slate (owner, 2026-11-03: "we keep the deep color for sure"). No tier
   emblem in a fight: by the level it read as their move's icon (owner, 2026-11-03: "dont display during fights... display
   only on watcher or profile"). The words turn light on it. A browser without color-mix keeps the slate. */
.gba.cls { --rk: var(--tc, #8a8aa0); color: #fff; background: linear-gradient(160deg, #3a3f52, #1b1d2a 80%); background: radial-gradient(90% 160% at 78% 50%, color-mix(in srgb, var(--rk) 42%, transparent), transparent 70%), linear-gradient(160deg, color-mix(in oklch, var(--rk) 64%, #000), color-mix(in oklch, var(--rk) 30%, #000) 80%); box-shadow: 0 0 0 2px #1b1424, 0 4px 0 2px rgba(3, 10, 44, 0.6), inset 0 0 0 2px rgba(255, 255, 255, 0.2), inset 0 0 18px color-mix(in srgb, var(--rk) 35%, transparent); }
.gba.cls .gba-top b { color: #fff; text-shadow: 0 2px 0 #000, 0 0 8px rgba(0, 0, 0, 0.7); }
.gba.cls .gba-top span, .gba.cls .gba-num, .gba.cls .gba-pet b { color: #f2edf9; text-shadow: 0 2px 0 #000, 0 0 6px rgba(0, 0, 0, 0.8); }
.gba.cls .gba-top .rdy { color: #7dffa0; } .gba.cls .gba-top .rdy.wait { color: #c9c3d8; }
.gba.cls .pips i { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.4); }
.gba.cls .pips i.on { background: #ffd23f; border-color: #8a6410; }
.gba.cls :is(.gba-bar, .gba-hp em) { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55); }
.gba.cls .gba-cl small { color: #d8d2e6; } .gba.cls .gba-cl .cl-none { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.3); }
/* Card skins (wardrobe.js card_*, worn from the Wardrobe's Card slot; owner, 2026-11-03: skins "like CS2 / FaceIt player
   cards" on the fight boxes and profiles, "only put like 2 super rare ones.. and 2 regular"). Each sets --skin-pat (its
   pattern over the rank-coloured base) and a painted one --skin-art (its painting, faded at its left edge, assets/skins),
   both in the wearer's rank colour (--rk). A super rare (.skin-rare, painted) one also gets a foil rim inside the rank
   border, a glow of its colour and a slow light sweep. Only where color-mix works; elsewhere the plain box stays. */
@supports (background: color-mix(in oklch, red, blue)) {
  [data-skin] { --skin-base: radial-gradient(90% 160% at 78% 50%, color-mix(in srgb, var(--rk) 42%, transparent), transparent 70%), linear-gradient(160deg, color-mix(in oklch, var(--rk) 64%, #000), color-mix(in oklch, var(--rk) 30%, #000) 80%); --skin-art: none; --skin-fit: 100% 50% / auto 108%; }
  [data-skin="card_carbon"] { --skin-pat: linear-gradient(112deg, transparent 58%, rgba(255,255,255,0.1) 58% 61%, transparent 61% 64%, rgba(255,255,255,0.2) 64% 71%, transparent 71% 74%, rgba(255,255,255,0.1) 74% 76%, transparent 76%), linear-gradient(45deg, rgba(0,0,0,.34) 25%, transparent 25% 75%, rgba(0,0,0,.34) 75%) 0 0 / 8px 8px, linear-gradient(45deg, rgba(255,255,255,0.07) 25%, transparent 25% 75%, rgba(255,255,255,0.07) 75%) 4px 4px / 8px 8px, linear-gradient(180deg, rgba(255,255,255,0.14), transparent 42%), linear-gradient(160deg, color-mix(in oklch, var(--rk) 64%, #000), color-mix(in oklch, var(--rk) 30%, #000) 80%); }
  [data-skin="card_circuit"] { --skin-pat: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2060%2060'%3E%3Cg%20fill%3D'none'%20stroke%3D'%23fff'%20stroke-opacity%3D'.55'%20stroke-width%3D'1.4'%3E%3Crect%20x%3D'16'%20y%3D'16'%20width%3D'28'%20height%3D'28'%20rx%3D'3'%2F%3E%3Crect%20x%3D'22'%20y%3D'22'%20width%3D'16'%20height%3D'16'%20rx%3D'2'%20stroke-opacity%3D'.35'%2F%3E%3Cpath%20d%3D'M22%2016V8M30%2016V4M38%2016V8M22%2044v8M30%2044v12M38%2044v8M16%2022H8M16%2030H2M16%2038H8M44%2022h8M44%2030h14M44%2038h8'%2F%3E%3C%2Fg%3E%3Cg%20fill%3D'%23fff'%20fill-opacity%3D'.7'%3E%3Ccircle%20cx%3D'22'%20cy%3D'8'%20r%3D'1.6'%2F%3E%3Ccircle%20cx%3D'30'%20cy%3D'4'%20r%3D'1.6'%2F%3E%3Ccircle%20cx%3D'38'%20cy%3D'8'%20r%3D'1.6'%2F%3E%3Ccircle%20cx%3D'22'%20cy%3D'52'%20r%3D'1.6'%2F%3E%3Ccircle%20cx%3D'38'%20cy%3D'52'%20r%3D'1.6'%2F%3E%3Ccircle%20cx%3D'8'%20cy%3D'22'%20r%3D'1.6'%2F%3E%3Ccircle%20cx%3D'2'%20cy%3D'30'%20r%3D'1.6'%2F%3E%3Ccircle%20cx%3D'8'%20cy%3D'38'%20r%3D'1.6'%2F%3E%3Ccircle%20cx%3D'52'%20cy%3D'22'%20r%3D'1.6'%2F%3E%3Ccircle%20cx%3D'52'%20cy%3D'38'%20r%3D'1.6'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") right -6px center / auto 150% no-repeat, radial-gradient(70% 150% at 86% 50%, color-mix(in srgb, var(--rk) 55%, transparent), transparent 70%), url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'44'%20height%3D'44'%3E%3Cg%20fill%3D'none'%20stroke%3D'%23fff'%20stroke-opacity%3D'.2'%20stroke-width%3D'1.3'%3E%3Cpath%20d%3D'M0%2010h12l6%206v12h10l4-4h12M20%200v6M28%2044v-8l6-6h10M0%2034h6l4%204v6M38%200v8l-4%204'%2F%3E%3C%2Fg%3E%3Cg%20fill%3D'%23fff'%20fill-opacity%3D'.42'%3E%3Ccircle%20cx%3D'20'%20cy%3D'6'%20r%3D'1.8'%2F%3E%3Ccircle%20cx%3D'28'%20cy%3D'36'%20r%3D'1.8'%2F%3E%3Ccircle%20cx%3D'10'%20cy%3D'38'%20r%3D'1.8'%2F%3E%3Ccircle%20cx%3D'34'%20cy%3D'12'%20r%3D'1.8'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 0 0 / 44px 44px, linear-gradient(180deg, rgba(255,255,255,0.14), transparent 42%), linear-gradient(160deg, color-mix(in oklch, var(--rk) 64%, #000), color-mix(in oklch, var(--rk) 30%, #000) 80%); }
  [data-skin="card_tide"] { --skin-pat: linear-gradient(0deg, rgba(255,255,255,0.16) 0 2px, transparent 2px) 0 100% / 100% 4px no-repeat, radial-gradient(circle at 50% 100%, transparent 0 3px, rgba(255,255,255,0.16) 3px 4.2px, transparent 4.2px 7px, rgba(255,255,255,0.16) 7px 8.2px, transparent 8.2px 11px, rgba(255,255,255,0.16) 11px 12.2px, transparent 12.2px) 0 0 / 26px 13px, radial-gradient(circle at 50% 100%, transparent 0 3px, rgba(255,255,255,0.16) 3px 4.2px, transparent 4.2px 7px, rgba(255,255,255,0.16) 7px 8.2px, transparent 8.2px 11px, rgba(255,255,255,0.16) 11px 12.2px, transparent 12.2px) 13px 6.5px / 26px 13px, radial-gradient(70% 150% at 90% 100%, color-mix(in srgb, var(--rk) 45%, transparent), transparent 70%), linear-gradient(180deg, rgba(255,255,255,0.14), transparent 42%), linear-gradient(160deg, color-mix(in oklch, var(--rk) 64%, #000), color-mix(in oklch, var(--rk) 30%, #000) 80%); }
  [data-skin="card_arcane"] { --skin-pat: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20100%20100'%3E%3Cg%20fill%3D'none'%20stroke%3D'%23fff'%20stroke-linecap%3D'round'%3E%3Ccircle%20cx%3D'50'%20cy%3D'50'%20r%3D'46'%20stroke-opacity%3D'.45'%20stroke-width%3D'1.2'%2F%3E%3Ccircle%20cx%3D'50'%20cy%3D'50'%20r%3D'40'%20stroke-opacity%3D'.3'%20stroke-width%3D'.8'%2F%3E%3Ccircle%20cx%3D'50'%20cy%3D'50'%20r%3D'16'%20stroke-opacity%3D'.45'%20stroke-width%3D'1'%2F%3E%3Cpath%20d%3D'M50%2014%2081.2%2068H18.8ZM50%2086%2018.8%2032h62.4Z'%20stroke-opacity%3D'.4'%20stroke-width%3D'.9'%2F%3E%3Cpath%20d%3D'M90.0%2050.0L96.0%2050.0'%20stroke-opacity%3D'.5'%20stroke-width%3D'.9'%2F%3E%3Cpath%20d%3D'M88.6%2060.4L91.5%2061.1'%20stroke-opacity%3D'.5'%20stroke-width%3D'.9'%2F%3E%3Cpath%20d%3D'M84.6%2070.0L89.8%2073.0'%20stroke-opacity%3D'.5'%20stroke-width%3D'.9'%2F%3E%3Cpath%20d%3D'M78.3%2078.3L80.4%2080.4'%20stroke-opacity%3D'.5'%20stroke-width%3D'.9'%2F%3E%3Cpath%20d%3D'M70.0%2084.6L73.0%2089.8'%20stroke-opacity%3D'.5'%20stroke-width%3D'.9'%2F%3E%3Cpath%20d%3D'M60.4%2088.6L61.1%2091.5'%20stroke-opacity%3D'.5'%20stroke-width%3D'.9'%2F%3E%3Cpath%20d%3D'M50.0%2090.0L50.0%2096.0'%20stroke-opacity%3D'.5'%20stroke-width%3D'.9'%2F%3E%3Cpath%20d%3D'M39.6%2088.6L38.9%2091.5'%20stroke-opacity%3D'.5'%20stroke-width%3D'.9'%2F%3E%3Cpath%20d%3D'M30.0%2084.6L27.0%2089.8'%20stroke-opacity%3D'.5'%20stroke-width%3D'.9'%2F%3E%3Cpath%20d%3D'M21.7%2078.3L19.6%2080.4'%20stroke-opacity%3D'.5'%20stroke-width%3D'.9'%2F%3E%3Cpath%20d%3D'M15.4%2070.0L10.2%2073.0'%20stroke-opacity%3D'.5'%20stroke-width%3D'.9'%2F%3E%3Cpath%20d%3D'M11.4%2060.4L8.5%2061.1'%20stroke-opacity%3D'.5'%20stroke-width%3D'.9'%2F%3E%3Cpath%20d%3D'M10.0%2050.0L4.0%2050.0'%20stroke-opacity%3D'.5'%20stroke-width%3D'.9'%2F%3E%3Cpath%20d%3D'M11.4%2039.6L8.5%2038.9'%20stroke-opacity%3D'.5'%20stroke-width%3D'.9'%2F%3E%3Cpath%20d%3D'M15.4%2030.0L10.2%2027.0'%20stroke-opacity%3D'.5'%20stroke-width%3D'.9'%2F%3E%3Cpath%20d%3D'M21.7%2021.7L19.6%2019.6'%20stroke-opacity%3D'.5'%20stroke-width%3D'.9'%2F%3E%3Cpath%20d%3D'M30.0%2015.4L27.0%2010.2'%20stroke-opacity%3D'.5'%20stroke-width%3D'.9'%2F%3E%3Cpath%20d%3D'M39.6%2011.4L38.9%208.5'%20stroke-opacity%3D'.5'%20stroke-width%3D'.9'%2F%3E%3Cpath%20d%3D'M50.0%2010.0L50.0%204.0'%20stroke-opacity%3D'.5'%20stroke-width%3D'.9'%2F%3E%3Cpath%20d%3D'M60.4%2011.4L61.1%208.5'%20stroke-opacity%3D'.5'%20stroke-width%3D'.9'%2F%3E%3Cpath%20d%3D'M70.0%2015.4L73.0%2010.2'%20stroke-opacity%3D'.5'%20stroke-width%3D'.9'%2F%3E%3Cpath%20d%3D'M78.3%2021.7L80.4%2019.6'%20stroke-opacity%3D'.5'%20stroke-width%3D'.9'%2F%3E%3Cpath%20d%3D'M84.6%2030.0L89.8%2027.0'%20stroke-opacity%3D'.5'%20stroke-width%3D'.9'%2F%3E%3Cpath%20d%3D'M88.6%2039.6L91.5%2038.9'%20stroke-opacity%3D'.5'%20stroke-width%3D'.9'%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D'50'%20cy%3D'50'%20r%3D'4'%20fill%3D'%23fff'%20fill-opacity%3D'.6'%2F%3E%3C%2Fsvg%3E") right -22px center / auto 175% no-repeat, radial-gradient(70% 150% at 86% 50%, color-mix(in srgb, var(--rk) 60%, transparent), transparent 70%), radial-gradient(circle, rgba(255,255,255,0.7) 0 .8px, transparent 1.3px) 0 0 / 29px 23px, radial-gradient(circle, rgba(255,255,255,0.4) 0 .6px, transparent 1.1px) 11px 13px / 37px 31px, linear-gradient(180deg, rgba(255,255,255,0.14), transparent 42%), linear-gradient(160deg, color-mix(in oklch, var(--rk) 64%, #000), color-mix(in oklch, var(--rk) 30%, #000) 80%); }
  [data-skin="card_ignizard"] { --skin-art: url("/world/assets/skins/ignizard.webp"); --skin-pat: radial-gradient(circle at 50% 100%, transparent 9px, rgba(255,255,255,0.15) 9.5px 11px, transparent 11.5px) 0 0 / 22px 12px, radial-gradient(circle at 50% 100%, transparent 9px, rgba(255,255,255,0.15) 9.5px 11px, transparent 11.5px) 11px 6px / 22px 12px, var(--skin-base); }
  [data-skin="card_thundros"] { --skin-art: url("/world/assets/skins/thundros.webp"); --skin-pat: radial-gradient(60% 40% at 20% 30%, rgba(255,255,255,0.15), transparent 70%) 0 0 / 120px 60px, radial-gradient(50% 35% at 70% 70%, rgba(255,255,255,0.12), transparent 70%) 0 0 / 120px 60px, url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'30'%20height%3D'30'%3E%3Cpath%20d%3D'M17%203%208%2017h6l-3%2010%2011-15h-6z'%20fill%3D'%23fff'%20fill-opacity%3D'0.12'%2F%3E%3C%2Fsvg%3E") 0 0 / 30px 30px, url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'30'%20height%3D'30'%3E%3Cpath%20d%3D'M17%203%208%2017h6l-3%2010%2011-15h-6z'%20fill%3D'%23fff'%20fill-opacity%3D'0.06'%2F%3E%3C%2Fsvg%3E") 15px 15px / 30px 30px, var(--skin-base); }
  [data-skin="card_maelstros"] { --skin-art: url("/world/assets/skins/maelstros.webp"); --skin-pat: repeating-radial-gradient(circle at 0 100%, transparent 0 9px, rgba(255,255,255,0.15) 9px 10.5px, transparent 10.5px 14px) 0 0 / 28px 16px, var(--skin-base); }
  [data-skin="card_vault"] { --skin-art: url("/world/assets/skins/vault.webp"); --skin-pat: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'30'%20height%3D'30'%3E%3Cpath%20d%3D'M17%203%208%2017h6l-3%2010%2011-15h-6z'%20fill%3D'%23fff'%20fill-opacity%3D'0.15'%2F%3E%3C%2Fsvg%3E") 0 0 / 30px 30px, url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'30'%20height%3D'30'%3E%3Cpath%20d%3D'M17%203%208%2017h6l-3%2010%2011-15h-6z'%20fill%3D'%23fff'%20fill-opacity%3D'0.075'%2F%3E%3C%2Fsvg%3E") 15px 15px / 30px 30px, var(--skin-base); }
  [data-skin="card_maelstros"] { --skin-fit: 100% 0 / auto 96%; } /* his head sits low in the painting: drawn from the top */
  .gba.cls[data-skin] { background: var(--skin-art) var(--skin-fit) no-repeat, var(--skin-pat); }
  .gba.cls.skin-rare { box-shadow: 0 0 0 2px #1b1424, 0 4px 0 2px rgba(3, 10, 44, 0.6), inset 0 0 18px color-mix(in srgb, var(--rk) 35%, transparent), 0 0 16px 2px color-mix(in srgb, var(--rk) 60%, transparent); }
  .skin-rare::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; padding: 2px; pointer-events: none; background: conic-gradient(from 210deg, var(--rk), #fff 10%, color-mix(in srgb, var(--rk) 55%, #000) 22%, var(--rk) 34%, #fff6c8 48%, var(--rk) 60%, color-mix(in srgb, var(--rk) 50%, #fff) 74%, #fff 86%, var(--rk)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
  .skin-rare:not(.online-player)::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(112deg, transparent 40%, rgba(255, 255, 255, 0.2) 47%, rgba(255, 246, 200, 0.32) 48.5%, rgba(255, 255, 255, 0.2) 50%, transparent 57%) 100% 0 / 250% 100% no-repeat; animation: skin-shine 7s ease-in-out infinite; }
  @keyframes skin-shine { 0%, 60% { background-position: 100% 0; } 92%, 100% { background-position: 0% 0; } }
  @media (prefers-reduced-motion: reduce) { .skin-rare:not(.online-player)::before { animation: none; background-position: 40% 0; } }
  /* A row of the "N online" list (ui.js onlineRowsHTML) in its player's card, in their rank's colour (--tc): the painting
     at the row's right edge, round 👁 Watch, in place of the rank's big badge (its small one stays before the rank's name),
     as on a fight box. No light sweep there (the row's ::before is its rank stripe). */
  .online-player:not(.board-row)[data-skin] { --rk: var(--tc); background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 44%), var(--skin-art) 100% 50% / auto 150% no-repeat, var(--skin-pat); }
  .online-player[data-skin] .online-crest { display: none; }
  /* The Wardrobe's squares and its preview (rpg/ui-character.js skinTile, skinPreview): in your rank's colour. */
  .cw-skin[data-skin] { position: relative; display: block; width: 40px; height: 40px; border-radius: 6px; background: var(--skin-art) 100% 50% / auto 100% no-repeat, var(--skin-pat); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); }
  .cw-skin.dark { filter: brightness(0.12) saturate(0); }
  /* A card good at the Marketplace and in a Bag (goods-shop.js ico): the card itself, in the --rk its row or tile sets. */
  .gd-skin[data-skin] { display: block; width: 100%; height: 100%; border-radius: 8px; background: var(--skin-art) 100% 50% / auto 100% no-repeat, var(--skin-pat); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); }
  .gd-tile > .gd-skin[data-skin] { flex: none; width: 22px; height: 22px; border-radius: 6px; translate: none; }
  .cw-skin-prev[data-skin] { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 58px; margin-top: 10px; padding: 0 14px; border: 3px solid var(--rk); border-radius: 10px; background: var(--skin-art) var(--skin-fit) no-repeat, var(--skin-pat); box-shadow: 0 0 0 2px #1b1424, inset 0 0 18px color-mix(in srgb, var(--rk) 35%, transparent); color: #fff; text-shadow: 0 2px 0 #000, 0 0 8px rgba(0, 0, 0, 0.7); font: 400 17px/1 var(--ui-font); letter-spacing: 0.04em; text-transform: uppercase; }
  .cw-skin-prev small { font-size: 14px; color: #f2edf9; }
  .cw-skin-prev.skin-rare { box-shadow: 0 0 0 2px #1b1424, inset 0 0 18px color-mix(in srgb, var(--rk) 35%, transparent), 0 0 14px 1px color-mix(in srgb, var(--rk) 55%, transparent); }
  :is(.cw-skin-prev, .cw-skin)[data-skin=""] { --skin-pat: var(--skin-base); } /* the Cards tab's Plain: the rank-coloured box alone */
  /* A hero's profile head (rpg/ui-profile.js): the skin instead of the terrace, in their holder rank's colour (--tc from
     the profile's tier, slate without $ZAZA) as on their fight box, so a card never shows a rank its wearer doesn't hold;
     its painting at the right edge, a strip across the top on a phone. */
  .hp-head[data-skin] { --rk: var(--tc, #8a8aa0); background: var(--skin-art) 100% 50% / auto 100% no-repeat, var(--skin-pat); border-color: var(--rk); }
  .hp-head[data-skin]::before { background: linear-gradient(90deg, rgba(5, 8, 28, 0.55), rgba(5, 8, 28, 0.25) 45%, transparent 70%), linear-gradient(0deg, rgba(5, 8, 28, 0.45), transparent 50%); }
  @media (max-width: 560px) { .hp-head[data-skin] { background: linear-gradient(180deg, transparent 30%, rgba(8, 6, 18, 0.9) 56%), var(--skin-art) 100% 0 / auto 54% no-repeat, var(--skin-pat); } }
}
.gba.cls .gba-pic { width: 44px; height: 44px; border-color: var(--cc); background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--cc) 70%, #fff) 0 14%, color-mix(in srgb, var(--cc) 45%, #1d1630) 52%, #110c1e 100%); box-shadow: 0 0 0 1.5px #1b1424; }
.gba.cls.big .gba-pic { width: 52px; height: 52px; }
@media (max-width: 560px) { .gba.cls .gba-pic { width: 36px; height: 36px; } .gba.cls.big .gba-pic { width: 44px; height: 44px; } }
@media (orientation: landscape) and (max-height: 500px) and (min-width: 561px) { .gba.cls.big .gba-pic { width: 44px; height: 44px; } }
/* A computer: bigger faces, each hero drawn from the hair to the chest (ui-rpg.js portrait), so their skins show (owner,
   2026-11-03: "apply the skins and the bigger profile squares"). A crowded raid's own sizes still win (#battle rules). */
@media (min-width: 861px) and (min-height: 501px) { .gba-pic, .gba.cls .gba-pic { width: 56px; height: 56px; } .gba.big .gba-pic, .gba.cls.big .gba-pic { width: 72px; height: 72px; } }
.gba-face { position: relative; display: block; line-height: 0; }
.gba-cls { position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); padding: 0 3px 1px; border: 1px solid #1b1424; border-radius: 4px; background: var(--cc); color: #1b1424; font: 400 11px/1 var(--ui-font); letter-spacing: 0; text-transform: uppercase; white-space: nowrap; font-style: normal; }
/* The class's word on a compact box that hides the face (ui-rpg.js gbaBox roleTag): in the HP tag's place, in the class's
   colour. Shown only where those boxes drop the face, below. */
.gba-role { display: none; flex-shrink: 0; padding: 1px 3px; border-radius: 3px; background: var(--cc); box-shadow: inset 0 0 0 1px rgba(27, 20, 36, 0.55); color: #1b1424; font: 400 9px/1 var(--ui-font); letter-spacing: 0; text-transform: uppercase; white-space: nowrap; font-style: normal; }
/* A big raid on a wider screen (6 to 9 allies): two columns of boxes a little slimmer than a small party's, so the list
   ends well above the menu and keeps off the boss (owner, 2026-11-01: "on desktop these big groups can be a bit bigger..
   on mobile shall remain this condensed"). The face's tile is 2× its 16 px inside. */
@media (min-width: 761px) and (min-height: 501px) {
  #battle.raid .bt-allies:has(> .gba:nth-child(6)) { grid-template-columns: 1fr 1fr; width: min(480px, 40vw); gap: 6px; }
  #battle.raid .bt-allies:has(> .gba:nth-child(6)) .gba { padding: 6px 10px 7px; column-gap: 9px; }
  #battle.raid .bt-allies:has(> .gba:nth-child(6)) .gba-pic { width: 36px; height: 36px; }
  #battle.raid .bt-allies:has(> .gba:nth-child(6)) .gba-cls { display: none; } /* wider than the face: the face's frame says it */
}
/* A computer: a big raid's faces 52 px, each hero from the hair to the chest, so their skins show, and the two columns a
   tiny bit narrower (480 px, was 500; owner, 2026-11-03, of a 10-hero raid: "i like these a lot.. but when multiple on desktop.. make
   the bottom ones a tiny bit less wide"). Narrower windows keep 36 px. At 52 px the class's tag fits under the face again,
   as on yours (owner, 2026-11-03: "on desktop, you wanna showcase the class names of the smaller ones too"); at 36 px, and
   on a siege's 30 px foes, the class's word takes the HP tag's place instead. */
@media (min-width: 861px) and (min-height: 501px) { #battle.raid .bt-allies:has(> .gba:nth-child(6)) .gba-pic { width: 52px; height: 52px; } #battle.raid .bt-allies:has(> .gba:nth-child(6)) .gba-cls { display: block; } }
@media (min-width: 761px) and (max-width: 860px) and (min-height: 501px) { #battle.raid .bt-allies:has(> .gba:nth-child(6)) .gba-hp em { display: none; } #battle.raid .bt-allies:has(> .gba:nth-child(6)) .gba-role { display: block; } }
/* A siege's 7 to 10 foes on a wider screen (rpg/siege.js SIEGE.max): two columns of slimmer boxes, as a big raid's
   allies, so they end well above the message. */
@media (min-width: 761px) and (min-height: 501px) {
  #battle .bt-foes:has(> .gba:nth-child(7)) { grid-template-columns: 1fr 1fr; width: min(440px, 36vw); gap: 4px; }
  #battle .bt-foes:has(> .gba:nth-child(7)) .gba { padding: 4px 9px 5px; column-gap: 7px; }
  #battle .bt-foes:has(> .gba:nth-child(7)) .gba-pic { width: 30px; height: 30px; }
  #battle .bt-foes:has(> .gba:nth-child(7)) .gba-cls, #battle .bt-foes:has(> .gba:nth-child(7)) .gba-hp em { display: none; }
  #battle .bt-foes:has(> .gba:nth-child(7)) .gba-role { display: block; }
}
/* A Golden Hour crowd on a wider screen (10 to 19 allies, rpg/golden.js): two narrow columns of name-and-HP boxes, as on a
   phone, so the roster ends above the menu without spreading over Solmane. */
@media (min-width: 761px) and (min-height: 501px) {
  #battle.raid .bt-allies:has(> .gba:nth-child(10)) { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(300px, 26vw); gap: 3px; }
  #battle.raid .bt-allies:has(> .gba:nth-child(10)) .gba { padding: 3px 7px 4px; border-width: 2px; grid-template-columns: minmax(0, 1fr); }
  #battle.raid .bt-allies:has(> .gba:nth-child(10)) :is(.gba-face, .gba-pic, .gba-hp em) { display: none; }
  #battle.raid .bt-allies:has(> .gba:nth-child(10)) .gba-role { display: block; }
  #battle.raid .bt-allies:has(> .gba:nth-child(10)) .gba-top b { font-size: 13px; }
  #battle.raid .bt-allies:has(> .gba:nth-child(10)) .gba-top span { font-size: 12px; }
  #battle.raid .bt-allies:has(> .gba:nth-child(10)) .gba-bar { height: 5px; border-width: 1px; }
  #battle.raid .bt-allies:has(> .gba:nth-child(10)) .pips { margin-top: 2px; }
  #battle.raid .bt-allies:has(> .gba:nth-child(10)) .pips i { height: 3px; }
}
/* A raid on a phone: up to 9 allies, so their boxes shrink to a name and an HP bar and keep off the dragon. */
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (min-width: 561px) {
  #battle.raid .bt-allies { width: min(150px, 38vw); gap: 3px; }
  #battle.raid .bt-allies .gba { padding: 3px 7px 4px; border-width: 2px; grid-template-columns: minmax(0, 1fr); }
  #battle.raid .bt-allies :is(.gba-face, .gba-pic), #battle.raid .bt-allies .gba-hp em { display: none; }
  #battle.raid .bt-allies .gba-role, #battle.team .gba:not(.big) .gba-role, #battle.raid-crowd .gba:not(.big) .gba-role { display: block; } /* their class instead */
  #battle.raid .bt-allies .gba-top b { font-size: 13px; }
  #battle.raid .bt-allies .gba-top span { font-size: 12px; }
  #battle.raid .bt-allies .gba-bar { height: 5px; border-width: 1px; }
  #battle.raid .bt-intent.boss { display: none; } /* the message box shows the dragon's next move */
  /* Team fights (up to 3 vs 3): the foes' and teammates' boxes shrink the same way, and the foes (left) and your side
     (right, you on top) sit side by side so up to three stacked foes never run under your box. */
  #battle.team .bt-foes { width: 42vw; gap: 3px; }
  #battle.team .bt-me { top: calc(8px + var(--mobile-top-safe)); width: 52vw; } /* under a PWA's status bar, like .bt-foes */
  #battle.team .bt-allies { top: calc(100px + var(--mobile-top-safe)); width: 52vw; gap: 3px; }
  #battle.team .gba:not(.big) { padding: 3px 7px 4px; border-width: 2px; grid-template-columns: minmax(0, 1fr); }
  #battle.team .gba:not(.big) :is(.gba-face, .gba-pic), #battle.team .gba:not(.big) .gba-hp em { display: none; }
  #battle.team .gba:not(.big) .gba-top b { font-size: 13px; }
  #battle.team .gba:not(.big) .gba-top span { font-size: 12px; }
  #battle.team .gba:not(.big) .gba-bar { height: 5px; border-width: 1px; }
  #battle.raid .bt-allies .pips i, #battle.team .gba:not(.big) .pips i { height: 3px; } /* as slim as their HP bar */
  #battle.raid .bt-allies .pips, #battle.team .gba:not(.big) .pips { margin-top: 2px; }
}
.gba.down { opacity: 0.6; filter: grayscale(0.6); }
.gba-top { display: flex; align-items: baseline; gap: 8px; }
.gba-top b { font-size: 19px; letter-spacing: 0.04em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gba-top span { margin-left: auto; flex-shrink: 0; white-space: nowrap; font-size: 16px; color: #3a3a4a; }
.gba-top .rdy { font-style: normal; color: #2a9a3a; font-weight: 700; } .gba-top .rdy.wait { color: #8a8a9a; }
/* A teammate's locked move as its menu icon instead of ✓ (rpg/ui-callouts.js pickMarkHTML; a player on Telegram, 2026-10-17:
   "instead of "✅" when u picked skill it could show logo of skill"): your own side's only. */
.gba-top .rdy.pick { align-self: center; display: inline-grid; flex-shrink: 0; }
.gba-top .rdy.pick img { display: block; width: 20px; height: 20px; image-rendering: pixelated; }
#battle.raid .bt-allies:has(> .gba:nth-child(6)) .rdy.pick img { width: 16px; height: 16px; } /* a big raid's slimmer boxes */
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (min-width: 561px) {
  #battle.team .gba:not(.big) .rdy.pick img, #battle.raid .bt-allies .rdy.pick img { width: 16px; height: 16px; }
  #battle.raid-crowd .bt-allies .rdy.pick img { width: 13px; height: 13px; }
}
.gba-hp { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.gba-hp em { display: inline-flex; align-items: center; box-sizing: border-box; height: 15px; font-style: normal; font-weight: 700; font-size: 13px; color: #ffcf40; background: #3a3a4a; border-radius: 4px; padding: 0 5px; }
.gba-bar { flex: 1; height: 8px; border-radius: 5px; background: #3a3a4a; border: 2px solid #3a3a4a; overflow: hidden; }
.gba-bar > span { display: block; height: 100%; background: linear-gradient(180deg, #7ef08a, #28b848); transition: width 0.45s ease; }
.gba-bar.mid > span { background: linear-gradient(180deg, #ffe066, #e8b52a); }
.gba-bar.low > span { background: linear-gradient(180deg, #ff8a80, #d83a3a); }
.gba-num { text-align: right; font-size: 17px; margin-top: 2px; }
/* Your companion's level and life (ui-rpg.js gbaBox): a row made like your HP row, under it. One grid holds both rows, so
   its face sits in a dark tag as wide as your HP tag, its bar starts and ends with yours, and its level lines up under
   your HP numbers (beside your bar now, so the pair takes the numbers line's place and your box grows no taller). 5 px
   between the rows keep the two tags apart (owner, 2026-10-13: "the squares shouldnt touch, make the companion and yours
   similar"). Both tags are 2 px taller here, for the face. */
.gba-rows { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 6px; row-gap: 5px; align-items: center; margin-top: 3px; }
.gba-rows > div { display: contents; }
.gba-rows em { grid-column: 1; justify-content: center; height: 17px; }
.gba-rows .gba-bar { grid-column: 2; }
.gba-rows .gba-num, .gba-rows b { grid-column: 3; justify-self: end; margin: 0; line-height: 17px; white-space: nowrap; }
.gba-pet em { display: flex; align-items: center; box-sizing: border-box; background: #3a3a4a; border-radius: 4px; overflow: hidden; }
.gba-pet img { width: 17px; height: 17px; }
.gba-pet b { font-size: 15px; font-weight: 400; color: #3a3a4a; }
.gba-pet.down > * { opacity: 0.55; filter: grayscale(1); }
/* Your XP, in the XP bar's blue, along the bottom edge of your own box, inside its padding (ui-rpg.js fightXpHTML;
   Buszok: "grinding blind is hard"). It fills as a win's XP lands. The box's bottom padding grows by 4 px for it, so the
   energy squares (or the chips under them) end 6 px above the strip, not 2 (owner, on a phone: "this bar is too close
   to the squares"). */
.gba-xp { position: absolute; left: 12px; right: 12px; bottom: 2px; height: 4px; border-radius: 2px; background: #3a3a4a; overflow: hidden; pointer-events: auto; }
.gba:has(> .gba-xp) { padding-bottom: 12px; }
.gba-xp > i { display: block; height: 100%; background: linear-gradient(180deg, #9fe0ff, #3a8ad8); transition: width 0.6s ease; }
@media (max-width: 560px) { .gba-rows { column-gap: 5px; } .gba-rows em { height: 15px; } .gba-rows :is(.gba-num, b) { line-height: 15px; } .gba-pet img { width: 15px; height: 15px; } .gba-pet b { font-size: 13px; } }
.gba .pips { display: flex; gap: 3px; margin-top: 3px; }
.gba .pips i { width: 9px; height: 9px; border-radius: 2px; background: #cfc6a4; border: 1px solid #8a8266; }
.gba .pips i.on { background: #ffd23f; border-color: #8a6410; }
/* Your teammates' energy (ui-rpg.js gbaBox): the same pips, slim cells across their box, a gap after every 5. */
.gba:not(.big) .pips { gap: 2px; }
.gba:not(.big) .pips i { flex: 1; max-width: 12px; height: 5px; border-radius: 1px; }
.gba:not(.big) .pips i:nth-child(5) { margin-right: 3px; }
.gba-st { margin-top: 3px; display: flex; gap: 3px; }
/* Status and element chips: the icon and the word centred in the chip, with room all round (the owner: text must sit
   well in the middle of the labels, on phones and desktop). */
.gba-st .st { display: inline-flex; align-items: center; gap: 3px; box-sizing: border-box; height: 18px; padding: 0 6px; font-style: normal; font-size: 11px; font-weight: 700; white-space: nowrap; border-radius: 3px; background: #3a3a4a; color: #fff; }
.gba-st .st i { font-style: normal; font-size: 10px; line-height: 1; }
/* A box's chips sit beside its energy pips when both fit, and go under them only when they don't, so a buff seldom adds a
   row (a player, 2026-11-01: "the screen of characters in fight consumes too much screen when buffs act"). A teammate's
   chips (.mate) are slimmer than yours and show their icons (ui-rpg.js gbaBox .ico); their pips keep at least 48 px. */
.gba-main:has(> .pips + .gba-st) { display: flex; flex-wrap: wrap; align-items: center; column-gap: 5px; }
.gba-main:has(> .pips + .gba-st) > * { flex: 0 0 100%; min-width: 0; }
.gba-main:has(> .pips + .gba-st) > .pips { flex: 1 1 48px; }
.gba.big .gba-main:has(> .pips + .gba-st) > .pips { flex-basis: auto; min-width: auto; } /* your pips' squares never squeeze */
.gba-main:has(> .pips + .gba-st) > .gba-st { flex: 0 1 auto; margin-top: 1px; }
.gba.mate .gba-st .st { height: 14px; padding: 0 4px; gap: 2px; font-size: 10px; }
.gba.mate .gba-st .st i { font-size: 9px; }
.gba.mate .gba-st .st.ico { padding: 0 3px; }
/* Words in pills and chips, centred on their capitals: an emoji beside them sits in a box of its own (emoji fonts differ
   in height on every phone and computer and used to push the words down), and the word's box is moved down by the
   pixel font's own offset (its capitals sit 0.09em above the middle of a line-height 1 box; measured in Chrome and
   Safari. CSS text-box trimming leaves them 0.5px high: the font's cap height doesn't match its letters). */
.gba-st .st > span, .mini-cards > span, .gba-hp em > span { display: block; line-height: 1; translate: 0 0.09em; }
.gba-hp em > span { translate: 0 0.04em; } /* in its 15px tag the 13px word already lands half a pixel low */
.mini-cards > i { font-style: normal; line-height: 1; }
.gba-st .st.ex { background: #ff981f; color: #1b1424; } .gba-st .st.sh { background: #ffe066; color: #1b1424; } .gba-st .st.ra { background: #ff5d5d; }
/* A critical (battle.js's Crit meter only): its number pops gold, a little bigger than a plain one, and a small stamp
   lands over who took it when it's yours or on you (battle-scene.js critCtx). Kept small (owner, 2026-11-08: "make sure
   the effect is not too exagerated"): no slam, no shake. The meter itself isn't drawn on the boxes ("too much info"). */
.bt-pop.crit { font-size: 38px; color: #ffd23f; text-shadow: 3px 3px 0 #1b1424, 0 0 8px rgba(255, 190, 40, 0.6); }
.bt-pop.crit.big { font-size: 48px; } .bt-pop.crit.huge { font-size: 62px; }
.bt-pop.me.crit { color: #ffb347; }
.bt-stamp.crit { font-size: 22px; color: var(--gold); animation: bt-crit 0.9s ease-out forwards; }
@keyframes bt-crit { 0% { transform: translate(-50%, -50%) scale(1.3); opacity: 0; } 15% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 70% { transform: translate(-50%, -62%); opacity: 1; } 100% { transform: translate(-50%, -80%); opacity: 0; } }
@media (max-width: 560px), (max-width: 760px) and (min-height: 501px) {
  .bt-pop.crit { font-size: 36px; } .bt-pop.crit.big { font-size: 38px; } .bt-pop.crit.huge { font-size: 46px; }
  .bt-stamp.crit { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .bt-stamp.crit { animation-name: bt-fade; } }
.gba.hit { animation: gba-hit 0.4s ease; }
@keyframes gba-hit { 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-2px); } }
.bt-intent { margin: 0; padding: 3px 8px; border-radius: 6px; background: rgba(27, 20, 36, 0.8); color: #ffb347; font-size: 15px; font-weight: 700; animation: blink 0.9s infinite; }
/* The raid boss telegraphs every move: steady, and it only blinks for the big ones (the Inferno and the dive). */
.bt-intent.boss { animation: none; max-width: min(460px, 60vw); border: 1px solid rgba(255, 120, 40, 0.45); }
.bt-intent.boss.big { animation: blink 0.9s infinite; color: #ffd23f; border-color: #ff5a1f; background: rgba(60, 8, 4, 0.85); }
.bt-round { margin: 4px 0 0; padding: 1px 8px; width: fit-content; border-radius: 6px; background: rgba(3, 10, 44, 0.7); color: #c8d2f5; font-size: 13px; }
/* Bottom bar: the message box and the command menu. */
.bt-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: grid; grid-template-columns: 1fr minmax(300px, 40%); gap: 10px; padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(3, 10, 44, 0), rgba(3, 10, 44, 0.75) 30%); }
.bt-msg { position: relative; min-height: 104px; padding: 14px 18px; border-radius: 10px; background: #1c2750; border: 3px solid #fbf8e8; box-shadow: 0 0 0 3px #1b1424, inset 0 0 0 2px #0a102a; }
.bt-msg p { margin: 0; font-size: 22px; line-height: 1.3; color: #fff; text-shadow: 2px 2px 0 #0a102a; }
.bt-timer { position: absolute; left: 14px; right: 14px; bottom: 8px; height: 5px; border-radius: 3px; background: #0a102a; overflow: hidden; }
.bt-timer i { display: block; height: 100%; background: linear-gradient(90deg, #ff981f, #ffd23f); transition: width 0.2s linear; }
/* ❗ Call for help (ui-rpg.js renderSos, rpg/core-calls.js): on the message box's top edge, only while the other side is
   stronger; once pressed it says Called. Yellow and still, not a pulsing red (owner, 2026-10-06: "more low profile"). */
.bt-sos-row { position: absolute; top: -17px; right: 12px; z-index: 1; display: flex; gap: 6px; }
.bt-sos-row[hidden] { display: none; }
.bt-sos { display: flex; align-items: center; gap: 6px; height: 30px; margin: 0; white-space: nowrap; padding: 0 12px 0 4px; border-radius: 15px; border: 2px solid #1b1424; background: linear-gradient(180deg, #ffe066, var(--gold-2)); color: var(--navy-900); font: inherit; font-size: 15px; font-weight: 700; box-shadow: 0 0 0 2px #fbf8e8; cursor: pointer; }
.bt-sos b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--navy-900); color: var(--gold); font: 400 17px "Titan One", var(--display), sans-serif; line-height: 1; }
.bt-sos:hover:not(:disabled) { background: linear-gradient(180deg, #fff09a, var(--gold)); }
.bt-sos.sent { background: #1c2750; color: #c8d2f5; cursor: default; }
.bt-sos.sent b { background: var(--gold); color: var(--navy-900); }
/* 📣 Quick callouts to your side (rpg/ui-callouts.js, rpg/core-callouts.js; a player on Telegram, 2026-10-17: "emotes u
   can click like "i will stagger" etc to coordinate for big bosses"): on the message box's top-right edge beside ❗.
   Folded behind 📣 on a phone, or where the row would run past the message box: tapped, it opens above the message
   box, never over the move buttons. Navy and still: quieter than the gold ❗. */
.bt-calls { position: absolute; top: -16px; right: 12px; z-index: 1; display: flex; flex-direction: row-reverse; align-items: center; }
.bt-calls[hidden] { display: none; }
.bt-calls-row { display: flex; gap: 5px; }
.bt-calls button { display: flex; align-items: center; gap: 4px; height: 28px; margin: 0; padding: 0 10px 0 7px; border-radius: 14px; border: 2px solid #fbf8e8; background: #1c2750; color: #fbf8e8; font: inherit; font-size: 14px; font-weight: 700; white-space: nowrap; box-shadow: 0 0 0 2px #1b1424; cursor: pointer; }
.bt-calls button i { font-style: normal; font-size: 14px; line-height: 1; }
.bt-calls button:hover:not(:disabled), .bt-calls button:focus-visible { outline: none; border-color: var(--gold); color: var(--gold); }
.bt-calls button:disabled { opacity: 0.5; cursor: default; }
.bt-calls .bt-calls-tog { justify-content: center; width: 32px; padding: 0; font-size: 15px; }
.bt-calls:not(.fold) .bt-calls-tog { display: none; }
.bt-calls.fold .bt-calls-row { display: none; position: absolute; right: -4px; bottom: calc(100% + 6px); flex-wrap: wrap; justify-content: flex-end; width: max-content; max-width: calc(100vw - 24px); padding: 5px; border-radius: 18px; background: rgba(3, 10, 44, 0.88); box-shadow: 0 0 0 2px #1b1424; }
.bt-calls.fold.open .bt-calls-row { display: flex; }
.bt-calls.fold .bt-calls-row button { height: 34px; padding: 0 9px 0 7px; font-size: 14px; }
.bt-calls.open .bt-calls-tog { border-color: var(--gold); color: var(--gold); }
@media (max-width: 560px), (max-width: 760px) and (min-height: 501px), (orientation: landscape) and (max-height: 500px) and (min-width: 561px) {
  /* Keep the two round controls clear of the message border and teammate cards on compact fight screens. */
  .bt-calls { top: -20px; right: 8px; }
  .bt-calls button { height: 26px; font-size: 13px; }
}
/* 💬 Fight chat (rpg/ui-callouts.js; a player, 2026-10-25: "we need chatbox in actual fight haha"): a round button before
   the callouts, never folded behind 📣; it opens the line to type above the message box, over the scene and never over
   the move buttons. 16px text, so a phone doesn't zoom in on it. A refusal shows under it in red. */
.bt-calls .bt-chat-tog { justify-content: center; width: 32px; margin-left: 5px; padding: 0; font-size: 15px; }
.bt-calls .bt-chat-tog[hidden] { display: none; }
.bt-calls.chatting .bt-chat-tog { border-color: var(--gold); color: var(--gold); }
.bt-chat { position: absolute; right: 8px; bottom: calc(100% + 20px); z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; width: min(460px, calc(100vw - 32px)); box-sizing: border-box; padding: 6px; border-radius: 16px; background: rgba(3, 10, 44, 0.92); box-shadow: 0 0 0 2px #1b1424; }
.bt-chat[hidden] { display: none; }
.bt-chat input { flex: 1 1 auto; min-width: 0; height: 36px; box-sizing: border-box; margin: 0; padding: 0 12px; border-radius: 12px; border: 2px solid #fbf8e8; background: #0a102a; color: #fff; font: inherit; font-size: 16px; }
.bt-chat input:focus { outline: none; border-color: var(--gold); }
.bt-chat input:disabled { opacity: 0.6; }
.bt-chat button { flex: none; height: 36px; margin: 0; padding: 0 14px; border-radius: 12px; border: 2px solid #1b1424; background: linear-gradient(180deg, #ffe066, var(--gold-2)); color: var(--navy-900); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.bt-chat .bt-chat-err { flex-basis: 100%; margin: 0; padding: 0 4px 2px; font-size: 14px; line-height: 1.3; color: #ff9a9a; text-shadow: none; }
.bt-chat .bt-chat-err[hidden] { display: none; }
/* A callout as a speech bubble by the hero's box (rpg/ui-callouts.js sayHTML), out to its left over the scene, for the
   CALLOUT_SHOW_MS it lasts; above the box in a phone's crowded raid, where the boxes sit in columns over the controls. */
.gba-say { position: absolute; right: calc(100% + 10px); top: 50%; z-index: 5; max-width: min(240px, 46vw); padding: 4px 10px; border-radius: 13px; background: #fbf8e8; color: #1b1424; border: 2px solid #1b1424; box-shadow: 0 3px 0 rgba(3, 10, 44, 0.6); pointer-events: none; transform: translateY(-50%); transform-origin: right center; animation: gba-say 3.5s ease-out forwards; }
.gba-say b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; letter-spacing: 0.02em; text-transform: none; }
.gba-say::after { content: ""; position: absolute; top: 50%; right: -9px; margin-top: -6px; border-style: solid; border-width: 6px 0 6px 8px; border-color: transparent transparent transparent #1b1424; }
/* 💬 A typed line (FCHAT_SHOW_MS): it stays longer than a callout and wraps onto a second line. */
.gba-say.chat { width: max-content; max-width: min(260px, 42vw); animation-duration: 6s; }
.gba-say.chat b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (min-width: 561px) {
  .gba-say { padding: 3px 8px; }
  .gba-say b { font-size: 13px; }
  #battle.raid-crowd .bt-allies .gba-say { right: auto; left: 50%; top: auto; bottom: calc(100% + 7px); transform: translateX(-50%); transform-origin: center bottom; }
  /* Typed fight chat already leads the message box. In a crowded raid, a second copy here covers the next hero's card. */
  #battle.raid-crowd .bt-allies .gba-say.chat { display: none; }
  #battle.raid-crowd .bt-allies .gba-say::after { top: auto; right: auto; left: 50%; bottom: -9px; margin: 0 0 0 -6px; border-width: 8px 6px 0 6px; border-color: #1b1424 transparent transparent transparent; }
  #battle.raid-crowd .bt-allies .gba-say b { font-size: 12px; }
}
@keyframes gba-say { 0% { opacity: 0; scale: 0.7; } 7% { opacity: 1; scale: 1.06; } 12%, 86% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1; } }
@media (prefers-reduced-motion: reduce) { .gba-say { animation-name: bt-fade; } }
.bt-menu { display: grid; gap: 8px; align-content: stretch; min-height: 104px; }
.bt-menu.main { grid-template-columns: 1fr 1fr; }
.bt-menu.list { grid-template-columns: 1fr; max-height: 38vh; overflow-y: auto; }
.bt-menu button { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; text-align: left; padding: 8px 12px 8px 26px; border-radius: 8px; background: linear-gradient(180deg, #fbf8e8, #ebe3c4); color: #1b1424; border: 3px solid #2a2a3a; box-shadow: 0 3px 0 rgba(3, 10, 44, 0.6); }
.bt-menu button img { width: 28px; height: 28px; image-rendering: pixelated; }
.bt-menu button b { font-size: 20px; letter-spacing: 0.04em; }
.bt-menu button span { color: #8a6410; font-weight: 700; }
.bt-menu button small { grid-column: 2 / -1; color: #4a4a5a; font-size: 14px; line-height: 1.2; }
.bt-menu button::before { content: "▶"; position: absolute; left: 9px; top: 50%; transform: translateY(-50%); font-size: 12px; color: transparent; }
/* the picked row: gold, not red (owner 2026-10-06: the fight looked "too redish") */
.bt-menu button:hover:not([disabled])::before, .bt-menu button:focus-visible::before, .bt-menu button:focus::before { color: var(--gold-dark); }
.bt-menu button:hover:not([disabled]), .bt-menu button:focus { outline: none; border-color: var(--gold-dark); box-shadow: 0 3px 0 rgba(3, 10, 44, 0.6), 0 0 0 2px var(--gold); }
.bt-menu button[disabled] { opacity: 0.45; cursor: not-allowed; }
.bt-menu button.back { background: #1c2750; color: #fff; border-color: #fbf8e8; }
.bt-menu button.go { background: linear-gradient(180deg, #ffe066, var(--gold-2)); }
/* A finished team fight's 📊 Fight stats (rpg/ui-fight-stats.js): the table scrolls, Back and Continue stay in view. A blue
   bar behind each name for their damage against the side's best, the top number of each column in gold, your row edged gold. */
.bt-menu.list.stats { max-height: none; overflow: visible; }
.bt-stats { max-height: 46vh; overflow-y: auto; border-radius: 10px; background: #1c2750; border: 3px solid #fbf8e8; box-shadow: 0 0 0 3px #1b1424, inset 0 0 0 2px #0a102a; }
.bt-stats table { width: 100%; border-collapse: collapse; color: #fff; font-size: 15px; font-variant-numeric: tabular-nums; }
.bt-stats caption { padding: 7px 10px 3px; text-align: left; font-family: var(--display); font-size: 17px; color: var(--gold); text-shadow: 2px 2px 0 #0a102a; }
.bt-stats thead th { position: sticky; top: 0; z-index: 1; padding: 4px 6px; background: #1c2750; color: #c9d3ff; font-size: 12px; font-weight: 700; text-align: right; white-space: nowrap; cursor: help; }
.bt-stats thead th:first-child { text-align: left; cursor: default; }
.bt-stats tbody th { width: 100%; max-width: 0; padding: 5px 6px; text-align: left; font-weight: 700; background-image: linear-gradient(90deg, #34509e var(--share), transparent var(--share)); }
.bt-stats tbody th div { display: flex; align-items: center; gap: 5px; min-width: 0; }
.bt-stats tbody th img { width: 20px; height: 20px; flex: none; image-rendering: pixelated; }
.bt-stats tbody th span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-stats tbody th i { font-style: normal; font-size: 11px; color: #ff9c94; }
.bt-stats tbody th small { margin-left: auto; padding-left: 4px; font-size: 11px; color: #c9d3ff; }
.bt-stats td { padding: 5px 6px; text-align: right; white-space: nowrap; }
.bt-stats td.top { color: var(--gold); }
.bt-stats tbody tr + tr > * { border-top: 1px solid rgba(251, 248, 232, 0.12); }
.bt-stats tr.me > * { background-color: rgba(255, 255, 255, 0.07); }
.bt-stats tr.me > th { box-shadow: inset 4px 0 0 var(--gold); }
.bt-stats-row { display: grid; grid-template-columns: auto 1fr; gap: 8px; }
/* Damage numbers and the result banner. */
.bt-pops { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.bt-pop { position: absolute; transform: translate(-50%, -100%); font-family: var(--display); font-size: 34px; color: #fff; text-shadow: 3px 3px 0 #1b1424, 0 0 12px rgba(255, 80, 80, 0.8); animation: bt-pop 1.05s ease-out forwards; }
.bt-pop.me { color: #ff8a80; }
@keyframes bt-pop { 0% { transform: translate(-50%, -60%) scale(0.6); opacity: 0; } 15% { transform: translate(-50%, -100%) scale(1.2); opacity: 1; } 100% { transform: translate(-50%, -190%) scale(1); opacity: 0; } }
.bt-banner { position: absolute; left: 0; right: 0; top: 30%; z-index: 4; text-align: center; pointer-events: none; animation: bt-banner 0.6s cubic-bezier(0.2, 1.6, 0.4, 1); }
.bt-banner b { font-family: var(--display); font-weight: 400; font-size: clamp(44px, 9vw, 96px); color: var(--gold); text-shadow: 5px 5px 0 #1b1424, 0 0 40px rgba(255, 210, 63, 0.6); letter-spacing: 0.04em; }
.battle.lost .bt-banner b { color: #d41f28; font-size: clamp(38px, 7vw, 84px); letter-spacing: 0.08em; text-shadow: 4px 4px 0 #1b0204, 0 0 40px rgba(255, 20, 30, 0.7); animation: fallen 2.4s ease-out; }
@keyframes fallen { from { opacity: 0; letter-spacing: 0.4em; filter: blur(3px); } 60% { opacity: 1; } }
@keyframes bt-banner { from { transform: scale(2.2); opacity: 0; } }
/* Fight juice: the title card, words slammed on screen, bigger hits, HP that drains, a menu that snaps in */
.bt-vs { position: absolute; left: 0; right: 0; top: 30%; z-index: 4; pointer-events: none; display: grid; justify-items: center; gap: 2px; padding: 10px 0 14px; background: linear-gradient(90deg, transparent, rgba(3, 10, 44, 0.88) 18%, rgba(3, 10, 44, 0.88) 82%, transparent); border-block: 3px solid var(--gold); animation: bt-vs 2s cubic-bezier(0.2, 0.9, 0.3, 1) forwards; }
.bt-vs small { font-family: var(--display); font-size: clamp(14px, 2.2vw, 20px); letter-spacing: 0.3em; color: var(--gold); }
.bt-vs b { font-family: var(--display); font-weight: 400; font-size: clamp(30px, 6vw, 64px); line-height: 1.05; color: #fff; text-shadow: 4px 4px 0 #1b1424; letter-spacing: 0.04em; text-transform: uppercase; text-align: center; padding: 0 16px; }
.bt-vs.guardian { border-color: #d41f28; } .bt-vs.guardian small { color: #ff5a5a; }
.bt-vs.siege { background: linear-gradient(90deg, transparent, rgba(46, 48, 58, 0.92) 18%, rgba(46, 48, 58, 0.92) 82%, transparent); border-color: #ffd23f; } .bt-vs.siege small { color: #ffd23f; text-shadow: 2px 2px 0 #1b1424; }
@keyframes bt-vs { 0% { transform: translateX(-110%) skewX(-12deg); } 16% { transform: translateX(3%) skewX(-4deg); } 22%, 78% { transform: none; opacity: 1; } 100% { transform: translateX(110%) skewX(12deg); opacity: 0; } }
.bt-stamp { position: absolute; transform: translate(-50%, -50%); font-family: var(--display); font-weight: 400; font-size: 30px; white-space: nowrap; pointer-events: none; color: #fff; text-shadow: 3px 3px 0 #1b1424, -2px -2px 0 #1b1424, 2px -2px 0 #1b1424, -2px 2px 0 #1b1424; animation: bt-stamp 1.2s cubic-bezier(0.2, 1.6, 0.4, 1) forwards; }
.bt-stamp.ko { font-size: clamp(64px, 14vw, 150px); color: var(--gold); text-shadow: 6px 6px 0 #1b1424, -3px -3px 0 #1b1424, 3px -3px 0 #1b1424, -3px 3px 0 #1b1424, 0 0 50px rgba(255, 80, 40, 0.8); animation: bt-ko 1.9s cubic-bezier(0.2, 1.5, 0.4, 1) forwards; }
.bt-stamp.block, .bt-stamp.break { color: #9fe0ff; } .bt-stamp.interrupt { color: var(--gold); } .bt-stamp.guarded { color: #7ef08a; font-size: 24px; }
@keyframes bt-stamp { 0% { transform: translate(-50%, -50%) scale(2.4) rotate(-8deg); opacity: 0; } 14% { transform: translate(-50%, -50%) scale(1) rotate(-4deg); opacity: 1; } 75% { transform: translate(-50%, -60%) rotate(-4deg); opacity: 1; } 100% { transform: translate(-50%, -85%) scale(0.9) rotate(-4deg); opacity: 0; } }
@keyframes bt-ko { 0% { transform: translate(-50%, -50%) scale(4) rotate(-14deg); opacity: 0; } 12% { transform: translate(-50%, -50%) scale(0.92) rotate(-6deg); opacity: 1; } 18% { transform: translate(-50%, -50%) scale(1.06) rotate(-6deg); } 24%, 80% { transform: translate(-50%, -50%) rotate(-6deg); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.1) rotate(-6deg); opacity: 0; } }
.bt-pop.big { font-size: 46px; color: #ffe066; }
.bt-pop.huge { font-size: 60px; color: #ffb347; text-shadow: 4px 4px 0 #1b1424, 0 0 18px rgba(255, 120, 40, 0.9); }
.bt-pop.me.big, .bt-pop.me.huge { color: #ff5a5a; }
.gba-bar { position: relative; }
.gba-bar > span { position: relative; transition: width 0.3s ease-out; }
.gba-bar > i { position: absolute; left: 0; top: 0; bottom: 0; background: #fff6c8; transition: width 0.5s ease-in 0.4s; }
.bt-menu button { animation: bt-in 0.28s cubic-bezier(0.2, 1.5, 0.4, 1) backwards; }
.bt-menu button:nth-child(2) { animation-delay: 0.04s; } .bt-menu button:nth-child(3) { animation-delay: 0.08s; } .bt-menu button:nth-child(4) { animation-delay: 0.12s; }
@keyframes bt-in { from { transform: translateY(14px) scale(0.9); opacity: 0; } }
/* The lists (techniques, potions, who?) scroll, and a button sliding in from below made them taller for a moment: the
   list opened scrolled by that much, then dropped back down when the slide ended. They only fade in, standing still. */
.bt-menu.list button { animation: bt-show 0.18s ease-out backwards; }
@keyframes bt-show { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .bt-vs, .bt-stamp, .bt-stamp.ko { animation-name: bt-fade; } .bt-menu button, .bt-menu.list button { animation: none; } }
@keyframes bt-fade { 0% { opacity: 0; } 10%, 80% { opacity: 1; } 100% { opacity: 0; } }
@media (max-width: 560px), (max-width: 760px) and (min-height: 501px) {
  .bt-bar { grid-template-columns: 1fr; gap: 7px; padding: 7px 4px calc(7px + env(safe-area-inset-bottom)); }
  .bt-msg { min-height: 54px; padding: 9px 12px 13px; border-width: 2px; }
  .bt-msg p { font-size: 18px; }
  .bt-timer { bottom: 5px; height: 4px; }
  /* Lift the call row clear of the first message line on compact fights. */
  .bt-sos-row { top: -19px; right: 8px; gap: 4px; }
  .bt-sos { height: 26px; padding: 0 10px 0 3px; gap: 5px; font-size: 13px; }
  .bt-sos b { width: 19px; height: 19px; font-size: 15px; }
  .bt-menu { min-height: 0; gap: 7px; }
  .bt-menu button { min-height: 44px; height: 44px; padding: 7px 10px 7px 22px; border-width: 2px; gap: 7px; }
  .bt-menu button b { font-size: 17px; }
  .bt-menu button img { width: 22px; height: 22px; }
  .bt-menu button small { font-size: 12px; }
  .bt-stats { max-height: 36vh; border-width: 2px; }
  .bt-stats table { font-size: 13px; }
  .bt-stats caption { font-size: 15px; padding: 5px 8px 2px; }
  .bt-stats thead th { padding: 3px 4px; font-size: 11px; }
  .bt-stats tbody th, .bt-stats td { padding: 4px; }
  .bt-stats tbody th small { display: none; }
  /* The main menu's three-across row on a phone: icon and word centred, no room kept for the ▶ cursor (the red border
     shows the pick), so TECHNIQUE and ATTACK with its element badge fit a 360px screen. */
  .bt-menu.main.five button { grid-template-columns: auto auto auto; justify-content: center; gap: 4px; padding: 0 5px; }
  .bt-menu.main.five button::before { content: none; }
  .bt-menu.main.five button img { width: 20px; height: 20px; }
  .bt-menu.main.five button b { font-size: 16px; }
  .bt-menu.main.five .el-badge { width: 16px; height: 16px; font-size: 10px; }
  /* The foe's box and yours side by side along the top, 8 px apart so placeMe (ui-rpg.js) never drops yours, and the
     monster under them in full (owner, 2026-11-01, Gyaradon's head under their box on a phone: "move it higher so it fits
     well.. make sure monsters dont get cut"). A foe's name and a long tag ("RAID BOSS Lv60") take two lines rather than cut
     the name; yours stays one line, a long name ending in "…", so your box stays short. */
  .bt-foes { left: 8px; top: calc(8px + var(--mobile-top-safe)); width: min(300px, calc(46vw - 10px)); }
  .bt-me { right: 8px; top: calc(8px + var(--mobile-top-safe)); width: min(320px, calc(54vw - 14px)); }
  .bt-allies { right: 8px; top: calc(108px + var(--mobile-top-safe)); width: 44vw; }
  .gba { padding: 6px 9px 7px; } .gba.pic { column-gap: 8px; }
  .gba-top { gap: 6px; } .gba-top b { letter-spacing: 0.02em; }
  .bt-foes .gba-top { flex-wrap: wrap; row-gap: 0; }
  .bt-intent { display: none; } /* the message box leads with the foe's warning instead (ui-rpg.js) */
  .gba-top b { font-size: 16px; }
  .gba-num { font-size: 15px; }
  .bt-stamp { font-size: 22px; } .bt-stamp.guarded { font-size: 18px; }
  .bt-pop.big { font-size: 34px; } .bt-pop.huge { font-size: 44px; }
}

/* Five or more raiders on a phone: a shallow header and three short roster columns above the controls. The centre
   stays clear for the boss's face. fitAllies anchors the roster above the main menu, including after rotation. */
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (min-width: 561px) {
  #battle.raid-crowd { --raid-edge: 6px; --raid-top: calc(6px + var(--mobile-top-safe)); }
  #battle.raid-crowd .bt-foes { left: var(--raid-edge); top: var(--raid-top); width: calc(50% - 9px); gap: 2px; }
  #battle.raid-crowd .bt-me { right: var(--raid-edge); top: var(--raid-top); width: calc(50% - 9px); }
  #battle.raid-crowd .bt-allies { right: var(--raid-edge); width: calc(100% - 12px); grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
  #battle.raid-crowd .gba { padding: 4px 6px 5px; border-width: 2px; border-radius: 7px; grid-template-columns: minmax(0, 1fr); }
  #battle.raid-crowd .bt-allies .gba { padding: 2px 5px 3px; }
  #battle.raid-crowd .gba:not(.big) :is(.gba-face, .gba-pic), #battle.raid-crowd .gba-hp em { display: none; }
  /* Your own box keeps your face and its class tag, smaller (2x its 16 px inside), so you see what you fight as. */
  #battle.raid-crowd .gba.big.pic { grid-template-columns: auto minmax(0, 1fr); column-gap: 6px; }
  #battle.raid-crowd .gba.big .gba-pic { width: 36px; height: 36px; }
  #battle.raid-crowd .gba.big .gba-cls { bottom: -6px; padding: 0 2px 1px; font-size: 9px; }
  #battle.raid-crowd .gba-top { gap: 4px; font-size: 13px; line-height: 1.1; }
  #battle.raid-crowd .gba-top b { font-size: 13px; letter-spacing: 0; }
  #battle.raid-crowd .gba-top span { font-size: 11px; }
  #battle.raid-crowd .bt-allies .gba-top { gap: 2px; font-size: 11px; }
  #battle.raid-crowd .bt-allies .gba-top b { font-size: 11px; }
  #battle.raid-crowd .bt-allies .gba-top span { font-size: 10px; }
  #battle.raid-crowd .bt-allies .gba-hp { margin-top: 2px; }
  #battle.raid-crowd .bt-allies .gba-bar { height: 4px; }
  #battle.raid-crowd .bt-foes .gba-top { flex-wrap: wrap; gap: 2px; }
  #battle.raid-crowd .bt-foes .gba-top b { flex-basis: 100%; font-size: 15px; }
  #battle.raid-crowd .bt-foes .gba-top span { margin-left: 0; }
  #battle.raid-crowd .bt-foes.many { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* a squad fight's 5 or 6 foes (SQUAD_FIGHT_MAX): three rows, clear of the foe and the roster */
  #battle.raid-crowd .gba-hp { margin-top: 3px; }
  #battle.raid-crowd .gba-bar { height: 5px; border-width: 1px; }
  #battle.raid-crowd .gba-num { font-size: 12px; line-height: 1.2; }
  /* Your companion's row and yours, small: the HP tag comes back beside its face, so the two rows still match. */
  #battle.raid-crowd .gba-rows { row-gap: 3px; column-gap: 4px; }
  #battle.raid-crowd .gba-rows .gba-hp em { display: flex; }
  #battle.raid-crowd .gba-rows em { height: 12px; padding: 0 3px; font-size: 10px; }
  #battle.raid-crowd .gba-pet img { width: 12px; height: 12px; }
  #battle.raid-crowd .gba-rows :is(.gba-num, b) { font-size: 12px; line-height: 12px; }
  #battle.raid-crowd .gba .pips { gap: 2px; margin-top: 3px; }
  #battle.raid-crowd .gba .pips i { flex: 1; max-width: none; height: 3px; border-radius: 1px; }
  #battle.raid-crowd .bt-me .pips i { height: 5px; }
  #battle.raid-crowd .gba.big .gba-main:has(> .pips + .gba-st) > .pips { flex-basis: 110px; min-width: 0; } /* stretched cells here */
  #battle.raid-crowd .gba.mate .gba-st .st { height: 12px; padding: 0 3px; }
  #battle.raid-crowd .gba.mate .gba-st .st.ico { padding: 0 2px; }
  #battle.raid-crowd .gba-st { flex-wrap: wrap; gap: 2px; }
  #battle.raid-crowd .gba-st .st { height: 15px; padding: 0 3px; gap: 2px; font-size: 10px; }
  #battle.raid-crowd .gba-st .st i { font-size: 9px; }
  #battle.raid-crowd .gba-xp { left: 6px; right: 6px; height: 2px; bottom: 1px; }
  #battle.raid-crowd .bt-round { margin: 0; padding: 2px 4px; font-size: 11px; }
}
@media (orientation: landscape) and (max-height: 500px) and (min-width: 561px) {
  #battle:not(.raid-crowd) .bt-me .pips { margin-top: 7px; }
  #battle.raid-crowd { --raid-top: 6px; }
  #battle.raid-crowd .bt-foes { left: max(8px, env(safe-area-inset-left)); width: min(260px, 36vw); }
  #battle.raid-crowd .bt-me { right: max(8px, env(safe-area-inset-right)); width: min(280px, 42vw); }
  #battle.raid-crowd .bt-allies { right: max(8px, env(safe-area-inset-right)); width: min(520px, 66vw); grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- the Forge, classes, rankings */
.bag { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.bag > span { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 4px; border-radius: 6px; background: rgba(3, 10, 44, 0.6); border: 1px solid #2e3d74; font-size: 15px; }
.bag > span small { color: var(--muted); font-size: 12px; }
/* A material tapped in the Bag (a phone has no hover for its title): its name and what it's for, under its row. */
.bag > [data-mtip] { cursor: pointer; }
.bag > [data-mtip].on { border-color: var(--gold); }
.bag-tip { display: flex; align-items: center; gap: 8px; margin: -2px 0 8px; padding: 6px 10px 6px 6px; border-radius: 6px; background: rgba(3, 10, 44, 0.75); border: 1px solid var(--gold); font-size: 15px; line-height: 1.35; }
.bag-tip b { color: var(--gold); }
/* The Bag's tabs (ui-rpg.js BAG_TABS): one row of icons in the side tabs' look (red with a gold edge for the one you're
   on). Under them the tab's name and, on the right, 📌 Default or the button that makes it so. */
.bag-tabs { display: flex; gap: 3px; margin: 2px 0 6px; }
.bag-tab { position: relative; flex: 1 1 0; display: grid; place-items: center; min-width: 0; height: 34px; padding: 0; background: #141d40; border: 1px solid #000; border-radius: 5px; cursor: pointer; }
.bag-tab .ri { width: 24px; height: 24px; image-rendering: pixelated; }
.bag-tab:hover:not(.active) { background: var(--stone-3); }
.bag-tab.active { background: linear-gradient(180deg, #7a2a2a, #4a1a1a); box-shadow: inset 0 0 0 1px var(--gold); }
.bag-dot { position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 1px #000; }
.bag-pin { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 4px; font-size: 16px; line-height: 1; }
.bag-pin b { min-width: 0; color: #fff; font-weight: 400; }
.bag-pin :is(span, button) { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 3px 0; font-size: 14px; color: var(--muted); }
.bag-pin i { font-style: normal; font-size: 12px; }
.bag-pin button { font-family: inherit; color: var(--gold); background: none; border: 0; cursor: pointer; }
.bag-pin button:hover { color: #fff; }
/* The Monsters tab (id beasts): every creature, guardian and boss side by side in one connected grid of identical squares (the cells
   share their borders; the picture never sizes the cell). beastSquare in ui-rpg.js frames every picture alike: in colour
   once beaten, a silhouette until then. The name shows on hover, keyboard focus or a tap. The grid's own background only
   shows at the empty end of a short last row. */
.beasts { display: grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 1px; margin: 8px 0; border: 2px solid #2e3d74; border-radius: 8px; background: rgba(3, 10, 44, 0.6); overflow: hidden; }
.beast {
  position: relative; display: block; aspect-ratio: 1; min-width: 0; padding: 0; border: 0; border-radius: 0; box-shadow: 0 0 0 1px #2e3d74;
  background: radial-gradient(ellipse 78% 70% at 50% 42%, #273a86, #121d57 60%, #080e30); cursor: pointer; font: 12px/1.05 var(--ui-font); color: var(--text);
}
.beast img { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; transition: transform 0.15s ease; }
.beast .bst-name {
  position: absolute; left: 50%; bottom: 3px; z-index: 2; transform: translate(-50%, 4px); width: max-content; max-width: calc(100% - 4px); padding: 2px 5px;
  border-radius: 4px; background: rgba(3, 10, 44, 0.92); border: 1px solid var(--gold-dark); color: #fff; text-align: center; word-break: keep-all; opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.beast:hover .bst-name, .beast:focus-visible .bst-name, .beast.picked .bst-name { opacity: 1; transform: translate(-50%, 0); }
.beast:hover img, .beast.picked img { transform: scale(1.08); }
.beast:hover, .beast:focus-visible { outline: 2px solid var(--edge-light); outline-offset: -2px; z-index: 1; }
.beast.picked { outline: 2px solid var(--gold); outline-offset: -2px; z-index: 1; }
@media (hover: none) { .beast:hover .bst-name { opacity: 0; } .beast.picked .bst-name { opacity: 1; } .beast:hover img { transform: none; } .beast.picked img { transform: scale(1.08); } }
.recipes { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.recipes li { display: flex; gap: 10px; align-items: center; padding: 7px 9px; border-radius: 8px; background: rgba(3, 10, 44, 0.55); border: 1px solid #2e3d74; }
.recipes li.other { opacity: 0.6; }
.recipes li.locked { opacity: 0.62; }
.recipes li.tier-head { padding: 6px 9px 2px; background: none; border: 0; justify-content: space-between; align-items: baseline; }
.recipes li.tier-head b { font-family: var(--display); font-weight: 400; color: var(--gold); font-size: 17px; }
.recipes li.tier-head.locked { opacity: 0.7; }
.recipes .owned { font-style: normal; color: var(--green); font-size: 13px; }
.recipes .loaner { font-style: normal; color: var(--gold); font-size: 13px; }
.forge-next { margin: 8px 0 0; padding: 7px 10px; border-radius: 8px; background: rgba(255, 214, 90, 0.08); border-left: 3px solid var(--gold); font-size: 14px; line-height: 1.4; }
.forge-next b { color: var(--gold); }
.forge-guide { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.forge-guide summary { cursor: pointer; color: #cfd8ff; font-weight: 600; padding: 3px 0; }
.forge-guide ul { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 4px; line-height: 1.4; }
.guns > .forge-guide, .cballs > .forge-guide { margin: 0; } /* the Bag's folds inside a grid: its gap spaces them */
/* Pip's forge step: Pip's piece right under Brom's line (.forge-ready); once you can make it, its Craft button shines, a
   light sweeping over it and a gold glow, and its row has a gold edge (rpg/ui-rpg.js forgePanel; owner, 2026-10-14: "i
   want the craft button to be shinning to make it really easy"). */
.recipes li:has(.craft-shine) { border-color: var(--gold); box-shadow: 0 0 10px rgba(255, 210, 63, 0.3); }
.recipes .btn.craft-shine { position: relative; overflow: hidden; animation: craft-glow 1.5s ease-in-out infinite; }
.recipes .btn.craft-shine::after { content: ""; position: absolute; top: -30%; bottom: -30%; left: -70%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.9), transparent); transform: skewX(-18deg); animation: craft-sweep 1.5s ease-in-out infinite; pointer-events: none; }
@keyframes craft-sweep { 0% { left: -70%; } 55%, 100% { left: 130%; } }
@keyframes craft-glow { 0%, 100% { box-shadow: inset 0 0 0 1px #fff3b0, 0 3px 0 var(--gold-dark), 0 0 6px 1px rgba(255, 210, 63, 0.55); } 50% { box-shadow: inset 0 0 0 1px #fff, 0 3px 0 var(--gold-dark), 0 0 18px 5px rgba(255, 222, 90, 0.95); } }
@media (prefers-reduced-motion: reduce) { .recipes .btn.craft-shine { animation: none; box-shadow: inset 0 0 0 1px #fff, 0 3px 0 var(--gold-dark), 0 0 14px 4px rgba(255, 222, 90, 0.9); } .recipes .btn.craft-shine::after { display: none; } }
/* Brom's five benches (rpg/bench-nav.js): one tab bar on top of the Forge, Sockets & gems, Class gems, Enchant and Gem
   board windows, in the Rankings' tab look (.rk-tabs), five across. The blue badge counts what you carry for that bench. Inside Craft gear,
   the tiers and the class are labelled rows of small round chips (.fg-pick), so they never read as more windows (owner,
   2026-10-13, on one style for all three: "these tabs and menus arent very clear at all"). */
.bench-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 10px 0 12px; }
.bench-nav button { position: relative; display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; min-height: 44px; padding: 7px 8px; border-radius: 10px; background: linear-gradient(180deg, rgba(23, 36, 88, 0.92), rgba(8, 15, 48, 0.92)); border: 2px solid #2e3d74; color: var(--muted); font-size: 17px; line-height: 1; box-shadow: inset 0 1px 0 rgba(169, 179, 214, 0.22), 0 3px 0 rgba(0, 0, 0, 0.35); cursor: pointer; transition: background 0.12s, border-color 0.12s; }
.bench-nav button img { flex: none; width: 24px; height: 24px; image-rendering: pixelated; opacity: 0.75; }
.bench-nav button span { min-width: 0; text-align: center; }
.bench-nav button:hover { border-color: var(--edge-light); color: var(--text); }
.bench-nav button.on { background: linear-gradient(180deg, #ffe066, var(--gold-2)); border-color: #3a2a00; color: var(--navy-900); box-shadow: inset 0 0 0 1px #fff3b0, 0 3px 0 #6a4a00; cursor: default; }
.bench-nav button.on img { opacity: 1; }
.bench-nav small { position: absolute; top: -8px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #4a6dff; border: 2px solid #0b1233; color: #fff; font-size: 13px; line-height: 16px; text-align: center; }
.fg-pick { display: flex; align-items: flex-start; gap: 10px; margin: 8px 0; }
.fg-cap { flex: none; width: 76px; padding-top: 9px; color: var(--gold); font-size: 14px; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase; }
.fg-opts { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.fg-opts button { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 3px 12px 3px 5px; border-radius: 999px; border: 1px solid #2e3d74; background: rgba(3, 10, 44, 0.45); color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer; }
.fg-opts button:hover { border-color: var(--edge-light); color: var(--text); }
.fg-opts button.on { border-color: var(--gold); background: rgba(255, 210, 63, 0.14); color: #fff3b0; box-shadow: inset 0 0 0 1px rgba(255, 210, 63, 0.4); }
.fg-opts button[data-fst] { padding-left: 12px; }
.fg-opts button b { font-weight: 400; color: var(--gold); }
.fg-opts button em { font-style: normal; padding: 0 5px; border-radius: 4px; background: var(--gold); color: #10183a; font-size: 12px; line-height: 16px; text-transform: uppercase; }
@media (max-width: 560px) {
  .bench-nav { gap: 6px; }
  .bench-nav button { flex-direction: column; gap: 3px; min-height: 56px; padding: 6px 3px; font-size: 14px; }
  .bench-nav small { right: -4px; }
  .fg-pick { flex-direction: column; gap: 5px; }
  .fg-cap { width: auto; padding-top: 0; }
}
.recipes li > div { flex: 1; min-width: 0; }
.recipes li b { font-size: 17px; color: #fff; }
.recipes li small { color: var(--muted); font-size: 13px; }
.recipes .need { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 3px; font-size: 14px; }
.recipes .need span { display: inline-flex; align-items: center; gap: 2px; }
.recipes .need .ri { width: 20px; height: 20px; }
.recipes .need .ok { color: var(--green); } .recipes .need .no { color: #ff8a80; }
/* Class cards: avatar, name + role badge, four strength bars, the matchup, the buttons. */
/* Rows of four on wide screens, two by two below that (never three and a lone one), one column on phones; a short row
   (a training ground's two rare classes, or the rare ones under the main four) sits centred. */
.class-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.class-grid > .class-card { flex: 0 1 calc((100% - 36px) / 4); min-width: 0; }
@media (max-width: 1000px) { .class-grid > .class-card { flex-basis: calc((100% - 12px) / 2); } }
@media (max-width: 520px) { .class-grid > .class-card { flex-basis: 100%; } }
.class-card {
  position: relative; display: grid; gap: 8px; align-content: start; padding: 10px 12px 12px; border-radius: 12px; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--cc, #7fd4ff) 14%, #101a55), #070d33 60%);
  border: 2px solid #2e3d74; box-shadow: 0 3px 0 #000a2e;
}
.class-card { transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; }
.class-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--cc); box-shadow: 0 0 10px var(--cc); }
.class-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--cc) 70%, #2e3d74); box-shadow: 0 0 22px color-mix(in srgb, var(--cc) 35%, transparent), 0 6px 0 #000a2e; }
.class-card.current { border-color: var(--gold); box-shadow: 0 0 0 1px #000, 0 0 18px rgba(255, 210, 63, 0.35), 0 3px 0 #000a2e; }
.class-card.focus { box-shadow: 0 0 0 2px var(--cyan), 0 0 18px rgba(127, 212, 255, 0.35); }
.class-card h3 { font-family: var(--display); font-weight: 400; color: var(--gold); margin: 0; font-size: 22px; line-height: 1; }
.cc-head { display: grid; gap: 3px; }
/* Role badge: class-coloured pill with a light sweep. */
.cc-role {
  position: relative; overflow: hidden; justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px 3px 8px; border-radius: 999px;
  font-size: 14px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; text-shadow: 0 0 8px var(--cc), 0 1px 0 #000;
  background: linear-gradient(180deg, color-mix(in srgb, var(--cc) 45%, #0a102a), color-mix(in srgb, var(--cc) 18%, #070d33));
  border: 1px solid var(--cc); box-shadow: 0 0 12px color-mix(in srgb, var(--cc) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.cc-role svg { width: 13px; height: 13px; color: var(--cc); filter: drop-shadow(0 0 3px var(--cc)); }
.cc-role::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%); transform: translateX(-120%); animation: cc-sweep 4.5s ease-in-out infinite; }
@keyframes cc-sweep { 0%, 60% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.cc-you { position: absolute; top: 8px; right: 8px; padding: 2px 7px; border-radius: 6px; font-family: var(--display); font-size: 11px; letter-spacing: 0.05em; color: #2a1a00; background: linear-gradient(180deg, #fff3a0, var(--gold)); border: 1px solid #000; }
.cc-stats { display: grid; gap: 5px; }
.cc-stat { display: grid; grid-template-columns: 14px 72px 1fr; align-items: center; gap: 6px; font-size: 16px; }
.cc-ico { display: grid; place-items: center; color: var(--sc); }
.cc-ico svg { width: 13px; height: 13px; }
.cc-lbl { color: #dfe6ff; font-weight: 700; }
.cc-pips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.cc-pips i { height: 8px; border-radius: 2px; background: #0a102a; border: 1px solid #000; }
.cc-pips i.on { background: var(--sc); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.cc-vs { display: flex; align-items: center; gap: 6px; font-size: 16px; color: var(--muted); }
.cc-vs img { width: 21px; height: 24px; image-rendering: auto; }
.cc-vs b { color: #fff; }
.cc-actions { margin-top: 2px; }
.cc-actions .btn { flex: 1; justify-content: center; }
/* Rankings: board tabs, then the board on an unrolled parchment scroll (RuneScape hiscores style): a podium for the
   top three (gold, silver and bronze), then a Rank / Name / Level / XP table in ink. Your row is marked in gold. */
.modal h2.rk-title { padding-right: 36px; }
.rk-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
.rk-tabs button { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; min-height: 42px; padding: 7px 8px; border-radius: 10px; background: linear-gradient(180deg, rgba(23, 36, 88, 0.92), rgba(8, 15, 48, 0.92)); border: 2px solid #2e3d74; color: var(--muted); font-size: 18px; line-height: 1; box-shadow: inset 0 1px 0 rgba(169, 179, 214, 0.22), 0 3px 0 rgba(0, 0, 0, 0.35); transition: background 0.12s, border-color 0.12s, transform 0.12s; }
.rk-tabs button img { width: 24px; height: 24px; image-rendering: pixelated; opacity: 0.75; }
.rk-tabs button:hover { border-color: var(--edge-light); color: var(--text); }
.rk-tabs button.on { background: linear-gradient(180deg, #ffe066, var(--gold-2)); border-color: #3a2a00; color: var(--navy-900); box-shadow: inset 0 0 0 1px #fff3b0, 0 3px 0 #6a4a00; transform: translateY(-1px); }
.rk-tabs button.on img { opacity: 1; }
.rk-scroll { --ink: #3a2812; --ink-2: #6e5532; --line: rgba(92, 62, 24, 0.5); position: relative; margin: 16px 14px 18px; padding: 16px 0; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.5)); animation: rk-unroll 0.7s cubic-bezier(0.4, 0, 0.2, 1); }
/* The two rolled-up ends: wider than the sheet, shaded round, the paper's lip winding round each one and the curl's
   spiral showing at both ends. The sheet comes out from under them. */
.rk-scroll::before, .rk-scroll::after {
  --lip: 70%; content: ""; position: absolute; z-index: 1; left: -14px; right: -14px; height: 30px; border-radius: 9px / 15px;
  background:
    radial-gradient(ellipse 8px 15px at 9px 50%, #4a3010 0 12%, #d8bd85 14% 30%, #8a6530 32% 42%, #efdcac 44% 60%, #9c7438 62% 72%, #e2c993 74% 88%, #6b4a1e 90% 100%, transparent 102%),
    radial-gradient(ellipse 8px 15px at calc(100% - 9px) 50%, #4a3010 0 12%, #d8bd85 14% 30%, #8a6530 32% 42%, #efdcac 44% 60%, #9c7438 62% 72%, #e2c993 74% 88%, #6b4a1e 90% 100%, transparent 102%),
    linear-gradient(180deg, transparent calc(var(--lip) - 1px), rgba(110, 76, 31, 0.6) calc(var(--lip) - 1px) calc(var(--lip) + 1px), rgba(255, 246, 220, 0.5) calc(var(--lip) + 1px) calc(var(--lip) + 2px), transparent calc(var(--lip) + 2px)),
    linear-gradient(180deg, #7d5a28, #c4a066 14%, #efdfb6 36%, #fbf2da 46%, #e9d4a2 60%, #bf9a5e 82%, #7a5626);
}
.rk-scroll::before { top: 0; box-shadow: inset 0 0 0 1px rgba(60, 36, 8, 0.5), 0 4px 5px -2px rgba(60, 36, 8, 0.55); }
.rk-scroll::after { --lip: 28%; top: calc(100% - 30px); box-shadow: inset 0 0 0 1px rgba(60, 36, 8, 0.5), 0 -4px 5px -2px rgba(60, 36, 8, 0.4); animation: rk-roll 0.7s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes rk-unroll { from { clip-path: inset(-20px -20px calc(100% - 30px) -20px); } to { clip-path: inset(-20px -20px 0 -20px); } }
@keyframes rk-roll { from { top: 0; } }
/* The sheet: aged paper, darker towards the edges and under the rolls, its sides finely torn (a mask) with a faint
   brown line along the tear. */
.rk-body {
  position: relative; padding: 18px 18px 14px; color: var(--ink);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='96'%3E%3Cpath d='M3.2 0Q3.0 6 3.3 9Q3.6 12 4.7 15Q5.8 18 4.45 21Q3.1 24 3.2 27Q3.3 30 3.55 33Q3.8 36 2.65 39Q1.5 42 2.45 45Q3.4 48 3.75 51Q4.1 54 4.55 57Q5.0 60 2.95 63Q0.9 66 1.55 69Q2.2 72 1.55 75Q0.9 78 3.0 81Q5.1 84 4.75 87Q4.4 90 3.8 93L3.2 96' fill='none' stroke='%238a6530' stroke-width='6' stroke-opacity='.22'/%3E%3Cpath d='M3.2 0Q3.0 6 3.3 9Q3.6 12 4.7 15Q5.8 18 4.45 21Q3.1 24 3.2 27Q3.3 30 3.55 33Q3.8 36 2.65 39Q1.5 42 2.45 45Q3.4 48 3.75 51Q4.1 54 4.55 57Q5.0 60 2.95 63Q0.9 66 1.55 69Q2.2 72 1.55 75Q0.9 78 3.0 81Q5.1 84 4.75 87Q4.4 90 3.8 93L3.2 96' fill='none' stroke='%236e4c1f' stroke-width='1.3' stroke-opacity='.85'/%3E%3C/svg%3E") left top / 10px 96px repeat-y,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='96'%3E%3Cpath d='M6.8 0Q4.0 6 6.75 9Q9.5 12 9.45 15Q9.4 18 8.5 21Q7.6 24 7.5 27Q7.4 30 6.05 33Q4.7 36 4.3 39Q3.9 42 5.4 45Q6.9 48 5.5 51Q4.1 54 4.5 57Q4.9 60 5.05 63Q5.2 66 4.6 69Q4.0 72 5.25 75Q6.5 78 6.45 81Q6.4 84 7.55 87Q8.7 90 7.75 93L6.8 96' fill='none' stroke='%238a6530' stroke-width='6' stroke-opacity='.22'/%3E%3Cpath d='M6.8 0Q4.0 6 6.75 9Q9.5 12 9.45 15Q9.4 18 8.5 21Q7.6 24 7.5 27Q7.4 30 6.05 33Q4.7 36 4.3 39Q3.9 42 5.4 45Q6.9 48 5.5 51Q4.1 54 4.5 57Q4.9 60 5.05 63Q5.2 66 4.6 69Q4.0 72 5.25 75Q6.5 78 6.45 81Q6.4 84 7.55 87Q8.7 90 7.75 93L6.8 96' fill='none' stroke='%236e4c1f' stroke-width='1.3' stroke-opacity='.85'/%3E%3C/svg%3E") right top / 10px 96px repeat-y,
    radial-gradient(ellipse 60% 40% at 30% 22%, rgba(255, 250, 228, 0.5), transparent 70%),
    radial-gradient(ellipse 50% 35% at 78% 72%, rgba(150, 108, 50, 0.13), transparent 70%),
    repeating-linear-gradient(90deg, rgba(120, 84, 36, 0.035) 0 2px, transparent 2px 5px),
    linear-gradient(90deg, #c4a066, #e4cd98 6%, #eddcb0 50%, #e4cd98 94%, #c4a066);
  box-shadow: inset 0 12px 12px -8px rgba(90, 58, 16, 0.55), inset 0 -12px 12px -8px rgba(90, 58, 16, 0.55);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='96'%3E%3Cpath d='M3.2 0Q3.0 6 3.3 9Q3.6 12 4.7 15Q5.8 18 4.45 21Q3.1 24 3.2 27Q3.3 30 3.55 33Q3.8 36 2.65 39Q1.5 42 2.45 45Q3.4 48 3.75 51Q4.1 54 4.55 57Q5.0 60 2.95 63Q0.9 66 1.55 69Q2.2 72 1.55 75Q0.9 78 3.0 81Q5.1 84 4.75 87Q4.4 90 3.8 93L3.2 96H10V0Z'/%3E%3C/svg%3E") left top / 10px 96px repeat-y, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='96'%3E%3Cpath d='M6.8 0Q4.0 6 6.75 9Q9.5 12 9.45 15Q9.4 18 8.5 21Q7.6 24 7.5 27Q7.4 30 6.05 33Q4.7 36 4.3 39Q3.9 42 5.4 45Q6.9 48 5.5 51Q4.1 54 4.5 57Q4.9 60 5.05 63Q5.2 66 4.6 69Q4.0 72 5.25 75Q6.5 78 6.45 81Q6.4 84 7.55 87Q8.7 90 7.75 93L6.8 96H0V0Z'/%3E%3C/svg%3E") right top / 10px 96px repeat-y, linear-gradient(#000 0 0) center / calc(100% - 20px) 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='96'%3E%3Cpath d='M3.2 0Q3.0 6 3.3 9Q3.6 12 4.7 15Q5.8 18 4.45 21Q3.1 24 3.2 27Q3.3 30 3.55 33Q3.8 36 2.65 39Q1.5 42 2.45 45Q3.4 48 3.75 51Q4.1 54 4.55 57Q5.0 60 2.95 63Q0.9 66 1.55 69Q2.2 72 1.55 75Q0.9 78 3.0 81Q5.1 84 4.75 87Q4.4 90 3.8 93L3.2 96H10V0Z'/%3E%3C/svg%3E") left top / 10px 96px repeat-y, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='96'%3E%3Cpath d='M6.8 0Q4.0 6 6.75 9Q9.5 12 9.45 15Q9.4 18 8.5 21Q7.6 24 7.5 27Q7.4 30 6.05 33Q4.7 36 4.3 39Q3.9 42 5.4 45Q6.9 48 5.5 51Q4.1 54 4.5 57Q4.9 60 5.05 63Q5.2 66 4.6 69Q4.0 72 5.25 75Q6.5 78 6.45 81Q6.4 84 7.55 87Q8.7 90 7.75 93L6.8 96H0V0Z'/%3E%3C/svg%3E") right top / 10px 96px repeat-y, linear-gradient(#000 0 0) center / calc(100% - 20px) 100% no-repeat;
}
.rk-cap { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-family: var(--display); font-weight: 400; font-size: 20px; color: #4a2f0e; text-shadow: 0 1px 0 rgba(255, 246, 214, 0.7); white-space: nowrap; }
.rk-cap::before, .rk-cap::after { content: ""; flex: 1; height: 2px; background: linear-gradient(90deg, transparent, var(--line)); }
.rk-cap::after { transform: scaleX(-1); }
.rk-seg { display: flex; justify-content: center; gap: 6px; margin: 0 0 10px; flex-wrap: wrap; }
.rk-seg button { display: inline-flex; align-items: center; gap: 5px; padding: 3px 11px 3px 6px; border-radius: 999px; background: rgba(120, 84, 36, 0.12); border: 2px solid rgba(92, 62, 24, 0.4); color: var(--ink-2); font-size: 17px; }
.rk-seg button .ri { width: 22px; height: 22px; }
.rk-seg button:hover { border-color: var(--ink-2); color: var(--ink); }
.rk-seg button.on { background: #5a3d18; border-color: #2e1e08; color: #f6e7bd; }
/* The League window (rpg/ui-league.js), on the Rankings' parchment scroll: the league's badge in its metal, a key you
   hold, your road to a key under the board, the prize in a dark showcase (the league's own pack, drawn like the hunt's:
   /hunt/reveal.js), last week's top three and pack, the three leagues, how to score, the rules and the docs button. */
.lg-seg button span { font-size: 16px; line-height: 1; }
.lg-head { --lg-metal: #a0643a; --lg-hi: #e2a46a; --lg-glow: #e08a4a; margin: 0 auto 12px; max-width: 560px; padding: 10px 12px 12px; border: 2px solid rgba(92, 62, 24, 0.45); border-radius: 10px; background: rgba(255, 246, 220, 0.55); text-align: center; color: var(--ink); }
.lg-head.lg-silver { --lg-metal: #7d8796; --lg-hi: #d9e0ea; --lg-glow: #a9c4ff; }
.lg-head.lg-gold { --lg-metal: #b8860b; --lg-hi: #ffd76a; --lg-glow: #ffd23f; }
.lg-badge { display: inline-flex; align-items: center; gap: 8px; padding: 3px 14px 3px 8px; border-radius: 999px; background: linear-gradient(180deg, var(--lg-hi), var(--lg-metal)); border: 2px solid rgba(46, 30, 8, 0.55); color: #2a1a06; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.lg-badge .lg-medal { font-size: 22px; line-height: 1; }
.lg-badge b { font-family: "Titan One", system-ui, sans-serif; font-weight: 400; font-size: 18px; letter-spacing: 0.02em; }
.lg-badge small { font-size: 13px; opacity: 0.85; }
.lg-head p { margin: 6px 0 0; font-size: 16px; line-height: 1.35; }
.lg-head h4 { margin: 0 0 6px; font-family: "Titan One", system-ui, sans-serif; font-weight: 400; font-size: 16px; letter-spacing: 0.02em; color: #4a2f0e; }
.lg-mine { padding: 6px 9px; border-radius: 8px; background: rgba(255, 215, 106, 0.55); border: 1px solid rgba(184, 134, 11, 0.65); }
.lg-key-assets { text-align: left; }
.lg-key-asset { display: grid; grid-template-columns: minmax(140px, 1fr) auto; gap: 7px 9px; align-items: center; margin-top: 8px; padding: 9px; border: 1px solid color-mix(in srgb, var(--lg-metal) 55%, transparent); border-radius: 9px; background: rgba(255,255,255,.42); }
.lg-key-asset > p { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 8px; margin: 0; }
.lg-key-asset > p small { color: var(--ink-2); }
.lg-key-asset label { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; font-weight: 700; }
.lg-key-asset input, .lg-key-asset select { min-width: 0; height: 34px; border: 1px solid rgba(51,38,22,.42); border-radius: 6px; background: #fffdf5; color: var(--ink); font: inherit; }
.lg-key-asset input[data-lgto] { flex: 1; }
.lg-key-asset input[data-lgpn] { width: 86px; }
.lg-key-listed { grid-column: 1 / -1; color: #765014; font-weight: 800; }
/* The prize: a key for each of the top N (a row of keys in the league's metal), racing for the one pack in a glow on
   navy, then the three steps and the one-pack-a-day line. */
.lg-prize { position: relative; margin: 10px 0 0; padding: 12px 14px; border-radius: 12px; overflow: hidden; text-align: center; color: #e9edff;
  background: radial-gradient(220px 110px at 50% 50%, color-mix(in srgb, var(--lg-glow) 24%, transparent), transparent 70%), linear-gradient(160deg, #1d1650, #0b0828 70%);
  border: 2px solid color-mix(in srgb, var(--lg-glow) 70%, #2e1e08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 3px 0 rgba(46, 30, 8, 0.35); }
.lg-race { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 10px 0 2px; }
.lg-keys { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.lg-keys li { display: grid; justify-items: center; gap: 4px; color: var(--lg-glow); }
.lg-keyart { width: 24px; height: 48px; filter: drop-shadow(1.5px 0 0 #120c2e) drop-shadow(-1.5px 0 0 #120c2e) drop-shadow(0 1.5px 0 #120c2e) drop-shadow(0 -1.5px 0 #120c2e) drop-shadow(0 0 7px color-mix(in srgb, var(--lg-glow) 60%, transparent)); }
.lg-keyart rect:not([fill]) { fill: currentColor; }
.lg-keys small { font-size: 12px; font-weight: 700; line-height: 1; color: #aab4e0; }
.lg-keys li.me .lg-keyart { translate: 0 -3px; filter: drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff) drop-shadow(0 1.5px 0 #fff) drop-shadow(0 -1.5px 0 #fff) drop-shadow(0 0 8px var(--lg-glow)); }
.lg-keys li.me small { padding: 2px 5px; border-radius: 999px; background: var(--lg-glow); color: #1a1206; }
.lg-arrow { flex: none; width: 24px; height: 16px; background: color-mix(in srgb, var(--lg-glow) 80%, #fff); clip-path: polygon(0 34%, 52% 34%, 52% 0, 100% 50%, 52% 100%, 52% 66%, 0 66%); }
.lg-goal { display: grid; justify-items: center; gap: 6px; }
.lg-goal small { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; color: #ffe27a; }
.lg-art { position: relative; width: 64px; aspect-ratio: 0.62; display: grid; place-items: center; rotate: -5deg; }
.lg-art::before { content: ""; position: absolute; inset: -30% -40%; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--lg-glow) 22%, transparent) 0deg 9deg, transparent 9deg 24deg); -webkit-mask: radial-gradient(closest-side, #000 30%, transparent); mask: radial-gradient(closest-side, #000 30%, transparent); animation: lgRays 24s linear infinite; }
.lg-art .zpack { position: relative; width: 100%; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 12px color-mix(in srgb, var(--lg-glow) 55%, transparent)); animation: lgBob 3s ease-in-out infinite; }
.lg-art-ph { position: relative; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 8px; background: linear-gradient(160deg, #26201a, #050403); border: 2px solid var(--lg-glow); font-family: "Titan One", system-ui, sans-serif; font-size: 17px; color: var(--lg-glow); }
.lg-art.drawn .lg-art-ph { display: none; }
@keyframes lgRays { to { rotate: 360deg; } }
@keyframes lgBob { 50% { translate: 0 -4px; } }
.lg-kick { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lg-glow); }
.lg-big { display: block; margin: 2px 0 0; font-family: "Titan One", system-ui, sans-serif; font-weight: 400; font-size: 23px; line-height: 1.1; color: #fff; }
.lg-big span { color: #ffd23f; }
.lg-sub { display: block; margin: 3px 0 0; font-size: 14.5px; line-height: 1.3; color: #c9d3ff; }
.lg-sub b { color: #ffe27a; }
.lg-facts { display: grid; gap: 5px; margin: 10px 0 0; padding: 9px 0 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 14.5px; line-height: 1.3; text-align: left; }
.lg-facts li { display: flex; align-items: flex-start; gap: 8px; }
.lg-n { flex: none; display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: var(--lg-glow); color: #1a1206; font-size: 12px; font-weight: 900; line-height: 1; }
.lg-facts b { color: #ffe27a; font-weight: 700; }
.lg-facts small { color: #aab4e0; font-size: 12.5px; }
/* One pack per wallet per 24 h, as a pick: the drop pack OR the league pack (side by side once there's room). */
.lg-prize .lg-day1 { margin: 10px 0 0; padding: 8px 10px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); font-size: 13.5px; line-height: 1.35; text-align: left; color: #c9d3ff; }
.lg-day1 b { color: #ffe27a; }
.lg-day1 .lg-day1-t { display: block; margin: 0 0 3px; font-size: 14.5px; color: #fff; }
.lg-pick { display: grid; gap: 4px; margin: 8px 0 0; }
.lg-opt { padding: 6px 9px 7px; border-radius: 7px; background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(255, 255, 255, 0.1); border-left: 3px solid var(--lg-glow); }
.lg-opt b { display: block; margin: 0 0 1px; color: #fff; }
.lg-opt span { display: block; }
.lg-or { justify-self: center; font-size: 11.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1; color: var(--lg-glow); }
@media (min-width: 640px) { .lg-pick { grid-template-columns: 1fr auto 1fr; gap: 8px; } .lg-or { align-self: center; } }
/* The foot under the board (leagueFoot): your road to a key, how to score, last week's pack, the docs button. */
.lg-foot { margin: 14px auto 12px; }
.lg-foot > .lg-road:first-child { margin-top: 0; }
.lg-week { color: var(--ink-2); font-size: 15px !important; }
.lg-week small { font-size: 13px; }
/* Your road to a key: each rule ticked off, where you stand, and what to do next. */
.lg-road { margin: 10px 0 0; padding: 9px 11px 10px; border-radius: 9px; background: rgba(255, 252, 238, 0.6); border: 1px solid rgba(92, 62, 24, 0.35); text-align: left; }
.lg-road h4 { text-align: center; }
.lg-road ol { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.lg-road li { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px; font-size: 15.5px; line-height: 1.25; }
.lg-tick { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(92, 62, 24, 0.45); background: rgba(255, 255, 255, 0.5); font-size: 13px; font-weight: 900; color: #fff; }
.lg-road li.ok .lg-tick { background: #3f9a3a; border-color: #23621f; }
.lg-road li.ok .lg-what { color: var(--ink-2); }
.lg-road em { display: inline-flex; align-items: center; gap: 6px; font-style: normal; font-weight: 700; color: #6a3f0a; white-space: nowrap; }
.lg-road li.ok em { color: #2f7a2b; }
.lg-pips { display: inline-flex; gap: 3px; }
.lg-pips i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid rgba(92, 62, 24, 0.6); background: rgba(255, 255, 255, 0.6); }
.lg-pips i.on { background: #3f9a3a; border-color: #23621f; }
.lg-road .lg-next { margin: 8px 0 0; padding: 6px 9px; border-radius: 7px; background: rgba(255, 215, 106, 0.42); border-left: 4px solid #b8860b; font-size: 15px; }
.lg-road.lg-solo { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; text-align: center; }
.lg-road.lg-solo p { margin: 0; }
.lg-mine-btn { padding: 3px 12px; border-radius: 999px; background: rgba(120, 84, 36, 0.12); border: 2px solid rgba(92, 62, 24, 0.45); color: var(--ink); font-size: 15px; }
.lg-mine-btn:hover { border-color: var(--ink-2); }
/* How to score: the biggest first. */
.lg-score { margin: 10px 0 0; }
.lg-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin: 0; padding: 0; list-style: none; }
.lg-chips li { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 6px; border-radius: 999px; background: rgba(120, 84, 36, 0.1); border: 1px solid rgba(92, 62, 24, 0.35); font-size: 14px; line-height: 1.5; white-space: nowrap; }
.lg-chips li b { color: #2f7a2b; font-weight: 800; }
.lg-chips li.lg-x { background: rgba(255, 190, 50, 0.32); border-color: rgba(176, 120, 10, 0.8); } /* 𝕏's chips, first (rpg/ui-league.js SCORE) */
.lg-head .lg-fine { margin-top: 6px; font-size: 13.5px; color: var(--ink-2); }
.lg-pack { color: var(--ink-2); }
.lg-docs { display: inline-flex; align-items: center; gap: 7px; margin: 12px 0 0; padding: 6px 16px; border-radius: 999px; background: #5a3d18; border: 2px solid #2e1e08; color: #f6e7bd; font-size: 16px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.lg-docs:hover { background: #6d4a1d; }
.lg-key { font-size: 13px; }
/* Its three tabs in one row; on a narrow phone each icon sits over its word. */
.lgw-tabs button span { white-space: nowrap; }
@media (max-width: 440px) { .lgw-tabs button { flex-direction: column; gap: 3px; min-height: 52px; padding-top: 5px; padding-bottom: 5px; font-size: 15px; } }
.lg-head.lg-top { margin-bottom: 8px; padding: 0; border: 0; background: none; }
.lg-head.lg-top .lg-mine { margin-top: 8px; }
.lg-info > .lg-score:first-child { margin-top: 0; }
.lg-tiers { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.lg-tiers li { --lg-metal: #a0643a; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 9px; background: rgba(255, 252, 238, 0.6); border: 1px solid rgba(92, 62, 24, 0.3); border-left: 5px solid var(--lg-metal); text-align: left; }
.lg-tiers li.lg-silver { --lg-metal: #7d8796; }
.lg-tiers li.lg-gold { --lg-metal: #b8860b; }
.lg-tiers li.me { background: rgba(255, 215, 106, 0.42); border-color: rgba(184, 134, 11, 0.65); border-left-color: var(--lg-metal); }
.lg-tiers .lg-medal { font-size: 22px; line-height: 1; }
.lg-tier { display: grid; gap: 1px; }
.lg-tier b { font-family: "Titan One", system-ui, sans-serif; font-weight: 400; font-size: 17px; letter-spacing: 0.02em; }
.lg-tier small { color: var(--ink-2); font-size: 14px; }
.lg-tier i { display: inline-block; margin-left: 4px; padding: 1px 7px; vertical-align: 3px; border-radius: 999px; background: #5a3d18; color: #f6e7bd; font-size: 12px; font-style: normal; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.lg-tiers em { font-style: normal; font-weight: 700; color: #2f7a2b; white-space: nowrap; }
.lg-rules { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; text-align: left; }
.lg-rules li { display: grid; grid-template-columns: 22px 1fr; gap: 6px; font-size: 15px; line-height: 1.35; }
.lg-rules li > span:first-child { text-align: center; }
.lg-rules b { color: #4a2f0e; }
@media (max-width: 480px) {
  .lg-head { padding: 8px 9px 10px; } .lg-badge b { font-size: 16px; } .lg-head p { font-size: 15px; }
  .lg-prize { padding: 10px 10px; } .lg-art { width: 56px; } .lg-big { font-size: 20px; } .lg-sub { font-size: 13.5px; } .lg-facts { font-size: 13.5px; }
  .lg-race { gap: 9px; } .lg-keys { gap: 4px; } .lg-keyart { width: 20px; height: 40px; }
  .lg-road li { font-size: 14.5px; } .lg-chips li { font-size: 13px; padding: 1px 8px 1px 5px; }
  .lg-rules li { font-size: 14.5px; } .lg-tiers li { padding: 5px 8px; gap: 6px; } .lg-tier b { font-size: 16px; } .lg-tier small { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .lg-art::before, .lg-art .zpack { animation: none; } }
.rk-podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 8px; max-width: 520px; margin: 4px auto 0; border-bottom: 2px solid var(--line); }
.rk-step { --m: #cfd8ea; --m2: #7d8aa8; --t: #4f5a6e; position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; }
.rk-step.p1 { --m: #ffd23f; --m2: #b07a10; --t: #8a5a00; }
.rk-step.p3 { --m: #e59a5a; --m2: #8a4a22; --t: #87431a; }
.rk-hero { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-height: 78px; }
.rk-sprite { width: 42px; height: auto; image-rendering: pixelated; filter: drop-shadow(0 3px 0 rgba(60, 36, 8, 0.35)); }
.rk-step.p1 .rk-sprite { width: 54px; }
.rk-step.p1 .rk-hero { animation: rk-bob 2.4s ease-in-out infinite; }
.rk-crown { width: 33px; height: 21px; margin-bottom: 3px; image-rendering: pixelated; filter: drop-shadow(0 0 5px rgba(255, 190, 40, 0.8)); }
@keyframes rk-bob { 50% { transform: translateY(-3px); } }
.rk-banner { display: grid; place-items: center; min-width: 58px; height: 64px; padding: 0 8px 10px; background: linear-gradient(180deg, var(--m), var(--m2)); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); color: #10183a; font-family: var(--display); font-size: 17px; }
.rk-q { display: grid; place-items: center; width: 44px; height: 60px; border-radius: 22px 22px 8px 8px; background: rgba(120, 84, 36, 0.08); border: 2px dashed rgba(92, 62, 24, 0.45); color: rgba(92, 62, 24, 0.6); font-family: var(--display); font-size: 24px; }
.rk-name { max-width: 100%; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 19px; font-weight: 400; color: var(--ink); }
.rk-val { font-family: var(--display); font-size: 20px; line-height: 1.15; color: var(--t); text-shadow: 0 1px 0 rgba(255, 246, 214, 0.7); }
.rk-step.p1 .rk-val { font-size: 24px; }
.rk-step small { color: var(--ink-2); font-size: 15px; line-height: 1.1; }
.rk-block { width: 100%; margin-top: 6px; height: 34px; display: grid; place-items: center; border-radius: 8px 8px 0 0; background: linear-gradient(180deg, var(--m) 0 5px, var(--m2) 5px, color-mix(in srgb, var(--m2) 60%, #3a2812)); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25); }
.rk-step.p1 .rk-block { height: 50px; }
.rk-step.p3 .rk-block { height: 24px; }
.rk-block span { font-family: var(--display); font-size: 22px; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45); }
.rk-step.p1 .rk-block span { font-size: 28px; }
.rk-step.p3 .rk-block span { font-size: 18px; }
.rk-step.open { opacity: 0.55; }
.rk-step.open .rk-name { color: var(--ink-2); }
.rk-step.you .rk-sprite { filter: drop-shadow(2px 0 0 var(--gold-2)) drop-shadow(-2px 0 0 var(--gold-2)) drop-shadow(0 2px 0 var(--gold-2)) drop-shadow(0 -2px 0 var(--gold-2)) drop-shadow(0 3px 0 rgba(60, 36, 8, 0.35)); }
.rk-step .rk-you { margin: 1px 0 2px; }
.rk-you { display: inline-block; margin-left: 5px; padding: 0 5px; border-radius: 4px; background: var(--gold); color: #10183a; font-style: normal; font-size: 13px; line-height: 17px; vertical-align: 2px; box-shadow: 0 0 0 1px #8a5a00; }
/* The hiscores table: plain ink rows, ranks on the left, the numbers right-aligned. */
.rk-table { width: 100%; margin: 12px 0 0; border-collapse: collapse; table-layout: fixed; font-size: 18px; }
.rk-table th { padding: 0 6px 4px; font-weight: 400; text-align: left; color: #2e1e08; font-size: 17px; border-bottom: 2px solid var(--line); }
.rk-table td { padding: 3px 6px; border-bottom: 1px dotted rgba(92, 62, 24, 0.35); white-space: nowrap; }
.rk-table tbody tr:nth-child(even) td { background: rgba(120, 84, 36, 0.07); }
.rk-table tbody tr:hover td { background: rgba(255, 250, 228, 0.5); }
.rk-table .rk-n { width: 3.2em; padding-right: 10px; text-align: right; }
.rk-table .rk-c { width: 4.4em; text-align: right; }
.rk-table .rk-c:last-child { width: 6.4em; }
.rk-table tr.you td { background: rgba(255, 200, 50, 0.45); }
.rk-table tr.you td:first-child { box-shadow: inset 3px 0 0 #a8740c; }
.rk-nm { display: flex; align-items: center; gap: 7px; min-width: 0; }
.rk-nm b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; }
.rk-nm .ri { flex: none; width: 22px; height: 22px; }
.rk-nm .rk-you { flex: none; margin-left: 0; vertical-align: 0; }
.rk-tag { flex: none; display: grid; place-items: center; height: 20px; padding: 0 3px; border-radius: 4px; background: var(--stone-3); color: var(--cyan); font-size: 12px; letter-spacing: 0; }
.rk-table .rk-gap td { text-align: center; color: var(--ink-2); line-height: 0.8; letter-spacing: 4px; background: none; border-bottom: none; }
.rk-empty { margin: 8px 0 0; text-align: center; color: var(--ink-2); }
/* Anyone on a board opens their profile (ui-profile.js). */
.rk-pf { cursor: pointer; }
.rk-table tr.rk-pf:hover .rk-nm b, .rk-table tr.rk-pf:focus-visible .rk-nm b { text-decoration: underline; text-underline-offset: 3px; }
.rk-step.rk-pf:hover .rk-name, .rk-step.rk-pf:focus-visible .rk-name { text-decoration: underline; text-underline-offset: 3px; }
.rk-pf:focus-visible { outline: 2px solid #8a5a00; outline-offset: 2px; }
/* How many are ranked (rk-of), your own place's top percentile (owner, 2026-10-10: "show percentile and out of how many",
   then "the top % show to you") and the Power board's 7d: how much each XP grew in the last 7 days, in % (rk-gv in its own
   column, the podium's under the name), green up, red down, plain for 0% or New. */
.rk-of { margin: -4px 0 8px; text-align: center; color: var(--ink-2); font-size: 15px; }
.rk-table .rk-n small { display: block; margin-top: 1px; font-size: 13px; line-height: 1; color: var(--ink-2); white-space: nowrap; }
.rk-gv.up, .rk-step .rk-pct b.up { color: #2f7a3a; }
.rk-gv.down, .rk-step .rk-pct b.down { color: #a3392b; }
.rk-gv.new { color: var(--ink-2); }
.rk-step .rk-pct { display: block; margin-top: 1px; font-size: 14px; line-height: 1.15; color: var(--ink-2); }
.rk-step .rk-pct b { font-weight: 400; }
@media (max-width: 520px) { .rk-table .rk-n small { font-size: 11px; } .rk-step .rk-pct { font-size: 12px; } }
/* Three or more number columns (Power: Level, Quest, XP, 7d): narrower, so names keep their room, phones most of all. */
.rk-table.rk-3 .rk-c { width: 3.6em; }
.rk-table.rk-3 .rk-c:last-child { width: 5.4em; }
@media (max-width: 520px) { .rk-table.rk-3 { font-size: 16px; } .rk-table.rk-3 th { font-size: 15px; } .rk-table.rk-3 td, .rk-table.rk-3 th { padding-left: 3px; padding-right: 3px; } .rk-table.rk-3 .rk-n { width: 2.3em; padding-right: 6px; } .rk-table.rk-3 .rk-c { width: 3em; } .rk-table.rk-3 .rk-c:last-child { width: 4.6em; } .rk-table.rk-3 .rk-nm { gap: 4px; } }
/* Power's XP is no longer the last column: it keeps the wide one, the 7d % after it a little less. On phones Level and
   Quest (two digits at most) give up width and their headings shrink, so names keep room beside four number columns. */
.rk-table.rk-3 .rk-c.rk-xp { width: 5.4em; }
.rk-table.rk-3 .rk-c.rk-xc { width: 5em; }
.rk-table.rk-3 .rk-c.rk-g { width: 4.6em; }
.rk-table td.rk-g { font-size: 0.9em; }
@media (max-width: 520px) {
  .lg-key-asset { grid-template-columns: 1fr; }
  .lg-key-asset > p, .lg-key-listed { grid-column: 1; }
  .lg-key-asset .btn { width: 100%; }
  .rk-table.rk-3 .rk-c.rk-lv, .rk-table.rk-3 .rk-c.rk-qc { width: 30px; padding-left: 1px; padding-right: 1px; }
  .rk-table.rk-3 th.rk-lv, .rk-table.rk-3 th.rk-qc { font-size: 11px; letter-spacing: -0.3px; text-align: center; }
  .rk-table.rk-3 td.rk-lv, .rk-table.rk-3 td.rk-qc { text-align: center; }
  .rk-table.rk-3 .rk-c.rk-xp { width: 62px; }
  .rk-table.rk-3 .rk-c.rk-xc { width: 58px; } /* the Raiders board's ⚡ XP (rpg/ui-rpg.js RANK_TABS.raiders) */
  .rk-table.rk-3 .rk-c.rk-g { width: 50px; }
  .rk-table.rk-3 td.rk-g { font-size: 12px; }
  .rk-table.rk-3 .rk-nm .ri { width: 18px; height: 18px; }
  .rk-table.rk-3 .rk-nm .rk-you { padding: 0 2px; font-size: 10px; line-height: 14px; }
}
/* A player's profile (rpg/ui-profile.js) in the start screen's look (owner, 2026-11-03: "make their profile and ref link
   more clear to see and share and track + like main menu style"): the window in the lobby's dusk with a thin gold edge,
   their hero standing on the start screen's terrace (assets/start/, the painting's foot on the head's) with the name on a
   gold plate and four numbers under it (.hp-stats, like .title-stats), then dark glass panels under small gold capitals
   (.hp-p, like .title-p), in two columns on a computer. */
.modal:has(> #modalBody > .hp) { border: 1px solid rgba(232, 196, 106, 0.42); border-radius: 6px; background: linear-gradient(180deg, #19163a, #0c0b20); box-shadow: 0 0 0 1px #05040f, 0 14px 34px rgba(0, 0, 0, 0.55); }
.hp { --tan: #e8c46a; --line: rgba(232, 196, 106, 0.34); --soft: #b9bfdc; --mute: #9ea6cc; display: grid; gap: 10px; }
.hp > * { margin: 0; }
/* The pills above a profile (◀ Rankings, 🎒 Inventory & storage, ✉ Message, 👁 Watch) and above their inventory (◀ Profile),
   as the start screen's top pills: the icon in a box of its own (an emoji or symbol font's taller line used to push the
   word low) and the word in a line-height 1 box, where the pixel font's capitals sit in the middle (ascent 0.80, descent
   0.27, capitals 0.54 of the em). 31 px tall with a 1 px edge: an odd inner height, centred to the pixel on 1x, 1.25x
   and 2x screens. */
.hp-back { justify-self: start; display: inline-flex; align-items: center; gap: 5px; box-sizing: border-box; height: 31px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line, rgba(232, 196, 106, 0.34)); background: rgba(6, 10, 32, 0.62); color: #e2e6fa; font-size: 16px; white-space: nowrap; cursor: pointer; }
.hp-back > i { font-style: normal; line-height: 1; }
.hp-back > span { line-height: 1; }
.hp-back:hover { color: #fff; border-color: var(--tan, #e8c46a); }
.hp-top { display: flex; flex-wrap: wrap; gap: 8px; padding-right: 36px; } /* room for the window's × */
.hp-wait { color: var(--soft); }
/* Under the head: the card skin they wear, named, how to get it, and a pill to it (rpg/ui-profile.js cardLineHTML). */
.hp-card { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 12px; border: 1px solid var(--line); border-radius: 4px; background: linear-gradient(180deg, rgba(14, 18, 50, 0.92), rgba(7, 10, 30, 0.92)); }
.hp-card > i { flex: none; font-style: normal; font-size: 22px; line-height: 1; }
.hp .hp-card > p { flex: 1; min-width: 0; display: grid; gap: 3px; margin: 0; }
.hp-card b { color: #ffe68a; font-weight: 400; font-size: 17px; line-height: 1.2; }
.hp-card b em { margin-left: 8px; padding: 0 6px; border: 1px solid rgba(232, 196, 106, 0.5); border-radius: 999px; color: var(--tan); font: 400 10px/16px var(--display); font-style: normal; letter-spacing: 0.14em; text-transform: uppercase; vertical-align: 2px; white-space: nowrap; }
.hp-card small { color: var(--soft); font-size: 15px; line-height: 1.25; }
.hp-card small .ok { color: #9ff0b6; white-space: nowrap; }
.hp-card .hp-back { flex: none; }
/* A phone: the words take the row beside the icon, the pill goes under them. */
@media (max-width: 560px) { .hp-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 10px; } .hp-card .hp-back { grid-column: 2; } }
/* The head: the start screen's painting, darker behind the words; the hero on the terrace at the left, the plate beside. */
.hp-head { position: relative; display: grid; grid-template-columns: 136px minmax(0, 1fr); grid-template-areas: "stage id" "stage stats"; align-items: end; gap: 0 6px; min-height: 206px; box-sizing: border-box; padding: 16px 14px 14px 0; overflow: hidden; border: 1px solid var(--line); border-radius: 4px; background: #2a2142 url("/world/assets/start/town-1280.webp") 50% 100% / cover no-repeat; }
.hp-head::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(5, 8, 28, 0.05), rgba(5, 8, 28, 0.6) 30%, rgba(5, 8, 28, 0.74)), linear-gradient(0deg, rgba(5, 8, 28, 0.45), transparent 45%); }
.hp-head > * { position: relative; }
.hp-top + .hp-head, .hp > .hp-head:first-child { margin-top: 0; }
.hp > .hp-head:first-child { padding-right: 46px; } /* no pills above it: room for the window's × */
.hp-stage { grid-area: stage; align-self: stretch; min-height: 150px; }
/* 4x the sprite (16 wide, up to 32 rows: a tall hat shrinks to fit), feet on the terrace's stones. */
.hp-sprite { position: absolute; left: 50%; bottom: 14px; width: 64px; height: 128px; translate: -50% 0; object-fit: contain; object-position: 50% 100%; image-rendering: pixelated; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.35)); }
.hp-shadow { position: absolute; left: 50%; bottom: 14px; width: 62px; height: 16px; translate: -50% 50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), transparent); }
.hp-id { grid-area: id; align-self: center; min-width: 0; display: grid; justify-items: start; gap: 4px; }
.hp .hp-kick { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; line-height: 1; }
.hp-kick:empty { display: none; }
.hp-id h2 { max-width: 100%; margin: 0; padding-bottom: 2px; overflow: hidden; font: 400 34px/1.08 var(--display); letter-spacing: 0.01em; text-overflow: ellipsis; white-space: nowrap; background: linear-gradient(180deg, #fff6c8, #ffd23f 52%, #dc9a1c); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 rgba(40, 20, 0, 0.75)); }
.hp .hp-cls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 18px; line-height: 1.2; color: #e2e6fa; text-shadow: 0 1px 2px #000; }
.hp-cls .ri { width: 26px; height: 26px; }
.hp-chip { padding: 0 7px; border-radius: 999px; font-style: normal; font-size: 13px; line-height: 20px; }
.hp-chip.you { background: var(--gold); color: #10183a; }
.hp-chip.on { background: rgba(80, 220, 120, 0.16); border: 1px solid rgba(80, 220, 120, 0.6); color: #9ff0b6; }
.hp-chip.off { background: rgba(6, 10, 32, 0.6); border: 1px solid rgba(169, 179, 214, 0.35); color: var(--soft); }
.hp .hp-rank { margin: 0; color: var(--soft); font-size: 16px; line-height: 1.3; text-shadow: 0 1px 2px #000; }
.hp-rank b { color: var(--gold); font-weight: 400; }
/* The four numbers: big white digits over small gold capitals, a soft line under them, gold rules between. */
.hp-stats { grid-area: stats; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 12px; padding: 9px 0 8px; border: 1px solid var(--line); border-radius: 4px; background: rgba(6, 10, 32, 0.74); backdrop-filter: blur(3px); }
.hp-stats > span { display: grid; justify-items: center; align-content: start; gap: 4px; min-width: 0; padding: 0 8px; text-align: center; }
.hp-stats > span + span { border-left: 1px solid var(--line); }
.hp-stats b { max-width: 100%; overflow: hidden; color: #fff; font: 400 20px/1 var(--display); text-overflow: ellipsis; white-space: nowrap; }
.hp-stats small { color: var(--tan); font: 400 10px/1 var(--display); letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; }
.hp-stats em { max-width: 100%; overflow: hidden; color: var(--soft); font-size: 14px; font-style: normal; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
/* The panels: dark glass, a thin gold edge, the name in small gold capitals with a note on its right. */
.hp-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 10px; }
.hp-col { display: grid; gap: 10px; min-width: 0; }
.hp-p { min-width: 0; padding-bottom: 12px; border: 1px solid var(--line); border-radius: 4px; background: linear-gradient(180deg, rgba(14, 18, 50, 0.92), rgba(7, 10, 30, 0.92)); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 240, 200, 0.06); }
.hp-ph { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; padding: 9px 12px 8px; border-bottom: 1px solid rgba(232, 196, 106, 0.16); }
.hp-ph b { min-width: 0; overflow: hidden; color: var(--tan); font: 400 12px/1 var(--display); letter-spacing: 0.16em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.hp-ph > span { flex: none; color: var(--soft); font-size: 16px; line-height: 1; }
.hp-ph > span b { color: var(--gold); font: inherit; letter-spacing: 0; text-transform: none; }
.hp-p > :not(.hp-ph) { margin: 0 12px; }
.hp-p > :not(.hp-ph) + :not(.hp-ph) { margin-top: 9px; }
.hp .hp-note { color: var(--mute); font-size: 15px; line-height: 1.3; } /* .hp: over .modal p */
/* The story, inside its panel. */
.hp-story { display: flex; align-items: center; gap: 12px; }
.hp-scroll { flex: none; font-size: 28px; line-height: 1; }
.hp-story > div { min-width: 0; flex: 1; display: grid; gap: 3px; }
.hp-story b { color: #ffe68a; font-weight: 400; font-size: 17px; }
.hp-story.none b { color: #fff; }
.hp-story small { color: var(--soft); font-size: 15px; }
.hp-bar { display: block; height: 7px; margin-top: 3px; border-radius: 999px; background: rgba(0, 0, 0, 0.45); box-shadow: inset 0 0 0 1px rgba(232, 196, 106, 0.16); overflow: hidden; }
.hp-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffd23f, #ffb020); }
/* Number tiles (HP, attack, defence; Colosseum, squad): as many as there are, side by side. */
.hp-tiles { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.hp-tile { display: grid; gap: 3px; min-width: 0; padding: 8px 6px 7px; border: 1px solid rgba(232, 196, 106, 0.16); border-radius: 3px; background: rgba(0, 0, 0, 0.25); text-align: center; }
.hp-tile small { color: var(--tan); font: 400 10px/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; }
.hp-tile b { font: 400 20px/1.15 var(--display); color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-tile span { color: var(--mute); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Invites (ui-profile.js invHTML): on anyone's, who started with their link, who counts, their points and Raider tier with
   the bar to the next; your own, first under the head, starts with the link: Copy (gold), Post it on X, Share…, the Raid
   Center, then the link's visits and your newest players. */
.hp-inv-nums { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; text-align: center; }
.hp-inv-nums span { display: grid; gap: 3px; min-width: 0; padding: 8px 4px 7px; border: 1px solid rgba(232, 196, 106, 0.16); border-radius: 3px; background: rgba(0, 0, 0, 0.25); }
.hp-inv-nums b { font: 400 22px/1.1 var(--display); color: #fff; }
.hp-inv-nums small { color: var(--tan); font: 400 10px/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; }
.hp-inv-nums em { overflow: hidden; color: var(--mute); font-size: 14px; font-style: normal; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.hp-inv-nums .vis b { color: #9fd0ff; }
.hp-inv-nums .ok b { color: #9ff0b6; }
.hp-inv-nums .pts { border-color: rgba(255, 210, 63, 0.45); background: rgba(255, 210, 63, 0.08); }
.hp-inv-nums .pts b { color: var(--gold); }
.hp .hp-inv-tier { color: #dfe6ff; font-size: 15px; line-height: 1.3; }
.hp-inv-tier b { color: #ffe68a; font-weight: 400; }
.hp-mine { border-color: rgba(255, 210, 63, 0.55); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 240, 200, 0.08), 0 0 0 1px rgba(255, 210, 63, 0.12); }
.hp-link { display: flex; gap: 8px; min-width: 0; }
.hp-link input { flex: 1; min-width: 0; box-sizing: border-box; height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 3px; background: rgba(0, 0, 0, 0.4); color: #fff; font: inherit; font-size: 17px; }
.hp-link input:focus { border-color: var(--tan); outline: none; }
.hp-copy { flex: none; box-sizing: border-box; height: 38px; padding: 0 18px; border: 1px solid #8a6410; border-radius: 3px; background: linear-gradient(180deg, #ffe27a, #ffc21a); color: #1d1404; font: 400 14px/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
.hp-copy:hover { background: linear-gradient(180deg, #fff0a8, #ffd23f); }
.hp-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.hp-act { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 3px; background: rgba(232, 196, 106, 0.07); color: var(--tan); font: 400 12px/1 var(--display); letter-spacing: 0.12em; text-decoration: none; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
.hp-act:hover, .hp-act:focus-visible { border-color: var(--tan); background: rgba(232, 196, 106, 0.16); color: #fff3c4; outline: none; text-decoration: none; }
.hp-people { display: grid; gap: 6px; padding: 0; list-style: none; }
.hp-pp { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 5px 8px; border: 1px solid rgba(232, 196, 106, 0.12); border-radius: 3px; background: rgba(0, 0, 0, 0.2); }
.hp-av { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: hsl(var(--h) 55% 42%); color: #fff; font: 400 15px/1 var(--display); }
.hp-pp > span:nth-child(2) { display: grid; min-width: 0; }
.hp-pp b { overflow: hidden; color: #fff; font-weight: 400; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.hp-pp small { color: var(--mute); font-size: 14px; }
.hp-pp em { color: var(--soft); font-size: 14px; font-style: normal; white-space: nowrap; }
.hp-pp.is-counted em { color: #9ff0b6; }
.hp-pp.is-waiting em { color: #ffe68a; }
/* Their XP progress (ui-profile.js progressHTML): today, 7 days, 14 days, and a bar a day (today gold; a day before their record began is a dashed line). */
.hp-xp { display: grid; gap: 8px; }
.hp-xp-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; text-align: center; }
.hp-xp-sum span { min-width: 0; }
.hp-xp-sum small { display: block; color: var(--tan); font: 400 10px/1.3 var(--display); text-transform: uppercase; letter-spacing: 0.14em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-xp-sum b { display: block; font: 400 20px/1.15 var(--display); color: #9ff0b6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-xp-sum em { display: block; font-style: normal; color: var(--soft); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* the time played for it (ui-profile.js) */
.hp-back.hp-bag { color: var(--gold); border-color: rgba(255, 210, 74, 0.55); } /* 🎒 Inventory */
.hp-xp-chart { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 3px; }
.hp-xp-chart i { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; height: 84px; font-style: normal; cursor: pointer; }
.hp-xp-chart i b { display: block; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #5aa0ff, #2b5fd9); }
.hp-xp-chart i.today b { background: linear-gradient(180deg, #ffd23f, #ffb020); }
.hp-xp-chart i.na b { height: 0; border-top: 2px dashed rgba(169, 179, 214, 0.35); border-radius: 0; background: none; }
.hp-xp-chart i:hover b { filter: brightness(1.25); }
.hp-xp-chart i em { display: block; margin-top: 3px; text-align: center; font-style: normal; font-size: 11px; line-height: 1; color: var(--mute); }
.hp-xp-chart i.today em { color: var(--gold); }
.hp .hp-xp-pick { color: #dfe6ff; font-size: 14px; line-height: 1.3; }
/* Each skill: its icon by its name and level, then its XP into the level, how far, and a bar in the skill's colour
   (rpg/ui-profile.js skillHTML; the Character tab's Professions wear the same colours, .prof.sk-*). */
.hp-skills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.hp-skill { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 5px 8px; min-width: 0; padding: 8px 9px 9px; border: 1px solid rgba(232, 196, 106, 0.12); border-radius: 3px; background: rgba(0, 0, 0, 0.2); }
.hp-skill .ri { width: 34px; height: 34px; }
.hp-sk { display: grid; gap: 3px; min-width: 0; }
.hp-sk span { overflow: hidden; color: var(--mute); font-size: 14px; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.hp-sk b { font: 400 17px/1 var(--display); color: #fff; }
.hp-skill > .hp-xpl, .hp-skill > .hp-bar { grid-column: 1 / -1; }
.hp-skill > .hp-xpl { margin-bottom: -2px; }
.hp-bar { display: block; height: 8px; border: 1px solid #000; border-radius: 4px; background: #0a102a; overflow: hidden; }
.hp-bar > span { display: block; height: 100%; background: linear-gradient(180deg, var(--b1, #9fe0ff), var(--b2, #3a8ad8)); } /* a skill's colour (.sk-*), else the level's blue */
.hp-bar.max { --b1: #ffe066; --b2: #e8b52a; }
.hp-xpl { display: flex; justify-content: space-between; gap: 6px; min-width: 0; color: var(--soft); font-size: 13px; line-height: 1.1; white-space: nowrap; }
.hp-xpl > span { overflow: hidden; text-overflow: ellipsis; }
.hp-xpl em { flex: none; color: #7ef08a; font-style: normal; font-weight: 700; }
.hp-xpl em.max { color: var(--gold); letter-spacing: 0.06em; }
/* Their level's bar under the class line (lvBarHTML). */
.hp-lv { display: grid; gap: 4px; width: min(100%, 320px); margin: 2px 0 1px; }
.hp-lv .hp-xpl { color: #dfe6ff; text-shadow: 0 1px 2px #000; }
.sk-mining { --b1: #8cf27a; --b2: #2fae46; }
.sk-hunting { --b1: #ffd36a; --b2: #e8961c; }
.sk-crafting { --b1: #8ccaff; --b2: #2f7fe0; }
.sk-alchemy { --b1: #d2a2ff; --b2: #8a4ae0; }
.sk-fishing { --b1: #8ff4f0; --b2: #1fb0c4; }
.sk-cooking { --b1: #ffb27a; --b2: #e0661c; }
.hp-gear { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.hp-item { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 8px; border: 1px solid rgba(232, 196, 106, 0.12); border-radius: 3px; background: rgba(0, 0, 0, 0.2); }
.hp-item .ri { flex: none; width: 30px; height: 30px; }
.hp-item > span { min-width: 0; display: grid; }
.hp-item small { color: var(--mute); font-size: 13px; }
.hp-item b { color: #fff; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp .hp-wins { color: #dfe6ff; font-size: 15px; line-height: 1.4; }
.hp-wins b { color: var(--mute); font-weight: 400; }
@media (max-width: 760px) { .hp-cols { grid-template-columns: minmax(0, 1fr); } .hp-gear { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Phones: the hero smaller on the terrace, the plate beside it, the four numbers two a row under both. */
@media (max-width: 520px) { .hp-tiles { gap: 6px; } .hp-tile { padding: 6px 4px; } .hp-tile b { font-size: 17px; } .hp-gear { grid-template-columns: minmax(0, 1fr); }
  .hp-head { grid-template-columns: 84px minmax(0, 1fr); grid-template-areas: "stage id" "stats stats"; min-height: 0; padding: 12px 10px 10px 0; }
  .hp-stage { min-height: 112px; }
  .hp-sprite { bottom: 10px; width: 48px; height: 96px; }
  .hp-shadow { bottom: 10px; width: 46px; height: 12px; }
  .hp-id h2 { font-size: 26px; }
  .hp .hp-cls { font-size: 16px; }
  .hp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 10px; margin: 8px 0 0 10px; }
  .hp-stats > span:nth-child(3) { border-left: 0; }
  .hp-inv-nums { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-link input { font-size: 15px; } }
.rk-how { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 8px 10px; border-radius: 6px; background: rgba(120, 84, 36, 0.1); border: 1px dotted rgba(92, 62, 24, 0.45); color: var(--ink-2); font-size: 16px !important; line-height: 1.3 !important; }
.rk-paused { margin: 0 0 10px; padding: 8px 10px; border-radius: 6px; background: rgba(214, 160, 40, 0.2); border: 1px solid rgba(150, 100, 10, 0.6); border-left-width: 4px; color: var(--ink-2); font-size: 15px; line-height: 1.35; } /* the Raiders board while the 𝕏 Raid is paused (rpg/ui-rpg.js) */
.rk-how .ri { flex: none; width: 24px; height: 24px; }
.rk-how b { color: var(--ink); font-weight: 400; }
@media (max-width: 560px) {
  .rk-scroll { margin: 14px 12px 16px; }
  .rk-scroll::before, .rk-scroll::after { left: -12px; right: -12px; }
  .rk-body { padding: 16px 10px 12px; }
  .rk-cap { font-size: 18px; }
  .rk-podium { gap: 5px; }
  .rk-tabs { gap: 5px; }
  .rk-tabs button { min-height: 40px; font-size: 16px; padding-left: 5px; padding-right: 5px; }
  .rk-sprite { width: 36px; }
  .rk-step.p1 .rk-sprite { width: 48px; }
  .rk-name { font-size: 17px; }
  .rk-table { font-size: 16px; }
  .rk-table th { font-size: 15px; }
  .rk-table th, .rk-table td { padding-left: 4px; padding-right: 4px; }
  .rk-table .rk-n { width: 2.7em; padding-right: 6px; }
  .rk-table .rk-c { width: 3.6em; }
  .rk-table .rk-c:last-child { width: 5.2em; }
  .rk-nm { gap: 5px; }
  .rk-nm .ri { width: 20px; height: 20px; }
}
@media (prefers-reduced-motion: reduce) { .rk-step.p1 .rk-hero, .rk-scroll, .rk-scroll::after { animation: none; } }

/* ---------------------------------------------------------------- Adventure and Squad tabs */
.mode { font-size: 11px; padding: 1px 6px; border-radius: 4px; font-family: var(--ui-font); }
.mode.solo { background: var(--cyan); color: var(--navy-900); }
.adv-head { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.adv-head .ri { width: 40px; height: 40px; }
.adv-head > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.adv-head b { font-size: 17px; }
.adv-head small { color: var(--muted); font-size: 13px; }
/* HP, Attack and Defence: three boxes always the same size, each its label over its number, sharing the row the Class
   button leaves (owner, 2026-10-15: "make all boxes of hp attack and defence always same size.. so in this case grow hp
   too", then on that: "LAYOUT DOESNT LOOK GREAT"). A boost (an LP's 💧, a charger's ⚡) sits once in a pill under
   Attack and Defence, the two it raises, so no box holds more than the others. */
.adv-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 3px 6px; align-items: center; margin: 4px 0 6px; }
.adv-stats span { display: grid; align-content: center; align-self: stretch; text-align: center; padding: 2px 6px; border-radius: 6px; background: rgba(3, 10, 44, 0.6); min-width: 46px; }
.adv-boost { grid-column: 2 / 4; grid-row: 2; padding: 1px 8px; border-radius: 999px; background: rgba(3, 10, 44, 0.6); line-height: 1.35; text-align: center; }
.adv-boost .adv-aura { margin: 0; font-size: 11px; vertical-align: 0; }
.adv-stats small { color: var(--muted); font-size: 11px; }
.adv-stats b { font-size: 16px; }
.adv-stats .btn { margin-left: auto; padding: 4px 8px; font-size: 14px; }
.slot { display: flex; gap: 6px; align-items: center; margin: 3px 0; padding: 4px 6px; border-radius: 6px; background: rgba(3, 10, 44, 0.5); }
.slot > div { flex: 1; min-width: 0; display: grid; }
.slot small { color: var(--muted); font-size: 12px; }
.slot b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot select { max-width: 92px; font: inherit; font-size: 13px; background: #0d1638; color: var(--text); border: 1px solid #3b4c80; border-radius: 5px; }
/* The gems in a piece you wear, after its slot's name (16 px: the gems' art at its own size), a ring for an empty
   socket; grey while your gems sleep. */
.adv-socks { display: inline-flex; gap: 1px; margin-left: 5px; vertical-align: -4px; }
.adv-socks .ri { width: 16px; height: 16px; }
.adv-socks i { width: 12px; height: 12px; margin: 2px; box-sizing: border-box; border-radius: 50%; border: 1px dashed var(--gold-dark); }
.adv-socks.asleep { filter: grayscale(1); opacity: 0.55; }
.sub-title { margin: 8px 0 4px; font-size: 14px; color: var(--gold); letter-spacing: 0.06em; text-transform: uppercase; }
/* ⓘ beside a title: that page of the docs (ui.js openDocs), e.g. the Bag's Socket gems. */
.sub-info { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: 4px; padding: 0; border: 1px solid rgba(127, 212, 255, 0.55); border-radius: 50%; background: rgba(3, 10, 44, 0.6); color: var(--cyan); font: 700 13px/1 system-ui, sans-serif; vertical-align: 1px; cursor: pointer; }
.sub-info:hover, .sub-info:focus-visible { border-color: var(--cyan); background: rgba(127, 212, 255, 0.15); outline: none; }
.prof { display: grid; grid-template-columns: 68px 22px 1fr; gap: 6px; align-items: center; font-size: 14px; margin: 2px 0; }
.prof b { color: #fff; text-align: right; }
/* A skill at its top level (rpg/data.js SKILL_CAPS): a gold bar and MAX instead of a full green bar that looks stuck. */
.prof.top b { color: var(--gold); }
.prof[class*="sk-"] .rbar > span { background: linear-gradient(180deg, var(--b1), var(--b2)); }
.prof-xp { grid-column: 2 / -1; display: flex; justify-content: space-between; gap: 6px; margin: -3px 0 2px; color: var(--muted); font-size: 12px; line-height: 1.1; white-space: nowrap; }
.prof-xp em { color: #7ef08a; font-style: normal; font-weight: 700; }
.prof-max { display: flex; align-items: center; gap: 6px; min-width: 0; }
.prof-max .rbar { flex: 1; }
.prof-max i { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--gold); }
.rbar.max > span { background: linear-gradient(180deg, #ffe066, #e8b52a); }
.adv-actions { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.adv-actions .btn { font-size: 14px; padding: 5px 8px; }
.field { display: grid; gap: 3px; margin: 6px 0; font-size: 14px; color: var(--muted); }
.field input { font: inherit; font-size: 16px; padding: 5px 8px; border-radius: 6px; border: 1px solid #3b4c80; background: #0d1638; color: var(--text); }
.sq-members { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 4px; }
.sq-members li { display: flex; justify-content: space-between; padding: 4px 8px; border-radius: 6px; background: rgba(3, 10, 44, 0.5); font-size: 15px; }
/* Each member: online dot, class icon, name (👑 the leader), and under it level and class, then online or last online. */
.sq-members li.sq-mem { align-items: center; gap: 8px; }
.sq-mem > i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #3b4c80; }
.sq-mem > i.on { background: var(--green); box-shadow: 0 0 4px var(--green); }
.sq-mem > .ri { flex: none; }
.sq-mem > .sq-noc { flex: none; width: 24px; } /* no class picked yet: the names still line up */
.sq-mem > div { flex: 1; min-width: 0; display: grid; }
.sq-mem > div b { font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sq-mem > div em { font-style: normal; margin-left: 4px; }
.sq-mem > div small { color: var(--muted); font-size: 13px; }
.sq-mem > div small.on { color: var(--green); }
.sq-mem .link-btn { flex: none; }
.sq-mem .sq-bm { justify-self: start; padding: 0; font-size: 13px; color: #ffd23f; white-space: nowrap; }
.sq-mem .sq-bm.on { color: var(--muted); }
.sq-bm-note { margin-top: 0; }
.sq-linkbox { display: grid; gap: 8px; margin: 10px 0; padding: 10px; }
/* The Squad House (rpg/ui-squads.js): the Squad Board's cards in each squad's colours, the ad editor, the Squad tab. */
.sqb-status { margin: 0 0 8px; font-size: 16px; color: var(--text); }
.sqb-status .link-btn { font-size: 16px; padding: 0; }
.sqb-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.sqb-filter { display: inline-flex; align-items: center; justify-content: center; padding: 3px 12px; border-radius: 999px; font-size: 15px; color: var(--muted); background: rgba(3, 10, 44, 0.55); border: 1px solid #2e3d74; }
.sqb-filter.on { color: var(--navy-900); background: var(--gold); border-color: #3a2a00; }
.sqb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sqb-card { display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px; border-radius: 8px; background: rgba(3, 10, 44, 0.6); border: 1px solid #2e3d74; background: linear-gradient(90deg, color-mix(in srgb, var(--sq1) 30%, #0a1238) 0, rgba(3, 10, 44, 0.6) 120px); border: 1px solid color-mix(in srgb, var(--sq2) 55%, #2e3d74); box-shadow: inset 3px 0 0 var(--sq2); }
.sqb-card.mine { box-shadow: inset 3px 0 0 var(--sq2), 0 0 0 2px var(--gold); }
.sqb-banner { flex: none; width: 32px; height: 48px; image-rendering: pixelated; }
.sqb-banner.big { width: 64px; height: 96px; }
.sqb-main { flex: 1; min-width: 0; display: grid; gap: 4px; }
.sqb-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sqb-head b { font-size: 18px; color: #fff; margin-right: 2px; }
.sqb-head b em { font-style: normal; color: var(--sq3); }
.sqb-chip { display: inline-flex; align-items: center; justify-content: center; padding: 1px 7px; border-radius: 4px; font-size: 13px; line-height: 1.2; color: var(--muted); background: rgba(3, 10, 44, 0.7); border: 1px solid #2e3d74; }
.sqb-chip.open { color: #062a10; background: var(--green); border-color: #0b4a1c; }
.sqb-chip.mine { color: var(--navy-900); background: var(--gold); border-color: #3a2a00; }
.modal .sqb-about { margin: 0; font-size: 16px; line-height: 1.35; color: var(--text); overflow-wrap: anywhere; }
.sqb-about i { color: var(--muted); }
.modal .sqb-motto { margin: 0; font-size: 15px; font-style: italic; color: var(--sq3); overflow-wrap: anywhere; }
.sqb-motto small { margin-left: 6px; font-style: normal; font-size: 13px; color: var(--muted); }
.sqb-stats { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; color: var(--muted); }
.sqb-stats small { font-size: 13px; }
.sqb-members summary { cursor: pointer; font-size: 14px; color: var(--cyan); width: max-content; }
.sqb-members ul, .sq-apps { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 3px; }
.sqb-members li { display: flex; align-items: center; gap: 6px; font-size: 15px; padding: 2px 6px; border-radius: 5px; background: rgba(3, 10, 44, 0.45); }
.sqb-members li small { margin-left: auto; color: var(--muted); }
.sqb-members li em { font-style: normal; }
.sqb-members i, .sq-app-who i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #3b4c80; }
.sqb-members i.on, .sq-app-who i.on { background: var(--green); box-shadow: 0 0 4px var(--green); }
.sqb-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sqb-row .btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; padding: 6px 12px; }
.sqb-wait { font-size: 15px; color: var(--gold); }
.sqb-form .field { margin: 2px 0; }
.sqb-form .field textarea { min-height: 52px; }
.modal .sqb-why, .sqb-why { margin: 0; min-height: 0; font-size: 14px; color: var(--red); }
.sqb-why:empty { display: none; }
.sqa-grid { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: start; }
.sqa-swatches { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.sqa-swatch { width: 28px; height: 28px; padding: 0; border-radius: 6px; background: linear-gradient(135deg, var(--c3), var(--c1) 55%); border: 2px solid var(--edge-dark); }
.sqa-swatch.on { box-shadow: 0 0 0 2px var(--gold); }
/* the leader's window: name + tag side by side, and the emblems to paint on the banner (rpg/ui-squads.js squadAdPanel) */
.sqa-name { display: grid; grid-template-columns: minmax(0, 1fr) 84px; gap: 8px; }
.sqa-name .field { margin-bottom: 0; }
.sqa-name input { min-width: 0; width: 100%; box-sizing: border-box; }
.sqa-name input:disabled { opacity: 0.6; }
.modal .sqa-note { margin: 2px 0 8px; font-size: 13px; color: var(--muted); }
.sqa-emblems { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.sqa-em { width: 38px; height: 38px; padding: 4px; border-radius: 6px; background: rgba(3, 10, 44, 0.6); border: 2px solid var(--edge-dark); color: var(--muted); font-size: 12px; line-height: 1; }
.sqa-em img { display: block; width: 27px; height: 27px; image-rendering: pixelated; }
.sqa-em.on { box-shadow: 0 0 0 2px var(--gold); }
.sq-find, .sq-lock { display: grid; gap: 3px; margin: 10px 0 4px; padding: 9px 10px; font-size: 15px; }
.sq-find b, .sq-lock b { color: var(--gold); font-size: 16px; font-weight: 400; }
.sq-find span, .sq-lock span { color: var(--muted); line-height: 1.3; }
.sq-apps li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; background: rgba(3, 10, 44, 0.5); font-size: 15px; }
.sq-apps li > div { flex: 1; min-width: 0; display: grid; }
.sq-apps li small { color: var(--muted); font-size: 13px; }
.sq-apps.answer li { display: grid; gap: 4px; }
.sq-app-who { display: flex !important; align-items: center; gap: 6px; flex-wrap: wrap; }
.sq-app-who small { width: 100%; }
.sq-app-note { margin: 0; font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
.sq-app-row { display: flex; gap: 6px; }
.sq-app-row .btn, .sq-ad .btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; padding: 4px 10px; font-size: 15px; }
.sq-mini { flex: none; width: 16px; height: 24px; image-rendering: pixelated; }
.sq-mini.big { width: 32px; height: 48px; }
.sq-head { display: flex; align-items: center; gap: 8px; }
.sq-head .pane-title { margin: 0; min-width: 0; flex-wrap: wrap; gap: 0 8px; }
.sq-title { flex: 1; min-width: 0; }
.sq-motto { margin: 2px 0 0; font-size: 14px; font-style: italic; color: var(--sq3); overflow-wrap: anywhere; }
.sq-head .sq-edit, .sq-head .sq-leave { flex: none; align-self: flex-start; padding: 3px 8px; font-size: 15px; }
.sq-head .sq-leave { font-size: 14px; white-space: nowrap; }
.sq-ad { display: grid; gap: 4px; margin: 4px 0 10px; padding: 9px 10px; }
.sq-ad p { margin: 0; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.sq-ad small { color: var(--muted); font-size: 13px; }
.sq-ad .btn { justify-self: start; }
/* the leader's notice on top of the Squad tab (rpg/ui-squads.js noticeHTML) */
.sq-notice { display: grid; gap: 4px; margin: 8px 0 10px; padding: 9px 10px; border-color: rgba(255, 210, 63, 0.55); }
.sq-notice > b { color: var(--gold); font-size: 16px; }
.sq-notice p { margin: 0; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; white-space: pre-line; }
.sq-notice small { color: var(--muted); font-size: 13px; }
.sq-notice .btn { justify-self: start; display: inline-flex; align-items: center; justify-content: center; padding: 4px 10px; font-size: 15px; }
/* Squad wars (rpg/ui-wars.js): the Squad tab's wars, the Squad Board's booked wars, the booking window. */
.sqw-list { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 6px; }
.sqw-war { display: flex; gap: 8px; align-items: flex-start; padding: 8px; border-radius: 8px; background: linear-gradient(90deg, color-mix(in srgb, var(--sq1) 30%, #0a1238) 0, rgba(3, 10, 44, 0.6) 100px); border: 1px solid color-mix(in srgb, var(--sq2) 55%, #2e3d74); box-shadow: inset 3px 0 0 var(--sq2); }
.sqw-war.on { box-shadow: inset 3px 0 0 var(--red), 0 0 0 2px var(--red); }
.sqw-main { flex: 1; min-width: 0; display: grid; gap: 3px; font-size: 15px; }
.sqw-main b em, .sqw-coming em, .sqw-res em { font-style: normal; color: var(--sq3, var(--gold)); }
.sqw-main small, .sqw-coming small { color: var(--muted); font-size: 13px; }
.sqw-main small small, .sqw-coming small small, .sqw-when small { font-size: inherit; opacity: 0.8; }
.sqw-state { color: var(--gold); font-size: 14px; }
.sqw-war.on .sqw-state { color: #ff9a9a; }
.sqw-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; }
.sqw-row .btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; padding: 4px 10px; font-size: 15px; }
.sqw-log summary { cursor: pointer; font-size: 14px; color: var(--cyan); width: max-content; margin: 6px 0 2px; }
.sqw-log ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.sqw-res { display: flex; align-items: center; gap: 6px; font-size: 14px; padding: 2px 6px; border-radius: 5px; background: rgba(3, 10, 44, 0.45); }
.sqw-res b { color: var(--muted); }
.sqw-res.w b, .sqw-res.wo b { color: var(--green); }
.sqw-res.l b, .sqw-res.ns b { color: var(--red); }
.sqw-res i { color: var(--muted); }
.sqw-coming { margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; background: rgba(3, 10, 44, 0.6); border: 1px solid #7a2a3a; }
.sqw-coming > b { font-size: 15px; color: var(--gold); }
.sqw-coming ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.sqw-coming li { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 15px; }
.sqw-coming li > span { color: #fff; }
.sqw-coming li i { color: var(--muted); }
.sqw-coming li > small { flex-basis: 100%; padding-left: 22px; }
.sqw-live { display: inline-block; padding: 0 5px; border-radius: 3px; background: #c8323c; color: #fff; font-size: 12px; letter-spacing: 0.06em; }
/* The war window (rpg/ui-wars.js warAskPanel; owner 2026-10-06 "make that window cooler"): the two squads face off, three
   numbered steps, the stakes meter (No stakes … All in, the pick read out large) and the war's ticket. Buttons stay plain. */
.sqw-ask { display: grid; gap: 10px; }
.modal h2.sqw-kicker { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0; padding-right: 40px; font-size: 22px; white-space: nowrap; }
.modal h2.sqw-kicker small { font: 400 15px var(--ui-font, inherit); color: var(--muted); }
.sqw-ask .sub { margin: 0; font-size: 15px; text-align: center; }
.sqw-face { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; padding: 12px 10px; border-radius: 12px; background: radial-gradient(ellipse at 50% 130%, rgba(255, 210, 63, 0.3), transparent 62%), linear-gradient(180deg, #1c2760, #0b1236); border: 2px solid #2e3d74; }
.sqw-side { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 8px; border-radius: 10px; background: linear-gradient(90deg, color-mix(in srgb, var(--sq1) 50%, #0a1238), rgba(3, 10, 44, 0.35)); border: 1px solid color-mix(in srgb, var(--sq2) 60%, #2e3d74); }
.sqw-side.foe { flex-direction: row-reverse; text-align: right; background: linear-gradient(270deg, color-mix(in srgb, var(--sq1) 50%, #0a1238), rgba(3, 10, 44, 0.35)); }
.sqw-side > div { min-width: 0; display: grid; gap: 3px; }
.sqw-side b { font: 400 22px/1 var(--display); color: var(--sq3, var(--gold)); text-shadow: 0 2px 0 #000a2e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sqw-side small { font-size: 14px; line-height: 1; color: #dfe6ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sqw-flag { flex: none; width: 32px; height: 48px; image-rendering: pixelated; filter: drop-shadow(0 2px 0 #000a2e); }
.sqw-vs { font: 400 30px/1 var(--display); color: var(--gold); -webkit-text-stroke: 6px #0a102a; paint-order: stroke fill; transform: rotate(-6deg); padding: 0 2px; }
.sqw-step { padding: 10px 12px 12px; border-radius: 10px; background: rgba(3, 10, 44, 0.45); border: 1px solid #2e3d74; }
.sqw-step h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 400 15px/1 var(--display); color: var(--gold); letter-spacing: 0.04em; text-transform: uppercase; }
.sqw-step h4 em { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: #1a1030; font: 400 13px/1 var(--display); font-style: normal; }
.sqw-sizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sqw-size { display: grid; justify-items: center; gap: 6px; padding: 9px 4px 8px; border-radius: 10px; border: 2px solid #2e3d74; background: rgba(3, 10, 44, 0.55); color: #dfe6ff; font: inherit; cursor: pointer; }
.sqw-size b { display: flex; align-items: baseline; font: 400 24px/1 var(--display); }
.sqw-size b i { font: 400 15px/1 var(--display); font-style: normal; margin: 0 3px; color: var(--muted); }
.sqw-men { display: flex; gap: 3px; }
.sqw-men em { width: 7px; height: 11px; border-radius: 4px 4px 2px 2px; background: currentColor; opacity: 0.75; }
.sqw-size:hover:not(:disabled), .sqw-size:focus-visible { border-color: var(--gold); outline: none; }
.sqw-size.on { background: var(--gold); border-color: var(--gold); color: #1a1030; }
.sqw-size.on b i { color: #6b4e0c; }
.sqw-size:disabled { opacity: 0.4; cursor: default; }
/* ⚔ Fight | ✊ Clash, squad against squad (rpg/ui-arena.js kindPicker: the war window and the Colosseum's challenge window) */
.sqw-kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 8px; }
.sqw-step .sqw-kinds { margin: 0; }
.sqw-kind { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; column-gap: 8px; row-gap: 2px; padding: 8px 10px; border-radius: 10px; border: 2px solid #2e3d74; background: rgba(3, 10, 44, 0.55); color: #dfe6ff; font: inherit; text-align: left; cursor: pointer; }
.sqw-kind > i, .sqw-kind > img { grid-row: span 2; width: 40px; height: 40px; display: grid; place-items: center; font-size: 28px; font-style: normal; line-height: 1; object-fit: contain; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.45)); }
.sqw-kind b { font: 400 19px/1 var(--display); letter-spacing: 0.03em; }
.sqw-kind small { font-size: 12px; line-height: 1.2; color: var(--muted); }
.sqw-kind:hover:not(:disabled), .sqw-kind:focus-visible { border-color: var(--gold); outline: none; }
.sqw-kind.on { background: var(--gold); border-color: var(--gold); color: #1a1030; }
.sqw-kind.on small { color: #4a3608; }
.sqw-kind:disabled { opacity: 0.4; cursor: default; }
.sqw-read { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; min-height: 40px; }
.sqw-read b { flex: none; min-width: 96px; text-align: center; font: 400 32px/1 var(--display); color: var(--gold); text-shadow: 0 3px 0 #000a2e; }
.sqw-read b.zero { font-size: 21px; color: var(--cyan); }
.sqw-read b.all { font-size: 26px; color: #ffa24a; }
.sqw-read span { font-size: 14px; line-height: 1.3; color: var(--muted); }
.sqw-meter { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 4px; align-items: end; }
.sqw-pip { display: grid; justify-items: stretch; align-content: end; gap: 5px; height: 60px; margin: 0; padding: 0; background: none; border: 0; font: inherit; color: var(--muted); cursor: pointer; }
.sqw-pip span { height: calc(12px + var(--i) * 4px); border-radius: 4px 4px 2px 2px; background: #1f2b5e; border: 1px solid #3a4c88; box-sizing: border-box; transform-origin: bottom; transition: background-color 0.12s, transform 0.12s; }
.sqw-pip.lit span { border-color: rgba(0, 0, 0, 0.35); background: var(--gold); background: hsl(calc(54 - var(--i) * 3.6) 96% calc(64% - var(--i) * 1%)); }
.sqw-pip.zero.lit span { background: var(--cyan); }
.sqw-pip.on span { transform: scaleY(1.1); outline: 2px solid #fff; outline-offset: 1px; }
.sqw-pip small { font-size: 13px; line-height: 1; text-align: center; }
.sqw-pip.on small { color: #fff; }
.sqw-pip:hover span { border-color: var(--gold); }
.sqw-pip:focus-visible { outline: none; }
.sqw-pip:focus-visible span { outline: 2px solid var(--cyan); outline-offset: 1px; }
.sqw-ends { display: flex; justify-content: space-between; margin-top: 8px; font-size: 13px; color: var(--muted); }
.sqw-starts { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 8px; }
.sqw-starts + .sqw-starts { margin-top: 6px; }
.sqw-starts > small { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.sqw-starts > div { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
.sqw-start { display: flex; align-items: center; justify-content: center; min-height: 32px; padding: 0 2px; border-radius: 999px; border: 2px solid #2e3d74; background: rgba(3, 10, 44, 0.55); color: #dfe6ff; font: inherit; font-size: 14px; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer; }
.sqw-start:hover, .sqw-start:focus-visible { border-color: var(--gold); outline: none; }
.sqw-start.on { background: var(--gold); border-color: var(--gold); color: #1a1030; }
.sqw-ticket { display: grid; grid-template-columns: auto auto minmax(0, 1fr); border-radius: 10px; border: 2px dashed rgba(255, 210, 63, 0.6); background: rgba(255, 210, 63, 0.07); }
.sqw-ticket > span { display: grid; align-content: center; gap: 3px; padding: 8px 12px; min-width: 0; }
.sqw-ticket > span + span { border-left: 2px dashed rgba(255, 210, 63, 0.35); }
.sqw-ticket b { font: 400 18px/1.1 var(--display); color: #fff; }
.sqw-ticket b small { font: 400 14px var(--ui-font, inherit); color: var(--muted); }
.sqw-ticket > span > small { font-size: 13px; line-height: 1.15; color: var(--muted); }
.sqw-ask .arena-go.arena-send { margin: 0; }
.sqw-terms summary { cursor: pointer; width: max-content; margin: 0 auto; font-size: 14px; color: var(--cyan); }
.sqw-terms ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 3px; font-size: 14px; color: var(--muted); }
/* 🏰 The Squad House's siege table (rpg/ui-siege.js): who holds Lumbridge Castle, and how to take it; the holders' colours
   in --sq0..3 (the duchy's blue with none). The Squad Board's band says the same in one line. */
.sg-face { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 14px; padding: 8px 14px 8px 8px; border-radius: 12px; background: radial-gradient(ellipse at 22% 120%, color-mix(in srgb, var(--sq2, #5aa8e6) 40%, transparent), transparent 62%), linear-gradient(180deg, #1c2760, #0b1236); border: 2px solid color-mix(in srgb, var(--sq2, #5aa8e6) 55%, #2e3d74); }
.sg-face img { width: 200px; height: auto; image-rendering: pixelated; filter: drop-shadow(0 3px 0 #000a2e); }
.sg-face > div { display: grid; gap: 4px; min-width: 0; }
.sg-face small { font: 400 14px/1 var(--display); color: var(--gold); letter-spacing: 0.05em; text-transform: uppercase; }
.sg-face b { font: 400 26px/1.05 var(--display); color: var(--sq3, #a8dcfa); text-shadow: 0 2px 0 #000a2e; overflow-wrap: anywhere; }
.sg-face span { font-size: 14px; color: #dfe6ff; }
/* The Siege Hour's line in the castle's window: when the next one is, or (.on) that it's on now. */
.sg-hour { margin: 0; padding: 7px 12px; border-radius: 10px; background: rgba(174, 187, 212, 0.1); border: 1px solid #56627e; font-size: 14px; line-height: 1.35; color: #dfe6ff; text-align: center; }
.sg-hour.on { background: rgba(159, 208, 255, 0.14); border-color: #9fd0ff; color: #fff; }
.sg-you { margin: 0; padding: 8px 12px; border-radius: 10px; background: rgba(255, 210, 63, 0.08); border: 1px dashed rgba(255, 210, 63, 0.55); font-size: 15px; line-height: 1.3; color: var(--text); text-align: center; }
.sg-steps { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: sg; }
.sg-steps li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 10px; border-radius: 10px; background: rgba(3, 10, 44, 0.45); border: 1px solid #2e3d74; font-size: 14px; line-height: 1.35; color: var(--muted); }
.sg-steps li::before { counter-increment: sg; content: counter(sg); width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: #1a1030; font: 400 13px/1 var(--display); }
.sg-steps b { color: var(--text); font-weight: 600; }
.sg-band { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 8px; padding: 7px 12px; border-radius: 10px; text-align: left; font-size: 17px; color: var(--text); cursor: pointer; background: linear-gradient(90deg, color-mix(in srgb, var(--sq1, #2f78bf) 45%, #0a1238), rgba(3, 10, 44, 0.4)); border: 1px solid color-mix(in srgb, var(--sq2, #5aa8e6) 60%, #2e3d74); }
.sg-band > span:first-child { font-size: 20px; }
.sg-band b { color: var(--sq3, #a8dcfa); }
.sg-band em { margin-left: auto; flex: none; font: 400 15px/1 var(--display); font-style: normal; color: var(--gold); }
.sg-band:hover em, .sg-band:focus-visible em { text-decoration: underline; }
@media (max-width: 520px) {
  .sg-face { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 8px; }
  .sg-face img { width: 160px; }
}
@media (max-width: 560px) {
  .sqw-side { padding: 5px 6px; gap: 6px; }
  .sqw-side b { font-size: 18px; }
  .sqw-flag { width: 24px; height: 36px; }
  .sqw-vs { font-size: 24px; }
  .sqw-starts { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .sqw-starts > div { gap: 4px; }
  .sqw-start { min-height: 30px; font-size: 13px; }
  .sqw-read b { min-width: 76px; font-size: 28px; }
  .sqw-kind { grid-template-columns: 30px minmax(0, 1fr); padding: 6px 7px; column-gap: 6px; }
  .sqw-kind > i, .sqw-kind > img { width: 30px; height: 30px; font-size: 21px; }
  .sqw-kind b { font-size: 17px; }
  .sqw-kind small { font-size: 11px; }
  .sqw-ticket { grid-template-columns: auto minmax(0, 1fr); }
  .sqw-ticket > span:last-child { grid-column: 1 / -1; border-left: 0; border-top: 2px dashed rgba(255, 210, 63, 0.35); }
}
@media (max-width: 560px) {
  .sqb-card { padding: 8px; gap: 8px; }
  .sqb-head b { font-size: 16px; }
  .sqa-grid { grid-template-columns: 1fr; }
  .sqb-banner.big { justify-self: center; }
}
.sq-linkbox .btn { width: 100%; font-size: 16px; }
.sq-linkbox input { min-width: 0; width: 100%; font: inherit; font-size: 13px; padding: 5px 8px; border-radius: 6px; border: 1px solid #3b4c80; background: #0d1638; color: var(--text); }
.sq-linkbox input[hidden] { display: none; }
.sq-linkbox .pane-note { margin: 0; }

@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (min-width: 561px) {
  .gather-bar { bottom: auto; top: 150px; min-width: 0; width: calc(100vw - 24px); }
  .lease-card { top: 52px; }
  .lease-pic { width: 60px; height: 60px; }
  .invites { top: auto; bottom: 212px; right: 8px; } /* just above the chat */
  .siege-rally { padding: 8px 10px; gap: 3px; }
  .siege-rally > b { font-size: 14px; }
  .siege-rally > p { padding: 3px 5px; font-size: 12px; line-height: 1.18; }
  /* A raid card stays short on phones: the fight itself telegraphs every move. */
  .lease-card.raid .lease-pic { width: 88px; height: 70px; }
  .lease-card.raid .lease-top p:not(.rec) { display: none; }
  .lease-card.raid .terms { font-size: 13px; }
}
/* Upright phones: mining sits just above the chat, clear of the trackers under the minimap. With the D-pad on it keeps to
   the right of the pad (two rows), and with the chat folded away it sits over the Chat button. */
@media (max-width: 560px), (max-width: 760px) and (min-height: 501px) {
  #gatherBar { top: auto; bottom: var(--mobile-chat-clearance); }
  html.chat-collapsed #gatherBar { bottom: calc(max(var(--mobile-chat-open-bottom), env(safe-area-inset-bottom, 0px)) + 58px); }
  .hud:has(> .dpad:not([hidden])) #gatherBar { left: 146px; right: 8px; width: auto; transform: none; flex-wrap: wrap; row-gap: 4px; font-size: 14px; } /* pad 10 + 128 px, + 8 */
  .hud:has(> .dpad.right:not([hidden])) #gatherBar { left: 8px; right: 146px; } /* a pad on the right (Settings → D-pad side) */
  .hud:has(> .dpad:not([hidden])) #gatherText { flex: 1 0 100%; white-space: normal; }
  /* A quest toast with the pad on goes up over it (4 + 128 px, + 8) and the mining bar beside it: Pip's ⚔ Fight toast
     stays until tapped, and a new player's phone starts with the pad on (main.js). */
  html:not(.chat-collapsed) .hud:has(> .dpad:not([hidden])) .quest-banner { bottom: calc(var(--mobile-chat-clearance) + 140px); }
}
/* An upright phone with the ZAZA WORLD box open: the D-pad steps aside (ui.js showDpad) and the chat stays (owner,
   2026-10-11: "instead of lowering the chat, hide the d pad temporary, so the entire zaza world window fits.. even with the
   chat.."). The box stops so its XP row (#hudUnder, under it) ends over the chat at its Smallest height
   (--mobile-chat-min), or over the bottom with the chat folded; the wallet scrolls only if that's still too short. A
   taller chat comes down just enough to clear them
   (ui.js fitBoxChat → --chat-fit). 16 px = 8 over the XP row + 8 over the chat. */
@media (max-width: 560px), (max-width: 760px) and (min-height: 501px) {
  .hud-panel:not(.is-minimized) { max-height: calc(100dvh - var(--mobile-panel-top) - var(--mobile-chat-bottom) - var(--mobile-chat-min) - 16px - var(--clock-space, 0px) - var(--xp-under-space, 0px)); }
  html.chat-collapsed .hud-panel:not(.is-minimized) { max-height: calc(100dvh - var(--mobile-panel-top) - max(var(--mobile-chat-open-bottom), env(safe-area-inset-bottom, 0px)) - 16px - var(--clock-space, 0px) - var(--xp-under-space, 0px)); }
  .hud-panel:not(.is-minimized) > :not(.wallet-card) { flex-shrink: 0; }
  .hud-panel:not(.is-minimized) > .wallet-card { min-height: 44px; overflow-y: auto; overscroll-behavior: contain; }
}
.share-img { width: 100%; border-radius: 8px; border: 2px solid var(--edge-dark); display: block; margin: 4px 0 8px; }
.share-x[aria-disabled="true"] { opacity: 0.6; cursor: progress; }
.field textarea { font: inherit; font-size: 15px; padding: 6px 8px; border-radius: 6px; border: 1px solid #3b4c80; background: #0d1638; color: var(--text); resize: vertical; }

/* ---------------------------------------------------------------- companion page (no map) */
html:has(> body.companion) { overflow: auto; height: auto; }
body.companion { overflow: visible; height: auto; background: radial-gradient(ellipse at top, #0a1a6b, #030a2c 70%) fixed; min-height: 100vh; }
.cp-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: rgba(3, 10, 44, 0.92); border-bottom: 2px solid var(--gold); }
.cp-head img { border-radius: 50%; }
.cp-head h1 { flex: 1; margin: 0; font-family: var(--display); font-weight: 400; color: var(--gold); font-size: 22px; }
.cp-head h1 span { color: #fff; }
.cp-head h1 small { font-family: var(--ui-font); font-size: 15px; color: var(--muted); margin-left: 6px; }
.cp-main { width: min(760px, 100%); margin: 0 auto; padding: 14px 16px 30px; display: grid; gap: 12px; }
.cp-card { padding: 14px 16px; }
.cp-card h2 { font-family: var(--display); font-weight: 400; color: var(--gold); margin: 0 0 8px; font-size: 21px; display: flex; gap: 8px; align-items: baseline; }
.cp-card h2 small { font-family: var(--ui-font); font-size: 14px; color: var(--muted); }
.cp-cardex { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.cp-slot { margin: 0; display: grid; gap: 3px; text-align: center; font-size: 13px; color: var(--muted); }
.cp-slot img { width: 100%; border-radius: 6px; }
.cp-slot.missing span { display: grid; place-items: center; aspect-ratio: 5 / 7; border-radius: 6px; border: 2px dashed #3b4c80; color: #3b4c80; font-size: 28px; font-family: var(--display); }
.cp-foot a { color: var(--cyan); }
.class-art { position: relative; display: grid; place-items: center; margin: -2px -4px 0; padding: 6px 0 2px; border-radius: 8px; background: radial-gradient(circle at 50% 60%, rgba(255, 255, 255, 0.12), transparent 70%); }
.class-art img { width: 168px; max-width: 100%; height: auto; image-rendering: auto; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.45)); }
.cls-warrior .class-art { background: radial-gradient(circle at 50% 60%, rgba(255, 110, 80, 0.28), transparent 70%); }
.cls-mage .class-art { background: radial-gradient(circle at 50% 60%, rgba(190, 130, 255, 0.28), transparent 70%); }
.cls-guardian .class-art { background: radial-gradient(circle at 50% 60%, rgba(120, 230, 140, 0.25), transparent 70%); }
.cls-lord .class-art { background: radial-gradient(circle at 50% 60%, rgba(70, 216, 208, 0.27), transparent 70%); }
/* Class cards only: a pulsing aura behind the avatar and a slow float, each card a beat apart. */
.class-card .class-art::before { content: ""; position: absolute; left: 50%; top: 58%; width: 150px; height: 150px; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, color-mix(in srgb, var(--cc) 45%, transparent), transparent 68%); animation: cc-aura 3.2s ease-in-out infinite; pointer-events: none; }
.class-card .class-art img { position: relative; animation: cc-float 3.2s ease-in-out infinite; }
.class-card:nth-child(2) .class-art::before, .class-card:nth-child(2) .class-art img { animation-delay: -1.1s; }
.class-card:nth-child(3) .class-art::before, .class-card:nth-child(3) .class-art img { animation-delay: -2.2s; }
.class-card:nth-child(4) .class-art::before, .class-card:nth-child(4) .class-art img { animation-delay: -3.3s; }
.class-card:hover .class-art img { filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.45)) drop-shadow(0 0 10px var(--cc)); }
@keyframes cc-aura { 50% { transform: translate(-50%, -50%) scale(1.14); opacity: 0.6; } }
@keyframes cc-float { 50% { transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) {
  .class-card .class-art::before, .class-card .class-art img, .cc-role::after { animation: none; }
  .class-card, .class-card:hover { transition: none; transform: none; }
}
.adv-head .adv-avatar { width: 56px; height: 64px; image-rendering: auto; flex: none; }

/* Docs popup: the /docs/ site in a big in-game window (ⓘ side tab). Full screen on phones. */
.modal.modal-docs { width: min(1240px, 100%) !important; height: calc(100dvh - 32px); max-height: none; display: flex; flex-direction: column; padding: 12px; overflow: hidden; }
.modal-docs > #modalBody { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.modal-docs .docs-bar { display: flex; align-items: center; gap: 12px; padding-right: 40px; min-height: 30px; }
.modal-docs .docs-bar h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 22px; }
.modal-docs .docs-bar h2 img { width: 26px; height: 26px; image-rendering: pixelated; }
.modal-docs .docs-open { margin-left: auto; padding: 3px 12px; font-size: 16px; text-decoration: none; }
.modal-docs .docs-frame { flex: 1; width: 100%; min-height: 0; border: 2px solid #000; border-radius: 8px; background: #030a2c; box-shadow: inset 0 0 0 1px #2c3b78; }
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (min-width: 561px) {
  .modal.modal-docs { position: fixed; left: 0; right: 0; top: var(--mobile-panel-top); bottom: 0; height: auto; max-height: none; border-radius: 0; padding: 8px 8px max(8px, env(safe-area-inset-bottom)); }
  .modal-docs .docs-bar h2 { font-size: 19px; }
  .modal-docs .docs-open { font-size: 15px; }
}

/* ---------------------------------------------------------------- H or the eye: the HUD hidden (ui.js hideHud) */
/* Only the map and the chat stay (owner, 2026-10-28: "everything but the chat"), with the eye at the minimap's top right to
   bring the rest back. A window, a right-click menu, a player's card, a talk with an NPC, the level-up flash, a fight, a
   trade and an invite that waits for your answer still show when they open (the update note lives outside #hud). The area
   and quest banners show themselves with visibility, so they're named. */
#hud.hud-off > *, #hud.hud-off > .area-banner.show, #hud.hud-off > .quest-banner.show { visibility: hidden; }
#hud.hud-off > #modal, #hud.hud-off > #ctx, #hud.hud-off > #playerCard, #hud.hud-off > #flash, #hud.hud-off #dialog,
#hud.hud-off > #battle, #hud.hud-off > #tradeBox, #hud.hud-off > #invites,
#hud.hud-off > #chatbox, #hud.hud-off > #chatOpen, #hud.hud-off #hudHide { visibility: visible; }
.hud-note {
  position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translate(-50%, 12px); z-index: 30;
  padding: 7px 16px; border-radius: 999px; pointer-events: none; white-space: nowrap; opacity: 0;
  background: var(--navy-900); border: 2px solid var(--gold); color: var(--text); box-shadow: 0 3px 0 #000a2e, 0 8px 20px rgba(0, 0, 0, 0.45);
  font-family: var(--ui-font); font-size: 16px; transition: opacity 0.25s ease, transform 0.25s ease;
}
.hud-note.show { opacity: 1; transform: translate(-50%, 0); }
.hud-note kbd { font: inherit; font-weight: 700; color: var(--gold); padding: 0 6px; border: 1px solid var(--gold); border-radius: 4px; }

/* ---------------------------------------------------------------- update ready (ui.js showUpdate) */
.update-note {
  position: fixed; left: 50%; top: max(10px, env(safe-area-inset-top)); transform: translateX(-50%); z-index: 30;
  padding: 7px 16px; border-radius: 999px; cursor: pointer; white-space: nowrap; max-width: calc(100vw - 24px);
  background: var(--navy-900); border: 2px solid var(--gold); color: var(--text); box-shadow: 0 3px 0 #000a2e, 0 8px 20px rgba(0, 0, 0, 0.45);
  font-family: var(--ui-font); font-size: 17px;
}
.update-note b { font-family: var(--display); font-weight: 400; color: var(--gold); }
.update-note:hover { background: var(--navy-800); }
.update-note .un-short { display: none; }
/* Phones: the free corner under the ZAZA WORLD header, short text (the minimap and buttons fill the top right). */
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (min-width: 561px) {
  .update-note { left: 10px; transform: none; top: 52px; padding: 5px 12px; font-size: 15px; }
  .update-note .un-long { display: none; }
  .update-note .un-short { display: inline; }
}
/* Phones: panel icons share whatever room remains after All, Chat and minimize. */
@media (max-width: 430px) {
  .chat-tabs .chat-side-tabs button { height: 44px; }
}
@media (max-width: 380px) {
  .chat-tabs .chat-channel { flex-basis: 56px; }
}
/* The smallest phones: slimmer panel icons in the chat bar so "Chat ▾" still fits next to All. */
@media (max-width: 340px) {
  .chat-tabs .chat-side-tabs button img { width: 20px; height: 20px; }
  .chat-tabs [data-chat="all"] { flex-basis: 34px; padding-left: 3px; padding-right: 3px; }
  .chat-tabs .chat-channel { flex-basis: 54px; }
  .chat-tabs .chat-toggle { flex-basis: 34px; }
}

/* Past the first map (lands.js, lands-ui.js): the Red Bull timer, VIP styles, the Shipyard, the Vision Orb, the Top of the World. */
/* Red Bull is a compact status pill in the minimap column. It used to be a centred gather bar at top:196px on phones,
   directly across Golden bosses, loot and Raid call controls. */
.boost-bar { display: flex; align-items: center; min-width: 0; max-width: 230px; box-sizing: border-box; padding: 4px 8px; border: 1px solid #1d2f8a; border-radius: 8px; background: rgba(6, 12, 40, 0.9); box-shadow: inset 0 0 0 1px #5fb4ff, 0 2px 7px rgba(0, 0, 0, 0.35); color: #dfe9ff; font-size: 13px; font-variant-numeric: tabular-nums; }
.boost-bar > span { white-space: nowrap; }
.ride-bar { min-width: 0; bottom: 176px; border-color: #8a5a0c; box-shadow: inset 0 0 0 1px #fbd048; color: #fff4c8; }
.ride-bar button { color: #ffe88a; border-color: #5a3408; padding: 2px 10px; white-space: nowrap; }
.ride-bar button:hover { background: #2a2a60; color: #fff8d4; }
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (min-width: 561px) { .ride-bar { bottom: auto; top: 238px; width: auto; } }
.modal h2.summit-h { padding-right: 40px; }
.style-vip-note { margin: 0; padding: 8px 12px; border-radius: 10px; font-size: 15px; line-height: 1.35; color: var(--muted); background: linear-gradient(180deg, rgba(30, 36, 86, 0.9), rgba(10, 13, 38, 0.9)); border: 2px solid #000; box-shadow: inset 0 0 0 1px #7a3ad8; }
.style-vip-note.on { color: #efe3ff; box-shadow: inset 0 0 0 1px #b98cff, 0 0 14px rgba(122, 58, 216, 0.35); }
/* VIP styles (vault chargers): violet like the Character window's vault things; a padlock and dimmed until you charge. */
.style-chips button.vip { position: relative; background: linear-gradient(180deg, #2a1d5c, #120c2e); box-shadow: inset 0 0 0 1px #7a3ad8, 0 2px 0 #0008; color: #e2ccff; }
.style-chips button.vip.sel { border-color: var(--gold); color: #fff; box-shadow: inset 0 0 0 1px #fff3b0, 0 0 12px rgba(255, 210, 63, 0.55); }
.style-chips button.vip.locked { opacity: 0.72; filter: saturate(0.6); }
.style-chips button.vip.locked.sel { opacity: 0.92; filter: none; }
.style-chips .vip-tag { font-style: normal; font-size: 11px; line-height: 1; margin-top: -0.18em; }
.swatches button.vip { box-shadow: inset 0 0 0 1px #b98cff, 0 2px 0 #0008; }
.swatches button.vip.sel { box-shadow: inset 0 0 0 1px #fff3b0, 0 0 0 2px var(--gold), 0 0 10px rgba(255, 210, 63, 0.55); }
.swatches button.vip.locked { opacity: 0.45; filter: grayscale(0.85); }
.lv-ladder li small.lv-opens { color: #9fe0ff; font-size: 12px; line-height: 1.1; }
.lv-ladder li.evo .evo-body small.lv-opens { color: #bfefff; }
.map-label.map-lock { color: #ffd23f; font-size: 18px; }
.map-label.golden { color: #fff2a8; text-shadow: 0 0 5px #ff9e2f, 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; } /* the active Golden Hour boss, kept over its live map target */
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (min-width: 561px) { .map-label.map-lock { font-size: 12px; } }
.ship-lock { display: grid; gap: 4px; margin: 4px 0 12px; padding: 10px 12px; border-radius: 10px; border: 2px solid #8a6a14; background: linear-gradient(180deg, rgba(90, 66, 8, 0.55), rgba(3, 10, 44, 0.7)); }
.ship-lock b { font-family: var(--display); font-weight: 400; font-size: 19px; color: var(--gold); }
.ship-lock > span:not(.bar) { font-size: 15px; color: #dfe6ff; }
.ship-lock .bar { height: 10px; border-radius: 5px; background: #0a1030; border: 1px solid #000; overflow: hidden; }
.ship-lock .bar > span { display: block; height: 100%; background: linear-gradient(90deg, #ffd23f, #ff9fd0, #7fd4ff); }
/* The Shipyard popup: the war table (fog in a timber frame), what a galleon will need and the boarding list. */
.war-table { margin: 0 0 12px; }
.war-table canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; border-radius: 6px; box-shadow: 0 0 0 2px #000, 0 6px 0 #1a0f08, 0 10px 24px rgba(0, 0, 0, 0.45); }
.war-table figcaption { margin-top: 8px; font-size: 15px; color: var(--muted); text-align: center; }
/* What a galleon will need, and the boarding list (lands-ui.js shipyardPanel). */
.ship-h { margin: 8px 0 6px; font-family: var(--display); font-weight: 400; font-size: 17px; color: var(--gold); }
.ship-needs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; }
.ship-needs li { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px; background: rgba(3, 10, 44, 0.6); border: 1px solid #1d2f8a; }
.ship-needs li img { image-rendering: pixelated; flex: none; }
.ship-needs li span { display: grid; font-size: 15px; line-height: 1.15; }
.ship-needs li small { font-size: 13px; color: var(--muted); }
.ship-needs li.new { border-style: dashed; }
.ship-needs .ship-new { flex: none; width: 32px; text-align: center; font-style: normal; font-size: 11px; font-weight: 700; color: #1b1424; background: var(--gold); border-radius: 4px; padding: 2px 0; }
.board-box { display: grid; gap: 8px; padding: 10px 12px; border-radius: 10px; border: 2px dashed #8a6a14; background: rgba(3, 10, 44, 0.6); }
.board-count { margin: 0; font-size: 16px; color: #dfe6ff; }
.board-count b { font-family: var(--display); font-weight: 400; font-size: 20px; color: var(--gold); }
.board-names { margin: 0; padding: 0 0 0 26px; max-height: 168px; overflow-y: auto; columns: 2 150px; column-gap: 18px; font-size: 16px; }
.board-names li { break-inside: avoid; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ship-warn { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; font-size: 17px; line-height: 1.3; color: #ffe4c8; background: rgba(120, 24, 24, 0.35); border: 1px solid #a8343a; }
.vision-wrap { border-radius: 10px; overflow: hidden; border: 2px solid #000; box-shadow: 0 0 0 2px #7fd4ff55, 0 0 24px #7fd4ff44; }
.vision-wrap { background: #2f64b2; }
.vision-map { display: block; width: auto; height: auto; max-width: 100%; max-height: 64vh; margin: 0 auto; image-rendering: pixelated; }
/* the whole world from the first map down to the Open World: taller than the window, so it scrolls in its frame (lands-ui.js) */
.vision-tall { max-height: 64vh; overflow-y: auto; overscroll-behavior: contain; }
.vision-tall .vision-map { width: 100%; max-height: none; image-rendering: auto; }
.vision-key { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; font-size: 15px; }
.vision-key i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; background: var(--c); box-shadow: 0 0 6px var(--c); }
.vision-key em { color: #7fe8a0; font-style: normal; }
.claim-box { display: grid; justify-items: center; gap: 2px; margin: 6px 0 10px; padding: 12px; border-radius: 12px; border: 2px dashed var(--gold); background: rgba(60, 44, 4, 0.5); }
.claim-box b { font-family: var(--display); font-weight: 400; font-size: 30px; letter-spacing: 0.08em; color: #fff3c4; text-shadow: 0 2px 0 #000a2e; user-select: all; }
.claim-box small { font-size: 14px; color: var(--muted); }
.summit-steps { margin: 0 0 6px; padding-left: 22px; display: grid; gap: 3px; font-size: 16px; }

/* The 1% Club's members (whale-ui.js): gold frames like the ones on the 1% Wall. */
.whale-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 14px 10px; margin-top: 14px; max-height: min(62vh, 560px); overflow-y: auto; padding: 4px 2px; }
.whale-card { display: grid; justify-items: center; gap: 2px; text-align: center; min-width: 0; }
.whale-card b { font-size: 14px; color: #fff; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whale-card small { font-size: 12px; color: #ffe6b0; }
.whale-frame { display: block; width: 66px; height: 72px; padding: 5px; margin-bottom: 4px; background: linear-gradient(135deg, #fff0a0, #d8aa2c 35%, #a07818 70%, #ffd84a); border: 2px solid #1f1206; box-shadow: inset 0 0 0 1px #6e4a0c, 0 3px 0 rgba(0, 0, 0, 0.35); }
.whale-frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; background: #1a0e10; border: 1px solid #1f1206; }
.whale-frame img.px { image-rendering: pixelated; object-fit: contain; background: #2a1830; }
.whale-card.you .whale-frame { box-shadow: inset 0 0 0 1px #6e4a0c, 0 0 0 2px #ffe07a, 0 0 16px #ffd84a; }

/* ---------------------------------------------------------------- the legends (rpg/ui-legends.js, ui-rpg.js) */
.el-badge { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-style: normal; font-size: 11px; line-height: 1; vertical-align: middle;
  background: color-mix(in srgb, var(--elc) 28%, #0b1438); border: 1px solid color-mix(in srgb, var(--elc) 75%, #000); box-shadow: 0 0 6px color-mix(in srgb, var(--elc) 40%, transparent); }
.gba-st .st.sl { background: #6a7aff; } .gba-st .st.dt { background: #3fbf4a; color: #0b1a08; } .gba-st .st.dt.brn { background: #ff7a2a; color: #1b1424; } .gba-st .st.dt.lch { background: #9ad04a; color: #0b1a08; } .gba-st .st.dt.rot { background: #9a6cff; color: #fff; } .gba-st .st.dt.drn { background: #3aa8e8; color: #0b1430; } .gba-st .st.dt.bld { background: #c86a8a; color: #fff; } .gba-st .st.pr { background: #7fd4ff; color: #1b1424; }
/* The twelve's statuses (2026-10-05): Paralyzed, Mimighoul's disguise, Lucarion's focus, Garchasm underground. */
.gba-st .st.pa { background: #ffd23f; color: #1b1424; } .gba-st .st.dg { background: #e8c84a; color: #1b1424; } .gba-st .st.fo { background: #5ab8ff; color: #0b1430; } .gba-st .st.un { background: #a0846a; color: #1b1424; }
/* The dozen's (2026-10-18): Psyquack's headache, Golurgeist biding, Donphantom rolling, Ninefrost's mirages, Kingdrake's
   rain; on a hero, Terrodactyl's taunt, Dusknell's knell counting down and Dragaghast's curse. */
.gba-st .st.ac { background: #c06cf0; color: #fff; } .gba-st .st.bd { background: #c8a86a; color: #1b1424; } .gba-st .st.rl { background: #8a94a8; color: #0b1430; } .gba-st .st.mi { background: #bfefff; color: #0b1430; }
.gba-st .st.rn { background: #3a7ad8; color: #fff; } .gba-st .st.tn { background: #e0603a; color: #fff; } .gba-st .st.kn { background: #3a2a52; color: #ffd8e0; border: 1px solid #ff5a6a; } .gba-st .st.hx { background: #5a1d78; color: #fff; }
.gba-st .st.el { background: color-mix(in srgb, var(--elc) 30%, #141d40); border: 1px solid var(--elc); color: #fff; }
.gba-st .st.bo { background: #2f9a4a; color: #fff; } /* your potion boosts */
.gba-st { flex-wrap: wrap; }
/* The main fight menu: GUARD | ATTACK | TECHNIQUE on top, RUN | POTION in two halves under them (owner: the blows on
   the right where the thumb is, on phones, the web app and desktop alike). */
.bt-menu.main.five { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.bt-menu.main.five button { grid-column: span 2; min-width: 0; }
.bt-menu.main.five button[data-act="retreat"], .bt-menu.main.five button[data-act="potion"] { grid-column: span 3; }
.bt-menu.main button .cnt { margin-left: auto; min-width: 20px; padding: 0 5px; border-radius: 10px; background: var(--gold); color: var(--navy-900); font-size: 13px; text-align: center; }
.bt-menu .aff { font-style: normal; font-size: 13px; } .bt-menu .aff.best { color: var(--gold); } .bt-menu .aff.poor { color: #ff8a8a; }
/* Your attacks (rpg/attack-picks.js): TECHNIQUE shows your 3; More attacks, beside ◀ Back, opens the rest. */
.bt-foot { display: grid; grid-template-columns: 1fr 1fr; gap: inherit; }
.bt-menu button.more { display: flex; justify-content: center; align-items: center; gap: 6px; background: rgba(6, 18, 79, 0.92); color: var(--gold); border-style: dashed; border-color: #8a95c8; font-weight: 700; font-size: 17px; letter-spacing: 0.03em; }
.bt-menu button.more span { color: #fff; }
/* The ⚔ Attacks window (rpg/ui-attacks.js): your 3 numbered, then every attack you know with its Pick button. */
.atk-slots { list-style: none; margin: 0 0 4px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.atk-slot { position: relative; display: flex; align-items: center; gap: 7px; min-width: 0; padding: 8px 10px; border-radius: 10px; background: rgba(255, 210, 63, 0.12); border: 2px solid var(--gold-2); }
.atk-slot .n { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--gold); color: var(--navy-900); font-weight: 700; font-size: 14px; }
.atk-slot b { flex: 1; min-width: 0; color: #fff; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atk-slot small { color: var(--muted); font-size: 12px; }
.atk-slot.auto { background: rgba(3, 10, 44, 0.55); border-style: dashed; border-color: #4a5a9a; }
.atk-slot.auto .n { background: #4a5a9a; color: #fff; }
.atk-slot.empty { border-style: dashed; border-color: #2e3d74; background: none; }
.atk-slot .x { flex: none; width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 1px solid #8a95c8; background: rgba(3, 10, 44, 0.8); color: #fff; font-size: 13px; cursor: pointer; }
.atk-slot .x:hover, .atk-slot .x:focus-visible { border-color: #ff8a8a; color: #ff8a8a; }
.atk-list li.on { border-color: var(--gold-2); background: rgba(255, 210, 63, 0.1); }
.atk-list li.off > img, .atk-list li.off > div { opacity: 0.62; }
.atk-list .atk-cost { color: var(--gold); font-weight: 700; font-size: 14px; white-space: nowrap; }
.atk-list small { display: block; }
.atk-list .atk-need { display: block; font-style: normal; color: #ffb38a; font-size: 13px; }
/* An attack that burns or poisons: one per foe at a time (legends.js DOT_ONE). */
.atk-list .atk-dot, .master-teach .dot-one { display: block; font-style: normal; color: #9fd8ff; font-size: 12px; }
.atk-list .btn { flex: none; min-width: 74px; }
.atk-foot { margin-top: 12px; }
/* Strongest 3 | My own 3: in the ⚔ Attacks window and in Settings → Attacks in a fight. */
.atk-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 0 10px; }
.atk-mode .btn { font-size: 15px; padding: 6px 8px; }
.atk-set { display: grid; gap: 6px; padding: 8px; border-radius: 5px; background: rgba(8, 12, 32, 0.35); }
.atk-set-h { font-weight: 700; }
.atk-set .atk-mode { margin: 0; }
.atk-set small { color: var(--muted); font-size: 14px; line-height: 1.35; }
.atk-set small b { color: #fff; font-weight: 600; }
.atk-wait { color: #ffb38a; }
@media (max-width: 560px) {
  .atk-slots { grid-template-columns: 1fr; gap: 6px; }
}
.recipes em.hold, .recipes em.seal, .recipes em.time, .recipes em.hero { font-style: normal; font-size: 12px; padding: 1px 6px; border-radius: 10px; background: #1b2754; border: 1px solid #3a4b8a; color: #cfe0ff; white-space: nowrap; }
.recipes em.hold { border-color: #4ad8ff; color: #9fe9ff; } .recipes em.hold.no, .recipes em.seal.no { border-color: #ff6a6a; color: #ffb0b0; }
.recipes em.hero { border-color: #ffd23f; color: #ffe9a8; background: linear-gradient(90deg, #3a2a00, #1b2754); }
.forge-anvil { margin: 6px 0; padding: 7px 10px; border-radius: 8px; background: linear-gradient(90deg, rgba(255, 138, 42, 0.18), rgba(3, 10, 44, 0.6)); border: 1px solid #a8541c; display: flex; align-items: center; gap: 8px; }
.ri.hero { filter: drop-shadow(0 0 4px #ffe9a8); }
.ri.empty { display: inline-block; width: 32px; height: 32px; border-radius: 6px; border: 1px dashed #2e3d74; }
.slot.pet-slot img.px, img.px { image-rendering: pixelated; }
.hold-note b { color: #ffb0b0; }
.btn.small { padding: 3px 9px; font-size: 14px; }
.class-card.rare::after { content: "RARE"; position: absolute; right: 8px; top: 8px; font-family: var(--display); font-size: 12px; color: var(--navy-900); background: var(--cc); padding: 1px 6px; border-radius: 6px; }
/* your own class is a rare one: YOUR CLASS goes to the art's other corner, clear of the RARE tag */
.class-card.rare .cc-you { right: auto; left: 8px; }
.cc-lock { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
/* the Storage House */
.stash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 720px) { .stash-grid { grid-template-columns: 1fr; } }
.stash-side { padding: 8px; border-radius: 10px; background: rgba(3, 10, 44, 0.45); border: 1px solid #2e3d74; min-width: 0; }
.stash-side h3 { margin: 0 0 4px; font-family: var(--display); font-weight: 400; color: var(--gold); font-size: 18px; }
.stash-cell { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 4px; border-radius: 6px; background: rgba(3, 10, 44, 0.6); border: 1px solid #2e3d74; color: #fff; font: inherit; font-size: 15px; cursor: pointer; }
.stash-cell:hover:not([disabled]) { border-color: var(--gold); box-shadow: 0 0 8px rgba(255, 210, 63, 0.35); }
.stash-cell[disabled] { opacity: 0.55; cursor: default; }
.stash-cell small { color: var(--muted); font-size: 12px; }
/* the Colosseum: its rules and what you'd keep (rpg/ui-arena.js) */
.arena-rules { list-style: none; margin: 6px 0 10px; padding: 0; display: grid; gap: 6px; }
.arena-rules li { display: grid; grid-template-columns: 26px 1fr; gap: 8px; align-items: start; padding: 6px 8px; border-radius: 8px; background: rgba(3, 10, 44, 0.45); border: 1px solid #2e3d74; font-size: 15px; line-height: 1.35; }
.arena-rules li i { font-style: normal; text-align: center; }
.arena-rules b { color: var(--gold); }
.arena-stakes { display: grid; gap: 8px; }
.arena-stakes section { padding: 8px; border-radius: 10px; background: rgba(3, 10, 44, 0.45); border: 1px solid #2e3d74; min-width: 0; }
.arena-stakes section.drop { border-color: #7a2a3a; background: rgba(60, 10, 24, 0.35); }
.arena-stakes h5 { margin: 0 0 6px; font-family: var(--display); font-weight: 400; font-size: 16px; color: #fff; }
.arena-stakes .stash-cell { cursor: default; margin: 0 4px 4px 0; }
.arena-go { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; margin-top: 12px; }
/* "If you lost a fight here right now, at your limit": the limit picked on the meter above, in the meter's colours */
.arena-lost b { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: var(--gold); color: #1a1030; letter-spacing: 0.02em; white-space: nowrap; }
.arena-lost b.zero { background: var(--cyan); }
.arena-lost b.all { background: #ffa24a; }
.arena-go.arena-send { margin: 0 0 12px; }
/* The Colosseum's stakes meter (rpg/ui-arena.js stakeMeter: the war window's .sqw-* look): your limit in the rules, the bet
   in a challenge. Bets past a limit are greyed out. Your side: tick anyone free on the sand, squad or not. */
.arena-meter { margin: 4px 0 12px; padding: 10px 12px 12px; border-radius: 10px; background: rgba(3, 10, 44, 0.45); border: 1px solid #2e3d74; }
.arena-meter .sqw-read > b { min-width: 104px; }
.arena-meter .sqw-read span b { min-width: 0; font: inherit; font-weight: 700; color: #fff; text-shadow: none; }
.sqw-pip:disabled { cursor: default; opacity: 0.3; }
.sqw-pip:disabled:hover span { border-color: #3a4c88; }
/* a challenge's bets past your own limit: yours to pick, sending raises your limit (rpg/ui-arena.js arenaChallengePanel) */
.sqw-pip.over span { border-style: dashed; border-color: #8a7a3a; }
.sqw-pip.over.lit span { border-color: #fff; }
.arena-caps { margin: 0 0 8px; color: #ffe6a0; }
.arena-pick-tools { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.arena-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px; max-height: 196px; overflow-y: auto; }
.arena-pick-row { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 40px; padding: 4px 8px; border-radius: 8px; background: rgba(3, 10, 44, 0.55); border: 1px solid #2e3d74; cursor: pointer; }
.arena-pick-row:has(input:checked) { border-color: var(--gold); background: rgba(255, 210, 63, 0.12); }
.arena-pick-row input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--gold); }
.arena-pick-row b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; color: #fff; }
.arena-pick-row em { flex: none; font-style: normal; font-size: 13px; color: #9fe0ff; }
.arena-pick-row small { margin-left: auto; flex: none; font-size: 12px; color: var(--muted); }
.arena-pick-row.mate small { color: #9fe0ff; }
.arena-pick-row.over { opacity: 0.55; cursor: default; }
/* companions */
.pet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); gap: 10px; margin: 8px 0; }
/* A companion's card: its element's light along the top, and the companion on a stage of that element's glow (a slow
   pulse behind it, a soft halo round it, its shadow on the ground), at exactly 2x so every pixel stays sharp. */
.pet-card { position: relative; overflow: hidden; display: grid; grid-template-columns: 128px 1fr; gap: 4px 12px; align-items: center; padding: 10px 10px 10px 8px; border-radius: 10px; background: radial-gradient(ellipse 170px 130px at 72px 50%, color-mix(in srgb, var(--elc) 20%, transparent), transparent 72%), linear-gradient(180deg, color-mix(in srgb, var(--elc) 14%, #0e1a48), #070f36); border: 1px solid color-mix(in srgb, var(--elc) 50%, #2e3d74); }
.pet-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--elc); box-shadow: 0 0 10px var(--elc); }
.pet-card.out { box-shadow: 0 0 0 2px var(--gold), 0 0 14px rgba(255, 210, 63, 0.3); }
.pet-card.r-uncommon { border-color: #4fb85a; } .pet-card.r-rare { border-color: #5aa8ff; } .pet-card.r-epic { border-color: #b070ff; box-shadow: 0 0 10px rgba(176, 112, 255, 0.25); } .pet-card.r-legendary { border-color: #ffaa3a; box-shadow: 0 0 14px rgba(255, 170, 58, 0.35); } .pet-card.r-mythic { border-color: #fff2a8; box-shadow: 0 0 16px rgba(255, 242, 168, 0.4); }
/* A rarity's name in its own colour (the cards, the mint's odds). */
.pet-rar { font-weight: 700; white-space: nowrap; } .pet-rar.r-common { color: #c9cfe8; } .pet-rar.r-uncommon { color: #7adf7a; } .pet-rar.r-rare { color: #6ab4ff; } .pet-rar.r-epic { color: #c08aff; } .pet-rar.r-legendary { color: #ffb43a; } .pet-rar.r-mythic { color: #fff2a8; }
.pet-cards li.done { opacity: 0.6; }
.pet-stage { position: relative; width: 128px; height: 128px; grid-row: span 2; }
.pet-stage::before { content: ""; position: absolute; left: 50%; top: 52%; width: 144px; height: 144px; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, color-mix(in srgb, var(--elc) 42%, transparent), transparent 68%); animation: pet-aura 3.2s ease-in-out infinite; pointer-events: none; }
.pet-stage::after { content: ""; position: absolute; left: 20px; right: 18px; bottom: 0; height: 7px; border-radius: 50%; background: rgba(0, 0, 0, 0.42); }
.pet-pic { position: relative; z-index: 1; display: block; width: 128px; height: 128px; image-rendering: pixelated; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--elc) 70%, transparent)); }
.pet-card:nth-child(2n) .pet-stage::before { animation-delay: -1.6s; }
@keyframes pet-aura { 50% { transform: translate(-50%, -50%) scale(1.12); opacity: 0.6; } }
@media (prefers-reduced-motion: reduce) { .pet-stage::before { animation: none; } }
.pet-info b { color: #fff; font-size: 17px; } .pet-info small { color: var(--muted); display: block; }
.pet-lv { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--gold); } .pet-lv .rbar { flex: 1; }
.pet-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.recipes img.card { width: 32px; height: 44px; object-fit: cover; border-radius: 3px; }
/* the Trial of Fire */
.trial-fires { list-style: none; padding: 0; margin: 8px 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.trial-fires li { display: grid; gap: 2px; justify-items: center; padding: 8px 4px; border-radius: 8px; background: #1a0a08; border: 1px solid #5a2410; text-align: center; }
.trial-fires li span { color: #ff8a2a; font-family: var(--display); } .trial-fires li b { font-size: 13px; color: #ffd8b0; } .trial-fires li small { color: var(--muted); }
.trial-fires li.done { opacity: 0.55; background: #0b1020; border-color: #2e3d74; } .trial-fires li.next { border-color: #ffd23f; box-shadow: 0 0 10px rgba(255, 138, 42, 0.45); }
.trial-fires li img.demon { width: 64px; height: 64px; image-rendering: pixelated; } .trial-fires li.shown { outline: 2px solid #ff8a2a; outline-offset: 1px; }
.trial-demon { margin: 6px 0; padding: 8px 10px; border-radius: 8px; background: linear-gradient(180deg, #2a0a06, #12060a); border: 1px solid #7a2a10; }
.trial-demon b { color: #ffb347; font-family: var(--display); font-weight: 400; font-size: 18px; } .trial-demon small { color: var(--muted); } .trial-demon p { margin: 4px 0 0; color: #ffe2c8; font-size: 14px; line-height: 1.35; }
.lease-card.trial .lease-pic { object-fit: contain; image-rendering: pixelated; } .lease-card .raid-party li small.hp { color: #ff8a8a; }
@media (max-width: 560px) { .trial-fires { gap: 4px; } .trial-fires li { padding: 6px 2px; } .trial-fires li img.demon { width: 44px; height: 44px; } .trial-fires li b { font-size: 11px; } }
.relic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.relic { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 10px; border-radius: 10px; background: linear-gradient(180deg, #3a1206, #12060a); border: 1px solid #ff8a2a; color: #fff; font: inherit; cursor: pointer; }
.relic[disabled] { opacity: 0.5; cursor: default; } .relic small { color: var(--muted); font-size: 13px; } .relic em { color: var(--gold); font-style: normal; font-size: 13px; }
/* masters */
.master-head { display: flex; gap: 12px; align-items: center; } .master-head img { width: 56px; height: 56px; image-rendering: pixelated; }
.master-head b { display: block; color: var(--gold); font-family: var(--display); font-weight: 400; font-size: 18px; } .master-head small { display: block; color: var(--muted); }
.master-teach { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 6px; }
.master-teach li { padding: 6px 9px; border-radius: 8px; background: rgba(3, 10, 44, 0.55); border: 1px solid #2e3d74; }
.master-teach li b { color: #fff; } .master-teach li small { color: var(--muted); }
/* the arsenal ladder */
.arsenal-you { margin: 2px 0 8px; font-size: 18px; color: #2e1e08; } .arsenal-you b { color: #7a4a00; }
.rk-table.arsenal .el-badge { margin-left: 2px; }
/* its Rare items view: the cap after the count ("3/100") */
.rk-table.rare td small { font-size: 14px; color: var(--ink-2); }
/* the lands' countdown */
.lands-countdown { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); z-index: 6; padding: 5px 12px; border-radius: 999px; background: rgba(40, 8, 8, 0.85); border: 1px solid #ff6a3a; color: #ffd8c8; font-size: 15px; white-space: nowrap; pointer-events: none; }
.lands-countdown b { color: #ffd23f; }
@media (max-width: 640px) { .lands-countdown { font-size: 12px; top: 54px; white-space: normal; width: max-content; max-width: 90vw; text-align: center; } }
/* The ZAZA team's announcements (ui.announce): gold-framed under the top of the screen, above the lands countdown. */
.announce-bar { position: absolute; left: 50%; top: 44px; transform: translateX(-50%); z-index: 9; display: flex; align-items: flex-start; gap: 10px; width: max-content; max-width: min(560px, calc(100vw - 24px)); padding: 9px 10px 10px 14px; border-radius: 10px; background: rgba(6, 12, 40, 0.95); border: 2px solid #ffd23f; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); color: #fff6e0; font-size: 15px; line-height: 1.35; pointer-events: auto; }
.announce-bar[hidden] { display: none; }
.announce-bar b { flex: none; color: #ffd23f; font-family: var(--display); font-weight: 400; white-space: nowrap; }
.announce-bar span { min-width: 0; overflow-wrap: anywhere; }
.announce-bar button { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin: -3px 0 0; padding: 0; border: 1px solid #000; border-radius: 6px; background: #141d40; color: var(--muted); font-size: 13px; line-height: 1; text-align: center; cursor: pointer; }
.announce-bar button:hover { color: #fff; }
@media (max-width: 640px) { .announce-bar { top: 92px; flex-wrap: wrap; gap: 4px 8px; font-size: 13px; } .announce-bar span { flex: 1 1 100%; order: 3; } .announce-bar b { flex: 1 1 auto; } }

/* A sealed pack nothing guards (the Top of the World): the pack itself floating in front of Collector Crypt's gacha
   machine, what's inside, and the live odds. */
.lease-card.pack-free { width: min(500px, calc(100vw - 24px)); padding: 14px 16px 12px; border-color: #b36bff; background: radial-gradient(120% 90% at 18% 20%, rgba(179, 107, 255, 0.28), transparent 60%), linear-gradient(180deg, rgba(14, 22, 72, 0.97), rgba(6, 10, 38, 0.97)); box-shadow: 0 0 0 3px #1b1424, 0 0 34px rgba(179, 107, 255, 0.45), 0 0 70px rgba(255, 210, 63, 0.18); }
.fp-head { display: flex; gap: 14px; align-items: center; }
.fp-art { position: relative; flex: none; width: 128px; height: 160px; }
.fp-machine { position: absolute; left: 0; bottom: 0; width: 82px; opacity: 0.85; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6)) saturate(0.9); }
.fp-pack { position: absolute; right: 0; top: 0; height: 156px; transform: rotate(-7deg); filter: drop-shadow(0 0 14px rgba(255, 210, 63, 0.55)) drop-shadow(0 6px 6px rgba(0, 0, 0, 0.6)); animation: fp-float 2.6s ease-in-out infinite; }
@keyframes fp-float { 0%, 100% { transform: rotate(-7deg) translateY(0); } 50% { transform: rotate(-4deg) translateY(-6px); } }
.fp-spark { position: absolute; color: #fff3a0; font-style: normal; font-size: 16px; text-shadow: 0 0 8px #ffd23f; animation: fp-twinkle 1.8s ease-in-out infinite; pointer-events: none; }
.fp-spark.s1 { right: -4px; top: 6px; }
.fp-spark.s2 { left: 34px; top: -6px; font-size: 12px; animation-delay: 0.6s; }
.fp-spark.s3 { right: 6px; bottom: 26px; font-size: 13px; animation-delay: 1.2s; }
@keyframes fp-twinkle { 0%, 100% { opacity: 0.2; transform: scale(0.7); } 50% { opacity: 1; transform: scale(1.15); } }
.fp-text { min-width: 0; }
.lease-card.pack-free .kicker { color: #d7b4ff; }
.lease-card.pack-free h3 { font-size: 26px; line-height: 1.05; margin: 2px 0 4px; }
.lease-card.pack-free .fp-text p b { color: #7fd4ff; font-weight: 400; }
/* how much a click moves: 1, 10, 25%, 50%, All, or your own number or % (rpg/ui-legends.js storagePanel) */
.stash-qty { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.stash-qty span { color: var(--muted); font-size: 14px; margin-right: 2px; }
@media (max-width: 720px) { .stash-qty span { flex-basis: 100%; } }
.stash-q { display: flex; align-items: center; justify-content: center; min-width: 52px; min-height: 34px; padding: 0 10px; border-radius: 999px; border: 2px solid #2e3d74; background: rgba(3, 10, 44, 0.55); color: #dfe6ff; font: inherit; font-size: 15px; font-weight: 700; line-height: 1; text-align: center; white-space: nowrap; cursor: pointer; }
.stash-q:hover, .stash-q:focus-visible { border-color: var(--gold); outline: none; }
.stash-q.on { background: var(--gold); border-color: var(--gold); color: #1a1030; }
#stashQ { width: 112px; min-height: 34px; padding: 0 10px; border-radius: 999px; border: 2px solid #2e3d74; background: rgba(3, 10, 44, 0.55); color: #fff; font: inherit; font-size: 16px; text-align: center; }
#stashQ.on { border-color: var(--gold); box-shadow: 0 0 8px rgba(255, 210, 63, 0.35); }
#stashQ[aria-invalid] { border-color: #ff6a6a; }
.fp-chips { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.fp-chips li { padding: 2px 9px; border-radius: 999px; font-size: 13px; color: #fff3c4; background: rgba(255, 210, 63, 0.12); border: 1px solid rgba(255, 210, 63, 0.5); white-space: nowrap; }
.fp-odds { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.fp-odds li { --t: #5fe86f; display: grid; justify-items: center; gap: 1px; padding: 5px 2px; border-radius: 8px; background: color-mix(in srgb, var(--t) 12%, rgba(3, 10, 44, 0.7)); border: 1px solid color-mix(in srgb, var(--t) 60%, transparent); }
.fp-odds li.t-uncommon { --t: #7fd4ff; }
.fp-odds li.t-rare { --t: #ffd23f; }
.fp-odds li.t-epic { --t: #c08aff; }
.fp-odds b { font-family: var(--display); font-weight: 400; font-size: 17px; color: var(--t); line-height: 1; }
.fp-odds span { font-size: 12px; color: #dfe6ff; }
.fp-odds small { font-size: 11px; color: var(--muted); }
.fp-row { display: flex; gap: 8px; }
.fp-take { flex: 1; min-height: 50px; font-size: 21px; }
@media (max-width: 560px) {
  .fp-art { width: 98px; height: 126px; }
  .fp-pack { height: 122px; }
  .fp-machine { width: 62px; }
  .lease-card.pack-free h3 { font-size: 21px; }
  .fp-chips li { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .fp-pack, .fp-spark { animation: none; } }

/* Card collection: your real pulls (graded Collector Crypt slabs) above the demo cards; tap one to see it again. */
.ff-title.real-title { color: var(--gold); }
.realdex { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 4px; }
.real-card { position: relative; display: grid; grid-template-rows: auto auto; gap: 3px; padding: 5px 5px 6px; border-radius: 8px; border: 1px solid #b36bff; background: radial-gradient(90% 70% at 50% 25%, rgba(179, 107, 255, 0.28), transparent 70%), #0a102a; color: var(--text); cursor: pointer; box-shadow: 0 0 12px rgba(179, 107, 255, 0.3); }
.real-card:hover { box-shadow: 0 0 0 2px var(--gold), 0 0 16px rgba(255, 210, 63, 0.4); }
/* Cards in another player's bag (View inventory, rpg/ui-rpg.js cardsHTML): the same tiles as the Card collection,
   smaller, as many to a row as fit, only to look at. */
.realdex.bag-cards { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
.cardex.bag-demo { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); margin-bottom: 8px; }
.peek-cards .real-card, .peek-cards .cardex .card { cursor: default; }
.peek-cards .real-card:hover, .peek-cards .cardex .card:hover { box-shadow: none; }
.real-card.sent-away { border-color: #455073; background: #0a1024; box-shadow: none; color: #aeb7df; }
.real-card.sent-away img { filter: grayscale(1) saturate(0.35) brightness(0.62); opacity: 0.72; }
.real-card img { width: 100%; aspect-ratio: 3 / 5; object-fit: contain; display: block; }
.real-card .rc-noimg { display: grid; place-items: center; aspect-ratio: 3 / 5; font-size: 28px; }
.real-card .rc-name { align-self: start; font-size: 12px; line-height: 1.15; text-align: center; overflow-wrap: anywhere; } /* the whole name, never cut (owner, 2026-10-07: "its cutting a bit the text"); the row grows to the longest */
.real-card .rc-state { justify-self: center; margin-top: -1px; padding: 1px 6px; border-radius: 999px; border: 1px solid #455073; color: #d1d7f7; background: rgba(3, 10, 44, 0.78); font-style: normal; font-size: 10px; line-height: 1.2; text-transform: uppercase; }
.real-card b { position: absolute; top: 4px; right: 4px; padding: 0 6px; border-radius: 999px; font-family: var(--display); font-weight: 400; font-size: 13px; color: #06124f; background: var(--gold); box-shadow: 0 1px 0 #000; }

/* XP Boosts (boost-shop.js): the window, the strip chips under the minimap and the 2× XP chip in a fight. */
/* Boosts (boost-shop.js): Fight and XP boosts both in the site's gold (owner 2026-10-07, after green and then orange
   for Fight: "keep the boosts same color and yellow"), in the strip, the fight box, the window and the left panel. The
   icon and the word tell them apart; never green, orange, blue or red. */
.mini-buffs .mb.xpb { border-color: rgba(255, 210, 63, 0.75); box-shadow: 0 0 6px rgba(255, 210, 63, 0.3); color: #ffe68a; padding-left: 6px; }
.gba-st .st.bo.xpb { background: #c08a12; color: #fff; }
.xpb-btn { border-color: var(--gold); color: var(--gold); }
.xpb-note { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.xpb-note span { color: #ffe68a; }
/* The Fight | XP switch (two kinds on sale): one pill, two halves, the picked one gold. */
.xpb-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; padding: 3px; border-radius: 999px; background: rgba(3, 10, 44, 0.6); border: 1px solid #2f48a8; }
.xpb-switch button { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 28px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: #c9d4ff; font: 400 14px/1 var(--display); letter-spacing: 0.04em; text-align: center; cursor: pointer; transition: background 0.12s ease, color 0.12s ease; }
.xpb-switch button:hover { color: #fff; }
.xpb-ico { flex: none; display: block; width: 18px; height: 18px; pointer-events: none; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.3)); }
.xpb-switch button[aria-pressed="false"] .xpb-ico { opacity: 0.6; filter: saturate(0.55); }
.xpb-switch button[aria-pressed="true"] { background: linear-gradient(180deg, #ffe066, var(--gold-2)); color: var(--navy-900); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18); }
/* The window. */
/* 📤 Sent away: the cards that left your wallet, after the ones you hold, in their grey; a tap minimizes them (ui.js renderSide). */
.ff-title.real-away { display: flex; align-items: center; gap: 6px; width: 100%; padding: 0; border: 0; background: none; color: #aeb7df; text-align: left; }
.real-away i { margin-left: auto; padding: 1px 8px; border-radius: 999px; border: 1px solid #455073; background: rgba(3, 10, 44, 0.78); color: #d1d7f7; font-style: normal; font-size: 12px; line-height: 1.4; }
.real-away:hover i, .real-away:focus-visible i { border-color: var(--gold); color: var(--gold); }
.xpb-shell { display: grid; gap: 10px; }
.xpb-shell > * { margin: 0; }
.xpb-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-right: 44px; } /* room for the window's × */
.xpb-head h2 { margin: 0; }
.xpb-head .xpb-switch { flex: none; width: 190px; }
.xpb-running { display: flex; flex-wrap: wrap; gap: 6px; }
.xpb-running span { display: inline-grid; place-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px; background: rgba(255, 210, 63, 0.14); border: 1px solid rgba(255, 210, 63, 0.6); color: #ffe68a; font-size: 14px; text-align: center; }
/* How strong a boost is at your level (boostPct): the big number, then the rule. */
.xpb-lv { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px; background: rgba(255, 210, 63, 0.1); border: 1px solid rgba(255, 210, 63, 0.45); color: #dfe6ff; font-size: 15px; line-height: 1.35; }
.xpb-lv b { flex: none; min-width: 52px; text-align: center; font: 400 28px/1 var(--display); color: var(--gold); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); }
.xpb-lv span { display: grid; gap: 2px; font-size: 17px; color: #fff; }
.xpb-lv small { font-size: 14px; color: #b9c4ea; }
@media (max-width: 520px) { .xpb-lv { gap: 10px; padding: 8px 10px; } .xpb-lv b { min-width: 44px; font-size: 24px; } .xpb-lv span { font-size: 15px; } .xpb-lv small { font-size: 13px; } }
.xpb-list { list-style: none; padding: 0; display: grid; gap: 8px; }
.xpb-row { display: grid; border-radius: 12px; overflow: hidden; background: linear-gradient(180deg, rgba(16, 32, 110, 0.92), rgba(10, 20, 64, 0.94)); border: 2px solid #2f48a8; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); transition: border-color 0.12s ease; }
.xpb-row:hover { border-color: #4a64c8; }
.xpb-row.focus { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(255, 210, 63, 0.3); }
.xpb-pick { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 12px 8px 8px; border: 0; background: none; color: #fff; text-align: left; cursor: pointer; font: inherit; }
.xpb-x { flex: none; display: grid; place-items: center; align-content: center; gap: 3px; width: 74px; height: 56px; border-radius: 10px; border: 2px solid #0b1022; color: var(--navy-900); text-align: center; box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.55), inset 0 -3px 0 rgba(0, 0, 0, 0.2); }
.xpb-x b { font: 400 24px/1 var(--display); }
.xpb-x b i, .xpb-buys b i { margin-left: 0.12em; font-size: 0.6em; font-style: normal; }
.xpb-x small { font: 400 13px/1 var(--ui-font); letter-spacing: 0.06em; text-transform: uppercase; }
.xpb-x { background: linear-gradient(180deg, #fff3a8 0%, #ffd23f 55%, #e0a400 100%); }
.xpb-what { flex: 1; min-width: 0; font-size: 18px; line-height: 1.3; color: #e6ebff; }
.xpb-buy { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; background: rgba(3, 10, 44, 0.5); border-top: 1px solid rgba(255, 255, 255, 0.08); }
.xpb-buy > span { display: grid; gap: 3px; }
.xpb-buy .xpb-usd { font: 400 22px/1 var(--display); color: var(--gold); }
.xpb-buy small { color: var(--muted); font-size: 13px; line-height: 1.2; }
.xpb-buy .btn { min-width: 96px; }
.xpb-pay { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; }
.xpb-pay > span { white-space: nowrap; }
.xpb-tokens { display: grid; grid-template-columns: repeat(3, minmax(0, 96px)); gap: 8px; }
.xpb-tokens button { display: grid; place-items: center; min-height: 34px; padding: 0 10px; border-radius: 10px; background: #141d40; border: 2px solid #3b4c80; color: #fff; font: 15px var(--ui-font); cursor: pointer; text-align: center; }
.xpb-tokens button[aria-pressed="true"] { border-color: var(--gold); background: rgba(255, 210, 63, 0.15); }
.xpb-tokens button:disabled { opacity: 0.45; cursor: default; }
.xpb-bag li small { display: block; color: var(--muted); font-size: 13px; line-height: 1.3; margin-top: 2px; }
.xpb-msg { padding: 8px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.06); font-size: 14px; line-height: 1.4; }
.xpb-msg.ok { background: rgba(110, 230, 140, 0.14); color: #b8f5c4; }
.xpb-msg.err { background: rgba(255, 92, 92, 0.14); color: #ffb3b3; }
.xpb-msg a { color: var(--gold); }
.xpb-closed { color: #ffcf8a; }
@media (max-width: 520px) { .xpb-head .xpb-switch { width: 168px; } .xpb-head .xpb-switch button { gap: 4px; padding: 0 6px; } .xpb-what { font-size: 16px; } .xpb-x { width: 64px; height: 50px; } .xpb-x b { font-size: 21px; } }
/* The left panel's row under Buy (boost-shop.js xpbBuyRowHTML). Owner, 2026-10-07, on a gold "Boost 1.1×" pill over three
   flat tiles: "blend better the buttons.. 3 buttons.. and maybe call it fight boost". Now it reads like Buy: a heading
   ("⚔ FIGHT BOOST" and how strong it is at your level, said once) over three buttons built like Buy's (the rules above
   share .xpb-buys: size, dark edge, shine, press), in gold, a stopwatch filled for its share of an hour over the length.
   With two kinds on sale a Fight | XP switch, each half with its strength, sits between the heading and the buttons. */
.xpb-buys-h { margin-top: 2px; }
.xpb-buys-h .xpb-h { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.xpb-buys-h .xpb-ico { width: 16px; height: 16px; }
.xpb-buys-h em { display: flex; align-items: center; height: 15px; padding: 0 5px 0.08em; border-radius: 999px; background: var(--navy-900); border: 1px solid rgba(255, 210, 63, 0.55); color: #ffe066; font: 400 11px/1 var(--display); font-style: normal; letter-spacing: 0.02em; text-transform: none; }
.xpb-front { display: grid; gap: 5px; padding-bottom: 3px; }
/* A size container only round the switch: anywhere else it would hide the panel's own container queries from the
   buttons (a sideways phone sizes Buy's buttons, and these, by the panel's width). */
.xpb-front:has(> .xpb-switch) { container: xpb-front / inline-size; }
.xpb-front .xpb-switch { padding: 2px; }
.xpb-front .xpb-switch button { min-height: 22px; gap: 4px; padding: 0 4px; font-size: 13px; letter-spacing: 0.02em; }
/* Titan One's digits sit 0.04em low at line-height 1 (measured at 200 px, Chromium and WebKit): the chip's 0.08em
   bottom padding and the tile word's -0.04em lift put them in the middle. */
.xpb-switch em { display: flex; align-items: center; height: 15px; padding: 0 4px 0.08em; border-radius: 999px; background: rgba(255, 255, 255, 0.1); color: #aab6e6; font: 400 11px/1 var(--display); font-style: normal; letter-spacing: 0.02em; }
.xpb-switch button[aria-pressed="true"] em { background: var(--navy-900); color: #ffe066; }
.xpb-buys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.xpb-buys[hidden] { display: none; }
.xpb-front .xpb-buys button { height: 34px; flex-direction: row; gap: 4px; padding: 3px; border-radius: 7px; container: xpb-tile / inline-size; }
.xpb-front .xpb-buys .xpb-clock { width: 16px; height: 16px; }
.xpb-front .xpb-buys b { font-size: 12px; }
/* The length always shows whole: a tile too narrow inside for its stopwatch and "30m" (16 + 4 + 26 px in Titan One at 12 px,
   measured) shows the length alone. Owner, 2026-10-11, on tiles reading "15…" and "3…": "make sure the times always fit
   on fight boost, if no space, don't show icon of time, just show numbers.. 15m 30m 1h". */
@container xpb-tile (max-width: 46.98px) { .xpb-front .xpb-buys .xpb-clock { display: none; } }
.xpb-buys :is(.xb-xp, .xb-fight) { background: linear-gradient(180deg, #fff3a8 0%, #ffd23f 55%, #e0a400 100%); }
.xpb-clock { position: relative; flex: none; display: block; width: 20px; height: 20px; filter: drop-shadow(0 2px 0 rgba(0, 10, 46, 0.35)); }
.xpb-clock .w { fill: #e0a000; }
.xpb-buys b { top: -0.04em; }
.xpb-buys b i { margin-left: 0.15em; font-size: 0.68em; }
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (min-width: 561px) {
  .xpb-front { gap: 4px; }
  .xpb-front .xpb-switch button { min-height: 22px; gap: 2px; padding: 0 2px; font-size: 11px; letter-spacing: 0; }
  .xpb-front .xpb-ico { width: 14px; height: 14px; }
  .xpb-switch em { height: 14px; padding: 0 3px 0.08em; font-size: 10px; letter-spacing: 0; }
  .xpb-buys-h .xpb-ico { width: 14px; height: 14px; }
  .xpb-buys-h em { height: 14px; padding: 0 4px 0.08em; font-size: 10px; letter-spacing: 0; }
}
/* A row too narrow for "⚔ Fight 1.65×" (a sideways phone's narrowest wallet or Buy and Boosts column): the switch keeps
   its colours and words and drops the little icons. */
@container xpb-front (max-width: 178.98px) { .xpb-switch .xpb-ico { display: none; } }
/* A real pack's difficulty on its guardian card (hunt-tiers.js): Easy in green, Hard ★ in fire colours. */
.tier-tag { display: inline-grid; place-items: center; min-height: 20px; padding: 0 8px; border-radius: 999px; font-size: 13px; font-weight: 700; text-align: center; vertical-align: 1px; }
.tier-tag.easy { background: rgba(110, 230, 140, 0.18); color: #9ff0b4; border: 1px solid rgba(110, 230, 140, 0.55); }
.tier-tag.hard { background: linear-gradient(180deg, #ffb347, #e8461f); color: #fff; border: 1px solid #ffd27a; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); }
.tier-rule { margin: 6px 0 0; padding: 6px 9px; border-radius: 8px; font-size: 14px; line-height: 1.35; }
.tier-rule.easy { background: rgba(110, 230, 140, 0.1); color: #c9f5d5; }
.tier-rule.hard { background: rgba(255, 120, 40, 0.12); color: #ffd9b8; }

/* The Marketplace's window (rpg/ui-market.js): the players at the market, and the rare goods coming, greyed out. */
.market-who, .market-goods { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.market-who li, .market-goods li { display: flex; gap: 10px; align-items: center; padding: 7px 9px; border-radius: 8px; background: rgba(3, 10, 44, 0.55); border: 1px solid #2e3d74; }
.market-who li > div, .market-goods li > div { flex: 1; min-width: 0; }
.market-who small { color: var(--muted); }
.market-who .btn, .market-goods .btn { flex: none; display: inline-flex; align-items: center; justify-content: center; text-align: center; }
.market-goods li > div { display: flex; flex-direction: column; gap: 2px; }
.market-goods small { color: var(--muted); font-size: 13px; line-height: 1.3; }
.market-goods li.soon { background: rgba(40, 44, 60, 0.5); border-color: #3a4058; }
.market-goods li.soon b { color: #b8bccb; }
.market-goods li.soon .ri, .market-goods li.soon .gd-ico { filter: grayscale(1) brightness(0.85); opacity: 0.75; image-rendering: pixelated; }
.market-goods li.soon .btn[disabled] { opacity: 0.7; cursor: default; }
/* The Marketplace's trade-in counter: give → get, how many, the quote, and today's values. */
.mk-swap { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 8px 10px; margin: 8px 0 0; padding: 10px; border-radius: 8px; background: rgba(3, 10, 44, 0.55); border: 1px solid #2e3d74; }
.mk-side { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.mk-pick { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mk-pick select { flex: 1; min-width: 0; font: inherit; font-size: 15px; text-transform: none; letter-spacing: 0; color: #fff; background: #0b1440; border: 1px solid #3a4c8a; border-radius: 6px; padding: 5px 6px; }
.mk-arrow { align-self: center; padding-top: 18px; font-size: 20px; color: var(--gold); }
.mk-amount { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 6px; }
.mk-amount[hidden] { display: none; }
.mk-amount input { width: 72px; text-align: center; font: inherit; font-size: 16px; color: #fff; background: #0b1440; border: 1px solid #3a4c8a; border-radius: 6px; padding: 4px; }
.mk-amount .btn { min-width: 34px; display: inline-flex; align-items: center; justify-content: center; }
.mk-quote { grid-column: 1 / -1; margin: 0; text-align: center; font-size: 15px; line-height: 1.4; }
.mk-quote b { color: var(--gold); }
.mk-why { display: block; color: #ff9a8a; font-size: 13px; }
#mkGo { grid-column: 1 / -1; justify-self: center; display: inline-flex; align-items: center; justify-content: center; }
.mk-left b { color: var(--gold); }
.mk-rates { margin: 8px 0 0; }
.mk-rates summary { cursor: pointer; color: var(--gold); font-size: 14px; }
.mk-rates summary small { color: var(--muted); }
.mk-values { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 4px 10px; }
.mk-values li { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 6px; background: rgba(3, 10, 44, 0.45); font-size: 14px; }
.mk-values li span { flex: 1; min-width: 0; }
.mk-values li b { color: var(--gold); font-variant-numeric: tabular-nums; }
.mk-tag { font-style: normal; font-size: 11px; padding: 1px 5px; border-radius: 999px; text-align: center; }
.mk-tag.up { background: rgba(255, 170, 60, 0.18); color: #ffc98a; }
.mk-tag.down { background: rgba(110, 170, 255, 0.16); color: #a9cbff; }
@media (max-width: 520px) { .mk-swap { grid-template-columns: minmax(0, 1fr); } .mk-arrow { padding-top: 0; justify-self: center; transform: rotate(90deg); } }
/* The Marketplace window's tabs (rpg/ui-market.js): six even buttons (three by two on a phone), the icon over the name, the
   picked one gold like the Rankings' tabs; a small green count on Players (who's at the market), Offers and Auctions. */
.mk-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin: 0 0 12px; }
.mk-tabs button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 58px; padding: 7px 4px 6px; border-radius: 10px; background: linear-gradient(180deg, rgba(23, 36, 88, 0.92), rgba(8, 15, 48, 0.92)); border: 2px solid #2e3d74; color: var(--muted); font-size: 18px; line-height: 1; text-align: center; cursor: pointer; box-shadow: inset 0 1px 0 rgba(169, 179, 214, 0.22), 0 3px 0 rgba(0, 0, 0, 0.35); transition: background 0.12s, border-color 0.12s, transform 0.12s; }
.mk-tabs .mk-ti { font-size: 20px; line-height: 1; }
.mk-tabs button:hover { border-color: var(--edge-light); color: var(--text); }
.mk-tabs button.on { background: linear-gradient(180deg, #ffe066, var(--gold-2)); border-color: #3a2a00; color: var(--navy-900); box-shadow: inset 0 0 0 1px #fff3b0, 0 3px 0 #6a4a00; transform: translateY(-1px); }
.mk-count { position: absolute; top: 3px; right: 3px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: #3dd17e; color: #06240f; font-size: 14px; font-style: normal; line-height: 18px; text-align: center; }
.modal .mk-intro { margin: 0 0 8px; font-size: 16px; line-height: 1.35; color: #cfd8f0; }
@media (max-width: 520px) {
  .mk-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .mk-tabs button { min-height: 56px; padding: 6px 2px 5px; font-size: 15px; }
  .mk-tabs .mk-ti { font-size: 18px; }
}
/* The Marketplace's hot items and recent trades (rpg/ui-market.js). */
.mk-hot, .mk-log { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.mk-hot li, .mk-log li { display: flex; gap: 10px; align-items: center; padding: 7px 9px; border-radius: 8px; background: rgba(3, 10, 44, 0.55); border: 1px solid #2e3d74; }
.mk-hot li > div, .mk-log li > div { flex: 1; min-width: 0; }
.mk-hot li:first-child { border-color: #b8862a; background: linear-gradient(90deg, rgba(255, 140, 40, 0.18), rgba(3, 10, 44, 0.55) 70%); }
.mk-hot b { display: block; }
.mk-hot small { display: block; color: var(--muted); font-size: 13px; line-height: 1.3; }
.mk-rank { flex: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(255, 210, 63, 0.16); color: var(--gold); font-size: 14px; font-weight: 700; line-height: 1; text-align: center; }
.mk-heat { flex: none; font-size: 15px; letter-spacing: -2px; }
.mk-kind { flex: none; align-self: flex-start; font-size: 18px; line-height: 24px; }
.mk-who, .mk-deal { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.mk-who small { color: var(--muted); }
.mk-ago { margin-left: auto; font-size: 12px; }
.mk-deal { margin-top: 4px; font-size: 14px; }
.mk-lot { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); line-height: 20px; }
.mk-lot b { color: var(--gold); font-variant-numeric: tabular-nums; }
.mk-lot.none { padding: 2px 8px; color: var(--muted); font-style: italic; }
.mk-lot .ri { width: 20px; height: 20px; }
.mk-lot .ri.empty { width: 18px; height: 18px; }
.mk-to { color: var(--gold); }
.mk-switch { display: inline-grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; margin: 6px 0 0; padding: 3px; border-radius: 999px; background: rgba(3, 10, 44, 0.6); border: 1px solid #2f48a8; }
.mk-switch button { display: flex; align-items: center; justify-content: center; min-height: 28px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: #c9d4ff; font: 400 14px/1 var(--display); letter-spacing: 0.04em; text-align: center; cursor: pointer; }
.mk-switch button:hover { color: #fff; }
.mk-switch button[aria-pressed="true"] { background: linear-gradient(180deg, #ffe066, var(--gold-2)); color: var(--navy-900); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18); }
.mk-more-btn { display: flex; align-items: center; justify-content: center; margin: 8px auto 0; }
/* The Marketplace's listings (rpg/ui-listings.js): gems, scrolls and gear with sockets put up by players. */
.ls-board { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.ls-board li { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 7px 9px; border-radius: 8px; background: rgba(3, 10, 44, 0.55); border: 1px solid #2e3d74; }
/* The board by type (rpg/ui-listings.js boardHTML): ▾ N more under a group's cheapest, and the rest of its group indented
   under it, edged on the left (gold for yours, or one waiting for you). */
.ls-board li.ls-fold { padding: 0; margin: -3px 0 0 14px; background: none; border: 0; }
.ls-fold button { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 4px 10px; font: inherit; font-size: 14px; text-align: left; color: var(--gold); background: rgba(255, 255, 255, 0.05); border: 1px dashed #3a4c8a; border-radius: 7px; cursor: pointer; }
.ls-fold button:hover { background: rgba(255, 210, 63, 0.08); border-color: rgba(255, 210, 63, 0.5); }
.ls-board .ls-fold small { display: inline; font-size: 13px; }
.ls-board li.ls-sub { margin-left: 14px; border-left: 3px solid #3a4c8a; }
.ls-board li.mine { border-color: rgba(255, 210, 63, 0.55); }
.ls-lot { flex: 1 1 200px; min-width: 0; display: flex; align-items: center; gap: 10px; }
.ls-lot > div { flex: 1; min-width: 0; }
.ls-board .ls-ico { flex: none; width: 32px; height: 32px; }
.ls-board small { display: block; color: var(--muted); font-size: 13px; line-height: 1.3; }
.ls-what { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.ls-what small { display: inline; }
.ls-socks { display: inline-flex; gap: 3px; }
.ls-socks .ri { width: 20px; height: 20px; }
.ls-hole { width: 16px; height: 16px; margin: 2px; border-radius: 50%; border: 2px dashed var(--gold-dark); }
/* A bundle (rpg/ui-listings.js plusHTML): what it gives along with its first, a line of chips across the row under it; and
   the request form's ＋ Add more rows (with them, the form is one column, so their pickers fit). */
.ls-plus { flex: 1 1 100%; margin: -2px 0 0; padding-left: 42px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ls-board .ls-plus small { display: inline; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.ls-plus .ls-price { font-size: 13px; padding-right: 7px; }
.ls-sell.has-plus { grid-template-columns: minmax(0, 1fr); }
.ls-sell.has-plus .mk-arrow { padding-top: 0; justify-self: center; transform: rotate(90deg); }
.ls-plus-row .ls-plus-x { flex: none; min-width: 0; padding: 0 9px; }
.ls-plus-add { align-self: flex-start; text-transform: none; letter-spacing: 0; }
/* The request form's two sides start level, so what you're looking for sits beside what you give (＋ Add more hangs under
   it), the ⇄ in the middle of their pickers. */
.ls-sell { align-items: start; }
@media (min-width: 521px) { .ls-sell:not(.has-plus) .mk-arrow { align-self: start; padding-top: 23px; } }
/* What its player is looking for in exchange: a strip under what's offered (beside it in a wide window), its label over
   the price and the button, gold for a swap. */
.ls-deal { flex: 1 1 250px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 5px 6px 6px 8px; border-radius: 7px; background: rgba(255, 255, 255, 0.04); border: 1px dashed #3a4c8a; }
.ls-want { flex: 1 0 100%; font-size: 12px; line-height: 1.2; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.ls-board li.swap .ls-deal { border-color: rgba(255, 210, 63, 0.45); background: rgba(255, 210, 63, 0.06); }
.ls-board li.swap .ls-want { color: var(--gold); }
.ls-price { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); line-height: 20px; font-size: 14px; white-space: nowrap; }
.ls-price b { color: var(--gold); font-variant-numeric: tabular-nums; }
.ls-btns { margin-left: auto; display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.ls-btns .btn { min-width: 76px; display: inline-flex; align-items: center; justify-content: center; }
.ls-short { font-style: normal; color: #ffc98a; }
.ls-h { margin: 12px 0 0; font-size: 14px; font-weight: 400; color: var(--gold); letter-spacing: 0.04em; }
.ls-sell > .btn { grid-column: 1 / -1; justify-self: center; display: inline-flex; align-items: center; justify-content: center; }
/* How many, before what: the request form's and an offer's number box (rpg/ui-listings.js). */
.mk-pick input { flex: none; width: 82px; min-width: 0; text-align: center; font: inherit; font-size: 16px; text-transform: none; letter-spacing: 0; color: #fff; background: #0b1440; border: 1px solid #3a4c8a; border-radius: 6px; padding: 4px; }
.mk-pick input[hidden] { display: none; }
/* The talk under a listing (rpg/ui-listings.js): the offers on yours, your offer on another's, and the offer or counter being
   written. A line waiting for your answer, and its listing, are edged in gold. */
.ls-talk { flex: 1 1 100%; display: grid; gap: 6px; }
.ls-bid, .ls-haggle { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 6px 8px; border-radius: 7px; background: rgba(255, 255, 255, 0.04); border: 1px solid #34468a; }
.ls-bid p { flex: 1 1 220px; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 15px; line-height: 1.3; }
.ls-bid p small { flex-basis: 100%; }
.ls-bid.ask { border-color: rgba(255, 210, 63, 0.75); background: rgba(255, 210, 63, 0.08); }
.ls-to { color: var(--muted); }
.ls-haggle { border-style: dashed; border-color: rgba(255, 210, 63, 0.55); }
.ls-haggle .ls-want { flex: 1 0 100%; color: var(--gold); }
.ls-haggle .mk-pick { flex: 1 1 240px; }
.ls-haggle small { flex-basis: 100%; font-size: 13px; line-height: 1.3; }
.ls-hint { color: var(--muted); }
.ls-board li.ask { border-color: rgba(255, 210, 63, 0.8); box-shadow: 0 0 10px rgba(255, 210, 63, 0.18); }
/* The listing a 📋 line's View in the Trade chat opened the window on (ui-listings.js focus): lit for a moment. */
.ls-board li.ls-focus { border-color: var(--green); animation: ls-focus 2.4s ease-out; }
@keyframes ls-focus { 0%, 40% { box-shadow: 0 0 0 3px rgba(95, 232, 111, 0.75); } 100% { box-shadow: 0 0 0 0 rgba(95, 232, 111, 0); } }
.ls-switch { margin: 0 0 8px; }
.ls-switch small { margin-left: 6px; opacity: 0.75; font-size: 12px; }
.modal .ls-answer { margin: 0 0 8px; padding: 6px 10px; border-radius: 8px; background: rgba(255, 210, 63, 0.1); border: 1px solid rgba(255, 210, 63, 0.5); color: #ffe9a8; font-size: 15px; }
.mk-count.ask { background: #ff6a3d; color: #fff; }
/* Opened away from the Marketplace (the 📋 chip): what works from here. */
.modal .mk-away { margin: 0 0 10px; padding: 7px 10px; border-radius: 8px; background: rgba(110, 170, 255, 0.1); border: 1px solid rgba(110, 170, 255, 0.45); color: #d6e4ff; font-size: 15px; line-height: 1.35; }
/* Taking part of a listing of materials: − parts +, what you give and get, then Buy or Swap. */
.ls-part .ls-step { flex: none; grid-column: auto; }
.ls-part .ls-step b { min-width: 28px; text-align: center; color: var(--gold); font-size: 17px; }
.ls-part .ls-want small { display: inline; color: var(--muted); letter-spacing: 0; text-transform: none; }
.ls-trade { flex: 1 1 260px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 15px; }
.ls-price small { color: var(--muted); font-size: 12px; }
/* A listing that asks for $ZAZA (rpg/ui-listings.js): the coin drawn smooth, its deal edged in the coin's blue, and the line
   under it while it's being paid for (zsale.js). */
.ls-price.zz img, .mk-lot img[src*="zaza-coin"], #lsPriceIcon[src*="zaza-coin"] { image-rendering: auto; border-radius: 50%; }
.ls-board li.zz .ls-deal { border-color: rgba(120, 200, 255, 0.55); background: rgba(120, 200, 255, 0.06); }
.ls-board .ls-zz { flex: 1 1 100%; margin: 0; font-size: 14px; line-height: 1.35; }
.ls-board .ls-zz:not(.xpb-msg) { color: #cfe6ff; }
#lsQuote .ls-hint { display: block; margin-top: 2px; font-size: 13px; }
/* Pokémon cards on the Offers tab (rpg/ui-listings.js): a card's listing with its photo and Collector Crypt value, the deal
   waiting for its card, the post form's two modes and the picker of your wallet's cards (card-trade.js). */
.ls-mode { margin: 6px 0 10px; }
.ls-board .ls-card { flex: none; width: 48px; height: 80px; object-fit: contain; border-radius: 4px; background: #0b1440; }
.ls-board .ls-card.none { display: grid; place-items: center; font-size: 28px; }
.ls-board .ls-cc { display: block; color: #cfe6ff; }
.ls-board .ls-cc b { color: var(--gold); }
.ls-board .ls-cc a { color: var(--gold); white-space: nowrap; }
/* The Offers tab's floor prices (rpg/ui-listings.js floorsHTML), as cards a bit like OpenSea's: the gems in three columns, one
   a kind, a row a grade, then the scrolls (and the gauntlet's stones). A card: the gem big on a dark panel (tinted by its kind),
   then its name with how many are up, the floor in $ZAZA a piece and the last sale (▲ green, ▼ red from the one before); the
   one picked outlined in gold. Under them, the one picked with its recent trades. */
.fl-wrap { margin: 0 0 10px; padding: 8px 10px 10px; border-radius: 10px; background: linear-gradient(180deg, #1a2663, #141e52); border: 1px solid #34468a; }
.fl-wrap > summary { cursor: pointer; color: var(--gold); font: 400 15px/1.3 var(--display); letter-spacing: 0.04em; }
.fl-wrap > summary small { font: 14px/1.3 var(--ui-font); color: #bcc5ea; letter-spacing: 0.02em; }
.fl-gems { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 8px 0 0; }
.fl-kind { align-self: end; font-size: 15px; font-weight: 400; text-align: center; letter-spacing: 0.04em; }
.fl-kind.sparkstone { color: #ffd23f; }
.fl-kind.guardstone { color: #8cc8ff; }
.fl-kind.lifestone { color: #7fe3a0; }
.fl-more { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 6px 0 0; }
.fl-more.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fl-tile { display: flex; flex-direction: column; min-width: 0; padding: 0; overflow: hidden; border-radius: 10px; background: #1d2a6c; border: 1px solid #2e3d74; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.fl-tile:hover { border-color: #5a6db8; }
.fl-tile.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 10px rgba(255, 210, 63, 0.25); }
.fl-art { display: grid; place-items: center; height: 58px; background: radial-gradient(circle at 50% 55%, rgba(255, 255, 255, 0.08), transparent 62%), #0a1238; }
.fl-art.k-sparkstone { background: radial-gradient(circle at 50% 55%, rgba(255, 210, 63, 0.2), transparent 62%), #0a1238; }
.fl-art.k-guardstone { background: radial-gradient(circle at 50% 55%, rgba(140, 200, 255, 0.2), transparent 62%), #0a1238; }
.fl-art.k-lifestone { background: radial-gradient(circle at 50% 55%, rgba(127, 227, 160, 0.2), transparent 62%), #0a1238; }
.fl-art .ri { width: 48px; height: 48px; }
.fl-tile.quiet .fl-art .ri { opacity: 0.55; }
.fl-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 5px 8px 6px; }
.fl-head { display: flex; align-items: center; gap: 4px; min-width: 0; }
.fl-head.has-own { flex-wrap: wrap; }
.fl-head.has-own .fl-name { flex-basis: 100%; }
.fl-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 400; line-height: 1.1; color: #f2f5ff; }
.fl-up { flex: none; padding: 0 5px; border-radius: 6px; background: #0a1238; border: 1px solid #34468a; color: #cfd8f0; font-size: 13px; font-style: normal; line-height: 15px; }
.fl-own { flex: none; padding: 0 5px; border-radius: 6px; background: rgba(66, 190, 104, 0.14); border: 1px solid rgba(95, 220, 143, 0.45); color: #8ff0ae; font-size: 12px; font-style: normal; line-height: 15px; white-space: nowrap; }
.fl-price { display: flex; align-items: center; gap: 3px; color: #fff; font: 400 13px/1.25 var(--display); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fl-price img { flex: none; width: 14px; height: 14px; }
.fl-tile.none .fl-price { color: #6f7aa6; }
.fl-last { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 1.2; color: #9aa6d6; }
.fl-last b { font-weight: 400; color: #e2e7ff; }
.fl-trend { font-style: normal; margin-left: 2px; }
.fl-trend.up { color: #5fdc8f; }
.fl-trend.down { color: #ff7a7a; }
.fl-pick { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; background: rgba(255, 210, 63, 0.07); border: 1px solid rgba(255, 210, 63, 0.5); }
.fl-pick-top { display: flex; align-items: center; gap: 10px; }
.fl-pick-top .ri { flex: none; width: 48px; height: 48px; }
.fl-pick-top > div { min-width: 0; }
.fl-pick-top p { margin: 2px 0 0; display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 14px; line-height: 1.35; color: #cfd8f0; }
.fl-pick-top p b { color: var(--gold); font-weight: 400; }
.fl-pick-top small { color: #bcc5ea; font-size: 12px; }
.modal .fl-h { margin: 10px 0 2px; color: var(--gold); font: 400 14px/1.3 var(--display); letter-spacing: 0.04em; }
.fl-h small { font: 13px/1.3 var(--ui-font); color: #bcc5ea; letter-spacing: 0.02em; }
.fl-hist { list-style: none; margin: 0; padding: 0; }
.fl-hist li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1px 8px; padding: 5px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 14px; line-height: 1.3; }
.fl-hist li:first-child { border-top: 0; }
.fl-ev { grid-row: span 2; min-width: 44px; padding: 1px 6px; border-radius: 6px; font-size: 13px; text-align: center; }
.fl-ev.ev-sale { background: rgba(61, 209, 126, 0.15); color: #7fe3a0; }
.fl-ev.ev-swap { background: rgba(140, 200, 255, 0.14); color: #9ac4ff; }
.fl-ev.ev-trade { background: rgba(190, 140, 255, 0.14); color: #cfb0ff; }
.fl-what { display: flex; flex-wrap: wrap; align-items: center; gap: 0 5px; min-width: 0; color: #e2e7ff; }
.fl-what b { color: var(--gold); font-weight: 400; }
.fl-what small { color: #9aa6d6; font-size: 13px; }
.fl-lot { display: inline-flex; align-items: center; gap: 3px; min-width: 0; }
.fl-lot .ri { width: 16px; height: 16px; }
.fl-when { align-self: start; color: #9aa6d6; font-size: 13px; white-space: nowrap; }
.fl-who { grid-column: 2 / 4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #9aa6d6; font-size: 13px; }
.fl-none { margin: 2px 0 0; color: #9aa6d6; font-size: 14px; }
.modal .ls-only { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 8px 0 0; font-size: 15px; color: #ffe9a8; }
.ls-only .btn { margin-left: auto; }
@media (max-width: 520px) {
  .fl-wrap { padding: 7px 7px 8px; }
  .fl-gems, .fl-more { gap: 5px; }
  .fl-more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fl-art { height: 54px; }
  .fl-info { padding: 4px 6px 5px; }
  .fl-name { font-size: 15px; }
  .fl-up { font-size: 12px; padding: 0 4px; }
  .fl-last { font-size: 12px; }
}
.ls-board li.cs-row .ls-deal { border-color: rgba(190, 140, 255, 0.55); background: rgba(190, 140, 255, 0.07); }
.pane-note.cs-insured { font-size: 13px; border-left: 3px solid rgba(190, 140, 255, 0.55); padding-left: 8px; }
.cs-insured a { color: var(--gold); }
.ls-any, .cs-icon { display: inline-flex; flex: none; align-items: center; }
.ls-any .ri + .ri { margin-left: -9px; }
.cs-icon .ri + .ri { margin-left: -12px; }
.cs-sell > .mk-side { grid-column: 1 / -1; }
.ls-btns .ls-cpay { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: #cfe6ff; }
.ls-cpay select { font: inherit; font-size: 13px; text-transform: none; letter-spacing: 0; color: #fff; background: #0b1440; border: 1px solid #3a4c8a; border-radius: 6px; padding: 4px 6px; max-width: 160px; }
.ls-bid.cs-deal small { flex-basis: 100%; }
.cs-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0; }
.cs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin: 6px 0 10px; }
.cs-card { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px; border-radius: 8px; border: 2px solid #34468a; background: #0b1440; color: #fff; font: inherit; cursor: pointer; text-align: center; }
.cs-card img { width: 60px; height: 100px; object-fit: contain; }
.cs-card b { font-size: 12px; line-height: 1.25; font-weight: 400; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cs-card small { font-size: 12px; color: var(--muted); }
.cs-card.on { border-color: var(--gold); box-shadow: 0 0 8px rgba(255, 210, 63, 0.35); }
.cs-card:disabled { opacity: 0.5; cursor: default; }
.cs-noimg { font-size: 40px; line-height: 100px; }
/* The Marketplace's rare goods (goods-shop.js): their rows in its window, and coloured tiles in the Bag and View inventory,
   each in its own colours (--g1 top, --g2 bottom: rpg/goods.js tint). */
.gd-row .gd-ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; border: 2px solid #0b1022; background: linear-gradient(180deg, var(--g1), var(--g2)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), inset 0 -3px 0 rgba(0, 0, 0, 0.2); }
.gd-row img, .gd-tile img { width: 32px; height: 32px; image-rendering: pixelated; }
.market-goods li.gd-row.owned { border-color: var(--g1); background: linear-gradient(90deg, color-mix(in srgb, var(--g2) 32%, transparent), rgba(3, 10, 44, 0.55) 70%); }
.market-goods li.gd-row > .gd-buy { flex: none; flex-direction: row; align-items: center; gap: 8px; }
.gd-buy > span { display: grid; gap: 1px; text-align: right; }
.gd-buy > span b { color: #fff; font-size: 15px; white-space: nowrap; }
.gd-buy > span small { font-size: 12px; }
.gd-buy .btn { min-width: 84px; }
.btn.gd-yours, .btn.gd-yours:disabled { opacity: 1; background: rgba(110, 230, 140, 0.16); border-color: #3fae6a; color: #b8f5c4; }
/* A Forge kit's materials under its words (goods-shop.js kitMatsHTML): each one's Bag icon and how many, wrapping. */
.gd-kit { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 3px; }
.gd-kit > span { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; color: #eef2ff; white-space: nowrap; }
.gd-kit i { font-style: normal; font-weight: 400; color: var(--muted); }
.gd-row .gd-kit img { width: 16px; height: 16px; }
.market-goods small.gd-kit-h { margin-top: 2px; color: #ffe08a; font-weight: 700; }
.gd-list + .pane-note, .gd-list ~ .xpb-pay { margin-top: 8px; }
.modal p.gd-area { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; font-size: 13px; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; color: #c8d2f0; }
.gd-area > span { font-size: 14px; }
.gd-area small { margin-left: 2px; font-size: 12px; letter-spacing: 0.02em; text-transform: none; color: var(--muted); }
.gd-area:first-child { margin-top: 4px; }
.gd-area + .gd-list { margin-top: 4px; }
/* Rare goods you own: tiles all the same size, three side by side in the Bag (a long name wraps to a second line), kept
   small (owner, 2026-10-14: "make these buttons a bit smaller"). A tap walks you to them at the Marketplace. Where three
   in a row leave too little room for the icon beside the name (a computer's side panel, 244 px), the icon sits above it,
   both centred, so the names keep their size (owner, 2026-10-15: "make them all fit nicely side by side and the right
   font size too"). */
.gd-bag { container: gd-bag / inline-size; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin: 5px 0; }
.gd-tile {
  display: flex; align-items: center; gap: 4px; min-width: 0; min-height: 30px; padding: 1px 6px 1px 1px; border-radius: 8px; border: 2px solid #0b1022;
  background: linear-gradient(180deg, var(--g1), var(--g2)); color: #fff; font: 400 11.5px/1.05 var(--display); letter-spacing: 0.02em; cursor: pointer; text-align: left;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), inset 0 -2px 0 rgba(0, 0, 0, 0.18), 0 2px 0 #000a2e; text-shadow: 0 1px 0 #0b1022, 0 0 3px rgba(11, 16, 34, 0.8);
}
.gd-tile img { flex: none; width: 22px; height: 22px; border-radius: 6px; background: rgba(255, 255, 255, 0.24); }
.gd-tile span { display: block; translate: 0 0.06em; }
.gd-tile:hover { filter: brightness(1.08); }
.gd-tile:active { transform: translateY(1px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), inset 0 -3px 0 rgba(0, 0, 0, 0.18), 0 1px 0 #000a2e; }
@container gd-bag (max-width: 320px) {
  .gd-tile { flex-direction: column; justify-content: center; gap: 3px; min-height: 0; padding: 4px 3px 5px; font-size: 12px; line-height: 1.1; text-align: center; overflow-wrap: anywhere; }
  .gd-tile span { translate: none; }
}
@media (max-width: 520px) { .market-goods li.gd-row > .gd-buy { flex-direction: column; align-items: flex-end; gap: 4px; } .gd-buy .btn { min-width: 76px; } }

/* ---------------------------------------------------------------- a phone turned sideways (layout.js SIDEWAYS) */
/* Short and wide: the phone layout, with the chat as a column down the right edge instead of along the bottom (there it
   covered two thirds of the map). The minimap and its buttons sit just left of the chat. The notch or Dynamic Island and
   the home indicator are on the sides and bottom now, so everything stays inside the safe area. Fights keep the desktop
   bar (message left, commands right): the upright phone bar covered the monster. */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 561px) {
  :root, html.standalone, html.android, html.android.standalone, html.standalone.ios-short {
    --sw-l: env(safe-area-inset-left, 0px); --sw-r: env(safe-area-inset-right, 0px); --sw-b: env(safe-area-inset-bottom, 0px);
    --sw-chat: clamp(210px, calc(336px + var(--chat-dw, 0px)), min(380px, 44vw)); --sw-chat-edge: var(--sw-chat);
    --mobile-top-safe: 0px; --mobile-panel-top: max(8px, env(safe-area-inset-top, 0px)); --mobile-chat-bottom: 0px;
    --mobile-chat-input-safe: var(--sw-b); --mobile-chat-open-bottom: max(8px, var(--sw-b)); --mobile-chat-clearance: 8px;
  }
  /* The ZAZA WORLD box open: a chat made wide (Settings → Chat width) gives up just enough for the box's two columns, 400 px
     beside the minimap's 172 (owner, 2026-10-11: the whole box fits, with the chat), never under its narrowest, 210 px. */
  html:has(#hudPanel:not(.is-minimized)) { --sw-chat-edge: min(var(--sw-chat), max(210px, calc(100vw - 572px - max(14px, var(--sw-l))))); }
  html.android .hud::after, html.standalone .hud::after { display: none; }
  .chatbox, html.dialog-open .chatbox { left: auto; top: 0; right: 0; bottom: 0; width: var(--sw-chat-edge); height: auto; padding: env(safe-area-inset-top, 0px) 0 0; border-width: 0 0 0 2px; border-radius: 0; overflow: hidden; }
  /* An NPC talking: the dialogue box sits at the bottom of the column, with the map showing above it. */
  html.dialog-open .chatbox { top: auto; max-height: 100%; }
  /* In that column, the portrait sits small beside the name and the words take the column's whole width under it (owner,
     2026-10-15, with a sideways shot of the Lumbridge guard's box: beside the 60 px portrait, in a column 210 px wide less
     the notch's room, the words had about 50 px and broke inside words, "the npc chats is poorly formated"). A long line
     scrolls inside the box. The right padding keeps the notch or the screen's corner clear; the left one borders the map.
     The name's 15 px fits the longest one-word name, Doomsayer, beside the portrait in the narrowest column. */
  html.dialog-open .dialog { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-content: start; align-items: stretch; gap: 8px; max-height: calc(100dvh - env(safe-area-inset-top, 0px)); padding: 12px max(14px, calc(4px + var(--sw-r))) calc(12px + var(--sw-b)) 10px; }
  .dialog-body { display: contents; }
  .dialog canvas { width: 40px; height: 44px; }
  .dialog-name { align-self: center; min-width: 0; font-size: 15px; line-height: 1.1; text-align: left; overflow-wrap: break-word; }
  .dialog-name small { display: block; margin: 2px 0 0; }
  .dialog-text, .dialog-links, .dialog-next { grid-column: 1 / -1; }
  .dialog-text { min-height: 0; overflow-y: auto; font-size: 16px; line-height: 1.25; text-align: left; overflow-wrap: break-word; }
  .dialog-links, .dialog-links:has(#dialogLink2:not([hidden])) { flex-direction: column; flex-wrap: nowrap; gap: 6px; } /* links one under the other */
  .dialog-link, .dialog-links:has(#dialogLink2:not([hidden])) .dialog-link { padding: 6px 10px; font-size: 14px; line-height: 1.2; white-space: normal; text-align: center; }
  .dialog-next { justify-self: start; }
  /* Two rows of tabs on a grid of six equal cells (owner, 2026-10-07: the panel icons were "way too tight", "move some of
     them right of chat, and make that one less wide"): All · Chat ▾ (two cells) · two panel icons · –, then the other six
     icons. Their bar is display: contents, so the icons sit in the grid themselves and both rows share one width. */
  .chat-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px 2px; }
  .chat-tabs .chat-side-tabs { display: contents; }
  .chat-tabs .chat-channel { grid-column: span 2; }
  .chat-tabs .chat-toggle { grid-area: 1 / 6; margin-right: 5px; }
  /* 👥 Who's online takes a cell in the top row: seven columns, the six icons under it. */
  .chat-tabs:has(.chat-crowd:not([hidden])) { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .chat-tabs:has(.chat-crowd:not([hidden])) .chat-toggle { grid-area: 1 / 7; }
  .chat-tabs > button, .chat-tabs .chat-side-tabs button { width: auto; height: 40px; min-height: 40px; }
  .chat-channels { top: 44px; }
  .chat-log { font-size: 16px; }
  .chat-input { gap: 6px; padding: 6px 8px calc(8px + var(--mobile-chat-input-safe)); }
  .chat-input input { min-width: 0; }
  .chat-send { flex: none; padding-left: 10px; padding-right: 10px; }
  .chat-open, html.standalone .chat-open { right: calc(max(8px, var(--sw-r)) + 6px); bottom: calc(var(--mobile-chat-open-bottom) + 6px); min-width: 116px; min-height: 52px; }
  .hud-panel { left: max(14px, var(--sw-l)); }
  .hud-panel.is-minimized { left: max(14px, var(--sw-l)); min-width: 148px; }
  .hud-panel.is-minimized .hud-panel-head { gap: 8px; padding-right: 6px; }
  .hud-panel.is-minimized .panel-world { display: none; }
  .hud-panel.is-minimized .hm-mini { display: inline-flex; margin-left: 0; }
  /* The minimap's ring (+ and − and 🏠 up its right side) reaches 37 px past its box: 40 px from the chat it ends 3 px
     short of it; with the chat folded, 36 px in from the safe area's edge (44 px from a screen with none). + and − ride it
     there too (the zoom box sits on the box's top right corner). */
  .hud-tr { right: calc(var(--sw-chat-edge) + 40px); }
  .touch-zoom { right: calc(var(--sw-chat-edge) + 40px); }
  html.chat-collapsed .touch-zoom { right: calc(max(8px, var(--sw-r)) + 36px); }
  .hud > .online-wrap { left: calc((max(8px, var(--sw-l)) + 100% - var(--sw-chat-edge) - 8px) / 2); } /* between the box and the run button */
  .side { left: var(--sw-l); right: var(--sw-chat-edge); bottom: max(8px, var(--sw-b)); }
  html.chat-collapsed .hud-tr { right: calc(max(8px, var(--sw-r)) + 36px); }
  html.chat-collapsed .hud > .online-wrap { left: calc((max(8px, var(--sw-l)) + 100% - max(8px, var(--sw-r))) / 2); }
  html.chat-collapsed .side { right: var(--sw-r); }
  /* Banners and bars centre on the map, left of the chat. */
  .lease-card { left: calc(50% + (var(--sw-l) - var(--sw-chat-edge)) / 2); max-width: calc(100vw - var(--sw-chat-edge) - var(--sw-l) - 24px); }
  .area-banner { --ab-l: calc(var(--sw-l) + 12px); --ab-r: calc(var(--sw-chat-edge) + 12px); bottom: max(10px, var(--sw-b)); }
  .hud:has(> .dpad:not([hidden])) .area-banner { --ab-l: calc(max(8px, var(--sw-l)) + 140px); } /* pad 4 + 128 px, + 8 */
  html.chat-collapsed .area-banner { --ab-r: calc(var(--sw-r) + 12px); }
  .hud:has(> .dpad.right:not([hidden])) .area-banner { --ab-l: calc(var(--sw-l) + 12px); --ab-r: calc(var(--sw-chat-edge) + 144px); } /* a pad on the right: 8 + 128 px, + 8 */
  html.chat-collapsed .hud:has(> .dpad.right:not([hidden])) .area-banner { --ab-r: calc(max(8px, var(--sw-r)) + 266px); } /* beside the Chat button: 130 + 128 px, + 8 */
  .gather-bar { top: auto; bottom: max(10px, var(--sw-b)); left: calc(50% + (var(--sw-l) - var(--sw-chat-edge)) / 2); width: auto; max-width: calc(100vw - var(--sw-chat-edge) - var(--sw-l) - 24px); }
  .boost-bar { bottom: calc(max(10px, var(--sw-b)) + 44px); }
  .ride-bar { bottom: calc(max(10px, var(--sw-b)) + 88px); }
  html.chat-collapsed :is(.lease-card, .gather-bar) { left: 50%; max-width: calc(100vw - 24px); }
  .invites { top: auto; bottom: max(10px, var(--sw-b)); right: calc(var(--sw-chat-edge) + 8px); }
  /* "Updated · Reload" at the top of the chat column, under its tabs (owner, 2026-10-07: over the ZAZA WORLD box and the
     Character tab it hid ZAZA's name and yours), or over the Chat button while the chat is folded. */
  .update-note { left: auto; right: calc(var(--sw-chat-edge) / 2); top: calc(env(safe-area-inset-top, 0px) + 96px); transform: translateX(50%); max-width: calc(var(--sw-chat-edge) - 16px); }
  html.chat-collapsed .update-note { right: calc(max(8px, var(--sw-r)) + 6px); top: auto; bottom: calc(var(--mobile-chat-open-bottom) + 66px); transform: none; }
  body:has(.chat-channels.open) > .update-note { visibility: hidden; } /* the channel list opens under it */
  .trade { left: max(8px, var(--sw-l)); right: calc(var(--sw-chat-edge) + 8px); width: auto; transform: none; max-height: calc(100dvh - 16px); }
  .modal-backdrop { padding: var(--mobile-panel-top) max(8px, var(--sw-r)) max(8px, var(--sw-b)) max(8px, var(--sw-l)); }
  /* A window never slides sideways under a finger (owner, 2026-10-11: "on mobile on landscape, make sure you cant slide the
     pop up to the sides"): it scrolls up and down only, and anything a few pixels too wide is cut at its edge. */
  .modal { overflow-x: hidden; overscroll-behavior-x: none; }
  .modal.modal-docs { padding-left: max(8px, var(--sw-l)); padding-right: max(8px, var(--sw-r)); }
  /* Fights: the desktop bar, sized like the phone one, clear of the notch. */
  .bt-bar { grid-template-columns: minmax(0, 1fr) minmax(320px, 50%); gap: 8px; padding: 8px max(10px, var(--sw-r)) calc(8px + var(--sw-b)) max(10px, var(--sw-l)); }
  .bt-msg { min-height: 0; padding: 9px 12px 13px; border-width: 2px; }
  .bt-msg p { font-size: 18px; }
  .bt-timer { bottom: 5px; height: 4px; }
  /* Match portrait: the pills sit above, not against, the message text. */
  .bt-sos-row { top: -19px; right: 8px; gap: 4px; }
  .bt-sos { height: 26px; padding: 0 10px 0 3px; gap: 5px; font-size: 13px; }
  .bt-sos b { width: 19px; height: 19px; font-size: 15px; }
  .bt-menu { min-height: 0; gap: 6px; }
  .bt-menu.list { max-height: calc(100dvh - 190px); }
  .bt-menu button { min-height: 40px; padding: 5px 10px 5px 22px; border-width: 2px; gap: 7px; }
  .bt-menu button b { font-size: 17px; }
  .bt-menu button img { width: 22px; height: 22px; }
  .bt-menu button small { font-size: 12px; }
  .bt-menu.main.five button { grid-template-columns: auto auto auto; justify-content: center; gap: 4px; padding: 0 5px; }
  .bt-menu.main.five button::before { content: none; }
  .bt-menu.main.five button img { width: 20px; height: 20px; }
  .bt-menu.main.five button b { font-size: 16px; }
  .bt-menu.main.five .el-badge { width: 16px; height: 16px; font-size: 10px; }
  .bt-foes { left: max(10px, var(--sw-l)); top: 8px; width: min(280px, 40vw); }
  .bt-me { right: max(10px, var(--sw-r)); top: 8px; width: min(300px, 42vw); }
  .bt-allies { right: max(10px, var(--sw-r)); top: 104px; }
  #battle.team .bt-foes { width: min(260px, 36vw); }
  #battle.team .bt-me, #battle.team .bt-allies { width: min(280px, 38vw); }
  #battle.team .bt-allies { top: 96px; }
  .gba { padding: 5px 10px 6px; }
  .gba.big .gba-pic { width: 46px; height: 46px; }
  .gba-top b { font-size: 16px; }
  .gba-num { font-size: 15px; }
  /* The Character tab, a wide pane here (owner, 2026-10-07: "not very well formated for landscape specially the weapons
     and stats", then 2026-10-08: "putting the professions above the gear button, and on the right hand side of box.. and
     on the left the 4 weapons/shield etc. both above the button"): you beside your stats, then two columns (rpg/ui-rpg.js
     renderTab .adv-cols), your gear one slot a row | your professions and Next, with the Gear button closing the right
     column, level with your last gear slot (owner, 2026-10-09: "under the stats on the right area, instead of full width").
     A slot with a picker shows just the picker under its name (the picker says what you wear). */
  .adv-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 14px; margin-bottom: 8px; }
  .adv-top > .adv-head, .adv-top > .adv-stats { margin: 0; }
  .adv-stats span { min-width: 62px; padding: 3px 8px; }
  .adv-stats b { font-size: 18px; }
  .adv-stats .btn { margin-left: 4px; align-self: stretch; }
  .adv-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; align-items: start; }
  .adv-gear { display: grid; gap: 6px; }
  .adv-gear .slot { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 8px; margin: 0; padding: 6px 8px; }
  .adv-gear .slot:has(> select) > :first-child { grid-row: span 2; }
  .adv-gear .slot:has(> select) > div > b { display: none; }
  .adv-gear .slot select { grid-column: 2; width: 100%; max-width: none; min-height: 28px; }
  .adv-skills { display: flex; flex-direction: column; align-self: stretch; }
  .adv-skills > .sub-title { margin-top: 0; }
  .adv-skills > .adv-cw { margin: auto 0 0; }
  .adv-profs { display: grid; gap: 4px; }
  .adv-profs .prof { margin: 0; }
  /* The ZAZA WORLD box, opened (owner, 2026-10-07: "have a landscape version, later is wider and less height so it doesnt
     overlap the d pad", then "not yet optimized at all for landscape ... make it all fit nicely and well balanced"): as
     wide as the room left of the minimap's buttons, up to 400 px (owner, 2026-10-08: "just enough to fit everything"),
     down to the bottom with its XP row and card hunt clock under it: the D-pad steps aside while it's open (ui.js showDpad;
     owner, 2026-10-11: "hide the d pad temporary, so the entire zaza world window fits.. even with the chat"). A
     grid: the title bar, then two columns once both fit (380 px inside, the line the container queries draw): $ZAZA with
     Buy under his chart (#walletBuys, ui.js dockBuys) | your wallet, which scrolls if it's longer still. ZAZA's chart grows
     into spare height and gives it back on a short screen. The title shows ZAZA World's icon (owner: "that zaza world can include the icone on the title"). */
  .hud-panel:not(.is-minimized) {
    --hp-max: calc(100dvh - var(--mobile-panel-top) - max(8px, var(--sw-b)) - 8px - var(--clock-space, 0px) - var(--xp-under-space, 0px));
    width: clamp(200px, calc(100vw - var(--sw-chat-edge) - 172px - max(14px, var(--sw-l))), 400px); max-height: var(--hp-max);
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); grid-template-rows: auto minmax(0, 1fr) auto; align-items: start; container-type: inline-size;
  }
  html.chat-collapsed .hud-panel:not(.is-minimized) { width: clamp(200px, calc(100vw - max(8px, var(--sw-r)) - 164px - max(14px, var(--sw-l))), 400px); }
  .hud-panel .panel-coin { display: block; width: 20px; height: 20px; border-radius: 4px; }
  .hud-panel .panel-world { font-size: 14px; } /* room enough here for the title's size and roomier links */
  .hud-panel:not(.is-minimized) > .hud-panel-head { grid-column: 1 / -1; }
  .hud-panel:not(.is-minimized) > :is(.zaza-card, .wallet-card, .wallet-dock) { min-width: 0; }
  .hud-panel:not(.is-minimized) > .wallet-card { max-height: max(44px, calc(var(--hp-max) - 40px - 78px)); overflow-y: auto; overscroll-behavior: contain; }
  .wallet-dock:empty { display: none; }
  @container (min-width: 380px) {
    .hud-panel:not(.is-minimized) > .zaza-card { grid-area: 2 / 1; align-self: stretch; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
    .hud-panel > .zaza-card { gap: 5px; }
    .hud-panel > .zaza-card .zaza-charts { display: contents; } /* both boxes in ZAZA's column itself, where the chart gives first: */
    .hud-panel > .zaza-card .zaza-chart { flex: 0 1 54px; height: auto; min-height: 44px; } /* 54 → 44 px, then ZAZA scrolls */
    .hud-panel > .zaza-card .players-stack { height: 30px; }
    .hud-panel > .zaza-card .players-heading { flex-wrap: wrap; }
    .hud-panel > .wallet-dock { grid-area: 3 / 1; display: flex; flex-direction: column; gap: 4px; padding: 0 9px 7px 5px; }
    .hud-panel:not(.is-minimized) > .wallet-card { grid-area: 2 / 2 / 4; align-self: stretch; min-height: 0; max-height: none; border-top: 0; border-left: 1px solid #0b1022; box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.06); }
    .hud-panel:not(.is-minimized) > .wallet-card:not(.connected) { justify-content: center; } /* Connect wallet, level with ZAZA */
    .hud-panel > .wallet-card .wallet-verify { padding: 4px 5px; font-size: 13px; } /* "Sign in: holder badge and lands" on one line */
    .hud-panel > :is(.wallet-card, .wallet-dock) .wallet-buys button { height: 44px; padding: 2px 1px; gap: 2px; } /* icon and word both inside */
    .hud-panel > :is(.wallet-card, .wallet-dock) .xpb-buys button { height: 34px; padding: 3px 1px; gap: 3px; } /* compact boost controls */
    .hud-panel > :is(.wallet-card, .wallet-dock) .wb-packs img { width: 22px; height: 22px; }
  }
  /* One column (a small phone, or a wide chat): the chart beside ZAZA's name, his level bar under both. */
  @container (max-width: 379.98px) {
    .hud-panel > .zaza-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 8px; }
    .hud-panel > .zaza-card .zaza-live { display: none; }
    .hud-panel > .zaza-card .zaza-chart { height: 46px; }
    .hud-panel > .zaza-card .zaza-lv { grid-column: 1 / -1; }
    .hud-panel > .zaza-card .zaza-act { grid-column: 1 / -1; }
  }
}
.mk-more { display: block; color: #a9cbff; font-size: 13px; }

/* ---------------------------------------------------------------- on-screen D-pad (Settings, dpad.js) */
/* Bottom left: above the panel tabs on desktop, above the chat on an upright phone, in the map's corner sideways.
   A joystick (owner, 2026-10-12, on a picture of one): a thin see-through white ring and a white knob that follows the
   thumb (dpad.js knobAt) and slides back to the middle when it lets go. A faint dark edge keeps both on snow and sand. */
.dpad {
  position: absolute; left: 16px; bottom: 66px; z-index: 4; width: 140px; height: 140px; box-sizing: border-box; border-radius: 50%;
  background: rgba(8, 12, 32, 0.12); border: 2px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.2); opacity: 0.9; cursor: pointer;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
.dpad[hidden] { display: none; }
.dpad.held { border-color: rgba(255, 255, 255, 0.72); opacity: 1; }
.dpad .dp-knob {
  position: absolute; inset: 0; margin: auto; width: 46%; height: 46%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.86), rgba(236, 240, 250, 0.7));
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14), 0 3px 10px rgba(0, 0, 0, 0.3); transition: transform 0.12s ease-out;
}
.dpad.held .dp-knob { transition: none; }
.dpad[data-dir] .dp-knob { background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.94), rgba(240, 243, 252, 0.8)); }
@media (prefers-reduced-motion: reduce) { .dpad .dp-knob { transition: none; } }
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (min-width: 561px) {
  .dpad { left: 10px; bottom: calc(var(--mobile-chat-clearance) + 4px); width: 128px; height: 128px; }
  html.chat-collapsed .dpad { bottom: calc(max(var(--mobile-chat-open-bottom), env(safe-area-inset-bottom, 0px)) + 12px); }
}
@media (orientation: landscape) and (max-height: 500px) and (min-width: 561px) {
  .dpad, html.chat-collapsed .dpad { left: calc(max(8px, var(--sw-l)) + 4px); bottom: calc(max(8px, var(--sw-b)) + 4px); width: 128px; height: 128px; }
}
/* Settings → D-pad side: Right (dpad.js place; owner, 2026-10-15: "can we add a setting to allow to move the d-pad
   joystick to the other side ?"). The same pad, mirrored: on a computer left of the chat (the squad chat steps left of
   it), on an upright phone bottom right over the chat, sideways left of the chat column (the squad chat and invites
   step left of it). With the chat folded it keeps clear of the 💬 Chat button in that corner: above it on a computer
   and an upright phone, beside it sideways. On a phone the quest, Daily, 𝕏 and Camino trackers cross to the left, under
   the ZAZA WORLD box (ui.js placeTrackers): one under the other after its XP row and clock, as wide as they are. */
.hud-under > .qt-row { order: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: max-content; pointer-events: none; }
.hud-under > .qt-row :is(a, button) { pointer-events: auto; }
.hud-under > .qt-row .dt-row { justify-content: flex-start; }
@media (min-width: 761px) and (min-height: 501px) {
  .dpad.right, .hud:has(#side > .hero-xp:not([hidden])) .dpad.right { left: auto; right: calc(min(480px, 100vw - 300px) + 28px); bottom: 16px; }
  html.chat-collapsed .dpad.right, html.chat-collapsed .hud:has(#side > .hero-xp:not([hidden])) .dpad.right { right: 16px; bottom: 66px; }
}
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (min-width: 561px) {
  .dpad.right { left: auto; right: 10px; }
  html.chat-collapsed .dpad.right { bottom: calc(max(var(--mobile-chat-open-bottom), env(safe-area-inset-bottom, 0px)) + 60px); }
}
@media (orientation: landscape) and (max-height: 500px) and (min-width: 561px) {
  .dpad.right { left: auto; right: calc(var(--sw-chat-edge) + 8px); }
  html.chat-collapsed .dpad.right { left: auto; right: calc(max(8px, var(--sw-r)) + 130px); bottom: calc(max(8px, var(--sw-b)) + 4px); }
  .hud:has(> .dpad.right:not([hidden])) .invites { right: calc(var(--sw-chat-edge) + 144px); }
}

/* ---------------------------------------------------------------- the XP bar (xp-bar.js) */
/* Your level and the way to the next one, always on screen (Buszok: "i need xp bar back sir, grinding blind is hard"),
   in the Character tab's blue. A computer: a row of the bottom-left panel, over its tabs (the D-pad sits over both).
   Phones: a compact row under ZAZA World, above the drop timer, in either orientation. */
.hero-xp { display: flex; align-items: center; gap: 6px; width: 100%; box-sizing: border-box; padding: 5px 8px 1px; border: 0; background: none; color: #fff; font: inherit; cursor: pointer; }
.hero-xp[hidden] { display: none; }
.hero-xp .hx-lv { flex: none; font: 400 13px/1 var(--display); color: var(--gold); white-space: nowrap; }
.hero-xp .hx-track { flex: 1; min-width: 0; height: 8px; box-sizing: border-box; border-radius: 4px; background: #0a102a; border: 1px solid #000; overflow: hidden; }
.hero-xp .hx-fill { display: block; width: 0; height: 100%; background: linear-gradient(180deg, #9fe0ff, #3a8ad8); transition: width 0.4s ease; }
.hero-xp .hx-pct { flex: none; min-width: 28px; text-align: right; font-size: 12px; font-weight: 700; line-height: 1; color: #9fe0ff; }
.hero-xp:hover .hx-track { border-color: #9fe0ff; }
.hud:has(#side > .hero-xp:not([hidden])) .dpad { bottom: 84px; } /* a computer: the pad stays over the panel and its new row */
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (min-width: 561px) {
  /* Let a long countdown widen the shared stack, keeping both edges aligned. */
  /* Phone XP strip: dock it to the ZAZA WORLD panel instead of floating as a separate pill. The two read as one box (owner,
     2026-10-12: "the side edges dont fit in well"): the panel's bottom corners go square and it draws its inner lines on
     the top and sides only (folded, the title bar's blue tint moves under them, so they keep their colour), and the strip
     carries the same lines (gold for a holder) down its sides and round its bottom, under a faint gold rule like the title
     bar's. */
  .hud-panel:has(> .hud-under > .hero-xp:not([hidden])) { --hp-line: var(--edge-light); border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: inset 0 1px 0 var(--hp-line), inset 1px 0 0 var(--hp-line), inset -1px 0 0 var(--hp-line), inset 0 3px 0 #141d40, inset 3px 0 0 #141d40, inset -3px 0 0 #141d40, 0 6px 18px rgba(0, 0, 0, 0.45); }
  .hud-panel.holder:has(> .hud-under > .hero-xp:not([hidden])) { --hp-line: var(--gold); }
  .hud-panel.is-minimized:has(> .hud-under > .hero-xp:not([hidden])) { background: linear-gradient(180deg, rgba(29, 75, 255, 0.32), rgba(29, 75, 255, 0.08)), linear-gradient(180deg, var(--stone-2), var(--stone)); }
  .hud-panel.is-minimized:has(> .hud-under > .hero-xp:not([hidden])) .hud-panel-head { background: none; } /* its blue tint lies under the lines, not over them */
  .hud-panel:has(> .hud-under > .hero-xp:not([hidden])) > .hud-under { top: calc(100% - 1px); min-width: 0; }
  .hud-under > .hero-xp { height: 22px; flex: none; padding: 0 6px; gap: 5px; border: 2px solid var(--edge-dark); border-top: 0; border-radius: 0 0 6px 6px; background: linear-gradient(180deg, var(--stone), #182448); box-shadow: inset 1px 0 0 var(--hp-line), inset -1px 0 0 var(--hp-line), inset 0 -1px 0 var(--hp-line), inset 0 1px 0 rgba(255, 210, 63, 0.28), inset 3px 0 0 #141d40, inset -3px 0 0 #141d40, inset 0 -3px 0 #141d40, 0 2px 4px #0006; }
  /* The countdown belongs to the joined Level/XP card: leave a 2 px seam, not the stack's generic 6 px gap. */
  .hud-under > .hero-xp + #huntPill { margin-top: -4px; }
  .hud-under > .hero-xp .hx-lv { min-width: 28px; font-size: 12px; text-align: center; } /* under ZAZA's ring, the bar starting where the words do */
  .hud-under > .hero-xp .hx-pct { min-width: 25px; font-size: 11px; }
  .hud-under > .hero-xp .hx-track { height: 7px; }
  .hud-panel:has(.hero-xp:not([hidden])) { --xp-under-space: 28px; }
}

/* ZAZA on X: the side panel's X tab (xposts-ui.js), and the chat line about a new post. */
.side-tabs button.has-new, .chat-side-tabs button.has-new { position: relative; }
.side-tabs button.has-new::after { content: ""; position: absolute; top: 3px; right: 3px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px #141d40; }
.xp-top { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.xp-top .pane-title { flex: 1; min-width: 0; margin: 0; gap: 6px; white-space: nowrap; }
.xp-top .pane-title small { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Connected: your X behind a round button in the corner (xposts-ui.js acctHTML); ▾ opens the boxes under the title. */
.xp-acct { flex: none; display: inline-flex; align-items: center; gap: 2px; padding: 2px 6px 2px 2px; border-radius: 999px; background: #101a44; border: 1px solid #2e3d74; color: var(--muted); cursor: pointer; }
.xp-acct:hover, .xp-acct.open { border-color: #4a5ea8; color: var(--text); }
.xp-acct img, .xp-acct span { display: block; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; box-sizing: border-box; border: 2px solid var(--gold); background: var(--navy-800); }
.xp-acct span { display: grid; place-items: center; border-color: #2e3d74; color: var(--text); font-size: 15px; line-height: 1; }
.xp-acct i { font-style: normal; font-size: 12px; line-height: 1; transition: transform .15s; }
.xp-acct.open i { transform: rotate(180deg); }
.xp-me { display: grid; gap: 6px; margin: 0 0 8px; padding: 8px; border-radius: 6px; background: #101a44; border: 1px solid #2e3d74; }
.xp-me p { margin: 0; font-size: 15px; line-height: 1.3; }
.xp-me.is-linked { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.xp-me.is-linked span { font-size: 15px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xp-me.is-linked b { color: var(--text); font-weight: 400; }
.xp-me .xp-off { padding: 4px 8px; font-size: 14px; }
.xp-me-note { display: block; font-size: 14px; color: var(--muted); line-height: 1.3; }
/* Show my X picture (xposts-ui.js picHTML): your X profile picture as your picture in the World (world-server/xpics.mjs). */
.xp-pic { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; align-items: start; margin: 0 0 8px; padding: 8px; border-radius: 6px; background: #101a44; border: 1px solid #2e3d74; }
.xp-pic.is-on { border-color: #4a5ea8; }
.xp-pic-av { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold); background: var(--navy-800); }
.xp-pic-av.empty { display: grid; place-items: center; border-color: #2e3d74; color: var(--muted); font-size: 20px; line-height: 1; }
.xp-pic-main p { margin: 0 0 6px; font-size: 15px; line-height: 1.3; }
.xp-pic-main b { color: var(--text); font-weight: 400; }
.xp-pic-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.xp-pic-btns .btn { padding: 4px 8px; font-size: 14px; }
.hp-xpic { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; vertical-align: -5px; margin-right: 8px; border: 2px solid var(--gold); background: var(--navy-800); }
.online-player img:not(.pixel) { image-rendering: auto; } /* photos (X, FOMO) scale smoothly; character faces stay pixel-sharp */
.xp-msg { margin: 0 0 8px; padding: 6px 8px; border-radius: 6px; font-size: 15px; line-height: 1.3; background: #0f2a1a; border: 1px solid #2f7a45; color: #c8f5d0; }
.xp-msg.is-error { background: #2a1016; border-color: #8a2a36; color: #ffd0d4; }
.xp-msg a { color: var(--gold); }
.xp-msg .btn { display: inline-block; margin-top: 4px; padding: 3px 10px; font-size: 14px; color: #fff; text-decoration: none; }
.xp-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.xp-post { padding: 8px; border-radius: 6px; background: #0d1535; border: 1px solid #243263; }
.xp-head { display: flex; align-items: center; gap: 6px; }
.xp-av { width: 28px; height: 28px; border-radius: 50%; flex: none; }
.xp-who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.05; }
.xp-who b { font-family: var(--display); font-weight: 400; font-size: 14px; color: #fff; }
.xp-who small { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xp-open { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 5px; color: var(--muted); text-decoration: none; font-size: 15px; }
.xp-open:hover { color: #fff; background: #1c2750; }
.xp-text { margin: 6px 0 0; font-size: 16px; line-height: 1.25; white-space: pre-line; overflow-wrap: anywhere; color: var(--text); }
.xp-media { position: relative; display: block; margin-top: 6px; border-radius: 6px; overflow: hidden; border: 1px solid #243263; background: #070b1c; }
.xp-media img { display: block; width: 100%; max-height: 220px; object-fit: cover; }
.xp-play { position: absolute; inset: 0; display: grid; place-items: center; font-size: 28px; color: #fff; text-shadow: 0 2px 6px #000; }
.xp-media-note { display: inline-block; margin-top: 6px; font-size: 14px; color: var(--cyan); text-decoration: none; }
.xp-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: 8px; }
.xp-act { position: relative; display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; height: 32px; padding: 0 4px; border-radius: 6px; background: #16214f; border: 1px solid #2e3d74; color: var(--text); font: inherit; font-size: 15px; text-decoration: none; cursor: pointer; }
.xp-act:hover:not([disabled]) { background: #1f2c62; border-color: #4a5c98; }
.xp-act[disabled] { cursor: default; }
.xp-act[disabled]:not(.busy) { opacity: 0.75; }
.xp-act svg { width: 17px; height: 17px; flex: none; fill: currentColor; }
.xp-act .xp-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.xp-act small { font-size: 15px; color: inherit; }
.xp-like.on { color: #ff6f91; border-color: #8a2a4a; background: #2a1028; }
.xp-repost.on { color: #5fe8a0; border-color: #2a7a4a; background: #0f2a1e; }
.xp-act.busy { animation: xp-busy 0.9s ease-in-out infinite alternate; }
@keyframes xp-busy { to { opacity: 0.45; } }
.xp-replybox { display: grid; gap: 6px; margin-top: 8px; }
.xp-replybox textarea { width: 100%; resize: vertical; min-height: 64px; padding: 6px 8px; border-radius: 6px; background: #070b1c; border: 1px solid #4a5c98; color: var(--text); font: inherit; font-size: 16px; line-height: 1.25; }
.xp-replybox textarea:focus { outline: none; border-color: var(--gold); }
.xp-replybox-row { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.xp-replybox-row .btn { padding: 4px 12px; font-size: 15px; }
.xp-count { margin-right: auto; font-size: 13px; color: var(--muted); }
.xp-count.over { color: var(--red); }
.xp-did { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); }
.xp-follow { color: var(--cyan); white-space: nowrap; }
.chat-log .m-xpost { color: #d8e4ff; }
.chat-log .m-xpost::before { content: "𝕏 "; font-weight: 700; color: #fff; }
.chat-log .xp-line { padding: 0 6px; border-radius: 4px; border: 1px solid #4a5c98; background: #16214f; color: var(--gold); font: inherit; font-size: inherit; cursor: pointer; }
.chat-log .xp-line:hover { background: #1f2c62; }

/* The Stonk House's window (stonk-ui.js): the four boards as steps, the live totals, the Founders' Wall. */
.stonk-steps { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0 0; padding: 0; }
.stonk-step { display: flex; gap: 10px; align-items: flex-start; min-width: 0; padding: 10px; border: 2px solid #1c3a48; border-radius: 10px; background: #0b1820; }
.stonk-step.on { border-color: #a4c5cf; box-shadow: 0 0 0 2px rgba(164, 197, 207, 0.25); }
.stonk-step img { flex: none; width: 54px; height: 46px; image-rendering: pixelated; }
.stonk-step b { display: block; color: #dcebf0; font-size: 15px; }
.stonk-step span { display: block; margin-top: 3px; color: #b8ccd4; font-size: 13px; line-height: 1.4; }
.stonk-live { margin: 12px 0 0; padding: 8px 12px; border-radius: 8px; background: #071013; color: #a4c5cf; font-size: 13px; text-align: center; }
.stonk-live b { color: #fff; }
.stonk-wall { margin-top: 14px; padding: 12px; border: 2px solid #8c5c16; border-radius: 10px; background: #0f2028; text-align: center; }
.stonk-wall.on { border-color: #f8dc82; box-shadow: 0 0 0 2px rgba(248, 220, 130, 0.25); }
.stonk-wall img { display: block; width: min(284px, 100%); height: auto; margin: 0 auto 8px; image-rendering: pixelated; }
.stonk-wall h3 { margin: 0 0 4px; color: #f8dc82; font-size: 16px; }
.stonk-wall p { margin: 0; color: #c8d8de; font-size: 13px; line-height: 1.45; text-align: left; }
.stonk-links { flex-wrap: wrap; }
@media (max-width: 560px) { .stonk-steps { grid-template-columns: minmax(0, 1fr); } }

/* The Raid Center's window (raid-ui.js): the Raid Board, your invite link, Raider points and the three tiers of gear,
   today's raid on X. X's black with ZAZA's gold. */
.rd-scoring { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 16px 0; }
.rd-scoring > span { padding: 10px 6px; border: 1px solid var(--gold); border-radius: 8px; text-align: center; font-size: 14px; }
.rd-scoring b { color: var(--gold); font-size: 19px; }
.rd-board-scroll { overflow-x: auto; }
.rd-board table { width: 100%; border-collapse: collapse; font-size: 16px; }
.rd-board th, .rd-board td { text-align: right; padding: 8px 5px; border-bottom: 1px solid #ffffff24; }
.rd-board th:nth-child(2) { text-align: left; max-width: 145px; overflow-wrap: anywhere; }
.rd-board th button { text-align: left; }
.rd-board td small { display: block; white-space: nowrap; color: var(--muted); font-size: 12px; }
.rd-board tr.you { background: #ffd23f18; }
.rd-board tbody tr:first-child { color: var(--gold); }
.rd-board .rd-gap td { text-align: center; }
.raid-hq section { margin-top: 12px; padding: 12px; border: 2px solid #2a2a35; border-radius: 10px; background: #0d0d14; }
.raid-hq h3 { margin: 0 0 8px; color: var(--gold); font-size: 16px; }
/* The daily streak, big (owner: "a really popping daily streak"): a flickering 🔥, the days in gold, today's boxes. */
.raid-hq .rd-streak { display: flex; align-items: center; gap: 14px; margin-top: 4px; padding: 14px 16px; border: 2px solid #ff8a2a; border-radius: 14px;
  background: radial-gradient(circle at 12% 50%, rgba(255, 138, 42, 0.45), rgba(255, 138, 42, 0) 55%), linear-gradient(135deg, #2a1206, #120a10 60%, #0d0d14); box-shadow: 0 0 18px rgba(255, 138, 42, 0.35); }
.raid-hq .rd-streak.off { border-color: #3c3c4a; background: #14141b; box-shadow: none; }
.raid-hq .rd-streak.off .rd-fire { filter: grayscale(1); opacity: 0.6; animation: none; }
.raid-hq .rd-streak.done { border-color: var(--gold); box-shadow: 0 0 22px rgba(255, 210, 63, 0.55); animation: rd-glow 1.6s ease-in-out infinite; }
.raid-hq .rd-fire { flex: none; font-size: 58px; line-height: 1; filter: drop-shadow(0 0 10px rgba(255, 138, 42, 0.9)); transform-origin: 50% 85%; animation: rd-flicker 0.9s ease-in-out infinite alternate; }
.raid-hq .rd-sinfo { min-width: 0; flex: 1; }
.raid-hq .rd-snum { margin: 0; color: #ffe2b0; font-size: 17px; }
.raid-hq .rd-snum b { margin-right: 4px; color: var(--gold); font-size: 44px; line-height: 1; text-shadow: 0 0 12px rgba(255, 210, 63, 0.7), 0 2px 0 #7a4a00; }
.raid-hq .rd-snum small { color: #c8a878; font-size: 13px; }
.raid-hq .rd-stoday { margin: 6px 0 0; color: #f0d8c0; font-size: 13px; line-height: 1.4; }
.raid-hq .rd-stoday .link-btn { padding: 0; font-size: inherit; }
.raid-hq .rd-boxes { display: flex; gap: 6px; margin-top: 8px; }
.raid-hq .rd-boxes i { width: 22px; height: 22px; border: 2px solid #5a3a20; border-radius: 6px; background: #1a120c; }
.raid-hq .rd-boxes i.on { border-color: #fff0a0; background: linear-gradient(180deg, #ffe066, #ff9a2a); box-shadow: 0 0 8px rgba(255, 170, 42, 0.8); }
.raid-hq .rd-targets { border-color: #1a5aa0; background: #0a1220; }
.raid-hq .rd-targets h3 { color: #6fd0ff; }
@keyframes rd-flicker { from { transform: scale(1) rotate(-3deg); filter: drop-shadow(0 0 8px rgba(255, 138, 42, 0.8)); } to { transform: scale(1.08) rotate(3deg); filter: drop-shadow(0 0 16px rgba(255, 190, 60, 1)); } }
@keyframes rd-glow { 0%, 100% { box-shadow: 0 0 14px rgba(255, 210, 63, 0.4); } 50% { box-shadow: 0 0 28px rgba(255, 210, 63, 0.85); } }
@media (prefers-reduced-motion: reduce) { .raid-hq .rd-fire, .raid-hq .rd-streak.done { animation: none; } }
@media (max-width: 420px) { .raid-hq .rd-fire { font-size: 44px; } .raid-hq .rd-snum b { font-size: 36px; } .raid-hq .rd-boxes i { width: 18px; height: 18px; } }
.raid-hq .rd-wait { margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: #14141b; color: #d8d8e2; font-size: 15px; text-align: center; }
.raid-hq .rd-small { margin: 8px 0 0; color: #b8b8c8; font-size: 13px; line-height: 1.45; }
.raid-hq .rd-visits b { color: #fff; font-weight: 400; } /* 👁 the visits through your link (server.mjs linkVisits) */
.raid-hq .rd-linkrow { display: flex; gap: 8px; min-width: 0; }
.raid-hq .rd-linkrow input { flex: 1; min-width: 0; padding: 8px 10px; border: 2px solid #3c3c4a; border-radius: 8px; background: #050508; color: #fff; font: inherit; font-size: 14px; }
.raid-hq .rd-linkrow .btn { flex: none; }
.raid-hq .rd-share { flex-wrap: wrap; gap: 8px; margin-top: 10px; justify-content: flex-start; }
.raid-hq .rd-score { margin: 0; color: #fff; font-size: 16px; }
.raid-hq .rd-score b { color: var(--gold); font-size: 24px; }
.raid-hq .rd-bar { height: 10px; margin-top: 8px; border-radius: 5px; background: #23232c; overflow: hidden; }
.raid-hq .rd-bar i { display: block; height: 100%; background: linear-gradient(90deg, #c99a1a, #ffd23f, #3ab8ff); }
/* Your referral link (raid-ui.js refHtml): your code, the link to copy, four counts, the road through the three Raider
   tiers (each as wide as its points: 25, 25, 50) and every player it brought in, with their bar to Level 3. */
.raid-hq .rd-ref { container-type: inline-size; border-color: #6b5410; background: radial-gradient(120% 90% at 100% 0%, rgba(255, 210, 63, 0.14), rgba(255, 210, 63, 0) 60%), #0d0d14; }
.raid-hq .rd-ref-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin-bottom: 8px; }
.raid-hq .rd-ref-top h3 { margin: 0; }
.raid-hq .rd-code { max-width: 100%; padding: 2px 10px; border: 1px solid #6b5410; border-radius: 999px; background: #1a1505; color: #c8a878; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.raid-hq .rd-code b { color: var(--gold); font-size: 15px; }
.raid-hq .rd-ref .rd-linkrow input { border-color: #6b5410; font-size: 15px; }
.raid-hq .rd-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.raid-hq .rd-stats div { min-width: 0; padding: 8px 4px; border: 1px solid #2a2a35; border-radius: 10px; background: #14141b; color: #b8b8c8; font-size: 12px; line-height: 1.25; text-align: center; }
.raid-hq .rd-stats b { display: block; color: #fff; font-size: 24px; line-height: 1.15; }
.raid-hq .rd-stats .ok b { color: #7be09a; }
.raid-hq .rd-stats .pts { border-color: #6b5410; background: #1a1505; }
.raid-hq .rd-stats .pts b { color: var(--gold); }
.raid-hq .rd-road { --tc: 255, 210, 63; list-style: none; display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 6px; margin: 12px 0 0; padding: 0; }
.raid-hq .rd-road li { min-width: 0; color: #8a8a9a; }
.raid-hq .rd-rbar { display: block; height: 10px; margin-bottom: 5px; border-radius: 5px; background: #23232c; overflow: hidden; }
.raid-hq .rd-rbar i { display: block; height: 100%; background: rgb(var(--tc)); }
.raid-hq .rd-road b { display: block; color: #d8d8e2; font-size: 13px; }
.raid-hq .rd-road small { display: block; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.raid-hq .rd-road .got b { color: #7be09a; }
.raid-hq .rd-road .next b { color: rgb(var(--tc)); }
.raid-hq .rd-road .next .rd-rbar { box-shadow: 0 0 0 1px rgba(var(--tc), 0.6); }
.raid-hq .rd-ptitle { margin: 14px 0 6px; color: #d8d8e2; font-size: 14px; }
.raid-hq .rd-people { list-style: none; max-height: 300px; margin: 0; padding: 0; overflow-y: auto; border: 1px solid #2a2a35; border-radius: 10px; background: #0a0a10; }
.raid-hq .rd-p { display: grid; grid-template-columns: 32px minmax(0, 1fr) 80px minmax(0, 300px); gap: 4px 10px; align-items: center; padding: 8px 10px; border-bottom: 1px solid #1e1e27; }
.raid-hq .rd-p:last-child { border-bottom: 0; }
.raid-hq .rd-av { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: hsl(var(--h) 50% 30%); box-shadow: inset 0 0 0 2px hsl(var(--h) 70% 58%); color: #fff; font-size: 15px; font-weight: 700; }
.raid-hq .rd-who { min-width: 0; }
.raid-hq .rd-who b { display: block; color: #fff; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.raid-hq .rd-who small { color: #8a8a9a; font-size: 12px; }
.raid-hq .rd-lv { color: #d8d8e2; font-size: 13px; }
.raid-hq .rd-mini { display: block; height: 5px; margin-top: 3px; border-radius: 3px; background: #23232c; overflow: hidden; }
.raid-hq .rd-mini i { display: block; height: 100%; background: linear-gradient(90deg, #c99a1a, #ffd23f); }
.raid-hq .rd-p em { justify-self: end; padding: 2px 8px; border-radius: 999px; background: #1a1a22; color: #b8b8c8; font-size: 12px; font-style: normal; text-align: right; }
.raid-hq .rd-counted em { background: rgba(123, 224, 154, 0.12); color: #7be09a; }
.raid-hq .rd-waiting em { background: rgba(255, 210, 63, 0.1); color: #ffd23f; }
.raid-hq .rd-guest em { background: rgba(58, 184, 255, 0.12); color: #6fd0ff; }
.raid-hq .rd-p.rd-not { opacity: 0.6; }
.raid-hq .rd-empty { margin: 0; padding: 14px; border: 1px dashed #3c3c4a; border-radius: 10px; color: #b8b8c8; font-size: 13px; text-align: center; }
@container (max-width: 480px) {
  .raid-hq .rd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .raid-hq .rd-road { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .raid-hq .rd-p { grid-template-columns: 32px minmax(0, 1fr) 64px; }
  .raid-hq .rd-p em { grid-column: 2 / -1; justify-self: start; text-align: left; }
}
/* The Raider gear (raid-ui.js raiderGearHTML): each tier on your own hero, turning on its plinth (raid-art.js raidShowcase,
   a strip of 4 frames, 32x46 each, shown 4x, 3x when narrow), under a light in the tier's colour (--tc): gold, X's white, the storm's blue.
   Yours: framed and lit; the next one: its progress; further ones: dimmed. Three side by side, or a row each when narrow. */
.raid-hq .rd-armoury { container-type: inline-size; }
.raid-hq .rd-tiers { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; }
.raid-hq .rd-tier { --tc: 255, 210, 63; display: flex; flex-direction: column; min-width: 0; border: 2px solid #2a2a35; border-radius: 12px; background: #101016; overflow: hidden; }
.raid-hq .rd-t2 { --tc: 236, 236, 244; }
.raid-hq .rd-t3 { --tc: 58, 184, 255; }
.raid-hq .rd-stage { position: relative; display: flex; flex: none; justify-content: center; align-items: flex-end; height: 204px; padding-bottom: 6px; background: radial-gradient(ellipse 62% 58% at 50% 70%, rgba(var(--tc), 0.3), transparent 72%), linear-gradient(180deg, #08080d, #18181f); }
.raid-hq .rd-stage::before { content: ""; position: absolute; inset: 0 12%; background: linear-gradient(180deg, rgba(var(--tc), 0.2), transparent 80%); clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); pointer-events: none; }
.raid-hq .rd-hero { position: relative; width: 128px; height: 184px; background-repeat: no-repeat; background-size: 400% 100%; image-rendering: pixelated; animation: rd-turn 6s steps(4) infinite; }
.raid-hq .rd-t2 .rd-hero { animation-delay: -3s; } /* starts on its back: the X cape */
.raid-hq .rd-t3 .rd-hero { animation-delay: -4.5s; }
@keyframes rd-turn { to { background-position-x: 133.333%; } }
.raid-hq .rd-tinfo { display: flex; flex: 1; flex-direction: column; gap: 6px; min-width: 0; padding: 10px; }
.raid-hq .rd-tname { color: rgb(var(--tc)); font-size: 16px; }
.raid-hq .rd-need { margin: 0; color: #fff; font-size: 14px; line-height: 1.3; }
.raid-hq .rd-need b { color: rgb(var(--tc)); }
.raid-hq .rd-need small { display: block; color: #8a8a9a; font-size: 12px; }
.raid-hq .rd-pieces { list-style: none; display: grid; gap: 4px; margin: 0; padding: 0; }
.raid-hq .rd-pieces li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.raid-hq .rd-pieces img { flex: none; width: 40px; height: 40px; border: 1px solid #2a2a35; border-radius: 6px; background: #1a1a22; image-rendering: pixelated; }
.raid-hq .rd-pieces span { min-width: 0; color: #fff; font-size: 13px; line-height: 1.2; }
.raid-hq .rd-pieces small { display: block; color: #8a8a9a; font-size: 11px; }
.raid-hq .rd-pnames { margin: 0; color: #fff; font-size: 13px; line-height: 1.3; }
/* A tier's Socket scrolls and gem (raid-ui.js forgeRows): 16 px icons at 2x in the same 40 px box; the gem not given yet
   shows its three kinds in turn. */
.raid-hq .rd-pieces img.rd-mat { padding: 3px; }
.raid-hq .rd-gems { position: relative; flex: none; width: 40px; height: 40px; border: 1px solid #2a2a35; border-radius: 6px; background: #1a1a22; }
.raid-hq .rd-gems img.rd-mat { position: absolute; inset: 0; width: 38px; height: 38px; padding: 3px; border: 0; background: none; opacity: 0; animation: rd-gem 4.5s infinite; }
.raid-hq .rd-gems img:nth-child(2) { animation-delay: -3s; }
.raid-hq .rd-gems img:nth-child(3) { animation-delay: -1.5s; }
@keyframes rd-gem { 0%, 33.3% { opacity: 1; } 33.4%, 100% { opacity: 0; } }
.raid-hq .rd-tier .rd-bar { height: 8px; margin-top: auto; }
.raid-hq .rd-tier .rd-bar i { background: rgb(var(--tc)); }
.raid-hq .rd-tstate { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin: auto 0 0; }
.raid-hq .rd-bar + .rd-tstate { margin-top: 0; }
.raid-hq .rd-tstate em { color: #b8b8c8; font-size: 12px; font-style: normal; }
.raid-hq .rd-tier.got { border-color: rgb(var(--tc)); box-shadow: 0 0 18px rgba(var(--tc), 0.25); }
.raid-hq .rd-tier.got .rd-tstate em { color: #7be09a; font-weight: 700; }
.raid-hq .rd-tier.next { border-color: rgba(var(--tc), 0.55); }
.raid-hq .rd-tier.next .rd-tstate em { color: rgb(var(--tc)); }
.raid-hq .rd-tier.locked .rd-stage { filter: saturate(0.55) brightness(0.72); }
.raid-hq .rd-tier.on { box-shadow: 0 0 0 3px rgba(var(--tc), 0.45); }
.raid-hq .rd-gearsub { margin: 0 0 8px; }
@media (prefers-reduced-motion: reduce) { .raid-hq .rd-hero { animation: none; } .raid-hq .rd-t2 .rd-hero { background-position-x: 66.667%; } .raid-hq .rd-gems img.rd-mat { animation: none; } .raid-hq .rd-gems img:first-child { opacity: 1; } }
/* Connect your X's (compact): three side by side at any width, smaller, so its steps stay near. */
.raid-hq .rd-armoury.compact .rd-stage { height: 150px; }
.raid-hq .rd-armoury.compact .rd-hero { width: 96px; height: 138px; }
.raid-hq .rd-armoury.compact .rd-tinfo { gap: 4px; padding: 8px; }
@container (max-width: 560px) {
  .raid-hq .rd-armoury:not(.compact) .rd-tiers { grid-template-columns: minmax(0, 1fr); }
  .raid-hq .rd-armoury:not(.compact) .rd-tier { flex-direction: row; }
  .raid-hq .rd-armoury:not(.compact) .rd-stage { width: 112px; height: auto; min-height: 152px; }
  .raid-hq .rd-armoury:not(.compact) .rd-hero { width: 96px; height: 138px; }
}
@container (max-width: 420px) {
  .raid-hq .rd-armoury.compact .rd-tiers { gap: 6px; }
  .raid-hq .rd-armoury.compact .rd-stage { height: 104px; }
  .raid-hq .rd-armoury.compact .rd-hero { width: 64px; height: 92px; }
  .raid-hq .rd-armoury.compact .rd-tinfo { padding: 6px; }
  .raid-hq .rd-armoury.compact .rd-need, .raid-hq .rd-armoury.compact .rd-pnames { font-size: 12px; }
}
.raid-hq .rd-reach-n { margin: 0; color: #fff; font-size: 15px; }
/* Your 🔥 𝕏 Raid streak above today's reach (raid-ui.js raidDayHtml), and each raider's on the house's board. */
.raid-hq .rd-xstreak { margin: 0 0 2px; color: #ffe2b0; font-size: 15px; }
.raid-hq .rd-xstreak b { margin-right: 2px; color: var(--gold); font-size: 20px; }
.raid-hq .rd-xstreak small { color: #c8a878; font-size: 12px; }
.rd-board td.rd-st, .rk-table td.rk-st { white-space: nowrap; }
.rd-board td.rd-xp { color: #ffe27a; white-space: nowrap; }
/* A raider's 𝕏 @handle under their name, on the Raid Board and the Rankings' Raiders tab (x-link.js xFollowHTML): opens
   their X to follow them. Black like X's own mark, on its own line. */
.x-follow { display: block; width: fit-content; max-width: 100%; margin-top: 3px; padding: 0 8px; border-radius: 999px; background: #000; color: #fff; box-shadow: 0 0 0 1px #ffffff3a; font-size: 13px; font-weight: 400; line-height: 20px; text-align: left; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x-follow:hover, .x-follow:focus-visible { background: #1d9bf0; color: #fff; text-decoration: none; }
.rk-table td .x-follow { max-width: calc(100% - 29px); margin-left: 29px; }
@media (max-width: 520px) { .rk-table td .x-follow { margin-left: 0; } .rk-table td .x-follow .xf-at { display: none; } }
.rk-step .x-follow { margin: 2px auto 1px; }
.rk-table td.rk-2l small { display: block; margin-top: 1px; font-size: 12px; line-height: 1; color: var(--ink-2); white-space: nowrap; }
@media (max-width: 520px) { .rk-table td.rk-2l small { font-size: 10px; } }
.raid-hq .rd-reach-n b { color: var(--gold); font-size: 20px; }
.raid-hq .rd-marks { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin: 8px 0 0; padding: 0; }
.raid-hq .rd-marks li { display: flex; flex-direction: column; align-items: center; padding: 6px; border: 2px solid #2a2a35; border-radius: 8px; background: #14141b; }
.raid-hq .rd-marks li b { color: #d8d8e2; font-size: 18px; }
.raid-hq .rd-marks li span { color: #b8b8c8; font-size: 12px; }
.raid-hq .rd-marks li.done { border-color: var(--gold); }
.raid-hq .rd-marks li.done b { color: var(--gold); }
.raid-hq .rd-tips { margin: 10px 0 0; padding-left: 20px; color: #d8d8e2; font-size: 13px; line-height: 1.45; }
.raid-hq .rd-tips li + li { margin-top: 4px; }
.raid-hq .rd-free { margin: 10px 0 0; color: var(--muted); font-size: 13px; }
.raid-hq .rd-small .link-btn { padding: 0; font-size: inherit; }
.raid-hq .rd-note { margin: 10px 0 0; color: #ff9a9a; font-size: 14px; }
/* The copy-paste warning at the top of the Raid Center and its rankings (raid-ui.js warnHTML): the faucet's red note. */
.raid-hq .rd-warn { display: flex; gap: 10px; margin: 10px 0 12px; padding: 10px 14px; border-radius: 12px; background: rgba(150, 36, 24, 0.24); border: 1px solid #ff6b4a; border-left-width: 4px; text-align: left; }
.raid-hq .rd-warn-i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: #ff6b4a; font: 900 14px/1 sans-serif; color: #1b1424; }
.raid-hq .rd-warn > div { min-width: 0; }
.raid-hq .rd-warn b { font-family: "Titan One", sans-serif; font-weight: normal; font-size: 16px; color: #ffb3a0; }
.raid-hq .rd-warn p { margin: 3px 0 0; font-size: 13px; line-height: 1.4; color: #ffe0d6; }
/* The ranking paused while the X budget is spent (raid-ui.js pausedHTML; rpg/ui-rpg.js on the Raiders board): the same note in gold. */
.raid-hq .rd-paused { display: flex; gap: 10px; margin: 10px 0 12px; padding: 10px 14px; border-radius: 12px; background: rgba(150, 110, 20, 0.24); border: 1px solid var(--gold); border-left-width: 4px; text-align: left; }
.raid-hq .rd-paused .rd-warn-i { background: var(--gold); font-size: 10px; letter-spacing: 1px; }
.raid-hq .rd-paused > div { min-width: 0; }
.raid-hq .rd-paused b { font-family: "Titan One", sans-serif; font-weight: normal; font-size: 16px; color: var(--gold); }
.raid-hq .rd-paused p { margin: 3px 0 0; font-size: 13px; line-height: 1.4; color: #fff1cc; }
.modal .xr-reach { margin: 0 0 8px; font-size: 14px; line-height: 1.4; color: #cfd8f0; }
.modal .xr-reach b { color: var(--gold); }
.modal .xr-reach span { color: var(--muted); margin-left: 4px; }
.modal .xr-seen { margin: 0 0 8px; padding: 6px 10px; border-radius: 8px; background: rgba(255, 200, 80, 0.08); border: 1px solid rgba(255, 200, 80, 0.4); font-size: 14px; line-height: 1.4; color: #ffe2a8; }
.modal .xr-seen b { color: var(--gold); }
.modal .xr-score { margin: 0 0 8px; font-size: 13px; line-height: 1.45; color: #cfd8f0; }
.modal .xr-score b { color: var(--gold); }
.modal .xr-score em { color: #ffb4a8; font-style: normal; }
.modal .xr-score small { color: var(--muted); }

/* ---------------------------------------------------------------- the Character window (rpg/ui-character.js)
   A WoW/Diablo-style sheet (owner, 2026-10-07): the paperdoll on dark stone with gold trim, slots down both sides (gold:
   gear, violet: looks, cyan: goods), the stats beside it, the armory's squares under it. */
.adv-cw { display: block; width: 100%; margin: 6px 0 2px; padding: 6px 8px; font-size: 15px; }
.adv-avatar[data-cw] { cursor: pointer; }
.cw { --cw-stone: #0d1030; --cw-edge: rgba(255, 210, 63, 0.38); --cw-look: #b98cff; --cw-good: #6fd8ff; display: grid; gap: 12px; }
.cw-head { display: flex; align-items: center; gap: 12px; padding-right: 36px; }
.cw-av { width: 56px; height: 64px; flex: none; filter: drop-shadow(0 2px 0 #000a); }
.cw-head h2 { margin: 0; line-height: 1.05; }
.cw-head p { margin: 2px 0 0; font-size: 16px; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.cw-head .cw-shield { display: block; margin: 4px 0 0; font-size: 13px; line-height: 1.3; color: var(--muted); max-width: 60ch; }
.cw-doll { position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr) 58px; gap: 8px; padding: 12px 10px; }
.cw-doll { border-radius: 12px;
  background: radial-gradient(ellipse 60% 48% at 50% 44%, rgba(90, 110, 255, 0.28), transparent 70%), radial-gradient(ellipse at 50% 0%, #252a5e, var(--cw-stone) 70%);
  border: 2px solid #000; box-shadow: inset 0 0 0 1px var(--cw-edge), inset 0 0 26px #000c, 0 4px 0 #0006; }
.cw-slot, .cw-cell { position: relative; display: grid; place-items: center; padding: 0; border-radius: 7px; cursor: pointer; color: inherit; font: inherit;
  background: linear-gradient(180deg, #1c2150, #0b0e2a); border: 2px solid #000; box-shadow: inset 0 0 0 1px #4a5088, 0 2px 0 #0008; }
.cw-slot { width: 58px; height: 58px; align-content: start; padding-top: 4px; }
.cw-slot img, .cw-cell img { image-rendering: pixelated; display: block; }
.cw-slot img { width: 32px; height: 32px; }
.cw-slot.kind-look img { width: 36px; height: 36px; margin-top: -2px; }
.cw-slot > i { position: absolute; left: 0; right: 0; bottom: 2px; font-style: normal; font-size: 10px; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); text-align: center; }
.cw-slot.kind-gear { box-shadow: inset 0 0 0 1px #8a6a1a, 0 2px 0 #0008; }
.cw-slot.kind-look { box-shadow: inset 0 0 0 1px #6a4aa8, 0 2px 0 #0008; }
.cw-slot.kind-good { box-shadow: inset 0 0 0 1px #2a7aa0, 0 2px 0 #0008; }
.cw-slot.kind-look > i { color: var(--cw-look); }
.cw-slot.kind-good > i { color: var(--cw-good); }
.cw-slot.kind-gear > i { color: #e8c45a; }
.cw-empty { width: 24px; height: 24px; margin-top: 4px; border-radius: 4px; transform: rotate(45deg); border: 2px dashed #3a3f70; }
.cw-slot:hover, .cw-cell:hover { filter: brightness(1.18); }
.cw-slot.sel, .cw-cell.sel { border-color: var(--gold); box-shadow: inset 0 0 0 1px #fff3b0, 0 0 12px rgba(255, 210, 63, 0.55); }
.cw-side { display: grid; gap: 10px; min-width: 0; }
.cw-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cw-box { padding: 8px 10px 9px; border-radius: 9px; background: rgba(8, 12, 32, 0.58); border: 1px solid #000; box-shadow: inset 0 0 0 1px rgba(255, 210, 63, 0.18); }
.cw-box h4 { margin: 0 0 5px; font-family: var(--display); font-weight: 400; font-size: 15px; color: var(--gold); letter-spacing: 0.02em; }
.cw-row { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; line-height: 1.5; }
.cw-row span { color: var(--muted); white-space: nowrap; }
.cw-row b { color: #fff; font-weight: 700; text-align: right; }
.cw-row s { color: #7c84ac; font-weight: 400; margin-right: 3px; }
.cw-row.up b { color: var(--green); }
.cw-row.down b { color: #ff7a7a; }
/* A liquidity provider's aura boost on Attack and Defence (rpg/ui-character.js auraTag): blue like the aura, gold in the Super form. */
.adv-aura, .cw-aura { font-style: normal; font-weight: 700; color: #8fdcff; text-shadow: 0 0 6px rgba(63, 200, 255, 0.75); white-space: nowrap; }
.adv-aura.gold, .cw-aura.gold { color: #ffd23f; text-shadow: 0 0 6px rgba(255, 210, 63, 0.75); }
.adv-aura { font-size: 10px; margin-left: 3px; vertical-align: 3px; }
.cw-aura { font-size: 11px; margin-left: 6px; padding: 0 6px; border: 1px solid currentColor; border-radius: 999px; background: rgba(63, 200, 255, 0.14); }
.cw-aura.gold { background: rgba(255, 210, 63, 0.14); }
/* Where it comes from (ui-character.js powerRows), under Defence: 💧 the LP's share in the aura's blue, ⚡ the vault's in its
   yellow, each tied to the stats above by a line on its left. */
.cw-row.cw-from { margin-left: 2px; padding-left: 8px; border-left: 2px solid currentColor; font-size: 12px; line-height: 1.6; }
.cw-row.cw-from.lp { color: #8fdcff; }
.cw-row.cw-from.vault { color: #ffd23f; }
.cw-row.cw-from span, .cw-row.cw-from b { color: inherit; }
.cw-info { padding: 10px 12px; border-radius: 10px; background: linear-gradient(180deg, rgba(30, 36, 86, 0.9), rgba(10, 13, 38, 0.9)); border: 2px solid #000; box-shadow: inset 0 0 0 1px var(--cw-edge); }
.cw-info.empty p { margin: 0; color: var(--muted); font-size: 15px; }
.cw-info-top { display: flex; gap: 12px; align-items: flex-start; }
.cw-info-top > img, .cw-info-top > .cw-q { flex: none; width: 48px; height: 48px; padding: 6px; box-sizing: content-box; border-radius: 8px; background: #0b0e2a; border: 2px solid #000; box-shadow: inset 0 0 0 1px #4a5088; image-rendering: pixelated; object-fit: contain; }
.cw-info-top b { display: inline; font-family: var(--display); font-weight: 400; font-size: 19px; color: #fff; margin-right: 6px; }
.cw-info-top b small { font-family: var(--ui-font, system-ui); font-size: 13px; color: var(--muted); }
.cw-info-top p { margin: 5px 0 0; font-size: 15px; line-height: 1.4; }
.cw-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
/* A chip's words sit in the middle of its pill, and its emoji goes in an <i> of its own, a size smaller: an emoji font
   draws far taller than Jersey 10's capitals, so inline it touched the pill's top edge and pushed the words down. */
.cw-chip { display: inline-flex; align-items: center; gap: 4px; height: 20px; box-sizing: border-box; padding: 0 8px; vertical-align: middle;
  font-style: normal; font-size: 13px; font-weight: 700; line-height: 1; border-radius: 999px;
  color: #cfd6f6; background: #2a2f5e; border: 1px solid #000; white-space: nowrap; }
.cw-chip > i { font-style: normal; font-size: 10px; line-height: 1; filter: drop-shadow(0 0 0.6px #000) drop-shadow(0 0 0.6px #000); } /* outlined: the ⭐ vanished on the gold chip */
.cw-chip.on { color: var(--navy-900); background: var(--green); }
.cw-chip.yes { color: var(--navy-900); background: var(--cyan); }
.cw-chip.gold { color: var(--navy-900); background: var(--gold); }
.cw-chip.vault { color: #fff; background: #7a3ad8; }
.cw-chip.lp { color: var(--navy-900); background: #8fdcff; } /* 💧 LIQUIDITY PROVIDER: the LP aura's blue */
.cw-chip.market { color: var(--navy-900); background: var(--cw-good); }
.cw-chip.drop { color: var(--navy-900); background: #ffb03a; }
.cw-prog { position: relative; height: 16px; margin-top: 8px; border-radius: 999px; background: #0b0e2a; border: 1px solid #000; overflow: hidden; }
.cw-prog span { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #7a3ad8, var(--cw-look)); }
.cw-prog i { position: relative; display: block; text-align: center; font-style: normal; font-size: 12px; font-weight: 700; line-height: 14px; color: #fff; text-shadow: 0 1px 0 #000; }
.cw-q { display: grid; place-items: center; font-family: var(--display); font-size: 24px; line-height: 1; color: #7a80b8; text-shadow: 0 2px 0 #000; }
.cw-q.big { font-size: 34px; }
.cw-note { margin: 0; font-size: 14px; color: var(--muted); }
.cw-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 2px solid #000; padding-bottom: 0; }
.cw-tabs button { display: inline-flex; align-items: center; gap: 5px; padding: 7px 11px 6px; border: 2px solid #000; border-bottom: 0; border-radius: 8px 8px 0 0; cursor: pointer;
  font: 700 14px var(--ui-font, system-ui); color: var(--muted); background: #121640; }
.cw-tabs button.on { color: var(--navy-900); background: linear-gradient(180deg, #ffe066, var(--gold)); }
/* the open tab's icon keeps a dark edge, so a yellow one (⚡ Costumes) still shows on the gold */
.cw-tabs button.on span { filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.9)); }
.cw-armory { display: grid; gap: 8px; }
/* The armory (ui-character.js armoryHTML), in one dark panel. Gear: a column per slot (Weapons, Shields, Armour, Helms)
   with a card per piece you have, the goods' cards across all four under them; two columns on a phone. Looks and
   Special: a row per slot, the name on the left, then the squares. */
.cw-kit, .cw-rows { border-radius: 10px; background: #0e1336; border: 2px solid #000; box-shadow: inset 0 0 0 1px rgba(255, 210, 63, 0.18); }
.cw-kit { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 10px; padding: 10px; }
.cw-rows { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 6px 4px; align-items: center; padding: 8px 8px 8px 0; }
.cw-lab { margin: 0; padding-left: 10px; align-self: stretch; display: flex; align-items: center; font: 400 13px/1 var(--ui-font, system-ui); letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.cw-kit .cw-lab { padding: 0 2px; }
.cw-kcol { display: grid; align-content: start; gap: 6px; min-width: 0; }
.cw-kcol.wide { grid-column: 1 / -1; }
.cw-cards { display: grid; gap: 6px; }
.cw-kcol.wide .cw-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 10px; }
.cw-card { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 8px; min-width: 0; padding: 5px 8px 5px 5px; text-align: left;
  border-radius: 8px; cursor: pointer; color: inherit; font: inherit; background: linear-gradient(180deg, #1c2150, #0b0e2a); border: 2px solid #000; box-shadow: inset 0 0 0 1px #4a5088, 0 2px 0 #0008; }
.cw-card:hover { filter: brightness(1.18); }
.cw-card-ic { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 6px; background: #0b0e2a; box-shadow: inset 0 0 0 1px #2a2f5e; }
.cw-card-ic img { width: 32px; height: 32px; image-rendering: pixelated; display: block; }
.cw-card-ic .cw-empty { margin-top: 0; }
.cw-card-tx { display: grid; gap: 1px; min-width: 0; }
.cw-card-tx > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-card-tx b { font-size: 14px; line-height: 1.2; color: #fff; }
.cw-card-tx small { font-size: 12px; line-height: 1.25; color: var(--muted); }
.cw-card-tx em { font-style: normal; font-size: 12px; font-weight: 700; line-height: 1.25; color: #8a92bc; }
.cw-card-tx em.on, .cw-card-tx em.up, .cw-up { color: var(--green); }
.cw-card-tx em.down { color: #ff7a7a; }
.cw-card-tx em.market { color: var(--cw-good); }
.cw-up { font-weight: 700; }
.cw-where { position: absolute; right: -5px; bottom: -5px; font-style: normal; font-size: 13px; line-height: 1; filter: drop-shadow(0 1px 0 #000); }
.cw-card.st-worn { box-shadow: inset 0 0 0 2px #3fae6a, 0 2px 0 #0008; }
.cw-card.st-market, .cw-card.st-soon { box-shadow: inset 0 0 0 1px #2a7aa0, 0 2px 0 #0008; }
.cw-card.st-market img, .cw-card.st-soon img, .cw-card.st-other img, .cw-card.st-lapse img { opacity: 0.5; filter: grayscale(0.55); }
.cw-card.st-empty { background: transparent; border: 2px dashed #3a3f70; box-shadow: none; }
.cw-card.st-empty b { color: var(--muted); }
.cw-card.sel { border-color: var(--gold); border-style: solid; box-shadow: inset 0 0 0 1px #fff3b0, 0 0 12px rgba(255, 210, 63, 0.55); }
.cw-free { display: flex; flex-wrap: wrap; gap: 6px; }
.cw-rows .cw-cell { width: 50px; height: 50px; }
.cw-cell img { width: 32px; height: 32px; }
.cw-cell.st-owned img[width="40"], .cw-cell img[width="40"] { width: 40px; height: 40px; }
.cw-lock { position: absolute; top: 1px; right: 2px; font-style: normal; font-size: 10px; line-height: 1; filter: grayscale(0.2); }
.cw-worn { position: absolute; top: 2px; left: 3px; font-style: normal; font-size: 11px; font-weight: 900; line-height: 1; color: var(--green); text-shadow: 0 1px 0 #000; }
.cw-cell.st-worn { box-shadow: inset 0 0 0 2px #3fae6a, 0 2px 0 #0008; }
.cw-cell.st-holder img, .cw-cell.st-charger img, .cw-cell.st-good img { opacity: 0.5; filter: grayscale(0.55); }
.cw-cell.st-earn, .cw-cell.st-secret, .cw-cell.st-sealed { background: linear-gradient(180deg, #14173a, #08091e); }
.cw-cell.st-holder { box-shadow: inset 0 0 0 1px #8a6a1a, 0 2px 0 #0008; }
.cw-cell.st-charger { box-shadow: inset 0 0 0 1px #7a3ad8, 0 2px 0 #0008; }
.cw-cell.st-good { box-shadow: inset 0 0 0 1px #2a7aa0, 0 2px 0 #0008; }
/* A boss drop set's piece or aura, not yours yet (wardrobe.js DROP_SETS): named, dimmed, an amber edge. */
.cw-cell.st-drop img, .cw-cell.st-set img { opacity: 0.5; filter: grayscale(0.55); }
.cw-cell.st-drop, .cw-cell.st-set { box-shadow: inset 0 0 0 1px #c9762a, 0 2px 0 #0008; }
.cw-cell.sel { border-color: var(--gold); box-shadow: inset 0 0 0 1px #fff3b0, 0 0 12px rgba(255, 210, 63, 0.55); }
@media (max-width: 760px) {
  .cw-doll { max-width: 372px; width: 100%; margin: 0 auto; box-sizing: border-box; }
  .cw-kit, .cw-kcol.wide .cw-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 400px) {
  .cw-doll { grid-template-columns: 52px minmax(0, 1fr) 52px; gap: 6px; padding: 10px 8px; }
  .cw-slot { width: 52px; height: 52px; }
  .cw-rows { grid-template-columns: 58px minmax(0, 1fr); }
  .cw-kit { gap: 10px 6px; padding: 8px 6px; }
  .cw-card { grid-template-columns: 40px minmax(0, 1fr); gap: 6px; padding-right: 6px; }
  .cw-card-ic { width: 40px; height: 40px; }
  .cw-lab { padding-left: 8px; font-size: 11px; }
  .cw-rows .cw-cell { width: 46px; height: 46px; }
  .style-row { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .style-row > span { font-size: 12px; }
  .style-tint > span { display: none; }
  .style-outfits { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
  .cz-box { padding: 10px 8px; }
  .cw-tabs button { padding: 6px 8px 5px; font-size: 13px; }
  .cw-tabs.top button { flex: 1 1 30%; justify-content: center; } /* six tabs: two even rows of three */
  .cw-box { padding: 7px 8px 8px; }
  .cw-row { font-size: 13px; }
}
/* A phone turned sideways: the doll beside the stats, smaller. */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 561px) {
  .cw-doll { grid-template-columns: 50px minmax(0, 1fr) 50px; gap: 5px; padding: 8px; }
  .cw-slot { width: 50px; height: 50px; }
  .cw-av { width: 42px; height: 48px; }
  .cw-head h2 { font-size: 20px; }
  .cw-head p { font-size: 14px; }
}

/* 👔 The Wardrobe (rpg/ui-character.js; owner, 2026-10-25, of the Harbour's lobby: "i love this style ... can we implement
   some of this also for the character personalization page ?"): the Character window in the lobby's look (harbour.css
   .lb-*, which only the island's wallets load, so the Wardrobe has its own copy): the tailor's shop painted over the whole
   window (assets/wardrobe/), your hero on its round stage, your name on a plate in the sky, dark glass panels down both
   sides under small gold capitals, and "Save my look" as the big word under the stage. One screen on computers (a column
   scrolls on its own); on phones the room, then the tab's picks, then your hero, what you wear and your stats; a phone on
   its side keeps the room on the left. The room's floor is its bottom fifth, so the picture keeps its foot on the
   window's and the stage sits 20.5% up it. */
.modal-backdrop:has(> .wd-modal) { padding: 0; background: #0b0a1c; }
.modal.wd-modal { width: 100% !important; height: 100dvh; max-height: none; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: #1c1630; overflow: hidden auto; }
.modal.wd-modal > .modal-x { position: fixed; top: calc(14px + var(--wd-top, 0px)); right: 16px; z-index: 6; }
.wd { --k: 6; --bar: 62px; --wd-top: env(safe-area-inset-top, 0px); --tan: #e8c46a; --line: rgba(232, 196, 106, 0.34); --soft: #b9bfdc; --mute: #9ea6cc;
  --imgh: max(100dvh, 100vw * 0.5583); --feet: max(150px, var(--imgh) * 0.205); display: block; color: var(--text); }
html.standalone .wd, html.standalone .modal.wd-modal { --wd-top: var(--mobile-top-safe, env(safe-area-inset-top, 0px)); }
.wd-top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px 14px; box-sizing: border-box; min-height: calc(var(--bar) + var(--wd-top)); padding: calc(10px + var(--wd-top)) 70px 10px max(20px, (100% - 1320px) / 2);
  background: linear-gradient(180deg, rgba(6, 10, 36, 0.9), rgba(6, 10, 36, 0.64)); border-bottom: 1px solid rgba(232, 196, 106, 0.22); backdrop-filter: blur(10px); }
.wd-brand { display: inline-flex; flex: none; align-items: center; gap: 8px; box-sizing: border-box; height: 36px; padding: 0 14px 0 10px; border: 2px solid var(--gold); border-radius: 999px; color: var(--gold); font: 400 16px/1 var(--display); white-space: nowrap; }
.wd-brand b { font-weight: 400; color: inherit; }
.wd-i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wd .cw-tabs.top { flex-wrap: nowrap; gap: 2px; margin: 0 auto; padding: 4px; border: 2px solid #3d8bff; border-radius: 999px; background: rgba(4, 10, 40, 0.6); overflow-x: auto; scrollbar-width: none; }
.wd .cw-tabs button { height: 32px; padding: 0 13px; border: 0; border-radius: 999px; background: none; color: var(--soft); font: 400 15px/1 var(--display); white-space: nowrap; }
.wd .cw-tabs button:hover { color: #fff; }
.wd .cw-tabs button.on { background: #3d8bff; color: #fff; box-shadow: 0 2px 8px rgba(61, 139, 255, 0.45); }
.wd .cw-tabs button.on span { filter: none; }

/* the room: the painting under everything, its foot on the window's */
.wd-lb { position: relative; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr) minmax(0, 300px); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "l plate r" "l stage r" "l go r";
  gap: 0 28px; box-sizing: border-box; height: calc(100dvh - var(--bar) - var(--wd-top)); padding: 16px max(24px, (100% - 1320px) / 2); }
.wd-lb > :not(.wd-bg) { position: relative; z-index: 1; min-width: 0; }
.wd-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: #2a2142; }
.wd-bg img { position: absolute; left: 50%; bottom: 0; width: auto; max-width: none; height: var(--imgh); translate: -50% 0; }
.wd-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 8, 28, 0.55), transparent 24%, transparent 76%, rgba(5, 8, 28, 0.55)), linear-gradient(0deg, rgba(5, 8, 28, 0.72), rgba(5, 8, 28, 0.2) 22%, transparent 34%); }
/* the plate: your class, your name, three numbers, a gold rule */
.wd-plate { grid-area: plate; justify-self: center; display: grid; justify-items: center; gap: 3px; min-width: 250px; padding: 10px 56px 9px; text-align: center;
  background: radial-gradient(closest-side, rgba(8, 10, 32, 0.8), rgba(8, 10, 32, 0.58) 62%, rgba(8, 10, 32, 0) 100%); }
.wd-plate > small { color: var(--tan); font: 400 12px/1 var(--display); letter-spacing: 0.32em; text-transform: uppercase; }
.wd-plate > b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font: 400 44px/1.1 var(--display); background: linear-gradient(180deg, #fff6c8, #ffd23f 52%, #dc9a1c); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 rgba(40, 20, 0, 0.75)); white-space: nowrap; }
.wd-stats { display: flex; margin-top: 2px; }
.wd-stats > span { display: grid; justify-items: center; gap: 3px; padding: 0 14px; }
.wd-stats > span + span { border-left: 1px solid var(--line); }
.wd-stats b { color: #fff; font: 400 20px/1 var(--display); }
.wd-stats small { color: var(--soft); font: 400 10px/1 var(--display); letter-spacing: 0.16em; text-transform: uppercase; }
.wd-orn { position: relative; width: 190px; height: 12px; margin-top: 3px; background: linear-gradient(90deg, transparent, var(--tan) 30%, var(--tan) 70%, transparent) center / 100% 1px no-repeat; }
.wd-orn::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border: 1px solid var(--tan); background: var(--gold); translate: -50% -50%; rotate: 45deg; box-shadow: 0 0 8px rgba(255, 210, 63, 0.8); }
/* your hero on the stage: your look, a pixel of breath, a shadow at the feet, ⟲ ⟳ either side */
.wd-lb > .wd-stage { grid-area: stage; position: static; }
.wd-hero { position: absolute; z-index: 1; left: 50%; bottom: var(--feet); width: calc(16px * var(--k)); height: calc(var(--rows, 32) * var(--k) * 1px); translate: -50% 0; image-rendering: pixelated; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.7)); animation: wd-breathe 1.8s steps(1, end) infinite; }
.wd-shadow { position: absolute; left: 50%; bottom: var(--feet); width: calc(15px * var(--k)); height: calc(4px * var(--k)); translate: -50% 50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), transparent); }
@keyframes wd-breathe { 50% { translate: -50% calc(var(--k) * 1px); } }
.wd-turn { position: absolute; z-index: 2; bottom: calc(var(--feet) + 40px); display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: rgba(6, 10, 32, 0.74); color: var(--tan); font: 400 22px/1 var(--ui-font); cursor: pointer; }
.wd-turn:hover { border-color: var(--tan); color: #fff3c4; }
.wd-turn.l { left: calc(50% - 8px * var(--k) - 72px); }
.wd-turn.r { left: calc(50% + 8px * var(--k) + 32px); }
/* Save my look: the big word between gold rules, a line under it */
.wd-go { grid-area: go; justify-self: center; display: grid; justify-items: center; gap: 7px; text-align: center; }
.wd-word { display: flex; align-items: center; gap: 18px; margin: 0; padding: 0; border: 0; background: none; color: #fff1cc; font: 400 clamp(34px, 3.8vw, 56px)/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase;
  text-shadow: 0 3px 0 #3a2200, 0 0 26px rgba(255, 210, 63, 0.4); white-space: nowrap; cursor: pointer; }
.wd-word:not([disabled]):hover > span, .wd-word:focus-visible > span { color: #fff; text-shadow: 0 3px 0 #3a2200, 0 0 34px rgba(255, 210, 63, 0.85); }
.wd-word:not([disabled]):active { translate: 0 2px; }
.wd-word[disabled] { color: #d8d0b8; text-shadow: 0 3px 0 #3a2200; cursor: default; }
.wd-line { position: relative; width: clamp(36px, 8vw, 120px); height: 12px; background: linear-gradient(90deg, transparent, var(--tan)) center / 100% 2px no-repeat; }
.wd-line::after { content: ""; position: absolute; right: -3px; top: 50%; width: 8px; height: 8px; border: 2px solid var(--tan); background: #1c1634; translate: 0 -50%; rotate: 45deg; }
.wd-line.r { transform: scaleX(-1); }
.wd .wd-go > p { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 8px; margin: 0; color: #e2e6fa; font-size: 17px; line-height: 1.3; text-shadow: 0 1px 2px #000; }
.wd .wd-go > p b { color: var(--gold); font-weight: 400; }
.wd-go .link-btn { font-size: 17px; }
.wd-key { margin-left: 4px; color: rgba(220, 225, 245, 0.62); font: 400 10px/1 var(--display); letter-spacing: 0.22em; text-transform: uppercase; text-shadow: none; }
.wd-key kbd { display: inline-block; margin-left: 5px; padding: 3px 5px 2px; border: 1px solid rgba(220, 225, 245, 0.45); border-radius: 4px; background: none; color: inherit; font: inherit; letter-spacing: 0.12em; }
@media (hover: none) { .wd-key { display: none; } }
@media (prefers-reduced-motion: reduce) { .wd-hero { animation: none; } }

/* the panels: dark glass, a thin gold edge, small gold capitals; the window's own boxes calmed down inside them */
.wd-cols { display: contents; }
.wd-col { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(232, 196, 106, 0.35) transparent; }
.wd-col.l { grid-area: l; }
.wd-col.r { grid-area: r; }
.wd-p { flex: none; padding-bottom: 11px; border: 1px solid var(--line); border-radius: 4px; background: linear-gradient(180deg, rgba(12, 16, 44, 0.88), rgba(7, 10, 30, 0.88)); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 240, 200, 0.06); backdrop-filter: blur(4px); }
.wd-ph { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; padding: 9px 12px 8px; border-bottom: 1px solid rgba(232, 196, 106, 0.16); }
.wd-ph b { color: var(--tan); font: 400 12px/1 var(--display); letter-spacing: 0.16em; text-transform: uppercase; }
.wd-ph span { color: var(--soft); font-size: 16px; line-height: 1; }
.wd-p > :not(.wd-ph) { margin-left: 12px; margin-right: 12px; }
.wd-p > * + :not(.wd-ph) { margin-top: 10px; }
.wd .cw-head { align-items: flex-start; gap: 10px; padding-right: 0; }
.wd .cw-av { width: 46px; height: 52px; }
.wd .cw-head h2 { font-size: 20px; color: #fff; }
.wd .cw-head p { font-size: 15px; color: var(--soft); }
.wd .cw-head .cw-shield { font-size: 14px; }
.wd .cw-badges { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.wd .cw-doll { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; width: auto; max-width: none; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.wd .cw-slot { width: auto; height: auto; aspect-ratio: 1; align-content: center; padding: 0 0 9px; border: 1px solid rgba(232, 196, 106, 0.22); border-radius: 6px; background: rgba(0, 0, 0, 0.32); box-shadow: none; }
.wd .cw-slot.kind-gear:not(.empty) { border-color: rgba(232, 196, 106, 0.6); }
.wd .cw-slot.kind-look:not(.empty) { border-color: rgba(185, 140, 255, 0.6); }
.wd .cw-slot.kind-good:not(.empty) { border-color: rgba(111, 216, 255, 0.55); }
.wd .cw-slot img { width: 30px; height: 30px; }
.wd .cw-slot.kind-look img { width: 34px; height: 34px; margin-top: 0; }
.wd .cw-slot > i { bottom: 3px; font-size: 9px; }
.wd .cw-slot .cw-empty { width: 16px; height: 16px; margin-top: 0; border-color: rgba(232, 196, 106, 0.35); border-width: 1px; }
.wd .cw-stats { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.wd .cw-box { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.wd .cw-box + .cw-box { padding-top: 8px; border-top: 1px solid rgba(232, 196, 106, 0.14); }
.wd .cw-box h4 { font-size: 14px; }
.wd .cw-row { font-size: 16px; line-height: 1.4; }
.wd .cw-row span { color: var(--mute); }
.wd .cw-row.cw-from { font-size: 14px; }
.wd .cw-note, .wd .style-note { font-size: 15px; line-height: 1.3; color: var(--mute); }
.wd .cw-info { padding: 9px 10px; border: 1px solid rgba(232, 196, 106, 0.4); border-radius: 6px; background: radial-gradient(circle at 15% 20%, rgba(255, 210, 63, 0.12), transparent 60%), rgba(0, 0, 0, 0.32); box-shadow: none; }
.wd .cw-info-top > img, .wd .cw-info-top > .cw-q { width: 40px; height: 40px; border: 1px solid rgba(232, 196, 106, 0.3); box-shadow: none; }
.wd .cw-info-top b { font-size: 17px; }
.wd .cw-info-top p { font-size: 15px; }
.wd .cw-acts .btn { margin: 0; }
.wd .cw-armory { gap: 10px; }
.wd .cw-kit, .wd .cw-rows { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.wd .cw-kit { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.wd .cw-kcol.wide .cw-cards { grid-template-columns: minmax(0, 1fr); }
.wd .cw-lab { padding: 0; color: var(--tan); font-size: 12px; letter-spacing: 0.12em; }
.wd .cw-card { border: 1px solid rgba(232, 196, 106, 0.18); border-radius: 6px; background: rgba(0, 0, 0, 0.3); box-shadow: none; }
.wd .cw-card.st-worn { border-color: rgba(63, 174, 106, 0.8); box-shadow: none; }
.wd .cw-card.sel, .wd .cw-cell.sel, .wd .cw-slot.sel { border-color: var(--gold); box-shadow: inset 0 0 10px rgba(255, 210, 63, 0.25); }
.wd .cw-card-tx b { font-size: 15px; }
.wd .cw-card-tx small, .wd .cw-card-tx em { font-size: 13px; }
.wd .cw-rows { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.wd .cw-rows .cw-lab { padding-top: 4px; }
.wd .cw-rows .cw-cell { width: 46px; height: 46px; border-width: 1px; }
/* The Cards tab (rpg/ui-character.js cardTileHTML): a card a row, your box in it over its name and where you stand with
   it; one you can't wear yet dimmed until you pick it. */
.wd .cw-deck { gap: 8px; }
.cw-ct { display: grid; gap: 6px; padding: 6px 6px 7px; border: 1px solid rgba(232, 196, 106, 0.18); border-radius: 12px; background: rgba(0, 0, 0, 0.3); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cw-ct:hover { border-color: rgba(232, 196, 106, 0.5); }
.cw-ct.sel { border-color: var(--gold); box-shadow: inset 0 0 10px rgba(255, 210, 63, 0.25), 0 0 10px rgba(255, 210, 63, 0.3); }
.cw-ct > .cw-skin-prev { height: 58px; margin: 0; font-size: 16px; }
.cw-ct > .cw-skin-prev > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-ct:is(.st-good, .st-earn, .st-club):not(.sel) > .cw-skin-prev { filter: saturate(0.6) brightness(0.78); }
.cw-ct-q { display: grid; place-items: center; box-sizing: border-box; border: 3px solid #2a2f5a; border-radius: 10px; background: linear-gradient(180deg, #14173a, #08091e); }
.cw-ct-tx { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 4px; }
.cw-ct-tx b { font: 400 16px/1.1 var(--display); color: #fff; }
.cw-ct-tx small { font-size: 13px; color: var(--mute, #9ea6cc); white-space: nowrap; }
.cw-ct.st-worn .cw-ct-tx small { color: #6fe39a; }
.wd .cz-box { gap: 10px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.wd .style-row { grid-template-columns: minmax(0, 1fr); gap: 5px; }
.wd .style-row > span { color: var(--tan); font: 400 11px/1 var(--display); letter-spacing: 0.14em; }
.wd .style-row.style-tint > span { display: none; }
.wd .style-chips button { min-height: 28px; padding: 0.18em 10px 0; border: 1px solid rgba(232, 196, 106, 0.28); border-radius: 999px; background: rgba(0, 0, 0, 0.3); box-shadow: none; }
.wd .style-chips button.sel { border-color: var(--gold); background: var(--gold); color: #0b1636; box-shadow: none; }
.wd .style-chips button.vip { border-style: dashed; border-color: rgba(185, 140, 255, 0.6); background: rgba(122, 58, 216, 0.16); box-shadow: none; }
.wd .style-chips button.vip.sel { border-style: solid; border-color: var(--gold); background: rgba(122, 58, 216, 0.5); color: #fff; }
.wd .style-outfits { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.wd .style-outfits button { padding: 8px 2px 6px; border: 1px solid rgba(185, 140, 255, 0.5); border-radius: 6px; box-shadow: none; font-size: 13px; }
.wd .style-outfits button img { width: 40px; height: 80px; }
.wd .style-outfits button.none b { height: 80px; }
.wd .style-outfits button.sel { border-color: var(--gold); box-shadow: inset 0 0 12px rgba(255, 210, 63, 0.25); }
.wd .style-vip-note { padding: 7px 9px; border: 1px solid rgba(185, 140, 255, 0.4); border-radius: 6px; font-size: 15px; box-shadow: none; }
/* a wide computer: wider columns; a tall one a bigger hero; a short one a smaller hero and plate */
@media (min-width: 1700px) { .wd-lb { grid-template-columns: minmax(0, 340px) minmax(0, 1fr) minmax(0, 340px); padding-left: max(32px, (100% - 1640px) / 2); padding-right: max(32px, (100% - 1640px) / 2); } }
@media (max-width: 1240px) { .wd-lb { grid-template-columns: minmax(0, 270px) minmax(0, 1fr) minmax(0, 270px); gap: 0 18px; } .wd-plate > b { font-size: 38px; } .wd .cw-doll { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wd-word { gap: 10px; font-size: clamp(28px, 3.2vw, 46px); } .wd-line { width: clamp(20px, 3vw, 60px); } }
@media (min-width: 761px) and (min-height: 880px) { .wd { --k: 7; } }
@media (min-width: 1500px) and (min-height: 1020px) { .wd { --k: 8; } }
@media (min-width: 761px) and (max-height: 800px) { .wd-col { gap: 8px; } .wd-p { padding-bottom: 9px; } .wd-ph { margin-bottom: 7px; padding-top: 8px; padding-bottom: 7px; } }
@media (min-width: 761px) and (max-height: 760px) { .wd { --k: 5; } .wd-plate > b { font-size: 34px; } .wd-go { gap: 5px; } .wd-word { font-size: clamp(32px, 3.8vw, 52px); } }
@media (min-width: 761px) and (max-height: 600px) { .wd { --k: 4; --feet: 112px; } .wd-lb { padding-top: 8px; padding-bottom: 8px; } .wd-plate > small, .wd-orn { display: none; } .wd-plate > b { font-size: 28px; } .wd-stats b { font-size: 16px; } .wd-word { font-size: 30px; } }
/* phones, and tablets held upright: the room (plate, hero, Save) first, then the tab's picks, then your hero, what you
   wear and your stats (side by side on a tablet) */
@media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) {
  .modal.wd-modal { padding-bottom: env(safe-area-inset-bottom, 0px); }
  .modal.wd-modal > .modal-x { top: calc(10px + var(--wd-top, 0px)); right: 10px; }
  .wd { --k: 5; --bar: 98px; --sceneh: clamp(360px, 58svh, 520px); --feet: calc(max(var(--sceneh), 100vw * 0.5583) * 0.205); }
  .wd-top { flex-wrap: wrap; padding: calc(8px + var(--wd-top)) 54px 8px 10px; }
  .wd .cw-tabs.top { order: 3; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); width: 100%; border-radius: 18px; }
  .wd .cw-tabs.top > button { grid-column: span 3; } .wd .cw-tabs.top > button:nth-child(n + 5) { grid-column: span 4; } /* seven tabs: the four short ones over Costumes, Colours and Special */
  .wd .cw-tabs button { justify-content: center; padding: 0 6px; font-size: 14px; }
  .wd-lb { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "scene" "r" "l"; height: auto; padding: 0 0 14px; gap: 0; }
  .wd-lb > .wd-bg { grid-area: scene; position: relative; inset: auto; z-index: 0; height: var(--sceneh); }
  .wd-bg img { height: max(100%, 100vw * 0.5583); }
  .wd-bg::after { background: linear-gradient(0deg, rgba(5, 8, 28, 0.85), rgba(5, 8, 28, 0.25) 26%, transparent 38%); }
  .wd-plate, .wd-lb > .wd-stage, .wd-go { grid-area: scene; }
  .wd-plate { align-self: start; min-width: 0; margin-top: 8px; padding: 8px 30px; }
  .wd-plate > b { font-size: 30px; }
  .wd-lb > .wd-stage { position: relative; align-self: stretch; }
  .wd-go { align-self: end; padding: 0 10px 12px; }
  .wd-word { gap: 10px; font-size: 32px; }
  .wd-line { width: 28px; }
  .wd .wd-go > p { font-size: 15px; }
  .wd-col { display: grid; gap: 10px; overflow: visible; padding: 12px 10px 0; }
  .wd .cw-doll { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); }
}
@media (min-width: 600px) and (max-width: 1100px) and (orientation: portrait) {
  .wd { --k: 6; --sceneh: clamp(420px, 50svh, 640px); }
  .wd-lb { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "scene scene" "r l"; gap: 0 10px; padding: 0 10px 14px; }
  .wd-col { padding: 12px 0 0; align-content: start; }
  .wd-plate > b { font-size: 38px; }
  .wd-word { font-size: 40px; }
}
/* a phone on its side: the room on the left as tall as the window, the tab's picks and then your hero, what you wear and
   your stats scrolling on the right */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 561px) {
  .modal.wd-modal { overflow: hidden; }
  .modal.wd-modal > .modal-x { top: 10px; right: max(10px, var(--sw-r, 0px)); }
  .wd { --k: 4; --bar: 50px; --feet: calc((100dvh - var(--bar) - var(--wd-top) - var(--sw-b, 0px)) * 0.205); }
  .wd-top { padding: calc(6px + var(--wd-top)) calc(54px + var(--sw-r, 0px)) 6px max(10px, var(--sw-l, 0px)); }
  .wd-brand { height: 32px; font-size: 14px; }
  .wd-brand b { display: none; }
  .wd .cw-tabs button { height: 28px; padding: 0 9px; font-size: 13px; }
  .wd-lb { grid-template-columns: minmax(0, 44%) minmax(0, 1fr); grid-template-areas: "plate cols" "stage cols" "go cols"; gap: 0 10px; height: calc(100dvh - var(--bar) - var(--wd-top) - var(--sw-b, 0px)); padding: 0 max(10px, var(--sw-r, 0px)) 0 0; }
  .wd-lb > .wd-bg { position: absolute; inset: 0 auto 0 0; width: 44%; }
  .wd-lb::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: var(--sw-b, 0px); background: #0b0a1c; } /* the home bar's strip under the room */
  .wd-bg img { height: max(100%, 44vw * 0.5583); }
  .wd-plate { margin-top: 4px; padding: 4px 24px; min-width: 0; }
  .wd-plate > small, .wd-orn { display: none; }
  .wd-plate > b { font-size: 22px; }
  .wd-stats b { font-size: 15px; }
  .wd-hero, .wd-shadow { left: 22%; }
  .wd-turn { width: 34px; height: 34px; font-size: 18px; }
  .wd-turn.l { left: calc(22% - 8px * var(--k) - 50px); }
  .wd-turn.r { left: calc(22% + 8px * var(--k) + 16px); }
  .wd-go { padding-bottom: 6px; gap: 3px; }
  .wd-word { gap: 8px; font-size: 22px; }
  .wd-line { width: 22px; }
  .wd .wd-go > p { font-size: 13px; }
  .wd-cols { grid-area: cols; position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; padding: 8px 0 10px; scrollbar-width: thin; scrollbar-color: rgba(232, 196, 106, 0.35) transparent; }
  .wd-cols > .wd-col { flex: none; overflow: visible; } /* each column its full height, one under the other */
}

/* The Class Hall (rpg/ui-classes.js; owner, 2026-11-03: "make the class selection window be full screen, and feel like
   the wardrobe experience"): the Classes window in the Wardrobe's frame above (.wd-*), the Gym House's hall painted over
   it (assets/class-hall/) with the four classes' banners on its walls. The class you look at stands painted on the dais
   (--feet up the painting, 19.8% of it), his banner glows (cut out of the painting along the cloth, so only the cloth
   lights up), and the dais burns in a hotter "power" colour --pw (a screen-blend glow vanishes on its light stone: a
   colour tint, a ring and additive light instead) with motes rising off it (a canvas). --cc is the class's own colour
   for words and edges, --ax where the hero stands across his picture, --fb the room under his feet. */
.wd.ch { --feet: calc(var(--imgh) * 0.198); --heroh: min(calc(var(--imgh) * 0.35), calc(100dvh - var(--bar) - var(--wd-top) - 300px)); --cc: #ff7a5a; --pw: var(--cc); }
.ch-bg { overflow: hidden; }
.ch-paint { position: absolute; left: 50%; bottom: 0; height: var(--imgh); aspect-ratio: 1920 / 1072; translate: calc(-50% + var(--px, 0) * -10px) calc(var(--py, 0) * -6px); scale: 1.02; transition: translate 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.ch-paint picture { display: contents; }
.ch-paint img { position: absolute; top: 0; bottom: auto; max-width: none; translate: none; }
.ch-paint .ch-art { left: 0; width: 100%; height: 100%; }
.ch-paint .ch-flag { top: 28.841%; height: 19.727%; transform-origin: 50% 0; filter: brightness(1.12) saturate(1.3); transition: filter 0.4s, scale 0.4s; }
.ch-paint .ch-flag.on { z-index: 1; scale: 1.05; animation: ch-flag 2.4s ease-in-out infinite; }
@keyframes ch-flag {
  0%, 100% { filter: brightness(1.35) saturate(1.6) contrast(1.05) drop-shadow(0 0 2px var(--bc)) drop-shadow(0 0 10px var(--bc)) drop-shadow(0 0 22px color-mix(in srgb, var(--bc) 65%, transparent)); }
  50% { filter: brightness(1.55) saturate(1.75) contrast(1.06) drop-shadow(0 0 3px var(--bc)) drop-shadow(0 0 16px var(--bc)) drop-shadow(0 0 34px color-mix(in srgb, var(--bc) 75%, transparent)); } }
/* Red clips to neon when saturated like the others: the Warrior's banner gets their glow and lift with its saturation
   held near the painting's (owner: "like others but keep its correct color"). */
.ch-paint .ch-flag[data-b="warrior"] { filter: brightness(1.1) saturate(1.1); }
.ch-paint .ch-flag[data-b="warrior"].on { animation-name: ch-flag-red; }
@keyframes ch-flag-red {
  0%, 100% { filter: brightness(1.24) saturate(1.1) contrast(1.05) drop-shadow(0 0 2px var(--bc)) drop-shadow(0 0 10px var(--bc)) drop-shadow(0 0 22px color-mix(in srgb, var(--bc) 65%, transparent)); }
  50% { filter: brightness(1.36) saturate(1.15) contrast(1.06) drop-shadow(0 0 3px var(--bc)) drop-shadow(0 0 16px var(--bc)) drop-shadow(0 0 34px color-mix(in srgb, var(--bc) 75%, transparent)); } }
/* The Assassin's crimson clips to neon the same way. The Paladin's white cloth burns out under any lift: it keeps the
   painting's light and glows round its edge only. */
.ch-paint .ch-flag[data-b="assassin"] { filter: brightness(1.1) saturate(1.1); }
.ch-paint .ch-flag[data-b="assassin"].on { animation-name: ch-flag-red; }
.ch-paint .ch-flag[data-b="paladin"] { filter: none; }
.ch-paint .ch-flag[data-b="paladin"].on { animation-name: ch-flag-white; }
@keyframes ch-flag-white {
  0%, 100% { filter: saturate(1.1) drop-shadow(0 0 2px var(--bc)) drop-shadow(0 0 10px var(--bc)) drop-shadow(0 0 22px color-mix(in srgb, var(--bc) 65%, transparent)); }
  50% { filter: brightness(1.04) saturate(1.15) drop-shadow(0 0 3px var(--bc)) drop-shadow(0 0 16px var(--bc)) drop-shadow(0 0 34px color-mix(in srgb, var(--bc) 75%, transparent)); } }
/* the dais: its stone takes the colour (texture kept), a pool and a column of light, the gold ring burning, rings rolling out */
.ch-pool, .ch-tint, .ch-rim, .ch-wave, .ch-column { position: absolute; left: 50%; pointer-events: none; }
.ch-pool { top: 80.3%; width: 26%; height: 9%; translate: -50% -50%; border-radius: 50%; mix-blend-mode: plus-lighter; animation: ch-pulse 1.6s ease-in-out infinite;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--pw) 70%, white 30%), color-mix(in srgb, var(--pw) 55%, transparent) 40%, color-mix(in srgb, var(--pw) 20%, transparent) 72%, transparent); }
.ch-tint { top: 80.25%; width: 22.8%; height: 7.6%; translate: -50% -50%; border-radius: 50%; mix-blend-mode: color; background: radial-gradient(closest-side, var(--pw), var(--pw) 84%, transparent); }
.ch-rim, .ch-wave { top: 80.4%; width: 18.6%; height: 6%; translate: -50% -50%; border-radius: 50%; }
.ch-rim { border: max(3px, 0.26vw) solid color-mix(in srgb, var(--pw) 55%, white 45%); animation: ch-pulse 1.6s ease-in-out infinite;
  box-shadow: 0 0 4px #fff, 0 0 10px var(--pw), 0 0 26px var(--pw), 0 0 54px var(--pw), 0 0 100px color-mix(in srgb, var(--pw) 60%, transparent), inset 0 0 12px var(--pw), inset 0 0 44px color-mix(in srgb, var(--pw) 80%, transparent); }
.ch-wave { border: max(2px, 0.2vw) solid color-mix(in srgb, var(--pw) 60%, white 40%); box-shadow: 0 0 10px var(--pw), 0 0 28px var(--pw), inset 0 0 12px var(--pw); opacity: 0; animation: ch-wave 2.4s ease-out infinite; }
.ch-wave.w2 { animation-delay: 1.2s; }
.ch-column { bottom: 19.4%; width: 16%; height: 60%; translate: -50% 0; mix-blend-mode: plus-lighter; opacity: 0.75; animation: ch-beam 1.6s ease-in-out infinite;
  background: linear-gradient(0deg, color-mix(in srgb, var(--pw) 75%, transparent), color-mix(in srgb, var(--pw) 28%, transparent) 40%, transparent 85%);
  -webkit-mask-image: radial-gradient(50% 100% at 50% 100%, #000 35%, transparent 80%); mask-image: radial-gradient(50% 100% at 50% 100%, #000 35%, transparent 80%); }
@keyframes ch-wave { 0% { opacity: 0.95; scale: 0.3; } 70% { opacity: 0.35; } 100% { opacity: 0; scale: 1.45; } }
@keyframes ch-pulse { 0%, 100% { opacity: 0.78; } 50% { opacity: 1; } }
@keyframes ch-beam { 0%, 100% { opacity: 0.6; } 50% { opacity: 0.85; } }
.ch-bg::after { background: linear-gradient(90deg, rgba(5, 8, 28, 0.62), transparent 26%, transparent 74%, rgba(5, 8, 28, 0.62)), linear-gradient(0deg, rgba(5, 8, 28, 0.8), rgba(5, 8, 28, 0.2) 20%, transparent 32%), radial-gradient(120% 90% at 50% 60%, transparent 55%, rgba(4, 4, 16, 0.5)); }
.ch-fx { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; }
/* the tabs: each class's icon and name, YOU on yours. They take the same room whichever class you look at: with five
   classes or more under 1240 px only the picked tab names its class, and where a tab shows its icon alone, YOU is a gold
   dot on it (.dot below). */
.ch .cw-tabs button { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 0 14px 0 8px; }
.ch .cw-tabs button img { width: 24px; height: 24px; image-rendering: pixelated; }
.ch .cw-tabs em { padding: 3px 6px 2px; border-radius: 4px; background: var(--gold); color: #3a2200; font: 400 10px/1 var(--display); font-style: normal; letter-spacing: 0.08em; }
@media (max-width: 1239px) {
  .ch .cw-tabs.more button:not(.on) { width: 40px; padding: 0; justify-content: center; }
  .ch .cw-tabs.more button:not(.on) span { display: none; }
  .ch .cw-tabs.more button:not(.on) em { position: absolute; top: 3px; left: calc(50% + 6px); width: 9px; height: 9px; padding: 0; border-radius: 50%; font-size: 0; box-shadow: 0 0 0 2px #0a1030; }
}
/* the plate: its role, its name, four stats in pips */
.ch-role { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 7px; }
.ch-role > span { white-space: nowrap; }
.ch-role svg { width: 13px; height: 13px; }
.ch-rare { padding: 2px 6px 1px; border: 1px solid var(--cc); border-radius: 4px; color: var(--cc); font-style: normal; letter-spacing: 0.12em; }
.ch-stats { display: flex; flex-wrap: wrap; justify-content: center; row-gap: 8px; margin-top: 3px; }
.ch-stats > span { display: grid; justify-items: center; gap: 5px; padding: 0 13px; }
.ch-stats > span + span { border-left: 1px solid var(--line); }
.ch-stats small { display: inline-flex; align-items: center; gap: 5px; color: var(--soft); font: 400 10px/1 var(--display); letter-spacing: 0.16em; text-transform: uppercase; }
.ch-stats small svg { width: 11px; height: 11px; color: var(--sc); }
.ch-pips { display: flex; gap: 3px; }
.ch-pips i { width: 13px; height: 7px; border-radius: 1px; background: rgba(255, 255, 255, 0.12); }
.ch-pips i.on { background: var(--sc); box-shadow: 0 0 6px color-mix(in srgb, var(--sc) 60%, transparent); }
/* the hero on the dais: a breath, out one side and in from the other on ‹ ›, a ring of the class's colour as he lands */
.ch-hero { position: absolute; z-index: 1; left: calc(50% + var(--px, 0) * 5px); bottom: calc(var(--feet) - var(--heroh) * var(--fb, 0)); width: auto; max-width: none; height: var(--heroh); translate: calc(var(--ax, 50%) * -1) 0; transform-origin: var(--ax, 50%) 98%; pointer-events: none;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 22px color-mix(in srgb, var(--cc) 35%, transparent)); animation: ch-idle 2.6s ease-in-out infinite; transition: left 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.ch-px .ch-hero { height: calc(var(--heroh) * 0.8); } /* a rare class: its portrait */
.ch-hero.out { animation: ch-out 0.18s ease-in forwards; }
.ch-hero.in { animation: ch-in 0.42s cubic-bezier(0.2, 0.9, 0.25, 1.2), ch-idle 2.6s ease-in-out 0.42s infinite; }
@keyframes ch-idle { 0%, 100% { scale: 1 1; } 50% { scale: 1.006 1.016; } }
@keyframes ch-out { to { opacity: 0; translate: calc(var(--ax, 50%) * -1 + var(--dir, 1) * -46px) 0; filter: brightness(2) blur(1px); } }
@keyframes ch-in { from { opacity: 0; translate: calc(var(--ax, 50%) * -1 + var(--dir, 1) * 46px) 6px; filter: brightness(2.4); } }
.ch-shadow { position: absolute; left: 50%; bottom: var(--feet); width: calc(var(--heroh) * 0.42); height: calc(var(--heroh) * 0.07); translate: -50% 45%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), transparent); }
.ch-ring { position: absolute; left: 50%; bottom: var(--feet); width: calc(var(--heroh) * 0.9); height: calc(var(--heroh) * 0.2); translate: -50% 50%; border: 3px solid var(--cc); border-radius: 50%; opacity: 0; pointer-events: none; }
.ch-ring.go { animation: ch-ring 0.7s ease-out; }
@keyframes ch-ring { 0% { opacity: 0.95; scale: 0.3; } 100% { opacity: 0; scale: 1.25; } }
.ch .wd-turn { bottom: calc(var(--feet) + var(--heroh) * 0.32); width: 46px; height: 46px; font: 400 26px/1 var(--display); }
.ch .wd-turn.l { left: calc(50% - var(--heroh) * 0.5 - 46px); }
.ch .wd-turn.r { left: calc(50% + var(--heroh) * 0.5); }
/* the big word sized to the middle column, so SWITCH TO GUARDIAN fits as CHOOSE LORD does; two centred lines under it */
.ch .wd-go { justify-self: stretch; container-type: inline-size; }
.ch .wd-word { font-size: clamp(18px, calc((88cqi - 36px) / (var(--chars, 14) * 0.84)), 54px); }
.ch .wd-word b { color: var(--cc); font-weight: 400; text-shadow: 0 3px 0 #2a1400, 0 0 24px color-mix(in srgb, var(--cc) 60%, transparent); }
.ch .wd-line { width: clamp(20px, 6cqi, 110px); }
.ch .wd-go > p { display: grid; justify-items: center; gap: 4px; text-wrap: balance; }
.ch .wd-go > p > span { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 12px; }
.ch .wd-word.far { opacity: 0.7; } /* not here, not yet, or locked: the reason is under it */
/* the panels: the class and its match-ups, its gear from T1 to T6, its techniques */
.ch-about { border-top: 2px solid var(--cc); }
.ch-blurb { color: #fff; font-size: 20px; line-height: 1.15; text-align: center; text-wrap: balance; }
.ch-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ch-vs > div { display: grid; justify-items: center; gap: 3px; padding: 7px 6px 8px; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 6px; background: rgba(0, 0, 0, 0.28); text-align: center; }
.ch-vs .up { border-color: rgba(125, 255, 154, 0.28); }
.ch-vs .down { border-color: rgba(255, 143, 143, 0.28); }
.ch-vs span { color: var(--tan); font: 400 10px/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; }
.ch-vs img { width: 42px; height: 48px; }
.ch-vs b { color: #fff; font-weight: 400; font-size: 19px; line-height: 1; }
.ch-vs small { font-size: 15px; line-height: 1; }
.ch-vs .up small { color: #7dff9a; }
.ch-vs .down small { color: #ff8f8f; }
.ch-gear { display: grid; gap: 6px; }
.ch-gear > div { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 10px; padding: 5px 8px 5px 5px; border: 1px solid rgba(232, 196, 106, 0.16); border-radius: 6px; background: rgba(0, 0, 0, 0.28); }
.ch-ic { grid-row: span 2; display: flex; align-items: center; gap: 2px; }
.ch-ic img { width: 34px; height: 34px; padding: 2px; border-radius: 5px; background: rgba(255, 255, 255, 0.05); image-rendering: pixelated; }
.ch-ic i { color: var(--tan); font-style: normal; font-size: 14px; }
.ch-gear b { color: #fff; font-weight: 400; font-size: 18px; line-height: 1; }
.ch-gear b em { margin-left: 5px; color: var(--mute); font-style: normal; font-size: 14px; }
.ch-gear small { color: var(--soft); font-size: 14px; line-height: 1.05; }
.ch-note { color: var(--mute); font-size: 15px; line-height: 1.2; }
.ch-tech { display: grid; gap: 8px; }
.ch-tech > div { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 3px 10px; padding: 7px 9px 8px 7px; border: 1px solid rgba(255, 255, 255, 0.08); border-left: 3px solid var(--cc); border-radius: 6px; background: rgba(0, 0, 0, 0.3); }
.ch-tech img { grid-row: span 2; width: 48px; height: 48px; image-rendering: pixelated; }
.ch-th { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ch-tech b { color: #fff; font-weight: 400; font-size: 20px; line-height: 1; }
.ch-cost { display: inline-flex; gap: 2px; }
.ch-cost i { width: 7px; height: 11px; clip-path: polygon(60% 0, 0 58%, 42% 58%, 30% 100%, 100% 38%, 56% 38%); background: var(--gold); }
.ch-tech p { margin: 0; color: var(--soft); font-size: 15px; line-height: 1.1; }
@media (min-width: 761px) and (max-height: 760px) { .ch-arsenal .ch-note { display: none; } .ch-blurb { font-size: 18px; } }
/* phones and tablets held upright: the hall on top (on a phone its own upright painting, no banners), then the class
   and its gear, then the techniques */
@media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) {
  .wd.ch { --imgh: max(var(--sceneh), 100vw * 0.5583); --feet: calc(var(--imgh) * 0.198); --heroh: min(calc(var(--imgh) * 0.33), calc(var(--sceneh) - 230px)); }
  .ch .wd-lb { grid-template-areas: "scene" "l" "r"; }
  .ch .cw-tabs.top { display: flex; width: auto; max-width: 100%; margin: 0 auto; border-radius: 999px; }
  .ch .wd-turn { width: 42px; height: 42px; }
  .ch .wd-turn.l { left: 10px; }
  .ch .wd-turn.r { left: auto; right: 10px; }
  .ch .wd-go { padding-bottom: 14px; }
  .ch-stats { flex-wrap: nowrap; }
  .ch-stats > span { padding: 0 6px; }
  .ch-stats small { gap: 3px; letter-spacing: 0.06em; }
  .ch-pips i { width: 9px; }
}
@media (max-width: 760px) and (orientation: portrait) {
  .wd.ch { --imgh: max(var(--sceneh), 100vw * 1.6125); --heroh: min(calc(var(--imgh) * 0.29), calc(var(--sceneh) - 230px)); }
  .ch-paint { aspect-ratio: 720 / 1161; }
  .ch-paint .ch-flag { display: none; }
  .ch-pool { width: 72%; }
  .ch-rim, .ch-wave { width: 53.8%; }
  .ch-tint { width: 66%; }
  .ch-column { width: 46%; }
  /* the tabs: a row of their own under Classes, the width of the screen, for every class (beside it only a short name
     fit, so Lord's sat there and Guardian's dropped under it); the picked one named, the others' icons sharing the rest,
     and from six classes icons only (the plate under them names it) */
  .ch .cw-tabs.top { flex: 0 0 calc(100% + 44px); box-sizing: border-box; max-width: none; margin: 0 -44px 0 0; }
  .ch .cw-tabs.top button { flex: 1 1 0; width: auto; min-width: 0; padding: 0; justify-content: center; }
  .ch .cw-tabs.top button.on { flex: none; padding: 0 14px 0 8px; }
  .ch .cw-tabs.top button:not(.on) span, .ch .cw-tabs.lots button span { display: none; }
  .ch .cw-tabs.lots button.on { flex: 1 1 0; padding: 0; }
  .ch .cw-tabs.top em { position: absolute; top: 3px; left: calc(50% + 6px); width: 9px; height: 9px; padding: 0; border-radius: 50%; font-size: 0; box-shadow: 0 0 0 2px #0a1030; }
  .ch .cw-tabs.top:not(.lots) button.on em { left: 26px; }
  .ch-plate { box-sizing: border-box; max-width: calc(100% - 16px); padding-inline: 12px; }
  .ch-plate > small { letter-spacing: 0.2em; }
}
@media (min-width: 600px) and (max-width: 1100px) and (orientation: portrait) { .ch .wd-lb { grid-template-areas: "scene scene" "l r"; } }
/* a phone on its side: the hall on the left, as in the Wardrobe */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 561px) {
  .wd.ch { --imgh: max(calc(100dvh - var(--bar) - var(--wd-top) - var(--sw-b, 0px)), 44vw * 0.5583); --heroh: min(calc(var(--imgh) * 0.33), calc(100dvh - var(--bar) - var(--wd-top) - 170px)); }
  .ch .wd-lb { grid-template-areas: "plate cols" "stage cols" "go cols"; }
  .ch-hero, .ch-shadow, .ch-ring { left: 22%; }
  .ch .wd-turn { width: 34px; height: 34px; font-size: 20px; }
  .ch .wd-turn.l { left: calc(22% - var(--heroh) * 0.5 - 34px); }
  .ch .wd-turn.r { left: calc(22% + var(--heroh) * 0.5); }
  .ch .cw-tabs button { height: 28px; }
  .ch .cw-tabs button:not(.on) span { display: none; }
  .ch .cw-tabs button:not(.on) { width: 36px; padding: 0; justify-content: center; }
  .ch .cw-tabs button:not(.on) em { position: absolute; top: 1px; left: calc(50% + 6px); width: 9px; height: 9px; padding: 0; border-radius: 50%; font-size: 0; box-shadow: 0 0 0 2px #0a1030; }
  .ch-stats { flex-wrap: nowrap; }
  .ch-stats > span { padding: 0 5px; }
  .ch-stats small { gap: 3px; letter-spacing: 0.04em; }
  .ch-pips i { width: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .ch-hero, .ch-hero.in, .ch-pool, .ch-rim, .ch-column { animation: none; }
  .ch-wave { display: none; }
  .ch-paint .ch-flag.on { animation: none; filter: brightness(1.4) saturate(1.6) drop-shadow(0 0 10px var(--bc)); }
  .ch-paint, .ch-hero { transition: none; }
}

/* What's new since your last visit (news.js): the ⓘ tab's count of dev log entries this browser hasn't been shown, and
   the chat line naming them (its Read is styled like the X post line's button, .xp-line). The 🛡 Squad tab wears the same
   count for a leader: the applications waiting (rpg/ui-squads.js syncSquadBadge). */
.side-tabs button[data-apps], .side-tabs button[data-news] { position: relative; }
.side-tabs button[data-apps]::after, .side-tabs button[data-news]::after { content: attr(data-news); position: absolute; top: 1px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 999px; background: var(--red); color: #fff; font-size: 12px; font-style: normal; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px #141d40; pointer-events: none; }
.side-tabs button[data-apps]::after { content: attr(data-apps); }
.chat-log .m-news { color: #fff3c4; }
/* 📋 The Marketplace in the Trade chat (ui.js marketLineHTML): a new offer with View, or a trade; Sold or Gone once over. */
.chat-log .m-market { color: #d6f5da; }
.chat-log .mk-end { font-style: normal; font-size: 12px; font-weight: 700; padding: 0 5px; border-radius: 3px; background: #2e3d74; color: var(--muted); }
/* A blow your guard stopped (rpg/battle-scene.js blockHit): BLOCKED, big and white-hot over the shield's force field. */
.bt-stamp.blocked { font-size: 38px; color: #fff; text-shadow: 3px 3px 0 #1b1424, -2px -2px 0 #1b1424, 2px -2px 0 #1b1424, -2px 2px 0 #1b1424, 0 0 18px rgba(159, 224, 255, 0.9); }
@media (max-width: 720px) { .bt-stamp.blocked { font-size: 28px; } }
/* The Most Wanted (rpg/ui-wanted.js): Blitz's wall as a window, seven parchment wanted posters pinned to dark boards (the
   bounty you're on ringed in crimson, the done ones stamped CAUGHT), then the one picked in the journey's card style. */
.wanted-book .wb-icon { font-size: 28px; vertical-align: -3px; }
.wanted-book .wb-sub { margin: 0 0 12px; color: #c9d2ff; font-size: 15px; line-height: 1.4; }
.wanted-book .wb-sub b { display: block; margin-bottom: 2px; color: var(--gold); font-weight: 400; font-size: 17px; }
.wb-wall { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(88px, 1fr); gap: 8px; overflow-x: auto; margin: 0 0 12px; padding: 14px 12px 12px; border-radius: 12px; border: 2px solid #4a2f18; background: repeating-linear-gradient(90deg, #3a2414 0 46px, #33200f 46px 48px), #3a2414; box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.55); scroll-snap-type: x proximity; scrollbar-width: thin; }
.wb-poster { --tilt: -1.2deg; position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 176px; padding: 8px 6px 8px; border: 0; border-radius: 2px; background: linear-gradient(170deg, #f1e3bd, #e2cd99); color: #2a1a0e; font: inherit; text-align: center; cursor: pointer; transform: rotate(var(--tilt)); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.4), inset 0 0 0 2px #c9ae78, inset 0 0 18px rgba(120, 80, 30, 0.25); scroll-snap-align: center; transition: transform 0.15s; }
.wb-poster:nth-child(even) { --tilt: 1deg; }
.wb-poster:hover, .wb-poster:focus-visible { transform: rotate(0) translateY(-2px); outline: none; }
.wb-poster::before { content: ""; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff8a8a, #b01a24 60%, #5a0a10); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.45); }
.wb-head { font-family: var(--display); font-size: 16px; line-height: 1; letter-spacing: 1px; text-transform: uppercase; color: #7a1a12; }
.wb-pic { display: flex; align-items: center; justify-content: center; width: 74px; height: 74px; border: 2px solid #8a6a3a; border-radius: 2px; background: radial-gradient(circle at 50% 40%, #e9d6a6, #cdb47c); overflow: hidden; }
.wb-pic img, .wb-mini img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.wb-name { font-size: 13px; font-weight: 400; line-height: 1.15; min-height: 2.3em; color: #2a1a0e; }
.wb-what { font-size: 12px; color: #6a4a2a; }
.wb-tag { display: inline-flex; align-items: center; gap: 3px; margin-top: auto; padding: 1px 8px; border-radius: 999px; font-style: normal; font-size: 12px; line-height: 18px; color: #fff3d8; background: #6a4a2a; }
.wb-tag.now { background: #c0303a; } .wb-tag.ok { background: #2f8a4a; } .wb-tag.lock { background: #5a5a6a; }
.wb-poster.now { box-shadow: 0 4px 0 rgba(0, 0, 0, 0.4), inset 0 0 0 2px #c9ae78, 0 0 0 3px #e0303a, 0 0 16px rgba(224, 48, 58, 0.55); }
.wb-poster.lock { filter: saturate(0.55) brightness(0.86); }
.wb-poster.done::after { content: "CAUGHT"; position: absolute; top: 42px; left: 50%; padding: 1px 6px; border: 2px solid #b01a24; border-radius: 3px; color: #b01a24; font-family: var(--display); font-size: 17px; letter-spacing: 1px; background: rgba(241, 227, 189, 0.72); transform: translateX(-50%) rotate(-14deg); }
.wb-poster.last .wb-head { color: #a8790a; }
.wb-poster[aria-pressed="true"] { outline: 3px solid var(--gold); outline-offset: 3px; }
.wb-card .wb-mini { flex: none; width: 56px; height: 56px; border-radius: 10px; background: radial-gradient(circle at 50% 40%, #e9d6a6, #cdb47c); box-shadow: inset 0 0 0 2px #8a6a3a; overflow: hidden; }
.wanted-book .actions { flex-wrap: wrap; }
@media (max-width: 720px) { .wb-wall { grid-auto-columns: 104px; gap: 10px; } .wb-pic { width: 84px; height: 84px; } .wanted-book .wb-sub { font-size: 14px; } }
/* The Most Wanted, rebuilt (2026-10-10, rpg/ui-wanted.js): where you are, the road in three stretches (the way in, the
   crown, the long road) with what each pays, stretch dividers on the wall, regular quests' posters, the prizes and the
   seven on the wall; the journey's fork at the end of the first map's story (rpg/ui-quests.js); the 𝕏 Raid step's button. */
.wb-top { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; --hc: #e0303a; }
.wb-top-text { min-width: 0; }
.wb-top-text h3 { margin: 2px 0; font-size: 20px; line-height: 1.2; color: #fff; font-weight: 400; }
.wb-top-text p { margin: 0; color: #c9d2ff; font-size: 15px; }
.wb-road { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 6px; margin: 0 0 12px; }
.wb-leg { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 9px 10px; border-radius: 12px; border: 2px solid color-mix(in srgb, var(--lc) 50%, #2e3d74); background: linear-gradient(180deg, color-mix(in srgb, var(--lc) 16%, rgba(3, 10, 44, 0.75)), rgba(3, 10, 44, 0.75)); color: #dfe6ff; font: inherit; text-align: left; cursor: pointer; }
.wb-leg:hover, .wb-leg:focus-visible { border-color: var(--lc); outline: none; }
.wb-leg.now { box-shadow: 0 0 0 2px var(--lc), 0 0 14px color-mix(in srgb, var(--lc) 45%, transparent); }
.wb-leg-k { color: var(--lc); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
.wb-leg b { font-family: var(--display); font-weight: 400; font-size: 18px; line-height: 1.1; color: #fff; }
.wb-leg-lv { font-size: 13px; color: var(--muted); }
.wb-leg-bar { display: block; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.wb-leg-bar i { display: block; height: 100%; background: var(--lc); }
.wb-leg-pays { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 22px; }
.wb-leg-pays em { margin-left: auto; font-style: normal; font-size: 12px; color: #fff3c4; white-space: nowrap; }
.wb-arrow { display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--gold); font-size: 20px; }
.wb-arrow small { font-size: 11px; color: var(--muted); white-space: nowrap; }
.wb-prize { image-rendering: pixelated; vertical-align: middle; }
.wb-prize.crown { font-size: 15px; line-height: 20px; }
.wb-prizes { display: flex; justify-content: center; gap: 3px; min-height: 20px; }
.wb-prizes.big { display: inline-flex; margin-left: 8px; vertical-align: middle; }
.wanted-book .wb-wall { display: flex; }
.wanted-book .wb-poster { flex: 0 0 100px; }
.wb-div { flex: 0 0 26px; display: flex; align-items: center; justify-content: center; padding: 6px 2px; border-radius: 6px; background: color-mix(in srgb, var(--lc) 35%, #33200f); color: #fff3d8; font-family: var(--display); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.wb-poster.quest .wb-head { color: #1a4a7a; }
.wb-poster.p-long .wb-head { color: #a8790a; }
.wb-poster.quest.done::after { content: "DONE"; border-color: #2f8a4a; color: #2f8a4a; }
.wb-poster.pass { filter: saturate(0.45) brightness(0.8); }
.wb-tag.pass { background: #6a6a7a; }
.wb-reward .wb-prize { margin: 0 1px; }
/* The thirteen on the wall, at the top of Blitz's window (rpg/ui-wanted.js; owner, 2026-10-12: "show them better at the
   top"): a frame each on a dark band with a red glow, the one your quest hunts lit red, one you haven't met only its dark
   shape. Seven a row; on phones two rows that scroll sideways, like the poster wall under them. */
.wb-seven { margin: 0 0 12px; padding: 9px 10px 11px; border-radius: 14px; border: 2px solid rgba(224, 48, 58, 0.5); background: radial-gradient(90% 80% at 50% 0%, rgba(224, 48, 58, 0.2), transparent 70%), linear-gradient(180deg, #1a1446, #0c1238); }
.wb-seven-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 2px 8px; }
.wb-seven-h b { font-family: var(--display); font-weight: 400; font-size: 18px; line-height: 1.1; color: var(--gold); }
.wb-seven-h small { font-size: 13px; color: var(--muted); text-align: right; }
.wb-mws { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.wb-mw { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 5px 4px 7px; border-radius: 10px; border: 2px solid #34468a; background: linear-gradient(180deg, #1a2663, #141e52); color: #dfe6ff; font: inherit; text-align: center; cursor: pointer; transition: transform 0.15s, border-color 0.15s; }
.wb-mw:hover, .wb-mw:focus-visible { border-color: var(--gold); transform: translateY(-2px); outline: none; }
.wb-mw-pic { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; margin-bottom: 2px; border-radius: 7px; background: radial-gradient(circle at 50% 62%, rgba(224, 48, 58, 0.32), rgba(3, 10, 44, 0.85) 72%); overflow: hidden; }
.wb-mw-pic img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.wb-mw b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 400; line-height: 1.2; color: #fff; }
.wb-mw small { font-size: 12px; line-height: 1.2; color: var(--muted); }
.wb-mw-st { max-width: 100%; margin-top: 3px; padding: 0 7px; overflow: hidden; text-overflow: ellipsis; border-radius: 99px; font-style: normal; font-size: 11px; line-height: 17px; white-space: nowrap; background: rgba(255, 255, 255, 0.1); color: #c9d2ff; }
.wb-mw-st.hunt { background: #c0303a; color: #fff; }
.wb-mw-st.ok { background: #2f8a4a; color: #eaffef; }
.wb-mw.long { border-color: rgba(255, 210, 63, 0.5); }
.wb-mw.long .wb-mw-st:not(.hunt, .ok) { background: rgba(255, 210, 63, 0.16); color: var(--gold); }
.wb-mw.hunt { border-color: #e0303a; animation: wb-hunt 1.8s ease-in-out infinite; }
@keyframes wb-hunt { 0%, 100% { box-shadow: 0 0 6px rgba(224, 48, 58, 0.45); } 50% { box-shadow: 0 0 16px rgba(255, 70, 80, 0.9); } }
@media (prefers-reduced-motion: reduce) { .wb-mw.hunt { animation: none; box-shadow: 0 0 12px rgba(224, 48, 58, 0.7); } }
.wb-mw.hid .wb-mw-pic { background: radial-gradient(circle at 50% 62%, rgba(79, 107, 214, 0.3), rgba(3, 10, 44, 0.85) 72%); }
.wb-mw.hid b { color: #8f9bd0; letter-spacing: 2px; }
/* One of the seven you haven't met yet: a "?" where its picture would be (rpg/ui-wanted.js). */
.wb-hid { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-family: var(--display); font-size: 44px; font-weight: 400; line-height: 1; color: rgba(90, 58, 26, 0.5); }
.wb-mini .wb-hid { font-size: 32px; }
.wb-mw .wb-hid { font-size: 34px; color: rgba(255, 210, 63, 0.55); }
.xr-go { margin-top: 6px; }
.jr-fork { margin: 10px 0 4px; padding: 10px; border-radius: 12px; border: 2px dashed rgba(255, 210, 63, 0.5); background: rgba(255, 210, 63, 0.06); }
.jr-fork-k { margin: 0 0 8px; font-family: var(--display); font-size: 17px; color: var(--gold); }
.jr-ways { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.jr-way { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 10px; border: 1px solid #2e3d74; background: rgba(3, 10, 44, 0.55); font-size: 14px; line-height: 1.35; color: #c9d2ff; }
.jr-way b { font-weight: 400; font-size: 16px; color: #fff; }
.jr-way.long { border-color: rgba(224, 48, 58, 0.6); }
.jr-way .btn { align-self: flex-start; margin-top: 4px; }
@media (max-width: 720px) {
  .wb-road { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .wb-arrow { flex-direction: row; gap: 6px; font-size: 15px; }
  .wb-arrow:not(.fork) { display: none; }
  .wanted-book .wb-poster { flex-basis: 104px; }
  .wb-top { gap: 10px; }
  .wb-top-text h3 { font-size: 17px; }
  .jr-ways { grid-template-columns: 1fr; }
  .wb-mws { grid-template-columns: none; grid-template-rows: repeat(2, auto); grid-auto-flow: column; grid-auto-columns: 84px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; scrollbar-width: thin; }
  .wb-mw { scroll-snap-align: start; }
  .wb-seven-h { flex-direction: column; align-items: flex-start; gap: 2px; }
}
.chat-log .m-answer { color: #bfe9ff; } /* 💡 a quick answer to your own question (quick-answers.js), More opens the FAQ */

/* Explicit confirmation before a raid: readable and easy to tick on phones. */
.raid-ready-check { padding: 10px; border: 2px solid var(--gold); border-radius: 8px; background: #13214a; }
.raid-ready-check p { margin: 6px 0; font-size: 15px; }
.raid-ready-check label { display: flex; gap: 10px; align-items: center; min-height: 44px; font-weight: bold; cursor: pointer; }
.raid-ready-check input { width: 24px; height: 24px; accent-color: var(--gold); flex: none; }
.raid-ready-status { margin-left: auto; color: var(--gold); font-size: 14px; white-space: nowrap; }
.lease-card.checking-ready .expires, .lease-card.checking-ready .terms, .lease-card.checking-ready .rec, .lease-card.checking-ready .lease-top p { display: none; }
.lease-card.checking-ready { max-height: calc(100dvh - 80px - env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain; }

/* X drops (xdrop-ui.js): the send window (the form, your drops with their posts and links), the claim window for a drop's
   link (the three steps, the outcome) and the Card Hunt window's row. */
.xd-book .sub b { color: var(--gold); font-weight: 400; }
.xd-field { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; font-size: 17px; }
.xd-field input { flex: 1 1 auto; min-width: 0; padding: 8px 10px; border-radius: 8px; border: 2px solid #3b4c80; background: #141d40; color: #fff; font: 18px var(--ui-font); }
.xd-packs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 10px; }
.xd-pack { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 10px; padding: 8px 10px; border-radius: 10px; background: #141d40; border: 2px solid #3b4c80; color: #fff; text-align: left; cursor: pointer; font: 16px var(--ui-font); }
.xd-pack img { grid-row: 1 / 3; width: 34px; height: auto; }
.xd-pack b { color: var(--gold); font-weight: 400; }
.xd-pack span { color: var(--muted); font-size: 15px; }
.xd-pack.on { border-color: var(--gold); background: rgba(255, 210, 63, 0.15); }
.xd-check { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; font-size: 16px; color: #cfd8f0; line-height: 1.3; }
.xd-check input { margin-top: 3px; }
.xd-msg:empty { display: none; }
.xd-msg.is-err { color: #ffb38a; }
.xd-msg.is-ok { color: #7dffb0; }
.xd-why { color: var(--gold); }
.xd-share { display: grid; gap: 8px; margin: 10px 0; }
.xd-text { width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 8px; border: 2px solid #3b4c80; background: #0e1636; color: #f1ecd8; font: 16px/1.35 var(--ui-font); resize: vertical; }
/* Copy, Post on X and Share wear the reveal's buttons (zrv-btn), but /hunt/reveal.css only comes with a card's reveal: in
   the X drop window they'd be the browser's pale grey ones with faint words (owner, 2026-11-01: "improve the buttons
   transparencies so its readable"). Solid here, whatever has loaded. */
.xd-share .zrv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; border: 2px solid #4a5f9e; border-radius: 12px; background: #1b2654; color: #f1ecd8; font: 400 17px var(--ui-font); cursor: pointer; }
.xd-share .zrv-btn.is-gold { border-color: #3a2a00; color: #06124f; background: linear-gradient(180deg, #ffe066, #e8b52a); box-shadow: inset 0 0 0 1px #fff3b0, 0 3px 0 #8a6410; font: 16px var(--display); letter-spacing: 0.02em; }
.xd-share .zrv-btn:hover { filter: brightness(1.12); }
.xd-share .zrv-btn:active { transform: translateY(2px); }
.xd-share .zrv-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.xd-h3 { margin: 14px 0 6px; font: 18px var(--display); color: var(--gold); }
.xd-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 16px; color: #cfd8f0; }
.xd-list li { padding: 6px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); }
.xd-list b { color: var(--gold); font-weight: 400; }
.xd-state.s-waiting { color: #7dffb0; }
.xd-state.s-done { color: var(--gold); }
.xd-state.s-void, .xd-state.s-returned { color: var(--muted); }
.xd-top { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: start; margin: 4px 0 8px; }
.xd-top .sub { margin: 0; }
.xd-card, .xd-packpic { width: 96px; height: auto; border-radius: 8px; }
.xd-card { border: 2px solid var(--gold); }
.xd-outcome { margin: 8px 0 0; color: #7dffb0; font-size: 17px; line-height: 1.3; }
.xd-row { margin: 8px 0 10px; padding: 8px 12px; border-radius: 10px; background: rgba(255, 210, 63, 0.07); border: 1px solid rgba(255, 210, 63, 0.3); font-size: 16px; color: #cfd8f0; }
.xd-row p { margin: 4px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.xd-row b { color: var(--gold); font-weight: 400; }
.xd-row .btn-sm { padding: 6px 12px; font-size: 15px; }
@media (max-width: 480px) { .xd-packs { grid-template-columns: 1fr; } .xd-top { grid-template-columns: 72px 1fr; } }
/* 🗳 The drop-time vote (dropvote-ui.js): its row in the Card Hunt window, and the vote window's days and hours. */
.dv-row { margin: 8px 0 10px; padding: 8px 12px; border-radius: 10px; background: rgba(120, 200, 255, 0.08); border: 1px solid rgba(120, 200, 255, 0.35); font-size: 16px; color: #cfd8f0; }
.dv-row p { margin: 4px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.dv-row b { color: var(--gold); font-weight: 400; }
.dv-row .btn-sm { padding: 6px 12px; font-size: 15px; }
.dv-book .sub b { color: var(--gold); font-weight: 400; }
.dv-part { margin: 14px 0 0; }
.dv-part h3 { margin: 0; font-size: 19px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dv-part h3 small { font-size: 14px; color: var(--muted); }
.dv-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 8px; margin-top: 8px; }
.dv-opts.off { opacity: 0.55; }
.dv-opt { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 10px; text-align: left; padding: 9px 11px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.14); color: #e6ecff; font: inherit; cursor: pointer; }
.dv-opt:hover { border-color: rgba(255, 210, 63, 0.5); }
.dv-opt:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.dv-opt.on { background: rgba(255, 210, 63, 0.12); border-color: var(--gold); }
.dv-tick { width: 24px; height: 24px; border-radius: 6px; border: 2px solid rgba(255, 255, 255, 0.35); display: grid; place-items: center; color: var(--navy-900); font-size: 16px; }
.dv-opt[role="radio"] .dv-tick { border-radius: 50%; }
.dv-opt.on .dv-tick { background: var(--gold); border-color: var(--gold); }
.dv-when { display: flex; flex-direction: column; min-width: 0; }
.dv-when b { font-weight: 400; font-size: 17px; }
.dv-when small { color: var(--muted); font-size: 13px; }
.dv-n { position: relative; width: 64px; height: 22px; border-radius: 6px; overflow: hidden; background: rgba(255, 255, 255, 0.08); display: grid; place-items: center; }
.dv-n i { position: absolute; inset: 0 auto 0 0; background: rgba(120, 200, 255, 0.4); }
.dv-n em { position: relative; font-style: normal; font-size: 14px; }
.dv-gate { padding: 8px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.05); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dv-msg.is-err { color: #ff9a8a; }
.dv-msg.is-ok { color: #9be89b; }
.dv-msg:empty { display: none; }

/* The Creators board and the Ambassadors board (creators-ui.js): your own box (gold), then who's on it as rows like the online list. */
.board-you { margin: 4px 0 14px; padding: 10px 12px; border-radius: 8px; background: rgba(255, 210, 63, 0.1); border: 1px solid rgba(255, 210, 63, 0.5); font-size: 16px; }
.board-you > b { color: var(--gold); font-size: 18px; }
.board-you .pane-note { margin-top: 4px; }
.modal .link-row { display: flex; gap: 6px; margin: 8px 0 2px; }
.modal .link-row input { flex: 1; min-width: 0; padding: 7px 9px; border-radius: 6px; border: 1px solid #3b4c80; background: #0d1638; color: #fff; font-size: 14px; font-family: var(--ui-font); }
.board-you .actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.board-get { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.board-plat, .board-medal { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--navy-800); border: 2px solid var(--tc); font-size: 19px; font-style: normal; flex: none; }
.board-medal { border-color: var(--gold); }
.online-player.board-row { cursor: default; }
a.online-player.board-row { cursor: pointer; text-decoration: none; }
.online-player.board-row.you { border-color: var(--gold); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 10px rgba(255, 210, 63, 0.35); }
.online-player.board-row b .online-lv.live { background: rgba(232, 33, 58, 0.18); box-shadow: inset 0 0 0 1px rgba(255, 110, 130, 0.55); color: #ff9aa8; }
.board-steps { margin: 0 0 10px; padding: 0 0 0 18px; font-size: 16px; line-height: 1.4; }
.board-steps li { margin: 0 0 6px; }
.board-steps b { color: var(--gold); }
.modal h2.hi-title { padding-right: 44px; } /* clear of the close button */
/* Aboard the galleon (ui.js sailBar): the cloud's bar, two buttons. */
.sail-bar button + button { margin-left: 4px; }
/* Aboard, the bar is a small column at the side, never across her (owner, 2026-10-18: "dont block the boat view with the
   menus"): the 3D view keeps her in the middle, from halfway down to the bottom edge (the whole height zoomed in), and the
   map view a third of the screen behind the way she sails. A computer: bottom left, over the panel's tabs (beside the
   panel when it's open, beside a D-pad on the left). An upright phone: the other side from the D-pad, where the thumb is,
   at the pad's height over the chat (over the 💬 Chat button when it's folded). Sideways, the trackers under the minimap
   can reach the bottom of a short screen, so it sits at the bottom left: beside the pad, or in its place. */
#sailBar { left: 12px; right: auto; top: auto; bottom: 100px; transform: none; width: auto; min-width: 0; max-width: none; flex-direction: column; align-items: stretch; gap: 4px; padding: 6px; }
#sailBar > span:first-child { justify-content: center; }
#sailBar button { margin: 0; padding: 3px 10px; text-align: left; }
@media (min-width: 761px) and (min-height: 501px) {
  .hud:has(#side.open) #sailBar { left: 288px; }
  .hud:has(> .dpad:not(.right):not([hidden])) #sailBar { left: 168px; }
}
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (min-width: 561px) {
  #sailBar { left: auto; right: 10px; bottom: calc(var(--mobile-chat-clearance) + 4px); font-size: 15px; }
  #sailBar button { min-height: 30px; }
  html.chat-collapsed #sailBar { bottom: calc(max(var(--mobile-chat-open-bottom), env(safe-area-inset-bottom, 0px)) + 60px); } /* over the 💬 Chat button */
  .hud:has(> .dpad.right:not([hidden])) #sailBar { left: 10px; right: auto; }
  html.chat-collapsed .hud:has(> .dpad.right:not([hidden])) #sailBar { bottom: calc(max(var(--mobile-chat-open-bottom), env(safe-area-inset-bottom, 0px)) + 12px); }
}
@media (orientation: landscape) and (max-height: 500px) and (min-width: 561px) {
  #sailBar, html.chat-collapsed #sailBar, .hud:has(> .dpad.right:not([hidden])) #sailBar, html.chat-collapsed .hud:has(> .dpad.right:not([hidden])) #sailBar { left: calc(max(8px, var(--sw-l)) + 4px); right: auto; bottom: calc(max(8px, var(--sw-b)) + 4px); }
  .hud:has(> .dpad:not(.right):not([hidden])) #sailBar { left: calc(max(8px, var(--sw-l)) + 140px); } /* beside the pad: 4 + 128 px, + 8 */
}
/* Aboard, the gold arrows on a ring round her to the Shipyard and to the island (open-world/sail-guide.js places them),
   the quest guide's gold and ink; under every other part of the HUD, never in the way of a click. */
#sailGuide { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
#sailGuide .sg-pin { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
#sailGuide .sg-pin[hidden] { display: none; }
#sailGuide .sg-arrow { position: absolute; left: -18px; top: -13px; width: 36px; height: 26px; overflow: visible; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45)); }
#sailGuide .sg-arrow path { fill: var(--gold); stroke: #1b1424; stroke-width: 3; stroke-linejoin: round; animation: sg-nudge 1.2s ease-in-out infinite; }
@keyframes sg-nudge { 50% { transform: translateX(3px); } }
#sailGuide .sg-name { position: absolute; left: 0; top: 15px; transform: translateX(-50%); white-space: nowrap; font: 400 14px var(--display); line-height: 1; color: var(--gold); text-shadow: 2px 2px 0 #1b1424, -1px -1px 0 #1b1424, 1px -1px 0 #1b1424, -1px 1px 0 #1b1424, 0 0 8px rgba(0, 0, 0, 0.5); }
#sailGuide .sg-pin[data-side="t"] .sg-name { top: auto; bottom: 15px; } /* the name on the side it points to */
#sailGuide .sg-pin[data-side="r"] .sg-name { left: 20px; top: 0; transform: translateY(-50%); }
#sailGuide .sg-pin[data-side="l"] .sg-name { left: auto; right: 20px; top: 0; transform: translateY(-50%); }
@media (prefers-reduced-motion: reduce) { #sailGuide .sg-arrow path { animation: none; } }
/* The Cambria Dungeon (rpg/ui-expeditions.js): the throne's board, the run's window, what you brought out, the bar */
/* The three ways down: each card's eight rows (ui-expeditions.js boardPanel) line up across the three, so the ladders,
   tiles, entries and buttons sit level whatever a blurb's length. */
.dg-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 12px; row-gap: 0; margin: 14px 0; }
.dg-tier { display: grid; grid-row: span 8; grid-template-rows: subgrid; row-gap: 9px; align-content: start; min-width: 0; padding: 12px; border: 1px solid #4a3b2b; border-radius: 10px; background: linear-gradient(180deg, #251d1b, #141116); }
.dg-tier.risky { border-color: #7a4a1c; }
.dg-tier.cursed { border-color: #7a1c24; background: linear-gradient(180deg, #2a1416, #120c10); }
.dg-tier.locked { opacity: 0.6; }
.dg-tier header { display: flex; align-items: center; gap: 7px; }
.dg-tier header span { font-size: 20px; }
.dg-tier header b { font-family: var(--display); font-weight: 400; font-size: 18px; color: #ffe9b0; }
.dg-tier header em { margin-left: auto; color: #ffd45c; font-style: normal; font-weight: 800; }
.dg-tier p { margin: 0; font-size: 14px; line-height: 1.35; color: #d8cfc4; }
.dg-tier .btn { align-self: end; }
.dg-tier .btn-red { background: linear-gradient(180deg, #e0464e, #a01c26); color: #fff3e6; border-color: #3a0a0e; box-shadow: inset 0 0 0 1px #ff9a9a, 0 3px 0 #5a0c12; }
/* The ladder: the monsters' level on each floor and the keeper's, against yours (green under, grey even, orange over, red 5+ over). */
.dg-key { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: #c9bfb2; }
.dg-key span { padding: 0 5px; border-radius: 4px; font-weight: 700; white-space: nowrap; }
.dg-ladder { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 0; margin: 0; list-style: none; }
.dg-ladder li { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 4px 1px 3px; border-radius: 7px; border: 1px solid #3c3330; background: #1c1719; }
.dg-ladder li:last-child { border-color: #806128; background: #241b12; }
.dg-ladder small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; color: #a99e92; }
.dg-ladder b { font-size: 17px; line-height: 1.15; }
.dg-ladder em { font-style: normal; font-size: 10px; white-space: nowrap; }
.dg-ladder .under b, .dg-ladder .under em, .dg-key .under { color: #7fe08a; }
.dg-ladder .even b, .dg-ladder .even em, .dg-key .even { color: #ece6dc; }
.dg-ladder .over b, .dg-ladder .over em, .dg-key .over { color: #ffb24a; }
.dg-pic { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 7px; border: 1px solid #3c3330; background: #0c0a0e; } /* a real fight that way down (ui-expeditions.js DUNGEON_ART) */
/* XP, Loot and Strength (ui-expeditions.js statTiles): the number big, a line under it. */
.dg-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin: 0; }
.dg-stats > div { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 6px 3px 5px; border: 1px solid #3c3330; border-radius: 8px; background: #1c1719; text-align: center; }
.dg-stats dt { font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #a99e92; }
.dg-stats dd { margin: 0; font-family: var(--display); font-size: 18px; line-height: 1.2; color: #ffe9b0; }
.dg-stats dd small { display: block; font-family: system-ui, sans-serif; font-size: 11px; line-height: 1.2; color: #a99e92; }
.dg-stats .dg-win dd { color: #9fe8a0; } /* Loot: what clearing pays back, in entries */
/* The entry (ui-expeditions.js feeRow): each material's icon and count; red when your Bag is short, struck when the pass pays. */
.dg-tier .dg-fee p { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 6px; margin: 0 0 5px; font-size: 12px; }
.dg-fee p b { color: #a99e92; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.dg-fee p em { margin-left: auto; font-style: normal; font-weight: 700; }
.dg-fee .dg-runs { color: #ffb24a; } /* a later run of the day costs more (rpg/expeditions.js feeScale) */
.dg-fee .dg-free { color: #9fe8a0; }
.dg-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.dg-chips span { display: inline-grid; grid-template-columns: 24px auto; column-gap: 4px; align-items: center; padding: 2px 8px 2px 3px; border: 1px solid #4a3a22; border-radius: 7px; background: #2c2318; }
.dg-chips img { grid-row: 1 / 3; image-rendering: pixelated; }
.dg-chips b { color: #ffe9b0; font-size: 14px; line-height: 1; }
.dg-chips small { color: #bdb2a4; font-size: 10px; line-height: 1.15; white-space: nowrap; }
.dg-fee.short .dg-chips span { border-color: #7a2a24; background: #2a1414; } .dg-fee.short .dg-chips b { color: #ff8a7a; }
.dg-fee.free .dg-chips span { opacity: 0.6; } .dg-fee.free .dg-chips b { text-decoration: line-through; }
/* Who's down that way now (ui-expeditions.js downNow): quiet when nobody, each party and its floor when some are. */
.dg-tier p.dg-down { font-size: 12px; color: #cfc4b2; } .dg-tier p.dg-down.none { color: #857b74; }
.dg-down > b { color: #cfe0ff; }
.dg-down .dg-who { display: block; color: #cfc4b2; font-size: 12px; overflow-wrap: anywhere; } /* a party down that way and its floor */
.dg-ladder .far b, .dg-ladder .far em, .dg-key .far { color: #ff6a5a; }
.dg-key .under { background: rgba(127, 224, 138, 0.12); } .dg-key .even { background: rgba(236, 230, 220, 0.1); }
.dg-key .over { background: rgba(255, 178, 74, 0.12); } .dg-key .far { background: rgba(255, 106, 90, 0.14); }
/* The board's rules, folded under its title, with your record on the same row (ui-expeditions.js boardPanel). */
.dg-more { margin: 10px 0 0; padding: 7px 12px; border: 1px solid #3c3330; border-radius: 10px; background: #171418; }
.dg-more > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; cursor: pointer; list-style: none; font-weight: 800; color: #ffd45c; }
.dg-more > summary .dg-tally { margin-left: auto; color: #a99e92; font-size: 13px; font-weight: 600; } .dg-tally b { color: #ffe9b0; }
.dg-more > summary::-webkit-details-marker { display: none; }
.dg-more > summary::before { content: "▸ "; color: #a99e92; } .dg-more[open] > summary::before { content: "▾ "; }
.modal p.dg-key { font-size: 14px; } /* .modal p's 18px had made the key six big lines over the cards */
.dg-how { margin: 8px 0 8px; padding-left: 18px; font-size: 14px; line-height: 1.45; color: #d8cfc4; }
.dg-how li { margin: 3px 0; }
.dg-floors { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 0; margin: 12px 0; list-style: none; }
.dg-floors li { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 7px; border: 1px solid #3c3330; border-radius: 8px; color: #8e8580; background: #171418; font-size: 13px; }
.dg-floors li i { display: grid; place-items: center; flex: 0 0 22px; height: 22px; border-radius: 50%; background: #2c2524; font-style: normal; font-weight: 800; }
.dg-floors li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dg-floors li.done { color: #a9e5ae; border-color: #35623b; }
.dg-floors li.done i { background: #285632; }
.dg-floors li.here { color: #ffe19b; border-color: #a46f20; box-shadow: 0 0 0 1px #5b3d17 inset; }
.dg-pouch { padding: 12px; border: 1px solid #806128; border-radius: 10px; background: linear-gradient(135deg, #292013, #16131a); }
.dg-pouch header { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.dg-pouch header em { color: #ffd45c; font-style: normal; }
.dg-pouch > small { color: #a99e92; }
.dg-pouch.banked { border-color: #c9a24a; box-shadow: 0 0 18px rgba(255, 200, 80, 0.18); }
.dg-back { margin: 8px 0 4px; font-size: 13px; color: #ffb24a; } .dg-back.paid { color: #7fe08a; } /* the pouch against the run's entry (ui-expeditions.js backLine) */
.dg-back small { color: #a99e92; }
.dg-team { margin: 0 0 10px; padding: 10px 12px; border: 1px solid #3a4a80; border-radius: 10px; background: #161b2e; } /* who goes down with you, over the ways down (ui-expeditions.js partyBox) */
.dg-team.lead { border-color: #ffd54a; background: #221e10; } .dg-team.lead > b { color: #ffe9a8; } /* you follow someone: they pick, or they're down */
.dg-team > b { display: block; color: #cfe0ff; } .dg-team > small { color: #a99e92; }
/* The Cambria pass (ui-expeditions.js passBox): the ticket, its line, the wallet buttons on the right. */
.dg-pass { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; margin: 10px 0 0; padding: 10px 12px; border: 1px solid #8a6a2a; border-radius: 10px; background: #221a10; }
.dg-pass-ic { font-size: 26px; line-height: 1; }
.dg-pass > div > b { display: block; color: #ffd45c; } .dg-pass > div > small { display: block; color: #cfc4b2; font-size: 13px; } .dg-pass > div > small.dg-pass-safe { color: #a99e92; font-size: 12px; }
.dg-pass .dg-hall { margin: 0; justify-content: flex-end; }
.dg-link { padding: 0; border: 0; background: none; color: #ffd45c; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; } /* What holders get: the Envoy's window */
.dg-pass.free { border-color: #4a8a3a; background: #13200f; } .dg-pass.free > div > b { color: #9fe8a0; }
.dg-pass code { color: #ffe9b0; font-size: 12px; } .dg-pass .btn img { vertical-align: -4px; margin-right: 5px; }
.dg-pass .dg-unlink { padding: 0; border: 0; background: none; color: #a99e92; font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; }
.dg-hall { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; } .dg-hall .btn small { opacity: 0.75; }
.dg-down .dg-ask { margin-left: 4px; padding: 1px 8px; border: 1px solid #c9a24a; border-radius: 999px; background: #2a2010; color: #ffd45c; font: inherit; font-size: 12px; cursor: pointer; }
.dg-party li .btn { margin-left: auto; } .dungeon-bar .db-help { background: #1c2440; border-color: #3a4a80; color: #cfe0ff; }
.dg-loot { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0; }
.dg-loot span { display: grid; grid-template-columns: 24px auto; grid-template-rows: auto auto; column-gap: 6px; align-items: center; padding: 4px 9px 4px 5px; border-radius: 8px; background: #2c2318; border: 1px solid #4a3a22; }
.dg-loot img { grid-row: 1 / 3; image-rendering: pixelated; }
.dg-loot b { color: #ffe9b0; font-size: 15px; line-height: 1; }
.dg-loot small { color: #bdb2a4; font-size: 11px; line-height: 1.1; }
.dg-empty { margin: 8px 0; color: #a99e92; font-size: 14px; }
.dg-bless { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.dg-bless span { padding: 4px 9px; border-radius: 999px; background: #1c2440; border: 1px solid #3a4a80; color: #cfe0ff; font-size: 13px; }
.dg-party { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 0; list-style: none; }
.dg-party li { display: flex; flex-direction: column; padding: 8px 10px; border: 1px solid #3c3330; border-radius: 8px; background: #19161a; }
.dg-party li.you { border-color: #98742d; }
.dg-party small { color: #aaa09a; }
.dg-actions { flex-wrap: wrap; }
/* The Cambria Envoy's window (ui-expeditions.js holdersPanel): the three perks as website tiles, then the pass. */
.cp-perks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0; padding: 0; list-style: none; }
.cp-perks li { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 10px; border: 1px solid #34468a; border-radius: 10px; background: linear-gradient(180deg, #1a2663, #141e52); text-align: center; }
.cp-perks span { font-size: 26px; line-height: 1.1; }
.cp-perks b { font-family: var(--display); font-weight: 400; font-size: 16px; color: #ffd45c; }
.cp-perks small { font-size: 13px; line-height: 1.35; color: #cdd5f0; }
.modal p.cp-how { margin: 10px 0 4px; font-size: 13px; color: #a9b2d6; }
@media (max-width: 640px) {
  .dg-tiers { grid-template-columns: 1fr; row-gap: 12px; }
  .dg-tier { display: flex; flex-direction: column; gap: 9px; } .dg-tier .btn { align-self: stretch; margin-top: auto; }
  .dg-pass { grid-template-columns: auto minmax(0, 1fr); } .dg-pass .dg-hall { grid-column: 1 / -1; justify-content: flex-start; }
  .cp-perks { grid-template-columns: 1fr; } .cp-perks li { display: grid; grid-template-columns: 34px 1fr; align-items: center; column-gap: 8px; text-align: left; } .cp-perks li span { grid-row: 1 / 3; }
  .dg-floors { grid-template-columns: repeat(2, 1fr); }
  .dg-party { grid-template-columns: 1fr; }
}
/* The bar over the map while you're in a run. */
.dungeon-bar { position: absolute; left: 50%; top: 46px; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 9px; background: rgba(14, 6, 10, 0.92); border: 2px solid #3a0e14; box-shadow: inset 0 0 0 1px #9a6a2a, 0 4px 14px rgba(0, 0, 0, 0.5); color: #f2ead8; font-size: 15px; white-space: nowrap; }
.dungeon-bar[hidden] { display: none; }
.dungeon-bar .db-where b { color: #ffd45c; }
.dungeon-bar .db-hp { position: relative; display: inline-block; width: 92px; height: 18px; border-radius: 5px; background: #2a0c10; border: 1px solid #000; overflow: hidden; }
.dungeon-bar .db-hp i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(180deg, #ff5a5a, #b0181e); }
.dungeon-bar .db-hp b { position: relative; display: block; text-align: center; font-size: 12px; line-height: 16px; text-shadow: 0 1px 0 #000; }
.dungeon-bar button { background: #22141a; border: 1px solid #000; border-radius: 6px; color: #f2ead8; padding: 2px 8px; font-size: 14px; }
.dungeon-bar button:hover:not(:disabled) { background: #3a1e26; }
.dungeon-bar button:disabled { opacity: 0.45; }
.dungeon-bar .db-xp { font-style: normal; }
.dungeon-bar .db-portal { background: linear-gradient(180deg, #4a7aff, #2a3ab0); color: #fff; border-color: #0a1240; }
.dungeon-bar .db-time { color: #c9bfb2; font-size: 13px; }
.dungeon-bar .db-omen { color: #ffcf6a; font-size: 14px; } /* the floor's omen (rpg/expeditions.js OMENS), its name in the tip on a phone */
.dungeon-bar .db-omen em { font-style: normal; font-size: 13px; color: #e8d8b0; }
.modal p.dg-omen { margin: 8px 0 0; padding: 6px 10px; border-radius: 8px; background: #2a1a10; border: 1px solid #6a4a20; color: #f0e2c0; font-size: 14px; }
.modal p.dg-omen b { color: #ffcf6a; margin-right: 4px; }
/* Phones: a row of the stack under the ZAZA WORLD box (#hudUnder; rpg/ui-expeditions.js installDungeonUI puts it after the
   XP row), as wide as the box: the HP and the time on the first line, the flasks, the pouch and the Town Portal on the
   second. It pushes the card hunt clock down instead of lying over the box and the clock (owner, 2026-10-18, with a shot
   from each way up: "the dungeon bar is blokcing the rest... on mobile"; it sat 80 px from the top). */
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (min-width: 561px) {
  .hud-under > .dungeon-bar { position: relative; left: auto; top: auto; transform: none; flex-wrap: wrap; gap: 2px 4px; padding: 4px 5px; font-size: 13px; }
  .dungeon-bar .db-xp, .dungeon-bar .db-where { display: none; }
  .dungeon-bar .db-hp { order: 1; flex: 1 1 auto; width: auto; min-width: 0; }
  .dungeon-bar .db-time { order: 2; font-size: 12px; }
  .dungeon-bar .db-omen { order: 2; font-size: 13px; }
  .dungeon-bar .db-omen em { display: none; }
  .hud-under > .dungeon-bar::after { content: ""; order: 3; flex-basis: 100%; height: 0; } /* the buttons start the second line */
  .dungeon-bar button { order: 4; flex: 1 1 auto; min-width: 0; padding: 2px 4px; font-size: 13px; }
  .dungeon-bar .db-help .db-who { display: none; } /* 🛡 Help alone on the buttons' line, the name in its tip */
  .hud-panel:has(> .hud-under > .dungeon-bar:not([hidden])) { --xp-under-space: 92px; } /* the XP row's 28 px and this bar */
}
/* A computer in a run: the bar keeps its place under "N online". A run shuts the quest fold (ui.js dungeonFold), so the
   area banner, back at the top with the clock folded away (hunt.css), drops in under the bar; with the fold opened, the
   vote button, the card hunt clock and what hangs under them (awards-campaign.css) move below it. */
@media (min-width: 761px) and (min-height: 501px) {
  .hud:is(.fold-quests, .hide-drop.hide-vote):has(> .dungeon-bar:not([hidden])) .area-banner { top: 88px; }
  .hud:not(.fold-quests):has(> .dungeon-bar:not([hidden])) :is(.awards-cta--world, #huntPill, .hud-tr .xlive-box, .quest-banner, .area-banner, .hud > .hud-bars) { margin-top: 46px; }
  .hud:not(.fold-quests, .hide-vote):has(> .dungeon-bar:not([hidden])):has(.awards-cta:not([hidden])) :is(#huntPill, .hud-tr .xlive-box, .quest-banner, .area-banner, .hud > .hud-bars) { margin-top: 86px; }
}

/* Two menus round the minimap (ui.js syncMenu; owner, 2026-10-22: "make menus for both main word and open world.. and make
   it easy and convenient to alternate"). The Open World's, out on the island's side, keeps run, the map, 🏠, − and + and
   puts its own in the others' places on the ring: 🏝 your island where attack mode is, its fold where the main World's
   is, ⚓ the Harbour and ⚔ the war map (ui.js #isleWar, while the island plays in rounds; gold while the board is up) where
   − and + are, and − and + the two places after them, round the map's lower right (owner, 2026-10-27: "substitute the 3d
   button with the war button... also change the positions of the zoom in and out with the harbour and war mode
   buttons"), the same in the 3D view and flat; the main World's buttons and trackers step aside, the Harbour's chip
   stays. Crossing between the worlds swaps them (the island's wallets only); no ⇄
   swaps them by hand (owner, 2026-10-25: "the two buttons kind of do the same thing, as when you go on kingdom or open
   world, you change the top button stuff.. so lets remove the top button"). Its fold leaves "N online" too (owner,
   2026-10-27: "the online never minimizes"). */
html.ow-menu :is(#orbSparks, #orbFight, #orbQuests, #questTrack, #dailyTrack, #caminoTrack, #xTask, #raidChips, #pokerChips, #miniCards) { display: none; }
html:not(.ow-menu) #isleRow { display: none; }
html.ow-menu .hud.fold-isle :is(#wwRail, #isleRow, #isleDock, #huntPill, #xLive, #miniBuffs) { display: none; }
/* The War map is a tactical mode, not the sailing HUD: its board, turn choices, adversaries and useful zoom remain;
   the 3D/map switch, boat commands, travel/build controls and island stock/people step out until it closes, and so do
   "N online" and the card hunt clock (owner, 2026-10-24: "on war view dont show the people online or the next drop"). */
html.war-map-open :is(#sailBar, #boardBar, #isleRow, #isleDock, #islePlace, .dpad, #chatbox, #chatOpen, .online-wrap, #huntPill) { display: none !important; }
/* It opens off the sea too (the mainland, the Hero Palace): the main World's trackers step aside as on the island's
   side, or the quest's box sat over the board's 🌍 World view (owner, 2026-11-05: "there needs to be open world view and
   war view.."). */
html.war-map-open :is(#questTrack, #dailyTrack, #caminoTrack, #xTask, #raidChips, #pokerChips, #miniCards) { display: none; }
.orb-ow { left: auto; min-width: 36px; padding: 0 4px; }
.orb-isle { top: 92px; right: 163px; }
.orb-ifold { top: 131px; right: 142px; }
.orb-harbour { top: 169px; right: 65px; }
.orb-war { top: 161px; right: 21px; }
.orb-ow.on:not(.orb-fold) { box-shadow: inset 0 0 0 1px var(--gold), 0 0 10px rgba(255, 210, 63, 0.55); }
.orb-ow.on:not(.orb-fold) .orb-icon { background: radial-gradient(circle at 40% 35%, #ffe066, #b88a10); }
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (min-width: 561px) {
  .orb-ow { width: 28px; min-width: 0; padding: 0; justify-content: center; }
  .orb-isle { top: 62px; right: 114px; }
  .orb-ifold { top: 90px; right: 98px; }
  .orb-harbour { top: 117px; right: 41px; }
  .orb-war { top: 111px; right: 10px; }
  html.ow-menu .touch-zoom > button:last-child { top: 92px; right: -16px; }
  html.ow-menu .touch-zoom > button:first-child { top: 65px; right: -33px; }
}
@media (max-width: 760px) and (orientation: portrait) {
  .orb-isle { top: 68px; right: 107px; }
  .orb-ifold { top: 91px; right: 90px; }
  .orb-harbour { top: 109px; right: 37px; }
  .orb-war { top: 100px; right: 10px; }
  html.ow-menu .touch-zoom > button:last-child { top: 81px; right: -12px; }
  html.ow-menu .touch-zoom > button:first-child { top: 54px; right: -24px; }
}
/* The island's people, Northgard's way (owner, 2026-10-22: "have a button to build.. and showcase my people like norgard
   does...", "and their roles"): each job's villager, how many, its places and its name; the free ones (who build) in gold.
   In the Kingdom island's 🏰 panel (kingdom/kingdom-town.js .kg-crew); the HUD panel under the ZAZA WORLD box is gone
   (owner, 2026-10-25: "only in island menu"). */
.isle-crew { display: grid; gap: 5px; padding: 6px; border-radius: 10px; background: rgba(6, 12, 40, 0.82); border: 1px solid #2e3d74; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35); }
.isle-crew[hidden] { display: none; }
.ic-head { display: flex; gap: 6px; }
.ic-head button { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px; border-radius: 8px; font: inherit; font-size: 16px; cursor: pointer; }
.ic-all { flex: 1; color: #fff; background: #141d40; border: 1px solid #000; }
.ic-all b { font-weight: 400; color: var(--gold); } .ic-all small { color: #8a93c0; font-size: 13px; }
.ic-build { color: #2a1a00; background: linear-gradient(180deg, #ffe066, #e8b52a); border: 1px solid #fff3b0; box-shadow: 0 2px 0 #6a4a08; font-family: var(--display); font-size: 15px; letter-spacing: 0.02em; }
.ic-build:hover { filter: brightness(1.08); } .ic-build.on { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35); }
.ic-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.ic-row { display: grid; grid-template-columns: 24px auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 5px; align-items: center; min-width: 0; padding: 2px 6px 2px 3px; border-radius: 7px; border: 1px solid #000; background: #141d40; color: #fff; font: inherit; text-align: left; cursor: pointer; }
.ic-row:hover { border-color: var(--gold); }
.ic-pic { grid-row: 1 / 3; width: 24px; height: 30px; } .ic-pic canvas { display: block; width: 24px; height: 30px; image-rendering: pixelated; }
.ic-row b { font-weight: 400; font-size: 17px; line-height: 1; color: var(--gold); } .ic-row small { font-size: 12px; color: #8a93c0; }
.ic-row i { grid-column: 2 / 4; font-style: normal; font-size: 12px; line-height: 1.1; color: #c9d4ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ic-row.is-free { background: linear-gradient(180deg, #ffe066, #e8b52a); } .ic-row.is-free :is(b, small, i) { color: #2a1a00; }
/* many villagers picked at once (open-world/town.js): the box a drag draws over the map, the panel's group buttons */
.hud > .isle-box { position: fixed; z-index: 2; box-sizing: border-box; pointer-events: none; border: 1px solid #ffd23f; background: rgba(255, 210, 63, 0.12); box-shadow: 0 0 0 1px rgba(11, 19, 64, 0.7), inset 0 0 0 1px rgba(11, 19, 64, 0.5); }
.hud > .isle-box[hidden] { display: none; }
.ip-same { align-self: flex-start; }
.ip-group .ip-chip { padding: 2px 8px; font-size: 16px; }
/* A phone sideways on the island (town.js placeSide, html.isle-side): the minimap's column down the right edge (⚔ War map,
   which stood in its corner, is on the ring now); JS sets where (the column's right and width) and --isle-col, the room it
   takes, which 💬 Chat, + and − and the island's panel keep clear of. */
.isle-dock { display: none; }
@media (orientation: landscape) and (max-height: 500px) and (min-width: 561px) {
  .hud > .isle-dock { position: absolute; z-index: 4; bottom: calc(max(8px, var(--sw-b)) + 6px); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .hud > .isle-dock[hidden], .isle-dock > [hidden] { display: none; }
  html.isle-side:not(.chat-collapsed) .hud > .isle-dock { display: none !important; }
  html.isle-side .chat-open, html.standalone.isle-side .chat-open { box-sizing: border-box; width: 46px; min-width: 46px; height: 42px; min-height: 42px; padding: 0; border-radius: 9px; font-size: 0; background: linear-gradient(180deg, #172b49, #0b172d); border: 2px solid #899bb0; box-shadow: 0 3px 0 #050b16, inset 0 0 0 2px rgba(210, 225, 238, 0.1); }
  html.isle-side .chat-open::after { content: ""; width: 21px; height: 3px; border-radius: 2px; background: #b7c5d3; box-shadow: 0 -7px 0 #b7c5d3, 0 7px 0 #b7c5d3, 0 1px 0 #07101f, 0 -6px 0 #07101f, 0 8px 0 #07101f; }
  html.isle-side .chat-open, html.standalone.isle-side .chat-open { right: calc(var(--isle-col, 176px) + 12px); }
  html.isle-side .side.is-isle, html.isle-side.chat-collapsed .side.is-isle { right: auto; width: min(380px, calc(100vw - var(--isle-col, 176px) - var(--sw-l) - 20px)); }
  html.isle-side .side.open.is-isle { top: auto; height: auto; max-height: calc(100% - 16px); } html.isle-side .side.open.is-isle .side-body { overflow-y: auto; } /* bottom left, as tall as what it shows */
}
@media (max-width: 760px) {
  .ic-head button { height: 26px; font-size: 14px; padding: 0 8px; }
  .ic-rows { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; }
  .ic-row i { font-size: 11px; }
}
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (min-width: 561px) {
}
/* ✊ Clash (rpg/clash.js, rpg/ui-clash.js): its painted logo and move icons (world/assets/clash/). The challenge window's
   Clash note (every Colosseum fight is one) and its rules folded under it; the rules explainer (logo, the wheel of who beats whom, five steps,
   the class moves) as a window or over the fight; in the fight, the five moves and Forfeit (three across, two rows), each
   fighter's last picks and class move on their box, a teammate's locked move, the round's picks stamped over the scene,
   the logo on the opening card and on the ❔ beside the message. */
.arena-mode-note { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.arena-mode-logo { flex: none; width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.45)); }
.clash-how { margin: 4px 0 12px; border: 1px solid #2e3d74; border-radius: 10px; background: rgba(3, 10, 44, 0.45); }
.clash-how > summary { display: flex; align-items: center; gap: 8px; padding: 6px 10px; cursor: pointer; list-style: none; color: #fff; }
.clash-how > summary::-webkit-details-marker { display: none; }
.clash-how > summary::after { content: "▾"; margin-left: auto; color: var(--gold); transition: transform 0.15s; }
.clash-how[open] > summary::after { transform: rotate(180deg); }
.clash-how > summary img { width: 30px; height: 30px; object-fit: contain; }
.clash-how > summary b { font-family: var(--display); font-weight: 400; font-size: 16px; letter-spacing: 0.03em; color: var(--gold); }
.clash-how > .clash-help { padding: 0 12px 12px; }
.clash-how .clash-logo { display: none; } /* the summary has it */
.clash-how .clash-tag { font-size: 14px; }
li.arena-clash .clash-how { margin-top: 8px; }
.clash-help { display: grid; gap: 10px; color: #dfe6ff; }
.clash-logo { justify-self: center; width: min(260px, 70%); height: auto; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5)); animation: clash-logo-in 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
@keyframes clash-logo-in { from { transform: scale(0.7) rotate(-4deg); opacity: 0; } to { transform: none; opacity: 1; } }
.clash-tag { margin: -4px 0 0; text-align: center; font-family: var(--display); font-weight: 400; letter-spacing: 0.04em; color: var(--gold); }
.clash-wheel-box { padding: 6px 6px 8px; border-radius: 12px; background: radial-gradient(circle at 50% 45%, #1b2a6a, #0a1236 70%); border: 1px solid #2e3d74; }
.clash-wheel-svg { display: block; width: min(360px, 100%); height: auto; margin: 0 auto; overflow: visible; }
.clash-wheel-svg text { font-family: var(--display); font-size: 17px; fill: #fff; paint-order: stroke; stroke: #0a1236; stroke-width: 4px; letter-spacing: 0.04em; }
.clash-wheel-svg .cw-arr { transition: opacity 0.15s; }
.clash-wheel-svg .cw-arr.dim { opacity: 0.12; }
.clash-wheel-svg .cw-node { cursor: pointer; outline: none; }
.clash-wheel-svg .cw-node circle { transition: stroke-width 0.15s; }
.clash-wheel-svg .cw-node.on circle, .clash-wheel-svg .cw-node:focus-visible circle { stroke: var(--gold); stroke-width: 5; }
.clash-wheel-tip { margin: 2px 0 0; text-align: center; font-size: 13px; opacity: 0.85; }
.clash-steps { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.clash-steps li { display: grid; grid-template-columns: 34px 1fr; gap: 8px; align-items: start; padding: 8px 10px; border-radius: 10px; background: rgba(3, 10, 44, 0.5); border: 1px solid #2e3d74; }
.clash-steps li > i { font-style: normal; font-size: 22px; line-height: 1.2; text-align: center; }
.clash-steps b { display: block; font-family: var(--display); font-weight: 400; letter-spacing: 0.03em; color: #fff; }
.clash-steps span { display: block; font-size: 14px; line-height: 1.35; opacity: 0.9; }
.clash-leans { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; }
.clash-leans span { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 8px; background: rgba(3, 10, 44, 0.5); border: 1px solid #2e3d74; font-size: 13px; }
.clash-leans span.mine { border-color: var(--gold); background: rgba(255, 210, 63, 0.12); }
.clash-leans b { font-weight: 700; }
.cl-mini { width: 26px; height: 26px; flex: none; }
.clash-help-go { display: flex; justify-content: center; margin-top: 8px; }
.clash-help-over { position: absolute; inset: 0; z-index: 12; display: grid; place-items: center; padding: 12px; background: rgba(3, 8, 30, 0.6); }
.clash-help-card { position: relative; width: min(600px, 100%); max-height: calc(100% - 8px); overflow-y: auto; padding: 16px 16px 14px; }
.clash-help-x { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; border-radius: 50%; border: 2px solid #2e3d74; background: #0a1236; color: #fff; font-size: 16px; cursor: pointer; }
.clash-help-clock { margin: 8px 0 0; text-align: center; font-size: 13px; color: #ffe6a0; }
.clash-how-link { display: block; margin: 6px auto 0; padding: 2px 6px; border: 0; background: none; color: var(--gold); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
.bt-menu.main.clash { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* each move as the fight menu's other buttons, as at first (owner, 2026-10-24: "revert the buttons to how they were at
   first"): its icon beside its name over a small "beats" and the two moves it beats; your class's move on gold. Sized to
   the button (a container): screens of 1024 px and under have narrower ones. */
.bt-menu.main.clash button { container-type: inline-size; grid-template-columns: auto minmax(0, 1fr); align-content: center; gap: 3px 7px; padding: 4px 8px 4px 6px; }
.bt-menu.main.clash button.lean { border-color: var(--gold-dark); background: linear-gradient(180deg, #fff6cf, #f0dc97); }
.bt-menu.main.clash button::before { content: none; } /* the gold border shows the one you're on */
.bt-menu.main.clash button .cl-ico { grid-row: span 2; width: 58px; height: 58px; width: min(58px, 40cqi); height: min(58px, 40cqi); image-rendering: auto; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.35)); transition: transform 0.12s; }
.bt-menu.main.clash button:hover:not([disabled]) .cl-ico, .bt-menu.main.clash button:focus .cl-ico { transform: scale(1.12) rotate(-6deg); }
.bt-menu.main.clash button b { font-size: 20px; font-size: clamp(12px, 15cqi, 20px); line-height: 1; white-space: nowrap; }
.bt-menu.main.clash button b i { font-style: normal; color: var(--gold-dark); } /* ★ your class's move */
.bt-menu.main.clash .cl-ico + b { align-self: end; }
.bt-menu.main.clash .cl-beats { align-self: start; display: flex; align-items: center; gap: 2px; min-width: 0; }
.bt-menu.main.clash .cl-beats small { margin-right: 2px; color: #4a4a5a; font-size: 13px; font-size: clamp(9px, 8.5cqi, 13px); line-height: 1; }
.bt-menu.main.clash .cl-beat { width: 22px; height: 22px; width: clamp(14px, 14cqi, 22px); height: clamp(14px, 14cqi, 22px); flex: none; image-rendering: auto; }
@container (max-width: 96px) { .bt-menu.main.clash .cl-beats small { display: none; } } /* screens under ~950 px: just the two icons */
.bt-menu.main.clash .cl-run { grid-template-columns: auto 1fr; }
.bt-menu.main.clash .cl-run b { align-self: center; }
.gba-cl { display: flex; align-items: center; gap: 3px; margin-top: 4px; font-size: 13px; line-height: 1; }
.gba-cl small { margin-right: 2px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; color: #6a6a7a; }
.gba-cl .cl-last { width: 24px; height: 24px; image-rendering: auto; }
.gba-cl .cl-none { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-style: normal; background: rgba(27, 20, 36, 0.07); border: 1px solid rgba(27, 20, 36, 0.22); }
.gba-cl em { display: flex; align-items: center; gap: 1px; margin-left: auto; padding: 1px 5px 1px 6px; border-radius: 11px; font-style: normal; font-size: 12px; background: rgba(255, 210, 63, 0.35); color: #6a4a08; }
.gba-top .rdy.pick.clash img { width: 20px; height: 20px; image-rendering: auto; }
.bt-stamp.clash { display: flex; align-items: center; gap: 10px; font-size: 40px; }
.bt-stamp.clash span { display: flex; gap: 4px; }
.bt-stamp.clash img { width: 64px; height: 64px; filter: drop-shadow(3px 3px 0 #1b1424); }
.bt-stamp.clash em { font-style: normal; color: var(--gold); }
.bt-vs.clash { gap: 0; }
.bt-vs-logo { width: clamp(120px, 18vw, 200px); height: auto; margin: -24px 0 -6px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5)); }
.bt-clash-help { position: absolute; top: -18px; right: 10px; z-index: 2; display: flex; align-items: center; gap: 2px; height: 32px; padding: 0 10px 0 2px; border-radius: 16px; border: 2px solid var(--gold-dark); background: linear-gradient(180deg, #ffe066, var(--gold-2)); color: var(--navy-900); font-family: var(--display); font-size: 16px; cursor: pointer; box-shadow: 0 3px 0 rgba(3, 10, 44, 0.6); }
.bt-clash-help img { width: 36px; height: 36px; margin: -6px 0; object-fit: contain; }
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (min-width: 561px) {
  .bt-menu.main.clash button { height: 50px; min-height: 50px; padding: 2px 5px; gap: 2px 5px; }
  .bt-menu.main.clash button .cl-ico { width: 38px; height: 38px; width: min(38px, 38cqi); height: min(38px, 38cqi); }
  .bt-menu.main.clash button b { font-size: 15px; font-size: clamp(12px, 15.5cqi, 15px); }
  .bt-menu.main.clash .cl-beats small { font-size: 11px; font-size: clamp(9px, 8.5cqi, 11px); }
  .bt-menu.main.clash .cl-beat { width: 17px; height: 17px; width: clamp(13px, 15cqi, 17px); height: clamp(13px, 15cqi, 17px); }
  .bt-menu.main.clash .cl-run img { width: 18px; height: 18px; }
  .gba-cl .cl-last, .gba-cl .cl-none { width: 20px; height: 20px; }
  .bt-stamp.clash img { width: 44px; height: 44px; }
  .bt-clash-help { top: -26px; height: 28px; }
  .clash-help-card { padding: 12px 10px 10px; }
  .clash-steps span { font-size: 13px; }
}

/* 🌍 Nations (rpg/ui-nations.js): flags cut from one sheet, the flag picker, the Rankings' Nations tab, the world map. */
.flag { display: inline-block; flex: none; background-image: url(/world/assets/flags.webp); background-repeat: no-repeat; border-radius: 2px; box-shadow: 0 0 0 1px rgba(10, 16, 40, 0.45); vertical-align: -2px; font-style: normal; }
.rk-hero { position: relative; }
.rk-hfl { position: absolute; right: -6px; bottom: 2px; }
.hp-flag { flex: none; margin: 0 8px 0 0; padding: 0; border: 0; background: none; cursor: pointer; vertical-align: 1px; }
.hp-nat { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hp-natlink { padding: 0; border: 0; background: none; color: var(--text); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.hp-flagpick { padding: 1px 10px; border-radius: 999px; border: 1px solid rgba(255, 210, 63, 0.6); background: rgba(255, 210, 63, 0.12); color: var(--gold); font: inherit; font-size: 14px; cursor: pointer; }
.hp-flagpick:hover { background: rgba(255, 210, 63, 0.22); }
.fp-now { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; padding: 8px 12px; border-radius: 12px; background: rgba(255, 210, 63, 0.1); border: 1px solid rgba(255, 210, 63, 0.45); }
.fp-now span { flex: 1 1 200px; }
.fp-now b { color: var(--gold); font-weight: 400; }
.fp-find { width: 100%; box-sizing: border-box; margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid #34468a; background: #0f1a4a; color: var(--text); font: inherit; font-size: 17px; }
.fp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; max-height: min(52vh, 460px); overflow-y: auto; padding: 2px; }
.fp-c { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 7px 9px; border-radius: 10px; border: 1px solid #34468a; background: linear-gradient(180deg, #1a2663, #141e52); color: var(--text); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.fp-c span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-c:hover, .fp-c:focus-visible { border-color: var(--gold); }
.fp-c.on { border-color: var(--gold); background: linear-gradient(180deg, #3a3a5a, #2a2a4a); }
.fp-none, .fp-msg { margin: 10px 0 0; color: var(--muted); }
.fp-msg { color: #ffb3a0; }
.fp-sure { display: grid; justify-items: center; gap: 10px; margin: 6px 0 14px; text-align: center; }
.fp-sure b { font-size: 26px; color: var(--gold); font-weight: 400; }
.fp-sure p { margin: 0; max-width: 46ch; color: var(--muted); }
.fp-big { border-radius: 4px; box-shadow: 0 0 0 2px rgba(10, 16, 40, 0.6), 0 6px 14px rgba(0, 0, 0, 0.45); }
.fp-acts { justify-content: center; gap: 10px; }
.nt-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 0 0 10px; }
.nt-mine { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); font-size: 17px; }
.nt-mine b { font-weight: 400; color: var(--rs-red, #8a2a14); }
.nt-big { margin-bottom: 6px; border-radius: 3px; box-shadow: 0 0 0 2px rgba(60, 36, 8, 0.45), 0 3px 0 rgba(60, 36, 8, 0.35); }
.rk-step.p1 .nt-big { transform: scale(1.2); transform-origin: 50% 100%; margin-bottom: 9px; }
.rk-step.you .nt-big { box-shadow: 0 0 0 2px var(--gold-2), 0 3px 0 rgba(60, 36, 8, 0.35); }
.nt-step { cursor: pointer; }
.nt-table tr.rk-pf { cursor: pointer; }
.nt-rise-h { color: var(--ink-2) !important; margin-top: 14px !important; }
.nt-rise-p { margin: 0 0 6px; color: var(--ink-2); font-size: 15px; }
.nt-rise, .wm-most { display: flex; flex-wrap: wrap; gap: 6px; }
.nt-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 250, 228, 0.35); color: var(--ink); font: inherit; font-size: 15px; cursor: pointer; }
.nt-chip b { font-weight: 400; color: var(--ink-2); }
.nt-chip.you { border-color: #b8871f; background: rgba(255, 210, 63, 0.3); }
.wm .sub { margin-bottom: 10px; }
.wm-wrap { overflow-x: auto; overflow-y: hidden; border-radius: 12px; border: 1px solid #34468a; background: #0f1a4a; }
.wm-map { position: relative; min-width: 100%; }
.wm-map canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; touch-action: pan-x pan-y; }
.wm-tip { position: absolute; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 8px; background: rgba(10, 16, 40, 0.92); border: 1px solid #34468a; color: var(--text); font-size: 14px; white-space: nowrap; pointer-events: none; }
.wm-tip span { color: var(--muted); }
.wm-under { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0 10px; }
.wm-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; color: var(--muted); font-size: 14px; }
.wm-legend b { color: var(--text); font-weight: 400; }
.wm-legend span { display: inline-flex; align-items: center; gap: 5px; }
.wm-legend i { width: 14px; height: 10px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4); }
.wm-side { min-height: 64px; padding: 10px 12px; border-radius: 12px; border: 1px solid #34468a; background: linear-gradient(180deg, #1a2663, #141e52); }
.wm-side .nt-chip { border-color: #34468a; background: #0f1a4a; color: var(--text); }
.wm-side .nt-chip b { color: var(--gold); }
.wm-card { display: flex; align-items: center; gap: 12px; }
.wm-card h3 { margin: 0 0 2px; color: var(--gold); font-weight: 400; }
.wm-card p { margin: 0; color: var(--muted); }
.wm-card p b { color: var(--gold); font-weight: 400; }
.wm-flag { border-radius: 3px; }
.wm-top { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; counter-reset: wm; }
.wm-top li { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; background: rgba(15, 26, 74, 0.8); border: 1px solid #34468a; cursor: pointer; counter-increment: wm; }
.wm-top li::before { content: counter(wm); color: var(--gold); }
.wm-top li .wm-face { flex: none; width: 20px; height: 22px; margin-right: -2px; image-rendering: pixelated; }
.wm-top li b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; }
.wm-top li span { margin-left: auto; color: var(--muted); font-size: 14px; white-space: nowrap; }
.wm-top li:hover, .wm-top li.you { border-color: var(--gold); }
.wm-top li.wm-myst { cursor: default; border-style: dashed; color: var(--muted); }
.wm-top li.wm-myst:hover { border-color: #34468a; }
.wm-top li.wm-myst.you { border-color: var(--gold); }
.wm-more, .wm-wait { margin: 8px 0 0; color: var(--muted); }
.wm-acts { justify-content: center; gap: 10px; margin-top: 12px; }
@media (max-width: 520px) { .fp-grid { grid-template-columns: 1fr 1fr; } .fp-c { font-size: 14px; padding: 6px 7px; gap: 6px; } .wm-top { grid-template-columns: 1fr; } .rk-hfl { right: -4px; } }

/* Compact fight-button labels: fallback for browsers without capital trimming. */
.raid-chip.call .call-go .join-label, .fight-pick .join-label { translate: 0 0.09em; }

/* Compact fight invitations (2026-10-31): a ❗ card is two lines (the first caller, +1 for each other one, then the foe)
   and a ⚔ fight chip one line, with no place on either (Join walks you there; an opened fight's place is in its
   picker); small controls, and separate icon/word boxes. Scoped to fight/help cards: raid/event chips and loot pickers
   retain their existing sizing. */
.raid-chip.call { gap: 1px 3px; padding: 2px 3px 3px 5px; line-height: 1.05; }
.raid-chip.call .help-who { flex-wrap: nowrap; gap: 3px; }
.raid-chip.call .help-more { flex: none; padding: 0 4px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.4); background: rgba(12, 10, 25, 0.6); color: #eef2ff; font: 700 10px/12px var(--ui-font); cursor: help; }
.raid-chip.call .help-one { gap: 3px; font-size: 11px; line-height: 1.05; }
.raid-chip.call .help-one b { font-size: 11px; line-height: 1.1; }
.raid-chip.call .help-who > em { font-size: 13px; }
.raid-chip.call .chat-eye, .fight-pick:has(.fp-side) .chat-eye { width: 15px; height: 11px; }
.raid-chip.call .help-foe { display: block; overflow: visible; -webkit-line-clamp: unset; font-size: 11px; line-height: 1.1; overflow-wrap: anywhere; }
.raid-chip.call .call-go i, .fight-pick .fp-side > .btn { display: inline-flex; align-items: center; justify-content: center; gap: 3px; box-sizing: border-box; height: 20px; min-height: 0; padding: 0 5px; font-size: 11px; line-height: 1; text-box: normal; }
.raid-chip.call .call-go .join-icon, .fight-pick .join-icon { display: block; color: inherit; font-size: 11px; line-height: 1; }
.raid-chip.call .call-go .join-label, .fight-pick .join-label { display: block; color: inherit; font-size: 11px; line-height: 1; }
@supports (text-box: trim-both cap alphabetic) {
  .raid-chip.call .call-go .join-label, .fight-pick .join-label { translate: none; text-box: trim-both cap alphabetic; }
}
.raid-chip.call .call-x { width: 18px; height: 18px; font-size: 13px; }
.raid-chip.call .call-rd { right: 25px; font-size: 9px; }
.raid-chip.fight { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto auto; gap: 1px 3px; width: 230px; height: auto; padding: 2px 3px 3px 5px; }
.raid-chip.fight b { font-size: 11px; line-height: 1.1; }
.raid-chip.fight > :is(span, em) { font-size: 11px; }
.raid-chip.fight > i { height: 20px; min-width: 18px; padding: 0 5px; font-size: 11px; }
.fight-pick:has(.fp-side) { gap: 3px 4px; padding: 3px; }
.fight-pick:has(.fp-side) > small { font-size: 11px; line-height: 1.1; white-space: normal; overflow-wrap: anywhere; }
.fight-pick .fp-side { gap: 4px; padding: 2px 3px 2px 4px; }
.fight-pick .fp-side ul { padding: 0; gap: 1px; }
.fight-pick .fp-side li { gap: 3px; font-size: 11px; line-height: 1.1; }
.fight-pick .fp-side li > span { padding: 0 3px; font-size: 10px; line-height: 13px; }
.fight-pick:has(.fp-side) > em { font-size: 10px; margin: -2px 0; }