/* =====================================================================
   LANE 4 · META SCREENS: Solo (Chronicle, Weekly Boss, Puzzles, Rift Run,
   Challenges), Profile, Social, Season polish and the replay bar.
   Loaded after arena.css. Uses the arena tokens (--gold-*, --ease-*).
   ===================================================================== */

/* ---------- shared bits ---------- */
.mi { width: 1em; height: 1em; flex: none; vertical-align: -.14em; }
.btn .mi { width: 1.05em; height: 1.05em; margin-right: .35em; vertical-align: -.16em; }
.mi-coin { position: absolute; width: 22px; height: 22px; border-radius: 50%; pointer-events: none; z-index: 2100;
  background: radial-gradient(circle at 35% 30%, #fff5c4, #f2c14e 45%, #9a6a10); box-shadow: 0 0 12px rgba(255, 211, 110, .9), 0 0 0 1px rgba(90, 50, 0, .5) inset; }
.mring .rt { fill: none; stroke: rgba(255, 255, 255, .12); }
.mring .rf { fill: none; stroke: var(--ring, var(--gold-1)); stroke-linecap: round; transition: stroke-dashoffset 1s var(--ease-out); }
.pav { display: inline-block; flex: none; width: 44px; height: 44px; border-radius: 50%; background: #1a1030 center / cover no-repeat; }
.pav.lead { background-position: 50% 16%; box-shadow: 0 0 0 2px var(--gold-2), 0 4px 10px rgba(0, 0, 0, .5); }
.pav.med { background-size: 112%; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .55)); }
.m-panel { position: relative; border-radius: 16px; border: 1px solid rgba(232, 186, 90, .24);
  background: linear-gradient(180deg, rgba(30, 17, 58, .84), rgba(14, 8, 28, .9)); box-shadow: 0 18px 44px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 240, 200, .05) inset; }
.m-h { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font: 800 20px var(--font-title); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-1); }
.m-h::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--gold-line), transparent); }
.m-h small { font: 600 12px var(--font-ui); letter-spacing: .08em; text-transform: none; color: var(--muted); }
.m-empty { max-width: 760px; margin: 50px auto 0; padding: 40px 44px 36px; text-align: center; overflow: hidden; }
.m-empty::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--art) var(--pos, center 30%) / cover; opacity: .28; filter: saturate(.9);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%); mask-image: linear-gradient(180deg, #000 0%, transparent 85%); }
.m-empty > * { position: relative; }
.m-empty .ico { width: 74px; height: 74px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; font-size: 36px; color: var(--gold-1);
  background: radial-gradient(circle at 40% 35%, rgba(120, 70, 210, .6), rgba(20, 10, 40, .9)); box-shadow: 0 0 0 2px var(--gold-2), 0 0 30px rgba(242, 193, 78, .35); }
.m-empty h2 { font: 800 32px var(--font-title); letter-spacing: .08em; margin: 0 0 8px; color: #fff4d6; }
.m-empty p { margin: 0 auto 22px; max-width: 520px; color: #d8ccef; font-size: 16px; line-height: 1.5; }
.m-empty .acts { display: flex; gap: 14px; justify-content: center; }
body.mobile .m-empty h2 { font-size: 42px; } body.mobile .m-empty p { font-size: 22px; max-width: 700px; } body.mobile .m-empty { max-width: 980px; }
body.mobile .m-h { font-size: 26px; } body.mobile .m-h small { font-size: 17px; }

/* =====================================================================
   CHRONICLE MAP
   ===================================================================== */
.chron-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin: 2px 4px 14px; }
.chron-lore { max-width: 900px; }
.chron-lore p { margin: 6px 0 0; color: #d8ccef; font-size: 14px; line-height: 1.45; }
.chron-top .playing { margin: 0; white-space: nowrap; }
.chron-map { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.chron-ch { position: relative; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--d) 55%, rgba(14, 8, 28, .9)), rgba(12, 6, 26, .92) 55%);
  border: 1px solid color-mix(in srgb, var(--c) 40%, rgba(232, 186, 90, .2)); box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
  transition: transform .35s var(--ease-out), box-shadow .35s, border-color .35s; }
.chron-ch:hover { transform: translateY(-4px); box-shadow: 0 26px 50px rgba(0, 0, 0, .6), 0 0 26px color-mix(in srgb, var(--c) 25%, transparent); }
.chron-ch.current { border-color: var(--gold-2); box-shadow: 0 18px 40px rgba(0, 0, 0, .5), 0 0 0 1px rgba(242, 193, 78, .35), 0 0 34px rgba(242, 193, 78, .22); }
.chron-ch.restored { border-color: color-mix(in srgb, var(--c) 70%, var(--gold-1)); box-shadow: 0 18px 40px rgba(0, 0, 0, .5), 0 0 30px color-mix(in srgb, var(--c) 40%, transparent); }
.chron-hero { position: relative; height: 150px; flex: none; isolation: isolate; overflow: hidden; }
.chron-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--art) var(--pos, center 28%) / cover; transition: transform 1.2s var(--ease-out); }
.chron-ch:hover .chron-hero::before { transform: scale(1.06); }
.chron-hero::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(8, 4, 18, .15) 0%, rgba(8, 4, 18, .1) 35%, color-mix(in srgb, var(--d) 40%, rgba(10, 5, 22, .96)) 100%); }
.chron-ch.sealed .chron-hero::before { filter: grayscale(.75) brightness(.55); }
.chron-num { position: absolute; right: 14px; bottom: 6px; font: 900 44px/1 var(--font-title); color: rgba(255, 240, 200, .16); letter-spacing: .04em; }
.chron-ring { position: absolute; top: 10px; right: 10px; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: rgba(8, 4, 18, .72); box-shadow: 0 4px 12px rgba(0, 0, 0, .5); }
.chron-ring .mring { position: absolute; inset: 0; --ring: var(--gold-1); }
.chron-ring b { font: 900 17px/1 var(--font-title); color: #fff4d6; } .chron-ring small { font-size: 11px; color: var(--muted); }
.chron-av { position: absolute; top: 10px; left: 10px; width: 46px; height: 46px; border-radius: 50%; background: #222 center 16% / cover; border: 2px solid var(--c); box-shadow: 0 0 0 2px rgba(8, 4, 18, .7), 0 6px 14px rgba(0, 0, 0, .5); }
.chron-htxt { position: absolute; left: 14px; right: 14px; bottom: 10px; text-shadow: 0 2px 8px rgba(0, 0, 0, .9); }
.chron-htxt span { display: block; font: 800 10.5px var(--font-ui); letter-spacing: .18em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 55%, #fff); }
.chron-htxt b { display: block; font: 800 22px/1.1 var(--font-title); letter-spacing: .05em; color: #fff4d6; }
.chron-ch > p { margin: 0; padding: 10px 14px 4px; font-size: 12.5px; line-height: 1.45; color: #cfc2ea; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 58px; }
.chron-path { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 8px 10px 14px; }

/* nodes: medallions on a path */
.cnode { appearance: none; position: relative; display: grid; grid-template-columns: 66px 1fr; gap: 10px; align-items: center; padding: 6px 8px 6px 2px; border-radius: 14px;
  border: 1px solid transparent; background: transparent; color: var(--ink); text-align: left; cursor: pointer; font: 14px var(--font-ui);
  transition: transform .25s var(--ease-out), background .25s, border-color .25s; }
.cnode::before { content: ""; position: absolute; left: 34px; top: calc(50% + 29px); height: calc(100% + 6px - 58px); width: 3px; transform: translateX(-50%); z-index: 0; border-radius: 3px;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .22) 0 4px, transparent 4px 8px); }
.cnode:last-child::before { display: none; }
.cnode.won::before { background: linear-gradient(180deg, var(--gold-1), var(--gold-3)); box-shadow: 0 0 8px rgba(242, 193, 78, .6); }
.cmed { position: relative; z-index: 1; justify-self: center; width: 58px; height: 58px; border-radius: 50%;
  background: var(--art) var(--pos, 50% 35%) / cover no-repeat, #1a0f33; border: 2px solid color-mix(in srgb, var(--c) 45%, #3a2a5a);
  box-shadow: 0 0 0 3px rgba(8, 4, 18, .85), 0 8px 18px rgba(0, 0, 0, .55); transition: transform .3s var(--ease-back), box-shadow .3s; }
.cmed::before { content: ""; position: absolute; inset: 0; border-radius: 50%; overflow: hidden; pointer-events: none; }
.cbadge { position: absolute; right: -6px; bottom: -4px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-style: normal;
  background: linear-gradient(180deg, #3b2270, #1c0f3a); color: #e9dcff; border: 1.5px solid rgba(232, 186, 90, .55); box-shadow: 0 3px 8px rgba(0, 0, 0, .6); }
.cnode > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cnode b { font-size: 14.5px; line-height: 1.2; }
.cnode small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cnode u { display: flex; align-items: center; gap: 5px; text-decoration: none; font-size: 12px; font-weight: 700; color: #ffe08a; min-width: 0; }
.cnode u span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cnode u.got { color: #7dffb0; }
.cnode:hover:not(:disabled) { background: rgba(255, 255, 255, .05); transform: translateX(3px); }
.cnode:hover:not(:disabled) .cmed { transform: scale(1.08); }
/* completed: gold rim, gold check, a slow shine */
.cnode.won .cmed { border-color: var(--gold-1); box-shadow: 0 0 0 3px rgba(8, 4, 18, .85), 0 0 0 4px rgba(242, 193, 78, .45), 0 8px 18px rgba(0, 0, 0, .55); }
.cnode.won .cmed::before { background: linear-gradient(115deg, transparent 35%, rgba(255, 240, 200, .55) 50%, transparent 65%) -150% 0 / 250% 100% no-repeat; animation: cShine 5.5s ease-in-out infinite; }
.cnode.won .cbadge { background: linear-gradient(180deg, #ffe39a, #d99a2a); color: #2b1600; border-color: #fff0c2; }
@keyframes cShine { 0%, 70% { background-position: -150% 0; } 100% { background-position: 150% 0; } }
/* available: pulsing */
.cnode.open { background: linear-gradient(90deg, rgba(242, 193, 78, .12), rgba(255, 255, 255, .02)); border-color: rgba(242, 193, 78, .45); }
.cnode.open .cmed { border-color: var(--gold-hi); animation: cPulse 2.2s ease-in-out infinite; }
.cnode.open .cbadge { background: linear-gradient(180deg, #8a55e0, #4a1f9a); color: #fff; border-color: var(--gold-1); }
@keyframes cPulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(8, 4, 18, .85), 0 0 0 4px rgba(242, 193, 78, .7), 0 0 0 4px rgba(242, 193, 78, 0); }
  50% { box-shadow: 0 0 0 3px rgba(8, 4, 18, .85), 0 0 0 5px rgba(242, 193, 78, .9), 0 0 0 13px rgba(242, 193, 78, .14), 0 0 26px rgba(242, 193, 78, .55); } }
/* locked: dim, chained */
.cnode.locked { cursor: not-allowed; }
.cnode.locked .cmed { filter: grayscale(1) brightness(.42); border-style: dashed; border-color: rgba(190, 160, 255, .35); }
.cnode.locked .cbadge { background: #1a1328; color: #8e82ab; border-color: rgba(190, 160, 255, .3); }
.cnode.locked > div { opacity: .55; }
/* boss: larger, ornate frame */
.cnode.boss { grid-template-columns: 66px 1fr; }
.cnode.boss .cmed { width: 64px; height: 64px; border: 3px solid transparent;
  background: var(--art) var(--pos, 50% 35%) / cover no-repeat padding-box, conic-gradient(from 0deg, #fff0c2, #c98a22, #7a4a10, #e2b04a, #fff0c2, #a8741c, #5c3c0a, #f6d98a, #fff0c2) border-box; }
.cnode.boss .cmed::after { content: ""; position: absolute; left: 50%; top: -9px; width: 12px; height: 12px; transform: translateX(-50%) rotate(45deg); z-index: 2;
  background: linear-gradient(135deg, var(--gold-hi), var(--gold-3)); box-shadow: 0 0 10px rgba(242, 193, 78, .8); }
.cnode.boss b { font-family: var(--font-title); font-weight: 800; letter-spacing: .03em; }
.cnode.boss .cbadge { background: linear-gradient(180deg, #b3261e, #5a0c08); color: #ffe3de; border-color: #ffb3a8; }
.cnode.boss.won .cbadge { background: linear-gradient(180deg, #ffe39a, #d99a2a); color: #2b1600; border-color: #fff0c2; }
.cnode.boss.locked .cmed { border-style: solid; }

body.mobile .chron-lore p, body.mobile .chron-ch > p { display: none; }
body.mobile .chron-lore .af-eyebrow { font-size: 17px; } body.mobile .chron-top .playing { font-size: 20px; }
body.mobile .chron-hero { height: 150px; } body.mobile .chron-htxt b { font-size: 28px; } body.mobile .chron-htxt span { font-size: 14px; }
body.mobile .chron-ring { width: 62px; height: 62px; } body.mobile .chron-ring b { font-size: 21px; } body.mobile .chron-ring small { font-size: 14px; }
body.mobile .cnode { grid-template-columns: 82px 1fr; padding: 8px 8px 8px 2px; }
body.mobile .cmed { width: 72px; height: 72px; } body.mobile .cnode.boss .cmed { width: 78px; height: 78px; }
body.mobile .cnode::before { left: 42px; top: calc(50% + 36px); height: calc(100% + 6px - 72px); }
body.mobile .cbadge { width: 32px; height: 32px; font-size: 18px; }
body.mobile .cnode b { font-size: 21px; } body.mobile .cnode small { font-size: 16px; } body.mobile .cnode u { font-size: 17px; }

/* =====================================================================
   STORY MODAL: art header + cinematic entrance
   ===================================================================== */
#sheet .box.storybox { width: 1060px; max-width: 1100px; padding: 0 0 24px; overflow: hidden; }
.story { position: relative; text-align: left; }
.story-hero { position: relative; height: 200px; isolation: isolate; overflow: hidden; border-radius: 19px 19px 0 0; }
.story-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--art) var(--pos, center 30%) / cover; animation: stZoom 2.4s var(--ease-out) both; }
.story-hero::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(14, 8, 28, .1) 0%, rgba(14, 8, 28, .25) 45%, rgba(26, 15, 52, .98) 100%), linear-gradient(90deg, rgba(14, 8, 28, .55), transparent 40%, transparent 60%, rgba(14, 8, 28, .55)); }
.story-htxt { position: absolute; left: 262px; right: 228px; bottom: 14px; }
.story-htxt .af-eyebrow { color: color-mix(in srgb, var(--c) 45%, var(--gold-1)); text-shadow: 0 2px 6px #000; animation: stFade .7s .25s both; }
.story-htxt h2 { font: 800 36px/1.08 var(--font-title); letter-spacing: .04em; margin: 6px 0 0; color: #fff4d6; -webkit-text-fill-color: #fff4d6; background: none; filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .9));
  animation: stTitle 1.1s .15s var(--ease-out) both; }
.story-grid { display: grid; grid-template-columns: 200px 1fr 172px; gap: 28px; align-items: start; padding: 0 30px 0 32px; }
.story-art { margin-top: -150px; position: relative; z-index: 2; animation: stRise .8s .1s var(--ease-out) both; }
.story-art .lc { width: 200px; height: 296px; box-shadow: 0 24px 50px rgba(0, 0, 0, .7), 0 0 0 1px rgba(232, 186, 90, .4); }
.story.isboss .story-art .lc { box-shadow: 0 24px 50px rgba(0, 0, 0, .7), 0 0 40px rgba(255, 90, 70, .45); }
.story-body { max-height: 380px; overflow-y: auto; padding: 16px 8px 4px 0; }
.scene { border-left: 2px solid var(--gold-2); padding: 2px 0 2px 16px; margin-bottom: 14px; position: relative; }
.scene::before { content: ""; position: absolute; left: -5px; top: -2px; width: 8px; height: 8px; transform: rotate(45deg); background: var(--gold-1); }
.scene p { margin: 0 0 7px; font: italic 17.5px/1.45 var(--font-card); color: #f1e6ff; animation: stLine .9s var(--ease-out) both; animation-delay: calc(var(--i) * .42s + .55s); }
.teach { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: baseline; padding: 10px 14px; border-radius: 12px; margin-bottom: 10px;
  background: linear-gradient(90deg, rgba(242, 193, 78, .1), rgba(255, 255, 255, .03)); border: 1px solid rgba(242, 193, 78, .3); animation: stFade .6s 1.4s both; }
.teach span { font: 800 10.5px var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-2); }
.teach b { font: 800 18px var(--font-title); color: #fff4d6; }
.teach em { grid-column: 1 / -1; font-style: normal; font-size: 14px; color: #d8ccef; line-height: 1.4; }
.histbtn { appearance: none; display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(242, 193, 78, .45); background: rgba(242, 193, 78, .08); color: #ffe08a;
  font: 700 14px var(--font-ui); padding: 8px 14px; border-radius: 10px; cursor: pointer; transition: background .2s, transform .2s var(--ease-back); animation: stFade .6s 1.55s both; }
.histbtn:hover { background: rgba(242, 193, 78, .18); transform: translateY(-1px); }
.hist { margin: 8px 0 4px; padding: 12px 14px; border-radius: 12px; background: rgba(0, 0, 0, .3); border: 1px solid var(--line); }
.hist:not([hidden]) { animation: stFade .35s both; }
.hist p { margin: 0 0 6px; font-size: 14.5px; line-height: 1.5; } .hist em { font-size: 12px; color: var(--muted); }
.foe { margin: 12px 0 8px; font-size: 14px; color: var(--muted); } .foe b { color: #ffcf9a; }
.intents { display: flex; flex-direction: column; gap: 5px; margin: 4px 0 10px; }
.intents > div { display: grid; grid-template-columns: 140px 1fr auto; gap: 10px; align-items: baseline; padding: 7px 10px; border-radius: 10px; background: rgba(255, 90, 70, .08); border: 1px solid rgba(255, 90, 70, .3); font-size: 13.5px; }
.intents b { color: #ffcf9a; font-family: var(--font-title); } .intents em { font-style: normal; font-size: 12px; color: #7dffb0; white-space: nowrap; }
.story .playing { text-align: left; margin: 4px 0 0; font-size: 14px; }
.story-reward { margin-top: -120px; position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 12px 10px 14px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(40, 24, 72, .96), rgba(18, 10, 36, .97)); border: 1px solid rgba(242, 193, 78, .5); box-shadow: 0 18px 40px rgba(0, 0, 0, .6), 0 0 24px rgba(242, 193, 78, .18);
  animation: stRise .8s .3s var(--ease-out) both; }
.story-reward .af-eyebrow { font-size: 10.5px; }
.story-reward .rc { position: relative; width: 148px; height: 207px; perspective: 800px; }
.story-reward .rc .card { position: relative; width: 148px; height: 207px; cursor: zoom-in; animation: stFlip .9s .55s var(--ease-back) both; }
.story-reward b { font-family: var(--font-card); font-size: 15px; line-height: 1.2; }
.story-reward span { font-size: 12.5px; color: var(--muted); } .story-reward .plus { color: #ffe08a; font-weight: 700; }
.storybox .actions { margin-top: 16px; padding: 0 30px; }
@keyframes stZoom { from { transform: scale(1.16); filter: brightness(1.6) saturate(.6); } to { transform: none; filter: none; } }
@keyframes stTitle { from { opacity: 0; letter-spacing: .3em; filter: blur(8px) drop-shadow(0 3px 10px rgba(0, 0, 0, .9)); } to { opacity: 1; letter-spacing: .04em; filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .9)); } }
@keyframes stFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes stLine { from { opacity: 0; transform: translateY(8px); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes stRise { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes stFlip { from { opacity: 0; transform: rotateY(90deg) scale(.9); } to { opacity: 1; transform: none; } }
body.mobile #sheet .box.storybox { width: 1500px; max-width: 1500px; }
body.mobile .story-hero { height: 190px; } body.mobile .story-htxt { left: 262px; right: 250px; } body.mobile .story-htxt h2 { font-size: 44px; } body.mobile .story-htxt .af-eyebrow { font-size: 16px; }
body.mobile .story-grid { grid-template-columns: 200px 1fr 190px; }
body.mobile .story-body { max-height: 440px; }
body.mobile .scene p { font-size: 24px; } body.mobile .teach b { font-size: 25px; } body.mobile .teach span { font-size: 14px; } body.mobile .teach em, body.mobile .hist p { font-size: 21px; }
body.mobile .histbtn, body.mobile .foe, body.mobile .story .playing { font-size: 20px; } body.mobile .story-reward span, body.mobile .story-reward b { font-size: 18px; }
body.mobile .intents > div { font-size: 19px; grid-template-columns: 190px 1fr; } body.mobile .intents em { grid-column: 2; font-size: 17px; }

/* =====================================================================
   WEEKLY BOSS: hero banner
   ===================================================================== */
.bhero { display: grid; grid-template-columns: 300px 1fr; gap: 44px; align-items: center; max-width: 1420px; margin: 4px auto 0; padding: 30px 44px 30px 40px; overflow: hidden; isolation: isolate;
  border-color: rgba(255, 120, 90, .35); }
.bhero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--art) var(--pos, 70% 30%) / cover; opacity: .55; animation: bhDrift 30s ease-in-out infinite alternate; }
.bhero::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(14, 6, 22, .96) 0%, rgba(14, 6, 22, .82) 38%, rgba(30, 8, 16, .55) 70%, rgba(14, 6, 22, .7) 100%), radial-gradient(ellipse 60% 80% at 16% 50%, rgba(255, 70, 50, .22), transparent 70%); }
@keyframes bhDrift { from { transform: scale(1.04); } to { transform: scale(1.12) translateX(-2%); } }
.bcard .lc { width: 300px; height: 445px; box-shadow: 0 0 0 1px rgba(255, 180, 150, .4), 0 0 60px rgba(255, 90, 70, .5), 0 30px 60px rgba(0, 0, 0, .7); animation: overLead 5s ease-in-out infinite; }
.binfo { min-width: 0; }
.binfo .af-eyebrow { color: #ffb39a; }
.binfo h2 { font: 900 50px/1.04 var(--font-title); letter-spacing: .03em; margin: 8px 0 8px; background: linear-gradient(180deg, #fff3e0, #ffcf9a 55%, #e0763a); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .5)) drop-shadow(0 0 22px rgba(255, 110, 70, .35)); }
.brules { margin: 0 0 16px; font-size: 16px; line-height: 1.5; color: #eadcf8; max-width: 760px; }
.bints { display: flex; flex-direction: column; gap: 7px; margin: 0 0 20px; max-width: 800px; }
.bints-h { display: flex; align-items: center; gap: 8px; font: 800 12px var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: #ff9c86; margin-bottom: 2px; }
.bint { display: grid; grid-template-columns: 34px 1fr auto; gap: 14px; align-items: center; padding: 9px 14px 9px 10px; border-radius: 12px;
  background: linear-gradient(90deg, rgba(120, 20, 20, .45), rgba(40, 10, 24, .55)); border: 1px solid rgba(255, 110, 90, .35); animation: afRise .5s var(--ease-out) both; animation-delay: calc(var(--i) * 80ms + 200ms); }
.bint > i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 900 14px var(--font-title); font-style: normal; color: #2a0800; background: linear-gradient(180deg, #ffd0b8, #e0603a); box-shadow: 0 0 12px rgba(255, 110, 70, .5); }
.bint b { display: block; font: 800 16px var(--font-title); color: #fff0e6; letter-spacing: .03em; }
.bint span { display: block; font-size: 13.5px; color: #e6d4ec; }
.bint em { display: flex; align-items: center; gap: 6px; font-style: normal; font-size: 12px; font-weight: 800; white-space: nowrap; padding: 5px 10px; border-radius: 99px; }
.bint em.hit { color: #9fe3ff; background: rgba(111, 211, 255, .12); border: 1px solid rgba(111, 211, 255, .35); }
.bint em.kill { color: #7dffb0; background: rgba(125, 255, 176, .1); border: 1px solid rgba(125, 255, 176, .3); }
.bfoot { display: flex; align-items: center; gap: 26px; margin-bottom: 12px; }
.bfight { font-size: 22px; padding: 18px 36px; letter-spacing: .1em; }
.breward { display: flex; flex-direction: column; gap: 3px; }
.breward span { display: flex; align-items: center; gap: 7px; font: 800 12px var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-1); }
.breward span.done { color: #7dffb0; }
.breward small { font-size: 15px; color: #eadcf8; } .breward b { color: #fff4d6; }
.binfo .playing { text-align: left; margin: 0; }
.bseal { position: absolute; top: 22px; right: 26px; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 104px; height: 104px; justify-content: center; border-radius: 50%; transform: rotate(-12deg);
  color: #2b1600; font-size: 34px; background: radial-gradient(circle at 40% 35%, #fff0c2, #e2b04a 55%, #a8741c); box-shadow: 0 0 0 4px rgba(14, 6, 22, .8), 0 0 0 6px var(--gold-2), 0 10px 30px rgba(0, 0, 0, .6);
  animation: sealIn .7s .3s var(--ease-back) both; }
.bseal span { font: 900 12px var(--font-title); letter-spacing: .14em; text-transform: uppercase; }
@keyframes sealIn { from { opacity: 0; transform: rotate(-30deg) scale(1.8); } to { opacity: 1; transform: rotate(-12deg) scale(1); } }
.brot { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 18px auto 0; max-width: 1420px; }
.brot .af-eyebrow { margin-right: 6px; }
.brc { display: flex; align-items: center; gap: 8px; padding: 5px 14px 5px 5px; border-radius: 99px; font-size: 13px; color: var(--muted); background: rgba(14, 8, 28, .7); border: 1px solid rgba(190, 160, 255, .18); }
.brc i { width: 28px; height: 28px; border-radius: 50%; background: center 16% / cover; filter: grayscale(.6) brightness(.8); }
.brc.on { color: #fff4d6; border-color: var(--gold-2); box-shadow: 0 0 16px rgba(242, 193, 78, .25); } .brc.on i { filter: none; box-shadow: 0 0 0 2px var(--gold-1); }
body.mobile .bhero { grid-template-columns: 290px 1fr; gap: 36px; padding: 22px 34px; max-width: none; }
body.mobile .bcard .lc { width: 290px; height: 430px; }
body.mobile .binfo h2 { font-size: 56px; } body.mobile .brules { font-size: 21px; } body.mobile .binfo .af-eyebrow { font-size: 16px; }
body.mobile .bint b { font-size: 21px; } body.mobile .bint span { font-size: 18px; } body.mobile .bint em { font-size: 16px; } body.mobile .bints-h { font-size: 16px; }
body.mobile .bint { padding: 7px 14px 7px 10px; }
body.mobile .brot { display: none; }
body.mobile .breward small { font-size: 20px; } body.mobile .breward span { font-size: 15px; } body.mobile .bfight { font-size: 28px; }

/* =====================================================================
   PUZZLES: art tiles
   ===================================================================== */
.pzhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; max-width: 1420px; margin: 0 auto 16px; }
.pzhead h2 { font: 800 30px var(--font-title); margin: 4px 0 2px; color: #fff4d6; letter-spacing: .04em; }
.pzhead p { margin: 0; color: #d8ccef; font-size: 15px; } .pzhead p b { color: var(--gold-1); }
.pzprog { width: 260px; text-align: right; }
.pzprog b { font: 900 34px/1 var(--font-title); color: #fff4d6; } .pzprog small { font-size: 18px; color: var(--muted); } .pzprog > span { margin-left: 6px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pzprog .qbar { height: 8px; margin-top: 8px; } .pzprog .qbar i { background: linear-gradient(90deg, var(--gold-3), var(--gold-1)); }
.puzzles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; max-width: 1420px; margin: 0 auto; }
.puzzles .puzzle { appearance: none; display: flex; flex-direction: column; justify-content: flex-end; min-height: 250px; padding: 0; text-align: left; color: var(--ink); font: inherit;
  background: var(--art) var(--pos, center 30%) / cover no-repeat, #1a1030; border: 1px solid rgba(232, 186, 90, .35); }
.puzzles .puzzle:hover { border-color: var(--gold-1); }
.puzzles .puzzle .n { position: absolute; top: 12px; left: 12px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font: 900 20px var(--font-title); color: #2b1600;
  background: radial-gradient(circle at 40% 35%, #fff0c2, #e2b04a 60%, #a8741c); box-shadow: 0 0 0 3px rgba(8, 4, 18, .75), 0 6px 14px rgba(0, 0, 0, .5); }
.pzt { display: flex; flex-direction: column; gap: 5px; padding: 60px 16px 16px; background: linear-gradient(180deg, transparent, rgba(8, 4, 18, .85) 38%, rgba(8, 4, 18, .96)); }
.pzt b { font: 800 19px var(--font-title); color: #fff4d6; letter-spacing: .03em; }
.pzt em { font-style: normal; font-size: 13px; line-height: 1.4; color: #d8ccef; }
.pzt i { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-style: normal; font: 800 12px var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-1); }
.puzzles .puzzle.solved { border-color: rgba(125, 255, 176, .45); }
.puzzles .puzzle.solved .pzt i { color: #7dffb0; }
.pzseal { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; color: #06301a;
  background: radial-gradient(circle at 40% 35%, #d8ffe6, #3fcf7a); box-shadow: 0 0 0 3px rgba(8, 4, 18, .75), 0 0 18px rgba(125, 255, 176, .55); }
body.mobile .pzhead h2 { font-size: 38px; } body.mobile .pzhead p { font-size: 20px; } body.mobile .pzprog > span { font-size: 16px; }
body.mobile .puzzles { max-width: none; } body.mobile .puzzles .puzzle { min-height: 300px; }
body.mobile .pzt b { font-size: 25px; } body.mobile .pzt em { font-size: 18px; } body.mobile .pzt i { font-size: 16px; } body.mobile .puzzles .puzzle .n { width: 54px; height: 54px; font-size: 25px; }

/* =====================================================================
   RIFT RUN
   ===================================================================== */
.runintro { display: grid; grid-template-columns: 1fr 1.25fr; gap: 40px; align-items: center; max-width: 1420px; margin: 4px auto 0; padding: 34px 40px; text-align: left; overflow: hidden; isolation: isolate; }
.runintro::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--art) var(--pos, center 30%) / cover; opacity: .3; }
.runintro::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(14, 8, 28, .95) 30%, rgba(14, 8, 28, .7)); }
.runintro h2 { font: 900 46px var(--font-title); margin: 6px 0 8px; letter-spacing: .05em; color: #fff4d6; }
.runintro .lead { text-align: left; margin: 0 0 16px; max-width: none; color: #e0d4f4; font-size: 16px; line-height: 1.5; }
.rrules { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.rrules li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: #d8ccef; }
.rrules .mi { font-size: 20px; color: var(--gold-1); }
.rbest { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 99px; background: rgba(242, 193, 78, .1); border: 1px solid rgba(242, 193, 78, .35); color: #eadcf8; font-size: 14px; }
.rbest .mi { color: var(--gold-1); } .rbest b { color: #fff4d6; font-family: var(--font-title); font-size: 18px; }
.rpick { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.rpick .runleaders { display: grid; grid-template-columns: repeat(3, 140px); gap: 14px; margin: 4px 0 6px; }
.rpick .rl { border-radius: 12px; transition: transform .3s var(--ease-back), filter .3s; filter: saturate(.7) brightness(.8); }
.rpick .rl:hover { filter: none; transform: translateY(-5px); }
.rpick .rl.on { filter: none; transform: translateY(-5px); }
.rpick .rl .lc { width: 140px; height: 208px; }
.runhead { display: flex; align-items: center; justify-content: space-between; gap: 34px; max-width: 1420px; margin: 0 auto 16px; padding: 14px 26px; flex-wrap: nowrap; }
.rh-sec { display: flex; flex-direction: column; gap: 8px; }
.rh-relics { flex: 1; align-items: flex-end; }
.floors { position: relative; display: flex; align-items: center; gap: 22px; }
.floors::before { content: ""; position: absolute; left: 20px; right: 20px; top: 50%; height: 3px; transform: translateY(-50%); background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .22) 0 6px, transparent 6px 11px); }
.floors .fl { position: relative; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font: 900 16px var(--font-title); color: var(--muted);
  background: #1a1030; border: 2px solid rgba(190, 160, 255, .3); box-shadow: 0 0 0 3px rgba(8, 4, 18, .85); }
.floors .fl.done { color: #2b1600; background: radial-gradient(circle at 40% 35%, #fff0c2, #e2b04a 60%, #a8741c); border-color: #fff0c2; font-size: 20px; }
.floors .fl.cur { color: #fff; background: linear-gradient(180deg, #8a55e0, #4a1f9a); border-color: var(--gold-hi); animation: cPulse 2.2s ease-in-out infinite; transform: scale(1.12); }
.floors .fl.boss { width: 50px; height: 50px; font-size: 22px; color: #ffb3a8; border: 3px solid transparent;
  background: linear-gradient(#3a0c14, #1a0610) padding-box, conic-gradient(#fff0c2, #c98a22, #7a4a10, #e2b04a, #fff0c2) border-box; }
.floors .fl.boss.cur { color: #fff; background: linear-gradient(#b3261e, #5a0c08) padding-box, conic-gradient(#fff0c2, #c98a22, #7a4a10, #e2b04a, #fff0c2) border-box; }
.lives { display: flex; gap: 6px; letter-spacing: 0; }
.hrt .mi { width: 32px; height: 32px; }
.hrt.full { color: #ffc8c0; filter: drop-shadow(0 0 8px rgba(255, 70, 50, .6)); } .hrt.full .mi { fill: #e0342a; }
.hrt.lost { color: #5a4a6a; } .hrt.lost .mi { fill: rgba(0, 0, 0, .35); }
.relics { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.relic { display: flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; border-radius: 99px; background: rgba(242, 193, 78, .08); border: 1px solid rgba(242, 193, 78, .35); font-size: 13px; }
.relic i, .offr > i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-style: normal; font-size: 18px; color: var(--gold-hi);
  background: radial-gradient(circle at 40% 35%, #6a3fb8, #1c0f3a 75%); box-shadow: 0 0 0 2px var(--gold-2), 0 0 0 4px rgba(8, 4, 18, .8), 0 0 14px rgba(242, 193, 78, .35); }
.relic b { font-weight: 700; color: #fff4d6; }
.norelic { font-size: 13px; }
.rtitle { font-size: 22px; max-width: 900px; margin: 6px auto 4px; }
.offer { display: flex; gap: 24px; justify-content: center; align-items: stretch; margin: 14px 0; }
.offr { appearance: none; width: 210px; border-radius: 16px; border: 1px solid var(--gold-2); background: radial-gradient(ellipse at 50% 20%, rgba(120, 70, 210, .45), rgba(20, 10, 40, .92) 70%); color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px; cursor: pointer; box-shadow: 0 16px 34px rgba(0, 0, 0, .5); transition: transform .3s var(--ease-back), box-shadow .3s; }
.offr:hover { transform: translateY(-10px); box-shadow: 0 22px 44px rgba(0, 0, 0, .6), 0 0 26px rgba(242, 193, 78, .35); }
.offr > i { width: 76px; height: 76px; font-size: 38px; margin-bottom: 6px; }
.offr b { font: 800 18px var(--font-title); } .offr em { font-style: normal; font-size: 13px; color: #d8ccef; line-height: 1.4; }
.nextopp { display: grid; grid-template-columns: 250px 1fr; gap: 40px; align-items: center; max-width: 1100px; margin: 0 auto; padding: 26px 36px; overflow: hidden; isolation: isolate; }
.nextopp::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--art) var(--pos, center 30%) / cover; opacity: .35; }
.nextopp::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(14, 8, 28, .6), rgba(14, 8, 28, .95) 45%); }
.nextopp.boss { border-color: rgba(255, 110, 90, .5); box-shadow: var(--sh-deep), 0 0 40px rgba(255, 90, 70, .25); }
.nextopp .lc { width: 250px; height: 370px; box-shadow: 0 24px 50px rgba(0, 0, 0, .6); }
.nextopp h2 { font: 900 40px var(--font-title); margin: 6px 0; color: #fff4d6; }
.nextopp .lead { text-align: left; margin: 6px 0 20px; max-width: none; }
body.mobile .runintro { max-width: none; padding: 24px 34px; } body.mobile .runintro .lead { font-size: 21px; } body.mobile .rrules li { font-size: 19px; } body.mobile .rbest { font-size: 19px; }
body.mobile .rpick .runleaders { grid-template-columns: repeat(3, 150px); } body.mobile .rpick .rl .lc { width: 150px; height: 222px; }
body.mobile .runhead { max-width: none; } body.mobile .floors .fl { width: 54px; height: 54px; font-size: 20px; } body.mobile .floors .fl.boss { width: 62px; height: 62px; }
body.mobile .hrt .mi { width: 42px; height: 42px; } body.mobile .relic { font-size: 17px; } body.mobile .norelic { font-size: 17px; }
body.mobile .offr b { font-size: 22px; } body.mobile .offr em { font-size: 17px; } body.mobile .nextopp h2 { font-size: 46px; }

/* =====================================================================
   CHALLENGES: quest cards + claim moment
   ===================================================================== */
.quests { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 1420px; margin: 0 auto; }
.qcol { padding: 20px 22px 16px; }
.qcol .m-h small { margin-left: auto; display: flex; align-items: center; gap: 5px; }
.quests .quest { position: relative; display: grid; grid-template-columns: 46px 1fr 78px 108px; gap: 14px; align-items: center; padding: 14px 16px; margin-bottom: 10px; border-radius: 14px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02)); border: 1px solid rgba(190, 160, 255, .16); transition: border-color .3s, box-shadow .3s, opacity .3s; }
.qic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 21px; color: #cdb8ff; background: radial-gradient(circle at 40% 35%, rgba(120, 70, 210, .55), rgba(20, 10, 40, .9)); box-shadow: 0 0 0 1.5px rgba(190, 160, 255, .35); }
.qtxt { min-width: 0; } .qtxt b { font-size: 15px; display: block; line-height: 1.3; } .qtxt > span { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.quests .qbar { height: 8px; margin: 8px 0 4px; background: rgba(0, 0, 0, .35); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset; }
.quests .qbar i { background: linear-gradient(90deg, #7a4ae0, #b98aff); border-radius: 99px; }
.quests .qr { justify-content: flex-end; font-size: 20px; color: #fff4d6; } .quests .qr .coin { width: 22px; height: 22px; }
.quests .quest .btn { justify-self: stretch; }
.quests .quest.ready { border-color: rgba(242, 193, 78, .6); box-shadow: 0 0 22px rgba(242, 193, 78, .18), 0 0 0 1px rgba(242, 193, 78, .25) inset; background: linear-gradient(90deg, rgba(242, 193, 78, .12), rgba(255, 255, 255, .02)); }
.quests .quest.ready .qic { color: #2b1600; background: radial-gradient(circle at 40% 35%, #fff0c2, #e2b04a 60%, #a8741c); box-shadow: 0 0 16px rgba(242, 193, 78, .5); }
.quests .quest.ready .qbar i { background: linear-gradient(90deg, var(--gold-3), var(--gold-1), var(--gold-hi), var(--gold-1), var(--gold-3)); background-size: 200% 100%; animation: qShim 1.8s linear infinite; }
@keyframes qShim { to { background-position: -200% 0; } }
.quests .quest.claimed { opacity: .62; }
.quests .quest.claimed .qic { color: #06301a; background: radial-gradient(circle at 40% 35%, #d8ffe6, #3fcf7a); box-shadow: none; }
.quests .quest.claimed .qbar i { background: linear-gradient(90deg, #2f9a5a, #7dffb0); }
.qdone { display: flex; align-items: center; justify-content: center; gap: 6px; font-style: normal; font-weight: 800; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #7dffb0; }
.quests .quest.claiming { animation: qPress .3s var(--ease-out) both; }
@keyframes qPress { to { transform: scale(.97); } }
.quests .quest.justclaimed { opacity: 1; animation: qClaim 1.2s var(--ease-out) both; }
.quests .quest.justclaimed::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgba(255, 240, 200, .45) 50%, transparent 70%) -120% 0 / 60% 100% no-repeat; animation: qSweep .9s .1s var(--ease-out) both; }
.quests .quest.justclaimed .qic { animation: qPop .6s var(--ease-back) both; }
@keyframes qClaim { 0% { border-color: var(--gold-hi); box-shadow: 0 0 40px rgba(242, 193, 78, .6); } 100% { border-color: rgba(190, 160, 255, .16); box-shadow: none; } }
@keyframes qSweep { to { background-position: 220% 0; } }
@keyframes qPop { 0% { transform: scale(.3) rotate(-30deg); } 100% { transform: none; } }
.qbonus { display: grid; grid-template-columns: 46px 1fr auto auto; gap: 14px; align-items: center; margin-top: 6px; padding: 12px 16px; border-radius: 14px; border: 1px dashed rgba(242, 193, 78, .45); background: rgba(242, 193, 78, .05); }
.qbonus .qpk { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; color: var(--gold-hi); background: linear-gradient(180deg, #6a3fb8, #2a1258); box-shadow: 0 0 0 1.5px var(--gold-2); }
.qbonus b { display: block; font-size: 15px; color: #fff4d6; } .qbonus div > span { font-size: 12.5px; color: var(--muted); }
.qpips { display: flex; gap: 6px; } .qpips i { width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, .1); box-shadow: 0 0 0 1px rgba(242, 193, 78, .35) inset; }
.qpips i.on { background: var(--gold-1); box-shadow: 0 0 8px rgba(242, 193, 78, .7); }
.qbonus em { font-style: normal; font: 800 15px var(--font-title); color: var(--gold-1); }
.qbonus.got { border-style: solid; border-color: rgba(125, 255, 176, .4); }
body.mobile .quests { max-width: none; gap: 20px; }
body.mobile .quests .quest { grid-template-columns: 56px 1fr 96px 150px; }
body.mobile .qic { width: 54px; height: 54px; font-size: 26px; } body.mobile .qtxt b { font-size: 21px; } body.mobile .qtxt > span { font-size: 16px; }
body.mobile .quests .qr { font-size: 26px; } body.mobile .qbonus b { font-size: 20px; } body.mobile .qbonus div > span { font-size: 16px; } body.mobile .qdone { font-size: 17px; }

/* =====================================================================
   PROFILE: header, match history, stats, settings, account, mastery
   ===================================================================== */
.phead { display: grid; grid-template-columns: auto 132px 1fr; grid-template-rows: 1fr auto; gap: 6px 28px; align-items: center; max-width: 1480px; margin: 0 auto 18px; padding: 16px 26px 16px 16px; }
.phead .pcc { grid-row: 1 / 3; cursor: pointer; transition: transform .3s var(--ease-back); }
.phead .pcc:hover { transform: translateY(-3px); }

.plvl { grid-row: 1 / 3; position: relative; width: 112px; height: 112px; display: grid; place-items: center; justify-self: center; }
.plvl .mring { position: absolute; inset: 8px; width: 96px; height: 96px; --ring: var(--gold-1); filter: drop-shadow(0 0 8px rgba(242, 193, 78, .45)); }
.plvl::before { content: ""; position: absolute; inset: 18px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, rgba(120, 70, 210, .7), rgba(20, 10, 40, .95)); box-shadow: 0 0 0 1px rgba(232, 186, 90, .4) inset; }
.plvl > div { position: relative; text-align: center; }
.plvl b { display: block; font: 900 32px/1 var(--font-title); color: #fff4d6; }
.plvl span { font: 800 10px var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-2); }
.pstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-self: end; }
.pstats div { padding: 4px 0 0 14px; border-left: 1px solid rgba(232, 186, 90, .25); }
.pstats b { display: block; font: 900 30px/1.1 var(--font-title); color: #fff4d6; font-variant-numeric: tabular-nums; }
.pstats span { font: 800 11px var(--font-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.pxp { align-self: start; display: flex; align-items: center; gap: 14px; }
.pxp span { flex: none; font-size: 12px; color: var(--muted); }
.pxp .qbar { flex: 1; height: 6px; margin: 0; } .pxp .qbar i { background: linear-gradient(90deg, var(--gold-3), var(--gold-1)); }
.pname { font: 800 24px var(--font-title); margin-left: 12px; }
.pav.big { width: 110px; height: 110px; }
body.mobile .phead { max-width: none; grid-template-columns: auto 150px 1fr; }

body.mobile .pstats b { font-size: 38px; } body.mobile .pstats span { font-size: 15px; } body.mobile .pxp span { font-size: 17px; } body.mobile .plvl span { font-size: 13px; }
body.mobile .pxp { display: none; } body.mobile .pstats { align-self: center; } body.mobile .phead { grid-template-rows: 1fr; }

/* match history */
.m-h.hh { max-width: 1480px; margin: 4px auto 10px; }
.hlist { display: flex; flex-direction: column; gap: 8px; max-width: 1480px; margin: 0 auto; }
.hrow { position: relative; display: grid; grid-template-columns: 128px 128px minmax(0, 1fr) 170px 150px 110px 128px; gap: 16px; align-items: center; min-height: 72px; padding: 8px 14px 8px 22px;
  border-radius: 14px; overflow: hidden; isolation: isolate; background: linear-gradient(90deg, rgba(30, 17, 58, .92), rgba(14, 8, 28, .9)); border: 1px solid rgba(190, 160, 255, .14);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .35); transition: transform .25s var(--ease-out), border-color .25s, box-shadow .25s; animation: afRise .45s var(--ease-out) both; animation-delay: calc(min(var(--i), 12) * 35ms); }
.hrow:hover { transform: translateX(4px); border-color: rgba(232, 186, 90, .4); box-shadow: 0 12px 26px rgba(0, 0, 0, .45); }
.hrow::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: #6a5a8a; }
.hrow::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--art) var(--pos, 30% 30%) / cover; opacity: .2;
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 45%); mask-image: linear-gradient(90deg, #000, transparent 45%); }
.hrow.win::before { background: linear-gradient(180deg, var(--gold-hi), var(--gold-2)); box-shadow: 0 0 14px rgba(242, 193, 78, .7); }
.hrow.loss::before { background: linear-gradient(180deg, #ff9c86, #b3261e); }
.hres b { display: block; font: 900 20px var(--font-title); letter-spacing: .08em; text-transform: uppercase; }
.hrow.win .hres b { background: linear-gradient(180deg, var(--gold-hi), var(--gold-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hrow.loss .hres b { color: #ff9c92; } .hrow.none .hres b { color: var(--muted); }
.hres span { font-size: 12px; color: var(--muted); }
.hvs { display: flex; align-items: center; gap: 6px; }
.hl { width: 50px; height: 50px; border-radius: 50%; background: #1a1030 center / cover; box-shadow: 0 0 0 2px var(--gold-2), 0 0 0 4px rgba(8, 4, 18, .8), 0 6px 12px rgba(0, 0, 0, .5); }
.hl.opp { box-shadow: 0 0 0 2px rgba(190, 160, 255, .5), 0 0 0 4px rgba(8, 4, 18, .8), 0 6px 12px rgba(0, 0, 0, .5); }
.hrow.loss .hl:not(.opp) { filter: saturate(.6) brightness(.8); } .hrow.win .hl.opp { filter: saturate(.6) brightness(.8); }
.hvs i { font: 900 12px var(--font-title); font-style: normal; color: var(--gold-2); }
.hwho { min-width: 0; } .hwho b { display: block; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hwho span { display: block; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hmode { min-width: 0; } .hmode small { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hchip { display: inline-block; padding: 4px 10px; border-radius: 99px; font: 800 11px var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: #e9dcff; background: rgba(168, 107, 255, .2); border: 1px solid rgba(168, 107, 255, .4); }
.hchip.m-ranked { color: #2b1600; background: linear-gradient(180deg, var(--gold-1), var(--gold-2)); border-color: var(--gold-hi); }
.hchip.m-friend { color: #9fe3ff; background: rgba(111, 211, 255, .12); border-color: rgba(111, 211, 255, .4); }
.hchip.m-solo { color: #7dffb0; background: rgba(125, 255, 176, .1); border-color: rgba(125, 255, 176, .35); }
.hdate { font-size: 13px; color: #cfc2ea; font-variant-numeric: tabular-nums; }
.hrate { text-align: right; } .hrate b { display: block; font: 900 20px var(--font-title); font-variant-numeric: tabular-nums; } .hrate span { font-size: 12px; color: var(--muted); }
.hrate.up b { color: #7dffb0; } .hrate.down b { color: #ff9c92; } .hrate .muted { font-size: 12px; }
.hrp { justify-self: end; }
body.mobile .m-h.hh, body.mobile .hlist { max-width: none; }
body.mobile .hrow { grid-template-columns: 150px 150px minmax(0, 1fr) 200px 130px 170px; min-height: 96px; }
body.mobile .hdate { display: none; }
body.mobile .hres b { font-size: 25px; } body.mobile .hres span, body.mobile .hwho span, body.mobile .hmode small, body.mobile .hrate span { font-size: 16px; }
body.mobile .hwho b { font-size: 22px; } body.mobile .hl { width: 62px; height: 62px; } body.mobile .hchip { font-size: 15px; } body.mobile .hrate b { font-size: 26px; }

/* stats */
.sgrid { display: grid; grid-template-columns: .8fr 1.1fr 1.1fr; gap: 18px; max-width: 1480px; margin: 0 auto; align-items: start; }
.sgrid > .m-panel { padding: 18px 20px; }
.m-h.sub { margin-top: 18px; font-size: 16px; }
.swr { display: flex; flex-direction: column; align-items: center; }
.swr .m-h { align-self: stretch; }
.donut { position: relative; width: 170px; height: 170px; display: grid; place-items: center; margin: 4px 0 16px; }
.donut .mring { position: absolute; inset: 0; --ring: var(--gold-1); filter: drop-shadow(0 0 10px rgba(242, 193, 78, .35)); }
.donut .mring .rf { animation: ringIn 1.2s var(--ease-out) both; }
@keyframes ringIn { from { stroke-dashoffset: var(--c0); } }
.donut > div { text-align: center; } .donut b { font: 900 48px/1 var(--font-title); color: #fff4d6; } .donut small { font: 800 20px var(--font-title); color: var(--gold-2); }
.donut span { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }
.snums { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-self: stretch; }
.snums div { text-align: center; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(190, 160, 255, .14); }
.snums b { display: block; font: 900 28px var(--font-title); color: #fff4d6; } .snums span { font: 800 10.5px var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.sbar2 { display: grid; grid-template-columns: auto 1fr 54px; gap: 12px; align-items: center; margin-bottom: 10px; }
.sav { width: 36px; height: 36px; border-radius: 50%; background: center / cover; box-shadow: 0 0 0 2px var(--gold-2); }
.sbt { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.sbt b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sbt em { font-style: normal; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.sbl { min-width: 0; }
.sbtrack { height: 9px; margin-top: 5px; border-radius: 99px; background: rgba(0, 0, 0, .35); overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset; }
.sbtrack i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #7a4ae0, #b98aff); transition: width 1s var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
.sbtrack i.go { width: var(--w); }
.sbar2:has(strong.good) .sbtrack i { background: linear-gradient(90deg, var(--gold-3), var(--gold-1)); }
.sbar2 strong { text-align: right; font: 900 18px var(--font-title); color: #d8ccef; font-variant-numeric: tabular-nums; } .sbar2 strong.good { color: var(--gold-1); }
.snone { font-size: 13px; margin: 4px 0 8px; }
.topcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.tcard { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--art) var(--pos, 50% 35%) / cover, #1a1030; border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); box-shadow: 0 8px 16px rgba(0, 0, 0, .4); }
.tcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(8, 4, 18, .92)); }
.tcard b { position: absolute; top: 6px; right: 6px; z-index: 1; padding: 2px 8px; border-radius: 99px; font: 900 13px var(--font-title); color: #2b1600; background: linear-gradient(180deg, var(--gold-1), var(--gold-2)); }
.tcard span { position: absolute; left: 7px; right: 7px; bottom: 6px; z-index: 1; font-size: 11.5px; font-weight: 700; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.mobile .sgrid { max-width: none; } body.mobile .sbt b { font-size: 19px; } body.mobile .sbt em { display: none; } body.mobile .sbar2 strong { font-size: 22px; }
body.mobile .snums span, body.mobile .donut span { font-size: 15px; } body.mobile .tcard span { font-size: 15px; } body.mobile .sav { width: 44px; height: 44px; }

/* settings */
.settings.m-panel { max-width: 1000px; margin: 0 auto; padding: 20px 24px 12px; gap: 0; }
.settings .set { display: grid; grid-template-columns: 50px 1fr auto; gap: 18px; align-items: center; padding: 16px 6px; border: 0; border-radius: 0; background: none; border-top: 1px solid rgba(190, 160, 255, .12); }
.settings .set:first-of-type { border-top: 0; }
.setic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; color: var(--gold-1); background: radial-gradient(circle at 40% 35%, rgba(120, 70, 210, .55), rgba(20, 10, 40, .9)); box-shadow: 0 0 0 1.5px rgba(232, 186, 90, .4); }
.settxt b { font-size: 17px; } .settxt p { margin: 3px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.4; }
.seg.mseg { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(96px, 1fr)); gap: 0; padding: 4px; border-radius: 12px; background: rgba(0, 0, 0, .4); border: 1px solid rgba(232, 186, 90, .25); }
.seg.mseg .segpill { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--n)); border-radius: 9px; transform: translateX(calc(var(--k) * 100%));
  background: linear-gradient(180deg, #ffe39a, #f0bd4f 45%, #c98a22); box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 4px 12px rgba(0, 0, 0, .4), 0 0 16px rgba(242, 193, 78, .3); transition: transform .35s var(--ease-back); }
.seg.mseg button { position: relative; z-index: 1; background: transparent !important; color: var(--muted); transition: color .25s; }
.seg.mseg button.on { color: #2b1600; }
.seg.mseg button:hover:not(.on) { color: #fff; }
.switch { appearance: none; position: relative; display: flex; align-items: center; gap: 10px; border: 0; background: none; cursor: pointer; padding: 0; color: var(--muted); font: 800 14px var(--font-ui); }
.switch i { position: relative; width: 62px; height: 32px; border-radius: 99px; background: rgba(0, 0, 0, .45); border: 1px solid rgba(232, 186, 90, .3); transition: background .3s; }
.switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(180deg, #e9dcff, #9d8cc2); box-shadow: 0 2px 6px rgba(0, 0, 0, .5); transition: transform .35s var(--ease-back), background .3s; }
.switch.on { color: var(--gold-1); } .switch.on i { background: linear-gradient(180deg, rgba(242, 193, 78, .45), rgba(168, 116, 28, .5)); border-color: var(--gold-1); }
.switch.on i::after { transform: translateX(30px); background: linear-gradient(180deg, #fff0c2, #e2b04a); }
.switch span { width: 28px; text-align: left; }
body.mobile .settings.m-panel { max-width: 1400px; } body.mobile .settxt b { font-size: 24px; } body.mobile .settxt p { font-size: 18px; }
body.mobile .setic { width: 60px; height: 60px; font-size: 28px; } body.mobile .settings .set { grid-template-columns: 64px 1fr auto; }
body.mobile .seg.mseg { grid-template-columns: repeat(var(--n), minmax(130px, 1fr)); } body.mobile .switch { font-size: 20px; } body.mobile .switch i { width: 84px; height: 44px; }
body.mobile .switch i::after { width: 34px; height: 34px; top: 4px; left: 4px; } body.mobile .switch.on i::after { transform: translateX(40px); } body.mobile .switch span { width: 40px; }

/* account */
.acctpanel { display: grid; grid-template-columns: 74px 1fr auto; gap: 22px; align-items: center; max-width: 1480px; margin: 0 auto; padding: 22px 26px; }
.acctpanel .ico { width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; font-size: 32px; color: var(--gold-1); background: radial-gradient(circle at 40% 35%, rgba(120, 70, 210, .6), rgba(20, 10, 40, .9)); box-shadow: 0 0 0 2px var(--gold-2); }
.acctpanel h2 { margin: 0 0 4px; font: 800 24px var(--font-title); color: #fff4d6; } .acctpanel p { margin: 0; color: #d8ccef; font-size: 15px; }
body.mobile .acctpanel { max-width: none; } body.mobile .acctpanel h2 { font-size: 32px; } body.mobile .acctpanel p { font-size: 20px; }

/* mastery polish */
.mast { max-width: 1480px; }
.mrow { background: linear-gradient(90deg, rgba(30, 17, 58, .88), rgba(14, 8, 28, .88)); border-color: rgba(190, 160, 255, .16); transition: transform .25s var(--ease-out), border-color .25s, box-shadow .25s; }
.mrow:hover { transform: translateX(4px); border-color: rgba(232, 186, 90, .4); }
.mrow.on { border-color: var(--gold-2); box-shadow: 0 0 22px rgba(242, 193, 78, .2); background: linear-gradient(90deg, color-mix(in srgb, var(--c) 28%, rgba(30, 17, 58, .9)), rgba(14, 8, 28, .88)); }
.mrow .qbar i { background: linear-gradient(90deg, var(--gold-3), var(--gold-1)); }
.mast-detail { position: relative; border-color: rgba(232, 186, 90, .3); box-shadow: var(--sh-deep); background: radial-gradient(ellipse 70% 60% at 20% 0%, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%), linear-gradient(180deg, rgba(30, 17, 58, .9), rgba(14, 8, 28, .92)); }
.mast-main h2 { background: linear-gradient(180deg, var(--gold-hi), var(--gold-1) 45%, var(--gold-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tiers { position: relative; }
.tierpip { position: relative; background: rgba(8, 4, 18, .5); border-color: rgba(190, 160, 255, .16); transition: transform .25s var(--ease-back); }
.tierpip:hover { transform: translateY(-3px); }
.tierpip b { width: 34px; height: 34px; background: #1a1030; box-shadow: 0 0 0 2px rgba(190, 160, 255, .3); }
.tierpip.got b { background: radial-gradient(circle at 40% 35%, #fff0c2, #e2b04a 60%, #a8741c); color: #2b1600; box-shadow: 0 0 0 2px #fff0c2, 0 0 12px rgba(242, 193, 78, .5); }
.tierpip.got { border-color: rgba(242, 193, 78, .45); }
.tierpip.ready { animation: afPulseGold 2.2s ease-in-out infinite; }
.mchal .quest { background: rgba(8, 4, 18, .45); border-color: rgba(190, 160, 255, .14); }
.mchal .quest .qbar i { background: linear-gradient(90deg, #7a4ae0, #b98aff); }
.mchal .quest.ready { border-color: rgba(125, 255, 176, .45); } .mchal .quest.ready .qbar i { background: linear-gradient(90deg, #2f9a5a, #7dffb0); }
.quests .quest .qic { font-size: 21px; } body.mobile .quests .quest .qic { font-size: 26px; }
.quests .quest .qtxt > span { font-size: 12px; } body.mobile .quests .quest .qtxt > span { font-size: 16px; }

/* =====================================================================
   SOCIAL: leaderboard + podium, society, live, trades
   ===================================================================== */
.socgrid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 20px; max-width: 1480px; margin: 0 auto; align-items: start; }
.lbpanel { padding: 18px 20px 16px; }
.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 14px; margin: 6px 0 14px; }
.pod { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; cursor: pointer; animation: podIn .7s var(--ease-back) both; animation-delay: calc(var(--i) * 120ms + 100ms); }
.pod.p1 { animation-delay: 60ms; }
@keyframes podIn { from { opacity: 0; transform: translateY(26px) scale(.94); } to { opacity: 1; transform: none; } }
.podav { position: relative; margin-bottom: 6px; transition: transform .3s var(--ease-back); }
.pod:hover .podav { transform: translateY(-4px) scale(1.04); }
.podav .pav { width: 78px; height: 78px; }
.pod.p1 .podav .pav { width: 104px; height: 104px; }
.podav .pav.lead { box-shadow: 0 0 0 3px var(--mc, #c0c7d6), 0 8px 18px rgba(0, 0, 0, .5); }
.pod .podav::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--mc) 35%, transparent), transparent 70%); z-index: -1; }
.pod.p1 { --mc: #f6d98a; } .pod.p2 { --mc: #d6dce8; } .pod.p3 { --mc: #d99a66; }
.podrank { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; color: #2b1600;
  background: radial-gradient(circle at 40% 35%, #fff, var(--mc) 60%, color-mix(in srgb, var(--mc) 50%, #000)); box-shadow: 0 0 0 2px rgba(8, 4, 18, .85), 0 0 12px color-mix(in srgb, var(--mc) 70%, transparent); }
.pod.p1 .podrank { width: 36px; height: 36px; font-size: 19px; bottom: -10px; }
.pod b { max-width: 100%; margin-top: 8px; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pod.p1 b { font-size: 18px; }
.podr { font: 900 22px var(--font-title); color: var(--mc); } .pod small { font-size: 12px; color: var(--muted); }
.plinth { align-self: stretch; margin-top: 8px; height: 56px; border-radius: 10px 10px 4px 4px; display: grid; place-items: center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--mc) 32%, rgba(30, 17, 58, .9)), rgba(14, 8, 28, .9)); border: 1px solid color-mix(in srgb, var(--mc) 55%, transparent); border-bottom: 0; }
.pod.p1 .plinth { height: 84px; box-shadow: 0 -8px 30px rgba(242, 193, 78, .18); } .pod.p3 .plinth { height: 40px; }
.plinth i { font: 900 28px var(--font-title); font-style: normal; color: var(--mc); opacity: .75; }
.pod.me .podav .pav { outline: 2px dashed var(--gold-1); outline-offset: 4px; }
table.ranks.lb { font-size: 15px; }
table.ranks.lb td { padding: 8px 10px; border-bottom: 1px solid rgba(190, 160, 255, .08); }
table.ranks.lb tr { cursor: pointer; transition: background .2s; }
table.ranks.lb tr:hover td { background: rgba(255, 255, 255, .04); }
table.ranks.lb tr:nth-child(-n+3) td:first-child { color: var(--muted); font-weight: 800; }
table.ranks.lb td.rk { width: 44px; text-align: center; color: var(--muted); font: 800 15px var(--font-title); }
table.ranks.lb td.pl { display: flex; align-items: center; gap: 12px; font-weight: 700; }
table.ranks.lb td.pl .pav { width: 36px; height: 36px; }
table.ranks.lb td.rt { width: 90px; text-align: right; font: 900 17px var(--font-title); color: #fff4d6; }
table.ranks.lb td.wl { width: 80px; text-align: right; color: var(--muted); }
table.ranks.lb tr.me td { background: linear-gradient(90deg, rgba(242, 193, 78, .16), rgba(242, 193, 78, .04)); }
table.ranks.lb tr.me td:first-child { box-shadow: 3px 0 0 var(--gold-1) inset; }
.youtag { font-style: normal; font: 800 10px var(--font-ui); letter-spacing: .14em; text-transform: uppercase; padding: 3px 8px; border-radius: 99px; color: #2b1600; background: var(--gold-1); }
.none { color: var(--muted); text-align: center; padding: 20px !important; }
.lbme { display: grid; grid-template-columns: 44px 1fr auto auto; gap: 14px; align-items: center; margin-top: 12px; padding: 10px 14px; border-radius: 12px;
  background: linear-gradient(90deg, rgba(242, 193, 78, .14), rgba(255, 255, 255, .02)); border: 1px solid rgba(242, 193, 78, .45); }
.lbme .pav { width: 42px; height: 42px; }
.lbme b { display: block; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-1); } .lbme span { font-size: 15px; font-weight: 700; }
.lbme em { font-style: normal; font: 900 22px var(--font-title); color: #fff4d6; } .lbme strong { font: 900 22px var(--font-title); color: var(--gold-1); }
.soclist { display: flex; flex-direction: column; gap: 8px; }
.socrow { display: grid; grid-template-columns: 30px 54px 1fr auto; gap: 12px; align-items: center; padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(190, 160, 255, .12); }
.socrow .rk { font: 800 15px var(--font-title); font-style: normal; color: var(--muted); text-align: center; }
.socrow.top1 .rk { color: #f6d98a; } .socrow.top2 .rk { color: #d6dce8; } .socrow.top3 .rk { color: #d99a66; }
.socrow b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .socrow div > span { font-size: 12px; color: var(--muted); } .socrow div { min-width: 0; }
.socrow strong { font: 900 18px var(--font-title); color: #fff4d6; }
.crest { display: grid; place-items: center; width: 50px; height: 56px; font: 900 13px var(--font-title); letter-spacing: .04em; color: #2b1600;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%); background: linear-gradient(180deg, var(--gold-hi), var(--gold-2) 60%, var(--gold-3)); }
.crest.big { width: 96px; height: 110px; font-size: 24px; position: relative; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .5)); }
.crest.big span { position: relative; z-index: 1; margin-top: -10px; }
.crest.big::before { content: ""; position: absolute; inset: 5px; clip-path: inherit; background: linear-gradient(180deg, #4a2690, #22104a); }
.crest.big span { color: var(--gold-hi); }
body.mobile .socgrid { max-width: none; } body.mobile table.ranks.lb { font-size: 21px; } body.mobile table.ranks.lb td.pl .pav { width: 48px; height: 48px; }
body.mobile table.ranks.lb td.rt { font-size: 23px; } body.mobile .pod b { font-size: 22px; } body.mobile .pod small { font-size: 16px; }
body.mobile .socrow b { font-size: 20px; } body.mobile .socrow div > span { font-size: 16px; } body.mobile .lbme span { font-size: 20px; } body.mobile .youtag { font-size: 14px; }

/* society */
.clubjoin { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; max-width: 1200px; margin: 10px auto 0; }
.cjcard { display: flex; flex-direction: column; overflow: hidden; }
.cjart { height: 140px; background: var(--art) var(--pos, center 30%) / cover; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
.cjbody { display: flex; flex-direction: column; gap: 10px; padding: 0 24px 22px; margin-top: -24px; }
.cjbody h3 { font: 800 26px var(--font-title); margin: 0; color: #fff4d6; letter-spacing: .04em; }
.cjbody p { margin: 0 0 4px; color: #d8ccef; font-size: 14px; line-height: 1.45; }
.cjbody input { font: 16px var(--font-ui); padding: 11px 14px; border-radius: 10px; width: 100%; box-sizing: border-box; user-select: text; }
.cjrow { display: grid; grid-template-columns: 170px 1fr; gap: 10px; }
.cjbody .codein { width: 100%; font-size: 28px; }
.cjbody .btn { align-self: flex-start; margin-top: 4px; }
.clubhead { display: grid; grid-template-columns: 110px 1fr auto; gap: 24px; align-items: center; max-width: 1480px; margin: 0 auto 18px; padding: 18px 26px; }
.clubhead h2 { font: 900 38px var(--font-title); margin: 4px 0 2px; background: linear-gradient(180deg, var(--gold-hi), var(--gold-1) 45%, var(--gold-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.motto { margin: 0; font: italic 17px var(--font-card); color: #d8ccef; }
.clubhead .invite { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 22px; border-radius: 14px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(232, 186, 90, .3); }
.clubhead .roomcode { font-size: 36px; margin: 0 0 6px; }
#social .m-h { max-width: 1480px; margin-left: auto; margin-right: auto; }
.members { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; max-width: 1480px; margin: 0 auto; }
.member { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 14px;
  background: linear-gradient(90deg, rgba(30, 17, 58, .88), rgba(14, 8, 28, .88)); border: 1px solid rgba(190, 160, 255, .14); animation: afRise .45s var(--ease-out) both; animation-delay: calc(var(--i) * 40ms); }
.member.me { border-color: rgba(242, 193, 78, .45); background: linear-gradient(90deg, rgba(242, 193, 78, .12), rgba(14, 8, 28, .88)); }
.mav2 { position: relative; } .mav2 .pav { width: 52px; height: 52px; } .member:not(.online) .mav2 .pav { filter: grayscale(.5) brightness(.8); }
.mav2 .dot { position: absolute; right: 0; bottom: 2px; width: 13px; height: 13px; border: 2px solid #140a26; }
.mtx { min-width: 0; } .mtx b { display: flex; align-items: center; gap: 6px; font-size: 16px; } .mtx > span { display: block; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.own { color: var(--gold-1); font-size: 15px; } .inm { font-size: 12.5px; }
.clubacts { justify-content: flex-end !important; max-width: 1480px; margin: 12px auto 0; }
body.mobile .clubjoin { max-width: none; } body.mobile .cjbody h3 { font-size: 34px; } body.mobile .cjbody p { font-size: 19px; } body.mobile .cjbody input { font-size: 22px; }
body.mobile .clubhead { max-width: none; } body.mobile .motto { font-size: 22px; } body.mobile .members { grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); }
body.mobile .mtx b { font-size: 22px; } body.mobile .mtx > span { font-size: 17px; } body.mobile .mav2 .pav { width: 64px; height: 64px; } body.mobile .member { grid-template-columns: 70px 1fr auto; }

/* society expedition + lent decks (screens-season.js societyPanel) */
.socPanel { max-width: 1480px; margin: 22px auto 0; }
.socMap, .socDecks { position: relative; border-radius: 16px; border: 1px solid rgba(232, 186, 90, .24); background: linear-gradient(180deg, rgba(30, 17, 58, .84), rgba(14, 8, 28, .9)); box-shadow: 0 18px 44px rgba(0, 0, 0, .5); }
.socMap { overflow: hidden; isolation: isolate; }
.socMap::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .16; background: repeating-linear-gradient(0deg, transparent 0 38px, rgba(232, 186, 90, .35) 38px 39px), repeating-linear-gradient(90deg, transparent 0 38px, rgba(232, 186, 90, .35) 38px 39px); }
.expPath::before { top: 21px; height: 4px; background: repeating-linear-gradient(90deg, rgba(232, 186, 90, .35) 0 10px, transparent 10px 18px); }
.expFill { top: 21px; height: 4px; background: linear-gradient(90deg, var(--gold-3), var(--gold-1)); box-shadow: 0 0 12px rgba(242, 193, 78, .8); }
.expStop i { background: radial-gradient(circle at 40% 35%, #3b2270, #150b2c); border-color: rgba(232, 186, 90, .35); box-shadow: 0 0 0 3px rgba(8, 4, 18, .85); }
.expStop.hit i { background: radial-gradient(circle at 40% 35%, #fff0c2, #e2b04a 60%, #a8741c); border-color: #fff0c2; }
.expStop.cur i { animation: cPulse 2.2s ease-in-out infinite; }
.expInfo b { font-family: var(--font-title); color: #fff4d6; }
.lent { background: linear-gradient(90deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02)); border: 1px solid rgba(190, 160, 255, .12); }
.lent .lav { border-color: var(--gold-2); }

/* live */
.livehead { display: flex; align-items: center; gap: 16px; max-width: 1200px; margin: 0 auto 14px; }
.livehead p { flex: 1; margin: 0; color: #d8ccef; font-size: 14px; }
.livepill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 99px; font: 800 12px var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: #fff; background: linear-gradient(180deg, #e0342a, #8a120c); box-shadow: 0 0 16px rgba(255, 70, 50, .5); }
.livepill i, .rpdot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: liveBlink 1.2s ease-in-out infinite; }
@keyframes liveBlink { 50% { opacity: .25; } }
.livelist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 1200px; margin: 0 auto; }
.live.m-panel { display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; animation: afRise .5s var(--ease-out) both; animation-delay: calc(var(--i) * 60ms); }
.lmatch { position: relative; display: grid; grid-template-columns: 1fr 1fr; height: 150px; }
.lside { position: relative; display: flex; align-items: flex-end; gap: 10px; padding: 12px 14px; isolation: isolate; overflow: hidden; min-width: 0; }
.lside::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--art) var(--pos, center 25%) / cover; transition: transform .6s var(--ease-out); }
.lside::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 30%, rgba(8, 4, 18, .92)); }
.live:hover .lside::before { transform: scale(1.06); }
.lside.a { clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%); } .lside.b { clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%); margin-left: -12%; flex-direction: row-reverse; text-align: right; }
.lside .pav { width: 46px; height: 46px; flex: none; }
.lside div { min-width: 0; } .lside b { display: block; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 2px 6px #000; } .lside span { font-size: 12px; color: #d8ccef; }
.lvs { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-6deg); z-index: 2; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  font: 900 20px var(--font-title); color: #2b1600; background: radial-gradient(circle at 40% 35%, #fff0c2, #e2b04a 60%, #a8741c); box-shadow: 0 0 0 4px rgba(8, 4, 18, .85), 0 0 24px rgba(242, 193, 78, .6); }
.lfoot { display: flex; align-items: center; gap: 16px; padding: 12px 16px; font-size: 13px; color: var(--muted); }
.lfoot span { display: flex; align-items: center; gap: 5px; } .lfoot .btn { margin-left: auto; }
body.mobile .livehead { max-width: none; } body.mobile .livehead p { font-size: 19px; } body.mobile .livelist { max-width: none; }
body.mobile .lside b { font-size: 22px; } body.mobile .lside span, body.mobile .lfoot { font-size: 17px; } body.mobile .lmatch { height: 180px; }

/* trades */
.tradegrid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; max-width: 1480px; margin: 0 auto; align-items: start; }
.trade.m-panel { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 16px 18px; margin-bottom: 12px; animation: afRise .45s var(--ease-out) both; animation-delay: calc(var(--i) * 50ms); }
.trade.in { border-color: rgba(242, 193, 78, .5); }
.thead { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; }
.thead b { display: block; font-size: 16px; } .tnote { display: block; font: italic 14px var(--font-card); color: #d8ccef; }
.tdir { font: 800 11px var(--font-ui); letter-spacing: .16em; text-transform: uppercase; padding: 4px 10px; border-radius: 99px; color: var(--muted); border: 1px solid rgba(190, 160, 255, .25); }
.trade.in .tdir { color: #2b1600; background: var(--gold-1); border-color: var(--gold-hi); }
.tcols { display: grid; grid-template-columns: 1fr 40px 1fr; gap: 10px; align-items: center; padding: 12px; border-radius: 12px; background: rgba(0, 0, 0, .25); }
.tswap { font-style: normal; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--gold-1); border: 1px solid var(--gold-line); }
.tchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tchip { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px 3px 3px; border-radius: 99px; font-size: 13px; font-weight: 600; background: rgba(255, 255, 255, .06); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); }
.tchip i { width: 26px; height: 26px; border-radius: 50%; background: var(--art) var(--pos, 50% 35%) / cover; }
.trade .tb { display: flex; flex-direction: row; justify-content: flex-end; gap: 8px; }
.trade.done { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(190, 160, 255, .1); margin-bottom: 6px; }
.trade.done em { font-weight: 800; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.trade.done.st-accepted em { color: #7dffb0; } .trade.done.st-declined em, .trade.done.st-cancelled em { color: #ff9c92; }
.tempty { display: flex; align-items: center; gap: 16px; padding: 18px 20px; margin-bottom: 12px; color: var(--gold-1); font-size: 28px; }
.tempty b { display: block; font-size: 16px; color: #fff4d6; } .tempty span { font-size: 13.5px; color: var(--muted); }
.tradeform.m-panel { gap: 8px; padding: 18px 20px; }
.tradeform .chips span { background: rgba(255, 255, 255, .06); border: 1px solid color-mix(in srgb, var(--c, #a86bff) 55%, transparent); }
body.mobile .tradegrid { max-width: none; } body.mobile .thead b { font-size: 21px; } body.mobile .tchip { font-size: 17px; } body.mobile .tempty b { font-size: 21px; } body.mobile .tempty span { font-size: 17px; }
body.mobile .tradeform label { font-size: 16px; } body.mobile .tradeform input { font-size: 20px; } body.mobile .trade.done { font-size: 17px; }

/* =====================================================================
   REPLAY BAR
   ===================================================================== */
/* top-right, tucked under the battle toolbar: clear of the turn banner, the boss intent plate and both player plates */
#replayBar.rpbar { left: auto; right: 16px; top: 50px; transform: none; gap: 10px; padding: 8px 10px 8px 16px; border-radius: 99px;
  background: linear-gradient(180deg, rgba(30, 17, 58, .95), rgba(10, 5, 22, .96)); border: 1px solid var(--gold-line);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 14px 34px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 240, 200, .1) inset; backdrop-filter: blur(8px); animation: rpIn .6s var(--ease-back) both; }
@keyframes rpIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
.rplabel { display: flex; align-items: center; gap: 8px; padding-right: 6px; border-right: 1px solid rgba(232, 186, 90, .25); margin-right: 2px; }
.rplabel .rpdot { background: #ff4a3a; box-shadow: 0 0 8px #ff4a3a; }
#replayBar.paused .rpdot { animation: none; background: var(--muted); box-shadow: none; }
.rplabel b { font: 900 14px var(--font-title); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-1); }
.rplabel span { min-width: 58px; font: 700 12px var(--font-ui); color: var(--muted); font-variant-numeric: tabular-nums; }
.rpbtn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; min-width: 40px; padding: 0; border-radius: 99px; cursor: pointer;
  color: #2b1600; font-size: 18px; border: 1px solid #fff0c2; background: linear-gradient(180deg, #ffe39a, #f0bd4f 45%, #c98a22); box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 4px 12px rgba(0, 0, 0, .45);
  transition: transform .2s var(--ease-back), box-shadow .2s; }
.rpbtn:hover { transform: scale(1.06); box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 4px 12px rgba(0, 0, 0, .45), 0 0 16px rgba(242, 193, 78, .5); }
.rpbtn .mi { fill: currentColor; }
.rpbtn.wide { padding: 0 14px; font: 700 13px var(--font-ui); color: #f1e6ff; border-color: rgba(232, 186, 90, .35); background: linear-gradient(180deg, rgba(60, 34, 110, .9), rgba(28, 14, 56, .9)); }
.rpbtn.wide .mi { fill: none; font-size: 17px; }
.rpbtn.wide.on { color: var(--gold-hi); border-color: var(--gold-1); }
.rpspd { padding: 3px; border-radius: 99px; } .rpspd .segpill { border-radius: 99px; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--n)); }
.seg.mseg.rpspd { grid-template-columns: repeat(3, 46px); } .rpspd button { padding: 7px 0; font-size: 13px; border-radius: 99px; }
body.mobile #replayBar.rpbar { top: 62px; transform: scale(1.3); transform-origin: 100% 0; animation: none; }
body.mobile #replayBar #rpReveal span { display: none; } /* phone: eye icon only, keeps the bar compact */
body.mobile .seg.mseg.rpspd { grid-template-columns: repeat(3, 50px); } body.mobile .rpspd button { font-size: 14px; padding: 7px 0; }
body.fx-low #replayBar.rpbar { animation: none; }

/* =====================================================================
   SEASON: hero, week timeline, story nodes, reward chips, track, locker, archive
   ===================================================================== */
#season .sHero { position: relative; overflow: hidden; border-color: color-mix(in srgb, var(--sc) 55%, var(--gold-line)); box-shadow: var(--sh-deep), 0 0 34px color-mix(in srgb, var(--sc) 18%, transparent); }
#season .sHero h2 { background: linear-gradient(180deg, var(--gold-hi), var(--gold-1) 45%, var(--gold-2)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .5)); }
#season .sHero .lc { box-shadow: 0 16px 34px rgba(0, 0, 0, .6), 0 0 26px color-mix(in srgb, var(--sc) 45%, transparent); }
/* week timeline */
.sWeeks { position: relative; gap: 12px; }
.sWeeks::before { content: ""; position: absolute; left: 34px; right: 34px; top: 30px; height: 2px; background: linear-gradient(90deg, var(--gold-2), rgba(232, 186, 90, .2)); z-index: 0; }
.sWeek { position: relative; z-index: 1; padding: 56px 14px 14px; background: linear-gradient(180deg, rgba(30, 17, 58, .9), rgba(14, 8, 28, .92)); border-color: rgba(190, 160, 255, .16);
  transition: transform .3s var(--ease-back), border-color .3s, box-shadow .3s; animation: afRise .5s var(--ease-out) both; animation-delay: calc(var(--i) * 60ms); }
.sWeek:hover { transform: translateY(-4px); border-color: rgba(232, 186, 90, .45); }
.wdot { position: absolute; top: 14px; left: 14px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 900 15px var(--font-title); color: var(--muted);
  background: #1a1030; border: 2px solid rgba(190, 160, 255, .3); box-shadow: 0 0 0 3px rgba(8, 4, 18, .85); }
.sWeek.past .wdot { color: #2b1600; background: radial-gradient(circle at 40% 35%, #fff0c2, #e2b04a 60%, #a8741c); border-color: #fff0c2; font-size: 17px; }
.sWeek.cur { border-color: var(--gold-1); background: radial-gradient(ellipse 90% 70% at 50% 0%, rgba(242, 193, 78, .22), transparent 70%), linear-gradient(180deg, rgba(40, 24, 72, .95), rgba(18, 10, 36, .95));
  box-shadow: 0 0 0 1px rgba(242, 193, 78, .35), 0 0 30px rgba(242, 193, 78, .3); }
.sWeek.cur .wdot { color: #fff; background: linear-gradient(180deg, #8a55e0, #4a1f9a); border-color: var(--gold-hi); animation: cPulse 2.2s ease-in-out infinite; }
.sWeek.cur::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; overflow: hidden;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 240, 200, .16) 50%, transparent 65%) -150% 0 / 250% 100% no-repeat; animation: cShine 4.5s ease-in-out infinite; }
.sWeek.sel { outline: 2px solid var(--gold-2); outline-offset: 3px; }
.sWeek b { color: #fff4d6; }
/* event panel */
#season .sEvent { background: linear-gradient(180deg, rgba(30, 17, 58, .88), rgba(14, 8, 28, .92)); border-color: rgba(232, 186, 90, .24); box-shadow: var(--sh-deep); }
#season .sEvent h3 { color: #fff4d6; }
.sRec { background: rgba(0, 0, 0, .3); border-color: rgba(232, 186, 90, .3); } .sRec b { color: var(--gold-1); }
/* season story nodes: medallions, readable text (no small caps on the rules line) */
.sNodes .node { display: grid; grid-template-columns: 54px 1fr; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .03); border-color: rgba(190, 160, 255, .16); }
.sNodes .node i { width: 50px; height: 50px; font-size: 22px; color: #e9dcff; background: radial-gradient(circle at 40% 35%, #3b2270, #150b2c); border: 2px solid rgba(190, 160, 255, .35); box-shadow: 0 0 0 3px rgba(8, 4, 18, .85); }
.sNodes .node span, .sNodes .node.boss span { font-family: var(--font-ui); }
.sNodes .node b { font: 800 16px var(--font-title); letter-spacing: .03em; color: #fff4d6; }
.sNodes .node small { font: 500 12.5px/1.4 var(--font-ui); color: #cfc2ea; text-transform: none; letter-spacing: 0; }
.sNodes .node em { font-style: normal; font: 700 12px var(--font-ui); color: var(--gold-1); }
.sNodes .node.open { border-color: rgba(242, 193, 78, .55); background: linear-gradient(90deg, rgba(242, 193, 78, .12), rgba(255, 255, 255, .02)); box-shadow: 0 0 20px rgba(242, 193, 78, .15); }
.sNodes .node.open i { border-color: var(--gold-hi); background: linear-gradient(180deg, #8a55e0, #4a1f9a); color: #fff; animation: cPulse 2.2s ease-in-out infinite; }
.sNodes .node.won i { color: #2b1600; background: radial-gradient(circle at 40% 35%, #fff0c2, #e2b04a 60%, #a8741c); border-color: #fff0c2; }
.sNodes .node.locked { opacity: .6; } .sNodes .node.locked i { color: #8e82ab; border-style: dashed; }
.sNodes .node.boss i { border: 3px solid transparent; background: linear-gradient(#3a0c14, #1a0610) padding-box, conic-gradient(#fff0c2, #c98a22, #7a4a10, #e2b04a, #fff0c2) border-box; color: #ffb3a8; }
.sNodes .node.boss.won i { background: radial-gradient(circle at 40% 35%, #fff0c2, #e2b04a 60%, #a8741c) padding-box, conic-gradient(#fff0c2, #c98a22, #7a4a10, #e2b04a, #fff0c2) border-box; color: #2b1600; }
/* reward chips */
.rchip { background: linear-gradient(180deg, rgba(40, 24, 72, .7), rgba(18, 10, 36, .8)); border-color: rgba(190, 160, 255, .2); transition: transform .25s var(--ease-back), border-color .25s; }
.rchip i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-size: 17px; color: var(--gold-1); background: radial-gradient(circle at 40% 35%, #3b2270, #150b2c); box-shadow: 0 0 0 1.5px rgba(232, 186, 90, .45); }
.rchip i .coin { width: 20px; height: 20px; }
.rchip.ready:hover { transform: translateY(-2px); }
.rchip.ready i { color: #2b1600; background: radial-gradient(circle at 40% 35%, #fff0c2, #e2b04a 60%, #a8741c); }
.rchip.done em { background: rgba(125, 255, 176, .15); color: #7dffb0; }
/* season track: reward nodes on a rail */
.sTrackHead h3 { color: #fff4d6; }
.sXp b { background: linear-gradient(180deg, var(--gold-hi), var(--gold-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sTrack { gap: 0; padding: 12px 10px 18px; }
.sMs { position: relative; width: 158px; min-height: 236px; margin: 0 6px; padding: 12px 10px 14px; gap: 8px; background: linear-gradient(180deg, rgba(30, 17, 58, .88), rgba(14, 8, 28, .9)); border-color: rgba(190, 160, 255, .16);
  animation: afRise .45s var(--ease-out) both; animation-delay: calc(min(var(--i), 10) * 30ms); transition: transform .3s var(--ease-back), border-color .3s; }
.sMs::before { content: ""; position: absolute; left: -8px; right: -8px; top: 70px; height: 4px; z-index: 0; background: rgba(255, 255, 255, .1); }
.sMs.reached::before { background: linear-gradient(90deg, var(--gold-3), var(--gold-1)); box-shadow: 0 0 8px rgba(242, 193, 78, .5); }
.sMs > * { position: relative; z-index: 1; }
.sMs .n { font: 900 13px var(--font-title); color: var(--muted); letter-spacing: .1em; }
.sMs i { display: grid; place-items: center; width: 62px; height: 62px; margin: 2px 0 4px; border-radius: 50%; font-size: 28px; color: var(--gold-1);
  background: radial-gradient(circle at 40% 35%, #3b2270, #150b2c); border: 2px solid rgba(190, 160, 255, .3); box-shadow: 0 0 0 4px rgba(8, 4, 18, .9); }
.sMs i .coin { width: 32px; height: 32px; }
.sMs.big i { width: 72px; height: 72px; margin-top: -3px; border: 3px solid transparent; background: radial-gradient(circle at 40% 35%, #4a2690, #1c0f3a) padding-box, conic-gradient(#fff0c2, #c98a22, #7a4a10, #e2b04a, #fff0c2) border-box; }
.sMs.big { background: radial-gradient(ellipse 90% 50% at 50% 20%, rgba(242, 193, 78, .14), transparent 70%), linear-gradient(180deg, rgba(34, 20, 64, .92), rgba(14, 8, 28, .92)); border-color: rgba(232, 186, 90, .35); }
.sMs .t { font-size: 13px; color: #eadcf8; }
.sMs.reached i { border-color: var(--gold-2); }
.sMs.done { opacity: .72; } .sMs.done i { color: #06301a; background: radial-gradient(circle at 40% 35%, #d8ffe6, #3fcf7a); border-color: #b8ffcf; }
.sMs.done .x { color: #7dffb0; display: flex; align-items: center; gap: 4px; }
.sMs.ready { border-color: var(--gold-1); box-shadow: 0 0 22px rgba(242, 193, 78, .3); }
.sMs.ready i { color: #2b1600; background: radial-gradient(circle at 40% 35%, #fff0c2, #e2b04a 60%, #a8741c) padding-box, conic-gradient(#fff0c2, #c98a22, #7a4a10, #e2b04a, #fff0c2) border-box; animation: cPulse 2.2s ease-in-out infinite; }
.sMs.ready:hover { transform: translateY(-5px); }
.sMs.locked { opacity: .55; } .sMs.locked i { filter: grayscale(.5); }
.sMs.s-justclaimed, .rchip.s-justclaimed { animation: sClaim .9s var(--ease-back) both; }
.s-justclaimed i { animation: qPop .6s var(--ease-back) both; }
@keyframes sClaim { 0% { transform: scale(1.08); box-shadow: 0 0 44px rgba(242, 193, 78, .8); } 100% { transform: none; } }
.sTrackBar { height: 8px; background: rgba(0, 0, 0, .35); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset; } .sTrackBar i { background: linear-gradient(90deg, var(--gold-3), var(--gold-1), var(--gold-hi)); box-shadow: 0 0 10px rgba(242, 193, 78, .5); }
/* locker + archive */
.sSlot { background: linear-gradient(180deg, rgba(30, 17, 58, .88), rgba(14, 8, 28, .92)); border-color: rgba(232, 186, 90, .22); box-shadow: 0 14px 30px rgba(0, 0, 0, .45); }
.sSlot h3 { display: flex; align-items: center; gap: 10px; color: var(--gold-1); font-size: 18px !important; }
.sSlot h3::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--gold-line), transparent); }
.sCos { background: rgba(255, 255, 255, .03); border-color: rgba(190, 160, 255, .16); transition: transform .25s var(--ease-out), border-color .25s, background .25s; }
.sCos:not(.lock):hover { transform: translateX(3px); border-color: rgba(232, 186, 90, .45); }
.sCos.eq { border-color: var(--gold-1); background: linear-gradient(90deg, rgba(242, 193, 78, .18), rgba(242, 193, 78, .04)); box-shadow: 0 0 16px rgba(242, 193, 78, .18); position: relative; }
.sCos.eq::after { content: ""; position: absolute; right: 12px; top: 50%; width: 10px; height: 10px; transform: translateY(-50%) rotate(45deg); background: var(--gold-1); box-shadow: 0 0 8px var(--gold-2); }
.sArch { padding: 16px 18px; border-radius: 16px; background: linear-gradient(180deg, rgba(30, 17, 58, .84), rgba(14, 8, 28, .9)); border: 1px solid rgba(232, 186, 90, .22); }
.sArchHead b { color: var(--gold-1); }
.sArchRow .slotc { transition: transform .3s var(--ease-back); } .sArchRow .slotc:hover { transform: translateY(-6px); }
.sArchRow .slotc.owned0 .card { filter: saturate(.3) brightness(.6); }
.sArchRow .slotc .lock { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5; font-size: 26px; }
body.mobile .wdot { width: 40px; height: 40px; font-size: 19px; } body.mobile .sWeek { padding-top: 66px; } body.mobile .sWeeks::before { top: 36px; }
body.mobile .sNodes .node b { font-size: 21px; } body.mobile .sNodes .node small { font-size: 16px; } body.mobile .sNodes .node em { font-size: 16px; }
body.mobile .sMs { width: 196px; } body.mobile .sMs .t { font-size: 17px; } body.mobile .sMs .x { font-size: 15px; } body.mobile .sMs i { width: 74px; height: 74px; font-size: 34px; } body.mobile .sMs::before { top: 80px; }
body.mobile .sSlot h3 { font-size: 24px !important; } body.mobile .sArchHead b { font-size: 24px; } body.mobile .sArchHead span { font-size: 17px; }

/* heavy effects off: graphics Low + reduced motion */
body.fx-low .cnode.open .cmed, body.fx-low .cnode.won .cmed::before, body.fx-low .story-hero::before, body.fx-low .story-htxt h2, body.fx-low .story-htxt .af-eyebrow, body.fx-low .scene p,
body.fx-low .teach, body.fx-low .histbtn, body.fx-low .story-art, body.fx-low .story-reward, body.fx-low .story-reward .rc .card, body.fx-low .bhero::before, body.fx-low .bcard .lc, body.fx-low .bint,
body.fx-low .bseal, body.fx-low .floors .fl.cur, body.fx-low .quests .quest.ready .qbar i, body.fx-low .quests .quest.justclaimed, body.fx-low .quests .quest.justclaimed::after, body.fx-low .quests .quest.justclaimed .qic,
body.fx-low .hrow, body.fx-low .pod, body.fx-low .member, body.fx-low .live.m-panel, body.fx-low .trade.m-panel, body.fx-low .livepill i, body.fx-low .rpdot, body.fx-low .donut .mring .rf, body.fx-low .tierpip.ready,
body.fx-low .sWeek, body.fx-low .sWeek.cur .wdot, body.fx-low .sWeek.cur::after, body.fx-low .sNodes .node.open i, body.fx-low .sMs, body.fx-low .sMs.ready i, body.fx-low .s-justclaimed, body.fx-low .s-justclaimed i, body.fx-low .expStop.cur i { animation: none !important; }
body.fx-low .sbtrack i { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .cnode.open .cmed, .cnode.won .cmed::before, .story-hero::before, .story-htxt h2, .story-htxt .af-eyebrow, .scene p, .teach, .histbtn, .story-art, .story-reward, .story-reward .rc .card, .bhero::before, .bcard .lc, .bint,
  .bseal, .floors .fl.cur, .quests .quest.ready .qbar i, .quests .quest.justclaimed, .quests .quest.justclaimed::after, .quests .quest.justclaimed .qic,
  .hrow, .pod, .member, .live.m-panel, .trade.m-panel, .livepill i, .rpdot, .donut .mring .rf, .tierpip.ready, #replayBar.rpbar,
  .sWeek, .sWeek.cur .wdot, .sWeek.cur::after, .sNodes .node.open i, .sMs, .sMs.ready i, .s-justclaimed, .s-justclaimed i, .expStop.cur i { animation: none !important; }
  .sbtrack i, .seg.mseg .segpill, .switch i::after { transition: none; }
}
/* midnight theme: panels go true black */
body.theme-midnight .m-panel, body.theme-midnight .chron-ch, body.theme-midnight .hrow, body.theme-midnight .member, body.theme-midnight .sMs, body.theme-midnight .sWeek, body.theme-midnight .sSlot, body.theme-midnight .sArch,
body.theme-midnight #season .sEvent, body.theme-midnight .socMap, body.theme-midnight .socDecks, body.theme-midnight .mrow, body.theme-midnight .mast-detail, body.theme-midnight .story-reward { background: linear-gradient(180deg, rgba(10, 8, 14, .94), rgba(4, 3, 6, .96)); }
body.theme-midnight #sheet .box.storybox { background: #06050a; }
body.theme-midnight .story-hero::after { background: linear-gradient(180deg, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .3) 45%, rgba(6, 5, 10, .98) 100%); }
.storylinks { display: flex; flex-wrap: wrap; gap: 8px; } .lorebtn { border-color: rgba(190, 160, 255, .45); background: rgba(168, 107, 255, .1); color: #e2d2ff; }
.blore { margin: 0 0 8px; font: italic 17px/1.5 var(--font-card); color: #f1e6ff; max-width: 780px; } body.mobile .blore { font-size: 22px; }
#season .sbody > .sNote { padding: 22px 26px; border-radius: 16px; text-align: center; font-size: 15px; color: #d8ccef; background: linear-gradient(180deg, rgba(30, 17, 58, .7), rgba(14, 8, 28, .8)); border: 1px dashed rgba(232, 186, 90, .35); } body.mobile #season .sbody > .sNote { font-size: 20px; }
/* card-choice modal polish */
#choiceModal .box > .eyebrow { color: var(--gold-2); letter-spacing: .28em; }
#choiceModal .chopt { background: linear-gradient(180deg, rgba(40, 24, 72, .55), rgba(14, 8, 28, .6)); border: 1px solid rgba(232, 186, 90, .2); transition: transform .35s var(--ease-back), border-color .3s, box-shadow .3s, background .3s; animation: afRise .5s var(--ease-out) both; }
#choiceModal .chopt:nth-child(2) { animation-delay: .08s; } #choiceModal .chopt:nth-child(3) { animation-delay: .16s; }
#choiceModal .chopt:hover { border-color: rgba(232, 186, 90, .55); box-shadow: 0 18px 40px rgba(0, 0, 0, .5); }
#choiceModal .chopt.sel { border-color: var(--gold-1); background: radial-gradient(ellipse at 50% 30%, rgba(242, 193, 78, .22), rgba(14, 8, 28, .7)); box-shadow: 0 0 0 1px rgba(242, 193, 78, .4), 0 0 40px rgba(242, 193, 78, .35); }
#choiceModal .chopt:has(~ .chopt.sel), #choiceModal .chopt.sel ~ .chopt { opacity: .6; }
body.fx-low #choiceModal .chopt { animation: none; }
.tierpip.s-justclaimed { animation: sClaim .9s var(--ease-back) both; } body.fx-low .tierpip.s-justclaimed { animation: none; }
body.mobile #social .m-h, body.mobile .members, body.mobile .socPanel, body.mobile .clubacts { max-width: none; }
body.mobile .sTrackHead p { font-size: 18px; } body.mobile .sXp span { font-size: 16px; } body.mobile .sArchLead { font-size: 19px; }
body.mobile .expInfo { font-size: 18px; } body.mobile .socMap .sSub, body.mobile .socDecks .sSub { font-size: 16px; }
.nextopp .actions, .runbody > .actions { display: flex; gap: 12px; align-items: center; }