/* ============ Tokens ============ */
:root {
  --bg: #f4f6fb;
  --surface: #ffffff;
  --raised: #eef2fa;
  --line: #dfe5f0;
  --line2: #c9d3e6;
  --card-top: #ffffff;
  --card-bot: #f8faff;
  --text: #172033;
  --muted: #5b6985;
  --accent: #2563eb;
  --accent2: #4f46e5;
  --accent-ink: #ffffff;
  --cyan: #0b6fe0;
  --glow: #4f7dff;
  --win: #0e9f6e;
  --loss: #e0314f;
  --warn: #b45309;
  --sky: var(--cyan);
  --font-display: "Outfit", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
:root[data-theme="void"] { --bg:#07060d; --surface:#0f0c1a; --raised:#1a1430; --line:#2c2349; --line2:#3a2d66; --card-top:#130f22; --card-bot:#0c0916; --text:#ede9ff; --muted:#9188b8; --accent:#ff5a3c; --accent2:#ff2d75; --accent-ink:#ffffff; --cyan:#2ee6ff; --glow:#7846ff; --win:#3dffa8; --loss:#ff4d6d; --warn:#ffc83d; }
:root[data-theme="black"] { --bg:#000000; --surface:#0b0b0b; --raised:#151515; --line:#262626; --line2:#3b3b3b; --card-top:#0e0e0e; --card-bot:#050505; --text:#f4f4f4; --muted:#9b9b9b; --accent:#f2f2f2; --accent2:#a8a8a8; --accent-ink:#000000; --cyan:#ffffff; --glow:#ffffff; --win:#3dffa8; --loss:#ff5470; --warn:#ffc83d; }
:root[data-theme="black"] body { background: #000; }
:root[data-theme="black"] .nav { background: rgba(0, 0, 0, 0.92); border-image: linear-gradient(90deg, transparent, #444, #888, #444, transparent) 1; }
:root[data-theme="black"] .btn { color: #000 !important; }
:root[data-theme="black"] .btn.ghost { color: var(--text) !important; border-color: var(--line2); }
:root[data-theme="black"] .cluster::before { background: radial-gradient(closest-side, rgba(255,255,255,.10), transparent); }
:root[data-theme="black"] .cta { background: linear-gradient(120deg, #1a1a1a, #0b0b0b); border: 1px solid var(--line2); }
:root[data-theme="black"] .cta .btn { background: #fff; color: #000 !important; border-color: #fff; }
:root[data-theme="black"] .ico { color: #fff; background: #151515; border-color: #333; }
:root[data-theme="black"] .toast { background: #111; color: #fff; border: 1px solid #333; }

/* ============ Themes: pick one from the Theme button in the menu ============ */
:root[data-theme="inferno"] { --bg:#0d0605; --surface:#190c09; --raised:#2a1411; --line:#44201a; --line2:#6a2f22; --card-top:#1c0e0a; --card-bot:#0e0705; --text:#fff0e8; --muted:#b58f84; --accent:#ff8a1f; --accent2:#ff3b1f; --accent-ink:#1a0600; --cyan:#ffd23f; --glow:#ff4a1f; }
:root[data-theme="abyss"] { --bg:#040b14; --surface:#091525; --raised:#10243b; --line:#1b3858; --line2:#2a5686; --card-top:#0b1a2e; --card-bot:#050d18; --text:#e6f4ff; --muted:#86a9c6; --accent:#1fb6ff; --accent2:#2a6bff; --accent-ink:#021423; --cyan:#3dffd8; --glow:#1f6bff; }
:root[data-theme="toxic"] { --bg:#050a06; --surface:#0b140d; --raised:#122218; --line:#20402a; --line2:#2f6a40; --card-top:#0d1c11; --card-bot:#060d08; --text:#eaffee; --muted:#8fb99a; --accent:#7dff3a; --accent2:#1fd18a; --accent-ink:#03200c; --cyan:#d6ff3a; --glow:#2fe06a; }
:root[data-theme="sakura"] { --bg:#0d0610; --surface:#190c1f; --raised:#2a1233; --line:#47235a; --line2:#6b3590; --card-top:#1d0e24; --card-bot:#0e0612; --text:#ffeefa; --muted:#bb93b5; --accent:#ff4fb8; --accent2:#a24bff; --accent-ink:#ffffff; --cyan:#5ef0ff; --glow:#c24bff; }
:root[data-theme="gold"] { --bg:#0a0804; --surface:#15110a; --raised:#241c0e; --line:#3f3218; --line2:#6a5424; --card-top:#19130a; --card-bot:#0c0905; --text:#fff7e0; --muted:#b5a47c; --accent:#ffc83d; --accent2:#ff9f1c; --accent-ink:#2a1d00; --cyan:#fff1a8; --glow:#ffb81f; }

/* Rainbow: the accent colors slowly cycle through every hue. */
@property --hue { syntax: "<number>"; inherits: true; initial-value: 300; }
:root[data-theme="rainbow"] { --hue: 300; --bg:#07060d; --surface:#0f0c1a; --raised:#1b1530; --line:#30264f; --line2:#473580; --card-top:#14101f; --card-bot:#0b0813; --text:#f4f0ff; --muted:#9d93c4; --accent: hsl(var(--hue) 100% 62%); --accent2: hsl(calc(var(--hue) + 70) 100% 60%); --accent-ink:#10061f; --cyan: hsl(calc(var(--hue) + 180) 100% 62%); --glow: hsl(calc(var(--hue) + 250) 100% 62%); animation: hue-cycle 30s steps(150) infinite; }
@keyframes hue-cycle { to { --hue: 660; } }
:root[data-theme="rainbow"] .nav { border-image: linear-gradient(90deg, #ff3b6b, #ffb000, #3dff8a, #2ee6ff, #7b5cff, #ff3bd0) 1; }
:root[data-theme="rainbow"] .btn { background: linear-gradient(90deg, #ff3b6b, #ff9f1c, #ffe14a, #3dff8a, #2ee6ff, #8b6cff); background-size: 200% 100%; color: #10061f !important; box-shadow: 0 0 0 1px rgba(255,255,255,.2) inset, 0 6px 22px color-mix(in srgb, var(--accent) 40%, transparent); }
:root[data-theme="rainbow"] .btn:hover { background-position: 100% 0; }
:root[data-theme="rainbow"] .btn.ghost { background: transparent; color: var(--text) !important; }
:root[data-theme="rainbow"] .hero h1 { background: linear-gradient(90deg, #ff6b8a, #ffd23f, #6dffa8, #5ce6ff, #a78bff); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }

/* Aurora: northern lights drifting behind the page. */
:root[data-theme="aurora"] { --bg:#040a12; --surface:#09141f; --raised:#10222f; --line:#1b3a46; --line2:#2a6070; --card-top:#0a1b25; --card-bot:#050d14; --text:#e8fff6; --muted:#8cb8b0; --accent:#3dffb0; --accent2:#7b5cff; --accent-ink:#021a12; --cyan:#4de1ff; --glow:#2fe0a8; }
:root[data-theme="aurora"] body::before { content: ""; position: fixed; inset: -25%; z-index: -1; pointer-events: none; background: radial-gradient(40% 30% at 25% 30%, rgba(61,255,176,.35), transparent 70%), radial-gradient(35% 28% at 70% 22%, rgba(123,92,255,.35), transparent 70%), radial-gradient(40% 26% at 55% 60%, rgba(77,225,255,.22), transparent 70%); filter: blur(50px); animation: aurora 24s ease-in-out infinite alternate; }
@keyframes aurora { 0% { transform: translate3d(-6%, -3%, 0) rotate(-3deg) scale(1); } 50% { transform: translate3d(5%, 4%, 0) rotate(2deg) scale(1.12); } 100% { transform: translate3d(8%, -2%, 0) rotate(5deg) scale(1.05); } }


* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.12; margin: 0; letter-spacing: -0.01em; }
a { color: var(--accent); }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ============ Nav ============ */
.nav { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.nav-inner { display: flex; justify-content: space-between; align-items: center; min-height: 60px; gap: 14px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-family: var(--font-display); font-weight: 800; font-size: 19px; text-decoration: none; white-space: nowrap; }
.logo .mark { width: 30px; height: 30px; color: var(--accent); flex: none; }
.nav nav { display: flex; align-items: center; gap: 4px; }
.nav nav a { color: var(--muted); text-decoration: none; font-weight: 600; font-size: 15px; padding: 8px 12px; border-radius: 999px; }
.nav nav a:hover { color: var(--text); }
.nav nav a.active { color: var(--text); background: var(--raised); }
.nav nav a.btn { color: var(--accent-ink); margin-left: 6px; }

/* ============ Buttons ============ */
.btn {
  display: inline-block; border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: 16px;
  background: var(--accent); color: var(--accent-ink) !important;
  padding: 12px 22px; border-radius: 12px; text-decoration: none;
}
.btn.small { padding: 8px 16px; font-size: 14px; border-radius: 10px; }
.btn:hover { background: #ffd35f; }
.btn.ghost { background: transparent; color: var(--text) !important; border: 1.5px solid var(--line); }
.btn.ghost:hover { border-color: var(--accent); background: transparent; }
.sbtn {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--text);
  background: var(--raised); border: 1px solid var(--line); border-radius: 8px; padding: 6px 11px;
}
.sbtn:hover { border-color: var(--accent); }
.sbtn.danger:hover { border-color: var(--loss); color: var(--loss); }

/* ============ Page frame ============ */
main { display: block; }
.page-head { padding: 34px 0 8px; }
.page-head h1 { font-size: clamp(30px, 5vw, 44px); font-weight: 800; }
.page-head p { margin: 8px 0 0; color: var(--muted); max-width: 62ch; }
.notice { color: var(--warn) !important; font-size: 14px; }
.section { padding: 36px 0; }
.section h2 { font-size: 26px; font-weight: 800; margin-bottom: 16px; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.section-head h2 { margin: 0; }
.section-head a { font-weight: 600; font-size: 15px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 20px; margin: 18px 0; }
.panel h2 { font-size: 22px; font-weight: 800; margin-bottom: 14px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 14px; }

/* ============ Hero (home) ============ */
.hero { padding: 54px 0 34px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 28px; align-items: center; }
.hero h1 { font-size: clamp(36px, 6.4vw, 64px); font-weight: 800; letter-spacing: -0.025em; }
.hero .lede { color: var(--muted); font-size: 18px; margin: 14px 0 24px; max-width: 46ch; }
.hero-search { max-width: 520px; }
.hero-search .picker input { margin: 0; padding: 16px 18px; font-size: 18px; border-radius: 14px; border: 2px solid var(--line); background: var(--surface); }
.hero-search .picker input:focus { border-color: var(--accent); outline: none; }
.hero-note { margin: 12px 0 0; color: var(--muted); font-size: 14px; }
.cluster { position: relative; height: 330px; }
.cluster .ficon { position: absolute; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); }
.cluster .c1 { left: 4%; top: 52px; transform: rotate(-7deg); }
.cluster .c2 { left: 31%; top: 0; transform: rotate(2deg); z-index: 2; }
.cluster .c3 { right: 0; top: 78px; transform: rotate(8deg); }

/* ============ Category tiles ============ */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.tile { display: block; text-decoration: none; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.tile:hover { border-color: var(--accent); }
.tile .stack { display: flex; margin-bottom: 14px; }
.tile .stack .ficon { margin-right: -12px; box-shadow: 0 0 0 3px var(--surface); }
.tile h3 { font-size: 20px; font-weight: 800; }
.tile p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.tile .count { font-family: var(--font-display); font-weight: 800; color: var(--accent); }

/* ============ Fruit pictures ============ */
.ficon {
  display: inline-grid; place-items: center; flex: none; overflow: hidden;
  border-radius: 16px; border: 1.5px solid color-mix(in srgb, var(--rc, var(--line)) 65%, transparent);
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--rc, #234a63) 30%, #0e2433), #0b1d2a 78%);
}
.ficon img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 6%; }
.ficon.fb { color: #fff; font-family: var(--font-display); font-weight: 800; }

/* ============ Forms ============ */
label { display: block; font-size: 14px; color: var(--muted); font-weight: 600; }
input, select {
  font: inherit; width: 100%; margin-top: 4px; padding: 10px 12px;
  background: var(--bg); border: 1.5px solid var(--line); border-radius: 10px; color: var(--text);
}
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-top: 16px; }
.error { color: var(--loss); font-size: 14px; min-height: 22px; margin: 8px 0 0; }
.check { display: flex; align-items: center; gap: 8px; margin: 0; }
.check input { width: auto; margin: 0; }

/* ============ Picker ============ */
.picker { position: relative; }
.picker-list {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 30; margin-top: 6px;
  max-height: 300px; overflow: auto; background: var(--raised); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}
.pick { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; background: transparent; border: 0; color: var(--text); padding: 7px 12px; cursor: pointer; }
.pick:hover, .pick:focus-visible { background: var(--line); }
.pick-name { flex: 1; font-weight: 600; }
.pick-val { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.picker-empty { padding: 14px; color: var(--muted); }

/* ============ Trade desk (calculator) ============ */
.desk { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 22px; margin: 22px 0; }
.desk-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.desk-head h2 { font-size: 24px; font-weight: 800; }
.desk-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 310px) minmax(0, 1fr); gap: 16px; align-items: start; }
.desk-grid .give { grid-area: give; }
.desk-grid .result { grid-area: result; }
.desk-grid .get { grid-area: get; }
.desk-grid { grid-template-areas: "give result get"; }
.side { background: var(--bg); border: 1px solid var(--line); border-radius: 16px; padding: 14px; min-width: 0; }
.side h3 { font-size: 17px; font-weight: 800; margin-bottom: 10px; }
.give h3 { color: var(--loss); }
.get h3 { color: var(--win); }
.chips { display: grid; gap: 8px; margin-top: 10px; }
.chips-empty { color: var(--muted); font-size: 14px; padding: 14px 4px; text-align: center; border: 1.5px dashed var(--line); border-radius: 12px; }
.chip { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 6px 8px; }
.chip-info { flex: 1; min-width: 0; }
.chip-name { font-weight: 700; overflow-wrap: anywhere; line-height: 1.2; }
.chip-val { color: var(--muted); font-size: 12px; }
.qty { display: flex; align-items: center; gap: 4px; }
.qty button { width: 28px; height: 28px; font: inherit; cursor: pointer; color: var(--text); background: var(--raised); border: 1px solid var(--line); border-radius: 8px; padding: 0; }
.qty button:hover { border-color: var(--accent); }
.qty button.rm:hover { border-color: var(--loss); color: var(--loss); }
.qty span { min-width: 22px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.side-total { margin-top: 12px; text-align: right; color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }

.result { text-align: center; padding: 6px 4px; }
.result-nums { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
.result-nums div { flex: 1; }
.result-nums span { display: block; font-size: 13px; color: var(--muted); font-weight: 600; }
.result-nums strong { font-family: var(--font-display); font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* Tide meter */
.tide { position: relative; height: 14px; border-radius: 999px; background: linear-gradient(90deg, var(--loss) 0 40%, var(--warn) 40% 60%, var(--win) 60% 100%); margin: 0 6px; }
.tide .needle { position: absolute; top: -8px; left: 50%; width: 6px; height: 30px; margin-left: -3px; border-radius: 3px; background: var(--text); box-shadow: 0 0 0 3px var(--surface); transition: left 0.35s ease; }
.tide.idle .needle { opacity: 0.35; }
.tide-labels { display: grid; grid-template-columns: 1fr 1fr 1fr; margin-top: 12px; font-size: 12px; color: var(--muted); font-weight: 600; }
.tide-labels span:first-child { text-align: left; }
.tide-labels span:last-child { text-align: right; }
.tide-labels span { text-align: center; }
.verdict { margin-top: 16px; padding: 12px 14px; border-radius: 12px; text-align: center; font-weight: 700; font-size: 15px; }
.verdict.neutral { background: var(--bg); color: var(--muted); border: 1.5px dashed var(--line); font-weight: 500; }
.verdict.win { background: color-mix(in srgb, var(--win) 16%, var(--bg)); color: var(--win); }
.verdict.fair { background: color-mix(in srgb, var(--warn) 15%, var(--bg)); color: var(--warn); }
.verdict.loss { background: color-mix(in srgb, var(--loss) 16%, var(--bg)); color: var(--loss); }

/* ============ Values toolbar, tabs ============ */
.tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; border-bottom: 1px solid var(--line); margin-bottom: 14px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; font: inherit; font-weight: 700; font-size: 15px; color: var(--muted); background: transparent; border: 0; border-bottom: 3px solid transparent; padding: 10px 14px; cursor: pointer; margin-bottom: -1px; }
.tab .n { margin-left: 6px; font-size: 12px; font-weight: 700; color: var(--muted); background: var(--raised); border-radius: 999px; padding: 1px 8px; }
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.tab[aria-selected="true"] .n { background: var(--accent); color: var(--accent-ink); }
.controls { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-bottom: 12px; }
.controls input, .controls select { margin-top: 0; }
.addto { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; color: var(--muted); font-size: 14px; font-weight: 600; }
.seg { display: inline-flex; background: var(--bg); border: 1.5px solid var(--line); border-radius: 12px; padding: 3px; }
.seg button { font: inherit; font-weight: 700; font-size: 14px; color: var(--muted); background: transparent; border: 0; border-radius: 9px; padding: 7px 14px; cursor: pointer; }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: var(--raised); color: var(--text); }
.seg button[data-side="mine"][aria-pressed="true"] { box-shadow: inset 0 -3px 0 var(--loss); }
.seg button[data-side="theirs"][aria-pressed="true"] { box-shadow: inset 0 -3px 0 var(--win); }

/* ============ Item cards ============ */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 12px; }
.fruit-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.fruit-card:hover { border-color: color-mix(in srgb, var(--rc, var(--accent)) 80%, var(--line)); }
.fruit-card.added { border-color: var(--accent); }
.card-main { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; padding: 16px 10px 14px; background: transparent; border: 0; color: var(--text); font: inherit; text-align: center; cursor: pointer; }
.card-main .name { font-weight: 700; line-height: 1.2; margin-top: 4px; overflow-wrap: anywhere; }
.card-main .val { font-family: var(--font-display); font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.05; }
.tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.status, .typetag { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--raised); color: var(--muted); }
.typetag { background: transparent; border: 1px solid var(--line); }
.status.s-Overpaid { background: color-mix(in srgb, var(--warn) 18%, var(--surface)); color: var(--warn); }
.status.s-Underpaid { background: color-mix(in srgb, var(--sky) 18%, var(--surface)); color: var(--sky); }
.status.s-Unstable { background: color-mix(in srgb, var(--loss) 20%, var(--surface)); color: var(--loss); }
.status.s-Fluctuating { background: color-mix(in srgb, #c79bff 20%, var(--surface)); color: #c79bff; }
.status.s-Stable { background: color-mix(in srgb, var(--win) 14%, var(--surface)); color: var(--win); }
.meta { color: var(--muted); font-size: 12.5px; }
.demand-row { display: flex; align-items: center; justify-content: center; gap: 8px; }
.ticks { display: inline-flex; gap: 2px; }
.ticks i { width: 5px; height: 11px; border-radius: 2px; background: var(--line); }
.ticks i.on { background: var(--rc, var(--accent)); }
.info { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); color: var(--muted); font: italic 700 15px Georgia, serif; cursor: pointer; padding: 0; line-height: 1; }
.info:hover { color: var(--accent); border-color: var(--accent); }
.empty { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 28px; }
.top-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.top-card { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 10px; text-align: center; }
.top-card:hover { border-color: var(--accent); }
.top-card .name { font-weight: 700; }
.top-card .val { font-family: var(--font-display); font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ============ Dock (sticky trade summary) ============ */
.dock { position: sticky; bottom: 12px; z-index: 35; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; background: var(--raised); border: 1px solid var(--line); border-radius: 16px; padding: 10px 14px; margin-top: 18px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55); }
.dock[hidden] { display: none; }
.dock-num span { display: block; font-size: 12px; color: var(--muted); font-weight: 600; }
.dock-num strong { font-family: var(--font-display); font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.dock-verdict { flex: 1; text-align: center; font-weight: 700; font-size: 15px; min-width: 160px; }
.dock-verdict.win { color: var(--win); }
.dock-verdict.fair { color: var(--warn); }
.dock-verdict.loss { color: var(--loss); }

/* ============ Item dialog ============ */
dialog.item { width: min(440px, calc(100vw - 28px)); background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 22px; padding: 24px; }
dialog.item::backdrop { background: rgba(3, 10, 15, 0.72); }
.dlg-close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); color: var(--text); font-size: 20px; line-height: 1; cursor: pointer; padding: 0; }
.dlg-top { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; }
.dlg-top h2 { font-size: 26px; font-weight: 800; padding-right: 34px; }
.dlg-val { font-family: var(--font-display); font-size: 40px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; margin-top: 6px; }
.dlg-rows { display: grid; gap: 0; margin: 4px 0 18px; }
.dlg-rows div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.dlg-rows div span:first-child { color: var(--muted); }
.dlg-rows div span:last-child { font-weight: 700; }
.dlg-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dlg-acts .btn { text-align: center; padding: 12px 10px; font-size: 15px; }

/* ============ Trade board ============ */
.board-tools { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-bottom: 10px; }
.board-tools input, .board-tools select { margin-top: 0; }
.board-opts { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; color: var(--muted); font-size: 14px; }
.trade2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.posts { display: grid; gap: 12px; }
.post { background: var(--bg); }
.post.done { opacity: 0.6; }
.post-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.post-user { font-family: var(--font-display); font-weight: 800; font-size: 18px; }
.post-meta { color: var(--muted); font-size: 13px; }
.post-body { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.post-col { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.post-col h4 { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--muted); }
.post-col .tot { margin-top: 8px; font-size: 13px; color: var(--muted); }
.mini-row { display: flex; flex-wrap: wrap; gap: 6px; }
.mini-chip { display: flex; align-items: center; gap: 6px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 3px 9px 3px 3px; font-size: 14px; font-weight: 600; }
.deal { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.deal.win { background: color-mix(in srgb, var(--win) 16%, var(--bg)); color: var(--win); }
.deal.fair { background: color-mix(in srgb, var(--warn) 15%, var(--bg)); color: var(--warn); }
.deal.loss { background: color-mix(in srgb, var(--loss) 16%, var(--bg)); color: var(--loss); }
.post-note { margin: 10px 0 0; }
.post-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.tips { margin: 0; padding-left: 20px; color: var(--muted); }
.tips li { margin: 5px 0; }
.rules { padding-left: 34px; margin: 0; }
.rules li { margin: 7px 0; }
details.card { margin-bottom: 10px; }
details summary { cursor: pointer; font-weight: 700; }
details p { color: var(--muted); margin: 8px 0 0; }
.latest { display: grid; gap: 10px; }
.latest .post { padding: 12px 14px; }

.footer { border-top: 1px solid var(--line); padding: 26px 0 40px; color: var(--muted); font-size: 14px; margin-top: 36px; }

/* ============ Responsive ============ */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .cluster { display: none; }
  .desk-grid { grid-template-columns: 1fr; grid-template-areas: "result" "give" "get"; }
}
@media (max-width: 720px) {
  .trade2, .post-body { grid-template-columns: 1fr; }
  .controls, .board-tools { grid-template-columns: 1fr; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .desk { padding: 16px; border-radius: 20px; }
}
@media (max-width: 560px) {
  .nav-inner { flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
  .nav nav { flex-wrap: wrap; gap: 2px; }
  .nav nav a { padding: 6px 10px; font-size: 14px; }
  .nav nav a.btn { padding: 6px 12px; }
  .logo { font-size: 17px; }
  .hero { padding-top: 34px; }
}


/* ============ Dark gaming skin ============ */
body {
  background:
    radial-gradient(900px 480px at 78% -80px, color-mix(in srgb, var(--accent2) 16%, transparent), transparent 70%),
    radial-gradient(800px 520px at 8% 120px, color-mix(in srgb, var(--cyan) 9%, transparent), transparent 70%),
    linear-gradient(color-mix(in srgb, var(--line) 4.5%, transparent) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, color-mix(in srgb, var(--line) 4.5%, transparent) 1px, transparent 1px) 0 0 / 44px 44px,
    var(--bg);
  background-attachment: fixed;
}
h1, h2, h3, h4 { letter-spacing: 0; font-weight: 700; }
.nav { border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, transparent, var(--accent2), var(--cyan), transparent) 1; }
.logo .mark { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 70%, transparent)); }
.nav nav a { border-radius: 4px; }
.nav nav a.active { background: var(--raised); box-shadow: inset 0 -2px 0 var(--cyan); }

.btn { background: linear-gradient(135deg, var(--accent), var(--accent2)); border-radius: 6px; letter-spacing: 0.02em; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset, 0 6px 22px color-mix(in srgb, var(--accent2) 35%, transparent); }
.btn:hover { filter: brightness(1.12); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset, 0 8px 30px color-mix(in srgb, var(--accent2) 55%, transparent); }
.btn.small, .sbtn, .seg, .seg button, input, select { border-radius: 6px; }
.btn.ghost { background: transparent; box-shadow: none; }
.btn.ghost:hover { background: color-mix(in srgb, var(--cyan) 8%, transparent); border-color: var(--cyan); box-shadow: none; }
.sbtn:hover, .qty button:hover { border-color: var(--cyan); }
:focus-visible, input:focus, select:focus { outline-color: var(--cyan); }
a { color: var(--cyan); }
.notice { text-shadow: 0 0 12px rgba(255, 200, 61, 0.35); }

.hero h1 { font-weight: 700; text-shadow: 0 0 40px color-mix(in srgb, var(--accent2) 35%, transparent); }
.hero-search .picker input { border-radius: 8px; border: 1.5px solid var(--line); background: color-mix(in srgb, var(--surface) 90%, transparent); }
.hero-search .picker input:focus { border-color: var(--cyan); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cyan) 14%, transparent), 0 0 28px color-mix(in srgb, var(--cyan) 25%, transparent); }
.cluster::before { content: ""; position: absolute; inset: 6% 4%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent2) 35%, transparent), color-mix(in srgb, var(--glow) 18%, transparent) 60%, transparent); filter: blur(14px); }
.cluster .ficon { box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6), 0 0 36px color-mix(in srgb, var(--rc, var(--glow)) 45%, transparent); }

.ficon { border-radius: 8px; background: radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--rc, var(--line2)) 34%, var(--card-top)), var(--bg) 80%); }
.card, .tile, .panel, .top-card, .fruit-card, .side, .post-col, dialog.item, .desk, .dock, .chip, .verdict, .picker-list { border-radius: 8px; }
.card, .tile, .panel, .top-card, .side, .desk { background: linear-gradient(180deg, color-mix(in srgb, var(--raised) 55%, transparent), color-mix(in srgb, var(--surface) 92%, transparent)); }
.tile:hover, .top-card:hover { border-color: var(--cyan); box-shadow: 0 0 26px color-mix(in srgb, var(--cyan) 16%, transparent); }
.tile .count { color: var(--cyan); }

.desk { border-color: var(--line2); box-shadow: 0 0 0 1px color-mix(in srgb, var(--cyan) 6%, transparent), 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 60px color-mix(in srgb, var(--glow) 10%, transparent); }
.give h3 { text-shadow: 0 0 14px rgba(255, 77, 109, 0.5); }
.get h3 { text-shadow: 0 0 14px rgba(61, 255, 168, 0.45); }
.tide { height: 10px; box-shadow: 0 0 18px rgba(255, 200, 61, 0.25); }
.tide .needle { background: #fff; box-shadow: 0 0 0 3px var(--surface), 0 0 14px rgba(255, 255, 255, 0.85); }
.result-nums strong { text-shadow: 0 0 18px color-mix(in srgb, var(--cyan) 35%, transparent); }
.verdict.win { box-shadow: 0 0 24px rgba(61, 255, 168, 0.18); border: 1px solid rgba(61, 255, 168, 0.45); }
.verdict.fair { box-shadow: 0 0 24px rgba(255, 200, 61, 0.15); border: 1px solid rgba(255, 200, 61, 0.4); }
.verdict.loss { box-shadow: 0 0 24px rgba(255, 77, 109, 0.2); border: 1px solid rgba(255, 77, 109, 0.5); }

.tab { border-radius: 0; }
.tab[aria-selected="true"] { border-bottom-color: var(--cyan); text-shadow: 0 0 14px color-mix(in srgb, var(--cyan) 50%, transparent); }
.tab[aria-selected="true"] .n { background: linear-gradient(135deg, var(--accent), var(--accent2)); }
.tab .n { border-radius: 4px; }
.seg button { border-radius: 4px; }

.fruit-card { background: linear-gradient(180deg, color-mix(in srgb, var(--rc, var(--line2)) 14%, var(--card-top)), var(--card-bot) 70%); border-color: color-mix(in srgb, var(--rc, var(--line)) 38%, var(--line)); transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; }
.fruit-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--rc, var(--line)); box-shadow: 0 0 14px var(--rc, transparent); }
.fruit-card:hover { transform: translateY(-2px); border-color: var(--rc, var(--cyan)); box-shadow: 0 8px 30px color-mix(in srgb, var(--rc, var(--glow)) 38%, transparent); }
.fruit-card.added { border-color: var(--cyan); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cyan) 50%, transparent), 0 0 30px color-mix(in srgb, var(--cyan) 30%, transparent); }
.card-main .val { text-shadow: 0 0 16px color-mix(in srgb, var(--rc, #fff) 45%, transparent); }
.status, .typetag { border-radius: 4px; }
.ticks i { border-radius: 1px; }
.ticks i.on { box-shadow: 0 0 6px var(--rc, var(--accent)); }
.info { border-radius: 6px; font-style: normal; font-family: var(--font-display); }
.info:hover { color: var(--cyan); border-color: var(--cyan); }

.dock { border-color: var(--line2); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.7), 0 0 30px color-mix(in srgb, var(--glow) 18%, transparent); background: color-mix(in srgb, var(--raised) 96%, transparent); }
dialog.item { border-color: var(--line2); box-shadow: 0 0 60px color-mix(in srgb, var(--glow) 30%, transparent); background: var(--surface); }
dialog.item::backdrop { background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: blur(3px); }
.dlg-close { border-radius: 6px; }
.dlg-val { text-shadow: 0 0 22px color-mix(in srgb, var(--cyan) 40%, transparent); }
.footer { border-top: 1px solid var(--line); }
.pick:hover, .pick:focus-visible { background: var(--line); }

/* ============ Servers ============ */
.head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.srv-controls { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
.rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; margin: 6px 0 20px; }
.room-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--cc) 35%, var(--line)); background: linear-gradient(180deg, color-mix(in srgb, var(--cc) 10%, var(--card-top)), var(--card-bot) 75%); overflow: hidden; }
.room-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--cc); box-shadow: 0 0 14px var(--cc); }
.room-card:hover { border-color: var(--cc); box-shadow: 0 8px 30px color-mix(in srgb, var(--cc) 30%, transparent); }
.room-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cat-pill { font-size: 13px; font-weight: 700; padding: 2px 10px; border-radius: 4px; color: var(--cc); background: color-mix(in srgb, var(--cc) 16%, var(--card-bot)); border: 1px solid color-mix(in srgb, var(--cc) 50%, transparent); }
.room-sea { font-size: 13px; color: var(--muted); }
.room-spots { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--win); font-variant-numeric: tabular-nums; }
.room-spots.full { color: var(--loss); }
.room-name { font-size: 20px; overflow-wrap: anywhere; }
.room-by { font-size: 14px; }
.room-note { margin: 0; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.room-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: auto; padding-top: 6px; }
.empty-rooms { grid-column: 1 / -1; text-align: center; padding: 34px 16px; }
.empty-rooms p { margin: 8px 0 16px; }
.find-card { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.find-card p { margin: 6px 0 0; max-width: 56ch; }
.room-dlg { width: min(480px, calc(100vw - 28px)); max-height: calc(100vh - 28px); overflow: auto; }
.room-dlg h2 { font-size: 24px; padding-right: 34px; margin-bottom: 14px; }
.fields.one { grid-template-columns: 1fr; margin-top: 0; }
.room-view { width: min(620px, calc(100vw - 28px)); }
.rv-title { margin: 10px 0 4px !important; }
.rv-note { margin: 0 0 6px; }
.rv-members { margin: 6px 0 12px; font-size: 14px; color: var(--muted); }
.chat-log { height: min(340px, 42vh); overflow-y: auto; margin-top: 14px; padding: 10px; display: flex; flex-direction: column; gap: 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; }
.msg { max-width: 86%; padding: 7px 11px; border-radius: 6px; background: var(--raised); align-self: flex-start; }
.msg.mine { align-self: flex-end; background: color-mix(in srgb, var(--cyan) 14%, var(--raised)); border: 1px solid color-mix(in srgb, var(--cyan) 30%, transparent); }
.msg-meta { font-size: 12px; color: var(--muted); }
.msg-meta strong { color: var(--text); }
.msg-text { overflow-wrap: anywhere; }
.msg.sys { align-self: center; max-width: 100%; background: transparent; color: var(--muted); font-size: 13px; padding: 0; }
.chat-form { display: flex; gap: 8px; margin-top: 10px; }
.chat-form input { margin: 0; }
.room-view .room-top { padding-right: 40px; }

/* ============ Admin ============ */
.login-box { max-width: 420px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 30px; }
.admin-table { width: 100%; border-collapse: collapse; min-width: 700px; }
.admin-table th { text-align: left; font-size: 13px; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface); position: sticky; top: 0; }
.admin-table td { padding: 8px 12px; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); vertical-align: middle; }
.admin-table input, .admin-table select { margin: 0; width: 120px; padding: 7px 9px; }
.admin-table input[type=number] { width: 76px; }
.admin-table input[aria-invalid="true"] { border-color: var(--loss); }
.a-item { display: flex; align-items: center; gap: 10px; font-weight: 600; min-width: 200px; }
.a-acts { display: flex; gap: 6px; white-space: nowrap; }
.admin-table tr.custom td:first-child { box-shadow: inset 3px 0 var(--cyan); }
.admin-table tr.dirty { background: rgba(255, 200, 61, 0.08); }

/* ============ Admin ============ */
.login { max-width: 420px; }
.admin-bar { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto auto; gap: 10px; margin-bottom: 10px; align-items: center; }
.admin-bar input, .admin-bar select { margin-top: 0; }
.admin-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
.admin-table { width: 100%; border-collapse: collapse; min-width: 760px; }
.admin-table th { text-align: left; font-size: 13px; color: var(--muted); padding: 10px 8px; background: var(--surface); position: sticky; top: 0; }
.admin-table td { padding: 6px 8px; border-top: 1px solid var(--line); vertical-align: middle; }
.admin-table input, .admin-table select { margin: 0; padding: 7px 8px; width: 100%; }
.admin-table input[type="checkbox"] { width: 20px; height: 20px; }
.admin-table input[type="number"] { width: 70px; }
.admin-table td:nth-child(3) input { width: 110px; }
.admin-table tr.dirty td { background: color-mix(in srgb, var(--cyan) 7%, transparent); }
.admin-table input.bad { border-color: var(--loss); }
.a-name { display: flex; align-items: center; gap: 10px; min-width: 210px; font-weight: 600; }
.a-kind { font-size: 12px; font-weight: 400; }
@media (max-width: 720px) { .admin-bar { grid-template-columns: 1fr 1fr; } .admin-bar input { grid-column: 1 / -1; } }

/* ============ Trade board (gamer) ============ */
.live { display: inline-flex; align-items: center; gap: 7px; vertical-align: middle; margin-left: 10px; padding: 3px 10px; border-radius: 4px; font: 700 13px var(--font-body); color: var(--win); border: 1px solid rgba(61, 255, 168, 0.45); background: rgba(61, 255, 168, 0.1); }
.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--win); box-shadow: 0 0 10px var(--win); animation: pulse 1.6s ease-in-out infinite; }
.live.off { color: var(--muted); border-color: var(--line); background: transparent; }
.live.off i { background: var(--muted); box-shadow: none; animation: none; }
@keyframes pulse { 50% { opacity: 0.35; } }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 6px 0 18px; }
.stat { background: linear-gradient(180deg, color-mix(in srgb, var(--raised) 60%, transparent), color-mix(in srgb, var(--surface) 95%, transparent)); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; position: relative; overflow: hidden; }
.stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(var(--accent), var(--accent2)); }
.stat strong { font: 700 30px var(--font-display); line-height: 1.1; font-variant-numeric: tabular-nums; text-shadow: 0 0 18px color-mix(in srgb, var(--cyan) 35%, transparent); }
.stat span { color: var(--muted); font-size: 13px; font-weight: 600; }
.wanted { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.wanted-chip { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 14px; font-weight: 600; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 3px 9px 3px 3px; cursor: pointer; }
.wanted-chip:hover { border-color: var(--cyan); box-shadow: 0 0 16px color-mix(in srgb, var(--cyan) 20%, transparent); }
.wanted-chip b { font-size: 12px; color: var(--accent-ink); background: linear-gradient(135deg, var(--accent), var(--accent2)); border-radius: 4px; padding: 0 6px; }

.form-meter { max-width: 520px; margin: 18px auto 4px; }
.form-meter .tide { margin: 0 6px; }

.quick { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.chipbtn { font: inherit; font-size: 14px; font-weight: 700; color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 6px 13px; cursor: pointer; }
.chipbtn:hover { color: var(--text); border-color: var(--cyan); }
.chipbtn[aria-pressed="true"] { color: var(--text); border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 12%, transparent); box-shadow: 0 0 16px color-mix(in srgb, var(--cyan) 20%, transparent); }

.trade-card { --tc: var(--line); position: relative; border: 1px solid color-mix(in srgb, var(--tc) 40%, var(--line)); border-radius: 8px; padding: 14px 16px 14px 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 8%, var(--card-top)), var(--card-bot) 70%); overflow: hidden; }
.trade-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--tc); box-shadow: 0 0 14px var(--tc); }
.trade-card.is-win { --tc: var(--win); }
.trade-card.is-fair { --tc: var(--warn); }
.trade-card.is-loss { --tc: var(--loss); }
.trade-card:hover { border-color: var(--tc); box-shadow: 0 8px 30px color-mix(in srgb, var(--tc) 22%, transparent); }
.trade-card.done { opacity: 0.55; filter: grayscale(0.5); }
.tc-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.tc-avatar { width: 38px; height: 38px; border-radius: 6px; display: grid; place-items: center; font: 700 18px var(--font-display); color: #fff; background: linear-gradient(135deg, var(--glow), var(--accent2)); box-shadow: 0 0 14px color-mix(in srgb, var(--glow) 45%, transparent); }
.tc-user { font: 700 18px var(--font-display); }
.tc-meta { font-size: 13px; color: var(--muted); }
.tc-badges { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.badge { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 4px; border: 1px solid var(--line); color: var(--muted); }
.badge.new { color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 50%, transparent); background: color-mix(in srgb, var(--cyan) 10%, transparent); }
.badge.hot { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow: 0 0 14px color-mix(in srgb, var(--accent2) 50%, transparent); }
.badge.soon { color: var(--warn); border-color: rgba(255, 200, 61, 0.5); }
.badge.mine { color: #c79bff; border-color: rgba(199, 155, 255, 0.5); }
.tc-vs { display: grid; grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr); gap: 10px; align-items: stretch; }
.tc-side { background: color-mix(in srgb, var(--bg) 70%, transparent); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; min-width: 0; }
.tc-side h4 { font: 700 13px var(--font-body); color: var(--muted); margin-bottom: 8px; }
.tc-side.give h4 { color: var(--loss); }
.tc-side.want h4 { color: var(--win); }
.tc-items { display: flex; flex-wrap: wrap; gap: 10px; }
.tc-item { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 72px; }
.tc-pic { position: relative; }
.tc-pic .ficon { box-shadow: 0 0 16px color-mix(in srgb, var(--rc, var(--glow)) 40%, transparent); }
.tc-qty { position: absolute; right: -6px; bottom: -6px; font: 700 12px var(--font-display); color: #fff; background: var(--raised); border: 1px solid var(--cyan); border-radius: 4px; padding: 0 5px; }
.tc-name { font-size: 12px; font-weight: 600; text-align: center; line-height: 1.15; overflow-wrap: anywhere; }
.tc-total { margin-top: 8px; font: 700 18px var(--font-display); font-variant-numeric: tabular-nums; }
.tc-mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.vs-badge { font: 700 20px var(--font-display); color: #fff; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 50% 30%, var(--line2), var(--bg)); border: 1.5px solid var(--tc); box-shadow: 0 0 20px color-mix(in srgb, var(--tc) 55%, transparent); }
.tide.mini { width: 84px; height: 6px; margin: 0; }
.tide.mini .needle { top: -5px; height: 16px; width: 4px; margin-left: -2px; box-shadow: 0 0 0 2px var(--surface), 0 0 10px rgba(255, 255, 255, 0.8); }
.tc-note { margin: 10px 0 0; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }

.toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 80; padding: 12px 20px; border-radius: 8px; font-weight: 700; color: var(--text); background: var(--raised); border: 1px solid var(--win); box-shadow: 0 0 30px rgba(61, 255, 168, 0.3), 0 14px 40px rgba(0, 0, 0, 0.6); animation: toast-in 0.25s ease-out; }
.toast.out { opacity: 0; transition: opacity 0.4s; }
@keyframes toast-in { from { transform: translate(-50%, 14px); opacity: 0; } }

@media (max-width: 900px) { .stats { grid-template-columns: 1fr 1fr; } .stat.wide { grid-column: 1 / -1; } }
@media (max-width: 640px) {
  .tc-vs { grid-template-columns: 1fr; }
  .tc-mid { flex-direction: row; justify-content: center; }
  .tc-badges { margin-left: 0; }
}

.vs-badge svg { display: block; }

.logo .mark path { fill: var(--accent2); }
.logo .mark ellipse { fill: var(--bg); }
body { transition: background-color 0.25s; }

/* ============ Theme picker ============ */
.themer { position: relative; }
.themer > button { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 6px; padding: 6px 11px; cursor: pointer; }
.themer > button:hover, .themer > button[aria-expanded="true"] { color: var(--text); border-color: var(--cyan); }
.themer .dot { width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow: 0 0 10px color-mix(in srgb, var(--accent2) 70%, transparent); }
.theme-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 230px; padding: 8px; background: var(--raised); border: 1px solid var(--line2); border-radius: 8px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6), 0 0 30px color-mix(in srgb, var(--glow) 25%, transparent); }
.theme-menu[hidden] { display: none; }
.theme-opt { display: flex; align-items: center; gap: 10px; width: 100%; font: inherit; font-weight: 600; color: var(--text); background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 8px 10px; cursor: pointer; text-align: left; }
.theme-opt:hover { background: color-mix(in srgb, var(--cyan) 10%, transparent); }
.theme-opt[aria-checked="true"] { border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 12%, transparent); }
.theme-opt .sw { display: flex; flex: none; }
.theme-opt .sw i { width: 16px; height: 22px; }
.theme-opt .sw i:first-child { border-radius: 5px 0 0 5px; }
.theme-opt .sw i:last-child { border-radius: 0 5px 5px 0; }
@media (max-width: 560px) { .theme-menu { right: auto; left: 0; } }

/* ============ Gamer features ============ */
.rank-chip { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; padding: 5px 10px; border: 1px solid var(--line2); border-radius: 6px; background: color-mix(in srgb, var(--glow) 10%, transparent); }
.rank-chip b { font: 700 13px var(--font-display); color: var(--text); }
.rank-chip .bar { width: 44px; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.rank-chip .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); box-shadow: 0 0 8px var(--accent2); }
.rank-chip .rt { font-size: 13px; font-weight: 600; color: var(--muted); }
.rank-chip:hover { border-color: var(--cyan); }
@media (max-width: 900px) { .rank-chip .rt { display: none; } }

.rank-card { display: flex; gap: 16px; align-items: center; margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--line2); border-radius: 8px; background: linear-gradient(180deg, color-mix(in srgb, var(--raised) 60%, transparent), color-mix(in srgb, var(--surface) 95%, transparent)); box-shadow: 0 0 30px color-mix(in srgb, var(--glow) 14%, transparent); }
.rank-badge { flex: none; width: 64px; height: 64px; display: grid; place-items: center; font: 700 30px var(--font-display); color: #fff; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(135deg, var(--accent), var(--accent2)); text-shadow: 0 0 12px rgba(0, 0, 0, 0.5); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent2) 70%, transparent)); }
.rank-body { flex: 1; min-width: 0; }
.rank-body h3 { font-size: 22px; }
.xpbar { height: 10px; margin: 8px 0 6px; border-radius: 5px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; }
.xpbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2), var(--cyan)); box-shadow: 0 0 12px var(--accent2); transition: width 0.4s; }
.rank-meta { font-size: 14px; }
.rank-tips { margin: 6px 0 0; font-size: 13px; }
.toast.levelup { border-color: var(--accent2); box-shadow: 0 0 40px color-mix(in srgb, var(--accent2) 55%, transparent), 0 14px 40px rgba(0, 0, 0, 0.6); }

.balance { margin-top: 14px; text-align: left; padding: 10px; border: 1px dashed var(--line2); border-radius: 8px; background: color-mix(in srgb, var(--cyan) 5%, transparent); }
.balance[hidden] { display: none; }
.bal-title { font-size: 13px; font-weight: 700; color: var(--cyan); margin-bottom: 8px; }
.bal-row { display: grid; gap: 6px; }
.bal-chip { display: flex; align-items: center; gap: 6px; width: 100%; font: inherit; font-size: 14px; font-weight: 600; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px 4px 4px; cursor: pointer; text-align: left; }
.bal-chip .ficon { flex: none; }
.bal-chip > span:not(.ficon) { flex: 1; min-width: 0; overflow-wrap: anywhere; line-height: 1.15; }
.bal-chip b { font: 700 14px var(--font-display); color: var(--muted); font-variant-numeric: tabular-nums; }
.bal-chip:hover { border-color: var(--cyan); box-shadow: 0 0 14px color-mix(in srgb, var(--cyan) 25%, transparent); }
.form-meter .balance { text-align: left; }

.minebar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; padding: 10px 12px; border: 1px solid var(--line2); border-radius: 8px; font-weight: 600; background: color-mix(in srgb, var(--raised) 50%, transparent); }
.minebar span { flex: 1; min-width: 220px; }
.minebar[hidden] { display: none; }
.own-tag { position: absolute; left: 8px; top: 10px; z-index: 2; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 4px; }
.own-tag.own { color: var(--win); background: color-mix(in srgb, var(--win) 15%, var(--bg)); border: 1px solid color-mix(in srgb, var(--win) 50%, transparent); }
.own-tag.want { color: var(--warn); background: color-mix(in srgb, var(--warn) 15%, var(--bg)); border: 1px solid color-mix(in srgb, var(--warn) 50%, transparent); }
.dlg-inv { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.dlg-inv .sbtn { padding: 10px; font-size: 14px; }
.dlg-inv .sbtn[aria-pressed="true"] { border-color: var(--cyan); color: var(--cyan); background: color-mix(in srgb, var(--cyan) 10%, transparent); }

/* ============ Gems, streaks and giveaways ============ */
.sec-h { font-size: 24px; margin: 28px 0 14px; }
.wallet-name { margin-top: 16px; }
.wallet-name .inline { display: flex; gap: 8px; margin-top: 4px; max-width: 360px; }
.wallet-name input { margin: 0; }

.ga-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.ga-card { position: relative; display: flex; flex-direction: column; gap: 9px; padding: 16px 16px 16px 18px; border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--line)); border-radius: 8px; overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--warn) 7%, var(--card-top)), var(--card-bot) 70%); }
.ga-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--warn); box-shadow: 0 0 14px var(--warn); }
.ga-card.ended { filter: grayscale(0.35); opacity: 0.85; }
.ga-card.ended::before { background: var(--muted); box-shadow: none; }
.ga-card.won { border-color: var(--win); box-shadow: 0 0 30px color-mix(in srgb, var(--win) 28%, transparent); filter: none; opacity: 1; }
.ga-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.ga-head h3 { font-size: 20px; overflow-wrap: anywhere; }
.ga-prize { display: flex; flex-direction: column; }
.ga-prize strong { font: 700 22px var(--font-display); color: var(--warn); overflow-wrap: anywhere; }
.ga-desc { margin: 0; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.ga-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; align-items: center; }
.ga-price { display: inline-flex; align-items: center; gap: 6px; }
.ga-left { font: 700 15px var(--font-display); color: var(--cyan); }
.ga-mine { font-size: 14px; color: var(--muted); }
.ga-enter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.ga-qty { min-width: 26px; text-align: center; font: 700 18px var(--font-display); }
.ga-won { font-weight: 700; color: var(--win); margin-bottom: 4px; text-shadow: 0 0 14px color-mix(in srgb, var(--win) 50%, transparent); }
.badge.done { color: var(--muted); }
.leaders { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 6px; max-width: 560px; }
.leader { display: grid; grid-template-columns: 30px 1fr auto auto; gap: 12px; align-items: center; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.leader:nth-child(1) { border-color: var(--warn); box-shadow: 0 0 18px color-mix(in srgb, var(--warn) 25%, transparent); }
.leader .lr { font: 700 16px var(--font-display); color: var(--accent); }
.leader .ln { font-weight: 600; overflow-wrap: anywhere; }
.leader .ls { font-size: 13px; }
.leader .lc { display: inline-flex; align-items: center; gap: 6px; font: 700 15px var(--font-display); }
.rules-box { margin-top: 30px; }
.ga-form .gdesc { margin-top: 12px; }
@media (max-width: 560px) { .leader { grid-template-columns: 26px 1fr auto; } .leader .ls { display: none; } }
.btn:disabled, .btn[disabled] { background: var(--raised) !important; color: var(--muted) !important; text-shadow: none !important; box-shadow: none !important; filter: none; border: 1px solid var(--line); cursor: not-allowed; }

/* ---- gem icon, chip and game bar ---- */
.gem-ico { display: inline-flex; vertical-align: middle; filter: drop-shadow(0 0 6px rgba(52, 224, 195, 0.55)); }
.gem-ico.big svg { width: 34px; height: 34px; }
.flame-ico { display: inline-flex; vertical-align: middle; }
.flame-ico svg { width: 1.1em; height: 1.1em; }
.gem-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; padding: 5px 10px; border: 1px solid color-mix(in srgb, #34e0c3 45%, var(--line)); border-radius: 6px; background: color-mix(in srgb, #34e0c3 9%, transparent); }
.gem-chip b { font: 700 14px var(--font-display); color: var(--text); font-variant-numeric: tabular-nums; }
.gem-chip:hover { border-color: #34e0c3; box-shadow: 0 0 16px color-mix(in srgb, #34e0c3 30%, transparent); }
.gem-dot { position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent2); box-shadow: 0 0 10px var(--accent2); animation: pulse 1.4s ease-in-out infinite; }
.gem-dot[hidden] { display: none; }
.gem-card-btns { display: flex; gap: 10px; flex-wrap: wrap; }

.gamebar { display: flex; gap: 10px; overflow-x: auto; margin: 6px 0 18px; padding: 10px 14px; border: 1px solid var(--line2); border-radius: 14px; background: color-mix(in srgb, var(--raised) 55%, transparent); scrollbar-width: none; }
.gamebar::-webkit-scrollbar { display: none; }
.gtile { position: relative; flex: 1 0 96px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px 8px; border-radius: 10px; text-decoration: none; color: var(--muted); border: 1px solid transparent; }
.gtile .gt-ic { display: grid; place-items: center; height: 40px; color: var(--cyan); }
.gtile .gt-ic .flame-ico svg { width: 38px; height: 38px; filter: drop-shadow(0 0 8px rgba(255, 138, 31, 0.6)); }
.gtile .gt-l { font-weight: 700; font-size: 14px; color: var(--text); white-space: nowrap; }
.gtile:hover { background: color-mix(in srgb, var(--cyan) 8%, transparent); }
.gtile.on { border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 11%, transparent); box-shadow: 0 0 20px color-mix(in srgb, var(--cyan) 22%, transparent); }
.gt-new { position: absolute; top: -2px; right: 8px; font: 800 10px var(--font-display); letter-spacing: 0.04em; color: #1b1300; background: #ffc83d; padding: 1px 6px; border-radius: 8px; }

/* ---- streak page ---- */
.streak-page { display: flex; flex-direction: column; align-items: center; text-align: center; padding-bottom: 10px; }
.streak-page[hidden] { display: none; }
.st-ring { position: relative; width: 172px; height: 172px; border-radius: 50%; display: grid; place-content: center; justify-items: center; gap: 4px; border: 3px solid color-mix(in srgb, #ff8a1f 70%, var(--line)); box-shadow: 0 0 34px color-mix(in srgb, #ff8a1f 30%, transparent), inset 0 0 28px color-mix(in srgb, #ff8a1f 12%, transparent); }
.st-ring.lit { border-color: #ff8a1f; box-shadow: 0 0 50px color-mix(in srgb, #ff8a1f 55%, transparent), inset 0 0 34px color-mix(in srgb, #ff8a1f 20%, transparent); }
.st-num { font: 700 56px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.st-flame .flame-ico svg { width: 34px; height: 34px; filter: grayscale(0.7) opacity(0.7); }
.st-ring.lit .st-flame .flame-ico svg { filter: drop-shadow(0 0 10px rgba(255, 138, 31, 0.8)); animation: flicker 1.6s ease-in-out infinite; }
.st-dot { position: absolute; left: 50%; bottom: -7px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #ff8a1f; box-shadow: 0 0 12px #ff8a1f; }
@keyframes flicker { 50% { transform: scale(1.12) translateY(-2px); } }
.st-title { margin: 22px 0 16px; font-size: 40px; }
.days-wrap { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; max-width: 760px; }
.days { flex: 1; display: flex; gap: 14px; overflow-x: auto; padding: 8px 4px 6px; scroll-behavior: smooth; scrollbar-width: none; }
.days::-webkit-scrollbar { display: none; }
.day { flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bubble { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; font: 700 20px var(--font-display); border: 2px solid color-mix(in srgb, #3b6cff 70%, var(--line)); background: color-mix(in srgb, #3b6cff 20%, var(--bg)); }
.bubble.special { border-color: #d9a21b; background: color-mix(in srgb, #ffc83d 28%, var(--bg)); }
.bubble.done { background: linear-gradient(135deg, #ff8a1f, #ffc83d); border-color: #ffc83d; color: #2b1700; box-shadow: 0 0 18px color-mix(in srgb, #ff8a1f 55%, transparent); }
.bubble.now { border-color: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 70%, transparent), 0 0 24px color-mix(in srgb, var(--cyan) 60%, transparent); animation: pulse-ring 1.6s ease-in-out infinite; }
@keyframes pulse-ring { 50% { transform: scale(1.08); } }
.gpill { display: inline-flex; align-items: center; gap: 3px; padding: 1px 9px; border-radius: 12px; font: 700 13px var(--font-display); background: color-mix(in srgb, #3b6cff 45%, var(--bg)); color: #fff; }
.gpill.special { background: #b8860b; }
.day-arrow { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line2); background: var(--raised); color: var(--text); font-size: 24px; line-height: 1; cursor: pointer; }
.day-arrow:hover { border-color: var(--cyan); }
.st-hint { margin: 12px 0 0; font-size: 14px; }
.st-sub { margin: 26px 0 12px; font-size: 22px; }
.st-claim { display: flex; justify-content: center; }
.claim-btn { min-width: 260px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; font: 700 20px var(--font-display); color: #fff; border: 0; border-radius: 14px; cursor: pointer; background: linear-gradient(135deg, #2f6bff, #1d4fd8); box-shadow: 0 8px 26px rgba(47, 107, 255, 0.35); }
.claim-btn.special { background: linear-gradient(135deg, #9b3dff, #7a1fd1); box-shadow: 0 8px 26px rgba(155, 61, 255, 0.4); }
.claim-btn:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); }
.claim-btn:disabled { cursor: not-allowed; background: var(--raised); color: var(--muted); box-shadow: none; border: 1px solid var(--line); }
.st-note { margin: 10px 0 0; font-size: 14px; }
.st-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 22px 0 0; }
.st-stat { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--line2); border-radius: 10px; background: color-mix(in srgb, var(--raised) 55%, transparent); }
.st-stat b { font: 700 22px var(--font-display); font-variant-numeric: tabular-nums; }
.st-stat span:last-child { color: var(--muted); font-size: 14px; }
.milestone { width: 100%; max-width: 420px; }
.ms-title { font: 700 22px var(--font-display); margin-bottom: 12px; }
.ms-row { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 6px; }
.ms-bar { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.ms-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); box-shadow: 0 0 10px var(--accent2); transition: width 0.4s; }
.earn { margin-top: 30px; }
.earn[hidden], .board-sec[hidden] { display: none; }
.earn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.earn-list li { display: flex; gap: 14px; align-items: flex-start; }
.earn-list p { margin: 2px 0 0; font-size: 14px; }
.e-ic { flex: none; width: 40px; height: 40px; display: grid; place-items: center; font-size: 22px; border-radius: 10px; background: color-mix(in srgb, var(--cyan) 10%, var(--bg)); border: 1px solid var(--line); }
.e-ic .flame-ico svg { width: 24px; height: 24px; }
.board-sec { margin-top: 30px; }
.board-sec .st-sub { text-align: center; }
.lb-tabs { justify-content: center; }
.board-sec .leaders { margin: 14px auto 20px; }
.leader.empty { display: block; text-align: center; color: var(--muted); }
.trophy { color: #ffc83d; }

.wallet-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 6px 0 4px; padding: 14px 18px; border: 1px solid var(--line2); border-radius: 12px; background: color-mix(in srgb, var(--raised) 55%, transparent); }
.wallet-bar[hidden] { display: none; }
.wb-bal { display: flex; align-items: center; gap: 8px; }
.wb-bal strong { font: 700 32px var(--font-display); font-variant-numeric: tabular-nums; }
.wb-bal span:last-child { color: var(--muted); font-weight: 600; }
.wb-how { flex: 1; min-width: 220px; margin: 0; font-size: 14px; }

/* ---- trade board: item limit and two-sided completion ---- */
.side-count { margin: 8px 0 0; font-size: 13px; font-weight: 700; color: var(--muted); }
.side-count.full { color: var(--warn); }
.side-count.shake { animation: shake 0.4s; }
@keyframes shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.tpanel { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line2); border-radius: 10px; background: color-mix(in srgb, var(--raised) 45%, transparent); }
.tpanel.tp-active { border-color: color-mix(in srgb, var(--cyan) 55%, var(--line)); }
.tpanel.tp-done { border-color: color-mix(in srgb, var(--win) 50%, var(--line)); }
.tp-msg { margin: 0 0 8px; font-size: 14px; overflow-wrap: anywhere; }
.tp-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tp-row:empty, .tpanel .tp-msg:last-child { margin-bottom: 0; }
.tp-row:empty { display: none; }
.tp-ask { display: flex; gap: 8px; flex-wrap: wrap; }
.tp-ask[hidden] { display: none; }
.tp-ask input { margin: 0; min-width: 190px; }
.tp-steps { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.tp-step { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 16px; font-size: 13px; font-weight: 600; border: 1px solid var(--line); color: var(--muted); }
.tp-step.ok { color: var(--win); border-color: color-mix(in srgb, var(--win) 55%, transparent); background: color-mix(in srgb, var(--win) 10%, transparent); }
.tp-tick { font-weight: 800; }
.tp-msg-err { margin: 8px 0 0; }
.badge.live-trade { color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 55%, transparent); }
@media (max-width: 560px) { .gtile { flex-basis: 88px; } .st-title { font-size: 30px; } .bubble { width: 56px; height: 56px; } .claim-btn { min-width: 0; width: 100%; } .day-arrow { display: none; } }

/* ---- inspect window ---- */
.ins-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.ins-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 8px 4px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--rc) 45%, var(--line)); background: var(--bg); }
.ins-pic { position: relative; display: inline-flex; }
.ins-name { font-size: 13px; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.ins-val { font-size: 12px; font-variant-numeric: tabular-nums; }
.ins-total { margin-top: 10px; font: 700 18px var(--font-display); font-variant-numeric: tabular-nums; }
.ins-label { margin: 14px 0 6px; font-size: 13px; font-weight: 700; color: var(--muted); }
.ins-verdict { margin: 0; }
.ins-offer-h { margin: 18px 0 8px; font-size: 18px; }
.ins-local { margin: 14px 0 0; font-size: 14px; }
/* ---- Trading Details page ---- */
.crumbs { display: flex; align-items: center; gap: 8px; margin: 4px 0 18px; font-size: 15px; color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--text); }
.crumbs b { color: var(--text); }
.td-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 18px; align-items: start; }
.td-grid[hidden] { display: none; }
.td-card { padding: 16px; border: 1px solid var(--line2); border-radius: 12px; background: linear-gradient(180deg, color-mix(in srgb, var(--raised) 60%, transparent), color-mix(in srgb, var(--surface) 95%, transparent)); box-shadow: 0 0 40px color-mix(in srgb, var(--glow) 14%, transparent); }
.td-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.td-head .tc-who { flex: 1; min-width: 0; }
.td-sec { margin-bottom: 14px; }
.td-sec h3 { font-size: 20px; margin-bottom: 10px; }
.td-sec.give h3 { color: var(--accent2); }
.td-sec.want h3 { color: var(--win); }
.ins-label.center { text-align: center; }
.td-pills { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.td-pill { padding: 3px 10px; border-radius: 14px; font-size: 13px; background: var(--bg); border: 1px solid var(--line); color: var(--muted); }
.td-pill b { color: var(--text); font-variant-numeric: tabular-nums; }
.td-share { display: block; margin: 0 auto 12px; }
.td-acts { display: grid; gap: 8px; }
.td-acts .btn, .td-acts .sbtn { width: 100%; text-align: center; justify-content: center; }
.td-main { display: grid; gap: 18px; min-width: 0; }
.td-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.td-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.td-num { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.td-num b { font: 700 22px var(--font-display); font-variant-numeric: tabular-nums; }

.neg-form { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; margin: 12px 0 6px; }
.neg-form .btn { flex: none; }
.neg-name { width: 190px; margin: 0; }
.neg-name[hidden] { display: none; }
.neg-box { position: relative; flex: 1; min-width: 200px; }
.neg-box input { width: 100%; margin: 0; }
.mention-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; list-style: none; margin: 0; padding: 4px; border: 1px solid var(--line2); border-radius: 8px; background: var(--raised); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55); }
.mention-list[hidden] { display: none; }
.mention-list button { width: 100%; text-align: left; font: inherit; font-weight: 600; color: var(--text); background: transparent; border: 0; border-radius: 6px; padding: 7px 10px; cursor: pointer; }
.mention-list button:hover { background: color-mix(in srgb, var(--cyan) 12%, transparent); }
.neg-list { list-style: none; margin: 14px 0 0; padding: 0; }
.neg-item { position: relative; display: flex; gap: 12px; padding: 14px 34px 14px 0; border-top: 1px solid var(--line); }
.neg-item .tc-avatar { flex: none; }
.neg-item.system { opacity: 0.9; }
.tc-avatar.sys { background: linear-gradient(135deg, var(--accent), var(--accent2)) !important; }
.neg-body { flex: 1; min-width: 0; }
.neg-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.neg-meta b { font-size: 16px; color: var(--text); overflow-wrap: anywhere; }
.neg-text { margin: 4px 0 0; overflow-wrap: anywhere; }
.mention { display: inline-block; padding: 0 8px; border-radius: 12px; background: #1d36c9; color: #fff; font-weight: 600; }
.neg-tag { display: inline-block; margin: 8px 0 4px; padding: 1px 8px; border-radius: 4px; font-size: 12px; font-weight: 700; color: var(--cyan); border: 1px solid color-mix(in srgb, var(--cyan) 50%, transparent); }
.neg-counter { padding: 10px 12px; border: 1px solid var(--line2); border-radius: 10px; background: color-mix(in srgb, var(--raised) 45%, transparent); }
.neg-counter .btn { margin-top: 10px; }
.neg-del { position: absolute; right: 0; top: 12px; width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); color: var(--muted); cursor: pointer; line-height: 1; }
.neg-del:hover { color: var(--accent2); border-color: var(--accent2); }
.neg-empty { padding: 14px 0; list-style: none; }
@media (max-width: 860px) { .td-grid { grid-template-columns: 1fr; } .td-card { max-width: 420px; width: 100%; margin: 0 auto; } }
@media (max-width: 560px) { .td-nums { grid-template-columns: 1fr; } .neg-name { width: 100%; } }

/* nav: never break a label onto two lines; wrap whole items instead */
.nav nav { flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; }
.nav nav > *, .nav nav a { white-space: nowrap; flex: none; }
.nav nav a { padding: 8px 10px; }
.nav-inner { flex-wrap: wrap; row-gap: 6px; }
@media (max-width: 1280px) { .nav nav a { font-size: 14px; padding: 7px 8px; } }

/* ---------- Friends and private chat ---------- */
.fr-chip { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 34px; color: var(--cyan); border: 1px solid var(--line); border-radius: 6px; text-decoration: none; flex: none; }
.fr-chip:hover { border-color: var(--cyan); box-shadow: 0 0 14px color-mix(in srgb, var(--cyan) 28%, transparent); }
.fr-ic { display: grid; place-items: center; }
.fr-badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #ff3b6b; color: #fff; font: 700 11px/18px var(--font-display); text-align: center; font-style: normal; }
.fr-badge[hidden] { display: none; }
.fr-top { display: grid; grid-template-columns: 1fr 1.4fr; gap: 14px; }
.fr-top .panel { margin: 14px 0; }
.fr-code { display: flex; align-items: center; gap: 12px; margin: 6px 0 12px; }
.fr-code b { font: 800 30px var(--font-display); letter-spacing: 0.14em; color: var(--cyan); }
.fr-name { display: flex; gap: 8px; }
.fr-name input { flex: 1; min-width: 0; }
.fr-add label { font-weight: 700; display: block; margin-bottom: 8px; }
.fr-add .inline { display: flex; gap: 8px; }
.fr-add .inline input { flex: 1; min-width: 0; text-transform: uppercase; }
.fr-add p { margin: 10px 0 0; font-size: 14px; }
.fr-layout { display: grid; grid-template-columns: 300px 1fr; gap: 14px; min-height: 460px; margin-bottom: 24px; }
.fr-list, .fr-chat { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
.fr-list { padding: 8px; overflow-y: auto; max-height: 560px; }
.fr-h { font: 700 12px var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 10px 6px 6px; }
.fr-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; color: var(--text); background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 8px; cursor: pointer; }
.fr-row:hover { background: var(--raised); }
.fr-row.on { background: var(--raised); border-color: var(--cyan); }
.fr-row .tc-avatar { flex: none; }
.fr-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fr-mid b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-last { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-unread { flex: none; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #ff3b6b; color: #fff; font: 700 12px/22px var(--font-display); text-align: center; }
.fr-none { padding: 24px 14px; text-align: center; }
.fr-chat { display: flex; flex-direction: column; }
.fr-empty { margin: auto; text-align: center; padding: 30px; }
.fr-pane { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.fr-pane[hidden], .fr-empty[hidden] { display: none; }
.fr-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.fr-who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fr-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fr-back { display: none; }
.fr-msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; min-height: 280px; max-height: 440px; }
.fr-msg { align-self: flex-start; max-width: 78%; background: var(--raised); border: 1px solid var(--line); border-radius: 12px 12px 12px 3px; padding: 7px 11px; }
.fr-msg.mine { align-self: flex-end; background: color-mix(in srgb, var(--cyan) 16%, var(--raised)); border-color: color-mix(in srgb, var(--cyan) 40%, var(--line)); border-radius: 12px 12px 3px 12px; }
.fr-msg p { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.fr-msg time { display: block; font-size: 11px; text-align: right; margin-top: 2px; }
.fr-sys { align-self: center; max-width: 90%; text-align: center; font-size: 13px; color: var(--muted); background: color-mix(in srgb, var(--cyan) 8%, transparent); border: 1px dashed var(--line2); border-radius: 8px; padding: 6px 12px; }
.fr-send { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
.fr-send input { flex: 1; min-width: 0; }
@media (max-width: 760px) {
  .fr-top { grid-template-columns: 1fr; }
  .fr-layout { grid-template-columns: 1fr; }
  .fr-layout.in-chat .fr-list { display: none; }
  .fr-layout:not(.in-chat) .fr-chat { display: none; }
  .fr-back { display: inline-flex; }
  .fr-msgs { max-height: 55vh; }
}

/* ---------- Accounts ---------- */
.acct-chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid var(--line2); border-radius: 6px; color: var(--text); font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap; flex: none; }
.acct-chip:hover { border-color: var(--cyan); box-shadow: 0 0 14px color-mix(in srgb, var(--cyan) 28%, transparent); }
.acct-chip.in { padding-left: 4px; }
.acct-av { width: 24px; height: 24px; border-radius: 5px; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent2, #7b5cff), var(--cyan)); color: #fff; font: 800 13px var(--font-display); }
.acct-av[hidden] { display: none; }
.acct-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 14px 0 0; padding: 10px 14px; border: 1px dashed var(--line2); border-radius: 8px; background: color-mix(in srgb, var(--cyan) 6%, transparent); font-size: 14px; }
.acct-note[hidden] { display: none; }
.ac-card { max-width: 460px; margin: 28px auto; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 24px; }
.ac-card[hidden] { display: none; }
.ac-card h1 { font-size: 26px; margin: 0 0 6px; }
.ac-card h2 { font-size: 18px; margin: 22px 0 8px; }
.ac-tabs { display: grid; grid-template-columns: 1fr 1fr; margin: 18px 0 6px; }
.ac-form { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.ac-form[hidden] { display: none; }
.ac-form label { font-weight: 700; font-size: 14px; margin-top: 6px; }
.ac-form .btn { margin-top: 8px; align-self: flex-start; }
.ac-hint { font-size: 13px; margin: 6px 0 0; }
.ac-who { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.ac-who h1 { margin: 0; overflow-wrap: anywhere; }
.ac-who p { margin: 2px 0 0; font-size: 14px; }
.ac-big { width: 54px; height: 54px; font-size: 26px; flex: none; }
.ac-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.ac-stat { background: var(--raised); border: 1px solid var(--line); border-radius: 8px; padding: 10px; text-align: center; }
.ac-stat b { display: block; font: 800 22px var(--font-display); color: var(--cyan); }
.ac-stat span { font-size: 13px; }
.ac-links { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.ac-links .sbtn { text-decoration: none; }
#acOut { margin-top: 22px; }
@media (max-width: 1320px) { .rank-chip .rt { display: none; } .nav nav { gap: 2px; } }

/* ============ Clean light skin (the default look; the dark themes keep the skin above) ============ */
:root:not([data-theme]) body { background: linear-gradient(180deg, #e9f0ff 0, #f4f6fb 380px) fixed, var(--bg); }
:root:not([data-theme]) h1, :root:not([data-theme]) h2, :root:not([data-theme]) h3 { letter-spacing: -0.01em; font-weight: 700; }
:root:not([data-theme]) .nav { background: rgba(255, 255, 255, 0.88); border-image: none; border-bottom: 1px solid var(--line); box-shadow: 0 2px 16px rgba(23, 32, 51, 0.06); }
:root:not([data-theme]) .logo { color: var(--text); }
:root:not([data-theme]) .logo .mark { filter: none; color: var(--accent); }
:root:not([data-theme]) .nav nav a { border-radius: 999px; }
:root:not([data-theme]) .nav nav a:hover { background: var(--raised); }
:root:not([data-theme]) .nav nav a.active { background: color-mix(in srgb, var(--accent) 12%, #fff); color: var(--accent); box-shadow: none; }
:root:not([data-theme]) .btn { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; border-radius: 10px; letter-spacing: 0; box-shadow: 0 4px 14px rgba(37, 99, 235, 0.28); }
:root:not([data-theme]) .btn:hover { filter: brightness(1.06); box-shadow: 0 6px 20px rgba(37, 99, 235, 0.36); background: linear-gradient(135deg, var(--accent), var(--accent2)); }
:root:not([data-theme]) .btn.ghost { background: #fff; color: var(--text); border-color: var(--line2); box-shadow: none; }
:root:not([data-theme]) .btn.ghost:hover { background: var(--raised); border-color: var(--accent); box-shadow: none; }
:root:not([data-theme]) .btn.small, :root:not([data-theme]) .sbtn, :root:not([data-theme]) .seg, :root:not([data-theme]) input, :root:not([data-theme]) select, :root:not([data-theme]) textarea { border-radius: 10px; }
:root:not([data-theme]) .sbtn { background: #fff; color: var(--text); }
:root:not([data-theme]) .sbtn:hover, :root:not([data-theme]) .qty button:hover { border-color: var(--accent); color: var(--accent); }
:root:not([data-theme]) .sbtn.danger:hover { color: var(--loss); border-color: var(--loss); }
:root:not([data-theme]) input, :root:not([data-theme]) select, :root:not([data-theme]) textarea { background: #fff; color: var(--text); border-color: var(--line2); }
:root:not([data-theme]) input::placeholder, :root:not([data-theme]) textarea::placeholder { color: #8a96b0; }
:root:not([data-theme]) input:focus, :root:not([data-theme]) select:focus, :root:not([data-theme]) textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); outline: none; }
:root:not([data-theme]) .notice { text-shadow: none; }
:root:not([data-theme]) .hero h1 { text-shadow: none; font-weight: 800; }
:root:not([data-theme]) .hero-search .picker input { background: #fff; border-color: var(--line2); box-shadow: 0 8px 28px rgba(23, 32, 51, 0.08); }
:root:not([data-theme]) .hero-search .picker input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent), 0 8px 28px rgba(23, 32, 51, 0.08); }
:root:not([data-theme]) .cluster::before { background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 22%, transparent), transparent); filter: blur(18px); }
:root:not([data-theme]) .cluster .ficon, :root:not([data-theme]) .cluster .ficon { box-shadow: 0 14px 34px rgba(23, 32, 51, 0.18); }
:root:not([data-theme]) .ficon { background: radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--rc, var(--line2)) 26%, #fff), color-mix(in srgb, var(--rc, var(--line2)) 10%, #f1f4fb) 82%); border: 1px solid color-mix(in srgb, var(--rc, var(--line2)) 30%, var(--line)); }
:root:not([data-theme]) .card, :root:not([data-theme]) .tile, :root:not([data-theme]) .panel, :root:not([data-theme]) .top-card, :root:not([data-theme]) .side, :root:not([data-theme]) .desk, :root:not([data-theme]) .post-col, :root:not([data-theme]) .picker-list { background: #fff; border-radius: 16px; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(23, 32, 51, 0.04), 0 10px 28px rgba(23, 32, 51, 0.06); }
:root:not([data-theme]) .tile:hover, :root:not([data-theme]) .top-card:hover { border-color: var(--accent); box-shadow: 0 10px 30px rgba(37, 99, 235, 0.14); }
:root:not([data-theme]) .tile .count { color: var(--accent); }
:root:not([data-theme]) .desk { border-color: var(--line); box-shadow: 0 20px 50px rgba(23, 32, 51, 0.08); }
:root:not([data-theme]) .give h3, :root:not([data-theme]) .get h3 { text-shadow: none; }
:root:not([data-theme]) .give h3 { color: var(--loss); }
:root:not([data-theme]) .get h3 { color: var(--win); }
:root:not([data-theme]) .tide { box-shadow: none; }
:root:not([data-theme]) .tide .needle { background: var(--text); box-shadow: 0 0 0 3px #fff, 0 2px 8px rgba(23, 32, 51, 0.35); }
:root:not([data-theme]) .result-nums strong { text-shadow: none; }
:root:not([data-theme]) .verdict { border-radius: 14px; }
:root:not([data-theme]) .verdict.win { background: #e8f8f1; color: #0a7a55; box-shadow: none; border: 1px solid #a6e3cb; }
:root:not([data-theme]) .verdict.fair { background: #fff6e0; color: #92560b; box-shadow: none; border: 1px solid #f1d28a; }
:root:not([data-theme]) .verdict.loss { background: #fdebee; color: #b4233f; box-shadow: none; border: 1px solid #f3b3bf; }
:root:not([data-theme]) .tab[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); text-shadow: none; }
:root:not([data-theme]) .tab[aria-selected="true"] .n { background: var(--accent); color: #fff; }
:root:not([data-theme]) .tab .n { border-radius: 999px; }
:root:not([data-theme]) .seg { background: var(--raised); border-color: var(--line); }
:root:not([data-theme]) .seg button { border-radius: 8px; }
:root:not([data-theme]) .seg button[aria-pressed="true"], :root:not([data-theme]) .seg button[aria-selected="true"] { background: #fff; color: var(--accent); box-shadow: 0 1px 4px rgba(23, 32, 51, 0.12); }
:root:not([data-theme]) .fruit-card { background: linear-gradient(180deg, color-mix(in srgb, var(--rc, var(--line2)) 9%, #fff), #fff 70%); border-color: color-mix(in srgb, var(--rc, var(--line)) 28%, var(--line)); border-radius: 16px; box-shadow: 0 1px 2px rgba(23, 32, 51, 0.04), 0 8px 22px rgba(23, 32, 51, 0.05); }
:root:not([data-theme]) .fruit-card:hover { box-shadow: 0 14px 34px color-mix(in srgb, var(--rc, #2563eb) 22%, transparent); }
:root:not([data-theme]) .fruit-card::before { box-shadow: none; }
:root:not([data-theme]) .card-main .val { text-shadow: none; }
:root:not([data-theme]) .dock { background: rgba(255, 255, 255, 0.96); border-color: var(--line2); border-radius: 16px; box-shadow: 0 12px 36px rgba(23, 32, 51, 0.16); }
:root:not([data-theme]) dialog.item { background: #fff; color: var(--text); border-radius: 18px; box-shadow: 0 30px 80px rgba(23, 32, 51, 0.3); }
:root:not([data-theme]) dialog.item::backdrop { background: rgba(23, 32, 51, 0.5); }
:root:not([data-theme]) .status.s-Overpaid { background: #fff3da; color: #92560b; }
:root:not([data-theme]) .status.s-Underpaid { background: #e4f0ff; color: #0b57b8; }
:root:not([data-theme]) .status.s-Unstable { background: #fde7ea; color: #b4233f; }
:root:not([data-theme]) .status.s-Fluctuating { background: #f0e8ff; color: #6d3fc4; }
:root:not([data-theme]) .status.s-Stable { background: #e2f6ed; color: #0a7a55; }
:root:not([data-theme]) .badge.mine { color: #6d3fc4; border-color: #c9b2f0; }
:root:not([data-theme]) .badge.hot { box-shadow: none; }
:root:not([data-theme]) .toast { background: #172033; color: #fff; border-color: #172033; box-shadow: 0 14px 36px rgba(23, 32, 51, 0.3); }
:root:not([data-theme]) .toast.levelup { box-shadow: 0 14px 36px rgba(79, 70, 229, 0.4); }
:root:not([data-theme]) .theme-menu { background: #fff; box-shadow: 0 18px 44px rgba(23, 32, 51, 0.18); border-radius: 14px; }
:root:not([data-theme]) .gem-ico { filter: none; }
:root:not([data-theme]) .gem-chip { background: #effcf9; }
:root:not([data-theme]) .gem-chip b { color: #0b6e61; }
:root:not([data-theme]) .gem-chip:hover { box-shadow: 0 4px 14px rgba(52, 224, 195, 0.35); }
:root:not([data-theme]) .rank-chip { background: #f1efff; border-color: #d3cdf6; }
:root:not([data-theme]) .gtile { background: #fff; border-radius: 14px; }
:root:not([data-theme]) .gtile:hover { background: #f1f6ff; }
:root:not([data-theme]) .gtile .gt-l { color: var(--text); }
:root:not([data-theme]) .gtile.on { background: #eaf1ff; border-color: var(--accent); }
:root:not([data-theme]) .gamebar { background: #fff; border-color: var(--line); box-shadow: 0 8px 26px rgba(23, 32, 51, 0.06); }
:root:not([data-theme]) .st-ring.lit { box-shadow: 0 8px 30px rgba(255, 138, 31, 0.35); }
:root:not([data-theme]) .st-ring { background: #fff; }
:root:not([data-theme]) .bubble { background: #e8efff; border-color: #a9bff5; color: #1d3a8a; }
:root:not([data-theme]) .bubble.special { background: #fff1c9; border-color: #e0b13a; color: #7a5200; }
:root:not([data-theme]) .bubble.done { color: #2b1700; box-shadow: 0 4px 14px rgba(255, 138, 31, 0.4); }
:root:not([data-theme]) .bubble.now { border-color: #fff; box-shadow: 0 0 0 3px var(--accent), 0 6px 18px rgba(37, 99, 235, 0.35); }
:root:not([data-theme]) .gpill { background: #3b6cff; }
:root:not([data-theme]) .fr-msg.mine { background: #e3edff; border-color: #b8cdfa; }
:root:not([data-theme]) .fr-sys { background: #f1f6ff; }
:root:not([data-theme]) .fr-list, :root:not([data-theme]) .fr-chat { background: #fff; border-radius: 16px; box-shadow: 0 10px 28px rgba(23, 32, 51, 0.06); }
:root:not([data-theme]) .ac-card { background: #fff; border-radius: 18px; box-shadow: 0 20px 50px rgba(23, 32, 51, 0.1); }
:root:not([data-theme]) .acct-chip { background: #fff; }
:root:not([data-theme]) .acct-note { background: #eef4ff; border-color: #b8cdfa; }
:root:not([data-theme]) .admin-table tr.dirty { background: #fff6e0; }
:root:not([data-theme]) .footer { background: transparent; }

/* ============ Richer home page and motion ============ */
.ico { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); flex: none; }
.home-stats-wrap { margin-top: -6px; }
.home-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.hs { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.hs b { display: block; font: 800 26px/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.hs span.muted { font-size: 13px; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; counter-reset: s; }
.step { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
.step h3 { font-size: 18px; margin: 12px 0 6px; }
.step p { margin: 0; font-size: 14.5px; }
.watch h3 { font-size: 19px; margin-bottom: 4px; }
.watch p { margin: 0 0 10px; font-size: 14px; }
.watch-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; color: var(--text); text-decoration: none; font-weight: 600; }
.watch-row:hover { background: var(--raised); }
.watch-row .ficon { flex: none; }
.watch-row > span:not(.ficon) { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.watch-row b { font: 700 15px var(--font-display); color: var(--muted); font-variant-numeric: tabular-nums; }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.feat { display: flex; flex-direction: column; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px; text-decoration: none; color: var(--text); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.feat h3 { font-size: 18px; margin: 10px 0 2px; }
.feat p { margin: 0; font-size: 14.5px; }
.feat:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 12px 30px color-mix(in srgb, var(--accent) 16%, transparent); }
.cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 28px; border-radius: 18px; color: #fff; background: linear-gradient(120deg, var(--accent), var(--accent2)); }
.cta h2 { color: #fff; margin: 0 0 6px; font-size: 28px; }
.cta p { margin: 0; opacity: .92; }
.cta-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.cta .btn { background: #fff; color: #1b2a6b !important; box-shadow: none; }
.cta .btn.ghost { background: transparent; color: #fff !important; border: 1.5px solid rgba(255,255,255,.7); }
.cta .btn.ghost:hover { background: rgba(255,255,255,.14); }
details.card summary { cursor: pointer; font-weight: 700; }
details.card[open] summary { margin-bottom: 8px; }

/* motion: gentle float for the hero fruits, soft entrance for cards, lift on hover */
@keyframes floaty { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.cluster .c1 { animation: floaty 6s ease-in-out infinite; }
.cluster .c2 { animation: floaty 7s ease-in-out -2s infinite; }
.cluster .c3 { animation: floaty 6.5s ease-in-out -4s infinite; }
.home-stats .hs, .steps .step, .features .feat, .tiles .tile, .top-row .top-card, .watch, .fruit-card { animation: rise .45s ease both; }
.steps .step:nth-child(2), .features .feat:nth-child(2), .tiles .tile:nth-child(2) { animation-delay: .05s; }
.steps .step:nth-child(3), .features .feat:nth-child(3), .tiles .tile:nth-child(3) { animation-delay: .1s; }
.steps .step:nth-child(4), .features .feat:nth-child(4), .tiles .tile:nth-child(4) { animation-delay: .15s; }
.tile, .top-card, .step { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.tile:hover, .top-card:hover, .step:hover { transform: translateY(-3px); }
.logo .mark { transition: transform .25s ease; }
.logo:hover .mark { transform: rotate(-8deg) scale(1.08); }
@media (prefers-reduced-motion: reduce) { .cluster .ficon, .home-stats .hs, .steps .step, .features .feat, .tiles .tile, .top-row .top-card, .watch, .fruit-card { animation: none !important; } }
:root:not([data-theme]) .logo .mark, .logo .mark { filter: drop-shadow(0 3px 6px color-mix(in srgb, var(--accent2) 35%, transparent)); color: inherit; }
.stat.wide { grid-column: 1 / -1; }
:root .cta .btn, :root:not([data-theme]) .cta .btn { background: #fff; color: #1b2a6b !important; border: 1.5px solid #fff; }
:root .cta .btn.ghost, :root:not([data-theme]) .cta .btn.ghost { background: transparent; color: #fff !important; border: 1.5px solid rgba(255,255,255,.75); }
:root .cta .btn.ghost:hover, :root:not([data-theme]) .cta .btn.ghost:hover { background: rgba(255,255,255,.16); }

/* ============ Things we offer: picture cards, stock, wiki, history, countdown ============ */
.offer-head { padding: 26px 0 14px; }
.offer-head h1 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; }
.offer-head p { margin: 8px 0 0; }
.offer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; margin: 10px 0 30px; }
.offer { display: flex; align-items: stretch; min-height: 96px; border: 1.5px solid color-mix(in srgb, var(--cyan) 55%, var(--line)); border-radius: 14px; overflow: hidden; background: var(--surface); color: var(--text); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.offer:hover { transform: translateY(-3px); border-color: var(--cyan); box-shadow: 0 12px 30px color-mix(in srgb, var(--cyan) 20%, transparent); }
.offer-body { flex: 1; min-width: 0; padding: 14px 16px; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.offer-body h3 { font-size: 18px; font-weight: 800; }
.offer-body p { margin: 0; font-size: 14.5px; }
.offer-badge { display: inline-block; margin-left: 8px; padding: 2px 7px; border-radius: 999px; background: #facc15; color: #2a1d00; font: 800 10px var(--font-display); vertical-align: middle; }
.wiki-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; margin-top: 14px; }
.wiki-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; color: var(--text); text-decoration: none; transition: transform .18s ease, border-color .18s ease; }
.wiki-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.wiki-card b { font-size: 14px; overflow-wrap: anywhere; }
.wiki-top { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin: 18px 0; padding: 22px; background: linear-gradient(135deg, color-mix(in srgb, var(--rc, var(--accent)) 16%, var(--surface)), var(--surface)); border: 1px solid color-mix(in srgb, var(--rc, var(--line)) 40%, var(--line)); border-radius: 18px; }
.wiki-top h1 { font-size: clamp(28px, 4vw, 40px); }
.wiki-val { font: 800 30px var(--font-display); margin: 4px 0 10px; color: var(--accent); }
.wiki-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.wiki-facts { max-width: 560px; }
.wiki-acts { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.wiki-h { font-size: 22px; margin: 26px 0 10px; }
.wiki-trade { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; padding: 12px 14px; }
#wikiIndex h1 { font-size: 36px; margin-top: 22px; }
@media (max-width: 520px) { .offer-grid { grid-template-columns: 1fr; } }

/* Navy theme: dark blue with bright cyan card outlines, like the "Things we offer" screenshot */
:root[data-theme="navy"] { --bg:#050a24; --surface:#0b1233; --raised:#121b47; --line:#1c2a5e; --line2:#2b3f85; --card-top:#0d1538; --card-bot:#070c26; --text:#f0f4ff; --muted:#9aa7d4; --accent:#22d3ee; --accent2:#3b82f6; --accent-ink:#00131a; --cyan:#22d3ee; --glow:#3b82f6; --win:#3dffa8; --loss:#ff5470; --warn:#ffc83d; }
:root[data-theme="navy"] body { background: radial-gradient(1000px 520px at 80% -120px, rgba(59,130,246,.22), transparent 70%), var(--bg); }
:root[data-theme="navy"] .card, :root[data-theme="navy"] .tile, :root[data-theme="navy"] .panel, :root[data-theme="navy"] .feat, :root[data-theme="navy"] .step, :root[data-theme="navy"] .hs, :root[data-theme="navy"] .top-card, :root[data-theme="navy"] .wiki-card { border: 1.5px solid color-mix(in srgb, var(--cyan) 50%, var(--line)); border-radius: 14px; }
:root[data-theme="navy"] .btn { color: #00131a !important; }
:root[data-theme="navy"] .btn.ghost { color: var(--text) !important; }
:root[data-theme="navy"] .cta { background: linear-gradient(120deg, #0e2a6b, #1d4ed8); }
.wiki-link { display: inline-block; margin: 12px 0 0; font-weight: 700; font-size: 14px; }
textarea { font: inherit; width: 100%; padding: 10px 12px; border: 1.5px solid var(--line2); border-radius: 8px; background: var(--surface); color: var(--text); resize: vertical; }
.offer { min-height: 124px; }
.offer-pic { position: relative; flex: 0 0 38%; min-width: 130px; display: flex; align-items: center; justify-content: center; padding: 8px; overflow: hidden; }
.offer-pic::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.28), transparent 55%); pointer-events: none; }
.op-ic { position: relative; z-index: 1; margin: 0 -8px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.4)); transform: rotate(calc((var(--i) - 1) * 7deg)); transition: transform .25s ease; }
.offer:hover .op-ic { transform: rotate(calc((var(--i) - 1) * 7deg)) translateY(-4px) scale(1.06); }
@media (max-width: 520px) { .offer-pic { flex-basis: 34%; min-width: 110px; } }
@media (prefers-reduced-motion: reduce) { .op-ic { transition: none; } }
.offer { min-height: 124px; }
.offer-pic { position: relative; flex: 0 0 38%; min-width: 130px; display: flex; align-items: center; justify-content: center; padding: 8px; overflow: hidden; }
.offer-pic::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.28), transparent 55%); pointer-events: none; }
.op-ic { position: relative; z-index: 1; margin: 0 -8px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.4)); transform: rotate(calc((var(--i) - 1) * 7deg)); transition: transform .25s ease; }
.offer:hover .op-ic { transform: rotate(calc((var(--i) - 1) * 7deg)) translateY(-4px) scale(1.06); }
@media (max-width: 520px) { .offer-pic { flex-basis: 34%; min-width: 110px; } }
@media (prefers-reduced-motion: reduce) { .op-ic { transition: none; } }
.lb-sub { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 12px; }
.lb-sub[hidden] { display: none; }
.fruit-leader { grid-template-columns: 30px 36px 1fr auto auto; align-items: center; gap: 12px; }
.fruit-leader .ficon { flex: none; }
.fruit-leader .ln { flex: 1; min-width: 0; font-weight: 700; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.fruit-leader .ln:hover { text-decoration: underline; }

/* Ghost theme: misty slate with pale spectral glow and slowly drifting fog */
:root[data-theme="ghost"] { --bg:#0b0d13; --surface:#12151e; --raised:#1b2030; --line:#262c40; --line2:#3a4262; --card-top:#141826; --card-bot:#0c0e16; --text:#eef1fb; --muted:#9aa2bd; --accent:#c9d3ff; --accent2:#8fa2ff; --accent-ink:#0b0d18; --cyan:#bfe9ff; --glow:#9db0ff; --win:#7dffd0; --loss:#ff7a9a; --warn:#ffd98a; }
:root[data-theme="ghost"] body { background: radial-gradient(900px 520px at 20% -120px, rgba(157,176,255,.16), transparent 70%), radial-gradient(800px 500px at 90% 20%, rgba(191,233,255,.08), transparent 70%), var(--bg); }
:root[data-theme="ghost"] body::before { content: ""; position: fixed; inset: -20%; z-index: -1; pointer-events: none; opacity: .55; background: radial-gradient(35% 25% at 20% 70%, rgba(220,228,255,.10), transparent 70%), radial-gradient(30% 22% at 75% 35%, rgba(190,210,255,.09), transparent 70%), radial-gradient(28% 20% at 50% 90%, rgba(255,255,255,.06), transparent 70%); animation: ghost-fog 26s ease-in-out infinite alternate; }
@keyframes ghost-fog { from { transform: translate3d(-4%, 2%, 0) scale(1); } to { transform: translate3d(5%, -3%, 0) scale(1.1); } }
:root[data-theme="ghost"] .nav { background: rgba(11, 13, 19, 0.88); border-image: linear-gradient(90deg, transparent, rgba(201,211,255,.55), transparent) 1; }
:root[data-theme="ghost"] .btn { color: #0b0d18 !important; background: linear-gradient(135deg, #e3e9ff, #9db0ff); box-shadow: 0 0 22px rgba(157,176,255,.28); }
:root[data-theme="ghost"] .btn.ghost { color: var(--text) !important; background: transparent; box-shadow: none; border-color: var(--line2); }
:root[data-theme="ghost"] .card, :root[data-theme="ghost"] .panel, :root[data-theme="ghost"] .tile, :root[data-theme="ghost"] .offer, :root[data-theme="ghost"] .hs, :root[data-theme="ghost"] .step, :root[data-theme="ghost"] .top-card { background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border-color: rgba(201,211,255,.22); backdrop-filter: blur(6px); }
:root[data-theme="ghost"] .offer:hover, :root[data-theme="ghost"] .tile:hover, :root[data-theme="ghost"] .top-card:hover { border-color: #c9d3ff; box-shadow: 0 0 28px rgba(157,176,255,.22); }
:root[data-theme="ghost"] .logo .mark { filter: drop-shadow(0 0 10px rgba(201,211,255,.6)); }
:root[data-theme="ghost"] .cta { background: linear-gradient(120deg, #1d2440, #3b4a8a); border: 1px solid rgba(201,211,255,.3); }
:root[data-theme="ghost"] .cta .btn { background: #eef1fb; color: #0b0d18 !important; box-shadow: none; }
:root[data-theme="ghost"] .ico { color: #dfe6ff; background: rgba(201,211,255,.08); border-color: rgba(201,211,255,.25); }
:root[data-theme="ghost"] .toast { background: #151a2a; color: #fff; border: 1px solid rgba(201,211,255,.3); }
@media (prefers-reduced-motion: reduce) { :root[data-theme="ghost"] body::before { animation: none; } }

/* Ghost theme, blood edition: crimson accents, dripping blood under the menu bar, blood-red glow and a slow heartbeat on the page edges */
:root[data-theme="ghost"] { --accent:#e11d2e; --accent2:#8d0f1b; --accent-ink:#ffffff; --glow:#e11d2e; --line:#3a1c24; --line2:#6a2430; --loss:#ff4d5e; }
:root[data-theme="ghost"] .btn { color: #fff !important; background: linear-gradient(135deg, #e11d2e, #8d0f1b); box-shadow: 0 0 22px rgba(225,29,46,.38), 0 0 0 1px rgba(255,120,130,.25) inset; }
:root[data-theme="ghost"] .btn:hover { box-shadow: 0 0 34px rgba(225,29,46,.6), 0 0 0 1px rgba(255,120,130,.35) inset; }
:root[data-theme="ghost"] .card, :root[data-theme="ghost"] .panel, :root[data-theme="ghost"] .tile, :root[data-theme="ghost"] .offer, :root[data-theme="ghost"] .hs, :root[data-theme="ghost"] .step, :root[data-theme="ghost"] .top-card { border-color: rgba(225,29,46,.32); }
:root[data-theme="ghost"] .offer:hover, :root[data-theme="ghost"] .tile:hover, :root[data-theme="ghost"] .top-card:hover { border-color: #e11d2e; box-shadow: 0 0 30px rgba(225,29,46,.35); }
:root[data-theme="ghost"] .nav { border-image: linear-gradient(90deg, transparent, rgba(225,29,46,.8), transparent) 1; overflow: visible; }
:root[data-theme="ghost"] .nav::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 52px; background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%2252%22 viewBox=%220 0 160 52%22%3E%3Crect x=%220%22 y=%220%22 width=%22160%22 height=%229%22 fill=%22%239b0f1c%22/%3E%3Crect x=%227.5%22 y=%220%22 width=%225%22 height=%2226%22 rx=%222.5%22 fill=%22%23b3121f%22/%3E%3Ccircle cx=%2210%22 cy=%2226%22 r=%223.75%22 fill=%22%23b3121f%22/%3E%3Crect x=%228.75%22 y=%222%22 width=%221.2%22 height=%2220%22 fill=%22%23ff6a78%22 opacity=%22.45%22/%3E%3Crect x=%2232%22 y=%220%22 width=%224%22 height=%2214%22 rx=%222%22 fill=%22%23b3121f%22/%3E%3Ccircle cx=%2234%22 cy=%2214%22 r=%223%22 fill=%22%23b3121f%22/%3E%3Crect x=%2233%22 y=%222%22 width=%221.2%22 height=%228%22 fill=%22%23ff6a78%22 opacity=%22.45%22/%3E%3Crect x=%2249%22 y=%220%22 width=%226%22 height=%2238%22 rx=%223%22 fill=%22%23b3121f%22/%3E%3Ccircle cx=%2252%22 cy=%2238%22 r=%224.5%22 fill=%22%23b3121f%22/%3E%3Crect x=%2250.5%22 y=%222%22 width=%221.2%22 height=%2232%22 fill=%22%23ff6a78%22 opacity=%22.45%22/%3E%3Crect x=%2276%22 y=%220%22 width=%224%22 height=%2220%22 rx=%222%22 fill=%22%23b3121f%22/%3E%3Ccircle cx=%2278%22 cy=%2220%22 r=%223%22 fill=%22%23b3121f%22/%3E%3Crect x=%2277%22 y=%222%22 width=%221.2%22 height=%2214%22 fill=%22%23ff6a78%22 opacity=%22.45%22/%3E%3Crect x=%2297.5%22 y=%220%22 width=%225%22 height=%2230%22 rx=%222.5%22 fill=%22%23b3121f%22/%3E%3Ccircle cx=%22100%22 cy=%2230%22 r=%223.75%22 fill=%22%23b3121f%22/%3E%3Crect x=%2298.75%22 y=%222%22 width=%221.2%22 height=%2224%22 fill=%22%23ff6a78%22 opacity=%22.45%22/%3E%3Crect x=%22122%22 y=%220%22 width=%224%22 height=%2216%22 rx=%222%22 fill=%22%23b3121f%22/%3E%3Ccircle cx=%22124%22 cy=%2216%22 r=%223%22 fill=%22%23b3121f%22/%3E%3Crect x=%22123%22 y=%222%22 width=%221.2%22 height=%2210%22 fill=%22%23ff6a78%22 opacity=%22.45%22/%3E%3Crect x=%22141%22 y=%220%22 width=%226%22 height=%2234%22 rx=%223%22 fill=%22%23b3121f%22/%3E%3Ccircle cx=%22144%22 cy=%2234%22 r=%224.5%22 fill=%22%23b3121f%22/%3E%3Crect x=%22142.5%22 y=%222%22 width=%221.2%22 height=%2228%22 fill=%22%23ff6a78%22 opacity=%22.45%22/%3E%3C/svg%3E") repeat-x top left / 160px 52px; transform-origin: top; pointer-events: none; animation: blood-drip 7s ease-in-out infinite; filter: drop-shadow(0 4px 6px rgba(120,0,10,.55)); }
@keyframes blood-drip { 0%, 100% { transform: scaleY(.78); } 55% { transform: scaleY(1.12); } }
:root[data-theme="ghost"] body::after { content: ""; position: fixed; inset: 0; z-index: 30; pointer-events: none; background: radial-gradient(60% 40% at 0% 100%, rgba(150,0,15,.28), transparent 70%), radial-gradient(55% 38% at 100% 100%, rgba(150,0,15,.24), transparent 70%), radial-gradient(40% 24% at 100% 0%, rgba(150,0,15,.16), transparent 70%); animation: heartbeat 4.5s ease-in-out infinite; }
@keyframes heartbeat { 0%, 100% { opacity: .55; } 12% { opacity: 1; } 24% { opacity: .65; } 36% { opacity: .95; } 60% { opacity: .55; } }
:root[data-theme="ghost"] .hero h1 { text-shadow: 0 0 34px rgba(225,29,46,.45); }
:root[data-theme="ghost"] .logo .mark { filter: drop-shadow(0 0 10px rgba(225,29,46,.7)); }
:root[data-theme="ghost"] .cta { background: linear-gradient(120deg, #2a0a10, #7a0f1c); border-color: rgba(225,29,46,.5); }
:root[data-theme="ghost"] .ico { color: #ff8b96; background: rgba(225,29,46,.1); border-color: rgba(225,29,46,.35); }
:root[data-theme="ghost"] .tide .needle { box-shadow: 0 0 0 3px var(--surface), 0 0 14px rgba(255,80,95,.9); }
:root[data-theme="ghost"] a { color: #ff8b96; }
@media (prefers-reduced-motion: reduce) { :root[data-theme="ghost"] .nav::after, :root[data-theme="ghost"] body::after { animation: none; } }

/* Ghost theme, extra bloody: thick long drips, falling drops, a pool of blood at the bottom, flickering red edges and a shaking title */
:root[data-theme="ghost"] { --accent:#ff1e32; --accent2:#7a0612; --glow:#ff1e32; --line:#4a1822; --line2:#8a2434; }
:root[data-theme="ghost"] body { background: radial-gradient(900px 520px at 20% -120px, rgba(255,30,50,.22), transparent 70%), radial-gradient(800px 500px at 90% 30%, rgba(160,0,20,.16), transparent 70%), #07080c; }
:root[data-theme="ghost"] .nav::after { height: 96px; background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22220%22 height=%2296%22 viewBox=%220 0 220 96%22%3E%3Crect x=%220%22 y=%220%22 width=%22220%22 height=%2212%22 fill=%22%237a0612%22/%3E%3Crect x=%229.5%22 y=%220%22 width=%229%22 height=%2246%22 rx=%224.5%22 fill=%22%23a30d1b%22/%3E%3Cellipse cx=%2214%22 cy=%2249%22 rx=%228.55%22 ry=%2211.25%22 fill=%22%23a30d1b%22/%3E%3Crect x=%2211.48%22 y=%222%22 width=%221.98%22 height=%2242%22 fill=%22%23ff7a86%22 opacity=%22.4%22/%3E%3Crect x=%2243%22 y=%220%22 width=%226%22 height=%2222%22 rx=%223%22 fill=%22%23a30d1b%22/%3E%3Cellipse cx=%2246%22 cy=%2224%22 rx=%225.7%22 ry=%227.5%22 fill=%22%23a30d1b%22/%3E%3Crect x=%2244.32%22 y=%222%22 width=%221.32%22 height=%2218%22 fill=%22%23ff7a86%22 opacity=%22.4%22/%3E%3Crect x=%2268.5%22 y=%220%22 width=%2211%22 height=%2270%22 rx=%225.5%22 fill=%22%23a30d1b%22/%3E%3Cellipse cx=%2274%22 cy=%2274%22 rx=%2210.45%22 ry=%2213.75%22 fill=%22%23a30d1b%22/%3E%3Crect x=%2270.92%22 y=%222%22 width=%222.42%22 height=%2266%22 fill=%22%23ff7a86%22 opacity=%22.4%22/%3E%3Crect x=%22104.5%22 y=%220%22 width=%227%22 height=%2230%22 rx=%223.5%22 fill=%22%23a30d1b%22/%3E%3Cellipse cx=%22108%22 cy=%2232%22 rx=%226.65%22 ry=%228.75%22 fill=%22%23a30d1b%22/%3E%3Crect x=%22106.04%22 y=%222%22 width=%221.54%22 height=%2226%22 fill=%22%23ff7a86%22 opacity=%22.4%22/%3E%3Crect x=%22135.5%22 y=%220%22 width=%229%22 height=%2254%22 rx=%224.5%22 fill=%22%23a30d1b%22/%3E%3Cellipse cx=%22140%22 cy=%2257%22 rx=%228.55%22 ry=%2211.25%22 fill=%22%23a30d1b%22/%3E%3Crect x=%22137.48%22 y=%222%22 width=%221.98%22 height=%2250%22 fill=%22%23ff7a86%22 opacity=%22.4%22/%3E%3Crect x=%22169%22 y=%220%22 width=%226%22 height=%2226%22 rx=%223%22 fill=%22%23a30d1b%22/%3E%3Cellipse cx=%22172%22 cy=%2228%22 rx=%225.7%22 ry=%227.5%22 fill=%22%23a30d1b%22/%3E%3Crect x=%22170.32%22 y=%222%22 width=%221.32%22 height=%2222%22 fill=%22%23ff7a86%22 opacity=%22.4%22/%3E%3Crect x=%22191%22 y=%220%22 width=%2210%22 height=%2262%22 rx=%225%22 fill=%22%23a30d1b%22/%3E%3Cellipse cx=%22196%22 cy=%2266%22 rx=%229.5%22 ry=%2212.5%22 fill=%22%23a30d1b%22/%3E%3Crect x=%22193.2%22 y=%222%22 width=%222.2%22 height=%2258%22 fill=%22%23ff7a86%22 opacity=%22.4%22/%3E%3C/svg%3E") repeat-x top left / 220px 96px; animation: blood-drip 5.5s ease-in-out infinite; filter: drop-shadow(0 6px 8px rgba(130,0,12,.7)); }
:root[data-theme="ghost"] .nav::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 80px; background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22220%22 height=%2280%22 viewBox=%220 0 220 80%22%3E%3Crect x=%220%22 y=%220%22 width=%22220%22 height=%2210%22 fill=%22%237a0612%22/%3E%3Crect x=%2226.5%22 y=%220%22 width=%227%22 height=%2234%22 rx=%223.5%22 fill=%22%23a30d1b%22/%3E%3Cellipse cx=%2230%22 cy=%2236%22 rx=%226.65%22 ry=%228.75%22 fill=%22%23a30d1b%22/%3E%3Crect x=%2228.04%22 y=%222%22 width=%221.54%22 height=%2230%22 fill=%22%23ff7a86%22 opacity=%22.4%22/%3E%3Crect x=%2259%22 y=%220%22 width=%2210%22 height=%2258%22 rx=%225%22 fill=%22%23a30d1b%22/%3E%3Cellipse cx=%2264%22 cy=%2262%22 rx=%229.5%22 ry=%2212.5%22 fill=%22%23a30d1b%22/%3E%3Crect x=%2261.2%22 y=%222%22 width=%222.2%22 height=%2254%22 fill=%22%23ff7a86%22 opacity=%22.4%22/%3E%3Crect x=%2297%22 y=%220%22 width=%226%22 height=%2220%22 rx=%223%22 fill=%22%23a30d1b%22/%3E%3Cellipse cx=%22100%22 cy=%2222%22 rx=%225.7%22 ry=%227.5%22 fill=%22%23a30d1b%22/%3E%3Crect x=%2298.32%22 y=%222%22 width=%221.32%22 height=%2216%22 fill=%22%23ff7a86%22 opacity=%22.4%22/%3E%3Crect x=%22123.5%22 y=%220%22 width=%229%22 height=%2248%22 rx=%224.5%22 fill=%22%23a30d1b%22/%3E%3Cellipse cx=%22128%22 cy=%2251%22 rx=%228.55%22 ry=%2211.25%22 fill=%22%23a30d1b%22/%3E%3Crect x=%22125.48%22 y=%222%22 width=%221.98%22 height=%2244%22 fill=%22%23ff7a86%22 opacity=%22.4%22/%3E%3Crect x=%22158.5%22 y=%220%22 width=%227%22 height=%2228%22 rx=%223.5%22 fill=%22%23a30d1b%22/%3E%3Cellipse cx=%22162%22 cy=%2230%22 rx=%226.65%22 ry=%228.75%22 fill=%22%23a30d1b%22/%3E%3Crect x=%22160.04%22 y=%222%22 width=%221.54%22 height=%2224%22 fill=%22%23ff7a86%22 opacity=%22.4%22/%3E%3Crect x=%22195%22 y=%220%22 width=%2210%22 height=%2240%22 rx=%225%22 fill=%22%23a30d1b%22/%3E%3Cellipse cx=%22200%22 cy=%2244%22 rx=%229.5%22 ry=%2212.5%22 fill=%22%23a30d1b%22/%3E%3Crect x=%22197.2%22 y=%222%22 width=%222.2%22 height=%2236%22 fill=%22%23ff7a86%22 opacity=%22.4%22/%3E%3C/svg%3E") repeat-x top left / 220px 80px; background-position: 110px 0; transform-origin: top; pointer-events: none; animation: blood-drip 8s ease-in-out -3s infinite; opacity: .9; filter: drop-shadow(0 5px 7px rgba(110,0,10,.7)); }
@keyframes blood-drip { 0%, 100% { transform: scaleY(.55); } 50% { transform: scaleY(.95); } }
/* falling drops (two layers at different speeds) */
:root[data-theme="ghost"]::before, :root[data-theme="ghost"]::after { content: ""; position: fixed; left: 0; right: 0; top: 0; z-index: 35; pointer-events: none; }
:root[data-theme="ghost"]::before { height: 100vh; background:
  radial-gradient(ellipse 3px 10px at 7% 8%, #c4122a 60%, transparent 70%), radial-gradient(ellipse 2.5px 8px at 23% 52%, #a30d1b 60%, transparent 70%),
  radial-gradient(ellipse 3.5px 11px at 41% 30%, #d1162e 60%, transparent 70%), radial-gradient(ellipse 2.5px 9px at 58% 78%, #a30d1b 60%, transparent 70%),
  radial-gradient(ellipse 3px 10px at 76% 18%, #c4122a 60%, transparent 70%), radial-gradient(ellipse 3px 9px at 92% 62%, #b3101f 60%, transparent 70%);
  background-size: 100% 100vh; background-repeat: repeat-y; animation: blood-fall 6s linear infinite; }
:root[data-theme="ghost"]::after { top: auto; bottom: 0; height: 46px; z-index: 6; background:
  radial-gradient(circle at 24px 0, #8d0f1b 20px, transparent 21px) repeat-x 0 0 / 48px 18px,
  linear-gradient(to top, #5a0410 0, #7a0612 45%, rgba(122,6,18,.0) 100%);
  animation: blood-pool 5s ease-in-out infinite; filter: drop-shadow(0 -4px 10px rgba(180,0,20,.55)); transform-origin: bottom; }
@keyframes blood-fall { from { background-position-y: 0; } to { background-position-y: 100vh; } }
@keyframes blood-pool { 0%, 100% { transform: scaleY(.8); } 50% { transform: scaleY(1.25); } }
/* flickering red edges */
:root[data-theme="ghost"] body::after { background: radial-gradient(70% 46% at 0% 100%, rgba(190,0,20,.42), transparent 70%), radial-gradient(65% 44% at 100% 100%, rgba(190,0,20,.38), transparent 70%), radial-gradient(48% 30% at 100% 0%, rgba(190,0,20,.28), transparent 70%), radial-gradient(48% 30% at 0% 0%, rgba(190,0,20,.22), transparent 70%); animation: blood-flicker 3.8s steps(1, end) infinite; }
@keyframes blood-flicker { 0% { opacity: .65; } 8% { opacity: 1; } 11% { opacity: .5; } 14% { opacity: .95; } 40% { opacity: .7; } 44% { opacity: 1; } 47% { opacity: .6; } 75% { opacity: .85; } 100% { opacity: .65; } }
/* title shakes now and then, red glitch */
:root[data-theme="ghost"] .hero h1, :root[data-theme="ghost"] .offer-head h1 { text-shadow: 0 0 30px rgba(255,30,50,.6), 2px 0 rgba(255,0,40,.55), -2px 0 rgba(0,200,255,.25); animation: ghost-shake 7s steps(1, end) infinite; }
@keyframes ghost-shake { 0%, 92%, 100% { transform: none; } 93% { transform: translate(-2px, 1px); } 94% { transform: translate(3px, -1px); } 95% { transform: translate(-1px, 0); } 96% { transform: none; } }
:root[data-theme="ghost"] .card, :root[data-theme="ghost"] .panel, :root[data-theme="ghost"] .tile, :root[data-theme="ghost"] .offer, :root[data-theme="ghost"] .hs, :root[data-theme="ghost"] .step, :root[data-theme="ghost"] .top-card { border-color: rgba(255,30,50,.42); box-shadow: 0 0 18px rgba(160,0,20,.18) inset; }
:root[data-theme="ghost"] .btn { background: linear-gradient(135deg, #ff1e32, #7a0612); box-shadow: 0 0 26px rgba(255,30,50,.5), 0 0 0 1px rgba(255,140,150,.3) inset; }
@media (prefers-reduced-motion: reduce) { :root[data-theme="ghost"]::before, :root[data-theme="ghost"]::after, :root[data-theme="ghost"] .nav::after, :root[data-theme="ghost"] .nav::before, :root[data-theme="ghost"] body::after, :root[data-theme="ghost"] .hero h1, :root[data-theme="ghost"] .offer-head h1 { animation: none; } }

/* Ghost theme, scary layer: watching red eyes, blood splatter, darker vignette, creepy title */
:root[data-theme="ghost"] .hero { position: relative; }
:root[data-theme="ghost"] .hero::before { content: ""; position: absolute; right: 7%; top: 42%; width: 120px; height: 40px; pointer-events: none; z-index: 2;
  background: radial-gradient(ellipse 15px 6px at 22px 20px, #fff 0 18%, #ff0a24 30%, rgba(255,0,30,.5) 55%, transparent 72%), radial-gradient(ellipse 15px 6px at 98px 20px, #fff 0 18%, #ff0a24 30%, rgba(255,0,30,.5) 55%, transparent 72%);
  filter: drop-shadow(0 0 10px #ff0a24) drop-shadow(0 0 22px #ff0a24); transform-origin: center; animation: ghost-eyes 9s infinite; opacity: 0; }
@keyframes ghost-eyes { 0%, 30% { opacity: 0; } 34%, 52% { opacity: 1; transform: scaleY(1); } 40% { transform: scaleY(.1); } 43% { transform: scaleY(1); } 56%, 100% { opacity: 0; } }
:root[data-theme="ghost"] .hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(circle at 78% 26%, rgba(170,0,18,.85) 0 14px, transparent 15px), radial-gradient(circle at 81% 29%, rgba(170,0,18,.8) 0 7px, transparent 8px), radial-gradient(circle at 74% 33%, rgba(140,0,14,.8) 0 5px, transparent 6px), radial-gradient(circle at 85% 22%, rgba(170,0,18,.7) 0 4px, transparent 5px), radial-gradient(circle at 12% 74%, rgba(150,0,16,.7) 0 11px, transparent 12px), radial-gradient(circle at 15% 78%, rgba(150,0,16,.7) 0 5px, transparent 6px), radial-gradient(circle at 9% 70%, rgba(150,0,16,.7) 0 4px, transparent 5px), radial-gradient(40% 60% at 50% 100%, rgba(120,0,12,.35), transparent 70%); }
:root[data-theme="ghost"] .hero > * { position: relative; z-index: 1; }
:root[data-theme="ghost"] body::before { background: radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,.78) 100%), radial-gradient(60% 40% at 50% 0%, rgba(255,20,40,.12), transparent 70%); }
:root[data-theme="ghost"] .hero h1 { color: #ffe9ec; text-shadow: 0 0 34px rgba(255,20,40,.75), 0 4px 0 rgba(120,0,12,.9), 2px 0 rgba(255,0,40,.6), -2px 0 rgba(0,200,255,.25); }
:root[data-theme="ghost"] h2 { text-shadow: 0 0 14px rgba(255,30,50,.55), 0 2px 0 rgba(100,0,10,.8); }
:root[data-theme="ghost"] .card:hover, :root[data-theme="ghost"] .offer:hover, :root[data-theme="ghost"] .tile:hover { border-color: #ff1e32; box-shadow: 0 0 34px rgba(255,20,40,.45), 0 0 18px rgba(160,0,20,.4) inset; }
:root[data-theme="ghost"] .toast { background: #1a0509; border: 1px solid #ff1e32; color: #ffd5da; box-shadow: 0 0 20px rgba(255,20,40,.5); }
@media (prefers-reduced-motion: reduce) { :root[data-theme="ghost"] .hero::before { animation: none; opacity: .0; } }

/* Ghost: the canvas draws the blood now, so hide the old CSS drips and keep the dark mood */
:root[data-theme="ghost"] .nav::before, :root[data-theme="ghost"] .nav::after, :root[data-theme="ghost"]::before, :root[data-theme="ghost"]::after { display: none; }
:root[data-theme="ghost"] .hero::before { filter: drop-shadow(0 0 12px #ff0a24) drop-shadow(0 0 30px #ff0a24); }

:root[data-theme="ghost"] .nav { z-index: 60; }

/* Ghost horror layer (driven by common.js) */
.bfx { position: fixed; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; }
.bfx-stream { position: absolute; top: -4px; height: 0; border-radius: 0 0 99px 99px; background: linear-gradient(90deg, #5a0410, #b30f20 45%, #6a0712); box-shadow: 0 0 10px rgba(180,0,20,.7); animation: bfx-run linear forwards; opacity: .92; }
.bfx-stream::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 160%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50% 50% 55% 55%; background: radial-gradient(circle at 40% 35%, #ff5a68 0 12%, #b30f20 30%, #6a0712 80%); }
@keyframes bfx-run { 0% { height: 0; } 100% { height: var(--len); } }
.bfx-splat { position: absolute; opacity: .92; filter: drop-shadow(0 0 6px rgba(120,0,12,.9)); animation: bfx-pop .18s ease-out; transition: opacity 3s, transform 3s; }
.bfx-splat.gone { opacity: 0; }
@keyframes bfx-pop { from { opacity: 0; scale: .2; } to { opacity: .92; scale: 1; } }
.bfx-drop { position: absolute; width: 6px; height: 12px; margin-left: -3px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 35% 30%, #ff6a78, #b30f20 55%, #6a0712); animation: bfx-fall 1.3s cubic-bezier(.5,0,1,.6) forwards; }
@keyframes bfx-fall { to { transform: translateY(160px); opacity: .1; } }
.bfx-scare { position: fixed; inset: 0; z-index: 80; pointer-events: none; background: radial-gradient(ellipse at center, rgba(120,0,10,.55) 0, rgba(0,0,0,.93) 75%); animation: bfx-flash 1.05s steps(1, end) forwards; }
.bfx-scare i { position: absolute; top: 40%; width: 15vw; height: 5vw; border-radius: 50%; background: radial-gradient(ellipse at center, #fff 0 9%, #ff0a24 28%, rgba(255,0,30,.45) 58%, transparent 72%); filter: drop-shadow(0 0 30px #ff0a24) drop-shadow(0 0 70px #ff0a24); }
.bfx-scare .e1 { left: 26%; transform: rotate(8deg); }
.bfx-scare .e2 { right: 26%; transform: rotate(-8deg); }
@keyframes bfx-flash { 0% { opacity: 1; } 12% { opacity: 0; } 20% { opacity: 1; } 32% { opacity: .2; } 40% { opacity: 1; } 85% { opacity: .85; } 100% { opacity: 0; } }
.bfx-shake { animation: bfx-jolt .6s linear; }
@keyframes bfx-jolt { 0%, 100% { transform: none; } 10% { transform: translate(-8px, 4px); } 25% { transform: translate(9px, -5px); } 40% { transform: translate(-6px, -3px); } 60% { transform: translate(5px, 4px); } 80% { transform: translate(-3px, 1px); } }

/* Scary: flashlight mode */
.flash-btn { position: fixed; left: 14px; bottom: 58px; z-index: 90; padding: 8px 14px; border-radius: 999px; border: 1px solid #ff1e32; background: #1a0509; color: #ffd5da; font: 600 13px/1 inherit; cursor: pointer; box-shadow: 0 0 18px rgba(255,20,40,.5); animation: heartbeat 2.4s ease-in-out infinite; }
.flash-btn[aria-pressed="true"] { background: #ff1e32; color: #fff; }
.flash-dark { position: fixed; inset: 0; z-index: 70; pointer-events: none; --mx: 50vw; --my: 40vh; background: radial-gradient(circle 190px at var(--mx) var(--my), transparent 0, rgba(0,0,0,.25) 55%, rgba(0,0,0,.94) 100%); }

/* ---------- Reputation badges and cosmetics ---------- */
.rep-name { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; vertical-align: middle; }
.rep-user { overflow: hidden; text-overflow: ellipsis; }
.rep-badge { display: inline-flex; align-items: center; gap: 3px; flex: none; padding: 1px 7px 1px 4px; border-radius: 999px; font: 700 11px/1.5 var(--font-body, inherit); letter-spacing: .02em; white-space: nowrap; }
.rep-badge svg { display: block; }
.rep-verified .rep-badge, .rep-badge.rep-verified { color: #1d6fe8; background: rgba(29,111,232,.14); box-shadow: inset 0 0 0 1px rgba(29,111,232,.4); }
.rep-elite .rep-badge, .rep-badge.rep-elite { color: #00e5ff; background: rgba(0,229,255,.12); box-shadow: inset 0 0 0 1px rgba(0,229,255,.7), 0 0 12px rgba(0,229,255,.55); }
.rep-legend .rep-badge, .rep-badge.rep-legend { color: #7a4b00; background: linear-gradient(135deg, #ffe27a, #ffb21a); box-shadow: inset 0 0 0 1px rgba(255,190,40,.9), 0 0 14px rgba(255,190,40,.6); }
:root:not([data-theme]) .rep-elite .rep-badge, :root:not([data-theme]) .rep-badge.rep-elite { color: #00809a; }
.rep-name.rep-elite .rep-user { color: #6ff4ff; text-shadow: 0 0 6px #00e5ff, 0 0 14px rgba(0,229,255,.8), 0 0 28px rgba(255,0,200,.35); animation: rep-neon 2.6s ease-in-out infinite; }
:root:not([data-theme]) .rep-name.rep-elite .rep-user { color: #0092b0; text-shadow: 0 0 8px rgba(0,229,255,.7); }
.rep-name.rep-legend .rep-user { background: linear-gradient(90deg, #ffd34d, #fff3b0, #ff9d1a, #ffd34d); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: rep-shine 3.2s linear infinite; filter: drop-shadow(0 0 6px rgba(255,190,40,.6)); }
@keyframes rep-neon { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.35); } }
@keyframes rep-shine { to { background-position: 220% 0; } }
.acct-chip.rep-elite { box-shadow: 0 0 12px rgba(0,229,255,.7), inset 0 0 0 1px rgba(0,229,255,.8); }
.acct-chip.rep-legend { box-shadow: 0 0 14px rgba(255,190,40,.8), inset 0 0 0 1px rgba(255,190,40,.9); }
.acct-chip.rep-verified { box-shadow: inset 0 0 0 1px rgba(29,111,232,.7); }
.rep-btn { background: linear-gradient(135deg, #ffcf3d, #ff9d1a); color: #4a2b00; border: 0; box-shadow: 0 0 16px rgba(255,170,30,.45); }
.rep-done { color: #1f9d57; font-weight: 700; padding: 6px 4px; }
.rep-card { margin-top: 18px; padding: 16px; border: 1px solid var(--line, #e3e6ee); border-radius: var(--radius, 14px); }
.rep-card h3 { margin: 0 0 10px; }
.rep-top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.rep-num { font: 800 34px/1 var(--font-display, inherit); }
.rep-hint { margin: 8px 0 12px; }
.rep-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rep-list li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; opacity: .55; }
.rep-list li.on { opacity: 1; }
.rep-li-n { font-size: 12px; }
@media (max-width: 560px) { .rep-list li { grid-template-columns: 1fr; gap: 4px; } }
@media (prefers-reduced-motion: reduce) { .rep-name.rep-elite .rep-user, .rep-name.rep-legend .rep-user { animation: none; } }
:root:not([data-theme]) .rep-name.rep-legend .rep-user { background-image: linear-gradient(90deg, #b36b00, #e09b00, #8f5200, #b36b00); filter: drop-shadow(0 0 4px rgba(255,170,30,.5)); }

/* ---------- Fruit stock page ---------- */
.stk-hero { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); margin-bottom: 14px; }
.stk-hero h1 { margin: 4px 0 4px; }
.stk-live { display: inline-flex; align-items: center; gap: 8px; font: 700 12px/1 var(--font-body, inherit); letter-spacing: .12em; color: var(--accent); }
.stk-live i { width: 9px; height: 9px; border-radius: 50%; background: #22c58b; box-shadow: 0 0 10px #22c58b; animation: stk-pulse 1.6s ease-in-out infinite; }
@keyframes stk-pulse { 50% { opacity: .35; transform: scale(.8); } }
.stk-chips { display: flex; gap: 10px; }
.stk-chip { min-width: 110px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-soft, transparent); display: grid; gap: 4px; }
.stk-chip span { font-size: 12px; color: var(--muted); }
.stk-chip b { font: 800 22px/1 var(--font-display, inherit); }
.stk-sub { font: 700 12px/1 var(--font-body, inherit); letter-spacing: .12em; color: var(--muted); margin-bottom: 10px; }
.stk-next { padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); margin-bottom: 14px; }
.stk-timers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stk-timer { position: relative; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; opacity: .75; }
.stk-timer.on { opacity: 1; box-shadow: 0 0 0 1px #4f8cff inset; }
.stk-timer.mirage.on { box-shadow: 0 0 0 1px #f5b82e inset; }
.stk-timer .tl { font-size: 13px; font-weight: 700; color: #4f8cff; }
.stk-timer.mirage .tl { color: #d99a0b; }
.stk-timer .tm { position: absolute; right: 12px; top: 12px; font-size: 12px; color: var(--muted); }
.stk-timer .tt { display: block; margin-top: 6px; font: 700 26px/1.1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.stk-tabs { display: flex; gap: 6px; width: max-content; max-width: 100%; margin: 0 auto 14px; padding: 5px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.stk-tab { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: 700 14px/1 inherit; cursor: pointer; }
.stk-tab.on { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--text); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent) inset; }
.stk-tab .n { padding: 2px 7px; border-radius: 7px; background: rgba(127,127,127,.2); font-size: 12px; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot.normal { background: #4f8cff; } .dot.mirage { background: #f5b82e; }
.stk-panel { padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); margin-bottom: 14px; }
.stk-panel h2 { margin: 0 0 14px; }
.stk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.stk-item { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px solid color-mix(in srgb, var(--rc, var(--line)) 45%, var(--line)); border-radius: 12px; color: inherit; text-decoration: none; background: color-mix(in srgb, var(--rc, transparent) 8%, transparent); transition: transform .15s, box-shadow .15s; }
a.stk-item:hover { transform: translateY(-2px); box-shadow: 0 8px 24px color-mix(in srgb, var(--rc, #000) 30%, transparent); }
.si-info { min-width: 0; display: grid; gap: 6px; }
.si-name { font-size: 16px; }
.si-tags, .si-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.si-badge { padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; border: 1px solid var(--line); }
.si-badge.ok { color: #1f9d57; border-color: rgba(31,157,87,.4); }
.si-chip { padding: 4px 9px; border-radius: 8px; font-size: 13px; font-weight: 700; border: 1px solid var(--line); }
.si-chip i { font-style: normal; font-weight: 600; opacity: .65; margin-right: 5px; }
.si-chip.dem { color: #1d8fd1; } .si-chip.val { color: #7c4dff; }
.stk-empty { grid-column: 1 / -1; text-align: center; padding: 24px 0; }
.stk-foot { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; }
.stk-alarm-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.stk-alarm h3 { margin: 0 0 4px; }
.stk-add { display: flex; gap: 8px; margin: 14px 0 10px; }
.stk-add input { flex: 1; min-width: 0; }
.stk-watch { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 560px) { .stk-timers { grid-template-columns: 1fr; } .stk-tab { padding: 9px 12px; } .stk-chips { width: 100%; } .stk-chip { flex: 1; } }

html.hide-stock a[href="stock.html"] { display: none !important; }
.stk-off { text-align: center; padding: 40px 18px; font-size: 18px; }
.site-box { max-width: 560px; }

/* ---------- Win / Fair / Lose ratings ---------- */
.wfl-row { display: flex; justify-content: center; gap: 8px; margin: 6px 0 12px; }
.wfl { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px; border-radius: 999px; font-size: 13px; background: var(--bg, rgba(127,127,127,.12)); border: 1px solid var(--line); }
.wfl i { font-style: normal; font-weight: 800; }
.wfl b { font-variant-numeric: tabular-nums; }
.wfl-w i { color: #22c58b; } .wfl-f i { color: #4f8cff; } .wfl-l i { color: #ff5a6a; }
.tc-star { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-weight: 800; white-space: nowrap; }
.tc-star i { font-style: normal; color: #f5b82e; font-size: 16px; }
.tc-rate { text-align: center; margin-top: 10px; }
.tc-rate-t { font-size: 13px; color: var(--muted); }
.rate-label { align-self: center; font-weight: 700; margin-right: 2px; }
.rate-f { color: #4f8cff; } .rate-w { }

.lb-title { text-align: center; margin: 8px 0 14px; }
.board-sec > .quick.lb-tabs { justify-content: center; }

.lb-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 24px 0; align-items: start; }
.lb-box .st-sub { text-align: center; margin: 0 0 10px; }
.lb-trio .leaders { margin: 0; max-width: none; }
@media (max-width: 900px) { .lb-trio { grid-template-columns: 1fr; } .lb-trio .leader .ls { display: inline; } }

.slot-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-soft, transparent); }
.slot-bar.full { border-color: var(--warn, #f5b82e); }
.slot-buy { display: inline-flex; align-items: center; gap: 4px; }
.slot-hint { font-size: 13px; }

.ban-note { position: sticky; top: 0; z-index: 200; padding: 10px 16px; text-align: center; font-weight: 700; background: #b3261e; color: #fff; }
#paneBans h3 { margin: 18px 0 8px; }

.gate-note { display: grid; gap: 12px; justify-items: start; padding: 16px; margin: 4px 0 8px; border: 1px dashed var(--line); border-radius: 12px; background: var(--bg-soft, transparent); }
.gate-note p { margin: 0; }
.gate-note[hidden] { display: none; }

/* ---------- Mobile layout ---------- */
.nav-burger { display: none; }
html, body { overflow-x: hidden; }
@media (max-width: 1180px) {
  .nav-inner { flex-wrap: nowrap; min-height: 54px; padding-top: 0; padding-bottom: 0; }
  .nav-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; padding: 0 11px; margin-left: auto; border: 1px solid var(--line2); border-radius: 10px; background: var(--raised); cursor: pointer; flex: none; }
  .nav-burger span { display: block; height: 2px; border-radius: 2px; background: var(--text); transition: transform .2s, opacity .2s; }
  .nav.open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.open .nav-burger span:nth-child(2) { opacity: 0; }
  .nav.open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 6px; padding: 12px 16px 16px; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 18px 30px rgba(0,0,0,.25); max-height: calc(100vh - 56px); overflow-y: auto; }
  .nav.open nav { display: flex; }
  .nav nav a:not(.btn):not(.acct-chip):not(.gem-chip):not(.rank-chip) { flex: 1 1 calc(50% - 6px); text-align: center; padding: 12px 10px; font-size: 15px; background: var(--raised); border: 1px solid var(--line); border-radius: 10px; }
  .nav nav a.active { box-shadow: inset 0 0 0 1.5px var(--cyan, var(--accent)); }
  .nav nav a.btn { flex: 1 1 100%; margin: 4px 0 0; padding: 12px; text-align: center; justify-content: center; }
  .nav nav > :not(a) , .nav nav .acct-chip, .nav nav .gem-chip, .nav nav .rank-chip { flex: 0 0 auto; }
  .nav nav .acct-chip { flex: 1 1 100%; justify-content: center; order: 5; }
  .nav nav > :not(a), .nav nav .gem-chip, .nav nav .rank-chip { order: 4; }
  .nav nav a.btn { order: 9; }
  .theme-menu { left: 0; right: auto; }
}
@media (max-width: 560px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  input, select, textarea { font-size: 16px; }
  .btn, .sbtn, button { min-height: 40px; }
  h1 { word-break: break-word; }
  .trade-card, .post-card { padding: 14px; }
  .toast { bottom: 14px; width: max-content; max-width: calc(100vw - 24px); text-align: center; }
}
@media (max-width: 720px) {
  .srv-controls { grid-template-columns: 1fr 1fr; }
  .srv-controls #srvSearch { grid-column: 1 / -1; }
}

/* ---------- Trade board + post form (slot style) ---------- */
.seg button.on { background: var(--accent); color: var(--accent-ink, #fff); box-shadow: none; }
:root:not([data-theme]) .seg button.on { background: var(--accent); color: #fff; }
.seg { border-radius: 999px; padding: 4px; }
.seg button { border-radius: 999px; padding: 8px 18px; }
.seg-wide { display: flex; width: max-content; max-width: 100%; margin: 6px auto 14px; overflow-x: auto; }
.seg-wide button { white-space: nowrap; }
.seg-sm { display: flex; width: max-content; margin: 8px auto 18px; }
.board-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.board-top h2 { margin: 0; }
.slots-line { display: flex; justify-content: center; margin: 0 0 14px; }
.slots-chip { padding: 6px 16px; border-radius: 10px; background: var(--raised); border: 1px solid var(--line); font-weight: 700; font-size: 14px; }
.slots-chip[hidden] { display: none; }

.post-panel { text-align: center; }
.post-sub { margin: -4px 0 6px; }
.slot-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 22px 0 16px; text-align: left; }
.slot-panel { position: relative; padding: 24px 14px 14px; border: 1px solid color-mix(in srgb, var(--cyan, var(--accent)) 45%, var(--line)); border-radius: 18px; background: var(--raised); box-shadow: 0 0 22px color-mix(in srgb, var(--cyan, var(--accent)) 14%, transparent); }
.slot-panel.give { --sc: var(--loss, #ff5c7a); }
.slot-panel.want { --sc: var(--win, #3dffa8); }
.slot-tag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); padding: 3px 16px; border-radius: 999px; background: var(--bg); border: 1px solid color-mix(in srgb, var(--cyan, var(--accent)) 55%, var(--line)); color: var(--cyan, var(--accent)); font-weight: 700; font-size: 14px; white-space: nowrap; }
.slot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.slot { position: relative; min-height: 104px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px; font: inherit; color: var(--text); }
.slot.open { cursor: pointer; border-style: dashed; }
.slot.open:hover { border-color: var(--cyan, var(--accent)); box-shadow: 0 0 16px color-mix(in srgb, var(--cyan, var(--accent)) 30%, transparent); }
.slot-plus { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--cyan, var(--accent)); color: var(--cyan, var(--accent)); display: grid; place-items: center; font-size: 28px; line-height: 1; font-weight: 400; }
.slot.filled { border-color: color-mix(in srgb, var(--rc) 70%, var(--line)); background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 14%, var(--bg)), var(--bg)); }
.slot-name { font-weight: 700; font-size: 13px; text-align: center; line-height: 1.15; }
.slot-val { font-size: 13px; font-weight: 800; color: var(--win, #3dffa8); }
.slot-x { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; padding: 0; min-height: 0; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--text) 18%, transparent); color: var(--text); font-size: 16px; line-height: 1; cursor: pointer; }
.slot-x:hover { background: var(--loss, #ff5c7a); color: #fff; }
.post-panel .fields { text-align: left; margin-top: 14px; }
.post-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--raised); }
.post-diff { display: flex; flex-direction: column; font-weight: 700; font-size: 14px; line-height: 1.35; }
.post-diff b.win { color: var(--win, #3dffa8); } .post-diff b.lose { color: var(--loss, #ff5c7a); } .post-diff b.fair { color: var(--cyan, var(--accent)); }
.btn-cancel, .btn-send { min-width: 84px; padding: 10px 18px; border: 0; border-radius: 8px; font: inherit; font-weight: 800; color: #fff; cursor: pointer; }
.btn-cancel { background: #d92626; } .btn-send { background: #2f9e1f; }
.btn-send:disabled { opacity: .6; }
#tradeForm.calc-only #postFields, #tradeForm.calc-only #formSend { display: none; }
#tradeForm.calc-only .post-bar { justify-content: space-between; }

/* picker */
.pk-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.6); display: grid; place-items: center; padding: 14px; }
.pk-box { width: min(560px, 100%); max-height: 82vh; display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line2, var(--line)); border-radius: 16px; overflow: hidden; }
.pk-top { display: flex; gap: 8px; padding: 12px; border-bottom: 1px solid var(--line); }
.pk-search { flex: 1; margin: 0; }
.pk-close { width: 40px; border: 1px solid var(--line); border-radius: 8px; background: var(--raised); color: var(--text); font-size: 22px; cursor: pointer; }
.pk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; padding: 12px; overflow-y: auto; }
.pk-item { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; border: 1px solid color-mix(in srgb, var(--rc) 55%, var(--line)); border-radius: 12px; background: var(--raised); color: var(--text); font: inherit; cursor: pointer; }
.pk-item:hover { border-color: var(--cyan, var(--accent)); }
.pk-name { font-size: 12px; font-weight: 700; text-align: center; line-height: 1.15; }
.pk-val { font-size: 12px; color: var(--win, #3dffa8); font-weight: 800; }
.pk-none { grid-column: 1 / -1; text-align: center; padding: 20px; }

/* board cards */
.posts.grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; align-items: start; }
.posts.list { grid-template-columns: 1fr; }
.trade-card.v2 { display: flex; flex-direction: column; gap: 10px; border-radius: 16px; padding: 12px; }
.trade-card.v2 .tc-head { flex-wrap: wrap; gap: 8px; }
.trade-card.v2 .tc-badges { order: 5; flex-basis: 100%; }
.tc-sec h4 { margin: 0 0 6px; font-size: 14px; }
.ic-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.ic-cell { position: relative; width: 74px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--rc) 55%, var(--line)); background: color-mix(in srgb, var(--rc) 10%, var(--bg)); }
.ic-name { font-size: 11px; font-weight: 700; text-align: center; line-height: 1.1; }
.ic-qty { position: absolute; top: 2px; right: 2px; padding: 1px 5px; border-radius: 6px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 800; }
.tc-sums { text-align: center; font-size: 13px; font-weight: 700; color: var(--muted); }
.trade-card.v2 .tc-rate { text-align: center; }
.trade-card.v2 .post-acts { flex-direction: column; align-items: stretch; margin-top: 2px; }
.trade-card.v2 .post-acts .btn, .trade-card.v2 .post-acts .sbtn { width: 100%; text-align: center; justify-content: center; }
.trade-card.v2 .inspect-btn { order: 2; background: #1d4ed8; color: #fff; }
.trade-card.v2 .calc-btn { order: 1; }
.posts.list .trade-card.v2 { display: grid; grid-template-columns: 200px 1fr 1fr auto; align-items: center; gap: 12px 16px; }
.posts.list .trade-card.v2 .tc-badges, .posts.list .trade-card.v2 .tc-sums, .posts.list .trade-card.v2 .tc-rate, .posts.list .trade-card.v2 .tc-note { display: none; }
.posts.list .trade-card.v2 .post-acts { flex-direction: row; }
.posts.list .trade-card.v2 .post-acts .sbtn:not(.calc-btn):not(.danger) { display: none; }
.posts.list .trade-card.v2 .tp, .posts.list .trade-card.v2 .tpanel { grid-column: 1 / -1; }
.slot-card { min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; border-radius: 18px; border: 1px solid var(--line); background: var(--raised); color: var(--muted); font: inherit; font-size: 18px; cursor: pointer; }
.slot-card .slot-ring { width: 96px; height: 96px; border-radius: 50%; border: 3px solid currentColor; display: grid; place-items: center; font-size: 52px; line-height: 1; font-weight: 300; }
.slot-card.avail { color: var(--cyan, var(--accent)); border-color: var(--cyan, var(--accent)); background: color-mix(in srgb, var(--cyan, var(--accent)) 6%, var(--bg)); }
.slot-card:disabled { opacity: .55; cursor: not-allowed; }
.slot-card:not(:disabled):hover { border-color: var(--cyan, var(--accent)); }
.slot-card.buy.hold-hint { opacity: .6; }

@media (max-width: 720px) {
  .slot-panels { grid-template-columns: 1fr; gap: 24px; }
  .posts.list .trade-card.v2 { grid-template-columns: 1fr; }
  .post-bar { flex-wrap: wrap; justify-content: center; }
  .post-diff { order: -1; flex-basis: 100%; align-items: center; }
  .btn-cancel, .btn-send { flex: 1; }
  .seg-wide button { padding: 8px 12px; font-size: 13px; }
  .posts.grid { grid-template-columns: 1fr; }
}
.trade-card.v2 .post-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.trade-card.v2 .post-acts .inspect-btn, .trade-card.v2 .post-acts .calc-btn { grid-column: 1 / -1; }
.trade-card.v2 .post-acts .sbtn { font-size: 13px; padding: 7px 8px; text-decoration: none; }
.posts.list .trade-card.v2 .post-acts { grid-template-columns: auto auto; }
.posts.list .trade-card.v2 .post-acts .inspect-btn, .posts.list .trade-card.v2 .post-acts .calc-btn { grid-column: auto; }
.posts.list .trade-card.v2 .tc-head { flex-direction: column; align-items: flex-start; }
.posts.list .trade-card.v2 .tc-star { margin-left: 0; }

/* ---------- Phone polish ---------- */
@media (max-width: 720px) {
  /* trade page: less scrolling before the useful part */
  .page-head.head-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .page-head.head-row > .btn { width: 100%; text-align: center; }
  #boardMode, .page-head p.notice { font-size: 13px; }
  .stats { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 6px; margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
  .stats .stat { flex: 0 0 132px; scroll-snap-align: start; }
  .stats .stat.wide { flex: 0 0 min(280px, 80vw); }
  .stat strong { font-size: 24px; }
  #rankCard .rank-card, #rankCard > * { font-size: 13px; }
  .panel { padding: 16px 14px; border-radius: 16px; }
  /* post form: keep 2x2 slots inside each panel, bigger tap targets */
  .slot-panels { gap: 26px; }
  .slot { min-height: 96px; }
  .slot-plus { width: 40px; height: 40px; }
  .slot-x { width: 28px; height: 28px; top: 3px; right: 3px; font-size: 18px; }
  .post-panel .fields { grid-template-columns: 1fr; }
  .post-bar { position: sticky; bottom: 8px; z-index: 20; box-shadow: 0 10px 30px rgba(0,0,0,.28); background: var(--bg); }
  .btn-cancel, .btn-send { min-height: 46px; font-size: 16px; }
  /* item picker becomes a bottom sheet */
  .pk-overlay { align-items: end; padding: 0; }
  .pk-box { width: 100%; max-height: 88vh; border-radius: 18px 18px 0 0; animation: sheet-up .22s ease-out; }
  .pk-grid { grid-template-columns: repeat(3, 1fr); }
  .pk-top { position: sticky; top: 0; background: var(--bg); }
  .pk-search { font-size: 16px; min-height: 44px; }
  .pk-close { width: 46px; }
  /* board */
  .board-top { flex-wrap: nowrap; }
  .seg-wide { width: 100%; }
  .seg-wide button { flex: 1; }
  .board-tools { grid-template-columns: 1fr 1fr; }
  .board-tools #search { grid-column: 1 / -1; }
  .board-tools #sort { grid-column: 1 / -1; }
  .board-opts { flex-direction: column; align-items: flex-start; gap: 4px; font-size: 13px; }
  .trade-card.v2 .post-acts .sbtn, .trade-card.v2 .post-acts .btn { min-height: 44px; }
  .slot-card { min-height: 200px; }
  .slot-card .slot-ring { width: 72px; height: 72px; font-size: 40px; }
  /* floating buttons never cover content */
  body { padding-bottom: env(safe-area-inset-bottom); }
}
@keyframes sheet-up { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (max-width: 380px) {
  .pk-grid { grid-template-columns: repeat(2, 1fr); }
  .slot-name { font-size: 12px; }
  .seg-wide button { padding: 8px 6px; font-size: 12.5px; }
}
.pk-grid { flex: 1 1 auto; min-height: 0; align-content: start; grid-auto-rows: max-content; }
.pk-item { min-height: 92px; justify-content: flex-start; }

/* ---------- Desktop polish ---------- */
@media (min-width: 1181px) {
  .nav-inner { max-width: 1400px; flex-wrap: nowrap; }
  .nav nav { flex-wrap: nowrap; justify-content: flex-end; gap: 2px; }
  .nav nav a { padding: 7px 10px; }
  .rank-chip .rt { display: none; }
  .nav nav .btn.small { padding: 7px 14px; }
}
@media (min-width: 1181px) and (max-width: 1400px) {
  .themer > button span:not(.dot) { display: none; }
  .themer > button { padding: 6px 9px; }
}
.wrap.wide { max-width: 1320px; }
@media (min-width: 1000px) {
  .wrap.wide .stats { grid-template-columns: repeat(5, 1fr); }
  .wrap.wide .stats .stat.wide { grid-column: 1 / -1; }
  .wrap.wide .slot-panels { max-width: 980px; margin-left: auto; margin-right: auto; }
  .wrap.wide .post-bar, .wrap.wide .form-meter, .wrap.wide .post-panel .fields { max-width: 980px; margin-left: auto; margin-right: auto; }
  .wrap.wide .posts.grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  .wrap.wide .board-tools { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); }
  .trade-card.v2 { transition: transform .15s, box-shadow .15s; }
  .trade-card.v2:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0,0,0,.18); }
  .slot.filled { transition: transform .12s; }
  .slot.filled:hover { transform: scale(1.02); }
  .pk-box { width: 720px; }
  .pk-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
}

/* votable Win / Fair / Lose pills */
button.wfl { font: inherit; font-size: 13px; color: var(--text); cursor: pointer; min-height: 0; }
.wfl-row.votable .wfl:not(:disabled):hover { transform: translateY(-2px); border-color: currentColor; }
.wfl-row.votable .wfl:disabled { cursor: not-allowed; opacity: .75; }
.wfl.mine { box-shadow: 0 0 0 2px var(--accent); }
.wfl-w.mine { background: color-mix(in srgb, #22c58b 22%, var(--bg)); }
.wfl-f.mine { background: color-mix(in srgb, #4f8cff 22%, var(--bg)); }
.wfl-l.mine { background: color-mix(in srgb, #ff5a6a 22%, var(--bg)); }
.tc-rate-hint { font-size: 12px; color: var(--muted); text-align: center; margin: -6px 0 6px; min-height: 0; }
.tc-rate-hint:empty { display: none; }

/* ============ Limitless (anime) theme: icy white, electric blue and violet energy ============ */
:root[data-theme="limitless"] { --bg:#050816; --surface:#0a1030; --raised:#101a46; --line:#1b2a63; --line2:#2d4392; --card-top:#0d1538; --card-bot:#070c26; --text:#f4f8ff; --muted:#a3b4e6; --accent:#5ad2ff; --accent2:#a66bff; --accent-ink:#021019; --cyan:#7fe0ff; --glow:#6aa8ff; --win:#46f0b4; --loss:#ff5d7f; --warn:#ffd166; }
:root[data-theme="limitless"] body { background: radial-gradient(900px 520px at 85% -140px, rgba(166,107,255,.28), transparent 70%), radial-gradient(900px 520px at 5% 0%, rgba(90,210,255,.22), transparent 70%), var(--bg); }
/* two energy orbs slowly drifting toward each other */
:root[data-theme="limitless"] body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(40% 30% at 15% 25%, rgba(90,210,255,.10), transparent 70%), radial-gradient(40% 30% at 85% 70%, rgba(166,107,255,.10), transparent 70%); }
@keyframes lim-orbs { from { transform: translate3d(0,0,0) scale(1); opacity: .65; } to { transform: translate3d(7%, 6%, 0) scale(1.18); opacity: 1; } }
/* drifting white sparkles */
:root[data-theme="limitless"]::after { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .75; background-image: radial-gradient(2px 2px at 12% 18%, #fff, transparent 60%), radial-gradient(1.5px 1.5px at 33% 72%, #cfeaff, transparent 60%), radial-gradient(2px 2px at 58% 28%, #fff, transparent 60%), radial-gradient(1.5px 1.5px at 76% 80%, #e3d4ff, transparent 60%), radial-gradient(2px 2px at 90% 12%, #fff, transparent 60%), radial-gradient(1.5px 1.5px at 44% 48%, #bfe9ff, transparent 60%), radial-gradient(1.5px 1.5px at 8% 86%, #fff, transparent 60%); background-size: 520px 520px; animation: lim-twinkle 7s linear infinite; }
@keyframes lim-twinkle { from { background-position: 0 0; opacity: .5; } 50% { opacity: .95; } to { background-position: 130px 520px; opacity: .5; } }
:root[data-theme="limitless"] .nav { background: rgba(5, 8, 22, .88); border-image: linear-gradient(90deg, transparent, #5ad2ff, #a66bff, transparent) 1; }
:root[data-theme="limitless"] .btn { color: #021019 !important; background: linear-gradient(135deg, #7fe0ff, #a66bff); box-shadow: 0 0 22px rgba(106,168,255,.38); border-color: transparent; }
:root[data-theme="limitless"] .btn:hover { box-shadow: 0 0 34px rgba(166,107,255,.6); }
:root[data-theme="limitless"] .btn.ghost { color: var(--text) !important; background: transparent; box-shadow: none; border-color: var(--line2); }
:root[data-theme="limitless"] .card, :root[data-theme="limitless"] .panel, :root[data-theme="limitless"] .tile, :root[data-theme="limitless"] .offer, :root[data-theme="limitless"] .hs, :root[data-theme="limitless"] .step, :root[data-theme="limitless"] .feat, :root[data-theme="limitless"] .top-card, :root[data-theme="limitless"] .wiki-card, :root[data-theme="limitless"] .stat, :root[data-theme="limitless"] .trade-card { background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)), var(--surface); border: 1px solid color-mix(in srgb, var(--cyan) 40%, var(--line)); border-radius: 16px; backdrop-filter: blur(6px); }
:root[data-theme="limitless"] .offer:hover, :root[data-theme="limitless"] .tile:hover, :root[data-theme="limitless"] .top-card:hover, :root[data-theme="limitless"] .trade-card:hover { border-color: var(--cyan); box-shadow: 0 0 30px rgba(90,210,255,.28), 0 0 60px rgba(166,107,255,.14); }
:root[data-theme="limitless"] .hero h1, :root[data-theme="limitless"] .offer-head h1, :root[data-theme="limitless"] .page-head h1 { background: linear-gradient(90deg, #ffffff, #bfe9ff 45%, #c9b0ff); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 0 18px rgba(127,224,255,.45)); }
/* a thin rotating ring behind the home hero, like a barrier */
:root[data-theme="limitless"] .hero { position: relative; }
:root[data-theme="limitless"] .hero::before { content: ""; position: absolute; right: 4%; top: 6%; width: 400px; height: 400px; border-radius: 50%; pointer-events: none; opacity: .9; background: conic-gradient(from 0deg, transparent 0 20%, rgba(127,224,255,.9) 24%, transparent 30% 60%, rgba(166,107,255,.9) 64%, transparent 70%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); animation: lim-spin 14s linear infinite; z-index: 2; }
@keyframes lim-spin { to { transform: rotate(360deg); } }
:root[data-theme="limitless"] .logo .mark { filter: drop-shadow(0 0 10px rgba(127,224,255,.7)); }
:root[data-theme="limitless"] .cta { background: linear-gradient(120deg, #0f1c52, #3a2a86); border: 1px solid rgba(127,224,255,.35); }
:root[data-theme="limitless"] .toast { background: #0d1538; color: #fff; border: 1px solid #5ad2ff; box-shadow: 0 0 24px rgba(90,210,255,.4); }
:root[data-theme="limitless"] .slot.open:hover, :root[data-theme="limitless"] .slot-panel { box-shadow: 0 0 24px rgba(90,210,255,.25); }
:root[data-theme="limitless"] .seg button.on { color: #021019; background: linear-gradient(135deg, #7fe0ff, #a66bff); }
:root[data-theme="limitless"] ::selection { background: #a66bff; color: #fff; }
@media (max-width: 720px) { :root[data-theme="limitless"] .hero::before { width: 200px; height: 200px; right: -40px; opacity: .45; } }
@media (prefers-reduced-motion: reduce) { :root[data-theme="limitless"] body::before, :root[data-theme="limitless"]::after, :root[data-theme="limitless"] .hero::before { animation: none; } }

/* ---------- Limitless powers: Red, Blue, Purple, Domain ---------- */
.lim-powers { position: fixed; left: 12px; bottom: 12px; z-index: 55; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.lim-toggle { font: 800 13px var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: #021019; background: linear-gradient(135deg, #7fe0ff, #a66bff); border: 0; border-radius: 999px; padding: 9px 16px; cursor: pointer; box-shadow: 0 0 22px rgba(127,224,255,.5); min-height: 0; }
.lim-row { display: flex; flex-direction: column; gap: 6px; }
.lim-row[hidden] { display: none; }
.lim-btn { font: 800 13px var(--font-display); color: #fff; border: 1px solid transparent; border-radius: 999px; padding: 8px 18px; cursor: pointer; min-height: 0; text-align: left; backdrop-filter: blur(6px); }
.lim-btn.red { background: rgba(255,61,90,.28); border-color: #ff3d5a; box-shadow: 0 0 16px rgba(255,61,90,.55); }
.lim-btn.blue { background: rgba(60,160,255,.28); border-color: #3ca0ff; box-shadow: 0 0 16px rgba(60,160,255,.55); }
.lim-btn.purple { background: rgba(166,107,255,.3); border-color: #a66bff; box-shadow: 0 0 16px rgba(166,107,255,.6); }
.lim-btn.domain { background: rgba(10,16,48,.85); border-color: #cfe9ff; box-shadow: 0 0 16px rgba(207,233,255,.5); }
.lim-btn:hover { filter: brightness(1.3); }

.lim-stage { position: fixed; inset: 0; z-index: 70; pointer-events: none; overflow: hidden; }
.lim-orb { position: absolute; border-radius: 50%; width: 120px; height: 120px; left: calc(50% - 60px); top: calc(50% - 60px); }
.lim-orb.red { background: radial-gradient(circle at 40% 35%, #fff4f4, #ff6b7f 30%, #ff1f45 60%, rgba(255,31,69,0) 72%); box-shadow: 0 0 60px 20px rgba(255,31,69,.7); }
.lim-orb.blue { background: radial-gradient(circle at 40% 35%, #f2fbff, #7fd4ff 30%, #2d8cff 60%, rgba(45,140,255,0) 72%); box-shadow: 0 0 60px 20px rgba(45,140,255,.75); }
.lim-orb.purple { background: radial-gradient(circle at 40% 35%, #fff, #e0c4ff 25%, #a66bff 55%, rgba(166,107,255,0) 72%); box-shadow: 0 0 90px 30px rgba(166,107,255,.8); }
.lim-orb.charge { left: 12%; animation: lim-charge .7s ease-in forwards, lim-fade .5s 1.1s forwards; }
@keyframes lim-charge { from { transform: scale(.1); opacity: .3; } to { transform: scale(1.3); opacity: 1; } }
@keyframes lim-fade { to { opacity: 0; transform: scale(2); } }
.lim-orb.pull { animation: lim-pullorb 1.8s ease-in-out forwards; }
@keyframes lim-pullorb { 0% { transform: scale(.2); opacity: 0; } 25% { transform: scale(1); opacity: 1; } 80% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(0); opacity: 0; } }
.lim-ring { position: absolute; left: calc(50% - 40px); top: calc(50% - 40px); width: 80px; height: 80px; border-radius: 50%; border: 4px solid; }
.lim-ring.red { left: 12%; margin-left: -10px; border-color: #ff3d5a; box-shadow: 0 0 40px #ff3d5a, inset 0 0 40px #ff3d5a; }
.lim-ring.out { animation: lim-out 1.1s ease-out forwards; }
@keyframes lim-out { from { transform: scale(.5); opacity: 1; } to { transform: scale(34); opacity: 0; } }
.lim-ring.blue { border-color: #5ab8ff; box-shadow: 0 0 30px #3ca0ff, inset 0 0 30px #3ca0ff; }
.lim-ring.in { animation: lim-in 1.6s ease-in forwards; }
.lim-ring.in.d2 { animation-delay: .25s; } .lim-ring.in.d3 { animation-delay: .5s; }
@keyframes lim-in { from { transform: scale(28); opacity: 0; } 20% { opacity: 1; } to { transform: scale(.3); opacity: 0; } }
.lim-ring.purple { border-color: #c79bff; box-shadow: 0 0 50px #a66bff, inset 0 0 50px #a66bff; }
.lim-orb.fly-l { animation: lim-fly-l .9s cubic-bezier(.6,0,.9,.6) forwards; }
.lim-orb.fly-r { animation: lim-fly-r .9s cubic-bezier(.6,0,.9,.6) forwards; }
@keyframes lim-fly-l { from { transform: translateX(-60vw) scale(.6); } to { transform: translateX(-30px) scale(1); } }
@keyframes lim-fly-r { from { transform: translateX(60vw) scale(.6); } to { transform: translateX(30px) scale(1); } }
.lim-flash { position: absolute; inset: 0; background: radial-gradient(circle at center, #fff, rgba(220,190,255,.7) 40%, transparent 70%); animation: lim-flash .6s ease-out forwards; }
@keyframes lim-flash { from { opacity: 1; } to { opacity: 0; } }
.lim-orb.grow { animation: lim-grow 1.9s ease-out forwards; }
@keyframes lim-grow { 0% { transform: scale(.4); opacity: 1; } 40% { transform: scale(2.6); opacity: 1; } 100% { transform: scale(7); opacity: 0; } }
.lim-beam { position: absolute; left: 0; right: 0; top: calc(50% - 60px); height: 120px; background: linear-gradient(180deg, transparent, rgba(166,107,255,.85) 30%, #fff 50%, rgba(166,107,255,.85) 70%, transparent); filter: blur(4px); transform-origin: left center; animation: lim-beam 1.1s ease-out forwards; }
@keyframes lim-beam { from { transform: scaleX(0); opacity: 1; } 60% { transform: scaleX(1); opacity: 1; } to { transform: scaleX(1); opacity: 0; } }

/* screen shake and pull */
body.lim-shake { animation: lim-shake .45s linear 2; }
@keyframes lim-shake { 0%,100% { transform: translate(0,0); } 20% { transform: translate(-6px, 3px); } 40% { transform: translate(5px, -4px); } 60% { transform: translate(-4px, -3px); } 80% { transform: translate(4px, 4px); } }
body.lim-pulled { animation: lim-pulled 1.5s ease-in-out; }
@keyframes lim-pulled { 0%,100% { transform: scale(1); } 45% { transform: scale(.965); filter: blur(1px); } }

/* Domain */
.lim-domain { z-index: 75; }
.lim-void { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, #02040f 0%, #050a26 55%, #0a0f3a 100%); clip-path: circle(0% at 50% 50%); animation: lim-expand 1.3s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes lim-expand { to { clip-path: circle(150% at 50% 50%); } }
.lim-domain.closing .lim-void { animation: lim-collapse 1.1s ease-in forwards; }
@keyframes lim-collapse { from { clip-path: circle(150% at 50% 50%); } to { clip-path: circle(0% at 50% 50%); } }
.lim-stars { position: absolute; inset: -20%; opacity: 0; background-image: radial-gradient(2px 2px at 10% 20%, #fff, transparent 60%), radial-gradient(1.5px 1.5px at 30% 70%, #bfe9ff, transparent 60%), radial-gradient(2.5px 2.5px at 55% 35%, #fff, transparent 60%), radial-gradient(1.5px 1.5px at 75% 80%, #e3d4ff, transparent 60%), radial-gradient(2px 2px at 90% 15%, #fff, transparent 60%), radial-gradient(1.5px 1.5px at 45% 55%, #9fdcff, transparent 60%), radial-gradient(2px 2px at 65% 10%, #fff, transparent 60%), radial-gradient(1.5px 1.5px at 20% 90%, #fff, transparent 60%); background-size: 380px 380px; animation: lim-starfade .8s .7s forwards, lim-drift 14s linear infinite; }
.lim-stars.s2 { background-size: 240px 240px; animation: lim-starfade .8s .9s forwards, lim-drift 8s linear infinite reverse; }
@keyframes lim-starfade { to { opacity: 1; } }
@keyframes lim-drift { from { transform: translate(0,0) rotate(0); } to { transform: translate(-380px, 380px) rotate(8deg); } }
.lim-domain.closing .lim-stars, .lim-domain.closing .lim-dring, .lim-domain.closing .lim-dtext { transition: opacity .5s; opacity: 0 !important; animation: none; }
.lim-dring { position: absolute; left: 50%; top: 50%; border-radius: 50%; opacity: 0; border: 2px solid rgba(127,224,255,.7); box-shadow: 0 0 40px rgba(127,224,255,.5), inset 0 0 40px rgba(166,107,255,.4); animation: lim-ringin .8s 1s forwards, lim-ringspin 10s linear infinite; }
.lim-dring.r1 { width: min(70vmin, 520px); height: min(70vmin, 520px); margin: calc(min(70vmin, 520px) / -2) 0 0 calc(min(70vmin, 520px) / -2); border-style: dashed; }
.lim-dring.r2 { width: min(48vmin, 360px); height: min(48vmin, 360px); margin: calc(min(48vmin, 360px) / -2) 0 0 calc(min(48vmin, 360px) / -2); border-color: rgba(166,107,255,.8); animation: lim-ringin .8s 1.2s forwards, lim-ringspin 7s linear infinite reverse; }
.lim-dring.r3 { width: min(26vmin, 200px); height: min(26vmin, 200px); margin: calc(min(26vmin, 200px) / -2) 0 0 calc(min(26vmin, 200px) / -2); border-color: rgba(255,255,255,.85); border-style: dotted; animation: lim-ringin .8s 1.4s forwards, lim-ringspin 5s linear infinite; }
@keyframes lim-ringin { to { opacity: 1; } }
@keyframes lim-ringspin { to { transform: rotate(360deg); } }
.lim-dtext { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; font: 800 clamp(34px, 9vw, 92px) var(--font-display); letter-spacing: .3em; color: #fff; text-shadow: 0 0 24px #7fe0ff, 0 0 60px #a66bff; opacity: 0; animation: lim-textin 1.2s 1.6s ease-out forwards; }
@keyframes lim-textin { from { opacity: 0; letter-spacing: .8em; filter: blur(8px); } to { opacity: 1; letter-spacing: .3em; filter: blur(0); } }
@media (prefers-reduced-motion: reduce) { body.lim-shake, body.lim-pulled { animation: none; } .lim-dring, .lim-stars { animation-duration: .01s; } }
@media (max-width: 720px) { .lim-powers { bottom: 74px; } }

/* ---- Limitless ambient: red + blue orbs with swirling cores and flame tails merge into a purple swirl (24s loop) ---- */
.lim-amb { position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; mix-blend-mode: screen; }
.a-orb, .a-shock { position: absolute; left: 50%; top: 46%; opacity: 0; will-change: transform, opacity; }
.a-orb { width: 170px; height: 170px; margin: -85px 0 0 -85px; border-radius: 50%; --c1: #ff2d4d; --c2: #ff9aa8; --cg: rgba(255,45,77,.55); }
.a-blue { --c1: #2d8cff; --c2: #a5dcff; --cg: rgba(45,140,255,.55); }
.a-orb::before { content: ""; position: absolute; inset: -8%; border-radius: 50%; background: conic-gradient(from 0deg, var(--c1), transparent 12%, var(--c2) 26%, transparent 40%, var(--c1) 55%, transparent 68%, var(--c2) 82%, var(--c1)); -webkit-mask: radial-gradient(circle, transparent 22%, #000 46%, rgba(0,0,0,.6) 62%, transparent 74%); mask: radial-gradient(circle, transparent 22%, #000 46%, rgba(0,0,0,.6) 62%, transparent 74%); filter: blur(1.5px); animation: a-spin 1.8s linear infinite; }
.a-orb::after { content: ""; position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(circle at 42% 38%, #fff 0, var(--c2) 24%, var(--c1) 58%, rgba(0,0,0,0) 78%); box-shadow: 0 0 60px 26px var(--cg), 0 0 120px 50px var(--cg); animation: a-pulse 1.6s ease-in-out infinite; }
.a-orb .t { position: absolute; top: 50%; height: 62px; margin-top: -31px; width: 340px; border-radius: 50%; filter: blur(9px); opacity: .85; }
.a-red .t { right: 52%; background: linear-gradient(to left, var(--c1), rgba(255,45,77,0)); transform-origin: right center; }
.a-blue .t { left: 52%; background: linear-gradient(to right, var(--c1), rgba(45,140,255,0)); transform-origin: left center; }
.a-orb .t.t2 { height: 30px; margin-top: -15px; width: 420px; opacity: .6; }
.a-red .t.t2 { transform: rotate(-9deg); } .a-blue .t.t2 { transform: rotate(9deg); }
.a-red { animation: a-red 24s ease-in-out infinite; }
.a-blue { animation: a-blue 24s ease-in-out infinite; }
/* purple: red, magenta and blue swirl, spinning like a galaxy */
.a-purple { width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%; animation: a-purple 24s ease-out infinite; }
.a-purple::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, #ff3b6b, #c13bff 20%, #3b6bff 40%, #c13bff 55%, #ff3b6b 70%, #8a3bff 85%, #ff3b6b); -webkit-mask: radial-gradient(circle, rgba(0,0,0,.9) 8%, #000 30%, rgba(0,0,0,.55) 52%, transparent 70%); mask: radial-gradient(circle, rgba(0,0,0,.9) 8%, #000 30%, rgba(0,0,0,.55) 52%, transparent 70%); filter: blur(3px); animation: a-spin .9s linear infinite; }
.a-purple::after { content: ""; position: absolute; inset: 26%; border-radius: 50%; background: radial-gradient(circle, #fff 0, #ffd1ff 18%, #e03cff 45%, rgba(160,60,255,0) 75%); box-shadow: 0 0 90px 40px rgba(210,60,255,.65), 0 0 180px 80px rgba(150,70,255,.45); }
.a-shock { width: 80px; height: 80px; margin: -40px 0 0 -40px; border-radius: 50%; border: 3px solid #d29bff; box-shadow: 0 0 40px #b04bff, inset 0 0 30px #b04bff; animation: a-shock 24s ease-out infinite; }
@keyframes a-spin { to { transform: rotate(360deg); } }
@keyframes a-pulse { 50% { transform: scale(1.1); filter: brightness(1.25); } }
@keyframes a-red { 0% { transform: translate(-44vw,-16vh) scale(.6); opacity: 0; } 8% { opacity: .95; } 40% { transform: translate(-16vw,-5vh) scale(1); opacity: 1; } 58% { transform: translate(-6vw,-1vh) scale(1.08); } 64% { transform: translate(-2.2vw,0) scale(1.05); opacity: 1; } 69% { transform: translate(0,0) scale(.55); opacity: .7; } 72%, 100% { transform: translate(0,0) scale(.2); opacity: 0; } }
@keyframes a-blue { 0% { transform: translate(44vw,15vh) scale(.6); opacity: 0; } 8% { opacity: .95; } 40% { transform: translate(16vw,5vh) scale(1); opacity: 1; } 58% { transform: translate(6vw,1vh) scale(1.08); } 64% { transform: translate(2.2vw,0) scale(1.05); opacity: 1; } 69% { transform: translate(0,0) scale(.55); opacity: .7; } 72%, 100% { transform: translate(0,0) scale(.2); opacity: 0; } }
@keyframes a-purple { 0%, 63% { transform: scale(.1); opacity: 0; } 67% { transform: scale(.5); opacity: 1; } 76% { transform: scale(1.25); opacity: 1; } 84% { transform: scale(1.7); opacity: .9; } 94%, 100% { transform: scale(3.2); opacity: 0; } }
@keyframes a-shock { 0%, 67% { transform: scale(.3); opacity: 0; } 69% { opacity: .95; } 88% { transform: scale(30); opacity: 0; } 100% { transform: scale(30); opacity: 0; } }
@media (max-width: 720px) { .a-orb { width: 110px; height: 110px; margin: -55px 0 0 -55px; } .a-orb .t { width: 200px; height: 40px; margin-top: -20px; } .a-orb .t.t2 { width: 240px; } .a-purple { width: 200px; height: 200px; margin: -100px 0 0 -100px; } }
@media (prefers-reduced-motion: reduce) { .lim-amb { display: none; } }

/* ---- more orb detail: plasma, rings, sparks, lightning, glass highlight, spiral arms ---- */
.a-orb .plasma { position: absolute; inset: 12%; border-radius: 50%; background: repeating-conic-gradient(from 0deg, var(--c1) 0 8deg, transparent 8deg 18deg, var(--c2) 18deg 22deg, transparent 22deg 40deg); -webkit-mask: radial-gradient(circle, transparent 18%, #000 40%, rgba(0,0,0,.5) 62%, transparent 74%); mask: radial-gradient(circle, transparent 18%, #000 40%, rgba(0,0,0,.5) 62%, transparent 74%); filter: blur(2.5px); opacity: .8; animation: a-spin-r 2.6s linear infinite; }
.a-orb .ring { position: absolute; border-radius: 50%; pointer-events: none; }
.a-orb .ring.r1 { inset: -14%; border: 2px dashed var(--c2); opacity: .8; box-shadow: 0 0 14px var(--c1); animation: a-spin 6s linear infinite; }
.a-orb .ring.r2 { inset: 4%; border: 2px solid var(--c1); opacity: .75; box-shadow: 0 0 16px var(--c1), inset 0 0 16px var(--c1); animation: a-spin-r 4s linear infinite; border-top-color: transparent; border-bottom-color: transparent; }
.a-orb .ring.r3 { inset: -34%; border: 1px dotted var(--c2); opacity: .55; animation: a-spin-r 14s linear infinite; }
.a-orb .spk { position: absolute; inset: -30%; border-radius: 50%; animation: a-spin 3.2s linear infinite; background: radial-gradient(4px 4px at 50% 2%, #fff, transparent), radial-gradient(3px 3px at 96% 40%, var(--c2), transparent), radial-gradient(3px 3px at 20% 90%, #fff, transparent), radial-gradient(2px 2px at 6% 30%, var(--c2), transparent), radial-gradient(3px 3px at 74% 92%, #fff, transparent), radial-gradient(2px 2px at 84% 10%, var(--c2), transparent); filter: drop-shadow(0 0 4px var(--c1)); }
.a-orb .arc { position: absolute; inset: -18%; border-radius: 50%; background: conic-gradient(from 20deg, transparent 0 6%, #fff 6.4%, transparent 7.2% 38%, var(--c2) 38.4%, transparent 39.4% 71%, #fff 71.3%, transparent 72.2%); -webkit-mask: radial-gradient(circle, transparent 46%, #000 52%, #000 66%, transparent 72%); mask: radial-gradient(circle, transparent 46%, #000 52%, #000 66%, transparent 72%); filter: blur(.6px) drop-shadow(0 0 5px var(--c1)); animation: a-flicker .55s steps(2, end) infinite, a-spin 2.1s linear infinite; }
.a-orb .arc.a2 { transform: rotate(120deg); animation-duration: .8s, 3.3s; animation-direction: normal, reverse; opacity: .8; }
.a-orb .gloss { position: absolute; left: 30%; top: 24%; width: 24%; height: 14%; border-radius: 50%; background: radial-gradient(ellipse, rgba(255,255,255,.95), rgba(255,255,255,0) 70%); transform: rotate(-30deg); filter: blur(1px); }
.a-orb .t.t3 { height: 16px; margin-top: -8px; width: 300px; opacity: .8; filter: blur(5px); }
.a-red .t.t3 { transform: rotate(14deg); } .a-blue .t.t3 { transform: rotate(-14deg); }
.a-orb .t { animation: a-wave 1.3s ease-in-out infinite alternate; }
.a-orb .t.t2 { animation-duration: 1.7s; } .a-orb .t.t3 { animation-duration: 1s; }
/* purple: galaxy arms */
.a-purple .arms { position: absolute; inset: 4%; border-radius: 50%; background: repeating-conic-gradient(from 0deg, #ff3b6b 0 10deg, #c13bff 10deg 22deg, #3b6bff 22deg 34deg, transparent 34deg 60deg); -webkit-mask: radial-gradient(circle, rgba(0,0,0,.6) 6%, #000 24%, rgba(0,0,0,.55) 50%, transparent 68%); mask: radial-gradient(circle, rgba(0,0,0,.6) 6%, #000 24%, rgba(0,0,0,.55) 50%, transparent 68%); filter: blur(4px); opacity: .85; animation: a-spin .7s linear infinite; }
.a-purple .arms.ar2 { inset: 14%; opacity: .7; animation: a-spin-r 1.1s linear infinite; filter: blur(3px) hue-rotate(40deg); }
.a-purple { --c1: #c13bff; --c2: #ffd1ff; }
.a-purple .ring.r1 { inset: -6%; } .a-purple .ring.r3 { inset: -22%; }
.a-shock.s2 { border-color: #7fe0ff; box-shadow: 0 0 30px #3ca0ff, inset 0 0 20px #3ca0ff; animation-delay: .35s; }
@keyframes a-spin-r { to { transform: rotate(-360deg); } }
@keyframes a-flicker { 0% { opacity: .15; } 50% { opacity: 1; } 100% { opacity: .45; } }
@keyframes a-wave { from { transform: scaleY(.8) translateY(-3px); } to { transform: scaleY(1.2) translateY(3px); } }
.a-red .t.t2 { animation-name: a-wave; } 
@media (prefers-reduced-motion: reduce) { .a-orb *, .a-orb::before, .a-orb::after { animation: none !important; } }

/* ---- Domain: a black sphere ringed by a blue galaxy, with white ink splattering across the page ---- */
.lim-void { background: radial-gradient(circle at 50% 50%, #02060e 0%, #061426 45%, #0b2038 100%); }
.lim-domain .lim-dring, .lim-domain .lim-dtext { display: none; }
.dm-smoke { position: absolute; left: -10%; right: -10%; top: 30%; height: 38%; opacity: 0; background: radial-gradient(40% 50% at 30% 50%, rgba(120,160,200,.35), transparent 70%), radial-gradient(35% 45% at 65% 55%, rgba(90,140,190,.4), transparent 70%), radial-gradient(30% 40% at 90% 45%, rgba(150,190,230,.3), transparent 70%); filter: blur(22px); transform: rotate(-9deg); animation: dm-fade 1s .9s forwards, dm-sway 7s ease-in-out infinite alternate; }
.dm-smoke.s2 { top: 45%; height: 30%; transform: rotate(-4deg); animation-delay: 1.2s, 0s; opacity: 0; filter: blur(30px); }
@keyframes dm-fade { to { opacity: 1; } }
@keyframes dm-sway { from { translate: -3% 0; } to { translate: 3% 2%; } }
.dm-gal { position: absolute; left: 50%; top: 50%; width: min(78vmin, 700px); height: min(78vmin, 700px); margin: calc(min(78vmin, 700px) / -2) 0 0 calc(min(78vmin, 700px) / -2); border-radius: 50%; opacity: 0; background: conic-gradient(from 0deg, rgba(210,235,255,.95), rgba(90,150,210,.25) 12%, rgba(190,225,255,.85) 24%, rgba(60,110,170,.2) 38%, rgba(220,240,255,.9) 52%, rgba(80,140,200,.25) 66%, rgba(200,230,255,.85) 80%, rgba(210,235,255,.95)); -webkit-mask: radial-gradient(circle, transparent 36%, #000 40%, rgba(0,0,0,.85) 55%, rgba(0,0,0,.35) 76%, transparent 86%); mask: radial-gradient(circle, transparent 36%, #000 40%, rgba(0,0,0,.85) 55%, rgba(0,0,0,.35) 76%, transparent 86%); filter: blur(3px) drop-shadow(0 0 30px rgba(120,190,255,.7)); animation: dm-fade .9s .6s forwards, a-spin 18s linear infinite; }
.dm-gal.g2 { width: min(60vmin, 540px); height: min(60vmin, 540px); margin: calc(min(60vmin, 540px) / -2) 0 0 calc(min(60vmin, 540px) / -2); opacity: 0; animation: dm-fade .9s .8s forwards, a-spin-r 11s linear infinite; filter: blur(2px) brightness(1.15); }
.dm-pulse { position: absolute; left: 50%; top: 50%; width: min(40vmin, 360px); height: min(40vmin, 360px); margin: calc(min(40vmin, 360px) / -2) 0 0 calc(min(40vmin, 360px) / -2); border-radius: 50%; border: 3px solid rgba(160,210,255,.8); box-shadow: 0 0 34px rgba(120,190,255,.8), inset 0 0 34px rgba(120,190,255,.5); opacity: 0; animation: dm-pulse 3s 1s ease-out infinite; }
.dm-pulse.p2 { animation-delay: 2s; } .dm-pulse.p3 { animation-delay: 3s; }
@keyframes dm-pulse { 0% { transform: scale(.8); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } }
.dm-sphere { position: absolute; left: 50%; top: 50%; width: min(34vmin, 310px); height: min(34vmin, 310px); margin: calc(min(34vmin, 310px) / -2) 0 0 calc(min(34vmin, 310px) / -2); border-radius: 50%; background: radial-gradient(circle at 50% 50%, #000 55%, #02060c 100%); border: 2px solid rgba(190,225,255,.75); box-shadow: 0 0 30px 6px rgba(120,190,255,.7), 0 0 90px 20px rgba(80,150,230,.45), inset 0 0 40px rgba(110,180,255,.55); transform: scale(0); animation: dm-pop .8s .5s cubic-bezier(.2,1.4,.4,1) forwards; }
@keyframes dm-pop { to { transform: scale(1); } }
.dm-splat { position: absolute; width: 0; height: 0; opacity: 0; transform: scale(.1); filter: url(#limgoo) drop-shadow(0 0 12px rgba(255,255,255,.95)); animation: dm-splat .45s cubic-bezier(.1,.9,.3,1) forwards; }
.dm-splat.dark { filter: url(#limgoo); }
.dm-splat.dark .dm-dot { background: #000; }
.dm-splat .dm-dot { position: absolute; border-radius: 50%; background: #fff; }
@keyframes dm-splat { 0% { opacity: 0; transform: scale(.1); } 60% { opacity: 1; transform: scale(1.18); } 100% { opacity: 1; transform: scale(1); } }
.dm-drop { position: absolute; border-radius: 50%; background: #fff; opacity: 0; box-shadow: 0 0 8px #fff; animation: dm-drop .35s ease-out forwards; }
.dm-drop.streak { border-radius: 2px; }
@keyframes dm-drop { from { opacity: 0; scale: .2; } to { opacity: .95; scale: 1; } }
.lim-domain.closing .dm-gal, .lim-domain.closing .dm-smoke, .lim-domain.closing .dm-pulse, .lim-domain.closing .dm-sphere, .lim-domain.closing .dm-splat, .lim-domain.closing .dm-drop { transition: opacity .6s; opacity: 0 !important; animation: none; }
@media (prefers-reduced-motion: reduce) { .dm-gal, .dm-smoke, .dm-pulse, .dm-splat, .dm-drop, .dm-sphere { animation-duration: .01s !important; animation-delay: 0s !important; } }

.dm-gal.g2 { background: repeating-radial-gradient(circle, rgba(220,240,255,.0) 0 7px, rgba(220,240,255,.75) 8px 9px, rgba(220,240,255,0) 10px 22px), conic-gradient(from 40deg, rgba(190,225,255,.7), rgba(60,110,170,.1) 20%, rgba(200,230,255,.65) 45%, rgba(60,110,170,.1) 70%, rgba(190,225,255,.7)); -webkit-mask: radial-gradient(circle, transparent 46%, #000 52%, rgba(0,0,0,.7) 72%, transparent 88%); mask: radial-gradient(circle, transparent 46%, #000 52%, rgba(0,0,0,.7) 72%, transparent 88%); }

/* ---- Domain: uses your picture (images/domain.jpg) as the scene ---- */
.dm-pic { position: absolute; inset: 0; background: #02060e url(images/domain-base.jpg) center / cover no-repeat; clip-path: circle(0% at 50% 50%); transform: scale(1.14); animation: lim-expand 1.3s cubic-bezier(.2,.7,.2,1) forwards, dm-zoom 6s ease-out forwards; }
@keyframes dm-zoom { to { transform: scale(1); } }
.lim-domain.closing .dm-pic { animation: lim-collapse 1.1s ease-in forwards; }
.dm-vig { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%); opacity: 0; animation: dm-fade 1s .6s forwards; }
.dm-flash { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, #fff, rgba(190,225,255,.9) 45%, rgba(190,225,255,0) 75%); opacity: 0; animation: dm-flash .7s .45s ease-out; }
@keyframes dm-flash { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
.lim-domain.closing .dm-vig { transition: opacity .6s; opacity: 0 !important; animation: none; }
@media (prefers-reduced-motion: reduce) { .dm-pic, .dm-flash, .dm-vig { animation-duration: .01s !important; animation-delay: 0s !important; } }

/* the white ink pieces appear after the sphere scene, one after another */
.dm-marks { position: absolute; left: 50%; top: 50%; width: max(100vw, calc(100vh * 1.5947)); aspect-ratio: 1920 / 1204; transform: translate(-50%, -50%); }
.dm-mark { position: absolute; opacity: 0; transform: scale(.15); filter: drop-shadow(0 0 7px rgba(255,255,255,.85)); animation: dm-slap .28s cubic-bezier(.1,.9,.25,1.2) forwards; pointer-events: none; }
@keyframes dm-slap { 0% { opacity: 0; transform: scale(.15); } 55% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .dm-mark { animation-duration: .01s !important; animation-delay: 0s !important; } }

/* ====== Limitless v3: orbs from the user's picture, new powers, new domain ====== */
.lim-amb { mix-blend-mode: normal; }
.lx-pt { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform, opacity; }
.lx-img { position: absolute; max-width: none; pointer-events: none; user-select: none; }
.lx-ring { position: absolute; width: 100px; height: 100px; margin: -50px 0 0 -50px; border: 4px solid #fff; border-radius: 50%; opacity: 0; will-change: transform, opacity; }
.lx-glow { position: absolute; border-radius: 50%; opacity: 0; pointer-events: none; will-change: transform, opacity; }
.lx-p { position: absolute; border-radius: 3px; pointer-events: none; will-change: transform, opacity; }
.lx-veil, .lx-flash, .lx-edge { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.lx-edge { box-shadow: inset 0 0 120px 30px rgba(60,160,255,.85), inset 0 0 300px 80px rgba(30,100,255,.5); }
.lx-cv { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.lx-streak { position: absolute; height: 46px; border-radius: 50%; filter: blur(4px); opacity: 0; will-change: transform, opacity; }
.lx-rays { position: absolute; left: 50%; top: 50%; width: 220vmax; height: 220vmax; opacity: 0; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.95) 0 3deg, rgba(190,90,255,.55) 3deg 6deg, transparent 6deg 17deg); -webkit-mask: radial-gradient(circle, #000 0, rgba(0,0,0,.6) 20%, transparent 55%); mask: radial-gradient(circle, #000 0, rgba(0,0,0,.6) 20%, transparent 55%); will-change: transform, opacity; }
.lx-beam { position: absolute; left: 0; right: 0; height: 26vmin; opacity: 0; transform-origin: 50% 50%; background: linear-gradient(180deg, transparent, rgba(190,90,255,.9) 30%, #fff 50%, rgba(190,90,255,.9) 70%, transparent); filter: blur(5px); }

/* domain build-up, glitch and name */
.dm-dim { position: absolute; inset: 0; opacity: 0; backdrop-filter: brightness(.3) saturate(.3) contrast(1.1); -webkit-backdrop-filter: brightness(.3) saturate(.3); animation: dm-fade .6s forwards; }
.lim-domain.inv::after { content: ""; position: absolute; inset: 0; backdrop-filter: invert(1) hue-rotate(160deg); -webkit-backdrop-filter: invert(1) hue-rotate(160deg); z-index: 9; }
.lim-domain.closing .dm-dim { transition: opacity .6s; opacity: 0; animation: none; }
.dm-seal { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.dm-seal-ring { position: absolute; border-radius: 50%; border: 2px solid rgba(160,215,255,.9); box-shadow: 0 0 24px rgba(127,224,255,.7), inset 0 0 24px rgba(127,224,255,.5); opacity: 0; }
.dm-seal-ring.s1 { width: min(46vmin, 380px); height: min(46vmin, 380px); margin: calc(min(46vmin, 380px) / -2) 0 0 calc(min(46vmin, 380px) / -2); border-style: dashed; animation: dm-fade .5s .1s forwards, a-spin 6s linear infinite; }
.dm-seal-ring.s2 { width: min(32vmin, 270px); height: min(32vmin, 270px); margin: calc(min(32vmin, 270px) / -2) 0 0 calc(min(32vmin, 270px) / -2); border-color: rgba(190,150,255,.95); animation: dm-fade .5s .25s forwards, a-spin-r 4s linear infinite; }
.dm-seal-ring.s3 { width: min(18vmin, 150px); height: min(18vmin, 150px); margin: calc(min(18vmin, 150px) / -2) 0 0 calc(min(18vmin, 150px) / -2); border-color: #fff; border-style: dotted; animation: dm-fade .5s .4s forwards, a-spin 2.4s linear infinite; }
.dm-word { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; font: 900 clamp(48px, 15vw, 150px) "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif; color: #fff; letter-spacing: .18em; text-shadow: 0 0 20px #7fe0ff, 0 0 60px #a66bff; opacity: 0; animation: dm-wordin 1.2s .35s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes dm-wordin { 0% { opacity: 0; transform: translateY(-50%) scale(1.5); filter: blur(12px); letter-spacing: .6em; } 100% { opacity: 1; transform: translateY(-50%) scale(1); filter: blur(0); letter-spacing: .18em; } }
.dm-sub { position: absolute; left: 0; right: 0; top: calc(50% + clamp(34px, 9vw, 90px)); text-align: center; font: 700 clamp(12px, 2.4vw, 22px) var(--font-display); letter-spacing: .6em; color: #cfeaff; text-shadow: 0 0 12px #7fe0ff; opacity: 0; animation: dm-fade .7s .9s forwards; }
.dm-sph { position: absolute; width: 0; height: 0; }
.dm-sph-ring { position: absolute; width: 14%; aspect-ratio: 1; /* of picture width */ left: 0; top: 0; transform: translate(-50%, -50%) scale(.5); border-radius: 50%; border: 2px solid rgba(180,225,255,.9); box-shadow: 0 0 24px rgba(127,224,255,.6); opacity: 0; }
.dm-sph { --w: 1px; }
.dm-sph-ring { width: min(30vmin, 260px); animation: dm-ripple 3.2s linear infinite; animation-delay: 3s; }
.dm-sph-ring.r2 { animation-delay: 4.1s; } .dm-sph-ring.r3 { animation-delay: 5.2s; }
@keyframes dm-ripple { 0% { transform: translate(-50%, -50%) scale(.6); opacity: .9; } 100% { transform: translate(-50%, -50%) scale(5); opacity: 0; } }
.dm-speck { position: absolute; border-radius: 50%; background: #fff; box-shadow: 0 0 8px #bfe6ff; opacity: 0; animation: dm-speck 6s linear infinite; }
@keyframes dm-speck { 0% { opacity: 0; transform: translate(0, 0); } 20% { opacity: .9; } 100% { opacity: 0; transform: translate(-60px, -120px); } }
.dm-name { position: absolute; left: 0; right: 0; bottom: 17%; text-align: center; font: 900 clamp(46px, 14vw, 140px) "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif; color: #fff; letter-spacing: .14em; text-shadow: 0 0 16px #fff, 0 0 50px #7fe0ff, 0 6px 0 rgba(0,0,0,.6); opacity: 0; animation: dm-slam .5s 5.1s cubic-bezier(.1,.9,.25,1.1) forwards; }
@keyframes dm-slam { 0% { opacity: 0; transform: scale(3) rotate(-3deg); filter: blur(10px); } 70% { opacity: 1; transform: scale(.96); filter: blur(0); } 100% { opacity: 1; transform: scale(1); } }
.dm-name2 { position: absolute; left: 0; right: 0; bottom: calc(17% - clamp(26px, 5vw, 48px)); text-align: center; font: 800 clamp(12px, 2.6vw, 24px) var(--font-display); letter-spacing: .7em; color: #fff; text-shadow: 0 0 12px #7fe0ff; opacity: 0; animation: dm-fade .6s 5.5s forwards; }
.lim-domain.closing .dm-name, .lim-domain.closing .dm-name2, .lim-domain.closing .dm-speck, .lim-domain.closing .dm-sph-ring { transition: opacity .5s; opacity: 0 !important; animation: none; }
/* timing: the void opens after the build-up */
.lim-domain .lim-void { animation: lim-expand 1.3s 1.5s cubic-bezier(.2,.7,.2,1) forwards; }
.lim-domain.closing .lim-void { animation: lim-collapse 1.1s ease-in forwards; }
.dm-pic { transform: none; animation: lim-expand 1.3s 1.5s cubic-bezier(.2,.7,.2,1) forwards; }
.dm-vig { animation: dm-fade 1s 2.1s forwards; }
.dm-flash { animation: dm-flash .8s 1.95s ease-out; }
.lim-domain.closing .dm-pic { animation: lim-collapse 1.1s ease-in forwards; }
@media (prefers-reduced-motion: reduce) { .dm-pic, .dm-flash, .dm-vig, .dm-word, .dm-name { animation-duration: .01s !important; animation-delay: 0s !important; } }

/* background: low-light red / blue / purple flashes only */
.lim-flash-glow { position: absolute; width: 70vmax; height: 70vmax; margin: -35vmax 0 0 -35vmax; border-radius: 50%; opacity: 0; filter: blur(30px); animation: lim-glow 14.4s ease-in-out infinite; will-change: opacity; }
@keyframes lim-glow { 0%, 100% { opacity: 0; } 8% { opacity: .55; } 16% { opacity: .08; } 20% { opacity: .4; } 30% { opacity: 0; } }

/* domain v4: streak rush first, then the void (timing driven by --d0 set on the stage) */
.dm-big { position: absolute; inset: 0; background: #fff; opacity: 0; animation: dm-bigflash 1.5s calc(var(--d0) - .3s) ease-out forwards; z-index: 8; }
@keyframes dm-bigflash { 0% { opacity: 0; } 18% { opacity: 1; } 40% { opacity: 1; } 100% { opacity: 0; } }
.lim-domain .lim-void { animation: lim-expand 1.3s var(--d0) cubic-bezier(.2,.7,.2,1) forwards; }
.lim-domain.closing .lim-void { animation: lim-collapse 1.1s ease-in forwards; }
.dm-pic { animation: lim-expand 1.3s var(--d0) cubic-bezier(.2,.7,.2,1) forwards; }
.lim-domain.closing .dm-pic { animation: lim-collapse 1.1s ease-in forwards; }
.dm-vig { animation: dm-fade 1s calc(var(--d0) + .6s) forwards; }
.dm-flash { display: none; }
.dm-sph-ring { animation-delay: calc(var(--d0) + 1.5s); } .dm-sph-ring.r2 { animation-delay: calc(var(--d0) + 2.6s); } .dm-sph-ring.r3 { animation-delay: calc(var(--d0) + 3.7s); }
.dm-name { animation-delay: calc(var(--d0) + 3.6s); } .dm-name2 { animation-delay: calc(var(--d0) + 4s); }
.lim-domain .lx-cv { z-index: 1; }

/* ====== Theme picker v2: card grid, popover on PC, bottom sheet on mobile ====== */
.tm-back { position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, .35); backdrop-filter: blur(2px); }
.tm-back[hidden], .tm-pop[hidden] { display: none; }
.tm-pop { position: fixed; z-index: 91; width: min(440px, calc(100vw - 24px)); max-height: min(78vh, 640px); display: flex; flex-direction: column; background: var(--raised, #121a2e); color: var(--text); border: 1px solid var(--line2); border-radius: 16px; box-shadow: 0 24px 70px rgba(0, 0, 0, .55), 0 0 40px color-mix(in srgb, var(--glow, var(--accent)) 22%, transparent); overflow: hidden; }
:root:not([data-theme]) .tm-pop { background: #fff; box-shadow: 0 24px 60px rgba(23, 32, 51, .22); }
.tm-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; font: 800 15px var(--font-display, inherit); letter-spacing: .02em; }
.tm-x { min-height: 0; width: 32px; height: 32px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line2); background: transparent; color: var(--muted); font-size: 14px; cursor: pointer; }
.tm-x:hover { color: var(--text); border-color: var(--cyan, var(--accent)); }
.tm-body { overflow-y: auto; padding: 2px 16px 16px; overscroll-behavior: contain; }
.tm-sec + .tm-sec { margin-top: 14px; }
.tm-title { font: 700 11px var(--font-display, inherit); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.tm-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.tm-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 8px; min-height: 0; text-align: left; font: inherit; color: var(--text); background: color-mix(in srgb, var(--text) 4%, transparent); border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; transition: transform .15s, border-color .15s, background .15s; }
.tm-card:hover { transform: translateY(-2px); border-color: var(--line2); background: color-mix(in srgb, var(--text) 8%, transparent); }
.tm-card[aria-checked="true"] { border-color: var(--cyan, var(--accent)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan, var(--accent)) 25%, transparent); }
.tm-pv { position: relative; display: block; height: 56px; border-radius: 8px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .12); }
.tm-pv i { position: absolute; left: 10px; height: 6px; border-radius: 4px; opacity: .95; }
.tm-pv .tm-l1 { top: 14px; width: 46%; } .tm-pv .tm-l2 { top: 28px; width: 30%; }
.tm-name { display: flex; flex-direction: column; font-weight: 700; font-size: 14px; line-height: 1.2; padding: 0 2px 2px; }
.tm-name small { font-weight: 500; font-size: 11px; color: var(--muted); margin-top: 2px; }
.tm-tick { position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; border-radius: 50%; display: none; place-items: center; font-size: 12px; font-weight: 900; color: #04101a; background: var(--cyan, var(--accent)); }
.tm-card[aria-checked="true"] .tm-tick { display: grid; }
body.tm-lock { overflow: hidden; }
@media (min-width: 721px) { .tm-grid { grid-template-columns: repeat(3, 1fr); } .tm-pop { width: 500px; } }
@media (max-width: 720px) {
  .tm-pop { left: 0; right: 0; bottom: 0; top: auto; width: 100%; max-height: 82vh; border-radius: 20px 20px 0 0; border-bottom: 0; animation: tm-up .25s ease-out; }
  .tm-pop::before { content: ""; align-self: center; width: 42px; height: 4px; border-radius: 4px; background: var(--line2); margin-top: 8px; }
  .tm-body { padding-bottom: max(18px, env(safe-area-inset-bottom)); }
  .tm-pv { height: 64px; }
  .tm-card { padding: 10px; }
  .tm-name { font-size: 15px; }
  .themer > button { width: 100%; justify-content: center; padding: 12px 11px; }
}
@keyframes tm-up { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .tm-pop { animation: none; } .tm-card { transition: none; } }
@media (max-width: 1180px) { .nav nav .themer { flex: 1 1 100%; order: 4; } .nav nav .themer > button { width: 100%; justify-content: center; } }

/* ====== Phone title bar + menu v2 ====== */
.nav-quick { display: none; }
body.nav-lock { overflow: hidden; }
@media (max-width: 1180px) {
  .nav-inner { min-height: 58px; gap: 10px; }
  .nav .logo { gap: 9px; font-size: 18px; min-width: 0; }
  .nav .logo .mark { width: 30px; height: 30px; flex: none; }
  .nav .logo span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .nav-quick { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; height: 38px; padding: 0 12px; border-radius: 999px; text-decoration: none; color: #34e0c3; border: 1px solid color-mix(in srgb, #34e0c3 45%, var(--line)); background: color-mix(in srgb, #34e0c3 10%, var(--raised)); font: 700 14px var(--font-display, inherit); font-variant-numeric: tabular-nums; }
  .nav-quick[hidden] { display: none; }
  .nav-quick b { color: var(--text); }
  :root:not([data-theme]) .nav-quick { color: #0b9e87; background: #effcf9; }
  .nav-burger { margin-left: 0; width: 42px; height: 38px; border-radius: 12px; flex: none; }
  /* the menu: a full-height panel under the bar, laid out as a tidy two-column grid */
  html .nav nav { position: fixed; left: 0; right: 0; top: 58px; bottom: 0; max-height: none; box-shadow: none; border: 0; padding: 14px 16px calc(24px + env(safe-area-inset-bottom)); display: none; grid-template-columns: 1fr 1fr; gap: 10px; align-content: start; background: var(--bg); overflow-y: auto; overscroll-behavior: contain; }
  html .nav.open nav { display: grid; animation: nav-in .18s ease-out; }
  @keyframes nav-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
  html .nav nav > * { order: 10; min-width: 0; }
  html .nav nav a:not(.btn):not(.acct-chip):not(.gem-chip):not(.rank-chip):not(.fr-chip) { flex: none; display: flex; align-items: center; justify-content: center; height: 50px; padding: 0 10px; font-size: 15px; font-weight: 700; border-radius: 12px; }
  html .nav nav .acct-chip { order: 1; grid-column: 1 / -1; height: 52px; justify-content: center; font-size: 16px; border-radius: 12px; }
  html .nav nav .gem-chip { order: 2; height: 50px; justify-content: center; border-radius: 12px; }
  html .nav nav .fr-chip { order: 3; width: auto; height: 50px; gap: 8px; border-radius: 12px; font-weight: 700; font-size: 15px; }
  html .nav nav .fr-chip::after { content: "Friends"; color: var(--text); }
  html .nav nav .rank-chip { order: 4; grid-column: 1 / -1; height: 50px; justify-content: center; border-radius: 12px; }
  html .nav nav .rank-chip .bar { width: 90px; }
  html .nav nav .rank-chip .rt { display: inline; }
  html .nav nav .themer { order: 90; grid-column: 1; }
  html .nav nav .themer > button { height: 50px; border-radius: 12px; font-size: 15px; font-weight: 700; padding: 0 10px; }
  html .nav nav a.btn { order: 91; grid-column: 2; margin: 0; height: 50px; padding: 0 10px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
}
@media (max-width: 380px) { html .nav .logo { font-size: 16px; } .nav-quick { padding: 0 9px; } }
@media (max-width: 1180px) { html .nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg); } }

/* ====== Shadow Monarch theme: "system window" look (chamfered glowing panels, condensed type, nebula) ====== */
:root[data-theme="shadow"] {
  --bg-monarch-deep: #070910; --bg-monarch-surface: #0c1119; --bg-monarch-overlay: #151a2b;
  --color-shadow-essence: #4d26b3; --color-necromancy-glow: #3fb0ff; --color-monarch-purple: #9d4edf;
  --text-monarch-pure: #f2f9ff; --text-monarch-muted: #8ea3bd; --status-arise: #3fb0ff; --status-perish: #ff3366;
  --edge: rgba(63, 176, 255, .55); --edge-soft: rgba(63, 176, 255, .22); --cut: 9px;
  --bg: var(--bg-monarch-deep); --surface: var(--bg-monarch-surface); --raised: var(--bg-monarch-overlay);
  --line: var(--edge-soft); --line2: rgba(63, 176, 255, .4); --card-top: #0f1622; --card-bot: #0a0f18;
  --text: var(--text-monarch-pure); --muted: var(--text-monarch-muted);
  --accent: #3fb0ff; --accent2: var(--color-monarch-purple); --accent-ink: #00141a;
  --cyan: var(--color-necromancy-glow); --glow: var(--color-necromancy-glow);
  --win: #3fb0ff; --loss: #ff3366; --warn: #ffc65a;
  --font-display: "Barlow Condensed", "Rajdhani", "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Barlow Condensed", "Rajdhani", "Oswald", "Arial Narrow", system-ui, sans-serif;
}
:root[data-theme="shadow"] body { font-size: 17px; letter-spacing: .01em; background-color: var(--bg-monarch-deep); background-image: radial-gradient(70% 50% at 50% 0%, rgba(63, 176, 255, .10), transparent 70%), radial-gradient(60% 50% at 0% 100%, rgba(120, 50, 220, .16), transparent 70%); }
/* nebula wisps (teal + violet smoke), drawn once as a fixed picture */
:root[data-theme="shadow"] body::before { content: ""; position: fixed; inset: -4%; z-index: -1; pointer-events: none; opacity: .5; filter: blur(14px); animation: none; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1400' height='900'><filter id='n' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.004 .009' numOctaves='5' seed='7'/><feColorMatrix values='0 0 0 0 .2  0 0 0 0 .55  0 0 0 0 1  0 0 0 3.2 -1.35'/></filter><filter id='m' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.005 .011' numOctaves='5' seed='21'/><feColorMatrix values='0 0 0 0 .55  0 0 0 0 .2  0 0 0 0 1  0 0 0 3.2 -1.45'/></filter><rect width='1400' height='900' filter='url(%23n)' opacity='.55'/><rect width='1400' height='900' filter='url(%23m)' opacity='.6'/></svg>") center / cover no-repeat; -webkit-mask-image: radial-gradient(ellipse at 50% 50%, transparent 25%, #000 100%); mask-image: radial-gradient(ellipse at 50% 50%, transparent 25%, #000 100%); }
:root[data-theme="shadow"]::after, :root[data-theme="shadow"] body::after { content: none; }

/* headings: condensed, uppercase, glowing cyan; page titles get [ brackets ] */
:root[data-theme="shadow"] h1, :root[data-theme="shadow"] h2, :root[data-theme="shadow"] h3 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: #d8f0ff; text-shadow: 0 0 14px rgba(63, 176, 255, .55); }
:root[data-theme="shadow"] .hero h1, :root[data-theme="shadow"] .offer-head h1, :root[data-theme="shadow"] .page-head h1 { background: none; -webkit-text-fill-color: currentColor; filter: none; font-weight: 700; color: #d8f0ff; text-shadow: 0 0 18px rgba(63, 176, 255, .7), 0 0 40px rgba(63, 176, 255, .25); }
:root[data-theme="shadow"] .offer-head h1::before, :root[data-theme="shadow"] .page-head h1::before { content: "[ "; opacity: .8; }
:root[data-theme="shadow"] .offer-head h1::after, :root[data-theme="shadow"] .page-head h1::after { content: " ]"; opacity: .8; }

/* nav: glowing chamfered tabs, the active one lit like the "Extracted" row */
:root[data-theme="shadow"] .nav { background: rgba(7, 9, 16, .92); border-image: linear-gradient(90deg, transparent, var(--edge), transparent) 1; box-shadow: 0 0 24px rgba(63, 176, 255, .08); }
:root[data-theme="shadow"] .nav nav a, :root[data-theme="shadow"] .logo { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
:root[data-theme="shadow"] .nav nav a { border-radius: 0; color: var(--muted); clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px)); }
:root[data-theme="shadow"] .nav nav a:hover { color: #fff; background: rgba(63, 176, 255, .08); }
:root[data-theme="shadow"] .nav nav a.active { color: #f2f9ff; text-shadow: 0 0 10px var(--cyan); background: linear-gradient(135deg, rgba(63, 176, 255, .28), rgba(63, 176, 255, .06)); box-shadow: inset 0 0 0 1px var(--cyan), inset 0 0 18px rgba(63, 176, 255, .3); }

/* panels: translucent teal glass with cut corners and a glowing edge */
:root[data-theme="shadow"] .card, :root[data-theme="shadow"] .panel, :root[data-theme="shadow"] .tile, :root[data-theme="shadow"] .offer, :root[data-theme="shadow"] .hs, :root[data-theme="shadow"] .step, :root[data-theme="shadow"] .feat, :root[data-theme="shadow"] .top-card, :root[data-theme="shadow"] .wiki-card, :root[data-theme="shadow"] .stat, :root[data-theme="shadow"] .trade-card, :root[data-theme="shadow"] .post-card, :root[data-theme="shadow"] .cta {
  position: relative; border: 1px solid var(--edge-soft); border-radius: 0; transition: all .25s ease;
  background:
    linear-gradient(to bottom right, transparent calc(50% - .8px), var(--edge) calc(50% - .8px), var(--edge) calc(50% + .8px), transparent calc(50% + .8px)) top left / var(--cut) var(--cut) no-repeat,
    linear-gradient(to bottom right, transparent calc(50% - .8px), var(--edge) calc(50% - .8px), var(--edge) calc(50% + .8px), transparent calc(50% + .8px)) bottom right / var(--cut) var(--cut) no-repeat,
    linear-gradient(160deg, rgba(63, 176, 255, .10), rgba(12, 17, 25, .78) 38%, rgba(10, 14, 24, .88)), var(--surface);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  box-shadow: inset 0 0 28px rgba(63, 176, 255, .10), inset 0 1px 0 rgba(63, 176, 255, .35);
}
:root[data-theme="shadow"] .offer:hover, :root[data-theme="shadow"] .tile:hover, :root[data-theme="shadow"] .top-card:hover, :root[data-theme="shadow"] .wiki-card:hover, :root[data-theme="shadow"] .trade-card:hover, :root[data-theme="shadow"] .post-card:hover { border-color: var(--cyan); transform: translateY(-2px); box-shadow: inset 0 0 36px rgba(63, 176, 255, .22), inset 0 1px 0 var(--cyan); }
/* small list rows (idle = muted violet, like "Shadow Beru") */
:root[data-theme="shadow"] .chip { border-radius: 0; background: linear-gradient(135deg, rgba(120, 100, 180, .16), rgba(30, 30, 50, .5)); border: 1px solid rgba(160, 140, 220, .22); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); }

/* the ARISE button: chamfered, cyan-to-violet with a glossy split line */
:root[data-theme="shadow"] .btn { position: relative; font-family: var(--font-display); font-weight: 800; font-size: 1.1em; text-transform: uppercase; letter-spacing: .1em; color: #fff !important; text-shadow: 0 1px 6px rgba(0, 20, 60, .8), 0 0 10px rgba(255, 255, 255, .35); border: 0; border-radius: 0; padding: 11px 26px; background: linear-gradient(180deg, #86d6ff 0%, #2f8cff 47%, #2a4fe0 49%, #7a35e0 52%, #a448f0 100%); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35), inset 0 0 14px rgba(255, 255, 255, .25); transition: filter .2s, transform .15s; }
:root[data-theme="shadow"] .btn:hover { filter: brightness(1.2) saturate(1.15); transform: translateY(-1px); box-shadow: inset 0 0 0 2px #fff, inset 0 0 18px rgba(255, 255, 255, .4); }
:root[data-theme="shadow"] .btn.small { padding: 8px 18px; font-size: 1em; }
:root[data-theme="shadow"] .btn.ghost { background: rgba(63, 176, 255, .06); color: var(--text) !important; text-shadow: none; box-shadow: inset 0 0 0 1px var(--edge); }
:root[data-theme="shadow"] .btn.ghost:hover { background: rgba(63, 176, 255, .16); box-shadow: inset 0 0 0 1px var(--cyan), inset 0 0 16px rgba(63, 176, 255, .3); filter: none; }

/* inputs + chips */
:root[data-theme="shadow"] input, :root[data-theme="shadow"] select, :root[data-theme="shadow"] textarea { background: rgba(4, 8, 14, .7); border: 1px solid var(--edge-soft); border-radius: 0; color: var(--text); font-family: var(--font-body); font-size: 1em; box-shadow: inset 0 0 14px rgba(63, 176, 255, .06); }
:root[data-theme="shadow"] input:focus, :root[data-theme="shadow"] select:focus, :root[data-theme="shadow"] textarea:focus { outline: 0; border-color: var(--cyan); box-shadow: inset 0 0 14px rgba(63, 176, 255, .18), 0 0 14px rgba(63, 176, 255, .35); }
:root[data-theme="shadow"] .gem-chip, :root[data-theme="shadow"] .rank-chip, :root[data-theme="shadow"] .acct-chip, :root[data-theme="shadow"] .fr-chip, :root[data-theme="shadow"] .themer > button { border-radius: 0; background: rgba(63, 176, 255, .07); border-color: var(--edge); color: var(--text); font-family: var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
:root[data-theme="shadow"] .seg button.on { background: linear-gradient(180deg, #86d6ff, #2f8cff 48%, #7a35e0 52%, #a448f0); color: #fff; text-shadow: 0 1px 4px rgba(0, 20, 60, .7); }
:root[data-theme="shadow"] .toast { background: #0b1522; color: #f2f9ff; border: 1px solid var(--cyan); border-radius: 0; box-shadow: 0 0 22px rgba(63, 176, 255, .5); font-family: var(--font-display); letter-spacing: .05em; }
:root[data-theme="shadow"] .logo .mark { filter: drop-shadow(0 0 10px rgba(63, 176, 255, .6)); }
:root[data-theme="shadow"] ::selection { background: var(--color-shadow-essence); color: #fff; }
:root[data-theme="shadow"] .tm-pop, :root[data-theme="shadow"] .nav nav { border-radius: 0; }
:root[data-theme="shadow"] .tm-card { border-radius: 0; }
@media (max-width: 1180px) { :root[data-theme="shadow"] .nav nav a { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); } }

:root[data-theme="shadow"] .nav nav a { letter-spacing: .04em; font-size: 15px; padding: 7px 8px; }
:root[data-theme="shadow"] .nav nav { gap: 1px; }
:root[data-theme="shadow"] .logo { letter-spacing: .05em; font-size: 20px; }
:root[data-theme="shadow"] .gem-chip, :root[data-theme="shadow"] .rank-chip, :root[data-theme="shadow"] .acct-chip { letter-spacing: .03em; }
:root[data-theme="shadow"] .nav .btn.small { padding: 7px 14px; letter-spacing: .06em; }
@media (max-width: 1320px) { :root[data-theme="shadow"] .nav nav a { font-size: 14px; padding: 6px 6px; } }
@media (min-width: 1181px) and (max-width: 1440px) {
  :root[data-theme="shadow"] .nav nav a { font-size: 13.5px; letter-spacing: .02em; padding: 6px 5px; }
  :root[data-theme="shadow"] .nav .btn.small { padding: 6px 10px; font-size: 13.5px; letter-spacing: .03em; }
  :root[data-theme="shadow"] .rank-chip .bar { width: 28px; }
  :root[data-theme="shadow"] .logo { font-size: 18px; }
}

/* ---- Solo Leveling "System" window details: double frame, glowing top notch, corner studs ---- */
:root[data-theme="shadow"] .card, :root[data-theme="shadow"] .panel, :root[data-theme="shadow"] .tile, :root[data-theme="shadow"] .offer, :root[data-theme="shadow"] .hs, :root[data-theme="shadow"] .step, :root[data-theme="shadow"] .feat, :root[data-theme="shadow"] .top-card, :root[data-theme="shadow"] .wiki-card, :root[data-theme="shadow"] .stat, :root[data-theme="shadow"] .trade-card, :root[data-theme="shadow"] .post-card, :root[data-theme="shadow"] .cta {
  outline: 1px solid rgba(63, 176, 255, .32); outline-offset: -5px; border-color: rgba(63, 176, 255, .7);
  background:
    linear-gradient(90deg, transparent, #bfe6ff, transparent) top center / 38% 2px no-repeat,
    linear-gradient(to bottom right, transparent calc(50% - .8px), var(--edge) calc(50% - .8px), var(--edge) calc(50% + .8px), transparent calc(50% + .8px)) top left / var(--cut) var(--cut) no-repeat,
    linear-gradient(to bottom right, transparent calc(50% - .8px), var(--edge) calc(50% - .8px), var(--edge) calc(50% + .8px), transparent calc(50% + .8px)) bottom right / var(--cut) var(--cut) no-repeat,
    linear-gradient(170deg, rgba(40, 120, 255, .16), rgba(6, 14, 34, .82) 42%, rgba(4, 10, 26, .9)), var(--surface);
  box-shadow: inset 0 0 34px rgba(63, 176, 255, .14), inset 0 1px 0 rgba(160, 215, 255, .5);
}
:root[data-theme="shadow"] .offer:hover, :root[data-theme="shadow"] .tile:hover, :root[data-theme="shadow"] .top-card:hover, :root[data-theme="shadow"] .wiki-card:hover, :root[data-theme="shadow"] .trade-card:hover, :root[data-theme="shadow"] .post-card:hover { outline-color: rgba(120, 200, 255, .7); box-shadow: inset 0 0 44px rgba(63, 176, 255, .3), inset 0 1px 0 #cfeaff; }
:root[data-theme="shadow"] body { background-image: radial-gradient(70% 50% at 50% 0%, rgba(63, 130, 255, .14), transparent 70%), radial-gradient(60% 50% at 0% 100%, rgba(120, 50, 220, .16), transparent 70%), repeating-linear-gradient(0deg, rgba(63, 176, 255, .03) 0 1px, transparent 1px 4px); }
/* system-notice titles: white-blue, wide, "[ ... ]" */
:root[data-theme="shadow"] h1, :root[data-theme="shadow"] h2, :root[data-theme="shadow"] h3 { color: #e6f4ff; text-shadow: 0 0 10px rgba(80, 180, 255, .9), 0 0 28px rgba(60, 140, 255, .5); }
:root[data-theme="shadow"] .section-title::before, :root[data-theme="shadow"] .home-offer h2::before { content: "[ "; opacity: .8; } 
:root[data-theme="shadow"] .section-title::after, :root[data-theme="shadow"] .home-offer h2::after { content: " ]"; opacity: .8; }
:root[data-theme="shadow"] .tm-pop { outline: 1px solid rgba(63, 176, 255, .32); outline-offset: -5px; border: 1px solid rgba(63, 176, 255, .7); background: rgba(6, 12, 28, .96); }
:root[data-theme="shadow"] .tm-pop .tm-head b::before { content: "[ "; } :root[data-theme="shadow"] .tm-pop .tm-head b::after { content: " ]"; }
:root[data-theme="shadow"] .toast::before { content: "[ SYSTEM ]  "; color: #8fd0ff; font-weight: 800; }

/* ====== Shadow Monarch: cyber / future pass ====== */
:root[data-theme="shadow"] body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .55; background-image: linear-gradient(rgba(63, 176, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(63, 176, 255, .07) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%); }
:root[data-theme="shadow"]::after { content: ""; position: fixed; left: 0; right: 0; top: -160px; height: 160px; z-index: 2; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(80, 180, 255, .09) 70%, rgba(140, 210, 255, .22) 99%, transparent); animation: cy-scan 9s linear infinite; }
@keyframes cy-scan { to { transform: translateY(calc(100vh + 160px)); } }
/* running light along the bottom of the top bar */
:root[data-theme="shadow"] .nav::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 26%; pointer-events: none; background: linear-gradient(90deg, transparent, #9fdcff, #fff, #9fdcff, transparent); box-shadow: 0 0 12px #5ab8ff; animation: cy-run 6s linear infinite; }
@keyframes cy-run { from { transform: translateX(-100%); } to { transform: translateX(400%); } }
/* panels: extra L-shaped corner brackets on the two plain corners + pulsing frame + boot-in */
:root[data-theme="shadow"] .card, :root[data-theme="shadow"] .panel, :root[data-theme="shadow"] .tile, :root[data-theme="shadow"] .offer, :root[data-theme="shadow"] .hs, :root[data-theme="shadow"] .step, :root[data-theme="shadow"] .feat, :root[data-theme="shadow"] .top-card, :root[data-theme="shadow"] .wiki-card, :root[data-theme="shadow"] .stat, :root[data-theme="shadow"] .trade-card, :root[data-theme="shadow"] .post-card, :root[data-theme="shadow"] .cta {
  background:
    linear-gradient(#d8f0ff, #d8f0ff) top right / 16px 2px no-repeat, linear-gradient(#d8f0ff, #d8f0ff) top right / 2px 16px no-repeat,
    linear-gradient(#d8f0ff, #d8f0ff) bottom left / 16px 2px no-repeat, linear-gradient(#d8f0ff, #d8f0ff) bottom left / 2px 16px no-repeat,
    linear-gradient(90deg, transparent, #bfe6ff, transparent) top center / 38% 2px no-repeat,
    linear-gradient(to bottom right, transparent calc(50% - .8px), var(--edge) calc(50% - .8px), var(--edge) calc(50% + .8px), transparent calc(50% + .8px)) top left / var(--cut) var(--cut) no-repeat,
    linear-gradient(to bottom right, transparent calc(50% - .8px), var(--edge) calc(50% - .8px), var(--edge) calc(50% + .8px), transparent calc(50% + .8px)) bottom right / var(--cut) var(--cut) no-repeat,
    linear-gradient(170deg, rgba(40, 120, 255, .16), rgba(6, 14, 34, .82) 42%, rgba(4, 10, 26, .9)), var(--surface);
  animation: cy-boot .55s ease-out both, cy-frame 4.5s ease-in-out infinite;
}
@keyframes cy-boot { from { opacity: 0; transform: translateY(10px); filter: brightness(2.2) blur(2px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes cy-frame { 0%, 100% { outline-color: rgba(63, 176, 255, .22); } 50% { outline-color: rgba(120, 205, 255, .6); } }
/* glitch on hover for page titles */
:root[data-theme="shadow"] .page-head h1:hover, :root[data-theme="shadow"] .offer-head h1:hover, :root[data-theme="shadow"] .hero h1:hover { animation: cy-glitch .5s steps(2, end) 1; }
@keyframes cy-glitch { 0% { text-shadow: 3px 0 #ff2d7a, -3px 0 #2dd4ff; transform: translateX(-2px); } 25% { text-shadow: -3px 0 #ff2d7a, 3px 0 #2dd4ff; transform: translateX(2px); } 50% { text-shadow: 2px 1px #ff2d7a, -2px -1px #2dd4ff; transform: none; } 100% { text-shadow: 0 0 18px rgba(80, 180, 255, .9); transform: none; } }
/* buttons: light sweep */
:root[data-theme="shadow"] .btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-20deg); animation: cy-shine 3.8s ease-in-out infinite; }
@keyframes cy-shine { 0%, 60% { left: -60%; } 100% { left: 130%; } }
:root[data-theme="shadow"] .btn.ghost::after { display: none; }
/* nav tabs + chips: tech feel */
:root[data-theme="shadow"] .nav nav a.active::before { content: "\25B8 "; color: #9fdcff; }
:root[data-theme="shadow"] .gem-chip b, :root[data-theme="shadow"] .rank-chip b, :root[data-theme="shadow"] .stat b, :root[data-theme="shadow"] .stat strong { font-variant-numeric: tabular-nums; text-shadow: 0 0 10px rgba(80, 180, 255, .8); }
/* fixed HUD frame */
.sys-hud { position: fixed; inset: 8px; z-index: 3; pointer-events: none; font-family: "Barlow Condensed", "Consolas", monospace; }
.sys-hud .c { position: absolute; width: 26px; height: 26px; border: 0 solid rgba(120, 205, 255, .8); filter: drop-shadow(0 0 5px #3fb0ff); }
.sys-hud .tl { left: 0; top: 0; border-left-width: 2px; border-top-width: 2px; } .sys-hud .tr { right: 0; top: 0; border-right-width: 2px; border-top-width: 2px; }
.sys-hud .bl { left: 0; bottom: 0; border-left-width: 2px; border-bottom-width: 2px; } .sys-hud .br { right: 0; bottom: 0; border-right-width: 2px; border-bottom-width: 2px; }
.sys-hud span { position: absolute; font-size: 11px; letter-spacing: .22em; color: rgba(150, 215, 255, .75); text-shadow: 0 0 8px #3fb0ff; }
.sys-hud .r1 { left: 38px; bottom: 2px; } .sys-hud .r2 { right: 38px; bottom: 2px; display: flex; align-items: center; gap: 6px; }
.sys-hud .dot { width: 6px; height: 6px; border-radius: 50%; background: #5df0ff; box-shadow: 0 0 8px #5df0ff; animation: cy-blink 1.4s ease-in-out infinite; }
.sys-hud em { font-style: normal; opacity: .8; }
@keyframes cy-blink { 50% { opacity: .2; } }
@media (max-width: 720px) { .sys-hud { inset: 4px; } .sys-hud span { display: none; } .sys-hud .c { width: 16px; height: 16px; } }
@media (prefers-reduced-motion: reduce) { :root[data-theme="shadow"]::after, :root[data-theme="shadow"] .nav::after, :root[data-theme="shadow"] .btn::after, .sys-hud .dot { animation: none; } :root[data-theme="shadow"] .card, :root[data-theme="shadow"] .panel, :root[data-theme="shadow"] .tile, :root[data-theme="shadow"] .offer, :root[data-theme="shadow"] .stat, :root[data-theme="shadow"] .trade-card { animation: none; } }

.sys-hud .r2 { bottom: 4px; padding: 3px 10px; background: rgba(4, 10, 24, .82); border: 1px solid rgba(63, 176, 255, .35); clip-path: polygon(6px 0, 100% 0, 100% 100%, 0 100%, 0 6px); }

/* ====== Shadow Monarch: shadow-soldier status rows ======
   Lit row (cyan edge, "● EXTRACTED") = active / top ranked / open; muted violet row ("○ IDLE") = the rest. */
:root[data-theme="shadow"] .shadow-soldier-row, :root[data-theme="shadow"] .leader, :root[data-theme="shadow"] .fr-row, :root[data-theme="shadow"] .watch-row {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 18px; margin-bottom: 8px; border-radius: 0; border: 1px solid rgba(160, 140, 230, .22); border-left: 4px solid #5b3fd0;
  background: linear-gradient(90deg, rgba(120, 100, 190, .16), rgba(24, 26, 44, .55)); color: var(--muted);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%); transition: all .2s ease; animation: none; outline: 0;
}
:root[data-theme="shadow"] .shadow-soldier-row::after, :root[data-theme="shadow"] .leader::after { content: "\25CB  IDLE"; margin-left: auto; padding-left: 12px; font: 700 13px var(--font-display); letter-spacing: .1em; color: #8d86b3; white-space: nowrap; }
:root[data-theme="shadow"] .shadow-soldier-row.active, :root[data-theme="shadow"] .leader:nth-child(-n+3), :root[data-theme="shadow"] .fr-row.on, :root[data-theme="shadow"] .fr-row:has(.fr-unread) {
  color: #eaf6ff; border-color: var(--cyan); border-left-color: var(--cyan); text-shadow: 0 0 8px rgba(63, 176, 255, .7);
  background: linear-gradient(90deg, rgba(63, 176, 255, .28), rgba(63, 176, 255, .06) 70%, transparent);
  box-shadow: inset 0 0 22px rgba(63, 176, 255, .22), inset 0 1px 0 rgba(190, 230, 255, .5);
}
:root[data-theme="shadow"] .shadow-soldier-row.active::after, :root[data-theme="shadow"] .leader:nth-child(-n+3)::after { content: "\25CF  EXTRACTED"; color: #7fd8ff; text-shadow: 0 0 8px #3fb0ff; }
:root[data-theme="shadow"] .leader.empty::after, :root[data-theme="shadow"] .leader.empty { content: none; }
:root[data-theme="shadow"] .leader.empty::after { display: none; }
:root[data-theme="shadow"] .leader .lr { font-family: var(--font-display); font-weight: 800; color: var(--cyan); min-width: 1.6em; }
:root[data-theme="shadow"] .leader .ln { color: inherit; font-weight: 700; letter-spacing: .03em; }
:root[data-theme="shadow"] .leader .lc { color: #cfeaff; text-shadow: 0 0 8px rgba(63, 176, 255, .6); }
:root[data-theme="shadow"] .leader:hover, :root[data-theme="shadow"] .fr-row:hover, :root[data-theme="shadow"] .watch-row:hover { border-color: var(--cyan); background: linear-gradient(90deg, rgba(63, 176, 255, .2), transparent); color: #fff; transform: translateX(3px); }
/* server rooms: open rooms are lit, full rooms are idle */
:root[data-theme="shadow"] .room-card { border-radius: 0; border-left: 4px solid var(--cc, var(--cyan)); background: linear-gradient(90deg, rgba(63, 176, 255, .16), rgba(8, 14, 30, .8) 60%); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%); box-shadow: inset 0 0 24px rgba(63, 176, 255, .14); animation: none; }
:root[data-theme="shadow"] .room-card::before { display: none; }
:root[data-theme="shadow"] .room-card:has(.room-spots.full) { background: linear-gradient(90deg, rgba(120, 100, 190, .16), rgba(24, 26, 44, .6)); border-left-color: #5b3fd0; color: var(--muted); }
:root[data-theme="shadow"] .room-spots::before { content: "\25CF  "; } :root[data-theme="shadow"] .room-spots.full::before { content: "\25CB  "; }
@media (max-width: 560px) { :root[data-theme="shadow"] .leader::after { font-size: 11px; content: "\25CB"; } :root[data-theme="shadow"] .leader:nth-child(-n+3)::after { content: "\25CF"; } }

/* ====== Shadow Monarch: trading-board rows + left icon rail ====== */
.tc-arrow, .tc-status { display: none; }
.ic-nm { display: contents; } .ic-rar { display: none; }
:root[data-theme="shadow"] .board-panel h2::before, :root[data-theme="shadow"] .post-panel h2::before { content: "["; opacity: .85; margin-right: 4px; }
:root[data-theme="shadow"] .board-panel h2::after, :root[data-theme="shadow"] .post-panel h2::after { content: "]"; opacity: .85; margin-left: 4px; }
:root[data-theme="shadow"] .board-panel h2 .muted { text-shadow: none; }
:root[data-theme="shadow"] #posts { counter-reset: trow; }
:root[data-theme="shadow"] .posts.list .trade-card.v2 {
  counter-increment: trow; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%); border-radius: 0; padding: 14px 18px 12px; gap: 6px 18px; outline: 0; animation: cy-boot .5s ease-out both;
  grid-template-columns: 96px minmax(0, 1.25fr) 34px minmax(0, 1.25fr) 128px auto; grid-template-areas: "num off arr wnt st act" "hd hd hd hd hd hd";
  border: 1px solid rgba(160, 140, 230, .24); background: linear-gradient(90deg, rgba(120, 100, 190, .15), rgba(24, 26, 44, .6)); box-shadow: none;
}
:root[data-theme="shadow"] .posts.list .trade-card.v2::before { content: "ROW " counter(trow); grid-area: num; white-space: nowrap; font: 700 17px var(--font-display); letter-spacing: .08em; color: #8d86b3; }
:root[data-theme="shadow"] .posts.list .trade-card.v2.is-win, :root[data-theme="shadow"] .posts.list .trade-card.v2:hover { border-color: var(--cyan); background: linear-gradient(90deg, rgba(63, 176, 255, .26), rgba(63, 176, 255, .06) 75%, rgba(8, 14, 30, .7)); box-shadow: inset 0 0 24px rgba(63, 176, 255, .25), inset 0 1px 0 rgba(190, 230, 255, .5); }
:root[data-theme="shadow"] .posts.list .trade-card.v2.is-win::before, :root[data-theme="shadow"] .posts.list .trade-card.v2:hover::before { color: #cfeaff; }
:root[data-theme="shadow"] .posts.list .trade-card.v2 .tc-off { grid-area: off; }
:root[data-theme="shadow"] .posts.list .trade-card.v2 .tc-wnt { grid-area: wnt; }
:root[data-theme="shadow"] .posts.list .tc-sec h4 { display: none; }
:root[data-theme="shadow"] .posts.list .tc-arrow { display: block; grid-area: arr; text-align: center; font-size: 26px; color: #cfeaff; text-shadow: 0 0 10px #3fb0ff; }
:root[data-theme="shadow"] .posts.list .tc-status { display: flex; grid-area: st; align-items: center; justify-content: flex-end; gap: 8px; font: 800 20px var(--font-display); letter-spacing: .08em; color: #7fd8ff; text-shadow: 0 0 10px #3fb0ff; }
:root[data-theme="shadow"] .posts.list .tc-status::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: currentColor; box-shadow: 0 0 12px currentColor; }
:root[data-theme="shadow"] .posts.list .tc-status.st-done { color: #8d86b3; text-shadow: none; } :root[data-theme="shadow"] .posts.list .tc-status.st-done::before { background: transparent; border: 2px solid currentColor; box-shadow: none; }
:root[data-theme="shadow"] .posts.list .tc-status.st-prog { color: #ffc65a; text-shadow: 0 0 10px #ffa31a; } :root[data-theme="shadow"] .posts.list .tc-status.st-pend { color: #c79bff; text-shadow: 0 0 10px #9d4edf; }
:root[data-theme="shadow"] .posts.list .post-acts { grid-area: act; }
/* items inside a row: icon + name + coloured rarity, stacked */
:root[data-theme="shadow"] .posts.list .ic-grid { flex-direction: column; gap: 4px; }
:root[data-theme="shadow"] .posts.list .ic-cell { width: auto; flex-direction: row; align-items: center; gap: 10px; padding: 2px 4px; border: 0; background: none; text-align: left; }
:root[data-theme="shadow"] .posts.list .ic-cell .ficon { width: 34px !important; height: 34px !important; flex: none; }
:root[data-theme="shadow"] .posts.list .ic-nm { display: flex; flex-direction: column; min-width: 0; }
:root[data-theme="shadow"] .posts.list .ic-name { font-size: 19px; font-weight: 700; text-align: left; line-height: 1.05; color: #d8f0ff; text-shadow: 0 0 8px rgba(63, 176, 255, .45); }
:root[data-theme="shadow"] .posts.list .ic-rar { display: block; font-size: 15px; font-weight: 600; line-height: 1.05; }
:root[data-theme="shadow"] .posts.list .ic-qty { position: static; margin-left: auto; }
/* poster line under the row */
:root[data-theme="shadow"] .posts.list .tc-head { grid-area: hd; display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 4px 14px; padding-top: 6px; border-top: 1px dashed rgba(63, 176, 255, .22); font-size: 14px; }
:root[data-theme="shadow"] .posts.list .tc-head .tc-avatar { display: none; }
:root[data-theme="shadow"] .posts.list .tc-head .tc-user::before { content: "USER: "; color: var(--muted); font-weight: 600; letter-spacing: .06em; }
:root[data-theme="shadow"] .posts.list .tc-head .tc-badges { display: flex; flex-basis: auto; gap: 6px; order: 0; margin-left: auto; }
:root[data-theme="shadow"] .posts.list .tc-head .tc-star { margin-left: 0; }
@media (max-width: 900px) {
  :root[data-theme="shadow"] .posts.list .trade-card.v2 { grid-template-columns: 1fr 34px 1fr; grid-template-areas: "num num st" "off arr wnt" "act act act" "hd hd hd"; }
  :root[data-theme="shadow"] .posts.list .tc-status { font-size: 16px; }
  :root[data-theme="shadow"] .posts.list .ic-name { font-size: 16px; }
}
/* left rail */
.sys-rail { display: none; }
@media (min-width: 1181px) {
  .sys-rail { position: fixed; left: 0; top: 62px; bottom: 0; width: 64px; z-index: 30; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 0; background: linear-gradient(180deg, rgba(6, 12, 28, .92), rgba(4, 8, 18, .85)); border-right: 1px solid rgba(63, 176, 255, .28); box-shadow: 8px 0 30px rgba(0, 0, 0, .35); }
  body.has-rail { padding-left: 64px; }
  body.has-rail .nav { margin-left: -64px; padding-left: 64px; }
  .rail-av { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 8px; color: #9fdcff; background: rgba(63, 176, 255, .1); border: 1px solid rgba(63, 176, 255, .5); clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
  .rail-i { position: relative; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; min-height: 0; color: #6f8fb5; background: none; border: 0; cursor: pointer; transition: color .2s, filter .2s; }
  .rail-i:hover { color: #cfeaff; filter: drop-shadow(0 0 8px #3fb0ff); }
  .rail-i.on { color: #7fd8ff; filter: drop-shadow(0 0 10px #3fb0ff); }
  .rail-i.on::before { content: ""; position: absolute; left: -9px; top: 6px; bottom: 6px; width: 3px; background: #7fd8ff; box-shadow: 0 0 12px #3fb0ff; }
  .rail-i:last-child { margin-top: auto; }
}

/* ====== Shadow Monarch trade board v2 (own design, not a copy of the mockup) ====== */
.tc-val { display: none; } .tc-delta { display: none; }
:root[data-theme="shadow"] .posts.list .trade-card.v2 { padding: 16px 20px 14px 24px; gap: 4px 20px; position: relative; overflow: hidden; border-left: 0; --dk: #6a5be0; }
:root[data-theme="shadow"] .posts.list .trade-card.v2.is-win { --dk: #3fd8ff; } :root[data-theme="shadow"] .posts.list .trade-card.v2.is-lose { --dk: #ff4d7d; } :root[data-theme="shadow"] .posts.list .trade-card.v2.is-fair { --dk: #7fa6ff; }
/* coloured edge by deal quality + a light that sweeps the row on hover */
:root[data-theme="shadow"] .posts.list .trade-card.v2 > .tc-head::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--dk); box-shadow: 0 0 16px var(--dk); }
:root[data-theme="shadow"] .posts.list .trade-card.v2::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(160, 215, 255, .16), transparent); transform: skewX(-18deg); transition: none; }
:root[data-theme="shadow"] .posts.list .trade-card.v2:hover::after { left: 130%; transition: left .9s ease; }
:root[data-theme="shadow"] .posts.list .trade-card.v2::before { color: var(--dk); text-shadow: 0 0 10px var(--dk); }
/* centre connector: arrows + value difference */
:root[data-theme="shadow"] .posts.list .tc-arrow { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 26px; }
:root[data-theme="shadow"] .posts.list .tc-arrow .arr { line-height: 1; color: var(--dk); text-shadow: 0 0 12px var(--dk); }
:root[data-theme="shadow"] .posts.list .tc-delta { display: block; font: 800 13px var(--font-display); letter-spacing: .08em; padding: 1px 8px; color: #04101a; background: var(--dk); clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); text-shadow: none; white-space: nowrap; }
:root[data-theme="shadow"] .posts.list .tc-val { display: block; margin-top: 4px; font: 700 13px var(--font-display); letter-spacing: .14em; color: #7fa8d0; }
:root[data-theme="shadow"] .posts.list .ic-cell .ficon { width: 40px !important; height: 40px !important; box-shadow: 0 0 14px color-mix(in srgb, var(--rc) 55%, transparent); }
/* status pill */
:root[data-theme="shadow"] .posts.list .tc-status { padding: 6px 14px; font-size: 17px; background: rgba(63, 176, 255, .1); border: 1px solid currentColor; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); justify-self: end; }
/* request panel: slim bar instead of a big box */
:root[data-theme="shadow"] .posts.list .trade-card.v2 .tpanel { margin-top: 8px; padding: 8px 12px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border: 0; border-top: 1px dashed rgba(63, 176, 255, .25); background: transparent; border-radius: 0; }
:root[data-theme="shadow"] .posts.list .tpanel .tp-msg { margin: 0; font-size: 14px; color: var(--muted); flex: 1 1 260px; }
:root[data-theme="shadow"] .posts.list .tpanel .btn { padding: 8px 18px; font-size: 1em; }
/* poster line */
:root[data-theme="shadow"] .posts.list .tc-head { border-top: 1px dashed rgba(63, 176, 255, .2); margin-top: 4px; }
:root[data-theme="shadow"] .posts.list .tc-head .tc-user { font-size: 17px; font-weight: 700; color: #d8f0ff; }
:root[data-theme="shadow"] .posts.list .tc-head .tc-meta { font-size: 13px; }
/* nicer board toolbar */
:root[data-theme="shadow"] .board-panel { padding: 22px 24px; }
:root[data-theme="shadow"] .board-tools { gap: 10px; }
:root[data-theme="shadow"] .board-top h2 { font-size: 30px; }
:root[data-theme="shadow"] .stats .stat strong, :root[data-theme="shadow"] .stats .stat b { font-size: 34px; color: #e6f4ff; text-shadow: 0 0 14px #3fb0ff; }
@media (max-width: 900px) {
  :root[data-theme="shadow"] .posts.list .trade-card.v2 { grid-template-columns: 1fr 64px 1fr; grid-template-areas: "num num st" "off arr wnt" "act act act" "hd hd hd"; padding: 14px 14px 12px 20px; gap: 8px 10px; }
  :root[data-theme="shadow"] .posts.list .tc-status { font-size: 14px; padding: 4px 10px; }
  :root[data-theme="shadow"] .posts.list .tc-delta { font-size: 11px; }
  :root[data-theme="shadow"] .posts.list .ic-cell { flex-direction: column; align-items: flex-start; gap: 2px; }
  :root[data-theme="shadow"] .posts.list .post-acts { justify-content: stretch; }
}

/* ====== trade details: hunter rank, demand bars, time-left bar, notes ====== */
.tc-hrank, .tc-ttl, .ic-v, .ic-dem { display: none; }
:root[data-theme="shadow"] .tc-hrank { display: inline-grid; place-items: center; height: 24px; padding: 0 10px; font: 800 14px var(--font-display); letter-spacing: .12em; color: #04101a; background: var(--hc, #8aa); clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%); box-shadow: 0 0 12px var(--hc, #8aa); }
:root[data-theme="shadow"] .tc-hrank.r-E { --hc: #8d98ad; } :root[data-theme="shadow"] .tc-hrank.r-D { --hc: #5fd68a; } :root[data-theme="shadow"] .tc-hrank.r-C { --hc: #4aa8ff; }
:root[data-theme="shadow"] .tc-hrank.r-B { --hc: #9d6bff; } :root[data-theme="shadow"] .tc-hrank.r-A { --hc: #ffb347; } :root[data-theme="shadow"] .tc-hrank.r-S { --hc: #ff4d6d; animation: cy-blink 1.6s ease-in-out infinite; }
:root[data-theme="shadow"] .tc-ttl { display: inline-block; width: 90px; height: 5px; background: rgba(63, 176, 255, .15); border: 1px solid rgba(63, 176, 255, .3); }
:root[data-theme="shadow"] .tc-ttl i { display: block; height: 100%; background: linear-gradient(90deg, #3fb0ff, #9d4edf); box-shadow: 0 0 8px #3fb0ff; }
:root[data-theme="shadow"] .posts.list .ic-v { display: block; font: 700 13px var(--font-display); letter-spacing: .06em; color: #8fc6ff; }
:root[data-theme="shadow"] .posts.list .ic-dem { display: block; width: 54px; height: 3px; margin-top: 2px; background: rgba(255, 255, 255, .1); }
:root[data-theme="shadow"] .posts.list .ic-dem i { display: block; height: 100%; background: linear-gradient(90deg, #3fb0ff, #ff4d6d); }
:root[data-theme="shadow"] .posts.list .trade-card.v2 .tc-note { display: block; grid-area: hd; margin: 0; padding-top: 24px; font-size: 14px; color: #b9c8e6; font-style: italic; }
:root[data-theme="shadow"] .posts.list .trade-card.v2 .tc-note::before { content: "NOTE \25B8 "; color: var(--cyan); font-style: normal; font-weight: 700; letter-spacing: .1em; }
:root[data-theme="shadow"] .posts.list .tc-head { padding-bottom: 2px; }

/* ====== Shadow Monarch: Daily Quest ("Quest Directions" system window) ====== */
.qs-fab, .qs-back, .qs-toast { display: none; }
:root[data-theme="shadow"] .qs-fab { display: flex; position: fixed; right: 16px; bottom: 16px; z-index: 60; align-items: center; gap: 9px; padding: 9px 14px 9px 10px; min-height: 0; font: 700 14px/1 "Barlow Condensed", "Consolas", monospace; letter-spacing: .16em; color: #cfeaff; cursor: pointer; background: linear-gradient(160deg, rgba(10, 22, 52, .96), rgba(5, 10, 26, .96)); border: 1px solid rgba(63, 176, 255, .6); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); box-shadow: inset 0 0 14px rgba(63, 176, 255, .25); transition: filter .2s; }
:root[data-theme="shadow"] .qs-fab:hover { filter: drop-shadow(0 0 8px #3fb0ff); }
.qs-fab-i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #7fd8ff; color: #7fd8ff; font-size: 14px; }
.qs-fab b { color: #7fd8ff; letter-spacing: .06em; }
.qs-fab.alert { color: #fff; border-color: #ffd36a; animation: qsAlert 1.2s ease-in-out infinite; }
.qs-fab.alert .qs-fab-i, .qs-fab.alert b { color: #ffd36a; border-color: #ffd36a; }
.qs-fab.clear { opacity: .75; }
@keyframes qsAlert { 50% { box-shadow: inset 0 0 22px rgba(255, 211, 106, .55), 0 0 18px rgba(255, 211, 106, .5); } }
@media (max-width: 720px) { .qs-fab-t { display: none; } .qs-fab { padding: 9px 12px 9px 10px; bottom: 12px; right: 12px; } }

:root[data-theme="shadow"] .qs-back { display: grid; position: fixed; inset: 0; z-index: 400; place-items: center; padding: 16px; background: rgba(2, 5, 14, .72); backdrop-filter: blur(3px); animation: qsIn .25s ease-out; }
@keyframes qsIn { from { opacity: 0; } }
.qs-win { position: relative; width: min(400px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 14px 26px 22px; text-align: center; color: #e4efff; font-family: "Barlow Condensed", "Consolas", sans-serif; text-transform: uppercase; background: linear-gradient(180deg, #0d2658, #091b45 55%, #081538); border: 1px solid rgba(110, 190, 255, .75); box-shadow: inset 0 0 40px rgba(63, 176, 255, .22), 0 0 40px rgba(63, 176, 255, .35); animation: qsWin .45s cubic-bezier(.2, .9, .3, 1); }
.qs-win::before, .qs-win::after { content: ""; position: absolute; width: 56px; height: 56px; border: 2px solid rgba(127, 216, 255, .55); pointer-events: none; }
.qs-win::before { left: 6px; bottom: 6px; border-top: 0; border-right: 0; border-radius: 0 0 0 26px; }
.qs-win::after { right: 6px; bottom: 6px; border-top: 0; border-left: 0; border-radius: 0 0 26px 0; }
@keyframes qsWin { from { opacity: 0; transform: scaleY(.1) scaleX(.9); filter: brightness(2.2); } }
.qs-back.pulse .qs-win { animation: qsPulse .7s ease-out; }
@keyframes qsPulse { 30% { box-shadow: inset 0 0 70px rgba(127, 216, 255, .6), 0 0 70px rgba(63, 176, 255, .8); } }
.qs-top { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 6px 28px 12px; margin: 0 -8px 12px; font-size: 21px; font-weight: 700; letter-spacing: .06em; border-bottom: 1px solid rgba(110, 190, 255, .4); }
.qs-bang { display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid #e4efff; border-radius: 50%; font-size: 15px; }
.qs-x { position: absolute; right: 0; top: 0; width: 30px; height: 30px; min-height: 0; padding: 0; font-size: 24px; line-height: 1; color: #9fdcff; background: none; border: 0; cursor: pointer; }
.qs-x:hover { color: #fff; }
.qs-sub { margin: 4px 0 14px; font-size: 14px; font-weight: 600; letter-spacing: .04em; }
.qs-meta { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; margin: 0 0 14px; padding: 8px 10px; background: rgba(0, 0, 0, .25); border: 1px solid rgba(110, 190, 255, .25); }
.qs-meta small { display: block; font-size: 10px; letter-spacing: .18em; color: #8fb4dc; }
.qs-meta b { font-size: 22px; color: #7fd8ff; text-shadow: 0 0 10px #3fb0ff; }
.qs-rk { font-size: 30px !important; line-height: 1; }
.qs-xp i { display: block; height: 6px; margin-top: 4px; background: rgba(255, 255, 255, .1); }
.qs-xp u { display: block; height: 100%; background: linear-gradient(90deg, #3fb0ff, #9b6bff); box-shadow: 0 0 8px #3fb0ff; }
.qs-goal { margin: 6px 0 8px; font-size: 20px; font-weight: 700; letter-spacing: .08em; color: #5dff9a; text-shadow: 0 0 10px rgba(93, 255, 154, .6); }
.qs-list { display: grid; gap: 7px; margin: 0 0 14px; padding: 0; list-style: none; text-align: left; font-size: 16px; font-weight: 600; }
.qs-list li { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: baseline; padding: 3px 4px; border-bottom: 1px dashed rgba(110, 190, 255, .18); }
.qs-tag { color: #e4efff; }
.qs-ct { color: #cfeaff; }
.qs-list li.ok .qs-tag { color: #5dff9a; text-shadow: 0 0 8px rgba(93, 255, 154, .6); }
.qs-list li.ok .qs-nm, .qs-list li.ok .qs-ct { color: #7fb0a0; text-decoration: line-through; text-decoration-color: rgba(93, 255, 154, .5); }
.qs-note { margin: 0 0 12px; padding: 6px; font-size: 14px; letter-spacing: .08em; color: #ffd36a; border: 1px solid rgba(255, 211, 106, .4); background: rgba(255, 211, 106, .08); }
.qs-warn { margin: 6px 0 4px; font-size: 15px; font-weight: 600; line-height: 1.35; }
.qs-warn b { color: #ff3b3b; text-shadow: 0 0 8px rgba(255, 59, 59, .7); }
.qs-left { color: #ff8a8a; font-variant-numeric: tabular-nums; }
.qs-done { margin: 8px 0 4px; font-size: 18px; font-weight: 700; letter-spacing: .12em; color: #5dff9a; text-shadow: 0 0 12px rgba(93, 255, 154, .6); }
.qs-clock { margin: 10px 0 8px; color: #9fdcff; filter: drop-shadow(0 0 8px #3fb0ff); }
.qs-hand { transform-origin: 24px 30px; animation: qsTick 6s linear infinite; }
@keyframes qsTick { to { transform: rotate(360deg); } }
.qs-claim { width: 100%; min-height: 0; padding: 11px; font: 700 17px/1 "Barlow Condensed", "Consolas", sans-serif; letter-spacing: .2em; color: #fff; cursor: pointer; background: linear-gradient(180deg, #3fb0ff 0 50%, #2a5df0 50% 100%); border: 0; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.qs-claim:disabled { color: #6f8fb5; cursor: not-allowed; background: rgba(255, 255, 255, .07); }
.qs-toast { display: grid; position: fixed; left: 50%; bottom: 78px; z-index: 500; gap: 3px; min-width: 240px; padding: 10px 22px; text-align: center; text-transform: uppercase; font-family: "Barlow Condensed", "Consolas", sans-serif; color: #e4efff; background: rgba(8, 22, 52, .96); border: 1px solid #7fd8ff; box-shadow: inset 0 0 18px rgba(63, 176, 255, .3), 0 0 24px rgba(63, 176, 255, .5); transform: translateX(-50%); animation: qsToast .4s ease-out; transition: opacity .5s; }
.qs-toast.out { opacity: 0; }
.qs-toast b { font-size: 12px; letter-spacing: .3em; color: #5dff9a; }
.qs-toast span { font-size: 18px; font-weight: 700; letter-spacing: .08em; }
.qs-toast em { font-style: normal; font-size: 13px; letter-spacing: .1em; color: #ffd36a; }
@keyframes qsToast { from { opacity: 0; transform: translate(-50%, 14px); } }
html:not([data-theme="shadow"]) .qs-fab, html:not([data-theme="shadow"]) .qs-back, html:not([data-theme="shadow"]) .qs-toast { display: none !important; }
@media (prefers-reduced-motion: reduce) { .qs-hand, .qs-fab.alert, .qs-win { animation: none; } }

/* Daily Quest v2: tabs, rewards screen, loot result, inventory, equipped aura (--qa) and title (--qt) */
:root[data-theme="shadow"] { --qa: #3fb0ff; }
:root[data-theme="shadow"] .sys-hud .c { border-color: var(--qa); filter: drop-shadow(0 0 5px var(--qa)); }
:root[data-theme="shadow"] .sys-hud span { color: var(--qa); text-shadow: 0 0 8px var(--qa); }
:root[data-theme="shadow"] .sys-hud .r2::before { content: var(--qt, ""); }
:root[data-theme="shadow"] .rail-av { color: var(--qa); border-color: var(--qa); box-shadow: inset 0 0 12px color-mix(in srgb, var(--qa) 40%, transparent); }
:root[data-theme="shadow"] .qs-fab { border-color: var(--qa); box-shadow: inset 0 0 14px color-mix(in srgb, var(--qa) 35%, transparent); }
:root[data-theme="shadow"] .qs-fab-i, :root[data-theme="shadow"] .qs-fab b { color: var(--qa); border-color: var(--qa); }
:root[data-theme="shadow"] .qs-fab.alert .qs-fab-i, :root[data-theme="shadow"] .qs-fab.alert b { color: #ffd36a; border-color: #ffd36a; }
:root[data-theme="shadow"] .qs-win { border-color: var(--qa); box-shadow: inset 0 0 40px color-mix(in srgb, var(--qa) 22%, transparent), 0 0 40px color-mix(in srgb, var(--qa) 40%, transparent); }
:root[data-theme="shadow"] .qs-win::before, :root[data-theme="shadow"] .qs-win::after { border-color: var(--qa); }
.qs-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: -2px 0 12px; }
.qs-tabs button { min-height: 0; padding: 7px; font: 700 14px/1 "Barlow Condensed", "Consolas", sans-serif; letter-spacing: .14em; color: #8fb4dc; cursor: pointer; background: rgba(0, 0, 0, .25); border: 1px solid rgba(110, 190, 255, .25); }
.qs-tabs button.on { color: #fff; background: rgba(63, 176, 255, .18); border-color: var(--qa); }
.qs-ttl { margin-top: 5px; color: #ffd36a !important; letter-spacing: .12em !important; }
.qs-goal.sm { margin: 10px 0 6px; font-size: 14px; letter-spacing: .2em; }
.qs-got { margin: 22px 0 16px; font-size: 20px; font-weight: 500; text-transform: none; letter-spacing: .04em; }
.qs-rw { display: grid; gap: 10px; margin: 0 0 22px; padding: 18px 16px; list-style: none; border: 1px solid rgba(160, 205, 255, .55); }
.qs-rw li { padding: 7px 8px; font-size: 18px; font-weight: 500; text-transform: none; letter-spacing: .05em; border: 1px solid rgba(160, 205, 255, .5); background: rgba(0, 0, 0, .22); }
.qs-ask { margin: 22px 0 18px; font-size: 19px; font-weight: 500; text-transform: none; letter-spacing: .05em; }
.qs-yn { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 14px; }
.qs-yn button { min-height: 0; padding: 9px; font: 600 19px/1 "Barlow Condensed", "Consolas", sans-serif; color: #fff; cursor: pointer; background: rgba(0, 0, 0, .35); border: 1px solid rgba(190, 220, 255, .85); transition: background .2s, box-shadow .2s; }
.qs-yn button:hover:not(:disabled) { background: rgba(63, 176, 255, .25); box-shadow: 0 0 14px rgba(63, 176, 255, .6); }
.qs-yn button:disabled { opacity: .5; }
.qs-fine { margin-top: 8px; font-size: 11px; letter-spacing: .08em; color: #7f9cc4; text-transform: none; line-height: 1.4; }
.qs-bad { color: #ffb36a; font-size: 14px; }
.qs-loot { --rc: #9fb4d6; display: grid; gap: 4px; margin: 0 0 18px; padding: 16px 10px; border: 1px solid var(--rc); background: radial-gradient(circle at 50% 0, color-mix(in srgb, var(--rc) 28%, transparent), transparent 70%), rgba(0, 0, 0, .3); box-shadow: 0 0 22px color-mix(in srgb, var(--rc) 55%, transparent), inset 0 0 18px color-mix(in srgb, var(--rc) 25%, transparent); animation: qsLoot .8s cubic-bezier(.2, 1.4, .4, 1); }
.qs-loot small { font-size: 11px; letter-spacing: .3em; color: #8fb4dc; }
.qs-loot b { font-size: 25px; letter-spacing: .05em; color: var(--rc); text-shadow: 0 0 14px var(--rc); }
.qs-loot em { font-style: normal; font-size: 13px; letter-spacing: .16em; color: #e4efff; }
@keyframes qsLoot { from { opacity: 0; transform: scale(.4) rotate(-6deg); filter: brightness(3); } }
.qs-inv { display: grid; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; text-align: left; }
.qs-inv li { --rc: #9fb4d6; display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 6px 10px; border: 1px solid color-mix(in srgb, var(--rc) 55%, transparent); background: rgba(0, 0, 0, .25); }
.qs-inv li.eq { background: color-mix(in srgb, var(--rc) 16%, transparent); border-color: var(--rc); }
.qs-inv li.lock { opacity: .5; }
.qs-inv b { font-size: 16px; color: var(--rc); letter-spacing: .04em; }
.qs-inv em { font-style: normal; font-size: 11px; letter-spacing: .14em; color: #8fb4dc; }
.qs-inv span { font-size: 11px; letter-spacing: .12em; color: #6f8fb5; }
.qs-inv button { min-height: 0; padding: 4px 10px; font: 700 12px/1 "Barlow Condensed", "Consolas", sans-serif; letter-spacing: .12em; color: #cfeaff; cursor: pointer; background: rgba(63, 176, 255, .12); border: 1px solid rgba(110, 190, 255, .6); }
.qs-inv li.eq button { color: #5dff9a; border-color: #5dff9a; cursor: default; }
@media (prefers-reduced-motion: reduce) { .qs-loot { animation: none; } }
.qs-inv b { line-height: 1.1; }
.qs-win { padding-bottom: 40px; }
.qs-rk.r-E { color: #9fb4d6 !important; text-shadow: none !important; } .qs-rk.r-D { color: #7fd8ff !important; } .qs-rk.r-C { color: #5dff9a !important; text-shadow: 0 0 10px #5dff9a !important; }
.qs-rk.r-B { color: #3fb0ff !important; } .qs-rk.r-A { color: #b07bff !important; text-shadow: 0 0 12px #b07bff !important; } .qs-rk.r-S { color: #ff4d6d !important; text-shadow: 0 0 12px #ff4d6d !important; }
.qs-rk.r-SS { color: #ff9a3d !important; text-shadow: 0 0 14px #ff9a3d !important; } .qs-rk.r-SSS { color: #ffd36a !important; text-shadow: 0 0 16px #ffd36a, 0 0 30px #ff9a3d !important; animation: qsSSS 1.6s ease-in-out infinite; }
@keyframes qsSSS { 50% { filter: brightness(1.5); } }
.qs-rankup { margin: -4px 0 10px; padding: 7px; font-size: 16px; letter-spacing: .14em; color: #ffd36a; border: 1px solid #ffd36a; background: rgba(255, 211, 106, .1); animation: qsLoot .8s ease-out; }
.qs-rankup b { font-size: 22px; }
.qs-stk { margin: 0 0 12px; font-size: 14px; letter-spacing: .16em; color: #8fb4dc; }
.qs-stk b { color: #7fd8ff; font-size: 18px; text-shadow: 0 0 10px #3fb0ff; }
.qs-meta > div:last-child { text-align: right; }
@media (max-width: 720px) { .qs-meta { gap: 8px; } .qs-meta b { font-size: 18px; } .qs-meta small { font-size: 9px; letter-spacing: .1em; } }
/* Daily Quest button: top-left, just under the title bar (beside the rail on PC) */
:root[data-theme="shadow"] .qs-fab { right: auto; bottom: auto; left: 12px; top: 70px; z-index: 29; }
@media (min-width: 1181px) { :root[data-theme="shadow"] .qs-fab { left: 78px; top: 72px; } }
@media (max-width: 720px) { :root[data-theme="shadow"] .qs-fab { left: 10px; top: 66px; } }
:root[data-theme="shadow"] .qs-toast { bottom: auto; top: 118px; }
@keyframes qsToast { from { opacity: 0; transform: translate(-50%, -14px); } }
/* Monarch's Mark badge (1% loot drop), shown next to the poster's name on the trade board */
.sm-badge { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-left: 7px; vertical-align: middle; color: #ffb3b3; background: radial-gradient(circle, rgba(255, 59, 59, .35), rgba(110, 15, 15, .6)); border: 1px solid #ff3b3b; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); filter: drop-shadow(0 0 5px #ff3b3b); animation: smB 2.4s ease-in-out infinite; }
.sm-badge svg { width: 15px; height: 15px; }
@keyframes smB { 50% { filter: drop-shadow(0 0 10px #ff3b3b) brightness(1.3); } }
.qs-badge-drop { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; margin: 0 0 16px; padding: 12px; text-align: left; border: 1px solid #ff3b3b; background: rgba(255, 59, 59, .1); box-shadow: 0 0 22px rgba(255, 59, 59, .45); animation: qsLoot .8s ease-out; }
.qs-badge-drop .sm-badge { width: 44px; height: 44px; margin: 0; } .qs-badge-drop .sm-badge svg { width: 26px; height: 26px; }
.qs-badge-drop small { display: block; font-size: 10px; letter-spacing: .22em; color: #ffb3b3; } .qs-badge-drop b { display: block; font-size: 20px; color: #ff3b3b; text-shadow: 0 0 12px #ff3b3b; }
.qs-badge-drop em { font-style: normal; font-size: 12px; color: #c9d6ec; text-transform: none; }
@media (prefers-reduced-motion: reduce) { .sm-badge { animation: none; } }

/* Quest button gets its own strip under the title bar so it never covers page headings */
:root[data-theme="shadow"] main.wrap { margin-top: 56px; }
@media (max-width: 720px) { :root[data-theme="shadow"] main.wrap { margin-top: 52px; } }

/* Inventory v2: wide window, equipped preview, collection bar, filter chips, card grid */
.qs-win.qs-wide { width: min(760px, 100%); }
.qs-eqp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 12px; }
.qs-eqp > div { --rc: #9fb4d6; display: grid; justify-items: center; gap: 3px; padding: 10px 6px; border: 1px solid color-mix(in srgb, var(--rc) 55%, transparent); background: rgba(0, 0, 0, .28); }
.qs-eqp small { font-size: 10px; letter-spacing: .22em; color: #8fb4dc; }
.qs-eqp b { font-size: 15px; letter-spacing: .04em; color: #e4efff; line-height: 1.1; }
.qs-orb { --rc: #3fb0ff; display: block; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--rc) 45%, color-mix(in srgb, var(--rc) 25%, #000)); box-shadow: 0 0 14px var(--rc), 0 0 28px color-mix(in srgb, var(--rc) 50%, transparent); }
.qs-tt { --rc: #9fb4d6; display: grid; place-items: center; width: 30px; height: 30px; font: 700 17px/1 "Barlow Condensed", sans-serif; color: var(--rc); border: 1px solid var(--rc); background: color-mix(in srgb, var(--rc) 14%, transparent); clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.qs-q { font: 700 24px/1 "Barlow Condensed", sans-serif; color: #5d7699; }
.qs-col { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; margin: 0 0 10px; font-size: 12px; letter-spacing: .16em; color: #8fb4dc; }
.qs-col i { display: block; height: 6px; background: rgba(255, 255, 255, .1); }
.qs-col u { display: block; height: 100%; background: linear-gradient(90deg, #3fb0ff, #ff3b3b); box-shadow: 0 0 8px #3fb0ff; }
.qs-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.qs-chips button { min-height: 0; padding: 6px 14px; font: 700 13px/1 "Barlow Condensed", "Consolas", sans-serif; letter-spacing: .14em; color: #8fb4dc; cursor: pointer; background: rgba(0, 0, 0, .25); border: 1px solid rgba(110, 190, 255, .25); }
.qs-chips button.on { color: #fff; background: rgba(63, 176, 255, .2); border-color: var(--qa, #3fb0ff); }
.qs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 0 0 8px; padding: 0; list-style: none; }
.qs-ic { --rc: #9fb4d6; display: grid; justify-items: center; align-content: start; gap: 6px; padding: 12px 8px 10px; text-align: center; border: 1px solid color-mix(in srgb, var(--rc) 50%, transparent); background: radial-gradient(circle at 50% 0, color-mix(in srgb, var(--rc) 16%, transparent), transparent 70%), rgba(0, 0, 0, .28); }
.qs-ic.eq { border-color: var(--rc); box-shadow: inset 0 0 18px color-mix(in srgb, var(--rc) 25%, transparent), 0 0 12px color-mix(in srgb, var(--rc) 35%, transparent); }
.qs-ic.lock { opacity: .5; }
.qs-ic-i { display: grid; place-items: center; height: 46px; }
.qs-ic b { font-size: 15px; line-height: 1.1; color: var(--rc); letter-spacing: .03em; }
.qs-ic em { font-style: normal; font-size: 10px; letter-spacing: .14em; color: #8fb4dc; }
.qs-ic span:not(.qs-orb):not(.qs-tt):not(.qs-q):not(.sm-badge) { font-size: 11px; letter-spacing: .14em; color: #6f8fb5; }
.qs-ic button { margin-top: 2px; min-height: 0; padding: 5px 12px; font: 700 12px/1 "Barlow Condensed", "Consolas", sans-serif; letter-spacing: .14em; color: #cfeaff; cursor: pointer; background: rgba(63, 176, 255, .12); border: 1px solid rgba(110, 190, 255, .6); }
.qs-ic.eq button { color: #5dff9a; border-color: #5dff9a; cursor: default; }
@media (max-width: 720px) { .qs-grid { grid-template-columns: repeat(2, 1fr); } .qs-eqp b { font-size: 13px; } }
@media (max-width: 720px) { :root[data-theme="shadow"] .qs-fab { top: 62px; padding: 6px 10px 6px 8px; } :root[data-theme="shadow"] .qs-fab-i { width: 18px; height: 18px; font-size: 12px; } }

/* Inventory v3: stylish icons (ring + glow), chamfered rarity cards, shine on equipped */
.qs-ico { --rc: #3fb0ff; position: relative; display: grid; place-items: center; width: 54px; height: 54px; color: var(--rc); }
.qs-ico::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, var(--rc), transparent 28%, var(--rc) 52%, transparent 78%, var(--rc)); opacity: .9; animation: qsSpin 5s linear infinite; }
.qs-ico::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--rc) 28%, #0a1636), #060d22 72%); }
.qs-ico svg { position: relative; z-index: 1; width: 26px; height: 26px; filter: drop-shadow(0 0 5px var(--rc)); }
.qs-ico.hex::before, .qs-ico.hex::after { border-radius: 0; clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); }
.qs-ico.r4::before, .qs-ico.r5::before { animation-duration: 2.6s; }
.qs-ico.r4 svg, .qs-ico.r5 svg { animation: qsGlow 2s ease-in-out infinite; }
.qs-ico.dim { --rc: #5d7699; }
.qs-ico.dim::before { animation: none; opacity: .35; }
.qs-ico.dim svg { filter: none; opacity: .7; }
.qs-ico.aura .qs-orb { position: relative; z-index: 1; width: 24px; height: 24px; animation: qsGlow 2.4s ease-in-out infinite; }
.qs-dot { position: absolute; z-index: 2; left: 50%; top: -3px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px var(--rc), 0 0 14px var(--rc); transform-origin: 50% 30px; animation: qsSpin 3.4s linear infinite; }
@keyframes qsSpin { to { transform: rotate(360deg); } }
@keyframes qsGlow { 50% { filter: drop-shadow(0 0 11px var(--rc)) brightness(1.25); } }
.qs-eqp .qs-ico { width: 46px; height: 46px; } .qs-eqp .qs-ico svg { width: 22px; height: 22px; } .qs-eqp .qs-orb { width: 20px; height: 20px; } .qs-eqp .qs-dot { transform-origin: 50% 26px; }
.qs-ic { position: relative; overflow: hidden; clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); padding-top: 16px; transition: transform .2s, filter .2s; }
.qs-ic::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--rc), transparent); box-shadow: 0 0 12px var(--rc); }
.qs-ic:not(.lock):hover { transform: translateY(-3px); filter: brightness(1.15); }
.qs-ic.eq::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .16), transparent); animation: qsShine 3.4s ease-in-out infinite; pointer-events: none; }
@keyframes qsShine { 60%, 100% { left: 130%; } }
.qs-ic.r4:not(.lock), .qs-ic.r5:not(.lock) { background: radial-gradient(circle at 50% 0, color-mix(in srgb, var(--rc) 28%, transparent), transparent 75%), rgba(0, 0, 0, .3); }
.qs-ic-i { height: 58px; }
.qs-ic em { padding: 2px 8px; border: 1px solid color-mix(in srgb, var(--rc) 45%, transparent); background: color-mix(in srgb, var(--rc) 10%, transparent); color: color-mix(in srgb, var(--rc) 70%, #fff); }
.qs-ic b { font-size: 16px; text-shadow: 0 0 10px color-mix(in srgb, var(--rc) 60%, transparent); }
.qs-chips button i { font-style: normal; margin-left: 4px; padding: 1px 6px; font-size: 11px; background: rgba(255, 255, 255, .1); }
.qs-chips button.on i { background: rgba(63, 176, 255, .4); color: #fff; }
.qs-grid { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 10px; }
@media (prefers-reduced-motion: reduce) { .qs-ico::before, .qs-dot, .qs-ico svg, .qs-orb, .qs-ic.eq::after { animation: none !important; } }
.qs-ico .qs-orb { --rc: inherit; }
@media (max-width: 720px) { .qs-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } .qs-ic b { font-size: 14px; } .qs-ic { padding-left: 4px; padding-right: 4px; } }

/* Dungeon leaderboard (quest window tab and the Streaks page board) */
.qs-tabs button { padding-left: 4px; padding-right: 4px; letter-spacing: .1em; }
.qs-lb { display: grid; gap: 5px; margin: 0 0 10px; padding: 0; list-style: none; text-align: left; counter-reset: none; }
.qs-lb li { display: grid; grid-template-columns: 24px 38px 1fr auto auto; gap: 8px; align-items: center; padding: 7px 10px; background: rgba(0, 0, 0, .28); border: 1px solid rgba(110, 190, 255, .2); font-size: 15px; font-weight: 600; letter-spacing: .03em; }
.qs-lb li.top { border-color: rgba(255, 211, 106, .5); background: rgba(255, 211, 106, .06); }
.qs-lb li.me { border-color: var(--qa, #3fb0ff); box-shadow: inset 0 0 14px color-mix(in srgb, var(--qa, #3fb0ff) 30%, transparent); }
.qs-lb .n { color: #8fb4dc; }
.qs-lb .rk, .hr-badge { display: grid; place-items: center; min-width: 34px; padding: 2px 4px; font: 700 15px/1.1 "Barlow Condensed", sans-serif; border: 1px solid currentColor; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.qs-lb .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #e4efff; }
.qs-lb .xp { color: #7fd8ff; font-size: 14px; }
.qs-lb .sk { display: inline-flex; align-items: center; gap: 3px; min-width: 44px; justify-content: flex-end; color: #ffb36a; font-size: 14px; }
.qs-lb .r-E, .hr-E { color: #9fb4d6; } .qs-lb .r-D, .hr-D { color: #7fd8ff; } .qs-lb .r-C, .hr-C { color: #5dff9a; } .qs-lb .r-B, .hr-B { color: #3fb0ff; }
.qs-lb .r-A, .hr-A { color: #b07bff; } .qs-lb .r-S, .hr-S { color: #ff4d6d; } .qs-lb .r-SS, .hr-SS { color: #ff9a3d; } .qs-lb .r-SSS, .hr-SSS { color: #ffd36a; text-shadow: 0 0 8px #ffd36a; }
.hr-badge { display: inline-grid; margin-right: 4px; vertical-align: middle; }
.lb-dungeon { display: none; }
:root[data-theme="shadow"] .lb-dungeon { display: block; grid-column: 1 / -1; }
@media (max-width: 480px) { .qs-lb li { grid-template-columns: 20px 34px 1fr auto; } .qs-lb .sk { display: none; } }

/* saved loot boxes */
.qs-yn3 { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.qs-yn3 button { font-size: 16px; padding: 9px 4px; }
.qs-boxes { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; margin: 0 0 12px; padding: 8px 12px; text-align: left; border: 1px solid rgba(110, 190, 255, .25); background: rgba(0, 0, 0, .28); }
.qs-boxes.has { border-color: #ffd36a; background: rgba(255, 211, 106, .07); box-shadow: inset 0 0 16px rgba(255, 211, 106, .15); }
.qs-boxes small { display: block; font-size: 10px; letter-spacing: .2em; color: #8fb4dc; }
.qs-boxes b { font-size: 17px; color: #e4efff; letter-spacing: .05em; } .qs-boxes.has b { color: #ffd36a; }
.qs-boxes button { min-height: 0; padding: 8px 18px; font: 700 14px/1 "Barlow Condensed", "Consolas", sans-serif; letter-spacing: .16em; color: #1a1200; cursor: pointer; background: linear-gradient(180deg, #ffe08a 0 50%, #ffc23d 50% 100%); border: 0; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); animation: qsAlert 1.4s ease-in-out infinite; }
.qs-boxes .qs-ico { width: 44px; height: 44px; }
.qs-loot.saved b { font-size: 20px; }
.qs-fab-bx { padding: 2px 6px; font-size: 11px; letter-spacing: .1em; color: #1a1200; background: #ffd36a; }
@media (prefers-reduced-motion: reduce) { .qs-boxes button { animation: none; } }

/* ====== System button + "eyes" animation (Shadow Monarch only) ====== */
.sys-eye-btn { display: none; }
:root[data-theme="shadow"] .sys-eye-btn { display: flex; position: fixed; left: 50%; bottom: 14px; z-index: 28; transform: translateX(-50%); align-items: center; gap: 8px; min-height: 0; padding: 6px 16px 6px 10px; font: 700 13px/1 "Barlow Condensed", "Consolas", monospace; letter-spacing: .28em; color: var(--qa, #3fb0ff); cursor: pointer; background: linear-gradient(160deg, rgba(10, 22, 52, .94), rgba(4, 8, 22, .94)); border: 1px solid color-mix(in srgb, var(--qa, #3fb0ff) 65%, transparent); clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%); box-shadow: inset 0 0 14px color-mix(in srgb, var(--qa, #3fb0ff) 30%, transparent); transition: filter .2s; }
:root[data-theme="shadow"] .sys-eye-btn:hover { filter: drop-shadow(0 0 10px var(--qa, #3fb0ff)) brightness(1.2); }
.sys-eye-btn svg { filter: drop-shadow(0 0 5px currentColor); animation: syBlink 4.5s ease-in-out infinite; }
@keyframes syBlink { 0%, 90%, 100% { opacity: 1; } 94% { opacity: .35; } }
@media (max-width: 720px) { :root[data-theme="shadow"] .sys-eye-btn { bottom: 44px; padding: 5px 12px 5px 8px; } .sys-eye-btn svg { width: 26px; height: 26px; } }

/* the page rushes toward you and goes dark */
html.sy-play body { overflow: hidden; }
html.sy-play main, html.sy-play .nav, html.sy-play .sys-rail, html.sy-play .sys-hud, html.sy-play .qs-fab, html.sy-play .sys-eye-btn { transition: transform 2.6s cubic-bezier(.55, 0, .85, .35), filter 2s ease-in, opacity 2s ease-in; transform-origin: 50% 40%; transform: scale(1.35); filter: brightness(.12) blur(4px); opacity: .5; }
html.sy-play .sys-eye-btn { transform: translateX(-50%) scale(1.35); }
.sy-ov { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; overflow: hidden; cursor: pointer; background: radial-gradient(ellipse at 50% 50%, rgba(2, 3, 10, .72), #000 70%); animation: syDark 1.8s ease-in forwards; transition: opacity .6s; }
.sy-ov.out { opacity: 0; }
@keyframes syDark { from { opacity: 0; } to { opacity: 1; } }
.sy-mist { position: absolute; inset: -20%; background: radial-gradient(circle at 30% 60%, rgba(70, 30, 160, .28), transparent 45%), radial-gradient(circle at 72% 40%, rgba(30, 70, 200, .22), transparent 48%); filter: blur(30px); opacity: 0; animation: syMist 6s ease-in-out 1.2s forwards; }
@keyframes syMist { 0% { opacity: 0; transform: scale(1); } 40% { opacity: 1; } 100% { opacity: .7; transform: scale(1.35); } }
.sy-eyes { position: relative; display: flex; gap: min(7vw, 70px); align-items: center; justify-content: center; opacity: 0; animation: syRush 4.6s cubic-bezier(.3, .1, .6, 1) 1.6s forwards; }
@keyframes syRush { 0% { opacity: 1; transform: scale(.55); } 100% { opacity: 1; transform: scale(1.5); } }
.sy-eye { position: relative; width: min(26vw, 210px); aspect-ratio: 120 / 46; filter: drop-shadow(0 0 6px #3a86ff) drop-shadow(0 0 20px #2a7bff) drop-shadow(0 0 46px rgba(42, 123, 255, .85)); }
.sy-eye.r { transform: scaleX(-1); }
.sy-sh { position: relative; z-index: 2; display: block; width: 100%; height: auto; transform-origin: 50% 50%; animation: syOpen 1s ease-out 1.6s both, syPulse 1.6s ease-in-out 2.8s infinite; }
@keyframes syOpen { 0% { transform: scaleY(0); opacity: 0; } 20% { transform: scaleY(.9); opacity: 1; } 32% { transform: scaleY(.1); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 1; } }
@keyframes syPulse { 50% { filter: brightness(1.35) drop-shadow(0 0 10px #8fdcff); } }
/* the aura leaking out of each eye: a bloom, a streak trailing back along the slant and wisps rising like smoke */
.sy-bloom { position: absolute; z-index: 0; left: -25%; right: -25%; top: -90%; bottom: -90%; background: radial-gradient(ellipse at 50% 50%, rgba(60, 140, 255, .55), rgba(30, 80, 255, .18) 45%, transparent 70%); filter: blur(14px); opacity: 0; animation: syBloom 2.2s ease-in-out 1.9s infinite alternate; }
@keyframes syBloom { from { opacity: .55; transform: scale(.92); } to { opacity: 1; transform: scale(1.1); } }
.sy-trail { position: absolute; z-index: 1; right: 88%; top: -10%; width: 130%; height: 12px; transform-origin: 100% 50%; transform: rotate(-10deg) scaleX(0); background: linear-gradient(270deg, rgba(140, 215, 255, .95), rgba(40, 110, 255, .6) 35%, transparent); filter: blur(5px); opacity: 0; animation: syTrail 2.4s ease-out 2.1s infinite; }
@keyframes syTrail { 0% { opacity: 0; transform: rotate(-10deg) scaleX(0); } 25% { opacity: 1; transform: rotate(-12deg) scaleX(1); } 100% { opacity: 0; transform: rotate(-16deg) scaleX(1.3) translateY(-12px); } }
.sy-w { position: absolute; z-index: 1; bottom: 30%; width: 22px; height: 120px; margin-left: -11px; border-radius: 50% 50% 40% 40% / 70% 70% 30% 30%; background: linear-gradient(0deg, rgba(90, 170, 255, .85), rgba(40, 100, 255, .35) 55%, transparent); filter: blur(7px); opacity: 0; transform-origin: 50% 100%; animation: syWisp 2.6s ease-out infinite; }
.sy-w.w1 { left: 22%; animation-delay: 2.0s; } .sy-w.w2 { left: 42%; width: 28px; height: 150px; animation-delay: 2.5s; } .sy-w.w3 { left: 62%; animation-delay: 3.0s; height: 140px; } .sy-w.w4 { left: 78%; width: 16px; animation-delay: 3.5s; }
@keyframes syWisp { 0% { opacity: 0; transform: translateY(10px) scale(.6, .4) skewX(0); } 25% { opacity: .95; } 100% { opacity: 0; transform: translateY(-85px) scale(1.2, 1.5) skewX(-14deg); } }
.sy-flare { position: absolute; left: -20%; right: -20%; top: 50%; height: 2px; background: linear-gradient(90deg, transparent, rgba(120, 190, 255, .9), transparent); box-shadow: 0 0 18px #2a7bff; opacity: 0; transform: scaleX(0); animation: syFlare 1.4s ease-out 2.4s forwards; }
@keyframes syFlare { 30% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1.4); } }
.sy-ov.calm, .sy-ov.calm * { animation-duration: .01s !important; animation-delay: 0s !important; }
.sy-ov.calm .sy-eyes { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .sy-w, .sy-trail, .sy-bloom { animation: none; } html.sy-play main, html.sy-play .nav, html.sy-play .sys-rail, html.sy-play .sys-hud, html.sy-play .qs-fab { transition: none; } .sys-eye-btn svg { animation: none; } }

/* ---------- Star ratings (replace Rep) ---------- */
.star-chip { display: inline-flex; align-items: center; gap: 3px; flex: none; padding: 1px 7px 1px 5px; border-radius: 999px; font: 700 11.5px/1.5 var(--font-body, inherit); color: #a86a00; background: rgba(255,184,28,.16); box-shadow: inset 0 0 0 1px rgba(255,184,28,.45); white-space: nowrap; }
.star-chip svg { display: block; color: #f5a50b; }
.star-chip b { font-weight: 800; }
.star-chip i { font-style: normal; font-weight: 600; opacity: .7; }
.star-chip.none { color: var(--muted, #6b7280); background: rgba(128,128,128,.12); box-shadow: inset 0 0 0 1px rgba(128,128,128,.3); }
.star-chip.none svg { color: currentColor; opacity: .6; }
.star-chip.top { color: #7a4b00; background: linear-gradient(135deg, #ffe27a, #ffb21a); box-shadow: 0 0 10px rgba(255,190,40,.55); }
:root[data-theme="dark"] .star-chip, :root[data-theme="shadow"] .star-chip { color: #ffd06a; }
:root[data-theme="dark"] .star-chip.top, :root[data-theme="shadow"] .star-chip.top { color: #4a2b00; }
.acct-chip.star-top { box-shadow: 0 0 12px rgba(255,190,40,.7), inset 0 0 0 1px rgba(255,190,40,.85); }
/* picker */
.star-pick { display: inline-flex; gap: 2px; align-items: center; vertical-align: middle; }
.star-b { appearance: none; border: 0; background: none; padding: 2px 3px; font-size: 30px; line-height: 1; cursor: pointer; color: rgba(128,128,128,.4); transition: transform .12s, color .12s; }
.star-b.on { color: #f5a50b; text-shadow: 0 0 10px rgba(245,165,11,.6); }
.star-b:not(:disabled):hover { transform: scale(1.18); }
.star-b:disabled { cursor: default; }
.star-pick.done .star-b:not(.on) { opacity: .5; }
.star-b:focus-visible { outline: 2px solid #f5a50b; outline-offset: 2px; border-radius: 6px; }
/* big stars on the account page: filled up to --fill */
.star-big { font-size: 26px; letter-spacing: 2px; line-height: 1; background: linear-gradient(90deg, #f5a50b var(--fill, 0%), rgba(128,128,128,.35) var(--fill, 0%)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
@media (prefers-reduced-motion: reduce) { .star-b { transition: none; } }
.rep-top { flex-wrap: wrap; align-items: center; }

/* SYSTEM button on the left side */
:root[data-theme="shadow"] .sys-eye-btn { left: 12px; bottom: 14px; transform: none; }
@media (min-width: 1181px) { :root[data-theme="shadow"] .sys-eye-btn { left: 78px; } }
@media (max-width: 720px) { :root[data-theme="shadow"] .sys-eye-btn { left: 10px; bottom: 44px; } }
html.sy-play .sys-eye-btn { transform: scale(1.35); transform-origin: 0 100%; }

/* New logo: faceted gem with trade arrows */
.logo .mark { width: 34px; height: 34px; filter: drop-shadow(0 2px 8px rgba(79, 123, 255, .55)); }
.logo:hover .mark { transform: rotate(-6deg) scale(1.1); filter: drop-shadow(0 2px 12px rgba(54, 224, 255, .8)); }
.logo .mark { width: 38px; height: 38px; margin: -3px 0; filter: drop-shadow(0 2px 9px rgba(79, 123, 255, .6)); }
.logo:hover .mark { transform: rotate(-5deg) scale(1.1); filter: drop-shadow(0 2px 14px rgba(74, 240, 255, .85)); }
.logo .mark { width: 36px; height: 36px; filter: drop-shadow(0 0 7px rgba(62, 240, 255, .55)); }
.logo:hover .mark { filter: drop-shadow(0 0 12px rgba(162, 77, 255, .85)); }

/* Blox Fruits style logo: chunky block badge and a game-style wordmark */
.logo .mark { width: 38px; height: 38px; filter: drop-shadow(0 3px 0 rgba(22, 16, 46, .35)); }
.logo:hover .mark { filter: drop-shadow(0 4px 0 rgba(22, 16, 46, .45)); transform: rotate(-5deg) scale(1.08); }
.logo [data-site-name] { font-weight: 900; letter-spacing: .5px; color: #ffd23f; -webkit-text-stroke: 3px #16102e; paint-order: stroke fill; text-shadow: 0 2px 0 #16102e; }

/* YouTube subscribe strip (home page, bottom) */
.yt-sub { display: flex; align-items: center; gap: 18px; margin: 36px 0 8px; padding: 18px 22px; border-radius: var(--radius, 16px); border: 1px solid var(--line, #e3e6ee); background: var(--card, var(--raised, #fff)); box-shadow: 0 0 0 1px rgba(255, 0, 0, .12), 0 8px 26px rgba(255, 0, 0, .1); }
.yt-ico { flex: none; display: grid; place-items: center; }
.yt-txt { flex: 1; min-width: 0; }
.yt-txt h2 { margin: 0 0 4px; font-size: 20px; }
.yt-txt p { margin: 0; color: var(--muted); }
.yt-btn { flex: none; display: inline-block; background: #ff0000; color: #fff !important; font-weight: 800; text-decoration: none; padding: 11px 24px; border-radius: 999px; box-shadow: 0 4px 14px rgba(255, 0, 0, .35); transition: transform .15s, filter .15s; }
.yt-btn:hover { transform: translateY(-2px); filter: brightness(1.1); }
@media (max-width: 640px) { .yt-sub { flex-direction: column; text-align: center; } .yt-btn { width: 100%; text-align: center; box-sizing: border-box; } }
.yt-wrap { padding-bottom: 80px; }
.yt-wrap { padding-left: 0; padding-right: 0; }
.yt-sub.pre { opacity: 0; transform: translateY(24px) scale(.97); }
.yt-sub { transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
@media (prefers-reduced-motion: reduce) { .yt-sub, .yt-sub.pre { transition: none; transform: none; opacity: 1; } }