/* =====================================================================
   LANE 2 · screens-core: Home hub, play setup (modes + leader select),
   account / login, How to Play, toasts, generic sheets, SVG icons.
   Loaded after arena.css. Overrides style.css without editing it.
   ===================================================================== */

/* ---------- icons (js/icons.js) ---------- */
.ico { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: -.14em; overflow: visible; }
.ico.gold { stroke: url(#lcIcoGold) var(--gold-1); }
.ico.gold .f { fill: url(#lcIcoGold) var(--gold-1); }
.btn .ico { width: 1.15em; height: 1.15em; margin-right: .45em; vertical-align: -.2em; }
.btn .ico:only-child { margin-right: 0; }

/* =====================================================================
   HOME HUB
   ===================================================================== */
#hub { background: radial-gradient(ellipse 70% 60% at 52% 46%, #2b1356 0%, #120827 55%, #07040f 100%); }
#hub .hubglow { position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse 34% 40% at 53% 48%, rgba(168, 107, 255, .16), transparent 70%),
    radial-gradient(ellipse 60% 22% at 50% 102%, rgba(242, 193, 78, .1), transparent 70%); }
#hub .vignette { z-index: 2; background: radial-gradient(ellipse 90% 85% at 50% 48%, transparent 50%, rgba(5, 2, 14, .82)), linear-gradient(0deg, rgba(5, 2, 14, .88), transparent 24%), linear-gradient(180deg, rgba(5, 2, 14, .7), transparent 16%); }
#hub .hubui { position: absolute; inset: 0; } /* no z-index: the logo blends (screen) with the 3D scene behind */
.hublogo { top: 14px; width: 230px; animation: lcLogo 7s ease-in-out infinite; }
@keyframes lcLogo { 50% { transform: translateX(-50%) translateY(-4px); } }

/* top bar */
.hubtop { top: 18px; left: 24px; right: 24px; gap: 12px; height: 66px; }
.hubtop .hspacer { flex: 1; }
.hubtop .profile { appearance: none; font: inherit; color: var(--ink); cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 5px 22px 5px 5px; border-radius: 99px;
  background: linear-gradient(180deg, rgba(10, 6, 22, .9), rgba(26, 14, 50, .82)); border: 1px solid rgba(232, 186, 90, .35); box-shadow: 0 8px 22px rgba(0, 0, 0, .45), 0 1px 0 rgba(255, 240, 200, .08) inset;
  transition: transform .25s var(--ease-back), border-color .25s, box-shadow .25s; text-align: left; }
.hubtop .profile:hover { transform: translateY(-2px); border-color: var(--gold-line); box-shadow: 0 12px 26px rgba(0, 0, 0, .5), 0 0 22px rgba(242, 193, 78, .22); }
.avring { position: relative; width: 60px; height: 60px; flex: none; display: block; }
.avring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.avring .trk { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 3.5; }
.avring .val { fill: none; stroke: url(#lcIcoGold) var(--gold-1); stroke-width: 3.5; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(242, 193, 78, .7)); transition: stroke-dasharray .8s var(--ease-out); }
.hubtop .profile .avring .av, .avring .av { position: absolute; inset: 6px; width: auto; height: auto; border-radius: 50%; background-size: cover; background-position: 50% 30%; border: 1px solid rgba(255, 230, 170, .55); box-shadow: 0 0 0 2px rgba(8, 4, 18, .9), 0 4px 10px rgba(0, 0, 0, .5); }
.avring.medal .av { inset: 4px; background-position: center; border: 0; box-shadow: 0 3px 10px rgba(0, 0, 0, .5); }
.avring .lvb { position: absolute; right: -6px; bottom: -4px; min-width: 24px; height: 22px; padding: 0 6px; border-radius: 99px; display: grid; place-items: center;
  font: 900 12px/1 var(--font-title); color: #2b1600; background: linear-gradient(180deg, #ffe39a, #e2a93c 60%, #a8741c); border: 1px solid #fff0c2; box-shadow: 0 3px 8px rgba(0, 0, 0, .55); }
.hubtop .ptxt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hubtop .profile .lvl { font: 800 17px/1.1 var(--font-title); letter-spacing: .04em; color: #fff6dd; max-width: 210px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hubtop .profile .sub { font-size: 12px; color: var(--ink-dim); display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.gtag { font-style: normal; font: 800 9px/1 var(--font-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-1); padding: 3px 7px; border-radius: 99px; border: 1px solid rgba(232, 186, 90, .45); background: rgba(242, 193, 78, .08); }
.xpline { display: block; width: 140px; height: 4px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.xpline i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #a86bff, #f6d98a); }
.netdot { display: flex; align-items: center; gap: 8px; font: 800 11px/1 var(--font-ui); letter-spacing: .18em; text-transform: uppercase; padding: 8px 12px; background: rgba(10, 6, 22, .78); }
.netdot i { width: 8px; height: 8px; border-radius: 50%; background: #ff7a6a; box-shadow: 0 0 8px #ff5a4f; }
.netdot.on i { background: #6dffa8; box-shadow: 0 0 8px #3dff8a; animation: lcBeacon 2.4s ease-in-out infinite; }
@keyframes lcBeacon { 50% { opacity: .45; } }
.hubtop .pill { font-size: 19px; padding: 8px 16px; transition: transform .2s var(--ease-back), border-color .2s; }
.pill-packs[data-nav] { cursor: pointer; }
.pill-packs[data-nav]:hover { transform: translateY(-2px); border-color: var(--gold-1) !important; }
.hubtop .iconbtn { appearance: none; padding: 0; width: 48px; height: 48px; color: var(--gold-1); font-size: 22px; line-height: 1;
  background: linear-gradient(180deg, rgba(10, 6, 22, .88), rgba(28, 16, 52, .82)); border: 1px solid rgba(232, 186, 90, .3); box-shadow: 0 6px 16px rgba(0, 0, 0, .4), 0 1px 0 rgba(255, 240, 200, .08) inset;
  transition: transform .25s var(--ease-back), border-color .2s, box-shadow .25s; }
.hubtop .iconbtn:hover { transform: translateY(-2px); border-color: var(--gold-1); box-shadow: 0 10px 20px rgba(0, 0, 0, .45), 0 0 18px rgba(242, 193, 78, .3); }
.hubtop .iconbtn:active { transform: scale(.94); }
.hubtop .iconbtn .ico { width: 24px; height: 24px; }

/* leader hero */
.hubleader { left: 104px; top: 118px; }
.hubleader .hl-aura { position: absolute; left: -90px; right: -90px; top: -60px; height: 610px; pointer-events: none; z-index: -1;
  background: radial-gradient(ellipse 46% 44% at 50% 48%, color-mix(in srgb, var(--glow) 42%, transparent), transparent 72%); animation: lcAura 5.5s ease-in-out infinite; }
.hubleader .hl-aura::after { content: ""; position: absolute; inset: 8% 14%; border-radius: 50%; opacity: .35;
  background: repeating-conic-gradient(from 0deg, rgba(255, 230, 170, .22) 0 2deg, transparent 2deg 16deg); -webkit-mask: radial-gradient(circle, #000 20%, transparent 68%); mask: radial-gradient(circle, #000 20%, transparent 68%);
  animation: lcSpin 80s linear infinite; }
@keyframes lcAura { 50% { opacity: .7; transform: scale(1.04); } }
@keyframes lcSpin { to { transform: rotate(360deg); } }
.hubleader .hl-float { animation: lcFloat 6.5s ease-in-out infinite; }
@keyframes lcFloat { 50% { transform: translateY(-9px); } }
.hubleader .lc { box-shadow: 0 34px 60px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 230, 170, .35), 0 0 60px color-mix(in srgb, var(--glow) 70%, transparent); transition: transform .2s var(--ease-out); }
.hubleader .hl-plinth { height: 18px; margin: 6px 30px 0; border-radius: 50%; background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, .65), transparent 70%); animation: lcPlinth 6.5s ease-in-out infinite; }
@keyframes lcPlinth { 50% { transform: scaleX(.88); opacity: .7; } }
.hubleader .change { margin-top: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; padding: 13px 20px; }

/* right column */
.hubright { right: 84px; top: 112px; width: 430px; gap: 12px; }
.bp-wrap { position: relative; }
.bp-fx { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.bp-spark { position: absolute; bottom: 12px; width: 6px; height: 6px; border-radius: 50%; background: #fff3c4; box-shadow: 0 0 8px #ffd36e, 0 0 16px #f2a93a; }
.bp-wrap::before, .bp-wrap::after { content: ""; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #ffe7a8; box-shadow: 0 0 10px #ffc94e; pointer-events: none; z-index: 3; opacity: 0; animation: lcEmber 5s ease-out infinite; }
.bp-wrap::before { left: 18%; bottom: 10px; }
.bp-wrap::after { left: 76%; bottom: 20px; animation-delay: 2.4s; }
@keyframes lcEmber { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: .9; } 100% { opacity: 0; transform: translate(12px, -110px) scale(.4); } }
.bigplay { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 20px 20px 22px; border-radius: 20px; animation: none; isolation: isolate;
  border: 2px solid #fff0c2; color: #2b1600; text-shadow: 0 1px 0 rgba(255, 240, 200, .55);
  background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(255, 255, 255, .45), transparent 60%), linear-gradient(180deg, #ffe7a0 0%, #f4c55a 40%, #d39526 76%, #a36a14 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 -4px 0 rgba(90, 50, 0, .35) inset, 0 0 0 5px rgba(12, 6, 26, .75), 0 0 0 6px rgba(232, 186, 90, .45), 0 22px 44px rgba(0, 0, 0, .6);
  transition: transform .3s var(--ease-back), filter .25s; }
.bigplay:hover { transform: translateY(-3px) scale(1.015); filter: brightness(1.06); }
.bigplay:active { transform: scale(.985); }
.bigplay::after { z-index: 1; }
.bigplay .bp-glow { position: absolute; inset: -40px; z-index: -1; border-radius: 40px; background: radial-gradient(ellipse at 50% 55%, rgba(255, 205, 90, .75), transparent 62%); opacity: .35; animation: lcBreathe 2.8s ease-in-out infinite; pointer-events: none; }
.bp-wrap { filter: drop-shadow(0 0 26px rgba(242, 193, 78, .35)); }
.bp-wrap::marker { display: none; }
@keyframes lcBreathe { 50% { opacity: .85; transform: scale(1.06); } }
.bigplay .bp-t { position: relative; z-index: 2; font: 900 64px/1 var(--font-title); letter-spacing: .22em; margin-right: -.22em; text-transform: uppercase; }
.bigplay small { position: relative; z-index: 2; margin-top: 6px; font: 800 13px/1.2 var(--font-ui); letter-spacing: .26em; text-transform: uppercase; opacity: .82; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdeck { appearance: none; font: inherit; color: var(--ink); cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 8px 16px 8px 8px; border-radius: 16px; text-align: left;
  background: linear-gradient(180deg, rgba(30, 17, 58, .86), rgba(14, 8, 28, .9)); border: 1px solid rgba(232, 186, 90, .28); box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
  transition: transform .25s var(--ease-back), border-color .25s; }
.hdeck:hover { transform: translateY(-2px); border-color: var(--gold-line); }
.hdeck .hd-art { width: 52px; height: 52px; border-radius: 12px; flex: none; background-size: cover; background-position: 50% 25%; box-shadow: 0 0 0 1px rgba(255, 230, 170, .45), 0 0 14px color-mix(in srgb, var(--c) 60%, transparent); }
.hdeck .hd-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hdeck em { font: 800 10px/1 var(--font-ui); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-2); font-style: normal; }
.hdeck b { font: 800 18px/1.15 var(--font-title); letter-spacing: .03em; color: #fff4d6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdeck .hd-txt > span { font-size: 12px; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdeck > .ico { width: 20px; height: 20px; color: var(--gold-2); transition: transform .25s var(--ease-back); }
.hdeck:hover > .ico { transform: translateX(3px); }
.hubstats { gap: 10px; }
.hubstats div { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; padding: 10px 12px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(20, 12, 40, .8), rgba(10, 6, 22, .82)); border: 1px solid rgba(232, 186, 90, .18); }
.hubstats .ico { grid-row: span 2; width: 22px; height: 22px; }
.hubstats b { font: 800 20px/1 var(--font-title); white-space: nowrap; }
.hubstats b small { font-size: 13px; color: var(--ink-dim); }
.hubstats span { font-size: 10px; letter-spacing: .16em; }
.hquest { appearance: none; font: inherit; color: var(--ink); cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; text-align: left;
  background: linear-gradient(180deg, rgba(20, 12, 40, .82), rgba(10, 6, 22, .86)); border: 1px solid rgba(232, 186, 90, .18); transition: transform .25s var(--ease-back), border-color .25s; }
.hquest:hover { transform: translateY(-2px); border-color: var(--gold-line); }
.hquest > .ico { width: 26px; height: 26px; }
.hquest .hq-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hquest b { display: flex; justify-content: space-between; font: 800 13px/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: #fff0cc; }
.hquest b i { font-style: normal; color: var(--gold-1); letter-spacing: .06em; }
.hquest em { font-style: normal; font-size: 12.5px; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hquest .hq-bar { height: 4px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.hquest .hq-bar i { display: block; height: 100%; background: linear-gradient(90deg, #b98aff, var(--gold-1)); border-radius: inherit; }
.hquest.ready { border-color: rgba(242, 193, 78, .6); animation: afPulseGold 2.4s ease-in-out infinite; }
.hquest.ready em { color: var(--gold-1); font-weight: 700; }
/* season banner (screens-season.js) now sits at the bottom of the column */
.hubright .seasonHub { position: relative; right: auto; bottom: auto; width: auto; gap: 8px; }
.hubright .seasonHub .shMain { border-color: rgba(232, 186, 90, .4); }
.hubright .seasonHub .shTxt > b { font-size: 21px; }
.hubright .locChip { background: rgba(10, 6, 22, .8); border-color: rgba(232, 186, 90, .22); }

/* day-one companion chooser (screens-store.js): a tidy framed card centred between the columns */
#hub .lcs-starter { left: 470px; right: 548px; width: auto; bottom: 124px; padding: 16px 18px 16px; border-radius: 18px;
  background: radial-gradient(ellipse 80% 70% at 50% 0%, rgba(120, 70, 210, .25), transparent 70%), linear-gradient(180deg, rgba(30, 17, 58, .96), rgba(12, 7, 26, .97));
  border: 1px solid rgba(232, 186, 90, .5); box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 26px 50px rgba(0, 0, 0, .65); animation: lcRiseIn .55s var(--ease-back) both; }
#hub .lcs-starter::before { content: ""; position: absolute; inset: 6px; border-radius: 13px; pointer-events: none;
  background: linear-gradient(var(--gold-2), var(--gold-2)) left top / 14px 1.5px no-repeat, linear-gradient(var(--gold-2), var(--gold-2)) left top / 1.5px 14px no-repeat,
    linear-gradient(var(--gold-2), var(--gold-2)) right top / 14px 1.5px no-repeat, linear-gradient(var(--gold-2), var(--gold-2)) right top / 1.5px 14px no-repeat,
    linear-gradient(var(--gold-2), var(--gold-2)) left bottom / 14px 1.5px no-repeat, linear-gradient(var(--gold-2), var(--gold-2)) left bottom / 1.5px 14px no-repeat,
    linear-gradient(var(--gold-2), var(--gold-2)) right bottom / 14px 1.5px no-repeat, linear-gradient(var(--gold-2), var(--gold-2)) right bottom / 1.5px 14px no-repeat; }
#hub .lcs-sthead { align-items: center; }
#hub .lcs-sthead b { font-size: 19px; letter-spacing: .06em; background: linear-gradient(180deg, var(--gold-hi), var(--gold-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
#hub .lcs-sthead span { display: block; font-size: 12.5px; line-height: 1.35; margin-top: 3px; }
#hub .lcs-sthead .btn { flex: none; white-space: nowrap; }
#hub .lcs-strow { gap: 8px; }
#hub .lcs-strow button { padding: 6px 4px 8px; border-color: rgba(232, 186, 90, .2); transition: transform .25s var(--ease-back), border-color .2s, background .2s; min-width: 0; }
#hub .lcs-strow button:hover { transform: translateY(-4px); border-color: var(--gold-1); }
#hub .lcs-strow button b { font-size: 14px; }
#hub .lcs-strow button span { font-size: 10.5px; white-space: nowrap; }
#hub .lcs-stpet { height: 88px; display: grid; place-items: center; }
#hub .lcs-stpet > * { transform: scale(.86); }
#hub:has(.hubui.choosing) .three { opacity: .55; transition: opacity .6s; }
/* the hub companion stands on the floor between the leader and the crystal */
#hub .cz-hubpet { left: 470px; top: auto; bottom: 118px; }
@keyframes lcRiseIn { from { opacity: 0; transform: translateY(26px) scale(.97); } }

/* navbar with line icons */
.navbar button .ic { display: grid; place-items: center; height: 28px; font-size: 26px; }
.navbar button .ic .ico { width: 26px; height: 26px; }
.navbar button:not(.on) .ic .ico.gold { stroke: currentColor; }
.navbar button:hover .ic .ico.gold { stroke: url(#lcIcoGold) var(--gold-1); }

/* =====================================================================
   SHEETS + TOAST
   ===================================================================== */
#sheet .box { padding: 30px 36px 28px; }
#sheet .box > .af-eyebrow { margin-bottom: 8px; }
#sheet .box h2 { display: flex; align-items: center; justify-content: center; gap: 18px; }
#sheet .box h2::before, #sheet .box h2::after { content: ""; width: 70px; height: 1px; flex: none; background: linear-gradient(90deg, transparent, var(--gold-line)); }
#sheet .box h2::after { background: linear-gradient(90deg, var(--gold-line), transparent); }
#sheet .actions { margin-top: 18px; }
#sheet .err:not(:empty) { padding: 8px 12px; border-radius: 10px; background: rgba(255, 90, 79, .1); border: 1px solid rgba(255, 90, 79, .35); }
#toast { display: flex; align-items: center; gap: 12px; bottom: 136px; padding: 12px 22px 12px 14px; border-radius: 14px; font: 600 16px/1.35 var(--font-ui); color: #fff6e0; text-align: left;
  background: linear-gradient(180deg, rgba(34, 20, 64, .97), rgba(14, 8, 28, .97)); border: 1px solid rgba(232, 186, 90, .6);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 18px 40px rgba(0, 0, 0, .6), 0 0 24px rgba(242, 193, 78, .18);
  transform: translate(-50%, 18px) scale(.96); transition: opacity .25s var(--ease-out), transform .35s var(--ease-back); }
#toast.on { transform: translate(-50%, 0) scale(1); }
#toast .tico { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, rgba(242, 193, 78, .25), transparent 70%); }
#toast .tico .ico { width: 20px; height: 20px; }
#toast.on .tico .ico { animation: lcTwinkle .8s var(--ease-back); }
@keyframes lcTwinkle { from { transform: rotate(-90deg) scale(.3); opacity: 0; } }
#trailerModal video { border-radius: 16px; border: 1px solid rgba(232, 186, 90, .45); box-shadow: 0 0 0 6px rgba(14, 8, 28, .6), 0 40px 90px rgba(0, 0, 0, .75); max-width: 1280px; max-height: 720px; display: block; }

/* =====================================================================
   MODES SHEET
   ===================================================================== */
#sheet .box.modesheet { width: 1060px; }
.modesheet .modes { gap: 18px; margin: 18px 0 16px; }
.modesheet .mode { position: relative; height: 300px; padding: 0; display: block; text-align: left; color: var(--ink);
  background: var(--art) var(--pos, 50% 30%) / cover no-repeat, #1a1030; border: 1px solid rgba(232, 186, 90, .35); border-radius: 16px; }
.modesheet .mode::before { background: linear-gradient(180deg, rgba(8, 4, 18, .1) 0%, rgba(8, 4, 18, .25) 40%, rgba(8, 4, 18, .95) 88%); }
.modesheet .mode .mt-ic { position: absolute; left: 16px; top: 16px; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; font-size: 26px;
  background: radial-gradient(circle at 50% 35%, rgba(60, 34, 110, .95), rgba(12, 6, 26, .95)); border: 1px solid rgba(232, 186, 90, .6); box-shadow: 0 6px 16px rgba(0, 0, 0, .55); transition: transform .35s var(--ease-back); }
.modesheet .mode:hover .mt-ic { transform: rotate(-8deg) scale(1.08); }
.modesheet .mode .mt-tag { position: absolute; right: 14px; top: 16px; font: 800 10px/1 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; padding: 6px 10px; border-radius: 99px;
  color: var(--gold-hi); background: rgba(10, 6, 22, .72); border: 1px solid rgba(232, 186, 90, .45); }
.modesheet .mode .mt-txt { position: absolute; left: 20px; right: 20px; bottom: 18px; display: flex; flex-direction: column; gap: 6px; }
.modesheet .mode .mt-txt b { font: 800 28px/1.05 var(--font-title); letter-spacing: .06em; color: #fff4d6; text-shadow: 0 2px 10px rgba(0, 0, 0, .8); }
.modesheet .mode .mt-txt span { font-size: 14px; color: #e4d8f5; text-shadow: 0 1px 6px rgba(0, 0, 0, .9); }
.modesheet .mode.off { opacity: 1; cursor: not-allowed; filter: none; }
.modesheet .mode.off::before { background: linear-gradient(180deg, rgba(8, 4, 18, .55), rgba(8, 4, 18, .96) 85%); }
.modesheet .mode.off { background-blend-mode: luminosity; }
.modesheet .mode.off .mt-txt { opacity: .6; }
.modesheet .mode.off .mt-ic { filter: grayscale(1); opacity: .6; }
.modesheet .mode.off:hover { transform: none; border-color: rgba(232, 186, 90, .35); box-shadow: 0 14px 34px rgba(0, 0, 0, .55); }
.modesheet .mode.off:hover::after { opacity: 0; }
.modesheet .mode .mt-lock { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 8px; white-space: nowrap;
  font: 700 12px/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: #ffd9c8; padding: 8px 12px; border-radius: 99px; background: rgba(10, 6, 22, .82); border: 1px solid rgba(255, 150, 120, .4); }
.modesheet .mode .mt-lock .ico { width: 14px; height: 14px; }
.modesheet .modesub { appearance: none; font: inherit; color: var(--ink); cursor: pointer; margin: 0 auto; width: 100%; display: flex; align-items: center; gap: 14px; padding: 10px 18px 10px 10px; border-radius: 14px; text-align: left;
  background: rgba(10, 6, 22, .55); border: 1px solid rgba(232, 186, 90, .22); transition: border-color .2s, background .2s; }
.modesheet .modesub:hover { border-color: var(--gold-line); background: rgba(40, 22, 80, .5); }
.modesheet .ms-av { width: 46px; height: 46px; border-radius: 10px; flex: none; background-size: cover; background-position: 50% 25%; box-shadow: 0 0 0 1px rgba(255, 230, 170, .45), 0 0 12px color-mix(in srgb, var(--c) 55%, transparent); }
.modesheet .ms-t { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.modesheet .ms-t em { font: 800 10px/1 var(--font-ui); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-2); font-style: normal; }
.modesheet .ms-t b { font: 800 18px/1.1 var(--font-title); color: #fff4d6; }
.modesheet .ms-t span { font-size: 14px; color: var(--ink-dim); }
.modesheet .ms-ch { display: flex; align-items: center; gap: 6px; font: 800 12px/1 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-1); }
.modesheet .ms-ch .ico { width: 16px; height: 16px; transition: transform .25s var(--ease-back); }
.modesheet .modesub:hover .ms-ch .ico { transform: translateX(3px); }

/* =====================================================================
   LEADER SELECT
   ===================================================================== */
#select .top .btn .ico, #rules .top .btn .ico { width: 18px; height: 18px; }
#select .selhint { display: flex; align-items: center; gap: 10px; color: var(--ink-dim); font-size: 13px; letter-spacing: .08em; }
#select .selhint .ico { width: 20px; height: 20px; }
#select .leaders { top: 104px; gap: 20px; }
.leaderPick { width: 184px; transition: transform .4s var(--ease-back), filter .3s; filter: brightness(.72) saturate(.85); }
.leaderPick .lc { width: 184px; height: 274px; transition: transform .15s, box-shadow .35s; }
.leaderPick:hover { transform: translateY(-8px); filter: brightness(.95) saturate(1); }
.leaderPick.sel { transform: translateY(-14px) scale(1.05); filter: none; }
.leaderPick.sel .lc { box-shadow: 0 0 0 2px var(--gold-hi), 0 0 0 5px rgba(12, 6, 26, .9), 0 0 0 6px var(--gold-2), 0 0 44px color-mix(in srgb, var(--glow) 85%, transparent), 0 24px 40px rgba(0, 0, 0, .6); }
.leaderPick.sel::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: -12px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--gold-1), transparent); box-shadow: 0 0 12px var(--gold-2); }
.leaderPick .setname { margin-top: 12px; display: flex; flex-direction: column; align-items: center; gap: 3px; letter-spacing: 0; }
.leaderPick .setname b { font: 800 16px/1 var(--font-title); color: #fff4d6; letter-spacing: .04em; }
.leaderPick .setname span { font: 800 10px/1 var(--font-ui); letter-spacing: .26em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 70%, #fff); }
#select .detail { left: 60px; right: 60px; top: 446px; bottom: 28px; height: auto; display: grid; grid-template-columns: 230px minmax(0, 1fr) 330px 290px; gap: 26px; align-items: stretch;
  padding: 26px 30px 26px 0; border-radius: 20px; overflow: hidden; border: 1px solid rgba(232, 186, 90, .32);
  background: linear-gradient(180deg, rgba(30, 17, 58, .9), rgba(12, 7, 26, .94)); box-shadow: var(--sh-deep); backdrop-filter: blur(6px); }
#select .detail .dt-portrait { margin: -26px 0; background-size: cover; background-position: 50% 22%;
  -webkit-mask: linear-gradient(90deg, #000 55%, transparent); mask: linear-gradient(90deg, #000 55%, transparent); position: relative; }
#select .detail .dt-info { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; padding-right: 4px; }
#select .detail h2 { font: 800 32px/1.05 var(--font-title); margin: 2px 0 0; letter-spacing: .04em; color: #fff4d6; background: linear-gradient(180deg, var(--gold-hi), var(--gold-1) 60%, var(--gold-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
#select .detail .dt-id { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--ink-dim); font-style: italic; }
#select .detail .dt-box { padding: 10px 14px; border-radius: 12px; background: rgba(8, 4, 18, .5); border: 1px solid rgba(190, 160, 255, .16); }
#select .detail .dt-box.dt-cmd { border-color: rgba(232, 186, 90, .4); background: linear-gradient(90deg, rgba(242, 193, 78, .1), rgba(8, 4, 18, .5)); }
#select .dt-lb { display: flex; align-items: center; gap: 7px; font: 800 11px/1 var(--font-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-1); margin-bottom: 6px; }
#select .dt-lb .ico { width: 14px; height: 14px; }
#select .dt-lb i { margin-left: auto; font-style: normal; font-weight: 700; letter-spacing: .08em; text-transform: none; color: var(--ink-dim); display: flex; align-items: center; gap: 4px; }
#select .dt-tx { font: 17px/1.4 var(--font-card); white-space: pre-line; color: #f1e8ff; }
#select .dt-sig { display: flex; flex-direction: column; min-width: 0; }
#select .dt-sig .dt-lb { margin-bottom: 12px; }
#select .sigrow { display: flex; gap: 12px; flex: 1; align-items: center; justify-content: center; perspective: 900px; }
#select .sigc { width: 98px; height: 137px; flex: none; cursor: pointer; transition: transform .3s var(--ease-back); }
#select .sigc .card { width: 98px; height: 137px; box-shadow: 0 10px 20px rgba(0, 0, 0, .5); border-radius: 8px; }
#select .sigc:hover { transform: translateY(-8px) scale(1.12) rotate(-2deg); z-index: 2; }
#select .detail .side { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
#select .detail select { width: 100%; padding: 11px 12px; font: 600 15px var(--font-ui); border-radius: 10px; }
#select .detail label { margin-top: 4px; font-weight: 800; }
#select .detail #begin { margin-top: 14px; padding: 18px 20px; font-size: 26px; letter-spacing: .16em; display: flex; align-items: center; justify-content: center; }
#select .detail #begin .ico { width: 26px; height: 26px; }
#select .detail.swap > * { animation: lcSwap .45s var(--ease-out) both; }
#select .detail.swap > :nth-child(2) { animation-delay: 40ms; } #select .detail.swap > :nth-child(3) { animation-delay: 80ms; }
#select .detail.swap > .side { animation: none; }
#select .detail.swap > .dt-portrait { animation-name: lcFadeIn; }
@keyframes lcSwap { from { opacity: 0; transform: translateY(10px); } }
@keyframes lcFadeIn { from { opacity: 0; } }

/* =====================================================================
   ACCOUNT / LOGIN
   ===================================================================== */
#sheet .box.acctsheet { width: 760px; padding-top: 0; overflow: hidden; text-align: left; }
#sheet .box.acctsheet.wide { width: 1000px; }
.acct-hero { position: relative; margin: 0 -36px 20px; padding: 34px 40px 24px; display: flex; align-items: center; gap: 26px; isolation: isolate; }
.acct-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--art) var(--pos, 50% 30%) / cover no-repeat; opacity: .55; }
.acct-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(14, 8, 28, .92) 20%, rgba(14, 8, 28, .45) 70%, rgba(14, 8, 28, .7)), linear-gradient(0deg, rgba(20, 12, 40, 1), transparent 60%);
  border-bottom: 1px solid rgba(232, 186, 90, .3); }
.ah-av { appearance: none; border: 0; background: none; padding: 0; cursor: pointer; position: relative; flex: none; transition: transform .3s var(--ease-back); }
.ah-av:hover { transform: scale(1.04); }
.ah-av .avring { width: 112px; height: 112px; }
.ah-av .avring .av { inset: 9px; }
.ah-av .avring.medal .av { inset: 6px; }
.ah-av .avring .lvb { min-width: 32px; height: 28px; font-size: 15px; right: -4px; bottom: -2px; }
.ah-av .ah-edit { position: absolute; left: -4px; bottom: -2px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff4d6;
  background: linear-gradient(180deg, #5a31a6, #2a1258); border: 1px solid var(--gold-line); box-shadow: 0 4px 10px rgba(0, 0, 0, .5); }
.ah-av .ah-edit .ico { width: 16px; height: 16px; }
.ah-txt { min-width: 0; }
#sheet .ah-txt h2 { justify-content: flex-start; margin: 6px 0 10px; font-size: 38px; }
#sheet .ah-txt h2::before, #sheet .ah-txt h2::after { display: none; }
.ah-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ah-chips span { font: 700 13px/1 var(--font-ui); padding: 7px 12px; border-radius: 99px; color: #f3e8ff; background: rgba(10, 6, 22, .7); border: 1px solid rgba(232, 186, 90, .3); }
.avpick { margin: -6px 0 18px; padding: 14px 16px 12px; border-radius: 16px; background: rgba(8, 4, 18, .55); border: 1px solid rgba(232, 186, 90, .25); }
.avpick[hidden] { display: none; }
.avp-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.avp-head b { flex: none; }
.avp-head span { flex: 1; min-width: 0; }
.avp-head b { font: 800 16px var(--font-title); color: var(--gold-1); letter-spacing: .06em; }
.avp-head span { font-size: 13px; color: var(--ink-dim); }
.avgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 8px; }
.avo { appearance: none; position: relative; padding: 0; border: 0; background: none; cursor: pointer; aspect-ratio: 1; border-radius: 50%; transition: transform .25s var(--ease-back), filter .2s; filter: brightness(.82); }
.avo img, .avo > span { width: 100%; height: 100%; display: block; border-radius: 50%; object-fit: cover; }
.avo > span { background-size: cover; background-position: 50% 25%; box-shadow: 0 0 0 2px rgba(232, 186, 90, .5) inset; }
.avo em { position: absolute; left: 50%; bottom: -3px; transform: translateX(-50%); font: 800 8px/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; padding: 3px 5px; border-radius: 99px; background: rgba(10, 6, 22, .9); color: var(--gold-1); font-style: normal; }
.avo:hover { transform: translateY(-3px) scale(1.08); filter: none; }
.avo.on { filter: none; box-shadow: 0 0 0 2px var(--gold-hi), 0 0 18px rgba(242, 193, 78, .8); }
.avo.on::after { content: ""; position: absolute; right: -2px; top: -2px; width: 14px; height: 14px; border-radius: 50%; background: var(--gold-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b1600' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 70% no-repeat; box-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.acctsheet .acct { grid-template-columns: 1.08fr 1fr; gap: 18px; margin-top: 0; }
.acctsheet .acf { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 20px 22px 22px; border-radius: 16px; background: rgba(8, 4, 18, .45); border: 1px solid rgba(190, 160, 255, .18); }
.acctsheet .acf.primary { border-color: rgba(232, 186, 90, .45); background: linear-gradient(180deg, rgba(242, 193, 78, .08), rgba(8, 4, 18, .45)); }
.acctsheet .acf-tag { position: absolute; right: 16px; top: -10px; font: 800 10px/1 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; padding: 5px 10px; border-radius: 99px; color: #2b1600; background: linear-gradient(180deg, #ffe39a, #e2a93c); }
.acctsheet .acf-h { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 4px; }
.acctsheet .acf-h > .ico { width: 30px; height: 30px; margin-top: 2px; }
.acctsheet .acf h3 { font: 800 19px/1.2 var(--font-title); letter-spacing: .06em; margin: 0 0 4px; color: #fff4d6; }
.acctsheet .acf p { font-size: 13.5px; line-height: 1.45; color: var(--ink-dim); margin: 0; }
.acctsheet .fld { display: flex; flex-direction: column; gap: 5px; }
.acctsheet .fld > span { font: 800 10px/1 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-dim); }
.acctsheet .fld input { font: 16px var(--font-ui); padding: 12px 14px; border-radius: 10px; user-select: text; width: 100%; }
.acctsheet input.bad { border-color: #ff7a6a !important; box-shadow: 0 0 0 3px rgba(255, 90, 79, .18) !important; }
.acctsheet .ferr { font-size: 13px; color: #ffb3a8; min-height: 0; }
.acctsheet .ferr:empty { display: none; }
.acctsheet .acf .btn { margin-top: 4px; display: flex; align-items: center; justify-content: center; font-size: 17px; padding: 13px 16px; }
.acctsheet .acf .btn[disabled] { opacity: .7; }
.acf.shake { animation: lcShake .42s cubic-bezier(.36, .07, .19, .97); }
@keyframes lcShake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.acct-note { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: rgba(8, 4, 18, .5); border: 1px solid rgba(232, 186, 90, .25); }
.acct-note > .ico { width: 26px; height: 26px; margin-top: 2px; }
.acct-note b { display: block; font: 800 16px var(--font-title); color: #fff4d6; letter-spacing: .04em; margin-bottom: 3px; }
.acct-note span { font-size: 14px; line-height: 1.5; color: var(--ink-dim); }
.acct-info { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.acct-info > div { padding: 12px 14px; border-radius: 12px; background: rgba(8, 4, 18, .5); border: 1px solid rgba(190, 160, 255, .16); min-width: 0; }
.acct-info span { display: block; font: 800 10px/1 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 7px; }
.acct-info b { font: 800 17px/1.1 var(--font-title); color: #fff4d6; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acctsheet .actions { justify-content: flex-end; }

/* =====================================================================
   HOW TO PLAY
   ===================================================================== */
#rules .rwrap { position: absolute; top: 104px; bottom: 18px; left: 50%; transform: translateX(-50%); width: 1380px; display: grid; grid-template-columns: 240px 1fr; gap: 26px; }
#rules .rtoc { display: flex; flex-direction: column; gap: 3px; padding: 18px 12px; border-radius: 18px; align-self: start; max-height: 100%; overflow-y: auto;
  background: linear-gradient(180deg, rgba(20, 12, 40, .85), rgba(10, 6, 22, .88)); border: 1px solid rgba(232, 186, 90, .22); box-shadow: var(--sh-deep); }
#rules .rtoc .af-eyebrow { padding: 0 10px 10px; }
#rules .rtoc button { appearance: none; border: 0; background: none; color: var(--ink-dim); font: 600 14.5px/1.2 var(--font-ui); text-align: left; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; position: relative; transition: color .2s, background .2s; }
#rules .rtoc button .ico { width: 18px; height: 18px; opacity: .7; }
#rules .rtoc button:hover { color: #fff; background: rgba(168, 107, 255, .12); }
#rules .rtoc button.on { color: var(--gold-hi); background: linear-gradient(90deg, rgba(242, 193, 78, .16), transparent); }
#rules .rtoc button.on .ico { opacity: 1; color: var(--gold-1); }
#rules .rtoc button.on::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--gold-1); box-shadow: 0 0 10px var(--gold-2); }
#rules .rwrap .doc { position: relative; top: auto; left: auto; transform: none; width: auto; bottom: auto; height: 100%; padding: 0 14px 60px 0; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; scroll-behavior: auto; }
#rules .rsec { flex: none; padding: 22px 28px 24px; border-radius: 18px; background: linear-gradient(180deg, rgba(30, 17, 58, .82), rgba(14, 8, 28, .86)); border: 1px solid rgba(232, 186, 90, .2); box-shadow: 0 14px 34px rgba(0, 0, 0, .4); }
#rules .rsec.intro { position: relative; overflow: hidden; isolation: isolate; padding: 30px 34px; border-color: rgba(232, 186, 90, .4); }
#rules .rsec.intro::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(14, 8, 28, .95) 25%, rgba(14, 8, 28, .55)), var(--art) center 40% / cover; }
#rules .doc h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font: 800 24px/1.1 var(--font-title); letter-spacing: .08em; color: var(--gold-1); }
#rules .doc h2 .ico { width: 26px; height: 26px; }
#rules .doc p, #rules .doc li { font-size: 16.5px; line-height: 1.62; color: #e6dcf7; }
#rules .doc p { margin: 0 0 10px; } #rules .doc p:last-child { margin-bottom: 0; }
#rules .doc b { color: #fff4d6; }
#rules .doc ul { margin: 0; padding-left: 22px; } #rules .doc ul li::marker { color: var(--gold-2); }
#rules .doc .callout { padding: 0; background: none; border: 0; font: 21px/1.5 var(--font-card); color: #f3eaff; max-width: 820px; margin: 10px 0 20px; }
#rules .goal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 900px; }
#rules .goal > div { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; padding: 14px 16px; border-radius: 14px; background: rgba(8, 4, 18, .6); border: 1px solid rgba(232, 186, 90, .3); }
#rules .goal .ico { grid-row: span 2; width: 30px; height: 30px; }
#rules .goal b { font: 800 17px var(--font-title); } #rules .goal span { font-size: 13.5px; color: var(--ink-dim); }
#rules .steps { list-style: none; padding: 0; margin: 4px 0 12px; counter-reset: st; display: grid; gap: 8px; }
#rules .steps li { counter-increment: st; position: relative; padding: 10px 14px 10px 54px; border-radius: 12px; background: rgba(8, 4, 18, .45); border: 1px solid rgba(190, 160, 255, .12); line-height: 1.5; }
#rules .steps li::before { content: counter(st); position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font: 900 14px var(--font-title); color: #2b1600; background: linear-gradient(180deg, #ffe39a, #d39526); }
#rules .steps li b { margin-right: 10px; color: var(--gold-1); font-family: var(--font-title); letter-spacing: .04em; }
#rules .note { padding: 10px 14px; border-radius: 12px; border-left: 3px solid var(--gold-2); background: rgba(242, 193, 78, .07); }
#rules .tgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#rules .tgrid > div { padding: 12px 16px; border-radius: 12px; background: rgba(8, 4, 18, .45); border: 1px solid rgba(190, 160, 255, .12); }
#rules .tgrid b { display: block; font: 800 16px var(--font-title); color: var(--gold-1); margin-bottom: 4px; letter-spacing: .04em; }
#rules .tgrid span { font-size: 15px; line-height: 1.5; color: #e6dcf7; }
#rules kbd { font: 800 12px var(--font-ui); padding: 2px 7px; border-radius: 6px; border: 1px solid rgba(232, 186, 90, .5); background: rgba(8, 4, 18, .7); color: var(--gold-hi); }
#rules .kwgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
#rules .kwc { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: rgba(8, 4, 18, .45); border: 1px solid rgba(190, 160, 255, .12); transition: border-color .2s, transform .25s var(--ease-back); }
#rules .kwc:hover { border-color: var(--gold-line); transform: translateY(-2px); }
#rules .kwi { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, rgba(70, 40, 130, .9), rgba(12, 6, 26, .95)); border: 1px solid rgba(232, 186, 90, .5); }
#rules .kwi .ico { width: 21px; height: 21px; }
#rules .kwc b { display: block; font: 800 15px var(--font-title); color: #fff4d6; margin-bottom: 3px; }
#rules .kwc span { font-size: 13.5px; line-height: 1.45; color: var(--ink-dim); }
#rules .lgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
#rules .lrow { display: flex; gap: 14px; align-items: center; padding: 10px 14px 10px 10px; border-radius: 14px; background: rgba(8, 4, 18, .45); border: 1px solid rgba(190, 160, 255, .12); }
#rules .lrow .la { width: 64px; height: 64px; flex: none; border-radius: 12px; background-size: cover; background-position: 50% 25%; box-shadow: 0 0 0 1px rgba(255, 230, 170, .4), 0 0 14px color-mix(in srgb, var(--c) 55%, transparent); }
#rules .lrow b { font: 800 17px var(--font-title); color: #fff4d6; margin-right: 10px; }
#rules .lrow em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--gold-1); display: inline-flex; align-items: center; gap: 5px; }
#rules .lrow em .ico { width: 13px; height: 13px; }
#rules .lrow div > span { display: block; font-size: 13.5px; line-height: 1.45; color: var(--ink-dim); margin-top: 3px; }
#rules .setgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
#rules .setc { padding: 14px; border-radius: 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 18%, transparent), rgba(8, 4, 18, .5)); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); display: flex; flex-direction: column; gap: 5px; }
#rules .setc b { font: 800 18px var(--font-title); color: var(--c); letter-spacing: .08em; text-transform: uppercase; }
#rules .setc span { font-size: 13.5px; color: #e6dcf7; line-height: 1.35; } #rules .setc em { font-style: normal; font-size: 12px; color: var(--ink-dim); }

/* =====================================================================
   PHONE LANDSCAPE (body.mobile: stage scaled below .62)
   ===================================================================== */
body.mobile .hubtop { height: 84px; gap: 14px; }
body.mobile .avring { width: 80px; height: 80px; }
body.mobile .hubtop .profile { padding-right: 26px; }
body.mobile .hubtop .profile .lvl { font-size: 26px; max-width: 280px; }
body.mobile .hubtop .profile .sub { font-size: 18px; }
body.mobile .avring .lvb { font-size: 17px; height: 30px; min-width: 32px; }
body.mobile .gtag { font-size: 13px; }
body.mobile .xpline { width: 180px; height: 6px; }
body.mobile .netdot { font-size: 16px; padding: 10px 16px; } body.mobile .netdot i { width: 12px; height: 12px; }
body.mobile .hubtop .pill { font-size: 28px; padding: 10px 20px; }
body.mobile .hubtop .iconbtn { width: 72px; height: 72px; }
body.mobile .hubtop .iconbtn .ico { width: 34px; height: 34px; }
body.mobile .hublogo { width: 250px; top: 110px; }
body.mobile .hubleader { top: 124px; left: 70px; }
body.mobile .hubleader .change { font-size: 26px; padding: 18px; }
body.mobile .hubright { right: 60px; top: 124px; width: 560px; gap: 14px; }
body.mobile .bigplay .bp-t { font-size: 84px; }
body.mobile .bigplay small { font-size: 19px; }
body.mobile .hdeck .hd-art { width: 70px; height: 70px; }
body.mobile .hdeck em { font-size: 15px; } body.mobile .hdeck b { font-size: 26px; } body.mobile .hdeck .hd-txt > span { font-size: 18px; }
body.mobile .hubstats { display: none; }
body.mobile .hquest > .ico { width: 36px; height: 36px; }
body.mobile .hquest b { font-size: 18px; } body.mobile .hquest em { font-size: 18px; }
body.mobile .hubright .seasonHub .shTxt > b { font-size: 28px; }
body.mobile #hub .lcs-starter { left: 440px; right: 660px; bottom: 150px; padding: 18px 22px; }
body.mobile #hub .lcs-sthead b { font-size: 28px; } body.mobile #hub .lcs-sthead span { font-size: 18px; }
body.mobile #hub .lcs-strow button b { font-size: 21px; } body.mobile #hub .lcs-strow button span { font-size: 15px; }
body.mobile #hub .lcs-stpet { height: 110px; } body.mobile #hub .lcs-stpet > * { transform: none; }
body.mobile #hub .cz-hubpet { left: 450px; top: auto; bottom: 150px; }
body.mobile .navbar button .ic { height: 42px; } body.mobile .navbar button .ic .ico { width: 40px; height: 40px; }
body.mobile #toast { font-size: 26px; padding: 18px 30px 18px 18px; bottom: 170px; max-width: 1200px; }
body.mobile #toast .tico { width: 44px; height: 44px; } body.mobile #toast .tico .ico { width: 30px; height: 30px; }
body.mobile #sheet .box h2::before, body.mobile #sheet .box h2::after { width: 90px; }
body.mobile .af-eyebrow { font-size: 16px; }
/* modes */
body.mobile #sheet .box.modesheet { width: 1500px; }
body.mobile .modesheet .mode { height: 400px; }
body.mobile .modesheet .mode .mt-ic { width: 72px; height: 72px; font-size: 38px; }
body.mobile .modesheet .mode .mt-tag { font-size: 15px; padding: 8px 14px; }
body.mobile .modesheet .mode .mt-txt b { font-size: 42px; }
body.mobile .modesheet .mode .mt-txt span { font-size: 22px; }
body.mobile .modesheet .mode .mt-lock { font-size: 18px; padding: 12px 18px; } body.mobile .modesheet .mode .mt-lock .ico { width: 20px; height: 20px; }
body.mobile .modesheet .ms-av { width: 70px; height: 70px; }
body.mobile .modesheet .ms-t em { font-size: 15px; } body.mobile .modesheet .ms-t b { font-size: 28px; } body.mobile .modesheet .ms-t span { font-size: 21px; }
body.mobile .modesheet .ms-ch { font-size: 18px; } body.mobile .modesheet .ms-ch .ico { width: 22px; height: 22px; }
/* leader select */
body.mobile #select .selhint { font-size: 20px; } body.mobile #select .selhint .ico { width: 28px; height: 28px; }
body.mobile #select .leaders { top: 120px; gap: 26px; }
body.mobile .leaderPick { width: 180px; } body.mobile .leaderPick .lc { width: 180px; height: 268px; }
body.mobile .leaderPick .setname b { font-size: 24px; } body.mobile .leaderPick .setname span { font-size: 15px; }
body.mobile #select .detail { top: 470px; left: 30px; right: 30px; bottom: 22px; grid-template-columns: 170px minmax(0, 1fr) 390px 420px; gap: 26px; padding: 22px 26px 22px 0; }
body.mobile #select .detail .dt-portrait { margin: -22px 0; }
body.mobile #select .detail h2 { font-size: 40px; }
body.mobile #select .detail .dt-id { display: none; }
body.mobile #select .dt-lb { font-size: 15px; } body.mobile #select .dt-lb .ico { width: 18px; height: 18px; }
body.mobile #select .dt-tx { font-size: 23px; line-height: 1.3; }
body.mobile #select .detail .af-eyebrow { font-size: 15px; }
body.mobile #select .sigc, body.mobile #select .sigc .card { width: 118px; height: 165px; }
body.mobile #select .detail select { font-size: 24px; padding: 14px; }
body.mobile #select .detail label { font-size: 16px; }
body.mobile #select .detail #begin { font-size: 36px; padding: 22px; }
/* account */
body.mobile #sheet .box.acctsheet { width: 1100px; } body.mobile #sheet .box.acctsheet.wide { width: 1500px; }
body.mobile .ah-av .avring { width: 150px; height: 150px; }
body.mobile .ah-av .ah-edit { width: 48px; height: 48px; } body.mobile .ah-av .ah-edit .ico { width: 24px; height: 24px; }
body.mobile #sheet .ah-txt h2 { font-size: 52px; }
body.mobile .ah-chips span { font-size: 20px; padding: 10px 16px; }
body.mobile .avp-head b { font-size: 24px; } body.mobile .avp-head span { font-size: 18px; }
body.mobile .avgrid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px; }
body.mobile .avo em { font-size: 12px; }
body.mobile .acctsheet .acf h3 { font-size: 28px; } body.mobile .acctsheet .acf p { font-size: 19px; }
body.mobile .acctsheet .fld > span { font-size: 15px; }
body.mobile .acctsheet .fld input, body.mobile .acct input { font-size: 24px; padding: 16px 18px; }
body.mobile .acctsheet .ferr { font-size: 19px; }
body.mobile .acctsheet .acf .btn { font-size: 24px; padding: 18px; }
body.mobile .acctsheet .acf-tag { font-size: 14px; }
body.mobile .acct-note b { font-size: 24px; } body.mobile .acct-note span { font-size: 20px; } body.mobile .acct-note > .ico { width: 36px; height: 36px; }
body.mobile .acct-info span { font-size: 14px; } body.mobile .acct-info b { font-size: 24px; }
/* rules */
body.mobile #rules .rwrap { top: 118px; width: auto; left: 30px; right: 30px; transform: none; grid-template-columns: 330px 1fr; }
body.mobile #rules .rtoc button { font-size: 21px; padding: 12px 12px; } body.mobile #rules .rtoc button .ico { width: 24px; height: 24px; }
body.mobile #rules .doc h2 { font-size: 34px; } body.mobile #rules .doc h2 .ico { width: 34px; height: 34px; }
body.mobile #rules .doc p, body.mobile #rules .doc li, body.mobile #rules .tgrid span { font-size: 23px; }
body.mobile #rules .doc .callout { font-size: 28px; max-width: none; }
body.mobile #rules .goal b, body.mobile #rules .tgrid b { font-size: 24px; } body.mobile #rules .goal span { font-size: 19px; }
body.mobile #rules .kwgrid { grid-template-columns: repeat(2, 1fr); }
body.mobile #rules .kwc b, body.mobile #rules .lrow b { font-size: 23px; } body.mobile #rules .kwc span, body.mobile #rules .lrow div > span, body.mobile #rules .lrow em { font-size: 19px; }
body.mobile #rules .kwi { width: 54px; height: 54px; } body.mobile #rules .kwi .ico { width: 28px; height: 28px; }
body.mobile #rules .setgrid { grid-template-columns: repeat(3, 1fr); }
body.mobile #rules .setc b { font-size: 24px; } body.mobile #rules .setc span { font-size: 19px; } body.mobile #rules .setc em { font-size: 17px; }

/* =====================================================================
   SWITCHES: graphics Low, reduced motion, midnight theme
   ===================================================================== */
body.fx-low .hublogo, body.fx-low .hubleader .hl-aura, body.fx-low .hubleader .hl-aura::after, body.fx-low .hubleader .hl-float, body.fx-low .hubleader .hl-plinth,
body.fx-low .bigplay .bp-glow, body.fx-low .bp-wrap::before, body.fx-low .bp-wrap::after, body.fx-low .netdot.on i, body.fx-low .hquest.ready,
body.fx-low #select .detail.swap > *, body.fx-low #hub .lcs-starter, body.fx-low #toast.on .tico .ico, body.fx-low .acf.shake { animation: none !important; }
body.fx-low .bp-wrap { filter: none; }
body.fx-low .bigplay .bp-glow { opacity: .5; }
@media (prefers-reduced-motion: reduce) {
  .hublogo, .hubleader .hl-aura, .hubleader .hl-aura::after, .hubleader .hl-float, .hubleader .hl-plinth, .bigplay .bp-glow, .bp-wrap::before, .bp-wrap::after,
  .netdot.on i, .hquest.ready, #select .detail.swap > *, #hub .lcs-starter, #toast.on .tico .ico, .acf.shake, .hubleader .lc::after, .bigplay::after { animation: none !important; }
}
body.theme-midnight #hub { background: radial-gradient(ellipse 70% 60% at 52% 46%, #16092c 0%, #06030c 60%, #000 100%); }
body.theme-midnight .hubtop .profile, body.theme-midnight .hubtop .iconbtn, body.theme-midnight .hdeck, body.theme-midnight .hubstats div, body.theme-midnight .hquest,
body.theme-midnight #select .detail, body.theme-midnight #rules .rsec, body.theme-midnight #rules .rtoc, body.theme-midnight #toast { background: rgba(4, 2, 8, .92); }

body.mobile .hubright .seasonHub { width: auto; bottom: auto; }
body.mobile .hubleader .change { font-size: 22px; padding: 16px 14px; white-space: nowrap; }
#sheet .box.modesheet, #sheet .box.acctsheet { max-width: none; }
#sheet .box.acctsheet { max-height: 880px; overflow-y: auto; overscroll-behavior: contain; }
.acctsheet.picking .acct, .acctsheet.picking .acct-info, .acctsheet.picking .acct-note { display: none; }
.avp-head .avp-done { margin-left: auto; }

/* =====================================================================
   HOME v2 (owner pass): calmer, clearer hierarchy (PLAY > leader > rest), challenges row along the bottom
   ===================================================================== */
#hub .navbar, #hub .pill, #hub .hubtop .profile, #hub .netdot, #hub .iconbtn, #hub .locChip, #hub .seasonHub .shMain { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
#hub .navbar { background: linear-gradient(180deg, rgba(22, 12, 44, .97), rgba(8, 4, 18, .98)); }
.hublogo { animation: none; }
/* leader: smaller, calmer */
.hubleader { left: 104px; top: 116px; width: 262px; }
.hubleader .lc { width: 262px; height: 390px; }
.hubleader .hl-aura { left: -70px; right: -70px; top: -50px; height: 490px; opacity: .8; animation-duration: 8s; }
.hubleader .hl-aura::after { display: none; }
.hubleader .hl-float { animation-duration: 8s; }
.hubleader .hl-plinth { margin: 4px 24px 0; animation-duration: 8s; }
.hubleader .change { margin-top: 8px; font-size: 15px; padding: 11px 14px; }
/* sheens: transform-only (no background-position repaint) */
.hubleader .lc::after, .bigplay::after { background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, .26) 50%, transparent 80%); background-size: 100% 100%;
  width: 45%; left: -50%; right: auto; animation: lcSheenX 7s ease-in-out infinite; will-change: transform; }
.bigplay::after { background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, .45) 50%, transparent 80%); animation-duration: 5s; }
@keyframes lcSheenX { 0%, 72% { transform: translateX(0); } 100% { transform: translateX(340%); } }
/* right column: PLAY, deck, battlefield chip. Nothing else. */
.hubright { top: 116px; width: 420px; gap: 12px; }
.bp-wrap { filter: none; }
.bigplay { box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 -4px 0 rgba(90, 50, 0, .35) inset, 0 0 0 5px rgba(12, 6, 26, .75), 0 0 0 6px rgba(232, 186, 90, .45), 0 22px 44px rgba(0, 0, 0, .6), 0 0 46px rgba(242, 193, 78, .28); }
.bigplay .bp-glow { animation-duration: 3.6s; }
.hubright .locChip { align-self: stretch; }
.hubstats, .hquest { display: none; }
/* challenges row */
.hubquests { position: absolute; left: 104px; right: 84px; bottom: 116px; z-index: 5; display: flex; flex-direction: column; gap: 8px; }
.hq-head { display: flex; align-items: center; gap: 16px; padding: 0 4px; }
.hq-head b { display: flex; align-items: center; gap: 9px; font: 800 13px/1 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: #fff0cc; }
.hq-head b .ico { width: 18px; height: 18px; }
.hq-head b i { font-style: normal; letter-spacing: .08em; padding: 4px 8px; border-radius: 99px; color: #2b1600; background: linear-gradient(180deg, #ffe39a, #e2a93c); font-size: 11px; }
.hq-time { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-dim); }
.hq-time .ico { width: 14px; height: 14px; }
.hq-time em { font-style: normal; color: var(--gold-1); font-weight: 700; }
.hq-row { display: flex; gap: 12px; align-items: stretch; }
.hq-row .seasonHub { position: relative; right: auto; bottom: auto; width: auto; flex: 0 0 350px; gap: 0; }
.hq-row .seasonHub .shMain { height: 100%; border-color: rgba(232, 186, 90, .4); }
.hq-row .seasonHub .shArt { width: 86px; }
.hq-row .seasonHub .shTxt { padding: 9px 14px 9px 6px; gap: 2px; justify-content: center; }
.hq-row .seasonHub .shTxt > b { font-size: 18px; }
.hq-row .seasonHub .shEy { font-size: 10px; } .hq-row .seasonHub .shEv { font-size: 12px; } .hq-row .seasonHub .shTr { font-size: 10px; }
.hq-cards { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, .82fr); gap: 12px; }
.hq { position: relative; min-height: 100px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 14px; cursor: pointer; text-align: left;
  background: linear-gradient(180deg, rgba(28, 16, 54, .94), rgba(12, 7, 26, .96)); border: 1px solid rgba(232, 186, 90, .2); box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
  transition: transform .25s var(--ease-back), border-color .25s; }
.hq:hover { transform: translateY(-3px); border-color: var(--gold-line); }
.hq p { margin: 0; font-size: 14px; line-height: 1.3; color: #efe6ff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hq p b { font-family: var(--font-title); color: var(--gold-1); letter-spacing: .04em; margin-right: 4px; }
.hq-foot { display: flex; align-items: center; gap: 10px; min-height: 30px; }
.hq-bar { flex: 1; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.hq-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #b98aff, var(--gold-1)); transition: width .6s var(--ease-out); }
.hq-n { font: 800 13px/1 var(--font-ui); color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.hq-gold { display: flex; align-items: center; gap: 5px; font: 900 15px/1 var(--font-title); color: #ffe7a8; }
.hq .coin { width: 16px; height: 16px; display: inline-block; flex: none; }
.hq .packicon { width: 12px; height: 17px; display: inline-block; flex: none; }
.hq-claim { margin-left: auto; padding: 7px 12px; font-size: 13px; display: flex; align-items: center; gap: 5px; }
.hq-claim .coin { width: 14px; height: 14px; }
.hq.ready { border-color: rgba(242, 193, 78, .75); background: linear-gradient(180deg, rgba(64, 40, 20, .95), rgba(20, 10, 26, .96)); }
.hq.ready::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; box-shadow: 0 0 22px rgba(242, 193, 78, .45); opacity: .5; animation: lcReadyGlow 2.6s ease-in-out infinite; }
@keyframes lcReadyGlow { 50% { opacity: 1; } }
.hq.claimed { opacity: .55; }
.hq.claimed .hq-bar i { background: linear-gradient(90deg, #7dffb0, #3cc47a); }
.hq-done { display: flex; align-items: center; gap: 5px; font: 800 12px/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: #9dffc4; }
.hq-done .ico { width: 14px; height: 14px; }
.hq.claiming { animation: lcClaimPop .6s var(--ease-back); }
@keyframes lcClaimPop { 40% { transform: scale(1.05); } }
.hq-week { background: linear-gradient(180deg, rgba(40, 22, 80, .92), rgba(14, 8, 28, .95)); }
.hq-pips { flex: 1; display: flex; gap: 6px; }
.hq-pips i { flex: 1; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .1); }
.hq-pips i.rd { background: rgba(242, 193, 78, .5); }
.hq-pips i.on { background: linear-gradient(90deg, #b98aff, var(--gold-1)); }
/* companion chooser + pet no longer compete with the bottom row */
#hub .lcs-starter { left: 420px; right: 540px; top: 250px; bottom: auto; }
#hub .cz-hubpet { left: 378px; top: 392px; bottom: auto; }
/* toasts: top-right, just below the top bar, narrow, so they never sit on page headings (auto-dismiss in main.js toast()) */
#toast { top: 96px; right: 24px; left: auto; bottom: auto; max-width: 420px; transform: translate(24px, 0) scale(.96); }
#toast.on { transform: translate(0, 0) scale(1); }
/* Home: the top-right holds the PLAY button, so toasts sit in the empty corner right of the nav bar */
body[data-screen="hub"] #toast { top: auto; bottom: 26px; max-width: 360px; }
/* Deck Lab: stay left of the deck list panel (its name field and Save row live on the right) */
body[data-screen="deckbuilder"] #toast { right: 430px; }
/* phone */
body.mobile .hubleader { top: 118px; left: 64px; width: 232px; }
body.mobile .hubleader .lc { width: 232px; height: 345px; }
body.mobile .hubleader .hl-aura { height: 440px; }
body.mobile .hubleader .change { font-size: 17px; letter-spacing: .04em; padding: 13px 8px; }
body.mobile .hubright { top: 118px; right: 60px; width: 540px; }
body.mobile .bigplay { padding: 16px 20px 18px; }
body.mobile .bigplay .bp-t { font-size: 78px; }
body.mobile .hubright .locChip { font-size: 19px; }
body.mobile .hubquests { left: 60px; right: 60px; bottom: 146px; gap: 10px; }
body.mobile .hq-head b { font-size: 19px; }
body.mobile .hq-head b .ico { width: 26px; height: 26px; }
body.mobile .hq-head b i { font-size: 16px; }
body.mobile .hq-time { font-size: 19px; }
body.mobile .hq-time .ico { width: 20px; height: 20px; }
body.mobile .hq-row .seasonHub { flex-basis: 440px; width: auto; bottom: auto; }
body.mobile .hq-row .seasonHub .shArt { width: 100px; }
body.mobile .hq-row .seasonHub .shTxt > b { font-size: 25px; }
body.mobile .hq-row .seasonHub .shEy { font-size: 14px; }
body.mobile .hq-row .seasonHub .shEv, body.mobile .hq-row .seasonHub .shTr { font-size: 16px; }
body.mobile .hq { min-height: 118px; padding: 12px 18px; border-radius: 18px; gap: 8px; }
body.mobile .hq p { font-size: 21px; }
body.mobile .hq-bar, body.mobile .hq-pips i { height: 9px; }
body.mobile .hq-n { font-size: 19px; }
body.mobile .hq-gold { font-size: 22px; }
body.mobile .hq .coin { width: 22px; height: 22px; }
body.mobile .hq .packicon { width: 16px; height: 23px; }
body.mobile .hq-claim { font-size: 19px; padding: 10px 16px; }
body.mobile .hq-done { font-size: 17px; }
body.mobile #hub .lcs-starter { left: 330px; right: 640px; top: 150px; bottom: auto; }
body.mobile #hub .cz-hubpet { left: 312px; top: 330px; bottom: auto; }
body.mobile #toast { top: 112px; right: 28px; bottom: auto; max-width: 620px; }
/* phone Home: the corners are full, so the toast floats over the 3D scene between the leader card and PLAY */
body.mobile[data-screen="hub"] #toast { top: 330px; bottom: auto; left: 50%; right: auto; max-width: 640px; transform: translate(-50%, 12px) scale(.96); }
body.mobile[data-screen="hub"] #toast.on { transform: translate(-50%, 0) scale(1); }
body.mobile[data-screen="deckbuilder"] #toast { right: 566px; max-width: 560px; } /* left of the phone deck list panel */
/* switches */
body.fx-low .hq.ready::after, body.fx-low .hq.claiming, body.fx-low .hubleader .lc::after, body.fx-low .bigplay::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .hq.ready::after, .hq.claiming, .hubleader .lc::after, .bigplay::after { animation: none !important; } }
body.theme-midnight .hq { background: rgba(4, 2, 8, .94); }

/* face-centred crops come inline from focusPos(); medallions stay centred */
.avring.medal .av { background-position: center !important; }
/* account header art: a portrait-width window on the right so faces sit whole in the banner, not cropped to the eyes */
.acct-hero::before { left: 42%; -webkit-mask: linear-gradient(90deg, transparent, #000 45%); mask: linear-gradient(90deg, transparent, #000 45%); opacity: .7; }