/* Design tokens — the ONLY place colours, spacing, type scale and radii are defined. */
:root{
color-scheme:dark;
/* brand */
--c-accent:#5fb1ff; --c-accent-hi:#98d5ff; --c-accent-ink:#071727;
--c-cool:#8ec8ff;
/* Discord identity is separate from CyoriaSMP's own blue. */
--c-discord:#5865f2; --c-discord-hover:#4752c4; --c-discord-soft:rgba(88,101,242,.16);
/* neutral charcoal surfaces: keep blue for interactive accents only */
--c-bg:#0b0c0e; --c-surface:#121416; --c-card:#1a1b1e; --c-raised:#25272a; --c-input:#111214;
/* text */
--c-text:#f0f1f3; --c-muted:#b1b3b9; --c-faint:#858990;
/* lines + state */
--c-line:rgba(195,199,207,.14); --c-line-hi:rgba(195,199,207,.23);
--c-ok:#3dd4a0; --c-warn:#f5c04e; --c-bad:#fa808e;
--c-accent-soft:rgba(95,177,255,.09); --c-accent-line:rgba(95,177,255,.33); --c-accent-glow:rgba(95,177,255,.035);
/* role colours (staff) */
--role-owner:#ff6b6b; --role-coowner:#ff9f5a; --role-developer:#b18cff; --role-builder:#6cb6ff; --role-admin:#f5c04e; --role-moderator:#3dd4a0; --role-event:#5fb1ff; --role-trainee:#93a3bb;
/* type */
--font-sans:"Noto Sans Thai","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
--font-mono:"JetBrains Mono","Roboto Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
--fs-xs:.78rem; --fs-sm:.9rem; --fs-md:1rem; --fs-lg:1.15rem; --fs-xl:clamp(1.4rem,1.1rem + 1.2vw,1.9rem);
--fs-2xl:clamp(1.9rem,1.3rem + 2.4vw,3rem); --fs-hero:clamp(2.3rem,1.4rem + 4vw,4.2rem);
/* space (4px base) */
--s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:72px; --s-9:104px;
/* shape */
--r-sm:8px; --r-md:12px; --r-lg:18px; --r-pill:999px;
--shadow-1:0 1px 0 rgba(255,255,255,.03) inset,0 10px 30px rgba(0,0,0,.28);
--shadow-2:0 24px 70px rgba(0,0,0,.5);
/* layout */
--wrap:1240px; --gutter:clamp(16px,3.2vw,40px); --nav-h:68px;
--ease:cubic-bezier(.2,.7,.2,1);
/* ---- compatibility aliases (auth.js / legacy store, profile, voice modules read these names) ---- */
--primary:var(--c-accent); --primary-hover:var(--c-accent-hi); --primary-muted:var(--c-accent-soft); --primary-border:var(--c-accent-line);
--accent:var(--c-accent); --accent-hover:var(--c-accent-hi); --accent-border:var(--c-accent-line);
--bg-color:var(--c-bg); --bg-card:var(--c-card); --card-bg:var(--c-card); --bg-surface:var(--c-surface); --bg-elevated:var(--c-raised);
--text:var(--c-text); --text-main:var(--c-text); --text-muted:var(--c-muted); --text-secondary:var(--c-muted); --muted:var(--c-muted);
--line:var(--c-line); --border:var(--c-line-hi); --border-color:var(--c-line-hi);
--radius:var(--r-md); --radius-sm:var(--r-sm); --danger:var(--c-bad); --success:var(--c-ok); --shadow-lg:var(--shadow-2);
--font-th:var(--font-sans); --font-base:var(--font-sans);
}
:root[data-theme="light"]{ /* light theme is token-only: no component needs to know */
color-scheme:light;
--c-bg:#f5f5f6; --c-surface:#ededf0; --c-card:#ffffff; --c-raised:#e2e4e7; --c-input:#ffffff;
--c-text:#24252a; --c-muted:#535861; --c-faint:#757b83;
--c-line:rgba(36,39,46,.13); --c-line-hi:rgba(36,39,46,.22);
--c-accent:#1665bc; --c-accent-hi:#0b509d; --c-accent-ink:#fff; --c-accent-soft:rgba(22,101,188,.08); --c-accent-line:rgba(22,101,188,.3); --c-accent-glow:rgba(22,101,188,.03);
--shadow-1:0 1px 2px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.06); --shadow-2:0 24px 60px rgba(0,0,0,.14);
}
:root{--ac-green:var(--c-accent);--ac-line:var(--c-line-hi);--ac-panel:var(--c-card);--ac-panel-2:var(--c-raised)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 20px)}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--c-bg);color:var(--c-text);font:400 var(--fs-md)/1.7 var(--font-sans);overflow-x:clip;-webkit-font-smoothing:antialiased;isolation:isolate}
/* The actual CyoriaSMP live-site background: existing game artwork, dark scrim and blur.
Keep the artwork in public/assets/ and behind every page without adding an overlay DOM node. */
body::before{content:"";position:fixed;inset:-6vh -6vw;z-index:-1;pointer-events:none;
background-image:linear-gradient(180deg,rgba(5,5,6,.62) 0%,rgba(5,5,6,.88) 45%,rgba(5,5,6,.97) 100%),url("/assets/hero-bg-v2.webp");
background-size:cover;background-position:center;background-repeat:no-repeat;
filter:blur(24px) saturate(.8);transform:scale(1.02)}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
background:radial-gradient(850px 550px at 50% 0%,var(--c-accent-glow),transparent 68%)}
:root[data-theme="light"] body::before{filter:blur(15px) brightness(1.12) saturate(.7);opacity:.14}
main{flex:1 0 auto}
img,svg,video{max-width:100%;height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
input,select,textarea{background:var(--c-input);border:1px solid var(--c-line-hi);border-radius:var(--r-sm);padding:10px 12px;max-width:100%}
h1,h2,h3,h4{margin:0 0 var(--s-3);line-height:1.25;font-weight:800;letter-spacing:-.015em}
p{margin:0 0 var(--s-4)}
code,pre,kbd{font-family:var(--font-mono)}
code{font-size:.9em;background:var(--c-raised);border:1px solid var(--c-line);padding:.08em .45em;border-radius:6px}
[hidden]{display:none!important}
::selection{background:var(--c-accent);color:var(--c-accent-ink)}
:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:var(--s-4);top:-60px;z-index:999;background:var(--c-accent);color:var(--c-accent-ink);padding:var(--s-2) var(--s-4);border-radius:var(--r-sm);font-weight:700}
.skip-link:focus{top:var(--s-3)}
.text-muted{color:var(--c-muted)}
@media (prefers-reduced-motion:reduce),:root[data-reduced-motion="true"]{*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.wrap{width:min(var(--wrap),100% - var(--gutter)*2);margin-inline:auto}
.section{padding-block:clamp(40px,6vw,88px)}
.section--tight{padding-block:clamp(24px,3.5vw,48px)}
.section-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:var(--s-4);margin-bottom:var(--s-6)}
.section-head h2{font-size:var(--fs-2xl);margin:var(--s-2) 0 var(--s-2)}
.section-head p{color:var(--c-muted);margin:0;max-width:60ch}
.eyebrow{display:inline-flex;align-items:center;gap:var(--s-2);font:600 var(--fs-xs)/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--c-accent)}
.eyebrow b{display:grid;place-items:center;min-width:26px;height:22px;padding:0 6px;border:1px solid var(--c-accent-line);border-radius:6px;background:var(--c-accent-soft)}
h1 em,h2 em{font-style:normal;color:var(--c-accent)}
.grid{display:grid;gap:var(--s-4)}
.grid--auto{grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.grid--3{grid-template-columns:repeat(3,1fr)} .grid--2{grid-template-columns:repeat(2,1fr)}
.split{display:grid;gap:var(--s-6);grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
@media (max-width:980px){.grid--3{grid-template-columns:repeat(2,1fr)}.split{grid-template-columns:1fr}}
@media (max-width:620px){.grid--3,.grid--2{grid-template-columns:1fr}}
/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--c-bg) 86%,transparent);backdrop-filter:blur(16px);border-bottom:1px solid var(--c-line)}
.site-header .bar{display:flex;align-items:center;gap:var(--s-4);min-height:var(--nav-h)}
.brand{display:flex;align-items:center;gap:var(--s-3);font-weight:800;font-size:1.1rem;text-decoration:none;letter-spacing:-.02em}
.brand img{width:38px;height:38px;object-fit:contain;border-radius:8px}
.nav{display:flex;align-items:center;gap:2px;margin-left:var(--s-4)}
.nav a{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:var(--r-sm);text-decoration:none;color:var(--c-muted);font-weight:600;font-size:var(--fs-sm);transition:background .2s,color .2s}
.nav a:hover{background:var(--c-raised);color:var(--c-text)}
.nav .nav__external-icon{font-size:.75em;opacity:.82;margin-left:1px;flex-shrink:0}
.nav a[aria-current="page"]{background:var(--c-accent);color:var(--c-accent-ink)}
.nav i{font-size:.85em;opacity:.8}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:var(--s-2)}
.pill{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border:1px solid var(--c-line-hi);border-radius:var(--r-pill);font-size:var(--fs-sm);text-decoration:none;color:var(--c-muted);background:var(--c-surface)}
.pill strong{color:var(--c-text);font-variant-numeric:tabular-nums}
/* Shared live counters: Minecraft players / Discord online presence.
One pill visually, two independent links with the same existing live data. */
.header-presence{
display:inline-flex;
align-items:stretch;
flex:none;
min-width:0;
overflow:hidden;
border:1px solid var(--c-line-hi);
border-radius:var(--r-pill);
background:var(--c-surface);
}
.header-presence__part{
display:inline-flex;
justify-content:center;
align-items:center;
gap:6px;
padding:7px 10px;
min-height:34px;
color:var(--c-muted);
font-size:12px;
font-weight:650;
text-decoration:none;
white-space:nowrap;
transition:background .2s,color .2s;
}
.header-presence__part:hover{background:var(--c-raised);color:var(--c-text)}
.header-presence__part:focus-visible{outline:2px solid var(--c-accent);outline-offset:-3px}
.header-presence__part strong{color:var(--c-text);font-variant-numeric:tabular-nums}
.header-presence__part--discord i{color:var(--c-discord);font-size:15px}
.header-presence__divider{width:1px;align-self:center;height:17px;flex:none;background:var(--c-line-hi)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--c-faint);flex:none}
.dot.status-online{background:var(--c-ok);box-shadow:0 0 0 4px rgba(61,212,160,.18);animation:pulse 2.4s infinite}
.dot.status-offline{background:var(--c-bad)}
@keyframes pulse{50%{box-shadow:0 0 0 7px rgba(61,212,160,0)}}
.nav-toggle{display:none;margin-left:var(--s-2);width:42px;height:42px;border:1px solid var(--c-line-hi);border-radius:var(--r-sm);background:var(--c-surface);align-items:center;justify-content:center}
#authContainer{display:flex;align-items:center}
@media (max-width:1120px){
.nav-toggle{display:inline-flex}
.nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;margin:0;padding:var(--s-3) var(--gutter) var(--s-4);background:var(--c-bg);border-bottom:1px solid var(--c-line);display:none}
.nav.open{display:flex}
.nav a{padding:12px 14px}
}
@media (max-width:760px){
.header-presence__name{display:none}
.header-presence__part{gap:5px;padding:6px 9px}
}
@media (max-width:520px){
.header-presence__part{padding:6px 7px;min-height:32px;font-size:11px}
.header-presence__part--discord i{font-size:14px}
.header-presence__divider{height:15px}
}
/* ---------- footer ---------- */
.site-footer{margin-top:var(--s-9);border-top:1px solid var(--c-line);background:var(--c-surface)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s-7);padding-block:var(--s-8) var(--s-6)}
.footer-grid h2{font-size:var(--fs-xs);font-family:var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--c-faint);margin-bottom:var(--s-3)}
.footer-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-2)}
.footer-grid a{text-decoration:none;color:var(--c-muted)} .footer-grid a:hover{color:var(--c-accent)}
.footer-brand p{color:var(--c-muted);max-width:40ch;margin-top:var(--s-3)}
.socials{display:flex;gap:var(--s-2);margin-top:var(--s-4)}
.socials a{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--c-line-hi);border-radius:var(--r-sm);color:var(--c-muted);background:var(--c-card);transition:.2s}
.socials a:hover{color:var(--c-accent-ink);background:var(--c-accent);border-color:var(--c-accent)}
.footer-legal{border-top:1px solid var(--c-line);padding-block:var(--s-5);display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);justify-content:space-between;color:var(--c-faint);font-size:var(--fs-xs)}
@media (max-width:820px){.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}}
.footer-grid ul.cols{grid-template-columns:1fr 1fr;column-gap:var(--s-5)}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr;gap:var(--s-6)}.address{flex-wrap:wrap;padding:var(--s-3)}.address .copy{width:100%;justify-content:center}.address code{font-size:1rem}.connect{padding:var(--s-4)}}
/* Keep the compact mobile header readable with status, login, and menu visible. */
@media (max-width:440px){
.site-header .bar{gap:8px}
.site-header .brand{gap:0;font-size:0;flex:none}
.site-header .brand img{width:38px;height:38px}
.site-header .header-actions{gap:5px}
.site-header .header-presence__part{gap:4px;padding:6px 6px}
.site-header .nav-toggle{margin-left:2px}
}
@media (max-width:360px){
.site-header .bar{gap:3px}
.site-header .header-actions{gap:3px}
.site-header .nav-toggle{margin-left:0}
}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);padding:12px 20px;border-radius:var(--r-sm);border:1px solid transparent;font-weight:700;font-size:var(--fs-sm);text-decoration:none;transition:transform .2s var(--ease),background .2s,border-color .2s;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--c-accent);color:var(--c-accent-ink)} .btn--primary:hover{background:var(--c-accent-hi)}
.btn--ghost{background:transparent;border-color:var(--c-line-hi);color:var(--c-text)} .btn--ghost:hover{border-color:var(--c-accent);color:var(--c-accent)}
.btn--sm{padding:8px 14px}
.btn__external-icon{font-size:.82em;opacity:.85;flex-shrink:0;margin-left:2px}
.actions{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.card{background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-md);padding:var(--s-5);box-shadow:var(--shadow-1)}
a.card{display:block;text-decoration:none;transition:border-color .2s,transform .25s var(--ease)}
a.card:hover{border-color:var(--c-accent-line);transform:translateY(-3px)}
.tag{display:inline-block;font:600 var(--fs-xs)/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--c-accent)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:700;border:1px solid var(--c-line-hi);color:var(--c-muted);background:var(--c-surface)}
.copy{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:var(--r-sm);border:0;background:var(--c-accent);color:var(--c-accent-ink);font-weight:700;font-size:var(--fs-sm)}
.copy[data-state="done"]{background:var(--c-ok)} .copy[data-state="fail"]{background:var(--c-bad)}
.address{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:var(--s-2) var(--s-2) var(--s-2) var(--s-4);background:var(--c-input);border:1px solid var(--c-line-hi);border-radius:var(--r-md)}
.address code{background:none;border:0;padding:0;font-size:1.1rem;font-weight:700;color:var(--c-text);overflow-wrap:anywhere}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
.kv>div{padding:var(--s-3) var(--s-4);border:1px solid var(--c-line);border-radius:var(--r-sm);background:var(--c-surface)}
.kv span{display:block;font-size:var(--fs-xs);color:var(--c-faint)} .kv strong{font-size:var(--fs-sm)}
.steps{list-style:none;margin:var(--s-5) 0;padding:0;display:grid;gap:var(--s-3);counter-reset:s}
.steps li{display:flex;gap:var(--s-3);color:var(--c-muted);font-size:var(--fs-sm)}
.steps li::before{counter-increment:s;content:counter(s);flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--c-raised);border:1px solid var(--c-line-hi);color:var(--c-text);font:700 var(--fs-xs) var(--font-mono)}
.steps b{color:var(--c-text)}
.faq details{background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-md);margin-bottom:var(--s-3);transition:border-color .2s}
.faq details[open]{border-color:var(--c-accent-line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--s-4);padding:var(--s-4) var(--s-5);font-weight:700}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{transition:transform .25s;color:var(--c-accent)} .faq details[open] summary i{transform:rotate(45deg)}
.faq details>div{padding:0 var(--s-5) var(--s-4);color:var(--c-muted)}
.faq a{color:var(--c-accent)}
.faq .faq-inline-code{
padding:2px 5px;
border:1px solid var(--c-line-hi);
border-radius:5px;
background:var(--c-input);
color:var(--c-accent-hi);
font:650 .88em/1.5 var(--font-mono);
overflow-wrap:anywhere;
}
.prose{max-width:78ch} .prose h2{font-size:var(--fs-xl);margin-top:var(--s-6)} .prose h3{font-size:var(--fs-lg);margin-top:var(--s-5)}
.prose p,.prose li{color:var(--c-muted)} .prose strong{color:var(--c-text)} .prose ul{padding-left:1.3em}
.prose .info-card{background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-md);padding:var(--s-5) var(--s-6);margin-bottom:var(--s-4)}
.prose .info-card>h2:first-child{margin-top:0;display:flex;gap:var(--s-3);align-items:center}
.prose .info-card>h2 i{color:var(--c-accent)}
.tabs{display:flex;gap:var(--s-2);flex-wrap:wrap;border-bottom:1px solid var(--c-line);margin-bottom:var(--s-6)}
.tabs [role=tab]{padding:12px 18px;background:none;border:0;border-bottom:2px solid transparent;color:var(--c-muted);font-weight:700;margin-bottom:-1px}
.tabs [role=tab][aria-selected=true]{color:var(--c-accent);border-color:var(--c-accent)}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--c-raised);border:1px solid var(--c-line-hi);padding:10px 18px;border-radius:var(--r-pill);box-shadow:var(--shadow-2);z-index:500}
/* ---------- page hero (shared by every inner page) ---------- */
.page-hero{padding-block:clamp(36px,5vw,72px) clamp(20px,3vw,40px)}
.page-hero .crumbs{display:flex;gap:var(--s-2);font-size:var(--fs-xs);color:var(--c-faint);margin-bottom:var(--s-4)}
.page-hero .crumbs a{text-decoration:none} .page-hero .crumbs a:hover{color:var(--c-accent)}
.page-hero h1{font-size:var(--fs-hero);margin:var(--s-3) 0 var(--s-4);max-width:18ch}
.page-hero p.lead{font-size:var(--fs-lg);color:var(--c-muted);max-width:62ch}
.page-hero .actions{margin-top:var(--s-5)}
/* ---------- home ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,72px);align-items:center;padding-block:clamp(40px,7vw,96px) var(--s-6)}
.hero h1{font-size:var(--fs-hero);margin:var(--s-4) 0}
.hero .lead{font-size:var(--fs-lg);color:var(--c-muted);max-width:52ch}
.hero-meta{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-5);margin-top:var(--s-5);color:var(--c-muted);font-size:var(--fs-sm);align-items:center}
.hero-meta>span{display:inline-flex;align-items:center;gap:8px} .hero-meta strong{color:var(--c-text)}
.connect{padding:var(--s-6);background:linear-gradient(180deg,var(--c-card),var(--c-surface));border-color:var(--c-line-hi)}
.connect header{display:flex;gap:var(--s-4);align-items:center;margin-bottom:var(--s-5)}
.connect header > img{width:52px;height:52px;border-radius:12px}
.connect h2{font-size:var(--fs-lg);margin:2px 0 0}
.label{font:600 var(--fs-xs)/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--c-faint);display:block;margin-bottom:var(--s-2)}
.connect .kv{margin-top:var(--s-3)}
.strip{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--c-line);border-radius:var(--r-lg);background:var(--c-card);overflow:hidden}
.strip>div{display:flex;gap:var(--s-3);align-items:center;padding:var(--s-4) var(--s-5);border-right:1px solid var(--c-line)}
.strip>div:last-child{border:0}
.strip i{width:42px;height:42px;display:grid;place-items:center;border-radius:var(--r-sm);background:var(--c-accent-soft);color:var(--c-accent);flex:none}
.strip strong{display:block;font-size:var(--fs-sm)} .strip span{font-size:var(--fs-xs);color:var(--c-muted)}
.feature{padding:0;overflow:hidden;display:flex;flex-direction:column}
.feature .visual{aspect-ratio:16/8;background:var(--c-surface);display:grid;place-items:center;border-bottom:1px solid var(--c-line)}
.feature .visual img{width:100%;height:100%;object-fit:cover}
.feature .body{padding:var(--s-5);display:grid;gap:var(--s-2)} .feature h3{margin:0;font-size:var(--fs-lg)} .feature p{margin:0;color:var(--c-muted);font-size:var(--fs-sm)}
.community{position:relative;overflow:hidden;padding:var(--s-7);background:radial-gradient(500px 300px at 100% 0,var(--c-accent-glow),transparent 70%),var(--c-card)}
.community img.mark{width:72px;margin-bottom:var(--s-4)} .community h2{font-size:var(--fs-2xl)} .community p{color:var(--c-muted)}
@media (max-width:980px){.hero{grid-template-columns:1fr}.strip{grid-template-columns:1fr 1fr}.strip>div:nth-child(2){border-right:0}.strip>div:nth-child(-n+2){border-bottom:1px solid var(--c-line)}}
@media (max-width:560px){.strip{grid-template-columns:1fr}.strip>div{border-right:0;border-bottom:1px solid var(--c-line)}.strip>div:last-child{border:0}.community{padding:var(--s-5)}}
/* ---------- staff ---------- */
.tier{margin-bottom:var(--s-7)}
.tier h3{display:flex;align-items:center;gap:var(--s-3);font:700 var(--fs-xs)/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--role);margin-bottom:var(--s-4)}
.tier h3::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--role),transparent);opacity:.4}
.tier h3 span{color:var(--c-faint);font-weight:500}
.people{display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}
.person{display:flex;gap:var(--s-4);align-items:center;padding:var(--s-4);background:var(--c-card);border:1px solid var(--c-line);border-left:3px solid var(--role);border-radius:var(--r-md)}
.person img{width:60px;height:60px;border-radius:12px;image-rendering:pixelated;background:var(--c-surface);flex:none}
.person b{display:block;line-height:1.3;overflow-wrap:anywhere} .person .meta{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0}
.person q{display:block;font-size:var(--fs-xs);color:var(--c-muted);quotes:"“" "”";line-height:1.5}
.person .role-title{font-size:var(--fs-xs);font-weight:700;color:var(--role)}
.duty h3{display:flex;gap:var(--s-3);align-items:center;font-size:var(--fs-md)} .duty h3 i{color:var(--c-accent)} .duty ul{margin:0;padding-left:1.2em;color:var(--c-muted);font-size:var(--fs-sm)}
.contact{display:flex;gap:var(--s-4);align-items:center} .contact i{font-size:1.4rem;color:var(--c-accent);width:28px;text-align:center} .contact strong{display:block} .contact span{font-size:var(--fs-sm);color:var(--c-muted)}
.apply{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--s-6);align-items:center;padding:var(--s-7);background:radial-gradient(500px 280px at 0 0,var(--c-accent-glow),transparent 70%),var(--c-card)}
.apply ul{color:var(--c-muted);padding-left:1.2em;margin:0}
@media (max-width:820px){.apply{grid-template-columns:1fr;padding:var(--s-5)}}
/* ---------- changelog ---------- */
.timeline{position:relative;display:grid;gap:var(--s-5);padding-left:var(--s-6);border-left:1px solid var(--c-line-hi);margin-left:6px}
.release{position:relative}
.release::before{content:"";position:absolute;left:calc(-1*var(--s-6) - 6px);top:28px;width:11px;height:11px;border-radius:50%;background:var(--c-accent);box-shadow:0 0 0 4px var(--c-bg)}
.release header{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);align-items:baseline;margin-bottom:var(--s-4)}
.release h2{font-size:var(--fs-lg);margin:0;display:flex;gap:var(--s-3);align-items:center} .release h2 i{color:var(--c-accent)}
.release time{font:500 var(--fs-xs) var(--font-mono);color:var(--c-faint)}
.release ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3)}
.release li{display:flex;gap:var(--s-3);color:var(--c-muted);font-size:var(--fs-sm)} .release li>i{margin-top:5px;color:var(--c-faint);width:16px;text-align:center;flex:none}
.u-tag{display:inline-block;margin-right:8px;padding:1px 8px;border-radius:6px;font:700 11px/18px var(--font-mono);text-transform:uppercase}
.u-new{background:rgba(61,212,160,.15);color:var(--c-ok)} .u-fix{background:rgba(245,192,78,.15);color:var(--c-warn)} .u-change{background:rgba(127,183,255,.15);color:var(--c-cool)}
/* ---------- portal ---------- */
.stat{display:grid;gap:4px} .stat span{font-size:var(--fs-sm);color:var(--c-muted)} .stat strong{font-size:var(--fs-2xl);font-variant-numeric:tabular-nums;line-height:1.1}
.meter{height:6px;border-radius:9px;background:var(--c-raised);overflow:hidden} .meter>i{display:block;height:100%;width:0;background:var(--c-accent);transition:width .6s var(--ease)}
.roster{display:grid;gap:var(--s-2);max-height:420px;overflow:auto;padding-right:6px}
.roster .row{display:flex;gap:var(--s-3);align-items:center;padding:8px 10px;border-radius:var(--r-sm);background:var(--c-surface)}
.roster img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.roster small{color:var(--c-faint);display:block}
.state{padding:var(--s-6);text-align:center;color:var(--c-muted)}
details.tech pre{background:var(--c-input);border:1px solid var(--c-line);padding:var(--s-4);border-radius:var(--r-sm);font-size:var(--fs-xs);overflow:auto;max-height:320px}
.tiers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-6) var(--s-6)}
.tiers .tier{margin:0}.tier--wide{grid-column:1/-1}
.tiers .people{grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr))}
@media (max-width:900px){.tiers{grid-template-columns:1fr}}
/* Portal: the Minecraft player roster is a full-width section, not a half-page
panel paired with a redundant Discord member list. */
.portal-player-section{min-width:0}
.portal-player-card{min-width:0}
.portal-player-roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,245px),1fr));gap:var(--s-3);max-height:480px;overflow-y:auto}
.portal-player-roster .row{min-width:0;padding:var(--s-4);font-size:var(--fs-sm)}
.portal-player-roster .row b{overflow-wrap:anywhere}
.portal-player-roster .state{grid-column:1/-1}
/* Storefront v2 — scoped, independent of legacy account/voice modules. */
.page-store .page-hero{padding-bottom:var(--s-5)}
.page-store .page-hero h1{max-width:none}
.page-store .app-module{padding-bottom:var(--s-8)}
.shopfront{display:grid;gap:var(--s-7)}
.shop-overline{font:750 var(--fs-xs)/1.5 var(--font-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--c-accent-hi)}
.shop-benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--c-line);border-radius:var(--r-lg);background:var(--c-card);overflow:hidden}
.shop-benefits>div{display:flex;gap:var(--s-3);align-items:center;padding:var(--s-4) var(--s-5);border-right:1px solid var(--c-line)}
.shop-benefits>div:last-child{border:0}
.shop-benefits i{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:var(--r-md);background:var(--c-accent-soft);color:var(--c-accent);font-size:var(--fs-lg)}
.shop-benefits b,.shop-benefits small{display:block}
.shop-benefits b{font-size:var(--fs-sm)}
.shop-benefits small{font-size:var(--fs-xs);color:var(--c-muted);margin-top:2px}
.shop-benefits a,.shop-sidebar__help a{color:var(--c-accent-hi)}
.shop-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-5);margin-bottom:var(--s-6)}
.shop-heading h2{font-size:var(--fs-2xl);margin:var(--s-2) 0}
.shop-heading p{color:var(--c-muted);margin:0}
.shop-count{white-space:nowrap;font-size:var(--fs-xs);color:var(--c-muted);padding:8px 12px;border-radius:var(--r-pill);border:1px solid var(--c-line)}
.shop-layout{display:grid;grid-template-columns:235px minmax(0,1fr);gap:var(--s-5);align-items:start}
.shop-sidebar{position:sticky;top:calc(var(--nav-h) + var(--s-4));border:1px solid var(--c-line);border-radius:var(--r-lg);background:var(--c-card);padding:var(--s-4)}
.shop-sidebar__title{display:flex;align-items:center;gap:var(--s-2);font-size:var(--fs-sm);font-weight:800;padding:var(--s-2) var(--s-2) var(--s-4)}
.shop-sidebar__title i{color:var(--c-accent)}
.shop-sidebar .category-tabs{display:grid;gap:var(--s-1)}
.shop-sidebar .category-tab{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px;border:1px solid transparent;border-radius:var(--r-sm);background:transparent;color:var(--c-muted);text-align:left;cursor:pointer;font-size:var(--fs-sm);width:100%}
.shop-sidebar .category-tab>span{display:flex;gap:10px;align-items:center;min-width:0}
.shop-sidebar .category-tab i{width:19px;text-align:center}
.shop-sidebar .category-tab small{font:650 var(--fs-xs)/1 var(--font-mono);color:var(--c-faint)}
.shop-sidebar .category-tab:hover{background:var(--c-raised);color:var(--c-text)}
.shop-sidebar .category-tab.active{color:var(--c-accent-hi);background:var(--c-accent-soft);border-color:var(--c-accent-line)}
.shop-sidebar .category-tab.active small{color:var(--c-accent-hi)}
.shop-sidebar__help{margin-top:var(--s-5);padding:var(--s-4) var(--s-3);border-top:1px solid var(--c-line);color:var(--c-muted);font-size:var(--fs-xs)}
.shop-sidebar__help>i{display:block;color:var(--c-accent);font-size:20px;margin-bottom:var(--s-2)}
.shop-sidebar__help strong{display:block;color:var(--c-text);font-size:var(--fs-sm)}
.shop-sidebar__help p{line-height:1.8}
.shop-toolbar{display:flex;align-items:stretch;gap:var(--s-3)}
.shop-search{display:flex;align-items:center;flex:1;min-width:0;gap:var(--s-3);padding:0 var(--s-4);background:var(--c-card);border:1px solid var(--c-line-hi);border-radius:var(--r-md)}
.shop-search i{color:var(--c-faint)}
.shop-search:focus-within{border-color:var(--c-accent)}
.shop-search input{width:100%;min-width:0;padding:14px 0;background:none;border:0;outline:0;color:var(--c-text);font:inherit;font-size:var(--fs-sm)}
.shop-search input::placeholder{color:var(--c-faint)}
.shop-sort{display:flex;align-items:center;gap:8px;padding:0 12px;background:var(--c-card);border:1px solid var(--c-line-hi);border-radius:var(--r-md)}
.shop-sort span{white-space:nowrap;color:var(--c-faint);font-size:var(--fs-xs)}
.shop-sort select{background:transparent;color:var(--c-text);border:0;padding:12px 5px;font:inherit;font-size:var(--fs-sm);max-width:175px}
.shop-sort select option{background:var(--c-card);color:var(--c-text)}
.shop-results{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:var(--s-5) 0 var(--s-4);font-size:var(--fs-sm)}
.shop-results strong{font-size:var(--fs-lg)}
.shop-results span{color:var(--c-muted);font-size:var(--fs-xs)}
.shop-main .product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4);min-height:190px}
.shop-main .product-card{display:flex;flex-direction:column;gap:0;min-width:0;min-height:0;padding:0;border-radius:var(--r-lg);overflow:hidden;background:var(--c-card);border:1px solid var(--c-line);transition:transform .2s var(--ease),border-color .2s}
.shop-main .product-card:hover{transform:translateY(-4px);border-color:var(--c-accent-line)}
.shop-card__visual{position:relative;display:grid;place-items:center;aspect-ratio:1.22;background:var(--c-surface);border-bottom:1px solid var(--c-line);padding:var(--s-4)}
.shop-card__visual img{width:100%;height:100%;max-height:215px;object-fit:contain;transition:transform .3s var(--ease);filter:drop-shadow(0 12px 15px rgba(0,0,0,.32))}
.product-card:hover .shop-card__visual img{transform:scale(1.065)}
.shop-card__category{position:absolute;left:12px;bottom:12px;border:1px solid var(--c-line-hi);background:var(--c-card);color:var(--c-muted);padding:4px 9px;border-radius:var(--r-pill);font-size:11px;font-weight:650}
.shop-card__offer{position:absolute;left:12px;top:12px;background:var(--c-accent);color:var(--c-accent-ink);font:800 11px/1.3 var(--font-mono);border-radius:var(--r-sm);padding:5px 9px}
.shop-card__body{display:flex;flex:1;flex-direction:column;padding:var(--s-4);gap:var(--s-2)}
.shop-card__body .product-title{font-size:1rem;line-height:1.4;margin:0}
.shop-card__desc{font-size:var(--fs-xs);color:var(--c-muted);line-height:1.7;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.65em}
.shop-card__stock{font-size:11px;color:var(--c-ok);margin-top:var(--s-2)}
.product-card--disabled .shop-card__stock{color:var(--c-warn)}
.shop-card__pricing{margin-top:auto;padding-top:var(--s-4);display:grid;gap:2px}
.shop-card__price-label{font-size:11px;color:var(--c-faint)}
.shop-card__price{display:flex;align-items:center;gap:9px;font-size:1.38rem;font-weight:850;letter-spacing:-.03em}
.shop-card__price del{color:var(--c-faint);font-size:var(--fs-xs);font-weight:450}
.shop-card__pricing small{font-size:11px;color:var(--c-muted)}
.shop-card__button{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:var(--s-4);width:100%;padding:12px 9px;border:1px solid var(--c-accent-line);border-radius:var(--r-sm);background:var(--c-accent-soft);color:var(--c-accent-hi);font:750 var(--fs-sm)/1.4 var(--font-sans);cursor:pointer;transition:background .2s}
.shop-card__button:hover{background:var(--c-accent);color:var(--c-accent-ink)}
.shop-empty,.shop-loading{grid-column:1/-1;min-height:240px;text-align:center;display:grid;justify-items:center;align-content:center;gap:10px;padding:var(--s-6);background:var(--c-card);border-radius:var(--r-lg);border:1px dashed var(--c-line-hi)}
.shop-empty i{font-size:2rem;color:var(--c-accent)}
.shop-empty h3{margin:0}.shop-empty p,.shop-loading{color:var(--c-muted)}
.shop-endcap{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);padding:var(--s-6);background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-lg)}
.shop-endcap h2{margin:var(--s-2) 0;font-size:var(--fs-xl)}
.shop-endcap p{margin:0;color:var(--c-muted)}
.shop-dialog-open{overflow:hidden}
.shop-detail{position:relative;width:min(900px,100%);max-width:900px;padding:0!important;overflow:auto}
.shop-detail__close{position:absolute;z-index:3;top:14px;right:14px}
.shop-detail__grid{display:grid;grid-template-columns:.85fr 1.15fr}
.shop-detail__image{display:grid;place-items:center;min-height:415px;padding:var(--s-6);background:var(--c-surface)}
.shop-detail__image img{width:95%;max-height:340px;object-fit:contain}
.shop-detail__info{padding:var(--s-7) var(--s-6)}
.shop-detail__info h2{font-size:var(--fs-2xl);margin:var(--s-3) 0}
.shop-detail__info>p{font-size:var(--fs-sm);color:var(--c-muted);line-height:1.8}
.shop-detail__info h3{font-size:var(--fs-sm);margin:var(--s-4) 0 var(--s-2)}
.shop-detail__features{list-style:none;display:grid;gap:7px;padding:0;color:var(--c-muted);font-size:var(--fs-sm)}
.shop-detail__features li{display:flex;gap:9px}.shop-detail__features i{color:var(--c-ok);padding-top:5px}
.shop-detail__purchase{border-top:1px solid var(--c-line);margin-top:var(--s-5);padding-top:var(--s-5);display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap}
.shop-detail__purchase>div{display:grid;gap:2px}.shop-detail__purchase small{color:var(--c-faint)}
.shop-detail__purchase strong{font-size:var(--fs-xl)}.shop-detail__purchase del{font-size:var(--fs-xs);color:var(--c-faint)}
.shop-detail__purchase span{font-size:var(--fs-xs);color:var(--c-muted)}
.shop-detail__availability{font-size:var(--fs-xs)!important}
.shop-image--missing::after{content:"\f466";font-family:"Font Awesome 6 Free";font-weight:900;color:var(--c-accent);font-size:clamp(40px,5vw,72px);opacity:.45}
.page-store .modal-content{background:var(--c-card);border-color:var(--c-line-hi);color:var(--c-text)}
.page-store .modal-close{color:var(--c-text);background:var(--c-raised);border-color:var(--c-line)}
.page-store .payment-option-btn{background:var(--c-surface);border-color:var(--c-line-hi)}
.page-store .payment-option-balance{color:var(--c-muted)}
@media(max-width:1060px){.shop-layout{grid-template-columns:200px minmax(0,1fr)}.shop-main .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.shop-benefits{grid-template-columns:1fr}.shop-benefits>div{border-right:0;border-bottom:1px solid var(--c-line)}.shop-benefits>div:last-child{border:0}.shop-layout{grid-template-columns:1fr}.shop-sidebar{position:static}.shop-sidebar .category-tabs{display:flex;flex-wrap:wrap}.shop-sidebar .category-tab{width:auto;border-color:var(--c-line);padding:9px 11px}.shop-sidebar__help{display:none}.shop-heading{align-items:flex-start;flex-direction:column}.shop-detail__grid{grid-template-columns:1fr}.shop-detail__image{min-height:200px}.shop-detail__image img{max-height:180px}.shop-detail__info{padding:var(--s-5)}}
@media(max-width:510px){.shopfront{gap:var(--s-5)}.shop-toolbar{flex-direction:column}.shop-sort{justify-content:space-between}.shop-sort select{max-width:none}.shop-main .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2)}.shop-card__visual{padding:8px}.shop-card__body{padding:12px}.shop-card__body .product-title{font-size:var(--fs-sm)}.shop-card__price{font-size:var(--fs-lg)}.shop-card__button{font-size:var(--fs-xs)}.shop-endcap{flex-direction:column;align-items:flex-start}}
/* Staff and standalone policy docs. */
.staff-intro{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);margin-bottom:var(--s-7);padding:var(--s-6);background:radial-gradient(500px 280px at 100% 0,var(--c-accent-glow),transparent 75%),var(--c-card)}
.staff-intro h2{font-size:var(--fs-xl);margin:var(--s-2) 0}
.staff-intro p{color:var(--c-muted);margin:0}
.staff-sync{display:inline-flex;align-items:center;gap:9px;flex:none;padding:9px 12px;border:1px solid var(--c-line-hi);border-radius:var(--r-pill);font-size:var(--fs-xs);color:var(--c-muted)}
.staff-sync[data-state=snapshot]{color:var(--c-accent);border-color:var(--c-accent-line)}
.staff-sync[data-state=live]{color:var(--c-ok);border-color:var(--c-ok)}
.staff-sync[data-state=fallback]{color:var(--c-warn)}
.page-staff .tiers .tier[hidden]{display:none}
.page-staff .person{min-height:85px;transition:border-color .2s}
.page-staff .person:hover{border-color:var(--c-line-hi)}
.page-staff .person-avatar{display:grid;place-items:center;flex:none;width:54px;height:54px;border-radius:var(--r-md);background:var(--c-accent-soft);color:var(--role);border:1px solid var(--c-line-hi);font-weight:850;font-size:1.2rem}
.staff-empty{grid-column:1/-1;text-align:center;color:var(--c-muted);padding:var(--s-7)}
.rules-layout{display:grid;grid-template-columns:minmax(200px,255px) minmax(0,1fr);gap:var(--s-5);align-items:start}
.rules-sidebar{position:sticky;top:calc(var(--nav-h) + var(--s-4));background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-lg);overflow:hidden;padding:var(--s-4)}
.rules-sidebar__title{display:flex;gap:var(--s-3);align-items:center;font-size:var(--fs-sm);font-weight:800;margin-bottom:var(--s-3);padding:var(--s-2)}
.rules-sidebar__title i{color:var(--c-accent)}
.rules-sidebar nav{display:grid;gap:4px}
.rules-sidebar a{display:flex;gap:9px;padding:10px 12px;border-radius:var(--r-sm);color:var(--c-muted);font-size:var(--fs-sm);text-decoration:none}
.rules-sidebar a:hover{color:var(--c-accent-hi);background:var(--c-accent-soft)}
.rules-doc-links{display:grid;gap:4px;margin-top:var(--s-4);padding-top:var(--s-4);border-top:1px solid var(--c-line)}
.rules-doc-links strong{font-size:var(--fs-xs);color:var(--c-faint);padding:var(--s-2)}
.rules-doc-links i{color:var(--c-accent)}
.rules-document{min-width:0;padding:var(--s-6);border:1px solid var(--c-line);border-radius:var(--r-lg);background:var(--c-card)}
/* .prose caps reading text at 78ch globally; document shells must not inherit that cap. */
.rules-document.prose{max-width:none}
.rules-document__head{border-bottom:1px solid var(--c-line);margin-bottom:var(--s-5)}
.rules-document__head p{color:var(--c-muted);font-size:var(--fs-sm)}
.rules-document h2[id]{scroll-margin-top:calc(var(--nav-h) + var(--s-5))}
.rules-document .info-card{border:1px solid var(--c-line);border-radius:var(--r-md);padding:var(--s-4);margin-bottom:var(--s-4);background:var(--c-surface)}
.rules-document .info-card h2{margin-top:0}
.rules-document .info-card h3{font-size:var(--fs-md)}
.rules-standalone{padding:var(--s-6);background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-lg)}
/* Full desktop document surface with a comfortable bound, not a narrow 78ch card. */
.rules-standalone.prose{max-width:1100px;min-width:0}
.rules-standalone .info-card{max-width:none}
.rules-standalone :is(p,li){overflow-wrap:anywhere}
.rules-doc-nav{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-bottom:var(--s-6);padding-bottom:var(--s-4);border-bottom:1px solid var(--c-line)}
.rules-doc-nav a{border:1px solid var(--c-line-hi);border-radius:var(--r-pill);padding:8px 14px;text-decoration:none;font-size:var(--fs-sm)}
.rules-doc-nav a:hover{background:var(--c-accent-soft);color:var(--c-accent-hi)}
@media(max-width:900px){.rules-layout{grid-template-columns:1fr}.rules-sidebar{position:static}.rules-sidebar nav{display:flex;flex-wrap:wrap}.rules-sidebar nav a{border:1px solid var(--c-line)}}
@media(max-width:620px){.staff-intro{align-items:flex-start;flex-direction:column}.rules-document,.rules-standalone{padding:var(--s-4)}}
.page-staff .person img.person-avatar{object-fit:cover;image-rendering:pixelated}
.page-staff .person .person-avatar[hidden]{display:none!important}
/* CyoriaSMP community widget. Shared blue/black brand tokens. */
.cy-community {
--cw-ink: var(--c-text);
--cw-muted: var(--c-muted);
--cw-highlight: var(--c-accent);
--cw-highlight-ink: var(--c-accent-ink);
--cw-panel: var(--c-card);
--cw-dock: var(--c-surface);
position: fixed;
z-index: 180;
/* Single fixed support dock: server stats and Discord Tickets. */
right: 20px;
bottom: 20px;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 12px;
width: min(218px, calc(100vw - 32px));
font-family: var(--font-sans);
color: var(--cw-ink);
pointer-events: none;
isolation: isolate;
}
.cy-community > * { pointer-events: auto; }
.cy-community button, .cy-community a { -webkit-tap-highlight-color: transparent; }
.cy-community__panel {
position: relative;
width: 100%;
padding: 8px 0 0;
opacity: 1;
transform: translateY(0);
transition: opacity .2s ease, transform .2s ease;
}
.cy-community:not(.is-open) .cy-community__panel {
display: none;
}
.cy-community__socials {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 7px;
margin-bottom: 8px;
}
.cy-community__social {
display: grid;
width: 34px;
height: 34px;
place-items: center;
border-radius: 12px;
background: var(--c-raised);
color: var(--c-text);
text-decoration: none;
font-size: 15px;
border: 1px solid var(--c-line-hi);
transition: transform .18s ease, filter .18s ease;
}
.cy-community__social--facebook { background: #1978ef; color: #fff; border-color: transparent; }
.cy-community__social--tiktok { background: #08070c; color: #fff; border-color: transparent; }
.cy-community__social--discord { background: var(--c-discord); color: #fff; border-color: transparent; }
.cy-community__social.cy-community__social--discord:hover { background: var(--c-discord-hover); filter: none; }
.cy-community__social--instagram { background: #dc2f67; color: #fff; border-color: transparent; }
.cy-community__social--youtube { background: #ff0033; color: #fff; border-color: transparent; }
.cy-community__social:hover { transform: translateY(-2px); filter: brightness(1.15); }
.cy-community__discord {
display: flex;
gap: 12px;
align-items: center;
width: 100%;
min-height: 62px;
padding: 12px 13px;
border-radius: 16px 16px 0 0;
color: #fff;
text-decoration: none;
background: linear-gradient(115deg, var(--c-discord), var(--c-discord-hover));
border: 1px solid var(--c-line-hi);
border-bottom: 0;
transition: filter .2s;
}
.cy-community__discord:hover { filter: brightness(1.09); }
.cy-community__discord-mark {
display: grid;
place-items: center;
width: 37px;
height: 37px;
flex: none;
border-radius: 12px;
font-size: 20px;
color: #fff;
background: rgba(255,255,255,.13);
}
.cy-community__discord-label { min-width: 0; }
.cy-community__eyebrow {
display: block;
font-size: 10px;
font-weight: 650;
letter-spacing: .08em;
text-transform: uppercase;
opacity: .83;
}
.cy-community__discord-count {
display: block;
font-size: 14px;
font-weight: 800;
line-height: 1.35;
font-variant-numeric: tabular-nums;
}
.cy-community__status {
background: var(--cw-panel);
border: 1px solid var(--c-line-hi);
border-top: 0;
border-bottom: 0;
padding: 12px 16px 14px;
}
.cy-community__status-top {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.cy-community__status-top > div { display: grid; gap: 7px; }
.cy-community__status-top > i { color: var(--c-muted); font-size: 18px; }
.cy-community__status-number {
display: flex;
align-items: center;
gap: 7px;
font-size: 13px;
font-weight: 800;
font-variant-numeric: tabular-nums;
}
.cy-community__dot {
width: 7px;
height: 7px;
flex: none;
border-radius: 50%;
background: var(--c-faint);
}
.cy-community__dot.is-online { background: var(--c-ok); box-shadow: 0 0 9px var(--c-accent-glow); }
.cy-community__dot.is-offline { background: var(--c-bad); }
.cy-community__copy {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
min-height: 43px;
gap: 10px;
border: 0;
padding: 11px 16px;
border-radius: 0 0 15px 15px;
background: linear-gradient(110deg, var(--c-accent), var(--c-accent-hi));
color: var(--cw-highlight-ink);
cursor: pointer;
text-align: left;
font: 750 12px/1.3 var(--font-sans);
}
.cy-community__copy:hover { filter: brightness(1.1); }
.cy-community__copy:focus-visible, .cy-community__toggle:focus-visible,
.cy-community__close:focus-visible, .cy-community__social:focus-visible {
outline: 2px solid var(--c-accent-hi);
outline-offset: 3px;
}
.cy-community__copy-ip {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-style: italic;
}
.cy-community__copy span:last-child { display: inline-flex; align-items: center; gap: 5px; }
.cy-community__close {
position: static;
flex: 0 0 34px;
width: 34px;
height: 34px;
display: grid;
place-items: center;
border: 1px solid var(--c-line-hi);
border-radius: 12px;
color: var(--c-muted);
background: var(--c-raised);
cursor: pointer;
}
.cy-community__close:hover { color: var(--c-accent); border-color: var(--c-accent-line); }
.cy-community__dock {
display: flex;
align-items: stretch;
width: min(190px, 100%);
gap: 0;
min-height: 40px;
border-radius: 999px;
border: 1px solid var(--c-line-hi);
background: var(--cw-dock);
box-shadow: var(--shadow-1);
overflow: hidden;
}
.cy-community__toggle {
display: flex;
flex: 1 1 auto;
min-width: 0;
justify-content: center;
align-items: center;
gap: 6px;
min-height: 38px;
margin: 0;
padding: 0 6px 0 9px;
border: 0;
border-radius: 0;
background: transparent;
color: var(--c-text);
cursor: pointer;
box-shadow: none;
font: 750 11px/1 var(--font-sans);
font-variant-numeric: tabular-nums;
transition: background .2s;
}
.cy-community__ticket {
display: grid;
place-items: center;
width: 40px;
min-width: 40px;
margin: 0;
padding: 0;
border: 0;
border-left: 1px solid var(--c-line-hi);
border-radius: 0;
background: linear-gradient(145deg, var(--c-accent), var(--c-accent-hi));
color: var(--cw-highlight-ink);
font: inherit;
font-size: 16px;
cursor: pointer;
transition: filter .2s, background .2s;
}
.cy-community__ticket:hover { filter: brightness(1.14); }
.cy-community__ticket-label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.cy-community__ticket:focus-visible {
outline: 2px solid var(--c-accent-hi);
outline-offset: -4px;
}
.cy-community__toggle:hover { background: var(--c-raised); border-color: var(--c-accent-line); }
.cy-community__toggle .cy-community__pill-count {
display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.cy-community__toggle .cy-community__pill-count--discord { color: var(--c-discord); }
.cy-community__toggle .cy-community__chevron { font-size: 11px; transition: transform .2s; }
.cy-community.is-open .cy-community__chevron { transform: rotate(180deg); }
.cy-community__divider { height: 17px; width: 1px; background: var(--c-line-hi); }
.cy-community__toggle .cy-community__dot { width: 6px; height: 6px; }
.cy-community__toggle [data-community-players],
.cy-community__toggle [data-community-discord] { max-width: 70px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) {
.cy-community { right: 14px; bottom: 16px; width: min(218px, calc(100vw - 28px)); }
.cy-community__panel { max-height: none; }
}
@media (max-height: 540px) {
.cy-community { bottom: 14px; gap: 10px; }
.cy-community__panel {
max-height: calc(100dvh - 116px);
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
}
.cy-community__close { position: static; margin: 0; }
}
@media (max-width: 320px) {
.cy-community__social { width: 30px; height: 30px; font-size: 13px; }
.cy-community__socials { gap: 5px; }
.cy-community__close { width: 30px; height: 30px; flex-basis: 30px; }
.cy-community__toggle { padding: 0 10px; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
.cy-community *, .cy-community *::before, .cy-community *::after { transition: none !important; animation: none !important; }
}
/* Announce server errors accessibly without adding a redundant third line. */
.cy-community__server-label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* CyoriaSMP legal documents • editorial reading layout; limited to TOS / Privacy. */
.page-tos,.page-privacy{--legal-soft:var(--c-surface)}
.page-tos .page-hero,.page-privacy .page-hero{padding-bottom:var(--s-5)}
.legal-page-section{padding-top:var(--s-3);padding-bottom:clamp(52px,6vw,90px)}
.legal-layout{display:grid;grid-template-columns:minmax(220px,254px) minmax(0,1fr);gap:clamp(20px,3vw,36px);align-items:start}
.legal-content{min-width:0;display:grid;gap:var(--s-5)}
.legal-sidebar{min-width:0;position:sticky;top:calc(var(--nav-h) + 20px)}
.legal-sidebar__inner{background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-1)}
.legal-sidebar__heading{display:flex;align-items:center;gap:10px;padding:20px 19px 16px;border-bottom:1px solid var(--c-line);font-size:var(--fs-sm)}
.legal-sidebar__heading>i{color:var(--c-accent)}
.legal-sidebar__heading strong{flex:1}
.legal-sidebar__heading small{color:var(--c-faint);font-size:11px;font-weight:500}
.legal-toc{display:grid;padding:10px 9px;max-height:calc(100dvh - var(--nav-h) - 235px);overflow:auto;scrollbar-width:thin;scrollbar-color:var(--c-raised) transparent}
.legal-toc__link{display:flex;align-items:flex-start;gap:11px;padding:11px 10px;border-radius:9px;text-decoration:none;color:var(--c-muted);line-height:1.5;font-size:13.5px;transition:color .16s,background .16s}
.legal-toc__link>span:first-child{flex:none;font:700 11px/1.8 var(--font-mono);color:var(--c-faint)}
.legal-toc__link>span:last-child{flex:1;min-width:0}
.legal-toc__link:hover,.legal-toc__link[aria-current="location"]{color:var(--c-text);background:var(--c-raised)}
.legal-toc__link[aria-current="location"]{box-shadow:inset 3px 0 var(--c-accent)}
.legal-toc__link[aria-current="location"]>span:first-child{color:var(--c-accent)}
.legal-sidebar__footer{padding:15px 18px 20px;border-top:1px solid var(--c-line);display:grid;gap:10px}
.legal-sidebar__footer>span{color:var(--c-faint);font-size:11px}
.legal-support{display:inline-flex;align-items:center;justify-content:flex-start;gap:9px;font-size:12px;font-weight:700;color:var(--c-accent-hi);text-decoration:none;line-height:1.6}
.legal-support:hover{text-decoration:underline}
.legal-support i:last-child{margin-left:auto;font-size:10px}
.legal-switch{display:flex;flex-wrap:wrap;gap:5px;align-items:center;width:max-content;max-width:100%;background:var(--c-surface);border:1px solid var(--c-line);border-radius:11px;padding:5px}
.legal-switch>a{font-size:12px;font-weight:700;text-decoration:none;padding:10px 15px;border-radius:8px;color:var(--c-muted);transition:background .2s,color .2s}
.legal-switch>a:hover{color:var(--c-text)}
.legal-switch>a[aria-current="page"]{color:var(--c-text);background:var(--c-raised);box-shadow:0 1px 4px rgba(0,0,0,.14)}
.legal-overview{position:relative;overflow:hidden;border:1px solid var(--c-line-hi);border-radius:var(--r-lg);padding:clamp(22px,3.2vw,36px);background:var(--c-card)}
.legal-overview::before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:linear-gradient(90deg,var(--c-accent),transparent 65%)}
.legal-overview__top{display:flex;align-items:flex-start;gap:20px}
.legal-overview__emblem{width:62px;height:62px;flex:none;display:grid;place-items:center;background:var(--c-accent-soft);border:1px solid var(--c-accent-line);border-radius:16px;color:var(--c-accent);font-size:25px}
.legal-overview__top .eyebrow{font-size:11px}
.legal-overview__top h2{font-size:clamp(1.35rem,2.25vw,1.9rem);margin:10px 0 7px;letter-spacing:-.02em}
.legal-overview__top p{color:var(--c-muted);font-size:var(--fs-sm);margin:0}
.legal-intro__original{margin:22px 0 0;padding:19px 21px;background:var(--c-surface);border:1px solid var(--c-line);border-radius:12px}
.legal-intro__original p{margin:0;color:var(--c-muted);line-height:1.9;font-size:14px}
.legal-intro__original p strong{color:var(--c-text)}
.legal-intro__original p span{display:block;margin-top:8px;color:var(--c-faint);font-size:12px}
.legal-intro__original p br{display:none}
.legal-overview__bottom{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:22px;padding-top:17px;border-top:1px solid var(--c-line);font-size:11.5px;color:var(--c-muted)}
.legal-overview__bottom>span:first-child{display:flex;align-items:center;gap:8px}
.legal-overview__bottom>span:first-child i{color:var(--c-accent)}
.legal-overview__bottom a{margin-left:auto;color:var(--c-accent-hi);font-weight:700;text-decoration:none;display:inline-flex;gap:8px;align-items:center}
.legal-overview__bottom a:hover{text-decoration:underline}
.legal-highlights{display:grid;gap:13px}
.legal-highlights__heading{display:grid;gap:5px}
.legal-highlights__heading .eyebrow{font-size:11px}
.legal-highlights__heading h2{margin:3px 0 0;font-size:clamp(1.2rem,2vw,1.5rem)}
.legal-highlights__heading p{color:var(--c-muted);font-size:12.5px;margin:0;line-height:1.7}
.legal-highlights__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.legal-shortcut{display:flex;align-items:flex-start;gap:12px;min-width:0;padding:17px 13px;border:1px solid var(--c-line);border-radius:13px;background:var(--c-card);color:var(--c-text);text-decoration:none;transition:background .18s,border-color .18s,transform .18s}
.legal-shortcut:hover{background:var(--c-raised);border-color:var(--c-line-hi);transform:translateY(-2px)}
.legal-shortcut__icon{display:grid;place-items:center;flex:none;width:34px;height:34px;border:1px solid var(--c-line-hi);border-radius:10px;color:var(--c-accent);background:var(--c-surface);font-size:14px}
.legal-shortcut>span:nth-child(2){min-width:0;display:grid;gap:4px}
.legal-shortcut small{color:var(--c-faint);font:650 10px/1.5 var(--font-mono)}
.legal-shortcut strong{font-size:12.5px;line-height:1.55}
.legal-shortcut>i:last-child{margin-left:auto;flex:none;font-size:10px;color:var(--c-faint);padding-top:4px}
.legal-article{min-width:0;max-width:none;border:1px solid var(--c-line);border-radius:var(--r-lg);background:var(--c-card);overflow:hidden;scroll-margin-top:calc(var(--nav-h) + 24px)}
.legal-article__banner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px clamp(19px,3vw,32px);border-bottom:1px solid var(--c-line);font-size:12px;color:var(--c-muted)}
.legal-article__banner>span:first-child{font-weight:750;color:var(--c-text);display:inline-flex;gap:10px;align-items:center}
.legal-article__banner i{color:var(--c-accent)}
.legal-chapter{padding:clamp(19px,3vw,33px)}
.legal-chapter+.legal-chapter{border-top:8px solid var(--c-bg)}
.legal-chapter__heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 6px;padding-bottom:21px;border-bottom:1px solid var(--c-line)}
.legal-article.prose .legal-chapter__heading h2{margin:0;display:flex;align-items:center;gap:12px;font-size:clamp(1.16rem,2vw,1.48rem);color:var(--c-text)}
.legal-chapter__heading h2 i{color:var(--c-accent);font-size:.94em}
.legal-chapter__heading>span{white-space:nowrap;color:var(--c-faint);font-size:11px}
.legal-chapter__preface{padding:22px 0 2px}
.legal-chapter__preface p{max-width:78ch;line-height:1.9;font-size:14px}
.legal-clause{display:grid;gap:13px;scroll-margin-top:calc(var(--nav-h) + 26px);padding:25px 0 26px}
.legal-clause+.legal-clause{border-top:1px solid var(--c-line)}
.legal-clause__heading{display:flex;align-items:flex-start;gap:13px}
.legal-clause__num{display:grid;place-items:center;flex:none;width:36px;height:36px;border:1px solid var(--c-line-hi);background:var(--c-surface);color:var(--c-accent);font:750 12px/1 var(--font-mono);border-radius:10px}
.legal-article.prose .legal-clause__heading h3{margin:5px 0 0;font-size:clamp(.98rem,1.35vw,1.08rem);line-height:1.6;font-weight:800;color:var(--c-text);scroll-margin-top:calc(var(--nav-h) + 26px)}
.legal-clause__body{padding-left:49px;max-width:83ch}
.legal-clause__body :is(p,li){font-size:15px;line-height:1.95;color:var(--c-muted);overflow-wrap:anywhere}
.legal-clause__body p{margin:0 0 14px}
.legal-clause__body p:last-child{margin-bottom:0}
.legal-clause__body strong{font-weight:750;color:var(--c-text)}
.legal-clause__body em{color:var(--c-muted)}
.legal-clause__body ul{margin:12px 0 6px;padding-left:20px}
.legal-clause__body li{padding:3px 0 3px 5px}
.legal-clause__body li::marker{color:var(--c-accent)}
.legal-clause__body a{color:var(--c-accent-hi);font-weight:650;text-underline-offset:3px}
.legal-clause__body :is(a,code){overflow-wrap:anywhere}
.legal-clause__body :is(p,li) :is(i.fa-triangle-exclamation){color:var(--c-warn)}
.legal-clause:has(h3:target){background:linear-gradient(90deg,var(--c-accent-soft),transparent 58%);border-radius:12px;padding-inline:10px;margin-inline:-10px}
.legal-ending{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 24px;background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-lg)}
.legal-ending>div{display:flex;align-items:center;gap:13px}
.legal-ending>div>i{display:grid;place-items:center;width:40px;height:40px;flex:none;background:var(--c-surface);border:1px solid var(--c-line);border-radius:11px;color:var(--c-accent);font-size:18px}
.legal-ending strong,.legal-ending small{display:block}
.legal-ending strong{font-size:13px}
.legal-ending small{color:var(--c-muted);font-size:12px;margin-top:4px}
.legal-back-top{width:max-content;justify-self:end;display:inline-flex;gap:9px;align-items:center;text-decoration:none;color:var(--c-muted);font-size:12px;font-weight:700}
.legal-back-top:hover{color:var(--c-accent)}
.legal-mobile-toc{display:none}
@media(max-width:1020px){
.legal-layout{grid-template-columns:minmax(190px,225px) minmax(0,1fr);gap:20px}
.legal-shortcut{padding:13px 10px;gap:8px}
.legal-shortcut__icon{width:30px;height:30px}
.legal-shortcut strong{font-size:11.5px}
}
@media(max-width:820px){
.legal-layout{grid-template-columns:minmax(0,1fr)}
.legal-sidebar{display:none}
.legal-mobile-toc{display:block;border:1px solid var(--c-line-hi);border-radius:12px;background:var(--c-card);overflow:hidden}
.legal-mobile-toc summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;padding:15px 18px}
.legal-mobile-toc summary::-webkit-details-marker{display:none}
.legal-mobile-toc summary>i:first-child{color:var(--c-accent)}
.legal-mobile-toc summary strong{font-size:13px;flex:1}
.legal-mobile-toc summary span{color:var(--c-faint);font-size:11px}
.legal-mobile-toc summary>i:last-child{font-size:11px;transition:transform .2s}
.legal-mobile-toc[open] summary>i:last-child{transform:rotate(180deg)}
.legal-mobile-toc nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px;padding:10px;border-top:1px solid var(--c-line)}
.legal-mobile-toc .legal-toc__link{padding:10px}
.legal-highlights__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:560px){
.legal-content{gap:18px}
.legal-page-section{padding-top:6px}
.legal-switch{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.legal-switch>a{display:grid;place-items:center;text-align:center;font-size:11px;padding:10px 4px}
.legal-overview{padding:20px}
.legal-overview__top{gap:12px}
.legal-overview__emblem{height:43px;width:43px;border-radius:12px;font-size:19px}
.legal-overview__top h2{font-size:1.26rem}
.legal-intro__original{padding:15px}
.legal-overview__bottom{gap:8px}
.legal-overview__bottom a{margin-left:0;width:100%;margin-top:3px}
.legal-highlights__grid{grid-template-columns:1fr;gap:8px}
.legal-shortcut{align-items:center;padding:12px 14px}
.legal-shortcut strong{font-size:12.5px}
.legal-mobile-toc nav{grid-template-columns:1fr}
.legal-chapter{padding:19px 17px}
.legal-chapter__heading{align-items:flex-start}
.legal-chapter__heading>span{padding-top:4px}
.legal-article__banner{padding:16px}
.legal-clause{padding:20px 0}
.legal-clause__body{padding-left:0}
.legal-clause__num{width:32px;height:32px}
.legal-article.prose .legal-clause__heading h3{font-size:1rem;margin-top:2px}
.legal-clause__body :is(p,li){font-size:14px;line-height:1.9}
.legal-clause__body li{padding:3px 0}
.legal-ending{flex-direction:column;align-items:flex-start;padding:19px}
.legal-back-top{margin-right:4px}
}
@media(prefers-reduced-motion:reduce){
.legal-shortcut,.legal-toc__link,.legal-mobile-toc summary i{transition:none}
}
/* CyoriaSMP rules — same neutral editorial system as Terms & Privacy. */
.page-rules .page-hero{padding-bottom:var(--s-5)}
.page-rules .legal-toc__link--chapter{font-weight:800;color:var(--c-text);margin-top:7px;background:var(--c-surface);border:1px solid var(--c-line)}
.page-rules .legal-toc__link--chapter:first-child{margin-top:0}
.page-rules .legal-article.rules-readable{overflow:hidden}
.rules-readable__body{padding:0}
.rules-readable__body>div{display:grid;gap:10px;padding:clamp(18px,2.6vw,27px);counter-reset:rule-heading}
.rules-readable.prose .info-card{max-width:none;background:var(--c-card);border:1px solid var(--c-line);border-radius:14px;margin:0;padding:clamp(18px,2.5vw,28px);box-shadow:none}
.rules-readable.prose .info-card:has(>h2){border-color:var(--c-line-hi)}
.rules-readable.prose .info-card:has(>h2):not(:first-child){margin-top:13px}
.rules-readable.prose .info-card>h2:first-child{display:flex;align-items:center;gap:13px;font-size:clamp(1.17rem,2vw,1.53rem);margin:0 0 18px;padding-bottom:20px;border-bottom:1px solid var(--c-line);line-height:1.5;scroll-margin-top:calc(var(--nav-h) + 24px);color:var(--c-text)}
.rules-readable.prose .info-card>h2:first-child i{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:12px;background:var(--c-accent-soft);border:1px solid var(--c-accent-line);font-size:18px}
.rules-readable.prose .info-card>h2:not(:first-child){scroll-margin-top:calc(var(--nav-h) + 24px)}
.rules-readable.prose .info-card>h3{position:relative;counter-increment:rule-heading;margin:0;padding:21px 0 6px 46px;font-size:clamp(1rem,1.35vw,1.12rem);line-height:1.55;scroll-margin-top:calc(var(--nav-h) + 22px);font-weight:800}
.rules-readable.prose .info-card>h3:before{content:counter(rule-heading,decimal-leading-zero);position:absolute;left:0;top:18px;display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--c-line-hi);border-radius:9px;background:var(--c-surface);color:var(--c-accent);font:750 11px/1 var(--font-mono)}
.rules-readable.prose .info-card>h3~h3{border-top:1px solid var(--c-line);margin-top:14px;padding-top:27px}
.rules-readable.prose .info-card>h3~h3:before{top:24px}
.rules-readable__body :is(p,li){font-size:14.5px;line-height:1.95;color:var(--c-muted);overflow-wrap:anywhere}
.rules-readable__body p{margin:0 0 13px}
.rules-readable__body p:last-child{margin-bottom:0}
.rules-readable__body strong{font-weight:750;color:var(--c-text)}
.rules-readable__body :is(ul,ol){padding-left:22px;margin:12px 0}
.rules-readable__body li{padding:4px 0}
.rules-readable__body li::marker{color:var(--c-accent)}
.rules-readable__body a{color:var(--c-accent-hi);font-weight:750;text-underline-offset:3px}
.rules-readable__body>div>.info-card:first-of-type>h3~:is(p,ul,div){margin-left:46px}
.rules-readable__body>div>.info-card:first-of-type>h3+ p{margin-top:2px}
/* Important exclusion block under the staff-item rule. */
.rules-readable__body>div>.info-card:first-of-type>div{padding:18px 21px;border-radius:12px;background:var(--c-surface);border:1px solid var(--c-line);margin-block:13px 18px}
.rules-readable__body>div>.info-card:first-of-type>div p strong:first-child{color:var(--c-accent-hi)}
/* The two original warning cards and the last plain notice retain their full wording. */
.rules-readable.prose .info-card:not(:has(>h2)){padding:16px 22px;border-left:3px solid var(--c-warn);background:var(--c-surface);border-radius:10px}
.rules-readable.prose .info-card:not(:has(>h2)) p,.rules-readable__body>div>div:last-child:not(.info-card) p{display:flex;gap:10px;align-items:flex-start;margin:0}
.rules-readable.prose .info-card:not(:has(>h2)) i,.rules-readable__body>div>div:last-child:not(.info-card) i{color:var(--c-warn);padding-top:6px}
/* Punishment ladder rendered from the original blocks. */
.rules-readable__body .info-card:has(>div>span)>div{display:flex;align-items:flex-start;gap:16px;padding:15px 17px;margin:10px 0;border:1px solid var(--c-line);border-radius:11px;background:var(--c-surface)}
.rules-readable__body .info-card:has(>div>span)>div>span{flex:none;display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--c-line);border-radius:9px;font-size:20px;background:var(--c-card)}
.rules-readable__body .info-card:has(>div>span)>div>div{min-width:0;flex:1}
.rules-readable.prose .info-card:has(>div>span)>div h3{margin:1px 0 6px;font-size:1rem;scroll-margin-top:calc(var(--nav-h) + 22px);line-height:1.5;color:var(--c-text)}
.rules-readable__body .info-card:has(>div>span)>div p{margin:0}
.rules-readable__body .info-card:has(>div>span)>div ul{margin:8px 0 0}
.rules-readable__body>div>div:last-child:not(.info-card){padding:18px 22px;background:var(--c-surface);border:1px solid var(--c-line);border-left:3px solid var(--c-warn);border-radius:10px}
.rules-readable__body :is(h2,h3):target{color:var(--c-accent-hi)!important}
.rules-readable__body .info-card:has(>h2:target){outline:1px solid var(--c-accent-line)}
.rules-readable__body .info-card>h3:target{background:transparent;border-radius:0}
.rules-readable.prose .info-card>h3:target::before{
background:var(--c-accent-soft);
border-color:var(--c-accent);
box-shadow:0 0 0 2px var(--c-accent-glow);
}
.rules-readable__body .info-card:has(>div>span)>div:has(h3:target){border-color:var(--c-accent-line);background:var(--c-accent-soft)}
@media(max-width:820px){
.page-rules .legal-mobile-toc .legal-toc__link--chapter{margin:4px 0}
}
@media(max-width:560px){
.rules-readable__body>div{padding:13px;gap:9px}
.rules-readable.prose .info-card{padding:17px 15px}
.rules-readable.prose .info-card>h2:first-child{gap:10px;margin-bottom:13px;padding-bottom:14px;font-size:1.11rem}
.rules-readable.prose .info-card>h2:first-child i{width:34px;height:34px;font-size:15px}
.rules-readable.prose .info-card>h3{padding:17px 0 5px 38px;font-size:1rem}
.rules-readable.prose .info-card>h3:before{width:29px;height:29px;top:16px}
.rules-readable.prose .info-card>h3~h3{padding-top:22px}
.rules-readable.prose .info-card>h3~h3:before{top:21px}
.rules-readable__body>div>.info-card:first-of-type>h3~:is(p,ul,div){margin-left:0}
.rules-readable__body>div>.info-card:first-of-type>div{padding:14px}
.rules-readable__body :is(p,li){font-size:14px;line-height:1.88}
.rules-readable__body .info-card:has(>div>span)>div{gap:11px;padding:12px}
.rules-readable__body .info-card:has(>div>span)>div>span{width:32px;height:32px;font-size:17px}
.rules-readable.prose .info-card:not(:has(>h2)){padding:15px}
}
/* Portal landing: one purposeful hero, no empty right half or repeated IP cards. */
.page-portal .portal-hero{
padding-block:clamp(35px,5vw,76px) clamp(30px,3vw,50px);
}
.portal-hero>.crumbs{margin-bottom:clamp(28px,3vw,44px)}
.portal-hero__grid{
display:grid;
grid-template-columns:minmax(0,1.03fr) minmax(365px,.97fr);
align-items:center;
gap:clamp(26px,4vw,70px);
}
.portal-hero__copy{min-width:0}
.page-portal .portal-hero__copy h1{
font-size:clamp(2.5rem,4.5vw,4.75rem);
max-width:14ch;
line-height:1.16;
margin:var(--s-4) 0 var(--s-4);
}
.portal-hero__copy .lead{
max-width:47ch;
line-height:1.8;
font-size:clamp(1rem,1.35vw,1.17rem);
}
.portal-hero__copy .actions{margin-top:var(--s-5)}
.portal-quickjoin{
min-width:0;
padding:clamp(18px,2.4vw,28px);
border:1px solid var(--c-line-hi);
border-radius:var(--r-lg);
background:var(--c-card);
box-shadow:var(--shadow-1);
position:relative;
overflow:hidden;
}
.portal-quickjoin::before{
content:"";
position:absolute;
top:0;left:0;right:0;height:2px;
background:linear-gradient(90deg,var(--c-accent),transparent 85%);
}
.portal-quickjoin__header{
display:flex;align-items:center;gap:13px;
padding-bottom:18px;
border-bottom:1px solid var(--c-line);
}
.portal-quickjoin__mark{
flex:none;
width:46px;height:46px;
display:grid;place-items:center;
border-radius:13px;
background:var(--c-accent-soft);
border:1px solid var(--c-accent-line);
color:var(--c-accent);
font-size:20px;
}
.portal-quickjoin__header>div:nth-child(2){flex:1;min-width:0}
.portal-quickjoin__header .eyebrow{font-size:10px}
.portal-quickjoin__header h2{
font-size:clamp(1.1rem,1.55vw,1.42rem);
margin:5px 0 0;
line-height:1.25;
}
.portal-quickjoin__status{
display:flex;align-items:center;gap:7px;
flex:none;
font-size:11px;color:var(--c-muted);
border:1px solid var(--c-line);
border-radius:99px;
padding:7px 9px;
background:var(--c-surface);
}
.portal-quickjoin__status .dot{height:7px;width:7px}
.portal-quickjoin__address{padding:20px 0}
.portal-quickjoin__address .address{
margin:8px 0 0;
background:var(--c-input);
border:1px solid var(--c-line-hi);
}
.portal-quickjoin__address .address code{
overflow-wrap:anywhere;
white-space:normal;
}
.portal-quickjoin__editions{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
}
.portal-quickjoin__edition{
min-width:0;
display:flex;align-items:center;flex-wrap:wrap;
column-gap:9px;row-gap:8px;
padding:13px 12px;
border:1px solid var(--c-line);
border-radius:11px;
background:var(--c-surface);
}
.portal-quickjoin__edition-icon{
display:grid;place-items:center;
flex:none;width:28px;height:28px;
border-radius:8px;
background:var(--c-raised);
color:var(--c-accent);
font-size:14px;
}
.portal-quickjoin__edition>span:nth-child(2){min-width:0;flex:1}
.portal-quickjoin__edition strong,
.portal-quickjoin__edition small{display:block}
.portal-quickjoin__edition strong{font-size:12px;line-height:1.4}
.portal-quickjoin__edition small{font-size:11px;color:var(--c-muted);margin-top:3px}
.portal-quickjoin__tag{
flex:none;
width:100%;text-align:left;
font:700 10px/1.4 var(--font-mono);
color:var(--c-faint);
}
.portal-quickjoin__footer{
display:flex;justify-content:space-between;align-items:center;
flex-wrap:wrap;gap:10px;
border-top:1px solid var(--c-line);
margin-top:20px;padding-top:17px;
font-size:11.5px;
}
.portal-quickjoin__footer>span{color:var(--c-muted);display:inline-flex;align-items:center;gap:7px}
.portal-quickjoin__footer>span i{color:var(--c-ok)}
.portal-quickjoin__footer>a{display:inline-flex;align-items:center;gap:8px;color:var(--c-accent-hi);font-weight:750;text-decoration:none}
.portal-quickjoin__footer>a:hover{text-decoration:underline}
.page-portal .portal-status-section{padding-top:clamp(18px,2vw,32px)}
.page-portal .portal-player-roster{max-height:480px}
@media(max-width:1050px){
.portal-hero__grid{grid-template-columns:minmax(0,1fr) minmax(330px,1fr);gap:25px}
.portal-quickjoin{padding:18px}
.portal-quickjoin__header{flex-wrap:wrap}
}
@media(max-width:820px){
.portal-hero__grid{grid-template-columns:minmax(0,1fr)}
.page-portal .portal-hero__copy h1{max-width:none}
.portal-hero__copy .lead{max-width:55ch}
.portal-quickjoin{width:100%;max-width:650px}
.portal-hero>.crumbs{margin-bottom:25px}
}
@media(max-width:490px){
.page-portal .portal-hero__copy h1{font-size:clamp(2.2rem,10vw,3.1rem)}
.portal-quickjoin{padding:16px}
.portal-quickjoin__header{gap:10px}
.portal-quickjoin__mark{height:39px;width:39px;font-size:16px}
.portal-quickjoin__header h2{font-size:1.14rem}
.portal-quickjoin__editions{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.portal-quickjoin__edition{padding:12px 9px}
.portal-quickjoin__edition strong{font-size:11.5px}
.portal-quickjoin__footer>a{margin-top:2px}
}
/* Store Hero — marketing artwork integrated beside the actual store introduction. */
.page-store .store-hero{
padding-block:clamp(32px,4vw,66px) clamp(28px,4vw,56px);
}
.page-store .store-hero>.crumbs{margin-bottom:clamp(25px,3vw,42px)}
.store-hero__grid{
display:grid;
grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
gap:clamp(28px,4vw,64px);
align-items:center;
}
.store-hero__copy{min-width:0}
.page-store .store-hero__copy h1{
max-width:13ch;
font-size:clamp(2.7rem,4.6vw,4.5rem);
line-height:1.16;
margin:var(--s-4) 0;
}
/* Preserve the highlighted word as a whole on the narrow desktop column. */
@media(min-width:821px){
.page-store .store-hero__copy h1 em{display:block}
}
.page-store .store-hero__copy p.lead{
max-width:50ch;
line-height:1.82;
font-size:clamp(1rem,1.35vw,1.16rem);
}
.page-store .store-hero__copy .actions{
display:flex;
gap:var(--s-3);
flex-wrap:wrap;
margin-top:var(--s-6);
}
.store-hero__visual{
position:relative;
isolation:isolate;
display:flex;
flex-direction:column;
justify-content:space-between;
min-width:0;
min-height:385px;
border-radius:var(--r-lg);
border:1px solid var(--c-line-hi);
background:
linear-gradient(180deg,rgba(9,11,15,.66) 0%,rgba(9,11,15,.02) 36%,rgba(9,11,15,.86) 100%),
url('/assets/hero-bg-v2.webp') center / cover no-repeat,
var(--c-surface);
overflow:hidden;
box-shadow:var(--shadow-1);
}
.store-hero__visual::before{
content:"";
z-index:-1;
position:absolute;
inset:0;
background:linear-gradient(110deg,rgba(0,0,0,.30),transparent 75%);
}
.store-hero__visual::after{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
pointer-events:none;
}
.store-hero__badge{
display:inline-flex;
align-items:center;
gap:9px;
align-self:flex-start;
margin:20px 22px 0;
padding:8px 11px;
border-radius:var(--r-pill);
background:rgba(12,14,19,.70);
color:#eef2f7;
border:1px solid rgba(255,255,255,.19);
font:700 10px/1.4 var(--font-mono);
letter-spacing:.10em;
backdrop-filter:blur(9px);
}
.store-hero__badge i{color:var(--c-accent)}
.store-hero__brand{
display:grid;
place-items:center;
min-height:190px;
flex:1;
padding:4px 28px;
}
.store-hero__brand img{
display:block;
width:min(77%,315px);
max-height:195px;
height:auto;
object-fit:contain;
filter:drop-shadow(0 16px 22px rgba(0,0,0,.75));
}
.store-hero__bottom{
position:relative;
display:flex;
align-items:end;
justify-content:space-between;
flex-wrap:wrap;
gap:14px;
padding:13px 22px 21px;
color:#f7f8fa;
}
.store-hero__caption{
display:block;
font:700 10px/1.5 var(--font-mono);
letter-spacing:.10em;
color:#a9c9e8;
}
.store-hero__bottom p{
margin:4px 0 0;
font-size:clamp(1.07rem,1.75vw,1.38rem);
font-weight:800;
line-height:1.35;
}
.store-hero__tags{
display:flex;
flex-wrap:wrap;
justify-content:flex-end;
gap:5px;
padding-bottom:2px;
}
.store-hero__tags span{
display:inline-flex;
align-items:center;
padding:5px 8px;
border-radius:5px;
font:650 9px/1.4 var(--font-mono);
letter-spacing:.04em;
background:rgba(13,15,20,.68);
border:1px solid rgba(255,255,255,.19);
color:#f0f1f3;
}
.page-store .app-module{
padding-top:0;
}
.page-store .shopfront{gap:var(--s-6)}
@media(max-width:990px){
.store-hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:25px}
.store-hero__visual{min-height:345px}
.store-hero__bottom{align-items:start}
.store-hero__tags{justify-content:flex-start}
}
@media(max-width:820px){
.store-hero__grid{grid-template-columns:minmax(0,1fr);gap:28px}
.page-store .store-hero__copy h1{max-width:none}
.store-hero__visual{min-height:315px}
.store-hero__brand{min-height:170px}
.store-hero__brand img{max-height:165px}
}
@media(max-width:510px){
.page-store .store-hero{padding-block:28px}
.page-store .store-hero__copy h1{font-size:clamp(2.2rem,10vw,3rem)}
.page-store .store-hero__copy .actions{margin-top:var(--s-4)}
.store-hero__visual{min-height:262px}
.store-hero__badge{margin:13px 14px 0;font-size:9px}
.store-hero__brand{min-height:120px;padding:3px 20px}
.store-hero__brand img{width:min(68%,200px);max-height:135px}
.store-hero__bottom{padding:10px 15px 15px}
.store-hero__bottom p{font-size:1.05rem}
.store-hero__tags{display:none}
}
/* Editorial and staff heroes: use the otherwise vacant right column with
useful context, not a decorative empty canvas. */
.page-hero--split{padding-bottom:clamp(18px,2.6vw,34px)}
.page-hero--split>.crumbs{margin-bottom:clamp(23px,3.3vw,40px)}
.page-hero__columns{
display:grid;
grid-template-columns:minmax(0,1.04fr) minmax(290px,.96fr);
gap:clamp(22px,4vw,58px);
align-items:center;
}
.page-hero__copy{min-width:0}
.page-hero--split h1{
max-width:none;
font-size:clamp(2.4rem,4.25vw,4.3rem);
line-height:1.16;
margin:var(--s-4) 0 var(--s-4);
}
.page-hero--split .lead{font-size:clamp(.95rem,1.3vw,1.08rem);line-height:1.85;max-width:52ch}
.page-hero__aside{
position:relative;
isolation:isolate;
min-width:0;
padding:clamp(22px,2.65vw,33px);
border:1px solid var(--c-line-hi);
border-radius:var(--r-lg);
background:var(--c-card);
overflow:hidden;
box-shadow:var(--shadow-1);
}
.page-hero__aside::before{
content:"";
position:absolute;
right:-72px;
top:-100px;
width:260px;
height:260px;
border:1px solid var(--c-line-hi);
border-radius:50%;
box-shadow:0 0 0 48px var(--c-accent-glow),0 0 0 85px var(--c-accent-glow);
opacity:.8;
pointer-events:none;
z-index:-1;
}
.doc-hero-card{display:grid;gap:var(--s-6);min-height:236px}
.doc-hero-card__heading,.staff-hero-card__heading{display:flex;align-items:center;justify-content:space-between;gap:16px}
.doc-hero-card__heading .eyebrow,.staff-hero-card__heading .eyebrow{font-size:10px}
.doc-hero-card__mark,.staff-hero-card__mark{
display:grid;
place-items:center;
flex:none;
width:45px;
height:45px;
border:1px solid var(--c-accent-line);
border-radius:13px;
color:var(--c-accent);
background:var(--c-accent-soft);
font-size:18px;
}
.doc-hero-card__summary{display:flex;align-items:center;gap:clamp(18px,2vw,28px)}
.doc-hero-card__summary>strong{
color:var(--c-text);
font:800 clamp(3rem,5vw,4.7rem)/1 var(--font-sans);
letter-spacing:-.06em;
font-variant-numeric:tabular-nums;
}
.doc-hero-card__summary>div{min-width:0;display:grid;gap:5px}
.doc-hero-card__summary span{font-weight:800;color:var(--c-text);font-size:var(--fs-md)}
.doc-hero-card__summary small{font-size:var(--fs-xs);color:var(--c-muted);line-height:1.65}
.doc-hero-card__action,.staff-hero-card__action{
display:flex;
gap:10px;
justify-content:space-between;
align-items:center;
text-decoration:none;
color:var(--c-accent-hi);
border-top:1px solid var(--c-line);
padding-top:var(--s-4);
font-weight:750;
font-size:var(--fs-sm);
}
.doc-hero-card__action:hover,.staff-hero-card__action:hover{text-decoration:underline}
.staff-hero-card{display:grid;gap:var(--s-3);min-height:270px}
.staff-hero-card>strong{font-size:var(--fs-xl)}
.staff-hero-card>p{font-size:var(--fs-sm);line-height:1.7;color:var(--c-muted);margin:0}
.staff-hero-card .staff-sync{
justify-self:start;
flex:none;
max-width:100%;
margin-top:var(--s-2);
color:var(--c-muted);
background:var(--c-surface);
white-space:normal;
line-height:1.6;
}
.staff-hero-card .staff-hero-card__action{margin-top:auto}
.page-staff .page-hero .actions{margin-top:var(--s-5)}
.page-staff .page-hero .actions .btn{max-width:100%}
.page-staff #staffRoster{scroll-margin-top:calc(var(--nav-h) + 20px)}
@media(max-width:860px){
.page-hero__columns{grid-template-columns:1fr;gap:var(--s-5)}
.page-hero--split h1{font-size:clamp(2.5rem,6vw,3.5rem)}
.page-hero__aside{min-height:0}
.doc-hero-card{gap:var(--s-4)}
.staff-hero-card{gap:var(--s-3)}
}
@media(max-width:560px){
.page-hero--split>.crumbs{margin-bottom:var(--s-4)}
.page-hero__columns{gap:var(--s-4)}
.page-hero--split h1{font-size:clamp(2.1rem,8vw,2.8rem);margin:var(--s-3) 0}
.page-hero__aside{padding:var(--s-5)}
.doc-hero-card__summary>strong{font-size:3.2rem}
.page-hero--split .lead{font-size:var(--fs-sm)}
}
/* Genuine 1.21.11 Minecraft inventory textures used as subtle visual accents. */
.mc-item-sprite,.mc-benefit-item{
display:block;
image-rendering:pixelated;
image-rendering:crisp-edges;
object-fit:contain;
}
.doc-hero-card__item,.staff-hero-card__item{flex:none}
.mc-item-pair{
display:block;
position:relative;
width:100px;
height:90px;
}
.mc-item-pair::before{
content:"";
position:absolute;
inset:8px 9px 4px 9px;
border-radius:22px;
border:1px solid var(--c-accent-line);
background:radial-gradient(circle at 50% 43%,var(--c-accent-soft),var(--c-surface) 78%);
transform:rotate(-8deg);
}
.mc-item-pair__main{
position:absolute;
width:75px;
height:75px;
top:2px;
right:2px;
z-index:1;
filter:drop-shadow(0 9px 9px var(--c-bg));
}
.mc-item-pair__small{
position:absolute;
width:42px;
height:42px;
bottom:0;
left:0;
z-index:2;
filter:drop-shadow(0 5px 6px var(--c-bg));
}
.doc-hero-card__heading,.staff-hero-card__heading{min-height:90px}
.doc-hero-card{gap:var(--s-4)}
.staff-hero-card{gap:var(--s-3)}
.store-hero__items{
position:absolute;
top:18px;
right:18px;
display:flex;
align-items:center;
gap:7px;
z-index:2;
pointer-events:none;
}
.store-hero__items>span{
display:grid;
place-items:center;
width:42px;
height:42px;
border-radius:10px;
border:1px solid var(--c-line-hi);
background:color-mix(in srgb,var(--c-bg) 75%,transparent);
box-shadow:var(--shadow-1);
backdrop-filter:blur(5px);
}
.store-hero__items .mc-item-sprite{width:29px;height:29px}
.shop-benefits .mc-benefit-item{
display:block;
width:42px;
height:42px;
padding:5px;
flex:none;
border-radius:var(--r-md);
border:1px solid var(--c-line-hi);
background:var(--c-surface);
}
@media(max-width:560px){
.mc-item-pair{width:74px;height:70px}
.mc-item-pair::before{inset:6px}
.mc-item-pair__main{width:57px;height:57px}
.mc-item-pair__small{width:33px;height:33px}
.doc-hero-card__heading,.staff-hero-card__heading{min-height:70px}
.store-hero__items{top:13px;right:11px;gap:4px}
.store-hero__items>span{width:32px;height:32px;border-radius:7px}
.store-hero__items .mc-item-sprite{width:23px;height:23px}
}
/* Dedicated 404 scene, aligned with CyoriaSMP's existing theme. */
.page-error .error-main{display:flex;flex-direction:column;align-items:stretch;justify-content:center;padding-block:clamp(44px,7vh,90px)}
.page-error .error-scene{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);align-items:center;gap:clamp(20px,4vw,70px);width:min(1050px,calc(100% - var(--gutter)*2));min-height:clamp(320px,38vw,455px);padding:clamp(28px,5vw,62px);border:1px solid var(--c-line-hi);border-radius:clamp(18px,2vw,28px);background:linear-gradient(120deg,color-mix(in srgb,var(--c-card) 90%,transparent),color-mix(in srgb,var(--c-bg) 92%,transparent));box-shadow:var(--shadow-2),inset 0 1px 0 rgba(255,255,255,.035);overflow:hidden}
.page-error .error-scene::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 80% 44%,var(--c-accent-soft),transparent 48%)}
.page-error .error-scene__content{position:relative;z-index:2;min-width:0}
.page-error .error-scene__eyebrow{display:inline-flex;align-items:center;gap:11px;color:var(--c-muted);font:700 clamp(10px,.9vw,12px)/1.5 var(--font-mono);letter-spacing:.13em}
.page-error .error-scene__pulse{width:7px;height:7px;border-radius:50%;background:var(--c-accent);box-shadow:0 0 0 4px var(--c-accent-soft)}
.page-error .error-scene__divider{width:1px;height:14px;background:var(--c-line-hi)}
.page-error .error-scene h1{margin:clamp(20px,3vw,30px) 0 15px;font-size:clamp(2.2rem,3.7vw,3.75rem);line-height:1.26;letter-spacing:-.045em;text-wrap:balance}
.page-error .error-scene h1 em{color:var(--c-accent);font-style:normal}
.page-error .error-scene__lead{max-width:42ch;margin:0;color:var(--c-muted);font-size:clamp(.92rem,1.06vw,1.03rem);line-height:1.9}
.page-error .error-scene__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(23px,3vw,32px)}
.page-error .error-scene__actions .btn{min-height:46px;gap:10px;padding-inline:19px}
.page-error .error-scene__links{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;margin-top:29px;padding-top:20px;border-top:1px solid var(--c-line);font-size:var(--fs-xs);color:var(--c-faint)}
.page-error .error-scene__links a{display:inline-flex;align-items:center;gap:6px;color:var(--c-muted);text-decoration:none;transition:color .2s}
.page-error .error-scene__links a:hover{color:var(--c-accent)}
.page-error .error-scene__art{position:relative;display:grid;place-items:center;align-self:stretch;min-height:295px}
.page-error .error-scene__orbit{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-15deg);border:1px solid var(--c-accent-line);border-radius:50%}
.page-error .error-scene__orbit--outer{width:min(100%,350px);aspect-ratio:1.1;border-style:dashed;opacity:.45}
.page-error .error-scene__orbit--inner{width:min(76%,270px);aspect-ratio:1;opacity:.35}
.page-error .error-scene__number{position:relative;white-space:nowrap;font:900 clamp(6.8rem,12vw,12rem)/1 var(--font-sans);letter-spacing:-.09em;color:var(--c-text);text-shadow:0 14px 50px color-mix(in srgb,var(--c-accent) 13%,transparent);transform:translateX(-.05em)}
.page-error .error-scene__number span{color:var(--c-accent)}
.page-error .error-scene__art-label{position:absolute;bottom:12%;left:50%;transform:translateX(-50%);padding:7px 12px;border:1px solid var(--c-accent-line);border-radius:var(--r-pill);background:var(--c-surface);color:var(--c-muted);font:700 10px/1.5 var(--font-mono);letter-spacing:.16em;white-space:nowrap}
.page-error .error-scene__spark{position:absolute;width:13px;height:13px;transform:rotate(24deg);border:1px solid var(--c-accent-line);background:var(--c-accent-soft)}
.page-error .error-scene__spark--one{top:15%;left:20%}
.page-error .error-scene__spark--two{right:15%;top:27%;width:8px;height:8px}
.page-error .error-scene__spark--three{right:18%;bottom:18%;width:17px;height:17px}
.page-error .site-footer{margin-top:0}
@media(max-width:830px){
.page-error .error-scene{grid-template-columns:1fr;gap:10px;padding:clamp(27px,6vw,42px)}
.page-error .error-scene__art{grid-row:1;min-height:200px;max-height:220px}
.page-error .error-scene__number{font-size:clamp(6rem,20vw,9rem)}
.page-error .error-scene__art-label{bottom:0}
.page-error .error-scene__content{text-align:center}
.page-error .error-scene__lead{margin-inline:auto}
.page-error .error-scene__actions,.page-error .error-scene__links{justify-content:center}
}
@media(max-width:520px){
.page-error .error-main{padding-block:28px}
.page-error .error-scene{width:calc(100% - 30px);border-radius:18px;padding:23px 20px 26px}
.page-error .error-scene__art{min-height:148px;max-height:155px}
.page-error .error-scene__number{font-size:clamp(5.7rem,25vw,8rem)}
.page-error .error-scene__art-label{font-size:9px;bottom:0}
.page-error .error-scene h1{font-size:clamp(2rem,8vw,2.5rem);margin-top:20px}
.page-error .error-scene__actions{gap:9px;margin-top:23px}
.page-error .error-scene__actions .btn{width:100%;min-height:44px}
.page-error .error-scene__links{gap:10px 14px;margin-top:22px;padding-top:16px}
.page-error .error-scene__links>span{width:100%}
}
@media(prefers-reduced-motion:reduce){.page-error .error-scene__links a{transition:none}}
/* Cinematic Experience cards — Minecraft scenes with restrained premium styling. */
.page-home #features{padding-block:clamp(46px,5.5vw,80px) clamp(58px,7vw,94px)}
.page-home #features .section-head{margin-bottom:clamp(22px,3vw,34px)}
.page-home #features .grid--3{gap:clamp(14px,1.6vw,24px)}
.page-home #features .feature{
--scene-rim:var(--c-accent-line);
--scene-wash:var(--c-accent-soft);
position:relative;
min-width:0;
isolation:isolate;
display:flex;
flex-direction:column;
padding:0;
background:var(--c-card);
border:1px solid var(--c-line-hi);
border-radius:var(--r-lg);
overflow:hidden;
text-decoration:none;
box-shadow:0 8px 30px rgba(0,0,0,.17);
transition:border-color .22s,transform .22s,box-shadow .22s;
}
.page-home #features .feature:nth-child(1){--scene-rim:#4d94d9;--scene-wash:rgba(45,133,218,.08)}
.page-home #features .feature:nth-child(2){--scene-rim:#a37d40;--scene-wash:rgba(230,166,56,.06)}
.page-home #features .feature:nth-child(3){--scene-rim:#8880cc;--scene-wash:rgba(143,119,230,.08)}
.page-home #features .feature:nth-child(4){--scene-rim:#458ba1;--scene-wash:rgba(68,166,196,.07)}
.page-home #features .feature:nth-child(5){--scene-rim:#a44b6b;--scene-wash:rgba(200,55,92,.08)}
.page-home #features .feature:nth-child(6){--scene-rim:#ab8249;--scene-wash:rgba(227,162,74,.07)}
.page-home #features .feature:hover,.page-home #features .feature:focus-visible{transform:translateY(-4px);border-color:var(--scene-rim);box-shadow:0 16px 40px rgba(0,0,0,.28),0 0 22px var(--scene-wash)}
.page-home #features .feature:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px}
.page-home #features .feature .visual{
position:relative;
display:block;
flex:none;
aspect-ratio:800/420;
width:100%;
overflow:hidden;
background:var(--c-bg);
border-bottom:1px solid var(--c-line);
}
.page-home #features .feature .visual::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 75%,rgba(5,10,20,.28));pointer-events:none}
.page-home #features .feature .visual>img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:transform .35s ease}
.page-home #features .feature:hover .visual>img{transform:scale(1.035)}
.page-home #features .feature .body{
display:flex;
flex-direction:column;
gap:8px;
min-height:154px;
padding:clamp(18px,2vw,26px);
background:linear-gradient(145deg,var(--scene-wash),transparent 78%),var(--c-card);
}
.page-home #features .feature .tag{
width:max-content;
max-width:100%;
margin:0;
padding:0;
border:0;
background:none;
border-radius:0;
font:750 11px/1.5 var(--font-mono);
letter-spacing:.12em;
color:var(--c-accent-hi);
}
.page-home #features .feature h3{font-size:clamp(1.12rem,1.35vw,1.36rem);font-weight:800;line-height:1.4;margin:0;color:var(--c-text)}
.page-home #features .feature p{font-size:clamp(.84rem,.94vw,.94rem);line-height:1.7;margin:0;color:var(--c-muted)}
@media(max-width:980px){.page-home #features .feature .body{min-height:140px}}
@media(max-width:620px){.page-home #features .grid--3{gap:15px}.page-home #features .feature .body{padding:20px;min-height:unset}}
@media(prefers-reduced-motion:reduce){.page-home #features .feature,.page-home #features .feature .visual>img{transition:none}.page-home #features .feature:hover,.page-home #features .feature:hover .visual>img{transform:none}}
/* Homepage Minecraft item detail — quiet inventory accents, not a second UI. */
.page-home .home-hero__copy{min-width:0}
.page-home .home-hero__loadout{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:10px 15px;
margin-top:var(--s-5);
}
.home-hero__loadout-label{
color:var(--c-faint);
font:750 10px/1.5 var(--font-mono);
letter-spacing:.12em;
}
.home-hero__slots{display:flex;align-items:center;gap:8px}
.home-hero__slot,.home-connect__slot,.home-community__slot{
display:grid;
place-items:center;
flex:none;
border:1px solid var(--c-line-hi);
background:var(--c-surface);
box-shadow:var(--shadow-1);
}
.home-hero__slot{
width:46px;
height:46px;
border-radius:12px;
background:linear-gradient(145deg,var(--c-raised),var(--c-surface));
transition:transform .18s,border-color .18s;
}
.home-hero__slot:nth-child(2){transform:translateY(-4px)}
.home-hero__slot:hover{transform:translateY(-3px);border-color:var(--c-accent-line)}
.home-hero__slot:nth-child(2):hover{transform:translateY(-7px)}
.home-hero__slot .mc-item-sprite{width:33px;height:33px;filter:drop-shadow(0 5px 3px var(--c-bg))}
.page-home .home-hero__copy .actions{margin-top:var(--s-5)}
.page-home .home-connect{position:relative;overflow:hidden}
.page-home .home-connect::before{
content:"";
position:absolute;
right:-75px;
top:-130px;
width:250px;
height:250px;
border-radius:50%;
border:1px solid var(--c-accent-line);
background:radial-gradient(circle,var(--c-accent-soft),transparent 68%);
opacity:.7;
pointer-events:none;
}
.page-home .home-connect>header{
position:relative;
isolation:isolate;
display:grid;
grid-template-columns:40px minmax(0,1fr) auto;
align-items:center;
gap:10px;
}
.page-home .home-connect>header>img{width:40px;height:40px;object-fit:contain}
.page-home .home-connect>header>div:nth-child(2){min-width:0}
.page-home .home-connect>header h2{font-size:clamp(.83rem,1vw,1.07rem);line-height:1.45}
.page-home .home-connect>header .label{font-size:10px;letter-spacing:.08em}
.home-connect__loot{display:flex;align-items:center;justify-self:end;flex:none;gap:8px;min-width:0}
.home-connect__slot{width:40px;height:40px;border-radius:10px;background:var(--c-card)}
.page-home .home-connect__slot img{
width:30px;
height:30px;
object-fit:contain;
filter:drop-shadow(0 4px 3px var(--c-bg));
}
.page-home .strip .home-strip__item{
display:block;
width:42px;
height:42px;
flex:none;
padding:5px;
border:1px solid var(--c-accent-line);
border-radius:var(--r-sm);
background:var(--c-accent-soft);
object-fit:contain;
}
.page-home .home-community{isolation:isolate}
.home-community__items{
position:absolute;
right:23px;
top:23px;
display:flex;
gap:8px;
pointer-events:none;
}
.home-community__slot{width:47px;height:47px;border-radius:13px;background:var(--c-surface)}
.home-community__slot img{width:34px;height:34px;filter:drop-shadow(0 5px 4px var(--c-bg))}
/* Community socials: one clean outline, equal cells and subtle dividers.
Scoped to the homepage so footer social icons keep their original style. */
.page-home .home-community > .socials{
display:inline-flex;
align-items:center;
gap:0;
width:max-content;
max-width:100%;
margin-top:16px;
padding:4px;
border:1px solid var(--c-line-hi);
border-radius:12px;
background:var(--c-surface);
}
.page-home .home-community > .socials a{
position:relative;
display:inline-grid;
place-items:center;
flex:0 0 44px;
width:44px;
height:42px;
padding:0;
border:0;
border-radius:8px;
background:transparent;
color:var(--c-muted);
font-size:18px;
line-height:1;
text-decoration:none;
transition:color .18s ease,background .18s ease;
}
.page-home .home-community > .socials a + a::before{
content:"";
position:absolute;
left:-1px;
top:10px;
bottom:10px;
width:1px;
background:var(--c-line-hi);
pointer-events:none;
}
.page-home .home-community > .socials a:hover{
color:var(--c-accent);
background:var(--c-accent-soft);
border-color:transparent;
}
.page-home .home-community > .socials a:focus-visible{
outline:2px solid var(--c-accent);
outline-offset:-2px;
color:var(--c-accent);
background:var(--c-accent-soft);
}
@media(prefers-reduced-motion:reduce){
.page-home .home-community > .socials a{transition:none}
}
@media(max-width:560px){
.page-home .home-hero__loadout{margin-top:var(--s-4);gap:10px}
.home-hero__loadout-label{font-size:9px}
.home-hero__slot{width:39px;height:39px;border-radius:10px}
.home-hero__slot .mc-item-sprite{width:29px;height:29px}
.page-home .home-connect>header{grid-template-columns:34px minmax(0,1fr) auto;gap:8px}
.page-home .home-connect>header>img{width:34px;height:34px}
.home-connect__loot{gap:6px}
.home-connect__slot{width:36px;height:36px}
.page-home .home-connect__slot img{width:27px;height:27px}
.page-home .strip .home-strip__item{width:42px;height:42px}
.home-community__items{right:14px;top:14px;gap:5px}
.home-community__slot{width:36px;height:36px;border-radius:9px}
.home-community__slot img{width:28px;height:28px}
}
@media(prefers-reduced-motion:reduce){
.home-hero__slot{transition:none}
.home-hero__slot:hover,.home-hero__slot:nth-child(2):hover{transform:none}
}
/* Legacy account/store/voice modules — pruned from the old site-v3.css. Migrate to components over time. */
.text-muted{color:var(--text-muted)}
.btn, .login-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;border-radius:11px;font-weight:700}
.btn-primary, .modal-submit{background:linear-gradient(130deg,var(--c-accent),var(--c-cool));color:var(--c-accent-ink);border:0}
.btn:hover{filter:brightness(1.06)}
.login-btn:hover{background:rgba(255,255,255,.07);color:#fff}
.login-btn{padding:9px 12px;color:#c5c9dc;font-size:.81rem;white-space:nowrap}
#authContainer{display:flex;align-items:center}
.v3-section{margin:0 0 68px}
.v3-section-heading{padding:0 0 23px;border-bottom:1px solid var(--line);margin:0 0 25px}
.v3-section-heading>span{font:700 .70rem "Roboto Mono",monospace;color:var(--c-cool);letter-spacing:.17em}
.v3-section-heading h2{font-size:clamp(1.48rem,2.8vw,2rem);margin:8px 0 7px}
.v3-section-heading p{font-size:.94rem;color:var(--c-muted);margin:0}
.v3-market-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:25px}
.v3-market-tools>span{font-weight:750;color:var(--c-text)}
.category-tabs{display:flex;flex-wrap:wrap;gap:8px}
.category-tab{border-radius:99px;padding:9px 17px;border:1px solid var(--line);background:var(--c-raised);color:var(--c-muted);font-weight:700;font-size:.85rem;cursor:pointer}
.category-tab.active{background:var(--c-accent);border-color:var(--c-accent-line);color:var(--c-accent-ink)}
.product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;min-height:100px}
.product-card{display:flex;flex-direction:column;gap:8px;min-width:0;min-height:320px;background:var(--c-card);border:1px solid var(--line);border-radius:18px;padding:20px;overflow:hidden;transition:transform .2s,border-color .2s}
.product-card:hover{transform:translateY(-3px);border-color:var(--c-accent-line)}
.product-title{font-size:1.03rem;font-weight:800;line-height:1.4}
.product-desc{color:var(--c-muted);font-size:.84rem}
.product-features{padding:0;list-style:none;color:var(--c-muted);line-height:1.65}
.product-features li{font-size:.84rem}
.product-card .btn-primary{margin-top:auto;min-height:39px;padding:8px 12px;border-radius:10px;border:0;color:var(--c-accent-ink);background:var(--c-accent);font-weight:800}
.v3-store-bottom{padding:30px;display:flex;align-items:center;justify-content:space-between;gap:20px;border:1px solid var(--c-accent-line);border-radius:19px;background:linear-gradient(120deg,var(--c-raised),var(--c-card))}
.v3-store-bottom small{font:700 .7rem "Roboto Mono",monospace;letter-spacing:.14em;color:var(--c-cool)}
.v3-store-bottom h2{margin:9px 0}
.v3-store-bottom p{color:var(--c-muted);margin:0;max-width:65ch}
.modal-overlay{display:none;align-items:center;justify-content:center;padding:18px;position:fixed;inset:0;z-index:2000;background:rgba(3,5,12,.85);backdrop-filter:blur(11px);overflow-y:auto}
.modal-overlay.active{display:flex}
.modal-content{background:var(--c-card);border:1px solid var(--c-line-hi);color:#f5f5fc;border-radius:20px;padding:23px;width:min(100%,560px);max-height:calc(100vh - 34px);overflow-y:auto;box-shadow:0 24px 110px #000b}
.modal-header{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:20px}
.modal-header h3{margin:0}
.modal-close{border:1px solid var(--border);background:var(--c-raised);color:#e9eafb;width:34px;height:34px;border-radius:9px}
.payment-option-btn{display:flex;align-items:center;gap:14px;background:var(--c-surface);border:1px solid var(--c-line-hi);border-radius:11px;padding:13px;cursor:pointer}
.payment-option-btn:hover, .payment-option-btn.is-selected{border-color:var(--c-accent-line);background:var(--c-accent-soft)}
.payment-option-info{display:flex;align-items:center;gap:12px}
.payment-option-icon{display:grid;place-items:center;width:39px;height:39px;border-radius:10px;background:var(--c-input)}
.payment-option-text{font-weight:750}
.payment-option-balance{font-size:.79rem;color:var(--c-muted)}
.modal-submit{display:inline-flex;align-items:center;justify-content:center;padding:11px 17px;border-radius:10px;font-weight:750;margin-top:15px}
.modal-content :is(input,select,textarea){width:100%;margin:5px 0 10px}
.modal-content [style*="background:rgba(255,255,255,0.03)"]{background:var(--c-raised)!important}
@media(max-width:1000px){.product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.v3-store-bottom{flex-direction:column;align-items:flex-start}}
@media(max-width:470px){.product-grid{grid-template-columns:1fr}.v3-section-heading h2{font-size:1.43rem}}
.ac-wrap{display: grid; grid-template-columns: 280px 1fr; gap: 22px; align-items: start;}
.ac-side{display: flex; flex-direction: column; gap: 10px; position: sticky; top: 92px;}
.ac-usercard{background: var(--ac-panel); border: 1px solid var(--ac-line);
border-radius: 16px; padding: 18px; position: relative; overflow: hidden;}
.ac-usercard::before{content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
background: linear-gradient(90deg, var(--ac-green), var(--primary));}
.ac-membership{position: absolute; top: 14px; right: 14px; font-size: 0.62rem; font-weight: 800;
padding: 3px 9px; border-radius: 99px;
background: var(--c-accent-soft); border: 1px solid var(--c-accent-line); color: var(--ac-green);}
.ac-brand{font-family: 'Inter', serif; font-size: 1rem; letter-spacing: 0.02em; color: var(--primary); margin-bottom: 16px; display: inline-block;}
.ac-avatar{width: 66px; height: 66px; border-radius: 10px; background: var(--c-raised); image-rendering: pixelated;}
.ac-uname{font-size: 1.4rem; font-weight: 800; margin: 10px 0 6px; line-height: 1.1; word-break: break-all;}
.ac-edition{display: inline-flex; align-items: center; gap: 5px; font-size: 0.68rem; font-weight: 700;
padding: 3px 9px; border-radius: 6px;
background: var(--c-accent-soft); border: 1px solid var(--c-accent-line); color: var(--ac-green);}
.ac-uuid{font-family: 'Roboto Mono', monospace; font-size: 0.62rem; color: var(--text-muted); margin-top: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.ac-coins{font-weight: 800; font-size: 0.95rem; color: #fbbf24; margin-top: 8px;}
.ac-nav{display: flex; flex-direction: column; gap: 6px;}
.ac-nav button{display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
padding: 13px 15px; border-radius: 12px; cursor: pointer;
background: var(--ac-panel); border: 1px solid transparent;
color: var(--text-muted); font-family: var(--font-th); font-size: 0.93rem; font-weight: 600;
transition: color .15s, border-color .15s, background .15s;}
.ac-nav button i{width: 18px; text-align: center; font-size: 1rem;}
.ac-nav button:hover{background: var(--ac-panel-2); color: var(--text-main);}
.ac-nav button.active{border-color: var(--c-accent-line); color: var(--ac-green); background: var(--ac-panel-2);}
.ac-nav button.active i{color: var(--ac-green);}
.ac-panel{display: none;}
.ac-panel.active{display: block;}
.ac-head{display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px;}
.ac-icon{width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center; font-size: 1.05rem;}
.ac-icon.green{background: var(--c-accent-soft); border: 1px solid var(--c-accent-line); color: var(--ac-green);}
.ac-icon.blue{background: rgba(59,130,246,0.15); border: 1px solid rgba(59,130,246,0.4); color: #60a5fa;}
.ac-icon.violet{background: rgba(139,92,246,0.15); border: 1px solid rgba(139,92,246,0.4); color: #a78bfa;}
.ac-icon.amber{background: rgba(251,191,36,0.15); border: 1px solid rgba(251,191,36,0.4); color: #fbbf24;}
.ac-icon.red{background: rgba(239,68,68,0.15); border: 1px solid rgba(239,68,68,0.4); color: #f87171;}
.ac-head h2{margin: 0; font-size: 1.28rem; font-weight: 800;}
.ac-head p{margin: 3px 0 0; color: var(--text-muted); font-size: 0.85rem;}
.ac-card{background: var(--ac-panel); border: 1px solid var(--ac-line); border-radius: 14px; padding: 20px; margin-bottom: 16px;}
.ac-card > .ac-head{margin-bottom: 16px;}
.ac-card h3{margin: 0; font-size: 1.02rem; font-weight: 800;}
.ac-item{display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--ac-line);}
.ac-item:first-of-type{border-top: none; padding-top: 0;}
.ac-item .ac-icon{width: 36px; height: 36px; font-size: 0.9rem; border-radius: 9px;}
.ac-item-body{flex: 1; min-width: 0;}
.ac-label{font-size: 0.64rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted); font-weight: 800;}
.ac-value{font-size: 0.98rem; font-weight: 700; margin-top: 3px; word-break: break-all;}
.ac-sub{font-size: 0.78rem; color: var(--text-muted); margin-top: 2px;}
.ac-chip{display: inline-flex; align-items: center; gap: 4px; font-size: 0.65rem; font-weight: 800;
padding: 2px 8px; border-radius: 99px; vertical-align: middle; margin-left: 6px;
background: var(--c-accent-soft); border: 1px solid var(--c-accent-line); color: var(--ac-green);}
.ac-chip.gray{background: rgba(255,255,255,0.07); border-color: var(--ac-line); color: var(--text-muted);}
.ac-field{margin-bottom: 13px;}
.ac-field label{display: block; font-size: 0.8rem; font-weight: 600; margin-bottom: 6px; color: var(--text-muted);}
.ac-input-wrap{position: relative;}
.ac-input-wrap > i{position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 0.85rem;}
.ac-field input, .ac-field select{width: 100%; background: var(--c-input); border: 1px solid var(--ac-line);
color: var(--text-main); padding: 12px 14px 12px 38px; border-radius: 10px; outline: none;
font-family: var(--font-th); font-size: 0.92rem;}
.ac-field select{padding-left: 14px; cursor: pointer;}
.ac-field input:focus, .ac-field select:focus{border-color: var(--ac-green);}
.ac-btn{display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 11px 20px; border-radius: 10px; border: none; cursor: pointer;
font-family: var(--font-th); font-weight: 700; font-size: 0.9rem;}
.ac-btn:disabled{opacity: 0.55; cursor: not-allowed;}
#acEmailVerify[hidden]{display:none!important}
.ac-btn.green{background: var(--c-accent); color: var(--c-accent-ink); width: 100%;}
.ac-btn.blue{background: var(--c-accent); color: var(--c-accent-ink);}
.ac-btn.ghost{background: var(--c-raised); border: 1px solid var(--ac-line); color: var(--text-main);}
.ac-btn.red{background: rgba(239,68,68,0.15); border: 1px solid rgba(239,68,68,0.5); color: #f87171;}
.ac-btn.sm{padding: 8px 14px; font-size: 0.82rem;}
.ac-switch{position: relative; width: 46px; height: 26px; flex-shrink: 0;}
.ac-switch input{opacity: 0; width: 0; height: 0;}
.ac-switch span{position: absolute; inset: 0; border-radius: 99px; background: rgba(255,255,255,0.16); cursor: pointer; transition: background .2s;}
.ac-switch span::before{content: ""; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .2s;}
.ac-switch input:checked + span{background: var(--ac-green);}
.ac-switch input:checked + span::before{transform: translateX(20px);}
.ac-switch input:disabled + span{opacity: 0.45; cursor: not-allowed;}
.ac-inner{background: var(--c-input); border: 1px solid var(--ac-line); border-radius: 12px; padding: 15px; margin-top: 14px;}
.ac-msg{margin-top: 12px; padding: 10px 13px; border-radius: 9px; font-size: 0.85rem; display: none;}
.ac-msg.ok{display: block; background: color-mix(in srgb,var(--c-ok) 13%,transparent); border: 1px solid var(--c-ok); color: var(--c-ok);}
.ac-msg.err{display: block; background: rgba(239,68,68,0.13); border: 1px solid rgba(239,68,68,0.45); color: #fca5a5;}
.ac-row-between{display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;}
.ac-filters{display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap;}
.ac-filters select{flex: 1; min-width: 150px;}
.ac-tx{display: flex; gap: 13px; padding: 15px 0; border-top: 1px solid var(--ac-line);}
.ac-tx:first-child{border-top: none;}
.ac-tx-meta{font-size: 0.72rem; color: var(--text-muted);}
.ac-tx-title{font-weight: 700; margin-top: 3px; font-size: 0.93rem;}
.ac-tx-amount{color: var(--ac-green); font-weight: 800; font-size: 0.85rem; margin-top: 4px;}
.ac-empty{text-align: center; padding: 34px 0; color: var(--text-muted);}
.ac-empty i{font-size: 2rem; opacity: 0.35; display: block; margin-bottom: 10px;}
@media (max-width: 900px){.ac-wrap{ grid-template-columns: 1fr; }.ac-side{ position: static; }.ac-nav{ flex-direction: row; overflow-x: auto; padding-bottom: 6px; }.ac-nav button{ white-space: nowrap; }}
.cookie-popup{position:fixed;left:50%;bottom:20px;z-index:2500;transform:translate(-50%,130%);width:min(620px,calc(100% - 30px));padding:18px 20px;background:var(--c-card);border:1px solid var(--c-accent-line);box-shadow:0 20px 55px #0009;border-radius:16px;display:flex;align-items:center;gap:14px;transition:transform .2s}
.cookie-popup.show{transform:translate(-50%,0)}
.cookie-popup p{color:#c4cbde;font-size:.84rem;margin:0;flex:1}
.cookie-popup a{color:var(--c-accent)}
.cookie-popup .btn{padding:8px 14px;flex:none}
@media(max-width:510px){.cookie-popup{flex-direction:column;align-items:stretch}}
.product-card{position:relative;isolation:isolate}
.product-card .product-icon-box{display:grid;place-items:center;height:145px;border-radius:13px;padding:12px;margin-bottom:7px;background:radial-gradient(ellipse at 50% 40%,var(--c-accent-soft),transparent)!important;border:1px solid var(--c-accent-line)!important;overflow:hidden}
.product-card .product-icon-box img{width:auto;max-width:100%;height:125px;object-fit:contain;filter:drop-shadow(0 9px 17px rgba(0,0,0,.33))}
.product-card .product-icon-box span{font-size:2.2rem}
.product-card .hot-badge{position:absolute;z-index:1;right:12px;top:12px;font:800 .64rem 'Roboto Mono',monospace;letter-spacing:.1em;color:#fff;background:#d4567f;border-radius:8px;padding:5px 9px}
.v3-empty-state{grid-column:1/-1;text-align:center;background:var(--c-card);border:1px dashed var(--c-accent-line);border-radius:18px;padding:44px 22px}
.v3-empty-state>i{font-size:2rem;color:var(--c-cool);margin-bottom:12px}
.v3-empty-state h3{margin:6px 0 8px}
.v3-empty-state p{font-size:.9rem;color:#a8b0c7;max-width:44ch;margin:0 auto 20px}
.v3-empty-state button{border:1px solid var(--c-accent-line);background:var(--c-accent-soft);color:var(--c-accent);padding:9px 17px;border-radius:10px;font-weight:750}
/* CyoriaSMP Voice — compact access workspace, native dark / blue design. */
.page-voice{
--danger:var(--c-bad);
--warning:var(--c-warn);
--success:var(--c-ok);
--text-muted:var(--c-muted);
}
.page-voice .page-hero{padding-bottom:clamp(18px,2.6vw,34px)}
.page-voice .app-module{padding-bottom:clamp(48px,5vw,78px)}
.page-voice .v3-voice-console{margin:0;min-width:0}
.page-voice .v3-voice-console .container{width:100%;max-width:none;margin:0;padding:0}
.page-voice .v3-voice-console .v-section{display:none;min-width:0}
.page-voice .v3-voice-console #loginSection.active{
width:100%;max-width:1100px;margin:auto;
display:grid;grid-template-columns:minmax(0,1fr);
gap:clamp(15px,2vw,23px);
align-items:start;
}
.page-voice .v3-voice-console #voiceSection.active{display:block}
.page-voice .v3-voice-console .card{
position:relative;min-width:0;margin:0;
padding:clamp(22px,2.5vw,32px);
border:1px solid var(--c-line-hi);border-radius:var(--r-lg);
background:var(--c-card);box-shadow:var(--shadow-1);
color:var(--c-text);
}
.page-voice .v3-voice-console .v-login-card{width:100%;max-width:none;min-height:0;display:block;overflow:hidden}
.page-voice .v-login-card::before{
content:"";position:absolute;inset:0 0 auto;height:2px;
background:linear-gradient(90deg,var(--c-accent),transparent 68%);pointer-events:none;
}
.page-voice .v3-voice-console .v-login-card > .v-login-heading{
display:flex;justify-content:space-between;align-items:center;gap:20px;
margin:0 0 23px;text-align:left;
}
.page-voice .v-login-brand{display:flex;align-items:center;gap:15px;min-width:0}
.page-voice .v-login-icon{
display:grid;place-items:center;flex:none;width:54px;height:54px;border-radius:14px;
border:1px solid var(--c-accent-line);background:var(--c-accent-soft);
color:var(--c-accent);font-size:21px;
}
.page-voice .v-login-title{min-width:0}
.page-voice .v-login-title .eyebrow{font-size:10px;letter-spacing:.12em}
.page-voice .v3-voice-console .v-login-title h2{
font-size:clamp(1.35rem,2vw,1.75rem);
font-weight:800;line-height:1.4;letter-spacing:-.02em;
color:var(--c-text);margin:5px 0 4px;
}
.page-voice .v-login-title p{margin:0;color:var(--c-muted);font-size:var(--fs-sm);line-height:1.7}
.page-voice .v-access-label{
display:flex;align-items:center;gap:8px;flex:none;white-space:nowrap;
padding:8px 12px;border-radius:var(--r-pill);
background:var(--c-surface);border:1px solid var(--c-line);
color:var(--c-muted);font:700 10px/1.5 var(--font-mono);
letter-spacing:.05em;
}
.page-voice .v-access-label i{color:var(--c-accent)}
.page-voice .v-access-grid{
display:grid;grid-template-columns:minmax(0,1fr) minmax(310px,.95fr);
align-items:center;gap:clamp(18px,3.6vw,50px);
padding-top:clamp(16px,2.2vw,25px);
border-top:1px solid var(--c-line);
}
.page-voice .v-access-info{min-width:0;padding:10px 4px 10px 0}
.page-voice .v-access-info h3{font-size:clamp(1.15rem,1.7vw,1.4rem);margin:0 0 8px;line-height:1.5;font-weight:800}
.page-voice .v-access-info p{
max-width:53ch;margin:0 0 20px;
color:var(--c-muted);font-size:var(--fs-sm);line-height:1.8;
}
.page-voice .v-access-chips{display:flex;gap:9px;flex-wrap:wrap}
.page-voice .v-access-chips span{
display:inline-flex;align-items:center;gap:8px;
padding:8px 10px;border:1px solid var(--c-line);
border-radius:var(--r-sm);background:var(--c-surface);
color:var(--c-muted);font-size:var(--fs-xs);font-weight:650;
}
.page-voice .v-access-chips i{color:var(--c-accent);font-size:11px}
.page-voice .v-access-auth{
display:grid;gap:12px;min-width:0;
padding:clamp(16px,2.2vw,22px);
background:var(--c-surface);border:1px solid var(--c-line-hi);
border-radius:var(--r-md);
}
.page-voice .v-auth-label{font-size:var(--fs-sm);font-weight:800}
.page-voice .v3-voice-console .v-account-status{
display:flex;align-items:center;gap:11px;
margin:0;padding:12px 13px;border:1px solid var(--c-line-hi);
border-radius:var(--r-sm);background:var(--c-input);color:var(--c-muted);
font-size:var(--fs-sm);line-height:1.65;
}
.page-voice .v-account-status i{flex:none;color:var(--c-accent)}
.page-voice .v-account-status[data-state="ready"]{border-color:color-mix(in srgb,var(--c-ok) 35%,transparent);color:var(--c-text)}
.page-voice .v-account-status[data-state="ready"] i{color:var(--c-ok)}
.page-voice .v-account-status[data-state="unavailable"]{border-color:color-mix(in srgb,var(--c-warn) 40%,transparent)}
.page-voice .v-account-status[data-state="unavailable"] i{color:var(--c-warn)}
.page-voice .v-account-status[data-state="preview"]{border-color:var(--c-accent-line);color:var(--c-text)}
.page-voice .v3-voice-console #loginBtn{
width:100%;min-width:0;min-height:46px;display:flex;align-items:center;justify-content:center;
padding:11px 15px;margin:0;white-space:normal;font-family:var(--font-sans);
font-size:var(--fs-sm);font-weight:800;line-height:1.5;
border:1px solid var(--c-accent);border-radius:var(--r-sm);
color:var(--c-accent-ink);background:var(--c-accent);
box-shadow:none;cursor:pointer;
}
.page-voice .v3-voice-console #loginBtn:not(:disabled):hover{background:var(--c-accent-hi);border-color:var(--c-accent-hi)}
.page-voice .v3-voice-console #loginBtn:disabled{opacity:.5;cursor:not-allowed}
.page-voice .v-login-explainer{margin:0;color:var(--c-muted);font-size:var(--fs-xs);line-height:1.7}
.page-voice .v-register-row{display:flex;align-items:center;flex-wrap:wrap;gap:9px;color:var(--c-faint);font-size:var(--fs-xs)}
.page-voice .v-register-row[hidden]{display:none!important}
.page-voice .v-register-button{
display:inline-flex;align-items:center;gap:7px;padding:6px 10px;
border:1px solid var(--c-line-hi);border-radius:var(--r-sm);
background:var(--c-raised);color:var(--c-text);font-weight:750;font-size:var(--fs-xs);
}
.page-voice .v-register-button:hover{border-color:var(--c-accent-line);color:var(--c-accent-hi)}
.page-voice .v-login-alert{
display:none;padding:12px 13px;margin:0;font-size:var(--fs-sm);line-height:1.65;
border:1px solid color-mix(in srgb,var(--c-bad) 35%,transparent);
border-radius:var(--r-sm);background:color-mix(in srgb,var(--c-bad) 8%,var(--c-surface));color:var(--c-bad);
}
/* Four concise guidance steps, not another tall card alongside the login. */
.page-voice .v-howto-card{
display:grid;gap:14px;
padding:clamp(16px,2vw,24px);
background:var(--c-card);border:1px solid var(--c-line);
border-radius:var(--r-lg);
}
.page-voice .v-howto-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap}
.page-voice .v-howto-heading .eyebrow{font-size:10px;letter-spacing:.13em}
.page-voice .v-howto-heading h3{font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.4;font-weight:800;margin:6px 0 0}
.page-voice .v-howto-sub{font-size:var(--fs-xs);color:var(--c-faint)}
.page-voice .v-guide-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:0;margin:0;list-style:none}
.page-voice .v-guide-list li{
min-width:0;display:flex;align-items:flex-start;gap:11px;
padding:14px 12px;border:1px solid var(--c-line);
border-radius:var(--r-md);background:var(--c-surface);
}
.page-voice .v-guide-num{
display:grid;place-items:center;flex:none;width:31px;height:31px;
border-radius:8px;background:var(--c-accent-soft);
border:1px solid var(--c-accent-line);
color:var(--c-accent);font:750 10px/1 var(--font-mono);
}
.page-voice .v-guide-list li>div{min-width:0}
.page-voice .v-guide-list strong{display:block;font-size:var(--fs-xs);font-weight:800;line-height:1.6;color:var(--c-text)}
.page-voice .v-guide-list p{margin:3px 0 0;font-size:.75rem;line-height:1.7;color:var(--c-muted)}
.page-voice .v-howto-note{display:flex;align-items:center;gap:9px;margin:0;color:var(--c-faint);font-size:var(--fs-xs);line-height:1.6}
.page-voice .v-howto-note i{color:var(--c-accent)}
.page-voice .v3-voice-console .v-keyhint{
display:inline-flex;align-items:center;justify-content:center;padding:3px 6px;
background:var(--c-raised);border:1px solid var(--c-line-hi);border-radius:5px;
color:var(--c-text);font:750 .72rem/1.2 var(--font-mono);white-space:nowrap;
}
@media(max-width:1000px){
.page-voice .v-guide-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:800px){
.page-voice .v-access-grid{grid-template-columns:1fr;gap:14px}
.page-voice .v-access-info{padding:0}
.page-voice .v-login-brand{align-items:start}
}
@media(max-width:560px){
.page-voice .v3-voice-console .v-login-card{padding:var(--s-5)}
.page-voice .v3-voice-console .v-login-card > .v-login-heading{align-items:flex-start;gap:12px;margin-bottom:15px}
.page-voice .v-login-icon{width:43px;height:43px;font-size:19px;border-radius:11px}
.page-voice .v-access-label{display:none}
.page-voice .v3-voice-console .v-login-title h2{font-size:1.3rem}
.page-voice .v-login-title .eyebrow{font-size:9px}
.page-voice .v-access-info p{margin-bottom:12px}
.page-voice .v-access-chips{gap:6px}
.page-voice .v-access-chips span{padding:6px 8px;font-size:.7rem}
.page-voice .v-access-auth{padding:15px}
.page-voice .v-howto-card{padding:var(--s-4)}
.page-voice .v-guide-list{grid-template-columns:1fr;gap:8px}
.page-voice .v-guide-list li{padding:10px 12px}
}
/* Live voice controls use the same surfaces and interaction patterns. */
.page-voice .v3-voice-console #voiceSection{max-width:1000px;margin:0 auto}
.page-voice .v3-voice-console .voice-card{padding:clamp(20px,3vw,34px)}
.page-voice .v-console-title{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);margin-bottom:var(--s-5)}
.page-voice .v-console-title .eyebrow{font-size:10px}
.page-voice .v-console-title h2{margin:var(--s-2) 0 0;font-size:var(--fs-xl)}
.page-voice .v-status-bar{
display:flex;align-items:center;gap:var(--s-3);padding:var(--s-4);
border:1px solid var(--c-line-hi);border-radius:var(--r-md);background:var(--c-surface);
}
.page-voice .v-status-dot{display:block;flex:none;width:10px;height:10px;border-radius:50%;background:var(--c-faint)}
.page-voice .v-status-dot.online{background:var(--c-ok);box-shadow:0 0 0 5px color-mix(in srgb,var(--c-ok) 12%,transparent)}
.page-voice .v-status-dot.connecting{background:var(--c-warn)}
.page-voice .v-status-dot.offline{background:var(--c-bad)}
.page-voice .v-status-copy{min-width:0;flex:1}
.page-voice .v-status-text{font-size:var(--fs-sm);font-weight:800;color:var(--c-text)}
.page-voice .v-status-sub{font-size:var(--fs-xs);color:var(--c-muted);overflow-wrap:anywhere}
.page-voice .v-info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3);margin:var(--s-4) 0}
.page-voice .v-info-item{border:1px solid var(--c-line);border-radius:var(--r-md);background:var(--c-surface);padding:var(--s-4);min-width:0}
.page-voice .v-info-item .num{color:var(--c-text);font-size:1.18rem;font-weight:800;overflow-wrap:anywhere}
.page-voice .v-info-item .lbl{font:650 11px/1.65 var(--font-mono);color:var(--c-faint);text-transform:uppercase;letter-spacing:.07em}
.page-voice .v-controls{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:var(--s-5) 0}
.page-voice .v3-voice-console .v-btn{
width:46px;height:46px;flex:none;padding:0;
display:grid;place-items:center;border:1px solid var(--c-line-hi);
border-radius:var(--r-sm);background:var(--c-raised);
color:var(--c-text);cursor:pointer;
}
.page-voice .v3-voice-console .v-btn:hover{border-color:var(--c-accent-line);color:var(--c-accent-hi)}
.page-voice .v3-voice-console .v-btn.active{background:var(--c-accent-soft);border-color:var(--c-accent-line);color:var(--c-accent)}
.page-voice .v3-voice-console #vPttBtn{background:var(--c-accent);border-color:var(--c-accent);color:var(--c-accent-ink)}
.page-voice .v3-voice-console .v-btn--disconnect{margin-left:auto;color:var(--c-bad);border-color:color-mix(in srgb,var(--c-bad) 30%,transparent)}
.page-voice .v-activity{display:flex;align-items:center;gap:var(--s-3);margin:var(--s-3) 0 var(--s-5);padding:var(--s-3) var(--s-4);border:1px solid var(--c-line);background:var(--c-surface);border-radius:var(--r-sm)}
.page-voice .v-activity-bars{display:flex;align-items:flex-end;gap:3px;height:22px}
.page-voice .v-activity-bars span{display:block;width:5px;min-height:4px;background:var(--c-accent);border-radius:3px}
.page-voice .v-activity-label{font-size:var(--fs-xs);color:var(--c-muted)}
.page-voice .v3-voice-console .v-sld-row{display:grid;grid-template-columns:minmax(118px,.7fr) minmax(0,1.3fr) 40px;align-items:center;gap:var(--s-4);margin:0;padding:var(--s-3) 0;border-bottom:1px solid var(--c-line)}
.page-voice .v-sld-row label{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);font-weight:650;color:var(--c-muted)}
.page-voice .v-sld-row label i{color:var(--c-accent)}
.page-voice .v-sld-row input[type="range"],.page-voice .v-player-vol input[type="range"]{width:100%;accent-color:var(--c-accent)}
.page-voice .v-sld-val{text-align:right;font:750 .8rem var(--font-mono);color:var(--c-text)}
.page-voice .v-channel-section{display:grid;gap:8px;margin:var(--s-5) 0}
.page-voice .v-channel-section label{color:var(--c-muted);font-size:var(--fs-sm);font-weight:700}
.page-voice .v-channel-section label i{color:var(--c-accent);margin-right:8px}
.page-voice .v-select{width:100%;padding:11px var(--s-4);color:var(--c-text);background:var(--c-input);border:1px solid var(--c-line-hi);border-radius:var(--r-sm)}
.page-voice .v-player-section{margin-top:var(--s-5)}
.page-voice .v-players-title{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);margin-bottom:var(--s-3)}
.page-voice .v-players-title h3{margin:0;font-size:var(--fs-md)}
.page-voice .v-players-title h3 i{color:var(--c-accent);margin-right:7px}
.page-voice .v-players{display:grid;gap:var(--s-2);padding:var(--s-3);background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-md)}
.page-voice .v-empty-players{text-align:center;padding:var(--s-4);font-size:var(--fs-sm);color:var(--c-muted)}
.page-voice .v-player{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:var(--s-3);border:1px solid var(--c-line);border-radius:var(--r-sm);background:var(--c-card);min-width:0}
.page-voice .v-player-info{display:flex;align-items:center;gap:10px;min-width:0}
.page-voice .v-player-speaking{width:8px;height:8px;flex:none;border-radius:50%;background:var(--c-faint)}
.page-voice .v-player-speaking.on{background:var(--c-ok)}
.page-voice .v-player-head{width:30px;height:30px;flex:none;border-radius:6px;image-rendering:pixelated}
.page-voice .v-player-name{min-width:0;overflow-wrap:anywhere;font-size:var(--fs-sm);font-weight:700}
.page-voice .v-player-vol{width:100px;max-width:26vw}
@media(max-width:900px){
.page-voice .v3-voice-console #loginSection.active{grid-template-columns:minmax(0,1fr)}
.page-voice .v3-voice-console .v-login-card{min-height:auto}
.page-voice .v-register-row{margin-top:0}
}
@media(max-width:560px){
.page-voice .v3-voice-console .card{padding:var(--s-5);border-radius:var(--r-md)}
.page-voice .v3-voice-console .v-login-card > .v-login-heading{gap:var(--s-3);align-items:flex-start;margin-bottom:var(--s-5)}
.page-voice .v-login-icon{width:46px;height:46px;border-radius:12px;font-size:20px}
.page-voice .v3-voice-console .v-login-title h2{font-size:1.42rem}
.page-voice .v-login-title .eyebrow,.page-voice .v-howto-heading .eyebrow{font-size:9px}
.page-voice .v3-voice-console .v-sld-row{grid-template-columns:minmax(0,1fr) 45px;gap:var(--s-2)}
.page-voice .v-sld-row label{grid-column:1/-1}
.page-voice .v-info-grid{gap:var(--s-2)}
.page-voice .v-info-item{padding:var(--s-3)}
.page-voice .v-player{flex-wrap:wrap}
.page-voice .v-player-vol{width:100%;max-width:none}
}
@media(prefers-reduced-motion:reduce){.page-voice .v3-voice-console button{transition:none}}
/* Voice quick-start moved into the unused right side of the page hero.
One guide only; the full voice account / audio controls stay below. */
.page-voice .page-hero--voice{
padding-top:clamp(30px,4vw,54px);
padding-bottom:clamp(20px,2.5vw,34px);
}
.page-voice .page-hero--voice .crumbs{
margin-bottom:clamp(12px,2vw,24px);
}
.page-voice .voice-hero__grid{
display:grid;
grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
gap:clamp(25px,4vw,58px);
align-items:center;
}
.page-voice .voice-hero__copy{min-width:0}
.page-voice .voice-hero__copy h1{
max-width:none;
font-size:clamp(2.35rem,3.8vw,3.8rem);
line-height:1.22;
}
.page-voice .voice-hero__copy .lead{max-width:50ch;font-size:clamp(.93rem,1.14vw,1.08rem);line-height:1.85}
.page-voice .voice-hero__copy .actions{margin-top:var(--s-5)}
.page-voice .page-hero--voice .v-howto-card{
display:grid;
gap:14px;
width:100%;
min-width:0;
padding:clamp(18px,2vw,25px);
border:1px solid var(--c-line-hi);
border-radius:var(--r-lg);
background:linear-gradient(155deg,var(--c-card),var(--c-surface));
box-shadow:var(--shadow-1);
align-self:center;
}
.page-voice .page-hero--voice .v-howto-heading{
display:flex;
align-items:start;
justify-content:space-between;
gap:12px;
}
.page-voice .page-hero--voice .v-howto-heading h3{
font-size:clamp(1rem,1.42vw,1.21rem);
line-height:1.45;
margin-top:5px;
}
.page-voice .page-hero--voice .v-howto-sub{display:none}
.page-voice .page-hero--voice .v-guide-list{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:9px;
}
.page-voice .page-hero--voice .v-guide-list li{
display:flex;
gap:10px;
min-width:0;
align-items:flex-start;
padding:11px;
border:1px solid var(--c-line);
border-radius:var(--r-sm);
background:var(--c-input);
}
.page-voice .page-hero--voice .v-guide-num{width:27px;height:27px;border-radius:7px}
.page-voice .page-hero--voice .v-guide-list strong{font-size:var(--fs-xs);line-height:1.55}
.page-voice .page-hero--voice .v-guide-list p{font-size:.72rem;line-height:1.6;overflow-wrap:anywhere}
.page-voice .page-hero--voice .v-keyhint{
display:inline-flex;
align-items:center;
justify-content:center;
padding:2px 5px;
border:1px solid var(--c-line-hi);
border-radius:5px;
background:var(--c-raised);
font:750 .69rem/1.3 var(--font-mono);
color:var(--c-text);
}
.page-voice .page-hero--voice .v-howto-note{
margin:0;
padding-top:11px;
border-top:1px solid var(--c-line);
font-size:.72rem;
line-height:1.6;
}
.page-voice .page-hero--voice .v-howto-note i{flex:none;margin-top:3px}
.page-voice .v3-voice-console #loginSection.active{max-width:1100px}
@media(max-width:960px){
.page-voice .voice-hero__grid{
grid-template-columns:minmax(0,1fr);
gap:clamp(20px,3vw,30px);
align-items:start;
}
.page-voice .page-hero--voice .v-howto-card{max-width:100%}
.page-voice .voice-hero__copy h1{font-size:clamp(2.25rem,5vw,3rem)}
}
@media(max-width:560px){
.page-voice .page-hero--voice{padding-top:28px;padding-bottom:22px}
.page-voice .voice-hero__copy h1{font-size:clamp(2rem,8vw,2.6rem)}
.page-voice .page-hero--voice .v-howto-card{padding:var(--s-4);gap:12px}
.page-voice .page-hero--voice .v-guide-list{grid-template-columns:1fr;gap:8px}
.page-voice .page-hero--voice .v-guide-list li{padding:9px 11px}
.page-voice .page-hero--voice .v-guide-list p{font-size:.74rem}
}
/* CyoriaSMP / Staff — cinematic player showcase.
Real skin sprites keep all pixels visible. Fallback faces are unmistakably labeled. */
.page-staff .tiers{gap:clamp(25px,3vw,36px) clamp(18px,2.5vw,30px)}
.page-staff .tiers .tier{min-width:0}
.page-staff .tiers .tier>h3{margin-bottom:15px}
.page-staff .tiers .people{
grid-template-columns:repeat(auto-fill,minmax(min(100%,242px),1fr));
gap:14px;
}
.page-staff .tiers .person{
--skin-stage-height:222px;
position:relative;
display:flex;
flex-direction:column;
gap:0;
min-width:0;
min-height:0;
padding:0;
overflow:hidden;
isolation:isolate;
border:1px solid var(--c-line-hi);
border-radius:14px;
background:var(--c-card);
box-shadow:0 5px 24px rgba(0,0,0,.12);
transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.page-staff .tiers .person::before{
content:"";
position:absolute;
inset:0 auto 0 0;
width:3px;
background:var(--role);
z-index:4;
opacity:.9;
pointer-events:none;
}
.page-staff .tiers .person:hover{
transform:translateY(-4px);
border-color:color-mix(in srgb,var(--role) 64%,var(--c-line-hi));
box-shadow:0 15px 42px rgba(0,0,0,.3),0 0 0 1px color-mix(in srgb,var(--role) 14%,transparent);
}
.page-staff .person-visual{
position:relative;
display:flex;
flex:none;
align-items:flex-end;
justify-content:center;
width:100%;
height:var(--skin-stage-height);
min-height:0;
overflow:hidden;
border-right:0;
border-bottom:1px solid color-mix(in srgb,var(--role) 14%,var(--c-line));
background:
radial-gradient(ellipse 105% 84% at 50% 86%,color-mix(in srgb,var(--role) 20%,transparent),transparent 69%),
linear-gradient(155deg,color-mix(in srgb,var(--role) 9%,var(--c-card)),var(--c-surface) 72%);
}
.page-staff .person-visual::before{
content:"";
position:absolute;
inset:0;
opacity:.45;
pointer-events:none;
background-image:
linear-gradient(to right,color-mix(in srgb,var(--role) 8%,transparent) 1px,transparent 1px),
linear-gradient(to bottom,color-mix(in srgb,var(--role) 8%,transparent) 1px,transparent 1px);
background-size:30px 30px;
background-position:center;
mask-image:linear-gradient(to bottom,transparent 7%,black 80%);
}
.page-staff .person-visual::after{
content:"";
position:absolute;
bottom:3px;
left:23%;
right:23%;
height:13px;
border-radius:50%;
background:color-mix(in srgb,var(--role) 26%,transparent);
filter:blur(9px);
pointer-events:none;
z-index:0;
}
.page-staff .person-visual .person-skin{
position:relative;
z-index:1;
flex:none;
display:block;
width:min(77%,144px);
height:calc(var(--skin-stage-height) - 12px);
max-height:100%;
object-fit:contain;
object-position:center bottom;
border:0;
border-radius:0;
background:transparent;
image-rendering:pixelated;
filter:drop-shadow(0 7px 6px rgba(0,0,0,.5));
transition:transform .24s ease;
}
.page-staff .tiers .person:hover .person-skin{transform:translateY(-3px) scale(1.03)}
.page-staff .person-visual .person-skin[hidden]{display:none!important}
.page-staff .person-visual img.person-avatar,
.page-staff .person-visual .person-avatar--initial{
position:relative;
z-index:1;
flex:none;
width:102px;
height:102px;
min-height:0;
margin:auto;
border-radius:13px;
background:var(--c-raised);
border:1px solid var(--c-line-hi);
object-fit:cover;
image-rendering:pixelated;
box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.page-staff .person-visual .person-avatar[hidden]{display:none!important}
.page-staff .person-info{
display:flex;
flex:1;
min-width:0;
flex-direction:column;
align-items:flex-start;
justify-content:center;
gap:9px;
padding:16px 18px 18px;
border-top:1px solid color-mix(in srgb,var(--role) 10%,transparent);
background:linear-gradient(180deg,color-mix(in srgb,var(--role) 3%,var(--c-card)),var(--c-card));
}
.page-staff .person-info>b{
color:var(--c-text);
font-size:clamp(.96rem,1.1vw,1.05rem);
font-weight:800;
line-height:1.42;
overflow-wrap:anywhere;
}
.page-staff .person-info>.meta{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:7px;
width:100%;
margin:0;
}
.page-staff .person-info .role-title{font-size:12px;font-weight:800;line-height:1.5}
.page-staff .person-quote{
width:100%;
margin:3px 0 0;
padding:9px 0 9px 12px;
border-left:2px solid color-mix(in srgb,var(--role) 70%,var(--c-line-hi));
color:var(--c-muted);
font-size:clamp(.76rem,.85vw,.86rem);
font-style:italic;
line-height:1.65;
overflow-wrap:anywhere;
}
.page-staff .person-quote::before{content:"“";color:var(--role);font-size:1.15em;font-weight:800;margin-right:3px}
.page-staff .person-quote::after{content:"”";color:var(--role);font-size:1.15em;font-weight:800;margin-left:2px}
.page-staff .person-info .chip{
border:1px solid var(--c-line-hi);
background:var(--c-surface);
color:var(--c-muted);
font-size:10px;
font-weight:750;
letter-spacing:.025em;
}
.page-staff .person-skin-note{
display:inline-flex;
align-items:center;
min-height:22px;
color:var(--c-faint);
font-size:10px;
line-height:1.6;
}
/* Fallback remains a genuine portrait; never manufacture a fake player outfit. */
.page-staff .person:has(.person-skin-note) .person-visual{
background:radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--role) 15%,transparent),transparent 72%),var(--c-surface);
}
.page-staff .person-visual img.person-avatar--discord{image-rendering:auto;border-radius:22px;width:min(60%,140px);height:auto;aspect-ratio:1;object-fit:cover}
.page-staff .person-discord{display:inline-flex;align-items:center;gap:6px;color:#8ea4ff;font-size:11px;font-weight:700;text-decoration:none}
.page-staff .person-discord:hover{text-decoration:underline;color:#b1c0ff}
@media(max-width:1100px){
.page-staff .tiers .people{grid-template-columns:repeat(auto-fill,minmax(min(100%,225px),1fr))}
}
@media(max-width:900px){
.page-staff .tiers{grid-template-columns:1fr}
.page-staff .tiers .people{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
.page-staff .tiers .people{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.page-staff .tiers .person{--skin-stage-height:185px;border-radius:11px}
.page-staff .person-visual .person-skin{width:min(90%,125px)}
.page-staff .person-info{padding:12px 10px 14px;gap:7px}
.page-staff .person-info>b{font-size:.84rem}
.page-staff .person-info .role-title{font-size:10.5px}
.page-staff .person-info .chip{font-size:9.5px;padding:3px 6px}
.page-staff .person-visual img.person-avatar,.page-staff .person-visual .person-avatar--initial{width:76px;height:76px}
.page-staff .person-skin-note{font-size:9px}
}
@media(max-width:345px){
.page-staff .tiers .people{grid-template-columns:minmax(0,1fr)}
.page-staff .tiers .person{--skin-stage-height:214px}
}
@media(prefers-reduced-motion:reduce){
.page-staff .tiers .person,.page-staff .person-visual .person-skin{transition:none}
.page-staff .tiers .person:hover,.page-staff .tiers .person:hover .person-skin{transform:none}
}
/* Staff roster hierarchy: a centered 3 + 2 formation, not scattered role columns.
Each card keeps its own Discord role color and complete 3D skin. */
.page-staff .tiers{
display:flex;
flex-direction:column;
gap:clamp(34px,4.5vw,54px);
}
.page-staff .tiers .tier{display:block;width:100%;margin:0;min-width:0}
.page-staff .tiers .staff-group-head{
display:flex;
align-items:end;
justify-content:space-between;
gap:16px;
padding:0 0 15px;
margin-bottom:17px;
border-bottom:1px solid var(--c-line);
}
.page-staff .staff-group-head .eyebrow{
color:var(--c-accent);
font-size:10px;
letter-spacing:.14em;
}
.page-staff .tiers .staff-group-head h3{
display:block;
color:var(--c-text);
font:800 clamp(1.05rem,1.55vw,1.36rem)/1.45 var(--font-sans);
letter-spacing:-.015em;
text-transform:none;
margin:7px 0 0;
}
.page-staff .tiers .staff-group-head h3::after{display:none}
.page-staff .staff-group-count{
flex:none;
display:inline-flex;
align-items:center;
padding:7px 11px;
border-radius:999px;
border:1px solid var(--c-line-hi);
background:var(--c-surface);
color:var(--c-muted);
font:700 11px/1.4 var(--font-sans);
}
.page-staff .tiers .people{
width:100%;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:clamp(12px,1.6vw,18px);
align-items:stretch;
}
.page-staff .tiers .tier--operations .people{
width:calc((100% - 32px)*2/3 + 16px);
margin-inline:auto;
grid-template-columns:repeat(2,minmax(0,1fr));
}
.page-staff .tiers .person{height:100%;min-height:0}
.page-staff .tiers .person .person-info{min-height:110px}
.page-staff .tiers .person .person-discord{
max-width:100%;
margin-top:auto;
overflow-wrap:anywhere;
line-height:1.55;
}
@media(max-width:900px){
.page-staff .tiers .tier--leadership .people{grid-template-columns:repeat(2,minmax(0,1fr))}
.page-staff .tiers .tier--leadership .people>.person:last-child:nth-child(odd){
width:calc((100% - 14px)/2);
grid-column:1/-1;
justify-self:center;
}
.page-staff .tiers .tier--operations .people{width:100%}
}
@media(max-width:520px){
.page-staff .tiers{gap:31px}
.page-staff .tiers .tier--leadership .people,
.page-staff .tiers .tier--operations .people{
display:grid;
width:100%;
grid-template-columns:minmax(0,1fr);
gap:12px;
}
.page-staff .tiers .tier--leadership .people>.person:last-child:nth-child(odd){
width:100%;
grid-column:auto;
}
.page-staff .tiers .staff-group-head{padding-bottom:12px;margin-bottom:14px}
.page-staff .tiers .person{--skin-stage-height:195px}
.page-staff .tiers .person .person-info{min-height:0;padding:13px 16px 15px}
.page-staff .tiers .person .person-info>b{font-size:.98rem}
.page-staff .tiers .person-quote{font-size:.8rem;padding:7px 0 7px 10px}
}
/* Account suspension overlay — shared CyoriaSMP design tokens. */
.cy-ban-overlay{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;overflow:auto;padding:24px 16px;background:rgba(3,5,8,.78);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px)}
.cy-ban-card{--cy-ban-ink:var(--c-text);position:relative;width:min(100%,470px);max-height:calc(100dvh - 40px);overflow:auto;border:1px solid var(--c-line-hi);border-radius:24px;background:linear-gradient(154deg,var(--c-raised),var(--c-card) 44%,var(--c-surface));color:var(--cy-ban-ink);box-shadow:var(--shadow-2);padding:24px 28px 26px;text-align:center;font-family:var(--font-sans)}
.cy-ban-card::before{content:"";position:absolute;top:-95px;left:50%;width:230px;height:165px;transform:translateX(-50%);border-radius:50%;background:var(--c-accent-soft);filter:blur(43px);pointer-events:none}
.cy-ban-top{position:relative;display:flex;align-items:center;justify-content:space-between;color:var(--c-muted);font:750 11px/1.4 var(--font-sans);letter-spacing:.1em}
.cy-ban-counter{color:var(--c-accent);font-variant-numeric:tabular-nums}
.cy-ban-progress{display:flex;gap:7px;margin:17px 0 25px}
.cy-ban-progress span{flex:1;height:4px;border-radius:100px;background:var(--c-line-hi);transition:background .22s ease}
.cy-ban-progress span[data-active="true"]{background:var(--c-accent)}
.cy-ban-content{min-height:292px;display:flex;align-items:center;flex-direction:column;justify-content:center;animation:cy-ban-enter .25s ease both}
.cy-ban-icon{width:84px;height:84px;display:grid;place-items:center;margin-bottom:21px;border-radius:22px;border:1px solid var(--c-accent-line);background:var(--c-accent-soft);color:var(--c-accent);font-size:36px}
.cy-ban-icon--danger{border-color:color-mix(in srgb,var(--c-bad) 40%,transparent);background:color-mix(in srgb,var(--c-bad) 10%,transparent);color:var(--c-bad)}
.cy-ban-overline{margin:0 0 6px;color:var(--c-accent);font-weight:800;font-size:11px;letter-spacing:.11em}
.cy-ban-title{margin:0;font-size:clamp(27px,5vw,34px);line-height:1.35;letter-spacing:-.035em;font-weight:850;color:var(--c-text)}
.cy-ban-description{white-space:pre-line;max-width:360px;margin:12px 0 0;color:var(--c-muted);font-size:15px;line-height:1.85}
.cy-ban-description strong{color:var(--c-text)}
.cy-ban-reason{max-width:100%;overflow-wrap:anywhere;margin:16px 0 0;padding:9px 12px;border-radius:var(--r-sm);border:1px solid color-mix(in srgb,var(--c-bad) 25%,transparent);color:var(--c-text);background:color-mix(in srgb,var(--c-bad) 7%,transparent);font-size:12px;line-height:1.7}
.cy-ban-action{position:relative;width:100%;min-height:49px;padding:12px;border:0;border-radius:var(--r-md);background:var(--c-accent);color:var(--c-accent-ink);font:800 14px/1.3 var(--font-sans);cursor:pointer;transition:filter .15s ease,transform .15s ease}
.cy-ban-action:hover{filter:brightness(1.08);transform:translateY(-1px)}
.cy-ban-action:focus-visible{outline:3px solid var(--c-accent-hi);outline-offset:4px}
.cy-ban-action--discord{display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.cy-ban-foot{margin:16px 0 0;color:var(--c-faint);font-size:11px}
@keyframes cy-ban-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:480px){.cy-ban-card{padding:20px 19px 24px}.cy-ban-content{min-height:270px}}
@media(prefers-reduced-motion:reduce){.cy-ban-content{animation:none}.cy-ban-progress span,.cy-ban-action{transition:none}}
/* CyoriaSMP sign-in: narrow, legible, fast UI; only the login modal is affected. */
#cyoriaNewLoginModal{
padding:18px;
background:rgba(4,6,10,.79);
backdrop-filter:blur(9px);
}
#cyoriaNewLoginModal .cyoria-login{
width:min(100%,440px);
max-width:440px;
max-height:min(calc(100dvh - 36px),900px);
overflow:auto;
padding:25px 26px 23px;
border:1px solid #343942;
border-radius:17px;
background:linear-gradient(155deg,#1c1f23 0%,#181a1e 58%,#17191d 100%);
box-shadow:0 28px 110px rgba(0,0,0,.68),0 0 0 1px rgba(255,255,255,.025) inset;
color:var(--c-text);
scrollbar-width:thin;
scrollbar-color:#454b53 transparent;
}
#cyoriaNewLoginModal .cyoria-login *{box-sizing:border-box}
.cyoria-login__header{display:flex;justify-content:space-between;align-items:center;gap:16px}
.cyoria-login__identity{display:flex;gap:12px;align-items:center;min-width:0}
.cyoria-login__symbol{
width:43px;height:43px;flex:none;
display:grid;place-items:center;
border:1px solid rgba(95,177,255,.31);
border-radius:12px;
color:var(--c-accent);
background:rgba(95,177,255,.085);
font-size:20px;
}
.cyoria-login__eyebrow{font:800 10px/1.4 "Roboto Mono",monospace;letter-spacing:.13em;color:var(--c-accent)}
.cyoria-login__eyebrow span{color:#666e79;padding:0 3px}
.cyoria-login__header h2{margin:3px 0 0;color:#f6f7f9;font:800 24px/1.3 var(--font-sans);letter-spacing:-.025em}
.cyoria-login__close{
width:36px;height:36px;display:grid;place-items:center;flex:none;
cursor:pointer;border-radius:10px;border:1px solid transparent;
background:transparent;color:#a3a9b3;font-size:17px;
transition:background .18s ease,color .18s ease;
}
.cyoria-login__close:hover{color:white;background:#30343a}
.cyoria-login__subtitle{color:#9fa6b0;font-size:12px;line-height:1.65;margin:12px 0 22px}
#cyoriaNewLoginModal .cyoria-login__form{display:flex;flex-direction:column;gap:15px}
.cyoria-login__field label{
display:flex;align-items:center;gap:6px;
margin:0 0 8px;color:#d9dde3;
font:700 12px/1.45 var(--font-sans);
}
.cyoria-login__input-wrap{position:relative;display:flex;align-items:center;width:100%}
.cyoria-login__input-wrap>i{
position:absolute;left:14px;top:50%;transform:translateY(-50%);
color:#818997;font-size:14px;pointer-events:none;
}
:is(#cyoriaNewLoginModal,#cyoriaRegisterModal) .cyoria-login__input-wrap input{
display:block;width:100%;height:46px;margin:0;
padding:0 48px 0 42px;
font:500 13px/1.5 var(--font-sans);
color:#f6f7f9;background:#101216;
border:1px solid #383d46;border-radius:10px;
outline:none;transition:border-color .18s,box-shadow .18s;
}
:is(#cyoriaNewLoginModal,#cyoriaRegisterModal) .cyoria-login__input-wrap input::placeholder{color:#777e88}
:is(#cyoriaNewLoginModal,#cyoriaRegisterModal) .cyoria-login__input-wrap input:focus{
border-color:#5fb1ff;box-shadow:0 0 0 3px rgba(95,177,255,.12)
}
.cyoria-login__password-toggle{
position:absolute;right:6px;top:50%;transform:translateY(-50%);
width:36px;height:36px;display:grid;place-items:center;
cursor:pointer;border:0;border-radius:8px;background:transparent;
color:#a2a8b0;
}
.cyoria-login__password-toggle:hover{background:#272b32;color:#fff}
.cyoria-login__challenge{width:100%;min-width:0;display:flex;flex-direction:column;align-items:center;gap:7px}
.cyoria-login__challenge:has(#loginTurnstile:empty):has(#loginTurnstileStatus:empty){display:none}
#loginTurnstile{max-width:100%;min-width:0}
#loginTurnstile:empty,#loginTurnstileStatus:empty{display:none}
#loginTurnstileStatus{padding:10px 12px;border:1px solid #665132;background:rgba(204,150,56,.075);border-radius:9px;color:#e7bb72;font-size:11px;text-align:left;line-height:1.65}
:is(#cyoriaNewLoginModal,#cyoriaRegisterModal) .cyoria-login__submit{
display:flex;justify-content:center;align-items:center;gap:10px;
width:100%;min-height:47px;margin-top:1px;padding:11px 14px;
border:1px solid #78bcfc;border-radius:10px;
background:#5fb1ff;color:#0a1828;font:800 13px/1.4 var(--font-sans);
cursor:pointer;transition:background .16s ease,transform .16s ease;
}
.cyoria-login__submit:hover:not(:disabled){background:#91ceff;transform:translateY(-1px)}
.cyoria-login__submit:disabled{cursor:wait;opacity:.7}
.cyoria-login__register{display:flex;align-items:center;justify-content:center;gap:7px;margin:0 0 1px;color:#9ea4ad;font-size:12px}
.cyoria-login__register button{display:inline-flex;align-items:center;gap:5px;padding:4px 5px;border:0;background:transparent;color:#87c8ff;font-size:12px;font-weight:800;cursor:pointer}
.cyoria-login__register button:hover{text-decoration:underline}
.cyoria-login__register button i{font-size:9px}
.cyoria-login__divider{
display:flex;align-items:center;gap:13px;margin:24px 0 17px;
font-size:11px;color:#858c97;text-align:center;
}
.cyoria-login__divider:before,.cyoria-login__divider:after{content:"";height:1px;background:#31353d;flex:1}
.cyoria-login__providers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.cyoria-login__provider{
display:flex;justify-content:center;align-items:center;gap:9px;
min-width:0;min-height:44px;padding:9px 7px;border-radius:10px;
background:#24272c;border:1px solid #393e46;
color:#ebedf0;font:700 12px/1.35 var(--font-sans);
cursor:pointer;transition:border-color .18s,background .18s;
}
.cyoria-login__provider i{font-size:16px;flex:none}
.cyoria-login__provider:hover:not(:disabled){background:#30343b;border-color:#697582}
.cyoria-login__provider--minecraft i{color:#8dc782}
.cyoria-login__provider--xbox i{color:#68ba78}
.cyoria-login__provider--google i{color:#e8ebef}
.cyoria-login__provider--discord i{color:#8693ff}
.cyoria-login__provider:disabled{opacity:.64!important;filter:grayscale(.18);color:#9ea5ae;cursor:not-allowed!important}
.cyoria-login__footnote{display:flex;align-items:flex-start;gap:7px;margin:15px 0 0;color:#8f96a0;font-size:10.5px;line-height:1.6}
.cyoria-login__footnote i{color:#7abafb;margin-top:3px;flex:none}
#cyoriaNewLoginModal .cyoria-login__alert{margin:0 0 15px;padding:12px 13px;border-radius:9px;border:1px solid #7b4646;background:rgba(240,84,84,.08);color:#ffb6b6;font-size:12px}
#cyoriaNewLoginModal .cyoria-login__alert[hidden]{display:none}
#cyoriaNewLoginModal :is(button,input):focus-visible{outline:2px solid #93caff;outline-offset:2px}
@media(max-width:480px){
#cyoriaNewLoginModal{padding:10px;align-items:safe center}
#cyoriaNewLoginModal .cyoria-login{max-height:calc(100dvh - 20px);padding:20px 17px 19px;border-radius:14px}
.cyoria-login__header h2{font-size:22px}
.cyoria-login__subtitle{margin-bottom:17px}
.cyoria-login__providers{gap:7px}
.cyoria-login__provider{font-size:11px;gap:6px}
}
@media(max-width:340px){.cyoria-login__providers{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){
#cyoriaNewLoginModal .cyoria-login__submit,#cyoriaNewLoginModal .cyoria-login__provider{transition:none;transform:none}
}
/* Registration shares the Login visual language while reflecting the game's
actual flow. Recovery PIN is intentionally a separate in-game step until
CyoriaCore's web registration API supports persisting it. */
#cyoriaRegisterModal{padding:16px;background:rgba(4,6,10,.79);backdrop-filter:blur(9px)}
#cyoriaRegisterModal .cyoria-register{
width:min(100%,495px);max-width:495px;
max-height:calc(100dvh - 32px);overflow-y:auto;
padding:22px 25px 21px; border-radius:17px;
border:1px solid #353c45;
background:linear-gradient(155deg,#1c1f23 0%,#181a1e 65%,#17191d 100%);
box-shadow:0 28px 110px rgba(0,0,0,.67);
color:var(--c-text);
scrollbar-width:thin;scrollbar-color:#454b53 transparent;
}
#cyoriaRegisterModal .cyoria-register *{box-sizing:border-box}
#cyoriaRegisterModal .cyoria-login__subtitle{margin:10px 0 16px}
#cyoriaRegisterModal .cyoria-login__form{display:flex;flex-direction:column;gap:12px}
.cyoria-register__section-label{
display:flex;align-items:center;gap:8px;
margin:7px 0 0;padding-bottom:8px;border-bottom:1px solid #313842;
color:#79bdff;font:800 11px/1.4 var(--font-sans);
}
.cyoria-register__section-label i{width:16px;text-align:center}
#cyoriaRegisterModal .cyoria-login__field label{margin-bottom:6px}
#cyoriaRegisterModal .cyoria-login__input-wrap input{height:44px}
.cyoria-register__optional{
color:#a5abb5;font-size:10px;font-weight:500;
border:1px solid #3e444c;border-radius:5px;
padding:2px 6px;
}
.cyoria-register__hint{margin:5px 0 0;color:#919aa6;font-size:10.5px;line-height:1.55}
.cyoria-register__password-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;align-items:start}
.cyoria-register__password-grid .cyoria-login__input-wrap>i{left:12px}
#cyoriaRegisterModal .cyoria-register__password-grid input{padding:0 42px 0 33px;font-size:11px}
.cyoria-register__pin-notice{
padding:11px 12px;border-radius:10px;
border:1px solid #665334;
background:rgba(199,146,53,.065);
}
.cyoria-register__pin-head{display:flex;align-items:center;gap:8px;color:#e0bd80;font-size:12px}
.cyoria-register__pin-head strong{font-weight:800}
.cyoria-register__pin-head span{
font-size:10px;margin-left:auto;padding:3px 6px;
border-radius:6px;background:rgba(219,166,83,.12);
}
.cyoria-register__pin-notice p{
margin:6px 0 0;color:#b8ae9d;
font-size:10.5px;line-height:1.7;
}
#cyoriaRegisterModal .cyoria-login__submit{min-height:45px;margin-top:1px}
#cyoriaRegisterModal .cyoria-login__alert[hidden]{display:none}
#cyoriaRegisterModal :is(button,input):focus-visible{outline:2px solid #93caff;outline-offset:2px}
@media(max-width:520px){
#cyoriaRegisterModal{padding:9px}
#cyoriaRegisterModal .cyoria-register{max-height:calc(100dvh - 18px);padding:18px 16px;border-radius:14px}
.cyoria-register__password-grid{grid-template-columns:minmax(0,1fr);gap:11px}
#cyoriaRegisterModal .cyoria-register__password-grid input{padding-left:42px;font-size:12px}
.cyoria-register__section-label{margin-top:3px}
}
/* Recovery PIN setup and password recovery use the Minecraft account design. */
.cyoria-register__pin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin-top:12px}
.cyoria-register__pin-grid .cyoria-login__field label{font-size:11px;color:#dfd6c5}
#cyoriaRegisterModal .cyoria-register__pin-grid .cyoria-login__input-wrap input{height:42px;font-size:12px;padding-left:34px;border-color:#645139;background:#151513}
.cyoria-register__pin-grid .cyoria-login__input-wrap>i{left:11px;color:#be9860}
.cyoria-login__recovery{text-align:right;margin-top:-7px}
.cyoria-login__recovery button{background:none;border:0;color:#9acbff;font:700 11px var(--font-sans);cursor:pointer}
.cyoria-login__recovery button:hover{text-decoration:underline}
#cyoriaRecoveryModal{padding:13px;background:rgba(4,6,10,.79);backdrop-filter:blur(9px)}
#cyoriaRecoveryModal .cyoria-recovery{width:min(100%,455px);max-height:calc(100dvh - 26px);overflow-y:auto;padding:24px 25px;border:1px solid #353c45;border-radius:17px;background:linear-gradient(155deg,#1c1f23,#17191d);box-shadow:0 28px 110px rgba(0,0,0,.68)}
#cyoriaRecoveryModal .cyoria-login__form{display:flex;flex-direction:column;gap:14px}
#cyoriaRecoveryModal .cyoria-recovery__methods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 17px}
#cyoriaRecoveryModal .cyoria-recovery__methods[hidden],#cyoriaRecoveryModal .cyoria-recovery__fields[hidden],#cyoriaRecoveryModal #recoveryUsernameField[hidden],#cyoriaRecoveryModal #recoveryPinHint[hidden]{display:none!important}
#cyoriaRecoveryModal .cyoria-recovery__methods button{display:flex;justify-content:center;align-items:center;gap:8px;min-height:43px;min-width:0;padding:10px 7px;border:1px solid #343a44;border-radius:9px;background:#14171c;color:#aeb8c5;font:700 12px var(--font-sans);cursor:pointer}
#cyoriaRecoveryModal .cyoria-recovery__methods button:disabled{opacity:.45;cursor:not-allowed}
#cyoriaRecoveryModal .cyoria-recovery__methods button[aria-pressed="true"]{background:rgba(95,177,255,.13);border-color:#5fb1ff;color:#a9d7ff}
#cyoriaRecoveryModal .cyoria-recovery__methods button:focus-visible{outline:2px solid #8bcaff;outline-offset:2px}
#cyoriaRecoveryModal .cyoria-recovery__fields{display:flex;flex-direction:column;gap:14px}
#cyoriaRecoveryModal .cyoria-recovery__fields .cyoria-register__hint{margin:0}
#cyoriaRecoveryModal .cyoria-login__input-wrap input{display:block;width:100%;height:45px;margin:0;padding:0 46px 0 42px;color:#f6f7f9;background:#101216;border:1px solid #383d46;border-radius:10px;outline:0;font:500 13px var(--font-sans)}
#cyoriaRecoveryModal .cyoria-login__input-wrap input:focus{border-color:#5fb1ff;box-shadow:0 0 0 3px rgba(95,177,255,.12)}
#cyoriaRecoveryModal .cyoria-login__submit{display:flex;width:100%;min-height:46px;justify-content:center;align-items:center;background:#5fb1ff;border:0;border-radius:10px;color:#091828;font-weight:800;cursor:pointer}
#cyoriaRecoveryModal .cyoria-login__submit:disabled{opacity:.7;cursor:wait}
#cyoriaRecoveryModal .cyoria-login__alert[hidden]{display:none}
@media(max-width:520px){.cyoria-register__pin-grid{grid-template-columns:minmax(0,1fr)}#cyoriaRecoveryModal{padding:9px}#cyoriaRecoveryModal .cyoria-recovery{padding:18px 16px;max-height:calc(100dvh - 18px)}}
#cyoriaRegisterModal,#cyoriaRecoveryModal{z-index:2147483600}
/* All Partners — a deliberately tiny, image-only marquee. */
.page-home .home-partners-section{
position:relative;
padding:clamp(10px,1.6vw,21px) 0 clamp(12px,1.6vw,21px);
overflow:hidden;
background:transparent;
}
.home-partners__inner{position:relative;width:min(1380px,calc(100% - 2 * var(--gutter)));max-width:none}
.home-partners__eyebrow{
display:flex;align-items:center;justify-content:center;
gap:clamp(10px,1.4vw,18px);
width:min(100%,720px);margin:0 auto 7px;
color:#ced2da;text-align:center;white-space:nowrap;
font:750 11px/1.5 var(--font-mono);
letter-spacing:.26em;text-transform:uppercase;
}
.home-partners__eyebrow::before,.home-partners__eyebrow::after{
content:"";display:block;flex:1 1 auto;height:1px;
background:linear-gradient(90deg,transparent,rgba(230,238,248,.7));
}
.home-partners__eyebrow::after{transform:scaleX(-1)}
.home-partners__marquee{
width:100%;height:clamp(82px,7vw,94px);
overflow:hidden;position:relative;
-webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
}
.home-partners__track{
display:flex;align-items:center;width:max-content;height:100%;
animation:cyoria-partners-scroll var(--partners-duration,40s) linear infinite;
will-change:transform;
}
.home-partners__group{
display:flex;flex:0 0 auto;align-items:center;height:100%;
gap:clamp(30px,4.6vw,64px);
padding-right:clamp(30px,4.6vw,64px);
}
.home-partner__item{
display:flex;flex-direction:column;align-items:center;justify-content:center;
flex:0 0 130px;width:130px;height:90px;
background:none;border:0;cursor:default;
color:inherit;text-decoration:none;
}
a.home-partner__item{cursor:pointer}
.home-partner__item img{
display:block;width:112px;height:62px;flex:none;
object-fit:contain;
filter:drop-shadow(0 4px 10px rgba(0,0,0,.18));
transition:filter .2s ease,transform .2s ease;
}
.home-partner__name{
display:block;max-width:100%;padding-top:3px;
color:var(--c-text);font-size:11px;font-weight:700;
line-height:1.4;text-align:center;white-space:nowrap;
opacity:0;transform:translateY(-4px);
transition:opacity .18s ease,transform .18s ease;
pointer-events:none;
}
.home-partner__item:hover .home-partner__name,
.home-partner__item:focus-visible .home-partner__name{
opacity:1;transform:translateY(0);
}
a.home-partner__item:hover img,a.home-partner__item:focus-visible img{
filter:drop-shadow(0 6px 12px rgba(63,154,240,.24)) brightness(1.12);
transform:scale(1.05);
}
a.home-partner__item:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px;border-radius:6px}
.home-partners__marquee:hover .home-partners__track,
.home-partners__marquee:focus-within .home-partners__track{animation-play-state:paused}
@keyframes cyoria-partners-scroll{
from{transform:translate3d(0,0,0)}
to{transform:translate3d(-50%,0,0)}
}
/* With one real partner, scroll two identical viewport-sized groups.
The logo keeps moving without the long empty gap of a solo flyby. */
.home-partners__marquee--single .home-partners__group{
width:min(calc(100vw - 2 * var(--gutter)),1380px);
justify-content:center;gap:0;padding:0;
}
@media(max-width:600px){
.page-home .home-partners-section{padding-block:12px 14px}
.home-partners__eyebrow{margin-bottom:6px;font-size:10px;gap:10px}
.home-partners__marquee{height:85px}
.home-partner__item{width:118px;flex-basis:118px;height:84px}
.home-partner__item img{height:58px;width:105px}
.home-partner__name{font-size:10px}
.home-partners__group{gap:25px;padding-right:25px}
}
@media(hover:none) and (pointer:coarse){
.home-partner__name{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
.home-partners__marquee{overflow-x:auto;scrollbar-width:none;mask-image:none;-webkit-mask-image:none}
.home-partners__marquee::-webkit-scrollbar{display:none}
.home-partners__track{animation:none!important;transform:none!important}
.home-partners__marquee--single .home-partners__track{margin-inline:auto}
.home-partners__group[aria-hidden="true"]{display:none}
}
/* Floating chrome inspired by compact game-community sites.
Shared across every page; existing nav/auth/status/footer actions are untouched. */
.site-header{
position:sticky;
top:14px;
width:min(1380px,calc(100% - 2 * var(--gutter)));
margin:14px auto 0;
z-index:100;
border:1px solid var(--c-line-hi);
border-radius:18px;
background:color-mix(in srgb,var(--c-bg) 93%,transparent);
-webkit-backdrop-filter:blur(22px) saturate(1.25);
backdrop-filter:blur(22px) saturate(1.25);
box-shadow:0 16px 42px rgba(0,0,0,.31),inset 0 1px 0 rgba(255,255,255,.025);
}
.site-header .bar{
width:100%;
max-width:none;
min-height:68px;
padding-inline:clamp(14px,2vw,27px);
gap:clamp(8px,1.1vw,16px);
}
.site-header .brand--navbar{flex:none;gap:0;padding:0}
.site-header .brand--navbar img{display:block;width:90px;height:39px;object-fit:contain;border-radius:0}
.site-header .brand-divider{display:block;flex:none;width:2px;height:35px;border-radius:2px;background:rgba(226,236,248,.24);margin-inline:-7px 0}
.site-header .nav{margin-left:0}
.site-header .nav a{padding:8px clamp(8px,.88vw,12px);white-space:nowrap}
.site-header .header-actions{min-width:0}
/* Signed-in account action: match the floating navbar's rounded buttons. */
.site-header .cyauth-group{position:relative;min-width:0}
.site-header .cyauth-btn{
display:inline-flex;align-items:center;justify-content:center;gap:9px;
min-height:42px;padding:7px 13px;
border:1px solid var(--c-line-hi);border-radius:var(--r-pill);
background:color-mix(in srgb,var(--c-bg) 88%,var(--c-card));
color:var(--c-text);font:700 .82rem/1.3 var(--font-sans);
white-space:nowrap;cursor:pointer;
transition:background .2s,border-color .2s;
}
.site-header .cyauth-btn:hover,
.site-header .cyauth-btn:focus-visible{
background:var(--c-raised);border-color:var(--c-accent-line);
}
.site-header .cyauth-btn:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}
.site-header .cyauth-btn img{display:block;width:25px;height:25px;border-radius:6px;image-rendering:pixelated}
.site-header .cyauth-btn span{max-width:145px;overflow:hidden;text-overflow:ellipsis}
.site-header .cyauth-btn i{color:var(--c-muted)}
/* One clean floating dropdown; no nested outlines or per-item borders. */
.site-header .cyauth-dropdown{
position:absolute;z-index:130;right:0;top:calc(100% + 7px);
display:flex;flex-direction:column;gap:3px;
width:max(202px,100%);box-sizing:border-box;margin:0;padding:6px;
background:var(--c-card);border:1px solid var(--c-line-hi);
border-radius:14px;box-shadow:0 16px 42px rgba(0,0,0,.42);
opacity:0;visibility:hidden;transform:translateY(-3px);
transition:opacity .16s ease,transform .16s ease,visibility .16s ease;
}
/* Bridge the gap between the trigger and panel so the menu does not flicker. */
.site-header .cyauth-dropdown::before{
content:"";position:absolute;left:0;right:0;top:-8px;height:8px;
}
.site-header .cyauth-group:hover .cyauth-dropdown,
.site-header .cyauth-group:focus-within .cyauth-dropdown{
opacity:1;visibility:visible;transform:translateY(0);
}
.site-header .cyauth-item{
display:flex;align-items:center;gap:9px;
width:100%;min-height:41px;box-sizing:border-box;margin:0;padding:10px 12px;
background:transparent;border:0;border-radius:9px;
color:var(--c-muted);font:600 .82rem/1.35 var(--font-sans);
text-align:left;text-decoration:none;white-space:nowrap;cursor:pointer;
transition:background .16s ease,color .16s ease;
}
.site-header .cyauth-item i{width:17px;flex:0 0 17px;text-align:center}
.site-header .cyauth-item:hover,.site-header .cyauth-item:focus-visible{
background:var(--c-accent-soft);color:var(--c-text);
}
.site-header .cyauth-item:not(.danger):is(:hover,:focus-visible) i{color:var(--c-accent-hi)}
.site-header .cyauth-item:focus-visible{outline:2px solid var(--c-accent);outline-offset:-2px}
.site-header .cyauth-item.danger{margin-top:2px;border:0;color:var(--c-bad)}
.site-header .cyauth-item.danger:hover,.site-header .cyauth-item.danger:focus-visible{
background:rgba(250,128,142,.09);color:var(--c-bad);
}
.site-footer{
width:min(1380px,calc(100% - 2 * var(--gutter)));
margin:clamp(52px,6vw,90px) auto clamp(20px,3vw,40px);
border:1px solid var(--c-line-hi);
border-radius:20px;
background:color-mix(in srgb,var(--c-card) 82%,var(--c-bg));
box-shadow:0 24px 60px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.025);
overflow:hidden;
}
.site-footer>.wrap{width:100%;max-width:none;padding-inline:clamp(20px,3vw,39px)}
.site-footer .footer-grid{
gap:clamp(18px,4vw,52px);
padding-block:clamp(28px,3.4vw,46px) clamp(22px,2.7vw,35px);
}
.site-footer .footer-legal{
padding-block:16px 20px;
gap:8px 22px;
}
@media(max-width:1190px){
.site-header .bar{gap:8px}
.site-header .nav{margin-left:0}
.site-header .nav a{padding-inline:8px}
.site-header .header-presence__part{padding-inline:7px}
}
@media(max-width:1120px){
.site-header .brand-divider{display:none}
.site-header .nav{
top:calc(100% + 9px);
left:0;right:0;
padding:12px;
gap:3px;
border:1px solid var(--c-line-hi);
border-radius:15px;
background:color-mix(in srgb,var(--c-bg) 97%,transparent);
-webkit-backdrop-filter:blur(22px);
backdrop-filter:blur(22px);
box-shadow:0 18px 35px rgba(0,0,0,.44);
}
.site-header .nav a{padding:11px 14px}
}
@media(max-width:760px){
.site-header{top:10px;margin-top:10px}
.site-header .bar{min-height:62px;padding-inline:12px}
.site-header .cyauth-btn{padding:6px 10px;min-height:38px}
.site-header .cyauth-btn span{max-width:100px}
.site-header .brand--navbar img{width:73px;height:34px}
.site-footer{border-radius:16px}
.site-footer>.wrap{padding-inline:clamp(16px,3vw,22px)}
.site-footer .footer-grid{padding-block:25px 23px;gap:24px}
}
@media(max-width:440px){
.site-header{width:calc(100% - 16px);top:8px;margin-top:8px;border-radius:13px}
.site-header .bar{padding-inline:9px;gap:7px}
.site-header .brand--navbar img{width:64px;height:31px}
.site-header .cyauth-btn{gap:6px;padding:6px 8px;font-size:.75rem}
.site-header .cyauth-btn span{max-width:75px}
.site-header .nav{top:calc(100% + 7px)}
.site-footer{width:calc(100% - 16px);margin-bottom:18px}
.site-footer .footer-legal{font-size:11px;line-height:1.65}
}
@media(max-width:360px){
.site-header .brand--navbar img{width:56px;height:29px}
.site-header #authContainer .login-btn{padding:7px 9px!important;gap:5px!important;font-size:11px!important}
.site-header .header-presence__part{padding-inline:4px}
}
@media(prefers-reduced-transparency:reduce){
.site-header,.site-header .nav{background:var(--c-bg);-webkit-backdrop-filter:none;backdrop-filter:none}
}
/* CYORIA motto — unboxed, centered beneath the Partners logo marquee. */
.page-home .home-values{
padding:clamp(18px,2.3vw,31px) 0 clamp(10px,1.6vw,20px);
background:transparent;
}
.home-values__inner{max-width:1000px}
.home-values__heading{
margin:0 0 clamp(15px,1.8vw,23px);
color:var(--c-accent);
text-align:center;
font:800 10px/1.5 var(--font-mono);
letter-spacing:.28em;
}
.home-values__grid{
display:grid;
grid-template-columns:repeat(6,minmax(0,1fr));
gap:clamp(10px,1.2vw,17px);
margin:0;
padding:0;
list-style:none;
}
.home-values__item{
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
gap:4px;
min-width:0;
padding:0 3px;
text-align:center;
border:0;
background:transparent;
}
.home-values__letter{
display:block;
color:var(--c-accent);
font:850 clamp(20px,1.55vw,24px)/1.15 var(--font-sans);
}
.home-values__item>div{
display:flex;
flex-direction:column;
align-items:center;
gap:4px;
min-width:0;
}
.home-values__item strong{
color:var(--c-text);
font-size:clamp(11px,.78vw,12.5px);
line-height:1.4;
font-weight:800;
overflow-wrap:anywhere;
}
.home-values__item>div>span{
color:var(--c-muted);
font-size:clamp(10px,.71vw,11px);
line-height:1.55;
overflow-wrap:anywhere;
}
@media(max-width:820px){
.home-values__grid{
grid-template-columns:repeat(3,minmax(0,1fr));
column-gap:16px;
row-gap:20px;
}
}
@media(max-width:480px){
.page-home .home-values{padding-top:17px;padding-bottom:10px}
.home-values__heading{margin-bottom:16px}
.home-values__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}
.home-values__item{padding-inline:5px}
.home-values__letter{font-size:21px}
.home-values__item strong{font-size:11px}
.home-values__item>div>span{font-size:10px}
}
/* Player showcase: a compact, interactive Minecraft identity stage. */
.page-profile .page-hero--profile{
display:grid;
/* Give the account title only the space it needs; use the freed area for the character. */
grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
column-gap:clamp(18px,2vw,30px);
align-items:center;
}
.page-profile .page-hero--profile>.crumbs{grid-column:1/-1}
.page-profile .page-hero--profile>.eyebrow,
.page-profile .page-hero--profile>h1,
.page-profile .page-hero--profile>.lead,
.page-profile .page-hero--profile>.actions{grid-column:1;min-width:0}
.page-profile .page-hero--profile>.eyebrow{grid-row:2}
.page-profile .page-hero--profile>h1{grid-row:3}
.page-profile .page-hero--profile>.lead{grid-row:4}
.page-profile .page-hero--profile>.actions{grid-row:5}
.page-profile .profile-hero-identity{
grid-column:2;grid-row:2/6;
display:grid;grid-template-columns:minmax(0,1fr) minmax(215px,42%);
align-items:center;position:relative;isolation:isolate;
min-height:268px;overflow:hidden;
padding:25px 18px 25px 30px;
border:1px solid rgba(156,175,203,.25);border-radius:18px;
background:linear-gradient(113deg,#1a1e24 0%,#151b23 56%,#112237 100%);
box-shadow:0 18px 42px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.05);
}
.page-profile .profile-hero-identity::before{
content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background:linear-gradient(90deg,transparent 0%,rgba(111,178,245,.04) 100%),
repeating-linear-gradient(0deg,transparent 0 31px,rgba(133,173,216,.04) 32px),
repeating-linear-gradient(90deg,transparent 0 31px,rgba(133,173,216,.04) 32px);
mask-image:linear-gradient(90deg,transparent 10%,black 100%);
}
.page-profile .profile-hero-identity::after{
content:"";position:absolute;left:0;top:25px;height:43px;width:2px;
border-radius:2px;background:#60b1ff;box-shadow:0 0 16px #60b1ff88;
}
.page-profile .profile-hero-identity__copy{
z-index:2;position:relative;min-width:0;display:flex;
flex-direction:column;align-items:flex-start;gap:10px;
padding-right:clamp(12px,2vw,32px);
}
.page-profile .profile-hero-identity__eyebrow{
display:inline-flex;align-items:center;gap:7px;
color:#80befe;font:800 .63rem/1.4 var(--font-mono);
letter-spacing:.12em;
}
.page-profile .profile-hero-identity__signal{
display:inline-block;width:7px;height:7px;border-radius:50%;
background:#6ac6a9;box-shadow:0 0 0 4px rgba(106,198,169,.12);
}
.page-profile .profile-hero-identity__name{
display:block;max-width:100%;margin-top:7px;
font-size:clamp(1.42rem,1.7vw,1.76rem);font-weight:800;
letter-spacing:-.02em;line-height:1.25;color:#f3f6fb;overflow-wrap:anywhere;
}
.page-profile .profile-hero-identity__edition{
color:#acb7c7;font-size:.77rem;line-height:1.5;overflow-wrap:anywhere;
}
.page-profile .profile-hero-identity__rank{
display:inline-flex;padding:5px 9px;border:1px solid rgba(246,202,105,.27);
border-radius:6px;background:rgba(246,202,105,.08);
color:#f4ce79;font-size:.66rem;font-weight:750;line-height:1.3;
}
.page-profile .profile-hero-identity__link{
display:inline-flex;align-items:center;gap:11px;
min-height:37px;margin-top:10px;padding:8px 12px;
background:rgba(91,167,243,.1);border:1px solid rgba(99,178,255,.24);
border-radius:8px;color:#9dccff;
font-size:.72rem;font-weight:750;line-height:1.4;cursor:pointer;
transition:background .2s ease,border-color .2s ease;
}
.page-profile .profile-hero-identity__link:hover{
background:rgba(91,167,243,.19);border-color:rgba(99,178,255,.45);
}
.page-profile .profile-hero-identity__visual{
position:relative;align-self:stretch;min-width:0;min-height:218px;
}
.page-profile .profile-hero-identity__halo{
position:absolute;left:-12px;right:-28px;top:-20px;bottom:-27px;
background:radial-gradient(ellipse at 50% 63%,rgba(83,157,244,.28),transparent 66%);
pointer-events:none;
}
.page-profile .profile-hero-identity__platform{
position:absolute;left:9px;right:9px;bottom:-12px;height:43px;
transform:perspective(120px) rotateX(55deg);
border:1px solid rgba(120,182,247,.31);border-radius:50%;
background:radial-gradient(ellipse,rgba(76,145,226,.22),transparent 67%);
box-shadow:0 0 23px rgba(55,134,221,.13);
}
.page-profile .profile-hero-identity__canvas,
.page-profile .profile-hero-identity__skin{
position:absolute;left:50%;bottom:-49px;transform:translateX(-50%);
width:214px;height:288px;max-width:none;object-fit:contain;
filter:drop-shadow(0 7px 10px rgba(0,0,0,.35));
}
.page-profile .profile-hero-identity__canvas{
cursor:grab;touch-action:pan-y;filter:none;outline:none;
}
.page-profile .profile-hero-identity__canvas:active{cursor:grabbing}
.page-profile .profile-hero-identity__visual :is(canvas,img)[hidden],
.page-profile .profile-hero-identity__rotate[hidden],
.page-profile .profile-hero-identity__rank[hidden],
.page-profile .profile-hero-identity__fallback[hidden]{display:none}
.page-profile .profile-hero-identity__empty{
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
display:grid;place-items:center;width:78px;height:99px;
color:#6b8bab;font-size:2.4rem;
border:1px dashed rgba(141,167,192,.22);border-radius:13px;
}
.page-profile .profile-hero-identity__empty[hidden]{display:none}
.page-profile .profile-hero-identity__rotate{
position:absolute;z-index:4;top:14px;right:14px;
display:grid;place-items:center;width:30px;height:30px;
border:1px solid rgba(127,159,198,.28);border-radius:9px;
background:rgba(12,19,28,.72);color:#a8c8ea;cursor:pointer;
}
.page-profile .profile-hero-identity__rotate:hover{color:#fff;border-color:rgba(155,190,230,.6)}
.page-profile .profile-hero-identity__fallback{
position:absolute;z-index:4;right:9px;bottom:8px;
padding:3px 6px;border:1px solid rgba(144,164,185,.19);border-radius:6px;
background:rgba(13,18,25,.88);color:#adb5c0;font-size:.57rem;
}
@media(max-width:1000px){
.page-profile .page-hero--profile{grid-template-columns:minmax(0,1fr)}
.page-profile .page-hero--profile>.crumbs{grid-column:1}
.page-profile .profile-hero-identity{
grid-column:1;grid-row:6;min-height:216px;margin-top:20px;
grid-template-columns:minmax(0,1fr) 178px;padding:22px 13px 22px 22px;
}
.page-profile .profile-hero-identity__copy{padding-right:8px}
.page-profile .profile-hero-identity__visual{min-height:172px}
.page-profile .profile-hero-identity__canvas,
.page-profile .profile-hero-identity__skin{bottom:-40px;width:178px;height:240px}
.page-profile .profile-hero-identity__link{margin-top:4px}
}
@media(max-width:480px){
.page-profile .profile-hero-identity{
min-height:190px;padding:17px 9px 17px 17px;
grid-template-columns:minmax(0,1fr) 137px;
}
.page-profile .profile-hero-identity__eyebrow{font-size:.56rem}
.page-profile .profile-hero-identity__name{font-size:1.22rem}
.page-profile .profile-hero-identity__edition{font-size:.72rem}
.page-profile .profile-hero-identity__canvas,
.page-profile .profile-hero-identity__skin{bottom:-34px;width:148px;height:199px}
.page-profile .profile-hero-identity__link{font-size:.65rem;padding:6px 8px}
.page-profile .profile-hero-identity__rotate{right:7px;top:7px;width:27px;height:27px}
}
@media(prefers-reduced-motion:reduce){
.page-profile .profile-hero-identity__link{transition:none}
}
.page-profile .page-hero{
width:min(1380px,calc(100% - 2 * var(--gutter)));
max-width:none;
padding-block:clamp(27px,3.4vw,50px) clamp(18px,2.5vw,32px);
}
.page-profile .page-hero .crumbs{margin-bottom:13px}
.page-profile .page-hero h1{
font-size:clamp(2rem,2.65vw,3.15rem);
margin:9px 0 11px;
max-width:none;
}
.page-profile .page-hero p.lead{font-size:clamp(.9rem,1vw,1.05rem);max-width:75ch;margin:0}
.page-profile .page-hero .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:19px}
.page-profile .page-hero .actions .btn{min-height:40px;padding:9px 16px}
.page-profile .app-module{
width:min(1380px,calc(100% - 2 * var(--gutter)));
max-width:none;
padding-bottom:clamp(45px,6vw,82px);
}
.page-profile .v3-account{margin:0}
.page-profile .ac-wrap{
display:grid;grid-template-columns:minmax(270px,310px) minmax(0,1fr);
gap:clamp(18px,2vw,28px);align-items:start;
}
.page-profile .ac-wrap>div{min-width:0}
.page-profile .ac-side{
position:sticky;top:110px;align-self:start;gap:13px;
}
.page-profile .ac-usercard{
padding:24px;border:1px solid var(--c-line-hi);border-radius:18px;
background:linear-gradient(148deg,var(--c-card),var(--c-surface));
box-shadow:var(--shadow-1);
}
.page-profile .ac-usercard::before{
height:2px;
background:linear-gradient(90deg,var(--c-accent),rgba(95,177,255,.2) 70%,transparent);
}
.page-profile .ac-brand{
display:inline-flex;align-items:center;justify-content:flex-start;
min-height:39px;margin:0 0 17px;
}
.page-profile .ac-brand-logo{
display:block;width:90px;height:39px;max-width:100%;
object-fit:contain;object-position:left center;
}
.page-profile .ac-membership{
top:19px;right:20px;
background:var(--c-accent-soft);color:var(--c-accent);
}
.page-profile .ac-avatar{
width:84px;height:84px;object-fit:cover;border-radius:14px;
border:1px solid var(--c-line-hi);background:var(--c-raised);
}
.page-profile .ac-uname{font-size:1.55rem;margin:13px 0 8px;line-height:1.24;overflow-wrap:anywhere}
.page-profile .ac-edition{min-height:26px;padding:4px 9px;border-radius:7px;font-size:.72rem}
.page-profile .ac-uuid{font-size:.68rem;line-height:1.8;margin-top:10px}
.page-profile .ac-coins{font-size:1.05rem;margin-top:11px}
.page-profile .ac-nav{
display:flex;flex-direction:column;gap:4px;
padding:8px;
border:1px solid var(--c-line);border-radius:16px;background:var(--c-card);
}
.page-profile .ac-nav button{
min-height:45px;padding:11px 13px;gap:12px;border:1px solid transparent;
border-radius:10px;background:transparent;color:var(--c-muted);
font-size:.88rem;font-weight:650;line-height:1.45;
}
.page-profile .ac-nav button:hover{background:var(--c-raised);color:var(--c-text)}
.page-profile .ac-nav button.active{
border-color:var(--c-accent-line);background:var(--c-accent-soft);
color:var(--c-accent-hi);
}
.page-profile .ac-nav button i{flex:none;width:19px;color:var(--c-faint)}
.page-profile .ac-nav button.active i{color:var(--c-accent)}
.page-profile .ac-card{
margin-bottom:16px;padding:clamp(20px,2.3vw,30px);
border-radius:18px;border:1px solid var(--c-line-hi);
background:var(--c-card);
}
.page-profile .ac-head{align-items:center;gap:14px;margin-bottom:21px}
.page-profile .ac-head h2{font-size:clamp(1.16rem,1.4vw,1.48rem);line-height:1.4;margin:0}
.page-profile .ac-head h3{font-size:1.15rem;line-height:1.4;margin:0}
.page-profile .ac-head p{font-size:.82rem;line-height:1.7;color:var(--c-muted);margin:4px 0 0}
.page-profile .ac-head .ac-icon{width:46px;height:46px;border-radius:12px}
.page-profile .ac-panel[data-p="info"]>.ac-card{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;
}
.page-profile .ac-panel[data-p="info"]>.ac-card>.ac-head{
grid-column:1/-1;margin:0 0 6px;padding-bottom:20px;
border-bottom:1px solid var(--c-line);
}
.page-profile .ac-panel[data-p="info"] .ac-item{
display:flex;align-items:center;min-width:0;min-height:112px;
gap:14px;padding:18px;border:1px solid var(--c-line);
border-radius:12px;background:var(--c-surface);
}
.page-profile .ac-panel[data-p="info"] .ac-item:first-of-type{
grid-column:1/-1;min-height:106px;
border:1px solid var(--c-line);padding:19px;
}
.page-profile .ac-panel[data-p="info"] .ac-item:last-child{
grid-column:1/-1;
}
.page-profile .ac-panel[data-p="info"] .ac-item .ac-icon{
flex:0 0 43px;width:43px;height:43px;border-radius:11px;
}
.page-profile .ac-panel[data-p="info"] .ac-item-body{min-width:0}
.page-profile .ac-panel[data-p="info"] .ac-label{
font-size:.67rem;letter-spacing:.075em;color:var(--c-faint);
}
.page-profile .ac-panel[data-p="info"] .ac-value{
margin-top:6px;font-size:1.04rem;line-height:1.5;
overflow-wrap:anywhere;word-break:normal;
}
.page-profile .ac-panel[data-p="info"] #acInfoName{font-size:1.35rem}
.page-profile .ac-panel[data-p="info"] .ac-sub{font-size:.78rem;line-height:1.5}
.page-profile .ac-panel[data-p="info"] .ac-chip{margin-left:4px;white-space:nowrap}
.page-profile .ac-panel[data-p="info"] #acInfoSubBtn{align-self:center;white-space:nowrap}
.page-profile .ac-panel:not([data-p="info"]) .ac-item{
padding:17px 0;gap:15px;
}
.page-profile .ac-panel:not([data-p="info"]) .ac-card>.ac-head{
border-bottom:1px solid var(--c-line);padding-bottom:18px;
}
/* The email card already separates its heading with a bottom border.
Its first row must not draw another border directly underneath it. */
.page-profile .ac-panel[data-p="email"] .ac-card>.ac-head + .ac-item{
border-top:0;
padding-top:0;
}
/* Account links have a heading divider; the first provider row should not
draw a second line. Keep the description and first row evenly spaced. */
.page-profile .ac-panel[data-p="links"]>.ac-card:first-child>.ac-head{
margin-bottom:0;
}
.page-profile .ac-panel[data-p="links"]>.ac-card:first-child>.ac-head + .ac-item{
border-top:0;
padding-top:20px;
}
.page-profile .ac-field input,.page-profile .ac-field select{min-height:45px}
.page-profile .ac-btn{transition:background .16s ease,filter .16s ease}
.page-profile .ac-btn:hover:not(:disabled){filter:brightness(1.07)}
@media(max-width:1050px){
.page-profile .ac-wrap{grid-template-columns:260px minmax(0,1fr);gap:17px}
.page-profile .ac-panel[data-p="info"]>.ac-card{gap:10px}
.page-profile .ac-panel[data-p="info"] .ac-item{padding:14px;min-height:103px}
.page-profile .ac-panel[data-p="info"] .ac-item .ac-icon{width:37px;height:37px;flex-basis:37px}
}
@media(max-width:900px){
.page-profile .ac-wrap{grid-template-columns:minmax(0,1fr)}
.page-profile .ac-side{position:static}
.page-profile .ac-usercard{padding:18px 20px}
.page-profile .ac-usercard>div{display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:15px;align-items:center}
.page-profile .ac-avatar{width:72px;height:72px;grid-row:1/5}
.page-profile .ac-uname{margin:0 0 4px}
.page-profile .ac-uuid{margin-top:3px}
.page-profile .ac-coins{margin-top:5px}
.page-profile .ac-brand{margin-bottom:13px}
.page-profile .ac-nav{flex-direction:row;gap:5px;overflow-x:auto;scrollbar-width:none}
.page-profile .ac-nav::-webkit-scrollbar{display:none}
.page-profile .ac-nav button{width:auto;flex:0 0 auto;white-space:nowrap;min-height:42px;padding:9px 13px}
}
@media(max-width:660px){
.page-profile .page-hero{padding-top:26px;padding-bottom:19px}
.page-profile .page-hero h1{font-size:clamp(1.9rem,7vw,2.55rem)}
.page-profile .ac-card{padding:18px;border-radius:15px}
.page-profile .ac-panel[data-p="info"]>.ac-card{grid-template-columns:minmax(0,1fr);gap:9px}
.page-profile .ac-panel[data-p="info"] .ac-item:first-of-type{grid-column:auto}
.page-profile .ac-panel[data-p="info"] .ac-item:last-child{grid-column:auto}
.page-profile .ac-panel[data-p="info"] .ac-item{min-height:88px;padding:14px}
.page-profile .ac-panel[data-p="info"] .ac-item:first-of-type{min-height:92px}
.page-profile .ac-head{gap:11px}
}
@media(max-width:380px){
.page-profile .ac-usercard{padding:17px}
.page-profile .ac-panel[data-p="info"] .ac-item{flex-wrap:wrap}
.page-profile .ac-panel[data-p="info"] #acInfoSubBtn{margin-left:52px}
}
/* Adapters between the legacy account/store/voice modules and the new shell. */
.app-module{padding-bottom:var(--s-7)}
.app-module>*{min-width:0}
.ac-wrap{grid-template-columns:280px minmax(0,1fr)}
.ac-wrap>*{min-width:0}
@media (max-width:900px){.ac-wrap{grid-template-columns:minmax(0,1fr)}}
.product-card,.v3-section{min-width:0}


/* Cyoria Portal · structured Minecraft player cards */
.page-portal .portal-player-roster{grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:12px;align-items:stretch}
.page-portal .portal-player-roster .cy-player-tile{display:flex;align-items:center;gap:13px;min-width:0;padding:14px 16px;border:1px solid rgba(135,158,181,.16);border-radius:13px;background:linear-gradient(125deg,rgba(45,54,67,.55),rgba(26,31,39,.72));transition:border-color .18s,transform .18s,background .18s}
.page-portal .portal-player-roster .cy-player-tile:hover{border-color:rgba(84,170,255,.48);transform:translateY(-2px);background:rgba(42,52,65,.88)}
.page-portal .portal-player-roster .cy-player-head{width:44px;height:44px;flex:0 0 44px;object-fit:cover;border-radius:10px;image-rendering:pixelated;background:#323b46;border:1px solid rgba(255,255,255,.12)}
.page-portal .portal-player-roster .cy-player-detail{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.page-portal .portal-player-roster .cy-player-detail b{font-size:14px;line-height:1.2;color:var(--c-text,#f1f5f9);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.page-portal .portal-player-roster .cy-player-online{display:block;color:#6ed9a2;font-size:11px;font-weight:600}
@media(max-width:520px){.page-portal .portal-player-roster{grid-template-columns:1fr}.page-portal .portal-player-roster .cy-player-tile{padding:12px}}
@media(prefers-reduced-motion:reduce){.page-portal .portal-player-roster .cy-player-tile{transition:none}.page-portal .portal-player-roster .cy-player-tile:hover{transform:none}}

/* Roster hover stability: no transforms or layout shifts when the cursor moves
   across cards, and keep card sizing fixed during status refreshes. */
.page-portal .portal-player-roster{align-content:start;overflow-x:hidden}
.page-portal .portal-player-roster .cy-player-tile{
  box-sizing:border-box;position:relative;width:100%;height:100%;min-height:72px;
  transform:none;overflow:hidden;transition:border-color .16s ease,box-shadow .16s ease;
}
.page-portal .portal-player-roster .cy-player-tile:hover{
  transform:none;background:linear-gradient(125deg,rgba(45,54,67,.55),rgba(26,31,39,.72));
  border-color:rgba(84,170,255,.45);box-shadow:inset 0 0 0 1px rgba(84,170,255,.12);
}
.page-portal .portal-player-roster .cy-player-tile .cy-player-head{display:block;box-sizing:border-box}
@media(prefers-reduced-motion:reduce){.page-portal .portal-player-roster .cy-player-tile{transition:none}}