@keyframes hop {
0% {
transform: translateY(14px) scale(0.9);
}
}
@keyframes bob {
40% {
transform: translateY(-8px) rotate(-4deg);
}
}
@keyframes print {
0% {
transform: translateY(-22px) rotate(-5deg);
opacity: 0;
}
}
@keyframes sblink {
0%,
to {
transform: scaleY(1);
}
45%,
60% {
transform: scaleY(0.08);
}
}
@keyframes pulse {
50% {
opacity: 0.45;
}
}
@font-face {
font-family: "Outfit";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/assets/fonts/outfit-latin-400-normal.woff2) format("woff2");
}
@font-face {
font-family: "Outfit";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/assets/fonts/outfit-latin-500-normal.woff2) format("woff2");
}
@font-face {
font-family: "Outfit";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/assets/fonts/outfit-latin-600-normal.woff2) format("woff2");
}
@font-face {
font-family: "Outfit";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/assets/fonts/outfit-latin-700-normal.woff2) format("woff2");
}
@font-face {
font-family: "Outfit";
font-style: normal;
font-weight: 800;
font-display: swap;
src: url(/assets/fonts/outfit-latin-800-normal.woff2) format("woff2");
}
@font-face {
font-family: "JetBrains Mono";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/assets/fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2");
}
:root {
color-scheme: light;
--bg: #f2f4f8;
--line: #e3e6ee;
--line-strong: #b9c0d4;
--red: #ef4438;
--blue: #2f80ed;
--main: #2f80ed;
--deep: #1f5fc0;
--soft: #e6f0fe;
--on: #fff;
--text: #1f5fc0;
--band: #2f80ed;
--font-display: "Outfit", system-ui, sans-serif;
--font-body: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
--k-cd: #23764a;
--k-raidhour: #b83429;
--k-max: #b0174f;
--k-spotlight: #946400;
--k-raidday: #b44f18;
--k-fest: #6530e6;
--k-season: #16707c;
--k-event: #2563d0;
--yellow: #ffc531;
--ink: #172036;
--muted: #5b6480;
--surface: #ffffff;
--spark: #ffc531;
--wacc: #ffc531;
--t1: #56b4ff;
--t2: #1f66e0;
--gs: rgba(47, 128, 237, 0.32);
}
:root[data-team="red"] {
--main: #ef4438;
--deep: #c22e24;
--soft: #feebe9;
--text: #c22e24;
--band: #ef4438;
--t1: #ff8a6b;
--t2: #d9302a;
--gs: rgba(239, 68, 56, 0.32);
}
:root[data-team="yellow"] {
--main: #ffc531;
--deep: #d9a000;
--soft: #fff5d6;
--on: #2b2000;
--text: #8a6500;
--band: #ffc531;
--wacc: #ffffff;
--t1: #ffd95a;
--t2: #f59e0b;
--gs: rgba(230, 170, 20, 0.32);
}
[hidden] {
display: none !important;
}
body,
html {
background: var(--bg);
color: var(--ink);
}
body {
font-family: var(--font-body);
line-height: 1.4;
padding-left: max(16px, env(safe-area-inset-left, 0));
padding-right: max(16px, env(safe-area-inset-right, 0));
padding-block: 0 24px;
margin: 0;
font-size: 15.5px;
}
body.clean {
padding-bottom: 180px;
}
a,
button {
font: inherit;
color: inherit;
}
button {
cursor: pointer;
}
a:focus-visible,
button:focus-visible,
input:focus-visible {
outline: 3px solid var(--ink);
outline-offset: 2px;
}
.stripe {
position: fixed;
left: 0;
right: 0;
top: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
z-index: 8;
}
.banner b,
.stripe i {
display: block;
}
.wrap {
max-width: 540px;
margin: 0 auto;
padding-top: 20px;
display: flex;
flex-direction: column;
gap: 14px;
}
.brand,
.top {
display: flex;
align-items: center;
}
.top {
justify-content: space-between;
gap: 10px;
}
.brand {
gap: 8px;
border: 0;
background: 0 0;
padding: 0;
}
.word {
font-size: 23px;
line-height: 1;
}
.word span {
color: var(--wacc) !important;
}
.teams {
display: flex;
background: var(--surface);
border-radius: 999px;
}
.team {
border-radius: 50%;
border: 0;
padding: 0;
}
.banner,
.hero {
box-sizing: border-box;
}
.hero {
background: var(--main);
color: var(--on);
border-radius: 26px;
padding: 20px 18px;
position: relative;
overflow: hidden;
min-height: 168px;
}
.hero h1 {
font-family: var(--font-display);
font-weight: 700;
letter-spacing: 0.01em;
font-size: 28px;
line-height: 1.02;
margin: 0;
text-wrap: balance;
}
.hero p {
margin: 6px 0 0;
font-weight: 700;
font-size: 14px;
opacity: 0.92;
}
.hero .txt {
position: relative;
max-width: 58%;
}
.hero svg.mascot {
position: absolute;
right: 0;
bottom: 6px;
width: 46%;
max-width: 150px;
height: auto;
}
.hero.small {
min-height: 0;
}
.hero.small .txt {
max-width: 70%;
}
.banner {
display: flex;
align-items: center;
gap: 10px;
background: var(--surface);
border: 2px dashed var(--main);
border-radius: 18px;
padding: 10px 12px;
text-align: left;
width: 100%;
}
.banner .ic {
flex: none;
width: 34px;
height: 34px;
border-radius: 12px;
background: var(--soft);
display: grid;
place-items: center;
}
.banner b {
font-size: 12px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text);
}
.banner span.t {
display: block;
font-weight: 800;
font-size: 15px;
}
.banner .grow {
flex: 1;
min-width: 0;
}
.tools {
display: grid;
}
.coffee,
.foot {
align-items: center;
}
.foot {
display: flex;
flex-direction: column;
gap: 10px;
padding-top: 6px;
}
.coffee {
display: inline-flex;
gap: 8px;
background: var(--surface);
border: 0;
border-radius: 999px;
padding: 10px 16px;
font-weight: 800;
font-size: 14px;
box-shadow: 0 2px 0 var(--line);
}
.legal {
font-size: 11.5px;
color: var(--muted);
text-align: center;
font-weight: 600;
max-width: 40ch;
}
.back,
.seg button[aria-pressed="true"] {
background: var(--surface);
box-shadow: 0 2px 0 var(--line);
}
.back,
.seg button {
border: 0;
font-weight: 800;
}
.back {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 6px;
border-radius: 999px;
padding: 8px 14px 8px 10px;
font-size: 14px;
}
.presets {
display: grid;
}
.preset {
font-weight: 800;
font-size: 12.5px;
line-height: 1.1;
}
.preset svg {
stroke: var(--muted);
}
.preset[aria-pressed="true"] {
background: var(--soft);
}
.tile[aria-pressed="true"] {
border-color: var(--main);
background: var(--soft);
}
.preset[aria-pressed="true"] svg {
stroke: var(--text);
}
.card {
background: var(--surface);
padding: 16px;
display: flex;
flex-direction: column;
gap: 12px;
}
.head {
display: flex;
align-items: center;
gap: 10px;
}
.head h2,
.num {
font-family: var(--font-display);
font-weight: 700;
letter-spacing: 0.01em;
}
.num {
flex: none;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--main);
color: var(--on);
display: grid;
place-items: center;
}
.head h2 {
font-size: 19px;
margin: 0;
flex: 1;
}
.head small {
font-size: 12px;
font-weight: 700;
color: var(--muted);
}
.hint,
.sugg small {
color: var(--muted);
font-weight: 600;
}
.hint {
margin: 0;
font-size: 13px;
}
.seg {
display: grid;
grid-template-columns: 1fr 1fr;
background: var(--bg);
border-radius: 14px;
padding: 4px;
gap: 4px;
}
.seg button {
background: 0 0;
border-radius: 11px;
padding: 10px;
}
.seg button[aria-pressed="true"] {
color: var(--text);
}
.search {
position: relative;
}
.search input,
.sugg {
border: 2px solid var(--line);
border-radius: 14px;
}
.search input {
width: 100%;
box-sizing: border-box;
font: inherit;
font-weight: 700;
font-size: 16px;
padding: 12px 14px;
}
.sugg {
position: absolute;
left: 0;
right: 0;
top: calc(100% + 6px);
background: var(--surface);
z-index: 5;
overflow: hidden;
box-shadow: 0 10px 24px rgba(23, 32, 54, 0.14);
}
.sugg button {
display: flex;
width: 100%;
justify-content: space-between;
background: 0 0;
padding: 11px 14px;
text-align: left;
}
.sugg button + button {
border-top: 1px solid var(--line);
}
.search input,
.sugg button:hover {
background: var(--bg);
}
.sugg small {
font-variant-numeric: tabular-nums;
}
.picked {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.chip,
.sugg button {
border: 0;
font-weight: 800;
}
.chip {
display: inline-flex;
align-items: center;
gap: 6px;
border-radius: 999px;
padding: 7px 8px 7px 12px;
background: var(--main);
color: var(--on);
font-size: 14px;
}
.chip i,
.sw::after {
width: 20px;
height: 20px;
border-radius: 50%;
}
.chip i {
font-style: normal;
display: grid;
place-items: center;
background: rgba(255, 255, 255, 0.3);
font-size: 13px;
}
.quick button,
.sub {
font-size: 13px;
color: var(--muted);
}
.sub {
font-family: var(--font-display);
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
margin: 0;
}
.quick {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.quick button {
border: 2px dashed var(--line-strong);
background: 0 0;
padding: 6px 11px;
font-weight: 800;
}
.quick button[aria-pressed="true"] {
border-style: solid;
border-color: var(--main);
background: var(--soft);
color: var(--ink);
}
.toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border: 0;
background: var(--bg);
border-radius: 14px;
padding: 10px 12px;
font-weight: 800;
text-align: left;
}
.quick button,
.sw {
border-radius: 999px;
}
.sw {
flex: none;
width: 44px;
height: 26px;
background: var(--line-strong);
position: relative;
}
.sw::after {
content: "";
position: absolute;
top: 3px;
left: 3px;
background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
transition: transform 0.15s;
}
.toggle[aria-pressed="true"] .sw {
background: var(--main);
}
.evbtn[aria-pressed="true"] .sw::after,
.toggle[aria-pressed="true"] .sw::after {
transform: translateX(18px);
}
.tile[aria-pressed="true"] .dot {
background: var(--main);
border-color: var(--main);
}
.check[aria-pressed="true"] .box svg,
.tile[aria-pressed="true"] .dot svg {
opacity: 1;
}
.warn {
margin: 0;
font-size: 13px;
color: var(--muted);
font-weight: 600;
}
.search input,
.summary b,
.warn b {
color: var(--ink);
}
.tray {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 7;
background: var(--surface);
box-shadow: 0-6px 24px rgba(23, 32, 54, 0.12);
padding-top: 12px;
padding-bottom: calc(14px + env(safe-area-inset-bottom, 0));
padding-left: max(16px, env(safe-area-inset-left, 0));
padding-right: max(16px, env(safe-area-inset-right, 0));
}
.tray-in {
position: relative;
max-width: 540px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 8px;
}
.floatsnap svg {
display: block;
width: 100%;
height: 100%;
}
svg .sbody {
transform-box: fill-box;
transform-origin: center;
}
.floatsnap:not([hidden]) .sbody,
.mascot.happy:not([hidden]) .sbody {
animation: bob 0.5s ease;
}
@media (prefers-reduced-motion: reduce) {
svg .sbody {
animation: none !important;
}
}
.floatsnap,
.traysnap {
pointer-events: none;
animation: hop 0.4s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.floatsnap {
position: fixed;
left: 0;
top: 0;
width: 76px;
height: 76px;
z-index: 9;
}
.traysnap {
position: absolute;
right: 6px;
top: -92px;
width: 84px;
height: 84px;
}
.out {
font-family: var(--font-mono);
font-size: 12px;
line-height: 1.4;
color: var(--muted);
background: var(--bg);
border-radius: 12px;
padding: 8px 10px;
max-height: 52px;
overflow: auto;
word-break: break-all;
}
.copy,
.save > summary {
display: flex;
align-items: center;
gap: 10px;
}
.copy {
position: relative;
border: 0;
padding: 14px;
font-size: 20px;
justify-content: center;
}
.copy:active {
transform: translateY(3px);
box-shadow: 0 2px 0 var(--deep);
}
.copy svg {
stroke: var(--on);
}
.meta {
font-size: 11.5px;
color: var(--muted);
font-weight: 700;
text-align: center;
font-variant-numeric: tabular-nums;
}
.toast {
position: fixed;
left: 50%;
bottom: calc(24px + env(safe-area-inset-bottom, 0));
transform: translateX(-50%);
background: var(--ink);
color: #fff;
font-weight: 800;
font-size: 14px;
padding: 10px 16px;
border-radius: 999px;
z-index: 9;
white-space: nowrap;
}
body.clean .toast,
body[data-view="clean"] .toast {
bottom: calc(170px + env(safe-area-inset-bottom, 0));
}
.fx {
position: absolute;
width: 9px;
height: 9px;
border-radius: 50%;
pointer-events: none;
left: 50%;
top: 50%;
}
.summary {
margin: 0;
font-size: 13.5px;
font-weight: 700;
color: var(--muted);
}
.save {
background: var(--surface);
border-radius: 20px;
padding: 4px 16px;
}
.save > summary {
list-style: none;
cursor: pointer;
padding: 12px 0;
font-weight: 800;
}
.adv > summary::-webkit-details-marker,
.save > summary::-webkit-details-marker {
display: none;
}
.save p {
margin: 0 0 14px;
font-size: 12.5px;
color: var(--muted);
font-weight: 600;
}
.row {
display: flex;
gap: 8px;
}
.row .copy {
flex: 1;
}
.open {
line-height: 1.05;
}
.open {
flex: none;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
border-radius: 18px;
padding: 0 14px;
background: var(--ink);
color: #fff;
text-decoration: none;
font-size: 15px;
text-align: center;
max-width: 120px;
}
.field {
display: flex;
flex-direction: column;
gap: 5px;
}
.field label {
font-weight: 800;
font-size: 13.5px;
}
.field input {
font: inherit;
font-size: 16px;
padding: 11px 13px;
border-radius: 14px;
border: 2px solid var(--line);
background: var(--bg);
color: var(--ink);
box-sizing: border-box;
width: 100%;
}
.field input,
.field small {
font-weight: 700;
}
.cardwrap {
border-radius: 18px;
overflow: hidden;
background: var(--bg);
aspect-ratio: 4/5;
max-width: 100%;
box-shadow: 0 6px 18px rgba(23, 32, 54, 0.15);
}
.cardwrap img {
display: block;
width: 100%;
height: auto;
}
.minicopy {
position: relative;
flex: none;
border: 0;
border-radius: 12px;
padding: 9px 14px;
background: var(--main);
color: var(--on);
font-family: var(--font-display);
font-size: 16px;
letter-spacing: 0.01em;
box-shadow: 0 3px 0 var(--deep);
}
.minicopy:active {
transform: translateY(2px);
box-shadow: 0 1px 0 var(--deep);
}
.types {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
}
.type {
border: 2px solid var(--line);
background: var(--surface);
border-radius: 12px;
padding: 8px 6px;
font-weight: 800;
font-size: 13.5px;
display: flex;
align-items: center;
gap: 6px;
}
.tdot::before,
.type::before,
.wchip::before {
content: "";
border-radius: 50%;
background: var(--tc);
}
.type::before {
flex: none;
width: 12px;
height: 12px;
}
.type[aria-pressed="true"] {
border-color: var(--ink);
background: var(--soft);
}
.weak {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.wchip {
display: inline-flex;
align-items: center;
gap: 6px;
border-radius: 999px;
padding: 6px 12px 6px 8px;
background: var(--bg);
font-weight: 800;
font-size: 14px;
}
.tdot::before,
.wchip::before {
width: 14px;
height: 14px;
}
.field small,
.wchip small {
font-size: 12px;
color: var(--muted);
}
.wchip.double {
background: var(--soft);
outline: 2px solid var(--main);
}
.checks {
display: flex;
flex-direction: column;
gap: 6px;
}
.check[aria-pressed="true"] {
color: var(--muted);
text-decoration: line-through;
}
.check[aria-pressed="true"] .box {
background: var(--main);
border-color: var(--main);
}
.ghost {
align-self: flex-start;
border: 2px solid var(--line);
background: 0 0;
border-radius: 999px;
padding: 8px 14px;
font-weight: 800;
font-size: 13.5px;
color: var(--muted);
}
.twocol {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.shinybtn {
flex: none;
width: 40px;
border: 2px solid var(--line);
background: var(--surface);
border-radius: 12px;
font-size: 18px;
color: var(--muted);
}
.shinybtn[aria-pressed="true"] {
background: #ffc531;
border-color: #d9a000;
color: #2b2000;
}
.addrow {
display: flex;
gap: 6px;
}
.addrow input,
.side {
min-width: 0;
}
.side {
display: flex;
flex-direction: column;
gap: 8px;
background: var(--bg);
border-radius: 16px;
padding: 10px;
}
.sideh {
font-family: var(--font-display);
font-weight: 700;
font-size: 16px;
}
.sidein {
font: inherit;
font-weight: 800;
font-size: 15px;
padding: 9px 10px;
border-radius: 12px;
border: 2px solid var(--line);
background: var(--surface);
color: var(--ink);
width: 100%;
box-sizing: border-box;
min-width: 0;
}
.traits {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.trait {
border: 2px solid var(--line);
background: var(--surface);
border-radius: 999px;
padding: 5px 9px;
font-weight: 800;
font-size: 12px;
}
.trait[aria-pressed="true"] {
background: var(--main);
border-color: var(--main);
color: var(--on);
}
.meter {
display: flex;
flex-direction: column;
gap: 6px;
}
.meter-track {
position: relative;
height: 16px;
border-radius: 999px;
background: linear-gradient(90deg, #f2604e, #ffc531 35%, #74cb48 50%, #ffc531 65%, #2e7cf6);
}
.meter-track i {
position: absolute;
top: -6px;
width: 8px;
height: 28px;
margin-left: -4px;
border-radius: 4px;
background: var(--ink);
box-shadow: 0 0 0 3px #fff;
transition: left 0.3s;
left: 50%;
}
.meter-lbl {
display: flex;
justify-content: space-between;
font-size: 11.5px;
font-weight: 800;
color: var(--muted);
}
.verdict {
margin: 0;
font-family: var(--font-display);
font-size: 22px;
text-align: center;
}
.event p,
.notes {
margin: 0;
color: var(--muted);
font-weight: 700;
}
.notes {
padding-left: 18px;
font-size: 13px;
display: flex;
flex-direction: column;
gap: 4px;
}
.seg.three {
grid-template-columns: repeat(3, 1fr);
}
.seg.four {
grid-template-columns: repeat(4, 1fr);
}
.seg.four button {
padding: 10px 2px;
font-size: 13px;
}
.subcard {
border: 3px solid var(--main);
}
.events {
gap: 10px;
}
.event,
.events {
display: flex;
flex-direction: column;
}
.event p {
font-size: 13.5px;
}
.erow {
display: flex;
gap: 8px;
margin-top: 4px;
}
.ebtn {
flex: 1;
text-align: center;
text-decoration: none;
border: 0;
border-radius: 12px;
padding: 10px;
background: var(--main);
color: var(--on);
font-weight: 800;
font-size: 14px;
}
.ebtn.alt {
background: var(--ink);
color: #fff;
}
.tier {
background: var(--main);
color: var(--on);
padding: 2px 7px;
}
.when {
color: var(--muted);
}
.btypes {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.tdot {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11.5px;
font-weight: 800;
}
.tdot::before {
width: 9px;
height: 9px;
}
.leaders {
display: flex;
flex-direction: column;
gap: 8px;
}
.slot {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
}
.pk {
border: 2px solid var(--line);
background: var(--surface);
border-radius: 999px;
padding: 5px 10px;
font-weight: 800;
font-size: 13px;
position: relative;
}
@media (max-width: 370px) {
.twocol {
grid-template-columns: 1fr;
}
}
.bandbg {
position: absolute;
left: 0;
right: 0;
top: 0;
height: var(--bandh, 236px);
overflow: hidden;
z-index: 0;
}
.bandbg svg {
position: absolute;
right: -70px;
top: 30px;
width: 320px;
height: 320px;
opacity: 0.16;
}
.bandbg i {
position: absolute;
width: 16px;
height: 7px;
border-radius: 3px;
background: #ffc531;
transform: rotate(30deg);
}
.bandbg i:nth-of-type(1) {
left: 8%;
top: 62%;
}
.bandbg i:nth-of-type(2) {
right: 12%;
top: 70%;
background: #fff;
opacity: 0.8;
transform: rotate(-25deg);
}
.bandbg i:nth-of-type(3) {
left: 30%;
top: 52%;
width: 8px;
height: 8px;
border-radius: 50%;
background: #fff;
opacity: 0.35;
}
:root[data-team="yellow"] .bandbg i:nth-of-type(1) {
background: #f2604e;
}
.wrap {
position: relative;
z-index: 1;
}
.word {
color: var(--on);
}
.homehero {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 4px;
}
.homehero svg.mascot {
width: 210px;
height: 210px;
border-radius: 50%;
background: radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.55) 0 49%, transparent 50%);
}
.homehero svg.mascot.cheer .sbody {
animation: bob 0.5s ease;
}
.bubble {
position: relative;
align-self: center;
background: #fff;
color: var(--ink);
border: 3px solid var(--ink);
border-radius: 20px;
padding: 8px 14px;
font-weight: 800;
font-size: 14px;
text-align: center;
max-width: 280px;
}
.bubble::after {
content: "";
position: absolute;
left: 50%;
bottom: -12px;
width: 16px;
height: 16px;
background: #fff;
border-right: 3px solid var(--ink);
border-bottom: 3px solid var(--ink);
transform: translateX(-50%) rotate(45deg);
}
.tools {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 18px 6px !important;
padding-top: 6px;
}
:root[data-team="yellow"] .tool .ic::before {
border-color: rgba(43, 32, 0, 0.25);
}
.sep,
.week {
display: flex;
}
.sep {
align-items: center;
gap: 12px;
margin-top: 6px;
}
.sep::after,
.sep::before {
content: "";
flex: 1;
height: 1px;
background: var(--line);
}
.sep span {
font-weight: 900;
font-size: 12.5px;
letter-spacing: 0.16em;
color: #8a93ae;
}
.week {
flex-direction: column;
}
.wrow,
.wrow b {
font-weight: 800;
}
.wrow {
border: 0;
background: 0 0;
text-align: left;
font-size: 15px;
}
.wrow i {
flex: none;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--main);
}
.wrow span {
flex: 1;
min-width: 0;
}
.wrow b {
font-size: 14px;
color: var(--text);
white-space: nowrap;
}
.hero.small {
background: 0 0 !important;
color: var(--on);
padding: 6px 2px 10px !important;
overflow: visible;
}
.hero.small svg.mascot {
width: 110px !important;
bottom: -22px !important;
right: 0 !important;
background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.55) 0 49%, transparent 50%);
border-radius: 50%;
}
body:not([data-view="home"]) .bandbg i {
display: none;
}
.back {
background: rgba(255, 255, 255, 0.25) !important;
color: var(--on) !important;
box-shadow: none !important;
}
.presets {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
}
.preset {
box-shadow: 0 3px 0 var(--line);
}
.preset[aria-pressed="true"] {
background: var(--surface) !important;
}
.pic {
width: 54px;
height: 54px;
border-radius: 50%;
background: var(--soft);
display: grid;
place-items: center;
}
.pic svg {
stroke: var(--text) !important;
}
.preset[aria-pressed="true"] .pic {
background: var(--main);
}
.preset[aria-pressed="true"] .pic svg {
stroke: var(--on) !important;
}
.summary {
display: flex !important;
align-items: center;
gap: 10px;
background: var(--surface);
border-radius: 999px;
padding: 8px 8px 8px 16px;
box-shadow: 0 4px 14px rgba(23, 32, 54, 0.1);
}
.summary code {
flex: 1;
min-width: 0;
font-family: var(--font-mono);
font-size: 12.5px;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sphoto {
transform-box: fill-box;
}
.fs .sphoto,
.mascot.happy .sphoto,
.traysnap .sphoto {
animation: print 0.5s cubic-bezier(0.2, 1.4, 0.4, 1);
}
@media (prefers-reduced-motion: no-preference) {
.chip,
.preset,
.team {
transition:
background 0.15s,
border-color 0.15s,
box-shadow 0.15s,
transform 0.08s;
}
.copy.pop,
.minicopy.pop,
.pk.pop {
animation: pop 0.35s ease;
}
@keyframes pop {
40% {
transform: scale(1.04);
}
}
.fx {
animation: fly 0.6s ease-out forwards;
}
@keyframes fly {
0% {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
to {
transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.3);
opacity: 0;
}
}
}
@media (prefers-reduced-motion: reduce) {
.fx {
display: none;
}
}
@media (max-width: 370px) {
.presets {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.view {
display: flex;
flex-direction: column;
gap: 14px;
}
.topr {
display: flex;
align-items: center;
gap: 8px;
}
.langsw {
font-weight: 900;
text-decoration: none;
color: var(--on);
border: 2px solid rgba(255, 255, 255, 0.55);
border-radius: 999px;
}
:root[data-team="yellow"] .langsw {
border-color: rgba(43, 32, 0, 0.3);
}
a.brand {
text-decoration: none;
color: inherit;
}
a.coffee {
color: var(--ink);
}
.week a.wrow,
a.back,
a.coffee {
text-decoration: none;
}
body[data-view="clean"] {
padding-bottom: 180px;
--bandh: 150px;
}
.prose {
background: var(--surface);
border-radius: 24px;
padding: 18px;
display: flex;
flex-direction: column;
gap: 12px;
font-size: 15.5px;
line-height: 1.55;
}
.prose p {
margin: 0;
max-width: 62ch;
}
.offline,
.slotcol h4 {
font-size: 12.5px;
font-weight: 700;
color: var(--muted);
text-align: center;
}
.wrow {
color: var(--ink);
}
.glang {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
font-weight: 800;
font-size: 13.5px;
}
.glang .seg {
min-width: 150px;
}
.rk-quotes {
display: flex;
flex-direction: column;
}
.quote {
display: flex;
align-items: center;
gap: 12px;
border: 2px solid var(--line);
background: var(--surface);
border-radius: 16px;
padding: 10px 12px;
text-align: left;
font-weight: 800;
font-size: 14.5px;
line-height: 1.3;
}
.quote .qt {
flex: none;
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--tc);
display: grid;
place-items: center;
color: var(--tx, #fff);
font-size: 12px;
font-weight: 900;
}
.quote q {
flex: 1;
min-width: 0;
font-style: italic;
quotes: "“" "”";
}
.quote[aria-pressed="true"] {
border-color: var(--main);
background: var(--soft);
}
.lineup {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.slotcol {
background: var(--bg);
border-radius: 16px;
padding: 8px;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.slotcol h4 {
margin: 0;
font-size: 11.5px;
font-weight: 900;
letter-spacing: 0.06em;
}
.ldr,
.pkb,
.slotcol {
display: flex;
}
.pkb {
flex-direction: column;
align-items: center;
gap: 2px;
border: 2px solid var(--line);
background: var(--surface);
border-radius: 12px;
padding: 6px 4px;
font-weight: 800;
font-size: 12.5px;
line-height: 1.15;
text-align: center;
min-width: 0;
word-break: break-word;
}
.pkb small {
font-size: 10.5px;
color: var(--muted);
font-weight: 800;
}
.pkb.reward {
background: #fff8e1;
}
.pkb.reward small {
color: #8a6500;
}
.ldr {
flex-wrap: wrap;
}
.ldr button {
font-weight: 900;
font-size: 14px;
}
.ldr button[aria-pressed="true"] {
background: var(--main);
}
.cleanhero,
a.banner {
text-decoration: none;
color: var(--ink);
}
.cleanhero {
display: flex;
align-items: center;
gap: 14px;
background: var(--main);
color: var(--on);
padding: 14px 16px;
box-shadow: 0 5px 0 var(--deep);
}
.cleanhero .ic {
flex: none;
width: 58px;
height: 58px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.22);
display: grid;
place-items: center;
position: relative;
}
.cleanhero .ic::after {
content: "";
position: absolute;
right: -2px;
top: -2px;
width: 15px;
height: 15px;
border-radius: 50%;
background: var(--spark);
border: 2px solid #fff;
}
.choice .ctx,
.cleanhero .grow {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.cleanhero b {
font-size: 22px;
line-height: 1.05;
}
.cleanhero .grow span,
.cleanhero span span {
font-weight: 700;
font-size: 13.5px;
opacity: 0.92;
}
.tools {
display: flex !important;
flex-wrap: wrap;
justify-content: center;
}
.homehero {
padding-bottom: 6px;
}
img {
max-width: 100%;
}
.choice {
display: flex;
align-items: center;
gap: 12px;
border: 2px solid var(--line);
background: var(--surface);
border-radius: 18px;
padding: 12px;
text-align: left;
width: 100%;
box-sizing: border-box;
}
.choice .ctx b {
font-family: var(--font-display);
font-weight: 700;
font-size: 18px;
line-height: 1.1;
}
.choice .ctx small {
font-weight: 700;
font-size: 13px;
color: var(--muted);
}
.choice .radio {
flex: none;
width: 24px;
height: 24px;
border-radius: 50%;
border: 2px solid var(--line-strong);
box-sizing: border-box;
}
.choice[aria-checked="true"] {
border-color: var(--main);
box-shadow: 0 3px 0 var(--deep);
}
.choice[aria-checked="true"] .radio {
border: 7px solid var(--main);
}
.adv > summary,
.seg.three button {
font-size: 14px;
padding: 11px 4px;
}
.lvdesc {
margin: 0;
font-weight: 800;
font-size: 14px;
}
.adv > summary {
cursor: pointer;
font-weight: 900;
color: var(--text);
list-style: none;
padding: 4px 0;
}
.adv > summary::after {
content: " ▾";
}
.adv[open] > summary::after {
content: " ▴";
}
.adv {
display: flex;
flex-direction: column;
}
.adv,
.adv[open] {
gap: 10px;
}
.copy:disabled {
cursor: default;
}
.tray .out {
text-overflow: ellipsis;
}
.kchips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.kchip-btn {
display: inline-flex;
align-items: center;
gap: 7px;
border: 2px solid var(--line);
background: var(--surface);
border-radius: 999px;
padding: 8px 13px 8px 9px;
font-weight: 800;
font-size: 14px;
line-height: 1.1;
}
.kchip-btn .dot {
flex: none;
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid var(--line-strong);
box-sizing: border-box;
display: grid;
place-items: center;
}
.kchip-btn .dot svg {
opacity: 0;
stroke: var(--on);
}
.kchip-btn[aria-pressed="true"] {
border-color: var(--main);
background: var(--soft);
}
.kchip-btn[aria-pressed="true"] .dot {
background: var(--main);
border-color: var(--main);
}
.kchip-btn[aria-pressed="true"] .dot svg {
opacity: 1;
}
.chead,
.evcard {
position: relative;
display: flex;
}
.chead {
align-items: center;
gap: 10px;
color: var(--on);
padding: 2px 0 6px;
min-height: 84px;
}
.chead .back {
flex: none;
width: 36px;
height: 36px;
border-radius: 50%;
display: grid;
place-items: center;
background: rgba(255, 255, 255, 0.22);
color: var(--on);
padding: 0;
margin: 0;
}
.chead .ctxt {
flex: 1;
min-width: 0;
}
.chead h1,
.evcard h2,
.preset b {
font-family: var(--font-display);
letter-spacing: 0.01em;
}
.chead h1 {
line-height: 1.05;
margin: 0;
}
.chead p {
margin: 3px 0 0;
font-weight: 800;
font-size: 13px;
opacity: 0.92;
}
.chead svg.mascot {
flex: none;
position: static !important;
background: radial-gradient(circle, rgba(255, 255, 255, 0.55) 0 48%, transparent 50%);
border-radius: 50%;
}
.chead svg.mascot.happy {
position: absolute !important;
right: 0;
top: 2px;
}
.evcard {
background: var(--surface);
border: 2.5px dashed var(--main);
border-radius: 22px;
padding: 14px 16px;
flex-direction: column;
gap: 8px;
}
.evcard.on {
border-style: solid;
box-shadow: 0 4px 0 var(--main);
}
.evtag {
font-weight: 900;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
background: var(--main);
color: var(--on);
border-radius: 999px;
padding: 4px 10px;
}
.evdates {
font-weight: 800;
font-size: 13px;
color: var(--muted);
}
.evcard h2,
.preset b {
font-weight: 700;
}
.evcard h2,
.evdesc {
font-size: 21px;
margin: 0;
}
.evdesc {
font-size: 13.5px;
font-weight: 600;
color: var(--muted);
}
.evk {
font-weight: 800;
font-size: 12px;
background: var(--soft);
border-radius: 999px;
padding: 4px 10px;
}
.evbtn[aria-pressed="true"] {
background: var(--main);
color: var(--on);
}
.evbtn[aria-pressed="true"] .sw {
background: rgba(255, 255, 255, 0.35);
}
#timeCard.locked .seg {
opacity: 0.4;
pointer-events: none;
}
.pvp {
display: flex;
flex-direction: column;
gap: 8px;
padding-bottom: 6px;
border-bottom: 2px dashed var(--line);
}
.trayhead {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.tray .out {
white-space: normal !important;
max-height: 3.9em;
overflow: auto;
font-size: 12.5px;
line-height: 1.3;
}
.evline {
background: var(--surface);
border: 2px solid var(--main);
border-radius: 18px;
overflow: hidden;
}
#gruntBox,
.evhead {
display: flex;
gap: 8px;
}
.evhead {
align-items: center;
width: 100%;
border: 0;
background: 0 0;
padding: 10px 12px;
text-align: left;
font-weight: 900;
color: var(--text);
}
.evhead .evtag {
flex: none;
font-size: 10px;
padding: 3px 8px;
}
.evname {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 15px;
}
.evchev,
.evhead .evdates {
flex: none;
font-size: 12px;
}
.evchev {
font-size: 22px;
line-height: 1;
color: var(--main);
transition: transform 0.2s;
}
.evline.on {
box-shadow: 0 3px 0 var(--main);
}
.evline.on .evchev {
transform: rotate(90deg);
}
.evbody {
padding: 0 12px 12px;
display: flex;
flex-direction: column;
gap: 8px;
}
.evbody .kchip-btn {
font-size: 13px;
padding: 6px 11px 6px 7px;
}
.evoff,
.preset small,
.tray .out.empty {
font-weight: 800;
color: var(--muted);
}
.evoff {
align-self: flex-start;
border: 0;
background: 0 0;
padding: 2px 0;
font-size: 13px;
text-decoration: underline;
}
#gruntBox {
flex-direction: column;
}
.pgrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.preset,
.trh {
align-items: center;
}
.preset {
display: flex;
border: 2px solid var(--line);
background: var(--surface);
color: var(--text);
text-align: center;
}
.ldr button[aria-pressed="true"] b,
.preset .pic,
.rkwho button[aria-pressed="true"] svg {
color: var(--main);
}
.preset b {
font-size: 14px !important;
white-space: nowrap;
}
.preset small {
font-weight: 700;
font-size: 11.5px;
line-height: 1.2;
}
.preset[aria-pressed="true"] {
border-color: var(--main) !important;
background: var(--main) !important;
color: var(--on);
box-shadow: 0 3px 0 var(--deep);
}
.preset[aria-pressed="true"] small {
color: var(--on);
}
.num.ic {
background: var(--soft);
width: 34px;
height: 34px;
}
.kchip-btn .em {
font-size: 15px;
line-height: 1;
margin-right: -2px;
}
.trh {
display: inline-flex;
gap: 5px;
}
.tray .out.empty {
font-family: var(--font-body);
font-size: 14px;
}
.copy:disabled {
opacity: 0.45;
filter: grayscale(0.4);
}
.preset[aria-pressed="true"] .pic {
background: rgba(255, 255, 255, 0.25) !important;
color: var(--on) !important;
}
.trh svg {
width: 16px;
height: 16px;
flex: none;
}
.pgrid {
gap: 6px;
}
.preset {
flex-direction: row !important;
justify-content: center;
gap: 6px !important;
padding: 8px 6px !important;
border-radius: 999px !important;
}
.preset .pic {
width: 28px !important;
height: 28px !important;
}
.qshead {
display: flex;
justify-content: space-between;
align-items: center;
}
.clearall,
.req {
color: var(--main);
}
.clearall {
border: 0;
background: 0 0;
padding: 2px 0;
font-weight: 800;
font-size: 13px;
text-decoration: underline;
margin-left: 8px;
}
.card.step {
border: 2.5px solid transparent;
transition: border-color 0.2s;
}
.card.step.need {
border-color: var(--main);
box-shadow: 0 3px 0 var(--main);
}
.req {
font-weight: 900;
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
background: var(--soft);
border-radius: 999px;
padding: 3px 9px;
}
.presets {
display: flex;
flex-direction: column;
padding: 10px;
background: var(--bg);
border-radius: 18px;
}
.warn.tip {
background: var(--surface);
border-radius: 14px;
padding: 10px 12px;
font-weight: 700;
}
.presets .pgrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.presets .preset {
min-width: 0;
gap: 4px !important;
padding: 7px 4px !important;
}
.presets .preset .pic {
width: 24px !important;
height: 24px !important;
}
.presets .preset .pic svg {
width: 15px;
height: 15px;
}
.presets .preset b {
font-size: 13px !important;
}
.evlive {
flex: none;
font-weight: 900;
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #fff;
background: #e5484d;
border-radius: 999px;
padding: 3px 7px;
}
.seye {
transform-box: fill-box;
transform-origin: center;
}
svg.blink .seye {
animation: sblink 0.22s ease-in-out;
}
.trayhead {
gap: 8px;
}
.trayhead .sub {
flex: 1;
}
.glpill,
.spbox input {
border: 2px solid var(--line);
}
.glpill {
background: var(--bg);
border-radius: 999px;
padding: 2px 8px;
font-weight: 900;
font-size: 11.5px;
letter-spacing: 0.04em;
color: var(--text);
}
.presets .pgrid.four {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.preset.last .pic,
.spchip i {
display: grid;
place-items: center;
}
.preset.last .pic {
font-weight: 900;
font-size: 16px;
color: var(--main);
}
.spbox {
display: flex;
flex-direction: column;
gap: 8px;
padding-top: 4px;
}
.spbox .search {
position: relative;
}
.spbox input {
width: 100%;
box-sizing: border-box;
border-radius: 14px;
padding: 10px 12px 10px 36px;
font: inherit;
font-weight: 700;
background: var(--surface)
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238a93ab' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4 4'/%3E%3C/svg%3E")
11px center no-repeat;
}
#cWeak .weak,
.spchips {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.spchip {
display: inline-flex;
align-items: center;
gap: 6px;
border: 2px solid var(--main);
background: var(--soft);
border-radius: 999px;
padding: 5px 6px 5px 11px;
font-weight: 800;
font-size: 13.5px;
color: var(--text);
}
.spchip i {
font-style: normal;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--main);
color: var(--on);
font-size: 13px;
line-height: 1;
}
.fcontact,
.foot2 {
display: flex;
align-items: center;
}
.foot2 {
flex-direction: column;
gap: 12px;
margin: 22px 0 10px;
padding: 0 2px;
}
.fcontact {
flex-wrap: wrap;
justify-content: center;
gap: 6px;
font-weight: 700;
font-size: 14px;
color: var(--muted);
}
.fcontact a {
color: var(--text);
font-weight: 900;
}
.iconcopy {
border: 0;
background: var(--soft);
color: var(--main);
width: 30px;
height: 30px;
border-radius: 50%;
display: grid;
place-items: center;
padding: 0;
}
.flinks2 {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 6px 14px;
font-weight: 800;
font-size: 13px;
}
.flinks2 a,
.legal2 {
color: var(--muted);
}
.flinks2 .sep {
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--line-strong);
}
.legal2 {
margin: 0;
font-size: 11px;
line-height: 1.45;
text-align: center;
font-weight: 600;
max-width: 46ch;
}
.kofi3,
.ttags i {
font-weight: 900;
border-radius: 999px;
}
.kofi3 {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--surface);
border: 2px solid var(--line);
padding: 9px 18px;
font-size: 14.5px;
color: var(--text);
text-decoration: none;
box-shadow: 0 3px 0 var(--line);
}
.kofi3 span {
font-size: 18px;
}
.advn {
font-weight: 800;
}
.advn {
color: var(--muted);
font-size: 13px;
}
#keepCard.locked .adv,
#keepCard.locked .kchips,
#keepCard.locked .presets,
#keepCard.locked .spbox {
opacity: 0.45;
pointer-events: none;
}
body[data-view="raids"],
body[data-view="rocket"] {
--bandh: 150px;
}
.bmax,
.ldr button small {
font-size: 11px;
font-weight: 800;
color: var(--main);
}
.bimg {
flex: none;
object-fit: contain;
background: var(--bg);
border-radius: 12px;
}
.soonh {
grid-column: 1/-1;
margin: 6px 0-2px;
}
.traynote {
margin: 0;
font-weight: 800;
font-size: 12.5px;
color: var(--main);
}
.vh {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
}
.rkcard {
position: relative;
}
.rkcard .rkballoon {
position: absolute;
right: 10px;
top: -26px;
width: 34px;
height: 42px;
transform: rotate(8deg);
pointer-events: none;
}
.rkwho {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 6px;
}
.ldr button,
.rkwho button {
align-items: center;
border: 2px solid var(--line);
background: var(--surface);
}
.rkwho button {
display: flex;
flex-direction: column;
gap: 4px;
color: var(--muted);
border-radius: 16px;
padding: 10px 4px 8px;
font-weight: 900;
font-size: 12.5px;
}
.rkwho button[aria-pressed="true"] {
color: var(--text);
box-shadow: 0 3px 0 var(--main);
}
.ldr button[aria-pressed="true"],
.rk-quotes .quote[aria-pressed="true"],
.rkwho button[aria-pressed="true"] {
border-color: var(--main);
background: var(--soft);
}
.rk-quotes .qt {
font-size: 10.5px;
font-weight: 900;
letter-spacing: 0.03em;
white-space: nowrap;
}
.rkreport {
font-size: 12px;
}
.rkreport a {
font-weight: 900;
color: var(--main);
}
.pkb[aria-pressed="true"] {
border-color: var(--main);
box-shadow: 0 2px 0 var(--main);
}
.pkb .pkimg {
width: 40px;
height: 40px;
object-fit: contain;
align-self: center;
}
.pkb .catch {
font-weight: 900;
color: #b7791f;
}
.pkb.reward {
background: #fff6df;
border-color: #f2b33d;
}
.rk-quotes .qt {
width: auto;
height: auto;
padding: 4px 9px;
border-radius: 999px;
}
.ldr {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.ldr button {
gap: 2px;
border-radius: 14px;
padding: 10px 4px;
}
.ldr button b {
font-family: var(--font-display);
font-weight: 700;
font-size: 17px;
}
.ldr button small {
color: var(--muted);
}
.ttags {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2px;
}
.ttags i {
font-style: normal;
font-size: 9.5px;
color: var(--tx, #fff);
background: var(--tc);
padding: 1px 5px;
}
.ldr button,
.wrow {
display: flex;
flex-direction: column;
}
.wrow {
gap: 6px;
padding: 8px 0;
border-top: 2px dashed var(--line);
}
.wrow:first-child {
border-top: 0;
padding-top: 0;
}
.wrh {
display: flex;
align-items: center;
gap: 8px;
justify-content: flex-start;
align-self: stretch;
}
.wrh img {
width: 32px;
height: 32px;
object-fit: contain;
}
.wrh b {
font-size: 14px;
}
.wrow {
align-items: stretch;
}
#cWeak .wchip {
flex: none;
white-space: nowrap;
}
.wrow .weak {
min-width: 0;
width: 100%;
}
.ldr button[aria-pressed="true"] {
color: var(--ink);
}
.ebtn.big {
display: block;
flex: none;
padding: 14px;
font-size: 16px;
font-weight: 900;
}
.sublinks {
margin: 0;
font-size: 13px;
font-weight: 700;
color: var(--muted);
}
.linkbtn,
.sublinks a {
color: var(--text);
text-decoration: underline;
text-underline-offset: 2px;
}
.sublinks a {
font-weight: 900;
}
.linkbtn {
background: 0 0;
border: 0;
font: inherit;
cursor: pointer;
}
#events,
.egroup {
display: flex;
flex-direction: column;
gap: 14px;
}
.egroup {
gap: 8px;
}
.egh {
margin: 4px 2px 0;
font-size: 17px;
color: var(--text);
}
.event {
background: var(--surface);
padding: 0;
gap: 0;
border-left: 5px solid var(--kc);
overflow: hidden;
}
.ehead {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
background: 0 0;
border: 0;
padding: 10px 12px;
text-align: left;
color: inherit;
font: inherit;
cursor: pointer;
}
.epic {
flex: none;
display: grid;
place-items: center;
font-size: 26px;
background: color-mix(in srgb, var(--kc) 14%, transparent);
}
.epic img,
.sidepic img {
object-fit: contain;
}
.etxt {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.etop {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.etop i {
font-style: normal;
font-size: 11px;
font-weight: 900;
border-radius: 999px;
padding: 1px 8px;
}
.ekind {
background: var(--kc);
color: #fff;
}
.elive {
background: #2e8b57;
color: #fff;
}
.edone {
background: var(--line);
color: var(--muted);
}
.event b {
font-size: 17px;
line-height: 1.1;
}
.ewhen {
font-size: 12.5px;
font-weight: 800;
}
.ebody p,
.echev,
.ewhen {
color: var(--muted);
}
.echev {
flex: none;
font-size: 22px;
font-weight: 900;
transition: transform 0.15s;
}
.event.isopen .echev {
transform: rotate(90deg);
}
.etools {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 0 12px 10px 76px;
}
.eremind button,
.etool {
border-radius: 999px;
font-weight: 900;
color: var(--text);
}
.etool {
font-size: 13px;
text-decoration: none;
background: color-mix(in srgb, var(--kc) 14%, transparent);
padding: 5px 12px;
}
.ebody {
display: flex;
flex-direction: column;
gap: 8px;
padding: 0 12px 12px;
}
.ebody p {
margin: 0;
font-size: 13.5px;
font-weight: 700;
}
.eremind {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
font-size: 12.5px;
font-weight: 800;
color: var(--muted);
}
.eremind button {
border: 2px solid var(--line);
background: var(--surface);
font: inherit;
cursor: pointer;
}
.eremind button[aria-pressed="true"],
.fseg button[aria-pressed="true"],
.tsearch button[aria-pressed="true"] {
border-color: var(--main);
background: var(--soft);
}
.esoon {
background: var(--spark);
color: #2b2000;
}
.ebonus {
display: flex;
flex-wrap: wrap;
gap: 5px;
padding: 0 12px 8px 76px;
}
.ebonus span {
font-size: 12px;
font-weight: 900;
color: var(--ink);
background: var(--bg, #f5f6fa);
border: 1.5px solid var(--line);
border-radius: 9px;
padding: 2px 7px;
}
.eshare,
.sideauto i {
font-weight: 900;
border-radius: 999px;
}
.eshare {
align-self: flex-start;
border: 2px solid var(--line);
background: var(--surface);
padding: 6px 14px;
font: inherit;
font-size: 13.5px;
color: var(--text);
cursor: pointer;
}
.fseg button small,
.subdone {
color: var(--ink);
font-weight: 800;
}
.subdone {
margin: 0;
padding: 10px 14px;
background: var(--surface);
border-radius: 14px;
font-size: 13.5px;
}
.erow .eshare {
flex: none;
align-self: stretch;
}
.eother,
.sideres small {
font-weight: 800;
color: var(--muted);
}
.eother {
font-size: 13px;
text-decoration: underline;
text-underline-offset: 2px;
}
.siderow {
display: flex;
align-items: center;
gap: 8px;
}
.sidepic {
flex: none;
width: 44px;
height: 44px;
border-radius: 12px;
background: var(--surface);
display: grid;
place-items: center;
}
.sidepic img {
width: 42px;
height: 42px;
}
.sideauto {
display: none;
}
.sideauto i {
font-style: normal;
font-size: 11px;
background: #7037ff;
color: #fff;
padding: 1px 8px;
}
.sideres {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
flex: 1;
}
.sideres small {
font-size: 12px;
}
.cost b,
.rtier {
font-family: var(--font-display);
}
.rtier {
font-size: 18px;
line-height: 1.05;
}
.rtier.t0 {
color: #5b6480;
}
.rtier.t1 {
color: #2e8b57;
}
.rtier.t2 {
color: #2e7cf6;
}
.rtier.t3 {
color: #7037ff;
}
.rtier.t4 {
color: #d99a00;
}
.costbox {
display: flex;
flex-direction: column;
gap: 8px;
background: var(--bg);
border-radius: 16px;
padding: 12px;
}
.fseg {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 4px;
}
.fseg button,
.tcard summary {
cursor: pointer;
display: flex;
align-items: center;
}
.fseg button {
border: 2px solid var(--line);
background: var(--surface);
border-radius: 12px;
padding: 6px 2px;
font: inherit;
font-weight: 900;
color: #e5484d;
font-size: 12px;
flex-direction: column;
gap: 2px;
}
.fseg button small {
font-size: 11px;
}
.cost {
margin: 0;
font-weight: 800;
color: var(--muted);
}
.cost b {
font-size: 26px;
color: var(--ink);
}
#week,
.tsearch,
.tsearch button {
display: flex;
flex-direction: column;
gap: 8px;
}
.tsearch button {
align-items: flex-start;
gap: 2px;
text-align: left;
border: 2px solid var(--line);
background: var(--surface);
padding: 10px 12px;
font: inherit;
color: var(--ink);
cursor: pointer;
}
.tsearch button small {
font-size: 12.5px;
font-weight: 700;
color: var(--muted);
}
.tcard summary {
list-style: none;
flex-direction: row;
flex-wrap: wrap;
gap: 10px;
}
.tcard summary::-webkit-details-marker {
display: none;
}
.tcard summary h2::after {
content: " ›";
color: var(--muted);
}
.tcard[open] summary h2::after {
content: " ⌄";
}
.tcard[open] {
display: flex;
flex-direction: column;
gap: 12px;
}
.side .traits .trait {
font-size: 11.5px;
padding: 4px 8px;
}
.trait.tmore {
border-style: dashed;
color: var(--muted);
}
.newchk {
display: flex;
align-items: center;
gap: 8px;
font-weight: 800;
font-size: 13px;
color: var(--ink);
}
.newchk input {
width: 18px;
height: 18px;
accent-color: var(--main);
}
.cospick,
.cosrow {
display: flex;
gap: 6px;
}
.cospick {
flex-direction: column;
margin-top: 6px;
}
.cospick > span {
font-size: 12.5px;
font-weight: 800;
color: var(--muted);
}
.cosrow {
overflow-x: auto;
padding-bottom: 4px;
}
.cosopt {
flex: none;
width: 58px;
height: 58px;
border: 2px solid var(--line);
background: var(--surface);
border-radius: 14px;
display: grid;
place-items: center;
font: inherit;
font-size: 11px;
font-weight: 900;
color: var(--muted);
padding: 2px;
cursor: pointer;
}
.cosopt img {
width: 50px;
height: 50px;
object-fit: contain;
}
.cosopt[aria-pressed="true"] {
border-color: var(--main);
background: var(--soft);
}
.sidepic:empty {
background: 0 0;
border: 2px dashed var(--line);
}
.sharerow {
display: flex;
gap: 8px;
margin-top: 10px;
}
.sharerow .ebtn {
padding: 12px;
font-size: 15px;
cursor: pointer;
}
.fseg.five {
grid-template-columns: repeat(5, 1fr);
}
.ltable {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.ltable td {
padding: 8px 4px;
border-top: 1px solid var(--line);
font-weight: 800;
}
.ltable td:first-child {
color: #e5484d;
white-space: nowrap;
}
.ltable td:last-child {
color: var(--ink);
font-weight: 700;
}
.hhead {
min-height: 96px;
}
.hhead h1 {
font-size: 26px;
}
.tgrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.tcx {
align-items: flex-start;
gap: 8px;
background: var(--surface);
padding: 14px;
text-decoration: none;
color: var(--ink);
box-shadow: 0 3px 0 var(--line);
}
.tcx .ic {
background: var(--main);
display: grid;
place-items: center;
}
.tcx,
.tcx .tt {
display: flex;
flex-direction: column;
}
.tcx .tt {
gap: 3px;
}
.tcx b {
font-size: 18px;
line-height: 1.05;
}
.tcx small {
font-size: 12.5px;
font-weight: 700;
color: var(--muted);
line-height: 1.3;
}
.tgrid .tcx:last-child:nth-child(odd) {
grid-column: 1/-1;
flex-direction: row;
align-items: center;
}
.hev,
.seeall {
display: block;
text-decoration: none;
}
.hev {
color: inherit;
}
.hev .ehead {
cursor: pointer;
}
.seeall {
align-self: center;
text-align: center;
font-weight: 900;
color: var(--text);
padding: 6px;
}
body[data-view="home"] {
--bandh: 250px;
}
body[data-view="calendar"],
body[data-view="friends"],
body[data-view="trade"] {
--bandh: 150px;
}
.etool,
.side .traits .trait,
.trait {
min-height: 36px;
}
.etool {
display: inline-flex;
align-items: center;
}
.eremind button {
min-height: 36px;
padding: 4px 12px;
}
#subAlarm > span,
.tcard summary .hint {
flex-basis: 100%;
}
.tsearch button b {
font-weight: 900;
font-size: 15px;
}
.linkbtn,
.sublinks a {
display: inline-block;
padding: 6px 0;
}
.minicopy,
.shinybtn {
min-height: 44px;
}
.empty {
margin: 0;
padding: 18px 14px;
text-align: center;
border: 2px dashed var(--line);
border-radius: 16px;
color: var(--muted);
font-weight: 800;
font-size: 14px;
}
#bosses > .hint:only-child,
#events > .hint:only-child,
#week > .hint:only-child {
animation: pulse 1.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
#bosses > .hint,
#events > .hint,
#week > .hint {
animation: none;
}
}
.teams {
gap: 4px;
padding: 3px;
box-shadow: 0 1px 3px rgba(23, 32, 54, 0.12);
}
.langsw,
.team {
position: relative;
}
.team {
width: 18px;
height: 18px;
}
.langsw::before,
.team::before {
content: "";
position: absolute;
inset: -7px -3px;
}
.team[aria-pressed="true"] {
box-shadow:
0 0 0 1.5px #fff,
0 0 0 3px var(--ink);
}
.langsw {
font-size: 11px;
letter-spacing: 0.05em;
border-width: 1.5px;
padding: 3px 8px;
}
.langsw::before {
inset: -9px -4px;
}
.stripe {
height: 8px;
}
.bandbg {
background: var(--main);
border-radius: 0 0 40px 40px;
}
.bandbg svg path {
fill: rgba(255, 255, 255, 0.16);
}
.cleanhero b,
.copy,
.egh,
.event b,
.open,
.tcx b,
.word,
b,
h1,
h2 {
font-family: var(--font-display);
font-weight: 700;
letter-spacing: -0.01em;
}
.chead h1 {
font-size: 26px;
font-weight: 800;
}
.card,
.event,
.tcx,
.tsearch button {
border-radius: 22px;
box-shadow: 0 8px 24px rgba(23, 32, 54, 0.07);
border: 0;
}
.subcard {
border: 0;
}
.tsearch button[aria-pressed="true"] {
box-shadow:
0 0 0 3px var(--main),
0 8px 24px rgba(23, 32, 54, 0.1);
}
.cleanhero {
background: var(--deep);
box-shadow: 0 6px 0 rgba(0, 0, 0, 0.18);
border-radius: 24px;
}
.tcx {
border-top: 4px solid transparent;
background:
linear-gradient(#fff, #fff) padding-box,
linear-gradient(90deg, var(--t1), var(--t2)) border-box;
}
.tcx .ic {
background: linear-gradient(145deg, var(--t1), var(--t2));
box-shadow: 0 4px 10px var(--gs);
width: 46px;
height: 46px;
border-radius: 15px;
}
.tcx .ic svg {
stroke: #fff;
}
:root[data-team="yellow"] .tcx .ic svg {
stroke: #3a2600;
}
.copy {
background: var(--main);
box-shadow: 0 5px 0 var(--deep);
color: var(--on);
border-radius: 18px;
}
.tray {
border-radius: 28px 28px 0 0;
}
.ekind,
.tier {
border-radius: 999px;
}
.epic {
border-radius: 16px;
width: 60px;
height: 60px;
}
.epic img {
width: 56px;
height: 56px;
}
.bimg {
width: 64px;
height: 64px;
}
svg.mascot {
filter: drop-shadow(2px 0 0#fff) drop-shadow(-2px 0 0#fff) drop-shadow(0 2px 0#fff) drop-shadow(0-2px 0#fff) drop-shadow(0 8px 10px rgba(0, 0, 0, 0.25));
}
.chead svg.mascot {
background: 0 0;
width: 92px;
height: 92px;
transform: rotate(-6deg);
}
.hhead svg.mascot {
width: 108px;
height: 108px;
}
.chead svg.mascot.happy {
transform: rotate(-6deg);
}
.bandbg i {
display: none;
}
.cost b,
.rtier,
.verdict {
font-weight: 800;
}
.rk-quotes {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.rk-quotes > .hint {
grid-column: 1/-1;
}
.rk-quotes .quote {
flex-direction: column;
align-items: flex-start;
gap: 6px;
padding: 10px;
font-size: 13px;
line-height: 1.25;
border-radius: 18px;
}
.rk-quotes .quote q {
font-size: 13px;
}
.num.ic {
color: var(--text);
}
@media (prefers-color-scheme: dark) {
:root,
:root[data-team="blue"],
:root[data-team="red"],
:root[data-team="yellow"] {
color-scheme: dark;
--bg: #0f1420;
--surface: #1a2131;
--ink: #eef2fa;
--muted: #9aa5bd;
--line: #2a3346;
--line-strong: #3a4560;
--sunk: #131926;
}
:root,
:root[data-team="blue"] {
--soft: #1c2c4a;
--text: #7fb0ff;
}
:root[data-team="red"] {
--soft: #3a2224;
--text: #ff8b80;
}
:root[data-team="yellow"] {
--soft: #3a3018;
--text: #ffd460;
}
body,
html {
background: var(--bg);
}
.bandbg {
filter: brightness(0.85);
}
.card,
.event,
.tcx,
.tsearch button {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.tcx {
background:
linear-gradient(var(--surface), var(--surface)) padding-box,
linear-gradient(90deg, var(--t1), var(--t2)) border-box;
}
.costbox,
.ebonus span,
.empty,
.epic,
.ltable,
.out,
.pgrid,
.seg,
.side,
.sidepic,
.spbox,
.subdone {
background: var(--sunk);
}
.empty,
.ltable td {
border-color: var(--line);
}
.sidein,
input,
select,
textarea {
background: var(--sunk);
color: var(--ink);
border-color: var(--line);
}
input::placeholder {
color: #6f7a93;
}
.cosopt,
.eremind button,
.fseg button,
.glpill,
.iconcopy,
.kofi3,
.ldr button,
.pkb,
.preset,
.quote,
.rkwho button,
.shinybtn,
.trait,
.tsearch button {
background: var(--surface);
color: var(--ink);
border-color: var(--line);
}
.seg button[aria-pressed="true"] {
background: var(--surface);
box-shadow: 0 2px 0#000;
color: var(--text);
}
.tray {
background: #151b29;
box-shadow: 0-6px 24px rgba(0, 0, 0, 0.5);
}
.out {
color: #cfe0ff;
border-color: var(--line);
}
.out.empty {
color: var(--muted);
}
.open {
background: #eef2fa;
color: #0f1420;
}
.copy:disabled {
opacity: 0.45;
}
.tip,
.warn {
background: var(--surface);
color: var(--ink);
}
.ebtn.alt,
.toast {
background: #eef2fa;
color: #0f1420;
}
.flinks2 a,
.hint,
.legal2,
.sub {
color: var(--muted);
}
.ltable td:last-child {
color: var(--ink);
}
.etool,
.fseg button small {
color: var(--ink);
}
.ekind,
.elive,
.esoon {
filter: none;
}
.qt,
.wchip {
box-shadow: none;
}
.fseg button {
color: #ff6b6b;
}
.open {
max-width: 120px;
}
svg.mascot {
filter: drop-shadow(2px 0 0#fff) drop-shadow(-2px 0 0#fff) drop-shadow(0 2px 0#fff) drop-shadow(0-2px 0#fff) drop-shadow(0 8px 12px rgba(0, 0, 0, 0.55));
}
}
@media (min-width: 660px) {
.stripe,
.bandbg {
left: 50%;
right: auto;
width: 600px;
transform: translateX(-50%);
}
.stripe {
border-radius: 0 0 6px 6px;
overflow: hidden;
}
.bandbg {
border-radius: 0 0 44px 44px;
}
.tray {
left: 50%;
right: auto;
width: 600px;
box-sizing: border-box;
transform: translateX(-50%);
}
}
.offnote{text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}.offnote h2{margin:0}.offnote p{margin:0}
.flinks2 a,.fcontact a{padding:6px 4px;margin:-6px -4px}
.faq{gap:2px}.faq .head{margin-bottom:6px}
.qa{border-top:2px solid var(--line)}.qa:first-of-type{border-top:0}
.qa summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:10px;padding:12px 2px;font-weight:800;font-size:15.5px}
.qa summary::-webkit-details-marker{display:none}.qa summary::after{content:"+";font-size:20px;line-height:1;color:var(--main);flex:none}
.qa[open] summary::after{content:"–"}.qa p{margin:0 2px 12px;color:var(--muted);font-weight:600;font-size:14.5px;line-height:1.45}
html.esoff .langsw,html.esoff #glSwitch{display:none!important}
.ltable{display:flex;flex-direction:column}
.lrow{display:flex;justify-content:space-between;gap:12px;align-items:center;width:100%;text-align:left;border:0;border-top:2px solid var(--line);background:none;color:var(--ink);font:inherit;padding:11px 6px;cursor:pointer;border-radius:10px}
.lrow:first-child{border-top-color:transparent}.lrow span:first-child{font-weight:800;white-space:nowrap}.lrow span:last-child{color:var(--muted);font-weight:700;font-size:13.5px;text-align:right}
.lrow[aria-pressed="true"]{background:var(--soft);border-top-color:transparent}.lrow[aria-pressed="true"]+.lrow{border-top-color:transparent}
html[data-season] .bandbg svg,html[data-season] .bandbg i{display:none}
html[data-season] .bandbg::after{content:"";position:absolute;inset:0;background-repeat:no-repeat;background-position:center top;background-size:100% auto;pointer-events:none}
html[data-season="halloween"] .bandbg::after{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20600%20260%22%20fill%3D%22%23FFFFFF%22%3E%3Cg%20opacity%3D%22.38%22%3E%3Cpath%20transform%3D%22translate%2840%2040%29%20scale%281.1%29%22%20d%3D%22M0%200%20Q7%20-8%2013%20-1%20Q15%20-6%2018%20-3%20Q21%20-6%2023%20-1%20Q29%20-8%2036%200%20Q29%20-1%2027%206%20Q24%203%2021%206%20Q18%203%2015%206%20Q12%203%209%206%20Q7%20-1%200%200Z%22/%3E%3Cpath%20transform%3D%22translate%28250%2022%29%20scale%280.8%29%22%20d%3D%22M0%200%20Q7%20-8%2013%20-1%20Q15%20-6%2018%20-3%20Q21%20-6%2023%20-1%20Q29%20-8%2036%200%20Q29%20-1%2027%206%20Q24%203%2021%206%20Q18%203%2015%206%20Q12%203%209%206%20Q7%20-1%200%200Z%22/%3E%3Cpath%20transform%3D%22translate%28470%2060%29%20scale%281.3%29%22%20d%3D%22M0%200%20Q7%20-8%2013%20-1%20Q15%20-6%2018%20-3%20Q21%20-6%2023%20-1%20Q29%20-8%2036%200%20Q29%20-1%2027%206%20Q24%203%2021%206%20Q18%203%2015%206%20Q12%203%209%206%20Q7%20-1%200%200Z%22/%3E%3Cpath%20transform%3D%22translate%28150%20120%29%20scale%280.7%29%22%20d%3D%22M0%200%20Q7%20-8%2013%20-1%20Q15%20-6%2018%20-3%20Q21%20-6%2023%20-1%20Q29%20-8%2036%200%20Q29%20-1%2027%206%20Q24%203%2021%206%20Q18%203%2015%206%20Q12%203%209%206%20Q7%20-1%200%200Z%22/%3E%3Cpath%20transform%3D%22translate%28540%20150%29%20scale%280.9%29%22%20d%3D%22M0%200%20Q7%20-8%2013%20-1%20Q15%20-6%2018%20-3%20Q21%20-6%2023%20-1%20Q29%20-8%2036%200%20Q29%20-1%2027%206%20Q24%203%2021%206%20Q18%203%2015%206%20Q12%203%209%206%20Q7%20-1%200%200Z%22/%3E%3Cpath%20transform%3D%22translate%28330%2095%29%20scale%280.6%29%22%20d%3D%22M0%200%20Q7%20-8%2013%20-1%20Q15%20-6%2018%20-3%20Q21%20-6%2023%20-1%20Q29%20-8%2036%200%20Q29%20-1%2027%206%20Q24%203%2021%206%20Q18%203%2015%206%20Q12%203%209%206%20Q7%20-1%200%200Z%22/%3E%3C/g%3E%3Cg%20opacity%3D%22.3%22%3E%3Cg%20transform%3D%22translate%28520%20215%29%20scale%281.4%29%22%3E%3Cellipse%20cx%3D%220%22%20cy%3D%220%22%20rx%3D%2222%22%20ry%3D%2218%22/%3E%3Cellipse%20cx%3D%22-12%22%20cy%3D%220%22%20rx%3D%2212%22%20ry%3D%2217%22/%3E%3Cellipse%20cx%3D%2212%22%20cy%3D%220%22%20rx%3D%2212%22%20ry%3D%2217%22/%3E%3Crect%20x%3D%22-3%22%20y%3D%22-26%22%20width%3D%226%22%20height%3D%2210%22%20rx%3D%222%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2860%20205%29%20scale%280.9%29%22%3E%3Cellipse%20cx%3D%220%22%20cy%3D%220%22%20rx%3D%2222%22%20ry%3D%2218%22/%3E%3Cellipse%20cx%3D%22-12%22%20cy%3D%220%22%20rx%3D%2212%22%20ry%3D%2217%22/%3E%3Cellipse%20cx%3D%2212%22%20cy%3D%220%22%20rx%3D%2212%22%20ry%3D%2217%22/%3E%3Crect%20x%3D%22-3%22%20y%3D%22-26%22%20width%3D%226%22%20height%3D%2210%22%20rx%3D%222%22/%3E%3C/g%3E%3C/g%3E%3Ccircle%20cx%3D%22410%22%20cy%3D%2230%22%20r%3D%2216%22%20opacity%3D%22.25%22/%3E%3C/svg%3E")}
html[data-season="christmas"] .bandbg::after{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20600%20260%22%20fill%3D%22none%22%3E%3Cg%20opacity%3D%22.3%22%3E%3Cg%20transform%3D%22translate%2840%2040%29%20scale%281%29%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M0%20-10V10M-8.7%20-5L8.7%205M-8.7%205L8.7%20-5%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%28130%20110%29%20scale%280.7%29%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M0%20-10V10M-8.7%20-5L8.7%205M-8.7%205L8.7%20-5%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%28240%2030%29%20scale%280.9%29%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M0%20-10V10M-8.7%20-5L8.7%205M-8.7%205L8.7%20-5%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%28330%20140%29%20scale%280.6%29%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M0%20-10V10M-8.7%20-5L8.7%205M-8.7%205L8.7%20-5%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%28420%2060%29%20scale%281.2%29%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M0%20-10V10M-8.7%20-5L8.7%205M-8.7%205L8.7%20-5%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%28520%2030%29%20scale%280.8%29%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M0%20-10V10M-8.7%20-5L8.7%205M-8.7%205L8.7%20-5%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%28560%20160%29%20scale%281%29%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M0%20-10V10M-8.7%20-5L8.7%205M-8.7%205L8.7%20-5%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%2880%20190%29%20scale%280.8%29%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M0%20-10V10M-8.7%20-5L8.7%205M-8.7%205L8.7%20-5%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%28280%20210%29%20scale%280.7%29%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M0%20-10V10M-8.7%20-5L8.7%205M-8.7%205L8.7%20-5%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%28470%20220%29%20scale%280.9%29%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M0%20-10V10M-8.7%20-5L8.7%205M-8.7%205L8.7%20-5%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}
html[data-season="halloween"] .szn-halloween,html[data-season="christmas"] .szn-christmas{display:inline}
svg.mascot,svg.traysnap,.floatsnap svg{overflow:visible}
:root[data-season="halloween"],:root[data-season="halloween"][data-team]{--main:#f27b1f;--deep:#c2560a;--soft:#ffeadb;--text:#b84f0a;--band:#f27b1f;--t1:#ffa24d;--t2:#e0610f;--gs:rgba(242,123,31,.32);--on:#fff;--wacc:#ffc531}
:root[data-season="christmas"],:root[data-season="christmas"][data-team]{--main:#d93a3a;--deep:#a82424;--soft:#fde8e8;--text:#a82424;--band:#d93a3a;--t1:#ff6b6b;--t2:#b82828;--gs:rgba(217,58,58,.32);--on:#fff;--wacc:#ffc531}
html[data-season] .teams{display:none}
html[data-season="halloween"] .bandbg{background:linear-gradient(170deg,#2b1d4d 0%,#4b2c80 70%,#5d3592 100%)}
html[data-season="christmas"] .bandbg{background:linear-gradient(170deg,#14553a 0%,#1f7a50 100%)}
html[data-season="halloween"] .stripe i:nth-child(1),html[data-season="halloween"] .stripe i:nth-child(3){background:#f27b1f!important}html[data-season="halloween"] .stripe i:nth-child(2){background:#7b4bc4!important}
html[data-season="christmas"] .stripe i:nth-child(1),html[data-season="christmas"] .stripe i:nth-child(3){background:#d93a3a!important}html[data-season="christmas"] .stripe i:nth-child(2){background:#2e9a62!important}
@media (prefers-color-scheme:dark){:root[data-season="halloween"],:root[data-season="halloween"][data-team]{--soft:#3a2614;--text:#ffa35a}:root[data-season="christmas"],:root[data-season="christmas"][data-team]{--soft:#3a1c1c;--text:#ff8b8b}}
.tgrid.few .tcx{grid-column:1/-1!important;flex-direction:row!important;align-items:center!important;padding:16px 18px;gap:14px}
.tgrid.few .tcx .ic{width:58px;height:58px;border-radius:50%}.tgrid.few .tcx b{font-size:22px}.tgrid.few .tcx small{font-size:13.5px}
.prose h2{margin:8px 0 -4px;font-size:20px;line-height:1.2}
.evready{margin:12px 4px 0;font-size:15px;font-weight:600;color:var(--text);text-align:center}
.evoff{align-self:flex-start;margin-top:4px;padding:8px 14px;border:2px solid var(--line-strong);border-radius:999px;background:var(--surface);color:var(--ink);font-size:14px;font-weight:700;text-decoration:none;cursor:pointer}
.evoff:hover{border-color:var(--main);color:var(--text)}
.evkh{margin:6px 0 10px;padding:10px 12px;border-radius:12px;background:var(--soft);color:var(--text);font-size:14px;font-weight:700}
.evkh .linkbtn{font-size:13px;margin-left:4px}
.stgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:560px){.stgrid{grid-template-columns:repeat(3,1fr)}}
.stgrid a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px;border-radius:18px;background:var(--soft);text-decoration:none;color:var(--text);font-weight:800;font-size:14px}
.stgrid img{width:100%;height:auto;aspect-ratio:1}
.stall{display:block;margin-top:14px;text-align:center;padding:14px;border-radius:16px;background:var(--main);color:var(--on);font-weight:800;font-size:16px;text-decoration:none;box-shadow:0 4px 0 var(--deep)}
.stklink{display:flex;align-items:center;gap:12px;margin:18px 0 0;padding:10px 16px 10px 10px;border-radius:18px;background:var(--surface);color:var(--text);font-weight:800;font-size:15px;text-decoration:none;box-shadow:0 2px 0 var(--line)}.stklink[hidden]{display:none}.stklink img{width:56px;height:56px;flex:none}.stklink span:first-of-type{flex:1}
.bsuper{margin-top:8px;font-size:13px;font-weight:700;line-height:1.35;color:var(--text);background:var(--soft);border-radius:10px;padding:8px 10px;text-align:left}
.bmegas{margin-top:6px;font-size:13px;font-weight:600;color:var(--muted);text-align:left}
.cimg{width:36px;height:36px;object-fit:contain;flex:none}
.cnote{font-size:12px;color:var(--muted);margin:6px 0 0}
.modebar2{display:flex;gap:6px;margin:0 0 8px}
.modebar2 button{flex:1;border:2px solid var(--line-strong);background:var(--surface);color:var(--ink);font:inherit;font-weight:800;font-size:13px;border-radius:99px;padding:6px 8px;cursor:pointer}
.modebar2 button[aria-pressed="true"]{background:var(--main);border-color:var(--main);color:var(--on)}
.featwrap{display:flex;flex-direction:column;gap:12px}.featwrap[hidden]{display:none}
.feat{background:var(--surface);border-radius:24px;padding:16px;box-shadow:0 0 0 3px var(--main) inset,0 8px 24px rgba(23,32,54,.08);display:flex;flex-direction:column;gap:12px}
.ftop{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;font-weight:800}.ftop .tier{font-size:11.5px}
.fwhen{color:var(--text)}
.fmain{display:flex;align-items:center;gap:14px}
.fimg{width:96px;height:96px;object-fit:contain;flex:none;background:var(--bg);border-radius:20px}
.ftx{min-width:0;display:flex;flex-direction:column;gap:5px}
.fname{font-family:var(--font-display);font-size:24px;line-height:1.05}
.fweak{font-size:11.5px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.fsuper{margin:0;font-size:13.5px;font-weight:700;line-height:1.35;color:var(--text);background:var(--soft);border-radius:12px;padding:8px 10px}
.fatt{display:flex;align-items:center;gap:2px;border:0;background:var(--bg);border-radius:14px;padding:6px 10px;cursor:pointer;font:inherit}
.fatt .cimg{width:40px;height:40px}.fmore{margin-left:auto;font-size:13px;font-weight:800;color:var(--text);white-space:nowrap}
.feat .row .copy{font-size:17px;padding:13px 10px;display:flex;align-items:center;gap:8px}
.feat .copy svg{stroke:currentColor;flex:none}
.rwk{display:flex;flex-wrap:wrap;gap:4px}
.rwc{font-size:12px;font-weight:800;line-height:1;padding:5px 8px;border-radius:999px;white-space:nowrap}
.rwk.mini .rwc{font-size:10.5px;padding:3px 6px}
.tierbar{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -2px 4px;padding:2px}
.tierbar::-webkit-scrollbar{display:none}
.tierbar button{flex:none;border:2px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-weight:800;font-size:13px;border-radius:999px;padding:5px 12px;cursor:pointer}
.tierbar button[aria-pressed="true"]{background:var(--main);border-color:var(--main);color:var(--on)}
.rrows{display:flex;flex-direction:column;gap:6px}
.rrows .soonh{margin:8px 0 0}
.rrow{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:var(--bg);border-radius:16px;padding:8px 10px 8px 8px;cursor:pointer;font:inherit;color:var(--ink)}
.rrow[aria-pressed="true"]{box-shadow:0 0 0 2px var(--main) inset}
.rrow.soon .rpic{opacity:.7}
.rpic{flex:none;width:52px;height:52px;display:grid;place-items:center}
.rrow .bimg{width:52px;height:52px;background:var(--surface)}
.rtx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.rl1 b{font-size:16px;line-height:1.1;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rl2{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800}.rl2 .tier{padding:1px 7px}
.rwhen{color:var(--muted)}
.rgo{flex:none;color:var(--muted)}
.sheetbg{position:fixed;inset:0;z-index:6;background:rgba(15,20,35,.45)}.sheetbg[hidden]{display:none}
html.sheeton,html.sheeton body{overflow:hidden}
.tray.sheet{max-height:88vh;max-height:88dvh;display:flex;flex-direction:column;transform:translateY(100%);transition:transform .18s ease-out}
.tray.sheet.up{transform:none}
.tray.sheet[hidden]{display:none}
.tray.sheet .tray-in{flex:1;min-height:0;width:100%}
.shhead{display:flex;align-items:center;gap:10px}
.shpic .bimg{width:56px;height:56px}
.shtx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.shtop{font-size:11px;font-weight:800}
.shtx b{font-family:var(--font-display);font-size:21px;line-height:1.05}
.shwhen{font-size:12.5px;font-weight:700;color:var(--muted)}
.shx{flex:none;width:38px;height:38px;border-radius:50%;border:0;background:var(--bg);color:var(--ink);display:grid;place-items:center;cursor:pointer}
.shbody{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:8px;padding:2px 0 6px;overscroll-behavior:contain}
.shbody .sub{margin:4px 0 -2px}
.sgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:2px}
.sgrid div{background:var(--bg);border-radius:12px;padding:7px 10px;display:flex;flex-direction:column;gap:1px;min-width:0}
.sgrid small{font-size:11px;font-weight:800;color:var(--muted)}.sgrid b{font-size:14px;line-height:1.2;font-variant-numeric:tabular-nums}
.shbody .bsuper{margin:0}
.alist{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px}
.alist li{display:flex;align-items:center;gap:8px;font-size:13px;line-height:1.2;padding:3px 0}
.alist li b{display:block;font-size:14.5px}.alist li small{color:var(--muted);font-weight:600}
.anum{flex:none;width:18px;text-align:center;font-size:12px;font-weight:800;color:var(--muted)}
.shfoot{display:flex;flex-direction:column;gap:8px;border-top:1.5px solid var(--line);padding-top:10px}
.shfoot .modebar2{margin:0}
.outrow{display:flex;align-items:center;gap:8px}
.outrow .out{flex:1;min-width:0;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12.5px;padding:7px 10px}
.outrow .glpill{flex:none;align-self:center}
@media (min-width:660px){.tray.sheet{transform:translate(-50%,100%)}.tray.sheet.up{transform:translateX(-50%)}}
@media (prefers-color-scheme:dark){.rrow{background:#1b2233}.rrow .bimg,.fimg{background:#252d40}.fatt,.sgrid div,.shx{background:#1b2233}}
.cx{display:block;font-style:normal;margin-top:6px;font-size:12.5px;font-weight:800;line-height:1.3;padding:5px 9px;border-radius:10px;align-self:flex-start;max-width:100%;box-sizing:border-box}
.cx[hidden]{display:none}
.tcx .cx{background:var(--soft);color:var(--text)}
.cleanhero .grow .cx{background:rgba(255,255,255,.2);color:var(--on);opacity:1;font-size:12.5px}
.tgrid.few .tcx .tt{min-width:0;flex:1}.tcx{min-width:0}
.tcx.tc-raids{--t1:#ff7a6b;--t2:#d9382b;--gs:rgba(217,56,43,.3);--soft:#ffe6e2;--text:#b42318}
.tcx.tc-events{--t1:#6f9bff;--t2:#2563d0;--gs:rgba(37,99,208,.3);--soft:#e3ecff;--text:#1d4fae}
.tcx.tc-rocket{--t1:#5a6378;--t2:#232a3b;--gs:rgba(35,42,59,.3);--soft:#e8eaef;--text:#232a3b}
.tcx.tc-trade{--t1:#37c2a9;--t2:#16897a;--gs:rgba(22,137,122,.3);--soft:#dcf5f0;--text:#0f6b5f}
.tcx.tc-friends{--t1:#f37bb5;--t2:#cf3f86;--gs:rgba(207,63,134,.3);--soft:#fde3ef;--text:#a8286a}
@media (prefers-color-scheme:dark){.tcx.tc-raids{--soft:#3a1d1a;--text:#ff9a8f}.tcx.tc-events{--soft:#1a2440;--text:#9dbbff}.tcx.tc-rocket{--soft:#262b36;--text:#c9cfdb}.tcx.tc-trade{--soft:#143430;--text:#7fe0cf}.tcx.tc-friends{--soft:#3a1a2b;--text:#ff9fcb}}
a.banner{border:0;box-shadow:0 3px 0 var(--line);background:var(--surface)}
body:not([data-view="home"]) .chead{min-height:0;padding:0 0 2px}
body:not([data-view="home"]) .chead h1{font-size:23px}
body:not([data-view="home"]) .chead p{font-size:12.5px;margin-top:2px}
body:not([data-view="home"]) .chead svg.mascot{width:66px;height:66px}
body:not([data-view="home"]) .chead .back{width:34px;height:34px}
.tray:has(.out.empty) .row,.tray:has(.out.empty) .trayhead{display:none}
.tray:has(.out.empty) .out.empty{margin:0;padding:8px 10px;font-size:13px}
html[data-season="halloween"] .tcx.tc-raids{--t1:#9b6be0;--t2:#5b2fa6;--gs:rgba(91,47,166,.32);--soft:#efe6fb;--text:#5b2fa6}
html[data-season="halloween"] .tcx.tc-events{--t1:#8fd14f;--t2:#4b8f1c;--gs:rgba(75,143,28,.3);--soft:#e8f6da;--text:#3c7514}
html[data-season="christmas"] .tcx.tc-raids{--t1:#3fbf7f;--t2:#1f7a50;--gs:rgba(31,122,80,.3);--soft:#dff3e8;--text:#17613f}
html[data-season="christmas"] .tcx.tc-events{--t1:#f2c84b;--t2:#c79500;--gs:rgba(199,149,0,.3);--soft:#fbf1d2;--text:#8a6700}
@media (prefers-color-scheme:dark){html[data-season="halloween"] .tcx.tc-raids{--soft:#2a1d40;--text:#c6a5ff}html[data-season="halloween"] .tcx.tc-events{--soft:#1f3313;--text:#a8e07a}html[data-season="christmas"] .tcx.tc-raids{--soft:#143023;--text:#7fe0ae}html[data-season="christmas"] .tcx.tc-events{--soft:#33290c;--text:#f2cf6b}}
.feat.tap{cursor:pointer}
.feat .row .copy{font-size:16px;flex:1;min-width:0}
.feat .fgo{padding:0 16px;font-size:15px}
.shfoot{position:relative}
.tray.sheet .traysnap{top:-78px;right:4px;width:72px;height:72px;z-index:3}
.evhead{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;column-gap:0;row-gap:1px;align-items:center}.evhead .evtag,.evhead .evlive{margin-right:8px}.evhead .evchev{margin-left:8px}
.evhead .evtag{grid-column:1;grid-row:1}.evhead .evlive{grid-column:2;grid-row:1}
.evhead .evname{grid-column:3;grid-row:1;white-space:normal;line-height:1.2}
.evhead .evdates{grid-column:3;grid-row:2;color:var(--muted)}
.evhead .evchev{grid-column:4;grid-row:1/3}
.evhead .evtag:empty,.evhead .evtag[hidden]{display:none}
.sgrid .wide{grid-column:1/-1}
.fplay{margin:0;font-size:14px;font-weight:800;color:var(--ink)}
body[data-view="raids"]{--tool1:#ff7a6b;--tool2:#d9382b}
body[data-view="calendar"]{--tool1:#6f9bff;--tool2:#2563d0}
html[data-season="halloween"] body[data-view="raids"]{--tool1:#9b6be0;--tool2:#5b2fa6}
html[data-season="halloween"] body[data-view="calendar"]{--tool1:#8fd14f;--tool2:#4b8f1c}
html[data-season="christmas"] body[data-view="raids"]{--tool1:#3fbf7f;--tool2:#1f7a50}
html[data-season="christmas"] body[data-view="calendar"]{--tool1:#f2c84b;--tool2:#c79500}
body[data-view="raids"] .chead .back,body[data-view="calendar"] .chead .back{background:linear-gradient(145deg,var(--tool1),var(--tool2))!important;box-shadow:0 0 0 2px rgba(255,255,255,.5)}
.stk[hidden],.stklink[hidden]{display:none}.stk h2{margin:0 0 12px;font-size:22px}
.pkw{position:relative;display:inline-grid;flex:none;line-height:0}
.pkbdg{position:absolute;right:-2px;bottom:-2px;width:clamp(11px,26%,18px);line-height:0;pointer-events:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.pkbdg svg{width:100%;height:auto;display:block}
.pkw-dmax .pkbdg,.pkw-gmax .pkbdg{width:auto;right:-4px;bottom:-2px}
.pkmax{display:block;font:800 7px/1 var(--font-display);letter-spacing:.02em;color:#fff;background:#d6266a;border-radius:4px;padding:2px 3px;border:1px solid #fff}
.pkmax.g{background:linear-gradient(135deg,#d6266a,#7a1fd1)}
.pkw .fimg~.pkbdg{width:22px}
.pkw .fimg~.pkbdg .pkmax{font-size:9px;padding:2px 4px}
button.etool{border:0;font-family:inherit;cursor:pointer}
.eres{background:color-mix(in srgb,var(--kc) 8%,var(--surface));border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.eres h3{margin:0;font-size:14px;font-weight:900}
.eresl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.eresl li{display:flex;align-items:center;gap:8px;min-height:40px;border-top:1px solid color-mix(in srgb,var(--text) 8%,transparent);padding-top:6px}
.eresl li:first-child{border-top:0;padding-top:0}
.erest{flex:1;font-size:13.5px;font-weight:800;line-height:1.25}
.eresp{display:flex;align-items:center;gap:2px;flex-wrap:wrap;justify-content:flex-end;max-width:58%}
.eresi{width:36px;height:36px;object-fit:contain}
.eresx{font-size:12px;font-weight:800;color:var(--muted);text-align:right}
.eresc{display:flex;align-items:center;gap:8px}
.eresc .ebtn{flex:none;padding:8px 14px}
.eresc code{flex:1;min-width:0;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.ereshint{font-size:12px!important;font-weight:700!important;color:var(--muted);margin:0}
.rkwhoimg{width:46px;height:46px;object-fit:contain;border-radius:50%;background:color-mix(in srgb,var(--text) 7%,transparent);overflow:hidden}
.ldr button .rkface{width:52px;height:52px;object-fit:contain;border-radius:50%;background:color-mix(in srgb,var(--text) 7%,transparent)}
.rkatt{list-style:none;margin:6px 0 2px;padding:0;display:flex;flex-direction:column;gap:4px}
.rkatt li{display:flex;align-items:center;gap:8px}
.rkatt li.rkatth{font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
.rkatt li span{display:flex;flex-direction:column;line-height:1.15}
.rkatt li b{font-size:13.5px}.rkatt li small{font-size:12px;color:var(--muted);font-weight:700}
.wrow .pkw,.wrow .pkbdg{flex:none}
.wrow .pkbdg{width:clamp(11px,26%,14px)}
.rkatt li .cimg{width:36px;height:36px;object-fit:contain}
#who button img.rkwhoimg[src*="leaders."]{width:62px;border-radius:0;background:none;object-fit:contain}
.pkb.reward{background:var(--surface);border-color:var(--line)}
.pkb.reward[aria-pressed="true"]{border-color:var(--main)}
.pkb .catch{font-size:10px;color:#b7791f;line-height:1.2}
.slotcol .pkb{flex:0 0 auto}
.pkb[aria-pressed="true"]{background:var(--soft)}
.tcx.tc-rocket{--t1:#e5483b;--t2:#a8191c;--soft:#fde6e3;--text:#a8191c}
.tcx.tc-rocket .ic{background:linear-gradient(145deg,#3b4255,#141824);box-shadow:0 4px 10px rgba(168,25,28,.28)}
.tcx.tc-rocket .ic svg,:root[data-team="yellow"] .tcx.tc-rocket .ic svg{stroke:#ff5a4a}
@media (prefers-color-scheme:dark){.tcx.tc-rocket{--soft:#3a1a1a;--text:#ff9a8f}}
.seosum{margin:6px 0;padding-left:18px;font-size:13px;line-height:1.45;color:var(--muted)}.seosum li{margin:3px 0}.seosum b{color:var(--ink)}
.sharebtn{align-self:flex-start;margin-top:4px;border:2px solid var(--line);background:var(--surface);color:var(--ink);font-weight:800;font-size:14px;border-radius:999px;padding:8px 14px;cursor:pointer}
.sharebtn:disabled{opacity:.6}
.cosopt.noshiny{opacity:.35}
.cosopt small{display:block;font-size:10px;font-weight:800;line-height:1.1;margin-top:2px}
.cosopt:has(small){height:auto;min-height:58px}.cosopt:has(small) img{width:42px;height:42px}