/* AlphaLurk. Tokens per theme, then layout, then parts. */
:root {
  --bg: #0B0A09; --bg2: #141210; --card: #1A1714; --line: #2C2722; --text: #FFE9DC; --muted: #A8978B;
  --accent: #FF4A00; --accent2: #FF8A00; --ink: #140700; --good: #9DFF3A; --bad: #FF5A5A; --live: #FF2A2A;
  --grad: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
  --display: "Arial Black", "Helvetica Neue", Impact, system-ui, sans-serif; --slant: italic; --caps: uppercase; --track: .01em;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --r: 12px; --topH: calc(58px + env(safe-area-inset-top, 0px));
  --p0: #FF4A00; --p1: #35C8FF; --p2: #7CFF3A; --p3: #FF3DCB; --p4: #FFD23D; --p5: #B58CFF;
  color-scheme: dark;
}
[data-theme="ash"] { --bg: #F3F1EE; --bg2: #E9E5E0; --card: #FFFFFF; --line: #D9D2CA; --text: #1A1614; --muted: #6E645C; --accent: #E63E00; --accent2: #FF6A00; --ink: #FFFFFF; --good: #2F9E00; color-scheme: light; }
[data-theme="bloodmoon"] { --bg: #0D0607; --bg2: #16090B; --card: #1D0D10; --line: #38181D; --text: #FFE3E0; --muted: #B08A8A; --accent: #FF2A2A; --accent2: #FF5A3C; --ink: #160202; }
[data-theme="glacier"] { --bg: #071016; --bg2: #0B1820; --card: #10212C; --line: #1D3747; --text: #E2F6FF; --muted: #86A7B8; --accent: #35C8FF; --accent2: #7DE3FF; --ink: #01131C; }
[data-theme="venom"] { --bg: #070D08; --bg2: #0B140C; --card: #101C12; --line: #1E3421; --text: #ECFFE3; --muted: #8DAE86; --accent: #7CFF3A; --accent2: #C6FF4A; --ink: #061400; }
[data-theme="synth"] { --bg: #0E0717; --bg2: #150B22; --card: #1C0F2D; --line: #35204F; --text: #F9E6FF; --muted: #A98DBE; --accent: #FF3DCB; --accent2: #8A5CFF; --ink: #14001A; }
[data-theme="deepsea"] { --bg: #04101A; --bg2: #071826; --card: #0B2133; --line: #143650; --text: #DFFBF6; --muted: #7FA6AE; --accent: #19E3C2; --accent2: #3DA8FF; --ink: #001512; }
[data-theme="howl"] { --bg: #0A0B12; --bg2: #10121C; --card: #161927; --line: #272C42; --text: #E8ECFF; --muted: #8F96B8; --accent: #FF7A1A; --accent2: #FFC04A; --ink: #140800; }
[data-theme="kindred"] { --bg: #12060A; --bg2: #1A0A10; --card: #220E16; --line: #42202C; --text: #FFE9EE; --muted: #C093A0; --accent: #FF5C8A; --accent2: #FFB36B; --ink: #1D0209; --p0: #FF5C8A; --p1: #FFB36B; --p2: #FFD9E2; --p3: #C9467A; --p4: #FFE7B8; --p5: #FF8FA8; }
/* Tier 3 */
[data-theme="gold"] { --bg: #080705; --bg2: #0F0D09; --card: #15120C; --line: #3A3019; --text: #F6ECD2; --muted: #A89A78; --accent: #D9B45A; --accent2: #F7E3A1; --ink: #161004;
  --grad: linear-gradient(135deg, #8C6A1E 0%, #F3D98B 45%, #B8902F 70%, #F7E7B0 100%); --display: "Didot", "Bodoni MT", "Playfair Display", Georgia, serif; --slant: normal; --caps: none; --track: .04em; --r: 4px;
  --p0: #F3D98B; --p1: #B8902F; --p2: #E8C6A0; --p3: #8C6A1E; --p4: #FFF1C9; --p5: #C9A24A; }
[data-theme="silver"] { --bg: #07080A; --bg2: #0D0F12; --card: #13161A; --line: #2D333B; --text: #F2F5F9; --muted: #98A2AE; --accent: #C9D1DB; --accent2: #FFFFFF; --ink: #0B0D10;
  --grad: linear-gradient(135deg, #6E7782 0%, #F4F7FA 45%, #9AA4B0 70%, #FFFFFF 100%); --display: "Didot", "Bodoni MT", "Playfair Display", Georgia, serif; --slant: normal; --caps: none; --track: .04em; --r: 4px;
  --p0: #FFFFFF; --p1: #9AA4B0; --p2: #DDE3EA; --p3: #6E7782; --p4: #C9D1DB; --p5: #B4BCC6; }
[data-theme="onyx"] { --bg: #030303; --bg2: #080808; --card: #0D0D0D; --line: #222; --text: #EDEDED; --muted: #8E8E93; --accent: #EDEDED; --accent2: #8E8E93; --ink: #000;
  --grad: linear-gradient(135deg, #2A2A2A 0%, #EDEDED 50%, #6A6A6A 100%); --display: "Didot", "Bodoni MT", "Playfair Display", Georgia, serif; --slant: normal; --caps: none; --track: .06em; --r: 2px;
  --p0: #EDEDED; --p1: #8E8E93; --p2: #C7C7CC; --p3: #636366; --p4: #AEAEB2; --p5: #D1D1D6; }

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 var(--body); }
body { min-height: 100vh; display: flex; flex-direction: column; }
a { color: inherit; }
img { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 8px; top: 8px; z-index: 99; background: var(--card); padding: 8px 12px; }
.ic { flex: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* top bar */
.top { position: sticky; top: 0; z-index: 30; height: var(--topH); display: flex; align-items: center; gap: 18px; padding: 0 16px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; flex: none; }
.wordmark { font-family: var(--display); font-size: 21px; letter-spacing: var(--track); font-style: var(--slant); text-transform: uppercase; line-height: 1; }
.wordmark s { text-decoration: none; font-weight: 900; font-size: .58em; letter-spacing: .04em; margin-left: 1px; opacity: .92; } .wordmark b { font-weight: 900; } .wordmark i { font-style: normal; font-weight: 900; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mainnav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.mainnav a { display: flex; align-items: center; gap: 7px; padding: 8px 11px; border-radius: 999px; text-decoration: none; color: var(--muted); font-weight: 600; font-size: 14px; white-space: nowrap; }
.mainnav a:hover { color: var(--text); background: var(--bg2); }
.mainnav a.on { color: var(--ink); background: var(--grad); }
.topright { display: flex; align-items: center; gap: 8px; flex: none; }
.mechip { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 14px; }
.mechip img { width: 30px; height: 30px; border-radius: 50%; }
.mechip:hover { border-color: var(--accent); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg2); font-weight: 700; font-size: 14px; cursor: pointer; text-decoration: none; white-space: nowrap; transition: transform .12s, border-color .12s, box-shadow .12s; }
.btn:hover { border-color: var(--accent); } .btn:active { transform: scale(.97); }
.btn.primary { background: var(--grad); color: var(--ink); border-color: transparent; box-shadow: 0 0 0 0 var(--accent); }
.btn.primary:hover { box-shadow: 0 4px 22px -6px var(--accent); }
.btn.ghost { background: transparent; } .btn.ghost.on { border-color: var(--accent); color: var(--accent); }
.btn.big { padding: 13px 24px; font-size: 16px; } .btn.sm { padding: 5px 11px; font-size: 13px; } .btn.sq { padding: 8px; border-radius: 10px; }
.btn:disabled, .mini:disabled { opacity: .45; cursor: not-allowed; }
.mini { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 8px; border: 1px solid var(--line); background: transparent; font-size: 12px; font-weight: 600; cursor: pointer; color: var(--muted); }
.mini:hover, .mini.on { color: var(--accent); border-color: var(--accent); } .mini.arm { color: var(--bad); border-color: var(--bad); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; background: var(--bg2); }
.seg button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--muted); cursor: pointer; }
.seg button.on { background: var(--grad); color: var(--ink); } .seg button:disabled { opacity: .4; cursor: not-allowed; }
.seg.sm button { padding: 3px 9px; font-size: 12px; } .seg.wrap { flex-wrap: wrap; border-radius: 12px; }
.btn.gold { background: linear-gradient(135deg, #8C6A1E 0%, #F3D98B 45%, #B8902F 70%, #F7E7B0 100%); color: #161004; border-color: transparent; } .btn.gold:hover { box-shadow: 0 4px 22px -6px #D9B45A; }
input[type=text], input[type=search], input[type=number], input[type=password], input[type=date], select { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 8px 11px; min-width: 0; }
input:focus, select:focus { border-color: var(--accent); outline: none; }
input[type=range] { accent-color: var(--accent); }
.addbox { display: flex; gap: 6px; } .addbox input { flex: 1; width: 170px; }
.tierpill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.tierpill.t1 { color: #FFB27A; border-color: #7A431C; } .tierpill.t2 { color: #7FD8FF; border-color: #1F5A78; } .tierpill.t3 { color: #F3D98B; border-color: #8C6A1E; background: linear-gradient(135deg, rgba(140,106,30,.25), transparent); }
[data-light] .tierpill.t1 { color: #A5480A; } [data-light] .tierpill.t2 { color: #0B6A96; } [data-light] .tierpill.t3 { color: #7A5A10; }
.ver { margin-left: 8px; font: 600 10px/1 var(--body); letter-spacing: .06em; color: var(--muted); opacity: .8; text-transform: none; transform: none; vertical-align: middle; }
.note { color: var(--muted); font-size: 13px; margin: 6px 0; } .fine { font-size: 12px; opacity: .85; }
.warn, .tip { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; padding: 9px 11px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); margin: 8px 0; }
.warn .ic, .tip .ic { color: var(--accent); margin-top: 2px; }

/* blur and bait */
.bb { position: relative; overflow: hidden; border-radius: var(--r); min-height: 190px; }
.bb-ghost { filter: blur(7px) saturate(1.2); opacity: .75; pointer-events: none; user-select: none; }
.lockcard { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(340px, calc(100% - 20px)); padding: 20px 18px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: color-mix(in srgb, var(--bg) 92%, transparent); border: 1px solid var(--accent); border-radius: var(--r); box-shadow: 0 14px 44px rgba(0,0,0,.55), 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent) inset; z-index: 2; }
.lockcard > .ic { color: var(--accent); }
.lockcard strong { font-family: var(--display); font-size: 19px; text-transform: var(--caps); letter-spacing: var(--track); line-height: 1.15; }
.lockcard p { margin: 0; color: var(--muted); font-size: 13px; }
article.shut { position: relative; padding-bottom: 220px; } article.shut .lockcard { top: auto; bottom: 10px; transform: translateX(-50%); }
.modal { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); } .modal .lockcard { position: fixed; }
.ghostbar { display: block; height: 12px; border-radius: 6px; background: color-mix(in srgb, var(--text) 30%, transparent); margin: 9px 0; } .ghostbar.s { width: 55%; }
.ghostbtn { display: block; height: 44px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 35%, transparent); }
.ghostchip { display: block; height: 16px; margin-top: 6px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 55%, transparent); }
.ghostpane { position: relative; border-radius: var(--r); background: linear-gradient(140deg, color-mix(in srgb, var(--pc, var(--accent)) 50%, var(--bg2)), var(--bg2) 70%); min-height: 150px; height: 100%; }
.ghostpane i { position: absolute; left: 12px; top: 12px; width: 34px; height: 34px; border-radius: 50%; background: var(--pc, var(--accent)); }
.ghostpane b { position: absolute; left: 56px; top: 16px; width: 40%; height: 11px; border-radius: 6px; background: color-mix(in srgb, var(--text) 45%, transparent); }
.ghostpane span { position: absolute; left: 56px; top: 33px; width: 24%; height: 9px; border-radius: 6px; background: color-mix(in srgb, var(--text) 25%, transparent); }

/* pages */
main { flex: 1; min-width: 0; }
.view.page { width: 100%; max-width: 1180px; margin: 0 auto; padding: 26px 18px 60px; }
.view.page.wide { max-width: none; padding: 22px clamp(16px, 2.4vw, 44px) 60px; }
.pagehead h1, .guide h1, .hero h1 { font-family: var(--display); text-transform: var(--caps); letter-spacing: var(--track); line-height: 1.02; margin: 0 0 10px; }
.pagehead h1 { font-size: clamp(28px, 4vw, 40px); font-style: var(--slant); }
.sectionh { font-family: var(--display); text-transform: var(--caps); font-size: 20px; margin: 30px 0 12px; letter-spacing: var(--track); }
.lede { font-size: 17px; color: var(--muted); max-width: 62ch; margin: 0 0 18px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.filterbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 16px; }
.subnav { display: flex; gap: 4px; margin: 0 0 20px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.subnav a { padding: 9px 13px; text-decoration: none; color: var(--muted); font-weight: 700; font-size: 14px; border-bottom: 2px solid transparent; white-space: nowrap; }
.subnav a.on { color: var(--text); border-color: var(--accent); }
.foot { padding: 18px; text-align: center; color: var(--muted); font-size: 13px; border-top: 1px solid var(--line); } .foot p { margin: 2px 0; } .foot a { color: var(--accent); font-weight: 700; text-decoration: none; }
body.wallmode { height: 100vh; overflow: hidden; } body.wallmode .foot { display: none; } body.wallmode main { display: flex; min-height: 0; }

/* hero */
.hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 34px; align-items: center; max-width: 1180px; margin: 0 auto; padding: 56px 18px; }
.eyebrow { color: var(--accent); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: 12px; margin: 0 0 12px; }
.hero h1 { font-size: clamp(38px, 6vw, 68px); font-style: var(--slant); } .hero h1 em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-wall { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; height: 340px; }

/* wall */
.view.watch { display: flex; flex-direction: column; flex: 1; min-height: 0; width: 100%; }
.tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--bg2); position: relative; z-index: 20; }
.panecount { font-size: 13px; color: var(--muted); } .panecount b { color: var(--text); font-size: 15px; }
.master { display: flex; align-items: center; gap: 6px; color: var(--muted); } .master input { width: 110px; }
.tools > .endbtn { margin-left: auto; }
.pop { position: relative; } .pop .btn .ic + span + .ic { color: var(--muted); }
.pop-panel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; width: 300px; padding: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 18px 50px rgba(0,0,0,.6); }
.pop-head { display: flex; align-items: baseline; margin-bottom: 10px; font-family: var(--display); text-transform: var(--caps); font-size: 14px; letter-spacing: var(--track); }
.wallwrap { --railW: 58px; --sideW: 350px; flex: 1; min-height: 0; display: grid; grid-template-columns: var(--railW) minmax(0, 1fr) var(--sideW); }
.wallwrap.norail { grid-template-columns: 0 minmax(0, 1fr) var(--sideW); } .wallwrap.noside { grid-template-columns: var(--railW) minmax(0, 1fr) 0; } .wallwrap.norail.noside { grid-template-columns: 0 minmax(0, 1fr) 0; } .wallwrap.noside .side { display: none; }
.wallwrap.resizing, .wallwrap.resizing * { user-select: none; } .wallwrap.resizing iframe, .wallwrap.dragging iframe { pointer-events: none; }
.wallwrap.nochat .dock { display: none; }
.side { position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0; border-left: 1px solid var(--line); background: var(--bg2); } .side .dock { flex: 1; border-left: 0; }
.sidetop { flex: none; overflow-y: auto; min-height: 0; scrollbar-width: thin; } .wallwrap.nochat .sidetop { flex: 1; max-height: none !important; }
.sidebox { padding: 10px 12px; border-bottom: 1px solid var(--line); } .balbox .bb { min-height: 230px; }
.vsplit, .hsplit, .fsplit { display: block; position: absolute; z-index: 12; background: transparent; transition: background .12s; touch-action: none; }
.vsplit { left: -3px; top: 0; bottom: 0; width: 7px; cursor: col-resize; } .vsplit.r { left: auto; right: -3px; } .hsplit { position: relative; flex: none; height: 7px; margin: -3px 0; cursor: row-resize; } .fsplit { top: 6px; bottom: 6px; width: 7px; cursor: col-resize; }
.vsplit:hover, .hsplit:hover, .fsplit:hover, .resizing .vsplit, .resizing .hsplit, .resizing .fsplit { background: var(--accent); box-shadow: 0 0 12px var(--accent); }
/* wall controls */
.mixbox .pop-head, .balbox .pop-head { align-items: center; } .mix-all { margin-left: auto; display: flex; gap: 2px; }
.mix-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto minmax(54px, 90px) auto auto; gap: 2px 4px; align-items: center; padding: 3px 0 3px 8px; border-left: 3px solid var(--pc); border-radius: 3px; margin-bottom: 4px; } .mix-row.focus { background: color-mix(in srgb, var(--pc) 9%, transparent); }
.mix-id { display: flex; align-items: center; gap: 7px; min-width: 0; border: 0; background: none; cursor: pointer; padding: 0; text-align: left; } .mix-id b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mix-lat { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 30px; text-align: right; } .mix-row input[type=range] { width: 100%; min-width: 0; }
.face { --fz: 20px; width: var(--fz); height: var(--fz); flex: none; border-radius: 50%; overflow: hidden; display: inline-grid; place-items: center; background: var(--line); color: var(--muted); font: 800 calc(var(--fz) * .5)/1 var(--body); vertical-align: middle; } .face img { width: 100%; height: 100%; object-fit: cover; }
.rail { position: relative; min-height: 0; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--bg2); }
.rail-h { display: flex; align-items: center; gap: 6px; padding: 6px 8px 2px; flex: none; } .rail-h b { font-family: var(--display); font-style: var(--slant); text-transform: var(--caps); letter-spacing: var(--track); font-size: 13px; } .rail-h .pb { margin-left: auto; } .rail[data-view=icons] .rail-h { justify-content: center; padding: 6px 0 0; } .rail[data-view=icons] .rail-h .pb { margin: 0; }
.rail-l { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 0 10px; display: flex; flex-direction: column; align-items: center; gap: 8px; scrollbar-width: none; } .rail:not([data-view=icons]) .rail-l { align-items: stretch; gap: 3px; padding: 6px; scrollbar-width: thin; }
.rl { cursor: grab; } .rl:active { cursor: grabbing; }
.rl-names, .rl-cards { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px; align-items: center; text-align: left; border: 1px solid transparent; border-radius: 10px; background: transparent; padding: 5px 7px; color: var(--text); }
.rl-names:hover, .rl-cards:hover { border-color: var(--accent); background: var(--card); } .rl-pic { width: 34px; height: 34px; border-radius: 50%; padding: 2px; background: conic-gradient(var(--live), var(--accent), var(--live)); flex: none; display: block; } .rl-pic img, .rl-pic span { width: 100%; height: 100%; border-radius: 50%; border: 2px solid var(--bg2); object-fit: cover; display: grid; place-items: center; background: var(--card); font-size: 11px; font-weight: 800; }
.rl-t { display: grid; min-width: 0; } .rl-t b { font-family: var(--display); font-style: var(--slant); text-transform: var(--caps); letter-spacing: var(--track); font-size: 13.5px; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rl-t small { color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rl.fav .rl-t b { color: var(--accent); }
.rl-cards { background: linear-gradient(100deg, color-mix(in srgb, var(--accent) 13%, var(--card)), var(--card) 60%); border-color: var(--line); padding: 8px 9px; margin-bottom: 3px; } .rl-cards .rl-pic { width: 42px; height: 42px; } .rl-cards .rl-t b { font-size: 15px; } .rl-cards small.game { color: var(--accent); font-weight: 700; } .rl-m { display: flex; align-items: center; }
.av { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 0; padding: 2px; background: conic-gradient(var(--live), var(--accent), var(--live)); cursor: pointer; transition: transform .12s; }
.av:hover { transform: scale(1.1); } .av img, .av span { width: 100%; height: 100%; border-radius: 50%; border: 2px solid var(--bg); object-fit: cover; display: grid; place-items: center; background: var(--card); font-size: 12px; font-weight: 800; }
.av.fav { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--accent2); }
.stagecol { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.stage { flex: 1; display: grid; gap: 6px; padding: 6px; min-height: 0; min-width: 0; grid-auto-rows: minmax(0, 1fr); }
.stage { position: relative; }
.pane { position: relative; display: grid; grid-template-rows: 32px minmax(0, 1fr); min-height: 0; min-width: 0; border-radius: var(--r); overflow: hidden; background: #000; border: 1px solid var(--line); }
.pane.focus { border-color: var(--pc); box-shadow: 0 0 0 1px var(--pc), 0 0 26px -10px var(--pc); }
.pane.drop { outline: 2px dashed var(--accent); outline-offset: -4px; }
.pane-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 6px 0 10px; background: var(--card); cursor: grab; min-width: 0; }
.pane-id { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; }
.pane { container-type: inline-size; } .pane-id b { overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 40px; } .pane-id .meta { flex: 0 100 auto; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@container (max-width: 430px) { .pane-id .meta:not(.live) { display: none; } } @container (max-width: 300px) { .pane-id .meta { display: none; } .pane-acts .pb:nth-child(n+3):not(:last-child) { display: none; } } .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--pc, var(--accent)); flex: none; display: inline-block; }
.meta { color: var(--muted); font-size: 12px; } .meta.live::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--live); margin-right: 5px; }
.pane-acts { display: flex; gap: 2px; flex: none; }
.pb { width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; }
.pb:hover { background: var(--bg2); color: var(--text); } .pb.on { color: var(--pc, var(--accent)); } .pb.gated { opacity: .45; }
.pane-body { position: relative; min-height: 0; } .pane-body .player, .pane-body iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pane.locked .pane-body iframe { pointer-events: none; } .pane.locked .pane-bar { background: repeating-linear-gradient(135deg, var(--card) 0 10px, color-mix(in srgb, var(--pc) 14%, var(--card)) 10px 20px); }
.pane.empty { background: var(--bg2); } .emptybody { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; overflow: auto; }
.livechips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 520px; }
.livechip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); cursor: pointer; font-size: 13px; font-weight: 600; } .livechip img { width: 24px; height: 24px; border-radius: 50%; } .livechip:hover { border-color: var(--accent); }
.extra { flex: none; margin: 0 6px 6px; height: 96px; } .pane.addtile { height: 54px; }
.pane.addtile { display: flex; align-items: center; justify-content: center; gap: 8px; background: transparent; border: 2px dashed var(--line); color: var(--muted); font-weight: 700; cursor: pointer; } .pane.addtile:hover { border-color: var(--accent); color: var(--accent); }
.pane.tease { display: block; background: var(--bg2); } .pane.tease .bb { height: 100%; min-height: 0; border-radius: 0; }
.bb.slim { min-height: 96px; } .bb.slim .lockcard > .ic, .bb.slim .lockcard p { display: none; } .bb.slim .lockcard .btn { padding: 5px 11px; font-size: 12px; }
.bb.slim .lockcard, .pane.tease .lockcard { flex-direction: row; flex-wrap: wrap; justify-content: center; width: auto; max-width: calc(100% - 16px); padding: 10px 16px; gap: 6px 12px; white-space: nowrap; } .pane.tease .lockcard p { white-space: normal; } .pane.tease .ghostpane { min-height: 0; }

.pane-fx { position: absolute; inset: 32px 0 0 0; pointer-events: none; z-index: 4; }
.pane.hype { background: #0A0803; border-color: #8C6A1E; box-shadow: 0 0 0 1px #8C6A1E, 0 0 30px -8px #D9B45A; } .pane.hype .pane-body { margin: 12px; } .pane.hype .pane-bar { background: linear-gradient(90deg, color-mix(in srgb, #D9B45A 22%, var(--card)), var(--card) 70%); }
.pane.hype .pane-id .meta:not(.live):not(.lat) { display: none; } .hypetag { display: inline-flex; align-items: center; gap: 5px; flex: none; font-family: var(--display); font-style: var(--slant); text-transform: uppercase; letter-spacing: .04em; font-size: 12.5px; font-weight: 900; color: #F7E3A1; text-shadow: 0 0 10px rgba(217,180,90,.7); } .hypetag .ic { color: #D9B45A; }
.hx { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .hx path { fill: none; stroke-linecap: round; stroke-linejoin: round; } .hx-track { stroke: #F3D98B; stroke-width: 1.2; opacity: .22; stroke-dasharray: 2 6; } .hx-head { fill: #FFF4CC; stroke: none; filter: drop-shadow(0 0 6px #F3D98B); } .hx-strand { stroke-width: 2.2; } .hx-strand.b { opacity: .8; } .hx-glow { stroke: #F3D98B; stroke-width: 7; opacity: .16; } .hx-rung { stroke: #D9B45A; stroke-width: 1.1; opacity: .5; }
.meta.lat { font-variant-numeric: tabular-nums; } .optrow { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; } .opts .note a { color: var(--accent); font-weight: 700; }
/* claim effect */
.fx { position: absolute; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; border-radius: inherit; }
@property --fxa { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.fx-trace { position: absolute; inset: 0; border-radius: inherit; padding: 3px; background: conic-gradient(from var(--fxa), transparent 0 62%, #B6FF2E 78%, #F2FFD0 86%, #B6FF2E 92%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  filter: drop-shadow(0 0 6px #A6FF00) drop-shadow(0 0 14px #7CFF00); animation: fxspin 1.15s linear 2, fxfade 2.4s ease-out forwards; }
@keyframes fxspin { to { --fxa: 360deg; } } @keyframes fxfade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
.fx-plus { position: absolute; bottom: 6%; color: #C9FF5A; font: 900 22px/1 var(--body); text-shadow: 0 0 6px #7CFF00, 0 0 16px #4BD600; opacity: 0; animation: fxrise 1.7s ease-out forwards; }
@keyframes fxrise { 0% { transform: translateY(0) scale(.5); opacity: 0; } 18% { opacity: 1; } 100% { transform: translateY(-160px) scale(1.15); opacity: 0; } }

/* balancer */
.bal { display: grid; gap: 10px; } .bal-pad { width: 100%; max-width: 220px; margin: 0 auto; display: block; touch-action: none; cursor: crosshair; border-radius: 14px; }
.bal-bg { fill: var(--bg); stroke: var(--line); } .bal-grid { stroke: var(--line); stroke-width: .6; opacity: .7; } .bal-shape { fill: color-mix(in srgb, var(--accent) 9%, transparent); stroke: var(--accent); stroke-width: 1.4; stroke-dasharray: 4 3; }
.bal-ray { stroke-linecap: round; } .bal-node { cursor: pointer; } .bal-tag { font: 800 9px var(--body); fill: #fff; pointer-events: none; paint-order: stroke; stroke: rgba(0,0,0,.6); stroke-width: 2px; }
.bal-dot { fill: var(--text); stroke: var(--accent); stroke-width: 3; filter: drop-shadow(0 0 6px var(--accent)); cursor: grab; } .bal-dot-in { fill: var(--accent); pointer-events: none; }
.bal-pad.idle { cursor: default; } .bal-disc { fill: var(--card); } .bal-name { font: 800 9.5px var(--body); fill: var(--text); paint-order: stroke; stroke: var(--bg); stroke-width: 3px; pointer-events: none; }
.bal-rows { display: grid; gap: 6px; } .bal-row { display: grid; gap: 2px; padding: 5px 6px 6px 8px; border-left: 3px solid var(--pc); border-radius: 3px; background: color-mix(in srgb, var(--pc) 6%, transparent); font-size: 12px; } .bal-row.off { opacity: .6; background: none; }
.bal-row-t { display: flex; align-items: center; gap: 6px; min-width: 0; } .bal-row-t .bal-nm { flex: 1; min-width: 0; } .bal-row-b { display: grid; grid-template-columns: 1fr 28px; gap: 6px; align-items: center; } .bal-row-b input { width: 100%; min-width: 0; } .bal-v { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.bal-foot { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .bal-fl { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.bal-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.bal-meter { display: block; height: 4px; border-radius: 3px; background: var(--bg); overflow: hidden; } .bal-meter i { display: block; height: 100%; border-radius: 3px; transition: width .08s; } .bal-pc { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.bal-hint { margin: 0; font-size: 12px; color: var(--muted); } .ghostpad { height: 180px; border-radius: 14px; background: radial-gradient(circle at 60% 40%, var(--accent), transparent 30%), var(--bg); }
.opts { display: grid; gap: 4px; } .opt { display: grid; grid-template-columns: 20px 1fr auto; gap: 9px; align-items: start; padding: 7px 4px; border-radius: 8px; cursor: pointer; } .opt:hover { background: var(--bg2); }
.opt.off { cursor: default; } .opt.off .opt-t { opacity: .55; filter: blur(.4px); } .opt input { margin-top: 3px; accent-color: var(--accent); } .opt-t b { display: block; font-size: 13px; } .opt-t small { color: var(--muted); font-size: 12px; }
.wallrow { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; } .wallopen { flex: 1; text-align: left; display: grid; padding: 7px 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg); cursor: pointer; font-weight: 700; min-width: 0; } .wallopen small { color: var(--muted); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wallopen:hover { border-color: var(--accent); }

/* chat dock */
.dock { position: relative; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; border-left: 1px solid var(--line); background: var(--bg2); min-height: 0; min-width: 0; }
.dock-tabs { display: flex; gap: 2px; padding: 6px 6px 0; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 0; border-radius: 9px 9px 0 0; background: transparent; color: var(--muted); font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.tab.on { background: var(--card); color: var(--text); box-shadow: inset 0 2px 0 var(--pc, var(--accent)); } .tab.locked::after { content: ''; width: 6px; height: 6px; border-radius: 1px; background: var(--muted); }
.dock-body { position: relative; min-height: 0; background: var(--card); } .chatframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; visibility: hidden; } .chatframe.show { visibility: visible; } .chatframe.locked { pointer-events: none; filter: saturate(.6); }
.dock.empty .dock-body::after { content: 'Add a channel and its chat opens here.'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 13px; padding: 20px; text-align: center; }
.dock-bar { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-bottom: 1px solid var(--line); background: var(--card); min-width: 0; } .dock-r { margin-left: auto; display: flex; gap: 2px; } .dock-t { display: flex; align-items: baseline; font-family: var(--display); text-transform: var(--caps); font-size: 13px; letter-spacing: var(--track); }
.dock-menu { position: absolute; z-index: 25; right: 8px; top: 78px; width: min(300px, calc(100% - 16px)); max-height: calc(100% - 96px); overflow-y: auto; padding: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 18px 50px rgba(0,0,0,.6); display: grid; gap: 4px; } .dock-menu.picker { top: auto; bottom: 64px; }
.opt.slim { grid-template-columns: 20px 1fr; padding: 3px 4px; font-size: 13px; } .opt.slim input { margin-top: 2px; } .dock-menu .fld { margin: 8px 0 0; } .fld.rng span { display: flex; justify-content: space-between; } .fld.rng b { color: var(--text); }
.feed { --em: 1.55em; position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; padding: 6px 0; font-size: 13px; line-height: 1.45; background: var(--card); scrollbar-width: thin; }
.ln { position: relative; padding: 3px 10px; overflow-wrap: anywhere; } .ln > * { vertical-align: middle; } .ln .dot { margin-right: 6px; width: 7px; height: 7px; } .ln .face { margin-right: 5px; } .ln .ts { color: var(--muted); font-size: .8em; margin-right: 6px; font-variant-numeric: tabular-nums; }
.bdg { display: inline; width: 1.25em; height: 1.25em; margin-right: 3px; border-radius: 3px; } .who { border: 0; background: none; padding: 0; margin-right: 5px; font-weight: 800; cursor: pointer; color: var(--text); font-size: inherit; } .who:hover { text-decoration: underline; } .who::after { content: ':'; color: var(--muted); font-weight: 400; } .feed.thin .who { font-weight: 600; }
.ln .m { vertical-align: baseline; } .ln .at { color: var(--accent); } .ln .bits { color: var(--accent2); } .rp { color: var(--muted); font-size: .85em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 4px; border-left: 2px solid var(--line); margin-bottom: 1px; }
.emote { display: inline-block; height: var(--em); width: auto; vertical-align: middle; margin: -.2em 0; } .estack { position: relative; display: inline-block; vertical-align: middle; } .estack .zw { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; }
.ln.hl { background: color-mix(in srgb, var(--accent2) 14%, transparent); } .ln.first::after { content: 'first message'; margin-left: 6px; font-size: .72em; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--good); }
.ln.sys { color: var(--muted); font-size: .92em; background: color-mix(in srgb, var(--pc) 9%, transparent); box-shadow: inset 3px 0 0 var(--pc); } .ln.sys .ic { color: var(--pc); margin-right: 6px; } .ln.sys .sub { display: block; color: var(--text); }
.ln.del .m { text-decoration: line-through; opacity: .45; } .ln.marked { box-shadow: inset 3px 0 0 var(--mk); background: color-mix(in srgb, var(--mk) 10%, transparent); } .ln.marked .who { text-shadow: 0 0 10px var(--mk); } .ln.tag-watch { outline: 1px dashed var(--mk, var(--accent)); outline-offset: -2px; }
.feed.stripes .ln:nth-child(even) { background-color: color-mix(in srgb, var(--text) 4%, transparent); }
.feed.look-tint .ln { background: color-mix(in srgb, var(--pc) 11%, transparent); } .feed.look-bar .ln { box-shadow: inset 4px 0 0 var(--pc); padding-left: 14px; } .feed.look-tint .ln .dot, .feed.look-bar .ln .dot, .feed.look-left .ln .dot, .feed.look-right .ln .dot { display: none; }
.feed.look-left .ln { background: linear-gradient(90deg, color-mix(in srgb, var(--pc) 30%, transparent), transparent 62%); } .feed.look-right .ln { background: linear-gradient(270deg, color-mix(in srgb, var(--pc) 30%, transparent), transparent 62%); }
.feed-more { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 4; background: var(--bg); color: var(--accent); border-color: var(--accent); box-shadow: 0 6px 20px rgba(0,0,0,.5); } .feed-empty { padding: 0 10px; }
.peek { position: absolute; left: 0; right: 0; bottom: 58%; z-index: 5; } .peek-h { display: flex; align-items: center; gap: 8px; padding: 4px 8px; background: var(--bg); border-top: 1px solid var(--accent); border-bottom: 1px solid var(--line); font-size: 12px; } .peek-h b { font-family: var(--display); text-transform: var(--caps); letter-spacing: var(--track); } .peek-h select { padding: 2px 6px; font-size: 12px; } .peek-h .pb { margin-left: auto; }
.chatframe.peeked { visibility: visible; top: auto; bottom: 0; height: 58%; z-index: 5; box-shadow: 0 -10px 30px rgba(0,0,0,.5); }
.sendbox { position: relative; } .sug { position: absolute; left: 0; right: 0; bottom: 100%; z-index: 8; margin-bottom: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: 0 -8px 26px rgba(0,0,0,.5); }
.sug-i { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: center; width: 100%; padding: 4px 8px; border: 0; background: none; text-align: left; cursor: pointer; font-size: 13px; } .sug-i.on, .sug-i:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); } .sug-i img { height: 22px; margin: 0; } .sug-i small { color: var(--muted); font-size: 11px; }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 3px; max-height: 240px; overflow-y: auto; margin-top: 6px; } .pick { display: grid; place-items: center; height: 38px; border: 0; border-radius: 7px; background: none; cursor: pointer; padding: 3px; } .pick:hover { background: var(--bg2); } .pick img { max-height: 30px; max-width: 100%; margin: 0; }
.pcard { position: fixed; z-index: 70; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px; background: var(--card); border: 1px solid var(--accent); border-radius: var(--r); box-shadow: 0 18px 50px rgba(0,0,0,.65); } .pcard-h { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; } .pcard-h b { display: block; } .pcard-h small { color: var(--muted); }
.pcard-a { display: flex; gap: 5px; flex-wrap: wrap; } .pcard-a .mini { text-decoration: none; } .pcard-sw { display: flex; gap: 5px; } .swdot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; display: grid; place-items: center; cursor: pointer; background: var(--bg2); color: var(--muted); padding: 0; } .swdot.on { border-color: var(--text); box-shadow: 0 0 0 2px var(--bg), 0 0 10px currentColor; } .pcard input { width: 100%; font-size: 13px; padding: 6px 9px; } .pcard-t { display: flex; width: 100%; } .pcard-t button { flex: 1; justify-content: center; padding: 4px 4px; font-size: 12px; }
.feed .bb { position: absolute; inset: 0; } .feed[data-state=off]:empty::before, .feed[data-state=on]:empty::before { content: 'Waiting for chat.'; color: var(--muted); } .gl { display: flex; gap: 6px; align-items: center; margin: 9px 0; } .gl i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); } .gl b { width: 52px; height: 9px; border-radius: 5px; background: var(--accent2); } .gl span { height: 9px; border-radius: 5px; background: color-mix(in srgb, var(--text) 35%, transparent); width: 50%; }
.ask { padding: 16px; text-align: center; } .ask p { color: var(--muted); font-size: 13px; margin: 0 0 10px; }
.dock-foot { border-top: 1px solid var(--line); padding: 8px; } .foot-head { display: flex; align-items: center; gap: 6px; font-size: 13px; margin-bottom: 6px; } .foot-head .mini { margin-left: auto; } .foot-head .ic { color: var(--accent); }
.dock-foot .bb { min-height: 96px; } .chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line); background: transparent; font-size: 12px; font-weight: 700; color: var(--muted); cursor: pointer; } .chip.on { border-color: var(--pc); color: var(--text); background: color-mix(in srgb, var(--pc) 20%, transparent); } .chip.locked { opacity: .5; cursor: not-allowed; }
.sendrow { display: flex; gap: 6px; } .sendrow input { flex: 1; } .sendout { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; min-height: 0; } .res { font-size: 11px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); } .res.ok { color: var(--good); border-color: var(--good); } .res.bad { color: var(--bad); border-color: var(--bad); }

/* following */
.avatar { --sz: 48px; width: var(--sz); height: var(--sz); border-radius: 50%; padding: 2px; flex: none; display: inline-grid; place-items: center; background: var(--line); }
.avatar.live { background: conic-gradient(from 0deg, var(--live), var(--accent), var(--accent2), var(--live)); animation: ring 4s linear infinite; } @keyframes ring { to { transform: rotate(360deg); } } .avatar.live img, .avatar.live b { animation: ring 4s linear infinite reverse; }
.avatar img, .avatar b { width: 100%; height: 100%; border-radius: 50%; border: 2px solid var(--card); object-fit: cover; display: grid; place-items: center; background: var(--bg2); font-size: 12px; }
.fcard { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; transition: border-color .12s, transform .12s; } .fcard:hover { border-color: var(--accent); transform: translateY(-2px); } .fcard:not(.live) .avatar { opacity: .55; filter: grayscale(.7); }
.fcard-t { display: grid; min-width: 0; } .fcard-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .game { color: var(--accent); font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .title { margin: 3px 0 0; font-size: 12px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.livedot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--live); margin-right: 5px; } .fcard-a { grid-column: 1 / -1; display: flex; gap: 6px; justify-content: flex-end; } .skel { opacity: .5; }

/* calendar */
.calcols { display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 24vw, 440px); gap: 18px; align-items: start; } .calnav { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .calnav b { font-family: var(--display); text-transform: var(--caps); font-size: 18px; min-width: 190px; text-align: center; } .calnav .mini { font-size: 16px; }
.caldow, .calgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; } .caldow span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; padding: 0 4px 4px; }
.cell { min-height: clamp(92px, 10.5vh, 150px); padding: 5px; border-radius: 9px; background: var(--card); border: 1px solid var(--line); overflow: hidden; } .cell.pad { background: transparent; border-color: transparent; } .cell.today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } .num { font-size: 12px; color: var(--muted); font-weight: 700; }
.subchip { display: flex; align-items: center; gap: 4px; margin-top: 3px; padding: 1px 6px 1px 1px; border-radius: 999px; font-size: 11px; font-weight: 700; background: color-mix(in srgb, var(--accent) 22%, transparent); overflow: hidden; white-space: nowrap; } .subchip.gift { background: color-mix(in srgb, var(--muted) 25%, transparent); } .subchip .avatar { padding: 0; } .subchip .avatar img, .subchip .avatar b { border: 0; font-size: 8px; }
.calside h2 { font-family: var(--display); text-transform: var(--caps); font-size: 15px; margin: 0 0 8px; } .calside h2:not(:first-child) { margin-top: 22px; }
.subrow { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); } .subrow-t { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .subrow-f { grid-column: 2; display: flex; gap: 6px; } .subrow-f input, .subrow-f select { padding: 5px 8px; font-size: 13px; }
.soon { display: grid; grid-template-columns: 58px 1fr auto; gap: 8px; padding: 5px 0; font-size: 13px; } .soon b { color: var(--accent); }

.calhow { margin: 0 0 16px; padding: 12px 16px; } .calhow ol { padding-left: 20px; margin: 8px 0; } .calhow li { margin: 3px 0; } .calhow textarea { width: 100%; margin: 6px 0; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 13px; resize: vertical; }
/* resources */
.platcards { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin: 14px 0 0; } .plat { padding: 16px; } .trio + .sectionh { margin-top: 26px; } .dl + .cards { margin-top: 16px; }
.vtable, .matrix { width: 100%; border-collapse: collapse; font-size: 13.5px; } .vtable th, .matrix th { text-align: left; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 4px 12px 8px 0; white-space: nowrap; } .vtable td { padding: 7px 12px 7px 0; border-top: 1px solid var(--line); white-space: nowrap; } .vtable .vv { font-weight: 800; font-variant-numeric: tabular-nums; } .vtable .dim, td .dim { color: var(--muted); } .vtable .mini { text-decoration: none; }
.obsgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; } .obsgrid .vit { grid-column: 1 / -1; } .obsgrid .toolcard { margin: 0; }
.rs-stat.warn b { color: var(--accent2); } .rs-stat.bad { border-color: var(--bad); } .rs-stat.bad b { color: var(--bad); } .vit-spark { display: flex; align-items: flex-end; gap: 2px; height: 46px; margin: 12px 0 4px; } .vit-spark i { flex: 1; max-width: 10px; border-radius: 2px 2px 0 0; background: var(--accent2); opacity: .8; } .vit-spark i.bad { background: var(--bad); }
.srclist { max-height: 520px; overflow-y: auto; } .src { padding: 8px 0; border-top: 1px solid var(--line); } .src-t { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; } .src-t .rs-tag { margin: 0; } .src-u { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; } .src-u .chip { cursor: default; --pc: var(--accent2); } .chip.livec { border-color: var(--live); color: var(--text); }
.probe-out { margin-top: 12px; } .probe-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 130px; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; } .probe-row .rs-tag { margin: 0 0 0 6px; } .probe-row i { display: block; height: 8px; border-radius: 4px; background: var(--bg); overflow: hidden; } .probe-row u { display: block; height: 100%; border-radius: 4px; background: var(--grad); } .probe-row small { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.guide { margin-left: auto; margin-right: auto; }
.trio { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .bigcard { display: grid; gap: 6px; text-decoration: none; padding: 22px; transition: transform .12s, border-color .12s; } .bigcard:hover { transform: translateY(-3px); border-color: var(--accent); } .bigcard .ic { color: var(--accent); } .bigcard b { font-family: var(--display); text-transform: var(--caps); font-size: 18px; } .bigcard p { margin: 0; color: var(--muted); }
.guides { margin-top: 14px; } .gcard { display: grid; gap: 5px; text-decoration: none; transition: border-color .12s, transform .12s; } .gcard:hover { border-color: var(--accent); transform: translateY(-2px); } .gcard p { margin: 0; color: var(--muted); font-size: 13px; } .gcard.shut b, .gcard.shut p { filter: blur(3.5px); user-select: none; }
.gcard-top { display: flex; gap: 8px; align-items: center; } .lvl { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); } .lvl.core { color: var(--accent2); } .lvl.advanced { color: var(--text); }
.back { display: inline-block; margin-bottom: 14px; color: var(--muted); text-decoration: none; font-weight: 700; font-size: 14px; } .back:hover { color: var(--accent); }
.guide { max-width: 820px; } .guide h1 { font-size: clamp(26px, 4vw, 38px); margin-top: 8px; } .guide h2 { font-size: 18px; margin: 26px 0 8px; } .guide ol { padding-left: 22px; } .guide li { margin: 5px 0; } .guide li::marker { color: var(--accent); font-weight: 800; }
.guide pre { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 12px; overflow-x: auto; font-size: 13px; } .ghosted .ghostbar { filter: blur(3px); }
.calc { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 16px; align-items: start; } .fld { display: grid; gap: 4px; margin-bottom: 11px; font-size: 13px; font-weight: 700; color: var(--muted); } .fld input, .fld select { color: var(--text); font-weight: 500; width: 100%; }
.calc-big { display: grid; grid-template-columns: auto auto 1fr auto auto; gap: 4px 8px; align-items: baseline; } .calc-big b { font-family: var(--display); font-size: clamp(24px, 3.4vw, 38px); line-height: 1; } .calc-big b:nth-of-type(2) { grid-column: 4; color: var(--accent); } .calc-big span { color: var(--muted); font-size: 13px; }
.qmeter { height: 8px; border-radius: 4px; background: var(--bg); margin: 14px 0 4px; overflow: hidden; } .qmeter i { display: block; height: 100%; border-radius: 4px; background: var(--good); transition: width .2s; } .qmeter.good i { background: var(--accent2); } .qmeter.soft i { background: var(--accent); } .qmeter.blocky i { background: var(--bad); }
.settings { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 14px; } .settings th { text-align: left; font-weight: 600; color: var(--muted); padding: 6px 8px 6px 0; width: 46%; } .settings td { padding: 6px 0; font-weight: 700; } .settings tr { border-bottom: 1px solid var(--line); }
.toolcard { margin-bottom: 14px; } .toolcard h2 { font-family: var(--display); text-transform: var(--caps); font-size: 17px; margin: 0 0 6px; } .connform { display: grid; grid-template-columns: 1.4fr .8fr 1.4fr auto; gap: 10px; align-items: end; } .connform .fld { margin: 0; } .connform .btn { height: 38px; }
.status { font-weight: 700; font-size: 13px; margin: 10px 0 0; color: var(--muted); } .status.on { color: var(--good); } .status.on::before, .status.connecting::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; margin-right: 6px; } .how { margin-top: 8px; font-size: 13px; color: var(--muted); } .how summary { cursor: pointer; font-weight: 700; } .how p { margin: 5px 0; }
.toolgrid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 14px; align-items: start; } .deckgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 10px; } .deckgroup { grid-column: 1 / -1; margin: 8px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.deckbtn { display: flex; align-items: center; gap: 7px; padding: 10px; min-height: 44px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg2); cursor: pointer; font-weight: 700; font-size: 13px; text-align: left; } .deckbtn .ic { color: var(--accent); } .deckbtn:hover { border-color: var(--accent); } .deckbtn.arm { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); } .deckbtn.ran { border-color: var(--good); } .deckbtn.fail { border-color: var(--bad); }
.evfeed { max-height: 360px; overflow-y: auto; } .ev { display: grid; grid-template-columns: 120px 1fr auto; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; } .ev b { color: var(--accent); } .ev time { color: var(--muted); font-size: 12px; }
.dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: stretch; } .dlbtn { display: flex; align-items: center; gap: 16px; padding: 22px 26px; border-radius: var(--r); background: var(--grad); color: var(--ink); text-decoration: none; position: relative; overflow: hidden; box-shadow: 0 10px 40px -14px var(--accent); transition: transform .14s, box-shadow .14s; }
.dlbtn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%); transform: translateX(-100%); transition: transform .6s; } .dlbtn:hover { transform: translateY(-2px); box-shadow: 0 16px 50px -12px var(--accent); } .dlbtn:hover::after { transform: translateX(100%); }
.dlbtn-t { display: grid; } .dlbtn-t b { font-family: var(--display); text-transform: var(--caps); font-size: clamp(18px, 2.6vw, 26px); line-height: 1.1; } .dlbtn-t small { font-weight: 700; opacity: .8; } .dl-side { display: grid; gap: 6px; } .dl-side .btn { justify-content: flex-start; border-radius: var(--r); }

/* research */
.rs { --data: var(--accent2); } .rs-body { display: grid; gap: 16px; } .rs-card { min-width: 0; } .rs-head { margin-bottom: 12px; } .rs-head h2, .rs-drawer h3 { font-family: var(--display); text-transform: var(--caps); letter-spacing: var(--track); font-size: 18px; margin: 0; } .rs-head .note { margin: 3px 0 0; } .rs-drawer h3 { font-size: 14px; margin: 22px 0 10px; }
.rs-strip, .rs-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .rs-stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; min-width: 0; display: grid; } .rs-stat span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; } .rs-stat b { font-size: 20px; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rs-stat small { color: var(--muted); font-size: 12px; }
.fld.inline { display: flex; align-items: center; gap: 8px; margin: 0; } .fld.inline input { width: 96px; } .rs-me { margin: 0; }
.rs-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; } .rs-pick { display: grid; grid-template-columns: 54px 1fr; gap: 12px; align-items: center; text-align: left; padding: 10px; border-radius: var(--r); border: 1px solid var(--line); background: var(--bg2); cursor: pointer; } .rs-pick:hover { border-color: var(--accent); } .rs-pick img { width: 54px; height: 72px; border-radius: 7px; object-fit: cover; background: var(--bg); }
.rs-pick-t { display: grid; gap: 2px; min-width: 0; } .rs-pick-t small { color: var(--accent); font-weight: 800; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; } .rs-pick-t b { font-size: 15px; } .rs-pick-t span { color: var(--muted); font-size: 13px; }
.rs-two { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; } .rs-two.even { grid-template-columns: 1fr 1fr; } .rs-cols { display: grid; grid-template-columns: 7fr 5fr; gap: 16px; align-items: start; }
.rs-chart { position: relative; min-width: 0; } .rs-chart svg { display: block; width: 100%; height: auto; overflow: visible; } .rs-chart .grid-l { stroke: var(--line); stroke-width: 1; } .rs-chart .axis-t { fill: var(--muted); font-size: 11px; } .rs-chart .axis-n { fill: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.rs-chart .iso { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 5; opacity: .6; } .rs-chart .iso-t { fill: var(--muted); font-size: 10.5px; } .rs-chart .pt { fill: var(--data); stroke: var(--card); stroke-width: 2; cursor: pointer; } .rs-chart .pt.dim { opacity: .12; } .rs-chart .pt:hover, .rs-chart .pt.sel { stroke: var(--text); }
.rs-chart .ptlabel { fill: var(--text); font-size: 11.5px; font-weight: 600; paint-order: stroke; stroke: var(--card); stroke-width: 4px; stroke-linejoin: round; pointer-events: none; } .rs-chart .bar { fill: var(--data); } .rs-chart .bar.sel { fill: var(--text); } .rs-chart .bar-n { fill: var(--text); font-size: 13px; } .rs-chart .bar-v { fill: var(--muted); font-size: 12px; }
.rs-chart .hbar { fill: color-mix(in srgb, var(--data) 35%, var(--card)); } .rs-chart .hbar.me { fill: var(--data); } .rs-chart .me-col { fill: color-mix(in srgb, var(--data) 8%, transparent); stroke: var(--data); stroke-dasharray: 3 4; } .rs-chart .me-t { fill: var(--text); font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.rs-chart .line { fill: none; stroke: var(--data); stroke-width: 2; stroke-linejoin: round; } .rs-chart .area { fill: color-mix(in srgb, var(--data) 16%, transparent); } .rs-chart .cross { stroke: var(--muted); opacity: 0; } .rs-chart .cross-dot { fill: var(--data); stroke: var(--card); stroke-width: 2; opacity: 0; }
.rs-tip { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; min-width: 170px; max-width: 250px; padding: 9px 11px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); box-shadow: 0 8px 26px rgba(0,0,0,.5); font-size: 12.5px; color: var(--muted); opacity: 0; transition: opacity .12s; } .rs-tip b { display: block; color: var(--text); font-size: 13.5px; margin-bottom: 3px; } .rs-tip span { display: flex; justify-content: space-between; gap: 14px; } .rs-tip i { font-style: normal; color: var(--text); font-variant-numeric: tabular-nums; }
.rs-ghostchart { position: relative; height: 300px; border-radius: var(--r); background: linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 60px, linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 80px 100%; } .rs-ghostchart i { position: absolute; width: 13px; height: 13px; border-radius: 50%; background: var(--data); } .rs-ghosttrend { height: 90px; } .rs-ghosttrend i { display: block; height: 100%; background: linear-gradient(160deg, transparent 40%, var(--data) 41%, transparent 43%), linear-gradient(200deg, transparent 50%, var(--data) 51%, transparent 53%); opacity: .7; }
.rs-scroll { overflow-x: auto; } .rs-list { width: 100%; border-collapse: collapse; font-size: 13.5px; } .rs-list th { text-align: right; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 0 10px 8px 0; white-space: nowrap; cursor: pointer; user-select: none; } .rs-list th.l { text-align: left; } .rs-list th:hover, .rs-list th[aria-sort] { color: var(--accent); } .rs-list th.shut { opacity: .7; } .rs-list th .ic { margin-left: 4px; vertical-align: -1px; }
.rs-list td { padding: 7px 10px 7px 0; border-top: 1px solid var(--line); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; vertical-align: middle; } .rs-list td.g { text-align: left; white-space: normal; min-width: 250px; } .rs-list tr.row { cursor: pointer; } .rs-list tr.row:hover td, .rs-list tr.row.sel td { background: color-mix(in srgb, var(--data) 7%, transparent); } .rs-list td.dim { color: var(--muted); } .rs-list td.up { color: var(--good); }
.rs-pill { display: inline-block; width: 38px; height: 10px; border-radius: 5px; background: color-mix(in srgb, var(--text) 28%, transparent); filter: blur(3px); } .rs-gcell { display: grid; grid-template-columns: 42px 1fr; gap: 11px; align-items: center; } .rs-gcell img { width: 42px; height: 56px; border-radius: 6px; object-fit: cover; background: var(--bg); } .rs-gcell small { display: block; color: var(--muted); font-size: 11.5px; }
.rs-tag { display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; border-radius: 5px; padding: 2px 6px; margin: 3px 5px 0 0; border: 1px solid var(--line); color: var(--muted); } .rs-tag.drops { color: #D9CCFF; border-color: rgba(181,140,255,.55); background: rgba(181,140,255,.1); } [data-light] .rs-tag.drops { color: #5B3FA8; } .rs-tag.badge { color: var(--accent); border-color: var(--accent); }
.rs-score { display: inline-grid; grid-template-columns: 34px 64px; gap: 8px; align-items: center; } .rs-score i, .rs-parts i { display: block; height: 6px; border-radius: 3px; background: var(--bg); overflow: hidden; } .rs-score u, .rs-parts u { display: block; height: 100%; background: var(--data); border-radius: 3px; }
.rs-perks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; } .rs-perk { display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--line); font-size: 13px; min-width: 0; } .rs-perk.link { cursor: pointer; } .rs-perk img { width: 38px; height: 50px; border-radius: 5px; object-fit: cover; background: var(--bg); } .rs-perk img.bd { height: 38px; object-fit: contain; } .rs-perk small { display: block; color: var(--muted); font-size: 11.5px; }
img.gone { visibility: hidden; } .rs-ghost { padding: 6px 4px; } .rs-words { margin: 0 0 10px; } .rs textarea { width: 100%; min-height: 84px; margin: 12px 0 8px; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font: inherit; resize: vertical; }
.rs-titles { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; } .rs-titles li { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 7px 9px; border-radius: 9px; background: var(--bg2); border: 1px solid var(--line); font-size: 13.5px; min-width: 0; overflow-wrap: anywhere; } .rs-titles small { display: block; color: var(--muted); font-size: 11px; }
.rs-weights { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px 18px; margin-bottom: 10px; } .rs-weights label { display: grid; gap: 4px; } .rs-weights .wl { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; } .rs-weights small { color: var(--muted); font-size: 11.5px; } .rs-weights input { width: 100%; }
.rs-veil { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.6); opacity: 0; pointer-events: none; transition: opacity .25s; } .rs-veil.open { opacity: 1; pointer-events: auto; }
.rs-drawer { --data: var(--accent2); position: fixed; z-index: 41; top: 0; right: 0; bottom: 0; width: min(760px, 96vw); overflow: auto; padding: 20px 20px 40px; background: var(--card); border-left: 1px solid var(--line); box-shadow: -18px 0 50px rgba(0,0,0,.5); transform: translateX(104%); transition: transform .28s cubic-bezier(.2,.8,.2,1); visibility: hidden; } .rs-drawer.open { transform: none; visibility: visible; }
.rs-dhead { display: grid; grid-template-columns: 120px 1fr auto; gap: 16px; align-items: start; } .rs-dhead img { width: 120px; height: 160px; border-radius: 12px; object-fit: cover; background: var(--bg); } .rs-dhead h2 { font-family: var(--display); text-transform: var(--caps); font-size: 24px; line-height: 1.1; margin: 4px 0 6px; } .rs-tiles { margin-top: 16px; } .rs-tiles .rs-stat { background: var(--bg2); } .rs-tiles small { white-space: normal; }
.rs-parts { display: grid; gap: 7px; } .rs-parts > div { display: grid; grid-template-columns: 170px 1fr 84px; gap: 10px; align-items: center; font-size: 13px; } .rs-parts span { color: var(--muted); } .rs-parts small { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; } .rs-parts i { height: 8px; }
.rs-camp { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .rs-camp li { padding: 9px 11px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--line); font-size: 13.5px; } .rs-camp small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }

/* tiers + account */
.tiergrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(210px, .82fr); gap: 12px; align-items: stretch; }
.tiercol { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 16px 16px; overflow: hidden; transition: transform .16s, box-shadow .16s, border-color .16s; } .tiercol:hover { transform: translateY(-3px); border-color: var(--accent); }
.tiercol::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--line); } .tiercol.t1::before { background: linear-gradient(90deg, #7A431C, #FFB27A); } .tiercol.t2::before { background: linear-gradient(90deg, #1F5A78, #7FD8FF); } .tiercol.t3::before { background: linear-gradient(90deg, #8C6A1E, #F7E7B0, #B8902F); }
.tier-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; } .tiercol h2 { font-family: var(--display); font-style: var(--slant); text-transform: var(--caps); letter-spacing: var(--track); font-size: clamp(19px, 1.5vw, 25px); margin: 6px 0 0; line-height: 1.05; } .tier-line { margin: 0 0 4px; color: var(--muted); font-size: 13px; min-height: 2.9em; }
.tiercol .plus { margin: 4px 0 0; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); } .tier-cats { display: grid; gap: 10px; margin: 8px 0 auto; padding-bottom: 14px; }
.cat { display: grid; grid-template-columns: 20px 1fr; gap: 1px 9px; align-items: start; } .cat .ic { color: var(--accent); margin-top: 1px; grid-row: span 2; } .cat b { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .cat span { grid-column: 2; font-size: 13px; line-height: 1.4; }
.tiercol .btn { margin-top: auto; } .tier-in { margin: auto 0 0; text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); }
.tiercol.mine { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 40px -14px var(--accent); } .mine-tag { font-weight: 800; color: var(--ink); background: var(--grad); border-radius: 999px; padding: 2px 9px; text-transform: uppercase; letter-spacing: .08em; font-size: 10px; }
.tiercol.t3 { background: linear-gradient(160deg, rgba(217,180,90,.16), var(--card) 45%); border-color: #5E4A1B; } .tiercol.t3 h2 { background: linear-gradient(135deg, #B8902F, #F7E7B0 50%, #D9B45A); -webkit-background-clip: text; background-clip: text; color: transparent; } .tiercol.t3 .cat .ic { color: #D9B45A; }
.giftcol { border: 2px dashed #8C6A1E; background: radial-gradient(circle at 50% 0, rgba(217,180,90,.13), transparent 60%), var(--card); text-align: left; } .giftcol > .ic { color: #F3B23A; filter: drop-shadow(0 0 10px rgba(243,178,58,.5)); } .giftcol .cat .ic { color: #F3B23A; } .giftcol::before { display: none; }
.matrix th:first-child { width: 38%; white-space: normal; } .matrix tr:first-child th { text-align: center; padding-bottom: 10px; } .matrix tr + tr th { text-transform: none; letter-spacing: 0; font-size: 13.5px; color: var(--text); font-weight: 500; border-top: 1px solid var(--line); padding: 8px 12px 8px 0; } .matrix th b { display: block; font-weight: 700; } .matrix th small { display: block; color: var(--muted); font-size: 12px; }
.matrix td { text-align: center; border-top: 1px solid var(--line); padding: 8px 6px; font-weight: 700; font-variant-numeric: tabular-nums; } .matrix td.yes .ic { color: var(--good); } .matrix td.no { color: var(--line); } .matrix .me { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.mecard { display: flex; align-items: center; gap: 12px; } .meav { width: 56px; height: 56px; border-radius: 50%; } .mecard > div { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: 1; } .mecard b { font-size: 18px; }
.themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; } .swatchwrap { display: grid; gap: 4px; } .hold { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 5px; border-radius: 8px; border: 1px dashed var(--line); background: transparent; color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer; touch-action: none; user-select: none; } .hold:hover { color: var(--accent); border-color: var(--accent); } .hold.on { background: var(--grad); color: var(--ink); border-style: solid; border-color: transparent; }
.swatch { display: grid; gap: 6px; justify-items: start; padding: 8px; border-radius: var(--r); border: 1px solid var(--line); background: var(--card); cursor: pointer; text-align: left; } .swatch .sw { width: 100%; height: 62px; border-radius: calc(var(--r) - 2px); } .swatch.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .swatch.shut .sw { filter: blur(5px) saturate(1.3); } .swatch.shut b { opacity: .7; }
.accentrow { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; font-weight: 700; } .accentrow.off span:first-child { opacity: .55; } .accentrow input { width: 44px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: none; }
.youcols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; align-items: start; }
.refcard p { margin: 0 0 10px; } .ref-big { display: flex; align-items: baseline; gap: 10px; } .ref-big b { font-family: var(--display); font-style: var(--slant); font-size: 44px; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .ref-big span { color: var(--muted); font-weight: 700; } .ref-next { font-weight: 700; color: var(--text); }
.reftrack { position: relative; height: 10px; border-radius: 5px; background: var(--bg); margin: 30px 50px 52px 16px; box-shadow: inset 0 0 0 1px var(--line); }
.ref-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 5px; background: linear-gradient(90deg, var(--accent), var(--accent2) 70%, #F7E3A1); box-shadow: 0 0 14px -2px var(--accent2); transition: width 1.6s cubic-bezier(.2, .8, .2, 1); overflow: hidden; } .ref-fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%); transform: translateX(-100%); animation: refshine 2.8s ease-in-out 1.6s infinite; } @keyframes refshine { to { transform: translateX(100%); } }
.ref-dot { position: absolute; left: 0; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFF6D6, #F3D98B 45%, #B8902F); box-shadow: 0 0 0 2px var(--card), 0 0 12px 3px rgba(243,217,139,.75), 0 0 28px 8px rgba(217,180,90,.35); transition: left 1.6s cubic-bezier(.2, .8, .2, 1); animation: refglow 2.4s ease-in-out infinite; z-index: 2; } @keyframes refglow { 50% { box-shadow: 0 0 0 2px var(--card), 0 0 18px 6px rgba(243,217,139,.95), 0 0 40px 14px rgba(217,180,90,.5); } }
.refstep { position: absolute; top: -8px; transform: translateX(-50%); display: grid; justify-items: center; gap: 6px; } .refstep b { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: var(--card); border: 2px solid var(--line); transition: all .4s 1.2s; } .refstep.hit b { background: var(--grad); color: var(--ink); border-color: transparent; box-shadow: 0 0 14px var(--accent); } .refstep small { font-size: 11px; color: var(--muted); white-space: nowrap; } .refstep.hit small { color: var(--text); font-weight: 700; }
/* referral time 1.0 */
.reftease { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .reftease .ic { color: #F3B23A; }
.refpip { position: absolute; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--line); transition: all .4s 1.2s; z-index: 1; } .refpip.hit { background: #FFF6D6; box-shadow: 0 0 8px 1px rgba(243,217,139,.9); }
.refzones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 14px; } .refzone { display: flex; gap: 8px; align-items: flex-start; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); opacity: .7; } .refzone.on { opacity: 1; border-color: var(--accent2); box-shadow: 0 0 16px -6px var(--accent2); } .refzone .ic { margin-top: 2px; color: var(--accent2); flex: none; } .refzone b { display: block; font-size: 13px; } .refzone small { display: block; font-size: 11px; color: var(--muted); }
.refclock { display: flex; gap: 10px; align-items: center; padding: 10px 12px; margin: 0 0 6px; border-radius: 12px; border: 1px solid #8C6A1E; background: linear-gradient(90deg, rgba(243,178,58,.12), transparent); } .refclock .ic { color: #F3B23A; flex: none; } .refclock b { display: block; } .refclock small { display: block; color: var(--muted); font-size: 12px; } .refclock em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--muted); text-align: right; }
@media (max-width: 720px) { .refzones { grid-template-columns: 1fr; } .reftrack { margin-bottom: 64px; } .reftrack .refstep:nth-last-child(2) small { transform: translateY(15px); } }
.giftcard { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; border: 1px dashed #8C6A1E; } .giftcard > .ic { color: #F3B23A; } .giftcard .note { margin: 2px 0 0; }
/* DNA */
.dnachip { display: flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; font-size: 12px; font-weight: 800; } .dnachip:hover { border-color: var(--accent); } .dnachip > .ic { color: var(--accent); } .dnachip .hbar { width: 64px; }
.hbar { position: relative; height: var(--hbH, 34px); } .hbar svg { display: block; width: 100%; height: 100%; overflow: visible; } .hbar path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.hb-dim .hb-strand { stroke: var(--line); stroke-width: 2; } .hb-dim .hb-rung { stroke: var(--line); stroke-width: 1; opacity: .7; } .hb-lit .hb-strand { stroke-width: 2.6; filter: drop-shadow(0 0 4px var(--accent)); } .hb-lit .hb-strand.b { opacity: .75; } .hb-lit .hb-rung { stroke: var(--accent2); stroke-width: 1.2; opacity: .8; } .hb-s0 { stop-color: var(--accent); } .hb-s1 { stop-color: var(--accent2); }
.hb-head { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #FFF6D6; box-shadow: 0 0 10px 3px var(--accent2), 0 0 24px 6px color-mix(in srgb, var(--accent) 50%, transparent); } .hbar.slim .hb-head { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; box-shadow: 0 0 6px 1px var(--accent2); } .hbar.slim .hb-strand { stroke-width: 1.4 !important; filter: none !important; } .hbar.slim .hb-rung { display: none; }
.dnacard { display: grid; gap: 12px; } .dna-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; } .dna-lvl { display: grid; grid-template-columns: auto auto; gap: 0 10px; align-items: baseline; } .dna-lvl small { grid-column: 1 / -1; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.dna-lvl b { font-family: var(--display); font-style: var(--slant); font-size: 52px; line-height: .95; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .dna-lvl span { font-family: var(--display); font-style: var(--slant); text-transform: var(--caps); font-size: 18px; } .dna-tot { text-align: right; display: grid; } .dna-tot b { font-size: 20px; font-variant-numeric: tabular-nums; } .dna-tot small { color: var(--muted); }
.dna-foot { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); font-weight: 600; } .dna-rates { display: flex; flex-wrap: wrap; gap: 5px; } .tierpill.mine { box-shadow: 0 0 0 1px currentColor, 0 0 12px -2px currentColor; }
.lvfx { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; overflow: hidden; } .lvfx i { position: absolute; top: 0; height: 100%; width: 38%; background: linear-gradient(90deg, transparent, var(--accent2), #FFF6D6, var(--accent2), transparent); filter: drop-shadow(0 0 6px var(--accent2)); animation: lvsweep 1.9s cubic-bezier(.3, .1, .3, 1) forwards; } .lvfx i + i { animation-delay: .35s; opacity: .6; width: 22%; } @keyframes lvsweep { from { left: -40%; } to { left: 105%; } }
.lvcard { position: fixed; z-index: 85; top: calc(var(--topH) + 12px); right: 16px; display: grid; gap: 0; padding: 10px 18px 12px; border-radius: var(--r); background: color-mix(in srgb, var(--bg) 92%, transparent); border: 1px solid color-mix(in srgb, var(--accent2) 60%, transparent); box-shadow: 0 0 34px -10px var(--accent2); animation: lvin .5s ease-out; transition: opacity .6s, transform .6s; } .lvcard.out { opacity: 0; transform: translateY(-6px); } @keyframes lvin { from { opacity: 0; transform: translateY(-8px); } }
.lvcard small { font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .lvcard b { font-family: var(--display); font-style: var(--slant); font-size: 24px; line-height: 1.1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .lvcard span { font-size: 12px; font-weight: 700; color: var(--text); }
/* research dashboard */
.rs-lay { margin-left: auto; } .rs[data-layout=dash] .rs-body { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; align-items: start; } .rs[data-layout=dash] .rs-body > * { grid-column: 1 / -1; }
.rs[data-layout=dash] .rs-card { padding: 0 12px 12px; border-radius: var(--r); overflow: hidden; } .rs[data-layout=dash] .rs-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 0 -12px 12px; padding: 8px 12px; background: var(--bg2); border-bottom: 1px solid var(--line); box-shadow: inset 3px 0 0 var(--accent); } .rs[data-layout=dash] .rs-head h2 { font-size: 14px; font-style: var(--slant); } .rs[data-layout=dash] .rs-head .note { margin: 0; font-size: 12px; }
.rs[data-layout=dash] .ga-me { position: sticky; top: var(--topH); z-index: 6; margin: 0 calc(-1 * clamp(16px, 2.4vw, 44px)); padding: 8px clamp(16px, 2.4vw, 44px); background: color-mix(in srgb, var(--bg2) 94%, transparent); backdrop-filter: blur(8px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rs[data-layout=dash] .rs-strip { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
@media (min-width: 1200px) {
  .rs[data-layout=dash] .ga-picks { grid-column: 1 / span 3; grid-row: span 1; } .rs[data-layout=dash] .ga-charts { grid-column: 4 / -1; } .rs[data-layout=dash] .ga-picks .rs-picks { grid-template-columns: 1fr; max-height: 470px; overflow-y: auto; }
  .rs[data-layout=dash] .ga-list { grid-column: 1 / span 8; } .rs[data-layout=dash] .rs-body > .rs-cols { grid-column: 9 / -1; display: flex; flex-direction: column; gap: 8px; } .rs[data-layout=dash] .ga-drops .rs-perks, .rs[data-layout=dash] .ga-badges .rs-perks { grid-template-columns: 1fr; max-height: 330px; overflow-y: auto; }
  .rs[data-layout=dash] .ga-list .rs-scroll { max-height: 690px; overflow-y: auto; } .rs[data-layout=dash] .rs-list thead th { position: sticky; top: 0; background: var(--card); z-index: 2; padding-top: 6px; }
  .rs[data-layout=dash] .ga-titles { grid-column: 1 / span 6; } .rs[data-layout=dash] .ga-weights { grid-column: 7 / -1; }
}
.rs[data-layout=table] .ga-picks, .rs[data-layout=table] .ga-charts, .rs[data-layout=table] .rs-cols, .rs[data-layout=table] .ga-titles, .rs[data-layout=table] .ga-weights { display: none; } .rs[data-layout=table] .ga-list .rs-scroll { max-height: calc(100vh - 330px); overflow-y: auto; } .rs[data-layout=table] .rs-list thead th { position: sticky; top: 0; background: var(--card); z-index: 2; }

.toasts { position: fixed; right: 14px; bottom: 14px; z-index: 80; display: grid; gap: 6px; } .toast { padding: 10px 14px; border-radius: 10px; background: var(--card); border: 1px solid var(--accent); font-size: 14px; font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,.5); animation: tin .2s ease-out; } .toast.bad { border-color: var(--bad); } .toast.out { opacity: 0; transition: opacity .3s; } @keyframes tin { from { transform: translateY(8px); opacity: 0; } }

@media (max-width: 900px) {
  .top { gap: 8px; padding: 0 10px; } .wordmark { display: none; } .mainnav a span { display: none; } .mainnav a { padding: 9px; } .mechip span:not(.tierpill) { display: none; }
  body.wallmode { height: auto; overflow: auto; } body.wallmode main { display: block; }
  .wallwrap, .wallwrap.norail, .wallwrap.nochat, .wallwrap.norail.nochat { display: flex; flex-direction: column; } .rail { flex-direction: row; border-right: 0; border-bottom: 1px solid var(--line); padding: 6px 8px; overflow-x: auto; } .stage { grid-template-columns: 1fr !important; grid-template-rows: none !important; } .pane { aspect-ratio: 16 / 10; grid-row: auto !important; grid-column: auto !important; } .side { border-left: 0; border-top: 1px solid var(--line); } .dock { height: 520px; flex: none !important; }
  .hero, .calcols, .calc, .toolgrid, .dl, .rs-two, .rs-two.even, .rs-cols, .obsgrid, .youcols { grid-template-columns: 1fr; } .vsplit, .hsplit, .fsplit { display: none; } .sidetop { max-height: none !important; } .rail[data-view] .rail-l { flex-direction: row; align-items: center; overflow-x: auto; } .rail .rl-t small { display: none; } .rail-h { display: none; } .giftcard { grid-template-columns: auto 1fr; } .giftcard .btn { grid-column: 1 / -1; } .probe-row { grid-template-columns: 1fr 1fr; } .dnachip .hbar { display: none; } .rs-strip, .rs-tiles { grid-template-columns: 1fr 1fr; } .rs-dhead { grid-template-columns: 80px 1fr auto; } .rs-dhead img { width: 80px; height: 107px; } .rs-parts > div { grid-template-columns: 120px 1fr 70px; } .tiergrid { grid-template-columns: 1fr 1fr; } .connform { grid-template-columns: 1fr 1fr; } .cell { min-height: 64px; } .subchip span:not(.avatar) { display: none; } .pop-panel { position: fixed; left: 8px; right: 8px; top: 110px; width: auto; } .master input { width: 80px; }
}
@media (max-width: 1400px) { .tiergrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .tiergrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .tiergrid { grid-template-columns: 1fr; } .hero { padding: 30px 16px; } .hero-wall { height: 240px; } }

/* Alpha Profile, badges, friends */
.profchip { display: flex; align-items: center; gap: 6px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; font-size: 13px; font-weight: 700; } .profchip:hover, .profchip.on { border-color: var(--accent); color: var(--accent); } @media (max-width: 1680px) { .profchip span { display: none; } .profchip { padding: 8px 10px; } }
.navdot { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--grad); color: var(--ink); font: 900 10.5px/1 var(--body); font-style: normal; box-shadow: 0 0 10px -2px var(--accent); }
.phead { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; margin-bottom: 8px; position: relative; overflow: hidden; } .phead::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad); }
.phead .face { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--accent); } .phead-t { display: grid; gap: 8px; min-width: 0; } .phead-t h1 { font-family: var(--display); font-style: var(--slant); text-transform: var(--caps); letter-spacing: var(--track); font-size: clamp(24px, 3.4vw, 40px); line-height: 1; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phead-s { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .rankpill { font-family: var(--display); font-style: var(--slant); text-transform: var(--caps); font-size: 13px; letter-spacing: .04em; padding: 2px 10px; border-radius: 999px; background: var(--grad); color: var(--ink); }
.phead-a { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; } .btn.arm, .btn.ghost.arm { color: var(--bad); border-color: var(--bad); }
.sectionh .count { margin-left: 10px; font: 600 12.5px var(--body); text-transform: none; letter-spacing: 0; font-style: normal; color: var(--muted); }
.bgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; } .bgrid > .note { grid-column: 1 / -1; margin: 0; }
.btile { display: grid; justify-items: center; gap: 4px; padding: 14px 8px 10px; border-radius: var(--r); border: 1px solid var(--line); background: var(--card); text-align: center; min-width: 0; position: relative; } .btile.shown { border-color: var(--accent); box-shadow: 0 0 18px -10px var(--accent); } .btile.hid .abadge { opacity: .55; }
.btile-n { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; } .btile small { color: var(--muted); font-size: 11.5px; } .btile-a { display: flex; gap: 4px; margin-top: 4px; } .btile-a .pb.on { color: var(--accent); }
.abadge { --bz: 72px; --ring: #C07A45; position: relative; width: var(--bz); height: var(--bz); display: inline-grid; place-items: center; flex: none; } .abadge svg { position: absolute; inset: 0; width: 100%; height: 100%; } .abadge .face { position: relative; }
.abadge-track { fill: none; stroke: var(--line); stroke-width: 5; } .abadge-fill { fill: none; stroke: var(--ring); stroke-width: 5; stroke-linecap: round; transition: stroke-dasharray .8s ease; }
.abadge-lv { position: absolute; right: -2px; bottom: -2px; min-width: 24px; height: 24px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; background: var(--bg); border: 2px solid var(--ring); color: var(--text); font: 900 12px/1 var(--body); font-variant-numeric: tabular-nums; }
.abadge.band-blaze { --ring: var(--accent); } .abadge.band-steel { --ring: #C9D1DB; } .abadge.band-gold { --ring: #F3D98B; filter: drop-shadow(0 0 8px rgba(217,180,90,.45)); }
.ghostring { border-radius: 50%; border: 5px solid var(--line); background: var(--bg2); } .gbar { display: block; width: 70%; height: 10px; border-radius: 5px; background: var(--line); } .gbar.s { width: 45%; height: 8px; }
.palcard { display: grid; gap: 12px; } .flists { display: grid; } .fh { margin: 12px 0 4px; font: 800 11px var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.frow { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); min-width: 0; } .frow-who { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; flex: 1 1 auto; } .frow-t { display: grid; min-width: 0; } .frow-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .frow-t small { color: var(--muted); font-size: 12px; }
.frow-a { display: flex; gap: 6px; flex: none; flex-wrap: wrap; justify-content: flex-end; } .ftag { flex: none; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #F3D98B; border: 1px solid currentColor; border-radius: 999px; padding: 1px 7px; } .mini.gold.on { color: #F3D98B; border-color: #F3D98B; }
.poolgrid { display: flex; flex-wrap: wrap; gap: 8px; } .poolchip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); cursor: pointer; font-weight: 700; font-size: 13px; } .poolchip:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 720px) { .phead { grid-template-columns: auto minmax(0, 1fr); } .phead .face { --fz: 64px !important; } .phead-a { grid-column: 1 / -1; justify-content: flex-start; } .frow { flex-wrap: wrap; } .ftag { order: 3; } }
/* The Pack board */
.ptabs { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); } .ptabs a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 13px; color: var(--muted); } .ptabs a:hover { color: var(--text); } .ptabs a.on { background: var(--grad); color: var(--ink); }
.packcols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 18px; align-items: start; } .packside { display: grid; gap: 18px; }
.cardh { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .cardh h2 { margin: 0; font-family: var(--display); font-style: var(--slant); text-transform: var(--caps); letter-spacing: var(--track); font-size: 17px; }
.cardh .seg { margin-left: auto; }
.boardcard { position: relative; overflow: hidden; } .boardcard::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, #F7E3A1, transparent); background-size: 200% 100%; animation: boardsweep 3.6s linear infinite; } @keyframes boardsweep { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.pod { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 10px; align-items: end; margin-bottom: 14px; } .pod:empty { display: none; }
.podslot { display: grid; justify-items: center; gap: 5px; padding: 14px 8px; text-align: center; text-decoration: none; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r); min-width: 0; } .podslot.empty { visibility: hidden; } .podslot:hover { border-color: var(--accent); } .podslot.me { box-shadow: inset 0 -3px 0 var(--accent); }
.podslot.first { padding-top: 22px; border-color: rgba(217,180,90,.55); box-shadow: 0 0 26px -10px #D9B45A; } .podslot .pl { font-family: var(--display); font-style: var(--slant); font-size: 24px; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .podslot.first .pl { font-size: 32px; background: linear-gradient(135deg, #8C6A1E, #F3D98B 45%, #B8902F 70%, #F7E7B0); -webkit-background-clip: text; background-clip: text; }
.podslot b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; } .podslot small { color: var(--muted); font-size: 12px; }
.brow { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 40px; gap: 10px; align-items: center; padding: 8px 6px; border-top: 1px solid var(--line); } .brow .bn { font-weight: 900; font-size: 14px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.bwho-a { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; } .bwho { display: grid; min-width: 0; } .bwho b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bwho small { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 6px; } .bdna { font-variant-numeric: tabular-nums; }
.brow.me { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 18%, transparent), transparent); border-radius: 8px; border-top-color: transparent; box-shadow: inset 3px 0 0 var(--accent); } .bgap { text-align: center; color: var(--muted); font-size: 12px; padding: 4px; border-top: 1px solid var(--line); }
.bmove { font-size: 11px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; } .bmove.up { color: var(--good); } .bmove.dn { color: var(--bad); } .bmove.eq { color: var(--muted); } .bmove.new { color: var(--accent2); text-transform: uppercase; letter-spacing: .06em; font-size: 9.5px; }
.rkpill { display: inline-flex; border: 1px solid currentColor; border-radius: 999px; padding: 0 7px; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; line-height: 1.6; } .rk-pup { color: var(--muted); } .rk-scout { color: #35C8FF; } .rk-hunter { color: #6FD83A; } .rk-stalker { color: #B58CFF; } .rk-alpha { color: #FF8A00; } .rk-apex { color: #D9B45A; }
.placecard { display: grid; gap: 10px; } .placecard .cardh { margin: 0; } .stat { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; border-top: 1px solid var(--line); padding-top: 8px; } .stat b { font-size: 20px; font-variant-numeric: tabular-nums; } .stat small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pbar { height: 10px; border-radius: 999px; background: var(--bg2); border: 1px solid var(--line); overflow: hidden; } .pbar i { display: block; height: 100%; background: var(--grad); border-radius: 999px; transition: width .8s ease; }
@media (max-width: 900px) { .packcols { grid-template-columns: minmax(0, 1fr); } .brow { grid-template-columns: 26px minmax(0, 1fr) auto 34px; gap: 8px; } }
/* Privacy */
.legal { max-width: 78ch; } .legal h2 { font-family: var(--display); font-style: var(--slant); text-transform: var(--caps); letter-spacing: var(--track); font-size: 18px; margin: 26px 0 8px; } .legal p, .legal li { color: var(--text); } .legal ul { padding-left: 20px; margin: 6px 0; } .legal li { margin: 4px 0; } .legal .fine { color: var(--muted); }
.forget { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); } .forget .addbox input { min-width: 0; }
/* Passes */
.tierpill.pass { color: #FFD3E2; border-color: #C9467A; background: linear-gradient(135deg, rgba(255,92,138,.30), rgba(255,179,107,.18)); box-shadow: 0 0 12px -4px #FF5C8A; } .tierpill.pass .ic { color: #FF7DA3; } [data-light] .tierpill.pass { color: #9C1F50; }
.passcard { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; border-color: #C9467A; background: linear-gradient(135deg, rgba(255,92,138,.16), rgba(255,179,107,.08) 60%, transparent), var(--card); position: relative; overflow: hidden; } .passcard > .ic { color: #FF7DA3; flex: none; animation: passbeat 2.6s ease-in-out infinite; } .passcard b { font-family: var(--display); font-style: var(--slant); text-transform: var(--caps); letter-spacing: var(--track); font-size: 20px; } .passcard .note { margin: 2px 0 0; }
@keyframes passbeat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.16); } 24% { transform: scale(1); } 36% { transform: scale(1.1); } 48% { transform: scale(1); } }
.mine-tag.pass { color: #FFD3E2; background: linear-gradient(135deg, rgba(255,92,138,.35), rgba(255,179,107,.2)); border-color: #C9467A; } .tier-in.pass { color: #FF9DBB; font-weight: 700; }
.tierpill.pass .pass-long { white-space: pre; } @media (max-width: 1760px) { .mechip .tierpill.pass .pass-long { display: none; } } @media (max-width: 1560px) { .mechip > span:not(.tierpill) { display: none; } }
.fh.twin { color: #F3D98B; }
/* Bandwidth widget */
.net { display: grid; gap: 10px; } .net .pop-head { margin-bottom: 0; align-items: center; } .net-seg { margin-left: auto; } .net-seg button { padding: 3px 10px; font-size: 12px; }
.net-stage { position: relative; height: 96px; border-radius: var(--r); border: 1px solid var(--line); background: radial-gradient(120% 140% at 50% 120%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%), var(--bg2); overflow: hidden; display: grid; place-items: center; }
.net-flow { position: absolute; inset: 0; opacity: 0; transition: opacity .4s; } .net[data-look=flow] .net-flow { opacity: 1; }
.net-digits { position: relative; display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: baseline; justify-content: center; text-align: center; } .net-digits b { font: 700 44px/1 ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace; letter-spacing: .04em; font-variant-numeric: tabular-nums; color: var(--accent2); text-shadow: 0 0 14px color-mix(in srgb, var(--accent) 70%, transparent), 0 0 2px var(--accent2); }
.net-digits span { font: 800 13px var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .net-digits small { grid-column: 1 / -1; color: var(--muted); font-size: 11.5px; margin-top: 4px; }
.net[data-look=flow] .net-digits { position: absolute; left: 10px; bottom: 6px; justify-content: start; text-align: left; } .net[data-look=flow] .net-digits b { font-size: 20px; } .net[data-look=flow] .net-digits small { display: none; }
.net-rows { display: grid; } .net-row { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 3px 0; font-size: 12.5px; } .net-row i { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 8px currentColor; } .net-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; } .net-row small { color: var(--muted); } .net-row b { font-variant-numeric: tabular-nums; }
.net-test { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border-top: 1px solid var(--line); padding-top: 10px; } .net-test .note { flex-basis: 100%; margin: 0; } .net-res { flex-basis: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .net-res div { border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; display: grid; } .net-res small { color: var(--muted); font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .net-res b { font-variant-numeric: tabular-nums; font-size: 15px; }
.netbox .bb { min-height: 170px; } .ghostnet .ghostpad { height: 90px; }
/* Tier cards v2: coins, majors */
.tiercol { --tone: var(--muted); } .tiercol.t1 { --tone: #FF8A3D; } .tiercol.t2 { --tone: #5CC8FF; } .tiercol.t3 { --tone: #F3D98B; } .tiercol.giftcol { --tone: #FF7DA3; }
.tiercol h2 { font-size: 26px; } .tier-req { margin: -4px 0 2px; color: var(--muted); font-size: 11.5px; } .tierpill.gift { color: #FF7DA3; border-color: #7A3350; } .lock-req { color: var(--muted); font-size: 11.5px; margin-top: -2px; }
.coin { --cz: 38px; --tone: var(--muted); width: var(--cz); height: var(--cz); border-radius: 50%; flex: none; display: inline-grid; place-items: center; color: var(--tone); background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--tone) 38%, var(--card)), #12100E 72%); border: 1.5px solid color-mix(in srgb, var(--tone) 70%, #000); box-shadow: inset 0 -2px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12), 0 2px 4px rgba(0,0,0,.5); }
.coin.k1 { --tone: #FF8A3D; } .coin.k2 { --tone: #5CC8FF; } .coin.k3 { --tone: #F3D98B; } .coin.kg { --tone: #FF7DA3; } [data-light] .coin { background: radial-gradient(circle at 32% 28%, #fff, color-mix(in srgb, var(--tone) 22%, #fff) 72%); }
.major { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 0; border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); } .plus + .major, .tier-line + .major { border-top: 0; }
.major-cat { display: block; font-size: 9.5px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .major b { display: block; font-size: 14.5px; line-height: 1.2; } .major small { display: block; color: var(--muted); font-size: 11.5px; line-height: 1.35; margin-top: 2px; }
.also { margin: 6px 0 0; padding-top: 8px; border-top: 1px dashed var(--line); color: var(--muted); font-size: 11.5px; } .also b { color: var(--text); }
.net-use { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; } .net-use[hidden] { display: none; } .net-usebar { height: 8px; border-radius: 999px; background: var(--bg2); border: 1px solid var(--line); overflow: hidden; } .net-usebar i { display: block; height: 100%; border-radius: 999px; background: var(--grad); transition: width .8s ease; box-shadow: 0 0 10px -1px var(--accent); } .net-usebar.hot i { background: linear-gradient(90deg, var(--accent), var(--bad)); } .net-use small { color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.net-row { position: relative; padding-bottom: 6px !important; } .net-rowbar { position: absolute; left: 17px; right: 0; bottom: 1px; height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--line) 80%, transparent); overflow: hidden; } .net-rowbar i { display: block; height: 100%; border-radius: 2px; transition: width .8s ease; }
.net-scale { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; border-top: 1px solid var(--line); padding-top: 10px; font-size: 12.5px; } .net-scale .note { flex-basis: 100%; margin: 0; } .net-line { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; } .net-line input { width: 84px; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg2); font-variant-numeric: tabular-nums; } .net-line input:disabled { opacity: .5; } .net-line .unit { color: var(--muted); font-weight: 600; } .net-auto { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); cursor: pointer; }
.bb.slim .lock-req, .dock-foot .lock-req { display: none; }
@media (max-width: 1660px) { .tools > .btn.ghost:not(.endbtn) > span, .tools > .pop > .btn.ghost > span { display: none; } .tools > .btn.ghost:not(.endbtn), .tools > .pop > .btn.ghost { padding-left: 11px; padding-right: 11px; } }
/* top bar room for the longer Memberships label */
@media (max-width: 1840px) { .dnachip .hbar { display: none; } .mainnav a { padding: 8px 9px; gap: 6px; } }
@media (max-width: 1420px) and (min-width: 901px) { .mainnav a .ic { display: none; } .mainnav a { padding: 8px 8px; } }
@media (max-width: 1300px) and (min-width: 901px) { .mainnav a { font-size: 13px; padding: 7px 7px; gap: 5px; } .dnachip { display: none; } }
@media (max-width: 1100px) and (min-width: 901px) { .wordmark { display: none; } .mainnav a { padding: 7px 5px; } }
@media (max-width: 1000px) and (min-width: 901px) { .mainnav a { font-size: 12px; padding: 7px 4px; } }
/* owner gift credit 1.0 */
.giftadmin { display: grid; gap: 10px; } .giftadmin .note { margin: 0; }
.ga-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); } .ga-row > div { flex: 1; min-width: 0; } .ga-row b { display: block; } .ga-row small { display: block; color: var(--muted); font-size: 12px; }
.ga-h { font-size: 13px; margin-top: 4px; } .ga-paste { width: 100%; min-height: 96px; resize: vertical; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font: 13px/1.5 var(--body); }
.ga-acts { display: flex; flex-wrap: wrap; gap: 8px; } .ga-res { display: grid; gap: 8px; justify-items: start; } .ga-res:empty { display: none; }
.ga-table { width: 100%; border-collapse: collapse; font-size: 13px; } .ga-table th { text-align: left; color: var(--muted); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; padding: 4px 6px; } .ga-table td { padding: 6px; border-top: 1px solid var(--line); } .ga-table td:not(:first-child), .ga-table th:not(:first-child) { text-align: right; } .ga-table tr.done td { color: var(--muted); }
.ga-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .ga-log li { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; } .ga-log small { color: var(--muted); }
/* app basics: notch-safe edges when launched from the home screen, no double-tap zoom delay on controls */
.top { padding-top: env(safe-area-inset-top, 0px); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
body { padding-bottom: env(safe-area-inset-bottom, 0px); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
button, a, .rail, .pane, input, select { touch-action: manipulation; }
@media (max-width: 900px) { .top { padding-left: max(10px, env(safe-area-inset-left, 0px)); padding-right: max(10px, env(safe-area-inset-right, 0px)); } }
/* mastery 1.0 */
.medal { --ms: 44px; --m1: #8a6a4a; --m2: #3a2f28; --mt: #1a120c; width: var(--ms); height: var(--ms); flex: none; border-radius: 50%; display: inline-grid; place-items: center; color: var(--mt); background: radial-gradient(circle at 32% 28%, var(--m1), var(--m2) 72%); box-shadow: inset 0 0 0 calc(var(--ms) * .06) rgba(255,255,255,.18), inset 0 calc(var(--ms) * -.08) calc(var(--ms) * .16) rgba(0,0,0,.35); filter: grayscale(.85) brightness(.55); opacity: .75; }
.medal.got { filter: none; opacity: 1; box-shadow: inset 0 0 0 calc(var(--ms) * .06) rgba(255,255,255,.35), inset 0 calc(var(--ms) * -.08) calc(var(--ms) * .16) rgba(0,0,0,.3), 0 0 calc(var(--ms) * .4) -4px var(--m1); }
.medal .ic { stroke-width: 2.2; }
.m-bronze .medal, .medal.m-bronze { --m1: #F0A56A; --m2: #8A4A1E; --mt: #3A1A06; }
.m-silver .medal, .medal.m-silver { --m1: #F4F7FA; --m2: #8C96A3; --mt: #2A3038; }
.m-gold .medal, .medal.m-gold { --m1: #FFF1B8; --m2: #C8921E; --mt: #3E2A04; }
.m-platinum .medal, .medal.m-platinum { --m1: #F7F4FF; --m2: #7C74B8; --mt: #1C1838; }
.m-diamond .medal, .medal.m-diamond { --m1: #E9FEFF; --m2: #2FB8E6; --mt: #042433; }
.medal.m-diamond.got { background: radial-gradient(circle at 32% 28%, #FFFFFF, #8FE6FF 35%, #2FB8E6 60%, #6A5CFF 100%); animation: diaglint 3.2s ease-in-out infinite; } @keyframes diaglint { 50% { box-shadow: inset 0 0 0 calc(var(--ms) * .06) rgba(255,255,255,.5), 0 0 calc(var(--ms) * .55) -2px #8FE6FF; } } @media (prefers-reduced-motion: reduce) { .medal.m-diamond.got { animation: none; } }
.mastery .m-head { display: flex; align-items: baseline; gap: 10px; } .mastery .lede { max-width: 80ch; }
.m-levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; margin-top: 14px; }
.mlevel { display: grid; gap: 12px; align-content: start; position: relative; overflow: hidden; } .mlevel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--m2, #555), var(--m1, #999)); }
.mlevel.m-bronze { --m1: #F0A56A; --m2: #8A4A1E; } .mlevel.m-silver { --m1: #F4F7FA; --m2: #8C96A3; } .mlevel.m-gold { --m1: #FFF1B8; --m2: #C8921E; } .mlevel.m-platinum { --m1: #E4DEFF; --m2: #7C74B8; } .mlevel.m-diamond { --m1: #BFF4FF; --m2: #2FB8E6; }
.mlevel.got { border-color: color-mix(in srgb, var(--m1) 45%, var(--line)); box-shadow: 0 0 28px -16px var(--m1); }
.ml-top { display: flex; gap: 12px; align-items: center; } .ml-top h3 { margin: 0; font-family: var(--display); font-style: var(--slant); text-transform: var(--caps); font-size: 20px; } .ml-blurb { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.ml-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .ml-dna { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--accent2); }
.ml-lessons { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .ml-lessons li { display: grid; grid-template-columns: 16px 1fr auto; gap: 8px; align-items: center; font-size: 13px; } .ml-lessons li .ic { color: var(--muted); } .ml-lessons li.read .ic { color: var(--good); } .ml-lessons li.read a { color: var(--muted); } .ml-lessons a { color: var(--text); text-decoration: none; } .ml-lessons a:hover { color: var(--accent); }
.ml-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; border-top: 1px solid var(--line); padding-top: 12px; margin-top: auto; } .ml-foot .note { margin: 0; } .ml-won { color: var(--m1); }
.quiz { grid-column: 1 / -1; display: grid; gap: 12px; padding: 18px; border-radius: var(--r); border: 1px solid var(--accent); background: var(--card); } .quiz h3 { margin: 0; font-family: var(--display); font-style: var(--slant); text-transform: var(--caps); }
.qz-q { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 0; display: grid; gap: 6px; } .qz-q legend { font-weight: 700; padding: 0 4px; line-height: 1.4; }
.qz-c { display: flex; gap: 10px; align-items: flex-start; padding: 7px 8px; border-radius: 8px; cursor: pointer; } .qz-c:hover { background: var(--bg); } .qz-c input { margin-top: 3px; accent-color: var(--accent); }
.qz-q.ok { border-color: color-mix(in srgb, var(--good) 60%, var(--line)); } .qz-q.miss { border-color: color-mix(in srgb, var(--bad) 60%, var(--line)); } .qz-why { margin: 2px 4px 0; font-size: 13px; color: var(--muted); }
.qz-foot { display: flex; gap: 12px; align-items: center; } .qz-out { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding: 14px; border-radius: 12px; background: var(--bg); } .qz-out > div { display: grid; flex: 1; min-width: 200px; } .qz-out.pass b { font-size: 18px; } .qz-out span { color: var(--muted); }
.mrow { display: grid; gap: 10px; } .mrow-p { display: grid; grid-template-columns: 110px 1fr auto; gap: 10px; align-items: center; text-decoration: none; color: var(--text); padding: 4px; border-radius: 10px; } .mrow-p:hover { background: var(--bg); } .mrow-m { display: flex; gap: 6px; }
.mpill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; padding: 2px 8px 2px 3px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; color: var(--text); } .mpill .medal { filter: none; opacity: 1; }
.tagrow { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 14px; } .tagrow .tag { font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--muted); cursor: pointer; } .tagrow .tag.on { background: var(--grad); color: var(--ink); border-color: transparent; }
.gtags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; } .gtag { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
.gend { height: 1px; } .gread { margin-top: 18px; } .gread.ok { color: var(--good); }
.deskonly { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; } .deskonly > div { flex: 1; } .deskonly .note { margin: 2px 0 0; } .deskonly > .ic { color: var(--accent2); flex: none; }
@media (max-width: 600px) { .deskonly { flex-wrap: wrap; } .mrow-p { grid-template-columns: 1fr; } }
/* phone shell 1.0: bottom dock, side panel, chat under the players */
.pdock { display: none; }
body.phone { --dockH: calc(58px + env(safe-area-inset-bottom, 0px)); padding-bottom: var(--dockH); }
body.phone .mainnav { display: none; } body.phone .top { gap: 8px; } body.phone .top .brand { margin-right: auto; }
body.phone .pdock { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; height: var(--dockH); padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); background: color-mix(in srgb, var(--bg2) 94%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--line); }
.pd-b { display: grid; justify-items: center; align-content: center; gap: 3px; background: none; border: 0; color: var(--muted); font: 700 11px var(--body); text-decoration: none; padding: 6px 0; cursor: pointer; } .pd-b .ic { color: var(--text); } .pd-b.on, .pd-b.open { color: var(--accent2); } .pd-b.on .ic, .pd-b.open .ic { color: var(--accent2); }
.pscrim { position: fixed; inset: 0 0 var(--dockH, 0) 0; z-index: 55; background: rgba(0,0,0,.55); opacity: 0; transition: opacity .18s; } .pscrim.in { opacity: 1; }
.pdrawer { position: fixed; z-index: 58; top: env(safe-area-inset-top, 0px); right: 0; bottom: var(--dockH, 0); width: min(88vw, 420px); display: flex; flex-direction: column; background: var(--bg2); border-left: 1px solid var(--line); border-radius: 18px 0 0 0; box-shadow: -20px 0 40px -10px rgba(0,0,0,.8); transform: translateX(104%); transition: transform .18s ease-out; }
.pdrawer.in { transform: none; } @media (prefers-reduced-motion: reduce) { .pdrawer, .pscrim { transition: none; } }
.pd-head { display: flex; align-items: center; padding: 14px 14px 8px 16px; } .pd-head b { font-family: var(--display); font-style: var(--slant); text-transform: var(--caps); font-size: 17px; } .pd-x { margin-left: auto; background: none; border: 0; color: var(--muted); padding: 6px; cursor: pointer; }
.pd-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 14px 18px; overscroll-behavior: contain; }
.pmenu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .pmenu a { display: grid; justify-items: center; gap: 6px; padding: 14px 4px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--text); text-decoration: none; font-size: 12px; font-weight: 700; text-align: center; } .pmenu a.on { border-color: var(--accent); color: var(--accent2); } .pmenu a.pmenu-fine { grid-column: 1 / -1; border: 0; background: none; color: var(--muted); padding: 8px; }
.pd-wall .tools { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 0; border: 0; background: none; position: static; flex-wrap: nowrap; } .pd-wall .tools > * { margin: 0; } .pd-wall .tools .addbox { display: flex; } .pd-wall .tools .addbox input { flex: 1; min-width: 0; }
.pd-wall .tools > .btn[aria-pressed] { display: none; } .pd-wall .tools .seg { align-self: flex-start; } .pd-wall .tools .master { display: flex; align-items: center; gap: 10px; } .pd-wall .tools .master input { flex: 1; }
.pd-wall .tools > .pop { align-self: stretch; } .pd-wall .tools > .pop > .btn { width: 100%; justify-content: flex-start; } .pd-wall .tools > .btn > span, .pd-wall .tools > .pop > .btn > span { display: inline !important; }
.pd-tiles { display: grid; gap: 8px; margin-bottom: 12px; } .pd-tile { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--text); font: 700 14px var(--body); cursor: pointer; text-align: left; } .pd-tile.on { border-color: var(--accent); box-shadow: 0 0 16px -8px var(--accent); } .pd-tile .ic:last-child:not(:first-child) { margin-left: auto; color: var(--muted); }
.pd-tools .sidetop { max-height: none !important; overflow: visible; display: grid; gap: 12px; } .pd-tools .sidetop[hidden] { display: none; }
body.phone.wallmode #foot { display: none; }
body.phone.wallmode { height: 100dvh; overflow: hidden; }
body.phone.wallmode main#view { height: calc(100dvh - var(--topH) - var(--dockH)); overflow: hidden; display: flex; flex-direction: column; }
.phonewall .wallwrap { flex: 1; min-height: 0; display: flex !important; flex-direction: column; }
.phonewall .rail { flex: none; } .phonewall .stagecol { flex: 0 1 auto; max-height: 58%; overflow-y: auto; transition: max-height .2s; } .phonewall.bigchat .stagecol { max-height: 30%; }
.phonewall .side { flex: 1 1 auto; min-height: 0; border-left: 0; border-top: 1px solid var(--line); display: flex !important; } .phonewall .side .vsplit, .phonewall .side .hsplit { display: none; } .phonewall .side .dock { flex: 1; min-height: 0; }
.phonewall .stage { flex: none; grid-auto-rows: auto; } .phonewall .pane { aspect-ratio: 16 / 9; grid-row: auto !important; } .phonewall .extrabox { display: none; }
.phonewall .side .dock { display: grid; grid-template-rows: auto auto minmax(80px, 1fr) auto; }
/* timed quiz 1.2 */
.noselect, .noselect * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.quiz { gap: 14px; } .qz-head { display: flex; align-items: baseline; gap: 12px; } .qz-head h3 { margin: 0; flex: 1; } .qz-step { font-size: 13px; color: var(--muted); } .qz-secs { font: 800 20px var(--body); font-variant-numeric: tabular-nums; min-width: 40px; text-align: right; }
.qz-clock { height: 6px; border-radius: 3px; background: var(--bg); overflow: hidden; } .qz-clock i { display: block; height: 100%; width: 100%; background: var(--grad); transition: width .2s linear; } .quiz.hurry .qz-clock i { background: var(--bad); } .quiz.hurry .qz-secs { color: var(--bad); }
.qz-stage { display: grid; gap: 12px; } .qz-text { font-size: 17px; font-weight: 700; line-height: 1.45; margin: 4px 0; }
.qz-choices { display: grid; gap: 8px; } .qz-c { display: block; width: 100%; text-align: left; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font: 600 14.5px/1.4 var(--body); cursor: pointer; } .qz-c:hover { border-color: var(--accent2); } .qz-c.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--bg)); box-shadow: 0 0 14px -6px var(--accent); }
.qz-review { display: grid; gap: 8px; padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); } .qz-review ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .qz-review li { display: grid; grid-template-columns: 16px 1fr auto; gap: 8px; align-items: center; } .qz-review a { color: var(--text); } .qz-review .ic { color: var(--accent2); }
.qz-whys { list-style: disc !important; padding-left: 18px !important; } .qz-whys li { display: list-item !important; color: var(--muted); font-size: 13px; }
/* invite someone who is not here yet */
.invite { display: grid; gap: 16px; max-width: 760px; } .inv-top { display: flex; gap: 14px; align-items: center; } .inv-top h2 { margin: 0; font-family: var(--display); font-style: var(--slant); text-transform: var(--caps); font-size: clamp(24px, 4vw, 36px); } .inv-top .note { margin: 2px 0 0; }
.inv-pic { width: 64px; height: 64px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--bg); color: var(--muted); overflow: hidden; box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--accent); } .inv-pic img { width: 100%; height: 100%; object-fit: cover; }
.inv-acts { display: grid; gap: 10px; } .inv-opt { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); } .inv-opt > div { flex: 1; min-width: 200px; } .inv-opt b { display: block; } .inv-opt small { color: var(--muted); } .inv-opt > .ic { color: var(--accent2); } .inv-opt.gift { border: 1px dashed #8C6A1E; } .inv-opt.gift > .ic { color: #F3B23A; }
.phonewall .side { overflow: hidden; } .phonewall .side .dock { flex: 1 1 0 !important; min-height: 0 !important; height: auto; grid-template-rows: auto auto minmax(60px, 1fr) auto; }
/* favorite emotes */
.favbar { display: flex; gap: 6px; margin-bottom: 6px; } .fav { width: 38px; height: 34px; display: grid; place-items: center; border-radius: 9px; border: 1px solid var(--line); background: var(--bg); color: var(--muted); cursor: pointer; padding: 2px; font: 700 10px var(--body); overflow: hidden; } .fav img { max-width: 30px; max-height: 28px; } .fav:active { transform: scale(.92); } .fav.empty { border-style: dashed; opacity: .7; }
.pick-star { margin: 6px 0; } .pick-star.on { color: var(--ink); background: var(--grad); border-color: transparent; } .pick.fav-on { box-shadow: inset 0 0 0 2px var(--accent2); border-radius: 8px; }
.phonewall .dock-foot .foot-head { display: none; } .phonewall .dock-foot { padding: 6px 8px; }
.pane-body > .player.scaled, .pane-body > iframe.scaled { right: auto; bottom: auto; transform-origin: 0 0; }
.phonewall .pane { aspect-ratio: auto; } .phonewall .pane-body { aspect-ratio: 16 / 9; }
/* Care Packages */
.pk-filter { margin: 4px 0 16px; }
.pk-empty { display: flex; align-items: center; gap: 18px; padding: 26px; border-style: dashed; }
.pk-empty > svg { color: var(--accent); flex: none; } .pk-empty > div { flex: 1; } .pk-empty b { font-size: 18px; }
.pk-kinds { margin-top: 18px; } .pk-kind { display: grid; gap: 6px; } .pk-kind svg { color: var(--accent); } .pk-kind .note { margin: 0; }
.pk { display: grid; gap: 8px; align-content: start; } .pk-prog { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 640px) { .pk-empty { flex-direction: column; align-items: flex-start; } }
/* Grace */
.tierpill.grace { outline: 1px dashed currentColor; outline-offset: 2px; opacity: .92; }
.gracecard { display: flex; align-items: center; gap: 14px; margin-top: 12px; border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.gracecard > svg { color: var(--accent); flex: none; } .gracecard > div { flex: 1; } .gracecard .note { margin: 2px 0 0; }
.toast.soft { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
@media (max-width: 640px) { .gracecard { flex-wrap: wrap; } }
/* Alphie */
.al-face { display: inline-block; flex: none; line-height: 0; } .al-face svg { width: 100%; height: 100%; overflow: visible; }
.al-bod { transform-origin: 60px 104px; animation: al-breathe 3.8s ease-in-out infinite; } .al-eye { transform-origin: 60px 67px; animation: al-blink 6s infinite; }
.al-shd { opacity: .4; transform-origin: 60px 119px; animation: al-shd 3.8s ease-in-out infinite; } .al-pup { animation: al-glance 11s ease-in-out infinite; }
@keyframes al-breathe { 0%, 100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-1.6px) scale(1.012, .99); } }
@keyframes al-shd { 0%, 100% { transform: scaleX(1); opacity: .4; } 50% { transform: scaleX(.93); opacity: .3; } }
@keyframes al-blink { 0%, 93%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }
@keyframes al-glance { 0%, 38%, 100% { transform: translateX(0); } 42%, 54% { transform: translateX(-2.4px); } 58%, 72% { transform: translateX(2px); } 76% { transform: translateX(0); } }
.think .al-bod { animation: al-hop .6s ease-in-out infinite; } @keyframes al-hop { 50% { transform: translateY(-4px) scale(.99, 1.02); } }
.al-fab { position: fixed; right: 20px; bottom: 20px; z-index: 70; width: 62px; height: 62px; border-radius: 20px; display: grid; place-items: center; cursor: pointer; background: radial-gradient(circle at 50% 70%, color-mix(in srgb, var(--accent) 18%, var(--bg2)), var(--bg2)); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); box-shadow: 0 8px 22px rgba(0,0,0,.45); transition: transform .15s; }
.al-fab:hover { transform: translateY(-2px); } .al-fab[aria-expanded="true"] { border-color: var(--accent); } .al-fab[hidden] { display: none; }
.al-bub { position: fixed; right: 20px; bottom: 92px; z-index: 71; width: 350px; max-height: min(560px, calc(100vh - 120px)); overflow-y: auto; background: var(--card); border: 1px solid var(--line); border-radius: 16px 16px 6px 16px; box-shadow: 0 18px 40px rgba(0,0,0,.55); transform-origin: 100% 100%; animation: al-pop .22s ease-out; }
@keyframes al-pop { from { opacity: 0; transform: scale(.95) translateY(6px); } }
.al-head { display: flex; align-items: center; gap: 9px; padding: 12px 12px 6px 14px; } .al-head b { font-size: 14px; } .al-head small { display: block; color: var(--muted); font-size: 11.5px; line-height: 1.3; }
.al-x { margin-left: auto; align-self: flex-start; border: 0; background: none; color: var(--muted); cursor: pointer; padding: 4px; border-radius: 8px; } .al-x:hover { color: var(--text); background: var(--bg2); }
.al-ask { display: flex; align-items: center; gap: 8px; margin: 6px 12px 8px; padding: 0 11px; border: 1px solid var(--line); background: var(--bg2); border-radius: 12px; color: var(--muted); }
.al-ask:focus-within { border-color: var(--accent); } .al-ask input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--text); font: inherit; font-size: 14px; padding: 10px 0; }
.al-say { margin: 0 14px 6px; font-size: 13px; }
.al-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 14px 14px; } .al-chip { border: 1px solid var(--line); background: none; color: var(--muted); border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 12px; cursor: pointer; } .al-chip:hover { color: var(--text); border-color: var(--accent); }
.al-grp { padding: 2px 10px; } .al-grp h4 { margin: 8px 4px 3px; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.al-hit { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; color: inherit; text-decoration: none; } .al-hit:hover, .al-hit:focus-visible { background: var(--bg2); outline: 0; }
.al-hit > svg { margin-left: auto; color: var(--muted); flex: none; } .al-ic { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent2); }
.al-tx { min-width: 0; } .al-tx b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .al-tx small { color: var(--muted); font-size: 11.5px; }
.al-dig { display: flex; align-items: center; gap: 8px; justify-content: flex-end; padding: 8px 14px 12px; border-top: 1px solid var(--line); margin-top: 6px; } .al-dig small { color: var(--muted); }
.al-grp:last-child { padding-bottom: 10px; }
body.phone .al-fab { right: 12px; bottom: calc(var(--dockH) + 12px + env(safe-area-inset-bottom, 0px)); width: 54px; height: 54px; border-radius: 17px; }
body.phone .al-bub { left: 8px; right: 8px; width: auto; bottom: calc(var(--dockH) + 8px + env(safe-area-inset-bottom, 0px)); border-radius: 18px; max-height: calc(100vh - var(--dockH) - 90px); }
@media (prefers-reduced-motion: reduce) { .al-face *, .al-bub { animation: none !important; } }
/* Mention effects. .fx-in plays once when the line arrives, the rest state stays quiet. */
.feed .ln.hit { isolation: isolate; }
.feed .ln.fx-mark, .feed .ln.fx-glow, .feed .ln.fx-shimmer { background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.feed .ln.fx-glow { box-shadow: inset 3px 0 0 var(--accent), inset 0 0 18px -6px color-mix(in srgb, var(--accent) 70%, transparent); } .feed .ln.fx-glow.fx-in { animation: fx-breathe 1.6s ease-out; }
@keyframes fx-breathe { 0% { box-shadow: inset 3px 0 0 var(--accent), inset 0 0 0 0 transparent; } 35% { box-shadow: inset 3px 0 0 var(--accent), inset 0 0 26px -2px color-mix(in srgb, var(--accent) 85%, transparent); } }
.feed .ln.fx-halo { background: color-mix(in srgb, var(--accent) 8%, transparent); } .feed .ln.fx-halo .at.me { padding: 0 5px; border-radius: 6px; background: color-mix(in srgb, var(--accent) 30%, transparent); box-shadow: 0 0 10px -2px var(--accent); }
.feed .ln.fx-halo.fx-in .at.me { animation: fx-halo 1.2s ease-out; } @keyframes fx-halo { 0% { box-shadow: 0 0 0 0 var(--accent); } 40% { box-shadow: 0 0 16px 2px var(--accent); } }
.feed .ln.fx-shimmer { overflow: hidden; } .feed .ln.fx-shimmer.fx-in::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, rgba(255,220,190,.22) 50%, transparent 70%); transform: translateX(-100%); animation: fx-sweep 1.6s .15s ease-in-out 2; }
@keyframes fx-sweep { to { transform: translateX(100%); } }
.feed .ln.fx-trail { background: color-mix(in srgb, var(--accent) 10%, transparent); } .feed .ln.fx-trail::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--accent), #FFD08A, var(--accent)); background-size: 100% 300%; animation: fx-flow 3s linear infinite; }
@keyframes fx-flow { to { background-position: 0 300%; } }
.feed .ln.fx-aurora { background: linear-gradient(100deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, #B46CFF 12%, transparent), color-mix(in srgb, #3FB8C9 10%, transparent), color-mix(in srgb, var(--accent) 16%, transparent)); background-size: 300% 100%; animation: fx-drift 9s ease-in-out infinite alternate; box-shadow: inset 3px 0 0 var(--accent); }
.feed .ln.fx-custom { background: var(--au); background-size: 300% 100%; animation: fx-drift var(--aus, 9s) ease-in-out infinite alternate; box-shadow: inset 3px 0 0 var(--accent); } .feed.au-still .ln.fx-custom { animation: none; background-size: 100% 100%; }
@keyframes fx-drift { to { background-position: 100% 0; } }
.feed .ln.fx-ember { background: color-mix(in srgb, var(--accent) 12%, transparent); margin: 2px 6px; border-radius: 8px; }
.feed .ln.fx-ember::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 8px; padding: 1px; background: conic-gradient(from var(--fxa, 0deg), var(--accent), #FFD08A, transparent 40%, var(--accent2), transparent 75%, var(--accent)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: fx-spin 6s linear infinite; }
@property --fxa { syntax: '<angle>'; inherits: false; initial-value: 0deg; } @keyframes fx-spin { to { --fxa: 360deg; } }
.feed .ln .spk { position: absolute; bottom: 4px; width: 3px; height: 3px; border-radius: 50%; background: #FFC06A; box-shadow: 0 0 6px #FF8A00; opacity: 0; animation: fx-rise 1.6s ease-out forwards; pointer-events: none; }
@keyframes fx-rise { 0% { opacity: 0; transform: translateY(0) scale(.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-22px) translateX(var(--dx, 0)) scale(1); } }
.feed .ln.fx-underline { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%); }
.feed .ln.fx-underline::after { content: ''; position: absolute; left: 10px; right: 30%; bottom: 1px; height: 1px; background: linear-gradient(90deg, var(--accent), transparent); transform-origin: 0 50%; } .feed .ln.fx-underline.fx-in::after { animation: fx-grow .6s ease-out; } @keyframes fx-grow { from { transform: scaleX(0); } }
.mfx .seg button.locked { opacity: .45; } .mfx-cust { display: grid; gap: 8px; margin-top: 8px; } .mfx-prev { height: 16px; border-radius: 6px; border: 1px solid var(--line); }
.mfx-cols { display: flex; gap: 6px; align-items: center; } .mfx-cols input[type=color] { width: 34px; height: 26px; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: none; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .feed .ln.hit, .feed .ln.hit::before, .feed .ln.hit::after, .feed .ln.hit * { animation: none !important; } }

/* Membership chests and the stats stripe */
.tiercol .stats { margin: 10px -16px 0; padding: 12px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; background: linear-gradient(135deg, color-mix(in srgb, var(--tone) 16%, transparent), color-mix(in srgb, var(--tone) 4%, transparent)); border-top: 1px solid color-mix(in srgb, var(--tone) 35%, var(--line)); border-bottom: 1px solid color-mix(in srgb, var(--tone) 35%, var(--line)); }
.tstat { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 11px; background: rgba(0,0,0,.28); border: 1px solid color-mix(in srgb, var(--tone) 22%, transparent); min-width: 0; }
.tstat > svg, .tstat > .shape-ic { flex: none; color: var(--tone); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--tone) 60%, transparent)); } .shape-ic { display: inline-flex; }
.tstat span { min-width: 0; } .tstat b { display: block; font: 900 20px/1 var(--display); color: var(--text); } .tstat b em { font-style: normal; color: var(--tone); font-size: 14px; margin-left: 1px; }
.tstat small { display: block; font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-top: 3px; line-height: 1.2; }
.tstat.big { grid-column: 1 / -1; background: linear-gradient(90deg, color-mix(in srgb, var(--tone) 22%, rgba(0,0,0,.3)), rgba(0,0,0,.28)); } .tstat.big b { font-size: 26px; } .tstat.off { opacity: .45; }
[data-light] .tstat { background: rgba(255,255,255,.55); }
.chestwrap { margin: 10px -16px 6px; margin-top: auto; padding: 6px 0 4px; } .chesthead { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 16px 0; font-size: 10.5px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .chesthead b { color: var(--tone); font-size: 15px; letter-spacing: 0; }
.chestbox .chest { display: block; width: 100%; height: auto; max-width: 300px; margin: 0 auto; overflow: visible; }
.chest .orb { animation: orbfloat var(--d, 6s) ease-in-out infinite; animation-delay: var(--dl, 0s); transform-box: fill-box; transform-origin: center; } @keyframes orbfloat { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(var(--dx, 1px), var(--dy, -4px)); } }
.chest .beam { animation: chestbeam 4s ease-in-out infinite; } @keyframes chestbeam { 0%, 100% { opacity: .55; } 50% { opacity: .85; } }
.chest .mark { animation: chestmark 3.2s ease-in-out infinite; } @keyframes chestmark { 0%, 100% { opacity: .8; } 50% { opacity: 1; } }
.chest .seam { stroke-dasharray: 14 180; animation: chestseam 5s linear infinite; } @keyframes chestseam { to { stroke-dashoffset: -194; } }
.tiercol .chestwrap + .btn, .tiercol .chestwrap + .tier-in { margin-top: 4px; }
.tiercol .tier-in:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .chest .orb, .chest .beam, .chest .mark, .chest .seam { animation: none !important; } }
.giftcol .stats { grid-template-columns: 1fr; } .tstat small { white-space: normal; overflow: visible; text-overflow: clip; }
/* Unmute on the pane: shows while a loaded pane is muted */
.pane > .unmute { position: absolute; left: 10px; bottom: 10px; z-index: 6; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--pc, var(--accent)) 60%, transparent); background: rgba(10,8,7,.78); backdrop-filter: blur(6px); color: #fff; font: 800 13px var(--body, system-ui); cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.45); transition: transform .15s, background .15s; }
.pane > .unmute:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--pc, var(--accent)) 35%, rgba(10,8,7,.85)); } .pane > .unmute[hidden] { display: none; }
.pane > .unmute svg { color: var(--pc, var(--accent)); }
.pane:not(.focus) > .unmute { padding: 6px 11px; font-size: 12px; }
body.phone .pane > .unmute { bottom: 8px; left: 8px; }