:root {
  color-scheme: light;
  --bg: #f1f5f9;
  --surface: #ffffff;
  --ink: #000000;
  --muted: rgba(0, 0, 0, 0.6);
  --line: rgba(0, 0, 0, 0.04);
  --overlay: rgba(255, 255, 255, 0.88);
  --brand: #f97316;
  --brand-dark: #c2410c;
  --danger: #ef4444;
  --gold: #facc15;
  --radius: 16px;
  --board-w: 400px;
  --board-h: 546px;
}

:root.dark {
  color-scheme: dark;
  --bg: #020617;
  --surface: #0f172a;
  --ink: #ffffff;
  --muted: rgba(255, 255, 255, 0.6);
  --line: rgba(255, 255, 255, 0.04);
  --overlay: rgba(15, 23, 42, 0.88);
}

* { box-sizing: border-box; margin: 0; }

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 100dvh;
  padding: 12px;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

button { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
button:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.gold { color: var(--gold); }
svg { display: block; }
img { display: block; }

.hud { display: flex; align-items: center; gap: 8px; width: max(var(--board-w), 304px); max-width: 100%; }
.hud-honor { display: flex; align-items: center; gap: 4px; flex: none; padding: 6px 10px; border-radius: 999px; background: linear-gradient(90deg, #fde047, #f59e0b); color: #78350f; font-size: 14px; font-weight: 900; white-space: nowrap; box-shadow: 0 0 12px rgba(250, 204, 21, 0.5); }
.hud-honor[hidden] { display: none; }
.hud-honor svg { width: 18px; height: 18px; }
.hud-honor.crown2 { background: linear-gradient(90deg, #f1f5f9, #94a3b8); color: #1e293b; }
.hud-honor.crown3 { background: linear-gradient(90deg, #fed7aa, #f97316); color: #7c2d12; }
.hud-honor.medal { background: linear-gradient(90deg, #bfdbfe, #3b82f6); color: #1e3a8a; }
/* In a world boss fight: how much stronger the boss has grown. */
.hud-honor.fury { flex-direction: column; gap: 0; padding: 4px 10px; border-radius: 12px; background: linear-gradient(180deg, #ef4444, #991b1b); color: #ffffff; line-height: 1.15; box-shadow: 0 0 12px rgba(239, 68, 68, 0.55); }
.hud-honor.fury span { font-size: 11px; }
.hud-honor.fury b { font-size: 17px; font-variant-numeric: tabular-nums; }
/* A world boss try's chests so far: gold, and it jumps when one more is won. */
.hud-chests { display: flex; flex: none; flex-direction: column; align-items: center; padding: 4px 10px; border-radius: 12px; background: linear-gradient(180deg, #fde047, #d97706); color: #451a03; line-height: 1.15; white-space: nowrap; box-shadow: 0 0 12px rgba(250, 204, 21, 0.5); }
.hud-chests[hidden] { display: none; }
.hud-chests span { font-size: 11px; font-weight: 800; }
.hud-chests b { display: flex; align-items: center; gap: 2px; font-size: 17px; font-weight: 900; font-variant-numeric: tabular-nums; }
.hud-chests svg { width: 18px; height: 18px; }
.hud-chests.bump { animation: chest-knock 0.5s ease-out; }
button.hud-chests { border: 0; font: inherit; cursor: pointer; }
/* A world boss try: call friends (the room's invite colours), on the boss panel's left side between its warnings above
   and the bars broken (×N) below, well above the board; in canvas units (--u, set by resize). Bigger and glowing, its
   words beside the icon, when everyone's boss is about to fall. */
.fight-share { position: absolute; top: calc(var(--u, 1) * 54px); left: calc(var(--u, 1) * 4px); z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: calc(var(--u, 1) * 60px); height: calc(var(--u, 1) * 46px); padding: 2px 6px; border: 0; border-radius: 12px; background: radial-gradient(120% 140% at 0% 50%, #64121a, #2a080c 60%); color: #f7e7bf; font: inherit; font-size: 11px; font-weight: 800; line-height: 1.1; white-space: nowrap; cursor: pointer; box-shadow: inset 0 0 0 1.5px #e8c97a, 0 4px 10px rgba(0, 0, 0, 0.4); }
.fight-share[hidden] { display: none; }
.fight-share svg { flex: none; width: 18px; height: 18px; color: #e8c97a; }
.fight-share.soon { flex-direction: row; gap: 4px; padding: 2px 9px 2px 7px; font-size: 12.5px; text-align: left; white-space: pre-line; animation: invite-glow 1.6s ease-in-out infinite; }
.fight-share.soon svg { width: 22px; height: 22px; }
/* The same in the side column, under the chests, when the bars are beside the board (the board is too small there). */
.hud-share { display: none; flex: none; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 6px; border: 0; border-radius: 12px; background: radial-gradient(120% 140% at 0% 50%, #64121a, #2a080c 60%); color: #f7e7bf; font: inherit; font-size: 13px; font-weight: 800; line-height: 1.15; text-align: center; white-space: pre-line; cursor: pointer; box-shadow: inset 0 0 0 1.5px #e8c97a; }
.hud-share svg { width: 24px; height: 24px; color: #e8c97a; }
.hud-share.soon { padding: 12px 6px; font-size: 15px; animation: invite-glow 1.6s ease-in-out infinite; }
.hud-share.soon svg { width: 30px; height: 30px; }
/* The chests a try has won so far, in their colours (showChestsWon). */
.won-chests { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; width: 100%; }
.won-chests span { display: grid; place-items: center; }
.won-chests svg { width: 100%; max-width: 56px; height: auto; }
.won-chests .t1 svg, .won-kinds .t1 svg { filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.9)); }
.won-chests .t2 svg, .won-kinds .t2 svg { filter: drop-shadow(0 0 7px rgba(168, 85, 247, 0.95)); }
.won-kinds { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 0; font-weight: 800; }
.won-kinds span { display: inline-flex; align-items: center; gap: 4px; }
.won-kinds svg { width: 24px; height: 24px; }
/* Phones: six things in the top bar, so smaller buttons and the honor's words under its crown. */
@media (max-width: 440px) {
  .hud { gap: 6px; }
  .hud .icon-btn { width: 44px; height: 44px; }
  .hud .icon-btn.labeled { width: auto; min-width: 44px; }
  .hud-honor:not(.fury) { flex-direction: column; gap: 0; padding: 4px 8px; border-radius: 12px; font-size: 11px; line-height: 1.15; }
}
/* Still too wide (fitHud): the crown alone, then smaller numbers, then no badge. */
.hud.tight .hud-honor:not(.fury) { padding: 8px; }
.hud.tight .hud-honor:not(.fury) span { display: none; }
.hud.tighter .stat { padding: 4px 8px; }
.hud.tighter .stat b { font-size: 18px; }
.hud.tightest .hud-honor { display: none; }
.stat { flex: none; min-width: 72px; padding: 4px 12px; border-radius: 12px; background: var(--surface); }
.stat small { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; }
.stat b { font-size: 22px; font-variant-numeric: tabular-nums; }
.spacer { flex: 1; }
.icon-btn { position: relative; display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 12px; background: var(--surface); }
.icon-btn svg { width: 22px; height: 22px; }
/* An icon button with its name under the icon (the user: players could not tell what the icons were). */
.icon-btn.labeled { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: auto; min-width: 48px; padding: 3px 6px; }
.icon-btn.labeled svg { width: 20px; height: 20px; }
.icon-label { font-size: 11px; font-weight: 800; line-height: 1.1; white-space: nowrap; }
/* Back to the game list: only when the site shows the game full screen. */
.exit-btn { display: none; }
.htmlift-immersive .exit-btn { display: grid; }
#hammer-btn[aria-pressed="true"] { background: var(--brand); color: #fff; }
#hammer-btn.empty { color: var(--muted); }
.badge { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 13px; font-weight: 800; line-height: 22px; text-align: center; }
.empty .badge { background: var(--muted); }
.badge.dot { top: -3px; right: -3px; width: 12px; min-width: 0; height: 12px; padding: 0; box-shadow: 0 0 0 2px var(--bg); }

.skill-bar { display: flex; align-items: stretch; gap: 8px; flex: none; width: max(var(--board-w), min(100%, 360px)); }
.skill-open { position: relative; display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; min-height: 52px; padding: 6px 12px; border-radius: 14px; background: var(--surface); text-align: left; }
.skill-open-icon svg { width: 26px; height: 26px; color: #a855f7; }
.skill-open-text { display: flex; flex: 1; flex-direction: column; gap: 5px; min-width: 0; font-size: 14px; }
.skill-open .badge { top: -7px; right: -7px; }
/* Ready: one calm purple with a soft glow (the user's call: the rainbow was too much). */
.skill-bar.ready .skill-open { background: linear-gradient(135deg, #7c3aed, #6d28d9); color: #fff; box-shadow: 0 3px 0 #4c1d95; animation: power-ready 1.6s ease-in-out infinite; }
.skill-bar.ready .skill-open-icon svg { color: #fff; }
.skill-bar.ready .power-track { background: rgba(255, 255, 255, 0.3); }
.skill-bar.ready #power-fill { background: #ede9fe; }
.skill-open[aria-pressed="true"] { background: #7e22ce; color: #fff; }
.skill-bar.silenced .skill-open { filter: grayscale(1); opacity: 0.45; }
/* Items: their own bar under the board, laid out like the skills. Tap an item to pick it up, again to use it. */
/* The labels stay on one line however narrow the bar gets. */
.skill-open-text b { white-space: normal; }
.skill-open { flex: 1 1 auto; padding: 6px 8px; gap: 6px; min-height: 64px; }
/* The skill in hand and what it does in a few words; under the energy, what it waits for and the energy. */
.skill-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.skill-title > b:first-child { font-size: 17px; line-height: 1.15; }
.skill-line { font-size: 14px; font-weight: 800; line-height: 1.15; opacity: 0.85; }
.skill-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.skill-stage { flex: none; font-size: 13px; font-variant-numeric: tabular-nums; }
.skill-bar .bag-btn { flex: 0 0 78px; gap: 4px; padding: 6px 8px; }
.skill-bar .bag-icon { display: none; }
/* The skill menu (no pages): the favourites big, two a row, then every skill owned, three a row. A tap on a card casts;
   the star at its corner adds it to the favourites or takes it off. */
.skill-grid.skill-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.skill-grid.skill-choices.mine { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.skill-choices .skill-card { position: relative; min-height: 132px; padding: 0; }
.skill-cast { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; height: 100%; padding: 10px 8px 12px; border-radius: inherit; background: none; color: inherit; text-align: center; }
.skill-choices .skill-card b { font-size: 18px; }
.skill-choices .skill-card em { font-size: 16px; }
/* What it does in a few words, under its name. */
.skill-choices .skill-card .skill-line { color: var(--ink); font-size: 15px; font-weight: 800; line-height: 1.25; }
.skill-choices.mine .skill-card { min-height: 0; }
/* The small cards' tier tag under the star and the lock, which take their top corners. */
.skill-choices.mine .skill-cast { gap: 4px; padding: 30px 4px 10px; }
.skill-choices.mine .skill-card .pi { width: 40px; height: 40px; }
.skill-choices.mine .skill-card b { font-size: 15px; line-height: 1.2; }
.skill-choices.mine .skill-card .skill-line { font-size: 12px; }
.skill-choices.mine .skill-card em { font-size: 13px; line-height: 1.25; }
.skill-card.wait { opacity: 0.5; }
.skill-star { position: absolute; top: 0; right: 0; display: grid; place-items: center; width: 44px; height: 44px; padding: 10px; color: var(--muted); opacity: 0.55; }
.skill-star svg { width: 100%; height: 100%; }
.skill-star.on { color: #facc15; opacity: 1; filter: drop-shadow(0 0 4px rgba(250, 204, 21, 0.6)); }
.skill-star.auto.on { opacity: 0.7; filter: none; }
.skill-sec { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 -4px; }
.sheet .skill-sec { color: var(--ink); font-size: 19px; letter-spacing: 0.04em; }
.skill-sec small { color: var(--muted); font-size: 13px; font-weight: 800; letter-spacing: 0; }
.fav-none { margin: 0; font-size: 16px; text-align: center; }
.skill-more { align-self: center; width: auto; padding: 10px 18px; font-size: 15px; }
/* A rarity tag sits above the icon here, so a long one (English) never covers it. */
.skill-choices .rare-tag { position: static; }
.skill-energy { display: flex; flex-direction: column; gap: 6px; }
.skill-energy b { font-size: 18px; }
.skill-energy small { color: var(--muted); font-size: 14px; }
.skill-energy .power-track { height: 12px; }
.skill-energy .power-track > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #a78bfa, #7c3aed); }
.skill-guide { font-size: 24px; line-height: 1.6; color: var(--ink); }
/* The bag with the coins: as big as the skill button beside it, the items to use and to buy in its window. */
.bag-btn { position: relative; display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; min-height: 52px; padding: 6px 12px; border-radius: 14px; background: linear-gradient(160deg, #fbbf24, #ea580c); color: #fff; text-align: left; box-shadow: 0 3px 0 #9a3412; }
.bag-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #9a3412; }
.bag-icon, .bag-icon svg { display: grid; flex: none; width: 28px; height: 28px; }
.bag-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bag-text > b { font-size: 16px; white-space: nowrap; }
.bag-coins { display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 900; font-variant-numeric: tabular-nums; }
.bag-coins svg { flex: none; width: 18px; height: 18px; }
.item-card .use { width: 100%; padding: 6px 0; border-radius: 10px; background: #a855f7; color: #fff; font-size: 14px; font-weight: 900; }
.item-card .use:disabled { opacity: 0.35; }
.game-menu { display: flex; flex-direction: column; gap: 10px; }
.game-menu button { display: flex; align-items: center; justify-content: center; gap: 10px; }
.game-menu svg { width: 24px; height: 24px; }
.bag-btn .badge { background: #475569; }
.bag-btn.aim { background: #a855f7; box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.35); animation: slot-glow 1.1s ease-in-out infinite; }
.skill-open.aim { background: #7e22ce; color: #fff; box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.35); }
.power-track { position: relative; flex: none; width: 100%; height: 9px; overflow: hidden; border-radius: 999px; background: var(--line); }
/* Three bars of energy. */
.power-track::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent calc(33.33% - 1.5px), var(--surface) 0 calc(33.33% + 1.5px), transparent 0 calc(66.67% - 1.5px), var(--surface) 0 calc(66.67% + 1.5px), transparent 0); }
#power-fill { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #a78bfa, #7c3aed); transition: width 0.3s ease; }
.power-status { font-size: 13px; font-variant-numeric: tabular-nums; }

.board { position: relative; flex: none; width: var(--board-w); height: var(--board-h); }
canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.fight-team { position: absolute; right: 0; bottom: 0; width: calc(var(--u, 1) * 170px); height: calc(var(--u, 1) * 40px); padding: 0; border: 1px solid color-mix(in srgb, var(--muted) 35%, transparent); border-radius: 12px; background: transparent; box-shadow: none; }
.fight-team:hover, .fight-team:focus-visible { background: #facc1522; outline: 2px solid #facc15; outline-offset: -2px; }
.fight-team[hidden], .board:has(.overlay:not([hidden])) .fight-team { display: none; }
.raid-team-list { display: grid; gap: 10px; margin: 18px 0; }
.raid-ally-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border: 1px solid var(--track); border-radius: 16px; background: var(--bg); color: var(--ink); text-align: left; }
.raid-ally-row > img, .raid-ally-row > .af { flex: none; width: 56px; height: 56px; }
.raid-ally-row > span { flex: 1; min-width: 0; }
.raid-ally-row b, .raid-ally-row small { display: block; overflow-wrap: anywhere; }
.raid-ally-row b { font-size: 19px; }
.raid-ally-row small { margin-top: 4px; color: var(--ally-color); font-size: 14px; }
.raid-ally-row i { width: 28px; height: 28px; color: var(--ally-color); }
.raid-ally-row em { color: var(--muted); font-size: 24px; font-style: normal; }
.raid-ally-row.hit, .raid-ally-card.hit { --ally-color: #f97316; }
.raid-ally-row.heal, .raid-ally-card.heal { --ally-color: #16a34a; }
.raid-ally-row.make, .raid-ally-card.make { --ally-color: #a855f7; }
.result-tiles.raid-team-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 18px; }
.raid-ally-card { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 12px 0 24px; }
.raid-ally-card h2, .raid-ally-card p { margin: 0; }
.raid-ally-kind { display: inline-flex; align-items: center; gap: 6px; color: var(--ally-color); font-size: 18px; font-weight: 900; }
.raid-ally-kind svg { width: 28px; height: 28px; }
.raid-ally-effect { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; padding: 20px; border-radius: 18px; background: var(--bg); }
.raid-ally-effect b { color: var(--ally-color); font-size: 46px; line-height: 1.1; }
.raid-ally-effect small { color: var(--muted); font-size: 16px; font-weight: 800; }
.raid-hit-info { flex: 1; min-width: 0; }
.raid-hit-info > b { display: block; font-size: 17px; }
.raid-hit-bars { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 7px; color: #facc15; }
.raid-hit-bars > svg { align-self: center; width: 28px; height: 18px; }
.raid-hit-bars strong { font-size: 32px; font-weight: 900; line-height: 1.2; font-variant-numeric: tabular-nums; }
.raid-hit-bars > span { color: var(--ink); font-size: 13px; font-weight: 800; }
.raid-hit-points { display: block; margin-top: 3px; color: var(--muted); font-size: 13px; }
:root:not(.dark) .raid-hit-bars { color: #a16207; }
.raid-contribution-note, .road-target-note { color: var(--muted); font-size: 13px; line-height: 1.5; }
.road-me.simple { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.road-me.simple b { font-size: 25px; }
.road-purpose { margin: 8px 0; color: var(--ink); font-size: 19px; font-weight: 900; text-align: center; }
.road-target-note { margin: 6px 0 10px; text-align: center; }

.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* A long result (with its board) starts at the top and scrolls, instead of spilling over the top. */
  justify-content: safe center;
  --ov-pad: 24px;
  gap: 10px;
  padding: var(--ov-pad);
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: var(--radius);
  background: var(--overlay);
  text-align: center;
  animation: fade-in 0.3s both;
}
.overlay[hidden] { display: none; }
.chests { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.chests[hidden] { display: none; }
.overlay .chests p { color: var(--brand); font-weight: 800; }
.chest-row { display: flex; gap: 14px; }
.chest-pick { position: relative; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 18px; background: var(--surface); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.12); animation: chest-glow 1.2s ease-in-out infinite; }
.chest-pick:nth-child(2) { animation-delay: 0.2s; }
.chest-pick:nth-child(3) { animation-delay: 0.4s; }
.chest-pick svg { width: 58px; height: 58px; }
.chest-pick.picked { box-shadow: 0 0 0 4px var(--gold); animation: none; transform: scale(1.12); }
.chest-pick.other { opacity: 0.45; animation: none; }
.chest-pick b { position: absolute; bottom: -12px; left: 50%; display: flex; align-items: center; gap: 2px; padding: 2px 9px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 16px; white-space: nowrap; transform: translateX(-50%); }
.chest-pick b svg { width: 15px; height: 15px; }
.ko-card { position: relative; width: 112px; height: 112px; flex: none; }
.ko-card[hidden] { display: none; }
.ko-card img { width: 100%; height: 100%; }
.ko-card b { position: absolute; left: 50%; top: 50%; margin: -22px 0 0 -58px; width: 116px; padding: 4px 0; border: 4px solid #ef4444; border-radius: 12px; background: rgba(255, 255, 255, 0.85); color: #ef4444; font-size: 30px; letter-spacing: 0.06em; transform: rotate(-12deg); animation: ko-stamp 0.5s 0.3s both; }
.overlay h1 { font-size: 36px; letter-spacing: 0.1em; }
.overlay p { color: var(--muted); font-size: 18px; line-height: 1.8; }
.stars { display: flex; gap: 8px; font-size: 60px; line-height: 1; }
.stars[hidden] { display: none; }
.stars span { color: var(--muted); opacity: 0.2; }
.stars .on { color: var(--gold); opacity: 1; text-shadow: 0 3px 0 #ca8a04; animation: star-pop 0.5s both; }
.tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
/* A result's main button stays in sight at the bottom (the user's call: no scrolling for "Next"); the rest kept short:
   the stars with the score, the experience beside the chest's coins, the opened chest gone once its cards show. */
.overlay > .actions { position: sticky; bottom: calc(-1 * var(--ov-pad)); z-index: 3; width: calc(100% + 2 * var(--ov-pad)); margin: 0 calc(-1 * var(--ov-pad)); padding: 12px var(--ov-pad) var(--ov-pad); background: linear-gradient(to top, #0f172a 76%, rgba(15, 23, 42, 0)); }
.overlay > .actions:has(> .chest-ask) { flex-direction: column; align-items: stretch; }
.result-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 14px; }
.result-head p { margin: 0; line-height: 1.4; }
.overlay .stars { font-size: 46px; }
.result-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.result-row:not(:has(> :not([hidden]))) { display: none; }
.result-row .xp-row { flex: 1 1 190px; width: auto; }
:is(.overlay, .sheet) .match-chest:has(.loot-row) > :is(.raid-chest-big, .chest-line, .chest-hint) { display: none; }
:is(.overlay, .sheet) .match-chest .loot-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 0; }
:is(.overlay, .sheet) .match-chest .loot-card { width: 76px; padding: 6px 4px; gap: 2px; border-radius: 14px; }
:is(.overlay, .sheet) .match-chest .loot-icon { width: 30px; height: 30px; }
:is(.overlay, .sheet) .match-chest .loot-icon:is(.pi, .item) { padding: 5px; border-radius: 9px; }
:is(.overlay, .sheet) .match-chest .loot-card img { width: 34px; height: 34px; }
:is(.overlay, .sheet) .match-chest .loot-card b { font-size: 17px; }
:is(.overlay, .sheet) .match-chest .loot-card small { font-size: 12px; }
:is(.overlay, .sheet) .chest-pity { margin: 2px 0 0; font-size: 13px; }
.tags[hidden] { display: none; }
.result-tiles { display: grid; flex-basis: 100%; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.result-tiles span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 14px; background: var(--bg); box-shadow: inset 0 0 0 1px rgba(232, 201, 122, 0.25); }
.result-tiles b { color: #f0d98c; font-size: 22px; font-weight: 900; line-height: 1.1; }
.result-tiles small { color: var(--muted); font-size: 13px; font-weight: 800; }
.result-tiles.with-power { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.result-tiles.power-result { grid-template-columns: 1fr; }
.result-tiles .power-gain { position: relative; padding-left: 28px; }
.power-gain .road-i { position: absolute; width: 22px; height: 26px; left: 9px; top: 50%; transform: translateY(-50%); color: #facc15; }
.tag { padding: 4px 14px; border-radius: 999px; background: var(--gold); color: #713f12; font-size: 16px; font-weight: 800; animation: star-pop 0.5s both; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.primary { padding: 14px 36px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 20px; font-weight: 700; }
.secondary { padding: 14px 24px; border-radius: 999px; background: var(--surface); font-size: 20px; font-weight: 700; }
.overlay .secondary { box-shadow: inset 0 0 0 2px rgba(127, 127, 127, 0.25); }
.secondary[hidden] { display: none; }
.share { padding: 8px 24px; border-radius: 999px; color: var(--brand); box-shadow: inset 0 0 0 2px var(--brand); font-size: 16px; font-weight: 700; }
/* Asking friends to the world boss: as big as trying again, in the world boss card's dark red and gold, glowing
   (the user's call: it should stand out but keep the game's look). */
.share.invite { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; padding: 13px 18px; border-radius: 18px; background: radial-gradient(120% 140% at 0% 50%, #64121a, #2a080c 55%, #120406); color: #f7e7bf; font-size: 19px; font-weight: 900; letter-spacing: 0.04em; box-shadow: inset 0 0 0 1.5px #e8c97a, 0 10px 24px -12px rgba(201, 161, 74, 0.7); animation: invite-glow 1.6s ease-in-out infinite; }
.share.invite[hidden] { display: none; }
.invite-main { display: flex; align-items: center; gap: 8px; }
.share.invite svg { width: 24px; height: 24px; flex: none; }
.share.invite svg { color: #e8c97a; }
.share.invite small { color: #e8c97a; font-size: 13px; font-weight: 700; }
@keyframes invite-glow { 50% { box-shadow: inset 0 0 0 1.5px #f3d98b, 0 0 0 4px rgba(232, 201, 122, 0.25), 0 10px 24px -12px rgba(201, 161, 74, 0.9); } }
.hint { flex: none; width: max(var(--board-w), 296px); max-width: 100%; min-height: 3.2em; color: var(--muted); font-size: 14px; line-height: 1.6; text-align: center; }
.hint.tip { color: var(--ink); font-size: 15px; font-weight: 700; }
.legend { flex: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 10px; width: max(var(--board-w), min(100%, 360px)); max-width: 100%; color: var(--ink); font-size: 15px; font-weight: 800; }
.legend[hidden] { display: none; }
.legend .lg { display: inline-flex; align-items: center; white-space: nowrap; }
.legend img { width: 22px; height: 22px; margin-right: 2px; }
.legend .lg-all { flex-basis: 100%; text-align: center; color: var(--muted); font-size: 13px; }
body.tight .hint { display: none; }

/* Level map */
:is(body.on-map, body.on-menu) :is(.hud, .board, .hint, .legend, .skill-bar) { display: none; }
#map-btn .home-ico, body.tower #map-btn .map-ico { display: none; }
body.tower #map-btn .home-ico { display: block; }
/* A level's own way to the main menu, beside the map's; elsewhere the first button already goes there. */
body.tower #home-btn { display: none; }
.map { position: fixed; inset: 0; z-index: 2; display: flex; flex-direction: column; background: var(--bg); }
.map[hidden] { display: none; }
.map-top, .daily-bar { width: 100%; max-width: 520px; margin: 0 auto; }
.map-top { display: flex; align-items: center; gap: 8px; padding: max(12px, env(safe-area-inset-top)) 12px 8px; }
.me-chip { display: flex; align-items: center; gap: 10px; min-width: 0; height: 56px; padding: 0 16px 0 6px; border-radius: 999px; background: var(--surface); text-align: left; }
.me-chip { position: relative; }
.me-chip img { width: 44px; height: 44px; flex: none; }
/* Player level: a gold badge on the avatar, a tile on the menu, the result bar, the level-up show. */
.lv-badge { position: absolute; left: 3px; bottom: 2px; padding: 0 6px; border-radius: 999px; background: linear-gradient(180deg, #fde047, #f59e0b); color: #713f12; font-size: 11px; font-weight: 900; line-height: 16px; white-space: nowrap; box-shadow: 0 0 0 2px var(--surface); }
.lv-medal { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; width: 68px; height: 68px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fef9c3, #facc15 45%, #d97706); color: #78350f; line-height: 1; box-shadow: 0 0 0 4px #ffffff, 0 4px 12px rgba(217, 119, 6, 0.55); }
.lv-medal small { font-size: 12px; font-weight: 900; }
.lv-medal b { font-size: 26px; font-weight: 900; }
.lv-medal b.long, .lv-medal.long b { font-size: 20px; }
.lv-track { position: relative; display: block; height: 12px; overflow: hidden; border-radius: 6px; background: rgba(120, 53, 15, 0.18); }
.lv-track.wide { width: 100%; height: 16px; border-radius: 8px; background: var(--bg); }
.lv-track i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: inherit; background: linear-gradient(90deg, #f97316, #ec4899, #a855f7); transition: width 0.9s cubic-bezier(0.3, 1.3, 0.5, 1); }
.xp-row { display: flex; align-items: center; gap: 10px; width: min(100%, 320px); }
.xp-row[hidden] { display: none; }
.xp-row .lv-badge { position: static; padding: 0 10px; font-size: 15px; line-height: 26px; box-shadow: none; }
.xp-row .lv-badge.up { animation: star-pop 0.6s both; }
.xp-row .lv-track { flex: 1; height: 14px; background: rgba(127, 127, 127, 0.3); }
.xp-row b { color: #a855f7; font-size: 16px; white-space: nowrap; }
.lvup .lv-medal { width: 136px; height: 136px; box-shadow: 0 0 0 6px #ffffff, 0 0 44px 12px rgba(250, 204, 21, 0.75); animation: unlock-pop 0.9s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.lvup .lv-medal small, .lvcard .lv-medal small { font-size: 20px; }
.lvup .lv-medal b { font-size: 58px; }
.lvup .lv-medal.long b { font-size: 40px; }
.lvup .lv-medal.boom { animation: medal-boom 0.7s cubic-bezier(0.2, 1.8, 0.4, 1); }
.lvup.milestone .lv-medal { background: conic-gradient(#f43f5e, #f59e0b, #facc15, #22c55e, #3b82f6, #a855f7, #f43f5e); color: #ffffff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); }
.lvup-title { font-size: 46px; font-weight: 900; line-height: 1.1; letter-spacing: 0.06em; background: linear-gradient(180deg, #fde047, #f59e0b 55%, #ea580c); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 #9a3412); animation: stamp 0.6s 0.2s both; }
.lvup-many { color: #a855f7; font-size: 21px; font-weight: 900; animation: pop-in 0.5s 0.6s both; }
.lv-stats { display: flex; gap: 10px; }
.lv-stats > div { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 18px; background: var(--bg); }
.lv-stats span { color: var(--muted); font-size: 15px; font-weight: 800; }
.lv-stats b { color: #ef4444; font-size: 30px; font-weight: 900; line-height: 1.2; }
.lv-stats > div + div b { color: #f97316; }
.lv-stats em { color: #16a34a; font-size: 17px; font-style: normal; font-weight: 900; animation: pop-in 0.4s 0.9s both; }
.lvcard { height: 180px; }
.lvcard img { position: relative; width: 120px; height: 120px; animation: unlock-pop 0.8s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.lvcard .lv-medal { position: absolute; left: calc(50% + 22px); bottom: 14px; width: 66px; height: 66px; }
.lvcard-name { margin-top: -6px; font-size: 24px; font-weight: 900; }
.confetti-rain { position: fixed; inset: 0; z-index: 15; overflow: hidden; pointer-events: none; }
.confetti-rain i { position: absolute; top: -24px; width: 10px; height: 16px; border-radius: 2px; background: var(--c); animation: confetti-fall 3s ease-in both; }
.me-text { display: flex; flex-direction: column; min-width: 0; }
.me-text b { overflow: hidden; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
.title-pill { align-self: flex-start; padding: 1px 8px; border-radius: 999px; background: var(--tc, #94a3b8); color: #fff; font-size: 12px; font-weight: 800; white-space: nowrap; }
/* A world boss title: red and gold (Slayer) or magenta (Top damage), with a slow shine. */
.title-pill.brag { background: linear-gradient(90deg, #450a0a, #b91c1c, #450a0a) 0 0 / 200% 100%; color: #fde68a; box-shadow: 0 0 8px rgba(239, 68, 68, 0.6); animation: brag-shine 3s linear infinite; }
.title-pill.brag.mvp { background-image: linear-gradient(90deg, #4c0519, #c026d3, #4c0519); color: #fef3c7; box-shadow: 0 0 8px rgba(192, 38, 211, 0.6); }
@keyframes brag-shine { to { background-position: -200% 0; } }
.daily-bar { display: flex; align-items: center; gap: 10px; width: calc(100% - 24px); max-width: 496px; height: 48px; padding: 0 16px; border-radius: 16px; background: var(--surface); font-size: 16px; font-weight: 700; }
.daily-bar .dots { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: middle; }
.dots i { width: 12px; height: 12px; border-radius: 50%; background: rgba(127, 127, 127, 0.25); }
.dots i.on { background: #22c55e; }
.daily-left { flex: 1; text-align: left; white-space: nowrap; }
.streak { color: var(--brand); white-space: nowrap; }
.star-total { white-space: nowrap; }
.star-total i { color: var(--gold); font-style: normal; }
.map-scroll { flex: 1; margin-top: 8px; overflow-x: hidden; overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; }
.path { position: relative; width: 100%; max-width: 480px; margin: 0 auto; }
.path > svg { position: absolute; left: 0; top: 0; pointer-events: none; }
.zone { position: absolute; left: 8px; right: 8px; overflow: hidden; border-radius: 32px; }
.zone .deco { position: absolute; color: var(--c); opacity: 0.22; }
.zone-head { position: absolute; left: 16px; right: 16px; display: flex; align-items: center; gap: 10px; }
.zone-name { flex: 1; min-width: 0; padding: 8px 16px; border-radius: 18px; background: var(--surface); text-align: left; }
.zone-name small { display: block; color: var(--muted); font-size: 13px; font-weight: 700; }
.zone-name strong { display: block; overflow: hidden; font-size: 20px; text-overflow: ellipsis; white-space: nowrap; }
.chest { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 8px; border-radius: 16px; background: var(--surface); color: var(--muted); font-size: 13px; font-weight: 800; white-space: nowrap; }
.chest svg { width: 44px; height: 44px; }
.chest.ready { color: var(--brand); animation: bob 1s ease-in-out infinite; box-shadow: 0 0 0 3px var(--gold); }
.chest.opened svg { opacity: 0.5; }
.node { position: absolute; display: grid; place-items: center; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: var(--c); color: #fff; font-size: 24px; font-weight: 800; box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.2), 0 4px 10px rgba(0, 0, 0, 0.15); }
.node b { text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25); }
.node.n4 { font-size: 18px; }
.node.n5 { font-size: 15px; }
.node.lock { background: var(--surface); color: var(--muted); box-shadow: inset 0 -5px 0 rgba(127, 127, 127, 0.12); }
.node.lock b { text-shadow: none; }
.node.now { background: var(--brand); box-shadow: 0 0 0 5px #ffffff, 0 0 0 11px rgba(249, 115, 22, 0.45), inset 0 -6px 0 rgba(0, 0, 0, 0.2); animation: glow 1.4s ease-in-out infinite; }
.node.boss { width: 104px; height: 104px; margin: -52px 0 0 -52px; background: var(--surface); box-shadow: 0 0 0 6px var(--c), 0 6px 14px rgba(0, 0, 0, 0.2); }
.node.boss.now { box-shadow: 0 0 0 6px var(--brand), 0 0 0 14px rgba(249, 115, 22, 0.3); }
.node.boss img.face { width: 96px; height: 96px; }
.node.boss.mini-boss { width: 82px; height: 82px; margin: -41px 0 0 -41px; }
.node.boss.mini-boss img.face { width: 74px; height: 74px; }
.node.boss.mini-boss .me { left: 64px; }
.node.boss.lock img.face { filter: grayscale(1); opacity: 0.45; }
.node .mini { position: absolute; top: -18px; display: flex; color: rgba(127, 127, 127, 0.45); font-size: 17px; line-height: 1; }
.node.boss .mini { top: -24px; font-size: 20px; }
.mini .on { color: var(--gold); text-shadow: 0 1px 0 #a16207; }
.node .me { position: absolute; top: -26px; left: 46px; width: 46px; height: 46px; animation: hop 0.9s ease-in-out infinite; pointer-events: none; }
.node.boss .me { top: -22px; left: 84px; }
.node .label { position: absolute; bottom: -14px; padding: 2px 10px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 13px; white-space: nowrap; text-shadow: none; }
.walker { position: absolute; left: 0; top: 0; z-index: 3; width: 46px; height: 46px; margin: -23px 0 0 -23px; pointer-events: none; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.2)); }
.node.pop { animation: node-pop 0.6s both; }
.mini.fresh .on { animation: star-pop 0.5s both; }
.mini.fresh .on:nth-child(2) { animation-delay: 0.15s; }
.mini.fresh .on:nth-child(3) { animation-delay: 0.3s; }
.spark { position: absolute; z-index: 4; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 3px; pointer-events: none; animation: spark 0.9s ease-out both; }
.big.pulse { animation: pulse-btn 0.9s ease-in-out 3; }
.big:disabled { opacity: 0.7; }
.more { position: absolute; left: 50%; transform: translateX(-50%); padding: 10px 20px; border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 16px; font-weight: 700; white-space: nowrap; }
.map-bottom { display: flex; justify-content: center; padding: 10px 12px max(12px, env(safe-area-inset-bottom)); }
.map-bottom[hidden] { display: none; }
.big { width: min(100%, 440px); padding: 16px 24px; font-size: 22px; box-shadow: 0 5px 0 var(--brand-dark); }
.big:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--brand-dark); }

/* Main menu */
.menu { position: fixed; inset: 0; z-index: 2; display: flex; flex-direction: column; background: var(--bg); }
.menu[hidden] { display: none; }
.menu:has(> .map-bottom[hidden]) .menu-body { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.tile[hidden] { display: none; }
.wardrobe-big { display: block; width: 120px; height: 120px; margin: 0 auto 8px; }
/* A face with an aura is a box of positioned images, no height of its own to keep: in a window's column (a flex box that
   scrolls) it was squeezed flat once the window filled up (the user's report: the wardrobe's big face). */
.sheet > .af-box { flex-shrink: 0; }
.look-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 14px; }
.look-card { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 8px 4px; border: 3px solid transparent; border-radius: 16px; background: var(--bg); }
.look-card img { width: 64px; height: 64px; }
.look-card b { font-size: 14px; line-height: 1.2; }
.look-card em { color: var(--brand); font-size: 13px; font-style: normal; font-weight: 900; }
.look-card.on { border-color: var(--brand); }
.wpn { position: relative; isolation: isolate; }
.wpn-svg { position: relative; z-index: 1; display: block; width: 100%; height: 100%; }
/* Rare and up: a strong glow all around and a pulsing halo behind (the user's call); legendary turns rays too. */
.wpn.r1 { --halo: rgba(59, 130, 246, 0.75); }
.wpn.r2 { --halo: rgba(168, 85, 247, 0.85); }
.wpn.r3 { --halo: rgba(250, 204, 21, 0.8); }
.wpn.r1 .wpn-svg { filter: drop-shadow(0 0 3px #bfdbfe) drop-shadow(0 0 8px #3b82f6); }
.wpn.r2 .wpn-svg { filter: drop-shadow(0 0 3px #f3e8ff) drop-shadow(0 0 9px #a855f7) drop-shadow(0 0 16px #a855f7); }
.wpn.r3 .wpn-svg { filter: drop-shadow(0 0 1px #78350f) drop-shadow(0 0 1px #78350f) drop-shadow(0 0 9px #facc15) drop-shadow(0 0 18px #f59e0b); }
.wpn.r1::before, .wpn.r2::before, .wpn.r3::before { content: ''; position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(circle, var(--halo), transparent 62%); pointer-events: none; animation: wpn-halo 1.6s ease-in-out infinite; }
.wpn.r3::after { content: ''; position: absolute; inset: -45%; border-radius: 50%; background: repeating-conic-gradient(rgba(253, 224, 71, 0.6) 0 9deg, transparent 9deg 30deg); -webkit-mask: radial-gradient(circle, #000 25%, transparent 68%); mask: radial-gradient(circle, #000 25%, transparent 68%); pointer-events: none; animation: rays 7s linear infinite; }
@keyframes wpn-halo { 50% { opacity: 0.55; transform: scale(0.85); } }
/* Weapon classes stay separate from aura rarities so mythic pink keeps its existing meaning. */
.w4 { --w-a: #b88a28; --w-b: #09090b; --w-light: #fde68a; --w-ink: #78520e; --w-ink-b: #78520e; }
.w5 { --w-a: #be123c; --w-b: #450a0a; --w-light: #fda4af; --w-ink: #9f1239; --w-ink-b: #9f1239; }
.w6 { --w-a: #ef233c; --w-b: #09090b; --w-light: #fb7185; --w-ink: #18181b; --w-ink-b: #dc2626; }
.w7 { --w-a: #3b82f6; --w-b: #facc15; --w-light: #93c5fd; --w-ink: #1d4ed8; --w-ink-b: #845509; }
.w8 { --w-a: #a855f7; --w-b: #4ade80; --w-light: #d8b4fe; --w-ink: #7e22ce; --w-ink-b: #166534; }
.w9 { --w-a: #ffffff; --w-b: #09090b; --w-light: #ffffff; --w-ink: #18181b; --w-ink-b: #52525b; }
.w10 { --w-a: #facc15; --w-b: #60a5fa; --w-light: #fde68a; --w-ink: #845509; --w-ink-b: #1d4ed8; }
.w11 { --w-a: #ffffff; --w-b: #a855f7; --w-light: #ffffff; --w-ink: #7e22ce; --w-ink-b: #0369a1; --w-rainbow-text: linear-gradient(90deg, #b91c1c, #9a3412, #85520c, #166534, #0369a1, #4338ca, #7e22ce, #b91c1c); }
.wpn:is(.w4, .w5, .w6, .w7, .w8, .w9, .w10, .w11)::before, .wpn:is(.w4, .w5, .w6, .w7, .w8, .w9, .w10, .w11)::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; }
.wpn:is(.w4, .w5, .w6, .w7, .w8, .w9, .w10, .w11)::before { inset: -45%; background: radial-gradient(circle, var(--w-a), transparent 65%); opacity: 0.8; animation: wpn-halo 1.5s ease-in-out infinite; }
.wpn:is(.w4, .w5, .w6, .w7, .w8, .w9, .w10, .w11)::after { inset: -55%; }
.wpn.w4 .wpn-svg { filter: drop-shadow(0 0 2px #09090b) drop-shadow(0 0 11px #d6a438) drop-shadow(0 0 23px #78520e); }
.wpn.w5 .wpn-svg { filter: drop-shadow(0 0 2px #450a0a) drop-shadow(0 0 13px #fb7185) drop-shadow(0 0 25px #be123c); }
.wpn.w6 .wpn-svg { filter: drop-shadow(0 0 3px #09090b) drop-shadow(0 0 15px #ef233c) drop-shadow(0 0 27px #09090b); }
.wpn.w7 .wpn-svg { filter: drop-shadow(0 0 4px #93c5fd) drop-shadow(0 0 18px #3b82f6) drop-shadow(0 0 29px #facc15); animation: wpn-starshine 2.4s ease-in-out infinite; }
.wpn.w8 .wpn-svg { filter: drop-shadow(0 0 4px #bbf7d0) drop-shadow(0 0 19px #a855f7) drop-shadow(0 0 31px #22c55e); }
.wpn.w9 .wpn-svg { filter: drop-shadow(0 0 2px #09090b) drop-shadow(0 0 5px #ffffff) drop-shadow(0 0 32px #ffffff); }
.wpn.w10 .wpn-svg { filter: drop-shadow(0 0 5px #ffffff) drop-shadow(0 0 21px #facc15) drop-shadow(0 0 35px #60a5fa); }
.wpn.w11 .wpn-svg { filter: drop-shadow(0 0 6px #ffffff) drop-shadow(0 0 24px #22d3ee) drop-shadow(0 0 39px #a855f7); }
.wpn.w4::after { background: radial-gradient(ellipse at 30% 65%, #09090bc9, transparent 43%), radial-gradient(ellipse at 65% 35%, #18181bb3, transparent 46%), radial-gradient(ellipse at 55% 75%, #09090b99, transparent 50%); filter: blur(4px); animation: wpn-smoke 3s ease-in-out infinite; }
.wpn.w5::before { inset: -50%; background: radial-gradient(circle, #fb7185bb, #be123c66 35%, transparent 68%); }
.wpn.w5::after { inset: -60%; background: radial-gradient(ellipse at 25% 65%, #be123c99, transparent 45%), radial-gradient(ellipse at 70% 35%, #450a0acc, transparent 48%); filter: blur(5px); animation: wpn-smoke 2.4s ease-in-out infinite; }
.wpn.w6::before { inset: -55%; background: radial-gradient(circle, #ef233ccc, #09090b88 45%, transparent 69%); animation-duration: 0.9s; }
.wpn.w6::after { inset: -65%; background: repeating-conic-gradient(#09090bdd 0 16deg, #ef233c99 16deg 21deg, transparent 21deg 40deg); -webkit-mask: radial-gradient(circle, transparent 16%, #000 29%, transparent 66%); mask: radial-gradient(circle, transparent 16%, #000 29%, transparent 66%); filter: blur(1px); animation: wpn-black-flame 1.1s ease-in-out infinite alternate; }
.wpn.w7::before { inset: -60%; background: conic-gradient(#3b82f699, #facc1599, #3b82f699); filter: blur(5px); -webkit-mask: radial-gradient(circle, #000 20%, transparent 67%); mask: radial-gradient(circle, #000 20%, transparent 67%); animation: rays 6s linear infinite; }
.wpn.w7::after { inset: -70%; background: repeating-conic-gradient(#60a5facc 0 5deg, transparent 5deg 40deg, #fde047cc 40deg 45deg, transparent 45deg 90deg); -webkit-mask: radial-gradient(circle, transparent 16%, #000 25%, transparent 67%); mask: radial-gradient(circle, transparent 16%, #000 25%, transparent 67%); animation: rays 5s linear infinite reverse; }
.wpn.w8::before { inset: -65%; background: conic-gradient(#a855f7bb, #4ade80aa, #a855f7bb, #4ade80aa, #a855f7bb); filter: blur(4px); -webkit-mask: radial-gradient(circle, #000 25%, transparent 67%); mask: radial-gradient(circle, #000 25%, transparent 67%); animation: rays 4s linear infinite; }
.wpn.w8::after { inset: -75%; background: repeating-conic-gradient(#c084fccc 0 18deg, transparent 18deg 48deg, #4ade80cc 48deg 66deg, transparent 66deg 96deg); -webkit-mask: radial-gradient(circle, transparent 17%, #000 29%, transparent 65%); mask: radial-gradient(circle, transparent 17%, #000 29%, transparent 65%); animation: wpn-vortex 3s linear infinite; }
.wpn.w9::before { inset: -12%; background: radial-gradient(circle at 50% 25%, #09090b 0 7%, transparent 8%), radial-gradient(circle at 50% 75%, #fff 0 7%, transparent 8%), radial-gradient(circle at 50% 25%, #fff 0 25%, transparent 26%), radial-gradient(circle at 50% 75%, #09090b 0 25%, transparent 26%), linear-gradient(90deg, #fff 50%, #09090b 50%); box-shadow: 0 0 0 1px #71717a, 0 0 24px #ffffff88; opacity: 0.75; animation: rays 7s linear infinite; }
.wpn.w9::after { inset: -80%; background: conic-gradient(#fff 0 90deg, #09090b 90deg 180deg, #fff 180deg 270deg, #09090b 270deg); -webkit-mask: radial-gradient(circle, transparent 30%, #000 31% 33%, transparent 34% 45%, #000 46% 48%, transparent 49%); mask: radial-gradient(circle, transparent 30%, #000 31% 33%, transparent 34% 45%, #000 46% 48%, transparent 49%); filter: drop-shadow(0 0 3px #a1a1aa); animation: rays 8s linear infinite reverse; }
.wpn.w10::before { inset: -75%; background: conic-gradient(#facc15bb, #ffffffaa, #60a5fabb, #facc15bb); filter: blur(6px); -webkit-mask: radial-gradient(circle, #000 25%, transparent 68%); mask: radial-gradient(circle, #000 25%, transparent 68%); animation: rays 5s linear infinite; }
.wpn.w10::after { inset: -85%; background: conic-gradient(#facc15, #fff, #60a5fa, #facc15); -webkit-mask: radial-gradient(circle, transparent 30%, #000 31% 33%, transparent 34% 45%, #000 46% 49%, transparent 50%); mask: radial-gradient(circle, transparent 30%, #000 31% 33%, transparent 34% 45%, #000 46% 49%, transparent 50%); filter: drop-shadow(0 0 5px #fff); animation: rays 4s linear infinite reverse; }
.wpn.w11::before { inset: -95%; background: conic-gradient(#ef4444aa, #f97316aa, #facc15aa, #22c55eaa, #38bdf8aa, #4f46e5aa, #a855f7aa, #ef4444aa); filter: blur(7px); -webkit-mask: radial-gradient(circle, #000 22%, transparent 68%); mask: radial-gradient(circle, #000 22%, transparent 68%); animation: rays 3.5s linear infinite; }
.wpn.w11::after { inset: auto; top: -140%; left: 32%; width: 36%; height: 250%; border-radius: 50% 50% 0 0; background: linear-gradient(90deg, transparent 30%, #ffffffaa 46%, #fff 50%, #ffffffaa 54%, transparent 70%), linear-gradient(0deg, #ef4444, #f97316, #facc15, #22c55e, #38bdf8, #4f46e5, #a855f7, #ef4444); background-size: 100% 100%, 100% 200%; -webkit-mask: linear-gradient(to top, transparent, #000 15% 65%, transparent); mask: linear-gradient(to top, transparent, #000 15% 65%, transparent); filter: drop-shadow(0 0 6px #ffffffaa); animation: wpn-pillar 2.5s linear infinite; }
/* Saturated ink keeps the tier names readable on a light sheet; dark mode uses brighter stops. */
.gear-name.w4, .gear-rare.w4, .sheet .codex-rare.w4 { color: var(--w-ink); }
.gear-name.w5, .gear-rare.w5, .sheet .codex-rare.w5 { color: var(--w-ink); }
.gear-name.w6, .gear-rare.w6, .sheet .codex-rare.w6 { color: var(--w-ink); }
.gear-name.w7, .gear-rare.w7, .sheet .codex-rare.w7 { color: var(--w-ink); }
.gear-name.w8, .gear-rare.w8, .sheet .codex-rare.w8 { color: var(--w-ink); }
.gear-name.w9, .gear-rare.w9, .sheet .codex-rare.w9 { color: var(--w-ink); }
.gear-name.w10, .gear-rare.w10, .sheet .codex-rare.w10 { color: var(--w-ink); }
.gear-name.w11, .gear-rare.w11, .sheet .codex-rare.w11 { color: var(--w-ink); }
:is(.gear-name, .gear-rare, .sheet .codex-rare, .duel-ladder em):is(.w6, .w7, .w8, .w10) { background: linear-gradient(90deg, var(--w-ink), var(--w-ink-b), var(--w-ink)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: wpn-colour-flow 3s linear infinite; }
:is(.gear-name, .gear-rare, .sheet .codex-rare, .duel-ladder em).w11 { background: var(--w-rainbow-text); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: wpn-colour-flow 2.5s linear infinite; }
:root.dark :is(.w4, .w5, .w6, .w7, .w8, .w9, .w10, .w11) { --w-ink: var(--w-light); }
:root.dark .w7 { --w-ink-b: #fde047; }
:root.dark .w8 { --w-ink-b: #86efac; }
:root.dark .w10 { --w-ink-b: #93c5fd; }
:root.dark .w11 { --w-rainbow-text: linear-gradient(90deg, #fda4af, #fdba74, #fde047, #86efac, #7dd3fc, #a5b4fc, #d8b4fe, #fda4af); }
.gear-slot.w4, .gear-card.w4 { border-color: #a77b23; }
.gear-slot.w5, .gear-card.w5 { border-color: #be123c; }
.gear-slot.w6, .gear-card.w6 { border-color: #ef233c; }
.gear-slot.w7, .gear-card.w7 { border-color: #3b82f6; }
.gear-slot.w8, .gear-card.w8 { border-color: #a855f7; }
.gear-slot.w9, .gear-card.w9 { border-color: #71717a; }
.gear-slot.w10, .gear-card.w10 { border-color: #facc15; }
.gear-slot.w11, .gear-card.w11 { border-color: #a855f7; }
:is(.gear-slot, .gear-card):is(.w7, .w8, .w9, .w10, .w11) { border-color: transparent; background: linear-gradient(var(--bg), var(--bg)) padding-box, linear-gradient(120deg, var(--w-a), var(--w-b), var(--w-a)) border-box; background-size: 100% 100%, 200% 200%; animation: wpn-border-flow 4s linear infinite; }
:is(.gear-slot, .gear-card).w10 { background-image: linear-gradient(var(--bg), var(--bg)), linear-gradient(120deg, #facc15, #fff, #60a5fa, #facc15); }
:is(.gear-slot, .gear-card).w11 { background-image: linear-gradient(var(--bg), var(--bg)), linear-gradient(120deg, #ef4444, #f97316, #facc15, #22c55e, #38bdf8, #4f46e5, #a855f7, #ef4444); }
.gear-panel.w4, .codex-card.have.w4 { box-shadow: inset 0 0 0 3px #a77b23, inset 0 0 18px #a77b2340, 0 0 20px #09090b55; }
.gear-panel.w5, .codex-card.have.w5 { box-shadow: inset 0 0 0 3px #be123c, inset 0 0 21px #be123c45, 0 0 23px #be123c44; }
.gear-panel.w6, .codex-card.have.w6 { box-shadow: inset 0 0 0 3px #ef233c, inset 0 0 24px #ef233c55, 0 0 26px #09090b66; }
.gear-panel.w7, .codex-card.have.w7 { box-shadow: inset 0 0 0 3px #3b82f6, inset 0 0 27px #facc1555, 0 0 29px #3b82f64d; }
.gear-panel.w8, .codex-card.have.w8 { box-shadow: inset 0 0 0 3px #a855f7, inset 0 0 30px #4ade8055, 0 0 32px #a855f74d; }
.gear-panel.w9, .codex-card.have.w9 { box-shadow: inset 0 0 0 3px #71717a, inset 0 0 0 5px #ffffff88, inset 0 0 33px #71717a44, 0 0 35px #71717a66; }
.gear-panel.w10, .codex-card.have.w10 { box-shadow: inset 0 0 0 3px #facc15, inset 0 0 0 5px #ffffffaa, inset 0 0 36px #60a5fa55, 0 0 38px #facc1566; }
.gear-panel.w11, .codex-card.have.w11 { box-shadow: inset 0 0 0 3px #a855f7, inset 0 0 0 5px #ffffffaa, inset 0 0 39px #22d3ee55, 0 0 41px #a855f777; }
.loot-card.w4 { box-shadow: 0 0 0 4px #a77b23, 0 0 44px #a77b23, 0 0 65px #09090b; }
.loot-card.w5 { box-shadow: 0 0 0 4px #be123c, 0 0 48px #be123c, 0 0 70px #450a0a; }
.loot-card.w6 { box-shadow: 0 0 0 4px #ef233c, 0 0 52px #ef233c, 0 0 75px #09090b; }
.loot-card.w7 { box-shadow: 0 0 0 4px #3b82f6, 0 0 0 6px #facc15, 0 0 56px #3b82f6, 0 0 80px #facc1555; }
.loot-card.w8 { box-shadow: 0 0 0 4px #a855f7, 0 0 0 6px #4ade80, 0 0 60px #a855f7, 0 0 85px #4ade8066; }
.loot-card.w9 { box-shadow: 0 0 0 4px #fff, 0 0 0 7px #09090b, 0 0 64px #fff, 0 0 90px #ffffff66; }
.loot-card.w10 { box-shadow: 0 0 0 4px #facc15, 0 0 0 7px #fff, 0 0 68px #60a5fa, 0 0 95px #facc1588; }
.loot-card.w11 { box-shadow: 0 0 0 4px #fff, 0 0 0 8px #a855f7, 0 0 72px #22d3ee, 0 0 100px #facc1599; }
@keyframes wpn-smoke { 0%, 100% { opacity: 0.55; transform: translateY(3%) scale(0.95); } 50% { opacity: 0.9; transform: translateY(-8%) scale(1.1); } }
@keyframes wpn-black-flame { from { opacity: 0.65; transform: rotate(-8deg) scale(0.9, 1); } to { opacity: 1; transform: rotate(8deg) scale(1.05, 1.15); } }
@keyframes wpn-starshine { 50% { filter: drop-shadow(0 0 4px #fff0a6) drop-shadow(0 0 18px #facc15) drop-shadow(0 0 29px #3b82f6); } }
@keyframes wpn-vortex { 0% { transform: rotate(0) scale(0.9); } 50% { transform: rotate(180deg) scale(1.08); } 100% { transform: rotate(360deg) scale(0.9); } }
@keyframes wpn-colour-flow { to { background-position: 200% 0; } }
@keyframes wpn-border-flow { to { background-position: 0 0, 200% 200%; } }
@keyframes wpn-pillar { to { background-position: 0 200%; } }
.gear-panel { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 12px; border-radius: 18px; background: var(--bg); text-align: left; }
.gear-panel.r1 { box-shadow: inset 0 0 0 2px #3b82f6; }
.gear-panel.r2 { box-shadow: inset 0 0 0 2px #a855f7, 0 0 14px rgba(168, 85, 247, 0.35); }
.gear-panel.r3 { box-shadow: inset 0 0 0 3px #facc15, 0 0 18px rgba(250, 204, 21, 0.5); }
.gear-panel.empty { flex-direction: column; text-align: center; font-weight: 800; }
.gear-panel.empty .wpn { opacity: 0.35; }
.gear-panel .wpn-big { flex: none; width: 96px; height: 96px; }
.gear-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gear-info b { font-size: 20px; line-height: 1.2; }
.gear-info small { color: var(--muted); font-size: 14px; font-weight: 800; }
.gear-info ul { margin: 4px 0 0; padding: 0; list-style: none; font-size: 15px; font-weight: 800; line-height: 1.5; }
/* Weapon names in their rarity's colour, as in Diablo, and their affixes by tier. */
.gear-name.r1 { color: #3b82f6; }
.gear-name.r2 { color: #a855f7; }
.gear-name.r3 { color: #d99a06; }
.gear-info .affix { display: flex; align-items: center; gap: 6px; }
.gear-info .affix.t0 { color: #3b82f6; }
.gear-info .affix.t1 { color: #8b5cf6; }
.gear-info .affix.t2 { color: #d99a06; }
.gear-info .affix i { color: inherit; font-size: 11px; font-style: normal; letter-spacing: 1px; opacity: 0.85; }
.gear-rare.r1 { color: #3b82f6; }
.gear-rare.r2 { color: #a855f7; }
.gear-rare.r3 { color: #ca8a04; }
.gear-actions { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 4px; }
.gear-max { margin: 0; color: var(--brand); font-weight: 900; text-align: center; }
.gear-stones { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 6px 0; font-weight: 900; }
.stone { flex: none; width: 22px; height: 22px; }
.gem-holes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gem-hole { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 10px 4px; border: 2px dashed rgba(148, 163, 184, 0.7); border-radius: 14px; background: var(--bg); }
.gem-hole.full { border: 2px solid var(--gem); box-shadow: 0 0 12px color-mix(in srgb, var(--gem) 45%, transparent); }
.gem-hole.drill { border: 2px solid #f59e0b; }
.gem-hole.drill.sure { background: #f97316; color: #fff; }
.gem-hole small { font-size: 13px; font-weight: 800; line-height: 1.25; text-align: center; }
.gem-hole em { display: flex; align-items: center; gap: 3px; font-size: 13px; font-style: normal; font-weight: 900; }
.gem-hole em .coin { width: 16px; height: 16px; }
.gem-svg, .drill-svg { flex: none; width: 44px; height: 44px; }
.gem-empty { width: 40px; height: 40px; margin: 2px; border-radius: 50%; background: rgba(148, 163, 184, 0.25); box-shadow: inset 0 4px 8px rgba(15, 23, 42, 0.45); }
.gem-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 12px 0; }
.gem-card { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 10px 6px; border-radius: 14px; background: var(--bg); box-shadow: inset 0 0 0 2px var(--gem); }
.gem-card .gem-svg { width: 52px; height: 52px; }
.gem-card b { font-size: 16px; }
.gem-card small { color: var(--muted); font-size: 13px; font-weight: 800; text-align: center; }
.gem-card em { font-style: normal; font-weight: 900; }
.gem-card button { width: 100%; padding: 10px 8px; font-size: 16px; }
.gem-now { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px; border-radius: 14px; background: var(--bg); box-shadow: inset 0 0 0 2px var(--gem); text-align: left; }
.gem-now div { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.gem-now small { color: var(--muted); font-size: 13px; font-weight: 800; }
.gem-now button { padding: 10px 14px; font-size: 16px; }
.gem-none { margin: 14px 0; font-weight: 800; }
.gem-dots { display: flex; justify-content: center; gap: 4px; margin-top: 2px; }
.gem-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(148, 163, 184, 0.35); box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.35); }
.gem-dots i.on { background: var(--gem); box-shadow: 0 0 5px var(--gem); }
.loot-card.gem { box-shadow: 0 0 0 3px var(--gem), 0 0 28px var(--gem); }
.gear-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
/* Weapon 1 and weapon 2, side by side (the user's layout). */
.gear-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.gear-slot { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 10px 6px 12px; border: 3px solid var(--hair, rgba(0, 0, 0, 0.1)); border-radius: 18px; background: var(--bg); }
.gear-slot .gear-slot-n { color: var(--ink); font-size: 17px; font-weight: 900; }
.gear-slot .wpn { width: 76px; height: 76px; margin: 4px 0; }
.gear-slot b { font-size: 15px; line-height: 1.2; text-align: center; }
.gear-slot small { color: var(--muted); font-size: 13px; font-weight: 800; }
.gear-slot.r1 { border-color: #3b82f6; }
.gear-slot.r2 { border-color: #a855f7; }
.gear-slot.r3 { border-color: #facc15; }
.gear-slot.on, .gear-card.on { box-shadow: 0 0 0 3px var(--brand); }
.gear-slot.empty { border-style: dashed; opacity: 0.55; }
.gear-slot.empty .wpn { opacity: 0.35; }
.sheet .gear-best { margin-top: 10px; }
/* Every card the same: picture, a name two lines high, strength and gem holes, level along a row; a tap opens it. */
.gear-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 10px 4px 8px; border: 2px solid transparent; border-radius: 14px; background: var(--bg); }
.gear-card .wpn { width: 52px; height: 52px; }
.gear-card b { display: flex; align-items: center; justify-content: center; min-height: 2.4em; font-size: 13px; line-height: 1.2; text-align: center; }
.gear-card small { color: var(--muted); font-size: 12px; font-weight: 800; }
.gear-card em { color: var(--brand); font-size: 12px; font-style: normal; font-weight: 900; }
.gear-card.r1 { border-color: #3b82f6; }
.gear-card.r2 { border-color: #a855f7; }
.gear-card.r3 { border-color: #facc15; }
.gear-card.weak > :not(.weak-tag) { opacity: 0.6; }
.gear-card .weak-tag { position: absolute; top: 6px; left: 6px; padding: 0 7px; border-radius: 99px; background: var(--soft, rgba(127, 127, 127, 0.2)); color: var(--muted); font-size: 11px; line-height: 1.6; }
.sheet .gear-clear { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; padding: 12px; font-size: 17px; }
.gear-clear small { color: var(--muted); font-size: 14px; }
/* The weapons list (a tap on a weapon opens its page) and a weapon's page, part by part. */
.gear-slot .gear-slot-n em { display: block; color: var(--muted); font-size: 12px; font-style: normal; font-weight: 800; }
/* The aura slot (the third piece of gear) under the two hands, its page, and the mythic rarity only auras have. */
.gear-slot.aura-slot { flex-direction: row; gap: 10px; width: 100%; margin-top: 10px; padding: 10px 12px; text-align: left; }
.aura-slot .gear-slot-n { flex: none; width: 4.5em; }
.aura-slot .aura-face { flex: none; width: 64px; height: 64px; }
.aura-slot .aura-what { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.aura-slot .aura-what b { text-align: left; }
.gear-panel .aura-big { flex: none; width: 104px; height: 104px; }
.aura-adds { color: var(--muted); font-size: 12px; font-weight: 800; }
.gear-slot.r4 { border-color: #ec4899; }
.gear-panel.r4 { box-shadow: inset 0 0 0 3px #ec4899, 0 0 18px rgba(236, 72, 153, 0.5); }
.gear-name.r4, .gear-rare.r4 { color: #db2777; }
.shop-card.r4 { box-shadow: inset 0 0 0 3px #ec4899, 0 0 16px rgba(236, 72, 153, 0.45); }
.r4 .rare-tag { background: linear-gradient(90deg, #ec4899, #a855f7, #22d3ee); }
.gear-stock { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding: 8px 10px; border-radius: 14px; background: var(--bg); font-size: 15px; font-weight: 900; white-space: nowrap; }
.gear-stock span, .gear-stock button { display: inline-flex; align-items: center; gap: 4px; }
.gear-stock .stone, .gear-stock .gem-svg { width: 24px; height: 24px; }
/* The player's power and place on the power rankings, at the top of the weapons' list: a tap opens those. */
.power-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; width: 100%; margin-top: 10px; padding: 10px 12px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 2px var(--au, #9a7010); font-size: 19px; font-weight: 900; line-height: 1.3; }
.power-line span { color: var(--au, #9a7010); }
.power-line small { flex-basis: 100%; color: var(--muted); font-size: 13px; font-weight: 700; }
.power-line { position: relative; padding-right: 30px; }
.power-line::after { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }
.power-line::after { content: '›'; margin-left: 8px; color: var(--muted); font-size: 24px; line-height: 1; }
.gear-gems { padding: 6px 10px; border: 0; border-radius: 999px; background: color-mix(in srgb, #ef4444 14%, var(--surface)); color: inherit; font: inherit; cursor: pointer; }
.gear-bag-head { margin: 18px 0 0; text-align: left; }
.gear-tap { margin: 2px 0 0; text-align: left; }
button.gear-card { font: inherit; color: inherit; cursor: pointer; }
.gear-back { display: block; margin: 0 auto 4px 0; padding: 6px 0; font-size: 17px; font-weight: 900; }
.gear-sec { margin-top: 14px; padding: 12px; border-radius: 16px; background: var(--bg); text-align: left; }
.gear-sec h3 { margin: 0 0 8px; font-size: 17px; }
.gear-sec .gear-actions { margin: 10px 0 0; }
.gear-sec .gem-holes { margin-bottom: 6px; }
.gear-vs { margin: 0; padding: 0; list-style: none; font-size: 16px; font-weight: 900; line-height: 1.6; }
.gear-vs .up { color: #16a34a; }
.gear-vs .down { color: var(--muted); }
.gear-up-line { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px; margin: 0 0 8px; font-size: 16px; font-weight: 900; }
.gear-up-line small { color: var(--muted); font-size: 14px; }
.gear-sec > button.primary { width: 100%; }
.codex-count { display: flex; align-items: center; gap: 10px; }
.codex-count b { flex: none; font-size: 16px; }
.codex-bar { flex: 1; height: 10px; overflow: hidden; border-radius: 99px; background: var(--bg); }
.codex-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #22c55e, #facc15); }
.codex .muted { margin: 8px 0 0; }
.codex-rare { margin: 16px 0 8px; }
.sheet .codex-rare.r1 { color: #3b82f6; }
.sheet .codex-rare.r2 { color: #a855f7; }
.sheet .codex-rare.r3 { color: #ca8a04; }
.codex-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.codex-card { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 10px 2px 8px; border-radius: 14px; background: var(--bg); }
.codex-card .wpn { width: 44px; height: 44px; }
.codex-card b { color: var(--muted); font-size: 13px; line-height: 1.2; }
.codex-card.have b { color: var(--ink); }
.codex-card:not(.have) .wpn-svg { opacity: 0.3; filter: grayscale(1); }
.codex-card.have.r1 { box-shadow: inset 0 0 0 2px #3b82f6; }
.codex-card.have.r2 { box-shadow: inset 0 0 0 2px #a855f7; }
.codex-card.have.r3 { box-shadow: inset 0 0 0 3px #facc15; }
/* The looks codex: each look on the player's face, the ones not owned dim with where they come from; auras in their
   rarity; the collector's frames on top. */
.codex-head { display: flex; align-items: baseline; justify-content: space-between; margin: 18px 0 8px; }
.codex-head small { color: var(--muted); font-size: 14px; }
.codex-grid.looks { grid-template-columns: repeat(3, 1fr); }
.codex-look { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 8px 2px; border-radius: 14px; background: var(--bg); text-align: center; }
.codex-look img { width: 64px; height: 64px; }
.codex-look b { color: var(--muted); font-size: 13px; line-height: 1.2; }
.codex-look small { color: var(--brand); font-size: 12px; font-weight: 800; }
.codex-look:not(.have) img { opacity: 0.35; filter: grayscale(1); }
.codex-look.have b { color: var(--ink); }
.codex-look.have.r1 { box-shadow: inset 0 0 0 2px #3b82f6; }
.codex-look.have.r2 { box-shadow: inset 0 0 0 2px #a855f7; }
.codex-look.have.r3 { box-shadow: inset 0 0 0 3px #facc15; }
.codex-look.have.r4 { box-shadow: inset 0 0 0 3px #ec4899, 0 0 12px rgba(236, 72, 153, 0.5); }
.codex-look.have small { color: var(--muted); }
/* The palette: one card the width of the row, its colours under it. */
.codex-look.palette { grid-column: 1 / -1; }
.codex-look .swatches { display: grid; grid-template-columns: repeat(12, 1fr); gap: 5px; width: 100%; padding: 6px 8px 2px; }
.codex-look .swatches i { aspect-ratio: 1; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25); }
/* The world bosses: two to a row, a black shape and "???" until met, the hat each may drop at the foot. */
.codex-grid.bosses { grid-template-columns: repeat(2, 1fr); }
.wb-card { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 10px 6px 8px; border-radius: 16px; background: var(--bg); text-align: center; }
.wb-card.met { box-shadow: inset 0 0 0 2px var(--au, #ca8a04); }
.wb-card .wb-pic { width: 104px; height: 104px; }
.wb-card:not(.met) .wb-pic { filter: brightness(0); opacity: 0.85; }
:root.dark .wb-card:not(.met) .wb-pic { filter: brightness(0) drop-shadow(0 0 2px rgba(255, 255, 255, 0.45)); opacity: 1; }
.wb-card > b { font-size: 17px; line-height: 1.2; }
.wb-card:not(.met) > b { color: var(--muted); letter-spacing: 0.1em; }
.wb-card .wb-ult { color: var(--au, #ca8a04); font-size: 13px; font-weight: 800; line-height: 1.25; }
.wb-card:not(.met) .wb-ult { color: var(--muted); }
.wb-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.wb-stats span { padding: 2px 8px; border-radius: 99px; background: var(--soft, var(--surface)); font-size: 14px; font-weight: 800; }
.wb-hat { display: flex; align-items: center; gap: 6px; width: 100%; margin-top: auto; padding: 4px 6px; border-radius: 12px; background: var(--soft, var(--surface)); text-align: left; }
.wb-hat img { flex: none; width: 46px; height: 46px; }
.wb-hat:not(.have) img { opacity: 0.55; filter: grayscale(1); }
.wb-hat > span { display: flex; flex-direction: column; min-width: 0; }
.wb-hat b { font-size: 14px; line-height: 1.2; }
.wb-hat small { color: var(--muted); font-size: 12px; font-weight: 800; }
.wb-hat.have small { color: #16a34a; }
.collector-face { position: relative; width: 150px; height: 150px; animation: unlock-pop 0.9s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.loot-new { color: #22c55e; font-size: 14px; font-style: normal; font-weight: 900; }
.loot-fresh { color: #4ade80; font-size: 14px; font-style: normal; font-weight: 900; text-align: center; }
.loot-card small.loot-why { color: #fde68a; font-size: 13px; }
.loot-row .loot-card small.loot-why { color: var(--muted); font-size: 12px; }
.loot-worth .stone { width: 16px; height: 16px; vertical-align: -3px; }
.boss-pic { background: rgba(239, 68, 68, 0.15); }

/* Modals */
.modal { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 16px; background: rgba(2, 6, 23, 0.55); animation: fade-in 0.2s both; }
.modal[hidden] { display: none; }
/* A page's main button stays in sight at the bottom of its window until its own place scrolls up (the user's call:
   never scroll down to find how to play). */
.sheet .go-bar { display: flex; flex-direction: column; gap: 6px; }
.sheet .go-bar > button { width: 100%; }
.sheet.has-footer { gap: 0; padding: 0; overflow: hidden; }
.sheet-body { position: relative; display: flex; flex: 1 1 auto; flex-direction: column; gap: 14px; min-height: 0; padding: 28px 20px 20px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.sheet-body > * { flex-shrink: 0; }
.sheet-body:focus { outline: none; }
.sheet.has-footer > :is(.go-bar, .form-foot) { position: relative; inset: auto; z-index: 2; flex: none; width: 100%; margin: 0; padding: 14px 20px max(14px, env(safe-area-inset-bottom)); border-top: 1px solid var(--hair); background: var(--surface); box-shadow: 0 -8px 24px -20px rgba(0, 0, 0, 0.5); }
.sheet.has-footer .go-bar .gear-best { margin: 0; }
.sheet-body:has(> .home-btn) > h2 { padding-inline: 62px; }
.sheet-body:has(> .home-btn) > .gear-back { margin-left: 64px; min-height: 48px; }
/* A page's rules behind a small button by its title, opening a card of tiles (showHelp): an icon, a big number and
   a short label each, like the player card's record. */
.help-btn { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 3px 10px 3px 4px; border-radius: 999px; background: var(--soft); color: var(--muted); font-size: 13px; font-weight: 800; letter-spacing: 0; vertical-align: middle; }
.help-btn b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(232, 201, 122, 0.22); color: #f0d98c; font-size: 13px; }
.help-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.help-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px; border-radius: 18px; background: var(--bg); box-shadow: inset 0 0 0 1px rgba(232, 201, 122, 0.22); }
.help-ico { display: grid; place-items: center; width: 40px; height: 40px; color: #e8c97a; }
.help-ico svg { width: 34px; height: 34px; }
.help-ico .wpn, .help-ico > svg.wpn-svg { width: 40px; height: 40px; }
.help-tile.off .help-ico { opacity: 0.45; }
.help-tile b { font-size: 26px; font-weight: 900; line-height: 1.1; }
.help-tile small { color: var(--muted); font-size: 14px; font-weight: 800; }
.help-line { margin: 0; color: var(--muted); font-size: 15px; font-weight: 800; }
.sheet { position: relative; display: flex; flex-direction: column; gap: 14px; width: min(100%, 440px); max-height: calc(100dvh - 32px); padding: 28px 20px 20px; overflow-x: hidden; overflow-y: auto; border-radius: 24px; background: var(--surface); text-align: center; touch-action: pan-y; overscroll-behavior: contain; animation: pop-in 0.25s both; }
.sheet:focus { outline: none; }
.sheet h2 { padding: 0 36px; font-size: 26px; letter-spacing: 0.05em; }
.sheet h3 { color: var(--muted); font-size: 16px; text-align: left; }
.sheet .muted { color: var(--muted); font-size: 16px; line-height: 1.6; }
.sheet .primary { width: 100%; }
.sheet .secondary { background: var(--bg); }
.x-btn { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--muted); }
.x-btn svg { width: 24px; height: 24px; }
.goals { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.goal { display: flex; align-items: center; gap: 6px; padding: 6px 16px 6px 8px; border-radius: 999px; background: var(--bg); font-size: 20px; font-weight: 800; }
.goal img { width: 36px; height: 36px; }
.boss-card { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 20px; background: var(--bg); text-align: left; }
.boss-card > img { width: 96px; height: 96px; flex: none; }
.boss-card b { display: block; font-size: 22px; }
.boss-card span { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 16px; font-weight: 700; }
.boss-card span img { width: 28px; height: 28px; }
.record { font-size: 20px; font-weight: 800; }
.record .gold { color: var(--gold); letter-spacing: 2px; }
.rows { display: flex; flex-direction: column; gap: 8px; }
.power-row { display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border-radius: 18px; background: var(--bg); text-align: left; }
.power-row .pi { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, #f43f5e, #f59e0b, #22c55e, #3b82f6, #a855f7); color: #fff; }
.power-row .pi svg { width: 28px; height: 28px; }
.power-row .who { flex: 1; min-width: 0; }
.power-row .who b { display: block; font-size: 18px; }
.power-row .who small { display: block; color: var(--muted); font-size: 14px; }
.power-row .num { color: var(--muted); font-size: 14px; font-weight: 800; white-space: nowrap; }
.power-row.locked { opacity: 0.6; }
.power-row .who small + small { margin-top: 2px; font-size: 13px; }

/* The skill menu during a level */
.skill-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.skill-card { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 10px 6px; border-radius: 16px; background: var(--bg); text-align: center; }
.skill-card .pi { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--muted); color: #fff; }
.skill-card .pi svg { width: 26px; height: 26px; }
.skill-card b { font-size: 15px; }
.skill-card small { color: var(--muted); font-size: 12px; line-height: 1.35; }
.skill-card em { font-size: 12px; font-style: normal; font-weight: 800; color: var(--muted); }
.skill-card .bar { display: block; width: 100%; height: 6px; overflow: hidden; border-radius: 999px; background: var(--line); }
.skill-card .bar i { display: block; height: 100%; background: #a855f7; }
.skill-card.low .pi { background: #a855f7; }
.skill-card.ready { box-shadow: 0 0 0 2px #8b5cf6; }
.skill-card.ready .pi { background: #7c3aed; }
.skill-card.ready em { color: #a855f7; font-size: 15px; }
.skill-card.locked { opacity: 0.55; }
.skill-card[aria-disabled="true"] { cursor: default; }

/* A newly won skill */
.unlock { position: relative; display: grid; flex-shrink: 0; place-items: center; height: 200px; margin: -8px 0 4px; overflow: hidden; }
.unlock-rays { position: absolute; width: 420px; height: 420px; border-radius: 50%; background: repeating-conic-gradient(rgba(250, 204, 21, 0.55) 0 10deg, transparent 10deg 20deg); animation: rays 6s linear infinite; -webkit-mask: radial-gradient(circle, #000 20%, transparent 68%); mask: radial-gradient(circle, #000 20%, transparent 68%); }
.unlock-icon { position: relative; display: grid; place-items: center; width: 116px; height: 116px; border-radius: 34px; background: linear-gradient(135deg, #f43f5e, #f59e0b, #22c55e, #3b82f6, #a855f7); color: #fff; box-shadow: 0 8px 0 #7e22ce, 0 0 0 8px #fff; animation: unlock-pop 0.9s cubic-bezier(0.2, 1.6, 0.4, 1) both, wobble 1.6s 0.9s ease-in-out infinite; }
.unlock-icon svg { width: 70px; height: 70px; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.25)); }
.unlock-sparks i { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px; border-radius: 3px; background: var(--c); animation: spark 0.9s ease-out both; }
.unlock-title { font-size: 26px; font-weight: 900; letter-spacing: 0.08em; background: linear-gradient(90deg, #f43f5e, #f59e0b, #22c55e, #3b82f6, #a855f7, #f43f5e); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: rainbow-slide 2s linear infinite, stamp 0.6s 0.3s both; }
.unlock-name { font-size: 34px; animation: pop-in 0.5s 0.5s both; }
.unlock-how { color: var(--ink); font-size: 16px; }
.power-row.locked .pi { background: var(--muted); }
.power-row .unlock-need { color: var(--brand); font-weight: 800; }
.boss-card small { display: block; color: var(--brand); font-size: 15px; font-weight: 800; }
.goals .goal svg { width: 36px; height: 36px; color: #a855f7; }
.row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 14px 8px 8px; border-radius: 18px; background: var(--bg); font-size: 18px; text-align: left; }
.row img { width: 44px; height: 44px; flex: none; }
/* A face on the rankings with its player's two weapons at its sides, weapon 1 on the left. */
.row .armed { position: relative; display: block; flex: none; margin: 0 6px; }
.row .armed img { display: block; }
.row-wpn { position: absolute; right: -11px; bottom: -6px; width: 26px; height: 26px; }
.row-wpn.left { right: auto; left: -11px; transform: scaleX(-1); }
.row .who { flex: 1; min-width: 0; }
.row .who b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .who small { display: block; color: var(--muted); font-size: 14px; }
.row .num { font-size: 20px; font-weight: 800; white-space: nowrap; }
.row.me { box-shadow: inset 0 0 0 3px var(--brand); }
.rank { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--surface); font-weight: 800; }
.rank.r1 { background: #facc15; color: #713f12; }
.rank.r2 { background: #cbd5e1; color: #334155; }
.rank.r3 { background: #fdba74; color: #7c2d12; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 16px; font-weight: 700; text-align: left; }
.field input { height: 54px; padding: 0 16px; border: 2px solid rgba(127, 127, 127, 0.3); border-radius: 14px; background: var(--bg); color: var(--ink); font: inherit; font-size: 20px; user-select: text; -webkit-user-select: text; }
.field input:focus { outline: none; border-color: var(--brand); }
.avatars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.avatar { display: grid; place-items: center; aspect-ratio: 1; border-radius: 16px; background: var(--bg); }
.avatar img { width: 70%; }
.avatar.on { background: rgba(249, 115, 22, 0.15); box-shadow: inset 0 0 0 3px var(--brand); }
.link { padding: 8px; color: var(--muted); font-size: 16px; text-decoration: underline; }
.link.danger { color: var(--danger); }
/* Rankings: tabs, online rows with season trophies, joining, moving phones, the daily challenge */
/* All the tabs in two rows: older players do not swipe sideways to find more. */
.chips { display: grid; flex: none; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.chip { min-height: 44px; padding: 6px 2px; border-radius: 14px; background: var(--bg); color: var(--muted); font-size: 15px; font-weight: 800; line-height: 1.2; }
.chip.on { background: var(--brand); color: #fff; }
.chips.sub { grid-template-columns: 1fr 1fr; }
.chips.sub .chip.on { background: #dc2626; }
.board-box { display: flex; flex-direction: column; gap: 12px; }
.board-box .rank { width: auto; min-width: 32px; padding: 0 6px; border-radius: 16px; font-size: 14px; }
.gap { color: var(--muted); font-weight: 900; line-height: 1; }
.cup { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; padding: 0 8px 0 4px; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: 12px; font-weight: 800; white-space: nowrap; }
.cup svg { width: 14px; height: 14px; }
.cup.c2 { background: #e2e8f0; color: #334155; }
.cup.c3 { background: #ffedd5; color: #9a3412; }
.cup.c4 { background: #dbeafe; color: #1e40af; }
.cup.cw { background: #ede9fe; color: #5b21b6; }
.cup.top10 { background: linear-gradient(90deg, #fde047, #f59e0b); color: #78350f; }
.badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.badges .cup { margin: 0; padding: 2px 10px 2px 6px; font-size: 14px; }
.badges .cup svg { width: 16px; height: 16px; }
.award-icon { background: linear-gradient(135deg, #fde047, #f59e0b); }
.recap-top { padding: 8px; border-radius: 16px; background: linear-gradient(90deg, #fde047, #f59e0b); color: #78350f; font-size: 19px; font-weight: 900; }
.world-rank { color: var(--brand); font-size: 18px; font-weight: 900; }
.device-box { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 20px; background: var(--bg); text-align: left; }
.device-box b { font-size: 20px; }
.device-box small { color: var(--muted); font-size: 15px; font-weight: 700; }
.device-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.device-btns button { min-height: 52px; padding: 8px; border-radius: 16px; background: var(--surface); font-size: 17px; font-weight: 800; }
.device-btns button:first-child { background: var(--brand); color: #fff; }
/* Google: its own button (one tap on an account), a word on how it went, the account linked and the way to link. Its frame
   takes a light colour scheme: under the dark page's it got an opaque white box round it. */
.google-login { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; margin-top: 6px; }
.google-btn { display: flex; justify-content: center; width: 100%; min-height: 44px; color-scheme: light; }
.google-msg { margin: 0; font-size: 17px; font-weight: 800; text-align: center; }
.google-or { align-self: stretch; color: var(--muted); font-size: 15px; font-weight: 700; }
.google-card .google-login { margin-top: 0; }
.google-card .google-msg { align-self: stretch; text-align: left; }
.google-msg:empty { display: none; }
.google-on { display: flex; flex-direction: column; gap: 2px; margin: 0; overflow-wrap: anywhere; }
.google-on b { color: var(--brand); font-size: 18px; font-weight: 800; }
.google-on small { color: var(--muted); font-size: 15px; font-weight: 700; }
.google-back { font-size: 18px; font-weight: 800; }
/* A full device (PLAYERS_MAX): "add a player" greyed, and why under it */
.sheet .primary[data-add]:disabled { background: var(--soft); color: var(--muted); box-shadow: none; }
.players-max { margin: -4px 0 0; }
/* The account's players (up to 3): a face and a name each, an empty place outlined */
.google-head { display: flex; flex-direction: column; gap: 8px; }
.google-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.google-slot { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 10px 4px; border-radius: 16px; background: var(--surface); }
.google-slot img { width: 52px; height: 52px; }
.google-slot b { max-width: 100%; overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.google-slot.empty { background: none; box-shadow: inset 0 0 0 2px var(--hair, rgba(127, 127, 127, 0.3)); color: var(--muted); }
.google-slot.empty i { width: 52px; height: 52px; border-radius: 50%; background: var(--surface); }
.google-full { margin: 0; font-size: 26px; font-weight: 800; line-height: 1.35; }
.google-pick .row.on { box-shadow: inset 0 0 0 3px var(--brand); }
.google-tick { display: block; flex: none; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--muted); }
.row.on .google-tick { background: var(--brand) no-repeat center / 18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); box-shadow: none; }
/* Joining the rankings: the menu tile and the three-step guide */
.guide-dots { display: flex; justify-content: center; gap: 8px; }
.guide-dots i { width: 28px; height: 8px; border-radius: 4px; background: var(--bg); }
.guide-dots i.on { background: var(--brand); }
.guide-hero { position: relative; display: grid; place-items: center; height: 130px; overflow: hidden; }
.guide-faces { position: relative; display: flex; gap: 6px; }
.guide-faces img { width: 72px; height: 72px; animation: hop 1.4s ease-in-out infinite; }
.guide-title { font-size: 26px; }
.guide-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; text-align: left; }
.guide-list li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 16px; background: var(--bg); font-size: 18px; font-weight: 800; }
.gi { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 12px; color: #fff; }
.gi svg { width: 22px; height: 22px; }
.gi0 { background: #f59e0b; } .gi1 { background: #ef4444; } .gi2 { background: #a855f7; } .gi3 { background: #22c55e; }
.guide-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px; border-radius: 24px; background: var(--bg); }
.guide-card img { width: 96px; height: 96px; }
.guide-card b { font-size: 24px; }
.guide-card span { color: #ca8a04; font-weight: 900; }
.guide-wait { font-size: 20px; font-weight: 900; }
.guide-zero { padding: 10px 14px; border-radius: 16px; background: #fef3c7; color: #92400e; font-size: 18px; font-weight: 900; line-height: 1.5; }
.pair-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pair-btns .secondary { padding: 12px 8px; font-size: 18px; }
.pair-btns .warn, .remove-btn { color: var(--danger); }
.remove-btn { flex: none; padding: 10px 16px; border-radius: 14px; background: var(--surface); font-size: 17px; font-weight: 800; }
/* A button waiting on the server (waitOn). */
.busy { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: progress; }
.busy:disabled { opacity: 0.85; }
.spin { flex: none; width: 1em; height: 1em; border: 3px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: rays 0.8s linear infinite; }
.form-msg { min-height: 0; color: var(--danger); font-size: 16px; font-weight: 800; }
.form-msg:empty { display: none; }
/* Short screens (an iPhone SE), where the board is held back by the height: smaller buttons, and the jellies' line
   without its heading, so the board gets the room. */
body.tight .skill-open { min-height: 44px; padding: 4px 10px; }
body.tight .bag-btn { min-height: 44px; padding: 4px 10px; }
body.tight .legend .lg-all { display: none; }
.daily-how { margin: 0; color: var(--muted); font-size: 15px; font-weight: 800; }
.form-foot { position: sticky; bottom: -20px; z-index: 1; display: flex; flex-direction: column; gap: 10px; margin: 0 -20px -20px; padding: 12px 20px 20px; background: var(--surface); box-shadow: 0 -8px 16px -8px rgba(0, 0, 0, 0.25); }
.remove-warn { color: var(--danger); font-size: 17px; font-weight: 800; line-height: 1.6; }
.remove-yes { background: var(--danger); box-shadow: 0 5px 0 #991b1b; }
/* The daily standings */
.recap-head { display: flex; align-items: center; gap: 12px; text-align: left; }
.recap-head img { width: 64px; height: 64px; flex: none; }
.recap-head b { display: block; font-size: 26px; }
.recap-head small { color: var(--muted); font-size: 15px; font-weight: 700; }
.recap-up { padding: 8px; border-radius: 16px; background: #dcfce7; color: #15803d; font-size: 20px; font-weight: 900; animation: pop-in 0.5s 0.2s both; }
.recap-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 18px; background: var(--bg); text-align: left; }
.recap-row .who { flex: 1; min-width: 0; }
.recap-row .who b { display: block; font-size: 18px; }
.recap-row .who small { display: block; color: var(--muted); font-size: 14px; }
.recap-row .num { font-size: 22px; font-weight: 900; white-space: nowrap; }
.recap-row .num small { color: var(--muted); font-size: 14px; font-weight: 700; white-space: normal; }
.recap-row em { margin-left: 6px; font-size: 16px; font-style: normal; }
.recap-row em.up { color: #16a34a; }
.recap-row em.down { color: #ef4444; }
.join-face { display: grid; place-items: center; }
.join-face img { width: 112px; height: 112px; animation: hop 1.4s ease-in-out infinite; }
.human { display: grid; place-items: center; min-height: 70px; }
.move-code { padding: 14px; border-radius: 18px; background: var(--bg); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 40px; font-weight: 900; letter-spacing: 0.12em; user-select: text; -webkit-user-select: text; }
.move-code.fail { font-family: inherit; font-size: 18px; letter-spacing: 0; color: var(--muted); }
.restore-msg { color: var(--danger); font-weight: 800; }
#code-input { text-align: center; text-transform: uppercase; font-size: 28px; letter-spacing: 0.12em; }
.daily-rule { padding: 10px 14px; border-radius: 16px; background: linear-gradient(135deg, #fde68a, #fbbf24); color: #713f12; font-size: 16px; font-weight: 700; }
.daily-rule b { display: block; font-size: 22px; }
.daily-skills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.daily-skill { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.daily-skill .pi { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, #f43f5e, #f59e0b, #22c55e, #3b82f6, #a855f7); color: #fff; }
.daily-skill .pi svg { width: 28px; height: 28px; }
.daily-skill small { font-size: 14px; font-weight: 700; }
/* The daily challenge's week (today lit) and its three difficulties, each with what its first win today pays. */
.daily-theme { margin: -4px 0 0; color: var(--brand); font-size: 22px; font-weight: 900; }
.daily-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.daily-week span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 12px; background: var(--bg); opacity: 0.55; }
.daily-week span.on { background: color-mix(in srgb, var(--brand) 18%, var(--bg)); box-shadow: inset 0 0 0 2px var(--brand); opacity: 1; }
.daily-week b { font-size: 15px; }
.daily-week svg { width: 22px; height: 22px; }
.daily-week small { max-width: 100%; font-size: 10px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.daily-first { margin: 4px 0 -4px; font-size: 15px; font-weight: 800; }
.daily-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.daily-tier { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border: 0; border-radius: 16px; color: #fff; font: inherit; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25); }
.daily-tier.t0 { background: linear-gradient(160deg, #22c55e, #15803d); }
.daily-tier.t1 { background: linear-gradient(160deg, #ef4444, #7f1d1d); }
.daily-tier.t2 { background: linear-gradient(160deg, #7c3aed, #1e1b4b); }
.daily-tier > b { font-size: 18px; font-weight: 900; }
.daily-go { width: 100%; font-size: 22px; }
.daily-tier.won { box-shadow: inset 0 0 0 3px #facc15; }
.daily-prize { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 58px; }
.daily-prize > svg, .daily-prize > .wpn, .daily-prize > .item { width: 34px; height: 34px; }
.daily-prize .wpn svg, .daily-prize .item svg { width: 100%; height: 100%; }
.daily-prize small { font-size: 13px; font-weight: 800; line-height: 1.2; }
.daily-coins { display: inline-flex; align-items: center; gap: 2px; font-size: 14px; font-weight: 900; }
.daily-coins svg { width: 16px; height: 16px; }
.daily-tier em { font-size: 13px; font-style: normal; font-weight: 800; opacity: 0.9; }
.features { display: flex; flex-direction: column; gap: 8px; padding: 0; list-style: none; font-size: 17px; line-height: 1.5; text-align: left; }
.features li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: var(--bg); }
.features img, .features svg { width: 36px; height: 36px; flex: none; }
.gift { display: grid; place-items: center; margin: 0 auto; width: 96px; height: 96px; border-radius: 50%; background: rgba(249, 115, 22, 0.15); color: var(--brand); animation: bob 1.2s ease-in-out infinite; }
.gift svg { width: 56px; height: 56px; }
.tasks { display: flex; flex-direction: column; gap: 8px; }
.task { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px; background: var(--bg); font-size: 17px; font-weight: 700; text-align: left; }
.task .tt { flex: 1; }
.task small { display: block; margin-top: 4px; color: var(--muted); font-size: 14px; }
.task .check { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: rgba(127, 127, 127, 0.2); color: #fff; }
.task.done .check { background: #22c55e; }
.task.done .tt { color: var(--muted); }
.bar { height: 8px; margin-top: 6px; overflow: hidden; border-radius: 4px; background: rgba(127, 127, 127, 0.2); }
.bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #fb923c, #ec4899); }
.profile { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 20px; background: var(--bg); text-align: left; }
.profile img { width: 64px; height: 64px; flex: none; }
.profile > div { flex: 1; min-width: 0; }
.profile b { display: block; overflow: hidden; font-size: 22px; text-overflow: ellipsis; white-space: nowrap; }
.profile .title-pill { display: inline-block; margin-top: 4px; }
.profile small { display: block; margin-top: 6px; color: var(--muted); font-size: 14px; }
.numbers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.numbers div { padding: 10px 4px; border-radius: 14px; background: var(--bg); }
.numbers b { display: block; font-size: 20px; font-variant-numeric: tabular-nums; }
.numbers small { color: var(--muted); font-size: 13px; }
.medals { display: grid; grid-template-columns: 1fr; gap: 8px; }
.medal-card { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 14px; background: var(--bg); text-align: left; }
.medal-card svg { flex: none; }
.medal-card div { flex: 1; min-width: 0; }
.medal-card b { display: block; font-size: 15px; }
.medal-card b em { color: var(--muted); font-size: 12px; font-style: normal; }
.medal-card small { display: block; color: var(--muted); font-size: 12px; line-height: 1.4; }
.medal-card .bar { height: 6px; margin-top: 4px; }
.feat-chips { grid-template-columns: repeat(3, 1fr); }
.feat-chest { flex: none; width: 30px; height: 30px; }
.feat-chest svg { width: 100%; height: 100%; }
.feat-chest.c1 { filter: drop-shadow(0 0 4px #3b82f6); }
.feat-chest.c2 { filter: drop-shadow(0 0 5px #a855f7); }
.feat-chest.c3 { filter: drop-shadow(0 0 6px #facc15); }
.feat-chest.coins { display: flex; flex-direction: column; align-items: center; width: auto; height: auto; min-width: 30px; gap: 1px; }
.feat-chest.coins svg { width: 22px; height: 22px; }
.feat-chest.coins b { font-size: 12px; font-weight: 900; }
.feat-chest.c4 { filter: drop-shadow(0 0 4px #ec4899) drop-shadow(0 0 6px #22d3ee); }
.feat-title { margin: 0; color: #ca8a04; font-size: 17px; font-weight: 900; }
.certs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.cert-chip { padding: 6px 12px; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: 15px; font-weight: 800; }

/* Certificate */
.cert { padding: 8px; border-radius: 12px; background: linear-gradient(135deg, #fde68a, #f59e0b 50%, #fde68a); color: #3f2a12; }
.cert-in { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 16px 16px; border: 2px solid #b45309; border-radius: 8px; background: #fffbeb; font-family: "Noto Serif TC", "Songti TC", "PMingLiU", serif; }
.cert-in::before, .cert-in::after { content: "❖"; position: absolute; top: 6px; color: #d97706; font-size: 18px; }
.cert-in::before { left: 10px; }
.cert-in::after { right: 10px; }
.cert-title { font-size: 34px; letter-spacing: 0.4em; color: #b45309; }
.cert-avatar { width: 64px; height: 64px; }
.cert-name { font-size: 28px; font-weight: 800; }
.cert-text { font-size: 18px; line-height: 1.7; }
.cert-text b { color: #dc2626; font-size: 24px; }
.cert-sub { color: #78350f; font-size: 15px; }
.cert-foot { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 8px; font-size: 14px; text-align: left; }
.seal { display: grid; place-items: center; width: 64px; height: 64px; border: 3px solid #dc2626; border-radius: 10px; color: #dc2626; font-size: 15px; font-weight: 800; line-height: 1.2; text-align: center; transform: rotate(-8deg); animation: stamp 0.6s 0.4s both; }

.toast { position: fixed; top: max(12px, env(safe-area-inset-top)); left: 12px; right: 12px; z-index: 20; display: flex; align-items: center; gap: 10px; width: fit-content; max-width: 480px; margin: 0 auto; padding: 10px 20px 10px 10px; border-radius: 28px; background: var(--ink); color: var(--surface); font-size: 16px; font-weight: 700; line-height: 1.4; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); animation: drop-in 0.35s both; pointer-events: none; }
.toast[hidden] { display: none; }
.toast svg, .toast img { width: 36px; height: 36px; flex: none; }

@keyframes fade-in { from { opacity: 0; } }
@keyframes star-pop { from { opacity: 0; transform: scale(2.6) rotate(-40deg); } 60% { transform: scale(0.85); } }
@keyframes pop-in { from { opacity: 0; transform: scale(0.85); } }
@keyframes drop-in { from { opacity: 0; transform: translateY(-30px); } }
@keyframes chest-glow { 50% { box-shadow: 0 4px 0 rgba(0, 0, 0, 0.12), 0 0 0 4px var(--gold); } }
@keyframes bob { 50% { transform: translateY(-6px); } }
@keyframes hop { 50% { transform: translateY(-8px); } }
@keyframes glow { 50% { box-shadow: 0 0 0 5px #ffffff, 0 0 0 17px rgba(249, 115, 22, 0.2), inset 0 -6px 0 rgba(0, 0, 0, 0.2); } }
@keyframes node-pop { 0% { transform: scale(0.5); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes spark { to { transform: translate(var(--dx), var(--dy)) rotate(260deg); opacity: 0; } }
@keyframes pulse-btn { 50% { transform: scale(1.06); } }
@keyframes stamp { from { opacity: 0; transform: rotate(-8deg) scale(2.5); } 70% { transform: rotate(-8deg) scale(0.9); } }
@keyframes slot-glow { 50% { box-shadow: 0 0 16px 4px rgba(168, 85, 247, 0.6); } }
@keyframes rays { to { transform: rotate(360deg); } }
@keyframes banner-glow { 50% { box-shadow: 0 4px 0 #6d28d9, 0 0 18px 4px rgba(236, 72, 153, 0.55); } }
@keyframes sheen { 0%, 40% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
@keyframes medal-boom { 40% { transform: scale(1.35) rotate(-6deg); } 70% { transform: scale(0.92) rotate(3deg); } }
@keyframes confetti-fall { from { transform: translate(0, 0) rotate(0); } to { transform: translate(var(--x), 110vh) rotate(var(--r)); } }
@keyframes unlock-pop { from { opacity: 0; transform: scale(0) rotate(-200deg); } }
@keyframes wobble { 25% { transform: rotate(-8deg) scale(1.05); } 75% { transform: rotate(8deg) scale(1.05); } }
@keyframes power-ready { 50% { box-shadow: 0 3px 0 #4c1d95, 0 0 14px 2px rgba(124, 58, 237, 0.45); } }
@keyframes rainbow-slide { to { background-position: 200% 0; } }
@keyframes ko-stamp { from { opacity: 0; transform: rotate(-12deg) scale(3); } 70% { transform: rotate(-12deg) scale(0.9); } to { transform: rotate(-12deg) scale(1); } }

/* Narrow phones: the player chip clips its name, and shows just the avatar below 360px, so the top buttons fit. */
@media (max-width: 440px) {
  .me-chip { overflow: hidden; }
}
@media (max-width: 359px) {
  .map .me-chip { padding-right: 6px; }
  .map .me-text { display: none; }
}
/* Phones: the menu's bar holds the exit, the player and six buttons (the shop added, the user's call): tighter gaps,
   narrower buttons keeping their words, and the player's face alone. */
@media (max-width: 440px) {
  .menu .map-top { gap: 5px; padding-right: 8px; padding-left: 8px; }
  .menu .map-top .icon-btn.labeled { min-width: 40px; padding: 3px 2px; }
  .menu .me-chip { padding: 0 4px; }
  .menu .me-text { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .node.now, .node .me, .chest.ready, .gift, .big.pulse, .gc-better, .logo-jellies img { animation: none; }
  .fight-share.soon, .hud-share.soon { animation: none; }
  .skill-bar.ready .skill-open, .skill-bar.ready .skill-open-icon svg, .bag-btn.aim, .skill-card.ready, .ko-card b, .chest-pick { animation: none; }
  .rank-tile, .rank-tile::after, .guide-faces img, .unlock-rays, .unlock-icon, .collector-face, .lv-tile::after, .lvup .lv-medal, .lvup-title, .lvup-many, .lv-stats em, .lvcard img, .xp-row .lv-badge.up, .duel-delta, .duel-stars i { animation: none; }
  .lv-track i { transition: none; }
  #power-fill { transition: none; }
  .shop-card.look img, .title-pill.brag, .raid-chest-big, .chest-hint, .wpn::before, .wpn::after, .boost-tag, .raid-legend svg, .raid-legend i, .share.invite, .wpn:is(.w4, .w5, .w6, .w7, .w8, .w9, .w10, .w11)::before, .wpn:is(.w4, .w5, .w6, .w7, .w8, .w9, .w10, .w11)::after, .wpn.w7 .wpn-svg, :is(.gear-name, .gear-rare, .sheet .codex-rare, .gear-slot, .gear-card):is(.w4, .w5, .w6, .w7, .w8, .w9, .w10, .w11), .loot.loot.loot:is(.w4, .w5, .w6, .w7, .w8, .w9, .w10, .w11), .loot.loot.loot:is(.w4, .w5, .w6, .w7, .w8, .w9, .w10, .w11) :is(.loot-rays, .loot-flash, .loot-tier), .loot.loot.loot:is(.w4, .w5, .w6, .w7, .w8, .w9, .w10, .w11) .loot-chest .beam, .loot.loot.loot:is(.w4, .w5, .w6, .w7, .w8, .w9, .w10, .w11) .loot-chest .beam::after { animation: none; }
}

/* Wide desktop windows: the bars go beside the board (as on a phone held sideways), so it can use the whole height. */
@media (min-width: 900px) and (min-aspect-ratio: 4/3) {
  body { flex-direction: row; gap: 16px; }
  .hud { flex-direction: column; align-items: stretch; width: auto; height: var(--board-h); }
  .stat { min-width: 104px; }
  .hud-share:not([hidden]) { display: flex; }
  .fight-share { display: none !important; }
  .hud-honor { justify-content: center; }
  .skill-bar { order: 3; display: grid; grid-auto-rows: 1fr; width: 104px; }
  .skill-open, .bag-btn { flex: none; flex-direction: column; justify-content: center; width: 104px; padding: 10px 6px; text-align: center; }
  .bag-text { align-items: center; }
  .skill-open-text { flex: none; width: 100%; }
  /* The name over the energy: side by side they do not fit this narrow. */
  .skill-title, .skill-foot { flex-direction: column; align-items: center; gap: 2px; }
  .skill-stage { font-size: 14px; }
  .power-track { flex: none; width: 100%; }
  .hint { display: none; }
  /* What each jelly does: a column beside the items (the user missed it when it was hidden here). */
  .legend { order: 5; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: center; gap: 10px; width: auto; max-width: 130px; height: var(--board-h); }
  .legend .lg-all { flex-basis: auto; text-align: left; }
}

@media (orientation: landscape) and (max-height: 540px) {
  body { flex-direction: row; padding: 8px max(8px, env(safe-area-inset-right)) 8px max(8px, env(safe-area-inset-left)); }
  .hud { flex-direction: column; align-items: stretch; width: auto; height: var(--board-h); }
  .stat { min-width: 96px; }
  .hud-share:not([hidden]) { display: flex; }
  .fight-share { display: none !important; }
  .skill-bar { order: 3; display: grid; grid-auto-rows: 1fr; width: 88px; }
  .skill-open, .bag-btn { flex: none; flex-direction: column; justify-content: center; width: 88px; padding: 8px 6px; text-align: center; }
  .bag-text { align-items: center; }
  .skill-open-text { flex: none; width: 100%; font-size: 12px; }
  .skill-title, .skill-foot { flex-direction: column; align-items: center; gap: 2px; }
  .skill-stage { font-size: 12px; }
  .power-track { flex: none; width: 100%; }
  .hint { display: none; }
  /* What each jelly does: a column beside the items (the user missed it when it was hidden here). */
  .legend { order: 5; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: center; gap: 10px; width: auto; max-width: 130px; height: var(--board-h); }
  .legend .lg-all { flex-basis: auto; text-align: left; }
  .overlay { --ov-pad: 12px; gap: 8px; }
  .overlay h1 { font-size: 28px; }
  .stars { font-size: 40px; }
  .map-top { padding-top: 8px; }
  .menu-body { display: grid; grid-template-columns: repeat(4, 1fr); align-content: safe center; max-width: 860px; }
  .menu-body > :first-child, .menu-body > :last-child { margin: 0; }
  .logo { grid-column: 1 / -1; flex-direction: row; justify-content: center; gap: 12px; padding: 0; }
  .logo-jellies img { width: 32px; height: 32px; }
  .logo h1 { font-size: 30px; }
  .menu-head { display: none; }
  /* Rows as tall as their cards (cards that clip their insides would otherwise be squeezed to nothing). */
  .menu-body { grid-auto-rows: max-content; }
  .raid-card, .duel-card, .levels-card, .daily-card { grid-column: span 2; }
  .tiles { display: contents; }
  .tile { min-height: 0; padding: 8px; }
  .lv-tile #lv-stats { display: none; }
  .mode-pic, .lv-tile .lv-medal { width: 44px; height: 44px; }
  .tile > b { font-size: 17px; }
  .tile > small { font-size: 13px; }
}

/* ---- The world boss: the menu card, the map shortcut and its room ---- */
body.raid { background: radial-gradient(ellipse at 50% 0%, #4c0b16, #12040a 70%); }
body.raid.trial { background: radial-gradient(ellipse at 50% 0%, #312e81, #0b0820 70%); }
body.raid.trial :is(.stat, .icon-btn, .skill-open) { box-shadow: 0 0 0 1px rgba(129, 140, 248, 0.45); }
body.raid .stat, body.raid .icon-btn, body.raid .skill-open { box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.35); }
body.raid .hint { color: #fecaca; }
.raid-embers { position: absolute; inset: 0; background-image: radial-gradient(circle, #fde047 0 1.5px, transparent 2.5px), radial-gradient(circle, #fb923c 0 2px, transparent 3px), radial-gradient(circle, #f97316 0 1px, transparent 2px); background-size: 70px 90px, 110px 130px, 50px 70px; background-position: 10px 0, 40px 30px, 25px 60px; animation: embers 6s linear infinite; opacity: 0.8; pointer-events: none; }
@keyframes embers { to { background-position: 10px -270px, 40px -360px, 25px -210px; } }
.raid-tag { align-self: flex-start; padding: 1px 10px; border-radius: 999px; background: #dc2626; color: #fff !important; font-size: 13px !important; font-weight: 900 !important; letter-spacing: 0.1em; }
.raid-track { display: block; height: 12px; overflow: hidden; border-radius: 6px; background: rgba(255, 255, 255, 0.2); }
.raid-track i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #ef4444, #f97316, #facc15); transition: width 0.8s ease; }
@keyframes raid-glow { 50% { box-shadow: 0 4px 0 #450a0a, 0 0 20px 3px rgba(239, 68, 68, 0.75); } }
@keyframes raid-breathe { 50% { transform: scale(1.07); } }

.map-events { display: grid; grid-template-columns: 1.5fr 1fr 0.9fr; gap: 8px; width: calc(100% - 24px); max-width: 496px; margin: 8px auto 0; }
.map-raid, .map-tower, .map-shop { position: relative; display: flex; align-items: center; gap: 8px; min-height: 58px; padding: 6px 10px 6px 6px; overflow: hidden; border-radius: 16px; text-align: left; }
.map-raid { background: radial-gradient(circle at 15% 40%, #991b1b, #1e0b18 75%); color: #fff; animation: raid-glow 1.8s ease-in-out infinite; }
.map-tower { background: var(--surface); }
.map-raid img, .map-tower img { width: 46px; height: 46px; flex: none; }
.map-shop { background: linear-gradient(135deg, #0c0a09, #292524); color: #fef3c7; box-shadow: inset 0 0 0 2px #d4a017; }
.map-shop svg { width: 34px; height: 34px; flex: none; }
.map-shop .ev-text small { color: #fcd34d; font-size: 14px; font-weight: 900; }
.map-tower .ev-text b, .map-shop .ev-text b { font-size: 15px; }
.map-tower, .map-shop { gap: 4px; padding: 6px; }
.map-tower img { width: 38px; height: 38px; }
.map-shop svg { width: 28px; height: 28px; }
.map-events .new-tag { position: absolute; top: 3px; right: 3px; padding: 0 6px; font-size: 11px; }
.shop-faces img { width: 78px; height: 78px; }
.skill-card.locked { cursor: pointer; }
.ev-text { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.ev-text b { font-size: 17px; white-space: nowrap; }
.ev-text small { overflow: hidden; color: #fecaca; font-size: 12px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.map-raid .raid-track { height: 8px; }

/* Places players never found: a red NEW tag and a glow until they try them. */
.new-tag { display: none; }
.fresh .new-tag { display: inline-block; flex: none; padding: 2px 8px; border-radius: 999px; background: #ef4444; color: #fff; font-size: 13px; font-weight: 900; animation: new-bounce 1s ease-in-out infinite; }
.map-tower.fresh { box-shadow: 0 0 0 3px #ef4444; }
.map-tower[hidden] { display: none; }
@keyframes new-bounce { 50% { transform: translateY(-3px) scale(1.08); } }
@keyframes fresh-glow { 0%, 100% { box-shadow: 0 4px 0 rgba(0, 0, 0, 0.08), 0 0 0 3px #ef4444; } 50% { box-shadow: 0 4px 0 rgba(0, 0, 0, 0.08), 0 0 16px 4px rgba(239, 68, 68, 0.65); } }

.stat.raid-late small { color: var(--danger); font-size: 14px; font-weight: 900; }

.raid-room { display: flex; flex-direction: column; gap: 12px; }
.raid-hero { position: relative; display: grid; place-items: center; height: 200px; margin: -28px -20px 0; overflow: hidden; border-radius: 24px 24px 0 0; background: radial-gradient(circle at 50% 62%, #b91c1c, #2a0a14 72%); }
.raid-room > .x-btn { z-index: 1; color: #fff; }
/* Today's challenge, as the world boss's room (showChallenge): its boss over amber rays, dark panels with their colours
   on the edges. */
.daily-room { display: flex; flex-direction: column; gap: 12px; }
.daily-room > .x-btn { z-index: 1; color: #fff; }
.daily-hero { background: radial-gradient(circle at 50% 62%, #b45309, #2a1206 72%); }
.daily-hero .raid-rays { background: repeating-conic-gradient(rgba(251, 191, 36, 0.3) 0 8deg, transparent 8deg 16deg); }
.daily-hero .raid-boss { width: 170px; height: 170px; filter: drop-shadow(0 0 18px rgba(251, 146, 60, 0.55)); }
.daily-hero .raid-tag { background: #b45309; }
.daily-room .raid-boss-name { color: #f0b45c; }
.daily-room .boss-card > img { display: none; }
.daily-room .boss-card { padding: 12px 14px; }
.daily-room .boss-card b { display: none; }
.daily-room .daily-week span.on { background: color-mix(in srgb, #d97706 18%, var(--bg)); box-shadow: inset 0 0 0 2px #d97706; }
.daily-room .daily-rule { background: var(--bg); box-shadow: inset 0 0 0 1px rgba(217, 119, 6, 0.4); color: var(--muted); }
.daily-room .daily-rule b { color: #f0d98c; }
.daily-room .daily-tier { box-shadow: none; }
.daily-room .daily-tier.t0 { background: linear-gradient(160deg, #0d3b26, #06180f); box-shadow: inset 0 0 0 1px rgba(74, 222, 128, 0.4); }
.daily-room .daily-tier.t1 { background: linear-gradient(160deg, #431010, #1a0505); box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.4); }
.daily-room .daily-tier.t2 { background: linear-gradient(160deg, #2c1554, #10071f); box-shadow: inset 0 0 0 1px rgba(192, 132, 252, 0.4); }
.daily-room .daily-tier.t0 > b { color: #86efac; }
.daily-room .daily-tier.t1 > b { color: #fca5a5; }
.daily-room .daily-tier.t2 > b { color: #d8b4fe; }
.daily-room .daily-tier.won { box-shadow: inset 0 0 0 2px #e8c97a; }
/* The stages are buttons: an open one plays, a locked one waits dimmed for the one before it. */
.daily-room .daily-tier { cursor: pointer; }
.daily-room .daily-tier.locked { opacity: 0.45; cursor: default; }
.daily-tier .lock { width: 22px; height: 22px; }
.daily-room .daily-tier > em:first-of-type { color: #fde68a; font-size: 14px; }
.daily-tier .daily-boss { width: 40px; height: 40px; margin: -4px 0 -2px; }
.daily-wheel-tag { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 16px; background: var(--bg); box-shadow: inset 0 0 0 1px rgba(250, 204, 21, 0.35); }
.daily-wheel-tag b { color: #f0d98c; font-size: 17px; }
.daily-wheel-tag small { margin-left: auto; color: var(--muted); font-size: 14px; font-weight: 700; }
.daily-wheel-tag.done { box-shadow: inset 0 0 0 2px #e8c97a; }
.wheel-icon { width: 32px; height: 32px; flex: none; }
.help-ico .wheel-icon { width: 100%; height: 100%; }
/* The lucky wheel (showWheel): a disc of slices as big as their chances, a pin at the top, one big button. */
.wheel-room { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.wheel-room h2 { color: #facc15; font-size: 28px; }
.wheel-sub { margin-top: -10px; color: #f0d98c; font-size: 17px; font-weight: 800; }
/* Turns of the world boss's wheel owed: a button in its room, a line on its card. */
.raid-spin { display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: #fde68a; font-weight: 900; }
.raid-text small.raid-spin { justify-content: flex-start; gap: 6px; color: #fde68a; font-weight: 900; }
.raid-text small.raid-spin .wheel-icon { width: 20px; height: 20px; }
.wheel { position: relative; width: min(300px, 78vw); aspect-ratio: 1; }
.wheel-disc { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 6px #7c2d12, 0 0 0 10px #facc15, 0 0 30px rgba(250, 204, 21, 0.5); }
.wheel-disc > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.wheel-lab { position: absolute; inset: 0; display: flex; justify-content: center; pointer-events: none; }
.wheel-lab i { display: flex; flex-direction: column; align-items: center; margin-top: 8%; font-style: normal; }
.wheel-lab svg { width: 30px; height: 30px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5)); }
.wheel-lab b { color: #fff; font-size: 15px; font-weight: 900; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); }
.wheel-lab.thin i { margin-top: 1%; }
.wheel-lab.thin svg { width: 18px; height: 18px; }
.wheel-pin { position: absolute; top: -14px; left: 50%; width: 0; height: 0; margin-left: -14px; border: 14px solid transparent; border-top: 26px solid #fef3c7; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6)); }
.wheel-hub { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fef3c7, #f59e0b 60%, #92400e); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); }
.wheel-go { width: 100%; font-size: 26px; }
/* A daily stage's twist as it begins (twistCard): one big card, its icon over its name, popping in and fading out. */
.twist-card { position: fixed; top: 38%; left: 50%; z-index: 11; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 190px; padding: 18px 26px 16px; border-radius: 24px; background: linear-gradient(160deg, #2a1206, #0f0702); box-shadow: inset 0 0 0 3px #e8c97a, 0 0 40px rgba(250, 204, 21, 0.45); transform: translate(-50%, -50%); pointer-events: none; animation: twist-pop 1.9s ease-out both; }
.twist-ico { display: grid; place-items: center; width: 86px; height: 86px; border-radius: 22px; background: rgba(255, 255, 255, 0.08); }
.twist-ico svg { width: 66px; height: 66px; }
.twist-card b { color: #fde68a; font-size: 32px; font-weight: 900; letter-spacing: 2px; white-space: nowrap; }
@keyframes twist-pop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); } 14% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); } 24% { transform: translate(-50%, -50%) scale(1); } 82% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); } }
@media (prefers-reduced-motion: reduce) { .twist-card { animation: none; } }
.raid-rays { position: absolute; width: 480px; height: 480px; border-radius: 50%; background: repeating-conic-gradient(rgba(248, 113, 113, 0.35) 0 8deg, transparent 8deg 16deg); animation: rays 9s linear infinite; -webkit-mask: radial-gradient(circle, #000 18%, transparent 66%); mask: radial-gradient(circle, #000 18%, transparent 66%); }
.raid-boss { position: relative; width: 200px; height: 200px; filter: drop-shadow(0 0 18px rgba(250, 204, 21, 0.55)); animation: raid-breathe 2.4s ease-in-out infinite; }
.raid-hero .raid-tag { position: absolute; top: 14px; left: 14px; font-size: 15px !important; }
.raid-boss-name { margin-top: -10px; color: #dc2626; font-size: 18px; font-weight: 800; }
.raid-hp { display: flex; flex-direction: column; gap: 4px; }
.raid-hp .raid-track { height: 24px; border-radius: 12px; background: #fee2e2; box-shadow: inset 0 0 0 2px #dc2626; }
.raid-hp .raid-track i { border-radius: 12px; }
.raid-hp b { color: #dc2626; font-size: 22px; }
.raid-hp small { color: var(--muted); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.raid-meta { color: var(--muted); font-size: 15px; font-weight: 700; }
.raid-stats { display: grid; gap: 8px; }
.raid-stats span { display: flex; flex-direction: column; justify-content: center; padding: 8px; border-radius: 14px; background: var(--bg); color: var(--muted); font-size: 14px; font-weight: 700; }
.raid-stats b { color: var(--ink); font-size: 18px; }
.sheet .raid-go { background: linear-gradient(90deg, #dc2626, #f97316); box-shadow: 0 4px 0 #7f1d1d; }
.sheet .raid-share { background: #fef3c7; color: #92400e; }
.raid-chests { padding: 12px; border-radius: 16px; background: var(--bg); }
.raid-chests p { font-weight: 800; }
.raid-chests .raid-next, .tag.raid-next { color: #b45309; font-weight: 900; }
.raid-golden { margin: 0; color: var(--muted); font-size: 14px; font-weight: 700; }
.raid-golden.on { padding: 6px 12px; border-radius: 12px; background: linear-gradient(180deg, #f3d98b, #c99a3a); color: #2a1606; font-size: 16px; font-weight: 900; }
.raid-chests > div { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 6px 0; }
.raid-chests span { display: flex; flex-direction: column; align-items: center; gap: 2px; opacity: 0.35; }
.raid-chests span.past { opacity: 0.7; }
.raid-chests span.on { opacity: 1; transform: scale(1.15); }
.raid-chests svg { width: 42px; height: 42px; }
.raid-chests span:nth-child(1) svg { filter: sepia(0.7) saturate(1.4); }
.raid-chests span:nth-child(2) svg { filter: grayscale(1) brightness(1.3); }
.raid-chests span:nth-child(3) svg { filter: saturate(2.2) brightness(1.25) drop-shadow(0 0 4px #facc15); }
.raid-chests span:nth-child(4) svg { filter: hue-rotate(170deg) saturate(1.6) drop-shadow(0 0 6px #7dd3fc); }
.raid-chests span small { font-size: 12px; font-weight: 800; }
.raid-chests > small { color: var(--muted); font-size: 13px; }
.raid-feed { display: flex; flex-direction: column; gap: 6px; padding: 0; list-style: none; text-align: left; }
.raid-feed li { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; }
.raid-feed img { width: 34px; height: 34px; flex: none; }
.raid-feed li small { display: block; color: #d97706; font-size: 13px; font-weight: 800; }
.raid-slayer { color: #b45309; font-size: 18px; font-weight: 900; }
.raid-ko img { position: relative; width: 150px; height: 150px; animation: unlock-pop 0.9s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.raid-ko b { position: absolute; color: #ef4444; font-size: 56px; font-weight: 900; text-shadow: 0 3px 0 #fff, 0 0 14px #fff; animation: stamp 0.6s 0.5s both; }
.raid-chest-big { position: relative; width: 132px; height: 132px; animation: unlock-pop 0.9s cubic-bezier(0.2, 1.6, 0.4, 1) both, wobble 1.6s 0.9s ease-in-out infinite; }
.raid-chest-big svg { width: 100%; height: 100%; }
/* Shut, it begs to be tapped; each knock makes it jump, and the rays only blaze once it is open. */
button.raid-chest-big { padding: 0; border: 0; background: none; cursor: pointer; }
.raid-chest-big.shut { animation: unlock-pop 0.9s cubic-bezier(0.2, 1.6, 0.4, 1) both, chest-beg 1.2s 0.9s ease-in-out infinite; }
.raid-chest-big.knock { animation: chest-knock 0.35s ease-out, chest-beg 1.2s 0.35s ease-in-out infinite; }
.raid-chest-big:not(.shut) { animation: unlock-pop 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) both, wobble 1.6s 0.6s ease-in-out infinite; }
.unlock.sealed .unlock-rays { opacity: 0.2; }
.chest-hint { animation: hint-pulse 1.2s ease-in-out infinite; }
.chest-hint .spin { display: inline-block; vertical-align: -0.15em; margin-right: 8px; }
@keyframes hint-pulse { 50% { transform: scale(1.08); } }
.chest-got { animation: unlock-pop 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.match-chest { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.match-chest[hidden] { display: none; }
.match-chest .raid-chest-big { width: 96px; height: 96px; }
/* A world boss try's chests, one for every bar it broke, each opened on its own. */
.chest-line { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; max-width: 320px; }
.chest-line:has(> :nth-child(3)) .raid-chest-big { width: 72px; height: 72px; }
.chest-line:has(> :nth-child(5)) .raid-chest-big { width: 58px; height: 58px; }
.chest-line:has(> :nth-child(21)) .raid-chest-big { width: 40px; height: 40px; }
.match-chest .loot-row:empty { display: none; }
.match-chest .loot-row { margin-top: 6px; }
.loot-empty { color: var(--muted); font-size: 14px; font-weight: 800; }
.match-chest .open-all { margin-top: 4px; padding: 10px 26px; font-size: 17px; }
.match-chest .open-all[hidden] { display: none; }
/* Chests waiting to be opened, in a room of their own over everything but the opening show: big, on a dark screen
   (the user's call: in the result they were hard to open). */
.chest-room { position: fixed; inset: 0; z-index: 11; display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 14px; padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); overflow-x: hidden; overflow-y: auto; background: radial-gradient(circle at 50% 40%, #3b0764, #020617 70%); color: #ffffff; animation: fade-in 0.2s both; }
.chest-room-title { position: relative; z-index: 2; margin: 0; color: #facc15; font-size: 34px; font-weight: 900; letter-spacing: 0.06em; text-shadow: 0 3px 0 #713f12, 0 0 18px rgba(250, 204, 21, 0.45); }
.chest-room .match-chest { gap: 10px; width: 100%; max-width: 420px; }
.chest-room .match-chest > .raid-chest-big { width: 176px; height: 176px; }
.chest-room .chest-line { gap: 10px 14px; max-width: 400px; }
.chest-room .chest-line .raid-chest-big { width: 124px; height: 124px; }
.chest-room .chest-line:has(> :nth-child(3)) .raid-chest-big { width: 104px; height: 104px; }
.chest-room .chest-line:has(> :nth-child(7)) .raid-chest-big { width: 84px; height: 84px; }
.chest-room .chest-line:has(> :nth-child(16)) .raid-chest-big { width: 66px; height: 66px; }
.chest-room .chest-line:has(> :nth-child(41)) .raid-chest-big { width: 52px; height: 52px; }
.chest-room .raid-chest-big.pending svg { filter: brightness(0.6) saturate(0) drop-shadow(0 0 8px rgba(255, 255, 255, 0.35)); }
.chest-room .chest-hint { font-size: 24px; }
.chest-room .open-all { padding: 14px 34px; border: 0; background: #facc15; color: #422006; font-size: 22px; }
.chest-room .loot-empty { color: #cbd5e1; font-size: 18px; }
/* Opening a chest: the screen dims, the chest bursts open and what it held comes out as pictures, the rarer the
   bigger the show (rare blue, epic purple, legendary gold, mythic rainbow). Above windows, under the confetti. */
.loot { position: fixed; inset: 0; z-index: 12; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 16px; overflow: hidden; background: rgba(0, 0, 0, 0.8); animation: fade-in 0.2s both; }
.loot-rays { position: absolute; top: 50%; left: 50%; width: 560px; height: 560px; margin: -330px 0 0 -280px; border-radius: 50%; background: repeating-conic-gradient(rgba(255, 255, 255, 0.22) 0 8deg, transparent 8deg 24deg); mask: radial-gradient(circle, #000 18%, transparent 66%); animation: prize-spin 9s linear infinite; }
.loot-rays.two { width: 760px; height: 760px; margin: -430px 0 0 -380px; animation-direction: reverse; opacity: 0.6; }
.t1 .loot-rays { background: repeating-conic-gradient(rgba(96, 165, 250, 0.55) 0 8deg, transparent 8deg 22deg); }
.t2 .loot-rays { background: repeating-conic-gradient(rgba(192, 132, 252, 0.6) 0 8deg, transparent 8deg 20deg); animation-duration: 6s; }
.t3 .loot-rays { background: repeating-conic-gradient(rgba(250, 204, 21, 0.7) 0 7deg, transparent 7deg 18deg); animation-duration: 4s; }
.t4 .loot-rays { background: conic-gradient(#ef4444, #f59e0b, #facc15, #22c55e, #06b6d4, #3b82f6, #a855f7, #ef4444); mask: radial-gradient(circle, #000 12%, transparent 62%); animation-duration: 1.8s; }
.loot-flash { position: absolute; inset: 0; background: #fff; animation: loot-flash 0.7s 0.45s both; pointer-events: none; }
.t4 .loot-flash { animation: loot-flash 0.7s 0.45s both, loot-flash 0.6s 1.3s both, loot-flash 0.6s 2.1s both; }
.loot-chest { position: relative; width: 120px; height: 120px; animation: loot-chest 0.7s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.loot-chest svg { position: relative; width: 100%; height: 100%; filter: drop-shadow(0 0 18px rgba(253, 224, 71, 0.8)); }
/* A beam of light rising from a chest above common, as over a good drop in Path of Exile and Diablo (the user's
   call), in its rarity's colour: on the opening show and on a result's chests once they are lit. */
.loot-chest .beam, .raid-chest-big.lit:is(.r1, .r2, .r3, .r4)::before { content: ""; position: absolute; left: 50%; bottom: 40%; width: 46%; height: 340%; border-radius: 50% 50% 0 0; background: linear-gradient(to top, var(--beam), transparent 92%); filter: blur(5px); transform: translateX(-50%); transform-origin: 50% 100%; pointer-events: none; mix-blend-mode: screen; animation: beam-rise 0.6s ease-out both, beam-pulse 1.4s 0.6s ease-in-out infinite; }
.loot-chest .beam::after, .raid-chest-big.lit:is(.r1, .r2, .r3, .r4)::after { content: ""; position: absolute; left: 50%; bottom: 40%; width: 12%; height: 300%; border-radius: 50% 50% 0 0; background: linear-gradient(to top, #ffffff, transparent 90%); transform: translateX(-50%); transform-origin: 50% 100%; pointer-events: none; mix-blend-mode: screen; animation: beam-rise 0.6s ease-out both, beam-pulse 1.4s 0.6s ease-in-out infinite; }
.loot-chest .beam { width: 70%; height: 520%; }
.loot-chest .beam::after { bottom: 0; height: 90%; }
.loot.t1, .raid-chest-big.r1 { --beam: #3b82f6; }
.loot.t2, .raid-chest-big.r2 { --beam: #a855f7; }
.loot.t3, .raid-chest-big.r3 { --beam: #facc15; }
.loot.t4 .beam, .raid-chest-big.lit.r4::before { background: linear-gradient(to top, #ec4899, #a855f7 30%, #22d3ee 60%, transparent 92%); }
.raid-chest-big svg { position: relative; z-index: 1; }
@keyframes beam-rise { from { transform: translateX(-50%) scaleY(0); opacity: 0; } }
@keyframes beam-pulse { 50% { opacity: 0.6; } }
.loot.t3, .loot.t4 { animation: fade-in 0.2s both, loot-shake 0.45s 0.5s 3; }
.loot-tier { position: relative; margin: 0; color: #fff; font-size: 34px; font-weight: 900; text-align: center; text-shadow: 0 0 14px currentColor; animation: unlock-pop 0.6s 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.t1 .loot-tier { color: #93c5fd; }
.t2 .loot-tier { color: #d8b4fe; }
.t3 .loot-tier { color: #fde047; font-size: 38px; }
.t4 .loot-tier { background: linear-gradient(90deg, #ef4444, #f59e0b, #facc15, #22c55e, #3b82f6, #a855f7); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 42px; text-shadow: none; filter: drop-shadow(0 0 10px #fff); }
/* The best weapon supplies the opening colours while the chest keeps its own tier class. */
.loot.w4 { --w-beam-height: 560%; --w-beam-width: 76%; --w-core: #fde68a; --w-rays-size: 600px; --w-spin: 4s; --w-title-size: 42px; }
.loot.w5 { --w-beam-height: 600%; --w-beam-width: 82%; --w-core: #fb7185; --w-rays-size: 660px; --w-spin: 3.8s; --w-title-size: 44px; }
.loot.w6 { --w-beam-height: 650%; --w-beam-width: 88%; --w-core: #ff3b55; --w-rays-size: 720px; --w-spin: 3.5s; --w-title-size: 46px; }
.loot.w7 { --w-beam-height: 700%; --w-beam-width: 94%; --w-core: #fff7cc; --w-rays-size: 780px; --w-spin: 3.2s; --w-title-size: 48px; }
.loot.w8 { --w-beam-height: 750%; --w-beam-width: 100%; --w-core: #bbf7d0; --w-rays-size: 840px; --w-spin: 3s; --w-title-size: 50px; }
.loot.w9 { --w-beam-height: 800%; --w-beam-width: 108%; --w-core: #ffffff; --w-rays-size: 900px; --w-spin: 2.8s; --w-title-size: 52px; }
.loot.w10 { --w-beam-height: 880%; --w-beam-width: 116%; --w-core: #ffffff; --w-rays-size: 960px; --w-spin: 2.6s; --w-title-size: 54px; }
.loot.w11 { --w-beam-height: 1000%; --w-beam-width: 130%; --w-core: #ffffff; --w-rays-size: 1040px; --w-spin: 2.4s; --w-title-size: 56px; }
.loot:is(.w4, .w5, .w6, .w7, .w8, .w9, .w10, .w11) .loot-chest .beam { width: var(--w-beam-width); height: var(--w-beam-height); background: linear-gradient(to top, var(--w-a), var(--w-b) 50%, transparent 94%); filter: blur(4px) drop-shadow(0 0 16px var(--w-a)); -webkit-mask: linear-gradient(to top, #000 65%, transparent); mask: linear-gradient(to top, #000 65%, transparent); }
.loot:is(.w4, .w5, .w6, .w7, .w8, .w9, .w10, .w11) .loot-chest .beam::after { width: 16%; height: 96%; background: linear-gradient(to top, var(--w-core), #ffffffaa 40%, transparent 96%); filter: drop-shadow(0 0 7px var(--w-core)); }
.loot:is(.w4, .w5, .w6, .w7, .w8, .w9, .w10, .w11) .loot-rays { width: var(--w-rays-size); height: var(--w-rays-size); margin-top: calc(var(--w-rays-size) / -2 - 50px); margin-left: calc(var(--w-rays-size) / -2); -webkit-mask: radial-gradient(circle, #000 12%, transparent 66%); mask: radial-gradient(circle, #000 12%, transparent 66%); animation-duration: var(--w-spin); }
.loot:is(.w4, .w5, .w6, .w7, .w8, .w9, .w10, .w11) .loot-rays.two { width: calc(var(--w-rays-size) + 180px); height: calc(var(--w-rays-size) + 180px); margin-top: calc(var(--w-rays-size) / -2 - 140px); margin-left: calc(var(--w-rays-size) / -2 - 90px); opacity: 0.7; animation-direction: reverse; animation-duration: calc(var(--w-spin) * 1.4); }
.loot.w4 .loot-chest .beam { background: linear-gradient(to top, #d6a438, #78520e 45%, #09090b99 70%, transparent 96%); mix-blend-mode: normal; filter: blur(5px) drop-shadow(0 0 20px #09090b); }
.loot.w4 .loot-rays { background: repeating-conic-gradient(#b88a28bb 0 8deg, #09090baa 8deg 15deg, transparent 15deg 30deg); }
.loot.w4 .loot-rays.two { background: conic-gradient(#09090bcc, #a77b2388, #09090bcc, #a77b2388, #09090bcc); }
.loot.w5 .loot-chest .beam { background: linear-gradient(to top, #fb7185, #be123c 35%, #450a0a99 65%, transparent 96%); }
.loot.w5 .loot-rays { background: repeating-conic-gradient(#be123ccc 0 10deg, #fb718588 10deg 14deg, transparent 14deg 28deg); }
.loot.w5 .loot-rays.two { background: conic-gradient(#450a0acc, #be123c99, #450a0acc, #fb718599, #450a0acc); }
.loot.w6 .loot-chest .beam { background: linear-gradient(to top, #ff3b55, #ef233c 28%, #09090bcc 65%, transparent 96%); mix-blend-mode: normal; filter: blur(3px) drop-shadow(0 0 24px #ef233c); }
.loot.w6 .loot-chest .beam::after { background: linear-gradient(to top, #fff, #ff3b55 28%, #09090b99 72%, transparent); }
.loot.w6 .loot-rays { background: repeating-conic-gradient(#ef233ce6 0 7deg, #09090bdd 7deg 20deg, transparent 20deg 27deg); }
.loot.w6 .loot-rays.two { background: repeating-conic-gradient(#09090bdd 0 17deg, #ef233c99 17deg 21deg, transparent 21deg 36deg); }
.loot.w7 .loot-chest .beam { background: linear-gradient(to top, #3b82f6, #facc15, #3b82f6, #facc15, #3b82f6); background-size: 100% 200%; animation: beam-rise 0.6s ease-out both, wpn-pillar 2.4s linear infinite; }
.loot.w7 .loot-rays { background: repeating-conic-gradient(#3b82f6cc 0 9deg, transparent 9deg 30deg, #facc15dd 30deg 39deg, transparent 39deg 60deg); }
.loot.w7 .loot-rays.two { background: conic-gradient(#3b82f6aa, #facc15aa, #3b82f6aa); }
.loot.w8 .loot-chest .beam { background: linear-gradient(25deg, #a855f7, #4ade80, #a855f7, #4ade80, #a855f7); background-size: 200% 200%; animation: beam-rise 0.6s ease-out both, wpn-colour-flow 2.2s linear infinite; }
.loot.w8 .loot-rays { background: repeating-conic-gradient(#c084fccc 0 25deg, transparent 25deg 60deg, #4ade80cc 60deg 85deg, transparent 85deg 120deg); }
.loot.w8 .loot-rays.two { background: conic-gradient(#a855f7bb, #4ade80bb, #a855f7bb, #4ade80bb, #a855f7bb); }
.loot.w9 .loot-chest .beam { background: linear-gradient(90deg, #09090b, #fff 25%, #09090b 50%, #fff 75%, #09090b); background-size: 200% 100%; mix-blend-mode: normal; animation: beam-rise 0.6s ease-out both, wpn-colour-flow 4s linear infinite; }
.loot.w9 .loot-rays { background: radial-gradient(circle at 50% 25%, #09090b 0 7%, transparent 8%), radial-gradient(circle at 50% 75%, #fff 0 7%, transparent 8%), radial-gradient(circle at 50% 25%, #fff 0 25%, transparent 26%), radial-gradient(circle at 50% 75%, #09090b 0 25%, transparent 26%), linear-gradient(90deg, #fff 50%, #09090b 50%); }
.loot.w9 .loot-rays.two { background: repeating-conic-gradient(#fff 0 12deg, #09090b 12deg 24deg); }
.loot.w10 .loot-chest .beam { background: linear-gradient(to top, #facc15, #fff, #60a5fa, #facc15); background-size: 100% 200%; animation: beam-rise 0.6s ease-out both, wpn-pillar 2s linear infinite; }
.loot.w10 .loot-chest .beam::after { width: 20%; background: linear-gradient(to top, #fff, #fff 60%, transparent); }
.loot.w10 .loot-rays { background: conic-gradient(#facc15bb, #ffffffaa, #60a5fabb, #facc15bb); }
.loot.w10 .loot-rays.two { background: repeating-conic-gradient(#facc15dd 0 9deg, transparent 9deg 30deg, #fff 30deg 39deg, transparent 39deg 60deg, #60a5fadd 60deg 69deg, transparent 69deg 90deg); -webkit-mask: radial-gradient(circle, transparent 20%, #000 28% 30%, transparent 31% 44%, #000 45% 48%, transparent 49%); mask: radial-gradient(circle, transparent 20%, #000 28% 30%, transparent 31% 44%, #000 45% 48%, transparent 49%); }
.loot.w11 .loot-chest .beam { background: linear-gradient(to top, #ef4444, #f97316, #facc15, #22c55e, #38bdf8, #4f46e5, #a855f7, #ef4444); background-size: 100% 200%; filter: blur(2px) drop-shadow(0 0 22px #ffffffaa); animation: beam-rise 0.6s ease-out both, wpn-pillar 1.8s linear infinite; }
.loot.w11 .loot-chest .beam::after { width: 24%; height: 100%; background: linear-gradient(to top, #fff, #fff 72%, transparent); filter: drop-shadow(0 0 12px #fff); }
.loot.w11 .loot-rays { background: conic-gradient(#ef4444cc, #f97316cc, #facc15cc, #22c55ecc, #38bdf8cc, #4f46e5cc, #a855f7cc, #ef4444cc); }
.loot.w11 .loot-rays.two { background: repeating-conic-gradient(#ffffffaa 0 5deg, transparent 5deg 20deg); }
.loot:is(.w4, .w5, .w6, .w7, .w8, .w9, .w10, .w11) .loot-tier { background: none; color: var(--w-light); font-size: clamp(36px, 8vw, var(--w-title-size)); text-shadow: 0 0 16px var(--w-a); filter: drop-shadow(0 0 12px var(--w-a)); }
.loot.w7 .loot-tier { background: linear-gradient(90deg, #93c5fd, #fde047, #93c5fd); }
.loot.w8 .loot-tier { background: linear-gradient(90deg, #d8b4fe, #86efac, #d8b4fe); }
.loot.w9 .loot-tier { color: #fff; text-shadow: 2px 2px 0 #09090b, 0 0 18px #fff; }
.loot.w10 .loot-tier { background: linear-gradient(90deg, #fde047, #fff, #93c5fd, #fde047); }
.loot.w11 .loot-tier { background: linear-gradient(90deg, #fda4af, #fdba74, #fde047, #86efac, #7dd3fc, #a5b4fc, #d8b4fe, #fda4af); }
.loot:is(.w7, .w8, .w10, .w11) .loot-tier { background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; animation: unlock-pop 0.6s 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) both, wpn-colour-flow 2.4s linear infinite; }
.loot:is(.w7, .w8, .w9, .w10, .w11) .loot-flash { background: radial-gradient(circle, #fff, var(--w-a) 65%, transparent); animation: wpn-loot-flash 1.9s 0.45s both; }
@keyframes wpn-loot-flash { 0% { opacity: 0; } 8% { opacity: 0.85; } 35% { opacity: 0; } 60% { opacity: 0.55; } 100% { opacity: 0; } }
.loot-items, .loot-row { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.loot.many .loot-items { max-height: 46vh; overflow-y: auto; gap: 10px; }
.loot.many .loot-card { width: 104px; padding: 10px 6px; }
.loot.many .loot-icon { width: 56px; height: 56px; }
.loot.many .loot-card img { width: 60px; height: 60px; }
.loot-card { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 132px; padding: 16px 10px; border-radius: 22px; background: rgba(15, 23, 42, 0.94); color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3); animation: loot-pop 0.6s 0.55s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.loot-card + .loot-card { animation-delay: 0.8s; }
.loot-card.r1 { box-shadow: 0 0 0 3px #3b82f6, 0 0 28px #3b82f6; }
.loot-card.r2 { box-shadow: 0 0 0 3px #a855f7, 0 0 32px #a855f7; }
.loot-card.r3 { box-shadow: 0 0 0 4px #facc15, 0 0 40px #facc15; }
.loot-card.r4 { box-shadow: 0 0 0 4px #fff, 0 0 0 8px #a855f7, 0 0 50px #ec4899, 0 0 90px #facc15; }
.loot-card.coin { box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.6); }
.loot-icon { display: grid; place-items: center; width: 76px; height: 76px; }
.loot-icon svg { width: 100%; height: 100%; }
.loot-icon.pi, .loot-icon.item { padding: 14px; border-radius: 20px; background: linear-gradient(135deg, #f43f5e, #f59e0b, #22c55e, #3b82f6, #a855f7); color: #fff; }
.loot-icon.item { background: var(--brand); }
.loot-card img { width: 84px; height: 84px; }
.loot-card b { color: #fde047; font-size: 28px; font-weight: 900; }
.loot-card small { color: #e2e8f0; font-size: 15px; font-weight: 800; text-align: center; }
.loot-card.owned .loot-icon, .loot-card.owned img { filter: grayscale(0.7) brightness(0.75); }
/* A look new to the player: said so, and a button wears it. */
.loot-new { padding: 2px 10px; border-radius: 999px; background: linear-gradient(90deg, #ec4899, #f59e0b); color: #fff; font-size: 14px; font-weight: 900; white-space: nowrap; }
.loot-card .loot-wear { margin-top: 4px; padding: 10px 8px; font-size: 18px; }
.loot-worn { color: #4ade80; font-size: 16px; font-style: normal; font-weight: 900; }
.loot-row .loot-new { padding: 1px 6px; font-size: 11px; }
.loot-row .loot-card .loot-wear { padding: 6px 4px; font-size: 14px; }
.loot-row .loot-worn { color: #16a34a; font-size: 13px; }
.loot-worth { display: flex; align-items: center; gap: 4px; color: #fde047; font-size: 18px; font-style: normal; font-weight: 900; }
.loot-worth svg { width: 22px; height: 22px; }
/* A look owned already: stamped, and what it turned into said big under the cards (lootDupes). */
.loot-stamp { position: absolute; top: 26px; left: 50%; padding: 2px 10px; border: 3px solid #f43f5e; border-radius: 10px; color: #f43f5e; background: rgba(255, 255, 255, 0.9); font-size: 18px; font-weight: 900; letter-spacing: 2px; white-space: nowrap; transform: translateX(-50%) rotate(-14deg); animation: stamp-in 0.4s 1.1s cubic-bezier(0.2, 1.6, 0.4, 1) both; pointer-events: none; }
@keyframes stamp-in { from { opacity: 0; transform: translateX(-50%) rotate(-14deg) scale(2.2); } }
.loot-row .loot-stamp { top: 12px; padding: 0 5px; border-width: 2px; font-size: 11px; letter-spacing: 0; animation: none; }
.loot-dupe { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 340px; padding: 14px 18px; border-radius: 22px; background: rgba(250, 204, 21, 0.14); box-shadow: 0 0 0 3px #facc15; text-align: center; animation: loot-pop 0.6s 0.9s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.loot-dupe-say { margin: 0; color: #fff; font-size: 22px; font-weight: 900; line-height: 1.4; }
.loot-coins { display: inline-flex; align-items: center; gap: 4px; color: #fde047; white-space: nowrap; }
.loot-coins svg { width: 28px; height: 28px; }
.loot-count { font-size: 32px; font-variant-numeric: tabular-nums; }
.loot-count.done { animation: unlock-pop 0.4s cubic-bezier(0.2, 1.6, 0.4, 1); }
.loot-dupe-save { margin: 0; color: #fde68a; font-size: 18px; font-weight: 800; }
.loot-shop { padding: 12px 22px; font-size: 20px; }
/* Under a game's chests: how many more until a sure new look (pityLine). */
.chest-pity { margin: 6px 0 0; color: #ca8a04; font-size: 15px; font-weight: 900; text-align: center; }
.chest-room .chest-pity { color: #fde047; font-size: 18px; }
.loot-tap { position: relative; margin: 0; color: rgba(255, 255, 255, 0.75); font-size: 16px; animation: fade-in 0.3s 1.3s both; }
/* After the show, the result keeps a small row of what came out. */
.loot-row .loot-card { width: 96px; padding: 10px 6px; animation: none; background: var(--bg); color: var(--ink); }
.loot-row .loot-icon { width: 48px; height: 48px; }
.loot-row .loot-icon.pi, .loot-row .loot-icon.item { padding: 9px; border-radius: 14px; }
.loot-row .loot-card img { width: 52px; height: 52px; }
.loot-row .loot-card b { color: #ca8a04; font-size: 20px; }
.loot-row .loot-card small { color: var(--ink); font-size: 13px; }
@keyframes prize-spin { to { transform: rotate(1turn); } }
@keyframes loot-chest { 0% { transform: scale(0.3); } 55% { transform: scale(1.3) rotate(-8deg); } 100% { transform: none; } }
@keyframes loot-pop { 0% { opacity: 0; transform: translateY(60px) scale(0.3); } 100% { opacity: 1; transform: none; } }
@keyframes loot-flash { 0% { opacity: 0.85; } 100% { opacity: 0; } }
@keyframes loot-shake { 25% { transform: translate(-8px, 4px); } 50% { transform: translate(6px, -6px); } 75% { transform: translate(-4px, -3px); } }
@media (prefers-reduced-motion: reduce) {
  .loot, .loot-rays, .loot-flash, .loot-chest, .loot-card, .loot-tier, .loot-tap, .loot-chest .beam, .loot-chest .beam::after, .raid-chest-big::before, .raid-chest-big::after { animation: none; }
  .loot-flash { display: none; }
}
@keyframes chest-beg { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(-7deg) translateY(-4px); } 86% { transform: rotate(7deg) translateY(-4px); } 94% { transform: rotate(-3deg); } }
@keyframes chest-knock { 0% { transform: scale(1); } 35% { transform: scale(1.18, 0.86) translateY(6px); } 70% { transform: scale(0.94, 1.1) translateY(-14px); } 100% { transform: scale(1); } }
.raid-chest-big.tier0 { filter: sepia(0.7) saturate(1.4); }
.raid-chest-big.tier1 { filter: grayscale(1) brightness(1.3); }
.raid-chest-big.tier2 { filter: saturate(2.2) brightness(1.25) drop-shadow(0 0 14px #facc15); }
.raid-chest-big.tier3 { filter: hue-rotate(170deg) saturate(1.6) drop-shadow(0 0 16px #7dd3fc); }
/* A result's chest: dark until the server answers, then in its rarity's colours and glow. */
.raid-chest-big.pending svg { filter: brightness(0.3) saturate(0); }
.raid-chest-big.lit svg { animation: chest-lit 0.5s ease-out both; }
.raid-chest-big.r1 svg { filter: drop-shadow(0 0 10px #3b82f6); }
.raid-chest-big.r2 svg { filter: drop-shadow(0 0 12px #a855f7); }
.raid-chest-big.r3 svg { filter: drop-shadow(0 0 16px #facc15) drop-shadow(0 0 4px #fff7cc); }
.raid-chest-big.r4 svg { filter: drop-shadow(0 0 10px #ec4899) drop-shadow(0 0 18px #22d3ee); }
.chest-hint.r1 { color: #3b82f6; }
.chest-hint.r2 { color: #a855f7; }
.chest-hint.r3 { color: #ca8a04; }
.chest-hint.r4 { background: linear-gradient(90deg, #ec4899, #a855f7, #06b6d4); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes chest-lit { 0% { transform: scale(0.7); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .raid-chest-big.lit svg { animation: none; }
}
/* The chests waiting behind a big button in the result (chestRoomAsk), glowing until it is tapped. */
.chest-ask { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 8px auto 0; animation: pop-in 0.5s 0.8s both, chest-ask 1.3s 1.3s ease-in-out infinite; }
.chest-ask svg { flex: none; width: 50px; height: 50px; margin: -12px 0; filter: drop-shadow(0 0 8px rgba(253, 224, 71, 0.85)); }
@keyframes chest-ask { 50% { transform: scale(1.05); box-shadow: 0 0 0 6px rgba(250, 204, 21, 0.3), 0 0 28px rgba(250, 204, 21, 0.75); } }
/* Up a tier in the duel (showTierUp): the old badge shakes and gives way to the new one in a flash. */
.tierup { position: fixed; inset: 0; z-index: 12; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 16px; overflow: hidden; background: radial-gradient(circle at 50% 42%, #4c1d95, #020617 72%); color: #fff; text-align: center; animation: fade-in 0.25s both; }
.tierup .loot-rays { background: repeating-conic-gradient(rgba(250, 204, 21, 0.6) 0 7deg, transparent 7deg 18deg); animation-duration: 7s; }
.tierup-flash { position: absolute; inset: 0; background: #fff; pointer-events: none; animation: tier-flash 0.7s 0.9s both; }
.tierup-badges { position: relative; width: 190px; height: 219px; }
.tierup-badges .duel-badge { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; }
.tierup-badges .duel-badge b { padding: 3px 18px; font-size: 28px; }
.tierup-badges .was { animation: tier-was 0.55s 0.35s ease-in both; }
.tierup-badges .now { filter: drop-shadow(0 0 22px rgba(250, 204, 21, 0.9)); animation: tier-now 0.8s 0.9s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.tierup-title { position: relative; margin: 0; font-size: 50px; font-weight: 900; line-height: 1.1; letter-spacing: 0.06em; background: linear-gradient(180deg, #fde047, #f59e0b 55%, #ea580c); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 #9a3412); animation: stamp 0.6s 1.15s both; }
.tierup-sub { position: relative; max-width: 340px; margin: 0; color: #e9d5ff; font-size: 20px; font-weight: 900; animation: pop-in 0.5s 1.5s both; }
.tierup .loot-tap { animation-delay: 1.9s; }
@keyframes tier-was { 30% { transform: translateX(-6px) rotate(-4deg); } 60% { transform: translateX(6px) rotate(4deg); } 100% { opacity: 0; transform: scale(0.4); } }
@keyframes tier-now { 0% { opacity: 0; transform: scale(0.2) rotate(-25deg); } 60% { opacity: 1; transform: scale(1.25) rotate(6deg); } 100% { transform: none; } }
@keyframes tier-flash { 0%, 100% { opacity: 0; } 15% { opacity: 0.9; } }
@media (prefers-reduced-motion: reduce) {
  .chest-ask, .tierup, .tierup .loot-rays, .tierup-badges .now, .tierup-title, .tierup-sub, .tierup .loot-tap { animation: none; }
  .tierup-flash, .tierup-badges .was { display: none; }
}
.raid-got { color: var(--brand); font-size: 22px; font-weight: 900; }
.guide-boss { position: relative; width: 156px; height: 156px; animation: unlock-pop 0.9s cubic-bezier(0.2, 1.6, 0.4, 1) both, wobble 1.6s 0.9s ease-in-out infinite; }

/* The top three of every online board in gold, silver and bronze. */
.row.podium.p1 { background: linear-gradient(90deg, #fef08a, #fde68a 45%, #fbbf24); color: #713f12; box-shadow: 0 0 14px rgba(250, 204, 21, 0.6); }
.row.podium.p2 { background: linear-gradient(90deg, #f8fafc, #cbd5e1); color: #1e293b; }
.row.podium.p3 { background: linear-gradient(90deg, #ffedd5, #fdba74); color: #7c2d12; }
.row.podium .who small { color: inherit; opacity: 0.8; }
.row.podium .rank { box-shadow: 0 0 0 2px #fff; }
.row.podium.me { box-shadow: inset 0 0 0 3px var(--brand), 0 0 14px rgba(250, 204, 21, 0.5); }
/* A record on the world boss standing, in bars broken (barsChip): a cracked health bar on crimson, the number in gold. */
.bars-chip { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 1px 10px 1px 6px; border-radius: 999px; background: linear-gradient(90deg, #7f1d1d, #dc2626); color: #ffffff; font-size: 13px; font-weight: 800; line-height: 1.3; white-space: nowrap; box-shadow: 0 0 8px rgba(220, 38, 38, 0.45), inset 0 0 0 1px rgba(253, 224, 71, 0.55); }
.bars-chip svg { width: 22px; height: 12px; flex: none; }
.bars-chip em { color: #fde047; font-size: 17px; font-style: normal; font-weight: 900; text-shadow: 0 0 6px rgba(250, 204, 21, 0.8); }
.row.podium .who small:has(.bars-chip) { opacity: 1; }
.raid-feed li small .bars-chip { margin: 2px 0 0; }
/* The world boss boards (stack): the level, the record and the badges in tidy rows; on phones the points go under the
   name, then those. */
.row.stack .who > small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.row.stack .who > small > * { margin-left: 0; }
@media (max-width: 440px) {
  .row.stack { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; column-gap: 10px; row-gap: 2px; }
  .row.stack > .rank, .row.stack > .armed { grid-row: 1 / span 3; }
  .row.stack .who { display: contents; }
  .row.stack .who > b { grid-column: 3; grid-row: 1; }
  .row.stack .num { grid-column: 3; grid-row: 2; font-size: 22px; line-height: 1.15; }
  .row.stack .who > small { grid-column: 3; grid-row: 3; }
}
.cup.cr { background: #fee2e2; color: #991b1b; }
.cup.cv { background: linear-gradient(90deg, #3d1772, #7434d6); color: #f3dfaf; }
.cup.ck { background: linear-gradient(90deg, #450a0a, #b91c1c); color: #fde68a; }
.cup.cd { background: linear-gradient(90deg, #4c0519, #c026d3); color: #fef3c7; }

/* ---- The Boss Tower: a stone tower in the night sky, a boss at every window ---- */
.tower-rule { color: var(--muted); font-size: 15px; }
.tower-view { position: relative; display: flex; flex-direction: column; align-items: center; margin: 0 -20px -20px; padding: 18px 16px 0; background: radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.9) 0 1px, transparent 2px) 0 0 / 70px 90px, radial-gradient(circle at 70% 60%, rgba(254, 240, 138, 0.8) 0 1px, transparent 2px) 0 0 / 110px 130px, linear-gradient(180deg, #1e1b4b, #4c1d95 45%, #9a3412); }
.tw-clouds { position: relative; z-index: 1; display: grid; place-items: center; width: 340px; height: 74px; margin-bottom: -40px; background: radial-gradient(ellipse 60px 30px at 20% 60%, #f5f3ff, transparent 70%), radial-gradient(ellipse 80px 34px at 50% 50%, #ffffff, transparent 70%), radial-gradient(ellipse 60px 28px at 80% 62%, #ede9fe, transparent 70%); }
.tw-clouds b { color: #4c1d95; font-size: 17px; font-weight: 900; text-shadow: 0 0 8px #ffffff; }
.tw-body { display: flex; flex-direction: column; width: 270px; padding: 0 0 4px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 150px); mask-image: linear-gradient(180deg, transparent, #000 150px); background: repeating-linear-gradient(0deg, transparent 0 22px, rgba(0, 0, 0, 0.18) 22px 24px), repeating-linear-gradient(90deg, #78716c 0 46px, #6b6560 46px 48px); box-shadow: inset 6px 0 0 rgba(0, 0, 0, 0.18), inset -6px 0 0 rgba(0, 0, 0, 0.28); }
.tw-floor { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 96px; padding: 10px 16px; border-bottom: 8px solid #44403c; color: #fafaf9; text-align: left; }
.tw-floor.flip { flex-direction: row-reverse; text-align: right; }
.tw-window { position: relative; display: grid; place-items: center; flex: none; width: 74px; height: 80px; border: 4px solid #44403c; border-radius: 37px 37px 6px 6px; background: radial-gradient(circle at 50% 70%, #fde68a, #b45309 80%); box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.5); }
.tw-window img { width: 64px; height: 64px; }
.tw-window b { color: #a8a29e; font-size: 34px; font-weight: 900; }
.tw-floor.done .tw-window { background: radial-gradient(circle at 50% 70%, #57534e, #292524 80%); }
.tw-floor.done .tw-window img { opacity: 0.75; }
.tw-ko { position: absolute; bottom: 4px; padding: 0 6px; border-radius: 6px; background: #ef4444; color: #fff; font-size: 12px; font-style: normal; font-weight: 900; transform: rotate(-8deg); }
.tw-plate { display: flex; flex: 1; flex-direction: column; gap: 2px; }
.tw-plate b { font-size: 20px; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4); }
.tw-plate small { font-size: 15px; font-weight: 800; color: #e7e5e4; white-space: nowrap; }
.tw-lv { font-size: 13px; font-style: normal; font-weight: 800; color: #fde68a; }
.tw-lv.hard { color: #fecaca; text-shadow: 0 0 6px #ef4444; }
.tower-lvnote { color: var(--brand); font-size: 15px; font-weight: 800; }
.tw-chest svg { width: 34px; height: 34px; }
.tw-floor.big .tw-window { border-color: #facc15; box-shadow: 0 0 10px rgba(250, 204, 21, 0.7), inset 0 0 12px rgba(0, 0, 0, 0.5); }
.tw-floor.next { background: linear-gradient(90deg, rgba(220, 38, 38, 0.55), rgba(249, 115, 22, 0.55)); animation: banner-glow 1.6s ease-in-out infinite; }
.tw-floor.next .tw-window { background: radial-gradient(circle at 50% 70%, #fef08a, #f97316 80%); box-shadow: 0 0 18px rgba(253, 224, 71, 0.9), inset 0 0 12px rgba(0, 0, 0, 0.3); }
.tw-floor.next .tw-plate small { padding: 4px 10px; border-radius: 999px; background: #fef08a; color: #9a3412; font-size: 16px; align-self: flex-start; }
.tw-floor.next.flip .tw-plate small { align-self: flex-end; }
.tw-window .tw-me { position: absolute; top: -34px; left: 50%; width: 44px; height: 44px; margin-left: -22px; animation: look-bob 1.6s ease-in-out infinite; }
.tw-floor.next { padding-top: 26px; }
.tw-floor.locked { opacity: 0.55; }
.tw-gate { display: grid; place-items: end center; width: 330px; height: 70px; background: repeating-linear-gradient(90deg, #57534e 0 54px, #44403c 54px 56px); border-radius: 6px 6px 0 0; }
.tw-gate i { width: 60px; height: 56px; border-radius: 30px 30px 0 0; background: #1c1917; box-shadow: inset 0 0 0 4px #78350f; }

/* ---- The shop ---- */
.shop-wallet { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; border-radius: 16px; background: linear-gradient(90deg, #fef9c3, #fde68a); color: #713f12; }
.shop-wallet .coin { width: 30px; height: 30px; }
.shop-wallet b { font-size: 26px; font-variant-numeric: tabular-nums; }
.shop-wallet small { font-size: 16px; font-weight: 800; }
.shop-wallet.guest { flex-direction: column; }
.shop-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.shop-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border-radius: 18px; background: var(--bg); }
/* Rarity by price: rare blue, epic purple, legendary gold. */
.shop-card.r1 { box-shadow: inset 0 0 0 2px #3b82f6; }
.shop-card.r2 { box-shadow: inset 0 0 0 2px #a855f7, 0 0 12px rgba(168, 85, 247, 0.35); }
.shop-card.r3 { box-shadow: inset 0 0 0 3px #facc15, 0 0 16px rgba(250, 204, 21, 0.5); background: linear-gradient(160deg, rgba(250, 204, 21, 0.22), var(--bg) 50%); }
.rare-tag { position: absolute; top: 8px; left: 8px; padding: 1px 8px; border-radius: 999px; background: #64748b; color: #fff; font-size: 12px; font-weight: 800; }
.r1 .rare-tag { background: #3b82f6; }
.r2 .rare-tag { background: #a855f7; }
.r3 .rare-tag { background: linear-gradient(90deg, #f59e0b, #facc15); color: #713f12; }
.shop-card.have { box-shadow: inset 0 0 0 3px #22c55e; }
.shop-card .pi { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: linear-gradient(135deg, #f43f5e, #f59e0b, #22c55e, #3b82f6, #a855f7); color: #fff; }
.shop-card .pi svg { width: 32px; height: 32px; }
.shop-card .item-pi { background: var(--brand); }
.shop-card b { font-size: 17px; }
.shop-card small { color: var(--muted); font-size: 13px; line-height: 1.4; }
.shop-card small.have-n { color: var(--ink); font-weight: 800; }
.shop-card em { margin-top: auto; padding: 8px 12px; color: #16a34a; font-size: 16px; font-style: normal; font-weight: 800; }
.shop-card.look img { width: 88px; height: 88px; animation: look-bob 1.8s ease-in-out infinite; }
/* The palette: a rainbow behind its card's face, and a grid of colours to pick from. */
/* The duel tiers' skins: a heading in each tier's colour, and locked ones greyed with what unlocks them. */
.tier-title { margin-top: 18px; }
.sheet .tier-head { margin: 14px 0 8px; padding: 4px 14px; border-radius: 999px; color: #fff; font-size: 16px; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
.tier-head.t1 { background: linear-gradient(90deg, #1e3a8a, #60a5fa); }
.tier-head.t2 { background: linear-gradient(90deg, #581c87, #c084fc); }
.tier-head.t3 { background: linear-gradient(90deg, #b45309, #facc15); color: #451a03; text-shadow: none; }
.tier-head.t4 { background: linear-gradient(90deg, #3f2a06, #d6a438); }
.tier-head.t5 { background: linear-gradient(90deg, #4c0519, #fb7185); }
.tier-head.t6 { background: linear-gradient(90deg, #000000, #18181b 55%, #ef233c); box-shadow: inset 0 0 0 1.5px #ef233c; }
.tier-head.t7 { background: linear-gradient(90deg, #0b1035, #3b82f6, #facc15); }
.tier-head.t8 { background: linear-gradient(90deg, #6d28d9, #22c55e); }
.tier-head.t9 { background: linear-gradient(90deg, #09090b, #71717a, #09090b); }
.tier-head.t10 { background: linear-gradient(90deg, #1d4ed8, #f59e0b, #1d4ed8); }
.tier-head.t11 { background: linear-gradient(90deg, #ef4444, #facc15, #22c55e, #3b82f6, #a855f7); }
.shop-card.locked img { filter: grayscale(0.75) brightness(0.65); }
.tier-lock { color: var(--muted); font-size: 14px; font-style: normal; font-weight: 800; }
/* The looks only chests hold, under the ones sold: dim, saying where they come from. */
.shop-chest-more { margin-top: 22px; }
.shop-card.chest-only img { filter: grayscale(0.85) brightness(0.7); }
.shop-card.chest-only b { color: var(--muted); }
.shop-card em.chest-tag { color: var(--muted); font-size: 15px; }
/* ---- The duel: its menu card, the lobby with the tier's shield and stars, the search, the VS, the result ---- */
.duel-card[hidden] { display: none; }
.map-duel .duel-card-pic { width: 38px; height: 38px; border-radius: 12px; box-shadow: none; }
.map-duel .duel-card-pic svg { width: 24px; height: 24px; }
.duel-lobby { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
/* The season now, at the top of the lobby and the menu: its key visual over a bar with "Now", its number, name and
   days left (red and pulsing in its last three days). */
.season-now { position: relative; overflow: hidden; width: 100%; border-radius: 18px; background: var(--s2); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--s1) 70%, transparent), 0 10px 22px -12px rgba(0, 0, 0, 0.7); text-align: left; }
.season-now > img { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
.season-now-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 14px 10px; background: linear-gradient(180deg, color-mix(in srgb, var(--s2) 85%, #000), #09070f); }
.season-now-bar span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.season-now-bar small { align-self: flex-start; padding: 1px 10px; border-radius: 999px; background: var(--s1); color: #1c1203; font-size: 13px; font-weight: 900; }
.season-now-bar b { color: #fff; font-size: 26px; font-weight: 900; letter-spacing: 0.04em; line-height: 1.15; }
.season-now-bar em { flex: none; padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); color: #fef3c7; font-size: 15px; font-style: normal; font-weight: 900; }
.season-now.soon .season-now-bar em { background: #ef4444; color: #fff; animation: pulse-btn 1.2s ease-in-out infinite; }
/* The next season, told apart: a smaller card with its own picture, colour, boss and first day. */
.season-coming { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 8px; padding: 8px; border-radius: 16px; background: linear-gradient(120deg, color-mix(in srgb, var(--s2) 80%, #000), #0b0910); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--s1) 55%, transparent); text-align: left; }
.season-coming > img { flex: none; width: 112px; aspect-ratio: 2 / 1; border-radius: 10px; object-fit: cover; }
.season-coming > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.season-coming small { align-self: flex-start; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--s1) 25%, transparent); color: var(--s1); font-size: 12px; font-weight: 900; }
.season-coming b { color: #fff; font-size: 17px; font-weight: 900; }
.season-coming span { color: rgba(255, 255, 255, 0.78); font-size: 13px; font-weight: 700; }
/* The menu's end: the season now and the next one, a tap into the duel. */
.menu-season { display: block; flex: none; margin: 0 0 6px; cursor: pointer; }
:is(.menu-season, .menu-head)[hidden] { display: none; }
.menu-body > .menu-season { grid-column: 1 / -1; justify-self: center; width: min(100%, 600px); }
.menu-season:active { transform: scale(0.98); }
/* One personal panel, first on the menu: the face, rank and equipment, with compact shortcuts. */
.menu-profile { flex: none; grid-column: 1 / -1; width: 100%; border-radius: 20px; background: radial-gradient(120% 140% at 0% 0%, #2a1e09, #110c04 52%, #060402); box-shadow: inset 0 0 0 1px rgba(201, 161, 74, 0.32), 0 10px 24px -14px rgba(120, 82, 14, 0.9); color: #f7f2e8; }
.my-gear { display: flex; flex: none; flex-direction: column; gap: 10px; width: 100%; padding: 12px; border: 0; border-radius: 20px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.my-gear[hidden] { display: none; }
.my-gear:active { transform: scale(0.985); }
.menu-body > .menu-profile { justify-self: center; width: min(100%, 600px); margin-top: 0; }
.menu-body:has(> .menu-profile) > .logo { display: none; }
.gc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gc-tag { color: #e8c97a; font-size: 14px; font-weight: 800; letter-spacing: 0.24em; }
.gc-power { display: flex; align-items: baseline; gap: 8px; }
.gc-power b { color: #fde68a; font-size: 22px; font-weight: 900; line-height: 1.2; }
.gc-power small { color: rgba(247, 242, 232, 0.85); font-size: 13px; font-weight: 800; }
.gc-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gc-slot { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 6px 4px; border-radius: 14px; background: rgba(0, 0, 0, 0.38); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); text-align: center; }
.gc-slot .wpn { width: 40px; height: 40px; margin: 2px 0; }
.gc-slot .gc-face { width: 44px; height: 44px; }
.gc-slot .gear-name { overflow: hidden; max-width: 100%; color: #f7f2e8; font-size: 13px; font-weight: 800; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; animation: none; }
.gc-slot.empty :is(.wpn, .gc-face) { opacity: 0.35; }
.my-gear .gear-name.r1 { color: #93c5fd; }
.my-gear .gear-name.r2 { color: #d8b4fe; }
.my-gear .gear-name.r3 { color: #fcd34d; }
.my-gear .gear-name.r4 { color: #f9a8d4; }
.my-gear :is(.w4, .w5, .w6, .w7, .w8, .w9, .w10, .w11) { --w-ink: var(--w-light); }
.my-gear .w7 { --w-ink-b: #fde047; }
.my-gear .w8 { --w-ink-b: #86efac; }
.my-gear .w10 { --w-ink-b: #93c5fd; }
.my-gear .w11 { --w-rainbow-text: linear-gradient(90deg, #fda4af, #fdba74, #fde047, #86efac, #7dd3fc, #a5b4fc, #d8b4fe, #fda4af); }
.gc-head .go { flex: none; width: 20px; height: 20px; color: rgba(247, 242, 232, 0.5); }
.gc-head .gc-power { margin-left: auto; }
.gc-identity { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; }
.gc-avatar { flex: none; width: 68px; height: 68px; }
.gc-person { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.gc-name { overflow: hidden; font-size: 19px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.gc-level { color: #d4c5a5; font-size: 12px; font-weight: 700; }
.gc-person .gc-power { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; margin: 3px 0 0; }
.gc-person .gc-power b { max-width: 100%; font-size: 18px; overflow-wrap: anywhere; }
.gc-person .gc-power small { font-size: 11px; }
.gc-rank { display: flex; flex: none; flex-direction: column; align-items: center; gap: 1px; }
.gc-rank > small { color: #facc15; font-size: 11px; font-weight: 800; white-space: nowrap; }
.gc-rank .duel-badge { margin: 0; }
.my-gear:focus-visible { outline: 2px solid #fde68a; outline-offset: -3px; }
.gc-better { margin: 0; padding: 4px 0 0; border-top: 1px solid rgba(232, 201, 122, 0.25); color: #fde68a; font-size: 15px; font-weight: 900; text-align: center; text-shadow: 0 0 8px rgba(250, 204, 21, 0.4); animation: pulse-btn 0.9s ease-in-out 3; }
.gc-empty { display: flex; align-items: center; gap: 14px; }
.gc-empty .wpn { flex: none; width: 44px; height: 44px; opacity: 0.4; }
.gc-empty b { font-size: 16px; font-weight: 800; line-height: 1.4; }
/* What the season's end gives the player, under the climb's goals: the badge they would get, and its words. */
.season-end { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 4px; padding: 12px; border-radius: 16px; background: var(--bg); text-align: left; }
.season-end img { flex: none; width: 64px; height: 64px; }
.season-end img.dim { opacity: 0.45; filter: grayscale(0.6); }
.season-end h3 { margin: 0 0 4px; font-size: 16px; letter-spacing: 0.02em; }
.season-end p { margin: 2px 0; font-size: 15px; font-weight: 800; }
/* A season's end (showSeasonEnd): what it gave, and the new season's picture. */
.season-paid { margin: 0; color: #b45309; font-size: 17px; font-weight: 900; }
:root.dark .season-paid { color: #fcd34d; }
.season-over-art { display: block; width: 100%; max-width: 360px; margin: 6px auto 0; border-radius: 14px; }
.badge-card.coming img { opacity: 0.45; filter: grayscale(0.5); }
/* A season's set (seasons.js): its six pieces in a row of three, lit when had (or reached this season), dim with the
   tier each takes; the collection's rows in the season's colours; the set at a season's end. */
.season-pieces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; }
.season-piece { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; padding: 6px 2px; border-radius: 12px; background: var(--bg); text-align: center; }
.season-piece img { width: 52px; height: 52px; }
.season-piece b { color: var(--muted); font-size: 13px; font-weight: 800; line-height: 1.2; }
.season-piece small { color: var(--muted); font-size: 12px; font-weight: 800; }
.season-piece:not(.have) img { opacity: 0.3; filter: grayscale(1); }
.season-piece.have { box-shadow: inset 0 0 0 2px var(--s1, #f59e0b); }
.season-piece.have b { color: var(--ink); }
.season-piece.have small { color: #16a34a; }
.season-piece.king.have { box-shadow: inset 0 0 0 2.5px #facc15, 0 0 10px rgba(250, 204, 21, 0.45); }
.season-end-set { width: 100%; padding: 12px; border-radius: 16px; background: var(--bg); text-align: left; }
.season-end-set h3 { margin: 0 0 8px; font-size: 16px; }
.season-end-set .season-piece { background: var(--card, rgba(127, 127, 127, 0.08)); }
.season-end-set p { margin: 8px 0; font-size: 15px; font-weight: 800; }
.season-end-set button { width: 100%; }
.season-set-got { margin: 4px 0 2px; font-size: 24px; }
.collector-face.season-set-face { width: 180px; height: 180px; }
.unlock-name:has(.season-badge-inline) { display: flex; align-items: center; justify-content: center; gap: 6px; }
.season-badge-inline { width: 44px; height: 44px; }
.season-sets-top { display: flex; justify-content: space-between; align-items: baseline; margin: 4px 0 10px; }
.season-sets-top b { font-size: 18px; }
.season-sets-top span { color: #b45309; font-weight: 900; }
:root.dark .season-sets-top span { color: #fbbf24; }
.season-set { margin: 0 0 12px; padding: 10px; border-radius: 16px; background: linear-gradient(160deg, color-mix(in srgb, var(--s2) 70%, #000), #111); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--s1) 55%, transparent); text-align: left; }
.season-set-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.season-set-head b { display: block; color: #fff; font-size: 17px; }
.season-set-head small { color: var(--s1); font-size: 13px; font-weight: 800; }
.season-set-head button { flex: none; padding: 6px 12px; font-size: 14px; }
.season-set .season-piece { background: rgba(255, 255, 255, 0.05); }
.season-set .season-piece b { color: #a1a1aa; }
.season-set .season-piece.have b { color: #f4f4f5; }
.season-set .season-piece.have small { color: var(--s1); }
.duel-season-new { margin: 0; padding: 8px 14px; border-radius: 14px; background: color-mix(in srgb, #f59e0b 16%, transparent); color: #b45309; font-size: 17px; font-weight: 900; line-height: 1.5; }
:root.dark .duel-season-new { color: #fcd34d; }
.duel-career { margin: -8px 0 0; color: var(--muted); font-size: 13px; }
.duel-boards { display: flex; flex-direction: column; align-self: stretch; gap: 10px; margin-top: 6px; text-align: left; }
.duel-boards h3 { margin: 0; }
.duel-board-box > .muted { margin: 0 0 8px; }
.duel-board-box .gap { margin: 0; text-align: center; }
.duel-rank { margin: 0; font-size: 22px; font-weight: 900; }
.duel-rules { font-size: 14px; }
.duel-stars { display: flex; justify-content: center; gap: 4px; font-size: 30px; line-height: 1; }
.duel-stars i { font-style: normal; color: var(--track, #94a3b8); }
.duel-stars i.on { color: #facc15; text-shadow: 0 0 10px rgba(250, 204, 21, 0.8); }
.duel-king { color: #eab308; font-size: 20px; font-weight: 900; }
.duel-held { margin: 0; color: #b45309; font-size: 17px; font-weight: 900; }
/* A tier's badge (duelBadgeSVG): the shield's art, its name on a ribbon across the bottom, sized for where it is. */
.duel-badge { position: relative; flex: none; width: 84px; height: 97px; margin: 0 auto; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35)); }
.duel-badge.large { width: 124px; height: 143px; }
.duel-badge.small { width: 56px; height: 64px; }
.duel-badge.tiny { width: 38px; height: 44px; filter: none; }
.duel-badge svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.duel-badge b { position: absolute; bottom: 2%; left: 50%; padding: 1px 10px; border-radius: 8px; background: linear-gradient(180deg, #1f2937, #0f172a); box-shadow: inset 0 0 0 1.5px var(--rib, #facc15); color: #fff; font-size: 14px; font-weight: 900; white-space: nowrap; transform: translateX(-50%); }
.duel-badge.large b { padding: 2px 14px; font-size: 19px; }
.duel-badge.small b { padding: 0 6px; border-radius: 6px; font-size: 11px; }
.duel-badge.tiny b { display: none; }
.duel-badge.t0 { --rib: #cbd5e1; }
.duel-badge.t1 { --rib: #60a5fa; }
.duel-badge.t2 { --rib: #c084fc; }
.duel-badge.t3 { --rib: #fde047; }
.duel-badge.t4 { --rib: #d6a438; }
.duel-badge.t5 { --rib: #fb7185; }
.duel-badge.t6 { --rib: #ef233c; }
.duel-badge.t7 { --rib: #93c5fd; }
.duel-badge.t8 { --rib: #4ade80; }
.duel-badge.t9 { --rib: #ffffff; }
.duel-badge.t10 { --rib: #fde68a; }
.duel-badge.t11 { --rib: #f472b6; }
/* What to climb for, in the lobby. */
.duel-goal { margin: 12px 0 4px; padding: 12px; border-radius: 16px; background: var(--bg); text-align: left; }
.duel-goal h3 { margin: 0 0 6px; font-size: 17px; }
.duel-goal p { margin: 4px 0; font-size: 17px; font-weight: 900; }
.duel-goal p b { color: var(--brand); }
.duel-goal ul { margin: 8px 0; padding-left: 20px; color: var(--muted); font-size: 14px; font-weight: 800; line-height: 1.6; }
.duel-ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px 2px; margin-top: 6px; }
.duel-ladder span { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 0; border-radius: 10px; }
.duel-ladder span:not(.past, .on) .duel-badge { opacity: 0.4; filter: grayscale(0.4); }
.duel-ladder span:not(.past, .on) :is(em, small) { opacity: 0.7; }
.duel-ladder span.on { background: color-mix(in srgb, var(--brand) 18%, transparent); box-shadow: inset 0 0 0 2px var(--brand); }
/* Each tier's name in its weapon tier's colours (the gradient ones with the weapons' names below). */
.duel-ladder em { font-size: 14px; font-style: normal; font-weight: 900; line-height: 1.25; white-space: nowrap; }
.duel-ladder em.r0 { color: #64748b; }
.duel-ladder em.r1 { color: #2563eb; }
.duel-ladder em.r2 { color: #9333ea; }
.duel-ladder em.r3 { color: #ca8a04; }
.duel-ladder em:is(.w4, .w5, .w9) { color: var(--w-ink); }
:root.dark .duel-ladder em.r0 { color: #cbd5e1; }
:root.dark .duel-ladder em.r1 { color: #93c5fd; }
:root.dark .duel-ladder em.r2 { color: #d8b4fe; }
:root.dark .duel-ladder em.r3 { color: #fde047; }
.duel-ladder small { color: var(--gold, #ca8a04); font-size: 10px; font-weight: 900; white-space: nowrap; }
/* The duel tier on the player's card on the menu. */
.wardrobe-text small.wardrobe-rank { color: var(--brand); font-size: 14px; font-weight: 800; }
.wardrobe-badge { display: flex; flex: none; flex-direction: column; align-items: center; gap: 2px; }
.wardrobe-badge small { color: #eab308; font-size: 12px; letter-spacing: 1px; white-space: nowrap; }
.duel-search { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px 0; }
.duel-spin { display: grid; place-items: center; width: 120px; height: 120px; border-radius: 50%; background: conic-gradient(#f97316, #db2777, #7c3aed, #f97316); animation: rays 1.2s linear infinite; }
.duel-spin img { width: 96px; height: 96px; border-radius: 50%; background: var(--surface); animation: rays 1.2s linear infinite reverse; }
.duel-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; margin: 8px 0; }
.duel-side { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.duel-side img { width: 92px; height: 92px; animation: look-bob 1.6s ease-in-out infinite; }
.duel-side b { font-size: 18px; }
.duel-side small { color: var(--muted); font-size: 13px; }
.duel-vs-mark { color: #f97316; font-size: 38px; font-weight: 900; text-shadow: 0 0 14px rgba(249, 115, 22, 0.7); animation: hint-pulse 0.9s ease-in-out infinite; }
.duel-up { color: #f97316; font-size: 26px; font-weight: 900; animation: unlock-pop 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.duel-result.lost .unlock-rays { opacity: 0.25; }
/* A result: how the stars moved, big, with why (duelDeltaHTML); the stars won pop in, the one lost goes out. */
.duel-delta { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 2px 0 0; animation: unlock-pop 0.6s 0.35s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.duel-delta b { padding: 2px 20px; border-radius: 999px; font-size: 30px; font-weight: 900; line-height: 1.2; white-space: nowrap; }
.duel-delta span { font-size: 17px; font-weight: 900; }
.duel-delta.up b { background: linear-gradient(180deg, #fde047, #f59e0b); color: #78350f; box-shadow: 0 0 18px rgba(250, 204, 21, 0.75); }
.duel-delta.up span { color: #f59e0b; }
.duel-delta.down b { background: linear-gradient(180deg, #f87171, #b91c1c); color: #ffffff; box-shadow: 0 0 14px rgba(239, 68, 68, 0.5); }
.duel-delta.down span { color: #ef4444; }
.duel-delta.keep b { background: linear-gradient(180deg, #5eead4, #0f766e); color: #ffffff; box-shadow: 0 0 14px rgba(20, 184, 166, 0.5); }
.duel-delta.keep span { color: #14b8a6; }
.duel-togo { margin: 0; font-size: 17px; font-weight: 900; }
.duel-stars i.new { animation: star-in 0.7s 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.duel-stars i.lost { animation: star-out 1.1s 0.6s ease-in both; }
@keyframes star-in { from { opacity: 0; transform: scale(2.6) rotate(-120deg); } }
@keyframes star-out { 0% { color: #facc15; text-shadow: 0 0 10px rgba(250, 204, 21, 0.8); } 35% { color: #facc15; transform: scale(1.35); } 100% { transform: none; } }
body.duel .bag-btn { display: none; }
/* After a win: the player's place and who is around them. */
.rank-strip { display: flex; flex-direction: column; gap: 2px; width: min(320px, 100%); padding: 6px 10px; border-radius: 14px; background: var(--surface); }
.rank-strip[hidden] { display: none; }
.rank-strip .muted, .rank-strip .gap { margin: 0; text-align: center; }
.rank-head { margin: 0; font-size: 16px; font-weight: 900; text-align: center; }
.rank-up { display: inline-block; padding: 1px 8px; border-radius: 999px; background: #16a34a; color: #fff; font-size: 14px; animation: unlock-pop 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.mini-row { display: grid; grid-template-columns: 28px 26px 1fr auto; align-items: center; gap: 6px; padding: 1px 6px; border-radius: 10px; font-size: 14px; }
.mini-row b { text-align: center; }
.mini-row img { width: 26px; height: 26px; }
.mini-row span { overflow: hidden; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.mini-row small { color: var(--muted); font-size: 13px; }
.mini-row.me { background: color-mix(in srgb, var(--brand) 22%, transparent); }
.rank-strip .link { align-self: center; }
.rank-strip[data-board] { cursor: pointer; }
.overlay:has(.rank-strip:not([hidden])) { gap: 10px; }
.shop-card.palette img { border-radius: 50%; background: conic-gradient(#ef4444, #facc15, #22c55e, #06b6d4, #6366f1, #d946ef, #ef4444); }
.palette-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.palette-grid .swatch { display: grid; place-items: center; aspect-ratio: 1; border-radius: 16px; background: var(--surface); box-shadow: inset 0 -6px 0 var(--swatch); }
.palette-grid .swatch img { width: 82%; height: 82%; }
.palette-grid .swatch.on { box-shadow: inset 0 -6px 0 var(--swatch), 0 0 0 4px var(--brand); }
@keyframes look-bob { 50% { transform: translateY(-6px) scale(1.04); } }
.buy, .wear { display: inline-flex; align-items: center; justify-content: center; gap: 4px; width: 100%; margin-top: auto; padding: 10px 8px; border-radius: 999px; background: #facc15; color: #713f12; font-size: 17px; font-weight: 900; box-shadow: 0 3px 0 #ca8a04; }
.buy .coin { width: 20px; height: 20px; }
.buy.sure { background: #f97316; color: #fff; box-shadow: 0 3px 0 #c2410c; }
.buy:disabled { opacity: 0.6; }
.wear { background: #22c55e; color: #fff; box-shadow: 0 3px 0 #15803d; }
.sheet .shop-how { font-size: 14px; }

/* ---- The menus: the main menu, the map and every window (the user's call, 2026-10-14): calm and plain, black (ivory
   in light mode) with deep, saturated jewel colours, dark red and dark gold first; filled icons, never thin lines
   (older players read them badly). The fight keeps its own colours. ---- */
.menu, .map, .modal, #pk-layer {
  --bg: #f3eee3;
  --surface: #fffdf8;
  --soft: #ebe4d4;
  --hair: rgba(80, 56, 20, 0.14);
  --ink: #1c1917;
  --muted: rgba(28, 25, 23, 0.6);
  --au: #9a7010;
  --gold-btn: linear-gradient(180deg, #c99a2e, #8a6410);
  --ruby-btn: linear-gradient(180deg, #a3161f, #5e0b11);
  color: var(--ink);
}
:root.dark :is(.menu, .map, .modal, #pk-layer) {
  --bg: #09090b;
  --surface: #141416;
  --soft: #1d1d21;
  --hair: rgba(255, 255, 255, 0.08);
  --ink: #f4f1ea;
  --muted: rgba(244, 241, 234, 0.58);
  --au: #c9a14a;
}
:is(.menu, .map) .map-top .icon-btn { border-radius: 14px; background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair); }
/* The mail, lit up in gold while letters wait (the user's call: it matters most). */
:is(.menu, .map) .map-top .icon-btn.has-mail { background: linear-gradient(180deg, #8f6716, #5c420b); color: #fde9a6; box-shadow: inset 0 0 0 1px rgba(232, 201, 122, 0.55), 0 0 12px rgba(232, 180, 60, 0.4); }
:is(.menu, .map) .map-top .icon-btn.has-mail .icon-label { color: #fde9a6; }
:is(.menu, .map) .icon-label { color: var(--muted); font-weight: 700; }
:is(.menu, .map) .me-chip { background: var(--surface); box-shadow: inset 0 0 0 1px var(--hair); }
.lv-badge { background: linear-gradient(180deg, #e8c97a, #b0821e); color: #2b1d00; }
:is(.menu, .map) .title-pill:not(.brag) { background: none; color: var(--tc, #94a3b8); box-shadow: inset 0 0 0 1px var(--tc, #94a3b8); }

.menu-body { flex: 1; display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 520px; margin: 0 auto; padding: 4px 16px 12px; overflow-x: hidden; overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; }
.menu-body > :first-child { margin-top: auto; }
.menu-body > :last-child { margin-bottom: auto; }
.logo { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 4px 0 8px; }
.logo-jellies { display: flex; gap: 6px; }
.logo-jellies img { width: 22px; height: 22px; }
.logo h1 { font-size: 30px; font-weight: 800; letter-spacing: 0.16em; }
.logo h1::after { content: ""; display: block; width: 40px; height: 2px; margin: 10px auto 0; border-radius: 2px; background: var(--au); }
/* Each part under a small gold heading with a hairline. */
.menu-head { display: flex; align-items: center; gap: 10px; margin: 8px 2px 0; color: var(--au); font-size: 14px; font-weight: 800; letter-spacing: 0.2em; }
.menu-head::after { content: ""; flex: 1; height: 1px; background: var(--hair); }

/* The two best: dark cards in every theme, the world boss in dark red, the duel in deep purple, edged in gold. */
.feature { position: relative; display: flex; flex: none; align-items: center; gap: 14px; width: 100%; min-height: 104px; padding: 14px; overflow: hidden; border-radius: 20px; color: #f7f2e8; text-align: left; }
.feature:active { transform: scale(0.985); }
.feature .go { flex: none; width: 22px; height: 22px; color: rgba(247, 242, 232, 0.5); }
.raid-card { background: radial-gradient(120% 140% at 0% 50%, #3c0a10, #1a0508 48%, #0a0203); box-shadow: inset 0 0 0 1px rgba(201, 161, 74, 0.38), 0 10px 24px -14px rgba(100, 18, 26, 0.9); }
.raid-pic { flex: none; width: 76px; height: 76px; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.55)); }
/* A legendary chest on the world boss's picture (the user's call): any try may open one. */
.raid-pic-wrap { position: relative; flex: none; display: block; }
.raid-legend { position: absolute; inset: 0; pointer-events: none; }
.raid-legend svg { position: absolute; right: -8px; bottom: 8px; width: 38px; height: 38px; filter: drop-shadow(0 0 7px rgba(250, 204, 21, 0.95)); animation: legend-bob 1.6s ease-in-out infinite; }
/* Long rays of light turning behind it, and a beam shooting up from it (the user's call: glowing lines draw the eye). */
.raid-legend .legend-rays { position: absolute; left: 10px; top: -6px; width: 110px; height: 110px; border-radius: 50%; background: repeating-conic-gradient(rgba(253, 224, 71, 0.55) 0deg 5deg, rgba(253, 224, 71, 0) 5deg 24deg); -webkit-mask: radial-gradient(circle, #000 12%, rgba(0, 0, 0, 0.6) 35%, transparent 68%); mask: radial-gradient(circle, #000 12%, rgba(0, 0, 0, 0.6) 35%, transparent 68%); mix-blend-mode: screen; animation: legend-spin 7s linear infinite; }
.raid-legend .legend-beam { position: absolute; left: 57px; top: -40px; width: 16px; height: 92px; border-radius: 8px 8px 0 0; background: linear-gradient(to top, rgba(253, 224, 71, 0.6), rgba(253, 224, 71, 0.3) 45%, transparent); filter: blur(3px); mix-blend-mode: screen; transform-origin: 50% 100%; animation: legend-beam 1.4s ease-in-out infinite; }
.raid-legend .legend-beam::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 4px; height: 100%; background: linear-gradient(to top, #ffffff, transparent 85%); transform: translateX(-50%); }
@keyframes legend-spin { to { transform: rotate(360deg); } }
@keyframes legend-beam { 50% { opacity: 0.55; transform: scaleY(0.82); } }
.raid-legend b { position: absolute; left: 50%; bottom: -9px; padding: 1px 8px; border-radius: 999px; background: linear-gradient(180deg, #fde68a, #d97706); color: #451a03; font-size: 11px; font-weight: 900; white-space: nowrap; transform: translateX(-50%); box-shadow: 0 0 10px rgba(250, 204, 21, 0.6); }
@keyframes legend-bob { 50% { transform: translateY(-3px) rotate(-6deg); } }
/* The thanks for a boss that fell: the last blow and the top three in cards, then everyone. */
.raid-thanks { width: 100%; text-align: left; }
.raid-thanks h3 { margin: 10px 0 8px; text-align: center; }
.thanks-heroes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.thanks-hero { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 10px 6px; border-radius: 16px; background: var(--bg); text-align: center; }
.thanks-hero img { width: 54px; height: 54px; }
.thanks-hero b { max-width: 100%; overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.thanks-hero small, .thanks-rows small { color: var(--muted); font-size: 12px; font-weight: 700; }
.thanks-hero .tag { padding: 1px 9px; border-radius: 999px; background: #64748b; color: #ffffff; font-size: 12px; font-weight: 900; }
.thanks-hero.last { box-shadow: inset 0 0 0 2px #f97316; }
.thanks-hero.last .tag { background: linear-gradient(90deg, #dc2626, #f97316); }
.thanks-hero.t1 .tag { background: linear-gradient(90deg, #ca8a04, #facc15); color: #422006; }
.thanks-hero.t2 .tag { background: linear-gradient(90deg, #64748b, #cbd5e1); color: #0f172a; }
.thanks-hero.t3 .tag { background: linear-gradient(90deg, #9a3412, #fb923c); }
.thanks-rows { max-height: 280px; margin-top: 8px; overflow-y: auto; }
.thanks-rows .row { gap: 8px; padding: 6px 10px 6px 6px; font-size: 16px; }
.thanks-rows .row img { width: 36px; height: 36px; }
.thanks-rows .rank { flex: none; width: 26px; color: var(--muted); font-weight: 900; text-align: center; }
.raid-thanks small { white-space: nowrap; }
.raid-thanks small svg { display: inline-block; width: 14px; height: 14px; margin: 0 1px; vertical-align: -2px; }
.raid-legend-line { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 6px 0 0; color: #b45309; font-size: 15px; font-weight: 900; }
.raid-legend-line svg { flex: none; width: 30px; height: 30px; filter: drop-shadow(0 0 6px rgba(250, 204, 21, 0.9)); }
.raid-text { display: flex; flex: 1; flex-direction: column; gap: 5px; min-width: 0; }
.raid-text b { font-size: 21px; font-weight: 800; letter-spacing: 0.04em; }
.raid-text small { color: rgba(247, 242, 232, 0.7); font-size: 14px; font-weight: 600; }
.raid-text small.raid-goal { color: #e6c35c; font-weight: 800; }
/* The duel card's season line, in the season's colour; red in its last three days. */
.raid-text small.duel-season-line { overflow: hidden; color: var(--s1, #fde68a); font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.raid-text small.duel-season-line.soon { color: #fca5a5; font-weight: 900; }
.raid-goal b { font-size: 16px; letter-spacing: 0; }
/* A card's strongest player: only a decoration, small (the user's call: a tap on the card plays): on the world boss's a
   line with their face, on the duel's their face on the right with their badge. */
.raid-text small.raid-champ { display: flex; align-items: center; gap: 6px; color: #fef3c7; font-weight: 800; }
.raid-champ[hidden] { display: none !important; }
.raid-champ img { width: 30px; height: 30px; }
.raid-champ b { color: #facc15; font-size: 15px; }
.raid-champ .champ-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.duel-champ { position: relative; display: flex; flex: none; flex-direction: column; align-items: center; gap: 1px; }
.duel-champ[hidden] { display: none; }
.duel-champ img { width: 46px; height: 46px; }
.duel-champ .duel-badge { position: absolute; top: 24px; right: -9px; width: 22px; height: 25px; }
.duel-champ small { color: #e8c97a; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; }
.raid-goal i { display: inline-block; padding: 1px 8px; border-radius: 999px; background: rgba(250, 204, 21, 0.18); font-size: 12px; font-style: normal; white-space: nowrap; }
.feature .raid-tag { padding: 0; background: none; color: #e8c97a !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: 0.24em; }
.feature .raid-track { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); }
.feature .raid-track i { border-radius: 3px; background: linear-gradient(90deg, #a3161f, #d9a84a); }
.duel-card { background: radial-gradient(120% 140% at 0% 50%, #251048, #110722 48%, #07040d); box-shadow: inset 0 0 0 1px rgba(201, 161, 74, 0.38), 0 10px 24px -14px rgba(61, 23, 114, 0.9); }
.duel-card-pic { display: grid; place-items: center; flex: none; width: 76px; height: 76px; border-radius: 22px; background: linear-gradient(160deg, #5a2aa6, #2c0d5c); color: #f3dfaf; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 6px 14px rgba(0, 0, 0, 0.45); }
.duel-card-pic svg { width: 40px; height: 40px; }
.duel-card .new-tag { position: absolute; top: 10px; right: 12px; }
/* The levels (the user's call: players could not find them): a card as big as the world boss's and the duel's, a big
   button straight into the next level and a small one to the map; a new player's glows softly, with "Start here!". */
.levels-card { background: radial-gradient(120% 140% at 0% 50%, #093624, #041c12 48%, #020a06); box-shadow: inset 0 0 0 1px rgba(201, 161, 74, 0.38), 0 10px 24px -14px rgba(15, 92, 61, 0.9); }
.levels-card, .daily-card { cursor: pointer; }
/* Today's challenge, as wide as the others (the user's call): today's boss, the theme, the player's best today and
   today's first; a tap anywhere starts it, its small button shows the prizes. */
.daily-card { background: radial-gradient(120% 140% at 0% 50%, #4a2309, #200e03 48%, #0b0401); box-shadow: inset 0 0 0 1px rgba(201, 161, 74, 0.38), 0 10px 24px -14px rgba(122, 58, 14, 0.9); }
.daily-pic { display: grid; place-items: center; flex: none; width: 76px; height: 76px; }
.daily-pic img { width: 76px; height: 76px; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.55)); }
.daily-card #daily-theme { color: #e6c35c; font-size: 16px; font-weight: 800; }
.raid-text small.daily-mine { color: #fef3c7; font-weight: 700; }
/* Today's first in full, on two lines when it must (an older player reads it all). */
.levels-pic { display: grid; place-items: center; flex: none; width: 76px; height: 76px; border-radius: 22px; background: linear-gradient(160deg, #178257, #083d28); color: #e3f7ec; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.levels-pic svg { width: 40px; height: 40px; }
.levels-card #levels-sub { color: #e6c35c; font-size: 16px; font-weight: 800; }
/* The best on the levels' and today's challenge's cards (the user's call: bigger, in the room on the right). */
.card-champ { display: flex; flex: none; flex-direction: column; align-items: center; gap: 1px; width: 64px; text-align: center; }
.levels-card, .daily-card { gap: 10px; }
.card-champ[hidden] { display: none; }
.card-champ > small { color: #e8c97a; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; white-space: nowrap; }
.card-champ img { width: 46px; height: 46px; }
.card-champ .champ-name { display: flex; flex-direction: column; width: 100%; }
.card-champ .champ-name i { overflow: hidden; color: #fef3c7; font-size: 12px; font-style: normal; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.card-champ .champ-name em { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: #e6c35c; font-size: 12px; font-style: normal; font-weight: 800; line-height: 1.3; }
.feature .part { display: inline-block; }
.card-champ .champ-name b { font-size: 15px; }
.levels-card.start .card-champ { margin-top: 24px; }
.levels-here { display: none; position: absolute; top: 10px; right: 12px; padding: 2px 10px; border-radius: 999px; background: rgba(232, 201, 122, 0.18); box-shadow: inset 0 0 0 1px rgba(232, 201, 122, 0.5); color: #f0d98c; font-size: 14px; font-weight: 900; }
.levels-card.start .levels-here { display: block; }
.levels-card.start { box-shadow: inset 0 0 0 1.5px rgba(232, 201, 122, 0.65), 0 0 14px rgba(250, 204, 21, 0.14); }
@media (prefers-reduced-motion: no-preference) {
  .levels-card.start { animation: levels-glow 2.4s ease-in-out infinite alternate; }
}
@keyframes levels-glow { to { box-shadow: inset 0 0 0 1.5px #e8c97a, 0 0 20px rgba(250, 204, 21, 0.26); } }
.map-bottom { flex-direction: column; align-items: center; gap: 2px; }
.map-share { padding: 6px 12px; font-size: 16px; font-weight: 700; }
/* The levels' strongest on the map (the user's call): a slim line over it, and their face by their level, decorations
   only, off the level buttons. */
.map-champ { display: flex; flex: none; align-self: center; align-items: center; gap: 8px; width: calc(100% - 24px); max-width: 496px; min-width: 0; margin: 8px auto 0; padding: 6px 12px 6px 6px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--hair); color: var(--ink); font-size: 15px; font-weight: 700; pointer-events: none; }
.map-champ[hidden] { display: none; }
.map-champ img { width: 30px; height: 30px; }
.map-champ b { color: #b8860b; }
.map-champ .champ-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.champ-flag { position: absolute; top: -18px; left: -20px; z-index: 1; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3)); }
.champ-flag img { width: 34px; height: 34px; }
/* What pays more right now (the day's first duel win, the world boss's golden hours): a gold tag on its card. */
.boost-tag { position: absolute; top: 10px; right: 12px; padding: 2px 9px; border-radius: 999px; background: linear-gradient(180deg, #f3d98b, #c99a3a); color: #2a1606; font-size: 12px; font-weight: 900; letter-spacing: 0.04em; box-shadow: 0 0 12px rgba(232, 201, 122, 0.55); animation: boost-glow 1.6s ease-in-out infinite; }
.boost-tag[hidden] { display: none; }
@keyframes boost-glow { 50% { box-shadow: 0 0 20px rgba(232, 201, 122, 0.9); transform: scale(1.06); } }
.duel-first { margin: 0; color: #e8c97a; font-size: 18px; font-weight: 900; }
/* After a duel or a world boss try, the other one, in its card's colours (the user's call: players try both). */
.cross-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; margin-top: 4px; padding: 13px 16px; border: 0; border-radius: 16px; color: #f7f2e8; font: inherit; font-size: 19px; font-weight: 900; letter-spacing: 0.04em; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(201, 161, 74, 0.45); }
.cross-btn[hidden] { display: none; }
.cross-btn.raid { background: radial-gradient(120% 140% at 0% 50%, #64121a, #2a080c 48%, #120406); }
.cross-btn.duel { background: radial-gradient(120% 140% at 0% 50%, #3d1772, #1c0b36 48%, #0c0617); }
.cross-btn small { color: #e8c97a; font-size: 13px; font-weight: 800; }
/* What the big button offers today: its card ringed in gold. */
.feature.pick { box-shadow: inset 0 0 0 1.5px rgba(232, 201, 122, 0.7), 0 0 0 3px rgba(201, 161, 74, 0.14), 0 12px 28px -14px rgba(201, 161, 74, 0.35); }

/* The tiles: a jewel-coloured square with a filled icon, the name, a line under it. */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 3px; min-width: 0; min-height: 124px; padding: 14px; overflow: hidden; border-radius: 20px; background: var(--surface); text-align: left; box-shadow: inset 0 0 0 1px var(--hair); }
.tile:active { transform: scale(0.98); }
.tile > b { margin-top: 10px; font-size: 18px; font-weight: 800; line-height: 1.25; }
.tile > small { color: var(--muted); font-size: 14px; font-weight: 600; line-height: 1.35; }
.tile .new-tag { position: absolute; top: 12px; right: 12px; }
.tile .go { flex: none; width: 20px; height: 20px; color: var(--muted); }
.mode-pic { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(160deg, var(--j1, #57534e), var(--j2, #292524)); color: var(--jt, #fff); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 5px 12px -6px var(--j2, #292524); }
.mode-pic svg { width: 26px; height: 26px; }
.t-shop { --j1: #bd8e1e; --j2: #684a06; --jt: #fff4d6; }
.t-rank { --j1: #2452bd; --j2: #13295f; --jt: #dfe9ff; }
.t-codex { --j1: #a71f52; --j2: #56102a; --jt: #fde4ee; }
.t-shop > small { color: var(--au); font-weight: 800; }
/* Until the player joins, the rankings tile is an invitation, edged in gold. */
.rank-tile:not(.joined) { background: linear-gradient(160deg, rgba(201, 161, 74, 0.16), var(--surface) 62%); box-shadow: inset 0 0 0 1.5px var(--au); }
.tile.wardrobe-tile { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 10px; min-height: 0; padding: 12px 12px 12px 14px; }
.wardrobe-pic { position: relative; flex: none; width: 66px; height: 66px; }
.wardrobe-face { width: 76px; height: 76px; }
.wardrobe-wpn { position: absolute; right: -12px; bottom: -4px; width: 40px; height: 40px; }
.wardrobe-wpn.left { right: auto; left: -12px; transform: scaleX(-1); }
.wardrobe-text { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.wardrobe-text b { font-size: 19px; font-weight: 800; }
.wardrobe-text small { color: var(--muted); font-size: 14px; font-weight: 600; }
/* Keep personal destinations together without a second wardrobe card or explanatory subtitles. */
.menu-profile .profile-tools { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; padding: 8px 6px 10px; border-top: 1px solid rgba(232, 201, 122, 0.18); }
.menu-profile .profile-tools > .tile { display: flex; grid-column: auto; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 62px; padding: 5px 1px; border-radius: 10px; background: transparent; box-shadow: none; color: #e8ddc3; text-align: center; }
.menu-profile .profile-tools > .tile:hover, .menu-profile .profile-tools > .tile:focus-visible { background: rgba(232, 201, 122, 0.09); }
.menu-profile .profile-tools :is(.mode-pic, .lv-medal, .badge-tile-pic) { flex: none; width: 28px; height: 28px; margin: 0; border-radius: 8px; }
.menu-profile .profile-tools .mode-pic svg { width: 19px; height: 19px; }
.menu-profile .profile-tools :is(.tile > b, .wardrobe-text b) { margin: 0; color: inherit; font-size: 12px; font-weight: 800; line-height: 1.3; white-space: nowrap; }
.menu-profile .profile-tools .wardrobe-text { flex: none; align-items: center; gap: 0; }
.menu-profile .profile-tools .lv-medal b { font-size: 13px; }
.menu-profile .profile-tools :is(.tile > small, .wardrobe-text small, .lv-track, .new-tag, .go, .lv-medal small) { display: none; }
.menu-body > .menu-profile:first-child { margin-top: 0; }
@media (max-width: 350px) {
  .gc-avatar { width: 54px; height: 54px; }
  .gc-identity { gap: 6px; }
  .gc-name { font-size: 17px; }
  .gc-person .gc-power b { font-size: 16px; }
  .menu-profile .profile-tools :is(.tile > b, .wardrobe-text b) { font-size: 11px; }
  .menu-profile .profile-tools .t-codex > b { font-size: 10px; }
}
.lv-tile .lv-medal { width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(160deg, #dcb45c, #8a6410); color: #2b1d00; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 5px 12px -6px #8a6410; }
.lv-tile .lv-medal small { font-size: 10px; }
.lv-tile .lv-medal b { font-size: 19px; }
.lv-tile .lv-medal b.long { font-size: 14px; }
.lv-tile .lv-track { width: 100%; height: 6px; margin-top: 6px; border-radius: 3px; background: var(--soft); }
.lv-tile .lv-track i { background: linear-gradient(90deg, #8a6410, #e8c97a); }
/* Places players never found: a dark red NEW tag and a red edge until they try them. */
.fresh .new-tag { background: #a3161f; color: #fff3d6; animation: none; }
.tile.fresh, .duel-card.fresh:not(.pick) { box-shadow: inset 0 0 0 1.5px #b3242d; }

/* The big button: dark gold, or the colour of what it offers. */
:is(.menu, .map) .big { border-radius: 18px; padding: 17px 24px; background: var(--gold-btn); color: #fff8e6; font-size: 21px; font-weight: 800; letter-spacing: 0.08em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 12px 26px -14px rgba(138, 100, 16, 0.95); }
:is(.menu, .map) .big:active { transform: scale(0.98); }
.big.pick-raid { background: var(--ruby-btn); box-shadow: inset 0 0 0 1px rgba(232, 201, 122, 0.55), 0 12px 26px -14px rgba(163, 22, 31, 0.95); }
.big.pick-duel { background: linear-gradient(180deg, #5f25b8, #2e1065); box-shadow: inset 0 0 0 1px rgba(232, 201, 122, 0.55), 0 12px 26px -14px rgba(95, 37, 184, 0.95); }

/* The map's bar and shortcuts in the same colours. */
.map .daily-bar { background: var(--surface); box-shadow: inset 0 0 0 1px var(--hair); }
.map-raid { background: radial-gradient(120% 140% at 0% 50%, #64121a, #2a080c 55%, #120406); box-shadow: inset 0 0 0 1px rgba(201, 161, 74, 0.38); animation: none; }
.map-duel { background: radial-gradient(120% 140% at 0% 50%, #3d1772, #1c0b36 55%, #0c0617); color: #f7f2e8; box-shadow: inset 0 0 0 1px rgba(201, 161, 74, 0.38); }
.map-tower { background: var(--surface); box-shadow: inset 0 0 0 1px var(--hair); }

/* Windows: a quiet sheet, gold headings, tabs as one segmented bar with the chosen one in dark gold. */
.modal { background: rgba(0, 0, 0, 0.62); }
.sheet { border-radius: 26px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--hair), 0 24px 60px -20px rgba(0, 0, 0, 0.6); }
.sheet h2 { font-size: 23px; font-weight: 800; letter-spacing: 0.1em; }
.sheet h3 { color: var(--au); font-size: 14px; font-weight: 800; letter-spacing: 0.18em; }
.x-btn { top: 12px; right: 12px; width: 40px; height: 40px; background: var(--soft); }
/* The main menu, top left of a window (homeBtn), and the close button: both as tall as the menu's and the map's
   buttons, in their shape, level with the title (the user: sizes the same wherever they can be, widths by the words). */
.home-btn { position: absolute; top: 16px; left: 12px; z-index: 1; border-radius: 14px; background: var(--soft); color: var(--ink); }
.home-btn .icon-label { color: var(--muted); font-weight: 700; }
.sheet .x-btn { top: 16px; width: 48px; height: 48px; border-radius: 14px; }
.sheet h2 { padding-inline: 44px; }
.sheet:has(> .home-btn) > h2 { padding-inline: 62px; }
:is(.raid-room, .daily-room):has(> .home-btn) .raid-hero .raid-tag { top: 72px; left: 12px; }
.chips { padding: 4px; border-radius: 16px; background: var(--soft); gap: 4px; }
.chip { min-height: 42px; border-radius: 12px; background: none; color: var(--muted); font-weight: 700; }
.chip.on { background: var(--gold-btn); color: #fff8e6; box-shadow: 0 4px 10px -6px rgba(138, 100, 16, 0.95); }
.chips.sub .chip.on { background: var(--ruby-btn); }
.chips:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
.chips:has(> :nth-child(3):last-child), .chips:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, 1fr); }
.chips:has(> :nth-child(5):last-child) { grid-template-columns: repeat(5, 1fr); }
.sheet .primary { border-radius: 16px; background: var(--gold-btn); color: #fff8e6; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22); }
.sheet .secondary { border-radius: 16px; background: var(--soft); color: var(--ink); }
.shop-wallet { background: linear-gradient(90deg, rgba(201, 161, 74, 0.22), rgba(201, 161, 74, 0.06)); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(201, 161, 74, 0.45); }
.shop-wallet b { color: var(--au); }
.shop-card { border-radius: 18px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--hair); }
.shop-card.r1 { box-shadow: inset 0 0 0 1.5px #3563d6; }
.shop-card.r2 { box-shadow: inset 0 0 0 1.5px #7d42da, 0 0 14px -4px rgba(125, 66, 218, 0.6); }
.shop-card.r3 { background: linear-gradient(165deg, rgba(201, 161, 74, 0.2), var(--bg) 55%); box-shadow: inset 0 0 0 1.5px #c9a14a, 0 0 18px -4px rgba(201, 161, 74, 0.7); }
.shop-card.have { box-shadow: inset 0 0 0 2px #1f8a5b; }
.shop-card em { color: #2fa36f; }
.rare-tag { background: #57534e; }
.r1 .rare-tag { background: #2f58c4; }
.r2 .rare-tag { background: #6d33c4; }
.r3 .rare-tag { background: linear-gradient(90deg, #8a6410, #d9b25a); color: #241800; }
.shop-card .pi { background: linear-gradient(160deg, #6d33c4, #2e1065); color: #f3dfaf; }
.shop-card .item-pi { background: linear-gradient(160deg, #b85a12, #692906); color: #fde9c4; }
.buy, .wear { border-radius: 12px; box-shadow: none; }
.buy { background: linear-gradient(180deg, #dcb45c, #a87b12); color: #241800; }
.buy.sure { background: var(--ruby-btn); color: #fff3d6; box-shadow: none; }
.wear { background: linear-gradient(180deg, #1f8a5b, #0e5236); color: #eafff4; }
.look-card { border: 0; background: var(--bg); box-shadow: inset 0 0 0 1px var(--hair); }
.look-card.on { box-shadow: inset 0 0 0 2px var(--au); }
.look-card em { color: var(--au); }
.avatar { background: var(--bg); box-shadow: inset 0 0 0 1px var(--hair); }
.avatar.on { background: rgba(201, 161, 74, 0.14); box-shadow: inset 0 0 0 2px var(--au); }
.field input { border: 1px solid var(--hair); background: var(--bg); color: var(--ink); }
.field input:focus { border-color: var(--au); }
.row.me { box-shadow: inset 0 0 0 2px var(--au); }
.modal .bar i { background: linear-gradient(90deg, #8a6410, #e8c97a); }

/* A player's card (showPlayerCard): face, name, level, power, two weapons (one tapped shows its lines), skills used most. */
.row[data-player] { cursor: pointer; }
.pcard { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.pcard h2 { margin: 0; }
.pcard h3 { align-self: stretch; margin: 12px 0 2px; text-align: left; }
.pcard .muted { margin: 0; }
.pcard-face { width: 110px; height: 110px; }
.pcard-power { margin: 4px 0 0; color: var(--muted); font-weight: 800; }
.pcard-power b { margin-left: 8px; color: var(--brand); font-size: 30px; font-weight: 900; }
.pcard-wpns, .pcard-skills { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.pcard-wpn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border: 3px solid transparent; border-radius: 16px; background: var(--bg); }
.pcard-wpn.on { border-color: var(--brand); }
.pcard-wpn .wpn { width: 56px; height: 56px; }
.pcard-wpn b { font-size: 14px; line-height: 1.2; }
.pcard-lines { width: 100%; text-align: left; }
.pcard-lines ul { margin: 6px 0; padding-left: 20px; }
.pcard-skill { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 14px; background: var(--bg); text-align: left; }
.pcard-skill .pi { flex: none; width: 40px; height: 40px; }
.pcard-skill b { font-size: 15px; line-height: 1.2; }
.pcard-skill em { margin-left: auto; color: var(--brand); font-size: 12px; font-style: normal; font-weight: 900; white-space: nowrap; }

/* Mail (showMail, showMailbox): a letter with its gift, and the mailbox's list, unread and read apart, the unread with a
   red dot. */
.mail-letter { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.mail-letter h2 { margin: 4px 0 0; line-height: 1.3; }
.mail-letter .muted { margin: 0; font-size: 13px; }
.mail-letter h3 { align-self: stretch; margin: 8px 0 0; text-align: left; }
.mail-letter > button { align-self: stretch; margin-top: 6px; }
.mail-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: linear-gradient(135deg, #f472b6, #f59e0b); color: #fff; animation: unlock-pop 0.8s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.mail-icon svg { width: 34px; height: 34px; }
.mail-body { margin: 0; font-size: 18px; line-height: 1.6; white-space: pre-wrap; }
/* A message written in Markdown (mailMarkdown in server/jelly.js), as HTML. */
.mail-body.md { align-self: stretch; margin-top: 6px; padding: 14px 16px; border-radius: 16px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--hair); font-size: 15px; line-height: 1.65; text-align: left; white-space: normal; overflow-wrap: anywhere; }
.mail-body.md h3, .mail-body.md h4, .mail-body.md h5 { margin: 14px 0 4px; line-height: 1.35; }
.mail-body.md h3 { font-size: 22px; }
.mail-body.md h4 { font-size: 18px; }
.mail-body.md h5 { font-size: 15px; }
.mail-body.md p, .mail-body.md ul, .mail-body.md ol, .mail-body.md blockquote { margin: 4px 0; }
.mail-body.md ul, .mail-body.md ol { padding-left: 1.3em; }
.mail-body.md small { font-size: 12px; opacity: 0.7; }
/* A picture in a letter (mailMarkdown): a screenshot showing where to tap. */
.mail-body.md .pic { margin: 8px 0; text-align: center; }
.mail-body.md .pic img { display: inline-block; width: 100%; max-width: 360px; height: auto; border-radius: 14px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); }
.mail-body.md blockquote { padding: 6px 12px; border-radius: 10px; background: var(--soft); box-shadow: inset 0 0 0 1px rgba(217, 119, 6, 0.4); }
.mail-body.md hr { margin: 12px 0; border: 0; border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.mail-body.md > :first-child { margin-top: 0; }
.mail-gift { position: static; margin: 4px 0; }
.chip em { margin-left: 6px; padding: 0 7px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 12px; font-style: normal; line-height: 18px; }
.mail-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.mail-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border-radius: 18px; background: var(--bg); color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair); text-align: left; }
.mail-row.new { box-shadow: inset 0 0 0 1px rgba(201, 161, 74, 0.5); }
.mail-tile { position: relative; display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--soft); color: var(--muted); }
.mail-tile svg { width: 24px; height: 24px; }
.mail-row.new .mail-tile { background: var(--ruby-btn); color: #fff3d6; }
.mail-row.new .mail-tile.gift { background: var(--gold-btn); color: #fff8e6; }
.mail-row.new .mail-tile::after { content: ''; position: absolute; top: -3px; right: -3px; width: 12px; height: 12px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 2px var(--bg); }
.mail-text { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.mail-text b, .mail-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-text b { font-size: 16px; }
.mail-text small { color: var(--muted); font-size: 13px; }
.mail-row:not(.new) .mail-text b { color: var(--muted); font-weight: 700; }
.mail-meta { display: flex; flex: none; flex-direction: column; align-items: flex-end; gap: 4px; }
.mail-meta small { color: var(--muted); font-size: 12px; }
.mail-meta i { padding: 0 8px; border-radius: 999px; background: rgba(201, 161, 74, 0.18); color: var(--au); font-size: 11px; font-style: normal; font-weight: 800; line-height: 18px; }
.mail-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 32px 0 20px; color: var(--muted); }
.mail-empty svg { width: 40px; height: 40px; opacity: 0.45; }
#menu-mail { position: relative; }
/* World-boss blessings: three large choices, including at 375 px. */
.raid-bless { text-align: center; }
.raid-bless-at { color: #a16207; font-weight: 800; margin: 0; }
.dark .raid-bless-at { color: #facc15; }
.raid-bless-weak { margin: 2px 0 0; font-size: 20px; font-weight: 900; }
.raid-bless-weak i { display: inline-block; width: 16px; height: 16px; margin-right: 6px; border-radius: 50%; vertical-align: -2px; }
.raid-bless-cards { display: grid; gap: 12px; margin-top: 18px; }
.raid-bless-card { display: grid; grid-template-columns: 52px 1fr; text-align: left; align-items: center; gap: 4px 12px; padding: 16px; min-height: 108px; border: 2px solid #94a3b8; border-radius: 18px; color: #0f172a; background: #f8fafc; }
.raid-bless-card .raid-bless-icon { grid-row: span 3; display: grid; place-items: center; }
.raid-bless-card .raid-bless-icon svg { width: 40px; height: 40px; }
.raid-bless-card small { font-size: 14px; color: #475569; font-weight: 800; }
.raid-bless-card b { font-size: 22px; line-height: 1.2; }
.raid-bless-card > span:last-child { font-size: 18px; line-height: 1.4; }
.raid-bless-card.tier-1 { border-color: #2563eb; background: #eff6ff; box-shadow: 0 0 14px #3b82f633; }
.raid-bless-card.tier-2 { border-color: #ca8a04; background: #fefce8; box-shadow: 0 0 20px #facc1566; }
.raid-bless-card:focus-visible { outline: 4px solid #f97316; outline-offset: 3px; }
.raid-bless-summary { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; width: 100%; font-size: 15px; }
.raid-bless-summary > b { width: 100%; }
.raid-bless-summary > span { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 12px; background: #fef3c7; color: #713f12; }
.raid-bless-summary > span i svg { display: block; width: 18px; height: 18px; }
/* Twelve weapon tiers (proposal section 2): a weapon's tier and level under its name, each affix with the range it rolls
   in and a gold star on the best roll, its unique power in gold, a lucky drop's tag, the comparison with the weapons in
   hand (more in green, less in red) and the reroll's old and new lines side by side. */
.gear-lv { color: var(--muted); font-size: 12px; font-weight: 800; }
.gear-info .gear-lv, .gear-info small.gear-rare { font-size: 14px; }
.affix-range { color: var(--muted); font-size: 12px; font-weight: 700; white-space: nowrap; }
.gear-info .affix .affix-range { font-size: 12px; }
.gear-info .affix { flex-wrap: wrap; gap: 0 4px; }
.gear-info .affix.top { color: #b45309; }
.gear-info .affix i.affix-top { color: #f59e0b; font-size: 15px; letter-spacing: 0; opacity: 1; text-shadow: 0 0 6px rgba(245, 158, 11, 0.7); }
.gear-info .affix.unique { margin-top: 4px; padding: 4px 8px; border-radius: 10px; background: linear-gradient(90deg, rgba(250, 204, 21, 0.22), rgba(250, 204, 21, 0.04)); color: #92400e; }
.dark .gear-info .affix.unique, .dark .gear-info .affix.top { color: #fcd34d; }
.gear-info .affix i.affix-u { color: #f59e0b; font-size: 15px; letter-spacing: 0; opacity: 1; }
.pcard-lines .affix-range { margin-left: 4px; }
.loot-card { position: relative; }
.loot-card .gear-lv { color: #cbd5e1; }
.loot-boom { position: absolute; top: -12px; right: -8px; padding: 2px 10px; border-radius: 999px; background: linear-gradient(90deg, #ef4444, #f59e0b); color: #fff; font-size: 16px; font-style: normal; font-weight: 900; box-shadow: 0 0 14px rgba(239, 68, 68, 0.8); transform: rotate(8deg); animation: unlock-pop 0.6s 1s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.gear-cmp { width: 100%; border-collapse: collapse; font-size: 15px; font-weight: 800; }
.gear-cmp th { padding: 4px 2px; color: var(--muted); font-size: 13px; text-align: right; white-space: nowrap; }
.gear-cmp td { padding: 5px 2px; border-top: 1px solid rgba(148, 163, 184, 0.25); text-align: right; white-space: nowrap; }
.gear-cmp th:first-child, .gear-cmp td:first-child { text-align: left; white-space: normal; }
.gear-cmp tr.power td { font-size: 17px; font-weight: 900; }
.gear-cmp td.up { color: #16a34a; }
.gear-cmp td.down { color: #dc2626; }
.gear-cmp td.same { color: var(--muted); }
.reroll-lines { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.reroll-lines .reroll-line { min-height: 48px; padding: 8px 6px; font-size: 15px; line-height: 1.25; }
.reroll-lines .reroll-line.sure { background: #f97316; color: #fff; }
.reroll-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.reroll-pick > div { display: flex; flex-direction: column; gap: 4px; padding: 10px 8px; border-radius: 14px; background: var(--bg); font-size: 15px; font-weight: 800; }
.reroll-pick small { color: var(--muted); font-size: 13px; font-weight: 900; }
.reroll-pick .reroll-new { box-shadow: inset 0 0 0 3px #f59e0b; }
.codex-rare small { margin-left: 8px; color: var(--muted); font-size: 13px; font-weight: 800; }
/* A bag card keeps its weapon's glow and pillar of light inside it, off the words above. */
.gear-grid .gear-card { overflow: hidden; }
/* Small weapon pictures (the codex, the rankings' rows, the daily prize) keep a high tier's light close round the
   weapon, off the names under them. */
.codex-card { overflow: hidden; }
:is(.codex-card, .daily-prize) .wpn:is(.w4, .w5, .w6, .w7, .w8, .w9, .w10)::before, .row-wpn.wpn:is(.w4, .w5, .w6, .w7, .w8, .w9, .w10)::before { inset: -18%; }
:is(.codex-card, .daily-prize) .wpn:is(.w4, .w5, .w6, .w7, .w8, .w9, .w10)::after, .row-wpn.wpn:is(.w4, .w5, .w6, .w7, .w8, .w9, .w10)::after { inset: -26%; }
:is(.codex-card, .daily-prize) .wpn.w11::before, .row-wpn.wpn.w11::before { inset: -26%; }
:is(.codex-card, .daily-prize) .wpn.w11::after, .row-wpn.wpn.w11::after { top: -55%; height: 130%; }
/* On the rankings' rows the light moves only by transform and opacity, which a phone's compositor does without its main
   thread (a glow's colour or a pillar's background moving cost old phones every frame): w7's shine is its glow fading
   into a second picture's brighter one (wpn-starshine's), the weapon itself a third picture on top so it never shows
   through; w11's pillar a strip of its colours sliding up inside a pillar that stays still (ui.js armedFace). */
.row-wpn.w7 > .wpn-svg { animation: row-glow-out 2.4s ease-in-out infinite; }
:is(.row-shine, .row-body) { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.row-shine { opacity: 0; animation: row-shine 2.4s ease-in-out infinite; }
.row-wpn.w7 .row-shine > .wpn-svg { filter: drop-shadow(0 0 4px #fff0a6) drop-shadow(0 0 18px #facc15) drop-shadow(0 0 29px #3b82f6); animation: none; }
.row-wpn.w7 .row-body > .wpn-svg { filter: none; animation: none; }
@keyframes row-glow-out { 50% { opacity: 0; } }
@keyframes row-shine { 50% { opacity: 1; } }
.row-wpn.wpn.w11::after { content: none; }
.row-pillar { position: absolute; top: -55%; left: 32%; width: 36%; height: 130%; border-radius: 50% 50% 0 0; overflow: hidden; -webkit-mask: linear-gradient(to top, transparent, #000 15% 65%, transparent); mask: linear-gradient(to top, transparent, #000 15% 65%, transparent); filter: drop-shadow(0 0 6px #ffffffaa); pointer-events: none; }
.row-pillar::before, .row-pillar::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.row-pillar::before { height: 400%; background: linear-gradient(0deg, #ef4444, #f97316, #facc15, #22c55e, #38bdf8, #4f46e5, #a855f7, #ef4444) 0 0 / 100% 50%; animation: row-pillar 2.5s linear infinite; }
.row-pillar::after { background: linear-gradient(90deg, transparent 30%, #ffffffaa 46%, #fff 50%, #ffffffaa 54%, transparent 70%); }
@keyframes row-pillar { to { transform: translateY(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .row-wpn.w7 > .wpn-svg, .row-shine, .row-pillar::before { animation: none; }
}
/* A weapon's, the aura's or a gem hole's page: its back link beside the window's main menu button, not under it. */
.sheet:has(> .home-btn) > .gear-back { margin-left: 64px; min-height: 48px; }
/* A weapon's level up: the power it gains in green, a little room above the button. */
.gear-level-power { margin: 2px 0 4px; color: #16a34a; font-size: 18px; font-weight: 900; }
.gear-level-power + .muted { margin: 0 0 10px; }

/* ---- A face with an aura (faceTag; the user's call, 2026-10-15: standing still it looked odd) ----
   The aura is an <img> of its own behind the face's, the two in one box: the rules for a face's <img> where it is shown
   size both alike, and a face placed by its own class has it on the box (.af-box), the two filling it. The aura turns
   once in 18 s and breathes, a little bigger and brighter, in 3.6 s (draw.js AURA_TURN_MS and AURA_BREATHE_MS): slow,
   to stay calm. The face stays still; where faces bob, hop or pop, the box does it for both, and a face's see-through
   is the box's, so the aura does not show through the face. */
:where(.af) { display: grid; width: fit-content; }
:where(.af-box) { position: relative; }
/* Both positioned, so the turning aura (drawn as positioned for its turn) stays under the face. */
.af.af > img { position: relative; grid-area: 1 / 1; animation: none; }
.af.af-box > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.af.af > .af-aura { pointer-events: none; }
/* Where the page keeps a face (the player chips, the wardrobe tile; putFace): only its face is laid out. */
.face-slot { display: contents; }
/* The auras that were never frames are drawn round (50, 52). */
.af-aura.low { transform-origin: 50% 52%; }
.lvcard .af { position: relative; animation: unlock-pop 0.8s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.guide-faces .af, .join-face .af { animation: hop 1.4s ease-in-out infinite; }
.shop-card.look .af { animation: look-bob 1.8s ease-in-out infinite; }
.duel-side .af { animation: look-bob 1.6s ease-in-out infinite; }
.shop-card.palette .af { border-radius: 50%; background: conic-gradient(#ef4444, #facc15, #22c55e, #06b6d4, #6366f1, #d946ef, #ef4444); }
.shop-card.palette .af > img { background: none; }
.palette-grid .swatch .af { width: 82%; height: 82%; }
.palette-grid .swatch .af > img { width: 100%; height: 100%; }
.avatar .af { width: 70%; }
.avatar .af > img { width: 100%; }
.codex-look:not(.have) .af { opacity: 0.35; }
.wb-hat:not(.have) .af { opacity: 0.55; }
:is(.codex-look:not(.have), .wb-hat:not(.have)) .af > img { opacity: 1; }
@keyframes aura-turn { to { rotate: 360deg; } }
@keyframes aura-breathe { from { scale: 0.96; opacity: 0.75; } to { scale: 1.04; opacity: 1; } }
/* Only on screen (.seen, map.js auraSeen); off it, an aura waits where it was. */
@media (prefers-reduced-motion: no-preference) {
  .af.af > img.af-aura { animation: aura-turn 18s linear infinite paused, aura-breathe 1.8s ease-in-out infinite alternate paused; }
  .af.af > img.af-aura.still { animation: aura-breathe 1.8s ease-in-out infinite alternate paused; }
  .af.af.seen > img.af-aura { animation-play-state: running; }
}
/* A ranking row's weapons glow only on screen too (map.js auraSeen). */
.armed:not(.seen) :is(.wpn, .wpn-svg, .row-shine), .armed:not(.seen) :is(.wpn, .row-pillar)::before, .armed:not(.seen) .wpn::after { animation-play-state: paused; }
/* And while their list scrolls (map.js SCROLL_REST), the rows' auras and weapons wait where they are. */
.scrolling .armed :is(.wpn, .wpn-svg, .row-shine), .scrolling .armed :is(.wpn, .row-pillar)::before, .scrolling .armed .wpn::after, .scrolling .armed .af.af > img.af-aura { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .lvcard .af, .guide-faces .af, .shop-card.look .af { animation: none; }
}
/* What a tap on a weapon's page did, said on the part tapped (the page stays where it was): green, or red when it could
   not be done. */
.gear-done { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(22, 163, 74, 0.16); color: #16a34a; font-size: 17px; font-weight: 900; text-align: center; animation: unlock-pop 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.gear-done.bad { background: rgba(220, 38, 38, 0.14); color: #dc2626; }
.gear-sec.just-done { box-shadow: inset 0 0 0 3px rgba(22, 163, 74, 0.55); }
/* A weapon's page in tabs (the user's choice A): the weapons to switch between in a row, equipping it under its card,
   big tabs, one part at a time. */
.gear-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 4px 0 10px; }
.gear-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 6px 2px; border: 2px solid rgba(148, 163, 184, 0.35); border-radius: 12px; background: var(--bg); overflow: hidden; }
.gear-tile .wpn { width: 40px; height: 40px; }
.gear-tile small { color: var(--muted); font-size: 12px; font-weight: 800; }
.gear-tile em { position: absolute; top: 2px; left: 4px; padding: 0 5px; border-radius: 8px; background: #f59e0b; color: #fff; font-size: 12px; font-style: normal; font-weight: 900; }
.gear-tile.on { border-color: #f59e0b; box-shadow: 0 0 0 2px #f59e0b; }
.gear-tile.all { justify-content: center; }
.gear-tile.all b { font-size: 16px; }
.gear-tile.r1 { border-color: #3b82f6; }
.gear-tile.r2 { border-color: #a855f7; }
.gear-tile.r3 { border-color: #facc15; }
.gear-use { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 4px; }
.gear-use-vs { display: flex; justify-content: center; gap: 12px; margin: 0; font-size: 15px; font-weight: 900; }
.gear-use-vs .up { color: #16a34a; }
.gear-use-vs .down { color: #dc2626; }
.gear-put { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gear-put button { padding-inline: 4px; font-size: 16px; }
.gear-tabs { margin-top: 12px; }
.gear-tabs .chip { flex: 1; padding: 12px 4px; font-size: 18px; }
.gear-up-all { width: 100%; margin-top: 8px; }
.gear-tabs { grid-auto-flow: column; grid-auto-columns: 1fr; grid-template-columns: none; }
.gear-tile:is(.w4, .w5, .w6, .w7, .w8, .w9, .w10, .w11) { border-color: var(--w-a, #f59e0b); }
.gear-use .gear-break { min-height: 44px; padding: 8px; font-size: 15px; }

/* Badges (js/badges.js): the menu's tile, the page and the collection's tab, and the show for new ones. */
.tile.badge-tile { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 12px; min-height: 0; padding: 12px 12px 12px 14px; }
.badge-tile-pic { flex: none; width: 58px; height: 58px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3)); }
.badge-tile-pic.none { opacity: 0.35; filter: grayscale(1); }
.badge-tile-count { display: flex; align-items: center; gap: 8px; }
.badge-tile-count .lv-track { flex: 1; height: 6px; border-radius: 3px; background: var(--soft, rgba(127, 127, 127, 0.25)); }
.badge-tile-count .lv-track i { background: linear-gradient(90deg, #22c55e, #facc15); }
.hud-honor.bdg { background: linear-gradient(90deg, #312e81, #7c3aed); color: #fde68a; box-shadow: 0 0 12px rgba(124, 58, 237, 0.5); }
.hud-honor img { width: 22px; height: 22px; }
.badge-now { display: flex; align-items: center; gap: 14px; margin: 4px 0 12px; padding: 12px; border-radius: 18px; background: var(--bg); }
.badge-face { flex: none; width: 84px; height: 84px; }
.badge-now b { display: block; font-size: 20px; font-weight: 900; }
.badge-now small { display: block; margin-top: 2px; color: var(--muted); font-size: 14px; font-weight: 600; line-height: 1.35; }
.badge-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.badge-choice { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border: 0; border-radius: 14px; background: var(--bg); color: var(--ink); font: inherit; }
.badge-choice b { font-size: 17px; font-weight: 900; }
.badge-choice small { color: var(--muted); font-size: 12px; font-weight: 700; }
.badge-choice.on { background: linear-gradient(160deg, #3f2a06, #1c1203); box-shadow: inset 0 0 0 2.5px #facc15; color: #fde68a; }
.badge-choice.on small { color: #fde68a; }
.badge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.badge-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; padding: 10px 4px 9px; border: 0; border-radius: 14px; background: var(--bg); color: var(--ink); font: inherit; text-align: center; }
.badge-card img { width: 66px; height: 66px; }
.badge-card b { color: var(--muted); font-size: 14px; font-weight: 800; line-height: 1.2; }
.badge-card small { color: var(--muted); font-size: 11.5px; font-weight: 600; line-height: 1.3; }
.badge-card:not(.have) img { opacity: 0.3; filter: grayscale(1); }
.badge-card.have b { color: var(--ink); }
.badge-card.have.r1 { box-shadow: inset 0 0 0 2px #3b82f6; }
.badge-card.have.r2 { box-shadow: inset 0 0 0 2px #a855f7; }
.badge-card.have.r3 { box-shadow: inset 0 0 0 2.5px #facc15; }
.badge-card.have.r4 { box-shadow: inset 0 0 0 2.5px #ec4899, 0 0 10px rgba(236, 72, 153, 0.45); }
.badge-card.have.on { background: linear-gradient(160deg, #3f2a06, #1c1203); box-shadow: inset 0 0 0 3px #facc15, 0 0 14px rgba(250, 204, 21, 0.5); }
.badge-card.have.on b, .badge-card.have.on small { color: #fde68a; font-weight: 900; }
button.badge-card:active, .badge-choice:active { transform: scale(0.96); }
.badge-go { width: 100%; margin: 10px 0 2px; }
.badge-unlock .badge-big { position: relative; width: 170px; height: 170px; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.4)); animation: unlock-pop 0.9s cubic-bezier(0.2, 1.6, 0.4, 1) both, wobble 1.6s 0.9s ease-in-out infinite; }
.badge-unlock.many .badge-big { width: 140px; height: 140px; }
.badge-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 6px; max-height: 210px; margin: 6px 0 12px; overflow-y: auto; }
.badge-row span { display: flex; flex-direction: column; align-items: center; width: 64px; animation: pop-in 0.4s both; }
.badge-row img { width: 50px; height: 50px; }
.badge-row small { font-size: 11px; font-weight: 700; line-height: 1.2; text-align: center; }
/* A row's badges (rowBadgesHTML): one size, in the line under the name before its words, the worn one ringed in gold;
   the level beside the name. A card lists them all with names. */
.row .row-name { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.row .row-name b { min-width: 0; }
.row .who .row-name small { display: inline; flex: none; font-size: 13px; font-weight: 700; }
.row .row-sub { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; }
.row.stack .who > small.row-sub { flex-wrap: wrap; row-gap: 4px; }
.row .row-badges { display: inline-flex; flex: none; align-items: center; gap: 2px; }
.row .row-badges img { width: 22px; height: 22px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35)); }
.row .row-badges img.worn { border-radius: 50%; background: radial-gradient(circle, rgba(250, 204, 21, 0.6), transparent 72%); }
.row .row-badges em { padding: 0 5px; border-radius: 999px; background: rgba(127, 127, 127, 0.22); font-size: 12px; font-style: normal; font-weight: 900; line-height: 20px; }
.row .row-sub { margin-top: 2px; }
/* The number on the right a little smaller, beside the badges (the user's call), its word or more under it; every row
   on a board as tall, with badges or without (the user's call: tidy; a row may be taller). */
.row .num { font-size: 17px; text-align: right; }
.row .num .num-sub { display: block; color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1.2; }
.row.podium .num .num-sub { color: inherit; opacity: 0.75; }
.rows > .row { min-height: 68px; }
/* The duel rank and the badges side by side under the power: big pictures, few words. */
.pcard-honors { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-self: stretch; margin-top: 8px; }
.pcard-honor { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 10px 6px 12px; border-radius: 18px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--hair); color: var(--ink); text-align: center; }
.pcard-honor > small { color: var(--muted); font-size: 14px; font-weight: 800; }
.pcard-honor > b { font-size: 17px; font-weight: 900; line-height: 1.25; }
.pcard-honor .duel-badge { margin: 2px auto; }
.pcard-honor .duel-stars { font-size: 20px; }
.pcard-honor .duel-king { margin: 0; color: #a16207; font-size: 15px; font-weight: 900; }
.pcard-honor.none .duel-badge, .pcard-honor img.none { opacity: 0.35; filter: grayscale(1); }
.pcard-honor.none > b { color: var(--muted); font-size: 15px; }
.pcard-honor img { width: 84px; height: 84px; margin: 4px 0 7px; }
.pcard-count { color: var(--au, #9a7010); font-size: 20px; font-weight: 900; }
.pcard-honor em { color: var(--muted); font-size: 14px; font-style: normal; font-weight: 800; }
.pcard-honor:disabled { opacity: 1; cursor: default; }
.pcard-badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 4px; }
.pcard-badges span { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.pcard-badges img { width: 48px; height: 48px; }
.pcard-badges small { font-size: 12px; font-weight: 700; line-height: 1.2; text-align: center; }
/* A duel tier as its emblem (duelMiniHTML), on the duel's boards and wherever a tier is told. */
.duel-mini { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; white-space: nowrap; }
.duel-mini svg { width: 22px; height: 25px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35)); }
.duel-mini small { font-size: 13px; font-weight: 800; }
.row .num .duel-mini { flex-direction: column; gap: 0; min-width: 44px; }
.row .num .duel-mini svg { width: 30px; height: 34px; }
.row .num .duel-mini small { font-size: 12px; line-height: 1.1; }
/* A card's looks (cardLooksHTML): each on a plain jelly, its name and rarity; a tap says where it comes from. */
.pcard-looks { display: grid; width: 100%; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pcard-look { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 8px 4px; border: 0; border-radius: 14px; background: var(--bg); color: var(--ink); font: inherit; text-align: center; }
.pcard-look-face { width: 56px; height: 56px; }
.pcard-look b { font-size: 13px; font-weight: 800; line-height: 1.2; }
.pcard-look small.rare { font-size: 11px; font-weight: 900; color: #94a3b8; }
.pcard-look small.rare.r1 { color: #3b82f6; }
.pcard-look small.rare.r2 { color: #a855f7; }
.pcard-look small.rare.r3 { color: #eab308; }
.pcard-look small.rare.r4 { background: linear-gradient(90deg, #ec4899, #a855f7, #22d3ee); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pcard-look.r1 { box-shadow: inset 0 0 0 2px #3b82f6; }
.pcard-look.r2 { box-shadow: inset 0 0 0 2px #a855f7; }
.pcard-look.r3 { box-shadow: inset 0 0 0 2.5px #facc15; }
.pcard-look.r4 { box-shadow: inset 0 0 0 2.5px #ec4899, 0 0 10px rgba(236, 72, 153, 0.45); }
.pcard-look.on { background: linear-gradient(160deg, #3f2a06, #1c1203); color: #fde68a; }
.pcard-how { margin: 8px 0 0; font-size: 14px; line-height: 1.4; }
.pcard-how b { color: var(--ink); }
/* The aura slot without an aura worn: its locked tabs dimmed, the reason big, a button to pick one. */
.gear-tabs .chip.locked { opacity: 0.45; }
.gear-locked { text-align: center; }
.gear-lock { margin: 6px 0; font-size: 20px; font-weight: 900; }
.gear-locked .primary { width: 100%; margin-top: 6px; }
/* A card's buttons: tell friends about them, and from a shared card's link the way into the game. */
.pcard-share { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 16px; }
/* The skills by group (proposal 25): 傳說 gold, 星耀 starshine blue and 王者 in a rainbow rim with a glow that only fades
   in and out (no repainting), the skill button so while a 王者 one is in hand. The shop's ladders, the skill book's
   table (an effect a row, a group a column) and the special jellies a group wants, a dot each. */
.skill-card.star { box-shadow: inset 0 0 0 3px #93c5fd, 0 0 16px rgba(147, 197, 253, 0.5); background: linear-gradient(160deg, rgba(147, 197, 253, 0.22), var(--bg) 50%); }
.star .rare-tag { background: linear-gradient(90deg, #60a5fa, #bae6fd); color: #0c2a4d; }
.mythic .rare-tag { background: linear-gradient(90deg, #f43f5e, #f59e0b, #22c55e, #06b6d4, #a855f7); color: #fff; }
/* The shop's skills, step by step (the user's call, 2026-10-17): an effect a card, its three skills a ladder; the next one
   to buy in gold, the ones after it dim; the next steps worth buying first on top in a gold rim. */
.sk-shop { display: grid; gap: 12px; text-align: left; }
.sheet .sk-head { margin: 8px 0 0; color: var(--ink); font-size: 21px; font-weight: 900; letter-spacing: 0.04em; text-align: center; }
.sk-path { display: grid; gap: 10px; padding: 12px; border-radius: 20px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--hair, var(--line)); }
.sk-path.pick { box-shadow: inset 0 0 0 3px #d9b25a, 0 0 18px rgba(217, 178, 90, 0.35); }
.sk-path h3 { margin: 0; font-size: 18px; font-weight: 900; }
.sk-steps { display: grid; grid-template-columns: 1fr 12px 1fr 12px 1fr; align-items: center; gap: 2px; }
.sk-arrow { width: 12px; height: 16px; background: var(--muted); clip-path: polygon(0 10%, 100% 50%, 0 90%); opacity: 0.6; }
.sk-step { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 8px 2px; border-radius: 16px; text-align: center; }
.sk-step .pi { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: var(--line); color: var(--muted); }
.sk-step .pi svg { width: 30px; height: 30px; }
.sk-step b { font-size: 15px; line-height: 1.2; }
.sk-step em { font-size: 12px; font-style: normal; font-weight: 800; color: var(--muted); line-height: 1.25; }
.sk-step.have.g0 .pi, .sk-step.next.g0 .pi { background: linear-gradient(160deg, #f59e0b, #b45309); color: #fff; }
.sk-step.have.g1 .pi, .sk-step.next.g1 .pi { background: linear-gradient(160deg, #60a5fa, #1d4ed8); color: #fff; }
.sk-step.have.g2 .pi, .sk-step.next.g2 .pi { background: conic-gradient(from 200deg, #f43f5e, #f59e0b, #22c55e, #06b6d4, #a855f7, #f43f5e); color: #fff; }
.sk-step.have em { color: #2fa36f; }
.sk-step.next { background: rgba(217, 178, 90, 0.14); box-shadow: inset 0 0 0 2px #d9b25a; }
.sk-step.next em { padding: 1px 10px; border-radius: 999px; background: #d9b25a; color: #241800; }
.sk-step.wait, .sk-step.later { opacity: 0.45; }
.sk-next { display: grid; justify-items: center; gap: 6px; padding: 12px 10px; border-radius: 16px; background: rgba(255, 255, 255, 0.04); text-align: center; }
.sk-next p { margin: 0; color: var(--ink); font-size: 16px; line-height: 1.45; }
.sk-next small { color: var(--muted); font-size: 13px; line-height: 1.4; }
.sk-next .buy { width: min(100%, 220px); margin-top: 4px; }
.sk-short { color: #f87171 !important; font-weight: 800; }
.sk-done { margin: 0; color: #2fa36f; font-size: 15px; font-weight: 800; text-align: center; }
/* The skill menu's rule as cards (the user's call, 2026-10-17): one skill a turn, lit while it can go; a boss fight's
   special jellies for each higher group. Locked skill cards; the skill button's clock once this turn's skill is cast. */
.rule-cells { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 8px; }
.rule-cells.single { width: min(100%, 160px); margin: 0 auto; }
.rule-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 9px; border-radius: 14px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--hair, var(--line)); color: var(--muted); }
.rule-cell .ri { display: grid; width: 30px; height: 30px; }
.rule-cell .ri svg { width: 100%; height: 100%; }
.rule-cell b { color: var(--ink); font-size: 20px; font-weight: 900; line-height: 1.15; font-variant-numeric: tabular-nums; }
.rule-cell small { font-size: 13px; font-weight: 800; }
.rule-cell.on { background: rgba(217, 178, 90, 0.14); box-shadow: inset 0 0 0 2px #d9b25a; color: #d9b25a; }
.rule-cell.used { background: rgba(148, 163, 184, 0.1); }
.rule-cell.used b { color: var(--muted); }
.rule-cell.g1 .ri { color: #60a5fa; }
.rule-cell.g2 .ri { color: #c084fc; }
.skill-card.locked-now { opacity: 0.45; filter: grayscale(0.6); }
.card-lock { position: absolute; top: 6px; left: 6px; display: grid; width: 24px; height: 24px; padding: 4px; border-radius: 999px; background: #334155; color: #fff; }
.card-lock svg { width: 100%; height: 100%; }
.skill-wait { position: absolute; top: -9px; right: -9px; display: none; width: 30px; height: 30px; padding: 3px; border-radius: 999px; background: #1e1b4b; color: #fbbf24; box-shadow: 0 0 0 2px #fbbf24; }
.skill-wait svg { width: 100%; height: 100%; }
.skill-bar.turn-used .skill-wait { display: grid; }
/* Out of moves, a skill still able to save the level: the skills that can go, to cast one or end it. */
.out-moves { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 6px 0; }
.out-moves h2 { margin: 0; font-size: 28px; }
.out-moves p { margin: 0; color: var(--ink); font-size: 19px; font-weight: 800; }
.out-skills { display: flex; gap: 12px; }
.out-skills .pi { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: linear-gradient(160deg, #a855f7, #6d28d9); color: #fff; box-shadow: 0 0 18px rgba(168, 85, 247, 0.5); }
.out-skills .pi svg { width: 38px; height: 38px; }
.out-moves .primary, .out-moves .secondary { width: min(100%, 260px); font-size: 20px; }
.one-skill { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 8px 0; }
.one-big { display: grid; place-items: center; width: 120px; height: 150px; border-radius: 24px; background: linear-gradient(160deg, #a855f7, #6d28d9); color: #fff; font-size: 96px; font-weight: 900; line-height: 1; box-shadow: 0 0 30px rgba(168, 85, 247, 0.55); }
.one-skill h2 { margin: 0; font-size: 24px; letter-spacing: 0; white-space: nowrap; }
.one-skill .primary { width: min(100%, 240px); }
.skill-book { display: grid; gap: 4px; margin-bottom: 12px; }
.sb-row { display: grid; grid-template-columns: 70px repeat(3, 1fr); gap: 4px; align-items: stretch; }
.sb-head span { padding: 5px 0; border-radius: 9px; text-align: center; font-size: 15px; font-weight: 900; color: #111; }
.sb-head span:first-child { background: none; }
.sb-head small { display: block; font-size: 11px; font-weight: 800; }
.sb-head .g0 { background: #fbbf24; }
.sb-head .g1 { background: #93c5fd; }
.sb-head .g2 { background: linear-gradient(90deg, #fda4af, #fde047, #86efac, #7dd3fc, #d8b4fe); }
.sb-eff { display: flex; align-items: center; gap: 5px; font-size: 15px; font-weight: 900; }
.sb-eff .pi { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #7c3aed; color: #fff; flex: none; }
.sb-eff .pi svg { width: 16px; height: 16px; }
.sb-cell { display: grid; place-items: center; min-height: 40px; padding: 2px; border-radius: 10px; border: 2px solid var(--line); text-align: center; font-size: 13px; font-weight: 800; line-height: 1.15; color: var(--muted); }
.sb-cell.g0 { border-color: #facc15; }
.sb-cell.g1 { border-color: #93c5fd; }
.sb-cell.g2 { border-color: #c084fc; }
.sb-cell.have { color: var(--ink); background: rgba(168, 85, 247, 0.16); }
.sb-cell.free { color: var(--ink); background: rgba(34, 197, 94, 0.2); }
.skill-card.mythic { position: relative; border: 3px solid transparent; background: linear-gradient(var(--bg), var(--bg)) padding-box, linear-gradient(120deg, #f43f5e, #f59e0b, #22c55e, #06b6d4, #a855f7) border-box; box-shadow: none; }
.skill-card.mythic::after { content: ''; position: absolute; inset: -4px; border-radius: 22px; box-shadow: 0 0 16px 3px rgba(168, 85, 247, 0.6), 0 0 26px 6px rgba(236, 72, 153, 0.3); opacity: 0.35; pointer-events: none; animation: mythic-glow 1.6s ease-in-out infinite alternate; }
.skill-card.mythic .pi { background: conic-gradient(from 200deg, #f43f5e, #f59e0b, #22c55e, #06b6d4, #a855f7, #f43f5e); color: #fff; }
.skill-bar.mythic.ready .skill-open { background: linear-gradient(120deg, #db2777, #7c3aed 50%, #0891b2); }
/* The skill in hand's group opened in a boss fight (its special jellies made): a gold rim. */
.skill-bar.opened .skill-open { box-shadow: 0 0 0 3px #facc15, 0 0 18px rgba(250, 204, 21, 0.65); }
@keyframes mythic-glow { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .skill-card.mythic::after { animation: none; opacity: 0.7; }
}

/* While the game loads: the hero bobbing (transform and opacity only, gone once the game is up). */
.boot { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 24px; background: radial-gradient(circle at 50% 38%, #2e1065 0, #0b0a23 55%, #020617 100%); color: #f8fafc; text-align: center; transition: opacity 0.4s ease; }
.boot.done { opacity: 0; pointer-events: none; }
.boot-art { width: min(78vw, 46vh, 420px); height: auto; overflow: visible; }
.boot-hero, .boot-pal, .boot-shadow, .boot-twinkle, .boot-gleam { transform-box: fill-box; transform-origin: center; }
.boot-hero { animation: boot-bob 1.6s ease-in-out infinite; }
.boot-shadow { animation: boot-shadow 1.6s ease-in-out infinite; }
.boot-pal { animation: boot-hop 1.2s ease-in-out infinite; }
.boot-pal-2 { animation-delay: -0.4s; }
.boot-pal-3 { animation-delay: -0.8s; }
.boot-twinkle { animation: boot-twinkle 1.4s ease-in-out infinite; }
.boot-twinkle.t2 { animation-delay: -0.5s; }
.boot-twinkle.t3 { animation-delay: -0.9s; }
.boot-gleam { animation: boot-twinkle 0.8s ease-in-out infinite; }
.boot-title { margin: 4px 0 0; font-size: clamp(26px, 7vw, 40px); font-weight: 900; letter-spacing: 0.08em; text-shadow: 0 4px 18px rgba(249, 115, 22, 0.45); }
.boot-text { margin: 0; color: #c4b5fd; font-size: 18px; font-weight: 700; letter-spacing: 0.12em; }
.boot-text::after { content: '\2026'; display: inline-block; animation: boot-twinkle 1.2s ease-in-out infinite; }
.boot-text.stopped::after { content: none; }
.boot button { margin-top: 14px; padding: 14px 40px; border: 0; border-radius: 999px; background: #f97316; color: #fff; font: inherit; font-size: 20px; font-weight: 800; }
@keyframes boot-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-26px); } }
@keyframes boot-shadow { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.72); opacity: 0.55; } }
@keyframes boot-hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes boot-twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.7); } }
@media (prefers-reduced-motion: reduce) { .boot-hero, .boot-pal, .boot-shadow, .boot-twinkle, .boot-gleam, .boot-text::after { animation: none; } }

/* A card's duel record: tiles under the rank and badges (wins in gold, the best tier with its emblem, a streak). */
.pcard-duel-stats { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 8px; margin-top: 10px; }
.pcard-stat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; padding: 12px 6px 10px; border-radius: 18px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--hair); text-align: center; }
.pcard-stat > b { font-size: 17px; font-weight: 900; line-height: 1.2; }
.pcard-stat > small { color: var(--muted); font-size: 13px; font-weight: 800; }
.pcard-stat > svg { width: 40px; height: 40px; }
.pcard-stat.wins { background: radial-gradient(circle at 50% 0, rgba(251, 191, 36, 0.28), transparent 70%), var(--bg); box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.45); }
.pcard-stat.wins > b { color: #fbbf24; font-size: 34px; text-shadow: 0 2px 12px rgba(251, 191, 36, 0.4); }
.pcard-stat.best { background: radial-gradient(circle at 50% 0, rgba(167, 139, 250, 0.25), transparent 70%), var(--bg); }
.pcard-stat.streak { color: #fb923c; background: radial-gradient(circle at 50% 0, rgba(249, 115, 22, 0.28), transparent 70%), var(--bg); box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.45); }
.pcard-stat.streak > svg { width: 34px; height: 34px; filter: drop-shadow(0 0 8px rgba(249, 115, 22, 0.6)); }
.pcard-stat.streak > b { color: #fb923c; }

/* The settings in sections (sound, account). */
.set-head { margin: 16px 0 8px; color: var(--muted); font-size: 15px; font-weight: 800; letter-spacing: 0.08em; text-align: left; }
.set-head:first-of-type { margin-top: 4px; }
.modal .device-box + .google-card, .modal .device-box + * { margin-top: 10px; }

/* With a mouse (the user's call: animations made scrollbars flash on the desktop): every scrollbar thin and unseen
   until the pointer is over what scrolls, and the places that scroll keep their gutter, so a chest growing for a moment
   neither shows a bar nor moves the page sideways. Phones keep their own overlay bars. */
@media (hover: hover) and (pointer: fine) {
  * { scrollbar-width: thin; scrollbar-color: transparent transparent; }
  *:hover { scrollbar-color: rgba(148, 163, 184, 0.55) transparent; }
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
  ::-webkit-scrollbar-thumb { border-radius: 8px; background: transparent; }
  *:hover::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.55); }
  .sheet, .chest-room, .menu-body, .map-scroll { scrollbar-gutter: stable; }
}
/* The road of breakthroughs (proposal 26): big, few words, a tier a row from legendary down to rainbow. */
.road { padding: 12px; border-radius: 16px; background: var(--bg); text-align: left; }
.road h3 { margin: 0 0 8px; font-size: 20px; text-align: center; }
.road h4 { margin: 14px 0 6px; font-size: 17px; }
.road-me { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.road-me span { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 2px; border-radius: 12px; background: var(--surface); }
.road-me small { color: var(--muted); font-size: 12px; font-weight: 800; white-space: nowrap; }
.road-me b { font-size: 20px; font-weight: 900; }
.road-steps { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.road-steps li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: var(--surface); }
.road-steps li.on { background: color-mix(in srgb, #facc15 12%, var(--surface)); box-shadow: inset 0 0 0 2px #facc15; }
.road-steps li.locked { opacity: 0.55; }
.road-steps .wpn { flex: none; width: 40px; height: 40px; }
.road-steps .wpn::before, .road-steps .wpn::after { display: none; }
.road-steps .wpn * { animation: none !important; }
.road-steps li:not(.done, .on) .wpn { filter: grayscale(0.7); }
.road-steps li > div { flex: 1; min-width: 0; }
.road-steps p { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.road-steps p small { color: var(--muted); font-size: 13px; font-weight: 800; }
.road-name { font-size: 18px; font-style: normal; font-weight: 900; }
.road-name.r3 { color: #ca8a04; }
:root.dark .road-name.r3 { color: #fde047; }
.road-state { display: flex; align-items: center; gap: 4px; margin-top: 2px; color: var(--muted); font-size: 14px; font-weight: 800; }
.road-state b { color: #ca8a04; font-size: 17px; }
:root.dark .road-state b { color: #facc15; }
.road-state.done { color: #16a34a; }
:root.dark .road-state.done { color: #4ade80; }
.road-bar { display: block; height: 12px; margin-top: 5px; overflow: hidden; border-radius: 6px; background: color-mix(in srgb, var(--ink) 12%, transparent); }
.road-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #b88a28, #fde68a); }
.road-i { flex: none; width: 18px; height: 18px; }
.road-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.road-chips i { padding: 1px 8px; border-radius: 999px; background: rgba(250, 204, 21, 0.16); color: #a16207; font-size: 13px; font-style: normal; font-weight: 800; white-space: nowrap; }
:root.dark .road-chips i { color: #fde68a; }
.road-how { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.road-how span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px; border-radius: 12px; background: var(--surface); }
.road-how b { font-size: 18px; font-weight: 900; white-space: nowrap; }
.road-how small { color: var(--muted); font-size: 12px; font-weight: 800; white-space: nowrap; }
.road-how .road-i { width: 30px; height: 30px; padding: 5px; border-radius: 9px; background: rgba(250, 204, 21, 0.16); color: #ca8a04; }
:root.dark .road-how .road-i { color: #facc15; }
.raid-text small.raid-road { color: #fde68a; font-weight: 800; }
.raid-road b { color: #facc15; font-size: 15px; letter-spacing: 0; }
.raid-road span { white-space: nowrap; }
.raid-road[hidden] { display: none; }
/* The realm (proposal 26): its name and depth, news, the staged bar, the trial, the hall of fame. */
.realm-head { display: flex; align-items: center; justify-content: center; gap: 8px; margin: -2px 0 8px; }
.realm-head b { font-size: 20px; font-weight: 900; color: #ca8a04; }
:root.dark .realm-head b { color: #fde68a; }
.realm-head i { padding: 2px 10px; border-radius: 999px; background: rgba(250, 204, 21, 0.18); font-size: 14px; font-style: normal; font-weight: 900; }
.road-news, .raid-text small.raid-news { overflow: hidden; color: #f0abfc; font-size: 14px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.road-news { margin: 0 0 8px; text-align: center; }
.raid-news[hidden] { display: none; }
.road-bar.staged { position: relative; }
.road-bar.staged u { position: absolute; top: 0; bottom: 0; width: 2px; background: color-mix(in srgb, var(--ink) 35%, transparent); }
.road-bar.staged u:nth-of-type(1) { left: 33.3%; }
.road-bar.staged u:nth-of-type(2) { left: 66.6%; }
.road-stages { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 3px; }
.road-stages em { color: var(--muted); font-size: 12px; font-style: normal; font-weight: 800; text-align: center; }
.road-stages em.past { color: #a16207; }
.road-stages em.on { color: #ca8a04; font-weight: 900; }
:root.dark .road-stages em.past { color: #fde68a99; }
:root.dark .road-stages em.on { color: #facc15; }
.trial-go { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 6px; padding: 10px; background: linear-gradient(90deg, #6d28d9, #2563eb); color: #fff; font-size: 17px; }
.trial-go .road-i { width: 22px; height: 22px; color: #fde047; }
.road-fame { display: flex; align-items: center; gap: 3px; color: #a16207; font-size: 12px; font-weight: 800; }
:root.dark .road-fame { color: #fde68a; }
.road-fame .road-i { width: 14px; height: 14px; }
.up-odds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 6px 0; }
.up-odds span { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-radius: 12px; background: var(--bg); }
.up-odds b { font-size: 22px; font-weight: 900; }
.up-odds small { color: var(--muted); font-size: 13px; font-weight: 800; }
.up-odds .ok b { color: #16a34a; }
.up-odds .zero b { color: #ca8a04; }
.up-odds .boom b { color: #dc2626; }
:root.dark .up-odds .ok b { color: #4ade80; }
:root.dark .up-odds .zero b { color: #facc15; }
:root.dark .up-odds .boom b { color: #f87171; }
.up-pity { margin: 0 0 6px; color: #a855f7; font-size: 15px; font-weight: 900; text-align: center; }
.up-ward { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.up-ward .chip { display: inline-flex; align-items: center; gap: 4px; }
.up-ward .chip .road-i { width: 16px; height: 16px; opacity: 0.35; }
.up-ward .chip.on .road-i { opacity: 1; color: #16a34a; }
.gear-wreck { color: #dc2626; font-weight: 900; text-align: center; }
.gear-card.wreck .wpn { filter: grayscale(1) brightness(0.6); }
.wreck-tag { margin-right: 4px; padding: 0 6px; border-radius: 6px; background: #7f1d1d; color: #fecaca; font-size: 12px; font-style: normal; }
.loot-inherit { display: block; margin-top: 2px; color: #a855f7; font-style: normal; font-weight: 900; }

.raid-busy-count { margin: 16px 0; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }

.road-gate { margin-left: 8px; font-size: 12px; font-weight: 700; opacity: .8; white-space: nowrap; }
/* Ranked equipment: compact cards also fit the 375px duel sheet. */
.duel-gear-goal { display:flex; align-items:center; gap:12px; width:100%; padding:12px; margin:0 0 14px; border:1px solid #8a713c; border-radius:14px; background:color-mix(in srgb, var(--brand) 8%, transparent); text-align:left; color:inherit; }
.duel-gear-goal>.wpn { width:52px; height:52px; flex:none; }
.duel-gear-goal>span:nth-child(2) { display:grid; gap:3px; }
.duel-gear-goal b { font-size:19px; }.duel-gear-goal small { font-size:12px; opacity:.8; }.duel-gear-goal em { margin-left:auto; font-size:28px; }
.duel-gear-goal.needed>.wpn { opacity:.42; filter:saturate(.4); }.duel-gear-goal.ready { border-color:#73965b; }
.duel-weapons { display:flex; justify-content:center; gap:8px; margin-top:8px; }.duel-weapons>span { display:grid; justify-items:center; gap:3px; }.duel-weapons .wpn { display:block; width:34px; height:38px; }.duel-weapons small { font-size:11px; white-space:nowrap; }

/* Card actions meet the bottom edge; scrolling never carries the main action away. */
.sheet.has-footer { scrollbar-gutter: auto; }
.sheet.has-footer > .go-bar .primary { min-height: 54px; }
.sheet.has-footer > .go-bar .link { min-height: 40px; padding: 6px 12px; }
.sheet-body .raid-room, .sheet-body .daily-room { gap: 14px; }
.sheet :is(.raid-room, .daily-room) h2.raid-title { padding-inline: 0; letter-spacing: 0.04em; text-wrap: balance; }
.sheet .raid-title .help-btn { display: flex; width: max-content; margin: 8px auto 0; }
.sheet-body .raid-room > :is(.home-btn, .x-btn), .sheet-body .daily-room > :is(.home-btn, .x-btn) { z-index: 3; }
.sheet-body .duel-lobby { padding-bottom: 0; }
.daily-week > span, .daily-tier { min-width: 0; }
.daily-tier { overflow-wrap: anywhere; }
.daily-wheel-tag { flex-wrap: wrap; }

/* Equipment reads as a collection of cards, with power as its main number. */
.gear-power { display: inline-flex; align-items: baseline; justify-content: center; gap: 6px; max-width: 100%; color: var(--au, #9a7010); font-size: 13px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.gear-power strong { font-size: 28px; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.power-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; padding: 16px 30px 16px 18px; margin-top: 0; background: linear-gradient(120deg, color-mix(in srgb, var(--au) 12%, var(--surface)), var(--surface)); text-align: left; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--au) 45%, transparent); }
.power-line .gear-power { justify-content: flex-start; font-size: 15px; }
.power-line .gear-power strong { font-size: 40px; }
.power-line > span:not(.gear-power) { max-width: 9em; font-size: 13px; text-align: right; }
.power-line > small { grid-column: 1 / -1; font-size: 12px; line-height: 1.5; }
.gear-slots { gap: 12px; margin-top: 0; }
.gear-slot { gap: 5px; padding: 12px 8px; border-width: 2px; }
.gear-slot .gear-slot-n { font-size: 14px; }
.gear-slot .gear-name { display: -webkit-box; min-height: 2.6em; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 15px; line-height: 1.3; }
.gear-slot .gear-lv { font-size: 12px; }
.gear-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gear-card { gap: 5px; padding: 14px 8px 12px; border-radius: 18px; }
.gear-card .wpn { width: 64px; height: 64px; }
.gear-card .gear-name { font-size: 14px; line-height: 1.35; }
.gear-card .gear-power strong { font-size: 24px; }
.gear-info .gear-power { justify-content: flex-start; margin: 7px 0 4px; }
.gear-info .gear-power strong { font-size: 32px; }
.gear-slot.aura-slot { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 3px 12px; padding: 14px; margin-top: 0; }
.aura-slot .aura-face { grid-column: 1; grid-row: 1 / 3; }
.aura-slot .gear-slot-n { display: flex; grid-column: 2; align-items: baseline; gap: 8px; width: auto; text-align: left; }
.aura-slot .aura-what { grid-column: 2; }
.aura-slot .gear-name { min-height: 0; }
.aura-slot .gear-power { justify-content: flex-start; }
.gear-stock { flex-wrap: wrap; margin-top: 0; white-space: normal; }
.gc-person .gc-power b { font-size: 24px; }

/* A hero's first Google invitation: their own face, the existing welcome gift, one clear next step. */
.google-invite { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 6px; }
.google-invite-kicker { padding: 4px 12px; border-radius: 999px; background: color-mix(in srgb, var(--au) 14%, transparent); color: var(--au); font-size: 13px; font-weight: 800; }
.google-invite-hero { position: relative; display: grid; place-items: center; isolation: isolate; width: 160px; height: 112px; }
.google-invite-hero .unlock-rays { inset: auto; left: 50%; top: 50%; width: 190px; height: 190px; translate: -50% -50%; opacity: 0.24; z-index: -1; }
.google-invite-hero > .player-tag { width: 108px; height: 108px; }
.google-invite-hero > :is(.face, img) { width: 92px; height: 92px; }
.google-seal { position: absolute; right: 12px; bottom: 7px; display: grid; place-items: center; width: 42px; height: 42px; border: 3px solid var(--surface); border-radius: 50%; background: #e6c367; color: #51380c; box-shadow: 0 4px 16px #0003; }
.google-seal svg { width: 27px; height: 27px; }
.google-invite h2 { padding: 0; font-size: 26px; letter-spacing: 0.03em; }
.google-invite-copy { max-width: 25em; color: var(--ink); font-size: 16px; font-weight: 700; line-height: 1.6; }
.google-welcome-gift { width: 100%; padding: 14px; border: 1px solid color-mix(in srgb, var(--au) 35%, transparent); border-radius: 20px; background: color-mix(in srgb, var(--au) 7%, var(--surface)); }
.sheet .google-welcome-gift h3 { margin-bottom: 12px; text-align: center; font-size: 14px; letter-spacing: 0.06em; }
.google-welcome-gift .mail-gift { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.google-welcome-gift .loot-card { justify-content: center; width: auto; min-width: 0; padding: 10px 6px; border: 1px solid color-mix(in srgb, var(--au) 25%, transparent); border-radius: 14px; background: var(--surface); box-shadow: none; animation: none; }
.google-welcome-gift .loot-icon, .google-welcome-gift .loot-card img { width: 48px; height: 48px; }
.google-welcome-gift .loot-card b { color: var(--au); font-size: 23px; }
.google-welcome-gift .loot-card small { color: var(--ink); font-size: 13px; }
.google-return { max-width: 27em; color: var(--muted); font-size: 14px; line-height: 1.7; }
.go-bar .google-login { width: 100%; }
.go-bar .google-msg:empty { display: none; }

/* One compact chase stage; the card's existing footer owns its action. */
.treasure-sheet { max-width: 420px; }
.treasure-sheet .sheet-body { padding: 22px 18px 12px; gap: 0; }
.treasure-room { position: relative; display: flex; flex-direction: column; gap: 12px; text-align: center; }
.treasure-room h2 { margin: 0 30px 0 0; font-size: 23px; text-align: left; }
.treasure-trail { display: flex; align-items: center; gap: 10px; height: 83px; margin: 24px 22px 0 0; }
.treasure-home { width: 60px; height: 60px; flex: none; filter: drop-shadow(0 0 10px #d6a82b66); }
.treasure-track { position: relative; display: flex; justify-content: space-between; align-items: center; flex: 1; height: 4px; background: linear-gradient(90deg,#e9bd4c,#5f493166); }
.treasure-track i { width: 8px; height: 8px; border-radius: 50%; background: #e9bd4c; }
.treasure-runner { position: absolute; top: -70px; width: 84px; transform: translateX(-50%); transition: left .4s cubic-bezier(.2,.8,.2,1); }
.treasure-monster { width: 100%; height: auto; overflow: visible; }
.treasure-runner .treasure-chest { animation: treasure-hop .7s ease-in-out infinite alternate; transform-origin: 60px 80px; }
.treasure-runner.caught .treasure-chest { animation: treasure-open .8s ease-out both; }
.treasure-target { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 34px; font-size: 14px; font-weight: 700; }
.treasure-target img { width: 35px; height: 35px; filter: drop-shadow(0 0 8px #ffffff55); }
.treasure-target strong { color: var(--gold); font-size: 28px; }
.treasure-stage { width: 100%; min-height: 0; }
.treasure-grid { display: grid; grid-template-columns: repeat(6,1fr); max-width: 312px; margin: auto; padding: 5px; gap: 1px; border-radius: 18px; background: radial-gradient(ellipse at 50% 0,#2b402d,#101b18); touch-action: none; }
.treasure-cell { display: grid; place-items: center; aspect-ratio: 1; min-width: 0; min-height: 0; padding: 3px; border: 0; border-radius: 12px; background: transparent; transition: transform .14s,opacity .14s; touch-action: manipulation; }
.treasure-cell img { width: 100%; pointer-events: none; }
.treasure-cell.selected { background: #f5c14e33; outline: 2px solid #f5c14e; outline-offset: -2px; transform: scale(.94); }
.treasure-cell:focus-visible { outline: 2px solid white; outline-offset: -2px; }
.treasure-cell:disabled { opacity: 1; }
.treasure-cell.popped { transform: scale(1.22); opacity: .2; }
.treasure-cell.miss { animation: treasure-miss .25s ease; }
.treasure-score { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); }
.treasure-score b { font-size: 16px; color: var(--ink); }
.treasure-score strong { color: var(--gold); }
.treasure-status { min-height: 16px; margin: 0; color: #f5c14e; font-size: 12px; }
.treasure-intro { min-height: 210px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.treasure-intro > svg { width: 150px; animation: treasure-hop .7s ease-in-out infinite alternate; }
.treasure-intro > strong { font-size: 20px; }
.treasure-intro > span { color: #f5c14e; display: flex; align-items: center; gap: 6px; font-size: 24px; }
.treasure-intro > span svg { width: 45px; }
.treasure-result { min-height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.treasure-result > svg { width: 155px; opacity: .5; }
.treasure-result.caught > svg { opacity: 1; filter: drop-shadow(0 0 20px #ffcf5677); }
.treasure-result.caught .treasure-chest { animation: treasure-open .8s ease-out both; }
.treasure-result.caught .treasure-lid { transform-origin: 20px 43px; animation: treasure-lid .8s cubic-bezier(.2,.8,.2,1) both; }
.treasure-result p { color: var(--muted); margin: 0; font-size: 14px; }
.treasure-reward { font-size: 34px; color: #f5c14e; text-shadow: 0 0 18px #d8a73455; }
.treasure-reward span { color: #8ac5ff; font-size: 26px; margin-left: 18px; }
.treasure-weapon { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.treasure-weapon .wpn { width: 44px; height: 44px; }
.treasure-fly { position: absolute; z-index: 4; color: #ffe191; font-size: 25px; font-weight: 900; pointer-events: none; text-shadow: 0 0 14px #ffd052; animation: treasure-flight .85s cubic-bezier(.2,.65,.35,1) both; }
.treasure-room.struck .treasure-runner { filter: brightness(1.6) drop-shadow(0 0 14px #ffd052); }
@keyframes treasure-flight { 0% { transform: translate(0,0) scale(.5); opacity: 0; } 20% { transform: translate(var(--scatter),-27px) scale(1.2); opacity: 1; } 45% { transform: translate(var(--scatter),-27px); opacity: 1; } 90% { transform: translate(var(--dx),var(--dy)) scale(.8); opacity: 1; } 100% { transform: translate(var(--dx),var(--dy)) scale(.1); opacity: 0; } }
@keyframes treasure-hop { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-6px) rotate(3deg); } }
@keyframes treasure-open { 30% { transform: translateY(-12px) scale(1.12); } 100% { transform: translateY(-5px) rotate(-8deg); } }
@keyframes treasure-lid { 20% { transform: rotate(8deg); } 65%,100% { transform: rotate(-20deg); } }
@keyframes treasure-miss { 25%,75% { transform: translateX(-3px); } 50% { transform: translateX(3px); } }
@media (max-height: 700px) { .treasure-room { gap: 7px; } .treasure-sheet .sheet-body { padding-top: 18px; } .treasure-grid { max-width: min(285px,35vh); } .treasure-trail { height: 62px; margin-top: 18px; } .treasure-runner { width: 66px; top: -54px; } .treasure-intro,.treasure-result { min-height: 185px; } }
@media (prefers-reduced-motion: reduce) { .treasure-room *, .treasure-room *::before, .treasure-room *::after { animation: none !important; transition: none !important; } }
@media (max-width: 350px) {
  .gc-person .gc-power b { font-size: 22px; }
  .power-line { grid-template-columns: 1fr; }
  .power-line > span:not(.gear-power) { max-width: none; text-align: left; }
  .power-line .gear-power strong { font-size: 36px; }
  .gear-slot .wpn { width: 64px; height: 64px; }
  .daily-week small { display: none; }
}
@media (prefers-reduced-motion: reduce) { .google-invite-hero .unlock-rays { animation: none; } }