@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  color-scheme: dark;
  --ink: #071018;
  --panel: #0c1822;
  --panel-raised: #10212d;
  --line: #1c3442;
  --muted: #90a2ad;
  --paper: #f1f7fa;
  --cyan: #12b8f2;
  --cyan-bright: #41d1ff;
  --cyan-dim: #07364a;
  --gold: #e7bf72;
  --danger: #ff827c;
  --radius: 14px;
  font-family: "DM Sans", "Segoe UI", sans-serif;
  background: var(--ink);
  color: var(--paper);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--ink); }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--cyan-bright); outline-offset: 3px; }
.site-shell { min-height: 100vh; display: flex; flex-direction: column; }
.push-notification-invitation { position: fixed; z-index: 30; right: 18px; bottom: 18px; display: flex; width: min(460px, calc(100vw - 36px)); align-items: center; justify-content: space-between; gap: 16px; padding: 16px; border: 1px solid #285264; border-radius: 10px; background: linear-gradient(145deg, #102631, #0b151d); box-shadow: 0 14px 40px #000b; }
.push-notification-invitation > div:first-child { display: grid; gap: 5px; }
.push-notification-invitation strong { color: var(--paper); font-size: 12px; }
.push-notification-invitation p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.push-notification-invitation-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
.push-notification-invitation-dismiss { padding: 6px; border: 0; background: transparent; color: var(--muted); font-size: 10px; cursor: pointer; }
.push-notification-invitation-dismiss:hover { color: var(--paper); }
.topline { height: 34px; padding: 0 max(24px, calc((100vw - 1240px) / 2)); display: flex; align-items: center; gap: 10px; background: #03090e; border-bottom: 1px solid #14222c; color: #bdd0d9; font-size: 10px; letter-spacing: .12em; font-weight: 700; }
.topline a { margin-left: auto; color: var(--cyan-bright); letter-spacing: .03em; }
.topline-note { color: #647985; letter-spacing: .04em; font-weight: 500; }
.pulse { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 11px var(--cyan); }
.site-announcement { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 10px 20px; border-bottom: 1px solid #28617a; background: linear-gradient(90deg, #0a2634, #103544, #0a2634); color: #e5f8ff; text-align: center; font-size: 11px; line-height: 1.5; }
.site-announcement[hidden] { display: none; }
.site-announcement a { flex: 0 0 auto; color: var(--cyan-bright); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.site-header { height: 82px; padding: 0 max(24px, calc((100vw - 1240px) / 2)); display: flex; align-items: center; gap: 32px; border-bottom: 1px solid var(--line); background: rgba(7,16,24,.94); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(16px); }
.brand { display: flex; align-items: center; gap: 10px; min-width: 200px; }
.brand-mark { height: 55px; width: 55px; object-fit: contain; filter: drop-shadow(0 0 12px rgba(18,184,242,.2)); }
.brand-copy { display: grid; gap: 0; line-height: 1; }
.brand-copy strong { font: 800 28px/1 "Barlow Condensed", sans-serif; letter-spacing: .04em; }
.brand-copy small { margin-top: 5px; color: var(--muted); font-size: 8px; letter-spacing: .16em; font-weight: 700; }
.main-nav { display: flex; align-items: center; gap: 22px; height: 100%; }
.main-nav > a, .nav-dropdown > summary { height: 100%; display: flex; align-items: center; gap: 9px; color: #9badb7; font-size: 12px; font-weight: 600; position: relative; transition: color .18s ease; cursor: pointer; list-style: none; }
.main-nav > a:hover, .main-nav > a.active, .nav-dropdown > summary:hover, .nav-dropdown > summary.active { color: var(--paper); }
.main-nav > a.active::after, .nav-dropdown > summary.active::after { content: ""; position: absolute; height: 2px; left: 0; right: 0; bottom: 0; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.nav-dropdown { position: relative; height: 100%; }
.nav-dropdown > summary::-webkit-details-marker, .account-dropdown > summary::-webkit-details-marker { display: none; }
.nav-dropdown > summary::marker, .account-dropdown > summary::marker { content: ""; }
.nav-dropdown > summary::after { content: ""; width: 6px; height: 6px; margin-top: -3px; border-right: 1.5px solid #8097a3; border-bottom: 1.5px solid #8097a3; transform: rotate(45deg); transition: transform .16s ease, border-color .16s ease; }
.nav-dropdown[open] > summary::after { margin-top: 3px; transform: rotate(225deg); border-color: var(--cyan-bright); }
.dropdown-panel { position: absolute; z-index: 20; top: calc(100% + 7px); left: -16px; display: none; min-width: 210px; padding: 7px; border: 1px solid #25404e; border-radius: 10px; background: linear-gradient(145deg, #10212b, #0b151d); box-shadow: 0 18px 42px #0009; }
.dropdown-panel::before { content: ""; position: absolute; left: 20px; top: -5px; width: 8px; height: 8px; border-left: 1px solid #25404e; border-top: 1px solid #25404e; background: #10212b; transform: rotate(45deg); }
.dropdown-heading { position: relative; padding: 8px 10px 7px; color: #708692; font-size: 8px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.nav-dropdown[open] .dropdown-panel, .account-dropdown[open] .dropdown-panel { display: grid; }
.dropdown-panel a { position: relative; display: flex; align-items: center; min-height: 37px; padding: 8px 10px; border-radius: 6px; color: #a9bbc4; font-size: 11px; font-weight: 500; white-space: nowrap; transition: background .14s ease, color .14s ease, padding .14s ease; }
.dropdown-panel a:hover, .dropdown-panel a.active { padding-left: 14px; background: #142b37; color: var(--cyan-bright); }
.header-actions { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.icon-link { font-size: 27px; color: #a6bbc5; line-height: 1; }
.notification-menu { position: relative; }
.notification-menu > summary { position: relative; display: grid; width: 30px; height: 34px; place-items: center; cursor: pointer; list-style: none; color: #a6bbc5; }
.notification-menu > summary::-webkit-details-marker { display: none; }
.notification-menu > summary::marker { content: ""; }
.notification-menu > summary svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.notification-menu > summary:hover, .notification-menu[open] > summary { color: var(--cyan-bright); }
.notification-count { position: absolute; top: -1px; right: -6px; min-width: 17px; height: 17px; padding: 0 4px; display: grid; place-items: center; border: 1px solid #071018; border-radius: 10px; background: #e14848; color: white; font-size: 8px; font-weight: 800; line-height: 1; }
.notification-count[hidden], .notification-menu[hidden] { display: none; }
.notifications-panel { position: absolute; z-index: 20; top: calc(100% + 12px); right: -28px; width: min(330px, calc(100vw - 24px)); max-height: 370px; overflow: auto; padding: 7px; border: 1px solid #25404e; border-radius: 10px; background: linear-gradient(145deg, #10212b, #0b151d); box-shadow: 0 18px 42px #0009; }
.notifications-panel-heading { padding: 9px 10px; color: #708692; font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.notification-item { display: grid; gap: 5px; padding: 10px; border-radius: 6px; color: #a9bbc4; font-size: 10px; }
.notification-item:hover, .notification-item.unread { background: #142b37; color: var(--paper); }
.notification-item time { color: #708692; font-size: 8px; }
.notification-ge { grid-template-columns: 32px minmax(0, 1fr) 58px; align-items: center; gap: 9px; }
.notification-ge-icon { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid #25404e; border-radius: 6px; background: #0a1821; color: var(--cyan-bright); font-weight: 800; }
.notification-ge-icon-image { width: 26px; height: 26px; object-fit: contain; }
.notification-ge-copy { min-width: 0; display: grid; gap: 4px; }
.notification-ge-copy > strong { color: var(--cyan-bright); font-size: 9px; }
.notification-ge-copy > span { overflow-wrap: anywhere; }
.notification-ge-copy > small { color: #d1dfe5; font-size: 8px; }
.notification-ge-thumbnail { width: 58px; height: 44px; object-fit: contain; border: 1px solid #25404e; border-radius: 5px; background: #07131b; }
.account-dropdown { position: relative; }
.account-trigger { display: flex; align-items: center; gap: 8px; border: 1px solid transparent; border-radius: 8px; padding: 5px 7px; background: transparent; color: var(--paper); cursor: pointer; font-size: 11px; font-weight: 700; max-width: 190px; transition: background .14s ease, border-color .14s ease; }
.account-trigger:hover, .account-dropdown[open] > .account-trigger { border-color: #263d49; background: #10202a; }
.account-trigger > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-trigger > img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.account-dropdown .dropdown-panel { left: auto; right: 0; min-width: 180px; }
.account-dropdown .dropdown-panel::before { left: auto; right: 17px; }
.account-economy { position: relative; display: grid; gap: 8px; min-width: 230px; padding: 9px 10px; border: 1px solid #25404e; border-radius: 6px; color: var(--cyan-bright); font-size: 9px; font-weight: 700; white-space: nowrap; }
.account-economy-summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.account-ngp { display: inline-flex; align-items: center; gap: 4px; }
.account-ngp img { width: 15px; height: 15px; object-fit: contain; }
.account-xp-progress { height: 5px; overflow: hidden; border-radius: 5px; background: #1a303b; }
.account-xp-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--cyan-bright)); }
.dropdown-panel .dropdown-signout { margin-top: 5px; border-top: 1px solid #203541; border-radius: 0 0 6px 6px; padding-top: 10px; color: #b6a2a2; }
.dropdown-panel .dropdown-signout:hover { color: #ffaaa5; background: #291b20; }
.button { border: 1px solid transparent; border-radius: 6px; padding: 11px 16px; cursor: pointer; display: inline-flex; justify-content: center; align-items: center; gap: 8px; font-weight: 700; font-size: 12px; transition: .18s ease; }
.button:hover { transform: translateY(-1px); }
.button-primary { background: var(--cyan); color: #00111a; }
.button-primary:hover { background: var(--cyan-bright); box-shadow: 0 6px 22px rgba(18,184,242,.2); }
.button-outline { border-color: #315366; color: var(--paper); background: transparent; }
.button-outline:hover { border-color: var(--cyan); color: var(--cyan-bright); }
.button-small { padding: 9px 12px; font-size: 11px; }
.button-quiet { color: #a8bac3; padding: 8px 10px; background: transparent; border-color: transparent; }
.button-danger { color: #ffaaa5; border-color: #673b3b; background: #211619; }
.mobile-menu-button, .mobile-nav { display: none; }
main { flex: 1; width: min(1240px, calc(100% - 48px)); margin: 0 auto; padding: 34px 0 72px; }
.hero { min-height: 344px; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .85fr); align-items: center; gap: 34px; overflow: hidden; position: relative; padding: 38px 48px; border: 1px solid #17415a; border-radius: 16px; background: radial-gradient(ellipse at 78% 48%, rgba(0,174,239,.18), transparent 42%), linear-gradient(115deg, #0b1b27 0%, #08141d 65%, #0b202c 100%); }
.hero::after { content: ""; position: absolute; inset: 0; opacity: .1; pointer-events: none; background-image: linear-gradient(135deg, transparent 46%, #6bdcff 46.2%, transparent 46.5%), linear-gradient(45deg, transparent 76%, #6bdcff 76.2%, transparent 76.5%); background-size: 80px 80px; mask-image: linear-gradient(90deg, transparent 35%, black); }
.hero-copy { z-index: 1; position: relative; min-width: 0; max-width: 100%; }
.eyebrow { color: var(--cyan-bright); text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 800; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: "Barlow Condensed", "Segoe UI", sans-serif; text-transform: uppercase; }
.hero h1 { font-size: clamp(43px, 6vw, 72px); line-height: .94; letter-spacing: .015em; margin: 14px 0 16px; }
.hero h1 span { color: var(--cyan-bright); }
.hero-copy > p { max-width: 460px; color: #a5b8c2; font-size: 14px; line-height: 1.7; }
.hero-aside { z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-width: 0; background: radial-gradient(ellipse at 50% 42%, rgba(0, 174, 239, .13), rgba(0, 174, 239, .045) 38%, transparent 72%); }
.hero-actions { display: flex; justify-content: center; gap: 10px; margin-top: 0; }
.hero-emblem { justify-self: center; width: min(340px, 100%); height: 300px; object-fit: contain; position: relative; z-index: 1; filter: drop-shadow(0 8px 42px rgba(0,174,239,.34)); }
.hero-stats { display: flex; gap: 0; margin-top: 32px; border-top: 1px solid var(--line); padding-top: 19px; }
.hero-stats#home-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 14px; }
.hero-stat { padding: 0 24px; border-left: 1px solid var(--line); }
.hero-stat:first-child { border-left: 0; padding-left: 0; }
.hero-stat strong { display: block; color: var(--paper); font: 700 23px/1 "Barlow Condensed", sans-serif; }
.hero-stat span { display: block; color: var(--muted); font-size: 9px; margin-top: 5px; text-transform: uppercase; letter-spacing: .1em; }
.hero-clan-feed { margin-top: 18px; overflow: hidden; background: rgba(0, 0, 0, .12); }
.clan-feed-caption { color: var(--muted); font-size: 10px; }
.clan-feed-track-wrap { overflow: hidden; padding: 0; }
.clan-feed-track { display: flex; width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; cursor: grab; touch-action: pan-x; }
.clan-feed-track::-webkit-scrollbar { display: none; }
.clan-feed-track:active { cursor: grabbing; }
.hero-clan-feed .clan-feed-track-wrap { padding: 10px 0; }
.clan-feed-set { display: flex; flex: 0 0 auto; gap: 9px; padding: 0 9px 0 0; }
.hero-clan-feed .clan-feed-set { gap: 6px; padding-right: 6px; }
.clan-feed-card { position: relative; display: flex; align-items: center; gap: 10px; width: 265px; min-height: 66px; padding: 9px 11px; border: 1px solid #1b3542; border-radius: 8px; background: #0d1d27; transition: border-color .16s ease, background .16s ease; }
.hero-clan-feed .clan-feed-card { width: 184px; min-height: 56px; gap: 8px; padding: 6px 8px; border-radius: 9px; background: linear-gradient(145deg, #10232e, #0b1821); }
.clan-feed-item-icon { position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; object-fit: contain; image-rendering: pixelated; }
.clan-feed-item-icon.ge-item-icon-fallback { display: grid; place-items: center; border: 1px solid #1b3542; border-radius: 4px; color: var(--gold); }
.hero-clan-feed .clan-feed-item-icon { top: 5px; right: 5px; z-index: 2; width: 29px; height: 29px; padding: 3px; border: 1px solid #294553; border-radius: 7px; background: #09151de8; }
.hero-clan-feed .clan-feed-model { flex-basis: 52px; width: 52px; height: 52px; box-sizing: border-box; overflow: hidden; border: 1px solid #294553; border-radius: 8px; background: linear-gradient(145deg, #13313e, #09151d); }
.hero-clan-feed .clan-feed-model img { width: 28px; height: 28px; }
.hero-clan-feed .clan-feed-model .clan-feed-player { position: absolute; z-index: 1; left: 50%; top: 50%; width: 150%; height: 150%; max-width: none; max-height: none; margin: 0; transform: translate(-50%, -50%); border-radius: 0; object-fit: contain !important; filter: drop-shadow(0 2px 2px #0009); }
.hero-clan-feed .clan-feed-copy { gap: 4px; padding-right: 31px; }
.hero-clan-feed .clan-feed-copy strong { font-size: 8.5px; }
.hero-clan-feed .clan-feed-copy > span { font-size: 7.5px; }
.clan-feed-card:hover { border-color: #26708c; background: #102631; }
.clan-feed-model { position: relative; display: grid; flex: 0 0 42px; width: 42px; height: 42px; place-items: center; border-radius: 50%; background: radial-gradient(circle, #164356, #0a171f 72%); overflow: hidden; }
.clan-feed-model img { grid-area: 1 / 1; width: 38px; height: 38px; object-fit: contain; }
.clan-feed-avatar { border-radius: 50%; object-fit: cover !important; }
.clan-feed-copy { display: grid; min-width: 0; gap: 5px; }
.clan-feed-copy strong { overflow: hidden; color: #e7f3f7; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.clan-feed-copy > span { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.game-emoji { display: inline-block; width: 1.2em; height: 1.2em; vertical-align: -0.2em; object-fit: contain; }
.game-currency-icon { width: 20px; height: 20px; vertical-align: -5px; object-fit: contain; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 36px 0 16px; }
.section-head h2 { font-size: 28px; line-height: 1; margin: 6px 0 0; letter-spacing: .03em; }
.section-head p { color: var(--muted); font-size: 12px; margin: 7px 0 0; }
.text-link { color: var(--cyan-bright); font-size: 11px; font-weight: 700; white-space: nowrap; }
.text-link:hover { color: white; }
.home-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(250px, .75fr); gap: 18px; }
.stack { display: grid; gap: 16px; align-content: start; }
.panel, .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.panel { padding: 20px; }
.news-list { display: grid; gap: 10px; }
.news-card { padding: 16px 17px; border: 1px solid #193342; border-radius: 9px; background: linear-gradient(110deg, #0e202c, #0b1720); }
.news-meta { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 10px; }
.news-author { color: var(--cyan-bright); font-weight: 700; }
.news-card h3 { font-size: 20px; letter-spacing: .02em; margin: 10px 0 6px; }
.news-content { font-size: 12px; color: #b5c3cb; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; max-height: 140px; overflow: hidden; }
.news-card .news-content { max-height: none; overflow: visible; }
.markdown-content strong { color: #f0f8fb; }
.markdown-content blockquote { margin: 7px 0; padding: 6px 12px; border-left: 3px solid #347994; color: #9cb2bd; background: #09151d; }
.markdown-content pre { overflow-x: auto; padding: 11px; border: 1px solid var(--line); border-radius: 6px; background: #050d12; white-space: pre; }
.markdown-content code { padding: 2px 5px; border-radius: 4px; background: #07131b; color: #a8e8ff; font-family: Consolas, monospace; }
.markdown-content pre code { padding: 0; background: transparent; }
.markdown-content a { color: var(--cyan-bright); text-decoration: underline; }
.discord-emoji { width: 1.35em; height: 1.35em; vertical-align: middle; object-fit: contain; }
.discord-spoiler { color: transparent; background: #40525d; border-radius: 3px; cursor: pointer; }
.discord-spoiler:hover { color: inherit; }
.discord-timestamp { color: #8bbbd0; }
.discord-mention { padding: 1px 4px; border-radius: 3px; background: #153346; color: #a4d8ed; }
.discord-heading { color: #e8f5fb; }
.discord-subtext { color: #8298a3; }
.news-field { display: grid; gap: 4px; margin-top: 9px; padding: 10px; border-left: 2px solid var(--cyan); background: #0a1821; font-size: 11px; }
.news-field strong { color: #dce8ed; }
.news-field span { color: #a9bbc4; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.side-card { padding: 19px; background: linear-gradient(145deg, #10232e, #0b1720 72%); }
.side-card h3 { font-size: 21px; margin: 7px 0; }
.side-card p { color: var(--muted); font-size: 11px; line-height: 1.6; margin-bottom: 14px; }
.osrs-news-card { padding: 16px; background: linear-gradient(145deg, #10232e, #0b1720 72%); }
.osrs-news-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.osrs-news-heading h3 { margin: 4px 0 0; color: var(--paper); font-size: 21px; }
.osrs-news-controls { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 9px; }
.osrs-news-controls button { width: 25px; height: 25px; border: 1px solid #294553; border-radius: 5px; background: #07131b; color: var(--cyan-bright); font-size: 19px; line-height: 1; cursor: pointer; }
.osrs-news-controls button:hover:not(:disabled) { border-color: var(--cyan); background: #102633; }
.osrs-news-controls button:disabled { opacity: .45; cursor: default; }
.osrs-news-slider { overflow: hidden; border: 1px solid #1b3542; border-radius: 7px; background: #09151d; }
.osrs-news-item { display: grid; gap: 8px; padding: 7px; color: var(--paper); }
.osrs-news-item:hover .osrs-news-copy strong { color: var(--cyan-bright); }
.osrs-news-image { display: block; width: 100%; aspect-ratio: 16 / 8; border-radius: 4px; background: #10212c; object-fit: cover; }
.osrs-news-image-fallback { display: grid; place-items: center; color: #91b0be; font: 700 15px "Barlow Condensed", sans-serif; }
.osrs-news-copy { display: grid; gap: 5px; padding: 0 3px 3px; }
.osrs-news-copy strong { display: -webkit-box; overflow: hidden; color: #e7f3f7; font-size: 11px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.osrs-news-copy small { color: var(--muted); font-size: 8px; }
.osrs-news-error { display: block; padding: 10px; font-size: 9px; line-height: 1.5; }
.side-icon { font-size: 24px; color: var(--cyan-bright); }
.side-link { display: flex; align-items: center; justify-content: space-between; padding: 12px 0 0; border-top: 1px solid var(--line); font-size: 11px; font-weight: 700; color: var(--cyan-bright); }
.event-item { padding: 13px 0; border-bottom: 1px solid var(--line); }
.event-item:last-child { border-bottom: 0; padding-bottom: 0; }
.event-item strong { display: block; font: 600 17px/1.2 "Barlow Condensed", sans-serif; text-transform: uppercase; }
.event-item span { color: var(--muted); font-size: 10px; }
.event-item .event-completed, .completed-event { color: #6f7e85; }
.completed-event { filter: grayscale(.85); opacity: .66; }
.event-status { margin-left: 10px; color: var(--cyan-bright); font: 600 10px "DM Sans", sans-serif; letter-spacing: .08em; }
.completed-event .event-status { color: #87959b; }
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; }
.feature-card { padding: 17px; min-height: 132px; display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(145deg, #0c1c27, #0b151d); border: 1px solid var(--line); border-radius: 10px; transition: border-color .2s, transform .2s; }
.feature-card:hover { border-color: #24708e; transform: translateY(-2px); }
.feature-card .feature-icon { color: var(--cyan); font-size: 20px; }
.feature-card strong { display: block; font: 600 19px/1 "Barlow Condensed", sans-serif; text-transform: uppercase; }
.feature-card span { display: block; color: var(--muted); font-size: 10px; margin-top: 6px; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 8px 0 24px; }
.page-heading h1 { font-size: clamp(38px, 5vw, 56px); margin: 7px 0 5px; line-height: .95; }
.page-heading p { color: var(--muted); font-size: 12px; margin: 0; }
.search-box { display: flex; align-items: center; gap: 10px; width: min(360px, 100%); padding: 0 13px; border: 1px solid #294553; background: #0b1720; border-radius: 7px; }
.search-box span { color: var(--cyan); font-size: 20px; }
.search-box input { width: 100%; height: 42px; border: 0; outline: 0; background: transparent; color: var(--paper); font-size: 12px; }
.table-wrap { overflow: auto; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel); }
table { border-collapse: collapse; width: 100%; min-width: 700px; }
th { padding: 13px 16px; background: #10212c; color: #8299a5; font-size: 9px; text-transform: uppercase; letter-spacing: .12em; text-align: left; }
.hiscore-sort-header { display: inline-flex; align-items: center; gap: 3px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-align: inherit; text-transform: inherit; white-space: nowrap; cursor: pointer; }
.hiscore-sort-header:hover, .hiscore-sort-header:focus-visible { color: var(--cyan-bright); }
.hiscore-sort-header span { color: var(--cyan); }
td { padding: 13px 16px; border-top: 1px solid #162d3a; color: #dce7ec; font-size: 12px; }
tbody tr:hover { background: #10212c; }
.rank-cell { font: 700 19px "Barlow Condensed", sans-serif; color: #99aeb8; }
.rank-top { color: var(--gold); }
.player-cell { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.player-cell img, .avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: #173344; }
.player-rsn { color: var(--cyan-bright); font-weight: 700; }
.muted { color: var(--muted); }
.badge { padding: 4px 7px; border-radius: 99px; color: var(--cyan-bright); border: 1px solid #25546a; background: #0b2735; font-size: 9px; font-weight: 700; }
.profile-hero { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; padding: 24px; border-radius: 14px; border: 1px solid #1e516a; background: radial-gradient(ellipse at 90% 10%, #12394b, transparent 45%), #0d1a24; }
.profile-avatar { width: 90px; height: 90px; border-radius: 12px; border: 2px solid #1c7699; object-fit: cover; }
.profile-title h1 { font-size: 36px; margin: 0 0 4px; }
.profile-title p { margin: 0; font-size: 12px; color: var(--muted); }
.profile-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 16px 0; }
.stat-box { padding: 15px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); }
.stat-box span { display: block; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }
.stat-box strong { display: block; margin-top: 8px; font: 700 24px/1 "Barlow Condensed", sans-serif; }
.skills-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.skill { display: flex; justify-content: space-between; padding: 10px; background: #0d1b25; border: 1px solid #1a3441; border-radius: 6px; font-size: 10px; }
.skill span { color: #8ea3ae; }
.profile-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 15px 0; }
.profile-hero-card { min-height: 356px; grid-template-columns: minmax(0, 1fr) 320px minmax(0, 1fr); gap: 16px; padding: 18px 24px; position: relative; overflow: hidden; background: radial-gradient(ellipse at 50% 65%, rgba(18,184,242,.16), transparent 38%), radial-gradient(ellipse at 92% 0%, #12394b, transparent 43%), #0d1a24; }
.profile-identity { min-width: 0; display: flex; align-items: center; gap: 14px; }
.profile-identity .profile-avatar { flex: 0 0 auto; }
.profile-identity .profile-title { min-width: 0; }
.profile-identity .profile-title h1 { overflow-wrap: anywhere; }
.profile-identity .profile-meta { margin: 10px 0 0; }
.role-count { color: #8bdfff; }
.profile-hero-model { height: 320px; min-width: 0; position: relative; display: grid; place-items: center; align-self: center; }
.profile-model-glow { position: absolute; inset: 8px; border-radius: 50%; background: radial-gradient(ellipse, rgba(22,150,194,.3), rgba(12,47,63,.1) 52%, transparent 72%); filter: blur(3px); }
.profile-hero-model img { z-index: 1; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease; }
.profile-hero-model img.loaded { opacity: 1; transform: translateY(0); }
.profile-model-status { position: absolute; z-index: 2; bottom: 2px; left: 0; right: 0; color: #8ccce0; font-size: 8px; text-align: center; }
.profile-model-status.unavailable { color: #efb07b; }
.profile-hero-summary { display: grid; align-content: center; gap: 14px; }
.profile-quick-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.profile-quick-stats > span { min-width: 0; padding: 8px 10px; border: 1px solid #203c4a; border-radius: 7px; background: #091720b8; }
.profile-quick-stats small, .profile-quick-stats strong { display: block; }
.profile-quick-stats small { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.profile-quick-stats strong { margin-top: 3px; overflow: hidden; font: 700 16px "Barlow Condensed", sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.profile-hero-summary .button { justify-self: start; }
.profile-tabs { display: flex; gap: 5px; margin: 21px 0 13px; padding: 5px; overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: #09141d; scrollbar-width: thin; }
.profile-tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 8px 12px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #91a6b1; cursor: pointer; font-size: 10px; font-weight: 700; white-space: nowrap; }
.profile-tab span { color: #72bed7; font-size: 14px; }
.profile-tab:hover { color: var(--paper); background: #10222d; }
.profile-tab.active { border-color: #20516a; background: #102b39; color: var(--cyan-bright); }
.profile-tab-panel[hidden] { display: none; }
.profile-tab-panel { min-height: 170px; }
.role-pill { padding: 5px 8px; color: #c4d2d8; border: 1px solid #294553; border-radius: 5px; font-size: 9px; }
.profile-updated { margin: 0 0 15px; color: var(--muted); font-size: 9px; }
.profile-skill-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.profile-skill-card { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px; border: 1px solid #1a3441; border-radius: 8px; background: linear-gradient(135deg, #0e1c26, #0a151d); }
.skill-emblem, .boss-emblem { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; border: 1px solid #25576d; border-radius: 7px; background: #102b39; color: #8bdfff; font: 700 9px "Barlow Condensed", sans-serif; }
.skill-emblem img { width: 26px; height: 26px; object-fit: contain; image-rendering: pixelated; }
.profile-skill-copy { min-width: 0; flex: 1; display: grid; gap: 3px; }
.profile-skill-copy strong, .profile-boss-card strong { overflow: hidden; color: #e5eef2; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.profile-skill-copy small, .profile-boss-card small { color: var(--muted); font-size: 8px; }
.profile-skill-card > b, .profile-boss-card > b { color: #d8e8ee; font: 700 16px "Barlow Condensed", sans-serif; }
.skill-progress, .collection-page i { height: 3px; display: block; overflow: hidden; border-radius: 5px; background: #1b303b; }
.skill-progress i, .collection-page u { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #0788b5, #51d7ff); }
.profile-boss-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.profile-boss-card { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 11px; border: 1px solid #1a3441; border-radius: 8px; background: #0d1b25; }
.profile-boss-card > div { min-width: 0; flex: 1; display: grid; gap: 4px; }
.boss-emblem { color: #d6b56d; border-color: #5b4b2d; background: #282317; font-size: 15px; }
.boss-emblem img { width: 29px; height: 29px; object-fit: contain; image-rendering: pixelated; }
.boss-emblem > span[hidden] { display: none; }
.collection-overview-collection, .collection-summary { padding: 17px; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(140deg, #0e1c26, #0b151d); }
.collection-overview-collection { margin-top: 16px; }
.collection-feed-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.collection-feed-heading > span { text-align: right; }
.collection-feed-heading > span #profile-icon-status { color: #82cbe4; font-size: 8px; }
.collection-feed-heading h3 { margin: 3px 0 0; font: 700 20px "Barlow Condensed", sans-serif; }
.collection-feed-heading > strong, .collection-feed-heading > span { color: #8bdfff; font-size: 10px; }
.profile-overview-collection > p { margin: -5px 0 12px; color: var(--muted); font-size: 10px; }
.collection-overview-items { display: flex; gap: 7px; overflow-x: auto; }
.collection-overview-item { width: 48px; height: 48px; flex: 0 0 auto; position: relative; display: grid; place-items: center; border: 1px solid #294756; border-radius: 7px; background: #10212b; }
.collection-overview-item img { width: 34px; height: 34px; object-fit: contain; image-rendering: pixelated; }
.collection-overview-item > span { position: absolute; z-index: 1; max-width: 100%; overflow: hidden; padding: 2px 3px; inset: auto 0 0; background: #061018dd; color: #b8c9d1; font-size: 6px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.collection-completion { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid #214554; border-radius: 8px; background: #0b202a; }
.collection-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: #12394a; color: #71d9ff; font-size: 18px; }
.collection-completion > div { flex: 1; display: grid; gap: 4px; }
.collection-completion small { color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .09em; }
.collection-completion strong { font: 700 21px "Barlow Condensed", sans-serif; }
.collection-completion strong span { color: var(--muted); font: 500 12px "DM Sans", sans-serif; }
.collection-completion > b { color: #8bdfff; font: 700 18px "Barlow Condensed", sans-serif; }
.collection-pages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0 19px; }
.collection-page { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; padding: 9px; border: 1px solid #1a3441; border-radius: 6px; background: #0a151d; }
.collection-page span { overflow: hidden; color: #cad8de; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.collection-page b { color: #8fa5af; font-size: 8px; }
.collection-page i { grid-column: 1 / -1; }
.collection-page u { background: #27b9eb; }
.collection-feed { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.collection-item { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 7px; border: 1px solid #1a3441; border-radius: 7px; background: #0a151d; }
.collection-item-icon { width: 38px; height: 38px; flex: 0 0 auto; position: relative; display: grid; place-items: center; border: 1px solid #294756; border-radius: 6px; background: #10212b; color: #8bdfff; font: 700 13px "Barlow Condensed", sans-serif; }
.collection-item-icon img { width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; }
.collection-item-copy { min-width: 0; flex: 1; display: grid; gap: 4px; }
.collection-item-copy strong { overflow: hidden; color: #e1ebef; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.collection-item-copy small { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.collection-item > b { color: #8bdfff; font: 700 12px "Barlow Condensed", sans-serif; }
.collection-external { display: inline-flex; margin-top: 14px; font-size: 10px; }
.profile-link-notice { margin: 14px 0; }
.profile-role-list { display: flex; flex-wrap: wrap; gap: 6px; }
.profile-activity-feed { display: grid; gap: 7px; }
.profile-activity-card { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px 11px; border: 1px solid #1a3441; border-radius: 8px; background: #0d1b25; }
.activity-emblem { width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; overflow: hidden; border: 1px solid #27516a; border-radius: 7px; background: #102a38; color: #82d9f7; font-size: 14px; }
.activity-emblem img { display: block; width: 20px; height: 20px; max-width: 20px; max-height: 20px; object-fit: contain; image-rendering: pixelated; }
.activity-emblem img[hidden], .activity-emblem > span[hidden] { display: none; }
.profile-activity-copy { min-width: 0; flex: 1; display: grid; gap: 4px; }
.profile-activity-copy strong { overflow: hidden; color: #e1ebef; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.profile-activity-copy small, .profile-activity-card time { color: var(--muted); font-size: 8px; }
.profile-activity-card time { flex: 0 0 auto; }
.notice { padding: 15px 17px; border: 1px solid #675635; background: #251f14; color: #e5cf9c; border-radius: 8px; font-size: 11px; line-height: 1.6; }
.notice.info { border-color: #235167; background: #0b2633; color: #a9dcec; }
.server-invite-actions { margin-top: 12px; }
.server-join-confirmation { margin: 0 0 14px; }
.server-join-confirmation > p { margin: 0; }
.server-join-confirmation-check { display: flex; align-items: flex-start; gap: 9px; margin-top: 12px; color: var(--paper); cursor: pointer; }
.server-join-confirmation-check input { margin-top: 2px; accent-color: var(--cyan); }
.content-list { display: grid; gap: 12px; }
.forum-card { padding: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.forum-card h3 { font-size: 22px; margin: 8px 0; }
.forum-card p { color: #b5c5cd; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; line-height: 1.7; margin-bottom: 10px; }
.forum-footer { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 10px; }
.forum-footer img { width: 23px; height: 23px; border-radius: 50%; }
.tag { border: 1px solid #31576a; color: #a9d9e8; background: #102d3b; padding: 3px 7px; border-radius: 4px; }
.form-card { max-width: 720px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.field { display: grid; gap: 7px; margin: 0 0 15px; }
.field label { color: #a5b8c2; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.field input, .field select { min-width: 0; height: 42px; padding: 0 12px; border: 1px solid #294553; border-radius: 6px; background: #07131b; color: var(--paper); }
.field-help { color: #80959f; font-size: 10px; line-height: 1.5; }
.commands-browser { display: grid; gap: 12px; }
.commands-toolbar { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(180px, .45fr) auto; align-items: end; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.commands-toolbar .field { min-width: 0; margin: 0; }
.commands-count { min-width: 120px; margin: 0 0 14px; color: var(--muted); font-size: 10px; text-align: right; }
.commands-permission-note { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.commands-list { display: grid; gap: 11px; }
.command-card { min-width: 0; padding: 17px; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(145deg, #0d1a24, #0a141c); }
.command-card[hidden] { display: none; }
.command-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.command-category, .command-kind { color: #7f98a4; font-size: 8px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.command-card h2 { margin: 4px 0 0; color: var(--paper); font: 700 24px/1.1 "Barlow Condensed", sans-serif; }
.command-kind { flex: 0 0 auto; padding: 5px 7px; border: 1px solid #25404e; border-radius: 4px; color: #a7c5d1; letter-spacing: .04em; }
.command-description, .command-details { margin: 10px 0 0; color: #b5c5cd; font-size: 11px; line-height: 1.65; overflow-wrap: anywhere; }
.command-details { color: var(--muted); }
.command-syntax, .command-aliases { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 12px; }
.command-syntax code, .command-aliases code, .command-parameters code { padding: 5px 7px; border: 1px solid #244354; border-radius: 5px; background: #091721; color: var(--cyan-bright); font: 10px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; }
.command-aliases strong { margin-right: 2px; color: #8299a5; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.command-parameters { display: grid; gap: 8px; margin: 13px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.command-parameters > div { display: grid; gap: 4px; }
.command-parameters dt { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.command-parameters dt span { color: var(--muted); font-size: 9px; }
.command-parameters dd { margin: 0; color: #81959f; font-size: 9px; line-height: 1.5; }
.whip-opponent-modes { display: flex; flex-wrap: wrap; gap: 8px; }
.action-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.form-message { min-height: 16px; color: var(--cyan-bright); font-size: 11px; margin-top: 10px; }
.form-message.error { color: var(--danger); }
.notification-settings { margin-top: 18px; }
.notification-preference { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 0; border-top: 1px solid var(--line); cursor: pointer; }
.notification-preference > span { display: grid; gap: 5px; }
.notification-preference strong { color: var(--paper); font-size: 12px; }
.notification-preference small { color: var(--muted); font-size: 10px; line-height: 1.5; }
.notification-preference input { width: 18px; height: 18px; accent-color: var(--cyan); flex: 0 0 auto; }
.notification-preference input:disabled { cursor: not-allowed; opacity: .45; }
.tracker-settings { margin-top: 18px; }
.tracker-create-price { display: flex; align-items: center; gap: 7px; }
.tracker-create-price input { flex: 1; width: 100%; }
.tracker-create-price > span { color: var(--muted); font-size: 10px; }
.tracker-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; width: 100%; min-width: 0; padding: 12px 0; border-bottom: 1px solid var(--line); }
.tracker-row:last-child { border-bottom: 0; }
.tracker-row strong { font-size: 12px; }
.tracker-row span { color: var(--muted); font-size: 10px; }
.tracker-item-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.tracker-item-heading > button { flex: 0 0 auto; padding: 7px 9px; font-size: 10px; }
.coffer-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.coffer-result { padding: 22px; border: 1px solid #214356; border-radius: 10px; background: radial-gradient(ellipse at 100% 0%, rgba(18,184,242,.12), transparent 45%), #091721; }
.coffer-result .profit { color: var(--cyan-bright); font: 700 36px/1 "Barlow Condensed", sans-serif; }
.coffer-result .loss { color: var(--danger); }
.coffer-item { color: var(--paper); }
.coffer-item:hover { border-color: #237597; background: #102633; }
.coffer-controls { display: grid; grid-template-columns: 1.1fr 1.3fr repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.coffer-controls .field { margin: 0; }
.coffer-controls input, .coffer-controls select { width: 100%; height: 40px; padding: 0 10px; border: 1px solid #294553; border-radius: 6px; background: #07131b; color: var(--paper); }
.field-label { color: #a5b8c2; font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.coffer-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 15px; }
.coffer-summary .stat-box { padding: 11px 13px; }
.coffer-summary .stat-box strong { font-size: 20px; }
.coffer-table { display: grid; max-height: 520px; overflow: auto; border: 1px solid var(--line); border-radius: 7px; }
.coffer-table-head, .coffer-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr; align-items: center; gap: 10px; padding: 10px; }
.coffer-table-head { position: sticky; top: 0; background: #10212c; color: #8299a5; text-transform: uppercase; font-size: 8px; letter-spacing: .08em; }
.coffer-sort-header { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-width: 0; padding: 3px; border: 0; border-radius: 4px; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; text-transform: inherit; cursor: pointer; }
.coffer-sort-header:hover, .coffer-sort-header.active { color: var(--cyan-bright); background: #17313d; }
.coffer-sort-header span { flex: none; font-size: 11px; }
.coffer-sort-group { display: flex; gap: 2px; min-width: 0; }
.coffer-sort-group .coffer-sort-header { flex: 1; }
.coffer-row { width: 100%; text-align: left; border: 0; border-top: 1px solid var(--line); background: var(--panel); color: var(--paper); cursor: pointer; font-size: 10px; }
.coffer-row:hover { background: #102633; }
.coffer-row strong, .coffer-row small { display: block; }
.coffer-row small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.coffer-item-icon { width: 20px; height: 20px; object-fit: contain; float: left; margin: 0 7px 5px 0; }
.coffer-quantity-control { display: flex; gap: 6px; }
.coffer-quantity-control input { min-width: 0; flex: 1; }
.member-autocomplete-field { position: relative; }
.member-autocomplete-results { position: absolute; z-index: 20; top: calc(100% - 1px); left: 0; right: 0; max-height: 260px; overflow-y: auto; border: 1px solid #294553; border-radius: 0 0 7px 7px; background: #07131b; box-shadow: 0 12px 28px rgba(0, 0, 0, .35); }
.member-autocomplete-option { display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: 3px; padding: 9px 11px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--paper); text-align: left; cursor: pointer; }
.member-autocomplete-option:hover { background: #102633; }
.member-autocomplete-option small, .beta-user-row small { color: var(--muted); font-size: 9px; }
.beta-user-list { display: grid; gap: 6px; }
.beta-user-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 7px; background: #09151d; }
.beta-user-row span, .beta-user-row strong, .beta-user-row small { display: block; }
.beta-user-row small { margin-top: 3px; }
.score-tabs { display: flex; gap: 8px; margin-bottom: 10px; }
.score-tabs .active { border-color: var(--cyan); color: var(--cyan-bright); background: #0b2735; }
.application-form { max-width: 820px; }
.application-form textarea { width: 100%; min-height: 78px; resize: vertical; padding: 10px 12px; border: 1px solid #294553; border-radius: 6px; background: #07131b; color: var(--paper); }
.application-form input[type="file"] { color: #a5b8c2; font-size: 11px; }
.application-example { display: block; width: min(100%, 560px); max-height: 320px; margin-top: 8px; object-fit: contain; object-position: left center; border: 1px solid var(--line); border-radius: 7px; }
.application-confirm { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; color: #a5b8c2; font-size: 11px; }
.application-confirm input { accent-color: var(--cyan); }
.coffer-note { color: var(--muted); font-size: 10px; line-height: 1.6; margin-top: 15px; }
.ocellus-layout { display: grid; gap: 14px; }
.ocellus-setup { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(250px, .7fr); gap: 14px; }
.ocellus-setup-card h2 { margin: 6px 0 7px; font: 600 23px/1.1 "Barlow Condensed", sans-serif; }
.ocellus-setup-card > p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.ocellus-first-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.ocellus-first-button { display: grid; gap: 5px; justify-items: start; padding: 11px; border: 1px solid var(--line); border-radius: 8px; background: #08141c; color: var(--muted); text-align: left; cursor: pointer; }
.ocellus-first-button strong { font: 700 24px/1 "Barlow Condensed", sans-serif; color: var(--paper); }
.ocellus-first-button > span { font-size: 9px; }
.ocellus-first-button[aria-pressed="true"] { border-color: var(--cyan); background: #102633; box-shadow: inset 0 0 0 1px #12b8f244; }
.ocellus-first-button.ocellus-sequence-a, .ocellus-route-card.ocellus-sequence-a { --ocellus-sequence: #f1d400; }
.ocellus-first-button.ocellus-sequence-b, .ocellus-route-card.ocellus-sequence-b { --ocellus-sequence: #43b8ec; }
.ocellus-first-button.ocellus-sequence-c, .ocellus-route-card.ocellus-sequence-c { --ocellus-sequence: #ed61bf; }
.ocellus-first-button[aria-pressed="true"] strong, .ocellus-route-card .ocellus-route-heading h2 { color: var(--ocellus-sequence, var(--paper)); }
.ocellus-quadrant-select { display: block; width: 100%; height: 40px; margin-top: 8px; padding: 0 10px; border: 1px solid #294553; border-radius: 6px; background: #07131b; color: var(--paper); }
.ocellus-setup-card .field { display: block; margin: 13px 0 0; color: #a5b8c2; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.ocellus-start-note { display: grid; gap: 4px; margin-top: 13px; padding: 10px; border-left: 2px solid var(--cyan); background: #091721; }
.ocellus-start-note strong { font-size: 10px; }
.ocellus-start-note span, .ocellus-evidence { color: #a9bbc4; font-size: 10px; line-height: 1.6; }
.ocellus-marker-details { position: relative; }
.ocellus-marker-details > summary { padding: 7px 9px; border: 1px solid #294553; border-radius: 6px; color: var(--cyan-bright); font-size: 9px; font-weight: 700; cursor: pointer; list-style: none; white-space: nowrap; }
.ocellus-marker-details > summary::-webkit-details-marker { display: none; }
.ocellus-marker-details > summary::marker { content: ""; }
.ocellus-marker-details > summary::after { content: "+"; margin-left: 7px; }
.ocellus-marker-details[open] > summary::after { content: "−"; }
.ocellus-marker-details[open] > summary { border-color: #37657a; border-radius: 6px 6px 0 0; }
.ocellus-marker-popover { position: absolute; z-index: 5; top: 100%; right: 0; display: grid; width: min(410px, calc(100vw - 48px)); gap: 7px; padding: 8px; border: 1px solid #37657a; border-top: 0; border-radius: 0 0 6px 6px; background: #0c1822; box-shadow: 0 12px 24px #0008; }
.ocellus-marker-popover textarea { width: 100%; height: 180px; resize: vertical; padding: 8px; border: 1px solid #294553; border-radius: 4px; background: #07131b; color: #c4d4dc; font: 9px/1.4 ui-monospace, "SFMono-Regular", Consolas, monospace; }
.ocellus-marker-popover .button { justify-self: end; }
.ocellus-route-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border: 1px solid #234354; border-radius: 8px; background: #0c1d27; }
.ocellus-route-summary > div:first-child { display: grid; gap: 4px; }
.ocellus-route-summary strong { color: var(--cyan-bright); font: 700 18px/1 "Barlow Condensed", sans-serif; }
.ocellus-route-summary span { color: var(--muted); font-size: 9px; }
.ocellus-route-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.ocellus-route-card { min-width: 0; padding: 14px; }
.ocellus-route-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ocellus-route-heading .eyebrow { margin: 0; }
.ocellus-route-heading h2 { margin: 5px 0 0; font: 700 22px/1 "Barlow Condensed", sans-serif; }
.ocellus-route-count { flex: 0 0 auto; color: var(--muted); font-size: 9px; }
.ocellus-map-help { min-height: 30px; margin: 8px 0 3px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.ocellus-map-wrap { display: grid; justify-items: center; }
.ocellus-map { display: block; width: min(100%, 328px); height: auto; }
.ocellus-tile { fill: #0b1922; stroke: #21343f; stroke-width: .7; }
.ocellus-tile-alt { fill: #10212b; }
.ocellus-axis-tile { fill: #b39c7b; stroke: #88765f; }
.ocellus-safe-area { fill: var(--ocellus-sequence, #12b8f2); fill-opacity: .28; stroke: var(--ocellus-sequence, #12b8f2); stroke-opacity: .75; stroke-width: 1.5; }
.ocellus-safe-area.is-current { fill-opacity: .75; stroke: #f4fbff; stroke-width: 2; }
.ocellus-safe-label { fill: #071018; font: 700 10px "DM Sans", sans-serif; pointer-events: none; }
.ocellus-center-marker { fill: #f1f7fa; stroke: #071018; stroke-width: 1.5; pointer-events: none; }
.ocellus-map-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; color: var(--muted); font-size: 8px; }
.ocellus-map-legend span { display: flex; align-items: center; gap: 5px; }
.ocellus-safe-key { display: inline-block; width: 11px; height: 11px; border: 1px solid #43b8ec; border-radius: 2px; background: #43b8ec66; }
.ocellus-volley-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 10px; }
.ocellus-volley-button { display: grid; gap: 3px; padding: 7px 4px; border: 1px solid var(--line); border-radius: 6px; background: #09151d; color: var(--muted); text-align: center; cursor: pointer; }
.ocellus-volley-button span { font-size: 8px; }
.ocellus-volley-button strong { color: var(--paper); font-size: 12px; }
.ocellus-volley-button[aria-pressed="true"] { border-color: var(--ocellus-sequence, var(--cyan)); background: #122936; }
.ocellus-volley-button[aria-pressed="true"] strong { color: var(--ocellus-sequence, var(--cyan-bright)); }
.ocellus-hazards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ocellus-hazards .panel { display: grid; gap: 4px; padding: 13px 15px; }
.ocellus-hazards strong { color: var(--gold); font-size: 10px; }
.ocellus-hazards span { color: var(--muted); font-size: 9px; line-height: 1.5; }
.tracker-item-link { min-width: 0; overflow-wrap: anywhere; color: var(--paper); font-size: 12px; font-weight: 700; }
.tracker-item-link:hover { color: var(--cyan-bright); text-decoration: underline; }
.tracker-item-info { display: flex; min-width: 0; align-items: center; gap: 8px; }
.tracker-item-icon { width: 32px; height: 32px; flex: 0 0 32px; object-fit: contain; }
.tracker-item-icon.ge-item-icon-fallback { display: grid; place-items: center; border: 1px solid var(--line); border-radius: 6px; color: var(--gold); }
.tracker-margin-control { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tracker-margin-control > label, .tracker-margin-control > div > span { color: var(--muted); font-size: 10px; }
.tracker-margin-control > div { display: flex; align-items: center; gap: 5px; min-width: 0; }
.tracker-margin-control input { width: 105px; min-width: 0; height: 30px; padding: 0 7px; border: 1px solid #294553; border-radius: 5px; background: #07131b; color: var(--paper); font-size: 10px; }
.tracker-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-width: 0; }
.tracker-meta span { overflow-wrap: anywhere; }
.ge-search-panel { margin-bottom: 16px; }
.ge-search-panel > .field { max-width: 620px; }
.ge-search-panel input { width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid #294553; border-radius: 6px; background: #07131b; color: var(--paper); }
.ge-search-results { margin-top: 15px; }
.ge-item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 9px; }
.ge-item-card { min-width: 0; display: flex; align-items: center; gap: 11px; padding: 11px; border: 1px solid var(--line); border-radius: 8px; background: #09151d; transition: border-color .15s ease, background .15s ease; }
.ge-item-card:hover { border-color: #237597; background: #102633; }
.ge-item-card > span:last-child { min-width: 0; display: grid; gap: 4px; }
.ge-item-card strong { overflow: hidden; color: var(--paper); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.ge-item-card small { color: var(--muted); font-size: 9px; }
.ge-item-icon { width: 38px; height: 38px; flex: 0 0 38px; object-fit: contain; }
.ge-item-icon-fallback { display: grid; place-items: center; border: 1px solid var(--line); border-radius: 6px; color: var(--gold); }
.ge-item-overview { display: grid; grid-template-columns: 64px minmax(0, 1fr) repeat(2, minmax(140px, auto)); align-items: center; gap: 18px; margin-bottom: 15px; padding: 18px; }
.ge-item-hero-icon { width: 60px; height: 60px; object-fit: contain; }
.ge-item-overview h2, .ge-chart-heading h2 { margin: 3px 0; font: 700 24px/1.1 "Barlow Condensed", sans-serif; }
.ge-item-overview p { margin: 5px 0 0; color: var(--muted); font-size: 9px; }
.ge-live-price { display: grid; gap: 5px; }
.ge-live-price span { color: var(--muted); font-size: 9px; text-transform: uppercase; }
.ge-live-price strong { color: var(--cyan-bright); font-size: 14px; }
.ge-item-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 15px; }
.ge-item-stats .stat-box { padding: 13px; }
.ge-item-stats .stat-box strong { font-size: 17px; }
.ge-item-stats .profit { color: var(--cyan-bright); }
.ge-item-stats .loss { color: var(--danger); }
.ge-chart-panel { padding: 18px; }
.ge-chart-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.ge-chart-heading .field { width: 170px; margin: 0; }
.ge-chart-heading select { width: 100%; min-height: 36px; padding: 6px 9px; border: 1px solid #294553; border-radius: 6px; background: #07131b; color: var(--paper); }
.ge-chart-ranges { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 5px; }
.ge-price-chart { min-height: 260px; overflow: hidden; }
.ge-chart-svg { display: block; width: 100%; min-height: 260px; }
.ge-chart-svg text { fill: #91a7b2; font: 10px "DM Sans", sans-serif; }
.ge-chart-grid { stroke: #1c3442; stroke-width: 1; }
.ge-chart-line { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.ge-chart-high { stroke: #41d1ff; }
.ge-chart-low { stroke: #e7bf72; }
.ge-chart-legend { display: flex; gap: 18px; justify-content: center; color: var(--muted); font-size: 9px; }
.ge-chart-legend span::before { display: inline-block; width: 12px; height: 2px; margin: 0 6px 3px 0; content: ""; background: currentColor; }
.ge-chart-legend-high { color: #41d1ff; }
.ge-chart-legend-low { color: #e7bf72; }
.maintenance { min-height: 240px; display: grid; place-items: center; text-align: center; padding: 25px; }
.fun-subnav { display: flex; flex-wrap: wrap; gap: 5px; }
.fun-subnav a { padding: 7px 10px; border: 1px solid #203b49; border-radius: 5px; color: #a8bdc7; font-size: 9px; font-weight: 700; }
.fun-subnav a:hover { border-color: var(--cyan); color: var(--cyan-bright); }
.fun-subnav a span { margin-right: 4px; }
.fun-wallet { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border: 1px solid #254252; border-radius: 9px; background: radial-gradient(ellipse at right, rgba(18,184,242,.13), transparent 45%), #0c1b25; }
.fun-wallet .eyebrow { margin-right: auto; }
.fun-wallet strong { font: 700 25px/1 "Barlow Condensed",sans-serif; color: var(--paper); white-space: nowrap; }
.fun-wallet strong small { font: 700 10px "DM Sans",sans-serif; color: var(--cyan-bright); }
.cpx-survey-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,360px),1fr)); gap: 12px; margin: 18px 0; }
.cpx-survey-card { position: relative; display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: start; gap: 12px; padding: 17px; overflow: hidden; border: 1px solid #254252; border-radius: 11px; background: linear-gradient(145deg,rgba(17,43,56,.96),rgba(8,21,30,.98)); transition: border-color .18s ease,transform .18s ease,box-shadow .18s ease; }
.cpx-survey-card:hover { transform: translateY(-2px); border-color: rgba(56,189,248,.52); box-shadow: 0 12px 28px rgba(0,0,0,.18); }
.cpx-survey-mark { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(56,189,248,.25); border-radius: 12px; color: var(--cyan-bright); background: radial-gradient(circle at 35% 25%,rgba(56,189,248,.2),rgba(10,27,38,.9)); font: 700 22px/1 "Barlow Condensed",sans-serif; }
.cpx-survey-info { display: grid; gap: 8px; min-width: 0; }
.cpx-survey-labels { display: flex; flex-wrap: wrap; gap: 5px; }
.cpx-survey-badge { padding: 3px 7px; border: 1px solid #294654; border-radius: 999px; color: #b7c9d1; background: rgba(7,19,27,.55); font-size: 9px; font-weight: 700; letter-spacing: .02em; }
.cpx-survey-badge.featured { border-color: rgba(250,204,21,.32); color: #f5d778; background: rgba(120,85,11,.14); }
.cpx-survey-info h3 { margin: 0; color: var(--paper); font-size: 14px; }
.cpx-survey-info p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.cpx-survey-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px; }
.cpx-survey-meta span { padding: 5px 8px; border: 1px solid #203a47; border-radius: 6px; color: #c4d3d9; background: rgba(6,17,24,.58); font-size: 10px; font-weight: 700; }
.cpx-survey-meta span:nth-child(2) { border-color: rgba(34,197,94,.22); color: #86e0ae; background: rgba(22,101,52,.12); }
.cpx-survey-meta span:nth-child(n+3) { color: #a8c5d1; }
.cpx-survey-card > .button { grid-column: 1 / -1; justify-content: center; width: 100%; gap: 7px; }
@media (max-width: 520px) {
  .cpx-survey-list { grid-template-columns: 1fr; }
}
.fun-item-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 12px; margin: 15px 0; }
.fun-item-card { display: grid; grid-template-columns: 76px minmax(0,1fr); gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: linear-gradient(145deg,#10232e,#0a151d); }
.fun-item-card .button { grid-column: 1 / -1; width: 100%; }
.fun-item-art { position: relative; display: grid; place-items: center; width: 76px; height: 76px; border: 1px solid #344c58; border-radius: 9px; background: radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--item-color,#38bdf8) 27%,transparent),#0a151d 72%); }
.fun-item-art img, .fun-item-art > span { grid-area: 1 / 1; }
.fun-item-art img { z-index: 1; max-width: 64px; max-height: 64px; object-fit: contain; }
.fun-item-art > span { color: var(--item-color,var(--cyan-bright)); font: 800 30px "Barlow Condensed",sans-serif; }
.fun-item-info { min-width: 0; }
.fun-item-info h3 { margin: 5px 0; font-size: 18px; line-height: 1.05; }
.fun-item-info p { margin: 0; color: var(--gold); font-size: 11px; font-weight: 700; }
.fun-item-info small { display: block; margin-top: 5px; color: var(--muted); font-size: 9px; }
.fun-item-info .eyebrow { font-size: 8px; }
.fun-item-card button:disabled { cursor: not-allowed; opacity: .48; transform: none; }
.bank-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 15px; }
.bank-member-select { display: grid; min-width: min(280px,50%); gap: 5px; margin: 0; }
.bank-member-select select { height: 40px; padding: 0 10px; border: 1px solid #294553; border-radius: 6px; background: #07131b; color: var(--paper); }
.bank-item-grid { grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); }
.bank-item-card { grid-template-columns: 66px minmax(0,1fr); padding: 10px; }
.bank-item-card .fun-item-art { width: 66px; height: 66px; }
.trade-compose { padding: 17px; }
.trade-offer-panes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 12px 0; }
.trade-offer-side { min-width: 0; padding: 13px; border: 1px solid #254252; border-radius: 8px; background: #091720; }
.trade-offer-side > header { display: grid; gap: 6px; min-height: 42px; padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.trade-offer-side > header strong { font-size: 11px; }
.trade-coin-field { margin: 10px 0; }
.trade-coin-field input, .trade-inventory-row input { width: 100%; min-width: 0; padding: 7px; border: 1px solid #294553; border-radius: 5px; background: #07131b; color: var(--paper); font-size: 10px; }
.trade-inventory-list { display: grid; gap: 5px; }
.trade-inventory-row { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 7px; border: 1px solid #1c3442; border-radius: 6px; background: #0c1b25; cursor: pointer; }
.trade-inventory-row > span { display: flex; align-items: center; min-width: 0; gap: 8px; font-size: 9px; font-weight: 700; }
.trade-inventory-row img { width: 28px; height: 28px; flex: 0 0 auto; object-fit: contain; }
.trade-inventory-row > span > span { min-width: 0; }
.trade-inventory-row small { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; font-weight: 500; }
.trade-inventory-row input { width: 62px; }
.trade-nothing { margin: 0; color: var(--muted); font-size: 9px; }
.trade-select-prompt { grid-column: 1 / -1; border: 1px solid var(--line); border-radius: 8px; }
.trade-list-section { margin-top: 28px; }
.trade-list { display: grid; gap: 10px; }
.trade-card { padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: linear-gradient(145deg,#10232e,#0a151d); }
.trade-card-incoming { border-color: #426c7a; }
.trade-card > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.trade-card h3 { margin: 4px 0 0; font-size: 18px; }
.trade-card time { color: var(--muted); font-size: 8px; }
.trade-sides { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 10px; margin-top: 12px; padding: 10px; border: 1px solid #1c3442; border-radius: 7px; background: #09151d; }
.trade-sides > div { min-width: 0; }
.trade-sides small { display: block; margin-bottom: 6px; color: var(--muted); font-size: 8px; }
.trade-sides > div > div { display: flex; flex-wrap: wrap; gap: 5px; }
.trade-sides > div > div > span { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; border: 1px solid #294553; border-radius: 4px; color: var(--paper); font-size: 9px; }
.trade-sides .trade-nothing { border: 0; padding: 0; color: var(--muted); }
.trade-arrow { color: var(--cyan-bright); font-size: 18px; }
.trade-card footer { display: flex; gap: 8px; margin-top: 10px; }
.whip-arena-layout { display: grid; grid-template-columns: minmax(250px,.72fr) minmax(0,1.28fr); gap: 16px; align-items: start; }
.whip-arena-layout .game-emoji { width: 1.45em; height: 1.45em; vertical-align: -0.3em; }
.whip-create-card { padding: 19px; }
.whip-create-card h2 { margin: 7px 0 4px; font-size: 27px; }
.whip-wallet-line { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0 13px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.whip-wallet-line strong { color: var(--cyan-bright); }
.whip-create-card .form-card { padding: 15px 0 0; border: 0; background: transparent; }
.whip-house { display: grid; gap: 5px; margin-top: 16px; padding: 12px; border: 1px solid #254252; border-radius: 7px; background: #0a1821; }
.whip-house strong { font-size: 12px; }
.whip-house small { color: var(--muted); font-size: 9px; }
.whip-board .section-head { margin-top: 0; }
.whip-challenge-list { display: grid; gap: 10px; }
.whip-challenge-card { padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: linear-gradient(145deg,#10232e,#0a151d); }
.whip-challenge-card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.whip-challenge-card > header h3 { margin: 4px 0 0; font-size: 18px; }
.whip-challenge-card > header > strong { color: var(--gold); font-size: 14px; white-space: nowrap; }
.whip-challenge-card > header > strong small { color: var(--muted); font-size: 8px; }
.whip-challenge-card footer { display: flex; gap: 8px; margin-top: 10px; }
.whip-fighters { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin-top: 12px; }
.whip-fighter { min-width: 0; padding: 10px; border: 1px solid #1a3441; border-radius: 7px; background: #09151d; }
.whip-fighter-head { display: flex; justify-content: space-between; gap: 8px; font-size: 9px; }
.whip-fighter-head span { color: var(--muted); white-space: nowrap; }
.whip-health { height: 7px; margin: 7px 0; overflow: hidden; border-radius: 6px; background: #3b2526; }
.whip-health i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#39c779,#b9e05e); transition: width .25s ease; }
.whip-log { height: 104px; overflow: auto; color: #a7bbc4; font-size: 8px; line-height: 1.45; }
.whip-log p { margin: 0 0 3px; }
.whip-result { margin: 11px 0 0; color: var(--cyan-bright); font-size: 11px; }
.whip-challenge-complete { border-color: #30634e; }
.whip-history { display: grid; gap: 0; padding: 0 12px; }
.whip-history > div { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: 8px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 10px; }
.whip-history > div:last-child { border-bottom: 0; }
.whip-history small { color: var(--muted); text-align: right; }
.whip-outcome { font-size: 9px; font-weight: 800; text-transform: uppercase; }
.whip-outcome.won { color: #77dfa6; }
.whip-outcome.lost { color: #d58d8d; }
.maintenance-icon { font-size: 35px; }
.maintenance h2 { font-size: 32px; margin: 12px 0 5px; }
.maintenance p { color: var(--muted); font-size: 12px; }
.donate-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 760px; }
.donate-card { padding: 23px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(140deg, #10232e, #0a151d); }
.donate-surveys { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-color: rgba(56,189,248,.32); background: radial-gradient(ellipse at right,rgba(18,184,242,.12),transparent 55%),linear-gradient(140deg,#10232e,#0a151d); }
.donate-surveys p { max-width: 520px; }
.donate-surveys .button { flex: 0 0 auto; }
.donate-card h2 { font-size: 25px; margin: 8px 0; }
.donate-card p { min-height: 34px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.donation-modal { width: min(440px, calc(100% - 28px)); max-width: none; padding: 22px; border: 1px solid #31576a; border-radius: 12px; background: #0a151d; color: var(--paper); box-shadow: 0 24px 80px rgba(0,0,0,.65); }
.donation-modal::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(3px); }
.donation-modal-header { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.donation-modal-header h2 { margin: 7px 0 14px; font-size: 25px; }
.donation-modal-close { min-width: 38px; padding: 6px 10px; font-size: 20px; }
.donation-modal > form > p:not(.field-help, .form-message) { margin: 0 0 17px; color: #b5c5cd; font-size: 11px; line-height: 1.6; }
.donation-modal .field { margin-bottom: 9px; }
.site-ticket-list { display: grid; gap: 14px; margin-top: 16px; }
.site-xp-summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 16px; padding: 15px 18px; border: 1px solid #285264; border-radius: 10px; background: #0d202a; }
.site-xp-summary > div:first-child { display: grid; gap: 5px; }
.site-xp-summary strong { color: var(--paper); font-size: 12px; }
.site-xp-summary small { color: var(--muted); font-size: 9px; }
.site-xp-progress { width: min(220px, 35%); height: 7px; overflow: hidden; border-radius: 8px; background: #1a303b; }
.site-xp-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--cyan-bright)); }
.site-ticket-card { padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(140deg, #10232e, #0a151d); }
.site-ticket-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.site-ticket-heading h2 { margin: 6px 0; font-size: 20px; }
.site-ticket-heading p { margin: 0; color: var(--muted); font-size: 10px; }
.site-ticket-status { padding: 5px 9px; border-radius: 12px; color: #8c9ca4; background: #18262d; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.site-ticket-status.open { color: #7de0ad; background: #12372b; }
.site-ticket-messages { display: grid; gap: 10px; margin: 18px 0; }
.site-ticket-message { padding: 12px; border: 1px solid #213844; border-radius: 8px; background: #09141b; }
.site-ticket-message.staff { border-color: #24576c; background: #0d202a; }
.site-ticket-message > div { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; color: #a9bbc4; font-size: 9px; }
.site-ticket-message > div span { color: var(--cyan-bright); }
.site-ticket-message time { margin-left: auto; color: #708692; }
.site-ticket-message p { margin: 9px 0 0; color: #d3e0e5; font-size: 11px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.site-ticket-reply { padding-top: 12px; border-top: 1px solid var(--line); }
.live-clan-chat-card { display: grid; gap: 10px; padding: 14px; }
.live-clan-chat-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.live-clan-chat-heading h3 { margin: 4px 0 0; font-size: 16px; }
.live-clan-chat { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 230px; max-height: 360px; overflow: hidden; border: 1px solid #314839; border-radius: 8px; background: #111a11; font-family: "DM Sans", sans-serif; }
.site-ticket-reply textarea { display: block; width: 100%; padding: 10px; border: 1px solid #294553; border-radius: 7px; background: #071018; color: var(--paper); resize: vertical; }
.empty-state, .loading-state { padding: 35px 18px; text-align: center; color: var(--muted); font-size: 12px; }
.error-state { padding: 15px; border: 1px solid #653f3f; background: #211619; color: #ffaaa5; border-radius: 8px; font-size: 11px; }
.spinner { width: 14px; height: 14px; border: 2px solid #294553; border-top-color: var(--cyan); border-radius: 50%; display: inline-block; animation: spin .8s linear infinite; vertical-align: -2px; margin-right: 8px; }
@keyframes spin { to { transform: rotate(360deg); } }
.site-footer { min-height: 68px; border-top: 1px solid var(--line); padding: 17px max(24px, calc((100vw - 1240px) / 2)); display: flex; align-items: center; gap: 18px; color: #718690; font-size: 10px; }
.site-footer > span { margin-left: auto; }
.site-footer a:last-child { color: #a8c9d5; }
.footer-brand { display: flex; align-items: center; gap: 7px; color: #cad8de; font-size: 9px; font-weight: 800; letter-spacing: .09em; }
.footer-brand img { width: 27px; height: 27px; object-fit: contain; }
.toast { position: fixed; right: 20px; bottom: 20px; max-width: min(420px, calc(100vw - 40px)); padding: 12px 16px; background: #102d3b; border: 1px solid #26708e; border-radius: 8px; color: #dff8ff; font-size: 11px; box-shadow: 0 15px 45px #0008; opacity: 0; transform: translateY(10px); pointer-events: none; transition: .2s ease; z-index: 50; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { border-color: #855454; background: #321d21; }

.staff-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; align-items: start; }
.staff-sidebar { position: sticky; top: 98px; padding: 18px 12px 12px; }
.staff-sidebar h2 { font-size: 22px; margin: 8px 8px 18px; text-transform: capitalize; }
.staff-nav { display: grid; gap: 4px; }
.staff-nav-group { display: grid; gap: 3px; }
.staff-nav-item { width: 100%; padding: 10px 11px; display: flex; align-items: center; gap: 11px; border: 1px solid transparent; border-radius: 6px; text-align: left; background: transparent; color: #9eb2bc; font-size: 11px; cursor: pointer; }
.staff-nav-item > span { width: 18px; color: #83a0ad; text-align: center; font-size: 15px; }
.staff-nav-item:hover, .staff-nav-item.active { border-color: #204356; background: #0d2532; color: #eaf7fb; }
.staff-nav-item.active > span { color: var(--cyan-bright); }
.staff-statistics-toggle { justify-content: flex-start; }
.staff-nav-chevron { width: auto !important; margin-left: auto; transition: transform .18s ease; }
.staff-statistics-toggle.expanded .staff-nav-chevron { transform: rotate(180deg); }
.staff-subnav { display: grid; gap: 2px; margin: 0 0 3px 14px; padding-left: 9px; border-left: 1px solid #254452; }
.staff-subnav[hidden] { display: none; }
.staff-subnav-item { padding: 8px 10px; font-size: 10px; }
.staff-subnav-item.active { border-color: #204356; background: #0d2532; color: #eaf7fb; }
.staff-sidebar-footer { display: flex; align-items: center; gap: 8px; margin: 22px 7px 0; padding-top: 13px; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; }
.presence-dot { width: 7px; height: 7px; border-radius: 50%; background: #43d49b; box-shadow: 0 0 9px #43d49b88; }
.staff-workspace { min-width: 0; }
.staff-view { min-height: 400px; }
.staff-section-head { display: flex; justify-content: space-between; align-items: end; gap: 12px; margin: 2px 0 18px; }
.staff-section-head h2 { margin: 6px 0 0; font-size: 30px; letter-spacing: .02em; }
.staff-section-head p { margin: 7px 0 0; color: var(--muted); font-size: 11px; }
.staff-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.staff-stat-grid-secondary { margin-top: 12px; }
.staff-stat-card, .staff-info-card { padding: 17px; border: 1px solid var(--line); border-radius: 9px; background: linear-gradient(145deg,#10232e,#0a151d); }
.staff-stat-card > span, .staff-stat-card small { display: block; color: var(--muted); font-size: 9px; }
.staff-stat-card strong { display: block; margin: 12px 0 5px; font: 700 28px/1 "Barlow Condensed",sans-serif; }
.staff-info-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 14px; }
.staff-info-card h3 { margin: 8px 0 6px; font-size: 19px; text-transform: capitalize; }
.staff-info-card p { margin: 0; color: #9fb2bc; font-size: 11px; line-height: 1.6; }
.staff-overview-toolbar { justify-content: flex-end; }
.staff-overview-toolbar .form-message { margin-right: auto; }
.staff-analytics { margin-top: 26px; }
.staff-traffic-card { margin-top: 12px; }
.staff-traffic-chart { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 12px; margin-top: 15px; }
.staff-traffic-day { display: grid; grid-template-rows: auto 76px auto; gap: 6px; min-width: 0; text-align: center; }
.staff-traffic-day strong { color: #d3e7ed; font-size: 10px; }
.staff-traffic-day small { color: var(--muted); font-size: 9px; }
.staff-traffic-bar { display: flex; align-items: flex-end; overflow: hidden; border: 1px solid #1c3440; border-radius: 5px; background: #08141c; }
.staff-traffic-bar i { display: block; width: 100%; min-height: 2px; border-radius: 4px 4px 0 0; background: linear-gradient(0deg,#1486a0,#63d7e9); }
.staff-quick-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: #0b1821; }
.staff-quick-actions > div { margin-right: auto; }
.staff-quick-actions h3 { margin: 4px 12px 0 0; font-size: 16px; }
.staff-quick-actions .button { font-size: 10px; }
.staff-toolbar { display: flex; align-items: center; gap: 10px; margin: 12px 0; }
.staff-toolbar input { flex: 1; min-width: 0; }
.announcement-composer { max-width: 900px; }
.announcement-mention-panel, .announcement-preview-wrap { margin-bottom: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #091721; }
.announcement-panel-summary, .announcement-advanced-editor > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #cce6ef; font-size: 11px; font-weight: 700; cursor: pointer; }
.announcement-panel-summary > span { color: var(--muted); font-size: 9px; font-weight: 400; text-align: right; }
.announcement-mention-panel[open] .announcement-panel-summary { margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.announcement-advanced-editor { margin: 14px 0; border: 1px solid var(--line); border-radius: 8px; background: #091721; }
.announcement-advanced-editor > summary { padding: 12px 14px; }
.announcement-advanced-fields { display: grid; gap: 12px; padding: 0 14px 14px; }
.announcement-advanced-fields > .field, .announcement-advanced-fields .announcement-timestamp-tools { margin: 0; }
.announcement-template-tools { display: flex; align-items: end; gap: 9px; flex-wrap: wrap; margin-bottom: 12px; }
.announcement-template-tools .field { flex: 1 1 200px; min-width: 0; margin: 0; }
.announcement-template-tools select, .announcement-template-tools input { width: 100%; min-width: 0; height: 38px; padding: 0 10px; border: 1px solid #294553; border-radius: 6px; background: #07131b; color: var(--paper); }
.announcement-template-tools > .field-help { padding-bottom: 10px; }
.staff-owner-form { max-width: 900px; margin-top: 14px; }
.staff-owner-form h3 { margin: 5px 0; font-size: 18px; }
.staff-owner-form > div:first-child .field-help { margin: 5px 0 0; line-height: 1.5; }
.staff-owner-form > form { display: grid; gap: 12px; }
.staff-owner-form > form .field { margin: 0; }
.staff-owner-form > form textarea { width: 100%; padding: 9px 10px; border: 1px solid #294553; border-radius: 6px; background: #07131b; color: var(--paper); }
.announcement-mention-heading, .announcement-mention-tools, .announcement-role-select, .announcement-quick-mentions, .announcement-timestamp-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.announcement-mention-heading { justify-content: space-between; margin-bottom: 12px; }
.announcement-mention-heading strong, .announcement-role-picker > label, .announcement-timestamp-tools > label { color: var(--paper); font-size: 11px; font-weight: 700; }
.announcement-mention-heading > span, .announcement-everyone-toggle small { color: var(--muted); font-size: 9px; }
.announcement-mention-tools { justify-content: space-between; align-items: stretch; }
.announcement-everyone-toggle { display: flex; align-items: center; gap: 9px; min-width: 220px; }
.announcement-everyone-toggle input { width: 17px; height: 17px; accent-color: var(--cyan); }
.announcement-everyone-toggle > span { display: grid; gap: 4px; }
.announcement-everyone-toggle strong { color: #dbe8ed; font-size: 10px; }
.announcement-role-picker { display: grid; flex: 1; gap: 6px; min-width: 230px; }
.announcement-role-select select, .announcement-timestamp-tools select, .announcement-timestamp-tools input { min-width: 0; height: 38px; padding: 0 9px; border: 1px solid #294553; border-radius: 6px; background: #07131b; color: var(--paper); }
.announcement-role-select select { flex: 1; }
.announcement-role-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.announcement-role-button { padding: 5px 9px; font-size: 9px; }
.announcement-user-picker { display: grid; position: relative; gap: 6px; margin-top: 14px; }
.announcement-user-picker > label { color: var(--paper); font-size: 10px; font-weight: 700; }
.announcement-user-picker > input { width: 100%; height: 38px; padding: 0 10px; border: 1px solid #294553; border-radius: 6px; background: #07131b; color: var(--paper); }
.announcement-user-results { position: absolute; z-index: 2; top: 62px; left: 0; right: 0; display: grid; max-height: 220px; overflow-y: auto; padding: 5px; border: 1px solid #31576a; border-radius: 7px; background: #0a151d; box-shadow: 0 12px 30px rgba(0,0,0,.45); }
.announcement-user-results[hidden] { display: none; }
.announcement-user-result { padding: 8px; border: 0; border-radius: 4px; background: transparent; color: #dce9ee; text-align: left; cursor: pointer; }
.announcement-user-result:hover, .announcement-user-result:focus { background: #143242; outline: none; }
.announcement-selected-mentions { display: flex; flex-wrap: wrap; gap: 5px; }
.announcement-selected-mention { padding: 4px 8px; border: 1px solid #31576a; border-radius: 12px; background: #102d3b; color: #a9d9e8; font-size: 9px; cursor: pointer; }
.announcement-quick-mentions { margin-top: 10px; }
.announcement-quick-mentions button { border: 0; background: none; font: inherit; cursor: pointer; }
.announcement-quick-mentions button:disabled { opacity: .45; cursor: not-allowed; }
.announcement-toolbar { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 7px; }
.announcement-toolbar button { min-height: 31px; padding: 4px 9px; border: 1px solid #294553; border-radius: 5px; background: #0c202b; color: #cfe0e7; font-size: 10px; cursor: pointer; }
.announcement-toolbar button:hover { border-color: var(--cyan); color: #fff; }
.announcement-composer textarea { width: 100%; min-height: 180px; resize: vertical; padding: 12px; border: 1px solid #294553; border-radius: 6px; background: #07131b; color: var(--paper); font: inherit; font-size: 12px; line-height: 1.6; }
.announcement-embed-editor { margin: 14px 0; border: 1px solid var(--line); border-radius: 8px; background: #091721; }
.announcement-embed-editor > summary { padding: 12px 14px; color: #cce6ef; font-size: 11px; font-weight: 700; cursor: pointer; }
.announcement-embed-fields { padding: 0 14px 14px; }
.announcement-embed-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.announcement-embed-fields .field { margin-bottom: 10px; }
.announcement-embed-fields input:not([type="checkbox"]):not([type="color"]), .announcement-embed-fields textarea { width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid #294553; border-radius: 6px; background: #07131b; color: var(--paper); font: inherit; font-size: 11px; }
.announcement-embed-fields input:not([type="checkbox"]):not([type="color"]) { height: 38px; }
.announcement-embed-fields input[type="color"] { width: 45px; height: 38px; padding: 3px; border: 1px solid #294553; border-radius: 6px; background: #07131b; }
.announcement-embed-fields .field > span, .announcement-embed-field .field > span { color: var(--muted); font-size: 9px; }
.announcement-embed-fields textarea { resize: vertical; }
.announcement-embed-fields > .announcement-everyone-toggle { margin: 7px 0 13px; }
.announcement-embed-fields .announcement-everyone-toggle > span { color: var(--muted); font-size: 9px; }
.announcement-embed-fields .announcement-everyone-toggle strong { color: #dbe8ed; }
.announcement-embed-fields .announcement-everyone-toggle input { width: 16px; height: 16px; accent-color: var(--cyan); }
.announcement-embed-fields > .field { display: grid; }
.announcement-embed-fields > .field span { color: var(--muted); font-size: 9px; }
.announcement-embed-fields-head { display: flex; align-items: center; justify-content: space-between; margin: 7px 0; color: var(--paper); font-size: 10px; }
.announcement-embed-field { display: grid; grid-template-columns: 1fr 1.5fr auto auto; align-items: end; gap: 9px; padding: 10px; margin: 8px 0; border: 1px solid var(--line); border-radius: 7px; }
.announcement-embed-field .field { margin: 0; }
.announcement-embed-field textarea { min-height: 38px; }
.announcement-inline-toggle { display: flex; align-items: center; gap: 5px; padding-bottom: 11px; color: var(--muted); font-size: 9px; white-space: nowrap; }
.announcement-inline-toggle input { accent-color: var(--cyan); }
.announcement-timestamp-tools { margin: 0 0 15px; }
.announcement-timestamp-tools > label { flex-basis: 100%; }
.announcement-preview-label { margin-bottom: 8px; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.announcement-preview { min-height: 40px; overflow-wrap: anywhere; font-size: 12px; line-height: 1.6; }
.announcement-preview:empty { min-height: 0; }
.announcement-preview-content { padding: 2px 0 8px; overflow-wrap: anywhere; }
.announcement-preview-embed { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; max-width: 680px; margin: 7px 0; padding: 12px; border-left: 4px solid var(--announcement-embed-color); border-radius: 4px; background: #202225; color: #dbdee1; }
.announcement-embed-main { min-width: 0; }
.announcement-embed-author, .announcement-embed-footer { display: flex; align-items: center; gap: 7px; color: #b5bac1; font-size: 10px; }
.announcement-embed-author { margin-bottom: 7px; font-weight: 600; }
.announcement-embed-author img, .announcement-embed-footer img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.announcement-embed-author a, .announcement-embed-title a { color: #00a8fc; text-decoration: none; }
.announcement-embed-title { margin-bottom: 6px; color: #f2f3f5; font-size: 13px; font-weight: 700; }
.announcement-embed-description { white-space: pre-wrap; }
.announcement-embed-field-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.announcement-preview-field { display: grid; gap: 4px; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.announcement-preview-field.inline { grid-column: auto; }
.announcement-preview-field:not(.inline) { grid-column: 1 / -1; }
.announcement-preview-field > strong { color: #f2f3f5; font-size: 10px; }
.announcement-embed-thumbnail { width: 80px; height: 80px; border-radius: 4px; object-fit: cover; }
.announcement-embed-image { grid-column: 1 / -1; display: block; width: min(100%, 520px); max-height: 340px; border-radius: 4px; object-fit: contain; object-position: left; }
.announcement-embed-footer { margin-top: 10px; font-size: 9px; }
.announcement-preview-attachments { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.announcement-preview-attachments img { max-width: min(100%, 340px); max-height: 300px; border-radius: 5px; object-fit: contain; object-position: left; }
.announcement-image-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.announcement-image-chip { display: flex; align-items: center; gap: 7px; max-width: 260px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; color: #cbd8de; font-size: 9px; }
.announcement-image-chip img { width: 28px; height: 28px; border-radius: 4px; object-fit: cover; }
.announcement-image-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.announcement-image-chip button { border: 0; background: none; color: var(--muted); font-size: 15px; cursor: pointer; }
.staff-member-list, .staff-card-list, .staff-audit-list { display: grid; gap: 8px; margin-bottom: 12px; }
.staff-member-row { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 8px; background: #0b1821; }
.staff-member-row > img, .staff-application-card header img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.staff-member-main { flex: 1; min-width: 0; }
.staff-member-main > strong, .staff-member-main > small { display: block; }
.staff-member-main > strong { font-size: 11px; }
.staff-member-main > small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.staff-member-actions { display: flex; align-items: center; gap: 3px; }
.staff-role-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.staff-role-list span { padding: 2px 5px; border: 1px solid #294655; border-radius: 4px; color: #a9c9d6; font-size: 8px; }
.staff-application-card { padding: 15px; border: 1px solid var(--line); border-radius: 9px; background: #0b1821; }
.staff-application-card > header, .staff-application-card > header > div { display: flex; align-items: center; gap: 10px; }
.staff-application-card > header { justify-content: space-between; }
.staff-application-card > header span strong, .staff-application-card > header span small { display: block; }
.staff-application-card > header span strong { font-size: 11px; }
.staff-application-card > header span small { color: var(--muted); font-size: 9px; margin-top: 4px; }
.staff-application-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 13px 0; }
.staff-application-fields section { padding: 9px; border-radius: 5px; background: #09131a; }
.staff-application-fields section strong { color: #c8e4ee; font-size: 9px; }
.staff-application-fields section p { margin: 5px 0 0; color: #9eb1ba; font-size: 10px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.staff-reject-reason { margin-top: 12px; }
.staff-application-card footer { display: flex; gap: 8px; margin-top: 10px; }
.staff-form { display: grid; gap: 12px; max-width: 680px; }
.staff-form .field { margin: 0; }
.staff-form button { justify-self: start; }
.staff-wom-grid { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); gap: 12px; }
.staff-wom-grid > section { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: #0b1821; }
.staff-wom-grid h3 { display: flex; justify-content: space-between; gap: 8px; font-size: 17px; }
.staff-wom-grid h3 span { color: var(--muted); font: 500 9px "DM Sans",sans-serif; }
.staff-wom-list { display: grid; gap: 4px; max-height: 510px; overflow: auto; }
.staff-wom-list > div, .staff-wom-list > a { display: grid; grid-template-columns: auto minmax(80px,1fr) auto auto; align-items: center; gap: 8px; padding: 8px 6px; border-bottom: 1px solid #172a35; font-size: 9px; }
.staff-wom-list > a { grid-template-columns: 1fr; }
.staff-wom-list > div > span:last-child, .staff-wom-list > div > span:nth-last-child(2), .staff-wom-list > a > span { color: var(--muted); }
.staff-audit-row { padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #0b1821; }
.staff-audit-row > div:first-child { display: flex; justify-content: space-between; gap: 10px; font-size: 10px; }
.staff-audit-row time { color: var(--muted); font-size: 9px; }
.staff-audit-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2px 12px; margin-top: 7px; }
.staff-audit-fields p { margin: 3px 0; color: #aebfc7; font-size: 9px; overflow-wrap: anywhere; }
.staff-audit-fields p strong { color: #d8e7ec; }

@media (max-width: 960px) {
  .site-header { gap: 18px; }
  .brand { min-width: auto; }
  .main-nav { gap: 15px; }
  .main-nav > a, .nav-dropdown > summary { font-size: 11px; }
  .hero { padding: 32px; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .profile-skill-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coffer-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ocellus-route-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .commands-toolbar { grid-template-columns: 1fr; gap: 12px; }
  .commands-count { min-width: 0; margin: 0; text-align: left; }
  .announcement-embed-grid { grid-template-columns: 1fr; }
  .announcement-embed-field { grid-template-columns: 1fr 1fr; }
  .announcement-inline-toggle { padding-bottom: 0; }
  .announcement-preview-embed { grid-template-columns: minmax(0, 1fr) 60px; gap: 8px; padding: 9px; }
  .announcement-embed-thumbnail { width: 60px; height: 60px; }
  .announcement-embed-field-list { grid-template-columns: 1fr; }
  .announcement-preview-field.inline, .announcement-preview-field:not(.inline) { grid-column: 1; }
  .announcement-preview-attachments img { max-height: 220px; }
  .push-notification-invitation { right: 12px; bottom: 12px; width: calc(100vw - 24px); align-items: flex-start; flex-direction: column; gap: 11px; }
  .push-notification-invitation-actions { width: 100%; justify-content: space-between; }
  .topline { padding: 0 16px; }
  .topline-note, .topline > span:nth-child(2) { display: none; }
  .site-announcement { gap: 5px; padding: 9px 16px; }
  .site-header { height: 68px; padding: 0 16px; }
  .brand-mark { height: 45px; width: 45px; }
  .brand-copy strong { font-size: 23px; }
  .main-nav, .icon-link { display: none; }
  .header-actions { gap: 9px; }
  .mobile-menu-button { display: block; border: 0; background: transparent; color: var(--paper); font-size: 20px; padding: 7px; }
  .mobile-nav { position: fixed; top: 68px; left: 0; right: 0; z-index: 9; padding: 12px 16px; background: #0a151e; border-bottom: 1px solid var(--line); gap: 5px; box-shadow: 0 14px 28px #0008; }
  .mobile-nav.open { display: grid; }
  .mobile-nav > a, .mobile-nav .nav-dropdown > summary { min-height: 40px; padding: 8px 10px; border-radius: 5px; color: #b6c7cf; font-size: 11px; }
  .mobile-nav > a.active, .mobile-nav .nav-dropdown > summary.active { color: var(--cyan-bright); background: #10232e; }
  .mobile-nav .nav-dropdown { height: auto; }
  .mobile-nav .nav-dropdown > summary { justify-content: space-between; }
  .mobile-nav .dropdown-panel { position: static; min-width: 0; margin: 0 0 5px 10px; border-radius: 7px; box-shadow: none; }
  .mobile-nav .dropdown-panel::before { display: none; }
  .mobile-nav .dropdown-panel a { min-height: 34px; padding-left: 14px; }
  .mobile-nav .dropdown-panel { display: none; }
  .mobile-nav .nav-dropdown[open] .dropdown-panel { display: grid; }
  main { width: min(100% - 32px, 560px); padding: 20px 0 48px; }
  .hero { grid-template-columns: 1fr; padding: 27px 23px; min-height: auto; }
  .hero-emblem { display: none; }
  .hero-aside { align-items: flex-start; }
  .hero-actions { flex-wrap: wrap; justify-content: flex-start; }
  .hero h1 { font-size: 53px; }
  .hero-stat { padding: 0 12px; }
  .hero-stat strong { font-size: 19px; }
  .hero-stat span { font-size: 8px; }
  .home-grid { grid-template-columns: 1fr; }
  .section-head { margin-top: 27px; }
  .clan-feed-card { width: 235px; min-height: 60px; }
  .clan-feed-track-wrap { padding-bottom: 0; }
  .whip-arena-layout { grid-template-columns: 1fr; }
  .trade-offer-panes { grid-template-columns: 1fr; }
  .trade-sides { grid-template-columns: minmax(0,1fr); }
  .trade-arrow { justify-self: center; transform: rotate(90deg); }
  .bank-toolbar { align-items: stretch; flex-direction: column; }
  .bank-member-select { min-width: 0; width: 100%; }
  .whip-fighters { grid-template-columns: 1fr; }
  .whip-history > div { grid-template-columns: 1fr 1fr; }
  .whip-history small { grid-column: 1 / -1; text-align: left; }
  .fun-wallet { flex-wrap: wrap; gap: 8px; }
  .fun-wallet .eyebrow { flex-basis: 100%; }
  .section-head h2 { font-size: 25px; }
  .page-heading { align-items: start; flex-direction: column; }
  .page-heading .search-box { width: 100%; }
  .profile-hero { grid-template-columns: auto 1fr; gap: 13px; padding: 16px; }
  .profile-hero-card { min-height: 276px; grid-template-columns: minmax(0, 1fr) minmax(105px, .7fr); gap: 8px; padding: 14px; }
  .profile-identity { grid-column: 1 / -1; align-items: flex-start; }
  .profile-avatar { height: 68px; width: 68px; }
  .profile-title h1 { font-size: 28px; }
  .profile-hero-model { grid-column: 1; grid-row: 2; height: 190px; align-self: center; }
  .profile-hero-summary { grid-column: 2; grid-row: 2; gap: 9px; }
  .profile-hero-summary .button { width: 100%; padding: 9px 7px; font-size: 9px; }
  .profile-quick-stats { grid-template-columns: 1fr; gap: 5px; }
  .profile-quick-stats > span { padding: 6px 8px; }
  .profile-quick-stats strong { font-size: 14px; }
  .profile-identity .profile-meta { gap: 4px; }
  .profile-identity .role-pill { padding: 4px 6px; }
  .profile-stats { grid-template-columns: repeat(2, 1fr); }
  .skills-grid { grid-template-columns: repeat(2, 1fr); }
  .profile-tabs { margin-top: 15px; }
  .profile-tab { padding: 8px 10px; }
  .profile-skill-grid, .profile-boss-grid, .collection-feed, .collection-pages { grid-template-columns: 1fr; }
  .collection-summary { padding: 12px; }
  .coffer-preview { grid-template-columns: 1fr; }
  .coffer-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coffer-table-head, .coffer-row { min-width: 680px; }
  .coffer-summary { grid-template-columns: 1fr; }
  .ocellus-setup, .ocellus-route-grid, .ocellus-hazards { grid-template-columns: 1fr; }
  .ocellus-first-buttons { gap: 5px; }
  .ocellus-first-button { padding: 8px 6px; }
  .ocellus-route-summary { align-items: flex-start; flex-direction: column; }
  .ocellus-route-summary span { text-align: left; }
  .hero-stats#home-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 0; }
  .form-grid, .donate-grid { grid-template-columns: 1fr; }
  .donate-surveys { align-items: stretch; flex-direction: column; }
  .donate-surveys .button { width: 100%; }
  .tracker-row { gap: 8px; }
  .tracker-item-icon { width: 28px; height: 28px; flex-basis: 28px; }
  .ge-item-overview { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; }
  .ge-item-hero-icon { width: 46px; height: 46px; }
  .ge-live-price { grid-column: span 1; }
  .ge-item-stats { grid-template-columns: 1fr; }
  .ge-chart-heading { align-items: start; flex-direction: column; }
  .ge-chart-heading .field { width: 100%; }
  .ge-chart-panel { padding: 12px; }
  .ge-chart-ranges .button { padding: 8px 10px; }
  .site-footer { padding: 16px; flex-wrap: wrap; gap: 10px; }
  .site-footer > span { order: 3; width: 100%; margin: 0; }
  .staff-layout { grid-template-columns: 1fr; }
  .staff-sidebar { position: static; }
  .staff-nav { display: flex; align-items: flex-start; flex-wrap: wrap; overflow: visible; }
  .staff-nav-item { width: auto; flex: 0 0 auto; }
  .staff-nav-group { position: relative; flex: 0 0 auto; }
  .staff-subnav { position: absolute; z-index: 20; top: 100%; left: 0; width: 160px; margin: 4px 0 0; padding: 6px; border: 1px solid var(--line); border-radius: 7px; background: #0a151d; box-shadow: 0 12px 28px #0009; }
  .staff-sidebar-footer { display: none; }
  .staff-stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .staff-info-grid, .staff-wom-grid { grid-template-columns: 1fr; }
  .staff-quick-actions { align-items: stretch; flex-direction: column; }
  .staff-application-fields, .staff-audit-fields { grid-template-columns: 1fr; }
  .staff-member-row { flex-wrap: wrap; }
  .staff-member-main { flex: 1 1 calc(100% - 60px); }
  .staff-member-actions { width: 100%; justify-content: flex-end; }
  .account-trigger { max-width: 48px; padding: 5px; }
  .account-trigger > span { display: none; }
  .account-dropdown .dropdown-panel { top: calc(100% + 7px); }
  .notifications-panel { right: -47px; }
}

@media (prefers-reduced-motion: reduce) {
  .clan-feed-track { animation: none; }
}

.staff-permission-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.staff-permission-option { display: flex; align-items: flex-start; gap: 10px; padding: 11px; border: 1px solid var(--line); border-radius: 7px; background: #09151d; cursor: pointer; }
.staff-permission-option input { accent-color: var(--cyan); margin-top: 2px; }
.staff-permission-option span strong, .staff-permission-option span small { display: block; }
.staff-permission-option span strong { font-size: 10px; }
.staff-permission-option span small { margin-top: 4px; color: var(--muted); font-size: 8px; }
@media (max-width: 720px) {
  .staff-permission-options { grid-template-columns: 1fr; }
}

.games-hero { display: grid; grid-template-columns: minmax(0, 1fr) 240px; align-items: center; min-height: 230px; margin-bottom: 16px; padding: 28px 34px; overflow: hidden; background: radial-gradient(ellipse at 86% 45%, rgba(96, 126, 93, .26), transparent 32%), linear-gradient(118deg, #101e27 0%, #132a30 50%, #162d2a 100%); }
.games-hero-copy { max-width: 680px; }
.games-hero h2 { margin: 8px 0; font: 700 42px/1 "Barlow Condensed", sans-serif; letter-spacing: .02em; }
.games-hero p { max-width: 630px; color: #a8bac0; font-size: 11px; line-height: 1.7; }
.games-hero-pills { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 17px; }
.games-hero-pills span { padding: 6px 9px; border: 1px solid #35504a; border-radius: 20px; color: #bcd5c5; font-size: 9px; }
.games-hero-emblem { position: relative; display: grid; width: 180px; height: 180px; place-items: center; justify-self: center; transform: rotate(-8deg); }
.games-hero-emblem::before, .games-hero-emblem::after { content: ""; position: absolute; width: 115px; height: 140px; border: 1px solid rgba(202, 179, 111, .4); border-radius: 48% 48% 12% 12%; background: linear-gradient(135deg, #dfbd72 0%, #856b43 48%, #382e25 52%, #b89759 100%); clip-path: polygon(50% 0, 100% 24%, 88% 70%, 50% 100%, 12% 70%, 0 24%); box-shadow: 0 0 50px #c7a04a22; }
.games-hero-emblem::after { width: 86px; height: 110px; border-color: rgba(235, 216, 159, .38); background: linear-gradient(145deg, #354f45, #162a2b); }
.games-hero-emblem > span { z-index: 1; color: #e6cc8c; font-size: 51px; text-shadow: 0 4px 12px #000; }
.games-hero-emblem > i, .games-hero-emblem > b { position: absolute; z-index: 2; width: 4px; height: 115px; border-radius: 5px; background: linear-gradient(#f5db93, #916a32); transform: rotate(-38deg); box-shadow: 0 0 12px #e7bf7266; }
.games-hero-emblem > b { transform: rotate(38deg); }
.games-player-strip { display: flex; align-items: center; gap: 35px; margin-bottom: 28px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 9px; background: #0a161e; }
.games-player-strip > div { display: grid; gap: 4px; }
.games-player-strip strong { font: 700 20px "Barlow Condensed", sans-serif; }
.games-player-strip strong small { color: var(--muted); font: 500 9px "DM Sans", sans-serif; }
.games-player-strip > .button { margin-left: auto; }
.games-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin: 18px 0 12px; }
.games-section-heading h2 { margin: 5px 0 0; font-size: 22px; }
.games-section-heading > span { color: var(--muted); font-size: 9px; }
.games-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.game-select-card { --game-tone: #79b9a0; display: flex; min-height: 220px; flex-direction: column; padding: 17px; border: 1px solid #263d42; border-radius: 10px; background: radial-gradient(ellipse at 98% 1%, color-mix(in srgb, var(--game-tone) 13%, transparent), transparent 42%), linear-gradient(150deg, #10212a, #0a151c); transition: transform .17s ease, border-color .17s ease; }
.game-select-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--game-tone) 55%, #263d42); }
.game-prayer { --game-tone: #76b8ec; }
.game-flick { --game-tone: #c9a6f0; }
.game-eat { --game-tone: #e78773; }
.game-swap { --game-tone: #e1bc73; }
.game-precision { --game-tone: #80d1aa; }
.game-select-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; }
.game-emblem { display: grid; width: 39px; height: 39px; place-items: center; border: 1px solid color-mix(in srgb, var(--game-tone) 36%, transparent); border-radius: 9px; background: color-mix(in srgb, var(--game-tone) 10%, #0b1920); color: var(--game-tone); font-size: 21px; }
.game-best { padding: 5px 7px; border: 1px solid var(--line); border-radius: 20px; color: #a5b8bf; font-size: 8px; font-weight: 700; letter-spacing: .08em; }
.game-select-card .eyebrow { color: var(--game-tone); font-size: 8px; }
.game-select-card h3 { margin: 4px 0 6px; font: 700 23px "Barlow Condensed", sans-serif; }
.game-select-card p { margin: 0 0 15px; color: #96aab2; font-size: 10px; line-height: 1.6; }
.game-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 11px; border-top: 1px solid #1c3039; }
.game-card-footer > span { overflow: hidden; color: #91a4ac; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.game-card-footer .button { flex: 0 0 auto; }
.games-featured-tool { display: flex; align-items: center; gap: 15px; margin-top: 14px; padding: 16px; border: 1px solid #57452b; border-radius: 9px; background: radial-gradient(ellipse at 100% 0, #ba87341c, transparent 50%), linear-gradient(120deg, #151b1c, #0b151b); color: inherit; text-decoration: none; transition: border-color .17s ease, transform .17s ease; }
.games-featured-tool:hover { transform: translateY(-2px); border-color: #b08b4e; }
.games-featured-icon { display: grid; width: 44px; height: 44px; flex: 0 0 auto; place-items: center; border: 1px solid #8c6b39; border-radius: 7px; background: #352719; font-size: 22px; }
.games-featured-copy { display: grid; min-width: 0; gap: 4px; }
.games-featured-copy .eyebrow { color: #d1ae68; font-size: 8px; }
.games-featured-copy strong { color: #ead5a2; font: 700 20px "Barlow Condensed", sans-serif; }
.games-featured-copy small { color: #9dadad; font-size: 9px; line-height: 1.5; }
.games-featured-copy .games-featured-credit { color: #72858a; }
.games-featured-action { margin-left: auto; color: #d9bb79; font-size: 9px; font-weight: 700; white-space: nowrap; }
.games-leaderboard-panel { margin-top: 25px; padding: 17px; }
.games-global-boards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.game-mini-board { padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: #09151d; }
.game-mini-board header { display: flex; align-items: center; gap: 8px; padding: 2px 2px 8px; }
.game-mini-board header > span { color: var(--gold); font-size: 15px; }
.game-mini-board h3 { margin: 0; font-size: 11px; }
.game-mini-row { display: grid; grid-template-columns: 25px minmax(0, 1fr) auto; align-items: center; gap: 6px; min-height: 29px; border-top: 1px solid #1a2b33; }
.game-mini-row strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.game-mini-row > span:last-child { color: #dbca91; font-size: 10px; font-weight: 700; }
.game-rank { color: #83989f; font: 700 11px "Barlow Condensed", sans-serif; }
.practice-toolbar { display: flex; align-items: center; justify-content: space-between; margin: -5px 0 12px; }
.practice-tick-badge { display: flex; align-items: center; gap: 7px; color: #a8c1b2; font-size: 9px; }
.practice-tick-badge i, .practice-live-tag i { width: 7px; height: 7px; border-radius: 50%; background: #56d49c; box-shadow: 0 0 9px #56d49c88; }
.practice-layout { display: grid; grid-template-columns: minmax(0, 1fr) 275px; align-items: start; gap: 14px; }
.practice-main { min-width: 0; overflow: hidden; border: 1px solid #51422e; border-radius: 5px; background: #090b0c; box-shadow: inset 0 0 0 1px #171412, 0 12px 30px #0004; }
.practice-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px; border-bottom: 1px solid #3b3021; background: linear-gradient(110deg, #171717, #0d1112); }
.practice-heading h2 { margin: 2px 0; font: 700 24px "Barlow Condensed", sans-serif; }
.practice-heading p { margin: 0; color: var(--muted); font-size: 9px; }
.practice-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 224px; height: 450px; overflow: hidden; border-block: 2px solid #5c4930; background: #080808; box-shadow: inset 0 0 0 1px #1c1711; }
.practice-world { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #070707; }
.practice-world-prayer, .practice-world-flick { background: radial-gradient(ellipse at 48% 57%, rgba(246, 104, 31, .72), transparent 42%), linear-gradient(180deg, #211c36 0%, #563042 34%, #a74927 69%, #e88635 100%); }
.practice-world-swap { background: radial-gradient(ellipse at 75% 37%, rgba(255, 224, 160, .74), transparent 28%), linear-gradient(180deg, #47718e 0%, #77949a 43%, #c4aa82 72%, #7e6b4e 100%); }
.practice-world-eat { background: radial-gradient(ellipse at 66% 34%, rgba(255, 243, 201, .68), transparent 25%), linear-gradient(180deg, #39779b 0%, #78aabe 45%, #d6c08e 77%, #82704f 100%); }
.practice-world-precision { background: radial-gradient(ellipse at 27% 31%, rgba(255, 250, 221, .72), transparent 26%), linear-gradient(180deg, #648fa5 0%, #9abac0 43%, #d2c18f 75%, #768657 100%); }
.practice-world canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.practice-world canvas:focus-visible { outline: 2px solid #d8bd79; outline-offset: -3px; }
.practice-world canvas { cursor: grab; touch-action: none; }
.practice-world canvas:active { cursor: grabbing; }
.practice-world .practice-overhead { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.practice-stage-vignette { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(0,0,0,.58), transparent 46%, rgba(0,0,0,.24)); }
.practice-client-rail { position: absolute; z-index: 3; top: 55px; left: 8px; display: grid; width: 56px; gap: 5px; }
.practice-client-rail a { display: grid; min-height: 31px; place-items: center; padding: 3px; border: 1px solid #483924; background: linear-gradient(#29241d, #13110e); box-shadow: inset 0 0 0 1px #090807; color: #d5c094; font: 700 8px/1.15 "Barlow Condensed", sans-serif; letter-spacing: .04em; text-align: center; text-decoration: none; text-shadow: 1px 1px #000; }
.practice-client-rail a:hover { border-color: #a7854a; color: #fff0c2; }
.practice-stage-hud { position: absolute; z-index: 2; inset: 11px 99px auto 74px; display: flex; justify-content: space-between; color: #d3c89e; font: 700 8px "DM Sans", sans-serif; letter-spacing: .12em; text-shadow: 0 1px 3px #000; }
.practice-client-minimap { position: absolute; z-index: 2; top: 8px; right: 9px; display: grid; width: 76px; height: 76px; place-items: center; border: 2px solid #37332b; border-radius: 50%; background: radial-gradient(circle at center, #171716 0 37%, #060606 39% 67%, #26221b 69% 74%, #060606 76%); box-shadow: 0 0 0 2px #0c0b0a, inset 0 0 0 1px #86734a; }
.practice-compass { position: absolute; top: -7px; left: 50%; z-index: 1; display: grid; width: 20px; height: 20px; place-items: center; padding: 0; border: 1px solid #776747; border-radius: 50%; background: radial-gradient(circle, #ded0a5, #64563a 68%, #14110d); color: #272016; font: 700 8px "Barlow Condensed", sans-serif; transform: translateX(-50%); cursor: pointer; }
.practice-compass:hover { filter: brightness(1.2); }
.practice-minimap-map { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid #615842; background: radial-gradient(circle at 55% 44%, #d0bf80 0 3%, #565043 8%, #27251f 28%, #121211 65%); box-shadow: 0 0 8px #bea76c22; }
.practice-minimap-map i { width: 3px; height: 3px; border-radius: 50%; background: #f5e8b2; box-shadow: 0 0 7px 3px #f1df9944; }
.practice-client-orbs { position: absolute; z-index: 3; top: 29px; right: 91px; display: grid; gap: 4px; }
.practice-client-orbs span { display: grid; width: 42px; height: 24px; grid-template-columns: 14px 1fr; align-items: center; justify-items: center; border: 1px solid #181511; border-radius: 13px; box-shadow: inset 0 0 0 1px #75633a, 0 1px 3px #000; font-size: 10px; text-shadow: 1px 1px #000; }
.practice-client-orbs i { font-style: normal; }
.practice-client-orbs b { font: 700 9px "DM Sans", sans-serif; }
.practice-health-orb { background: radial-gradient(circle at 34% 25%, #ef8c84, #9b2d25 68%, #471714); color: #ffe1d3; }
.practice-prayer-orb { background: radial-gradient(circle at 34% 25%, #a8dbff, #3974a4 68%, #172c50); color: #e7f5ff; }
.practice-run-orb { background: radial-gradient(circle at 34% 25%, #ffe887, #a98736 68%, #443313); color: #fff4bd; }
.practice-stage-hud, .practice-cue { z-index: 2; }
.practice-live-tag { display: inline-flex; align-items: center; gap: 6px; }
.practice-live-tag i { width: 5px; height: 5px; }
.practice-cue { position: absolute; top: 47px; left: 50%; padding: 8px 13px; border: 1px solid #d7be7655; border-radius: 5px; background: #121b1ad9; color: #d7c694; font: 700 10px "DM Sans", sans-serif; letter-spacing: .12em; text-align: center; transform: translateX(-50%); white-space: nowrap; }
.practice-cue.active { border-color: #e8cf79; color: #fff0b0; box-shadow: 0 0 22px #eac66444; animation: practice-cue-flash .55s ease-in-out infinite alternate; }
@keyframes practice-cue-flash { to { box-shadow: 0 0 28px #eac66488; } }
.practice-hud { position: absolute; z-index: 2; bottom: 10px; left: 12px; display: grid; width: min(224px, calc(100% - 24px)); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 11px; padding: 9px 10px; border: 1px solid #403528; background: linear-gradient(145deg, #171512ed, #0b0a09ed); box-shadow: 0 3px 12px #0008, inset 0 0 0 1px #0b0908; pointer-events: none; }
.practice-hud > div { display: grid; gap: 3px; min-width: 0; padding-left: 7px; border-left: 1px solid #3a3022; }
.practice-hud > div:nth-child(odd) { padding-left: 0; border: 0; }
.practice-hud span { color: #728891; font-size: 7px; font-weight: 800; letter-spacing: .12em; }
.practice-hud strong { color: #e0d39f; font: 700 16px "Barlow Condensed", sans-serif; }
.practice-chatbox { min-height: 61px; border: 1px solid #292218; background: #0b0a08; }
.practice-chat-tabs { display: flex; min-height: 22px; align-items: stretch; gap: 2px; padding: 2px 4px 0; border-bottom: 1px solid #32281b; background: linear-gradient(#29231a, #17130f); }
.practice-chat-tabs span { display: grid; min-width: 35px; place-items: center; padding: 0 6px; border: 1px solid transparent; border-radius: 3px 3px 0 0; color: #a99a7b; font: 700 8px "DM Sans", sans-serif; }
.practice-chat-tabs span.active { border-color: #59482d; border-bottom-color: #0b0a08; background: #0b0a08; color: #e1c981; }
.practice-feedback { min-height: 36px; padding: 8px 10px; color: #a8b8ba; font-size: 9px; line-height: 1.5; }
.practice-feedback.success { color: #79dfac; }
.practice-feedback.miss { color: #ee9388; }
.practice-side { display: grid; gap: 10px; }
.practice-best-card, .practice-board, .practice-tip { padding: 13px; }
.practice-best-card > strong { display: block; margin: 5px 0 9px; color: #e4cf8b; font: 700 34px "Barlow Condensed", sans-serif; }
.practice-best-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.practice-best-stats span { display: grid; gap: 3px; color: var(--muted); font-size: 8px; }
.practice-best-stats b { color: #d7e2df; font-size: 11px; }
.practice-board h3 { margin: 5px 0 10px; font-size: 15px; }
.practice-board-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 6px; min-height: 41px; border-top: 1px solid #1b2d35; }
.practice-board-row > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.practice-board-row strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.practice-board-row small { color: var(--muted); font-size: 7px; }
.practice-board-row > b { color: #ddcb91; font: 700 13px "Barlow Condensed", sans-serif; }
.practice-tip p { color: #a1b2b5; font-size: 9px; line-height: 1.65; }
.practice-controls-hint { display: flex; justify-content: space-between; padding-top: 7px; border-top: 1px solid #203239; }
.practice-controls-hint span { color: #718790; font-size: 7px; font-weight: 800; letter-spacing: .08em; }
.practice-controls-hint strong { color: #c9d4d1; font-size: 8px; }
.practice-results { padding: 15px; border-top: 1px solid #283c3f; background: linear-gradient(110deg, #10271f, #0d1c1e); }
.practice-results[hidden] { display: none; }
.practice-results h3 { margin: 4px 0 10px; color: #e6d49d; font: 700 29px "Barlow Condensed", sans-serif; }
.practice-result-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.practice-result-stats span { display: grid; gap: 4px; color: #8fa49b; font-size: 8px; }
.practice-result-stats strong { color: #d5e0d3; font-size: 12px; }
.practice-result-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.triple-jad-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -5px 0 8px; }
.triple-jad-actions { display: flex; align-items: center; gap: 12px; }
.triple-jad-credit { color: #8e9a9b; font-size: 8px; text-decoration: none; }
.triple-jad-credit:hover { color: #d8c18a; }
.triple-jad-panel { overflow: hidden; border: 1px solid #222a2c; border-radius: 7px; background: #050606; box-shadow: 0 8px 24px #0003; }
.triple-jad-frame-wrap { height: min(82vh, 960px); min-height: 540px; background: #000; }
.triple-jad-frame { display: block; width: 100%; height: 100%; border: 0; background: #000; }
.triple-jad-fullscreen { white-space: nowrap; }
.triple-jad-frame:fullscreen { width: 100vw; height: 100vh; background: #000; }
.osrs-side-panel { display: flex; min-width: 0; flex-direction: column; gap: 5px; padding: 5px; overflow: hidden; border-left: 2px solid #090807; background: linear-gradient(135deg, #6b5840, #473a2d 48%, #5b4934); box-shadow: inset 1px 0 #988060; color: #e6d6b7; font-family: "DM Sans", sans-serif; }
.osrs-tab-strip { display: grid; order: 2; flex: 0 0 27px; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; margin-top: auto; }
.osrs-tab { display: grid; min-width: 0; place-items: center; border: 1px solid #241d17; background: linear-gradient(#746047, #4b3b2a); color: #c2aa7b; font-size: 13px; text-shadow: 1px 1px #21190f; }
.osrs-tab.active { border-color: #d8bb78; background: linear-gradient(#8a704d, #675038); color: #fff0be; }
.osrs-side-title, .osrs-inventory-title { display: flex; min-height: 19px; align-items: center; justify-content: space-between; padding: 2px 5px; border: 1px solid #291f15; background: #33281d; color: #e4d0a4; font: 700 9px "Barlow Condensed", sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.osrs-side-title strong { color: #ffdc82; }
.osrs-inventory-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(7, minmax(0, 1fr)); flex: 1 1 auto; gap: 3px; min-height: 0; }
.osrs-item-slot { display: grid; min-width: 0; min-height: 0; place-items: center; overflow: hidden; padding: 2px; border: 1px solid #31271c; border-radius: 2px; background: linear-gradient(145deg, #786147, #5a4935); box-shadow: inset 1px 1px #a08661, inset -1px -1px #3b2f22; cursor: grab; touch-action: none; user-select: none; transition: filter .1s, background .1s, transform .1s; }
.osrs-item-slot:hover { filter: brightness(1.18); }
.osrs-item-slot:active, .osrs-prayer-button:active, .quick-prayer-orb:active { filter: brightness(1.35); transform: scale(.96); }
.osrs-item-slot.inventory-dragging { visibility: hidden; }
.osrs-item-slot.inventory-drop-target { border-color: #9de2f5; box-shadow: inset 0 0 0 1px #b9efff, 0 0 8px #55c8ed99; }
.inventory-drag-preview { position: fixed; z-index: 1000; pointer-events: none; opacity: .9; box-shadow: 0 4px 12px #0009; }
.osrs-item-slot img { width: 100%; height: 100%; min-width: 0; min-height: 0; max-width: 38px; max-height: 38px; object-fit: contain; image-rendering: pixelated; -webkit-user-drag: none; user-drag: none; filter: drop-shadow(1px 2px 1px #21170f); }
.osrs-item-slot .gear-item-fallback { color: #e9d6a9; font-size: 20px; line-height: 1; text-shadow: 1px 2px 1px #21170f; }
.osrs-item-slot .gear-item-fallback[hidden] { display: none; }
.osrs-item-slot.gear-item-ranged { background: linear-gradient(145deg, #66724d, #4a5639); }
.osrs-item-slot.gear-item-magic { background: linear-gradient(145deg, #625577, #493b5a); }
.osrs-item-slot.gear-item-supply { background: linear-gradient(145deg, #746047, #56432f); }
.osrs-item-slot.gear-required, .osrs-item-slot.osrs-item-called { z-index: 1; border-color: #f6db76; box-shadow: inset 0 0 0 1px #ffe995, 0 0 9px #f6cf4f99; animation: osrs-target-pulse .65s ease-in-out infinite alternate; }
.osrs-item-slot.gear-fitted { border-color: #8dbd70; background: linear-gradient(145deg, #5c7747, #405334); }
.osrs-item-slot.gear-wrong { border-color: #ec7463; background: #734335; animation: gear-shake .15s linear 2; }
.osrs-equipped-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; }
.osrs-equipped-slot { display: grid; min-width: 0; height: 38px; place-items: center; border: 1px solid #30251a; background: linear-gradient(145deg, #66523a, #493927); box-shadow: inset 1px 1px #8d7451; }
.osrs-equipped-slot span { color: #c8b58d; font-size: 6px; text-transform: uppercase; }
.osrs-equipped-slot b { display: grid; height: 24px; place-items: center; color: #e3ca8d; font-size: 13px; }
.osrs-equipped-slot img { width: 24px; height: 24px; object-fit: contain; image-rendering: pixelated; }
.osrs-inventory-status { flex: 0 0 auto; padding: 2px 4px; color: #cbbb99; font-size: 7px; }
.osrs-target-callout { padding: 5px 7px; border: 1px solid #b99d54; background: linear-gradient(90deg, #45371f, #302719); color: #d9c796; font-size: 8px; }
.osrs-target-callout strong { display: block; margin-top: 3px; color: #ffe08a; font-size: 11px; text-shadow: 0 1px #23190c; }
.osrs-prayer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 3px; }
.osrs-prayer-button { position: relative; display: grid; min-width: 0; min-height: 83px; place-items: center; gap: 3px; padding: 5px 3px; border: 1px solid #33271b; background: linear-gradient(145deg, #766045, #51402d); box-shadow: inset 1px 1px #9a8059; color: #dfcca7; cursor: pointer; }
.osrs-prayer-button img { width: 36px; height: 36px; object-fit: contain; image-rendering: pixelated; }
.osrs-prayer-button span { font-size: 7px; text-align: center; }
.osrs-prayer-button kbd { position: absolute; top: 3px; right: 4px; color: #f5e2b5; font-size: 8px; }
.osrs-prayer-button:hover, .osrs-prayer-button:focus-visible { border-color: #e7d17e; box-shadow: inset 0 0 0 1px #e7d17e, 0 0 8px #e7d17e77; }
.osrs-prayer-button.prayer-on { border-color: #f3db83; background: linear-gradient(145deg, #827047, #615136); box-shadow: inset 0 0 0 1px #efd67b, 0 0 8px #efd67b66; }
.osrs-prayer-icon { display: grid; width: 39px; height: 39px; place-items: center; border: 1px solid #392c1c; background: #51412d; box-shadow: inset 1px 1px #8c7453; }
.osrs-prayer-icon img { width: 36px; height: 36px; object-fit: contain; image-rendering: pixelated; }
.osrs-prayer-icon .gear-item-fallback[hidden] { display: none; }
.quick-prayer-selection { display: flex; justify-content: center; gap: 7px; padding: 9px 3px 2px; }
.quick-prayer-selection > span { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid #35291d; background: #51412d; box-shadow: inset 1px 1px #8c7453; }
.quick-prayer-selection img { width: 36px; height: 36px; object-fit: contain; image-rendering: pixelated; }
.quick-prayer-selection .gear-item-fallback[hidden] { display: none; }
.quick-prayer-caption { margin: 0; color: #cbbb99; font-size: 7px; text-align: center; }
.quick-prayer-orb { display: grid; min-height: 78px; place-items: center; gap: 5px; margin: 7px 2px; border: 2px solid #33281d; background: linear-gradient(145deg, #65513a, #3c3023); box-shadow: inset 1px 1px #a08762, inset -1px -1px #2a2017; color: #e8d3a4; cursor: pointer; }
.quick-prayer-orb strong { font: 700 10px "Barlow Condensed", sans-serif; text-transform: uppercase; }
.quick-prayer-orb kbd { color: #cbbb99; font: 700 7px "DM Sans", sans-serif; }
.quick-prayer-orb-light { width: 29px; height: 29px; border: 2px solid #362b1e; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffeeb5, #b9985b 45%, #5b472d 75%); box-shadow: inset 0 0 6px #fff3c577, 0 1px 2px #18120c; }
.quick-prayer-orb.quick-prayer-active { border-color: #f5de82; background: linear-gradient(145deg, #846b3f, #514027); box-shadow: inset 0 0 0 1px #f5de82, 0 0 12px #f5de8266; }
.quick-prayer-active .quick-prayer-orb-light { background: radial-gradient(circle at 35% 30%, #fff, #f1d86c 42%, #c38d30 76%); box-shadow: 0 0 12px #f9df75; }
.quick-prayer-tick { display: flex; justify-content: space-between; padding: 5px; border: 1px solid #33271b; background: #392d20; color: #cbbb99; font-size: 7px; }
.quick-prayer-tick strong { color: #ffe08a; font-variant-numeric: tabular-nums; }
.osrs-orb-row { display: flex; justify-content: space-between; margin-top: auto; padding: 5px; border: 1px solid #33271b; background: #392d20; color: #cbbb99; font-size: 7px; }
.osrs-orb-row b { color: #e3d29e; }
@keyframes osrs-target-pulse { to { filter: brightness(1.45); } }
@keyframes gear-shake { 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }
@media (max-width: 900px) {
  .practice-layout { grid-template-columns: minmax(0, 1fr) 235px; }
}
@media (max-width: 720px) {
  .games-hero { grid-template-columns: 1fr 80px; min-height: 190px; padding: 19px; }
  .games-hero h2 { font-size: 34px; }
  .games-hero-emblem { width: 90px; height: 120px; transform: scale(.7) rotate(-8deg); }
  .games-hero-pills span { padding: 5px 7px; font-size: 7px; }
  .games-player-strip { gap: 12px; flex-wrap: wrap; }
  .games-player-strip > .button { margin-left: 0; }
  .games-card-grid, .games-global-boards { grid-template-columns: 1fr; }
  .games-section-heading { align-items: start; flex-direction: column; }
  .practice-layout { grid-template-columns: 1fr; }
  .practice-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .practice-board { grid-row: span 2; }
  .practice-stage { grid-template-columns: minmax(0, 1fr) 204px; height: 410px; }
  .practice-heading h2 { font-size: 21px; }
  .practice-heading p { max-width: 240px; line-height: 1.5; }
  .games-featured-tool { align-items: flex-start; }
  .games-featured-action { align-self: center; }
}
@media (max-width: 480px) {
  .games-hero { grid-template-columns: 1fr; }
  .games-hero-emblem { display: none; }
  .practice-side { grid-template-columns: 1fr; }
  .practice-board { grid-row: auto; }
  .practice-heading { align-items: start; }
  .practice-stage { grid-template-columns: minmax(0, 1fr) 178px; height: 365px; }
  .practice-client-rail, .practice-client-orbs { display: none; }
  .practice-stage-hud { inset-inline: 10px 70px; font-size: 7px; }
  .practice-client-minimap { width: 54px; height: 54px; }
  .practice-minimap-map { width: 29px; height: 29px; }
  .practice-hud { bottom: 7px; left: 7px; width: min(176px, calc(100% - 14px)); gap: 5px 7px; padding: 7px; }
  .games-featured-tool { gap: 10px; padding: 12px; }
  .games-featured-icon { width: 36px; height: 36px; }
  .games-featured-copy strong { font-size: 17px; }
  .games-featured-action { display: none; }
  .triple-jad-frame-wrap { height: 72vh; min-height: 420px; }
  .triple-jad-toolbar { gap: 7px; }
  .triple-jad-actions { gap: 8px; }
  .triple-jad-credit { font-size: 7px; }
  .osrs-side-panel { gap: 3px; padding: 4px; }
  .osrs-equipped-slot { height: 32px; }
  .osrs-equipped-slot b { height: 20px; }
}
@media (max-width: 420px) {
  .practice-stage { grid-template-columns: minmax(0, 1fr) 150px; height: 340px; }
  .osrs-tab { font-size: 11px; }
  .osrs-prayer-button { min-height: 72px; }
  .osrs-prayer-button img { width: 30px; height: 30px; }
  .practice-result-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .osrs-equipped-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .osrs-equipped-slot img { width: 18px; height: 18px; }
}

.clan-chat-launcher[hidden], .clan-chat-panel[hidden], .clan-chat-links [hidden] { display: none; }
.clan-chat-launcher { position: fixed; z-index: 60; right: 22px; bottom: 22px; display: flex; align-items: center; gap: 8px; padding: 12px 17px; border: 1px solid #26708e; border-radius: 999px; background: linear-gradient(145deg, #123647, #0b1b25); color: var(--paper); font-size: 11px; font-weight: 700; box-shadow: 0 12px 34px #0009; cursor: pointer; }
.clan-chat-launcher > span:first-child { color: var(--cyan-bright); font-size: 17px; }
.clan-chat-launcher:hover { border-color: var(--cyan-bright); transform: translateY(-1px); }
.clan-chat-panel { position: fixed; z-index: 61; right: 22px; bottom: 82px; display: grid; grid-template-rows: auto auto minmax(100px, 1fr) auto auto auto auto; width: min(390px, calc(100vw - 28px)); height: min(590px, calc(100dvh - 112px)); overflow: hidden; border: 1px solid #285061; border-radius: 13px; background: linear-gradient(155deg, #10212b, #08131a 72%); box-shadow: 0 20px 60px #000b; }
.clan-chat-actions { display: flex; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.clan-chat-actions .button { min-height: 30px; padding: 6px 10px; font-size: 9px; }
.clan-chat-actions [hidden] { display: none; }
.clan-chat-action-options { display: flex; gap: 7px; flex-wrap: wrap; padding: 0 12px 8px; }
.clan-chat-action-options .button { padding: 7px 10px; font-size: 9px; }
.clan-chat-notification-count { display: grid; min-width: 17px; height: 17px; place-items: center; padding: 0 4px; border-radius: 10px; background: #e14848; color: white; font-size: 8px; font-weight: 800; }
.clan-chat-notification-count[hidden] { display: none; }
.clan-chat-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.clan-chat-header .eyebrow { font-size: 8px; }
.clan-chat-header h2 { margin: 4px 0 0; font: 700 22px/1 "Barlow Condensed", sans-serif; }
.clan-chat-close { width: 30px; height: 30px; border: 1px solid #294553; border-radius: 6px; background: #0a171f; color: #b9cbd3; font-size: 20px; cursor: pointer; }
.clan-chat-history { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; padding: 14px; }
.clan-chat-message { max-width: 88%; padding: 10px 12px; border: 1px solid #203b49; border-radius: 10px; color: #c7d5db; font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
.clan-chat-message.assistant { align-self: flex-start; background: #0e202a; }
.clan-chat-message.user { align-self: flex-end; border-color: #176382; background: #103448; color: #e9f7fc; white-space: pre-wrap; }
.clan-chat-message p { margin: 0 0 8px; }
.clan-chat-message p:last-child { margin-bottom: 0; }
.clan-chat-message a { color: var(--cyan-bright); text-decoration: underline; }
.clan-chat-message pre { overflow-x: auto; }
.clan-chat-message table { display: block; width: max-content; min-width: 100%; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.clan-chat-message th, .clan-chat-message td { min-width: 72px; padding: 5px 7px; border: 1px solid #294553; text-align: left; vertical-align: top; }
.clan-chat-message th { background: #142d39; color: var(--paper); font-weight: 700; }
.clan-chat-message .markdown-align-center { text-align: center; }
.clan-chat-message .markdown-align-right { text-align: right; }
.clan-chat-message blockquote { margin: 5px 0; padding-left: 8px; border-left: 2px solid var(--cyan); color: var(--muted); }
.clan-chat-typing { display: flex; align-items: center; gap: 4px; padding: 0 16px 10px; color: var(--muted); font-size: 9px; }
.clan-chat-typing[hidden] { display: none; }
.clan-chat-typing span { width: 4px; height: 4px; border-radius: 50%; background: var(--cyan-bright); animation: clan-chat-pulse .9s infinite alternate; }
.clan-chat-typing span:nth-child(2) { animation-delay: .2s; }
.clan-chat-typing span:nth-child(3) { animation-delay: .4s; margin-right: 4px; }
@keyframes clan-chat-pulse { to { opacity: .25; transform: translateY(-2px); } }
.clan-chat-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); }
.clan-chat-form textarea { width: 100%; min-height: 38px; max-height: 100px; resize: none; padding: 10px; border: 1px solid #294553; border-radius: 7px; background: #07131b; color: var(--paper); font-size: 11px; line-height: 1.4; }
.clan-chat-form .button { min-height: 38px; padding: 8px 13px; }
.clan-chat-links { display: flex; justify-content: center; gap: 14px; padding: 0 8px 8px; }
.clan-chat-links a { color: var(--cyan-bright); font-size: 9px; font-weight: 700; }
.clan-chat-disclaimer { margin: 0; padding: 0 10px 9px; color: #8297a1; font-size: 8px; text-align: center; }
.clan-chat-retry-button { margin-top: 8px; padding: 5px 10px; border: 1px solid #315465; border-radius: 5px; background: #0b1b24; color: var(--cyan-bright); font-size: 9px; font-weight: 700; cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.live-clan-chat-feed { overflow-y: auto; padding: 8px; }
.live-clan-chat-message { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 2px 6px; padding: 4px 2px; color: #e6e6d5; font-size: 9px; line-height: 1.45; }
.live-clan-chat-message time { color: #87947c; font-size: 8px; }
.live-clan-chat-message strong { color: #60d4e5; font-size: 9px; }
.live-clan-chat-message p { grid-column: 2; margin: 0; overflow-wrap: anywhere; }
.live-clan-chat-message a { color: #f2cb52; text-decoration: underline; }
.live-clan-chat-webhook { margin-left: 5px; color: #9da38f; font-size: 6px; letter-spacing: .06em; }
.live-clan-chat-empty { padding: 12px 5px; color: #9ca996; font-size: 9px; }
.live-clan-chat-discord { display: block; padding: 8px; border-top: 1px solid #435441; color: #d5c252; font-size: 8px; font-weight: 700; text-align: right; }
.clan-channel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0; }
.clan-channel-card h2 { margin: 6px 0; font: 700 22px/1.1 "Barlow Condensed", sans-serif; }
.clan-channel-card p { color: var(--muted); font-size: 10px; line-height: 1.5; }
.clan-webhook-permission { color: var(--muted); font-size: 8px; }
@media (max-width: 520px) {
  .account-economy { min-width: 0; white-space: normal; }
  .site-xp-summary { align-items: stretch; flex-direction: column; }
  .site-xp-progress { width: 100%; }
  .clan-chat-launcher { right: 14px; bottom: 14px; padding: 11px 14px; }
  .clan-chat-panel { right: 8px; bottom: 72px; width: calc(100vw - 16px); height: min(600px, calc(100dvh - 90px)); }
  .clan-channel-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .clan-chat-typing span { animation: none; }
}