/* 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: #E2D9C6; --bg2: #D6CCB7; --card: #ECE5D6; --line: #C4B8A0; --text: #29221B; --muted: #62574A; --accent: #D9480F; --accent2: #E8741F; --ink: #FFF9F2; --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: #FFF7EA; --ink: #0B0D10;
  --grad: linear-gradient(135deg, #6E7782 0%, #F4F7FA 45%, #9AA4B0 70%, #FFF7EA 100%); --display: "Didot", "Bodoni MT", "Playfair Display", Georgia, serif; --slant: normal; --caps: none; --track: .04em; --r: 4px;
  --p0: #FFF7EA; --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: #FFF7EA; --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: #FFF7EA; --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: #FFF7EA; --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: #FFF7EA; }
[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: #FFF7EA; margin-left: 4px; } [data-theme="afterdark"] .betamark { color: #000; }
/* Afterlight: Afterdark in daylight. White, black and the same hot orange, the orange box on the wordmark kept. */
[data-theme="afterlight"] { --bg: #F5F5F5; --bg2: #EBEBEB; --card: #FFF7EA; --line: #D4D4D4; --text: #000000; --muted: #5C5C5C; --accent: #FF9000; --accent2: #C96A00; --ink: #000000; --good: #1C8F1C; --live: #E01B1B; color-scheme: light;
  --grad: linear-gradient(135deg, #FF9000 0%, #FF9000 100%); --display: Arial, "Helvetica Neue", Helvetica, sans-serif; --slant: normal; --caps: none; --track: -.02em; --r: 6px;
  --p0: #E07E00; --p1: #000000; --p2: #B35F00; --p3: #4A4A4A; --p4: #FF9000; --p5: #7A7A7A; }
[data-theme="afterlight"] .wordmark { text-transform: none; display: inline-flex; align-items: center; gap: 3px; } [data-theme="afterlight"] .wordmark b { color: #000; -webkit-text-fill-color: #000; }
[data-theme="afterlight"] .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="afterlight"] .wordmark s { color: #000; -webkit-text-fill-color: #000; margin-left: 4px; } [data-theme="afterlight"] .betamark { color: #000; }
[data-theme="afterlight"] .mainnav a:not(.on):hover, [data-theme="afterlight"] a.link { color: #B35F00; }      /* orange text on white needs the deeper tone to read */

* { 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; }
/* The lock card shares one grid cell with the ghost, so the box grows to fit the card and nothing gets cut */
.bb { display: grid; grid-template-columns: minmax(0, 1fr); }
.bb > .bb-ghost, .bb > .lockcard { grid-area: 1 / 1; }
.bb > .lockcard { position: relative; left: auto; top: auto; transform: none; align-self: center; justify-self: center; margin: 12px 0; }
.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; }
/* Balance share inside the Wall audio control rows (one row per pane) */ .mix-nm .mix-pc { margin-left: auto; font-size: 11px; } .mix-meter { height: 3px; } .mix-row .mix-meter i { opacity: .9; }
.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:not(.streak) { 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; }
/* the next-panes lock under the wall grows when its card wraps on narrow screens, so it is never cut */
.pane.tease.extra { height: auto; min-height: 96px; } .pane.tease.extra .bb { height: auto; min-height: 96px; }
/* lpeek: one line that stands in for a lock card (the wall's fourth pane, the chat foot). DeepClaw gate 1.3. Not .peek, that is the dock's Twitch panel. */
.lpeek { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 10px; border: 1px dashed var(--line); border-radius: 10px; background: var(--bg2); color: var(--muted); font: inherit; font-size: 12.5px; cursor: pointer; text-align: left; min-width: 0; }
.lpeek:hover, .lpeek:focus-visible { border-color: var(--accent); color: var(--text); outline: none; } .lpeek > .ic:first-child { color: var(--accent2); flex: none; } .lpeek b { color: var(--text); white-space: nowrap; } .lpeek .lpeek-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lpeek > .ic:last-child { margin-left: auto; flex: none; }
.peekrow { padding: 8px 0 0; } .dock-foot .lpeek { border-color: transparent; background: transparent; padding: 4px 2px; } .dock-foot .lpeek:hover { background: var(--bg2); }
@media (max-width: 560px) { .lpeek .lpeek-l { display: none; } }
.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; }
/* the level clock: one red strand under the gold (fx 1.5), and the time by the tag */
.hx-clock { stroke: #FF3B30; stroke-width: 2.6; } .hx-cglow { stroke: #FF3B30; stroke-width: 7; opacity: .2; } .hx-chead { fill: #FFD9D4; stroke: none; filter: drop-shadow(0 0 6px #FF3B30); }
.hx.last .hx-clock { animation: hxBeat .5s ease-in-out infinite; } .hx.last .hx-cglow { animation: hxBeatG .5s ease-in-out infinite; } @keyframes hxBeat { 50% { stroke: #fff; } } @keyframes hxBeatG { 50% { opacity: .45; } }
.hypeleft { color: #FF8A7A; text-shadow: none; font-variant-numeric: tabular-nums; } .hypeleft:empty { display: none; } .hypeleft.last { color: #fff; text-shadow: 0 0 8px #FF3B30; }
@media (prefers-reduced-motion: reduce) { .hx.last .hx-clock, .hx.last .hx-cglow { animation: none; } }
.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 { color: var(--accent2); } .tab .tablock { display: inline-grid; place-items: center; color: var(--accent2); }
.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; }
.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.tag-watch { outline: 1px dashed 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, .sendrow textarea { 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(auto-fit, minmax(220px, 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: calc(var(--topH) + 6px); z-index: 6; margin: 0; padding: 8px 14px; background: color-mix(in srgb, var(--bg2) 94%, transparent); backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: 12px; }      /* inset like every other card, not edge to edge */
.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; }
/* Recent VODs on a profile (pack 1.7): a row of recordings, a tap plays one on Watch */
.vods { margin: 6px 0 14px; } .vodrow { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.vod { display: grid; gap: 7px; padding: 0; text-align: left; background: transparent; border: 0; color: inherit; cursor: pointer; border-radius: 10px; min-width: 0; }
.vod-th { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--bg2); border: 1px solid var(--line); transition: border-color .15s, transform .15s; } .vod-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vod-th::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(0, 0, 0, .35), transparent 70%); opacity: 0; transition: opacity .15s; }
.vod:hover .vod-th, .vod:focus-visible .vod-th { border-color: color-mix(in srgb, var(--accent) 60%, transparent); transform: translateY(-2px); } .vod:hover .vod-th::after { opacity: 1; } .vod:focus-visible { outline: none; }
.vod-len { position: absolute; right: 6px; bottom: 6px; font-style: normal; font-size: 11px; font-weight: 800; padding: 2px 6px; border-radius: 6px; background: rgba(0, 0, 0, .72); color: #fff; }
.vod-t { display: grid; gap: 2px; min-width: 0; } .vod-t b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vod-t small { color: var(--muted); font-size: 12px; }
.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-gatherer { color: #6FD83A; } .rk-hunter { 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):not(.chatbtn) > span, .tools > .pop > .btn.ghost > span { display: none; } .tools > .btn.ghost:not(.endbtn):not(.chatbtn), .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: 1680px) and (min-width: 901px) and (min-height: 501px), (max-width: 1680px) 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: var(--appH, 100dvh); min-height: 0; overflow: hidden; }
body.phone.wallmode main#view { height: calc(var(--appH, 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-sec { margin: 0 0 22px; } .pk-sec-h { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; } .pk-sec-h svg { color: var(--accent); flex: none; } .pk-sec-h b { font-family: var(--display); font-style: var(--slant); font-size: 19px; } .pk-sec-h .note { margin: 0; }
.pk-none { margin: 0; padding: 14px 16px; border: 1px dashed var(--line); border-radius: 12px; }
.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); }
/* Dev Messages: his notes to everyone wear the mark and sit in a lit row */
.np-dev { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 999px; background: var(--grad); color: var(--ink); font-size: 10px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 3px; }
.np-i.ty-dev { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); margin: 2px 0; } .np-i.ty-dev .np-ic { background: var(--grad); color: var(--ink); } .np-i.ty-dev:not(.new) .np-tx b { color: var(--text); }
.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; }
.fl-bell { position: relative; } .fl-bell .navdot { position: absolute; top: -3px; right: -3px; min-width: 15px; height: 15px; font-size: 9.5px; } .notes-panel.from-wall { z-index: 95; }      /* the wall's bell: over the wall (z 92), placed under the bell by the script */
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; }
/* no live follows: the rail is hidden (display none), so without a set column the stage would slide into the rail's empty track and the chat would take the stage's. Pin both. */
.wallwrap.norail .stagecol { grid-column: 2; grid-row: 1; } .wallwrap.norail .side { grid-column: 3; grid-row: 1; }
.wallwrap.railright.norail .stagecol { grid-column: 1; grid-row: 1; } .wallwrap.railright.norail .side { grid-column: 3; grid-row: 1; }
.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; right: 12px; top: calc(50% + 34px); transform: translateY(-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: none; } .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, .prail, .phint, .pgtabs { display: none; }
/* phone 3.0: the peek pill. An 18 px half pill on the right edge with a sliders glyph, a dot when the menu has news. Hold and drag moves it up or down, the rail shows the snap points while it moves. */
body.phone .pedge { display: grid; place-items: center; position: fixed; right: max(0px, env(safe-area-inset-right, 0px)); top: var(--edgeY, 38vh); transform: translateY(-50%); z-index: 57; width: 18px; height: 60px; padding: 0; border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); border-right: 0; border-radius: 12px 0 0 12px; background: color-mix(in srgb, var(--card) 92%, transparent); color: var(--accent2); box-shadow: 0 0 12px -2px color-mix(in srgb, var(--accent) 60%, transparent); cursor: pointer; touch-action: none; transition: width .15s, box-shadow .15s; }
body.phone .pedge::before { content: ''; position: absolute; inset: -12px -8px -12px -16px; }      /* the thumb gets more than the pill */
body.phone .pedge .ic { width: 12px; height: 12px; stroke-width: 2.4; }
body.phone .pedge .pedge-dot { display: none; position: absolute; top: -3px; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent); } body.phone .pedge.dot .pedge-dot { display: block; }
body.phone .pedge[hidden] { display: none; } body.phone .pedge:active, body.phone .pedge.drag { width: 24px; box-shadow: 0 0 18px -2px var(--accent); }
body.phone .prail { display: block; position: fixed; right: 9px; top: 12vh; bottom: 12vh; width: 2px; z-index: 56; background: color-mix(in srgb, var(--accent) 25%, transparent); pointer-events: none; } body.phone .prail[hidden] { display: none; }
body.phone .prail i { position: absolute; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent2); box-shadow: 0 0 6px var(--accent); transform: translateY(-50%); }
body.phone .phint { display: block; position: fixed; right: 26px; top: var(--edgeY, 38vh); transform: translateY(-50%); z-index: 57; padding: 5px 9px; border-radius: 8px; background: var(--card); border: 1px solid var(--line); color: var(--muted); font-size: 11px; font-weight: 700; white-space: nowrap; animation: al-pop .18s ease-out; pointer-events: none; } body.phone .phint[hidden] { display: none; }
/* phone 3.0: the page tabs under the top bar. The row scrolls sideways with no bar, the last button opens More. */
body.phone { --topH: calc(92px + env(safe-area-inset-top, 0px)); }
body.phone .top { height: var(--topH); flex-wrap: nowrap; align-items: flex-start; padding-top: env(safe-area-inset-top, 0px); padding-bottom: 34px; }
body.phone .top > .brand, body.phone .top > .topright { height: 58px; display: flex; align-items: center; }
body.phone .pgtabs { display: flex; align-items: stretch; position: absolute; left: 0; right: 0; bottom: 0; height: 34px; margin: 0; border-top: 1px solid var(--line); overflow: hidden; }
.pgtabs-s { flex: 1; min-width: 0; display: flex; align-items: stretch; gap: 0; padding: 0 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .pgtabs-s::-webkit-scrollbar { display: none; }
.top .pgtabs-s a { flex: none; display: flex; align-items: center; padding: 0 10px; font-size: 13px; font-weight: 800; color: var(--muted); text-decoration: none; position: relative; white-space: nowrap; background: none; border: 0; border-radius: 0; margin: 0; }
.top .pgtabs-s a.on { color: var(--text); background: none; } .top .pgtabs-s a.on::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; border-radius: 1px; background: var(--grad); }
.pgtabs-more { flex: none; width: 44px; border: 0; border-left: 1px solid var(--line); background: linear-gradient(90deg, transparent, var(--bg) 30%); color: var(--text); display: grid; place-items: center; cursor: pointer; padding: 0; }
body.phone .tourchip { display: none; }      /* Show me around lives in More */
body.phone .topright .topmode { display: none; }
.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 { max-width: calc(100% - 52px); white-space: normal; text-align: left; }

/* 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:not(.helppop):not(.optpop), body.simple .tools [aria-label="Controls"], body.simple .tools [aria-label="Balancer"], 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(80px + env(safe-area-inset-top, 0px)); } body.phone.land .top > .brand, body.phone.land .top > .topright { height: 52px; } body.phone.land .pgtabs { height: 28px; } body.phone.land .pgtabs-s a { font-size: 12px; }
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 .prail { top: 14vh; bottom: 14vh; }
/* 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); background-position: var(--patpos, 0 0); }
.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, .phead > .lookfr { z-index: 0; position: absolute; }      /* the header's children sit relative, the motion layer must stay over the whole card */
/* 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, .sendrow.multi textarea { 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 textarea::placeholder, .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); }
/* pills that go somewhere on twitch.tv: a small out arrow, and the hover of a button */
a.cc-fact.go { text-decoration: none; cursor: pointer; color: var(--text); transition: border-color .12s, background .12s; } a.cc-fact.go .ic:last-child { color: var(--muted); opacity: .7; margin-left: -1px; } a.cc-fact.go:hover, a.cc-fact.go:focus-visible { background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 60%, transparent); outline: none; }
/* whispers */
.whisperchip { padding: 0; }      /* the same chip as the bell, with or without the Twitch permission (the dashed ring, the dim glyph and the stray padding went on 5 Oct) */
.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):not(.ovchat), main#view.floating .pane-body > :not(.player):not(iframe):not(.cw-alpha) { 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; }
/* float 1.1: the resize grip sits in the bottom right corner, the top left corner stays put */
.fl-size { position: absolute; right: 0; bottom: 0; z-index: 8; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px 0 12px 0; color: var(--muted); background: color-mix(in srgb, var(--card) 88%, transparent); border-top: 1px solid var(--line); border-left: 1px solid var(--line); cursor: nwse-resize; touch-action: none; }
.fl-size .ic { transform: scaleY(-1); }
.fl-size:hover { color: var(--text); background: var(--card); }
main#view.fl-sizing, main#view.fl-sizing .fl-bar, main#view.fl-sizing .fl-size { cursor: nwse-resize; }
/* float 2.0: the ear in the bottom left corner folds the wall into a sound-only chip; Back to Watch sits by the grip; pop-out to an always-on-top window */
.fl-ear { position: absolute; left: 0; bottom: 0; z-index: 8; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 0 8px 0 12px; color: var(--muted); background: color-mix(in srgb, var(--card) 88%, transparent); border: 0; border-top: 1px solid var(--line); border-right: 1px solid var(--line); cursor: pointer; }
.fl-ear:hover, .fl-ear:focus-visible { color: var(--text); background: var(--card); }
.fl-grip .fl-btn { width: 26px; height: 24px; margin: 0 -2px 0 -4px; }
main#view.floating.chip { width: auto !important; }
main#view.floating.chip .wallwrap { width: 0; height: 0 !important; overflow: hidden; }      /* the players keep their size out of sight and keep playing */
main#view.floating.chip .fl-size, main#view.floating.chip .fl-ear { display: none; }
main#view.floating.chip .fl-bar { border-bottom: 0; padding-right: 8px; }
main#view.floating.chip .fl-grip b::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: fl-live 1.6s ease-in-out infinite; vertical-align: 1px; }
@keyframes fl-live { 50% { opacity: .35; } }
/* the wall in its own window: it fills the window, cells share the space, the bar has no Back to Watch and no grips */
body.popwall { margin: 0; background: var(--bg); overflow: hidden; }
main#view.floating.popped { position: static !important; width: 100% !important; height: 100vh; border: 0; border-radius: 0; box-shadow: none; }
main#view.floating.popped .fl-bar { cursor: default; }
main#view.floating.popped .wallwrap { flex: 1; min-height: 0; display: flex !important; flex-direction: column; }
main#view.floating.popped .stagecol { flex: 1; min-height: 0; display: flex; flex-direction: column; }
main#view.floating.popped .stage { flex: 1; min-height: 0; grid-template-columns: repeat(var(--fc, 2), minmax(0, 1fr)) !important; grid-template-rows: repeat(var(--fr, 1), minmax(0, 1fr)) !important; grid-auto-rows: minmax(0, 1fr); }
main#view.floating.popped .pane { min-height: 0; }
main#view.floating.popped .fl-size, main#view.floating.popped .fl-ear { display: none; }
main#view.floating.fl-dodge { transition: transform .38s cubic-bezier(.2, .8, .2, 1); }      /* a top bar popout opened over it: it slides aside, and back */
/* popouts from the top bar (your card, notifications, whispers) roll open from their top edge with a soft shine across */
.popout { animation: pop-roll .3s cubic-bezier(.2, .8, .2, 1) both; transform-origin: top right; position: fixed; }
.popout::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .13) 45%, rgba(255, 255, 255, .05) 52%, transparent 62%); background-size: 260% 100%; background-position: 130% 0; animation: pop-shine .9s ease-out .12s both; }
@keyframes pop-roll { from { opacity: 0; transform: translateY(-6px) scaleY(.82); clip-path: inset(0 0 100% 0 round 14px); } 60% { clip-path: inset(0 0 0 0 round 14px); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 14px); } }
@keyframes pop-shine { from { background-position: 130% 0; } to { background-position: -130% 0; } }
@media (prefers-reduced-motion: reduce) { .popout, .popout::after, main#view.floating.fl-dodge { animation: none; transition: 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-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; }
/* The running chat preview wears the real feed's mention effects and Packmate callouts */
.pv-chat.feed { position: relative; inset: auto; overflow: hidden; padding: 6px 4px; background: none; justify-content: flex-end; height: 300px; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 34px); mask-image: linear-gradient(to bottom, transparent 0, #000 34px); }
.feed .bb.pv-on > .pv-chat.feed, .dock-foot .bb.pv-on > .pv-chat.feed { height: auto; min-height: 0; flex: 1 1 0; }
.pv-chat .ln.pv-msg { padding: 4px 6px; overflow-wrap: normal; flex: none; }
.pv-msg .m { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-msg .at { font-weight: 800; } .pv-msg .at.me { color: var(--accent2); }
.pv-fxtag { flex: none; margin-left: 6px; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 1px 6px; border-radius: 99px; color: var(--accent2); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); }
.pv-chat .jf-call { flex: none; margin: 2px 0; }
.pv-chat .jf-call .pv-face { box-shadow: 0 0 0 2px var(--card); }
.pv-new { animation: pvIn .38s cubic-bezier(.2, .8, .2, 1); }
@keyframes pvIn { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .pv-new { animation: none; } }
.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; }
}

/* 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-builds { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; border: 1px dashed var(--line); font-size: 12px; color: var(--muted); } .faq-builds > b { font-family: var(--display); font-style: var(--slant); text-transform: var(--caps); letter-spacing: var(--track); color: var(--text); font-size: 12px; } .faq-build { display: inline-flex; align-items: center; gap: 6px; } .faq-build code { font-size: 11.5px; padding: 2px 6px; border-radius: 6px; background: var(--bg2); color: var(--text); }
.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, .sendrow.replying textarea { 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; }
/* Stampede calendar (stcal): Month and Week. Blood Twins gold, Packmates orange, yours in the accent. */
.st-view { margin-bottom: 14px; } .st-cols.cal { grid-template-columns: minmax(0, 1fr) 300px; }
.stcal { --twin: #F3C95A; --mate: #FF8A2A; display: grid; gap: 10px; min-width: 0; }
.sc-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .sc-nav { display: inline-flex; gap: 4px; } .sc-nav .flip svg { transform: scaleX(-1); }
.sc-title { font-family: var(--display); font-style: var(--slant); text-transform: var(--caps); font-size: 17px; margin-right: auto; } .sc-only { margin-left: auto; }
.sc-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.sc-dow { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; padding: 0 4px 2px; }
.sc-day { min-height: 104px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 5px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sc-day.out { opacity: .45; } .sc-day.past .sc-num { color: var(--muted); } .sc-day.today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.sc-num { font-size: 12px; font-variant-numeric: tabular-nums; } .sc-day.today .sc-num { color: var(--accent); }
.sc-chip { display: flex; align-items: center; gap: 5px; min-width: 0; padding: 3px 6px; border-radius: 5px; font-size: 12px; color: var(--text); text-decoration: none; background: var(--bg2); border-left: 3px solid var(--muted); }
.sc-chip:hover { background: color-mix(in srgb, var(--accent) 14%, var(--bg2)); }
.sc-chip .sc-t { color: var(--muted); font-variant-numeric: tabular-nums; flex: none; } .sc-chip .sc-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.sc-chip.st-picks { border-left-color: var(--accent2); } .sc-chip.st-set { border-left-color: var(--good); } .sc-chip.st-live { border-left-color: var(--live); } .sc-chip.st-done { opacity: .55; }
.sc-chip.mine { box-shadow: inset 0 0 0 1px var(--accent); }
.sc-me { font-style: normal; font-size: 10px; font-weight: 700; color: var(--accent); flex: none; }
.sc-pack { display: inline-flex; flex: none; } .sc-pack .face { margin-left: -4px; box-shadow: 0 0 0 2px var(--mate); } .sc-pack .face:first-child { margin-left: 0; } .sc-pack .face.twin { box-shadow: 0 0 0 2px var(--twin); } .sc-pack small { font-size: 10px; color: var(--muted); margin-left: 3px; }
.sc-more { background: none; border: 0; color: var(--muted); font-size: 11px; padding: 0 4px; text-align: left; cursor: pointer; } .sc-more:hover { color: var(--accent); }
.sc-week { display: grid; grid-template-columns: 48px repeat(7, minmax(0, 1fr)); gap: 4px; }
.sc-axis { display: grid; grid-template-rows: 26px repeat(var(--rows), var(--px)); } .sc-hr { font-size: 10px; color: var(--muted); text-align: right; padding-right: 6px; transform: translateY(-6px); }
.sc-col { display: grid; grid-template-rows: 26px auto; min-width: 0; } .sc-colh { font-size: 12px; text-align: center; padding-top: 4px; } .sc-col.today .sc-colh { color: var(--accent); }
.sc-lane { position: relative; height: calc(var(--rows) * var(--px)); background: repeating-linear-gradient(var(--card) 0 calc(var(--px) - 1px), var(--line) calc(var(--px) - 1px) var(--px)); border-radius: 6px; border: 1px solid var(--line); }
.sc-col.today .sc-lane { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.sc-slot { --sc: var(--muted); position: absolute; left: 3px; right: 3px; border-radius: 5px; padding: 2px 5px; overflow: hidden; display: flex; flex-direction: column; gap: 1px; text-decoration: none; color: var(--text); font-size: 11px;
  background: color-mix(in srgb, var(--sc) 22%, var(--bg2)); border-left: 3px solid var(--sc); }
.sc-slot:hover { background: color-mix(in srgb, var(--sc) 34%, var(--bg2)); z-index: 2; }
.sc-slot.open { background: transparent; border: 1px dashed var(--line); border-left: 3px dashed var(--muted); color: var(--muted); }
.sc-slot.mine { box-shadow: inset 0 0 0 2px var(--accent); } .sc-slot.twin { box-shadow: inset 0 0 0 2px var(--twin); } .sc-slot.mate { box-shadow: inset 0 0 0 2px var(--mate); }
.sc-slot.live { animation: scLive 2s ease-in-out infinite; } @keyframes scLive { 50% { box-shadow: inset 0 0 0 2px var(--live); } }
.sc-slot .sc-st { font-weight: 700; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-who { display: flex; align-items: center; gap: 4px; min-width: 0; } .sc-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--live); z-index: 3; } .sc-now::before { content: ''; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--live); }
.sc-legend { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-size: 12px; color: var(--muted); }
.sc-key { display: inline-flex; align-items: center; gap: 5px; } .sc-key i { width: 10px; height: 10px; border-radius: 3px; background: var(--muted); }
.sc-key.st-picks i { background: var(--accent2); } .sc-key.st-set i { background: var(--good); } .sc-key.st-live i { background: var(--live); }
.sc-key.mine i { background: transparent; box-shadow: inset 0 0 0 2px var(--accent); } .sc-key.twin i { background: #F3C95A; } .sc-key.mate i { background: #FF8A2A; }
.sc-tz { margin-left: auto; } .sc-empty { margin: 0; }
@media (max-width: 1100px) { .st-cols.cal { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px), (max-height: 500px) and (hover: none) and (pointer: coarse) {
  .sc-day { min-height: 64px; padding: 3px; } .sc-chip .sc-t, .sc-chip .sc-me, .sc-chip .sc-pack { display: none; } .sc-chip { font-size: 10px; padding: 2px 4px; }
  .sc-week { grid-template-columns: 34px repeat(7, minmax(64px, 1fr)); overflow-x: auto; } .sc-title { width: 100%; order: -1; } .sc-only { margin-left: 0; }
}
/* support chips on the pane bar: Subscribe and Bits for the channel in that pane */
.pane-sup { display: inline-flex; gap: 4px; margin-right: 4px; align-items: center; }
.supchip { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 700; text-decoration: none; color: var(--text); background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); white-space: nowrap; }
.supchip:hover { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.supchip.bits { background: color-mix(in srgb, var(--accent2) 10%, transparent); border-color: color-mix(in srgb, var(--accent2) 40%, transparent); }
.supchip.bits:hover { background: var(--accent2); color: var(--ink); }
@container (max-width: 440px) { .supchip span { display: none; } .supchip { padding: 0 6px; } }
@container (max-width: 340px) { .pane-sup { display: none; } }
/* nav 1.1: links that do not fit tuck into More */
.mainnav a[hidden], .navmore[hidden] { display: none !important; }
.navmore { flex: none; display: flex; }
.navmorebtn { display: flex; align-items: center; gap: 6px; padding: 8px 11px; border-radius: 999px; border: 0; background: none; color: var(--muted); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap; }
.navmorebtn:hover, .navmorebtn[aria-expanded="true"] { color: var(--text); background: var(--bg2); } .navmorebtn.on { color: var(--ink); background: var(--grad); }
.navpop { position: fixed; z-index: 90; min-width: 200px; display: none; flex-direction: column; gap: 2px; padding: 6px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 14px 40px rgba(0,0,0,.5); }
.navpop.open { display: flex; }
.navpop a { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 8px; color: var(--text); text-decoration: none; font-weight: 600; font-size: 14px; }
.navpop a:hover { background: var(--bg2); } .navpop a.on { color: var(--ink); background: var(--grad); } .navpop a .ic { display: inline-block !important; }
/* Memberships 3.0 (look C, two levels, option B): status, spotlight, Explorer and Member, gift banner */
.mbxpage { --m0: #B9A99C; --m1: #FF8A3D; --m2: #5CC8FF; --m3: #F3D98B; --mg: #FF7DA3; }
.mbx-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px; align-items: stretch; margin: 6px 0 16px; }
.mbx-status { --mt: var(--m0); display: flex; flex-direction: column; gap: 10px; padding: 22px; border-color: color-mix(in srgb, var(--mt) 45%, var(--line)); background: radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--mt) 22%, transparent), transparent 62%), var(--card); }
.mbx-status.t1 { --mt: var(--m1); } .mbx-status.t2 { --mt: var(--m2); } .mbx-status.t3 { --mt: var(--m3); }
.mbx-status .tierpill { align-self: flex-start; }
.mbx-status h2 { margin: 0; font-family: var(--display); font-style: var(--slant); text-transform: var(--caps); font-size: clamp(30px, 3.2vw, 44px); color: var(--mt); line-height: 1; }
.mbx-src { margin: 0; color: var(--muted); }
.mbx-bar { height: 8px; border-radius: 6px; background: var(--bg2); overflow: hidden; } .mbx-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--mt), color-mix(in srgb, var(--mt) 45%, #fff)); }
.mbx-dna { color: var(--muted); } .mbx-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.mbx-spot { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.mbx-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.mbx-tabs button { border: 0; border-radius: 999px; padding: 6px 12px; background: var(--bg2); color: var(--muted); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.mbx-tabs button.on { background: var(--grad); color: var(--ink); }
.mbx-stage { position: relative; aspect-ratio: 16 / 8.2; border-radius: 10px; overflow: hidden; background: #000; border: 1px solid var(--line); }
.mbx-stage video { width: 100%; height: 100%; object-fit: cover; display: block; }
.mbx-stage.noclip { background: repeating-linear-gradient(135deg, var(--bg2) 0 14px, var(--card) 14px 28px); } .mbx-stage.noclip video { display: none; }
.mbx-cap { display: grid; gap: 2px; } .mbx-cap b { font-size: 15px; } .mbx-cap small { color: var(--muted); }
.mbx-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 12px; }
.mbx-card.t1 { background: linear-gradient(160deg, color-mix(in srgb, var(--m1) 12%, transparent), var(--card) 55%); } .mbx-card.t1 ul { grid-template-columns: 1fr 1fr; }
.mbx-nums { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; } .mbx-nums div { flex: 1; min-width: 70px; background: var(--bg2); border-radius: 10px; padding: 8px 10px; text-align: center; } .mbx-nums b { display: block; font-size: 20px; color: var(--m1); font-family: var(--display); font-style: var(--slant); } .mbx-nums small { color: var(--muted); font-size: 11.5px; }
.mbx-levels { display: grid; gap: 12px; }
.mbx-strip { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 12px 16px; } .mbx-strip h3 { margin: 0; font-family: var(--display); font-style: var(--slant); text-transform: var(--caps); font-size: 20px; color: var(--m0); } .mbx-strip .note { margin: 0; flex: 1; min-width: 240px; } .mbx-strip.mine { box-shadow: 0 0 0 2px var(--m0); }
.mbx-board { display: grid; grid-template-columns: 1.5fr 1fr; gap: 22px; padding: 22px; border-color: color-mix(in srgb, var(--m1) 45%, var(--line)); background: linear-gradient(160deg, color-mix(in srgb, var(--m1) 14%, transparent), var(--card) 45%); } .mbx-board.mine { box-shadow: 0 0 0 2px var(--m1); }
.mbx-board h3 { margin: 6px 0 0; font-family: var(--display); font-style: var(--slant); text-transform: var(--caps); font-size: clamp(28px, 3vw, 40px); color: var(--m1); line-height: 1; }
.mbx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; } .mbx-grid > div { display: flex; gap: 10px; align-items: flex-start; background: var(--bg2); border-radius: 10px; padding: 10px 12px; } .mbx-grid .ic { color: var(--m1); flex: none; margin-top: 2px; } .mbx-grid b { display: block; font-size: 13.5px; } .mbx-grid small { color: var(--muted); font-size: 12px; }
.mbx-side { display: grid; gap: 12px; align-content: start; } .mbx-price { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: grid; gap: 8px; } .mbx-price b { font-size: 28px; font-family: var(--display); font-style: var(--slant); text-transform: var(--caps); } .mbx-price > span { color: var(--muted); font-size: 13px; }
.mbx-cta { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 4px 6px; } .mbx-cta .note { margin: 0; }
.mbx-card { --mt: var(--m0); display: flex; flex-direction: column; gap: 8px; padding: 16px; border-top: 3px solid var(--mt); }
.mbx-card.t1 { --mt: var(--m1); } .mbx-card.t2 { --mt: var(--m2); } .mbx-card.t3 { --mt: var(--m3); }
.mbx-card.mine { box-shadow: 0 0 0 2px var(--mt), 0 10px 30px -12px color-mix(in srgb, var(--mt) 60%, transparent); }
.mbx-card-t { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mbx-card h3 { margin: 0; font-family: var(--display); font-style: var(--slant); text-transform: var(--caps); font-size: 22px; color: var(--mt); }
.mbx-req, .mbx-rate { color: var(--muted); font-size: 12px; }
.mbx-card ul { list-style: none; margin: 2px 0; padding: 0; display: grid; gap: 6px; } .mbx-card li { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; } .mbx-card li .ic { color: var(--mt); flex: none; margin-top: 2px; }
.mbx-card .btn, .mbx-in { margin-top: auto; align-self: flex-start; } .mbx-in { font-size: 12.5px; font-weight: 700; color: var(--mt); }
.mbx-gift { margin: 16px 0 10px; padding: 16px 18px; border-radius: var(--r); border: 1px solid color-mix(in srgb, var(--mg) 45%, var(--line)); background: linear-gradient(90deg, color-mix(in srgb, var(--mg) 16%, var(--card)), var(--card)); }
.mbx-gift-t { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .mbx-gift-t > .ic { color: var(--mg); flex: none; }
.mbx-gift-t > div { flex: 1; min-width: 240px; display: grid; gap: 2px; } .mbx-gift-t b { font-size: 18px; } .mbx-gift-t span { color: var(--muted); font-size: 13.5px; }
.mbx-gift .passblock { margin-top: 12px; }
.mbx-all { margin-top: 18px; } .mbx-all > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; } .mbx-all > summary::-webkit-details-marker { display: none; }
.mbx-all > summary::after { content: '+'; font-weight: 900; color: var(--accent); } .mbx-all[open] > summary::after { content: '−'; }
@media (max-width: 1100px) { .mbx-hero { grid-template-columns: 1fr; } .mbx-board { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .mbx-row { grid-template-columns: 1fr; } .mbx-card.t1 ul, .mbx-grid { grid-template-columns: 1fr; } } @media (max-width: 560px) { .mbx-status { padding: 16px; } }
.mbx-status > .btn { align-self: flex-start; }
.mbx-have { display: grid; gap: 8px; padding: 12px 0 4px; border-top: 1px solid var(--line); }
.mbx-have-h { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mt); }
.mbx-have ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.mbx-have li { display: flex; gap: 10px; align-items: flex-start; } .mbx-have li .ic { color: var(--mt); flex: none; margin-top: 2px; }
.mbx-have li span { display: grid; gap: 1px; } .mbx-have li b { font-size: 14px; } .mbx-have li small { color: var(--muted); font-size: 12.5px; }
/* emote picker: one scroll area, a header per group like Twitch's own picker */
.pick-scroll { max-height: 300px; overflow-y: auto; margin-top: 6px; display: grid; gap: 4px; }
.pick-scroll .pick-grid { max-height: none; overflow: visible; margin-top: 0; }
.pick-h { margin: 6px 2px 0; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); position: sticky; top: 0; background: var(--card); padding: 3px 0; z-index: 1; }
/* Hunting Party claim for Twitch Team owners */
.hp-team { display: grid; gap: 10px; margin-top: 14px; border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.hp-team-h { display: flex; gap: 12px; align-items: center; } .hp-team-h .ic { color: var(--accent); } .hp-team-h div { display: grid; } .hp-team-h small { color: var(--muted); }
.hp-code { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--bg2); font-size: 13px; color: var(--muted); }
.hp-code code { font-size: 15px; font-weight: 800; color: var(--text); padding: 3px 8px; border-radius: 6px; background: var(--card); border: 1px dashed var(--accent); }
.hp-team-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.hp-teamlink { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 12.5px; font-weight: 700; color: var(--accent); text-decoration: none; } .hp-teamlink:hover { text-decoration: underline; }
.supchip.pts { cursor: default; background: color-mix(in srgb, var(--good) 10%, transparent); border-color: color-mix(in srgb, var(--good) 40%, transparent); } .supchip.pts b { font-variant-numeric: tabular-nums; } .supchip.pts:hover { background: color-mix(in srgb, var(--good) 10%, transparent); color: var(--text); border-color: color-mix(in srgb, var(--good) 40%, transparent); }
@container (max-width: 440px) { .supchip.pts b { display: inline; } }

/* Hunting Parties: the public list on /den */
.hp-dir { margin-top: 28px; }
.hp-dir > .note { margin: 4px 0 12px; }
.hp-dsearch { display: flex; align-items: center; gap: 8px; max-width: 460px; margin: 0 0 14px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); color: var(--muted, inherit); }
.hp-dsearch input { flex: 1; border: 0; background: transparent; color: inherit; padding: 10px 0; font: inherit; outline: none; }
.hp-dgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.hp-dcard { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
.hp-dcard:hover { border-color: var(--accent); transform: translateY(-1px); }
.hp-dt { display: grid; gap: 2px; min-width: 0; }
.hp-dt b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-dt small { font-size: 12px; opacity: .75; }
.hp-dt .hp-dteam { color: var(--accent); opacity: 1; font-weight: 700; }
.hp-dt p { margin: 4px 0 0; font-size: 12.5px; opacity: .85; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hp-dfoot { display: flex; justify-content: center; margin-top: 12px; }
.hp-dfoot:empty { display: none; }
.hp-all { margin-top: 12px; }
.hp-back { margin-bottom: 4px; }
.packgo .btn { margin-top: 8px; }

/* One AlphaLurk at a time: the card a second tab waits behind */
body.soloing > *:not(.solo) { display: none !important; }
.solo { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 16px; background: var(--bg); }
.solo-card { max-width: 440px; text-align: center; display: grid; justify-items: center; gap: 12px; padding: 28px 24px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.solo-card h2 { margin: 4px 0 0; font: 900 22px var(--display); font-style: var(--slant); }
.solo-card p { margin: 0; opacity: .8; line-height: 1.5; }
.solo-card .btn { min-width: 220px; justify-content: center; }

/* Sub card on the pane bar: three tiers with their emotes */
.subpop { position: fixed; z-index: 900; width: 340px; max-width: calc(100vw - 16px); display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); box-shadow: 0 18px 50px rgba(0,0,0,.45); }
.subpop-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.subpop-h b { font-size: 14px; }
.subpop-x { background: none; border: 0; color: inherit; opacity: .7; cursor: pointer; padding: 4px; }
.subpop-t { display: grid; gap: 4px; padding: 10px; border-radius: 10px; border: 1px solid var(--line); }
.subpop-t.t2 { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.subpop-t.t3 { border-color: color-mix(in srgb, var(--accent2) 55%, var(--line)); }
.subpop-tt { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.subpop-tt b { font-size: 14px; }
.subpop-t p { margin: 0; font-size: 12px; opacity: .8; line-height: 1.4; }
.subpop-em { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 28px; }
.subpop-em small { font-size: 11px; opacity: .65; }
.subpop-fine { margin: 0; font-size: 11px; opacity: .6; }
/* rail icons: the streak ring sits around the picture, never over it */
.av > .streak.rl-ring { background: none; border: 0; z-index: 1; pointer-events: none; }

/* a pane holding a chat: Twitch's chat fills it */
.pane.chatpane .pane-body { background: var(--bg2); }
.pane-body > iframe.panechat { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.pane.chatpane .pane-id svg { color: var(--accent); flex: none; }

/* the channel card floats over the page so a short pane never cuts it off */
.chancard.floaty { position: fixed; z-index: 950; width: 320px; max-width: calc(100vw - 16px); overflow-y: auto; overscroll-behavior: contain; }

/* FAQ after an update: the nav link pulses until opened, then the newest release is pointed out */
@keyframes newpulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 65%, transparent); } 60% { box-shadow: 0 0 0 7px transparent; } }
a.newpulse { position: relative; color: var(--accent) !important; animation: newpulse 1.6s ease-out infinite; border-radius: 999px; }
a.newpulse::after { content: ''; position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.navmore:has(.newpulse) .navmorebtn { animation: newpulse 1.6s ease-out infinite; border-radius: 999px; color: var(--accent); }
.faq-rel.faq-new { border: 1px solid var(--accent); border-radius: var(--r); padding: 8px 10px; animation: newpulse 1.6s ease-out 4; background: color-mix(in srgb, var(--accent) 8%, transparent); }
.faq-rel.faq-new-settle { animation: none; }
.faq-newtag { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; color: var(--ink, #140700); background: var(--accent); vertical-align: middle; }

/* Discovery tools: a labelled Sort by row and a labelled Filter row */
.disc-grp { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.disc-sortrow { flex: 1 1 100%; flex-wrap: nowrap; }
.disc-filters { flex: 1 1 100%; }
.disc-lbl { flex: none; min-width: 52px; font: 800 11px var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.disc-tool .chip.clr { border-style: dashed; }

/* Profile look, compact: preview and chip rows left, palettes as small swatches right */
.looksbox.compact { grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: 12px 22px; align-items: start; padding: 14px 16px; margin-bottom: 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.looksbox.compact .lk-left { display: grid; gap: 10px; min-width: 0; }
.looksbox.compact .lk-right { min-width: 0; }
.looksbox.compact .lookpv.mini { padding: 10px 12px; margin: 0; gap: 12px; }
.looksbox.compact .lookpv.mini h1 { font-size: 22px; margin: 0; }
.looksbox.compact .lookpv.mini .lookface { width: 44px; height: 44px; }
.looksbox.compact .lk-left > .note { margin: 0; font-size: 12px; }
.looksbox.compact .lookgroup h3 { margin: 2px 0 6px; }
.looksbox.compact .pals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }
.looksbox.compact .bundle { margin: 0; }
.looksbox.compact .bh { margin-bottom: 5px; gap: 8px; flex-wrap: wrap; }
.looksbox.compact .bh .lock { font-size: 11px; }
.looksbox.compact .sw { gap: 6px; }
.looksbox.compact .sw .s { width: 30px; height: 30px; border-radius: 50%; }
.looksbox.compact .sw .s i { height: 100%; }
.looksbox.compact .sw .s span { display: none; }
.looksbox.compact .sw .s.on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.looksbox.compact .lchip { padding: 4px 10px; font-size: 12px; }
#looks { display: flex; align-items: center; gap: 8px; }
#looks .lk-fold { margin-left: auto; }
.looksbox.compact .lk-chips { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 18px; padding-top: 10px; border-top: 1px solid var(--line); }
.looksbox.compact .lk-chips .lookgroup > .note { margin: 0 0 6px; font-size: 11.5px; }
@media (max-width: 1100px) { .looksbox.compact .lk-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .looksbox.compact { grid-template-columns: 1fr; } }
/* the look menu to the right of the profile card (9 Oct) */
.youwrap { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 14px; align-items: start; margin-bottom: 8px; } .youwrap.shut { grid-template-columns: minmax(0, 1fr) auto; } .youwrap > .phead { margin-bottom: 0; }
.lookmenu { min-width: 0; } .lookmenu .sectionh { margin: 0 0 8px; display: flex; align-items: center; } .lookmenu .looksbox.compact { grid-template-columns: 1fr; gap: 10px; padding: 12px; margin: 0; max-height: min(72vh, 640px); overflow: auto; }
.lookmenu .looksbox.compact .lookpv { display: none; } .lookmenu .looksbox.compact .pals { grid-template-columns: 1fr; gap: 8px; } .lookmenu .looksbox.compact .lk-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.lookmenu .looksbox.compact .sw .s { width: 26px; height: 26px; }
@media (max-width: 1000px) { .youwrap, .youwrap.shut { grid-template-columns: 1fr; } .lookmenu .looksbox.compact { max-height: none; } }
@media (max-width: 560px) { .looksbox.compact .pals, .looksbox.compact .lk-chips { grid-template-columns: 1fr; } }

/* Hunting Parties home: the list on the left, forming one on the right */
.hp-homecols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: 24px; align-items: start; }
.hp-homecols .hp-dir { margin-top: 0; }
.hp-homecols .hp-dir > .sectionh:first-child, .hp-side > .sectionh:first-child { margin-top: 0; }
.hp-side { display: grid; gap: 12px; min-width: 0; }
.hp-side > * { margin: 0; }
.hp-homecols .hp-dgrid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
@media (max-width: 900px) { .hp-homecols { grid-template-columns: 1fr; } }

/* Companion: Try it */
.cdemo { margin: 28px 0 0; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.cdemo h2 { margin: 0 0 6px; }
.cdemo-row { display: flex; gap: 8px; margin: 10px 0; flex-wrap: wrap; }
.cdemo-in { flex: 1 1 200px; min-width: 0; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg2); color: var(--text); font: inherit; }
.cdemo-sw { display: flex; gap: 18px; flex-wrap: wrap; margin: 6px 0 12px; }
.cdemo-t { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; }
.cdemo-t input { accent-color: var(--accent); width: 16px; height: 16px; }
.cdemo-stage { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 8px; padding: 3px; border-radius: 12px; border: 2px solid transparent; transition: border-color .3s, box-shadow .3s; }
.cdemo-stage.hype { border-color: #E9C46A; box-shadow: 0 0 22px -4px #E9C46A; }
.cdemo-player, .cdemo-chat { background: var(--bg2); border-radius: 10px; overflow: hidden; min-height: 240px; }
.cdemo-player { aspect-ratio: 16 / 9; transition: opacity .6s; }
.cdemo-stage.ad .cdemo-player { opacity: .3; }
.cdemo iframe { width: 100%; height: 100%; border: 0; display: block; }
.cdemo-st { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 14px 0 8px; font-size: 14px; }
.cdemo-st dt { color: var(--muted); } .cdemo-st dd { margin: 0; font-weight: 700; }
.cdemo-pv { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 720px) { .cdemo-stage { grid-template-columns: 1fr; } .cdemo-chat { height: 320px; } }

/* Chat Widget pane bar: label, the channel in its stream's color, icon buttons that stay on one line */
.pane.chatpane .pane-id { gap: 6px; }
.pane.chatpane .pane-id .cw-l { font-size: 12px; font-weight: 700; color: var(--muted); flex: none; }
.pane.chatpane .pane-id b.cw-n { color: var(--pc); }
.pane.chatpane .pane-acts { flex-wrap: nowrap; }

/* Chat Widget: AlphaChat body with its own send box, and the view switch on the bar */
.cw-alpha { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--card); }
.cw-alpha .cw-feed { position: relative; inset: auto; flex: 1 1 auto; min-height: 0; }
.cw-alpha .ask { padding: 14px; display: grid; gap: 8px; justify-items: start; }
.cw-send { display: flex; gap: 6px; padding: 6px; border-top: 1px solid var(--line); background: var(--bg2); }
.cw-send input { flex: 1; min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: 999px; color: var(--text); padding: 6px 12px; font: inherit; }
.pane.chatpane .cw-seg button { padding: 2px 8px; font-size: 11px; white-space: nowrap; }
.pane.chatpane .ember, .pane.chatpane .gatenote, .pane.chatpane .unmute { display: none !important; }
.chatdef { display: grid; gap: 6px; margin: 10px 0; }
/* Offline channels (Account): Nothing or Autoswitch, and the order of preference with up and down */
.fld.offline { display: grid; gap: 6px; margin: 10px 0; } .fld.offline .seg { justify-self: start; }
.nextorder { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; max-width: 520px; } .nextorder[hidden] { display: none; }
.nextorder li { display: grid; grid-template-columns: 22px 1fr auto auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg2); }
.nextorder .no-n { font-style: normal; font-family: var(--display); font-size: 13px; color: var(--accent); text-align: center; } .nextorder .no-t { display: grid; gap: 1px; min-width: 0; font-weight: 400; } .nextorder .no-t b { font-size: 13px; } .nextorder .no-t small { color: var(--muted); font-size: 12px; }
.nextorder .no-mv { width: 28px; height: 26px; padding: 0; display: grid; place-items: center; } .nextorder .no-mv:disabled { opacity: .3; cursor: default; }
/* the countdown in a pane whose stream ended: five, four, three, then the next stream */
.nextup { position: absolute; inset: 0; z-index: 6; display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center; padding: 16px; background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: nextup-in .3s ease-out both; }
.nextup b { font-size: 14px; } .nextup small { color: var(--muted); font-size: 12px; }
.nextup-n { font-family: var(--display); font-style: var(--slant); font-size: 54px; line-height: 1; color: var(--accent); text-shadow: 0 0 24px color-mix(in srgb, var(--accent) 60%, transparent); min-height: 54px; }
.nextup.busy .nextup-n { width: 26px; height: 26px; min-height: 0; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--accent); animation: spin .8s linear infinite; margin: 14px 0; }
@keyframes nextup-in { from { opacity: 0; } } @keyframes spin { to { transform: rotate(360deg); } }

/* View chip on the pane bar: Video, Chat or Both */
.pvchip { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--pc, var(--accent)) 55%, var(--line)); background: color-mix(in srgb, var(--pc, var(--accent)) 12%, var(--card)); color: var(--text); font: 800 11px var(--body); cursor: pointer; flex: none; }
.pvchip svg { width: 12px; height: 12px; color: var(--pc, var(--accent)); }
.pvchip.v-both { background: color-mix(in srgb, var(--pc, var(--accent)) 26%, var(--card)); }
.pviewpop { position: fixed; z-index: 960; display: grid; gap: 2px; padding: 4px; min-width: 128px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); box-shadow: 0 14px 34px rgba(0,0,0,.45); }
.pviewpop .vp { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 0; border-radius: 7px; background: none; color: var(--text); font: 700 12.5px var(--body); cursor: pointer; text-align: left; }
.pviewpop .vp:hover { background: var(--bg2); } .pviewpop .vp.on { background: var(--accent); color: var(--ink); }
/* Both and Fusion on the desktop: AlphaChat over the lower part of the video */
.ovchat.both { font-size: 13px; max-height: var(--bh, 58%); padding: 40px 10px 8px; }
[data-bsize="s"] .ovchat.both { font-size: 11.5px; } [data-bsize="l"] .ovchat.both { font-size: 15px; } [data-bsize="xl"] .ovchat.both { font-size: 17.5px; }
[data-bwidth="left"] .ovchat.both { right: 50%; } [data-bwidth="right"] .ovchat.both { left: 50%; }
[data-bpos="top"] .ovchat.both { top: 36px; bottom: auto; padding: 8px 48px 10px 10px; justify-content: flex-start; } [data-bpos="top"] .ovchat.both .ov-gear { top: 8px; }
[data-bpos="top"] .ovchat.both::before { background: linear-gradient(0deg, transparent, rgba(0, 0, 0, .58) 45%); mask: linear-gradient(0deg, transparent, #000 40%); -webkit-mask: linear-gradient(0deg, transparent, #000 40%); }
[data-bfx="shadow"] .ovchat.both::before, [data-bfx="none"] .ovchat.both::before { display: none; }
[data-bfx="shadow"] .ovchat.both .ov-list .ln { text-shadow: 0 1px 2px #000, 0 0 8px #000, 0 0 2px #000; }
[data-bfx="none"] .ovchat.both .ov-list .ln { text-shadow: none; }
[data-bfx="dark"] .ovchat.both::before { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(0, 0, 0, .62); mask: none; -webkit-mask: none; }
.pane:has(> .ovchat.both) > .unmute { z-index: 6; }
.ov-gear { position: absolute; top: 8px; right: 8px; z-index: 2; pointer-events: auto; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--pc, var(--accent)); background: rgba(10, 8, 7, .85); color: #fff; cursor: pointer; opacity: .9; box-shadow: 0 2px 10px rgba(0, 0, 0, .6); transition: transform .15s, opacity .15s; }
.ov-gear svg { width: 17px; height: 17px; } .ov-gear:hover, .ov-gear:focus-visible { opacity: 1; transform: rotate(45deg) scale(1.08); background: var(--pc, var(--accent)); }
.fl-chatset { color: var(--accent) !important; }
.ovsetpop { position: fixed; z-index: 400; width: 310px; padding: 12px; display: grid; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 20px 50px -12px rgba(0, 0, 0, .75); }
.ovset-h { font-family: var(--display); font-style: var(--slant); text-transform: var(--caps); letter-spacing: var(--track); font-size: 14px; } .ovset-s { color: var(--muted); font-size: 12px; margin-top: -6px; }
.ovset-b { display: grid; gap: 8px; } .ovset-r { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .ovset-r .k { font-size: 12.5px; color: var(--muted); }
/* lines fill from the bottom of their box and get cut at the top; the box to type never leaves the overlay */
.ovchat.both { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; }
.ovchat.both .ov-list { flex: 0 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; }
.ovchat.both .ov-list > * { flex: none; }
.ovchat.both .ov-form, .ovchat.both .ov-pill { flex: none; } .ovchat.both .ov-pill { align-self: flex-start; }
.ovchat.both .ov-form input { height: 32px; }

/* Cheer chip and its amounts */
.supchip.cheer { cursor: pointer; font: inherit; font-size: 11px; font-weight: 700; background: color-mix(in srgb, #9147FF 14%, transparent); border-color: color-mix(in srgb, #9147FF 45%, transparent); }
.supchip.cheer:hover { background: #9147FF; color: #fff; border-color: #9147FF; }
.cheerpop { position: fixed; z-index: 960; display: grid; gap: 8px; padding: 10px; width: 236px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: 0 14px 34px rgba(0,0,0,.45); }
.cheerpop-h { font-size: 12.5px; }
.cheerpop-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cheeramt { padding: 7px 0; border-radius: 8px; border: 1px solid color-mix(in srgb, #9147FF 45%, var(--line)); background: color-mix(in srgb, #9147FF 12%, var(--card)); color: var(--text); font: 800 12.5px var(--body); cursor: pointer; }
.cheeramt:hover { background: #9147FF; color: #fff; }
.cheerpop-f { font-size: 11px; color: var(--muted); line-height: 1.35; }

/* the points chip's card over a pane: the exact count, and where the rewards are */
.ptspop { position: fixed; z-index: 960; display: grid; gap: 2px; width: 260px; max-width: calc(100vw - 16px); padding: 14px 40px 12px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: 0 14px 34px rgba(0,0,0,.45); }
.pp-num { font-family: var(--display); font-style: var(--slant); font-size: 30px; line-height: 1.05; letter-spacing: .3px; color: var(--accent); font-variant-numeric: tabular-nums; }
.pp-l { font-size: 12.5px; color: var(--text); }
.pp-note { margin: 8px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--muted); }
.pp-x { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 8px; border: 0; background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; } .pp-x:hover { background: var(--bg2); color: var(--text); }

/* A cheer waits five seconds before it sends */
.cheerhold { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 990; display: flex; align-items: center; gap: 10px; padding: 12px 14px 14px; min-width: 320px; max-width: calc(100vw - 16px); border: 1px solid #9147FF; border-radius: 14px; background: var(--card); box-shadow: 0 18px 44px rgba(0,0,0,.55); overflow: hidden; }
.cheerhold .ch-t { display: grid; gap: 2px; flex: 1; min-width: 0; } .cheerhold .ch-t b { font-size: 14px; } .cheerhold .ch-t span { font-size: 12px; color: var(--muted); } .cheerhold .ch-n { font-style: normal; font-weight: 800; color: var(--text); }
.cheerhold .ch-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: #9147FF; transform-origin: left; transform: scaleX(1); }
.cheerhold.run .ch-bar { transform: scaleX(0); transition: transform 5s linear; }

/* a pane with its chat over the video: Unmute moves to the top right so it never covers the chat or its box */
.pane:has(> .ovchat) > .unmute, body.phone .pane:has(> .ovchat) > .unmute { left: auto; right: 10px; bottom: auto; top: 44px; }

/* the second master volume fills the space between the buttons and Chat */
.tools > .master2 { margin-left: auto; flex: 1 1 48px; min-width: 48px; max-width: 260px; } .tools > .master2 input { flex: 1; width: auto; min-width: 0; } .tools > .master2[hidden] { display: none; }
.tools > .master2 input { width: 100%; }
.tools > .master2 + .btn { margin-left: 4px; }      /* the Balancer, right after the slider */
.pd-wall .tools > .master2 { display: none; }

/* live channels in a badge grid */
.btile { position: relative; }
.btile.live .abadge { box-shadow: 0 0 0 2px var(--live, #E91916), 0 0 14px -2px var(--live, #E91916); border-radius: 50%; }
.btile-live { position: absolute; top: 6px; left: 6px; display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border-radius: 4px; background: var(--live, #E91916); color: #fff; font: 800 10px var(--body); letter-spacing: .04em; }
.btile-live i { font-style: normal; font-weight: 700; opacity: .9; }
.sectionh .livecount { color: var(--live, #E91916); font-weight: 800; margin-left: 8px; }
/* Edit Den in the Den header */
.hp-hero .hp-edit { margin-left: auto; align-self: flex-start; flex: none; }
.hp-form.open { box-shadow: 0 0 0 2px var(--accent); transition: box-shadow .3s; }
/* the points pill opens the channel's rewards */
button.supchip.pts { cursor: pointer; font: inherit; font-size: 11px; font-weight: 700; }

/* Twitch Chat must sit uncovered, or Twitch turns chatting off for the channel's owner and mods.
   A pane holding a Chat Widget keeps only its bar and the chat; the effect layer and the notes over video go. */
.pane.chatpane > .pane-fx, .pane.chatpane > .ember, .pane.chatpane > .gatenote, .pane.chatpane > .unmute, .pane.chatpane > .ovchat { display: none !important; }
.pane-body > iframe.panechat, .dock-body > .chatframe { transform: none !important; filter: none !important; opacity: 1 !important; }

.subpop-alt { display: block; margin-top: 8px; font-size: 12px; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.subpop-alt:hover { color: var(--text); }

/* @ names while typing in AlphaChat */
.mentionpop { position: fixed; z-index: 400; display: flex; flex-direction: column; gap: 1px; min-width: 170px; max-width: 280px; padding: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 16px 40px -10px rgba(0, 0, 0, .7); }
.mn-i { text-align: left; padding: 6px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--text); font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mn-i.on, .mn-i:hover { background: rgba(255, 255, 255, .08); color: var(--accent); }

/* channel names search as you type */
.chansearch { position: fixed; z-index: 400; display: flex; flex-direction: column; gap: 1px; max-width: 340px; max-height: 60vh; overflow-y: auto; padding: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 16px 40px -10px rgba(0, 0, 0, .7); }
.cs-i { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.cs-i img, .cs-i .cs-dot { width: 24px; height: 24px; border-radius: 50%; flex: none; background: var(--bg2); }
.cs-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cs-t b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-t small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-live { font-size: 10px; font-weight: 800; letter-spacing: .04em; color: #fff; background: #e91916; padding: 1px 5px; border-radius: 4px; flex: none; }
.cs-i.on, .cs-i:hover { background: rgba(255, 255, 255, .08); }

main#view.floating[data-bpos="top"] .ovchat.both { top: 0; }      /* no pane bar while it floats */
.ovchat { --em: 1.6em; } .ovchat img.emote, .ov-list .ln img:not(.face) { height: 1.6em !important; width: auto !important; max-width: 5em; vertical-align: middle; object-fit: contain; }      /* emotes stay line sized over the video */

/* Chat over video 2.0: set per pane. Height is a share of the player, the box sits in the corner picked, 50% wide. */
.ovchat.both { --barh: 35px; top: auto; bottom: auto; left: auto; right: auto; width: 50%; min-width: min(260px, 100%); height: calc((100% - var(--barh)) * var(--bh, .3)); max-height: none; padding: 8px 10px; font-size: 13px; }
.ovchat.both[data-c="tl"] { top: var(--barh); left: 0; } .ovchat.both[data-c="tr"] { top: var(--barh); right: 0; } .ovchat.both[data-c="bl"] { bottom: 0; left: 0; } .ovchat.both[data-c="br"] { bottom: 0; right: 0; }
.ovchat.both .ov-list { flex: 1 1 auto; }
main#view.floating .ovchat.both { --barh: 0px; } main#view.floating .ovchat.both .ov-form, main#view.floating .ovchat.both .ov-pill { display: none !important; }
.ovchat.both[data-size="s"] { font-size: 11.5px; } .ovchat.both[data-size="l"] { font-size: 15.5px; }
.ovchat.both[data-size="off"] .ov-list, .ovchat.both[data-size="off"]::before { display: none; } .ovchat.both[data-size="off"] { height: auto; }
.ovchat.both[data-fx="shadow"]::before, .ovchat.both[data-fx="none"]::before { display: none; }
.ovchat.both[data-fx="shadow"] .ov-list .ln { text-shadow: 0 1px 2px #000, 0 0 8px #000, 0 0 2px #000; }
.ovchat.both[data-fx="none"] .ov-list .ln { text-shadow: none; }
.ovchat.both[data-fx="b25"]::before { display: block; mask: none; -webkit-mask: none; background: rgba(0, 0, 0, .25); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 8px; }
.ovchat.both[data-fx="b10"]::before { display: block; mask: none; -webkit-mask: none; background: rgba(0, 0, 0, .10); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border-radius: 8px; }
.ov-gear { display: none !important; }
.ovchip { width: 22px; height: 22px; flex: none; display: inline-grid; place-items: center; padding: 0; border-radius: 50%; border: 2px solid var(--pc, var(--accent)); background: color-mix(in srgb, var(--pc, var(--accent)) 16%, transparent); color: var(--pc, var(--accent)); cursor: pointer; }
.ovchip svg { width: 12px; height: 12px; } .ovchip:hover, .ovchip:focus-visible { background: var(--pc, var(--accent)); color: #000; }
.ovset-hd { display: flex; align-items: center; gap: 8px; } .ovset-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--pc, var(--accent)); flex: none; }
.cornerpad { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 5px; width: 104px; height: 62px; padding: 5px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg2); }
.cornerpad button { border: 1px dashed color-mix(in srgb, var(--text) 30%, transparent); border-radius: 4px; background: transparent; cursor: pointer; padding: 0; } .cornerpad button:hover { border-color: var(--pc, var(--accent)); }
.cornerpad button.on { background: var(--pc, var(--accent)); border: 1px solid var(--pc, var(--accent)); }
/* the floating wall's bar: a chip and a box to type for each stream */
.fl-chats { flex: 1 1 auto; min-width: 0; display: flex; gap: 6px; align-items: center; overflow: hidden; }
main#view.floating { width: var(--flw, auto) !important; } .fl-bar { min-width: 0; }      /* the players set the width, the bar's chat boxes squeeze into it */
.fl-send { flex: 1 1 0; min-width: 60px; max-width: 280px; display: flex; align-items: center; gap: 5px; }
.fl-send input { flex: 1; min-width: 0; height: 24px; padding: 0 8px; font-size: 12px; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--pc, var(--accent)) 55%, var(--line)); background: var(--bg2); color: var(--text); cursor: text; }
.ovsetpop { width: 350px; max-width: calc(100vw - 16px); min-width: 0; } .ovsetpop .ovset-b, .ovsetpop .ovset-r { min-width: 0; } .ovset-r { flex-wrap: wrap; } .ovset-r .k { flex: none; } .ovsetpop .seg { margin-left: auto; } .ovsetpop .seg button { white-space: nowrap; padding: 5px 9px; }      /* a row wider than the box (Behind) drops its buttons onto their own line under the label instead of running past the edge */

.fl-bar .fl-grip, .fl-bar .fl-acts { flex: none; }      /* the chat boxes squeeze, the bar's own buttons never leave */

/* Den logos */
.hp-logo { --ls: 34px; width: var(--ls); height: var(--ls); flex: none; display: inline-grid; place-items: center; border-radius: 28%; background: linear-gradient(135deg, var(--hc), var(--hc2)); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 4px 14px -6px var(--hc); }
.hp-logo svg { width: 64%; height: 64%; fill: currentColor; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .45)); }
.hp-logo.big { border-radius: 24px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), 0 10px 30px -10px var(--hc); }
.hp-logos { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.hp-lgb { padding: 3px; border-radius: 10px; border: 2px solid transparent; background: transparent; cursor: pointer; display: grid; place-items: center; } .hp-lgb.on { border-color: var(--accent); } .hp-lgb:hover { border-color: var(--line); }
.hp-lgb.none { padding: 0 10px; height: 40px; font-size: 12px; font-weight: 700; color: var(--muted); border: 1px dashed var(--line); } .hp-lgb.none.on { border: 2px solid var(--accent); color: var(--text); }
.hp-dcard .hp-logo { margin-right: 4px; }
/* Blood Twins: tiles with faces, open slots, the count out of ten */
.bt-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .bt-top b { font-size: 13px; color: #E8C66B; letter-spacing: .02em; }
.bt-dots { display: flex; gap: 4px; } .bt-dots i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid #8C6A1E; } .bt-dots i.on { background: linear-gradient(135deg, #F3D98B, #B8902F); border-color: #F3D98B; box-shadow: 0 0 8px -2px #D9B45A; }
.bt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.bt-tile { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; text-decoration: none; color: var(--text); background: linear-gradient(135deg, color-mix(in srgb, #D9B45A 14%, var(--card)), var(--card) 70%); border: 1px solid color-mix(in srgb, #D9B45A 45%, var(--line)); transition: transform .12s, box-shadow .12s; }
.bt-tile:hover { transform: translateY(-1px); box-shadow: 0 8px 22px -12px #D9B45A; } .bt-tile .face { border-radius: 50%; box-shadow: 0 0 0 2px #D9B45A; flex: none; }
.bt-w { min-width: 0; } .bt-w b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-stats { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 3px; } .bt-s { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; color: var(--muted); } .bt-s svg { color: #D9B45A; }
.bt-tile.open { justify-content: center; flex-direction: column; gap: 2px; background: transparent; border: 1px dashed color-mix(in srgb, #D9B45A 30%, var(--line)); color: var(--muted); min-height: 64px; } .bt-tile.open:hover { transform: none; box-shadow: none; }
.bt-open { font-size: 18px; line-height: 1; color: color-mix(in srgb, #D9B45A 60%, var(--muted)); } .bt-tile.open small { font-size: 11px; }
.bt-joint { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, #D9B45A 10%, transparent); font-size: 12.5px; color: var(--muted); } .bt-joint svg { color: #D9B45A; flex: none; } .bt-joint b { color: #E8C66B; }

.hp-mine { display: grid; gap: 10px; text-decoration: none; color: var(--text); border-color: color-mix(in srgb, var(--hc, var(--accent)) 55%, var(--line)); background: linear-gradient(135deg, color-mix(in srgb, var(--hc, var(--accent)) 16%, var(--card)), var(--card) 65%); transition: transform .12s, box-shadow .12s; }
.hp-mine:hover { transform: translateY(-1px); box-shadow: 0 10px 28px -14px var(--hc, var(--accent)); }
.hp-mine-h { display: flex; align-items: center; gap: 12px; } .hp-mine-t { min-width: 0; display: grid; gap: 2px; } .hp-mine-t b { font-size: 16px; } .hp-mine-t small { color: var(--muted); font-size: 12px; }
.hp-rk { justify-self: start; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; padding: 1px 7px; border-radius: 999px; background: var(--hc, var(--accent)); color: #000; }
.hp-mine .hp-open { justify-self: start; display: inline-flex; align-items: center; gap: 6px; }
.ov-form .ovchip.inform { width: 30px; height: 30px; align-self: center; } .ov-form .ovchip.inform svg { width: 15px; height: 15px; }

/* FAQ 1.2: accented headers, tighter cards, releases with names, major items in the accent */
.faq { gap: 10px; } .faq-q { gap: 12px; padding: 14px 18px 16px; border-left: 3px solid var(--accent); }
.faq-q h2 { color: var(--accent); font-size: 16.5px; margin: 0 0 6px; display: flex; align-items: center; gap: 8px; } .faq-q h2::before { content: ''; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); transform: rotate(45deg); flex: none; }
.faq-t p { margin: 0 0 7px; font-size: 14px; line-height: 1.5; } .faq-links { margin-top: 8px; }
.faq-log .sectionh { color: var(--accent); }
.faq-rel summary { flex-wrap: wrap; row-gap: 2px; } .faq-relv { color: var(--accent); font-size: 14px; } .faq-reltitle { font-size: 12px; font-weight: 800; color: var(--text); letter-spacing: .01em; }
.faq-rel ul { margin: 5px 0 2px; } .faq-rel li { margin: 1px 0; } .faq-rel li.faq-major { color: var(--accent); font-weight: 700; } .faq-rel li.faq-major::marker { color: var(--accent); }
.faq-thanks { margin: 6px 0 2px; padding: 6px 9px; border-radius: 8px; font-size: 12px; color: var(--text); background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); } .faq-thanks a { color: var(--accent); font-weight: 800; }

.twinsend { position: fixed; z-index: 400; width: 250px; padding: 12px; display: grid; gap: 8px; background: var(--card); border: 1px solid color-mix(in srgb, #D9B45A 50%, var(--line)); border-radius: 12px; box-shadow: 0 20px 50px -12px rgba(0, 0, 0, .75); }
.ts-h { color: #E8C66B; font-family: var(--display); font-style: var(--slant); text-transform: var(--caps); font-size: 14px; } .ts-s { color: var(--muted); font-size: 12px; margin-top: -6px; }
.ts-all, .ts-t { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 9px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; font: inherit; font-size: 13px; text-align: left; }
.ts-all.on, .ts-t.on { color: var(--text); border-color: #D9B45A; background: color-mix(in srgb, #D9B45A 14%, transparent); } .ts-list { display: grid; gap: 4px; max-height: 260px; overflow: auto; }
.ovchat.both[data-fx="b5"]::before { display: block; mask: none; -webkit-mask: none; background: rgba(0, 0, 0, .05); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); border-radius: 8px; }
.ovchat.both[data-fx="b1"]::before { display: block; mask: none; -webkit-mask: none; background: rgba(0, 0, 0, .01); backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); border-radius: 8px; }
.ovchat.both[data-fx="b5"] .ov-list .ln, .ovchat.both[data-fx="b1"] .ov-list .ln { text-shadow: 0 1px 2px #000, 0 0 6px rgba(0, 0, 0, .9); }
.ovchat.both[data-fx="b25"]::before { background: rgba(0, 0, 0, .10); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
/* blur levels: how dark the backdrop is, the blur itself stays the same */
.ovchat.both[data-fx="b10"]::before, .ovchat.both[data-fx="b25"]::before { background: rgba(0, 0, 0, .10); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ovchat.both[data-fx="b5"]::before { background: rgba(0, 0, 0, .05); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ovchat.both[data-fx="b0"]::before { display: block; mask: none; -webkit-mask: none; background: transparent; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: 8px; }
.ovchat.both[data-fx="b0"] .ov-list .ln { text-shadow: 0 1px 2px #000, 0 0 6px rgba(0, 0, 0, .9); }

/* a tile wears the pair: your color flowing into theirs */
.bt-tile.worn { background: linear-gradient(135deg, color-mix(in srgb, var(--t1) 22%, var(--card)), color-mix(in srgb, var(--t2) 16%, var(--card)) 80%); border-color: color-mix(in srgb, var(--t1) 55%, var(--line)); }
.bt-tile.worn .face { box-shadow: 0 0 0 2px var(--t2); } .bt-tile.worn .bt-s svg { color: var(--t1); } .bt-tile.worn:hover { box-shadow: 0 8px 22px -12px var(--t1); }
.bt-color { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); display: grid; gap: 8px; } .bt-ch { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .bt-ch b { font-size: 13px; } .bt-ch small { color: var(--muted); font-size: 12px; }

/* the pool web */
.bt-web { margin: 4px 0 12px; } .bt-web svg { width: 100%; height: auto; display: block; max-height: 420px; }
.bt-dot { cursor: pointer; } .bt-dot circle { transition: transform .12s; transform-box: fill-box; transform-origin: center; } .bt-dot:hover circle { transform: scale(1.15); }
.bt-dl { font: 700 10px var(--body); fill: var(--text); paint-order: stroke; stroke: rgba(0, 0, 0, .6); stroke-width: 3px; } .bt-dl.many { fill: #F3C95A; }
.bt-ini { font: 900 12px var(--body); fill: var(--text); } .bt-nm { font: 800 12px var(--body); fill: var(--text); } .bt-nm.dim { fill: var(--muted); font-weight: 600; } .bt-you { font: 900 13px var(--body); fill: var(--text); }
.bt-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; font-size: 11.5px; color: var(--muted); } .bt-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
section.card.twincard { display: block; } section.card.twincard > * + * { margin-top: 10px; }      /* the Packmates panel stacks: count, web, tiles, color, joint badge */
/* Chat lock 1.1: the lock reads as a lock. The bar button becomes a lit Locked pill, the bar takes the same stripe a locked pane bar wears, a card sits over the chat with Unlock, and the send box is greyed. */
.lockbtn.on { width: auto; padding: 0 9px 0 7px; gap: 5px; font-size: 11px; font-weight: 800; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent2); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent); }
.dock.chatlocked .dock-bar { background: repeating-linear-gradient(135deg, var(--card) 0 10px, color-mix(in srgb, var(--accent) 14%, var(--card)) 10px 20px); }
.chatlock { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; padding: 16px; background: color-mix(in srgb, var(--bg) 62%, transparent); backdrop-filter: blur(3px); cursor: not-allowed; }
.chatlock[hidden] { display: none; }
.chatlock-card { display: grid; justify-items: center; gap: 6px; padding: 16px 20px 14px; border-radius: 14px; background: var(--card); border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--line)); box-shadow: 0 0 30px -10px var(--accent), 0 18px 40px -18px rgba(0,0,0,.8); text-align: center; cursor: default; max-width: 240px; }
.chatlock-card > svg { color: var(--accent2); } .chatlock-card b { font-family: var(--display); font-style: var(--slant); text-transform: var(--caps); letter-spacing: var(--track); font-size: 15px; } .chatlock-card small { color: var(--muted); font-size: 12px; } .chatlock-card .btn { margin-top: 6px; }
/* this chat is on the wall: the tab's bar, chat and box sit blurred under one card */
.chatwall { position: absolute; inset: 0; grid-row: 2 / -1; grid-column: 1 / -1; z-index: 8; display: grid; place-items: center; padding: 16px; background: color-mix(in srgb, var(--bg) 58%, transparent); -webkit-backdrop-filter: blur(7px) saturate(.7); backdrop-filter: blur(7px) saturate(.7); }
.chatwall[hidden] { display: none; }
.chatwall-card { display: grid; justify-items: center; gap: 6px; padding: 18px 20px 16px; border-radius: 14px; background: var(--card); border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--line)); box-shadow: 0 0 30px -10px var(--accent), 0 18px 40px -18px rgba(0,0,0,.8); text-align: center; width: min(100%, 260px); }
.chatwall-card > svg { color: var(--accent2); } .chatwall-card b { font-family: var(--display); font-style: var(--slant); text-transform: var(--caps); letter-spacing: var(--track); font-size: 15px; } .chatwall-card small { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; } .chatwall-card .btn { margin-top: 6px; width: 100%; justify-content: center; }
.pane.showme { outline: 2px solid var(--accent); outline-offset: -3px; animation: showme 1.7s ease-out; }
@keyframes showme { 0%, 40% { box-shadow: 0 0 0 3px var(--accent), 0 0 34px 2px var(--accent); } 100% { box-shadow: 0 0 0 0 transparent; } }
.sendrow.lockedrow input, .sendrow.lockedrow textarea { opacity: .55; background: repeating-linear-gradient(135deg, var(--card) 0 10px, color-mix(in srgb, var(--accent) 10%, var(--card)) 10px 20px); cursor: not-allowed; } .sendrow.lockedrow textarea::placeholder, .sendrow.lockedrow input::placeholder { color: var(--accent2); font-weight: 700; }
.sendrow.lockedrow .btn { opacity: .45; cursor: not-allowed; }
/* ---------- phone wall 3.0: the layouts, the page menu's thumbnails, the pane sheet, the + tile ---------- */
.phonewall > .tools { display: none; }      /* Add lives in the live strip, everything else in the page menu */
.phonewall .wallwrap { position: relative; }
.rl.rl-add { display: grid; place-items: center; color: var(--accent); background: transparent; border: 1.5px dashed color-mix(in srgb, var(--accent) 70%, transparent); }
.rail[data-view="icons"] .rl.rl-add { width: 40px; height: 40px; border-radius: 50%; padding: 0; }
.rail:not([data-view="icons"]) .rl.rl-add { min-height: 40px; justify-content: center; }
/* the thumbnails in the page menu */
.pd-layout .thumbs { display: flex; gap: 6px; padding: 4px 0 2px; overflow-x: auto; scrollbar-width: none; } .pd-layout .thumbs::-webkit-scrollbar { display: none; }
.pd-layout .th { flex: none; width: 58px; display: grid; gap: 4px; justify-items: center; border: 0; background: none; padding: 0; color: var(--muted); font: 800 10px/1.15 var(--body); text-align: center; cursor: pointer; }
.pd-layout .th.on { color: var(--text); } .pd-layout .th.lnd { width: 72px; }
.pd-layout .th > i { width: 44px; height: 62px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); display: flex; flex-direction: column; gap: 2px; padding: 3px; } .pd-layout .th.lnd > i { width: 66px; height: 42px; }
.pd-layout .th.on > i { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pd-layout .th > i b { flex: 1; display: block; background: color-mix(in srgb, var(--accent) 34%, var(--card)); border-radius: 2px; } .pd-layout .th > i s { flex: 1; display: block; background: var(--line); border-radius: 2px; text-decoration: none; }
.pd-layout .th > i.cf { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr 1.4fr; } .pd-layout .th > i.g2 { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr auto; } .pd-layout .th > i.g2 s { min-height: 12px; }
.pd-layout .th.lnd > i.g2 { grid-template-rows: 1fr 1fr; } .pd-layout .th > i.sg { display: grid; grid-template-columns: 1fr 1fr 34%; grid-template-rows: 1fr 1fr; }
.pd-head b[data-note]:not([data-note=""])::after { content: attr(data-note); margin-left: 10px; font: 800 11px var(--body); color: var(--muted); text-transform: none; font-style: normal; letter-spacing: 0; }
.pd-row.arm { color: #ff8a70; }
/* Hero: one pane on show, dots under it */
.phonewall .pane.hidepane { display: none !important; }
.phonewall.mhero .stagecol { flex: 0 1 auto; } .phonewall.mhero .stage { position: relative; }
.herodots { position: absolute; left: 0; right: 0; bottom: 6px; z-index: 6; display: flex; justify-content: center; gap: 14px; pointer-events: none; } .herodots[hidden] { display: none; }
.herodots .hd { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; background: rgba(255, 255, 255, .35); pointer-events: auto; cursor: pointer; box-shadow: 0 0 4px #000; } .herodots .hd.on { background: var(--pc, var(--accent)); box-shadow: 0 0 6px var(--pc, var(--accent)); }
.herodots .hd { position: relative; } .herodots .hd::before { content: ''; position: absolute; inset: -8px -6px; }
/* Grid: two across, the chat below */
.phonewall.mgrid .stage { gap: 2px; grid-template-columns: repeat(var(--lc, 1), minmax(0, 1fr)) !important; } .phonewall.mgrid .pane { aspect-ratio: auto; min-height: 0; display: flex; flex-direction: column; } .phonewall.mgrid .pane-body { aspect-ratio: 16 / 9; flex: none; }
.phonewall.mgrid .pane .pane-bar { min-height: 26px; padding: 2px 6px; } .phonewall.mgrid .pane .pane-bar .meta { display: none; } .phonewall.mgrid .pane.focus { box-shadow: inset 0 0 0 2px var(--accent); }
/* Theater: the players fill the screen, the chat is a sheet over the bottom that the grip drags. A tap on the grip folds it to the grip alone. */
.phonewall.mtheater .rail, .phonewall.mtheater .striphandle, .phonewall.mtheater .phonectl { display: none !important; }
.phonewall.mtheater .stagecol { flex: 0 0 82%; height: 82%; max-height: none !important; overflow: hidden; }      /* the sheet drags down to 18 percent at the lowest, so the players stop above that line and the last one is never under the sheet */ .phonewall.mtheater .stage { height: 100%; display: grid; gap: 2px; grid-template-rows: repeat(var(--lr, 1), minmax(0, 1fr)); }
.phonewall.mtheater .pane { aspect-ratio: auto; min-height: 0; display: flex; flex-direction: column; } .phonewall.mtheater .pane-body { aspect-ratio: auto; flex: 1; min-height: 0; }
.phonewall.mtheater .side { position: absolute; left: 0; right: 0; bottom: 0; height: var(--sheetH, 34%); z-index: 8; border-top: 1px solid var(--line); border-radius: 14px 14px 0 0; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: height .18s; }
.phonewall.mtheater .side .dock { background: transparent; }
.phonewall.mtheater .chandle { position: absolute; left: 0; right: 0; bottom: var(--sheetH, 34%); z-index: 9; height: 22px; border: 0; background: transparent; }
.phonewall.mtheater .chandle i { background: var(--accent2); box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 60%, transparent); }
.phonewall.mtheater.sheetshut .side { height: 0; border: 0; overflow: hidden; } .phonewall.mtheater.sheetshut .chandle { bottom: 0; background: color-mix(in srgb, var(--bg) 70%, transparent); }
/* the pane sheet */
.ps-scrim { position: fixed; inset: 0; z-index: 45; background: rgba(0, 0, 0, .45); display: grid; place-items: center; padding: 20px; }
.panesheet { width: min(300px, 100%); display: grid; gap: 2px; padding: 8px; border-radius: 14px; background: var(--bg2); border: 1px solid var(--line); box-shadow: 0 20px 50px -12px #000; animation: al-pop .16s ease-out; }
.ps-h { display: flex; align-items: center; gap: 8px; padding: 6px 8px 8px; font-family: var(--display); font-style: var(--slant); text-transform: var(--caps); letter-spacing: var(--track); font-size: 14px; } .ps-h .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pc, var(--accent)); }
.ps-r { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--text); font: 800 14px var(--body); text-align: left; cursor: pointer; } .ps-r .ic { color: var(--accent2); } .ps-r:active { background: var(--card); }
.ps-r.bad { color: #ff8a70; } .ps-r.bad .ic { color: #ff8a70; } .ps-r.gated { opacity: .6; } .ps-r .tierpill { margin-left: auto; }
.ps-swap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; } .ps-swap .k { font-size: 12px; color: var(--muted); font-weight: 700; } .ps-swap .mini { border-color: color-mix(in srgb, var(--pc) 60%, var(--line)); }
/* landscape: Side Chat and Side Hero */
body.phone.land .phonewall.lsidechat .wallwrap, body.phone.land .phonewall.mhero .wallwrap { grid-template-columns: minmax(0, 1fr); }
body.phone.land .phonewall.lsidechat .side { position: absolute; top: 0; bottom: 0; right: 0; width: min(46vw, 380px); z-index: 12; transform: translateX(104%); transition: transform .18s ease-out; box-shadow: -20px 0 40px -10px rgba(0, 0, 0, .8); grid-column: auto; grid-row: auto; }
body.phone.land .phonewall.lsidechat.chatin .side { transform: none; }
body.phone.land .phonewall.lsidechat .stage { height: 100%; grid-template-rows: repeat(var(--lr, 1), minmax(0, 1fr)) !important; } body.phone.land .phonewall.lsidechat .pane { aspect-ratio: auto; min-height: 0; display: flex; flex-direction: column; } body.phone.land .phonewall.lsidechat .pane-body { aspect-ratio: auto; flex: 1; min-height: 0; }
.ctab { display: none; } body.phone.land .phonewall.lsidechat .ctab { display: grid; place-items: center; position: absolute; right: 0; bottom: 16px; z-index: 13; width: 26px; height: 74px; padding: 0; border: 1px solid var(--line); border-right: 0; border-radius: 10px 0 0 10px; background: var(--card); color: var(--accent2); cursor: pointer; }
body.phone.land .phonewall.lsidechat.chatin .ctab { right: min(46vw, 380px); } .ctab .ic { width: 14px; height: 14px; } .ctab.on { color: var(--text); }
.ctab .ctab-n { position: absolute; top: -6px; left: -8px; font: 800 10px var(--body); background: var(--accent); color: var(--ink); border-radius: 999px; padding: 1px 5px; min-width: 18px; text-align: center; } .ctab .ctab-n[hidden] { display: none; }
body.phone.land .phonewall.lsidechat .phonectl { display: none !important; }
body.phone.land.lhero #top { display: none; } body.phone.land.lhero { --topH: 0px; }
body.phone.land .phonewall.mhero .rail, body.phone.land .phonewall.mhero .striphandle, body.phone.land .phonewall.mhero .phonectl, body.phone.land .phonewall.mhero .side { display: none !important; }
body.phone.land .phonewall.mhero .stagecol { height: 100%; overflow: hidden; } body.phone.land .phonewall.mhero .stage { height: 100%; grid-template-columns: 1fr !important; } body.phone.land .phonewall.mhero .pane { aspect-ratio: auto; height: 100%; display: flex; flex-direction: column; } body.phone.land .phonewall.mhero .pane-body { aspect-ratio: auto; flex: 1; min-height: 0; }
body.phone.land .phonewall.mhero .ovchat { right: 50%; padding-bottom: 20px; } body.phone.land .phonewall.mhero .herodots { justify-content: flex-end; right: 12px; }
body.phone.land .phonewall.mhero .pedge, body.phone.land.lhero .pedge { display: grid; }
/* quality 1.0: the wall's pick in Options, and one pane's own pick from its bar */
.opt.qrow { display: grid; grid-template-columns: 1fr; gap: 8px; cursor: default; } .opt.qrow .opt-t { min-width: 0; } .opt.qrow .opt-t small { display: block; } .opt.qrow .seg { justify-self: start; }      /* the base .opt grid is 20px 1fr auto for a checkbox row; this row has no box, so one column or the text lands in the 20px slot */
.qpop { position: fixed; z-index: 400; width: 240px; max-width: calc(100vw - 16px); padding: 12px; display: grid; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 20px 50px -12px rgba(0, 0, 0, .75); }
.qpop-l { display: grid; gap: 2px; max-height: 50vh; overflow: auto; } .qpop-r { display: flex; align-items: center; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: 700 13px var(--body); text-align: left; cursor: pointer; }
.qpop-r:hover { background: var(--bg2); } .qpop-r.on { background: color-mix(in srgb, var(--pc, var(--accent)) 18%, transparent); color: var(--text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pc, var(--accent)) 60%, transparent); }
.pcard-a .mini.gift { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); color: var(--accent2); }

/* ---------- phone wall 4.0: Stack, Radio, the cards, the dock at the thumb, the layout sheet. Hero, Chat focus, Grid, Side Grid, Side Chat and Side Hero are gone. ---------- */
.phonewall .pcards, .phonewall .radionow, .wdock { display: none; }
/* Stack: the player pinned at the top at 16:9, the cards under it, the chat takes the rest */
.phonewall.mstack .rail, .phonewall.mstack .striphandle, .phonewall.mradio .rail, .phonewall.mradio .striphandle, .phonewall.mradio .stagecol, .phonewall.mstack .chandle, .phonewall.mradio .chandle { display: none !important; }
.phonewall.mstack .stagecol { flex: none; max-height: none !important; overflow: visible; } .phonewall.mstack .stage { grid-template-columns: 1fr !important; }
.phonewall.mstack .pane { aspect-ratio: auto; display: flex; flex-direction: column; } .phonewall.mstack .pane-body { aspect-ratio: 16 / 9; flex: none; }
.phonewall.mstack .pane-bar { min-height: 30px; }
.phonewall.mstack .pcards { display: flex; gap: 6px; padding: 6px 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; flex: none; background: var(--bg2); border-bottom: 1px solid var(--line); } .phonewall.mstack .pcards::-webkit-scrollbar { display: none; } .phonewall .pcards[hidden] { display: none !important; }
.wcard { flex: none; width: 152px; height: 58px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 0 6px 0 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--text); text-align: left; cursor: pointer; position: relative; overflow: hidden; }
.wcard .face { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; } .wcard .face img { width: 100%; height: 100%; object-fit: cover; }
.wcard-t { display: grid; min-width: 0; font: 800 11.5px/1.2 var(--body); } .wcard-t b, .wcard-t small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wcard-t small { color: var(--muted); font-weight: 600; font-size: 10px; } .wcard-t small.live { color: var(--good); }
.wcard.hype::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--gold, #D9B45A), transparent); }
.wcard.add, .wcard.cw { grid-template-columns: auto minmax(0, 1fr); } .wcard.add { width: 72px; justify-items: center; grid-template-columns: 1fr; gap: 2px; border-style: dashed; border-color: color-mix(in srgb, var(--accent) 60%, transparent); color: var(--accent); background: transparent; } .wcard.add .wcard-t { font-size: 10px; color: var(--accent); }
.wcard.cw .ic { color: var(--pc, var(--accent)); }
.pcs { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg2); color: var(--muted); display: grid; place-items: center; padding: 0; cursor: pointer; flex: none; } .pcs .ic { width: 12px; height: 12px; } .pcs.on { color: var(--accent2); border-color: var(--accent); box-shadow: 0 0 8px -2px var(--accent); }
.phonewall.mstack .side { flex: 1 1 auto; } .phonewall.mstack.chatoff .side { display: none !important; }
/* room at the bottom for the dock, and the send box sits above it */
.phonewall.mstack .side .dock, .phonewall.mradio .side .dock { padding-bottom: 60px; }
/* Radio: no video, the Sound only strip on top, the chat fills the screen */
.phonewall.mradio .radionow { display: grid; gap: 8px; margin: 8px; padding: 8px 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); flex: none; } .phonewall .radionow[hidden] { display: none !important; }
.rn-h { display: flex; align-items: center; gap: 8px; font: 900 10px var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .rn-h b { color: var(--accent2); }
.rn-eq { margin-left: auto; display: flex; gap: 2px; align-items: flex-end; height: 12px; } .rn-eq b { width: 3px; border-radius: 1px; background: var(--accent2); animation: rneq 1.1s ease-in-out infinite; } .rn-eq b:nth-child(1) { height: 5px; } .rn-eq b:nth-child(2) { height: 11px; animation-delay: .15s; } .rn-eq b:nth-child(3) { height: 7px; animation-delay: .3s; } .rn-eq b:nth-child(4) { height: 12px; animation-delay: .45s; } .rn-eq b:nth-child(5) { height: 4px; animation-delay: .6s; }
@keyframes rneq { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.45); } } @media (prefers-reduced-motion: reduce) { .rn-eq b { animation: none; } }
.rn-row { display: flex; align-items: center; gap: 10px; overflow-x: auto; scrollbar-width: none; } .rn-row::-webkit-scrollbar { display: none; }
.rn-st { display: grid; justify-items: center; gap: 4px; font: 800 9.5px var(--body); color: var(--muted); flex: none; } .rn-st.on { color: var(--text); }
.rn-av { position: relative; width: 40px; height: 40px; } .rn-av .face { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; } .rn-av .face img { width: 100%; height: 100%; object-fit: cover; } .rn-st.on .face { box-shadow: 0 0 0 2px var(--pc, var(--accent)), 0 0 10px color-mix(in srgb, var(--pc, var(--accent)) 60%, transparent); }
.rn-av .pcs { position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; } .rn-av .pcs .ic { width: 9px; height: 9px; }
.rn-wake { margin-left: auto; flex: none; }
/* the dock: a floating capsule at the thumb, a thin line while you type */
.phonewall .wdock { display: flex; gap: 2px; padding: 4px; position: absolute; left: 50%; bottom: max(10px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 30; border-radius: 999px; background: color-mix(in srgb, var(--bg2) 88%, transparent); border: 1px solid var(--line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 12px 30px -10px #000; transition: transform .18s, opacity .18s, height .18s; }
.wd { width: 42px; height: 42px; border-radius: 50%; border: 0; background: transparent; color: var(--muted); display: grid; place-items: center; padding: 0; cursor: pointer; position: relative; } .wd .ic { width: 18px; height: 18px; } .wd.on { background: var(--grad); color: var(--ink); }
.wd .wd-n { position: absolute; right: 2px; top: 2px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px; background: var(--accent); color: var(--ink); font: 900 9px/15px var(--body); text-align: center; } .wd .wd-n[hidden] { display: none; }
.phonewall .wallwrap.typing .wdock { transform: translate(-50%, 70px); opacity: 0; visibility: hidden; pointer-events: none; }
/* Fusion with four panes in portrait: the panes are short, so the bottom dock would sit on the fourth picture. The dock moves to the left edge as a column and the players start right of it, narrower, and the picture keeps 16:9 inside. With three panes or fewer the dock stays at the bottom, over the letterbox band. */
body.phone:not(.land) .phonewall.msplit[data-n="4"] .wdock { left: max(4px, env(safe-area-inset-left, 0px)); right: auto; top: 50%; bottom: auto; transform: translateY(-50%); flex-direction: column; }
body.phone:not(.land) .phonewall.msplit[data-n="4"] .stagecol { margin-left: calc(60px + env(safe-area-inset-left, 0px)); }
body.phone:not(.land) .phonewall.msplit[data-n="4"] .wallwrap.typing .wdock { transform: translate(-70px, -50%); opacity: 0; visibility: hidden; }
/* the layout sheet: on Watch the page drawer rises from the bottom */
body.phone.wallmode .pdrawer { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 76vh; border-left: 0; border-top: 1px solid var(--line); border-radius: 18px 18px 0 0; box-shadow: 0 -20px 40px -10px rgba(0, 0, 0, .8); transform: translateY(104%); } body.phone.wallmode .pdrawer.in { transform: none; }
body.phone.wallmode .pdrawer .pd-head::before { content: ''; position: absolute; left: 50%; top: 6px; width: 40px; height: 4px; border-radius: 2px; background: var(--muted); transform: translateX(-50%); } body.phone.wallmode .pdrawer .pd-head { position: relative; padding-top: 18px; }
.pd-layout .th > i.st { gap: 3px; } .pd-layout .th > i .th-cards { display: flex; gap: 2px; flex: 0 0 14%; } .pd-layout .th > i .th-cards b { flex: 1; border-radius: 2px; background: color-mix(in srgb, var(--accent) 22%, var(--card)); }
.pd-quick { margin-top: 10px; } .pd-quick .pd-tile .pd-meta { margin-left: auto; color: var(--muted); font-weight: 600; font-size: 12px; }
/* landscape Stack: the player left, the cards and the chat stacked on the right */
body.phone.land .phonewall.mstack .wallwrap { grid-template-columns: minmax(0, 1fr) auto min(38vw, 360px); grid-template-rows: auto minmax(0, 1fr); }
body.phone.land .phonewall.mstack .stagecol { grid-column: 1; grid-row: 1 / -1; height: 100%; overflow: hidden; } body.phone.land .phonewall.mstack .stage { height: 100%; } body.phone.land .phonewall.mstack .pane { height: 100%; } body.phone.land .phonewall.mstack .pane-body { aspect-ratio: auto; flex: 1; min-height: 0; }
body.phone.land .phonewall.mstack .pcards { grid-column: 3; grid-row: 1; display: flex; gap: 4px; padding: 6px; overflow-x: auto; overflow-y: hidden; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); background: var(--bg2); }
body.phone.land .phonewall.mstack .wcard { width: 132px; height: 44px; grid-template-columns: 26px minmax(0, 1fr) auto; } body.phone.land .phonewall.mstack .wcard .face { width: 26px; height: 26px; } body.phone.land .phonewall.mstack .wcard-t { font-size: 10.5px; } body.phone.land .phonewall.mstack .wcard.add { width: 60px; }
body.phone.land .phonewall.mstack .side { grid-column: 3; grid-row: 2; border-top: 0; } body.phone.land .phonewall.mstack .side .dock, body.phone.land .phonewall.mradio .side .dock { padding-bottom: 0; } body.phone.land .phonewall.mstack.chatoff .wallwrap { grid-template-columns: minmax(0, 1fr) auto; } body.phone.land .phonewall.mstack.chatoff .pcards { display: none !important; }
body.phone.land .phonewall.mstack .wdock, body.phone.land .phonewall.mradio .wdock { position: static; grid-column: 2; grid-row: 1 / -1; align-self: center; flex-direction: column; transform: none; margin: 0 4px; padding: 4px; } body.phone.land .phonewall.mstack .wallwrap.typing .wdock, body.phone.land .phonewall.mradio .wallwrap.typing .wdock { transform: none; opacity: 0; visibility: hidden; }
body.phone.land .phonewall.mstack .wd, body.phone.land .phonewall.mradio .wd { width: 38px; height: 38px; }
body.phone.land .phonewall.mradio .wallwrap { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); } body.phone.land .phonewall.mradio .radionow { grid-column: 1; grid-row: 1; } body.phone.land .phonewall.mradio .side { grid-column: 1; grid-row: 2; border-left: 0; }

.faq-screen { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; color: var(--muted); flex-wrap: wrap; } .faq-screen code { font-size: 11.5px; }

/* Theater in portrait: the dock is a column of half circles at the top left, sticking out from the edge, so the sheet's chat lines stay clear. His words: "move the dock to the top left and make them half circles sticking out with icons". */
body.phone:not(.land) .phonewall.mtheater .wdock { left: 0; right: auto; top: 6px; bottom: auto; transform: none; flex-direction: column; gap: 6px; padding: 0; border: 0; border-radius: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
body.phone:not(.land) .phonewall.mtheater .wd { width: 30px; height: 46px; border-radius: 0 23px 23px 0; padding-left: 4px; border: 1px solid var(--line); border-left: 0; background: color-mix(in srgb, var(--bg2) 90%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 4px 0 14px -6px #000; color: var(--text); }
body.phone:not(.land) .phonewall.mtheater .wd.on { background: var(--grad); color: var(--ink); border-color: transparent; }
body.phone:not(.land) .phonewall.mtheater .wd .ic { width: 16px; height: 16px; } body.phone:not(.land) .phonewall.mtheater .wd .wd-n { right: -2px; top: -2px; }
body.phone:not(.land) .phonewall.mtheater .wallwrap.typing .wdock { transform: translateX(-60px); opacity: 0; visibility: hidden; }

/* Theater's grip: sits on the sheet's top edge, half over it, and looks like a grip (a pill with ridges) rather than a line. His words: "lower the Theater chat handle and make it look like a grip". */
.phonewall.mtheater .chandle { bottom: calc(var(--sheetH, 34%) - 13px); height: 26px; z-index: 10; }
.phonewall.mtheater .chandle i { width: 58px; height: 18px; border-radius: 9px; background: var(--card); border: 1px solid color-mix(in srgb, var(--accent) 60%, var(--line)); box-shadow: 0 2px 10px -2px #000, 0 0 10px -4px var(--accent); position: relative; }
.phonewall.mtheater .chandle i::before { content: ''; position: absolute; left: 14px; right: 14px; top: 5px; height: 6px; background: repeating-linear-gradient(90deg, var(--accent2) 0 3px, transparent 3px 7px); opacity: .9; border-radius: 1px; }
.phonewall.mtheater.sheetshut .chandle { bottom: 4px; background: transparent; }

/* the tap prompt: a pulsing dot in the middle with the text framed around it, over a blurred veil that taps pass through. Both go the moment the player plays. */
.pane > .gatenote { gap: 10px; padding: 7px 12px; }
.gatenote .gt { white-space: nowrap; } body.phone .pane .gatenote .gt { white-space: normal; max-width: 40vw; }
.gatenote .gdot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--accent2); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent); animation: gpulse 1.4s ease-out infinite; }
@keyframes gpulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }
@media (prefers-reduced-motion: reduce) { .gatenote .gdot { animation: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 40%, transparent); } }
.pane-body > .gateveil { position: absolute; inset: 0; z-index: 4; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); background: rgba(6, 5, 4, .28); pointer-events: none; } .pane-body > .gateveil[hidden] { display: none; }

/* the pane sheet's button on the bar, left of the name, touch screens only (it replaces press and hold) */
.psbtn { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--pc, var(--accent)) 55%, var(--line)); background: color-mix(in srgb, var(--pc, var(--accent)) 12%, var(--card)); color: var(--text); display: grid; place-items: center; padding: 0; cursor: pointer; } .psbtn .ic { width: 13px; height: 13px; }
.psbtn:active { background: color-mix(in srgb, var(--pc, var(--accent)) 30%, var(--card)); }

/* no strip on the phone wall in any layout: Live now lives behind the heart on the dock */
.phonewall.msplit .rail, .phonewall.msplit .striphandle { display: none !important; }
.pd-follows { display: grid; gap: 2px; } .pd-row.pd-live { gap: 10px; } .pd-row.pd-live .face { flex: none; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; } .pd-row.pd-live .face img { width: 100%; height: 100%; object-fit: cover; }
.pd-live-t { display: grid; min-width: 0; } .pd-live-t b, .pd-live-t small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pd-live-t small { color: var(--muted); font-weight: 600; font-size: 12px; }

/* Fusion in portrait keeps every picture at 16:9: the rows share the height, and inside each row the player is the largest 16:9 box that fits, centered, so two panes leave room rather than stretch and four panes narrow rather than squash. */
/* The frame hugs the picture too: the pane shrinks to its bar plus the 16:9 body and sits centered in its row. Theater gets the same, and landscape Stack fits the one player to its column. */
body.phone:not(.land) .phonewall.msplit { --stw: 100vw; --sth: calc(var(--appH, 100dvh) - var(--topH)); } body.phone:not(.land) .phonewall.msplit[data-n="4"] { --stw: calc(100vw - 60px); } body.phone:not(.land) .phonewall.mtheater { --stw: 100vw; --sth: calc((100dvh - var(--topH)) * 0.82); }
body.phone:not(.land) .phonewall.msplit .pane, body.phone:not(.land) .phonewall.mtheater .pane { --bh: min(calc(var(--sth) / var(--lr, 1) - 36px), calc((var(--stw) - 8px) * 9 / 16)); }
body.phone.land .phonewall.mstack .pane { --bh: min(calc(var(--appH, 100dvh) - var(--topH) - 38px), calc((100vw - 60px - min(38vw, 360px)) * 9 / 16)); }
body.phone:not(.land) .phonewall.msplit .pane, body.phone:not(.land) .phonewall.mtheater .pane, body.phone.land .phonewall.mstack .pane { display: flex; flex-direction: column; align-items: stretch; justify-content: center; width: calc(var(--bh) * 16 / 9 + 2px); max-width: 100%; height: fit-content; max-height: 100%; place-self: center; }
body.phone:not(.land) .phonewall.msplit .pane > .pane-bar, body.phone:not(.land) .phonewall.mtheater .pane > .pane-bar, body.phone.land .phonewall.mstack .pane > .pane-bar { align-self: stretch; }
body.phone:not(.land) .phonewall.msplit .pane-body, body.phone:not(.land) .phonewall.mtheater .pane-body { flex: none; aspect-ratio: auto; height: var(--bh); width: calc(var(--bh) * 16 / 9); }
body.phone.land .phonewall.mstack .pane-body { flex: none; aspect-ratio: auto; height: var(--bh); width: calc(var(--bh) * 16 / 9); }      /* the column is what is left after the dock column and the chat column */

/* the pane sheet carries the Chat over video rows when the pane is in Fusion view */
.ps-sec { display: flex; align-items: center; gap: 8px; padding: 10px 10px 4px; font: 900 10.5px var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .ps-sec .ic { color: var(--accent2); }
.panesheet .ps-both { padding: 2px 10px 8px; } .panesheet .ps-both .ovset-r { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; } .panesheet .ps-both .k { font: 800 12px var(--body); color: var(--muted); }
.panesheet { max-height: calc(100vh - 40px); overflow-y: auto; }

/* Theater in portrait: the bar rides over the top of the picture instead of taking a row, and the rows sit tight from the top, so the pictures get the height */
body.phone:not(.land) .phonewall.mtheater .pane { --bh: min(calc(var(--sth) / var(--lr, 1) - 4px), calc((var(--stw) - 8px) * 9 / 16)); position: relative; }
body.phone:not(.land) .phonewall.mtheater .pane > .pane-bar { position: absolute; left: 0; right: 0; top: 0; z-index: 3; min-height: 26px; background: linear-gradient(180deg, rgba(6, 5, 4, .78), rgba(6, 5, 4, 0)); border: 0; }
body.phone:not(.land) .phonewall.mtheater .stage { gap: 2px; align-content: center; }

.wdock .wd[hidden] { display: none; }

/* the dots menu carries the live dot and the stream title on phones */
.ps-h .dot.live { background: #ff3b3b; box-shadow: 0 0 8px #ff3b3b; }
.ps-stream { display: grid; gap: 2px; padding: 0 10px 8px; } .ps-stream b { font: 700 13px/1.35 var(--body); color: var(--text); } .ps-stream small { color: var(--muted); font-size: 12px; }
body.phone .pane-bar .pane-id > .dot, body.phone .pane-bar .meta.stitle { display: none; }

/* phone pane bars carry the dots button, the name and the buttons. The live dot, viewers, game and title all live in the dots menu. */
body.phone .pane-bar .pane-id .meta { display: none !important; }

/* a blank pane on a phone is short (16:9), so its picker stays inside: no glow, tight rows, the chips scroll sideways */
body.phone .pane.empty .emptybody { justify-content: flex-start; gap: 6px; padding: 8px 10px; }
body.phone .pane.empty .emptybody .helixglow { display: none; } body.phone .pane.empty .emptybody .note { margin: 0; font-size: 12px; align-self: flex-start; }
body.phone .pane.empty .emptybody .addbox { width: 100%; } body.phone .pane.empty .emptybody .addbox input { height: 34px; } body.phone .pane.empty .emptybody .addbox .btn { height: 34px; padding: 0 12px; }
body.phone .pane.empty .emptybody .livechips { display: flex; flex-wrap: nowrap; gap: 6px; width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } body.phone .pane.empty .emptybody .livechips::-webkit-scrollbar { display: none; } body.phone .pane.empty .emptybody .livechip { flex: none; }

/* an empty chat column keeps room for its note, so the note cannot spill onto the Multi-send row under it (a viewer shot this) */
.dock.empty .dock-body { min-height: 140px; overflow: hidden; }

/* phones: the Beta mark rides to the right of the logo instead of hanging above it (his ask) */
body.phone .brand .betamark { position: static; top: auto; right: auto; margin-left: 2px; align-self: center; }
/* phones: Discovery's Sort by and Filter rows tidy. Each label sits on its own line; the sort chips scroll sideways in one row, the filter chips fill a two-column grid. */
body.phone .disc-grp.disc-sortrow { flex-direction: column; align-items: stretch; gap: 6px; }
body.phone .disc-grp.disc-sortrow .disc-sort { width: 100%; scrollbar-width: none; -webkit-overflow-scrolling: touch; } body.phone .disc-grp.disc-sortrow .disc-sort::-webkit-scrollbar { display: none; }
body.phone .disc-grp.disc-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; align-items: stretch; }
body.phone .disc-grp.disc-filters .disc-lbl { grid-column: 1 / -1; } body.phone .disc-grp.disc-filters .chip { width: 100%; justify-content: flex-start; margin: 0; }
body.phone .disc-grp.disc-filters .chip.clr { grid-column: 1 / -1; justify-content: center; }

/* the Streaks panel's plain line about Twitch's own credit, and the Open on Twitch button in Live now */
.streak-warn { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 8%, var(--card)); } .streak-warn b { color: var(--accent2); }
.pd-row .pd-tw { flex: none; margin-left: auto; width: 30px; height: 30px; padding: 0; display: grid; place-items: center; border-radius: 50%; }

.tilebtn { white-space: nowrap; }

/* Alpha Admin: Dev Messages */
.devmsg { margin: 0 0 16px; display: grid; gap: 10px; } .dm-h { display: flex; align-items: center; gap: 8px; } .dm-h h2 { margin: 0; } .dm-h .ic { color: var(--accent); }
.dm-f { display: grid; gap: 8px; max-width: 640px; } .dm-f input, .dm-f textarea { width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 8px 11px; font: inherit; color: inherit; box-sizing: border-box; } .dm-f textarea { resize: vertical; } .dm-f input:focus, .dm-f textarea:focus { border-color: var(--accent); outline: none; }
.dm-acts { display: flex; gap: 8px; flex-wrap: wrap; } .btn.dm-sure { background: linear-gradient(90deg, #FF2A2A, #FF8A00); color: #140700; }
.dm-list { display: grid; gap: 8px; max-width: 640px; } .dm-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg2); } .dm-row > div { flex: 1; min-width: 0; } .dm-row b { display: block; } .dm-row small { display: block; color: var(--muted); } .dm-row .meta { font-size: 11.5px; }
.adminpage .devtools { margin: 0 0 16px; display: grid; gap: 10px; justify-items: start; } .devsteps { margin: 0; padding-left: 18px; color: var(--muted); font-size: 13px; display: grid; gap: 4px; }

/* a pane playing the capture of its Twitch tab */
.pane-body > .capvideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }

/* the one-click strip on a pane that could play its Twitch page's capture */
.pane-body > .capnote { position: absolute; left: 10px; bottom: 10px; z-index: 5; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line)); background: color-mix(in srgb, var(--bg) 82%, transparent); color: var(--text); font: 800 11.5px var(--body); cursor: pointer; backdrop-filter: blur(4px); } .pane-body > .capnote .ic { color: var(--accent2); } .pane-body > .capnote:hover { background: color-mix(in srgb, var(--accent) 18%, var(--bg)); }

/* Twitch's own streak word in the Streaks panel and the pane menu */
.sr-tw { color: var(--accent2); font-weight: 700; } .ps-stream.ps-tw b { color: var(--accent2); }

/* Twitch chat refuses typing for mods and owners when anything paints over its frame, even a clear one. Closed veils and scrims are not drawn at all now, not merely see-through. */
.rs-veil:not(.open) { visibility: hidden; transition: opacity .25s, visibility 0s .25s; } .rs-veil.open { visibility: visible; transition: opacity .25s; }
.pscrim:not(.in) { visibility: hidden; transition: opacity .18s, visibility 0s .18s; } .pscrim.in { visibility: visible; transition: opacity .18s; }

/* Twitch chat refuses typing for mods when anything paints over its frame. The column grip used to straddle the border by four pixels; it sits wholly on the wall side of the border now. */
.side > .vsplit { left: -7px; width: 7px; } .side > .vsplit.r { left: auto; right: -7px; } .wallwrap.railright .rail .vsplit.r { left: -7px; right: auto; }

/* the x that takes a favorite emote off the bar */
.fav { position: relative; } .fav .fav-x { position: absolute; top: -5px; right: -5px; width: 15px; height: 15px; border-radius: 50%; background: var(--card); border: 1px solid var(--line); color: var(--muted); display: none; place-items: center; cursor: pointer; } .fav:hover .fav-x { display: grid; } .fav .fav-x:hover { color: var(--text); border-color: var(--accent); } body.phone .fav .fav-x { display: none !important; }

.devtools .twdbg { display: grid; gap: 3px; width: 100%; } .devtools .twdbg code { font-size: 11px; color: var(--muted); white-space: pre-wrap; word-break: break-word; }

/* the warning triangle that stands in for the streak ring when the companion is not here */
.skwarn { flex: none; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; color: #f5b83d; display: grid; place-items: center; cursor: pointer; border-radius: 6px; } .skwarn:hover { background: color-mix(in srgb, #f5b83d 16%, transparent); }

/* app pages (29 Sept test, prod only): the pane under a real Twitch page, seen only while the page loads */
.pane .tpslot { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; background: #000; color: var(--mut, #9a9088); font-size: 12px; }
.pane .tpslot svg { opacity: .6; }
.qpop .qpop-r small { display: block; font-size: 11px; font-weight: 400; opacity: .7; margin-top: 2px; }

/* desktop with AlphaLurkDev: the real Twitch page inside the pane, untouchable, over the loading slot */
.pane .twframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; background: #000; z-index: 1; }

/* Fusion on a phone (29 Sept: "the navigation bar covers up the video or comes too close"): with the dock at the bottom (one to three
   panes) the stage stops above it, and the pane sizes are worked out from the room that is left */
body.phone:not(.land) .phonewall.msplit:not([data-n="4"]) { --sth: calc(var(--appH, 100dvh) - var(--topH) - 80px); }
body.phone:not(.land) .phonewall.msplit:not([data-n="4"]) .stagecol { padding-bottom: 80px; box-sizing: border-box; }
body.phone:not(.land) .phonewall.msplit[data-n="1"] .pane { align-self: start; }
/* the app's Twitch pages cover the picture, so in Fusion the chat sits under each video instead of over it: the video keeps its full
   16:9 frame (it came out small and letterboxed), the last lines and the Say something pill below */
body.phone .phonewall.msplit.tpages .pane { --ovh: 84px; }
body.phone:not(.land) .phonewall.msplit.tpages .pane { --bh: min(calc(var(--sth) / var(--lr, 1) - 36px - var(--ovh)), calc((var(--stw) - 8px) * 9 / 16)); }
body.phone .phonewall.msplit.tpages .pane > .ovchat { position: static; inset: auto; flex: none; height: var(--ovh); max-height: var(--ovh); padding: 4px 8px 6px; overflow: hidden; align-content: end; }
body.phone .phonewall.msplit.tpages .pane > .ovchat::before { display: none; }
body.phone .phonewall.msplit.tpages .pane > .ovchat .ov-list { max-height: calc(var(--ovh) - 44px); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
/* three or four panes: only the Say something pill under each picture, so the pictures stay as big as the screen allows */
body.phone .phonewall.msplit.tpages[data-n="3"] .pane, body.phone .phonewall.msplit.tpages[data-n="4"] .pane { --ovh: 42px; }
body.phone .phonewall.msplit.tpages[data-n="3"] .pane > .ovchat .ov-list, body.phone .phonewall.msplit.tpages[data-n="4"] .pane > .ovchat .ov-list { display: none; }
body.phone .phonewall.msplit.tpages .pane > .ovchat { width: 100%; box-sizing: border-box; min-width: 0; }
body.phone .phonewall.msplit.tpages .pane > .ovchat .ov-pill { max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* portrait Fusion: the panes stack from the top with a small gap, framed like Stack, instead of floating in the middle of tall rows */
body.phone:not(.land) .phonewall.msplit .stage { align-content: start; gap: 8px; }

a.skwarn { text-decoration: none; }

/* AlphaChat: the channel's pinned message over the top of the feed (29 Sept) */
.chatpin { position: absolute; top: 6px; left: 8px; right: 8px; z-index: 4; padding: 6px 8px 7px; border-radius: 8px; background: color-mix(in srgb, var(--bg) 88%, var(--accent)); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: 0 6px 18px rgba(0,0,0,.35); cursor: pointer; font-size: 12.5px; line-height: 1.4; }
/* the green dot: using AlphaLurk right now (4 Oct). Beside the arrow in chat, and on a profile */
.aal { display: inline-block; width: .44em; height: .44em; min-width: 5px; min-height: 5px; border-radius: 50%; background: #37D67A; margin-right: 4px; vertical-align: middle; animation: aal-pulse 1.9s ease-out infinite; }
@keyframes aal-pulse { 0% { box-shadow: 0 0 0 0 rgba(55, 214, 122, .6); } 70% { box-shadow: 0 0 0 .5em rgba(55, 214, 122, 0); } 100% { box-shadow: 0 0 0 0 rgba(55, 214, 122, 0); } }
@media (prefers-reduced-motion: reduce) { .aal { animation: none; } }
.actpill { display: inline-flex; align-items: center; gap: 2px; padding: 2px 9px; border-radius: 999px; border: 1px solid color-mix(in srgb, #37D67A 45%, var(--line)); color: #9BEFC0; font-size: 12px; font-weight: 700; } .actpill .aal { width: 7px; height: 7px; }
/* AlphaChat presence glow (9 Oct, his pick C): a thin ring and a soft halo around the picture of a chatter who is on AlphaLurk too. The color
   says who: --g-on anyone, --g-pk a Packmate, --g-tw a Blood Twin; --g-live pulses outside it while they use AlphaLurk. The feed carries the
   four colors from the chat options. With profile pictures off, the name glows in the same color instead. */
.feed { --g-on: #FF692E; --g-pk: #F5ADFF; --g-tw: #FF1A1A; --g-live: #3BD638; }
.al-on { --gc: var(--g-on); } .al-pk { --gc: var(--g-pk); } .al-tw { --gc: var(--g-tw); }
.ln.al-on > .face, .ln.al-pk > .face, .ln.al-tw > .face, .glowrow .face { box-shadow: 0 0 0 1.5px var(--gc), 0 0 7px 2px color-mix(in srgb, var(--gc) 45%, transparent); }
.ln.al-live > .face, .glowrow.al-live .face { outline: 2px solid color-mix(in srgb, var(--g-live) 70%, transparent); outline-offset: 2px; animation: al-live 1.9s ease-out infinite; }
@keyframes al-live { 0% { outline-color: color-mix(in srgb, var(--g-live) 85%, transparent); outline-offset: 2px; } 70% { outline-color: transparent; outline-offset: 5px; } 100% { outline-color: transparent; outline-offset: 2px; } }
@media (prefers-reduced-motion: reduce) { .ln.al-live > .face, .glowrow.al-live .face { animation: none; } }
.feed.noav .ln.al-on > .who, .feed.noav .ln.al-pk > .who, .feed.noav .ln.al-tw > .who { text-shadow: 0 0 6px color-mix(in srgb, var(--gc) 80%, transparent), 0 0 1px var(--gc); }
.feed.noav .ln.al-live > .who { --gc: var(--g-live); }
.glowrow { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 6px 8px; margin: 4px 0; border: 1px solid var(--line); border-radius: 10px; background: var(--bg2); cursor: pointer; }
.glowrow .glow-t b { display: block; font-size: 12.5px; } .glowrow .glow-t small { display: block; color: var(--muted); font-size: 11px; }
.glowrow .face { --fz: 22px; width: 22px; height: 22px; font-size: 10px; margin: 0 4px; } .glowrow.al-live .face { --gc: var(--g-pk); }
.glowrow input[type=color] { width: 34px; height: 26px; border: 1px solid var(--line); border-radius: 6px; background: transparent; padding: 0; cursor: pointer; }
.chatpin.mini { left: auto; display: flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; color: var(--accent); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; opacity: .8; } .chatpin.mini:hover, .chatpin.mini:focus-visible { opacity: 1; } .chatpin.mini b { font-weight: 800; }
.chatpin-h { display: flex; align-items: center; gap: 6px; color: var(--accent); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.chatpin-h b { font-weight: 800; } .chatpin-h small { color: var(--muted, #a0a0aa); text-transform: none; letter-spacing: 0; font-size: 11px; }
.chatpin-x { margin-left: auto; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: inherit; display: grid; place-items: center; cursor: pointer; } .chatpin-x:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.chatpin-m { margin-top: 3px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.chatpin.open .chatpin-m { display: block; max-height: 40vh; overflow: auto; }
.chatpin-a { color: var(--text, #fff); } .chatpin .emote { height: 1.6em; vertical-align: middle; }

/* Twitch Credit: Get or Update Companion when the companion is missing or old, else the switch, accent on and red off (29 Sept) */
.earnbtn { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 10px; line-height: 1.12; white-space: nowrap; text-decoration: none; }
.eb-t { display: flex; flex-direction: column; align-items: flex-start; } .eb-t b { font-size: 13px; }
.eb-s { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; opacity: .92; }
.eb-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 30%, transparent); }
.earnbtn.on { background: linear-gradient(90deg, var(--accent), var(--accent2)); border-color: var(--accent); color: var(--ink); }
.earnbtn.off { background: #C62828; border-color: #C62828; color: #fff; } .earnbtn.off:hover { background: #D93636; }
.earnbtn.need { background: transparent; border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line)); color: var(--text); } .earnbtn.need .eb-s { color: var(--accent); } .earnbtn.need:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
/* Companion page: what it does for you */
.cwhy { margin: 14px 0 18px; } .cwhy h2 { margin: 0 0 10px; }
.cperks { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.cperk { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); }
.cperk > svg { flex: none; color: var(--accent); margin-top: 2px; } .cperk span { display: flex; flex-direction: column; gap: 3px; } .cperk small { color: var(--muted); font-size: 12.5px; line-height: 1.4; }

/* a pane Twitch refused to open in: what to do, instead of the bare blocked page (29 Sept) */
.twblock { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 16px; text-align: center; background: color-mix(in srgb, var(--bg) 92%, transparent); }
.twblock > svg { color: var(--accent); } .twblock small { color: var(--muted); max-width: 320px; } .twblock-b { display: flex; gap: 8px; margin-top: 6px; }

.chatpin-l { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; word-break: break-all; } .chatpin-l:hover { color: var(--accent2); }
/* The AlphaLurk chat box wraps, so the whole message shows. DeepClaw chat 2.4 */
.sendrow { align-items: flex-end; }
.sendrow textarea.msgbox { resize: none; overflow-y: hidden; min-height: 38px; max-height: 132px; line-height: 1.4; padding-top: 8px; padding-bottom: 8px; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; box-sizing: border-box; }

/* ---- 5 Oct: Options as tabs, the Balancer as a mixer, recommended on the strip ---- */
.pop-panel:has(.opts) { width: min(340px, calc(100vw - 24px)); }
.opt-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: -4px -4px 8px; }
.opt-tabs button { display: inline-flex; align-items: center; gap: 5px; padding: 6px 7px 7px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.opt-tabs button .ic { width: 14px; height: 14px; } .opt-tabs button:hover { color: var(--text); } .opt-tabs button.on { color: var(--text); border-bottom-color: var(--accent); }
.opt-body { display: grid; gap: 2px; }
.opts .opt { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; } .opts .opt.qrow { grid-template-columns: 1fr; padding: 2px 0; } .opts .opt.qrow:hover { background: none; }
.opts .opt input[type=checkbox] { appearance: none; -webkit-appearance: none; flex: none; width: 34px; height: 19px; margin: 0; border-radius: 999px; background: var(--line); position: relative; cursor: pointer; transition: background .15s; }
.opts .opt input[type=checkbox]::after { content: ''; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: var(--muted); transition: left .15s, background .15s; }
.opts .opt input[type=checkbox]:checked { background: var(--grad); } .opts .opt input[type=checkbox]:checked::after { left: 17px; background: #fff; }
.opts .opt input[type=checkbox]:disabled { opacity: .45; cursor: default; } .opts .opt input[type=checkbox]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.opt.qrow .seg.qcards { justify-self: stretch; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0; border: 0; border-radius: 0; background: none; }
.seg.qcards button { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 6px; align-items: center; text-align: left; padding: 8px 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg2); color: var(--text); white-space: normal; }
.seg.qcards button > span:first-child { font-size: 13px; font-weight: 800; } .seg.qcards button small { grid-column: 1 / -1; color: var(--muted); font-size: 11.5px; font-weight: 400; line-height: 1.3; }
.seg.qcards button.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--bg2)); color: var(--text); } .qcards button:nth-child(3):last-child { grid-column: 1 / -1; }
.opt-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); } .opt-foot .note { margin: 0; }
.opt-dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--muted); } .opt-dot.ok { background: #3BD638; box-shadow: 0 0 6px #3BD63888; } .opt-dot.old { background: #F5C518; box-shadow: 0 0 6px #F5C51888; } .opt-dot.none { background: #FF3B3B; }
@media (prefers-reduced-motion: reduce) { .opts .opt input[type=checkbox], .opts .opt input[type=checkbox]::after { transition: none; } }

.bal-mix { display: grid; grid-template-columns: minmax(0, 168px) minmax(0, 1fr); gap: 10px; align-items: stretch; } .bal-mix.nobars { grid-template-columns: minmax(0, 220px); justify-content: center; }
.bal-mix .bal-pad { max-width: none; margin: 0; align-self: center; }
.bal-bars { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; min-width: 0; } .bal-bars[hidden] { display: none; }
.bal-bar { display: grid; grid-template-rows: auto minmax(44px, 1fr) auto auto; justify-items: center; gap: 4px; min-width: 0; } .bal-bar.off { opacity: .5; }
.bal-bf { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--pc); overflow: hidden; display: grid; place-items: center; background: var(--card); font-size: 9px; font-weight: 800; } .bal-bf img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bal-col { position: relative; width: 10px; border-radius: 999px; background: var(--bg); overflow: hidden; } .bal-col i { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 999px; background: var(--pc); transition: height .08s; }
.bal-bpc { font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; } .bal-bar .pb { width: 24px; height: 24px; } .bal-hint[hidden] { display: none; }

.rail-div { flex: none; width: 100%; display: flex; align-items: center; gap: 3px; color: var(--muted); } .rail-div::before, .rail-div::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.rail-h2 { flex: none; display: flex; align-items: center; gap: 6px; padding: 8px 2px 2px; } .rail-h2 b { font-family: var(--display); font-style: var(--slant); text-transform: var(--caps); letter-spacing: var(--track); font-size: 12px; color: var(--muted); }
.rl.av.rec { background: none; outline: 2px dashed var(--accent2, var(--accent)); outline-offset: -2px; } .rl.rec .rl-pic { background: none; outline: 2px dashed var(--accent2, var(--accent)); outline-offset: -2px; }
.rl-t small.rl-why { color: var(--accent2, var(--accent)); font-weight: 700; }

/* ---- 5 Oct: the Multi-send head says Open or Close ---- */
.dock-foot[hidden] { display: none; }
.foot-head .fh-tog { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 3px 11px 3px 8px; border-radius: 999px; border: 1px solid transparent; background: var(--grad); color: var(--ink); font-size: 12px; font-weight: 800; }
.foot-head .fh-tog .ic { color: inherit; margin: 0; transform: rotate(-90deg); } .foot-head.on .fh-tog .ic { transform: rotate(90deg); }      /* one chevron: up to open, down to close */
.foot-head.on .fh-tog { background: none; border-color: var(--line); color: var(--muted); } .foot-head.on:hover .fh-tog { border-color: var(--accent); color: var(--text); }
.foot-head:focus-visible .fh-tog { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- 5 Oct: Refresh, right of Chat ---- */
.tools .refreshbtn { flex: none; padding-left: 10px; padding-right: 10px; } .tools .refreshbtn.arm { border-color: var(--accent); color: var(--accent); }
@media (prefers-reduced-motion: no-preference) { .tools .refreshbtn.arm .ic { animation: refreshturn .9s linear infinite; } } @keyframes refreshturn { to { transform: rotate(360deg); } }

/* ---- 5 Oct: the FAQ header says points and streaks count ---- */
.faq-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px 14px; align-items: center; margin: 14px 0 12px; padding: 14px 16px; border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: linear-gradient(100deg, color-mix(in srgb, var(--accent) 12%, var(--card)), var(--card) 70%); }
.faq-top > .ic { color: var(--accent); } .faq-top-t b { display: block; font-family: var(--display); font-style: var(--slant); text-transform: var(--caps); letter-spacing: var(--track); font-size: 17px; line-height: 1.2; }
.faq-top-t p { margin: 5px 0 0; font-size: 14px; } .faq-top-t p.faq-top-s { color: var(--muted); font-size: 13px; } .faq-top .btn { white-space: nowrap; }
@media (max-width: 640px) { .faq-top { grid-template-columns: auto minmax(0, 1fr); } .faq-top .btn { grid-column: 1 / -1; justify-self: start; } }

/* Research previews are the page itself on sample numbers (5 Oct). DeepClaw preview 1.0-beta */
.rs-sample { padding: 12px; min-width: 0; } .bb.slim .rs-sample { padding: 8px 2px; } .pv-modal .rs-sample { padding: 0; }
.rs-sample[data-layout=dash] .ga-me { position: static; } .rs-body:has(> .bb.pv-on) > .rs-strip { display: none; }
.rs-body > .bb.pv-on { overflow: visible; } .rs-body > .bb.pv-on > .pv-strip { top: var(--topH, 0px); z-index: 7; border-radius: var(--r) var(--r) 0 0; }      /* a page-long preview: the strip rides under the top bar */
.rs-sample .rs-part > :first-child { margin-top: 0; } .rs-sample > .ga-picks { margin-top: 12px; } .rs-sample > .ga-picks .rs-picks { max-height: 250px; }
.rs-drawer.rs-static { position: static; width: auto; transform: none; visibility: visible; transition: none; overflow: visible; box-shadow: none; border-left: 0; padding: 14px 14px 20px; }
.rs-static .rs-dhead { grid-template-columns: 84px 1fr; } .rs-static .rs-dhead img { width: 84px; height: 112px; } .rs-static .rs-dhead > .btn { display: none; }
.pv-modal .rs-static .rs-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pv-modal .rs-static .rs-parts > div { grid-template-columns: 130px 1fr 78px; }

/* ---------- rank shields (badges.js): Member months, OBS and Streamer.bot Mastery, Recruiting. DeepClaw shields 1.0 ---------- */
.wear { --wz: 64px; display: inline-block; width: var(--wz); height: var(--wz); flex: none; line-height: 0; } .wear > svg { width: 100%; height: 100%; overflow: visible; display: block; }
.wearrow { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-end; } .wearfig { margin: 0; display: grid; justify-items: center; gap: 6px; text-align: center; } .wearfig figcaption { font-size: 11.5px; color: var(--muted); line-height: 1.3; } .wearfig figcaption b { display: block; color: var(--text); font-size: 12.5px; }
.phead .wearrow { gap: 6px 10px; margin-top: 2px; } .phead.looked .wearfig figcaption, .phead.looked .wearfig figcaption b { color: var(--pt); }
.phead-f { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--pa, var(--line)) 35%, transparent); } .phead-f small { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: var(--muted); margin-right: 4px; } .phead.looked .phead-f small { color: var(--pt); opacity: .7; }
.abadge.tiny .abadge-lv { min-width: 15px; height: 15px; padding: 0 3px; font-size: 9px; border-width: 1.5px; right: -4px; bottom: -4px; } .abadge.tiny .abadge-track, .abadge.tiny .abadge-fill { stroke-width: 7; }
.pcard-w { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .pcard-w .wearrow { gap: 4px; } .pcard-w small { color: var(--muted); font-size: 11.5px; }
.medal2.unearned > svg { filter: grayscale(.9) brightness(.55); opacity: .6; }
.sharepv svg { width: 100%; height: auto; border-radius: 16px; display: block; } .shareacts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
@keyframes sh-sweep { 0% { transform: translateX(-120%) skewX(-18deg); } 60%, 100% { transform: translateX(220%) skewX(-18deg); } }
.sh-shine { animation: sh-sweep 4.2s ease-in-out infinite; transform-origin: center; }
@keyframes sh-twinkle { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
.sh-gem { animation: sh-twinkle 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes sh-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.sh-halo { animation: sh-breathe 3s ease-in-out infinite; }
@keyframes sh-rays { 0%, 70%, 100% { opacity: 0; } 78% { opacity: .75; } 86% { opacity: .35; } 92% { opacity: .6; } }
@keyframes sh-spin { to { transform: rotate(360deg); } }
.sh-rays { animation: sh-rays 3s ease-in-out infinite, sh-spin 40s linear infinite; transform-box: fill-box; transform-origin: center; mix-blend-mode: screen; }
.sh-ring { animation: sh-spin 18s linear infinite; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: reduce) { .sh-shine, .sh-gem, .sh-halo, .sh-ring, .sh-rays { animation: none; } .sh-rays { opacity: .25; } }
/* ---------- more looks: textures, gradients, motion, the name's face ---------- */
.phead.pat-scales { --pat: radial-gradient(circle at 50% 0, transparent 10px, var(--pa, var(--accent)) 10.5px 11.5px, transparent 12px), radial-gradient(circle at 50% 0, transparent 10px, var(--pa, var(--accent)) 10.5px 11.5px, transparent 12px); --patsize: 24px 24px; --patpos: 0 0, 12px 12px; }      /* two half-offset rows of arcs: fish scales, seamless */
.phead.pat-waves { --pat: radial-gradient(circle at 50% 0, transparent 13px, var(--pa, var(--accent)) 13.5px 14.5px, transparent 15px), radial-gradient(circle at 50% 100%, transparent 13px, var(--pa, var(--accent)) 13.5px 14.5px, transparent 15px); --patsize: 30px 30px; --patpos: 0 0, 15px 15px; }      /* arcs up and arcs down, half a tile apart: a wave line that joins, seamless */
.phead.pat-stripes { --pat: repeating-linear-gradient(90deg, var(--pa, var(--accent)) 0 2px, transparent 2px 11px); --patsize: auto; }
.phead.pat-hex { --pat: radial-gradient(circle at 25% 25%, transparent 7px, var(--pa, var(--accent)) 7.5px 8.5px, transparent 9px), radial-gradient(circle at 75% 75%, transparent 7px, var(--pa, var(--accent)) 7.5px 8.5px, transparent 9px); --patsize: 40px 40px; }
.phead.grad-glow { background-image: radial-gradient(120% 90% at 18% 0%, color-mix(in srgb, var(--pa, var(--accent)) 34%, transparent), transparent 60%); }
.phead.grad-sweep { background-image: linear-gradient(135deg, color-mix(in srgb, var(--pa, var(--accent)) 32%, transparent), transparent 55%); }
.phead.grad-split { background-image: linear-gradient(90deg, color-mix(in srgb, var(--pa, var(--accent)) 28%, transparent) 0 50%, transparent 50%); }
.phead.grad-corner { background-image: radial-gradient(100% 100% at 100% 100%, color-mix(in srgb, var(--pa, var(--accent)) 42%, transparent), transparent 70%); }
.phead.grad-aurora { background-image: linear-gradient(90deg, rgba(63,184,201,.26), color-mix(in srgb, var(--pa, var(--accent)) 26%, transparent), rgba(180,108,255,.26), rgba(63,184,201,.26)); background-size: 300% 100%; animation: lk-aurora 16s ease-in-out infinite alternate; }
.phead.grad-prism { background-image: linear-gradient(135deg, rgba(255,74,0,.24), rgba(255,212,0,.18) 33%, rgba(0,229,255,.18) 66%, rgba(180,108,255,.24)); background-size: 200% 200%; animation: lk-aurora 20s ease-in-out infinite alternate; }
@keyframes lk-aurora { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) { .phead.grad-aurora, .phead.grad-prism { animation: none; } }
.fx-rain i { top: -16px; width: 1.5px; height: 14px; border-radius: 1px; background: color-mix(in srgb, var(--pa, var(--accent)) 70%, #fff); animation: lk-fall 2.4s linear infinite; }
.fx-sparks i { bottom: -4px; width: 3px; height: 3px; background: #FFB347; box-shadow: 0 0 6px #FF7A00; animation: lk-rise 3.2s ease-out infinite; }
.fx-bubbles i { bottom: -10px; width: 9px; height: 9px; background: transparent; border: 1px solid color-mix(in srgb, var(--pa, var(--accent)) 70%, #fff); animation: lk-rise 9s linear infinite; }
.phead.font-serif .phead-t h1, .phead.font-wide .phead-t h1, .phead.font-plate .phead-t h1, .phead.font-script .phead-t h1, .phead.font-mono .phead-t h1, .phead.font-comic .phead-t h1 { font-family: var(--nf); font-style: normal; text-transform: none; letter-spacing: 0; }
.phead.font-script .phead-t h1 { font-size: clamp(28px, 4vw, 46px); } .phead.font-plate .phead-t h1 { letter-spacing: .06em; text-transform: uppercase; }
.lchip.fontchip { font-size: 13px; } .lchip.fontchip.f-plate { letter-spacing: .05em; text-transform: uppercase; }
.phead-f .abadge .face { --fz: calc(var(--bz) * .78) !important; box-shadow: none; }      /* the header's own picture rule must not size these */
@media (max-width: 640px) { .phead .wearrow { gap: 4px 6px; } .phead .wear { --wz: 44px !important; } .phead-f .abadge { --bz: 26px !important; } }

/* ---------- motion, third pass (10 Oct, his pick of the round-two sheet): every particle scattered by a seeded random (spot, start, size, sway, pace); the old six reworked, fifteen new ---------- */
.lookfx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.lookfx i, .lookfx b, .lookfx s { position: absolute; display: block; }
.lookfx i { 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); will-change: transform, opacity; --base: 8s; animation-duration: calc(var(--base) * var(--dur, 1)) !important; }
@keyframes lk-fall { 0% { transform: translate(0, 0) scale(var(--s)); opacity: 0; } 10% { opacity: .9; } 30% { transform: translate(calc(14px * var(--sw, 1)), 52px) scale(var(--s)); } 55% { transform: translate(calc(-10px * var(--sw, 1)), 96px) scale(var(--s)); } 80% { transform: translate(calc(12px * var(--sw, 1)), 140px) scale(var(--s)); opacity: .8; } 100% { transform: translate(calc(-4px * var(--sw, 1)), 182px) scale(var(--s)); opacity: 0; } }
@keyframes lk-rise { 0% { transform: translate(0, 0) scale(var(--s)); opacity: 0; } 12% { opacity: .9; } 40% { transform: translate(calc(-8px * var(--sw, 1)), -62px) scale(calc(var(--s) * 1.1)); } 70% { transform: translate(calc(8px * var(--sw, 1)), -116px) scale(var(--s)); opacity: .7; } 100% { transform: translate(calc(-3px * var(--sw, 1)), -172px) scale(calc(var(--s) * .6)); opacity: 0; } }
@keyframes lk-tumble { 0% { transform: translate(0, 0) rotate(0deg) scaleX(1) scale(var(--s)); opacity: 0; } 10% { opacity: .95; } 35% { transform: translate(calc(18px * var(--sw, 1)), 60px) rotate(200deg) scaleX(.3) scale(var(--s)); } 65% { transform: translate(calc(-14px * var(--sw, 1)), 118px) rotate(380deg) scaleX(1) scale(var(--s)); opacity: .9; } 100% { transform: translate(calc(10px * var(--sw, 1)), 186px) rotate(560deg) scaleX(.4) scale(var(--s)); opacity: 0; } }
@keyframes lk-flicker { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.7) saturate(1.3); } }
@keyframes lk-wander { 0% { transform: translate(0, 0) scale(var(--s)); opacity: 0; } 15% { opacity: 1; } 35% { transform: translate(calc(28px * var(--sw, 1)), calc(-16px * var(--sw, 1))) scale(var(--s)); opacity: .15; } 55% { transform: translate(calc(10px * var(--sw, 1)), calc(18px * var(--sw, 1))) scale(var(--s)); opacity: 1; } 78% { transform: translate(calc(-24px * var(--sw, 1)), calc(6px * var(--sw, 1))) scale(var(--s)); opacity: .1; } 100% { transform: translate(0, 0) scale(var(--s)); opacity: 0; } }
@keyframes lk-rainfall { 0% { transform: translateY(0) scale(var(--s)); opacity: 0; } 8% { opacity: .8; } 92% { opacity: .7; } 100% { transform: translateY(300px) scale(var(--s)); opacity: 0; } }
@keyframes lk-ripple { 0% { transform: scale(.2); opacity: .8; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes lk-aur { 0% { transform: translateX(-10%) skewX(-8deg); } 50% { transform: translateX(8%) skewX(6deg); } 100% { transform: translateX(-10%) skewX(-8deg); } }
@keyframes lk-hue { to { filter: blur(14px) hue-rotate(360deg); } }
@keyframes lk-twinkle { 0%, 100% { opacity: .15; transform: scale(calc(var(--s) * .6)); } 50% { opacity: 1; transform: scale(calc(var(--s) * 1.3)); } }
@keyframes lk-shoot { 0% { transform: rotate(-30deg) translateX(0); opacity: 0; } 3% { opacity: 1; } 18% { transform: rotate(-30deg) translateX(-520px); opacity: 0; } 100% { transform: rotate(-30deg) translateX(-520px); opacity: 0; } }
@keyframes lk-slide { from { transform: translateX(-20%); } to { transform: translateX(20%); } }
@keyframes lk-fogdrift { from { transform: translateX(0); } to { transform: translateX(130%); } }
@keyframes lk-bubble { 0% { transform: translate(0, 0) scale(var(--s)); opacity: 0; } 10% { opacity: .9; } 40% { transform: translate(calc(-8px * var(--sw, 1)), -60px) scale(var(--s)); } 70% { transform: translate(calc(8px * var(--sw, 1)), -110px) scale(var(--s)); opacity: .9; } 92% { transform: translate(-3px, -150px) scale(var(--s)); opacity: .9; } 96% { transform: translate(-3px, -152px) scale(calc(var(--s) * 1.6)); opacity: .3; } 100% { opacity: 0; } }
@keyframes lk-flash { 0%, 36%, 48%, 100% { opacity: 0; } 38% { opacity: .9; } 40% { opacity: .15; } 42% { opacity: .7; } 45% { opacity: 0; } }
@keyframes lk-burst { 0% { transform: translate(0, 0) rotate(0deg); opacity: 0; } 5% { opacity: 1; } 100% { transform: translate(var(--dx), 180px) rotate(720deg); opacity: 0; } }
@keyframes lk-pulse { 0% { transform: scale(.4); opacity: .6; } 100% { transform: scale(3.2); opacity: 0; } }
@keyframes lk-lick { 0%, 100% { transform: scaleY(1) translateY(0); } 50% { transform: scaleY(1.25) translateY(-4px); } }
@keyframes lk-scan { from { transform: translateY(-100%); } to { transform: translateY(400%); } }
@keyframes lk-glyph { 0% { transform: translateY(-100%); opacity: 0; } 10% { opacity: .9; } 100% { transform: translateY(320px); opacity: 0; } }
@keyframes lk-wisp { 0% { transform: translate(0, 0) scale(.6) rotate(0deg); opacity: 0; } 20% { opacity: .5; } 100% { transform: translate(30px, -140px) scale(2.2) rotate(40deg); opacity: 0; } }
@keyframes lk-pix { 0%, 100% { opacity: 0; transform: scale(.5); } 50% { opacity: 1; transform: scale(1); } }
.fx-embers i { --base: 6s; bottom: -6px; width: 4px; height: 4px; box-shadow: 0 0 6px 1px var(--pa, var(--accent)), 0 0 14px 2px color-mix(in srgb, var(--pa, var(--accent)) 35%, transparent); animation: lk-rise 6s ease-out infinite, lk-flicker .9s ease-in-out infinite; } .fx-embers i::after { content: ""; position: absolute; left: 1px; top: 3px; width: 2px; height: 14px; background: linear-gradient(180deg, var(--pa, var(--accent)), transparent); opacity: .7; }
.fx-fireflies i { --base: 7s; top: calc(8% + var(--y, 50%) * .8); width: 4px; height: 4px; background: #E8FF9A; box-shadow: 0 0 8px 3px rgba(232,255,154,.5); animation: lk-wander 7s ease-in-out infinite; }
.fx-snow i { --base: 10s; top: -8px; background: #FFF7EA; animation: lk-fall 10s ease-in-out infinite; } .fx-snow i:nth-child(3n) { width: 9px; height: 9px; filter: blur(1.5px); opacity: .6; --base: 6.5s; } .fx-snow i:nth-child(4n) { width: 3px; height: 3px; --base: 14s; }
.fx-rain i { --base: 1.4s; top: -16px; width: 1.5px; height: 16px; border-radius: 1px; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--pa, var(--accent)) 70%, #FFF7EA)); animation: lk-rainfall 1.4s linear infinite; } .fx-rain b { bottom: 6px; left: var(--x); width: 18px; height: 6px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--pa, var(--accent)) 70%, #FFF7EA); opacity: 0; animation: lk-ripple 1.4s ease-out infinite; animation-delay: calc(var(--d) * -1); }
.fx-aurora i { left: -10%; right: -10%; width: auto; top: calc(-30% + var(--y, 50%) / 3); height: 55%; border-radius: 50%; opacity: .55; transform: none; background: linear-gradient(90deg, transparent, #3FB8C9 30%, var(--pa, var(--accent)) 55%, #B46CFF 80%, transparent); filter: blur(14px); animation: lk-aur 12s ease-in-out infinite, lk-hue 30s linear infinite; mix-blend-mode: screen; --base: 12s; }
.fx-stars i { --base: 3.2s; top: calc(5% + var(--y, 50%) * .9); width: 2px; height: 2px; background: #FFF7EA; box-shadow: 0 0 4px #fff; animation: lk-twinkle 3.2s ease-in-out infinite; } .fx-stars b { top: calc(5% + var(--y, 20%) / 3); right: -40px; width: 90px; height: 1.5px; background: linear-gradient(90deg, #FFF7EA, transparent); transform-origin: left center; animation: lk-shoot 11s linear infinite; animation-delay: calc(var(--d) * -1); }
.fx-helix svg { position: absolute; left: -20%; top: 50%; width: 140%; height: 120%; transform: translateY(-50%); opacity: .3; animation: lk-slide 24s linear infinite alternate; } .fx-helix svg path { fill: none; stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.fx-fog i { top: calc(var(--y, 50%) / 2 - 10%); left: -40%; width: 60%; height: 70%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--pa, var(--accent)) 26%, transparent), transparent); filter: blur(16px); opacity: .8; transform: none; animation: lk-fogdrift 20s ease-in-out infinite alternate; --base: 20s; }
.fx-leaves i { --base: 9s; top: -10px; width: 12px; height: 8px; border-radius: 80% 0 80% 0; background: color-mix(in srgb, var(--pa, var(--accent)) 55%, #C8742A); animation: lk-tumble 9s ease-in-out infinite; } .fx-leaves i:nth-child(3n) { background: #E0A030; } .fx-leaves i:nth-child(4n) { background: #8E3A1A; }
.fx-bubbles i { --base: 9s; bottom: -12px; width: 10px; height: 10px; background: radial-gradient(circle at 30% 30%, rgba(255,247,234,.9), rgba(255,247,234,.1) 40%, transparent 70%); border: 1px solid color-mix(in srgb, var(--pa, var(--accent)) 60%, #FFF7EA); animation: lk-bubble 9s ease-in-out infinite; }
.fx-lightning i { inset: 0; left: 0; width: auto; height: auto; border-radius: 0; background: radial-gradient(60% 55% at var(--x) 0%, rgba(255,247,234,.6), transparent 70%); transform: none; animation: lk-flash 8s linear infinite; --base: 8s; } .fx-lightning svg { position: absolute; left: var(--x, 70%); top: 0; width: 40px; height: 60%; opacity: 0; animation: lk-flash 8s linear infinite; } .fx-lightning svg path { fill: none; stroke: #FFF7EA; stroke-width: 2; filter: drop-shadow(0 0 6px #9FD8FF); }
.fx-confetti i { --base: 3.2s; top: 40%; left: 30%; width: 6px; height: 10px; border-radius: 1px; animation: lk-burst 3.2s cubic-bezier(.2,.7,.3,1) infinite; } .fx-confetti i:nth-child(3n) { background: #F3C95A; } .fx-confetti i:nth-child(4n) { background: #37D67A; } .fx-confetti i:nth-child(5n) { background: #4E9BFF; } .fx-confetti i:nth-child(7n) { background: #FF2DD1; }
.fx-lanterns i { --base: 15s; bottom: -16px; width: 12px; height: 14px; border-radius: 40% 40% 45% 45%; background: radial-gradient(circle at 40% 35%, #FFE8A8, #FF9B2E 60%, #C45400); box-shadow: 0 0 14px 4px rgba(255,155,46,.45); animation: lk-rise 15s ease-in-out infinite; }
.fx-pulse i { --base: 3s; left: 66px; top: 50%; width: 96px; height: 96px; margin: -48px 0 0 -48px; border: 2px solid var(--pa, var(--accent)); background: transparent; animation: lk-pulse 3s ease-out infinite; opacity: 0; transform: none; }
.fx-fire i { --base: 1.3s; bottom: -8px; width: 26px; height: 34px; border-radius: 50% 50% 20% 20% / 70% 70% 20% 20%; background: radial-gradient(ellipse at 50% 100%, #FFF1A8 0%, #FF9B2E 30%, #FF4A00 60%, transparent 75%); filter: blur(2px); opacity: .85; transform-origin: bottom center; animation: lk-lick 1.3s ease-in-out infinite; }
.fx-crt::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px); } .fx-crt i { --base: 4s; left: 0; width: 100%; height: 30%; border-radius: 0; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--pa, var(--accent)) 18%, transparent), transparent); opacity: 1; transform: none; animation: lk-scan 4s linear infinite; }
.fx-glyphs s { left: var(--x); top: 0; font: 700 11px/1.05 Consolas, Menlo, monospace; color: color-mix(in srgb, var(--pa, var(--accent)) 70%, #9FFF8A); text-shadow: 0 0 6px color-mix(in srgb, var(--pa, var(--accent)) 70%, #9FFF8A); white-space: pre; opacity: 0; animation: lk-glyph 4s linear infinite; animation-delay: calc(var(--d) * -1); animation-duration: calc(4s * var(--dur, 1)); }
.fx-smoke i { --base: 7s; bottom: -10px; width: 30px; height: 30px; background: radial-gradient(closest-side, rgba(255,247,234,.35), transparent); filter: blur(6px); animation: lk-wisp 7s ease-out infinite; }
.fx-pixels i { --base: 2.4s; top: calc(8% + var(--y, 50%) * .85); width: 4px; height: 4px; border-radius: 0; background: var(--pa, var(--accent)); box-shadow: 0 -4px 0 var(--pa, var(--accent)), 0 4px 0 var(--pa, var(--accent)), -4px 0 0 var(--pa, var(--accent)), 4px 0 0 var(--pa, var(--accent)); transform: none; animation: lk-pix 2.4s steps(3) infinite; }
.fx-hearts i { --base: 8s; bottom: -12px; width: 10px; height: 10px; border-radius: 0; background: #FF4D6D; transform: rotate(45deg) scale(var(--s)); animation: lk-rise 8s ease-in-out infinite; } .fx-hearts i::before, .fx-hearts i::after { content: ""; position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #FF4D6D; } .fx-hearts i::before { left: -5px; top: 0; } .fx-hearts i::after { left: 0; top: -5px; }
/* ---------- frames, third pass: the five old ones stay, fourteen from the sheet; art frames carry a .lookfr layer ---------- */
.lookfr { position: absolute; inset: 0; pointer-events: none; z-index: 0; border-radius: inherit; } .lookfr svg { position: absolute; overflow: visible; } .lookfr i, .lookfr s, .lookfr b { position: absolute; display: block; }
.phead.frame-brackets .lookfr i, .phead.frame-brackets .lookfr s, .phead.frame-brackets .lookfr b, .phead.frame-brackets .lookfr em { position: absolute; width: 28px; height: 28px; border: 3px solid var(--pa, var(--accent)); } .phead.frame-brackets .lookfr i { left: 8px; top: 8px; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; } .phead.frame-brackets .lookfr s { right: 8px; top: 8px; border-left: 0; border-bottom: 0; border-radius: 0 6px 0 0; } .phead.frame-brackets .lookfr b { left: 8px; bottom: 8px; border-right: 0; border-top: 0; border-radius: 0 0 0 6px; } .phead.frame-brackets .lookfr em { right: 8px; bottom: 8px; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }
.phead.frame-plate { clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px); border-radius: 0; box-shadow: inset 0 0 0 2px #6B6258, inset 0 0 0 3px #2B2622, inset 0 0 0 6px color-mix(in srgb, var(--pa, var(--accent)) 35%, #3A332C); }
.phead.frame-plate .lookfr i { width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFF7EA, #8A7F70 60%, #3A332C); } .phead.frame-plate .lookfr i:nth-child(1) { left: 16px; top: 16px; } .phead.frame-plate .lookfr i:nth-child(2) { right: 16px; top: 16px; } .phead.frame-plate .lookfr i:nth-child(3) { left: 16px; bottom: 16px; } .phead.frame-plate .lookfr i:nth-child(4) { right: 16px; bottom: 16px; }
.phead.frame-shadowbox { box-shadow: inset 0 0 0 1px var(--pa, var(--accent)), inset 6px 6px 0 -3px color-mix(in srgb, var(--pa, var(--accent)) 35%, transparent), 8px 8px 0 -2px color-mix(in srgb, var(--pa, var(--accent)) 65%, transparent); }
.phead.frame-leather { box-shadow: inset 0 0 0 7px color-mix(in srgb, #8A5A2B 70%, #3A2A1A); outline: 2px dashed #E8C89A; outline-offset: -11px; }
@keyframes lk-neon { 0%, 100% { box-shadow: inset 0 0 0 2px var(--pa, var(--accent)), inset 0 0 12px -2px var(--pa, var(--accent)), 0 0 0 1px color-mix(in srgb, var(--pa, var(--accent)) 50%, transparent), 0 0 24px -6px var(--pa, var(--accent)); } 47% { box-shadow: inset 0 0 0 2px var(--pa, var(--accent)), inset 0 0 18px -2px var(--pa, var(--accent)), 0 0 0 1px var(--pa, var(--accent)), 0 0 34px -4px var(--pa, var(--accent)); } 50% { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--pa, var(--accent)) 60%, transparent), inset 0 0 4px -2px var(--pa, var(--accent)), 0 0 0 1px transparent, 0 0 6px -6px var(--pa, var(--accent)); } 53% { box-shadow: inset 0 0 0 2px var(--pa, var(--accent)), inset 0 0 18px -2px var(--pa, var(--accent)), 0 0 0 1px var(--pa, var(--accent)), 0 0 34px -4px var(--pa, var(--accent)); } }
.phead.frame-neon { box-shadow: inset 0 0 0 2px var(--pa, var(--accent)), inset 0 0 12px -2px var(--pa, var(--accent)), 0 0 24px -6px var(--pa, var(--accent)); animation: lk-neon 3.2s ease-in-out infinite; }
@property --fa { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes lk-ring { to { --fa: 360deg; } }
.phead.frame-ember .lookfr { padding: 3px; background: conic-gradient(from var(--fa), transparent 0 55%, color-mix(in srgb, var(--pa, var(--accent)) 40%, transparent) 70%, var(--pa, var(--accent)) 84%, #FFF7EA 88%, transparent 92%); -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; animation: lk-ring 5s linear infinite; filter: drop-shadow(0 0 6px var(--pa, var(--accent))); }
.phead.frame-holo .lookfr { padding: 2.5px; background: conic-gradient(from var(--fa), #FF4A00, #FFD400, #37D67A, #00E5FF, #4E9BFF, #B46CFF, #FF2DD1, #FF4A00); -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; animation: lk-ring 9s linear infinite; opacity: .9; } .phead.frame-holo { box-shadow: inset 0 0 30px -14px #FFF7EA; }
.phead.frame-helix .lookfr svg { left: 0; right: 0; width: 100%; height: 14px; } .phead.frame-helix .lookfr svg.top { top: 1px; } .phead.frame-helix .lookfr svg.bot { bottom: 1px; }
.phead.frame-filigree { box-shadow: inset 0 0 0 1px #8E5E0C, inset 0 0 0 5px color-mix(in srgb, #F3C95A 30%, transparent); } .phead.frame-filigree .lookfr svg { width: 60px; height: 60px; } .phead.frame-filigree .lookfr svg path { fill: none; stroke: #F3C95A; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lookfr svg.v1 { left: 4px; bottom: 4px; } .lookfr svg.v2 { right: 4px; top: 4px; transform: scale(-1); } .lookfr svg.c1 { left: 4px; top: 4px; } .lookfr svg.c2 { right: 4px; top: 4px; transform: scaleX(-1); } .lookfr svg.c3 { left: 4px; bottom: 4px; transform: scaleY(-1); } .lookfr svg.c4 { right: 4px; bottom: 4px; transform: scale(-1); }
.phead.frame-claw .lookfr svg { width: 90px; height: 90px; } .phead.frame-claw .lookfr svg path { stroke: var(--pa, var(--accent)); stroke-width: 3; stroke-linecap: round; fill: none; filter: drop-shadow(0 0 4px var(--pa, var(--accent))); }
.phead.frame-circuit .lookfr svg { inset: 0; width: 100%; height: 100%; } .phead.frame-circuit .lookfr svg path { fill: none; stroke: color-mix(in srgb, var(--pa, var(--accent)) 55%, #3A332C); stroke-width: 1.4; vector-effect: non-scaling-stroke; } .phead.frame-circuit .lookfr svg circle { fill: var(--pa, var(--accent)); animation: lk-blink 2.4s ease-in-out infinite; } .phead.frame-circuit .lookfr svg circle:nth-child(odd) { animation-delay: 1.2s; }
@keyframes lk-blink { 0%, 100% { opacity: .25; } 50% { opacity: 1; filter: drop-shadow(0 0 4px var(--pa, var(--accent))); } }
.phead.frame-frost { box-shadow: inset 0 0 0 1px #CFE9FF, inset 0 0 22px -6px #9FD8FF; } .phead.frame-frost .lookfr svg { width: 40px; height: 40px; } .phead.frame-frost .lookfr svg path { fill: none; stroke: #DFF3FF; stroke-width: 1.3; stroke-linecap: round; opacity: .9; filter: drop-shadow(0 0 3px #9FD8FF); }
.phead.frame-vines { box-shadow: inset 0 0 0 1px color-mix(in srgb, #7FB069 50%, transparent); } .phead.frame-vines .lookfr svg { width: 150px; height: 60px; } .phead.frame-vines .lookfr svg path { fill: none; stroke: #7FB069; stroke-width: 1.8; stroke-linecap: round; } .phead.frame-vines .lookfr svg ellipse { fill: #9CCC65; }
.phead.frame-paws .lookfr { background: var(--pawrow) repeat-x left 40% bottom 4px / 30px 22px; }
@media (prefers-reduced-motion: reduce) { .phead.frame-neon, .phead.frame-ember .lookfr, .phead.frame-holo .lookfr, .phead.frame-circuit .lookfr svg circle, .lookfx * { animation: none !important; } }

/* ---------- the card view (cardnode.js): the Share preview, the embed, the exports ---------- */
.phead.cardview { width: 100%; max-width: 600px; margin: 0; padding: 14px 16px 12px; gap: 14px; grid-template-columns: auto minmax(0, 1fr); border-radius: 16px; }
.phead.cardview .phead-t h1 { font-size: 26px; } .phead.cardview .face { --fz: 72px; } .phead.cardview .wearrow { gap: 4px 8px; margin-top: 4px; } .phead.cardview .wearfig figcaption { font-size: 10.5px; } .phead.cardview .wearfig figcaption b { font-size: 11.5px; }
.phead.cardview .phead-f { padding-top: 8px; gap: 6px; } .phead.cardview .abadge.tiny .abadge-lv { min-width: 14px; height: 14px; font-size: 8.5px; }
.cardmark { position: absolute; right: 12px; bottom: 9px; z-index: 3; line-height: 0; opacity: .9; } .cardmark svg { width: 76px; height: 12px; }
.phead.cardview.looked .cardmark { filter: drop-shadow(0 0 2px var(--pb)); }
.sharepv { display: grid; } .shareacts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .shareacts.busy .btn { opacity: .7; }
body.embedpage { background: transparent; }

/* emote favorites split, 12 Oct: two star buttons in the picker, the strip can hide */
.favbar[hidden] { display: none !important; }
.pick-tools { display: flex; gap: 6px; margin: 8px 0 6px; }
.pick-tools .pick-star { margin: 0; width: 38px; height: 32px; padding: 0; display: grid; place-items: center; border-radius: 9px; border: 1px solid var(--line); background: transparent; color: var(--accent); transition: border-color .15s, background .15s; }
.pick-tools .pick-star:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.pick-tools .pick-star.on { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: var(--accent); }
.pick-tools .pick-star:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.staric .si-star { fill-opacity: 0; } .pick-star.on .staric .si-star { fill-opacity: .3; }
.staric .si-badge { fill: var(--accent); stroke: var(--card); stroke-width: 2; paint-order: stroke; }
.staric .si-glyph { stroke: var(--ink); } .staric .si-pupil { fill: var(--ink); }
.pick-tools .pick-star.pick-above { width: auto; padding: 0 10px 0 7px; display: inline-flex; gap: 7px; } .pick-lbl { font-size: 12px; font-weight: 700; color: var(--text); white-space: nowrap; }
.fav .fav-x { display: none !important; }
/* Streaming page and Coming soon tabs, 12 Oct */
.cards.duo.streampick { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; } .streampick .bigcard { padding: 22px; } .streampick .bigcard .ic { color: var(--accent); }
.card.soon { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 22px; } .card.soon > .ic { color: var(--accent); flex: none; } .card.soon > div { flex: 1 1 240px; min-width: 0; } .card.soon b { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 16px; }
.soonpill { font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
/* AlphaChat options, icon rail (pick A, 12 Oct) */
.dock-menu.copts { width: min(320px, calc(100% - 16px)); }
.copt-rail { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin: 8px 0 0; }
.copt-ri { display: grid; place-items: center; gap: 3px; padding: 8px 0 6px; border: 1px solid var(--line); border-radius: 11px; background: transparent; color: var(--accent); font: inherit; font-size: 10px; font-weight: 700; cursor: pointer; transition: border-color .15s, background .15s; }
.copt-ri span { color: var(--muted); } .copt-ri:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); } .copt-ri:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.copt-ri.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); } .copt-ri.on span { color: var(--text); }
.copt-panel { position: relative; margin-top: 10px; padding: 2px 10px 10px; border: 1px solid var(--line); border-radius: 11px; background: var(--bg2); }
.copt-panel::before { content: ""; position: absolute; top: -6px; left: calc(var(--x, 50%) - 5px); width: 10px; height: 10px; background: var(--bg2); border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: rotate(45deg); transition: left .2s; }
.tagin { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; min-height: 34px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); cursor: text; }
.dock-menu .tagin input { flex: 1 1 90px; min-width: 80px; width: auto; border: 0; background: transparent; padding: 2px; margin: 0; color: var(--text); outline: none; box-shadow: none; }
.tagc { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; padding: 2px 3px 2px 8px; border-radius: 7px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--text); }
.tagx { display: grid; place-items: center; width: 16px; height: 16px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); cursor: pointer; padding: 0; } .tagx:hover { color: var(--text); background: color-mix(in srgb, var(--text) 10%, transparent); }
.fhint { display: block; color: var(--muted); font-size: 11px; margin-top: 4px; }
.dock-menu select.fxsel { width: 100%; padding: 7px 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); color: var(--text); font: inherit; font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .copt-panel::before { transition: none; } }
/* effect preview line in the chat options, 12 Oct */
.feed.fxpv { position: relative; inset: auto; flex: none; height: auto; max-height: none; overflow: hidden; margin: 8px 0 2px; padding: 3px 0; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); font-size: 12.5px; pointer-events: none; }
.feed.fxpv .ln { position: relative; padding: 5px 10px; line-height: 1.45; }
.fxpv-who { color: #7FB6FF; font-weight: 800; } .fxpv-w { font-weight: 700; } .feed.fxpv .at.me { color: var(--accent2); font-weight: 800; }
/* Your Name and the color picker, 12 Oct */
.yn-prev { margin: 4px 0 6px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); font-size: 12.5px; color: var(--muted); } .yn-name { color: var(--text); font-weight: 800; }
.yn-pick[hidden] { display: none; } .cpick { display: grid; gap: 8px; margin-top: 6px; }
.cp-sq { position: relative; height: 130px; border-radius: 9px; cursor: crosshair; touch-action: none; background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(var(--h, 20) 100% 50%)); outline-offset: 2px; }
.cp-sq:focus-visible { outline: 2px solid var(--accent); }
.cp-dot { position: absolute; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #FFF6E8; box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 1px 4px rgba(0,0,0,.4); transform: translate(-50%, -50%); background: var(--cp); pointer-events: none; }
.dock-menu input.cp-hue { -webkit-appearance: none; appearance: none; width: 100%; height: 12px; margin: 0; padding: 0; border: 0; border-radius: 6px; background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.cp-hue::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #FFF6E8; background: transparent; box-shadow: 0 0 0 1px rgba(0,0,0,.55); cursor: pointer; }
.cp-hue::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #FFF6E8; background: transparent; box-shadow: 0 0 0 1px rgba(0,0,0,.55); cursor: pointer; }
.cp-tabs { justify-self: start; } .cp-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .cp-f { min-width: 0; }
.cp-f { display: flex; align-items: center; gap: 4px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); } .cp-f span { font-size: 11px; font-weight: 800; color: var(--muted); } .cp-f small { font-size: 10px; color: var(--muted); }
.dock-menu .cp-f input, .cpick .cp-f input { width: 100%; min-width: 0; border: 0; background: transparent; padding: 2px 0; margin: 0; color: var(--text); font: inherit; font-size: 12.5px; -moz-appearance: textfield; } .cp-f input::-webkit-inner-spin-button { display: none; }
.cp-hexrow { display: flex; align-items: center; gap: 8px; } .cp-hexrow span { font-size: 11px; font-weight: 800; color: var(--muted); }
.dock-menu input.cp-hex { flex: 1; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text); font: 12.5px ui-monospace, Consolas, monospace; box-shadow: inset 22px 0 0 -2px var(--cp); padding-left: 28px; }
/* person card invite for someone not on AlphaLurk yet, 12 Oct */
.pcard-np { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.pcard-inv { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.pcard-inv-h { display: flex; gap: 9px; align-items: flex-start; } .pcard-inv-h > .ic { color: var(--accent); flex: none; margin-top: 2px; } .pcard-inv-h b { display: block; font-size: 13px; } .pcard-inv-h small { display: block; color: var(--muted); font-size: 11.5px; line-height: 1.4; }
.pcard-inv-a { display: flex; gap: 6px; flex-wrap: wrap; } .pcard-inv-a .btn { flex: 1 1 auto; justify-content: center; }
/* channel colors: the dot is a button (12 Oct) */
.dot.cc { cursor: pointer; position: relative; flex: none; transition: transform .12s, box-shadow .12s; }
.dot.cc::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; }
.dot.cc:hover, .dot.cc:focus-visible { transform: scale(1.4); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc, var(--accent)) 35%, transparent); outline: none; }
.ccpop { width: 280px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow-y: auto; box-sizing: border-box; } .ccpop .cpick, .ccpop .cp-hexrow { min-width: 0; } .ccpop .cp-hex { flex: 1; width: 100%; min-width: 0; box-sizing: border-box; } .cc-h { display: flex; align-items: center; gap: 8px; font-size: 13px; } .cc-h .dot { width: 12px; height: 12px; flex: none; }
@media (prefers-reduced-motion: reduce) { .dot.cc { transition: none; } }
/* help button, right of Chat (12 Oct): always red, whatever the theme */
.tools .helppop { flex: none; } .tools .helppop .pop-panel { width: 290px; max-width: calc(100vw - 16px); }
.tools .helpbtn { padding-left: 10px; padding-right: 10px; color: #FF3B3B; border-color: color-mix(in srgb, #FF3B3B 55%, transparent); }
.tools .helpbtn:hover, .tools .helpbtn[aria-expanded="true"] { color: #FF5A5A; background: color-mix(in srgb, #FF3B3B 14%, transparent); border-color: #FF3B3B; }
.tools .helpbtn > span:empty { display: none; }
.helpbox { display: grid; gap: 8px; } .helpbox .hb-h { font-size: 14px; }
.helpbox .hb-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: color-mix(in srgb, var(--text) 4%, transparent); color: var(--text); font: 700 13px var(--body); cursor: pointer; text-align: left; }
.helpbox .hb-row:hover { border-color: var(--accent); } .helpbox .hb-row.arm { border-color: #FF3B3B; color: #FF5A5A; }
.helpbox .hb-foot { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.helpbox .hb-bug { border-color: color-mix(in srgb, var(--accent) 60%, transparent); color: var(--accent); }
/* Theater Mode (12 Oct): 20% brightness reads the same as an 80% black overlay. Playing videos stay full; a hovered part lifts so it stays usable. */
body.theater #top, body.theater #foot, body.theater .rail, body.theater .side, body.theater .tools > :not(.thwrap), body.theater .pane-bar, body.theater .pane:not(.thlit), body.theater .pcards, body.theater .extrabox, body.theater .vsplit, body.theater .rsplit, body.theater .hsplit { filter: brightness(var(--thb, .2)); transition: filter .25s; }
body.theater #top:hover, body.theater .rail:hover, body.theater .side:hover, body.theater .tools > :not(.thwrap):hover, body.theater .pane-bar:hover, body.theater .tools > :focus-within, body.theater .side:focus-within { filter: none; }
.tools .thwrap { flex: none; display: flex; align-items: center; gap: 8px; } .tools .thwrap.on { padding-right: 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 8%, transparent); }
.thdim { display: flex; align-items: center; gap: 6px; animation: thgrow .2s ease-out; } .thdim input { width: 110px; accent-color: var(--accent); } .thdim-v { min-width: 3ch; font: 700 12px var(--body); color: var(--accent); font-variant-numeric: tabular-nums; }
@keyframes thgrow { from { opacity: 0; transform: translateX(-6px); } }
.tools .thbtn { flex: none; } .tools .thbtn.on { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
@media (prefers-reduced-motion: reduce) { .thdim { animation: none; } body.theater #top, body.theater #foot, body.theater .rail, body.theater .side, body.theater .tools > *, body.theater .pane-bar, body.theater .pane { transition: none; } }
/* Emote Palette (12 Oct): a panel under the chat box, up to 50 emotes */
.palbox { margin-top: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--text) 3%, transparent); } .palbox[hidden] { display: none; }
.pal-h { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; color: var(--accent); } .pal-h b { color: var(--text); font-size: 12px; } .pal-h .meta { color: var(--muted); font-size: 11px; margin-right: auto; font-variant-numeric: tabular-nums; }
.pal-h .mini { padding: 2px 8px; } .pal-h .pal-x { padding: 2px 6px; }
.pal-grid { display: flex; flex-wrap: wrap; gap: 5px; max-height: 168px; overflow-y: auto; } .pal-grid .fav { width: 38px; height: 34px; display: grid; place-items: center; border-radius: 9px; border: 1px solid var(--line); background: var(--bg); cursor: pointer; padding: 2px; overflow: hidden; } .pal-grid .fav:hover { border-color: var(--accent); }
.pal-grid .fav img { max-width: 30px; max-height: 28px; } .pal-empty { margin: 2px 0; }
.pick.pal-on { box-shadow: inset 0 0 0 2px var(--accent); border-radius: 8px; }
/* one master volume on the desktop wall (12 Oct): the slider by the stream count goes, the one before Balancer and Chat stays. The phone wall menu keeps its own. */
.tools > .master:not(.master2) { display: none; } .pd-wall .tools > .master:not(.master2) { display: flex; }
.pick-tools .pick-done { margin-left: auto; color: var(--accent); border-color: var(--accent); } .pick-tools .pick-done[hidden] { display: none; }
/* Chat in Fusion (12 Oct): dimmed, reads On Video */
.tools > .chatbtn { flex: none; } .tools > .chatbtn.dim { opacity: .45; }
/* floating wall window buttons (12 Oct): Radio, maximize, Back to Watch, flush right like a desktop window */
.fl-bar:has(.fl-caps) { padding-right: 0; }
.fl-caps { display: flex; align-self: stretch; margin-left: 2px; }
.fl-cap { width: 40px; height: 100%; display: grid; place-items: center; border: 0; border-radius: 0; background: transparent; color: var(--text); cursor: pointer; transition: background .12s, color .12s; }
.fl-cap:hover { background: color-mix(in srgb, var(--text) 10%, transparent); } .fl-cap.on { color: var(--accent); } .fl-cap:disabled { opacity: .35; cursor: default; background: transparent; }
.fl-cap.fl-home:hover { background: var(--accent); color: var(--ink, #111); }
main#view.floating.snapped .fl-size { display: none; } main#view.floating.snapped { border-radius: 8px; }
.fl-snapghost { position: fixed; border: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); border-radius: 10px; pointer-events: none; transition: left .12s, top .12s, width .12s, height .12s; }
@media (prefers-reduced-motion: reduce) { .fl-snapghost, .fl-cap { transition: none; } }
.fl-tap { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px; border: 0; background: var(--accent); color: var(--ink, #111); font: 800 12px var(--body); cursor: pointer; animation: tapPulse 1.6s ease-in-out infinite; }
@keyframes tapPulse { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent); } }
@media (prefers-reduced-motion: reduce) { .fl-tap { animation: none; } }
main#view.floating.popped.chip { height: auto; }      /* Radio in the popped-out window: just the bar, the window shrinks to it (12 Oct) */
/* Radio panel under the floating wall's bar (12 Oct): one card with the bar, same width and left edge, levels lined up under the controls */
main#view.floating.chip { min-width: 340px; }
main#view.floating.popped.chip { width: 100% !important; min-width: 0; }
main#view.floating .fl-radio { display: grid; gap: 10px; align-self: stretch; width: auto; max-width: none; margin: 0; padding: 10px 14px 12px 12px; background: var(--card); border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); box-sizing: border-box; }
main#view.floating.chip .fl-bar { background: var(--card); }
.rd-top { display: flex; align-items: center; gap: 10px; min-height: 28px; }
.rd-master { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; color: var(--muted); } .rd-master input { flex: 1; min-width: 0; margin: 0; accent-color: var(--accent); }
.rd-bal { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--text); font: 700 12px var(--body); cursor: pointer; flex: none; }
.rd-bal:hover { border-color: var(--accent); } .rd-bal.on { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.rd-pad[hidden] { display: none; } .rd-pad { padding: 2px 0; } .rd-pad .bal { max-width: 260px; margin: 0 auto; }
.rd-meters { display: grid; gap: 7px; padding-left: 2px; } .rd-m { display: grid; grid-template-columns: minmax(0, 120px) 1fr 40px; align-items: center; gap: 10px; font-size: 12px; } .rd-m.off { opacity: .5; }
.rd-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: 700; } .rd-n::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--pc); vertical-align: 0; }
.rd-t { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; } .rd-t i { display: block; height: 100%; border-radius: 3px; background: var(--pc); transition: width .15s; }
.rd-v { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .rd-t i { transition: none; } }
.toprole { margin-right: 2px; } body.phone .topright .toprole { display: none; }      /* Viewer Only | Streamer, then Simple | Advanced on Watch (12 Oct) */
@media (max-width: 900px), (max-height: 500px) and (hover: none) and (pointer: coarse) { .topright .toprole { display: none; } }
.tools > .wallmode { flex: none; } .pd-wall .tools > .wallmode { display: none; }      /* Simple | Advanced in the wall toolbar (12 Oct); the phone menu has its own */
/* Twitch Credit not on (12 Oct): the pill rings until it is */
@keyframes ebRing { 0% { box-shadow: 0 0 0 0 var(--ring); } 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.tools .earnbtn.off { --ring: rgba(255, 70, 70, .75); animation: ebRing 1.6s ease-out infinite; }
.tools .earnbtn.need { --ring: color-mix(in srgb, var(--accent) 75%, transparent); animation: ebRing 1.6s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .tools .earnbtn.off, .tools .earnbtn.need { animation: none; box-shadow: 0 0 0 3px var(--ring); } }
/* phones on the website (12 Oct): one page pointing at the Android app */
html.mgate-on #top, html.mgate-on #foot, html.mgate-on #view { display: none !important; }
.mgate { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px 18px; box-sizing: border-box; background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%), var(--bg); }
.mg-card { width: 100%; max-width: 420px; display: grid; gap: 14px; text-align: center; justify-items: center; }
.mg-mark { font-size: 30px; } .mg-badge { display: inline-block; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent); font: 800 11px var(--body); letter-spacing: .06em; text-transform: uppercase; }
.mg-h { margin: 4px 0 0; font-family: var(--display); font-style: var(--slant); text-transform: var(--caps); font-size: clamp(34px, 11vw, 48px); line-height: 1; color: var(--text); }
.mg-p { margin: 0; font-size: 16px; line-height: 1.45; color: var(--text); } .mg-desk { margin: 0; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--text) 5%, transparent); font-size: 14px; color: var(--muted); } .mg-desk b { color: var(--text); }
.mg-any { margin-top: 6px; color: var(--muted); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; } .mg-fine { color: var(--muted); font-size: 11px; opacity: .8; }
/* site tour keys (12 Oct) */
.tour-keys { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.tour-keys .tk { display: inline-flex; align-items: center; gap: 4px; } .tour-keys .tk span { margin-left: 2px; }
.tour-keys kbd { min-width: 18px; padding: 1px 5px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); font: 700 10px var(--body); text-align: center; }
@media (hover: none) and (pointer: coarse) { .tour-keys { display: none; } }
/* Guide in the top nav (12 Oct): Site Tour, Page Tour and FAQ Page slide out to the right */
.navguide { display: flex; align-items: center; flex: none; }
.mainnav .navg { position: relative; cursor: pointer; } .mainnav .navguide.open .navg:not(.on) { color: var(--text); background: var(--bg2); }
.mainnav .navg.cue::after { content: ''; position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.guide-out { display: flex; align-items: center; gap: 2px; max-width: 0; overflow: hidden; opacity: 0; transform: translateX(-8px); transition: max-width .28s ease, opacity .2s ease, transform .28s ease; pointer-events: none; }
.navguide.open .guide-out { max-width: 460px; opacity: 1; transform: none; pointer-events: auto; margin-left: 2px; }
.mainnav .guide-out .gitem { font-size: 13px; padding: 6px 10px; gap: 6px; color: var(--text); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); }
.mainnav .guide-out .gitem:hover { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.mainnav .guide-out .gitem.off { opacity: .4; cursor: default; } .mainnav .guide-out .gitem.off:hover { color: var(--text); background: transparent; border-color: var(--line); }
@media (prefers-reduced-motion: reduce) { .guide-out { transition: none; transform: none; } }
/* emote picker fits the dock (12 Oct): the button row wraps, nothing in the menu is wider than the menu, no sideways scroll */
.dock-menu.picker { width: min(340px, calc(100% - 16px)); overflow-x: hidden; } .dock-menu.picker > * { min-width: 0; max-width: 100%; }
.pick-tools { flex-wrap: wrap; row-gap: 6px; } .pick-scroll { overflow-x: hidden; } .pick-tools .pick-done { margin-left: 0; }