/* XHP Level Up — game chrome: header HUD, boss raid strip, chests, banner,
   menu, walkthrough and motion. Ported from the approved clickable preview
   (2026-10-07). Portal tokens come from fulfillment.css; the game layer adds
   gold (#d97706, chests/levels/rewards only), the text-safe amber #b45309,
   streak flame #ea580c, boss HP red #dc2626 and the slate raid strip.

   Every selector is scoped to lu-* classes/ids or the html.lu-* state classes
   set only while the game is mounted, so a portal without the level_up
   capability renders exactly as before. Page sections: level-up-page.css. */

:root {
  --lu-gold: #d97706;
  --lu-gold-ink: #92400e;
  --lu-gold-bg: #fffbeb;
  --lu-gold-border: #fcd34d;
  --lu-flame: #ea580c;
  --lu-flame-ink: #9a3412;
  --lu-flame-bg: #fff7ed;
  --lu-flame-border: #fed7aa;
  --lu-hp: #dc2626;
  --lu-hp-ink: #b91c1c;
  --lu-strip: #0f172a;
  --lu-slate: #475569;
  --lu-ease-out: cubic-bezier(.2,.8,.2,1);
  --lu-ease-pop: cubic-bezier(.2,1.6,.4,1);
}

.lu-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lu-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.lu-hud [hidden], .lu-raid [hidden], .lu-layer [hidden], #my-bonus-view [hidden],
.lu-hud-slot[hidden], .lu-bar[hidden] { display: none !important; }

/* ───────── Mount points (index.html) ───────── */
.header.lu-has-hud .lu-hud-slot { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; margin: -4px 18px; }
.lu-bar { position: relative; z-index: 9; flex-shrink: 0; }
.lu-hud-mslot:empty { display: none; }
.lu-hud-mslot:not(:empty) { background: var(--surface); border-bottom: 1px solid var(--border); padding: 7px 24px; }
/* Both HUD slots are size containers: the HUD reads the room it gets. */
.lu-hud-slot, .lu-hud-mslot { container-type: inline-size; container-name: luhud; }

/* ───────── HUD: the portal header as a game display ───────── */
.lu-hud {
  display: flex; align-items: center; gap: 12px; width: 100%; max-width: 1120px; min-width: 0;
  font-family: var(--font); color: var(--text);
}
.lu-hud button { font-family: inherit; }
.lu-hud :focus-visible, .lu-layer :focus-visible, #my-bonus-view :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.lu-lvl {
  flex: 1 1 360px; min-width: 0; max-width: 480px; display: flex; align-items: center; gap: 10px;
  padding: 4px 8px; margin: -4px 0; border-radius: var(--radius); color: inherit; text-decoration: none; transition: background .15s;
}
.lu-lvl:hover { background: #f5f7fa; }
.lu-shield { position: relative; width: 34px; height: 38px; flex-shrink: 0; display: grid; place-items: center; }
.lu-shield svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lu-shield-n { position: relative; color: #fff; font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; margin-top: -3px; }
.lu-lvl-main { flex: 1; min-width: 0; display: block; }
.lu-lvl-top { display: block; font-size: 12.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 5px; font-variant-numeric: tabular-nums; line-height: 1.5; }
.lu-lvl-top b { color: var(--text); font-weight: 800; }
.lu-lvl-top .g { color: var(--lu-gold-ink); font-weight: 800; }
.lu-sep { color: var(--text-faint); padding: 0 1px; }
.lu-lvl-track { position: relative; display: block; height: 10px; border-radius: 999px; background: #e7ebf1; box-shadow: inset 0 1px 2px rgba(15,23,42,.14); overflow: hidden; }
.lu-lvl-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px; overflow: hidden;
  background: linear-gradient(180deg, #4b83f5 0%, #2563eb 55%, #1d4ed8 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.lu-lvl-fill.gold-flash, .lu-lvl-fill.done { background: linear-gradient(180deg, #fcd34d 0%, var(--lu-gold) 55%, #b45309 100%); }
.lu-lvl-sheen { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; background: linear-gradient(100deg, transparent 25%, rgba(255,255,255,.65) 50%, transparent 75%); transform: translateX(-110%); pointer-events: none; }
.lu-help-btn { width: 24px; height: 24px; flex-shrink: 0; margin-left: -8px; border-radius: 50%; border: 1px solid var(--blue-border); background: var(--blue-bg); color: var(--accent-hover); font: 800 13px/1 var(--font); cursor: pointer; padding: 0; }
.lu-help-btn:hover { background: #dbeafe; }

.lu-hchips { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.lu-hchip {
  display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px 0 7px; border: 1px solid var(--border);
  border-radius: 999px; background: var(--surface); color: var(--text); font: 700 12.5px/1 var(--font); font-variant-numeric: tabular-nums;
  text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .15s, border-color .15s;
}
.lu-hchip:hover { background: #f5f7fa; }
.lu-hchip svg { width: 18px; height: 18px; flex-shrink: 0; }
.lu-hchip b { font-weight: 700; }
.lu-hc-l { color: var(--text-muted); font-weight: 600; }
.lu-hc-ic { display: inline-flex; color: var(--text-muted); }
.lu-hchip.flame .lu-hc-ic { color: var(--lu-flame); }
.lu-hchip.flame.cold .lu-hc-ic { color: #9ca3af; }
.lu-hchip.done .lu-hc-ic { color: var(--green-ink); }
.lu-hchip.chest { background: var(--lu-gold-bg); border-color: var(--lu-gold-border); color: var(--lu-gold-ink); }
.lu-hchip.chest .lu-hc-l { color: var(--lu-gold-ink); }
.lu-hchip.chest:hover { background: #fef3c7; }
.lu-hchip.chest.boss { box-shadow: 0 0 0 2px var(--lu-gold-border); }
.lu-hchip.assign .lu-hc-ic { color: var(--lu-gold-ink); }
.lu-hc-chest-m { display: none; }
.lu-pips { display: inline-flex; gap: 2px; align-items: center; }
.lu-pips i { width: 5px; height: 12px; border-radius: 2px; background: #e5e7eb; }
.lu-pips i.on { background: var(--lu-gold); }

.lu-est { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; text-decoration: none; color: inherit; padding: 3px 6px; margin-left: auto; border-radius: 6px; line-height: 1.15; transition: background .15s; }
.lu-est:hover { background: #f5f7fa; }
.lu-est-l { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.lu-est .lu-od { font-size: 18px; font-weight: 800; color: var(--text); letter-spacing: -0.01em; }
.lu-est-un { font-size: 10px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.lu-gm-btn {
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; padding: 0;
}
.lu-gm-btn:hover { background: #f5f7fa; }
.lu-gm-btn svg { width: 18px; height: 18px; }

/* Odometer (rolling digits) */
.lu-od { display: inline-flex; font-variant-numeric: tabular-nums; line-height: 1.2; height: 1.2em; overflow: hidden; }
.lu-od-c, .lu-od-d { display: inline-block; height: 1.2em; }
.lu-od-d { overflow: hidden; }
.lu-od-s { display: flex; flex-direction: column; will-change: transform; }
.lu-od-s span { display: block; height: 1.2em; line-height: 1.2em; text-align: center; }

/* The HUD sizes itself to the room the header leaves it (container queries):
   the level bar keeps its room first; chips fold away, chests waiting never do. */
@container luhud (max-width: 1040px) { .lu-hc-l { display: none; } .lu-hchip { padding: 0 9px 0 7px; } .lu-hchips { gap: 4px; } }
@container luhud (max-width: 860px) { .lu-hchip.assign .lu-pips { display: none; } }
@container luhud (max-width: 760px) { #lu-hc-assign, #lu-hc-quest { display: none; } }
@container luhud (max-width: 600px) {
  .lu-hchips { display: none; }
  .lu-hc-chest-m:not([hidden]) { display: inline-flex; padding: 0 8px 0 6px; }
}
@container luhud (max-width: 480px) {
  .lu-hud { gap: 8px; }
  .lu-lvl { flex: 1 1 auto; max-width: none; padding: 2px 4px; margin: 0; gap: 8px; }
  .lu-lvl-top { font-size: 11.5px; }
  .lu-help-btn { margin-left: -4px; }
  .lu-has-chest .lu-lt-to { display: none; }
  .lu-est { padding: 2px 0; }
  .lu-est .lu-od { font-size: 16px; }
  .lu-gm-btn { width: 28px; border-color: transparent; }
}
@container luhud (max-width: 420px) { .lu-help-btn { display: none; } } /* "How the game works" stays in the ⋯ menu */
@container luhud (max-width: 360px) { .lu-lvl-top { font-size: 11px; } .lu-shield { width: 30px; height: 34px; } }

/* ───────── Team raid strip: boss HP, top hitters, live feed, combo ───────── */
.lu-raid { position: relative; display: flex; align-items: center; gap: 14px; min-height: 54px; padding: 6px 24px; background: var(--lu-strip); color: #e2e8f0; font: 12.5px/1.5 var(--font); }
.lu-raid button { font-family: inherit; }
.lu-raid :focus-visible { outline: 2px solid #93c5fd; outline-offset: 0; }
.lu-raid-btn { display: flex; align-items: center; gap: 12px; flex: 0 1 auto; min-width: 0; background: none; border: 0; color: inherit; padding: 4px 8px; margin: -4px -8px; border-radius: 8px; cursor: pointer; text-align: left; font: inherit; }
.lu-raid-btn:hover { background: rgba(255,255,255,.06); }
.lu-raid-name { display: flex; flex-direction: column; line-height: 1.25; white-space: nowrap; flex-shrink: 0; }
.lu-raid-name b { color: #f8fafc; font-size: 13.5px; font-weight: 800; letter-spacing: -0.01em; }
.lu-raid-name b small { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fcd34d; margin-left: 6px; }
.lu-raid-name b small.lu-raid-mo { color: #94a3b8; font-weight: 700; }
.lu-raid-rew { color: #fcd34d; font-size: 11.5px; font-weight: 700; }
.lu-raid-hp { position: relative; display: flex; flex-direction: column; gap: 4px; width: 260px; flex-shrink: 0; }
.lu-raid-track { position: relative; display: block; height: 14px; border-radius: 999px; background: #1e293b; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); overflow: hidden; }
.lu-raid-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, #dc2626 0%, #ea580c 55%, #f59e0b 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.28); }
.lu-raid.down .lu-raid-fill { background: linear-gradient(90deg, #d97706 0%, #f59e0b 50%, #fcd34d 100%); }
.lu-raid-txt { font-size: 11.5px; color: #cbd5e1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lu-raid-txt b { color: #f8fafc; font-weight: 800; }
.lu-raid-mhp { display: none; font-weight: 800; color: #f8fafc; font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lu-raid-top { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.lu-raid-top-l { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #94a3b8; white-space: nowrap; }
.lu-raid-avs { display: flex; align-items: center; }
.lu-rav { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; letter-spacing: -0.02em; font-weight: 800; color: #fff; box-shadow: 0 0 0 2px var(--lu-strip); margin-left: -7px; flex-shrink: 0; }
.lu-raid-avs .lu-rav { width: 28px; height: 28px; margin-left: -5px; }
.lu-raid-avs .lu-rav:first-child { margin-left: 0; }
.lu-rav.two { font-size: 9.5px; letter-spacing: -0.03em; }
.lu-rav.me { box-shadow: 0 0 0 2px var(--lu-strip), 0 0 0 4px #60a5fa; position: relative; z-index: 1; }
.lu-rav-more { margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: #1e293b; color: #cbd5e1; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lu-raid.down .lu-raid-emb { color: #fcd34d; }
.lu-raid-dd { position: absolute; top: calc(100% + 6px); left: 12px; z-index: 75; width: min(400px, calc(100vw - 24px)); max-height: 62vh; overflow: auto; background: #fff; color: var(--text); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 18px 40px rgba(15,23,42,.2); padding: 12px 14px; }
.lu-raid-dd h2 { margin: 0 0 4px; font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.lu-raid-dd :focus-visible { outline-color: var(--accent); }
.lu-btn-link { margin-top: 10px; border: 0; background: none; padding: 2px 0; color: var(--accent-hover); font: 700 13px var(--font); cursor: pointer; text-decoration: underline; }
.lu-you-dealt { margin: 0 0 8px; font-size: 14px; }
.lu-you-dealt b { font-variant-numeric: tabular-nums; }
.lu-ctrs { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lu-ctr { display: grid; grid-template-columns: 20px 24px minmax(0, 1fr) minmax(40px, 1.1fr) 84px; gap: 8px; align-items: center; padding: 3px 6px; border-radius: 6px; font-size: 13px; }
.lu-ctr.you { background: var(--blue-bg); box-shadow: inset 3px 0 0 var(--accent); }
.lu-ctr-r { font-size: 11px; font-weight: 700; color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }
.lu-ctr .lu-rav { width: 24px; height: 24px; font-size: 10.5px; box-shadow: none; margin: 0; }
.lu-ctr-n { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lu-ctr-n .lu-pill { margin-left: 6px; }
.lu-ctr-bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.lu-ctr-bar i { display: block; height: 100%; border-radius: 999px; background: #64748b; }
.lu-ctr.you .lu-ctr-bar i { background: var(--accent); }
.lu-ctr-v { font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.lu-ctr-v small { font-weight: 600; color: var(--text-muted); font-size: 11px; margin-left: 4px; display: inline-block; min-width: 26px; }

.lu-tk { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.lu-tk-live { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #94a3b8; flex-shrink: 0; }
.lu-tk-live i { width: 7px; height: 7px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.25); }
.lu-tk-msg { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lu-tk-msg b { color: #fcd34d; font-weight: 700; }
.lu-tk-msg .you { color: #93c5fd; font-weight: 700; }
.lu-tk-msg .lu-tk-ago { color: #94a3b8; font-weight: 500; }
.lu-combo { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 2px 10px; height: 24px; border-radius: 999px; background: #1e293b; color: #e2e8f0; font-weight: 700; font-size: 12px; }
.lu-combo b { color: #fcd34d; font-size: 13px; font-variant-numeric: tabular-nums; }
.lu-combo-track { width: 64px; height: 4px; border-radius: 2px; background: #334155; overflow: hidden; }
.lu-combo-track i { display: block; height: 100%; width: 100%; background: #fbbf24; border-radius: 2px; }
.lu-combo-time { color: #cbd5e1; font-size: 11px; font-variant-numeric: tabular-nums; min-width: 28px; font-weight: 600; }
.lu-tk-btn, .lu-raid-min-btn { width: 28px; height: 28px; border: 0; background: transparent; color: #cbd5e1; display: inline-grid; place-items: center; border-radius: 6px; cursor: pointer; flex-shrink: 0; padding: 0; }
.lu-tk-btn { width: 24px; height: 24px; }
.lu-tk-btn:hover, .lu-raid-min-btn:hover { background: #1e293b; color: #fff; }
.lu-tk-btn svg { width: 14px; height: 14px; }
.lu-raid-min-btn svg { width: 16px; height: 16px; }
.lu-raid-tick { position: absolute; top: -3px; width: 3px; height: 13px; margin-left: -1.5px; border-radius: 2px; background: #fde68a; opacity: 0; pointer-events: none; }
.lu-raid-tick.you { background: #93c5fd; }
.lu-assign-m { display: none; align-items: center; gap: 4px; flex-shrink: 0; height: 24px; padding: 0 8px; border-radius: 999px; background: #1e293b; color: #fcd34d; font-size: 12px; font-weight: 800; text-decoration: none; font-variant-numeric: tabular-nums; }
.lu-assign-m svg { width: 14px; height: 14px; }

/* Cute boss monster (decorative, aria-hidden). Moods switch layers by opacity; motion is transform/opacity only. */
.lu-mon-stage { position: relative; display: inline-block; flex-shrink: 0; }
.lu-mon-stage.strip { width: 48px; height: 48px; margin: -4px 0; }
.lu-mon-stage.big { width: 132px; height: 132px; border-radius: 50%; background: radial-gradient(circle at 50% 64%, var(--mk-stage-a, #ffe4e6) 0%, var(--mk-stage-b, #fff1f2) 45%, rgba(255,255,255,0) 70%); }
.lu-mon { display: block; width: 100%; height: 100%; overflow: visible; }
.lu-mon .m-shadow { fill: rgba(0,0,0,.22); }
.lu-mon .m-horn { fill: var(--mk-horn, #fde68a); stroke: var(--mk-horn-ink, #92400e); stroke-width: 2.5; stroke-linejoin: round; }
.lu-mon .m-limb { fill: var(--mk-limb, #f43f5e); stroke: var(--mk-ink, #9f1239); stroke-width: 2.5; }
.lu-mon .m-skin { fill: var(--mk-skin, #fb7185); stroke: var(--mk-ink, #9f1239); stroke-width: 3; stroke-linejoin: round; }
.lu-mon .m-belly { fill: var(--mk-belly, #ffe4e6); }
.lu-mon .m-tint { fill: #dc2626; opacity: 0; }
.lu-mon .m-cheek { fill: var(--mk-cheek, #e11d48); opacity: var(--mk-cheek-o, .35); }
.lu-mon .m-eyew { fill: #fff; stroke: #1f2937; stroke-width: 2.5; }
.lu-mon .m-pupil { fill: #1f2937; }
.lu-mon .m-glint { fill: #fff; }
.lu-mon .m-line { fill: none; stroke: #1f2937; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.lu-mon .e-d { stroke-width: 2.2; }
.lu-mon .m-mouth { fill: var(--mk-mouth, #7f1d1d); }
.lu-mon .m-tooth { fill: #fff; }
.lu-mon .m-sweat { fill: #bae6fd; stroke: #0369a1; stroke-width: 1.5; }
.lu-mon .m-band rect { fill: #fef3c7; stroke: #b45309; stroke-width: 1.5; }
.lu-mon .m-band path { stroke: #d97706; stroke-width: 1.5; }
.lu-mon .m-stick { stroke: #78350f; stroke-width: 2.5; stroke-linecap: round; fill: none; }
.lu-mon .m-cloth { fill: #fff; stroke: #94a3b8; stroke-width: 1.2; }

/* Monthly boss skins (level-up-render.js SKIN_ART): one rig, a palette per month.
   The class sits on the SVG and on its stage, so the big stage tints too.
   --mk-skin/ink/belly/limb/cheek/mouth: body; --mk-horn(-ink): silhouette decor;
   --mk-acc(-ink)/acc2/stem: props; --mk-amb: ambient particles; --mk-stage-a/b: big stage. */
.lu-mon.skin-frostbite, .lu-mon-stage.skin-frostbite { --mk-skin: #bae6fd; --mk-ink: #0c4a6e; --mk-belly: #f0f9ff; --mk-limb: #7dd3fc; --mk-cheek: #f472b6; --mk-cheek-o: .5; --mk-mouth: #0c4a6e; --mk-horn: #ecfeff; --mk-horn-ink: #0e7490; --mk-acc: #ffffff; --mk-amb: #38bdf8; --mk-stage-a: #cffafe; --mk-stage-b: #ecfeff; }
.lu-mon.skin-heartbreaker, .lu-mon-stage.skin-heartbreaker { --mk-skin: #f472b6; --mk-ink: #831843; --mk-belly: #fce7f3; --mk-limb: #ec4899; --mk-cheek: #be123c; --mk-cheek-o: .4; --mk-mouth: #831843; --mk-horn: #f43f5e; --mk-horn-ink: #881337; --mk-acc: #fb7185; --mk-amb: #fb7185; --mk-stage-a: #fce7f3; --mk-stage-b: #fdf2f8; }
.lu-mon.skin-clover, .lu-mon-stage.skin-clover { --mk-skin: #4ade80; --mk-ink: #14532d; --mk-belly: #dcfce7; --mk-limb: #22c55e; --mk-cheek: #f472b6; --mk-cheek-o: .5; --mk-mouth: #14532d; --mk-horn: #86efac; --mk-horn-ink: #14532d; --mk-acc: #16a34a; --mk-acc-ink: #14532d; --mk-acc2: #bbf7d0; --mk-stem: #166534; --mk-amb: #4ade80; --mk-stage-a: #dcfce7; --mk-stage-b: #f0fdf4; }
.lu-mon.skin-drizzle, .lu-mon-stage.skin-drizzle { --mk-skin: #94a3b8; --mk-ink: #1e293b; --mk-belly: #e2e8f0; --mk-limb: #64748b; --mk-cheek: #f9a8d4; --mk-cheek-o: .6; --mk-mouth: #1e293b; --mk-horn: #60a5fa; --mk-horn-ink: #1e3a8a; --mk-amb: #60a5fa; --mk-stage-a: #e2e8f0; --mk-stage-b: #f1f5f9; }
.lu-mon.skin-bloomzilla, .lu-mon-stage.skin-bloomzilla { --mk-skin: #c084fc; --mk-ink: #581c87; --mk-belly: #f3e8ff; --mk-limb: #a855f7; --mk-cheek: #f472b6; --mk-cheek-o: .55; --mk-mouth: #581c87; --mk-horn: #f9a8d4; --mk-horn-ink: #9d174d; --mk-acc2: #fde047; --mk-acc-ink: #a16207; --mk-amb: #f9a8d4; --mk-stage-a: #f3e8ff; --mk-stage-b: #faf5ff; }
.lu-mon.skin-sunscorch, .lu-mon-stage.skin-sunscorch { --mk-skin: #fde047; --mk-ink: #9a3412; --mk-belly: #fef9c3; --mk-limb: #facc15; --mk-cheek: #f97316; --mk-cheek-o: .45; --mk-mouth: #9a3412; --mk-horn: #fb923c; --mk-horn-ink: #9a3412; --mk-stage-a: #ffedd5; --mk-stage-b: #fff7ed; }
.lu-mon.skin-firecracker, .lu-mon-stage.skin-firecracker { --mk-skin: #f87171; --mk-ink: #7f1d1d; --mk-belly: #fee2e2; --mk-limb: #ef4444; --mk-cheek: #b91c1c; --mk-cheek-o: .35; --mk-mouth: #7f1d1d; --mk-horn: #fecaca; --mk-horn-ink: #7f1d1d; --mk-acc: #fde047; --mk-acc-ink: #ea580c; --mk-stem: #78350f; --mk-amb: #fb923c; --mk-stage-a: #fee2e2; --mk-stage-b: #fef2f2; }
.lu-mon.skin-kraken, .lu-mon-stage.skin-kraken { --mk-skin: #2dd4bf; --mk-ink: #134e4a; --mk-belly: #ccfbf1; --mk-limb: #14b8a6; --mk-cheek: #f472b6; --mk-cheek-o: .5; --mk-mouth: #134e4a; --mk-horn: #99f6e4; --mk-horn-ink: #134e4a; --mk-amb: #5eead4; --mk-stage-a: #ccfbf1; --mk-stage-b: #f0fdfa; }
.lu-mon.skin-parol, .lu-mon-stage.skin-parol { --mk-skin: #60a5fa; --mk-ink: #1e3a8a; --mk-belly: #dbeafe; --mk-limb: #3b82f6; --mk-cheek: #f472b6; --mk-cheek-o: .55; --mk-mouth: #1e3a8a; --mk-horn: #ef4444; --mk-horn-ink: #7f1d1d; --mk-acc: #fff7ed; --mk-amb: #fef9c3; --mk-stage-a: #dbeafe; --mk-stage-b: #eff6ff; }
.lu-mon.skin-pumpkin, .lu-mon-stage.skin-pumpkin { --mk-skin: #fb923c; --mk-ink: #7c2d12; --mk-belly: #fdba74; --mk-limb: #f97316; --mk-cheek: #dc2626; --mk-cheek-o: .3; --mk-mouth: #431407; --mk-horn: #65a30d; --mk-horn-ink: #365314; --mk-stem: #4d7c0f; --mk-acc: #a78bfa; --mk-acc-ink: #4c1d95; --mk-acc2: #f0abfc; --mk-rib: #c2410c; --mk-amb: #a78bfa; --mk-stage-a: #ede9fe; --mk-stage-b: #f5f3ff; }
.lu-mon.skin-wisp, .lu-mon-stage.skin-wisp { --mk-skin: #fdf4e3; --mk-ink: #7c2d12; --mk-belly: #ffffff; --mk-limb: #fde7c7; --mk-cheek: #fb923c; --mk-cheek-o: .45; --mk-mouth: #7c2d12; --mk-horn: #c2410c; --mk-horn-ink: #7c2d12; --mk-acc: #fb923c; --mk-acc-ink: #c2410c; --mk-acc2: #fde047; --mk-amb: #fdba74; --mk-stage-a: #e0e7ff; --mk-stage-b: #eef2ff; }
.lu-mon.skin-golem, .lu-mon-stage.skin-golem { --mk-skin: #d4935a; --mk-ink: #5c2a0b; --mk-belly: #efc08a; --mk-limb: #c27c46; --mk-cheek: #ef4444; --mk-cheek-o: .35; --mk-mouth: #5c2a0b; --mk-horn: #16a34a; --mk-horn-ink: #14532d; --mk-amb: #ffffff; --mk-stage-a: #e0f2fe; --mk-stage-b: #f0f9ff; }
/* Skin decor (fills follow the palette above) */
.lu-mon .k-skin { fill: var(--mk-skin); stroke: var(--mk-ink); stroke-width: 2.5; stroke-linejoin: round; }
.lu-mon .k-light { fill: #fff; stroke: var(--mk-ink); stroke-width: 2; stroke-linejoin: round; }
.lu-mon .k-acc { fill: var(--mk-acc); stroke: var(--mk-acc-ink, var(--mk-ink)); stroke-width: 2; stroke-linejoin: round; }
.lu-mon .k-acc2 { fill: var(--mk-acc2); stroke: var(--mk-acc-ink, var(--mk-ink)); stroke-width: 1.2; }
.lu-mon .k-ln { fill: none; stroke: var(--mk-ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.lu-mon .k-thin { stroke-width: 1.6; opacity: .45; }
.lu-mon .k-ln-acc { fill: none; stroke: var(--mk-stem, var(--mk-ink)); stroke-width: 2.6; stroke-linecap: round; }
.lu-mon .k-lt { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lu-mon .k-dark { fill: #1e293b; stroke: var(--mk-ink); stroke-width: 1.2; }
.lu-mon .k-dark-ln { fill: none; stroke: #1e293b; stroke-width: 2.2; stroke-linecap: round; }
.lu-mon .k-amb { fill: var(--mk-amb); }
.lu-mon .k-bub { fill: rgba(255,255,255,.18); stroke: var(--mk-amb); stroke-width: 1.6; }
.lu-mon .k-snow { fill: #fff; stroke: #93c5fd; stroke-width: .8; }
.lu-mon .k-rib { fill: none; stroke: var(--mk-rib); stroke-width: 2.2; stroke-linecap: round; opacity: .85; }
.lu-mon .k-band { fill: #fef3c7; stroke: var(--mk-ink); stroke-width: 1.5; }
.lu-mon .k-to { fill: none; stroke: var(--mk-ink); stroke-width: 9.5; stroke-linecap: round; stroke-linejoin: round; }
.lu-mon .k-tf { fill: none; stroke: var(--mk-limb); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.lu-mon .k-ring { fill: none; stroke: var(--mk-acc); stroke-width: 1.8; opacity: .75; }
.lu-mon .k-dish-h { fill: none; stroke: var(--mk-ink); stroke-width: 2.2; stroke-linecap: round; }
.lu-mon .k-swirl { fill: none; stroke: var(--mk-belly); stroke-width: 2; stroke-linecap: round; }
.lu-mon .k-gum, .lu-mon .k-berry { fill: #ef4444; stroke: var(--mk-ink); stroke-width: 1; }
.lu-mon .k-gum-g { fill: #22c55e; }
.lu-mon.skin-heartbreaker .m-horn { stroke-width: 1.8; }
.lu-mon.skin-bloomzilla .m-horn { stroke-width: 1.5; }
.lu-mon.skin-sunscorch .m-horn { stroke-width: 2; }
.lu-mon.skin-golem .m-horn { stroke-width: 1.6; }
.lu-mon.skin-wisp .m-horn { stroke-width: 2; }
.lu-mon .k-acc, .lu-mon .k-acc2 { paint-order: stroke; }
/* Idle decor pivots (the loops themselves are in the motion block) */
.lu-mon .m-idle { transform-box: fill-box; transform-origin: 50% 50%; }
.lu-mon .k-ant-l, .lu-mon .k-ear-l { transform-origin: 100% 100%; }
.lu-mon .k-ant-r, .lu-mon .k-ear-r { transform-origin: 0% 100%; }
.lu-mon .k-tuft, .lu-mon .k-crest, .lu-mon .k-crown, .lu-mon .k-flame, .lu-mon .k-holly { transform-origin: 50% 100%; }
.lu-mon .k-tents { transform-origin: 50% 0%; }
.lu-mon .k-rays { transform-box: view-box; transform-origin: 50px 54px; }
.lu-mon .k-star { transform-box: view-box; transform-origin: 50px 51px; }
.lu-mon .g-box { fill: #d97706; stroke: #92400e; stroke-width: 2; }
.lu-mon .g-lid { fill: #f59e0b; stroke: #92400e; stroke-width: 2; }
.lu-mon .g-rib { fill: #dc2626; }
.lu-mon .g-bow { fill: #ef4444; stroke: #991b1b; stroke-width: 1.5; }
.lu-mon .gh-body { fill: rgba(241,245,249,.94); stroke: #94a3b8; stroke-width: 2.5; }
.lu-mon .gh-mouth { fill: #475569; }
.lu-mon .m-smoke circle { fill: #cbd5e1; }
.lu-mon .m-stars path { fill: #fcd34d; stroke: #b45309; stroke-width: 1; }
.lu-mon .e-o, .lu-mon .e-d, .lu-mon .e-c, .lu-mon .b-w, .lu-mon .mo-w, .lu-mon .mo-o, .lu-mon .m-sweat, .lu-mon .m-band, .lu-mon .m-wflag,
.lu-mon .m-gift, .lu-mon .m-ghost, .lu-mon .m-smoke, .lu-mon .m-stars { opacity: 0; }
.lu-mon.mood-worried .b-c, .lu-mon.mood-worried .mo-g { opacity: 0; }
.lu-mon.mood-worried .b-w, .lu-mon.mood-worried .mo-w, .lu-mon.mood-worried .m-sweat { opacity: 1; }
.lu-mon.mood-dizzy .e-n, .lu-mon.mood-flag .e-n, .lu-mon.mood-dizzy .b-c, .lu-mon.mood-flag .b-c, .lu-mon.mood-dizzy .mo-g, .lu-mon.mood-flag .mo-g { opacity: 0; }
.lu-mon.mood-dizzy .e-d, .lu-mon.mood-flag .e-d, .lu-mon.mood-dizzy .mo-w, .lu-mon.mood-flag .mo-w, .lu-mon.mood-dizzy .m-band, .lu-mon.mood-flag .m-band,
.lu-mon.mood-flag .m-wflag, .lu-mon.mood-flag .m-sweat { opacity: 1; }
.lu-mon.mood-gift .m-all, .lu-mon.mood-gift .m-shadow, .lu-mon.mood-ghost .m-all { opacity: 0; }
.lu-mon.mood-gift .m-gift, .lu-mon.mood-ghost .m-ghost { opacity: 1; }
.lu-mon.ouch .e-n, .lu-mon.ouch .e-d, .lu-mon.ouch .mo-g, .lu-mon.ouch .mo-w { opacity: 0; }
.lu-mon.ouch .e-o, .lu-mon.ouch .mo-o { opacity: 1; }
.lu-mon.faint .e-n, .lu-mon.faint .e-d, .lu-mon.faint .e-o { opacity: 0; }
.lu-mon.faint .e-c { opacity: 1; }
.lu-mon .m-all, .lu-mon .m-body, .lu-mon .e-n, .lu-mon .m-gift, .lu-mon .m-ghost, .lu-mon .m-smoke, .lu-mon .m-stars { transform-box: view-box; }
.lu-mon .m-all, .lu-mon .m-body { transform-origin: 50px 90px; }
.lu-mon .e-n { transform-origin: 50px 45px; }
.lu-mon .m-gift { transform-origin: 50px 88px; }
.lu-mon .m-smoke { transform-origin: 50px 70px; }
.lu-mon .m-stars { transform-origin: 50px 45px; }
.lu-mon-fx { position: absolute; inset: 0; pointer-events: none; }
.lu-dmg { position: absolute; left: 50%; top: -6px; padding: 0 6px; border-radius: 999px; background: #334155; color: #fff; font: 800 11px/1.5 var(--font); white-space: nowrap; opacity: 0; transform: translate(-50%, 0); font-variant-numeric: tabular-nums; z-index: 2; }
.lu-dmg.you { background: var(--accent); font-size: 13px; padding: 0 8px; }
.lu-imp { position: absolute; left: 27%; top: 22%; width: 46%; height: 46%; opacity: 0; z-index: 1; }
.lu-imp svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.imp-stars { color: #fcd34d; } .imp-paw { color: #fde68a; } .imp-fist { color: #fdba74; } .imp-sword { color: #e2e8f0; }
.lu-mon-stage.big .imp-stars { color: #f59e0b; } .lu-mon-stage.big .imp-paw { color: #b45309; } .lu-mon-stage.big .imp-fist { color: #c2410c; } .lu-mon-stage.big .imp-sword { color: #475569; }
.lu-imp.you { color: #60a5fa; }
.lu-mon-stage.big .lu-imp.you { color: var(--accent); }
.lu-gift-pop { position: absolute; left: 50%; top: -10px; transform: translateX(-50%); padding: 1px 8px; border-radius: 999px; background: var(--amber-ink); color: #fff; font: 800 11.5px/1.5 var(--font); white-space: nowrap; z-index: 3; }
.lu-mon-stage.big .lu-gift-pop { font-size: 14px; top: -4px; }

/* Boss chest: the gift box is a real button wherever the monster turns into one */
.lu-raid-mw { position: relative; display: flex; align-items: center; flex-shrink: 0; }
.lu-gift-btn { position: absolute; inset: -4px; border: 0; background: transparent; border-radius: 12px; cursor: pointer; padding: 0; z-index: 2; }
.lu-gift-btn:hover { background: rgba(252,211,77,.14); }
.lu-gift-btn:focus-visible { outline: 2px solid #fcd34d; outline-offset: 2px; }
.lu-gift-btn.big:focus-visible { outline-color: var(--accent); }
.lu-gift-btn::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; border: 2px solid #fcd34d; opacity: 0; pointer-events: none; }
.lu-gift-tap { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); padding: 0 6px; border-radius: 999px; background: var(--amber-ink); color: #fff; font: 800 9.5px/1.55 var(--font); white-space: nowrap; pointer-events: none; }
.lu-gift-btn.big .lu-gift-tap { font-size: 12px; bottom: -2px; padding: 1px 9px; }
html.lu-raidmin .lu-gift-btn { inset: -3px -96px -3px -3px; border-radius: 999px; }
html.lu-raidmin .lu-gift-tap { left: calc(100% - 92px); bottom: auto; top: 50%; transform: translateY(-50%); font-size: 10.5px; }
html.lu-raidmin .lu-raid.gift-ready .lu-raid-btn { margin-left: 92px; }

/* Team banner (boss defeated): fixed under the game bar */
.lu-raid-banner { position: fixed; z-index: 95; top: var(--lu-top, 0px); left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 56px 10px 20px; background: linear-gradient(90deg, #78350f, #92400e 50%, #78350f); color: #fff; box-shadow: 0 10px 24px rgba(15,23,42,.25); font-family: var(--font); }
.lu-raid-banner .lu-mon-stage { width: 40px; height: 40px; margin: 0; }
.lu-raid-banner strong { display: block; font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
.lu-raid-banner .lu-sub2 { display: block; font-size: 13px; color: #fef3c7; }
.lu-rb-open { flex-shrink: 0; }
.lu-rb-x { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: 0; border-radius: 6px; background: rgba(0,0,0,.25); color: #fff; cursor: pointer; display: grid; place-items: center; padding: 0; }
.lu-rb-x svg { width: 14px; height: 14px; }
.lu-raid-banner :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
body.lu-banner-open .lu-toasts, body.lu-banner-open .lu-drop:not(.big) { top: calc(var(--lu-top, 0px) + var(--lu-banner-h, 64px) + 10px); }

.lu-btn-gold { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--amber-ink); color: #fff; border: 0; border-radius: 6px; padding: 8px 14px; font: 700 13px/1.2 var(--font); cursor: pointer; }
.lu-btn-gold:hover { background: var(--lu-gold-ink); }
.lu-btn-gold[disabled] { opacity: .55; cursor: not-allowed; }
.lu-btn-gold:focus-visible { outline: 2px solid var(--lu-gold-ink); outline-offset: 2px; }

/* Compact header + minimized raid (html classes). Chests waiting stay visible: it's money. */
html.lu-compact .lu-hchips > :not(#lu-hc-chest), html.lu-compact .lu-combo, html.lu-compact .lu-assign-m { display: none !important; }
html.lu-raidmin .lu-raid { min-height: 30px; padding-top: 1px; padding-bottom: 1px; }
html.lu-raidmin .lu-raid-name, html.lu-raidmin .lu-raid-top, html.lu-raidmin .lu-raid-txt, html.lu-raidmin .lu-tk,
html.lu-raidmin .lu-tk-btn, html.lu-raidmin .lu-combo, html.lu-raidmin .lu-assign-m { display: none !important; }
html.lu-raidmin .lu-raid-btn { flex: 1 1 auto; gap: 8px; margin: 0; padding: 2px 4px; }
html.lu-raidmin .lu-raid-hp { flex: 1 1 auto; width: auto; }
html.lu-raidmin .lu-raid-track { height: 7px; }
html.lu-raidmin .lu-mon-stage.strip { width: 22px; height: 22px; margin: 0; }
html.lu-raidmin .lu-raid-mhp { display: inline; font-size: 11px; }

/* ───────── Header menu ───────── */
.lu-gm-menu { position: fixed; z-index: 110; width: 300px; max-width: calc(100vw - 16px); background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 18px 40px rgba(15,23,42,.2); padding: 6px; font-family: var(--font); }
.lu-gm-menu button { display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left; background: none; border: 0; padding: 8px 10px; border-radius: 6px; font: 500 13px/1.35 var(--font); color: var(--text); cursor: pointer; }
.lu-gm-menu button:hover, .lu-gm-menu button:focus { background: var(--surface-2); outline: none; }
.lu-gm-menu button:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.lu-gm-menu b { font-weight: 700; }
.lu-gm-menu small { display: block; color: var(--text-muted); font-size: 12px; }
.lu-gm-chk { position: relative; width: 32px; height: 18px; border-radius: 999px; border: 2px solid #64748b; background: #fff; flex-shrink: 0; margin-top: 1px; }
.lu-gm-chk::after { content: ''; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: #64748b; }
[aria-checked="true"] > .lu-gm-chk { background: var(--accent); border-color: var(--accent); }
[aria-checked="true"] > .lu-gm-chk::after { left: auto; right: 2px; background: #fff; }
.lu-gm-ic { width: 32px; display: inline-grid; place-items: center; flex-shrink: 0; color: var(--text-muted); }
.lu-gm-ic svg { width: 18px; height: 18px; }
.lu-gm-sep { height: 1px; background: var(--border); margin: 4px 6px; }

/* ───────── First-time walkthrough ───────── */
.lu-intro-back { position: fixed; inset: 0; z-index: 1000; background: rgba(15,23,42,.55); display: grid; place-items: center; padding: 16px; font-family: var(--font); }
.lu-intro { position: relative; width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: #fff; border-radius: 14px; padding: 18px 22px 16px; box-shadow: 0 24px 60px rgba(15,23,42,.35); display: flex; flex-direction: column; color: var(--text); }
.lu-intro-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.lu-intro-k { font-size: 11px; font-weight: 800; color: var(--accent-hover); text-transform: uppercase; letter-spacing: .08em; }
.lu-intro-skip { border: 0; background: none; color: var(--text-muted); font: 600 13px var(--font); text-decoration: underline; cursor: pointer; padding: 6px 4px; min-height: 32px; }
.lu-intro-art { height: 120px; display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px 0 8px; border-radius: 12px; background: radial-gradient(circle at 50% 60%, #fff7ed 0%, #fffbeb 40%, #fff 72%); }
.lu-intro-art .lu-mon-stage.big { width: 112px; height: 112px; background: none; }
.lu-intro-art .lu-chest-svg { width: 96px; height: 86px; }
.lu-ia-shield { position: relative; width: 70px; height: 78px; display: grid; place-items: center; }
.lu-ia-shield svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lu-ia-shield b { position: relative; color: #fff; font: 800 28px var(--font); margin-top: -6px; }
.lu-ia-coin { width: 72px; height: 72px; }
.lu-ia-small svg { width: 52px; height: 52px; }
.lu-ia-trophy { color: var(--lu-gold-ink); }
.lu-ia-trophy svg { width: 70px; height: 70px; }
.lu-intro h2 { margin: 2px 0 6px; font-size: 21px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.lu-intro p { margin: 0 0 6px; font-size: 14.5px; line-height: 1.5; color: var(--text); }
.lu-intro .lu-ex { margin: 8px 0 0; padding: 9px 12px; border-radius: 8px; background: var(--lu-gold-bg); border: 1px solid var(--lu-gold-border); font-size: 14px; }
.lu-intro .lu-ex b { color: var(--lu-gold-ink); }
.lu-intro .lu-tipline { margin-top: 8px; font-size: 13.5px; color: var(--text-muted); }
.lu-intro-dots { display: flex; justify-content: center; gap: 4px; margin: 14px 0 10px; }
.lu-intro-dots button { width: 24px; height: 24px; border: 0; background: none; padding: 0; cursor: pointer; display: grid; place-items: center; border-radius: 50%; }
.lu-intro-dots button::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #cbd5e1; }
.lu-intro-dots button[aria-current="step"]::before { width: 20px; border-radius: 999px; background: var(--accent); }
.lu-intro-dots button.seen::before { background: #93c5fd; }
.lu-intro-nav { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.lu-ibtn { min-height: 44px; border-radius: 8px; border: 1px solid rgba(0,0,0,.18); background: #fff; font: 700 15px var(--font); color: var(--text); cursor: pointer; }
.lu-ibtn:hover { background: var(--surface-2); }
.lu-ibtn[disabled] { opacity: .45; cursor: default; }
.lu-ibtn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.lu-ibtn.primary:hover { background: var(--accent-hover); }
.lu-intro-rules { align-self: center; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--accent); }
body.lu-intro-open { overflow: hidden; }
@media (max-width: 600px) {
  .lu-intro-back { padding: 0; place-items: stretch; }
  .lu-intro { width: 100%; max-height: none; height: 100%; border-radius: 0; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); }
  .lu-intro-step { flex: 1; }
}

/* ───────── Moments: confetti, gain chips, toasts ───────── */
.lu-fx-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 94; }
.lu-gain { position: fixed; z-index: 98; pointer-events: none; padding: 2px 9px; border-radius: 999px; background: var(--accent); color: #fff; font: 800 12px/1.5 var(--font); font-variant-numeric: tabular-nums; box-shadow: 0 6px 14px rgba(37,99,235,.35); white-space: nowrap; opacity: 0; }
.lu-gain.gold { background: var(--amber-ink); box-shadow: 0 6px 14px rgba(180,83,9,.35); font-size: 14px; padding: 3px 11px; }
.lu-toasts { position: fixed; z-index: 97; top: calc(var(--lu-top, 0px) + 10px); left: 50%; transform: translateX(-50%); display: grid; gap: 8px; width: min(380px, calc(100vw - 24px)); pointer-events: none; font-family: var(--font); }
.lu-toast { display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: center; padding: 10px 14px 10px 10px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(15,23,42,.14), 0 2px 6px rgba(15,23,42,.06); font-size: 13px; color: var(--text-muted); }
.lu-toast strong { display: block; color: var(--text); font-size: 14px; font-weight: 800; letter-spacing: -0.01em; }
.lu-t-ic { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--blue-bg); color: var(--accent-hover); }
.lu-t-ic svg { width: 18px; height: 18px; }
.lu-toast.gold { border-left-color: var(--lu-gold); }
.lu-toast.gold .lu-t-ic { background: var(--amber-ink); color: #fff; }
.lu-toast.green { border-left-color: var(--green); }
.lu-toast.green .lu-t-ic { background: var(--green-bg); color: var(--green-ink); }
.lu-toast.flame { border-left-color: var(--lu-flame); }
.lu-toast.flame .lu-t-ic { background: var(--lu-flame-bg); color: var(--lu-flame); }
.lu-toast.neutral { border-left-color: #9ca3af; }
.lu-toast.neutral .lu-t-ic { background: var(--surface-2); color: var(--lu-slate); }
.lu-toast.boss { border-left-color: var(--lu-hp); }
.lu-toast.boss .lu-t-ic { background: #1e293b; color: #fca5a5; }
.lu-toast.out { opacity: 0; }

/* ───────── Chest drop (non-blocking) ───────── */
.lu-drop {
  position: fixed; z-index: 96; top: calc(var(--lu-top, 0px) + 10px); right: 16px; width: 332px;
  background: #fff; border: 1px solid var(--lu-gold-border); border-radius: 12px; padding: 14px; color: var(--text); font-family: var(--font);
  box-shadow: 0 18px 40px rgba(15,23,42,.18), 0 2px 6px rgba(15,23,42,.08);
  display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; align-items: center;
}
.lu-drop-stage { position: relative; width: 88px; height: 80px; display: grid; place-items: center; perspective: 300px; }
.lu-drop-stage::before { content: ''; position: absolute; inset: 2px; border-radius: 50%; background: radial-gradient(circle at 50% 58%, #fef3c7 0%, #fffbeb 52%, rgba(255,251,235,0) 70%); }
.lu-drop-rays { pointer-events: none; position: absolute; inset: -6px; border-radius: 50%; opacity: 0; background: repeating-conic-gradient(from 0deg, rgba(251,191,36,.45) 0deg 9deg, rgba(251,191,36,0) 9deg 30deg); -webkit-mask: radial-gradient(circle, #000 25%, transparent 68%); mask: radial-gradient(circle, #000 25%, transparent 68%); }
.lu-drop.revealed .lu-drop-rays { opacity: 1; }
.lu-drop-chest { position: relative; border: 0; background: none; padding: 0; cursor: pointer; width: 76px; height: 68px; border-radius: 8px; }
.lu-drop-chest .lu-chest-svg { width: 76px; height: 68px; }
.lu-drop-chest[disabled] { cursor: default; }
.lu-drop-k { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--lu-gold-ink); }
.lu-drop-from { margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: #f1f5f9; font-size: 10px; font-weight: 700; color: var(--text-muted); }
.lu-drop-title { display: block; font-size: 17px; font-weight: 800; color: var(--text); letter-spacing: -0.01em; line-height: 1.2; }
.lu-drop-prize { display: block; font-size: 30px; font-weight: 800; color: var(--lu-gold-ink); letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.lu-drop-note { margin: 3px 0 0; font-size: 12px; color: var(--text-muted); line-height: 1.35; }
.lu-drop-err { color: var(--red-ink, #b91c1c); font-weight: 600; }
.lu-drop-actions { display: flex; gap: 10px; margin-top: 9px; align-items: center; flex-wrap: wrap; }
.lu-drop-later { border: 0; background: none; color: var(--text-muted); text-decoration: underline; font: 600 12px var(--font); cursor: pointer; padding: 4px 2px; }
.lu-drop-x { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border: 0; background: none; color: var(--text-muted); border-radius: 6px; cursor: pointer; display: grid; place-items: center; padding: 0; }
.lu-drop-x:hover { background: var(--surface-2); }
.lu-drop-x svg { width: 14px; height: 14px; }
/* Boss chest reveal: big, centred, non-blocking (no backdrop) */
.lu-drop.big { top: calc(50% - 170px); bottom: auto; left: 0; right: 0; margin: 0 auto; width: min(380px, calc(100vw - 24px)); grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 20px 20px 18px; border-width: 2px; box-shadow: 0 30px 70px rgba(15,23,42,.32), 0 2px 8px rgba(15,23,42,.1); }
.lu-drop.big .lu-drop-stage { width: 160px; height: 136px; }
.lu-drop.big .lu-drop-chest, .lu-drop.big .lu-drop-chest .lu-chest-svg { width: 136px; height: 121px; }
.lu-drop.big .lu-drop-title { font-size: 21px; }
.lu-drop.big .lu-drop-prize { font-size: 46px; }
.lu-drop.big .lu-drop-actions { justify-content: center; }
.lu-drop.big .lu-drop-actions .lu-btn-gold { min-width: 170px; min-height: 42px; font-size: 15px; }

/* Chest artwork (one SVG, colour states in CSS) */
.lu-chest-svg { display: block; overflow: visible; }
.lu-chest-svg .cb { fill: url(#lu-g-body); stroke: #92400e; }
.lu-chest-svg .cl { fill: url(#lu-g-lid); stroke: #92400e; }
.lu-chest-svg .cs { fill: #b45309; }
.lu-chest-svg .cp { fill: #fef3c7; stroke: #92400e; }
.lu-chest-svg .ck { fill: #92400e; }
.lu-chest-svg .cg { fill: #fde68a; opacity: 0; }
.lu-chest-svg .cl-g { transform-box: fill-box; transform-origin: 0% 100%; }
.lu-chest-svg.open .cl-g { transform: rotate(-34deg) translate(-2px, -3px); }
.lu-chest-svg.open .cg { opacity: 1; }
.lu-chest-svg.locked .cb, .lu-chest-svg.locked .cl { fill: #eceef1; stroke: #9ca3af; }
.lu-chest-svg.locked .cs { fill: #d1d5db; }
.lu-chest-svg.locked .cp { fill: #f9fafb; stroke: #9ca3af; }
.lu-chest-svg.locked .ck { fill: #9ca3af; }

/* ───────── Motion (all of it off under prefers-reduced-motion) ───────── */
@media (prefers-reduced-motion: no-preference) {
  .lu-lvl-fill { transition: width .8s var(--lu-ease-out); }
  .lu-od-s { transition: transform .75s var(--lu-ease-out); }
  .lu-lvl.sheen .lu-lvl-sheen { animation: lu-sheen .9s ease-out; }
  @keyframes lu-sheen { from { transform: translateX(-110%); } to { transform: translateX(110%); } }
  .lu-lvl.glow .lu-lvl-track { animation: lu-glow .8s ease-out; }
  @keyframes lu-glow { 0% { box-shadow: inset 0 1px 2px rgba(15,23,42,.14), 0 0 0 0 rgba(37,99,235,.45); } 100% { box-shadow: inset 0 1px 2px rgba(15,23,42,.14), 0 0 0 9px rgba(37,99,235,0); } }
  .lu-lvl.goldglow .lu-lvl-track { animation: lu-goldglow .85s ease-out; }
  @keyframes lu-goldglow { 0% { box-shadow: inset 0 1px 2px rgba(15,23,42,.14), 0 0 0 0 rgba(217,119,6,.6); } 100% { box-shadow: inset 0 1px 2px rgba(15,23,42,.14), 0 0 0 12px rgba(217,119,6,0); } }
  .lu-est.glow { animation: lu-readout-pop .5s var(--lu-ease-pop); }
  @keyframes lu-readout-pop { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }
  .lu-gain { animation: lu-rise .85s var(--lu-ease-out) forwards; }
  .lu-gain.gold { animation: lu-risebig .9s var(--lu-ease-out) forwards; }
  @keyframes lu-rise { 0% { opacity: 0; transform: translate(-50%, 8px) scale(.7); } 18% { opacity: 1; transform: translate(-50%, 0) scale(1.08); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -26px) scale(1); } }
  @keyframes lu-risebig { 0% { opacity: 0; transform: translate(-50%, 6px) scale(.5); } 22% { opacity: 1; transform: translate(-50%, -4px) scale(1.25); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -34px) scale(1); } }
  .lu-toast { animation: lu-toast-in .32s var(--lu-ease-out) both; transition: opacity .3s, transform .3s; }
  .lu-toast.out { transform: translateY(-6px); }
  @keyframes lu-toast-in { from { opacity: 0; transform: translateY(-10px) scale(.97); } to { opacity: 1; transform: none; } }
  .lu-toast.gold .lu-t-ic { animation: lu-medal .7s var(--lu-ease-pop) .05s both; }
  @keyframes lu-medal { from { transform: scale(.3) rotate(-30deg); } to { transform: scale(1) rotate(0); } }
  .lu-bump { animation: lu-bump .7s ease-out; }
  @keyframes lu-bump { 0% { color: var(--accent); } 100% { color: inherit; } }
  .lu-hud .pop, .lu-raid .pop, #my-bonus-view .pop { animation: lu-pillpop .7s var(--lu-ease-pop); }
  @keyframes lu-pillpop { 0% { transform: scale(.5); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
  .lu-tk-msg.swap { animation: lu-tkswap .38s var(--lu-ease-out); }
  @keyframes lu-tkswap { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  .lu-raid-fill { transition: width .5s var(--lu-ease-out); }
  .lu-mon .m-all { animation: lu-mbreathe 2.6s ease-in-out infinite; }
  .lu-mon .e-n { animation: lu-mblink 4.6s infinite; }
  .lu-mon.mood-flag .m-body { animation: lu-mshaky .4s linear infinite; }
  .lu-mon.hit .m-body { animation: lu-msquash .45s cubic-bezier(.3,1.3,.5,1); }
  .lu-mon.hit .m-tint { animation: lu-mtint .42s ease-out; }
  .lu-mon.faint .m-all { animation: lu-mfaint .6s ease-in forwards; }
  .lu-mon.faint .m-smoke { animation: lu-mpuff .6s ease-out; }
  .lu-mon.faint .m-stars { animation: lu-mstars .6s ease-out; }
  .lu-mon.gift-in .m-gift { animation: lu-mgiftin .5s cubic-bezier(.2,1.6,.4,1); }
  .lu-mon.mood-ghost .m-ghost { animation: lu-mfloat 2.4s ease-in-out infinite; }
  @keyframes lu-mbreathe { 0%, 100% { transform: none; } 50% { transform: translateY(-1.5px) scale(1.015, 1.03); } }
  @keyframes lu-mblink { 0%, 93%, 100% { transform: none; } 95.5% { transform: scaleY(.1); } }
  @keyframes lu-mshaky { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-1px); } 75% { transform: translateX(1px); } }
  @keyframes lu-msquash { 0% { transform: none; } 22% { transform: translateX(5px) scale(1.14, .84); } 55% { transform: translateX(-2px) scale(.95, 1.06); } 100% { transform: none; } }
  @keyframes lu-mtint { 0% { opacity: 0; } 25% { opacity: .55; } 100% { opacity: 0; } }
  @keyframes lu-mfaint { 0% { transform: none; opacity: 1; } 55% { transform: rotate(-14deg) translateY(4px); opacity: 1; } 100% { transform: rotate(-22deg) translateY(12px) scale(.6); opacity: 0; } }
  @keyframes lu-mpuff { 0% { opacity: 0; transform: scale(.5); } 40% { opacity: .95; transform: scale(1.1); } 100% { opacity: 0; transform: scale(1.3); } }
  @keyframes lu-mstars { 0% { opacity: 0; transform: scale(.4) rotate(-30deg); } 40% { opacity: 1; transform: scale(1.1) rotate(0); } 100% { opacity: 0; transform: scale(1.25) rotate(20deg); } }
  @keyframes lu-mgiftin { 0% { transform: scale(.3); } 60% { transform: scale(1.12); } 100% { transform: none; } }
  @keyframes lu-mfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
  /* Monthly boss idle loops: transform/opacity only, 3s or less a cycle. */
  .lu-mon .k-shiv { animation: lu-k-shiver 2.8s ease-in-out infinite; }
  .lu-mon .k-twk { animation: lu-k-twinkle 2.4s ease-in-out infinite; }
  .lu-mon .k-rise { animation: lu-k-rise 2.8s ease-in-out infinite; }
  .lu-mon .k-fall { animation: lu-k-rain 1.5s ease-in infinite; }
  .lu-mon .k-snow.k-fall { animation: lu-k-snow 3s linear infinite; }
  .lu-mon .k-petal { animation: lu-k-petal 3s ease-in-out infinite; }
  .lu-mon .k-mote { animation: lu-k-mote 3s ease-in-out infinite; }
  .lu-mon .k-ant { animation: lu-k-boing 1.8s ease-in-out infinite; }
  .lu-mon .k-ant-r { animation-delay: -.9s; }
  .lu-mon .k-ear-l { animation: lu-k-earl 2.6s ease-in-out infinite; }
  .lu-mon .k-ear-r { animation: lu-k-earr 2.6s ease-in-out infinite; }
  .lu-mon .k-tuft, .lu-mon .k-holly, .lu-mon .k-crest { animation: lu-k-tilt 2.6s ease-in-out infinite; }
  .lu-mon .k-flower { animation: lu-k-twirl 2.8s ease-in-out infinite; }
  .lu-mon .k-rays { animation: lu-k-rays 3s ease-in-out infinite; }
  .lu-mon .k-spark { animation: lu-k-flicker .9s ease-in-out infinite; }
  .lu-mon .k-fly { animation: lu-k-fly-a 1.2s ease-out infinite; }
  .lu-mon .k-fly-b { animation-name: lu-k-fly-b; }
  .lu-mon .k-fly-c { animation-name: lu-k-fly-c; }
  .lu-mon .k-tents { animation: lu-k-tents 2.4s ease-in-out infinite; }
  .lu-mon .k-star { animation: lu-k-pulse 2.6s ease-in-out infinite; }
  .lu-mon .k-crown { animation: lu-k-crown 2.6s ease-in-out infinite; }
  .lu-mon .k-bat { animation: lu-k-flap .8s ease-in-out infinite; }
  .lu-mon .k-flame { animation: lu-k-flame 1.4s ease-in-out infinite; }
  .lu-mon .k-d1 { animation-delay: -.7s; }
  .lu-mon .k-d2 { animation-delay: -1.4s; }
  .lu-mon .k-d3 { animation-delay: -2.1s; }
  @keyframes lu-k-shiver { 0%, 70%, 100% { transform: none; } 76% { transform: translateX(-.9px); } 82% { transform: translateX(.9px); } 88% { transform: translateX(-.6px); } 94% { transform: translateX(.4px); } }
  @keyframes lu-k-twinkle { 0%, 100% { opacity: .2; transform: scale(.55); } 50% { opacity: 1; transform: scale(1); } }
  @keyframes lu-k-rise { 0% { opacity: 0; transform: translateY(4px); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }
  @keyframes lu-k-rain { 0% { opacity: 0; transform: translateY(-5px); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(8px); } }
  @keyframes lu-k-snow { 0% { opacity: 0; transform: translate(0, -4px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(3px, 12px); } }
  @keyframes lu-k-petal { 0% { opacity: 0; transform: translate(0, -4px) rotate(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-4px, 10px) rotate(160deg); } }
  @keyframes lu-k-mote { 0%, 100% { opacity: .25; transform: translateY(2px); } 50% { opacity: 1; transform: translateY(-3px); } }
  @keyframes lu-k-boing { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-9deg); } 60% { transform: rotate(6deg); } }
  @keyframes lu-k-earl { 0%, 55%, 100% { transform: rotate(0); } 66% { transform: rotate(9deg); } 77% { transform: rotate(-4deg); } 88% { transform: rotate(3deg); } }
  @keyframes lu-k-earr { 0%, 55%, 100% { transform: rotate(0); } 66% { transform: rotate(-9deg); } 77% { transform: rotate(4deg); } 88% { transform: rotate(-3deg); } }
  @keyframes lu-k-tilt { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
  @keyframes lu-k-twirl { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(14deg); } }
  @keyframes lu-k-rays { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(9deg) scale(1.06); } }
  @keyframes lu-k-flicker { 0%, 100% { transform: scale(1) rotate(0); } 33% { transform: scale(1.22) rotate(18deg); } 66% { transform: scale(.82) rotate(-10deg); } }
  @keyframes lu-k-fly-a { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate(7px, -5px); } }
  @keyframes lu-k-fly-b { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate(-7px, -5px); } }
  @keyframes lu-k-fly-c { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate(6px, 5px); } }
  @keyframes lu-k-tents { 0%, 100% { transform: skewX(5deg); } 50% { transform: skewX(-5deg); } }
  @keyframes lu-k-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
  @keyframes lu-k-crown { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(-7deg); } 70% { transform: rotate(4deg); } }
  @keyframes lu-k-flap { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(.9, .45) translateY(1px); } }
  @keyframes lu-k-flame { 0%, 100% { transform: scale(1, 1) rotate(0); } 30% { transform: scale(.93, 1.09) rotate(-3deg); } 60% { transform: scale(1.04, .95) rotate(2deg); } }
  .lu-dmg { animation: lu-dmgpop .6s ease-out forwards; }
  @keyframes lu-dmgpop { 0% { opacity: 0; transform: translate(-50%, 6px) scale(.7); } 20% { opacity: 1; transform: translate(-50%, -6px) scale(1.1); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -22px); } }
  .imp-stars { animation: lu-istars .5s ease-out; }
  .imp-paw { animation: lu-ileft .45s ease-out; }
  .imp-fist { animation: lu-iright .45s ease-out; }
  .imp-sword { animation: lu-islash .45s ease-out; }
  @keyframes lu-istars { 0% { opacity: 0; transform: scale(.4) rotate(-20deg); } 30% { opacity: 1; transform: scale(1.15); } 100% { opacity: 0; transform: scale(1.4) rotate(15deg); } }
  @keyframes lu-ileft { 0% { opacity: 0; transform: translateX(-90%) rotate(-25deg); } 45% { opacity: 1; transform: translateX(-10%); } 100% { opacity: 0; transform: translateX(10%) scale(.9); } }
  @keyframes lu-iright { 0% { opacity: 0; transform: translateX(90%) rotate(25deg); } 45% { opacity: 1; transform: translateX(10%); } 100% { opacity: 0; transform: translateX(-10%) scale(.9); } }
  @keyframes lu-islash { 0% { opacity: 0; transform: translate(-60%, -60%) rotate(-60deg); } 40% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate(30%, 30%) rotate(15deg); } }
  .lu-gift-pop { animation: lu-giftpop .5s cubic-bezier(.2,1.6,.4,1); }
  @keyframes lu-giftpop { 0% { opacity: 0; transform: translate(-50%, 8px) scale(.6); } 100% { opacity: 1; transform: translate(-50%, 0); } }
  .lu-raid-tick { animation: lu-rtick .5s ease-out; }
  @keyframes lu-rtick { 0% { opacity: 0; transform: scaleY(.3); } 30% { opacity: 1; transform: none; } 100% { opacity: 0; } }
  .lu-raid.gift-ready .lu-mon-stage.strip, .lu-mon-col.gift-ready .lu-mon-stage.big { animation: lu-giftbob 1.4s ease-in-out infinite; }
  @keyframes lu-giftbob { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-2px) scale(1.06); } }
  .lu-gift-btn:not([hidden])::after { animation: lu-giftring 1.4s ease-out infinite; }
  @keyframes lu-giftring { 0% { opacity: .9; transform: scale(.8); } 100% { opacity: 0; transform: scale(1.35); } }
  html.lu-raidmin .lu-gift-btn::after { display: none; }
  .lu-drop.big.shaking .lu-drop-chest { animation: lu-bshake .32s ease-in-out; }
  @keyframes lu-bshake { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-9deg) scale(1.04); } 45% { transform: rotate(8deg) scale(1.06); } 70% { transform: rotate(-5deg); } }
  .lu-drop.big.popin { animation: lu-bigin .28s var(--lu-ease-out); }
  @keyframes lu-bigin { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
  .lu-intro-step.in-next { animation: lu-introR .28s var(--lu-ease-out); }
  .lu-intro-step.in-back { animation: lu-introL .28s var(--lu-ease-out); }
  @keyframes lu-introR { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
  @keyframes lu-introL { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
  .lu-intro-back:not([hidden]) .lu-intro { animation: lu-toast-in .3s var(--lu-ease-out); }
  .lu-raid.flash { animation: lu-raidflash .9s ease-out; }
  @keyframes lu-raidflash { 0% { box-shadow: inset 0 0 0 0 rgba(252,211,77,0); } 30% { box-shadow: inset 0 0 0 2px rgba(252,211,77,.9); } 100% { box-shadow: inset 0 0 0 0 rgba(252,211,77,0); } }
  .lu-raid-banner:not([hidden]) { animation: lu-bannerin .45s var(--lu-ease-pop); }
  @keyframes lu-bannerin { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
  .lu-combo-track i { transition: width 1s linear; }
  .lu-combo.pop { animation: lu-pillpop .6s var(--lu-ease-pop); }
  .lu-chest-svg .cl-g { transition: transform .38s var(--lu-ease-pop); }
  .lu-chest-svg .cg { transition: opacity .3s; }
  .lu-drop.dropping { animation: lu-dropin .55s var(--lu-ease-pop); }
  @keyframes lu-dropin { 0% { opacity: 0; transform: translateY(-36px) scale(.92); } 60% { opacity: 1; transform: translateY(4px) scale(1.01); } 100% { transform: none; } }
  .lu-drop.dropping .lu-drop-chest { animation: lu-wiggle .7s ease-in-out .25s; }
  @keyframes lu-wiggle { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-9deg); } 40% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } 80% { transform: rotate(3deg); } }
  .lu-drop.spinning .lu-drop-chest { animation: lu-spin .6s cubic-bezier(.3,.7,.3,1) infinite; }
  @keyframes lu-spin { 0% { transform: rotateY(0) scale(1); } 50% { transform: rotateY(360deg) scale(1.16); } 100% { transform: rotateY(720deg) scale(1); } }
  .lu-drop.revealed .lu-drop-rays { animation: lu-rays .9s ease-out both; }
  @keyframes lu-rays { from { opacity: 0; transform: scale(.6) rotate(-20deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
  .lu-drop.revealed .lu-drop-prize { animation: lu-pillpop .6s var(--lu-ease-pop); }
}
/* The raid pause control (html.lu-paused, level-up.js) stills the boss's idle loops; hits, the faint and the gift still play. */
html.lu-paused .lu-mon .m-idle, html.lu-paused .lu-mon .e-n, html.lu-paused .lu-mon .m-ghost,
html.lu-paused .lu-mon:not(.faint) .m-all, html.lu-paused .lu-mon:not(.hit) .m-body { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .lu-hud, .lu-hud *, .lu-raid, .lu-raid *, .lu-layer *, #my-bonus-view *, .lu-mon, .lu-mon * { animation: none !important; transition: none !important; }
}

/* ───────── Responsive (the raid strip spans the window) ───────── */
@media (max-width: 1180px) { .lu-raid-top-l { display: none; } .lu-raid-hp { width: 220px; } }
@media (max-width: 1000px) { .lu-raid-top { display: none; } }
@media (max-width: 820px) { .lu-raid-hp { width: 170px; } .lu-combo-l { display: none; } }
@media (min-width: 641px) and (max-width: 1000px) {
  .lu-drop:not(.big) { left: 0; right: 0; margin: 0 auto; }
  body.lu-drop-open .lu-toasts { top: calc(var(--lu-top, 0px) + 136px); }
}
@media (max-width: 768px) {
  /* Phones: the portal header scrolls away as before; the game bar (HUD row +
     boss strip) sticks to the top, like the approved 390px preview. */
  .header.lu-has-hud .lu-hud-slot { display: none !important; }
  .lu-bar { position: sticky; top: 0; z-index: 84; }
  .lu-hud-mslot:not(:empty) { padding: 6px 12px; }
}
@media (max-width: 640px) {
  .lu-raid { min-height: 40px; padding: 5px 12px; gap: 8px; }
  .lu-raid-btn { flex: 1 1 auto; gap: 8px; }
  .lu-raid-name, .lu-raid-top, .lu-raid-txt, .lu-tk, .lu-tk-btn { display: none; }
  .lu-mon-stage.strip { width: 36px; height: 36px; margin: -2px 0; }
  .lu-raid-hp { flex: 1 1 auto; width: auto; min-width: 60px; }
  .lu-raid-track { height: 7px; }
  .lu-raid-mhp { display: inline; }
  .lu-assign-m:not([hidden]) { display: inline-flex; }
  .lu-combo { padding: 2px 8px; gap: 6px; }
  .lu-combo-track { width: 40px; }
  .lu-combo-time { display: none; }
  .lu-raid-banner { padding: 10px 48px 10px 12px; justify-content: flex-start; flex-wrap: wrap; row-gap: 8px; }
  .lu-raid-banner > div { flex: 1 1 calc(100% - 56px); min-width: 0; }
  .lu-raid-banner .lu-rb-open { flex: 1 1 100%; min-height: 40px; }
  .lu-raid-banner strong { font-size: 14px; }
  .lu-raid-banner .lu-sub2 { font-size: 12px; }
  .lu-drop:not(.big) { top: auto; bottom: calc(var(--mnav-bar-h, 0px) + var(--mnav-safe-bottom, 0px) + 12px); left: 0; right: 0; margin: 0 auto; width: min(360px, calc(100vw - 20px)); }
  body.lu-banner-open .lu-drop:not(.big) { top: auto; }
}