/* 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; }
/* Velvet: the purple house look. Flat surfaces, square corners, quiet type, one purple. */
[data-theme="velvet"] { --bg: #0E0E10; --bg2: #18181B; --card: #1F1F23; --line: #2F2F35; --text: #EFEFF1; --muted: #ADADB8; --accent: #9147FF; --accent2: #BF94FF; --ink: #FFFFFF; --good: #00F593; --live: #EB0400;
  --grad: linear-gradient(135deg, #772CE8 0%, #9147FF 100%); --display: "Segoe UI", Roobert, Inter, system-ui, sans-serif; --slant: normal; --caps: none; --track: 0; --r: 4px;
  --p0: #9147FF; --p1: #00F593; --p2: #BF94FF; --p3: #FF75E6; --p4: #FAB4FF; --p5: #5C16C5; }
[data-theme="velvet"] .wordmark { font-weight: 800; font-size: 19px; text-transform: none; } [data-theme="velvet"] .mainnav a.on { background: transparent; color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; } [data-theme="velvet"] .wordmark i { background: none; color: var(--accent); -webkit-text-fill-color: var(--accent); }
/* Afterdark: black, white and one hot orange. The second word of the wordmark sits in an orange box. */
[data-theme="afterdark"] { --bg: #000000; --bg2: #0F0F0F; --card: #1B1B1B; --line: #2C2C2C; --text: #FFFFFF; --muted: #9A9A9A; --accent: #FF9000; --accent2: #FFB340; --ink: #000000; --good: #6FE36F; --live: #FF2A2A;
  --grad: linear-gradient(135deg, #FF9000 0%, #FF9000 100%); --display: Arial, "Helvetica Neue", Helvetica, sans-serif; --slant: normal; --caps: none; --track: -.02em; --r: 6px;
  --p0: #FF9000; --p1: #FFFFFF; --p2: #FFB340; --p3: #C7C7C7; --p4: #FFD98A; --p5: #8A8A8A; }
[data-theme="afterdark"] .wordmark { text-transform: none; display: inline-flex; align-items: center; gap: 3px; } [data-theme="afterdark"] .wordmark b { color: #fff; }
[data-theme="afterdark"] .wordmark i { background: var(--accent); color: #000; -webkit-text-fill-color: #000; border-radius: 5px; padding: 2px 6px 1px; line-height: 1; -webkit-background-clip: border-box; background-clip: border-box; }
[data-theme="afterdark"] .wordmark s { color: #fff; margin-left: 4px; } [data-theme="afterdark"] .betamark { color: #000; }

* { 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; }
.brand { position: relative; }
.betamark { position: absolute; top: -9px; right: -14px; padding: 1px 5px; border-radius: 4px; font: 800 8.5px/1.3 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); background: var(--accent2); box-shadow: 0 0 6px color-mix(in srgb, var(--accent2) 85%, transparent), 0 0 14px color-mix(in srgb, var(--accent) 55%, transparent); animation: betaglow 2.4s ease-in-out infinite; pointer-events: none; }
@keyframes betaglow { 0%, 100% { box-shadow: 0 0 5px color-mix(in srgb, var(--accent2) 70%, transparent), 0 0 10px color-mix(in srgb, var(--accent) 35%, transparent); } 50% { box-shadow: 0 0 9px var(--accent2), 0 0 20px color-mix(in srgb, var(--accent) 80%, transparent); } }
@media (prefers-reduced-motion: reduce) { .betamark { animation: none; } }
.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; white-space: nowrap; 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-master { display: flex; align-items: center; gap: 6px; padding: 4px 0 8px; border-bottom: 1px solid var(--line); margin-bottom: 6px; } .mix-master .k { font: 900 10.5px var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .mix-master input[type=range] { flex: 1; min-width: 60px; accent-color: var(--accent); }
.mix-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 6px 6px 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 { border: 0; background: none; cursor: pointer; padding: 0; display: grid; } .mix-id img, .mix-id .face { width: 28px; height: 28px; border-radius: 50%; box-shadow: 0 0 0 2px var(--pc); }
.mix-who { display: grid; gap: 4px; min-width: 0; } .mix-nm { display: flex; align-items: baseline; gap: 8px; min-width: 0; } .mix-nm 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; } .mix-who input[type=range] { width: 100%; margin: 0; accent-color: var(--accent); height: 18px; }
.mix-acts { display: flex; gap: 3px; } .mix-acts .pb { width: 26px; height: 26px; }
.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); }
.metile { display: flex; align-items: center; gap: 12px; } .meav { width: 56px; height: 56px; border-radius: 50%; } .metile > div { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: 1; } .metile 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), (max-height: 500px) and (hover: none) and (pointer: coarse) {
  .top { gap: 8px; padding: 0 10px; } .wordmark { display: none; } .betamark { right: -12px; top: -6px; } .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), (max-height: 500px) and (hover: none) and (pointer: coarse) { .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), (max-height: 500px) and (hover: none) and (pointer: coarse) { .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; }
.tierpill.pass.look-gold { color: #FBE7A6; border-color: #B8912E; background: linear-gradient(135deg, rgba(243,201,90,.30), rgba(140,106,30,.16)); box-shadow: 0 0 12px -4px #F3C95A; } .tierpill.pass.look-gold .ic { color: #F3C95A; }
.tierpill.pass.look-mint { color: #C9F7E4; border-color: #2E9C74; background: linear-gradient(135deg, rgba(62,207,152,.28), rgba(46,156,116,.14)); box-shadow: 0 0 12px -4px #3ECF98; } .tierpill.pass.look-mint .ic { color: #5FE0B0; }
.tierpill.pass.look-sky { color: #CFEAFF; border-color: #3A7FB8; background: linear-gradient(135deg, rgba(92,176,255,.28), rgba(58,127,184,.14)); box-shadow: 0 0 12px -4px #5CB0FF; } .tierpill.pass.look-sky .ic { color: #7FC2FF; }
.tierpill.pass.look-violet { color: #E6D6FF; border-color: #7A52C9; background: linear-gradient(135deg, rgba(157,110,255,.30), rgba(122,82,201,.14)); box-shadow: 0 0 12px -4px #9D6EFF; } .tierpill.pass.look-violet .ic { color: #B792FF; }
.tierpill.pass.look-ember { color: #FFDCC4; border-color: #C9632A; background: linear-gradient(135deg, rgba(255,128,64,.30), rgba(201,99,42,.14)); box-shadow: 0 0 12px -4px #FF8040; } .tierpill.pass.look-ember .ic { color: #FF9A62; }
[data-light] .tierpill.pass.look-gold { color: #7A5A10; } [data-light] .tierpill.pass.look-mint { color: #11694A; } [data-light] .tierpill.pass.look-sky { color: #0B5A8C; } [data-light] .tierpill.pass.look-violet { color: #55309E; } [data-light] .tierpill.pass.look-ember { color: #943F10; }
.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) and (min-height: 501px), (max-width: 1420px) and (min-width: 901px) and (pointer: fine) { .mainnav a .ic { display: none; } .mainnav a { padding: 8px 8px; } }
@media (max-width: 1300px) and (min-width: 901px) and (min-height: 501px), (max-width: 1300px) and (min-width: 901px) and (pointer: fine) { .mainnav a { font-size: 13px; padding: 7px 7px; gap: 5px; } .dnachip { display: none; } }
@media (max-width: 1100px) and (min-width: 901px) and (min-height: 501px), (max-width: 1100px) and (min-width: 901px) and (pointer: fine) { .wordmark { display: none; } .mainnav a { padding: 7px 5px; } }
@media (max-width: 1000px) and (min-width: 901px) and (min-height: 501px), (max-width: 1000px) and (min-width: 901px) and (pointer: fine) { .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), (max-height: 500px) and (hover: none) and (pointer: coarse) { .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: 0px; --edgeY: 38vh; padding-bottom: env(safe-area-inset-bottom, 0px); }
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.left { right: auto; left: 0; border-left: 0; border-right: 1px solid var(--line); border-radius: 0 18px 0 0; box-shadow: 20px 0 40px -10px rgba(0,0,0,.8); transform: translateX(-104%); }
.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; } .favbar .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; } .favbar .fav img { max-width: 30px; max-height: 28px; } .favbar .fav:active { transform: scale(.92); } .favbar .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; }
/* PDF import on the calendar */
.pdfimport { display: grid; gap: 10px; margin: 0 0 14px; border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.pdf-h { display: flex; align-items: center; gap: 10px; } .pdf-h svg { color: var(--accent); } .pdf-h .mini { margin-left: auto; }
.pdf-list { display: grid; gap: 6px; } .pdf-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--line); cursor: pointer; } .pdf-row.nodate { opacity: .55; cursor: default; }
.pdfimport .btn.primary { justify-self: start; }
/* Notification center */
.bellchip, .whisperchip { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg2); color: var(--text); cursor: pointer; } .bellchip:hover, .bellchip[aria-expanded="true"], .whisperchip:hover, .whisperchip[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
.bellchip .navdot { position: absolute; top: -4px; right: -4px; }
.notes-panel { position: fixed; top: calc(var(--topH, 58px) + 6px); right: 14px; z-index: 90; width: 380px; max-width: calc(100vw - 16px); max-height: min(620px, calc(100vh - var(--topH, 58px) - 24px)); overflow-y: auto; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 40px rgba(0,0,0,.55); padding: 10px 0 8px; animation: al-pop .18s ease-out; }
.np-h { display: flex; align-items: center; gap: 8px; padding: 2px 12px 8px 16px; border-bottom: 1px solid var(--line); } .np-h b { font-family: var(--display); font-style: var(--slant); text-transform: var(--caps); letter-spacing: var(--track); font-size: 16px; margin-right: auto; }
.np-f { display: grid; gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--bg2); } .np-t { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; } .np-t svg { color: var(--accent); } .np-t.sub { padding-left: 24px; color: var(--muted); } .np-t.locked { opacity: .7; }
.np-days { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); padding-left: 24px; }
.np-list { display: grid; padding: 4px 6px; } .np-i { display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border-radius: 10px; color: inherit; text-decoration: none; position: relative; } .np-i:hover { background: var(--bg2); }
.np-i.new::before { content: ''; position: absolute; left: 2px; top: 17px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.np-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); }
.np-i.ty-live .np-ic { color: #FF5A5A; background: rgba(255,90,90,.12); } .np-i.ty-pack .np-ic { color: #5CC8FF; background: rgba(92,200,255,.12); } .np-i.ty-resub .np-ic { color: #F3D98B; background: rgba(243,217,139,.12); }
.np-tx { min-width: 0; flex: 1; } .np-tx b { display: block; font-size: 13px; font-weight: 700; } .np-i:not(.new) .np-tx b { font-weight: 500; color: var(--muted); } .np-tx small { display: block; color: var(--muted); font-size: 12px; } .np-i time { font-size: 11px; color: var(--muted); flex: none; }
.np-empty { display: grid; justify-items: center; gap: 6px; padding: 24px 20px 14px; color: var(--muted); text-align: center; font-size: 13px; } .np-empty svg { color: var(--accent); }
.notes-panel > .mini { margin: 4px 16px 0; }
body.phone .notes-panel { left: 8px; right: 8px; width: auto; }
@media (max-width: 520px) { .bellchip { width: 32px; height: 32px; } .topright { gap: 4px; } .mechip > span:not(.tierpill) { display: none; } }
/* TwitchCon San Diego 2026 */
.tc-strip { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 9px 14px; border-radius: 14px; text-decoration: none; color: var(--text); border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%); box-shadow: 0 0 22px -10px var(--accent), inset 0 0 18px -12px var(--accent); }
.tc-strip svg { color: var(--accent); filter: drop-shadow(0 0 6px var(--accent)); } .tc-strip b { text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 70%, transparent); } .tc-strip span { color: var(--muted); font-size: 13px; } .tc-strip-x { margin-left: auto; border: 0; background: none; color: var(--muted); cursor: pointer; padding: 2px; } .tc-strip:hover { border-color: var(--accent); }
.tc-title { display: flex; flex-wrap: wrap; gap: 0 .3em; align-items: baseline; } .tc-neon { color: #fff; text-shadow: 0 0 6px var(--accent), 0 0 18px var(--accent), 0 0 40px color-mix(in srgb, var(--accent) 60%, transparent); animation: tcflick 6s ease-in-out infinite; }
@keyframes tcflick { 0%, 100% { opacity: 1; } 92% { opacity: 1; } 93% { opacity: .75; } 94% { opacity: 1; } 96% { opacity: .85; } }
.tc-tabs { display: none; margin: 0 0 12px; }
.tc-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); gap: 18px; align-items: start; }
.tc-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; } .tc-search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--bg2); border-radius: 12px; padding: 0 12px; flex: 1 1 220px; color: var(--muted); } .tc-search input { background: none; border: 0; outline: 0; color: var(--text); font: inherit; padding: 9px 0; width: 100%; }
.tc-search:focus-within { border-color: var(--accent); box-shadow: 0 0 14px -6px var(--accent); }
.tcpage .sel { border: 1px solid var(--line); background: var(--bg2); color: var(--text); border-radius: 12px; padding: 8px 10px; font: 700 13px var(--body, inherit); max-width: 200px; }
.tcpage .toggle { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; color: var(--muted); cursor: pointer; user-select: none; } .tcpage .toggle i { width: 34px; height: 19px; border-radius: 999px; background: #2c2722; position: relative; transition: .2s; } .tcpage .toggle i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 13px; height: 13px; border-radius: 50%; background: #8c7f75; transition: .2s; }
.tcpage .toggle.on { color: var(--text); } .tcpage .toggle.on i { background: var(--grad); box-shadow: 0 0 12px -2px var(--accent); } .tcpage .toggle.on i::after { left: 18px; background: #fff; }
.tc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .tc-chips .chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; font: 700 12px var(--body, inherit); color: var(--muted); background: none; cursor: pointer; }
.tc-chips .chip.on { color: var(--text); border-color: var(--pcol, var(--accent)); box-shadow: 0 0 12px -4px var(--pcol, var(--accent)); } .pdot { width: 8px; height: 8px; border-radius: 50%; background: var(--pcol); box-shadow: 0 0 6px var(--pcol); }
.tc-count { color: var(--muted); font-size: 12.5px; margin: 0 0 4px; } .tc-day { font-family: var(--display); font-style: var(--slant); text-transform: var(--caps); letter-spacing: var(--track); font-size: 15px; margin: 18px 0 8px; color: var(--accent2); text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 50%, transparent); }
.tc-items { display: grid; gap: 8px; }
.tc-item { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 12px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); box-shadow: inset 3px 0 0 var(--pcol); transition: border-color .15s, box-shadow .15s; }
.tc-item:hover { border-color: color-mix(in srgb, var(--pcol) 60%, var(--line)); }
.tc-item.on { border-color: var(--pcol); box-shadow: inset 3px 0 0 var(--pcol), 0 0 22px -10px var(--pcol); }
.tc-item.warn { border-color: rgba(255,90,90,.55); box-shadow: inset 3px 0 0 #FF5A5A, 0 0 18px -10px #FF5A5A; } .tc-item.flash { animation: tcflash 1.4s ease-out; } @keyframes tcflash { 0% { box-shadow: 0 0 0 2px var(--accent), 0 0 34px var(--accent); } }
.tc-time b { display: block; font-size: 15px; } .tc-time span { color: var(--muted); font-size: 12px; }
.tc-t { display: block; font-size: 15px; line-height: 1.3; } .tc-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; font-size: 12.5px; } .tc-prog { color: var(--pcol); font-weight: 800; } .tc-loc { color: var(--muted); }
.tc-clash { margin: 6px 0 0; color: #FF8A8A; font-size: 12.5px; font-weight: 700; } .tc-clash svg { vertical-align: -2px; }
.tc-speakers { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .tc-sp { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 2px; border-radius: 999px; background: var(--bg2); border: 1px solid var(--line); font-size: 12px; color: var(--text); text-decoration: none; } .tc-sp img { width: 20px; height: 20px; border-radius: 50%; } a.tc-sp:hover { border-color: var(--accent); }
.tc-desc { margin: 8px 0 0; color: var(--muted); font-size: 13px; white-space: pre-line; } .tc-more { border: 0; background: none; color: var(--accent2); font: 700 12px var(--body, inherit); padding: 4px 0 0; cursor: pointer; }
.tc-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; } .tc-tags span { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
.tc-add { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 60%, var(--line)); background: none; color: var(--text); font: 800 13px var(--body, inherit); cursor: pointer; white-space: nowrap; } .tc-add:hover { box-shadow: 0 0 14px -4px var(--accent); }
.tc-add.on { background: var(--grad); color: var(--ink); border-color: transparent; box-shadow: 0 0 16px -4px var(--accent); }
.tc-plan { position: sticky; top: calc(var(--topH, 58px) + 12px); max-height: calc(100vh - var(--topH, 58px) - 24px); overflow: auto; padding: 14px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); background: var(--card); box-shadow: 0 0 34px -18px var(--accent); }
.tc-plan-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .tc-plan-h h2 { margin: 0; font-family: var(--display); font-style: var(--slant); text-transform: var(--caps); font-size: 20px; } .tc-sum { color: var(--muted); font-size: 12.5px; }
.tc-acts { display: flex; gap: 8px; margin: 10px 0; } .tc-days { margin-bottom: 12px; }
.tc-empty { display: grid; justify-items: center; gap: 6px; text-align: center; color: var(--muted); padding: 30px 10px; font-size: 13px; } .tc-empty svg { color: var(--accent); filter: drop-shadow(0 0 8px var(--accent)); }
.tc-tl { position: relative; margin-left: 44px; } .tc-hr { position: absolute; left: -44px; right: 0; border-top: 1px dashed var(--line); } .tc-hr span { position: absolute; left: 0; top: -8px; font-size: 11px; color: var(--muted); background: var(--card); padding-right: 4px; }
.tc-track { position: absolute; inset: 0; }
.tc-block { position: absolute; overflow: hidden; text-align: left; padding: 5px 8px; border-radius: 9px; border: 1px solid var(--pcol); background: linear-gradient(135deg, color-mix(in srgb, var(--pcol) 30%, #0c0a09), color-mix(in srgb, var(--pcol) 10%, #0c0a09)); color: var(--text); cursor: pointer; box-shadow: 0 0 14px -6px var(--pcol); font: inherit; }
.tc-block b { display: block; font-size: 12px; line-height: 1.2; } .tc-block span { display: block; font-size: 10.5px; color: color-mix(in srgb, var(--text) 70%, transparent); } .tc-block:hover { z-index: 3; box-shadow: 0 0 20px -2px var(--pcol); }
.tc-block.clash { border-color: #FF5A5A; background: repeating-linear-gradient(135deg, rgba(255,90,90,.18) 0 6px, rgba(255,90,90,.06) 6px 12px), color-mix(in srgb, var(--pcol) 16%, #0c0a09); box-shadow: 0 0 16px -2px #FF5A5A; animation: tcclash 2.4s ease-in-out infinite; }
.tc-block em { position: absolute; right: 5px; bottom: 4px; font-style: normal; font-size: 9.5px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: #FF3B3B; border-radius: 5px; padding: 1px 5px; box-shadow: 0 0 8px #FF3B3B; }
@keyframes tcclash { 0%, 100% { box-shadow: 0 0 10px -4px #FF5A5A; } 50% { box-shadow: 0 0 20px 0 #FF5A5A; } }
#tc-print { display: none; }
@media (max-width: 980px) { .tc-cols { grid-template-columns: 1fr; } .tc-tabs { display: inline-flex; } .tc-cols[data-tab="list"] .tc-plan, .tc-cols[data-tab="plan"] .tc-list { display: none; } .tc-plan { position: static; max-height: none; } }
@media (max-width: 560px) { .tc-item { grid-template-columns: 58px minmax(0, 1fr); } .tc-add { grid-column: 1 / -1; justify-self: start; } }
@media (prefers-reduced-motion: reduce) { .tc-neon, .tc-block.clash, .tc-item.flash { animation: none; } }
@media print {
  body.printing > *:not(#tc-print) { display: none !important; } body.printing { background: #fff !important; color: #000 !important; }
  body.printing #tc-print { display: block; font: 12pt/1.4 Arial, sans-serif; color: #000; } #tc-print h1 { font-size: 20pt; margin: 0 0 4pt; } #tc-print > p { margin: 0 0 12pt; color: #444; }
  #tc-print h2 { font-size: 14pt; margin: 16pt 0 6pt; border-bottom: 2px solid #000; padding-bottom: 3pt; } #tc-print table { width: 100%; border-collapse: collapse; } #tc-print th, #tc-print td { text-align: left; padding: 5pt 6pt; border-bottom: 1px solid #ccc; vertical-align: top; }
  #tc-print th { font-size: 9pt; text-transform: uppercase; color: #555; } #tc-print td:first-child { white-space: nowrap; width: 1%; } #tc-print tr.clash td { background: #ffe5e5; } #tc-print tr.clash td:last-child { color: #c00; font-weight: bold; }
}
.adtag { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #F3D98B; border: 1px solid #5E4A1B; border-radius: 6px; padding: 1px 6px; box-shadow: 0 0 10px -4px #F3D98B; }
/* Following: filters, previews, views */
.fbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .fsearch { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--bg2); border-radius: 12px; padding: 0 12px; min-width: 220px; color: var(--muted); } .fsearch input { background: none; border: 0; outline: 0; color: var(--text); font: inherit; padding: 9px 0; width: 100%; } .fsearch:focus-within { border-color: var(--accent); }
.fbar .seg button .n { font-size: 11px; opacity: .75; } .fsel { border: 1px solid var(--line); background: var(--bg2); color: var(--text); border-radius: 12px; padding: 8px 10px; font: inherit; font-size: 13px; font-weight: 700; }
.ftoggle { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; color: var(--muted); cursor: pointer; user-select: none; } .ftoggle[hidden] { display: none; } .ftoggle i { width: 34px; height: 19px; border-radius: 999px; background: #2c2722; position: relative; transition: .2s; } .ftoggle i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 13px; height: 13px; border-radius: 50%; background: #8c7f75; transition: .2s; }
.ftoggle.on { color: var(--text); } .ftoggle.on i { background: var(--grad); box-shadow: 0 0 12px -2px var(--accent); } .ftoggle.on i::after { left: 18px; background: #fff; }
.fviews { margin-left: auto; } .fchips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0 16px; } .fchip { border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; font-size: 12px; font-weight: 700; color: var(--muted); background: none; cursor: pointer; } .fchip.on { color: var(--accent2); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); } .fchips .note { margin-left: 6px; }
.fthumb { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, #0c0a09), #0c0a09); } .fthumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fthumb .fbadge { position: absolute; left: 8px; top: 8px; font-size: 10.5px; font-weight: 900; letter-spacing: .08em; background: var(--live); color: #fff; padding: 2px 6px; border-radius: 5px; } .fthumb .fup { position: absolute; right: 8px; top: 8px; font-size: 11px; font-weight: 700; background: rgba(0,0,0,.65); color: #fff; padding: 2px 7px; border-radius: 6px; } .fthumb .fnv { position: absolute; left: 8px; bottom: 8px; font-size: 11.5px; font-weight: 700; background: rgba(0,0,0,.65); color: #fff; padding: 2px 8px; border-radius: 6px; }
.fthumb.sm .fbadge { left: 4px; top: 4px; font-size: 9px; padding: 1px 4px; }
.fcard.withthumb .fthumb { grid-column: 1 / -1; }
.flist { display: grid; gap: 6px; } .frow2 { display: grid; grid-template-columns: 110px 40px minmax(0, 1.3fr) minmax(0, 1fr) 70px 80px auto; gap: 14px; align-items: center; padding: 8px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; transition: border-color .12s; } .frow2:hover { border-color: var(--accent); }
.frow2.nothumb { grid-template-columns: 40px minmax(0, 1.3fr) minmax(0, 1fr) 70px 80px auto; } .frow2.nothumb .fmini { display: none; } .frow2 .fname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .frow2:not(.live) .avatar { opacity: .55; filter: grayscale(.7); } .frow2 .fcard-a { grid-column: auto; }
.fwall { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; } .ftile { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--card); transition: .15s; } .ftile:hover { border-color: var(--accent); box-shadow: 0 0 30px -12px var(--accent); transform: translateY(-2px); }
.ftile .fthumb { border-radius: 0; } .ftile-top { position: relative; } .ftile-go { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.35); opacity: 0; transition: .15s; } .ftile:hover .ftile-go, .ftile:focus-within .ftile-go { opacity: 1; }
.ftile-foot { display: flex; gap: 10px; align-items: center; padding: 10px 12px; } .ftile-foot > div { min-width: 0; flex: 1; } .ftile-foot b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ftile-foot .meta { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.foff { margin-top: 18px; } .foff h3 { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; } .foff-strip { display: flex; gap: 8px; flex-wrap: wrap; } .foff-i { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg2); color: var(--muted); font-size: 13px; } .foff-i .avatar { opacity: .6; filter: grayscale(.7); }
@media (max-width: 760px) { .frow2, .frow2.nothumb { grid-template-columns: 40px minmax(0, 1fr) auto; } .frow2 .fmini, .frow2 .game, .frow2 .meta { display: none; } .fviews { margin-left: 0; } .fsearch { min-width: 0; flex: 1 1 100%; } .fwall { grid-template-columns: 1fr; } }
@media (hover: none) { .ftile-go { opacity: 1; background: transparent; align-items: end; justify-items: end; padding: 8px; } }

.btile.common { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; } .btile.common::after { content: 'Shared'; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.bcompare { display: grid; gap: 8px; max-width: 880px; } .bcmp-row { display: grid; grid-template-columns: 28px minmax(80px, 150px) 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.bcmp-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; } .bcmp-bars { display: grid; gap: 4px; min-width: 0; }
.bcmp-bar { display: grid; grid-template-columns: 96px 1fr 44px; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); } .bcmp-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bcmp-bar i { display: block; height: 7px; border-radius: 999px; background: var(--muted); min-width: 4px; } .bcmp-bar.me i { background: var(--accent); } .bcmp-bar em { font-style: normal; font-weight: 700; color: var(--text); text-align: right; }
.bcmp-lead { color: var(--muted); font-size: 11.5px; white-space: nowrap; } .sectionh .count { margin-left: 8px; font-size: 12px; color: var(--muted); font-weight: 700; }
.poolchip.live { border-color: #E5484D; } .poolchip.live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #E5484D; margin-left: 4px; }
.lockcard.slim { position: static; width: auto; text-align: left; align-items: flex-start; margin-top: 12px; gap: 6px; padding: 14px; border: 1px dashed var(--line); border-radius: var(--r); background: var(--bg2); transform: none; }
@media (max-width: 640px) { .bcmp-row { grid-template-columns: 28px 1fr; } .bcmp-bars, .bcmp-lead { grid-column: 1 / -1; } }

/* your pages: tabs plus the tour button */
.ptabrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; } .ptabrow .ptabs { margin-bottom: 0; } .ptabrow .tourbtn { font-size: 13px; padding: 7px 14px; }
.mechip { position: relative; } .mechip.on { box-shadow: 0 0 0 2px var(--accent); } .mechip .navdot { position: absolute; top: -4px; left: 22px; }
/* site tour */
.tour { position: fixed; inset: 0; z-index: 300; pointer-events: auto; }
.tour-hole { position: fixed; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(5,4,3,.72), 0 0 0 2px var(--accent), 0 0 24px 4px color-mix(in srgb, var(--accent) 45%, transparent); transition: all .28s ease; pointer-events: none; }
.tour-card { position: fixed; z-index: 1; display: grid; gap: 6px; padding: 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--accent); box-shadow: 0 24px 50px -16px rgba(0,0,0,.9); transition: top .28s ease, left .28s ease; }
.tour-n { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent2); } .tour-t { font-family: var(--display); font-style: var(--slant); text-transform: var(--caps); font-size: 19px; } .tour-p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.tour-a { display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px; } .tour-a .btn { padding: 8px 14px; font-size: 13.5px; }
.tour-offer { position: fixed; z-index: 250; right: 18px; bottom: 18px; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 36px); padding: 12px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--accent); box-shadow: 0 20px 40px -12px rgba(0,0,0,.85); animation: tourin .3s ease-out; }
.tour-offer > .ic { color: var(--accent); flex: none; } .tour-offer div { display: grid; } .tour-offer div span { color: var(--muted); font-size: 13px; } .tour-offer .btn { padding: 8px 12px; font-size: 13px; white-space: nowrap; }
body.phone .tour-offer { bottom: calc(var(--dockH, 64px) + 12px); left: 12px; right: 12px; flex-wrap: wrap; }
@keyframes tourin { from { opacity: 0; transform: translateY(10px); } }

/* Blood Twin card on the wall, and the twin actions on a profile */
.twincard { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid #D9B45A; background: linear-gradient(140deg, rgba(217, 180, 90, .16), transparent 70%), var(--card); animation: twinin .22s ease-out; }
.twincard.out { opacity: 0; transform: translateY(-6px); transition: opacity .18s, transform .18s; }
.twincard .tc-meta { display: grid; min-width: 0; }
.twincard .tc-meta b { font-size: 14px; }
.twincard .tc-meta small { color: var(--muted); font-size: 12.5px; }
.twincard .btn { margin-left: auto; }
.twincard .btn + .btn { margin-left: 6px; }
.twinacts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
@keyframes twinin { from { opacity: 0; transform: translateY(-8px); } }

/* Wall: empty panes stay out of Focus and Stack, widgets can be rearranged, Live now can sit on either side */
.pane.hidepane { display: none; }
.boxgrip { cursor: grab; color: var(--muted); opacity: .45; padding: 0; width: 14px; height: 18px; display: grid; place-items: center; border: 0; background: none; border-radius: 4px; } .boxgrip svg { width: 14px; height: 14px; }
.boxgrip:active { cursor: grabbing; }
.boxgrip:hover { color: var(--text); opacity: 1; }
body.phone .boxgrip, .pdrawer .boxgrip { display: none; }
.sidetop.sorting .sidebox { outline: 1px dashed var(--line); outline-offset: -2px; }
.sidebox.over { outline: 2px solid var(--accent); outline-offset: -2px; }
.wallwrap.railright { grid-template-columns: minmax(0, 1fr) var(--railW) var(--sideW); }
.wallwrap.railright.norail { grid-template-columns: minmax(0, 1fr) 0 var(--sideW); }
.wallwrap.railright.noside { grid-template-columns: minmax(0, 1fr) var(--railW) 0; }
.wallwrap.railright.norail.noside { grid-template-columns: minmax(0, 1fr) 0 0; }
.wallwrap.railright .stagecol { grid-column: 1; grid-row: 1; }
.wallwrap.railright .rail { grid-column: 2; grid-row: 1; border-right: 0; border-left: 1px solid var(--line); }
.wallwrap.railright .rail .vsplit.r { left: -3px; right: auto; }
.rail-h .railmove { margin-left: 0; }
.rail[data-view=icons] .rail-h { gap: 2px; }
/* The chat composer folds away. Closed is the default. */
.foot-head { display: flex; align-items: center; gap: 8px; width: 100%; background: transparent; border: 0; border-top: 1px solid var(--line); color: var(--muted); padding: 8px 10px; cursor: pointer; font: inherit; }
.foot-head:hover { color: var(--text); }
.foot-head.on { color: var(--text); }
.foot-head b { font-family: var(--display); font-style: var(--slant); text-transform: var(--caps); font-size: 12.5px; }
.foot-head .ic:last-child { margin-left: auto; }

/* Guide cards: the top row wraps, long titles break, the summary stops at three lines */
.gcard { min-width: 0; overflow: hidden; }
.gcard-top { flex-wrap: wrap; min-width: 0; }
.gcard b { overflow-wrap: anywhere; line-height: 1.25; }
.gcard p { overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gcard .gtags { flex-wrap: wrap; }

/* Guide tiles carry their membership level, and a star keeps one */
.gcard { position: relative; border-left: 3px solid var(--gedge, var(--line)); }
.gcard.k1 { --gedge: #7A431C; background: linear-gradient(120deg, rgba(255, 178, 122, .07), transparent 55%), var(--card); }
.gcard.k2 { --gedge: #1F5A78; background: linear-gradient(120deg, rgba(127, 216, 255, .07), transparent 55%), var(--card); }
.gcard.k3 { --gedge: #8C6A1E; background: linear-gradient(120deg, rgba(243, 217, 139, .10), transparent 55%), var(--card); }
.gcard-top { padding-right: 26px; }
.gfav { position: absolute; top: 7px; right: 7px; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; z-index: 2; }
.gfav:hover { color: #F3D98B; border-color: var(--line); background: var(--bg2); }
.gfav.on { color: #F3D98B; }
.gfav.on .ic { fill: currentColor; }
.gcard.saved { border-color: rgba(243, 217, 139, .35); }
.favchip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--card); color: var(--muted); border-radius: 999px; padding: 6px 12px; font-weight: 800; font-size: 12.5px; cursor: pointer; }
.favchip:hover { color: var(--text); }
.favchip.on { border-color: #8C6A1E; color: #F3D98B; }
.favchip.on .ic { fill: currentColor; }
.guide .gcard-top .favchip { margin-left: auto; }
[data-light] .gcard.k1 { background: linear-gradient(120deg, rgba(165, 72, 10, .08), transparent 55%), var(--card); }
[data-light] .gcard.k2 { background: linear-gradient(120deg, rgba(11, 106, 150, .08), transparent 55%), var(--card); }
[data-light] .gcard.k3 { background: linear-gradient(120deg, rgba(122, 90, 16, .10), transparent 55%), var(--card); }
.ask.slim { display: flex; align-items: center; gap: 10px; padding: 8px 2px 0; text-align: left; }
.ask.slim p { margin: 0; flex: 1; font-size: 12.5px; }

/* Your link: alurk.tv/<name> */
.linkchip { width: fit-content; max-width: 100%; align-self: start; justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--chip, rgba(255,255,255,.04)); color: var(--muted); font-size: 13px; text-decoration: none; cursor: pointer; }
.linkchip:hover { color: var(--accent); border-color: var(--accent); }
.linkchip .ic { color: var(--accent); flex: none; }
.linkcard { display: grid; gap: 10px; }
.linkcard-t { display: flex; align-items: center; gap: 8px; }
.linkbig { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--text); font: inherit; font-size: 17px; text-align: left; cursor: pointer; overflow: hidden; }
.linkbig:hover { border-color: var(--accent); }
.linkbig b { font-weight: 800; color: var(--accent); overflow: hidden; text-overflow: ellipsis; }
.linkpre { color: var(--muted); }
.linkdlg { position: fixed; z-index: 61; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(460px, calc(100vw - 32px)); display: grid; gap: 10px; }
.linkdlg h2 { font-size: 20px; margin: 0; }
.linkrow { display: flex; align-items: center; gap: 2px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.03); }
.linkrow:focus-within { border-color: var(--accent); }
.linkinp { flex: 1; min-width: 0; padding: 12px 0; border: 0; background: none; color: var(--text); font: inherit; font-size: 17px; font-weight: 700; outline: none; }
.linksay { min-height: 18px; margin: 0; font-size: 13px; color: var(--muted); }
.linksay.good { color: var(--good, #7CFF3A); } .linksay.bad { color: var(--bad, #FF6A5E); }
.linkacts { display: flex; justify-content: flex-end; gap: 8px; }
.link-offer { position: fixed; z-index: 250; right: 18px; bottom: 18px; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 36px); padding: 12px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--accent); box-shadow: 0 20px 40px -12px rgba(0,0,0,.85); animation: tourin .3s ease-out; }
.link-offer > .ic { color: var(--accent); flex: none; } .link-offer div { display: grid; } .link-offer div span { color: var(--muted); font-size: 13px; } .link-offer .btn { padding: 8px 12px; font-size: 13px; white-space: nowrap; }
body.phone .link-offer { bottom: calc(var(--dockH, 64px) + 12px); left: 12px; right: 12px; flex-wrap: wrap; }
/* connected tools: the wire card. Light runs the wire while the link is live, the whole card turns green once the tool answers. */
.wc { position: relative; overflow: hidden; margin-bottom: 14px; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); background: linear-gradient(180deg, rgba(255, 255, 255, .03), transparent 120px), var(--card); transition: border-color .3s, box-shadow .3s; }
.wc::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 3px); opacity: .7; }
.wc > * { position: relative; z-index: 1; }
.wc.on { border-color: rgba(157, 255, 58, .45); box-shadow: 0 0 0 1px rgba(157, 255, 58, .12), 0 12px 40px -24px rgba(157, 255, 58, .7); }
.wc.wait { border-color: rgba(255, 176, 32, .45); }
.wc-th { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; } .wc-th h2 { margin: 0; font-family: var(--display); text-transform: var(--caps); font-size: 17px; }
.wc-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: none; }
.wc.on .wc-dot { background: var(--good); box-shadow: 0 0 10px var(--good); animation: wcbeat 2.2s infinite; } .wc.wait .wc-dot { background: var(--accent2); animation: wcbeat .9s infinite; }
@keyframes wcbeat { 50% { opacity: .4; } }
.wc-pill { margin-left: auto; font-size: 10.5px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: 3px 9px; border: 1px solid var(--line); color: var(--muted); }
.wc.on .wc-pill { color: var(--good); border-color: rgba(157, 255, 58, .5); } .wc.wait .wc-pill { color: var(--accent2); border-color: color-mix(in srgb, var(--accent2) 50%, transparent); }
.wc-link { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 10px 6px 8px; }
.wc-node { display: grid; justify-items: center; gap: 6px; width: 92px; text-align: center; } .wc-node small { font-size: 11.5px; color: var(--muted); }
.wc-box { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; border: 1px solid var(--line); background: var(--bg2); transition: border-color .3s; }
.wc-box svg { width: 26px; height: 26px; stroke: var(--muted); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; }
.wc.on .wc-box { border-color: rgba(157, 255, 58, .5); } .wc.on .wc-box svg { stroke: var(--good); } .wc.wait .wc-box svg { stroke: var(--accent2); }
.wc-wire { position: relative; height: 62px; } .wc-wire svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wc-base { stroke: var(--line); stroke-width: 2; fill: none; } .wc.off .wc-base { stroke-dasharray: 6 7; }
.wc-flow { stroke: var(--accent2); stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-dasharray: 14 320; opacity: 0; filter: drop-shadow(0 0 6px var(--accent2)); }
.wc.on .wc-flow { stroke: var(--good); filter: drop-shadow(0 0 7px var(--good)); opacity: 1; animation: wcrun 2.4s linear infinite; }
.wc.wait .wc-flow { opacity: 1; stroke-dasharray: 8 60; animation: wcrun 1.1s linear infinite; }
@keyframes wcrun { from { stroke-dashoffset: 334; } to { stroke-dashoffset: 0; } }
.wc-form { display: grid; grid-template-columns: 1.4fr .8fr 1.4fr auto; gap: 10px; align-items: end; } .wc-form .fld { margin: 0; } .wc-form .btn { height: 38px; }
.wc-status { font-weight: 700; font-size: 13px; margin: 8px 0 0; color: var(--bad); } .wc-status[hidden] { display: none; }
/* vitals: a meter under each number, grey until the link is live */
.vstrip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.vstat { padding: 10px; border-radius: var(--r); background: var(--bg2); border: 1px solid var(--line); display: grid; gap: 3px; min-width: 0; }
.vstat span { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.vstat b { font-family: var(--display); font-size: 19px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vstat small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vmeter { height: 4px; border-radius: 999px; background: var(--bg); overflow: hidden; } .vmeter[hidden] { visibility: hidden; display: block; } .vmeter i { display: block; height: 100%; width: 0; background: var(--good); transition: width .4s; }
.vstat.warn b { color: var(--accent2); } .vstat.warn .vmeter i { background: var(--accent2); } .vstat.bad b { color: var(--bad); } .vstat.bad .vmeter i { background: var(--bad); }
.vit .vit-spark { padding: 6px; border-radius: var(--r); background: var(--bg2); border: 1px solid var(--line); height: 52px; } .vit.live .vit-spark i { background: linear-gradient(180deg, var(--good), rgba(157, 255, 58, .25)); opacity: 1; } .vit.live .vit-spark i.bad { background: linear-gradient(180deg, var(--bad), rgba(255, 90, 90, .25)); }
.vit:not(.live) .vstrip, .vit:not(.live) .vit-spark { opacity: .45; filter: grayscale(.6); }
@media (max-width: 900px), (max-height: 500px) and (hover: none) and (pointer: coarse) { .wc-form { grid-template-columns: 1fr 1fr; } .vstrip { grid-template-columns: 1fr 1fr; } .wc { clip-path: none; } }
@media (prefers-reduced-motion: reduce) { .wc-flow, .wc-dot { animation: none !important; } .wc.on .wc-flow { stroke-dasharray: none; } }
/* Together: twin streak, hours and marks */
.together { display: grid; gap: 12px; } .tg-top { display: flex; gap: 18px; flex-wrap: wrap; }
.tg-big { display: grid; gap: 2px; } .tg-big b { font-family: var(--display); font-style: var(--slant); font-size: 30px; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .tg-big span { font-size: 12px; color: var(--muted); } .tg-big.dim b { background: none; color: var(--muted); -webkit-text-fill-color: var(--muted); }
.tg-days { display: grid; grid-template-columns: repeat(14, minmax(0, 34px)); gap: 5px; } .tg-day { aspect-ratio: 1; border-radius: 8px; display: grid; place-items: center; font: 900 11px var(--display); background: var(--bg2); border: 1px solid var(--line); color: var(--muted); } .tg-day.on { background: var(--grad); color: var(--ink); border-color: transparent; }
.tg-miles { display: grid; gap: 7px; } .tg-mile { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); } .tg-mile i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); flex: none; } .tg-mile.hit { color: var(--text); } .tg-mile.hit i { background: var(--grad); border-color: transparent; } .tg-mile em { font-style: normal; margin-left: auto; font-size: 12px; color: var(--muted); }
.tg-chips { display: flex; flex-wrap: wrap; gap: 8px; } .tg-chip { display: grid; gap: 2px; text-decoration: none; color: inherit; border: 1px solid var(--line); border-radius: var(--r); padding: 8px 12px; background: var(--card); } .tg-chip b { font-size: 13.5px; } .tg-chip span { font-size: 12px; color: var(--muted); } .tg-chip:hover { border-color: var(--accent); }
@media (max-width: 900px), (max-height: 500px) and (hover: none) and (pointer: coarse) { .tg-days { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
/* the joint Twin badge: a second, dashed ring in twin gold */
.btile.twinbadge { border-color: rgba(243, 201, 90, .45); background: linear-gradient(160deg, rgba(243, 201, 90, .08), transparent 60%), var(--card); }
.abadge.twinring::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px dashed #F3C95A; opacity: .9; animation: twinspin 14s linear infinite; }
@keyframes twinspin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .abadge.twinring::after { animation: none; } }
.twinwith { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; color: #F3C95A; } .btile.twinbadge.ended .abadge.twinring::after { border-color: var(--muted); animation: none; } .btile.twinbadge.ended .twinwith { color: var(--muted); }
/* twin accent picker and the page that wears it */
.twinaccents { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .twinsw { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; background: linear-gradient(135deg, var(--sw), var(--sw2)); cursor: pointer; padding: 0; } .twinsw.on { border-color: var(--text); box-shadow: 0 0 0 2px var(--bg), 0 0 14px var(--sw); } .twinsw:hover { transform: scale(1.08); }
.view.twinworn .phead { box-shadow: inset 0 -2px 0 var(--accent); }
/* gift tile: tier chips and the pass claim */
.giftchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .giftchips .chip { text-decoration: none; }
.passblock { position: relative; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); display: grid; gap: 8px; justify-items: start; }
.passblock.waiting { border-top-color: var(--accent); } .passblock.waiting .passline { color: var(--accent2); font-weight: 700; } .passblock.waiting .passbtn { animation: passbeat 1.6s ease-in-out infinite; }
@keyframes passbeat { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent2) 18%, transparent); } }
.passwon { display: grid; gap: 6px; justify-items: start; padding: 10px 12px; border-radius: var(--r); border: 1px solid var(--accent); background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), var(--bg2); } .passwon-t { margin: 0; font-weight: 700; } .passwon .note { margin: 0; }
.passno { margin: 0; font-size: 13px; color: var(--muted); }
.giftcol { position: relative; overflow: hidden; }
.embers { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; } .embers i { position: absolute; top: -10px; width: var(--sz, 4px); height: var(--sz, 4px); border-radius: 50%; background: var(--accent2); box-shadow: 0 0 8px var(--accent), 0 0 2px #fff; animation: ember linear forwards; opacity: 0; }
@keyframes ember { 0% { opacity: 0; transform: translate(0, 0); } 10% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx, 0), 110vh); } }
@media (prefers-reduced-motion: reduce) { .embers { display: none; } .passblock.waiting .passbtn { animation: none; } }
/* Alpha Admin */
.admincols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); grid-template-areas: 'passes holders' 'passes desk'; gap: 16px; align-items: start; } .admincols > .card:nth-child(1) { grid-area: passes; } .admincols > .card:nth-child(2) { grid-area: holders; } .admincols > .admindesk { grid-area: desk; } .admindesk .sectionh { margin: 0 0 10px; }
.adminpage .pagehead { margin-bottom: 4px; } .adminpage .lede { max-width: 900px; }
.adminpage .padm-f { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .adminpage .padm-f .fld:nth-last-child(-n+2) { grid-column: 1 / -1; }
@media (min-width: 1500px) { .admincols { grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr) minmax(320px, 1fr); grid-template-areas: 'passes holders desk'; } }
.padm { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg2); margin-top: 10px; } .padm-f { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; } .padm-f .fld { margin: 0; } .padm-a { display: flex; justify-content: flex-end; }
.padm-save { display: flex; gap: 8px; margin-top: 12px; } .padm-list { display: grid; gap: 6px; margin-top: 10px; } .padm-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg2); font-size: 13.5px; } .padm-row small { color: var(--muted); }
@media (max-width: 900px), (max-height: 500px) and (hover: none) and (pointer: coarse) { .admincols { grid-template-columns: 1fr; grid-template-areas: 'passes' 'holders' 'desk'; } .padm-row { grid-template-columns: 1fr auto; } }
/* the card behind the portrait in the top bar */
.mechip { cursor: pointer; background: transparent; color: inherit; font: inherit; }
.mecard { position: fixed; z-index: 60; width: 300px; max-width: calc(100vw - 16px); padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); box-shadow: 0 18px 50px -20px rgba(0, 0, 0, .8); display: grid; gap: 12px; }
.mecard-h { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; } .mecard-h img { width: 52px; height: 52px; border-radius: 50%; box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--accent); } .mecard-w { display: grid; gap: 3px; justify-items: start; min-width: 0; } .mecard-w b { font-size: 15px; } .mecard-w small { color: var(--muted); font-size: 12px; }
.mecard-lv { display: grid; gap: 4px; } .mecard-lv b { font-family: var(--display); font-style: var(--slant); font-size: 17px; } .mecard-lv > span { font-size: 12px; color: var(--accent2); font-weight: 800; } .mecard-lv small { color: var(--muted); font-size: 12px; }
.mecard-bar { height: 7px; border-radius: 999px; background: var(--bg); overflow: hidden; } .mecard-bar i { display: block; height: 100%; background: var(--grad); }
.mecard-link { margin: 0; font-size: 12.5px; color: var(--muted); font-family: var(--mono, ui-monospace, monospace); }
.mecard-links { display: grid; gap: 2px; } .mecard-links a { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 10px; text-decoration: none; color: var(--text); font-weight: 600; font-size: 14px; position: relative; } .mecard-links a:hover { background: var(--bg2); color: var(--accent); } .mecard-links .navdot { position: static; margin-left: auto; }
/* Social */
.socialcols { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; align-items: start; } .socialmain, .socialside { display: grid; gap: 10px; align-content: start; }
.socialtop { display: grid; gap: 6px; } .socialrow { display: grid; grid-template-columns: 34px 28px 1fr auto; gap: 8px; align-items: center; text-decoration: none; color: inherit; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg2); font-size: 13.5px; } .socialrow .bn { color: var(--muted); font-weight: 800; } .socialrow small { color: var(--muted); }
@media (max-width: 900px), (max-height: 500px) and (hover: none) and (pointer: coarse) { .socialcols { grid-template-columns: 1fr; } }
/* the engine line in the footer */
.engine { margin-top: 12px !important; } .engine .dc { position: relative; display: inline-block; padding-right: 2px; } .alphamark { margin-left: 5px; font: 700 11px/1 var(--body); font-style: normal; letter-spacing: .04em; color: var(--accent); opacity: .85; }
/* You tabs on a phone: hide the words, keep the icons, so five fit */
@media (max-width: 520px) { .ptabs { max-width: 100%; } .ptabs a { padding: 8px 10px; } .ptabs a span { display: none; } .ptabs a.on span { display: inline; } }
/* the link card: referral code above, profile link below */
.linkh { margin: 0 0 6px; font: 900 11px var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .linksep { border: 0; border-top: 1px dashed var(--line); margin: 12px 0; }
.refblock { display: grid; gap: 8px; } .refacts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .refwarn { margin: 0; } .btn.arm { color: var(--bad); border-color: var(--bad); }
/* Show me around: one small pill per page, bottom left, above the phone dock */
/* Tour this page: a chip in the top bar. Until the page's tour has run once, a ring of accent light passes round it. */
.tourchip { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px 0 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg2); color: var(--muted); font: 700 12.5px var(--body); cursor: pointer; white-space: nowrap; }
.tourchip:hover { color: var(--text); border-color: var(--accent); } .tourchip > .ic { width: 16px; height: 16px; color: var(--accent); }
.tourchip.cue::before { content: ''; position: absolute; inset: -3px; border-radius: inherit; padding: 2px; background: conic-gradient(from var(--cue, 0deg), transparent 0 62%, var(--accent) 82%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .9; animation: cuering 2.8s linear infinite; pointer-events: none; }
@property --cue { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes cuering { to { --cue: 360deg; } }
@media (prefers-reduced-motion: reduce) { .tourchip.cue::before { animation: none; background: none; box-shadow: 0 0 0 1px var(--accent); } }
@media (max-width: 1500px) { .tourchip { width: 38px; padding: 0; justify-content: center; } .tourchip span { display: none; } }
@media (max-width: 720px) { .tourchip { width: 34px; height: 34px; } }
@media (max-width: 520px) { .tourchip { width: 32px; height: 32px; } }
@media print { .tourchip { display: none; } }
/* OBS Calculators: hub, style tiles, the Multi-PC toggle and strip, the answers, Two PC sync */
.hub { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hubcard { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: inherit; text-decoration: none; }
.hubcard:hover { border-color: var(--accent); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, transparent), transparent 55%), var(--card); }
.hubcard .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--bg2); border: 1px solid var(--line); color: var(--accent2); }
.hubcard b { display: block; font-size: 16px; } .hubcard p { margin: 2px 0 0; color: var(--muted); font-size: 13px; } .hubcard .tierpill { position: absolute; top: 12px; right: 12px; }
.k { font: 900 10.5px var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.styles { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 12px 0 14px; } .styles .k { margin-right: 4px; }
.stile { display: grid; grid-template-columns: 54px 1fr; gap: 10px; align-items: center; text-align: left; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--text); padding: 8px 12px 8px 8px; cursor: pointer; min-width: 200px; }
.stile.on { border-color: var(--accent); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%), var(--card); }
.stile .th { width: 54px; height: 38px; border-radius: 6px; background: var(--bg2); border: 1px solid var(--line); position: relative; overflow: hidden; display: block; }
.stile .th i { position: absolute; background: var(--accent2); opacity: .75; border-radius: 2px; }
.stile .th.guided i:nth-child(1) { left: 4px; top: 4px; width: 20px; height: 12px; } .stile .th.guided i:nth-child(2) { left: 28px; top: 4px; width: 20px; height: 12px; } .stile .th.guided i:nth-child(3) { left: 4px; top: 20px; width: 44px; height: 12px; opacity: .4; } .stile .th.guided i:nth-child(4) { display: none; }
.stile .th.slider i:nth-child(1) { left: 4px; top: 8px; width: 44px; height: 4px; opacity: .4; } .stile .th.slider i:nth-child(2) { left: 20px; top: 4px; width: 10px; height: 10px; border-radius: 50%; } .stile .th.slider i:nth-child(3) { left: 4px; top: 20px; width: 12px; height: 12px; } .stile .th.slider i:nth-child(4) { left: 20px; top: 20px; width: 12px; height: 12px; }
.stile .th.ladder i:nth-child(1) { left: 3px; top: 6px; width: 8px; height: 26px; opacity: .35; } .stile .th.ladder i:nth-child(2) { left: 13px; top: 6px; width: 8px; height: 26px; } .stile .th.ladder i:nth-child(3) { left: 23px; top: 6px; width: 8px; height: 26px; opacity: .6; } .stile .th.ladder i:nth-child(4) { left: 33px; top: 6px; width: 8px; height: 26px; opacity: .45; }
.stile-t b { display: block; font-size: 13px; } .stile-t small { color: var(--muted); font-size: 11px; }
.tog { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--text); padding: 8px 12px; cursor: pointer; text-align: left; }
.tog .sw { width: 40px; height: 22px; border-radius: 999px; background: var(--line); position: relative; flex: none; display: block; } .tog .sw i { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); transition: left .15s; }
.tog.on .sw { background: var(--grad); } .tog.on .sw i { left: 21px; background: var(--ink); } .tog-t b { font-size: 13.5px; display: block; } .tog-t small { display: block; color: var(--muted); font-size: 11.5px; }
.pcstrip { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 10px; align-items: center; margin: 0 0 14px; }
.pc { border: 1px solid var(--line); border-radius: 12px; background: var(--bg2); padding: 12px; display: grid; gap: 4px; min-width: 0; } .pc b { font-size: 14px; } .pc small { color: var(--muted); font-size: 12px; } .pc .k { color: var(--accent2); } .pc.mid { border-style: dashed; }
.pcarrow { color: var(--muted); display: grid; justify-items: center; font-size: 11px; gap: 2px; } .pcarrow svg { color: var(--accent2); }
.cguided, .cslider, .cladder, .sync { display: grid; grid-template-columns: 1fr 1.15fr; gap: 14px; align-items: start; }
.cq { display: grid; gap: 10px; } .cq h3 { margin: 6px 0 0; font-size: 14.5px; display: flex; gap: 8px; align-items: center; } .cq h3 .num, .cq .num { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font: 900 11px var(--body); background: var(--grad); color: var(--ink); flex: none; }
.cchips { display: flex; flex-wrap: wrap; gap: 6px; } .cchip { padding: 6px 12px; border-radius: 999px; background: var(--bg2); font-size: 12px; } .cchip small { font-weight: 600; color: var(--muted); margin-left: 2px; } .cchip.on small { color: var(--text); opacity: .8; }
.upbox { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .upbox input { width: 96px; font-weight: 800; font-size: 16px; }
.srow { display: flex; gap: 12px; align-items: center; margin: 6px 0; } .srow input[type=range] { flex: 1; accent-color: var(--accent); } .sval { font-family: var(--display); font-size: 20px; min-width: 90px; text-align: right; }
.smarks { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin: -4px 0 10px; }
.cslider .k, .cladder .k { display: block; margin: 12px 0 6px; } .cslider .k:first-child, .cladder .k:first-child { margin-top: 0; }
.cadv { margin-top: 12px; } .cadv summary { cursor: pointer; color: var(--muted); font-size: 13px; font-weight: 700; } .cadv .fld { margin-top: 8px; }
.canswer .calc-big { margin-bottom: 4px; } .pcline { display: flex; gap: 6px; align-items: flex-start; } .pcline svg { color: var(--accent2); flex: none; margin-top: 2px; }
.mirror { border: 1px solid var(--line); border-radius: 12px; background: #111; overflow: hidden; font-size: 12.5px; margin: 10px 0; }
.mirror .bar { background: #1c1c1e; color: #ddd; font: 800 12px var(--body); padding: 7px 10px; border-bottom: 1px solid #2a2a2c; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .mirror .bar span { color: #8a8a8f; font-weight: 600; }
.mirror .r { display: grid; grid-template-columns: 1.2fr 1fr auto; gap: 8px; padding: 6px 10px; border-bottom: 1px solid #1e1e20; color: #bbb; align-items: center; } .mirror .r b { color: #fff; font-weight: 700; font-family: var(--mono, ui-monospace, monospace); } .mirror .r .hint { color: var(--accent2); font-size: 11px; font-weight: 800; justify-self: end; } .mirror .r.same { opacity: .55; } .mirror .r.same .hint { color: #8a8a8f; }
.cacts { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.rungs { display: grid; gap: 6px; margin: 8px 0 12px; }
.rung { display: grid; grid-template-columns: 110px 1fr; gap: 2px 12px; align-items: baseline; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg2); color: var(--text); cursor: pointer; }
.rung b { font-family: var(--display); font-size: 17px; grid-row: span 2; } .rung span { font-size: 13px; } .rung small { color: var(--muted); font-size: 11.5px; } .rung.best { border-color: var(--accent); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%), var(--bg2); } .rung.far { opacity: .5; } .rungh { margin: 6px 0; font-size: 15px; }
.sres { display: grid; gap: 10px; } .sres .head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; } .sres .head b { font-family: var(--display); font-size: 20px; line-height: 1.1; }
.meas { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .meas input { width: 80px; font-weight: 800; font-size: 16px; }
.tl { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg2); } .tl .ax { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); padding-left: 100px; }
.lane { display: grid; grid-template-columns: 90px 1fr; gap: 10px; align-items: center; font-size: 12.5px; } .lane .n { color: var(--muted); font-weight: 800; } .lane .bar { position: relative; height: 22px; border-radius: 6px; background: rgba(127, 127, 127, .08); }
.lane .bar i { position: absolute; top: 0; bottom: 0; border-radius: 6px; } .lane .bar .path { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 25%, transparent), color-mix(in srgb, var(--accent2) 55%, transparent)); }
.lane .bar .fix { background: repeating-linear-gradient(135deg, rgba(127, 216, 255, .35) 0 4px, rgba(127, 216, 255, .12) 4px 8px); border: 1px dashed #7FD8FF; } .lane .bar .hit { top: -3px; bottom: -3px; width: 3px; border-radius: 2px; background: var(--good); box-shadow: 0 0 8px var(--good); }
.lane .bar span { position: absolute; top: 3px; font-size: 11px; font-weight: 800; white-space: nowrap; color: var(--muted); }
.legend { display: flex; gap: 14px; font-size: 11.5px; color: var(--muted); flex-wrap: wrap; } .legend i { display: inline-block; width: 14px; height: 10px; border-radius: 3px; vertical-align: -1px; margin-right: 4px; } .legend i.path { background: color-mix(in srgb, var(--accent2) 50%, transparent); } .legend i.fix { background: rgba(127, 216, 255, .3); border: 1px dashed #7FD8FF; } .legend i.hit { background: var(--good); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; } .steps { display: grid; gap: 6px; font-size: 13.5px; margin-top: 8px; } .steps > div { display: grid; grid-template-columns: 20px 1fr; gap: 8px; } .steps > div > span:first-child { color: var(--accent2); font-weight: 900; }
@media (max-width: 900px), (max-height: 500px) and (hover: none) and (pointer: coarse) { .hub, .cguided, .cslider, .cladder, .sync, .two { grid-template-columns: 1fr; } .pcstrip { grid-template-columns: 1fr; } .pcarrow svg { transform: rotate(90deg); } .stile { min-width: 0; flex: 1; } .lane .bar span { display: none; } .tl .ax span:nth-child(2), .tl .ax span:nth-child(3) { display: none; } }
/* the invite switch inside the referral block, and the /invite tail on the big link */
.reftog { width: 100%; justify-content: flex-start; margin: 2px 0 6px; } .linksuf { color: var(--accent2); font-weight: 800; }
.livechip.off { opacity: .6; } .livechip.off img { filter: grayscale(1); }
/* claim effects: one layer over the tile, gone in a few seconds */
.fxlayer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; border-radius: inherit; } .padm { position: relative; }
.fxgold i { position: absolute; top: -16px; width: 3px; height: 14px; border-radius: 2px; background: linear-gradient(180deg, #FFF3C4, #D9B45A); animation: fxrain linear forwards; opacity: 0; } @keyframes fxrain { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translateY(110vh); opacity: .2; } }
.fxhowl i { position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--accent2); transform: translate(-50%, -50%); animation: fxring 1.6s ease-out forwards; opacity: 0; } @keyframes fxring { 0% { transform: translate(-50%, -50%) scale(.3); opacity: .9; } 100% { transform: translate(-50%, -50%) scale(14); opacity: 0; } }
.fxpaws i { position: absolute; width: 18px; height: 18px; background: radial-gradient(circle at 50% 65%, var(--accent2) 0 5.5px, transparent 6.5px), radial-gradient(circle at 25% 25%, var(--accent2) 0 2.8px, transparent 3.5px), radial-gradient(circle at 50% 14%, var(--accent2) 0 2.8px, transparent 3.5px), radial-gradient(circle at 75% 25%, var(--accent2) 0 2.8px, transparent 3.5px); opacity: 0; animation: fxpaw 2.4s ease-out forwards; } @keyframes fxpaw { 0% { opacity: 0; } 10% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
.fxaurora i { position: absolute; inset: -40% -20%; background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--accent) 35%, transparent) 45%, rgba(181, 108, 255, .35) 55%, rgba(63, 184, 201, .3) 62%, transparent 75%); filter: blur(14px); animation: fxsweep 2.2s ease-in-out forwards; } @keyframes fxsweep { 0% { transform: translateX(-60%); } 100% { transform: translateX(60%); } }
.fxbolt i { position: absolute; inset: 0; background: #fff; opacity: 0; animation: fxflash 1.2s ease-out forwards; } .fxbolt svg { position: absolute; left: 42%; top: 0; width: 60px; height: 100%; stroke: #FFE9A0; stroke-width: 3; fill: none; filter: drop-shadow(0 0 8px var(--accent2)); animation: fxboltin .9s ease-out forwards; opacity: 0; } @keyframes fxflash { 0% { opacity: .9; } 8% { opacity: 0; } 14% { opacity: .5; } 20% { opacity: 0; } 100% { opacity: 0; } } @keyframes fxboltin { 0% { opacity: 0; } 10% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
.fxsnow i { position: absolute; top: -8px; width: 5px; height: 5px; border-radius: 50%; background: #fff; opacity: .85; animation: fxsnowf linear forwards; } @keyframes fxsnowf { 0% { transform: translate(0, 0); } 100% { transform: translate(var(--dx, 0), 110vh); opacity: 0; } }
.fxconf i { position: absolute; left: 50%; top: 55%; width: 6px; height: 10px; background: var(--c, var(--accent)); animation: fxpop 1.5s ease-out forwards; } @keyframes fxpop { 0% { transform: translate(0, 0) rotate(0); } 100% { transform: translate(var(--dx, 0), var(--dy, 0)) rotate(540deg); opacity: 0; } }
.fxmoon i { position: absolute; left: 50%; bottom: -120px; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #FF6A5A, #B01C1C 65%, #5A0A0A); box-shadow: 0 0 50px 12px rgba(255, 42, 42, .45); transform: translateX(-50%); animation: fxrise 3.2s ease-out forwards; } @keyframes fxrise { 0% { bottom: -120px; opacity: 0; } 30% { opacity: 1; } 75% { bottom: 24px; opacity: 1; } 100% { bottom: 24px; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fxlayer { display: none; } }
/* Memberships on a phone: a chip row picks the level, one card shows, the button stays put */
.tierchips { display: none; gap: 6px; overflow-x: auto; padding: 2px 0 10px; scrollbar-width: none; } .tierchips::-webkit-scrollbar { display: none; }
.tchip { flex: none; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--muted); font: 800 12px var(--body); cursor: pointer; } .tchip.on { color: var(--ink); background: var(--grad); border-color: transparent; }
.tchip.t3.on { background: linear-gradient(135deg, #B8902F, #F7E7B0 50%, #D9B45A); } .tchip.t4.on { background: linear-gradient(135deg, #FF5C8A, #FFB36B); } .tchip.t2.on { background: linear-gradient(135deg, #35C8FF, #7DE3FF); }
@media (max-width: 720px) {
  .tierchips { display: flex; } .tiergrid.tierpick { display: block; } .tiergrid.tierpick .tiercol { display: none; } .tiergrid.tierpick .tiercol.show { display: flex; }
  .tiercol > .btn { position: sticky; bottom: calc(66px + env(safe-area-inset-bottom, 0px)); z-index: 2; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .8); }
  .tiercol .chestwrap svg { max-height: 120px; } .sidebyside, .matrixwrap { display: none; }
  .tiercol h2 { font-size: 24px; } .tiercol .stats { grid-template-columns: repeat(3, 1fr); }
}
/* phone watch: the strip handle, the control row and the chat handle */
.striphandle, .chandle { display: none; }
.phonewall .striphandle { display: grid; place-items: center; height: 18px; flex: none; border: 0; border-bottom: 1px solid var(--line); background: var(--bg2); padding: 0; cursor: pointer; } .phonewall .striphandle i { width: 36px; height: 4px; border-radius: 2px; background: var(--line); display: block; } .phonewall .striphandle.on i { background: var(--accent2); }
.phonewall.stripshut .rail { display: none !important; }
.phonewall .phonectl { display: flex; align-items: center; gap: 6px; padding: 6px 8px; flex: none; background: var(--bg2); border-top: 1px solid var(--line); } .phonewall .phonectl[hidden] { display: none; }
.phonectl .cb { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line); background: var(--card); color: var(--text); display: grid; place-items: center; flex: none; cursor: pointer; padding: 0; } .phonectl .cb.on { background: var(--grad); color: var(--ink); border-color: transparent; } .phonectl .cb svg { width: 16px; height: 16px; }
.phonectl input[type=range] { flex: 1; min-width: 40px; accent-color: var(--accent); margin: 0; }
.phonewall .chandle { display: grid; place-items: center; height: 16px; flex: none; background: var(--bg2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); cursor: ns-resize; touch-action: none; } .phonewall .chandle i { width: 44px; height: 4px; border-radius: 2px; background: var(--muted); display: block; }
.phonewall .pane-bar .pane-acts .pb[aria-label="Solo"] { display: none; }
.pc-who { display: inline-flex; align-items: center; gap: 5px; max-width: 30%; border: 0; background: none; color: var(--text); padding: 0 4px 0 0; cursor: pointer; font: 800 12px var(--body); } .pc-who .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pc); flex: none; } .pc-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdrawer .mix-row { grid-template-columns: 28px minmax(0, 1fr); } .pdrawer .mix-acts { grid-column: 1 / -1; justify-content: flex-end; }
.mixbox { container-type: inline-size; } @container (max-width: 330px) { .mix-row { grid-template-columns: 28px minmax(0, 1fr); } .mix-acts { grid-column: 1 / -1; justify-content: flex-end; } }
.fxflies i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #FFF3A0; box-shadow: 0 0 8px 2px color-mix(in srgb, var(--accent2) 80%, #FFF3A0); opacity: 0; animation: fxfly ease-in-out forwards; } @keyframes fxfly { 0% { opacity: 0; transform: translate(0, 0); } 30% { opacity: 1; } 70% { opacity: .9; } 100% { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)); } }
.fxstars i { position: absolute; width: 90px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #fff); transform: rotate(28deg); opacity: 0; animation: fxstar 1.1s ease-out forwards; } @keyframes fxstar { 0% { opacity: 0; transform: rotate(28deg) translateX(-40px); } 15% { opacity: 1; } 100% { opacity: 0; transform: rotate(28deg) translateX(260px); } }
.fxbeat i { position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 0 var(--accent); animation: fxbeat 2.6s ease-out forwards; } @keyframes fxbeat { 0% { box-shadow: inset 0 0 0 0 var(--accent), 0 0 0 0 var(--accent); } 12% { box-shadow: inset 0 0 40px -10px var(--accent), 0 0 30px 2px var(--accent); } 24% { box-shadow: inset 0 0 0 0 var(--accent), 0 0 0 0 transparent; } 36% { box-shadow: inset 0 0 40px -10px var(--accent), 0 0 30px 2px var(--accent); } 60%, 100% { box-shadow: inset 0 0 0 0 transparent, 0 0 0 0 transparent; } }
.fxpetals i { position: absolute; top: -14px; width: 10px; height: 14px; border-radius: 10px 10px 10px 2px; background: linear-gradient(160deg, #FFB3C7, #FF5C8A); opacity: .95; animation: fxpetal linear forwards; } @keyframes fxpetal { 0% { transform: translate(0, 0) rotate(var(--rz, 0deg)); } 100% { transform: translate(var(--dx, 0), 110vh) rotate(calc(var(--rz, 0deg) + 420deg)); opacity: 0; } }
.fxstatic i { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .12) 0 2px, transparent 2px 4px), repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 3px); mix-blend-mode: screen; animation: fxstatic .12s steps(2) 10; } @keyframes fxstatic { 0% { transform: translate(0, 0); opacity: .9; } 100% { transform: translate(3px, -2px); opacity: .4; } }
/* the pane's own word when Twitch holds a stream behind a click on the player */
.pane > .gatenote { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 6; display: inline-flex; align-items: center; gap: 7px; max-width: calc(100% - 24px); padding: 7px 8px 7px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent2) 55%, transparent); background: rgba(10, 8, 7, .82); color: var(--text); font: 700 12.5px var(--body); white-space: nowrap; pointer-events: auto; } .pane > .gatenote svg { color: var(--accent2); flex: none; } .pane > .gatenote .mini { padding: 2px; } .pane > .gatenote[hidden] { display: none; }
.pane:not(.focus) > .gatenote { font-size: 11px; padding: 5px 6px 5px 10px; }
.favbar .fav.empty.first { width: auto; padding: 2px 10px; gap: 6px; display: inline-flex; font-size: 11.5px; color: var(--muted); }
.dragghost { position: fixed; z-index: 90; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px var(--accent), 0 12px 30px -8px rgba(0, 0, 0, .9); background: var(--card); display: grid; place-items: center; pointer-events: none; font: 800 16px var(--body); } .dragghost img { width: 100%; height: 100%; object-fit: cover; }
.phonewall .rail .rl { touch-action: pan-x; }
/* the two edge handles: a thin accent bar each side, level with the wall's control row, never over a button */
.pedge { display: none; } body.phone .pedge { display: block; position: fixed; top: var(--edgeY, 38vh); transform: translateY(-50%); z-index: 57; width: 5px; height: 56px; padding: 0; border: 0; border-radius: 3px; background: linear-gradient(180deg, var(--accent), var(--accent2)); opacity: .82; box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 55%, transparent); cursor: pointer; touch-action: none; }
body.phone .pedge::before { content: ''; position: absolute; inset: -12px -14px; }      /* the thumb gets more than five pixels */
body.phone .pedge.l { left: 3px; } body.phone .pedge.r { right: 3px; } body.phone .pedge[hidden] { display: none; } body.phone .pedge:active { opacity: 1; }
.pd-back { margin: 0 4px 0 -6px; transform: rotate(180deg); } .pd-head .pd-back + b { margin-right: auto; }
.pd-list { display: grid; gap: 4px; } .pd-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 10px; border-radius: 10px; border: 0; background: none; color: var(--text); font: 700 14px var(--body); text-align: left; text-decoration: none; cursor: pointer; } .pd-row svg { color: var(--muted); flex: none; } .pd-row.on { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent2); } .pd-row.on svg { color: var(--accent2); } .pd-row small { margin-left: auto; color: var(--muted); font-weight: 600; font-size: 12px; }
.pd-h { font: 900 10px var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 12px 10px 2px; }
.pmenu.list { display: grid; grid-template-columns: 1fr; gap: 2px; } .pmenu.list a { display: flex; justify-items: start; align-items: center; gap: 10px; padding: 11px 10px; border: 0; background: none; font-size: 14px; text-align: left; } .pmenu.list a.on { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.pmenu.list a.pmenu-fine { padding: 10px; font-size: 12px; }
/* Mobile split: two players share the height, each with its chat over the picture. Chat focus is the stack above. */
.phonewall.msplit .stagecol { flex: 1 1 auto; max-height: none !important; overflow: hidden; } .phonewall.msplit .stage { height: 100%; display: grid; gap: 2px; }
.phonewall.msplit .pane { aspect-ratio: auto; min-height: 0; display: flex; flex-direction: column; } .phonewall.msplit .pane-body { aspect-ratio: auto; flex: 1; min-height: 0; }
.phonewall.msplit .side, .phonewall.msplit .chandle, .phonewall.msplit .phonectl, .phonewall.msplit .extrabox { display: none !important; }
.phonewall.msplit .pane > .unmute { bottom: auto; top: 36px; }
.ovchat { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; display: grid; gap: 4px; padding: 26px 8px 6px; pointer-events: none; font-size: 12.5px; line-height: 1.3; }
.phonewall[data-ovsize="s"] .ovchat { font-size: 11px; } .phonewall[data-ovsize="l"] .ovchat { font-size: 14.5px; }
.ovchat::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .58) 45%); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); mask: linear-gradient(180deg, transparent, #000 40%); -webkit-mask: linear-gradient(180deg, transparent, #000 40%); z-index: -1; }
.phonewall.ovnoback .ovchat::before { display: none; }
.ov-list { display: grid; gap: 2px; } .ov-list .ln { color: #fff; text-shadow: 0 1px 2px #000, 0 0 6px rgba(0, 0, 0, .9); padding: 0; margin: 0; font-size: inherit; } .ov-list .ln .face, .ov-list .ln .bdg, .ov-list .ln .stamp { display: none; } .ov-list .ln.sys { color: #FFD9C4; }
.phonewall.ovnoback .ov-list .ln { text-shadow: 0 1px 2px #000, 0 0 8px #000, 0 0 2px #000; }
.ov-pill { pointer-events: auto; justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--pc, var(--accent)) 60%, transparent); background: rgba(10, 8, 7, .78); color: var(--text); font: 700 12px var(--body); cursor: pointer; max-width: 100%; } .ov-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ov-pill svg { color: var(--pc, var(--accent)); flex: none; }
.ov-form { pointer-events: auto; display: flex; gap: 6px; } .ov-form input { flex: 1; min-width: 0; height: 34px; background: rgba(10, 8, 7, .85); } .ov-form .btn.sq { width: 34px; height: 34px; padding: 0; }
.pd-layout { margin-bottom: 8px; } .pd-layout .seg { width: 100%; } .pd-layout .seg button { flex: 1; justify-content: center; } .pd-ovopts { display: grid; gap: 8px; margin-top: 10px; } .pd-ovopts .tog { width: 100%; } .pd-szrow { display: flex; align-items: center; gap: 10px; } .pd-szrow .k { font: 900 10.5px var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pd-invite, .pd-catch { display: grid; gap: 10px; } .pd-invite .seg.wrap, .pd-catch .seg.wrap { flex-wrap: wrap; }

/* A blank pane you asked for: the helix glows in the theme's accent above the channel box */
.helixglow { width: 44px; height: 82px; flex: none; overflow: visible; filter: drop-shadow(0 0 6px var(--accent)) drop-shadow(0 0 14px color-mix(in srgb, var(--accent) 55%, transparent)); animation: helixbreathe 3.2s ease-in-out infinite; }
.helixglow path { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; } .helixglow .h2 { opacity: .55; } .helixglow .rung { stroke-width: 2.2; opacity: .7; }
.helixglow .rung.r1 { opacity: .5; } .helixglow .rung.r3 { opacity: .35; }
@keyframes helixbreathe { 0%, 100% { opacity: .78; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .helixglow { animation: none; } }
.pane.empty .emptybody .addbox { width: min(100%, 300px); }

/* The control row keeps its buttons in from the screen edges, clear of the two handles */
body.phone .phonewall .phonectl { padding: 6px 26px; }
body.phone .pane-bar { padding: 0 22px 0 24px; }
body.phone .pane .gatenote { left: 26px; right: 26px; }

/* Chat focus on a phone: the big player left, the rest stacked on the right, no chat over the picture */
.phonewall.mcfocus .stage { gap: 3px; aspect-ratio: 16 / 6.5; height: auto; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) !important; grid-template-rows: repeat(var(--cfrows, 1), minmax(0, 1fr)) !important; grid-auto-rows: minmax(0, 1fr); }
.phonewall.mcfocus .pane.cfbig { grid-column: 1; grid-row: 1 / span var(--cfrows, 1) !important; } .phonewall.mcfocus .pane:not(.cfbig) { grid-column: 2; }
.phonewall.mcfocus .pane { aspect-ratio: auto; min-height: 0; display: flex; flex-direction: column; } .phonewall.mcfocus .pane-body { aspect-ratio: auto; flex: 1; min-height: 0; }
.phonewall.mcfocus .pane .pane-bar { display: none; }
.phonewall.mcfocus .pane.focus { box-shadow: inset 0 0 0 2px var(--accent); }

/* the emote picker: Twitch emotes you can use, subs first, and the chip that asks for them */
.pick-tw { margin-left: 6px; } .pick-tw .ic { color: var(--accent); }
.pick.sub { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }

/* Your setup: Simple or Advanced, stream or watch. DeepClaw setup 1.0 */
.modeseg { flex: none; } .modeseg button { padding: 6px 10px; font-size: 12px; }
.topmode { margin-right: 2px; }
@media (max-width: 900px), (max-height: 500px) and (hover: none) and (pointer: coarse) { .topright .topmode { display: none; } }
.pmenu .pmode { margin: 4px 14px 10px; width: calc(100% - 28px); } .pmenu .pmode button { flex: 1; }
.rolechips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rolechip { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg2); color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.rolechip > .ic { color: var(--accent); width: 20px; height: 20px; } .rolechip span { display: flex; flex-direction: column; gap: 2px; } .rolechip b { font-size: 14px; } .rolechip small { color: var(--muted); font-size: 11.5px; line-height: 1.3; }
.rolechip:hover { border-color: var(--accent); } .rolechip.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 24px -10px var(--accent); }
.setupcard { display: grid; gap: 14px; } .setuprow { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .setuprow b { display: block; font-size: 14px; } .setuprow small { color: var(--muted); font-size: 12px; }
@media (max-width: 520px) { .rolechips { grid-template-columns: 1fr; } .rolechip { flex-direction: row; align-items: center; } }
.role-ask { flex-direction: column; align-items: stretch; gap: 12px; width: min(560px, calc(100vw - 24px)); } .role-h { display: flex; flex-direction: column; gap: 2px; } .role-h b { font-size: 16px; } .role-h span { color: var(--muted); font-size: 13px; }
.role-ask .rolechips { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 520px) { .role-ask .rolechips { grid-template-columns: 1fr; } }
.offnote { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; max-width: 620px; } .offnote > .ic { color: var(--muted); } .offnote > div { flex: 1; min-width: 200px; } .offnote b { font-size: 15px; } .offnote .note { margin: 2px 0 0; }
/* Simple on the wall: the row keeps Add, formation, panes, volume and Chat. The widgets, options, walls and the pane extras wait for Advanced. */
body.simple .tools > .pop, body.simple .tools [aria-label="Controls"], body.simple .tools [aria-label="Balance"], body.simple .tools [aria-label="Bandwidth"], body.simple .tools .surprise { display: none; }
body.simple .pane-acts .pb[aria-label^="Lock"], body.simple .pane-acts .pb[aria-label^="Unlock"], body.simple .pane-acts .pb[aria-label^="Watch with me"] { display: none; }
body.simple .pd-row[data-id="tools"], body.simple .pd-row[data-id="catchup"], body.simple .phonectl .cb[aria-label="More controls"] { display: none; }
body.simple .side .boxgrip { display: none; }
@media (max-width: 1600px) { .mainnav a { padding: 8px 9px; gap: 5px; font-size: 13.5px; } }

/* Phone on its side: the players on the left, the chat on the right, a slimmer top bar. DeepClaw land 1.0 */
body.phone.land { --topH: calc(52px + env(safe-area-inset-top, 0px)); }
body.phone.land main#view:not(.page) { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
body.phone.land main#view.page { padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px)); }
body.phone.land .phonewall .wallwrap { display: grid !important; grid-template-columns: minmax(0, 1fr) min(36vw, 340px); grid-template-rows: auto auto minmax(0, 1fr) auto; }
body.phone.land .phonewall .wallwrap > * { grid-column: 1; min-width: 0; }
body.phone.land .phonewall .rail { grid-row: 1; } body.phone.land .phonewall .striphandle { grid-row: 2; } body.phone.land .phonewall .stagecol { grid-row: 3; } body.phone.land .phonewall .phonectl { grid-row: 4; }
body.phone.land .phonewall .side { grid-column: 2; grid-row: 1 / -1; border-top: 0; border-left: 1px solid var(--line); }
body.phone.land .phonewall .chandle { display: none !important; }
body.phone.land .phonewall .stagecol { max-height: none !important; height: 100%; overflow-y: auto; }
body.phone.land .phonewall:not(.mcfocus) .stage { grid-template-columns: repeat(var(--lc, 1), minmax(0, 1fr)) !important; }
body.phone.land .phonewall[data-n="1"] .stage { height: 100%; } body.phone.land .phonewall[data-n="1"] .pane { height: 100%; aspect-ratio: auto; display: flex; flex-direction: column; } body.phone.land .phonewall[data-n="1"] .pane-body { aspect-ratio: auto; flex: 1; min-height: 0; }
body.phone.land .phonewall.msplit .wallwrap { grid-template-columns: minmax(0, 1fr); }
body.phone.land .phonewall.msplit .stage { grid-template-rows: repeat(var(--lr, 1), minmax(0, 1fr)) !important; }
body.phone.land .phonewall.mcfocus .stage { aspect-ratio: auto; height: 100%; }
body.phone.land .pdrawer { width: min(60vw, 420px); }
body.phone.land .pedge.l { left: max(3px, env(safe-area-inset-left, 0px)); } body.phone.land .pedge.r { right: max(3px, env(safe-area-inset-right, 0px)); }
/* the turn itself */
.turnfx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 95; pointer-events: none; }
body.turning main#view { filter: blur(2px); transform: scale(.985) rotate(-.6deg); transition: filter .2s ease-out, transform .35s ease-out; }
main#view { transition: filter .25s ease-out, transform .35s ease-out; }
@media (prefers-reduced-motion: reduce) { .turnfx { display: none; } body.turning main#view { filter: none; transform: none; } }

/* Themes as strips: color chip, name, level, an eye to hold for a preview. DeepClaw themes 1.1 */
.themes { grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 6px; }
.themes .swatchwrap { display: flex; align-items: stretch; gap: 4px; }
.themes .swatch { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; }
.themes .swatch .sw { width: 46px; height: 24px; flex: none; border-radius: 6px; }
.themes .swatch b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.themes .swatch .tierpill { flex: none; }
.themes .swatch.shut .sw { filter: blur(3px) saturate(1.3); }
.themes .hold { width: 38px; padding: 0; flex: none; border-style: solid; }
.themes .accentrow { grid-column: 1 / -1; }

/* Twin colors: the pair chip flows from yours into theirs, half filled until both have picked */
.twinhead { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .twinwho { display: grid; gap: 2px; font-size: 13px; color: var(--muted); } .twinwho span:first-child { color: var(--text); font-weight: 700; }
.twinpair { width: 44px; height: 24px; flex: none; border-radius: 999px; background: linear-gradient(90deg, var(--ta) 10%, var(--tb) 90%); box-shadow: inset 0 0 0 1px var(--line); display: inline-block; vertical-align: middle; }
.twinpair.half { background: linear-gradient(90deg, var(--ta) 0 50%, transparent 50%), repeating-linear-gradient(45deg, var(--card) 0 4px, var(--bg2) 4px 8px); }
.twinnote { display: flex; align-items: center; gap: 10px; } .twinnote .twinpair { width: 34px; height: 18px; }
.view.twinworn .phead { box-shadow: none; border-bottom: 3px solid transparent; border-image: linear-gradient(90deg, var(--accent), var(--accent2)) 1; }

/* DeepClaw box: a request field and the queue under it */
.dcbox { display: grid; gap: 12px; } .dcform { display: grid; gap: 8px; } .dcform textarea { width: 100%; resize: vertical; min-height: 84px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font: 500 14px/1.45 var(--body); }
.dcform textarea:focus { outline: none; border-color: var(--accent); } .dcacts { display: flex; align-items: center; justify-content: flex-end; gap: 10px; } .dccount { color: var(--muted); font-size: 12px; margin-right: auto; }
.dclist { display: grid; gap: 8px; } .dcrow { display: grid; gap: 6px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); } .dcrow .mini { justify-self: end; }
.dctop { display: flex; align-items: center; gap: 8px; } .dctop small { color: var(--muted); font-size: 12px; } .dctext { margin: 0; white-space: pre-wrap; font-size: 14px; } .dcnote { margin: 0; display: flex; gap: 6px; align-items: flex-start; color: var(--muted); font-size: 13px; }
.dcpill { font: 800 10.5px var(--body); letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.dcrow.s-working .dcpill { color: var(--accent2); border-color: var(--accent2); } .dcrow.s-needs-you .dcpill { color: var(--ink); background: var(--grad); border-color: transparent; } .dcrow.s-done .dcpill { color: var(--good); border-color: var(--good); } .dcrow.s-cancelled { opacity: .55; }

/* The DeepClaw mark on the credit line. DeepClaw mark 1.0 */
.engine .dc { display: inline-flex; align-items: center; gap: 9px; }
.dcmark { width: 150px; height: 44px; overflow: visible; vertical-align: middle; }
.dc-bars { fill: var(--accent); } .dc-rule { fill: var(--text); opacity: .5; }
.dc-name { font: 600 26px "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif; letter-spacing: .32em; text-transform: uppercase; fill: var(--text); }
.dc-iris { fill: #FFB347; } .dc-slit { fill: #140A04; }
.dc-half { transform-box: fill-box; transform-origin: center; }
.dc-eyes { opacity: 0; } .dc-eye { transform-box: fill-box; transform-origin: center; transform: scaleY(0); }
.dc-slash { opacity: 0; fill: none; stroke: #FFE2C8; stroke-width: 2.5; stroke-linecap: square; stroke-dasharray: 100; stroke-dashoffset: 100; }
.dcmark.play .dc-slash { animation: dcslash .9s cubic-bezier(.2, .9, .3, 1) .1s both; }
.dcmark.play .dc-a { animation: dchalfa 4.2s cubic-bezier(.3, .7, .2, 1) .45s both; }
.dcmark.play .dc-b { animation: dchalfb 4.2s cubic-bezier(.3, .7, .2, 1) .45s both; }
.dcmark.play .dc-eyes { animation: dceyes 4.2s ease .45s both; }
.dcmark.play .dc-eye { animation: dcopen 4.2s ease .45s both; }
@keyframes dcslash { 0% { opacity: 1; stroke-dashoffset: 100; } 45% { opacity: 1; stroke-dashoffset: 0; } 70% { opacity: 1; } 100% { opacity: 0; stroke-dashoffset: 0; } }
@keyframes dchalfa { 0% { transform: none; opacity: 1; } 14% { transform: translate(-10px, 14px); opacity: 0; } 86% { transform: translate(-10px, 14px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes dchalfb { 0% { transform: none; opacity: 1; } 14% { transform: translate(10px, -14px); opacity: 0; } 86% { transform: translate(10px, -14px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes dceyes { 0%, 9% { opacity: 0; } 18% { opacity: 1; } 82% { opacity: 1; } 90%, 100% { opacity: 0; } }
@keyframes dcopen { 0%, 11% { transform: scaleY(0); } 20% { transform: scaleY(1); } 52% { transform: scaleY(1); } 55% { transform: scaleY(.06); } 58% { transform: scaleY(1); } 100% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .dcmark.play * { animation: none !important; } }
@media (max-width: 520px) { .engine .dc { flex-wrap: wrap; justify-content: center; } }
/* Wall audio control: the Balance shape sits inside the panel under the master row */
.mixbox .balbox { padding: 6px 0 4px; border: 0; border-top: 1px solid var(--line); margin: 6px 0 8px; }
.mix-sub { display: flex; align-items: center; gap: 8px; margin: 2px 0 6px; } .mix-sub b { font-size: 12.5px; }

/* ---------- Profile looks. DeepClaw looks 1.0 ---------- */
.markpill { font: 800 10.5px var(--body); letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; color: #0B0A09; background: linear-gradient(135deg, #D9B45A, #F7E7B0 60%, #D9B45A); }
.dna-mark { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid #5E4A1B; background: linear-gradient(160deg, rgba(217,180,90,.16), transparent 60%); } .dna-mark b { display: block; font-size: 14px; } .dna-mark small { color: var(--muted); font-size: 12px; display: block; max-width: 520px; }
.tierpill.lv { color: var(--muted); border: 1px solid var(--line); } .tierpill.lv.got { color: var(--accent2); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.themes .themerank { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; margin: 10px 0 0; } .themes .themerank b { font-size: 14px; } .themes .themerank .meta { font-size: 12px; }
/* the header wears the look: palette colors on the card, a pattern, a frame, motion, the Plays strip */
.phead.looked { background: var(--pb); color: var(--pt); border-color: color-mix(in srgb, var(--pa) 30%, transparent); } .phead.looked::before { background: var(--pa); }
.phead.looked .phead-t h1, .phead.looked .meta { color: var(--pt); } .phead.looked .meta { opacity: .75; } .phead.looked .rankpill { background: color-mix(in srgb, var(--pa) 18%, transparent); color: var(--pt); border-color: color-mix(in srgb, var(--pa) 45%, transparent); }
.phead.looked .face { box-shadow: 0 0 0 3px var(--pb), 0 0 0 5px var(--pa); }
.phead::after { content: ''; position: absolute; inset: 0; opacity: .14; pointer-events: none; background-image: var(--pat, none); background-size: var(--patsize, 18px 18px); }
.phead.pat-dots { --pat: radial-gradient(circle, var(--pa, var(--accent)) 1.2px, transparent 1.6px); --patsize: 16px 16px; }
.phead.pat-grid { --pat: linear-gradient(var(--pa, var(--accent)) 1px, transparent 1px), linear-gradient(90deg, var(--pa, var(--accent)) 1px, transparent 1px); --patsize: 22px 22px; }
.phead.pat-diag { --pat: repeating-linear-gradient(135deg, var(--pa, var(--accent)) 0 1px, transparent 1px 12px); --patsize: auto; }
.phead.pat-helix { --pat: repeating-linear-gradient(60deg, transparent 0 14px, var(--pa, var(--accent)) 14px 15px, transparent 15px 30px), repeating-linear-gradient(120deg, transparent 0 14px, var(--pa, var(--accent)) 14px 15px, transparent 15px 30px); --patsize: auto; }
.phead.pat-topo { --pat: repeating-radial-gradient(circle at 85% 120%, var(--pa, var(--accent)) 0 1px, transparent 1px 26px); --patsize: auto; }
.phead.pat-claw { --pat: repeating-linear-gradient(115deg, transparent 0 60px, var(--pa, var(--accent)) 60px 63px, transparent 63px 70px, var(--pa, var(--accent)) 70px 73px, transparent 73px 80px, var(--pa, var(--accent)) 80px 83px, transparent 83px 220px); --patsize: auto; }
.phead.frame-hair { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pa, var(--accent)) 55%, transparent); }
.phead.frame-double { box-shadow: inset 0 0 0 1px var(--pa, var(--accent)), inset 0 0 0 5px var(--pb, var(--card)), inset 0 0 0 6px color-mix(in srgb, var(--pa, var(--accent)) 50%, transparent); }
.phead.frame-cut { clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); border-radius: 0; }
.phead.frame-glow { box-shadow: 0 0 0 1px var(--pa, var(--accent)), 0 0 28px -6px var(--pa, var(--accent)); }
.phead.frame-goldrim { box-shadow: inset 0 0 0 2px #D9B45A, 0 0 22px -8px #D9B45A; }
.lookgames { grid-column: 1 / -1; position: relative; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .lookgames small { font-size: 11px; opacity: .65; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; margin-right: 2px; }
.lookgames span { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--pa, var(--accent)) 16%, transparent); border: 1px solid color-mix(in srgb, var(--pa, var(--accent)) 40%, transparent); }
.lookfx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .lookfx i { position: absolute; left: var(--x); width: 5px; height: 5px; border-radius: 50%; background: var(--pa, var(--accent)); opacity: 0; transform: scale(var(--s)); animation-delay: calc(var(--d) * -1); }
.fx-embers i { bottom: -6px; animation: lk-rise 7s linear infinite; } .fx-fireflies i { top: calc(20% + var(--x) / 3); animation: lk-blink 5s ease-in-out infinite; background: #E8FF9A; }
.fx-snow i { top: -6px; background: #fff; animation: lk-fall 9s linear infinite; } .fx-petals i { top: -8px; width: 7px; height: 5px; border-radius: 60% 40% 60% 40%; background: #FF9AC8; animation: lk-fall 10s ease-in-out infinite; }
.fx-stars i { top: calc(10% + var(--x) / 2); width: 2px; height: 2px; background: #fff; animation: lk-twinkle 3s ease-in-out infinite; }
.fx-aurora i { left: 0; right: 0; top: calc(-20% + var(--x) / 2); height: 40%; width: auto; border-radius: 50%; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--pa, var(--accent)) 35%, transparent), transparent); filter: blur(18px); opacity: .5; animation: lk-drift 12s ease-in-out infinite alternate; transform: none; }
@keyframes lk-rise { 0% { transform: translateY(0) scale(var(--s)); opacity: 0; } 15% { opacity: .8; } 100% { transform: translateY(-160px) scale(var(--s)); opacity: 0; } }
@keyframes lk-fall { 0% { transform: translateY(0) translateX(0) scale(var(--s)); opacity: 0; } 12% { opacity: .85; } 100% { transform: translateY(170px) translateX(18px) scale(var(--s)); opacity: 0; } }
@keyframes lk-blink { 0%, 100% { opacity: 0; } 50% { opacity: .9; } } @keyframes lk-twinkle { 0%, 100% { opacity: .15; } 50% { opacity: 1; } } @keyframes lk-drift { from { transform: translateX(-12%); } to { transform: translateX(12%); } }
@media (prefers-reduced-motion: reduce) { .lookfx { display: none; } }
/* the Account section */
.looksbox { display: grid; gap: 14px; } .lookpv .lookface { display: inline-block; width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.5), transparent 60%), var(--pa, var(--accent)); }
.lookgroup h3 { font: 800 12px var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 6px 0 8px; }
.looksbox .bundle { margin-bottom: 10px; } .looksbox .bh { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .looksbox .bh b { font-size: 13.5px; } .looksbox .bh .lock { color: var(--muted); font-size: 12px; display: inline-flex; align-items: center; gap: 3px; }
.looksbox .pill { font: 800 10.5px var(--body); letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); } .looksbox .pill.on { color: var(--ink); background: var(--accent); border-color: transparent; }
.looksbox .sw { display: flex; gap: 8px; flex-wrap: wrap; } .looksbox .sw .s { width: 92px; padding: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--card); color: var(--muted); font: 700 11px var(--body); text-align: left; cursor: pointer; }
.looksbox .sw .s i { display: block; height: 42px; } .looksbox .sw .s span { display: block; padding: 5px 8px; } .looksbox .sw .s.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); color: var(--text); } .looksbox .bundle.shut .s { opacity: .45; filter: saturate(.5); }
.lookchips { display: flex; gap: 6px; flex-wrap: wrap; } .lchip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--text); font: 700 12.5px var(--body); cursor: pointer; }
.lchip.on { background: var(--grad); color: var(--ink); border-color: transparent; } .lchip.shut { color: var(--muted); }
/* the unlock card */
.unlock { position: fixed; z-index: 260; right: 18px; bottom: 18px; width: min(340px, calc(100vw - 36px)); display: flex; gap: 12px; align-items: center; padding: 12px 34px 14px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--accent); box-shadow: 0 12px 40px -14px rgba(0,0,0,.8), 0 0 30px -12px var(--accent); animation: unlockin .4s cubic-bezier(.2,.9,.3,1) both; }
.unlock.out { animation: unlockout .3s ease both; } body.phone .unlock { bottom: calc(var(--dockH, 0px) + 14px); left: 12px; right: 12px; width: auto; }
.unlock .uic { width: 38px; height: 38px; border-radius: 10px; background: var(--grad); display: grid; place-items: center; color: var(--ink); flex: none; }
.unlock small { display: block; font: 800 10.5px var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--accent2); } .unlock b { display: block; font-size: 14px; } .unlock .l { display: block; font-size: 12px; color: var(--muted); }
.unlock > div { flex: 1; min-width: 0; } .unlock .try { padding: 7px 12px; border-radius: 999px; border: 0; background: var(--accent); color: var(--ink); font: 800 12px var(--body); cursor: pointer; flex: none; }
.unlock .unlock-x { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.unlock small { white-space: nowrap; }
.unlock .bar { position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; background: var(--accent); transform-origin: left; animation: unlockbar 6s linear both; opacity: .8; }
@keyframes unlockin { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes unlockout { to { transform: translateY(10px); opacity: 0; } } @keyframes unlockbar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.phead::after { z-index: 0; } .phead > * { position: relative; z-index: 1; } .phead > .lookfx { z-index: 0; }
/* arranging the chat tabs: the one in hand lifts, a line shows where it lands */
.tab { touch-action: pan-x; position: relative; } .tab.drag { opacity: .5; } .dock-tabs.arranging .tab { cursor: grabbing; }
.tab.before::before, .tab.after::after { content: ''; position: absolute; top: 4px; bottom: 2px; width: 2px; background: var(--accent); border-radius: 1px; } .tab.before::before { left: -2px; } .tab.after::after { right: -2px; }

/* ---------- watch streaks 1.0: the ring, the ember, the list, the channel card ---------- */
.streak { --sz: 22px; position: relative; width: var(--sz); height: var(--sz); flex: none; display: inline-grid; place-items: center; }
.streak svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); } .streak circle { fill: none; stroke-width: 2.2; }
.streak .track { stroke: color-mix(in srgb, var(--text) 14%, transparent); }
.streak .fill { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 56.5; stroke-dashoffset: calc(56.5 * (1 - var(--p, 0))); transition: stroke-dashoffset .6s; filter: drop-shadow(0 0 3px var(--accent)); }
.streak i { font: 900 10.5px/1 var(--display); font-style: normal; color: var(--text); pointer-events: none; }
.streak.none .fill, .streak.off .fill { display: none; } .streak.none i, .streak.off i { color: var(--muted); } .streak.off .track { stroke-dasharray: 2 3; }
.streak.wait .fill { stroke-dasharray: 3 4; stroke-dashoffset: 0; opacity: .55; animation: streakspin 3s linear infinite; }
.streak.done .fill, .streak.idle .fill { stroke: var(--accent2); --p: 1; } .streak.done i { color: var(--accent2); text-shadow: 0 0 8px color-mix(in srgb, var(--accent2) 70%, transparent); } .streak.idle .fill { opacity: .5; filter: none; }
.streak.recover .fill { stroke: var(--good); filter: drop-shadow(0 0 3px var(--good)); }
.streak.risk .fill { stroke: var(--bad); --p: 1; filter: drop-shadow(0 0 3px var(--bad)); animation: streakpulse 1.6s ease-in-out infinite; } .streak.risk i { color: var(--bad); }
.streak.flare::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--accent2); animation: streakflare 1.2s ease-out forwards; pointer-events: none; }
@keyframes streakspin { to { transform: rotate(270deg); } } @keyframes streakpulse { 50% { opacity: .35; } } @keyframes streakflare { from { opacity: 1; transform: scale(.6); } to { opacity: 0; transform: scale(2.2); } }
.streakbtn { border: 0; background: transparent; padding: 0; margin: 0; display: inline-grid; place-items: center; flex: none; cursor: pointer; border-radius: 50%; color: inherit; } .streakbtn:hover .streak .track { stroke: color-mix(in srgb, var(--text) 30%, transparent); }
.pane-id .stitle { flex: 1 100 auto; color: var(--text); opacity: .78; max-width: 40%; } .pane-id b { min-width: 84px; }
@container (max-width: 430px) { .pane-id .stitle { display: none; } }
/* the ember on the picture while the five minutes run, then the count for a moment */
.ember { position: absolute; left: 10px; top: 44px; z-index: 4; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 6px; border-radius: 999px; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); font: 900 12px/1 var(--display); font-style: var(--slant); color: var(--muted); pointer-events: none; transition: opacity .4s; }
.ember .ic { color: var(--accent); } .ember-bar { width: 44px; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--text) 16%, transparent); overflow: hidden; } .ember-bar i { display: block; height: 100%; width: 0; background: var(--accent); box-shadow: 0 0 6px var(--accent); transition: width .6s; }
.ember.wait .ember-bar i { opacity: .5; } .ember.wait b { color: var(--muted); font: 600 10px var(--body); text-transform: uppercase; letter-spacing: .06em; }
.ember.recover .ic { color: var(--good); } .ember.recover .ember-bar i { background: var(--good); box-shadow: 0 0 6px var(--good); }
.ember.done { color: var(--accent2); text-shadow: 0 0 8px rgba(255,138,0,.6); } .ember.done .ic { color: var(--accent2); } .ember.done .ember-bar { display: none; }
.ember b:empty { display: none; }
.pane.streak-flare .pane-bar { animation: streakbar 1.6s ease-out; } @keyframes streakbar { 0% { box-shadow: inset 0 0 0 0 color-mix(in srgb, var(--accent2) 0%, transparent); } 25% { box-shadow: inset 0 -2px 0 0 var(--accent2), 0 0 18px -4px var(--accent2); } 100% { box-shadow: none; } }
.phonewall .ember { top: 40px; left: 8px; }
/* the list */
.streaks { min-width: 0; max-width: 380px; } .pop-panel .streaks { max-width: none; width: auto; } .pop-panel:has(.streaks) { width: min(380px, calc(100vw - 24px)); }
.streak-list { display: grid; }
.sr { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 8px 6px; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--text); text-align: left; width: 100%; cursor: pointer; font: inherit; } .sr:first-child { border-top: 0; } .sr:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.sr-t { min-width: 0; } .sr-t b { font-family: var(--display); font-style: var(--slant); text-transform: var(--caps); letter-spacing: var(--track); font-size: 13px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sr-t small { color: var(--muted); font-size: 11.5px; display: block; }
.sr-n { font: 900 20px/1 var(--display); font-style: var(--slant); color: var(--accent2); text-shadow: 0 0 10px color-mix(in srgb, var(--accent2) 40%, transparent); text-align: right; } .sr-n small { font: 10px var(--body); color: var(--muted); display: block; text-shadow: none; }
.sr.risk .sr-n { color: var(--bad); text-shadow: none; } .sr.risk .sr-t b { color: var(--bad); }
.sr-acts { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 6px 10px 38px; } .btn.sm { padding: 6px 11px; font-size: 12.5px; }
.streak-rule { display: grid; gap: 4px; padding: 10px 6px 4px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.45; margin-top: 4px; min-width: 0; } .streak-rule b { color: var(--text); font-family: var(--display); font-style: var(--slant); text-transform: var(--caps); letter-spacing: var(--track); font-size: 12px; padding-right: .3em; overflow-wrap: anywhere; } .streak-rule span { min-width: 0; overflow-wrap: anywhere; }
.streakcard .pop-head { margin-bottom: 4px; } .streakcard .streaks { max-width: none; }
/* the rail */
.rl-pic { position: relative; } .rl-ring { position: absolute; inset: -3px; --sz: auto; width: auto; height: auto; } .rl-ring i { display: none; } .rail[data-view=icons] .rl.av { position: relative; overflow: visible; } .rail[data-view=icons] .rl.av .rl-ring { inset: -3px; }
.rl-k { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; font: 900 12px var(--display); font-style: var(--slant); color: var(--accent2); flex: none; } .rl-k .ic { color: var(--accent); } .rl-k.risk, .rl-k.risk .ic { color: var(--bad); }
.rl-t { position: relative; } .rl.rl-names .rl-t, .rl.rl-cards .rl-t { padding-right: 34px; } .rl-t .rl-k { position: absolute; right: 0; top: 0; }
/* the channel card */
.chancard { position: absolute; left: 8px; top: 40px; z-index: 12; width: min(320px, calc(100% - 16px)); background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px; box-shadow: 0 18px 40px -12px rgba(0,0,0,.7); cursor: default; }
.cc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .cc-head .face { flex: none; } .cc-who { min-width: 0; flex: 1; } .cc-who b { font-family: var(--display); font-style: var(--slant); text-transform: var(--caps); letter-spacing: var(--track); font-size: 15px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cc-who small { color: var(--muted); font-size: 11.5px; display: block; }
.cc-x { flex: none; }
.cc-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); } .cc-t { min-width: 0; } .cc-t b { display: block; font-size: 13.5px; } .cc-t small { display: block; color: var(--muted); font-size: 11.5px; line-height: 1.35; }
.cc-badge { position: relative; width: 34px; height: 34px; flex: none; display: grid; place-items: center; color: var(--accent); } .cc-badge b { position: absolute; font: 900 11px var(--display); font-style: normal; color: var(--text); }
.cc-h { font-family: var(--display); font-style: var(--slant); text-transform: var(--caps); letter-spacing: var(--track); font-size: 12px; color: var(--muted); margin: 8px 0 6px; }
.cc-buffs { display: grid; gap: 4px; }
.buff { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; background: color-mix(in srgb, var(--text) 4%, transparent); opacity: .5; } .buff.on { opacity: 1; background: color-mix(in srgb, var(--accent) 12%, transparent); }
.buff-i { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--bg2); color: var(--muted); flex: none; } .buff.on .buff-i { color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, var(--bg2)); box-shadow: 0 0 10px -2px var(--accent); }
.buff-t { min-width: 0; } .buff-t b { display: block; font-size: 12.5px; } .buff-t small { display: block; color: var(--muted); font-size: 11px; line-height: 1.3; }
.cc-foot { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

/* a release went live while the page was open */
.updatepill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--card)); color: var(--text); font: 600 12.5px var(--body); cursor: pointer; animation: updatein .4s ease-out; } .updatepill .ic { color: var(--accent); animation: streakspin 4s linear infinite; } @keyframes updatein { from { opacity: 0; transform: translateY(-6px); } }
@media (max-width: 1500px) { .updatepill span { display: none; } }
/* FAQ */
.faq-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; } .faq-nav a { font-size: 12.5px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); text-decoration: none; background: var(--card); } .faq-nav a:hover { color: var(--text); border-color: var(--accent); }
.faq { display: grid; gap: 14px; max-width: 1100px; } .faq-q { display: grid; gap: 18px; padding: 20px 22px; scroll-margin-top: calc(var(--topH) + 12px); } .faq-q.has-scene { grid-template-columns: minmax(0, 1.2fr) minmax(280px, 1fr); align-items: center; }
.faq-q h2 { font-family: var(--display); font-style: var(--slant); text-transform: var(--caps); letter-spacing: var(--track); font-size: 19px; margin: 0 0 8px; line-height: 1.15; } .faq-t p { margin: 0 0 10px; color: var(--text); line-height: 1.55; font-size: 14.5px; } .faq-t p:last-of-type { margin-bottom: 0; }
.faq-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .faq-links .btn { text-decoration: none; }
.faq-scene { width: 100%; animation: none; box-shadow: none; } .faq-scene .lp-clip-top { padding: 8px 12px; } .faq-scene .lp-clip-top b { font-size: 13px; }
@media (max-width: 800px) { .faq-q.has-scene { grid-template-columns: 1fr; } .faq-scene { order: -1; } }
/* the composer: Multi-Sending lights the edge, a muted pane marks its chip */
.sendrow.multi input { border-color: var(--accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 14px -4px var(--accent); } .sendrow.multi input::placeholder { color: var(--accent2); font-weight: 600; }
.sendrow.multi .btn.primary { box-shadow: 0 0 14px -3px var(--accent); }
.chip .chip-mute { display: none; margin-left: 4px; color: var(--muted); } .chip.muted .chip-mute { display: inline-flex; } .chip.muted.on { border-style: dashed; }
.mutednote { display: flex; align-items: center; gap: 4px; margin: 4px 0 0; color: var(--accent2); } .mutednote .ic { flex: none; }
/* the gift tile: two columns, what they get and what you get */
.giftcard2 { border: 1px dashed #8C6A1E; } .gift-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .gift-h .ic { color: #F3B23A; } .gift-h b { font-family: var(--display); font-style: var(--slant); text-transform: var(--caps); letter-spacing: var(--track); font-size: 16px; }
.giftcols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .giftcol { background: color-mix(in srgb, var(--text) 4%, transparent); border-radius: 10px; padding: 10px 12px; } .giftcol-h { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; color: #F3B23A; } .giftcol-h b { font-family: var(--display); font-style: var(--slant); text-transform: var(--caps); letter-spacing: var(--track); font-size: 13px; }
.giftrow { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; border-top: 1px solid var(--line); } .giftrow:first-of-type { border-top: 0; } .giftrow .ic { color: var(--good); flex: none; margin-top: 2px; } .giftrow b { display: block; font-size: 13px; } .giftrow small { display: block; color: var(--muted); font-size: 11.5px; line-height: 1.3; }
.giftcard2 .btn { margin-top: 10px; } .giftcard2 .note { margin: 8px 0 0; }
@media (max-width: 700px) { .giftcols { grid-template-columns: 1fr; } }
.resetwall { margin-top: 8px; } .btn.arm { color: var(--bad); border-color: var(--bad); } .pd-reset { margin: 10px 0 0; }
.cc-title { color: var(--text) !important; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-tw { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 6px; min-height: 22px; } .cc-fact { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted); padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line); } .cc-fact.on { color: var(--text); border-color: color-mix(in srgb, var(--accent) 45%, transparent); } .cc-fact.on .ic { color: var(--accent); }
/* whispers */
.whisperchip.ask { border-style: dashed; } .whisperchip.ask .ic { opacity: .7; }
.whisperbox { position: fixed; z-index: 60; width: min(340px, calc(100vw - 16px)); background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px; box-shadow: 0 18px 40px -12px rgba(0,0,0,.7); } .whisperbox .pop-head .meta { margin-left: auto; font: 12px var(--body); text-transform: none; letter-spacing: 0; }
.whisperform { display: grid; gap: 8px; } .whisperform input, .whisperform textarea { width: 100%; font: inherit; } .whisperform textarea { resize: vertical; min-height: 64px; } .whisperform .sendrow { align-items: center; gap: 10px; }
@media (max-width: 900px), (max-height: 500px) and (hover: none) and (pointer: coarse) { .top .whisperchip { display: none; } }
.trialnote { color: var(--accent2); margin: -6px 0 14px; }
/* Alphas */
.alphachip { display: inline-flex; align-items: center; gap: 6px; padding: 0 11px 0 8px; height: 38px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg2); color: var(--text); text-decoration: none; font: 900 13px var(--display); font-style: var(--slant); } .alphachip:hover { border-color: var(--accent); } .alphachip b { color: var(--accent2); }
.amark { flex: none; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 60%, transparent)); }
.alphascard .al-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .al-big { display: flex; align-items: center; gap: 10px; } .al-big b { font: 900 40px/1 var(--display); font-style: var(--slant); color: var(--accent2); text-shadow: 0 0 14px color-mix(in srgb, var(--accent2) 45%, transparent); } .al-sub { display: grid; color: var(--muted); font-size: 12.5px; }
.al-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 8px; } .al-col h3, .alphascard > h3 { font-family: var(--display); font-style: var(--slant); text-transform: var(--caps); letter-spacing: var(--track); font-size: 13px; margin: 8px 0 6px; color: var(--muted); }
.al-list { display: grid; gap: 4px; } .al-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 6px 8px; border-radius: 8px; background: color-mix(in srgb, var(--text) 4%, transparent); } .al-row .ic { color: var(--muted); flex: none; } .al-row.on .ic { color: var(--good); } .al-row span { flex: 1; } .al-row b { color: var(--accent2); }
.al-buy { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg2); } .al-buy > div { flex: 1; min-width: 0; } .al-buy b { display: block; font-size: 13px; } .al-buy small { display: block; color: var(--muted); font-size: 11.5px; line-height: 1.3; } .al-buy.soon { opacity: .6; } .al-buy .btn .amark { margin-left: 4px; }
.al-log { display: grid; gap: 2px; } .al-lrow { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; font-size: 12.5px; padding: 5px 8px; border-top: 1px solid var(--line); } .al-lrow small { color: var(--muted); } .al-lrow b { color: var(--good); min-width: 44px; text-align: right; } .al-lrow.out b { color: var(--bad); }
@media (max-width: 700px) { .al-two { grid-template-columns: 1fr; } .top .alphachip b { display: none; } }
@media (max-width: 900px), (max-height: 500px) and (hover: none) and (pointer: coarse) { .top .alphachip { display: none; } }
.pmenu-n { margin-left: auto; color: var(--accent2); font: 900 13px var(--display); font-style: var(--slant); }
.alphachip { position: relative; } .alphachip.up { border-color: var(--accent2); } .alphaup { position: absolute; left: 50%; top: -4px; transform: translateX(-50%); color: var(--accent2); font: 900 13px var(--display); font-style: var(--slant); animation: alphaup 1.5s ease-out forwards; pointer-events: none; } @keyframes alphaup { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, -22px); } }

/* ---------- page slide: forward moves in from the right, back from the left. The wall keeps its own name so it glides
   between the full wall and the floating window instead of sliding away. DeepClaw router 1.1 ---------- */
main[hidden] { display: none !important; }
main#view:not(.watch), main#page { view-transition-name: page; }
main#view.watch { view-transition-name: wall; }
.top { view-transition-name: topbar; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(topbar), ::view-transition-new(topbar) { animation: none; mix-blend-mode: normal; }
::view-transition-group(page) { overflow: hidden; animation-duration: .36s; }
::view-transition-old(page) { animation: al-out .36s cubic-bezier(.3, .7, .2, 1) both; }
::view-transition-new(page) { animation: al-in .36s cubic-bezier(.3, .7, .2, 1) both; }
html[data-nav=back]::view-transition-old(page) { animation-name: al-out-r; }
html[data-nav=back]::view-transition-new(page) { animation-name: al-in-r; }
::view-transition-group(wall) { animation-duration: .42s; animation-timing-function: cubic-bezier(.3, .7, .2, 1); z-index: 2; }
::view-transition-old(wall), ::view-transition-new(wall) { animation-duration: .42s; height: 100%; object-fit: cover; }
@keyframes al-in { from { transform: translateX(100%); opacity: .35; } }
@keyframes al-out { to { transform: translateX(-35%); opacity: 0; } }
@keyframes al-in-r { from { transform: translateX(-100%); opacity: .35; } }
@keyframes al-out-r { to { transform: translateX(35%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

/* ---------- floating wall: the players stay at the Twitch minimum (400 by 300 or roomier), nothing drawn over them.
   DeepClaw float 0.9-beta ---------- */
main#view.floating { position: fixed; z-index: 92; flex: none; width: auto; height: auto; display: flex; flex-direction: column; background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .03), 0 0 40px -18px var(--accent); }
main#view.floating > .tools, main#view.floating .rail, main#view.floating .side, main#view.floating .extrabox, main#view.floating .stagecol > :not(.stage), main#view.floating .vsplit, main#view.floating .hsplit, main#view.floating .fsplit { display: none !important; }
main#view.floating .wallwrap { display: block !important; flex: none; }
main#view.floating .stagecol { display: block; }
main#view.floating .stage { display: grid; grid-template-columns: repeat(var(--fc, 2), var(--fw, 482px)) !important; grid-template-rows: repeat(var(--fr, 1), var(--fh, 302px)) !important; grid-auto-rows: var(--fh, 302px); gap: 4px; padding: 4px; flex: none; }
main#view.floating .pane { grid-row: auto !important; grid-column: auto !important; grid-template-rows: minmax(0, 1fr); aspect-ratio: auto; border-radius: 8px; }
main#view.floating .pane-bar { display: none; }
main#view.floating .pane > :not(.pane-body), main#view.floating .pane-body > :not(.player):not(iframe) { display: none !important; }       /* the streak pill, Unmute, the gate note and pane effects stay off the players */
.fl-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 34px; padding: 0 6px 0 10px; background: var(--card); border-bottom: 1px solid var(--line); cursor: grab; user-select: none; touch-action: none; flex: none; }
.fl-grip { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--muted); }
.fl-grip b { font-family: var(--display); font-style: var(--slant); text-transform: var(--caps); letter-spacing: var(--track); color: var(--text); font-size: 13px; }
.fl-grip small { font-size: 12px; }
.fl-acts { display: flex; gap: 2px; }
.fl-btn { width: 28px; height: 26px; display: grid; place-items: center; border-radius: 7px; color: var(--muted); background: transparent; border: 0; cursor: pointer; }
.fl-btn:hover, .fl-btn:focus-visible { color: var(--text); background: rgba(255, 255, 255, .06); }
main#view.fl-moving { cursor: grabbing; transition: none; animation: none; box-shadow: 0 30px 70px -10px rgba(0, 0, 0, .9), 0 0 0 1px var(--accent); }
main#view.fl-moving .fl-bar { cursor: grabbing; }
main#view.fl-moving iframe { pointer-events: none; }

/* Preview: locked features with sample data. DeepClaw preview 0.9-beta */
.lockcard .pvbtn { padding: 5px 12px; font-size: 12.5px; gap: 6px; }
.bb.slim .lockcard .pvbtn { padding: 5px 10px; font-size: 12px; }
.bb.pv-on { overflow: auto; min-height: 0; display: flex; flex-direction: column; }
.bb.pv-on > .pv-body { flex: 1; }
.pv-strip { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 8px 7px 10px; background: color-mix(in srgb, var(--card) 92%, var(--accent)); border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); }
.pv-strip > .ic { color: var(--accent); flex: none; }
.pv-what { display: flex; align-items: baseline; gap: 6px; margin-right: auto; }
.pv-what b { font-family: var(--display); font-style: var(--slant); text-transform: var(--caps); font-size: 13px; }
.pv-what small { color: var(--muted); font-size: 12px; }
.pv-strip .btn.sm { padding: 4px 10px; font-size: 12px; }
.pv-x { border: 0; background: transparent; color: var(--muted); width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; cursor: pointer; }
.pv-x:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }
.pv-modal { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 60px); overflow: auto; }
.pv { padding: 12px; color: var(--text); font-size: 13px; }
.pv b { font-weight: 700; } .pv small { color: var(--muted); font-size: 11.5px; display: block; }
.pv h4 { margin: 0 0 8px; font-family: var(--display); font-style: var(--slant); text-transform: var(--caps); font-size: 14px; }
.pv-cap { color: var(--muted); font-size: 12px; margin: 8px 0 0; }
.pv-face { width: 28px; height: 28px; border-radius: 50%; flex: none; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--fc) 70%, #fff), var(--fc) 45%, color-mix(in srgb, var(--fc) 40%, #000)); }
.pv-who { display: flex; align-items: center; gap: 8px; min-width: 0; } .pv-who b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-row { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-top: 1px solid var(--line); }
.pv-row:first-child, .pv-head + .pv-row { border-top: 0; }
.pv-row > :nth-child(2):not(.pv-pill):not(.pv-bar) { flex: 1; min-width: 0; }
.pv-row > b:first-child { flex: 1; min-width: 0; }
.pv-rs .pv-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) 70px 44px 120px; }
.pv-rs .pv-row > span:nth-child(n+3) { text-align: right; } .pv-rs .pv-row > .pv-bar { width: 100%; }
.pv-head { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; border-bottom: 1px solid var(--line); }
.pv-table .pv-row > :first-child:not(.pv-who):not(.pv-mini):not(input) { min-width: 22px; color: var(--muted); }
.pv-table .pv-row > span:nth-child(n+3) { color: var(--muted); white-space: nowrap; }
.pv-bar { display: inline-block; width: 110px; max-width: 30vw; height: 7px; border-radius: 99px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; flex: none; }
.pv-bar i { display: block; height: 100%; border-radius: inherit; background: var(--grad); }
.pv-bar.hot i { background: var(--bad); }
.pv-pill { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 1px 7px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.pv-pill.live { background: var(--live); border-color: transparent; color: #fff; }
.pv-pill.up { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, var(--line)); }
.pv-rank { font-family: var(--display); font-style: var(--slant); color: var(--accent2) !important; }
.pv-kv { justify-content: space-between; } .pv-kv > :nth-child(2) { flex: none; }
.pv-big { font-family: var(--display); font-style: var(--slant); font-size: 28px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 6px; }
.pv-cal { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 12px; }
.pv-calgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.pv-dow { color: var(--muted); font-size: 11px; text-align: center; padding-bottom: 2px; }
.pv-cell { min-height: 58px; border: 1px solid var(--line); border-radius: 8px; padding: 4px; background: var(--bg2); display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.pv-cell.off { opacity: .4; } .pv-cell.today { border-color: var(--accent); }
.pv-num { font-size: 11px; color: var(--muted); }
.pv-chip { font-size: 10.5px; font-weight: 700; padding: 1px 5px; border-radius: 5px; background: color-mix(in srgb, var(--cc) 22%, transparent); border-left: 3px solid var(--cc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-chart svg { width: 100%; max-width: 560px; height: auto; display: block; margin: 0 auto; }
.pv-chart text { fill: var(--muted); font-size: 10px; font-family: var(--body); }
.pv-axis { stroke: var(--line); stroke-width: 1.5; fill: none; }
.pv-dot { opacity: .85; }
.pv-line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; } .pv-line.b { stroke: var(--p1); stroke-dasharray: 6 5; }
.pv-form input[type=range] { width: 100%; accent-color: var(--accent); }
.pv-chat { display: flex; flex-direction: column; gap: 2px; }
.pv-msg { display: flex; align-items: center; gap: 7px; padding: 4px 6px; border-radius: 6px; font-size: 13px; min-width: 0; }
.pv-msg[style*="--cc"] { background: linear-gradient(90deg, color-mix(in srgb, var(--cc) 14%, transparent), transparent 60%); border-left: 3px solid var(--cc); }
.pv-msg > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-src { font-size: 10px; font-weight: 800; text-transform: uppercase; color: var(--muted); min-width: 70px; }
.pv-send .pv-input, .pv > .pv-input { border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; background: var(--bg2); color: var(--muted); margin-bottom: 6px; }
.pv-send .pv-input { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 18px -4px var(--accent); display: flex; flex-direction: column; gap: 3px; margin: 0; }
.pv-lit { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--accent2); }
.pv-typed { color: var(--text); }
.pv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.pv-card { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.pv-card .pv-who { padding: 8px; }
.pv-thumb, .pv-pane { aspect-ratio: 16/9; position: relative; background: radial-gradient(120% 100% at 30% 25%, color-mix(in srgb, var(--fc) 55%, #000), #000 75%); }
.pv-thumb .pv-pill, .pv-pane .pv-pill { position: absolute; left: 6px; top: 6px; }
.pv-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 12px; text-align: center; }
.pv-ring { position: relative; display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: conic-gradient(var(--accent2) calc(var(--p) * 360deg), color-mix(in srgb, var(--text) 12%, transparent) 0); }
.pv-ring .pv-face { box-shadow: 0 0 0 3px var(--card); }
.pv-lv { position: absolute; right: -2px; bottom: -2px; background: var(--grad); color: var(--ink); font: 900 11px var(--display); border-radius: 99px; padding: 1px 6px; }
.pv-badge small { margin-top: 4px; }
.pv-deck { max-width: 480px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pv-key { aspect-ratio: 1.6; display: grid; place-items: center; text-align: center; padding: 6px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--line); font-weight: 700; font-size: 12px; box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--accent) 45%, transparent); }
.pv-time { font-size: 11.5px; }
.pv-bal { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 14px; align-items: start; }
.pv-sq { position: relative; aspect-ratio: 1; border: 1px dashed color-mix(in srgb, var(--accent) 50%, var(--line)); border-radius: 10px; background: var(--bg2); touch-action: none; cursor: crosshair; margin: 14px; }
.pv-corner { position: absolute; font-size: 10px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.pv-corner.c0 { left: -8px; top: -16px; } .pv-corner.c1 { right: -8px; top: -16px; } .pv-corner.c2 { left: -8px; bottom: -16px; } .pv-corner.c3 { right: -8px; bottom: -16px; }
.pv-bdot { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 12px var(--accent); pointer-events: none; }
.pv-bal .pv-cap { grid-column: 1 / -1; margin: 0; }
.pv-mini { display: grid; gap: 2px; width: 34px; height: 20px; flex: none; grid-template-columns: 1fr 1fr; } .pv-mini.p2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; } .pv-mini.p3 i:first-child { grid-row: span 2; }
.pv-mini i { background: color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 2px; }
.pv-wall { max-width: 760px; margin: 0 auto; display: grid; gap: 6px; grid-template-columns: 1fr 1fr; padding: 8px; }
.pv-wall.p3 .pv-pane:first-child { grid-row: span 2; aspect-ratio: auto; }
.pv-pane { border-radius: 8px; overflow: hidden; min-height: 40px; }
.pv-pname { position: absolute; left: 8px; bottom: 6px; font-family: var(--display); font-style: var(--slant); text-transform: var(--caps); font-size: 11px; color: #fff; text-shadow: 0 1px 3px #000; }
@media (max-width: 900px), (max-height: 500px) and (hover: none) and (pointer: coarse) {
  .pv-cal { grid-template-columns: 1fr; } .pv-cell { min-height: 44px; }
  .pv-bal { grid-template-columns: 1fr; } .pv-sq { max-width: 200px; margin: 18px auto; width: 70%; }
  .pv-strip .pv-what small { display: none; }
  .pv-rs .pv-row { grid-template-columns: 18px minmax(0, 1fr) 54px 32px 56px; gap: 6px; font-size: 12px; }
}

/* Discovery on Social. DeepClaw discover 0.9-beta */
.disc { margin: 0 0 22px; }
.disc-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.disc-h .sectionh { margin: 0; }
.disc-view button { display: inline-flex; align-items: center; gap: 5px; }
.disc-tool { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.disc-sort { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; } .disc-sort button { white-space: nowrap; flex: none; }
.disc-tool .chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--card); color: var(--muted); font: 600 12px var(--body); padding: 5px 10px 5px 8px; border-radius: 99px; cursor: pointer; white-space: nowrap; }
.disc-tool .chip.on { color: var(--text); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--card)); }
.disc-game { background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; font: 600 12px var(--body); max-width: 200px; }
.dc-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.dc-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; }
.dc-card.boosted, .dc-row.boosted { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); box-shadow: 0 8px 24px -16px var(--accent); }
.dc-card.kingdom, .dc-row.kingdom { background: linear-gradient(180deg, color-mix(in srgb, #ED661F 12%, var(--card)), var(--card)); }
.dc-thumb { position: relative; aspect-ratio: 16/9; background: radial-gradient(120% 100% at 30% 25%, color-mix(in srgb, var(--accent) 30%, #000), #000 75%); overflow: hidden; }
.dc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dc-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.72)); pointer-events: none; }
.dc-tags { position: absolute; left: 8px; top: 8px; display: flex; gap: 5px; z-index: 1; }
.dc-tag { font: 800 10px var(--body); text-transform: uppercase; letter-spacing: .04em; padding: 2px 6px; border-radius: 5px; background: rgba(0,0,0,.65); color: #fff; display: inline-flex; gap: 4px; align-items: center; }
.dc-tag.live { background: var(--live); } .dc-tag.boost { background: var(--grad); color: var(--ink); }
.dc-faces { position: absolute; left: 8px; bottom: 7px; z-index: 1; display: flex; } .dc-faces > * { margin-left: -6px; box-shadow: 0 0 0 2px #000; border-radius: 50%; } .dc-faces > :first-child { margin-left: 0; }
.dc-view { position: absolute; right: 8px; bottom: 7px; z-index: 1; font: 700 11.5px var(--body); color: #fff; }
.dc-body { padding: 10px 11px 11px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.dc-who { display: flex; gap: 9px; align-items: center; min-width: 0; }
.dc-nm { min-width: 0; } .dc-nm b { display: block; font-family: var(--display); font-style: var(--slant); text-transform: var(--caps); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-nm small { display: block; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-why { display: flex; flex-wrap: wrap; gap: 5px; }
.dc-w { font: 700 11px var(--body); padding: 2px 7px 2px 5px; border-radius: 6px; background: var(--bg2); border: 1px solid var(--line); display: inline-flex; gap: 4px; align-items: center; white-space: nowrap; }
.dc-w .ic { color: var(--accent2); } .dc-w.risk { border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); } .dc-w.risk .ic { color: var(--bad); }
.dc-w.kd .ic { color: #ED661F; } .dc-w.tw .ic { color: var(--p3); }
.dc-worth { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.dc-lab { font: 800 10.5px var(--body); text-transform: uppercase; color: var(--muted); letter-spacing: .05em; }
.dc-bar { flex: 1; height: 7px; border-radius: 99px; background: color-mix(in srgb, var(--text) 9%, transparent); overflow: hidden; }
.dc-bar i { display: block; height: 100%; border-radius: inherit; background: var(--grad); }
.dc-pay { font: 900 13px var(--display); font-style: var(--slant); color: var(--accent2); min-width: 34px; text-align: right; }
.dc-acts { display: flex; gap: 6px; min-width: 0; } .dc-acts > * { flex: none; } .dc-acts .grow { flex: 1 1 0; min-width: 0; justify-content: center; overflow: hidden; } .dc-acts .grow span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-list { display: flex; flex-direction: column; gap: 6px; }
.dc-row { display: grid; grid-template-columns: 22px minmax(150px, 1.2fr) minmax(0, 1.6fr) 170px auto; gap: 12px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px 7px 8px; }
.dc-row .dc-worth { margin: 0; } .dc-row .dc-lab { display: none; }
.dc-rk { font: 900 15px var(--display); font-style: var(--slant); color: var(--muted); text-align: center; }
.dc-slot { font: 700 10.5px var(--body); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin: 8px 0 5px 2px; }
.dc-more { margin-top: 10px; }
@media (max-width: 900px), (max-height: 500px) and (hover: none) and (pointer: coarse) {
  .disc-h { flex-wrap: wrap; }
  .dc-grid { grid-template-columns: 1fr; }
  .dc-card { flex-direction: row; } .dc-card .dc-thumb { width: 128px; flex: none; aspect-ratio: auto; min-height: 96px; }
  .dc-card .dc-faces { display: none; } .dc-view { font-size: 10px; left: 6px; right: auto; bottom: 4px; }
  .dc-body { padding: 8px 9px; gap: 6px; }
  .dc-row { grid-template-columns: 18px minmax(0, 1fr) auto; } .dc-row .dc-why, .dc-row .dc-worth { display: none; }
}

/* a pinned badge in your own grid: a hairline and a small pin, only you ever see it */
.btile.pinned { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); border-radius: var(--r); }

/* Test view (owner). DeepClaw viewas 0.9-beta */
.viewchip { display: inline-flex; align-items: center; gap: 2px; border: 1px dashed var(--accent); border-radius: 99px; padding: 2px 2px 2px 4px; background: color-mix(in srgb, var(--accent) 12%, transparent); }
.viewchip .va-lab { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: var(--text); font: 700 12px var(--body); padding: 3px 6px; cursor: pointer; white-space: nowrap; }
.viewchip .va-lab .ic { color: var(--accent); }
.viewchip .va-x { border: 0; background: transparent; color: var(--muted); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.viewchip .va-x:hover { color: var(--text); background: color-mix(in srgb, var(--text) 10%, transparent); }
.va-card { margin-bottom: 16px; } .va-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .va-h .ic { color: var(--accent); }
.va-h b { font-family: var(--display); font-style: var(--slant); text-transform: var(--caps); }
.va-range { width: 100%; accent-color: var(--accent); }
.va-ticks { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: 4px 0 8px; }
.va-tick { border: 0; background: transparent; color: var(--muted); font: 700 11.5px var(--body); cursor: pointer; padding: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.va-tick:first-child { text-align: left; } .va-tick:last-child { text-align: right; } .va-tick.on { color: var(--accent2); }
@media (max-width: 900px) { .viewchip .va-lab span { display: none; } }
.dc-w.al .ic { color: var(--p1); }

/* Packmate joined. DeepClaw joined 0.9-beta */
.pane-bar.jf-host { position: relative; }
.jf-flare { position: absolute; right: 6px; top: 50%; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 3px; border-radius: 99px; background: var(--grad); color: var(--ink); font: 900 11px var(--display); font-style: var(--slant); text-transform: var(--caps); white-space: nowrap; box-shadow: 0 0 14px -2px var(--accent); transform: translate(130%, -50%); animation: jfIn 4.6s cubic-bezier(.2,.9,.2,1) forwards; pointer-events: none; max-width: calc(100% - 12px); overflow: hidden; text-overflow: ellipsis; }
.jf-flare.tag { right: auto; left: 6px; transform: translate(-130%, -50%); animation-name: jfInL; }
.jf-flare.twin { background: linear-gradient(90deg, #F3C95A, #FFE6A0); box-shadow: 0 0 14px -2px #F3C95A; }
.jf-faces { display: inline-flex; } .jf-faces > * { margin-left: -6px; box-shadow: 0 0 0 2px var(--ink); border-radius: 50%; } .jf-faces > :first-child { margin-left: 0; }
.pane-bar.jf-sweep::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--accent) 40%, transparent) 50%, transparent 70%); transform: translateX(-100%); animation: jfSweep 1s ease-out .15s forwards; pointer-events: none; }
.pane.jf-glow { animation: jfGlow 3.6s ease forwards; }
.pane.jf-glow.twin { --jfc: #F3C95A; }
.jf-call { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin: 3px 0; border-radius: 8px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 22%, transparent), transparent 80%); border-left: 3px solid var(--accent); clip-path: inset(0 100% 0 0); animation: jfWipe .55s cubic-bezier(.2,.8,.2,1) forwards; }
.jf-call b { font: 900 12px var(--display); font-style: var(--slant); text-transform: var(--caps); } .jf-call small { margin-left: auto; color: var(--muted); font-size: 11px; }
.jf-call.twin { background: linear-gradient(90deg, color-mix(in srgb, #F3C95A 24%, transparent), transparent 80%); border-left-color: #F3C95A; }
@keyframes jfIn { 0% { transform: translate(130%, -50%); } 10% { transform: translate(-5%, -50%); } 14%, 82% { transform: translate(0, -50%); } 100% { transform: translate(130%, -50%); } }
@keyframes jfInL { 0% { transform: translate(-130%, -50%); } 10% { transform: translate(5%, -50%); } 14%, 82% { transform: translate(0, -50%); } 100% { transform: translate(-130%, -50%); } }
@keyframes jfSweep { to { transform: translateX(100%); } }
@keyframes jfGlow { 0% { box-shadow: 0 0 0 0 transparent; } 12%, 70% { box-shadow: 0 0 0 2px var(--jfc, var(--accent2)), 0 0 22px -2px var(--jfc, var(--accent)); } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes jfWipe { to { clip-path: inset(0 0 0 0); } }
.jf-set { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
@media (prefers-reduced-motion: reduce) { .jf-flare, .jf-flare.tag { animation: none; transform: translate(0, -50%); } .pane.jf-glow, .jf-call, .pane-bar.jf-sweep::before { animation: none; clip-path: none; } }
.disc-scope { margin-right: 4px; }

/* Stampedes. DeepClaw stampede 0.8-beta */
.st-cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.st-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); margin-bottom: 18px; }
.st-card { display: flex; flex-direction: column; gap: 3px; padding: 12px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); color: var(--text); text-decoration: none; }
.st-card:hover { border-color: var(--accent); } .st-card.st-live { border-color: color-mix(in srgb, var(--live) 50%, var(--line)); }
.st-card b { font-family: var(--display); font-style: var(--slant); text-transform: var(--caps); font-size: 15px; }
.st-card-t { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; } .st-card-t small, .st-meta { color: var(--muted); font-size: 12px; }
.st-pill { font: 800 10px var(--body); text-transform: uppercase; letter-spacing: .05em; padding: 2px 7px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); }
.st-pill.live { background: var(--live); border-color: transparent; color: #fff; } .st-pill.picks { color: var(--accent2); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.st-form { display: flex; flex-direction: column; gap: 10px; } .st-f { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.st-f input, .st-f select { background: var(--bg2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font: 14px var(--body); }
.st-ghost { display: flex; flex-direction: column; gap: 10px; padding: 14px; min-height: 220px; }
.st-head { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 12px; } .st-title h2 { margin: 0; font-family: var(--display); font-style: var(--slant); text-transform: var(--caps); }
.st-phase { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 6px 0 14px; }
.st-ph { display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; color: var(--muted); } .st-ph i { height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--text) 10%, transparent); }
.st-ph.past i { background: color-mix(in srgb, var(--accent) 45%, transparent); } .st-ph.on i { background: var(--grad); box-shadow: 0 0 10px -2px var(--accent); } .st-ph.on b { color: var(--text); }
.st-info { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; } .st-info .note { flex-basis: 100%; margin: 0; }
.st-slots { display: flex; flex-direction: column; gap: 6px; }
.st-slot { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); overflow: hidden; }
.st-slot.live { border-color: var(--live); box-shadow: 0 0 18px -8px var(--live); }
.st-when b { display: block; font-family: var(--display); font-style: var(--slant); } .st-when small { color: var(--muted); font-size: 11.5px; }
.st-who { display: flex; align-items: center; gap: 8px; min-width: 0; } .st-who b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-open { color: var(--muted); font-size: 13px; } .st-drum { color: var(--accent2); font-size: 11px; }
.st-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .btn.armed { box-shadow: 0 0 0 2px var(--accent2); }
.st-org { display: flex; gap: 8px; margin-top: 14px; } .st-acts .st-pill { align-self: center; }
.st-cage { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--card) 88%, transparent); backdrop-filter: blur(2px); }
.st-cage-ring { position: absolute; width: 58px; height: 58px; border-radius: 50%; border: 3px dashed var(--accent2); animation: stSpin .8s linear infinite; }
.st-cage-w { position: relative; font: 900 14px var(--display); font-style: var(--slant); text-transform: var(--caps); background: var(--card); padding: 2px 10px; border-radius: 6px; }
.st-cage.won .st-cage-ring { animation: none; border-style: solid; border-color: var(--good); box-shadow: 0 0 20px var(--good); } .st-cage.won .st-cage-w { color: var(--good); }
@keyframes stSpin { to { transform: rotate(360deg); } }
@media (max-width: 900px), (max-height: 500px) and (hover: none) and (pointer: coarse) { .st-cols { grid-template-columns: 1fr; } .st-slot { grid-template-columns: 70px minmax(0, 1fr); } .st-acts { grid-column: 1 / -1; justify-content: flex-start; } }

/* Hunting Parties. DeepClaw hunt 0.9-beta */
.hp-tag { display: inline-grid; place-items: center; min-width: 46px; height: 46px; padding: 0 8px; border-radius: 12px; font: 900 16px var(--display); font-style: var(--slant); letter-spacing: .02em; color: #140700; background: linear-gradient(135deg, var(--hc), var(--hc2)); box-shadow: 0 6px 18px -8px var(--hc); flex: none; }
.hp-hero { display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: var(--r); margin-bottom: 14px; border: 1px solid color-mix(in srgb, var(--hc) 45%, var(--line)); background: linear-gradient(110deg, color-mix(in srgb, var(--hc) 18%, var(--card)), var(--card) 60%); }
.hp-hero .hp-tag { min-width: 64px; height: 64px; font-size: 22px; border-radius: 16px; }
.hp-ht h2 { margin: 0; font-family: var(--display); font-style: var(--slant); text-transform: var(--caps); } .hp-ht small { color: var(--muted); } .hp-ht p { margin: 6px 0 0; color: var(--text); }
.hp-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; } .hp-cols > div { display: flex; flex-direction: column; gap: 12px; }
.hp-h { margin: 0 0 8px; font-family: var(--display); font-style: var(--slant); text-transform: var(--caps); font-size: 14px; }
.hp-m, .hp-lc, .hp-inv { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-top: 1px solid var(--line); } .hp-m:first-of-type, .hp-lc:first-of-type { border-top: 0; }
.hp-mn { flex: 1; min-width: 0; color: var(--text); text-decoration: none; } .hp-mn b { display: block; } .hp-mn small, .hp-lc small, .hp-inv small { color: var(--muted); font-size: 12px; display: block; }
.hp-rank { font: 800 10px var(--body); text-transform: uppercase; letter-spacing: .05em; padding: 2px 7px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.hp-rank.r2 { color: var(--ink); background: var(--grad); border-color: transparent; } .hp-rank.r1 { color: var(--accent2); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.hp-acts { display: flex; gap: 4px; } .hp-live .btn { margin-top: 8px; }
.hp-inv { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin-bottom: 6px; } .hp-inv > div { flex: 1; }
.hp-form { display: flex; flex-direction: column; gap: 10px; max-width: 520px; }
.hp-sw { display: flex; flex-wrap: wrap; gap: 6px; } .hp-swb { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; } .hp-swb.on { border-color: var(--text); box-shadow: 0 0 0 2px var(--bg); }
.hp-lock { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; max-width: 520px; } .hp-lock .ic { color: var(--accent); } .hp-lock small { color: var(--muted); }
.hp-lvbar { width: 100%; height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; } .hp-lvbar i { display: block; height: 100%; background: var(--grad); }
@media (max-width: 900px), (max-height: 500px) and (hover: none) and (pointer: coarse) { .hp-cols { grid-template-columns: 1fr; } .hp-m { flex-wrap: wrap; } .hp-acts { flex-basis: 100%; justify-content: flex-end; } .hp-acts:empty { display: none; } }
.faq-credits { margin-top: 6px; color: var(--muted); font-size: 11px; opacity: .7; } .faq-credits summary { cursor: pointer; font-size: 11px; } .faq-credits p { margin: 4px 0; } .faq-credits a { color: inherit; }

/* FAQ with the changelog beside it. DeepClaw faq 1.1 */
.faq-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.faq-log { position: sticky; top: calc(var(--topH) + 12px); max-height: calc(100vh - var(--topH) - 24px); overflow: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; }
.faq-log .sectionh { margin: 0 0 8px; }
.faq-rel { border-top: 1px solid var(--line); padding: 7px 0; } .faq-rel:first-of-type { border-top: 0; }
.faq-rel summary { cursor: pointer; display: flex; align-items: center; gap: 8px; list-style: none; } .faq-rel summary::-webkit-details-marker { display: none; }
.faq-rel summary b { font-family: var(--display); font-style: var(--slant); } .faq-relnote { font: 800 10px var(--body); text-transform: uppercase; letter-spacing: .05em; color: var(--accent2); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 99px; padding: 1px 7px; }
.faq-rel ul { margin: 6px 0 2px; padding-left: 16px; color: var(--muted); font-size: 12.5px; } .faq-rel li { margin: 2px 0; }
@media (max-width: 1100px), (max-height: 500px) and (hover: none) and (pointer: coarse) { .faq-cols { grid-template-columns: 1fr; } .faq-log { position: static; max-height: none; } }
/* Partner and Affiliate marks, the badge hover card. DeepClaw pack 1.7 */
.cmark { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 1px 7px 1px 5px; border-radius: 99px; font: 800 10px var(--body); text-transform: uppercase; letter-spacing: .05em; vertical-align: middle; white-space: nowrap; }
.cmark.partner { color: #1a1204; background: linear-gradient(135deg, #F3C95A, #FFE6A0); }
.cmark.affiliate { color: var(--accent2); border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--line)); }
.bhov { position: fixed; z-index: 60; width: 240px; padding: 10px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 16px 40px -18px #000; display: flex; flex-direction: column; gap: 6px; animation: bhovIn .14s ease-out; }
.bhov-h { display: flex; align-items: center; gap: 9px; } .bhov-t { min-width: 0; } .bhov-t b { font-family: var(--display); font-style: var(--slant); text-transform: var(--caps); font-size: 13px; }
.bhov-mk .cmark { margin-left: 0; margin-top: 2px; } .bhov-l { color: var(--muted); font-size: 12px; } .bhov-a { display: flex; gap: 6px; }
@keyframes bhovIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bhov { animation: none; } }
/* Reply in AlphaLurk chat. DeepClaw chat 2.1 */
.ln { position: relative; }
.ln .rpl { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); color: var(--muted); display: grid; place-items: center; opacity: 0; transition: opacity .12s; cursor: pointer; padding: 0; }
.ln:hover .rpl, .ln .rpl:focus-visible { opacity: 1; } .ln .rpl:hover { color: var(--text); border-color: var(--accent); }
@media (hover: none) { .ln .rpl { opacity: .55; } }
.rbar { box-sizing: border-box; width: 100%; max-width: 100%; overflow: hidden; contain: inline-size; display: flex; align-items: center; gap: 7px; padding: 5px 6px 5px 9px; margin: 0 0 6px; border-radius: 8px; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--bg2)); font-size: 12px; min-width: 0; }
.rbar .ic { color: var(--accent2); flex: none; } .rbar-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); } .rbar-t b { color: var(--text); }
.rbar-ch { color: var(--muted); white-space: nowrap; flex: none; max-width: 30%; overflow: hidden; text-overflow: ellipsis; } .rbar-x { border: 0; background: transparent; color: var(--muted); width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; cursor: pointer; flex: none; }
.sendrow.replying input { border-color: var(--accent); }
/* Chat tabs onto panes, offline chats kept as tabs. DeepClaw watch 1.1 */
.tab.lift { opacity: .35; }
.tabghost { position: fixed; z-index: 90; pointer-events: none; margin: 0; box-shadow: 0 12px 30px -8px #000, 0 0 0 2px var(--accent); background: var(--card); opacity: .95; }
.tab.only { opacity: .72; } .tab.only .dot { background: var(--muted) !important; box-shadow: none; }
.tab .tabx { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 4px; border-radius: 4px; color: var(--muted); cursor: pointer; } .tab .tabx:hover { color: var(--text); background: color-mix(in srgb, var(--text) 10%, transparent); }
/* Merged chat, filtered by streamer. DeepClaw chat 2.3 */
.mfil { display: flex; flex-wrap: wrap; gap: 5px; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.mchip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 7px; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--pc, var(--accent)) 55%, var(--line)); background: color-mix(in srgb, var(--pc, var(--accent)) 14%, transparent); color: var(--text); font: 700 11.5px var(--body); cursor: pointer; }
.mchip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pc, var(--accent)); }
.mchip.off { opacity: .45; background: transparent; border-color: var(--line); text-decoration: line-through; } .mchip.off .dot { background: var(--muted); }
.mchip.all { border-style: dashed; border-color: var(--line); background: transparent; color: var(--muted); }
.mfil[hidden] { display: none; }
.dock:has(> .mfil:not([hidden])) { grid-template-rows: auto auto auto minmax(0, 1fr) auto; }