/* Loaded only for graphite. The classic palette and layout are untouched. */
html[data-theme=graphite]{--bg:#0b0c0e;--bg-2:#121416;--bg-3:#191c1f;--surface:linear-gradient(145deg,#17191e,#101215);--text-2:#b3b7c1;--text-3:#8d939f;--border:#ffffff14;--border-hover:#ffffff29;--brand-gradient:linear-gradient(110deg,var(--accent-a),var(--accent-b))}
html[data-theme=graphite] body{background-color:var(--bg);background-image:none}
html[data-theme=graphite] :is(.navbar,.navbar.scrolled,.nav-dropdown-menu,.user-dropdown,.mobile-menu,#adminBar){background:#121416fa}
html[data-theme=graphite] :is(.hero-bg-overlay,.rules-hero .hero-bg-overlay,.settings-hero .hero-bg-overlay){background:linear-gradient(180deg,#0b0c0e66,#0b0c0ede 85%,#0b0c0e)}
/* Gradients belong to text accents, never every span in a heading. */
html[data-theme=graphite] :is(.hero-title,.rules-hero h1,.settings-hero h1) span:not(.accent):not(.gradient-text){background-image:none}
html[data-theme=graphite] :is(.hero-title .accent,.rules-hero h1 .accent,.settings-hero h1 .accent,.l-hero em){background-image:linear-gradient(105deg,#6ec7fa,#a58aff);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
html[data-theme=graphite] :is(.btn-primary,.webplay-btn) :is(span,i){color:inherit;-webkit-text-fill-color:currentColor;background:none}
/* Avoid cropped heading descenders and ornaments painted over controls. */
html[data-theme=graphite] .l-hero h1{line-height:1.16;padding-bottom:.08em;overflow-wrap:anywhere}
html[data-theme=graphite] .l-hero:before{content:'';position:absolute;pointer-events:none}
html[data-theme=graphite] .l-hero:after{border-radius:6px;opacity:.6}
html[data-theme=graphite] :is(.l-card,.panel-card,.wallet,.simple-card,.webplay-card,.settings-card,.board-category){min-width:0}
html[data-theme=graphite] :is(.l-card,.panel-card,.simple-card,.webplay-card) :is(p,h2,h3){overflow-wrap:anywhere}
html[data-theme=graphite] .user-dropdown{max-height:calc(100dvh - 95px);overflow-y:auto;overscroll-behavior:contain;max-width:calc(100vw - 24px)}
html[data-theme=graphite] :is(.l-link-card,.panel-button,.board-category,.job-tabs a){color:var(--text)}
html[data-theme=graphite] :is(input,textarea,select){color:var(--text);background-color:var(--bg-2);border-color:var(--border-hover)}
html[data-theme=graphite] :is(input,textarea)::placeholder{color:var(--text-3);opacity:1}
html[data-theme=graphite] .l-member{padding:0;overflow:hidden}
html[data-theme=graphite] .l-ph-type[aria-pressed=true]{border-color:var(--emerald);box-shadow:inset 0 0 0 1px var(--emerald)}
html[data-theme=graphite] .l-hero-small{padding-top:36px;padding-bottom:32px}
.graphite-particles{position:fixed;inset:0;width:100%;height:100%;pointer-events:none!important;z-index:1;opacity:.7;contain:strict}
@media(max-width:700px){html[data-theme=graphite] .l-hero h1{font-size:clamp(2rem,9vw,3.2rem)}html[data-theme=graphite] .l-actions>.btn{max-width:100%}html[data-theme=graphite] .l-hero-small{padding:28px 10px}.graphite-particles{opacity:.35}}
@media(prefers-reduced-motion:reduce){.graphite-particles{display:none!important}}

/* A single continuous background: no rectangular section fills or moving fade. */
html[data-theme=graphite] :is(.hero,.rules-hero,.settings-hero){isolation:auto}
html[data-theme=graphite] .section{background:transparent;z-index:2}
html[data-theme=graphite] :is(.l-page,.simple-page-wrap,.player-panel){position:relative;z-index:2}
html[data-theme=graphite] .rules-category{background:transparent}
html[data-theme=graphite] :is(.hero,.rules-hero,.settings-hero) .hero-bg-slideshow{
    transform:none!important;
    -webkit-mask-image:linear-gradient(#000 0%,#000 48%,transparent 100%);
    mask-image:linear-gradient(#000 0%,#000 48%,transparent 100%);
}
html[data-theme=graphite] :is(.hero,.rules-hero,.settings-hero) .hero-bg-overlay{
    background:linear-gradient(180deg,#0b0c0e55 0%,#0b0c0e85 45%,var(--bg) 100%),linear-gradient(110deg,#6ec7fa0c,#9b75ff12);
}
html[data-theme=graphite] .hero-shapes{
    -webkit-mask-image:linear-gradient(#000 55%,transparent 100%);
    mask-image:linear-gradient(#000 55%,transparent 100%);
}
html[data-theme=graphite] .hero-stats{
    background:transparent;border:0;box-shadow:none;backdrop-filter:none;
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
    width:min(100%,570px);padding:8px 0;
}
html[data-theme=graphite] .hero-stat{min-width:0;padding:0 18px}
html[data-theme=graphite] .hero-stat~.hero-stat{border-left:1px solid #a58aff26}
html[data-theme=graphite] .hero-stat-value{color:#e2e6ff;text-shadow:0 0 24px #829fff24}
html[data-theme=graphite] .hero-stat-label{color:var(--text-2)}

/* Logo colours extend to navigation, labels and small accents. */
html[data-theme=graphite] :is(.section-title,.hero-title .accent,.rules-hero h1 .accent,.settings-hero h1 .accent){
    background-image:var(--brand-gradient);background-clip:text;-webkit-background-clip:text;
    -webkit-text-fill-color:transparent;padding-bottom:.08em;
}
html[data-theme=graphite] :is(.hero-eyebrow,.rules-hero .hero-eyebrow,.section-label,.l-pill,.l-hero .pixel-tag){
    background:linear-gradient(110deg,#6ec7fa10,#9b75ff18);
    border:1px solid #97a4ff38;color:#c7ceff;box-shadow:inset 0 1px 0 #ffffff06;
}
html[data-theme=graphite] .hero-eyebrow .dot{background:var(--accent-a);box-shadow:0 0 12px #6ec7fa80}
html[data-theme=graphite] .nav-links>li>a.active{color:#bccaff;background:linear-gradient(110deg,#6ec7fa0b,#9b75ff12);border-radius:8px 8px 0 0}
html[data-theme=graphite] .nav-links>li>a.active i{color:var(--accent-a)}
html[data-theme=graphite] .nav-links a::after{background:var(--brand-gradient)}
html[data-theme=graphite] :is(.nav-links a:hover i,.dropdown-item:hover i,.l-link-card>i,.board-category i){color:var(--accent-a)}
html[data-theme=graphite] :is(.hero-logo-mark .icon-wrap,.rule-card .rule-icon,.feature-mini-icon){
    background:linear-gradient(135deg,#6ec7fa1c,#9b75ff20);
    border:1px solid #99acff38;box-shadow:inset 0 1px 0 #ffffff0a,0 8px 24px #00000018;
    color:#add0ff;
}
html[data-theme=graphite] :is(.hero-logo-mark .icon-wrap,.rule-icon,.feature-mini-icon) i{
    background:var(--brand-gradient);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
html[data-theme=graphite] .hero-actions{gap:16px}
html[data-theme=graphite] .hero-actions>:is(.btn,.ip-chip){min-height:46px;flex-shrink:0}
html[data-theme=graphite] :is(.btn-primary,.webplay-btn){
    background:var(--brand-gradient);background-clip:border-box;
    border:0;border-radius:12px;isolation:isolate;overflow:hidden;
    box-shadow:inset 0 1px 0 #ffffff33,0 6px 24px #9b75ff22;
}
html[data-theme=graphite] .btn-primary::before{pointer-events:none;transform:none}
html[data-theme=graphite] .btn-primary::after{display:none}
html[data-theme=graphite] .hero-actions .ip-chip{background:#12141660;border-color:#a4b3ff30}
html[data-theme=graphite] .feature-mini-card{
    background:linear-gradient(125deg,#6ec7fa07,transparent 55%,#9b75ff08),var(--surface);
}
html[data-theme=graphite] :is(.feature-mini-card::before,.rule-card .glow-line){background:var(--brand-gradient)}

/* Rules: coloured edge, visible numbering and softer, more dimensional cards. */
html[data-theme=graphite] .rules-page{margin-top:-48px}
html[data-theme=graphite] .rules-category-title{border-bottom-color:#a4b3ff1c;gap:14px}
html[data-theme=graphite] .rules-category-title::after{width:100px;background:var(--brand-gradient);box-shadow:0 0 18px #9b75ff38}
html[data-theme=graphite] .rules-category-title>i{
    display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex-shrink:0;
    border:1px solid #8facff30;border-radius:10px;background:linear-gradient(135deg,#6ec7fa14,#9b75ff1c);color:var(--accent-a);
}
html[data-theme=graphite] .rules-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
html[data-theme=graphite] .rule-card{
    --rule-tint:110,199,250;
    padding:28px;border-color:#9baeff26;
    background:radial-gradient(ellipse at 0 0,rgba(var(--rule-tint),.09),transparent 70%),var(--surface);
    box-shadow:0 12px 30px #00000022;isolation:isolate;
    transition:transform .3s var(--motion-ease),border-color .3s,box-shadow .3s;
}
html[data-theme=graphite] .rule-card:nth-child(3n+2){--rule-tint:147,156,255}
html[data-theme=graphite] .rule-card:nth-child(3n){--rule-tint:165,138,255}
html[data-theme=graphite] .rule-card::before{display:none}
html[data-theme=graphite] .rule-card::after{
    inset:0;background:radial-gradient(ellipse at 100% 0,#9b75ff10,transparent 65%);
    pointer-events:none;opacity:.4;
}
html[data-theme=graphite] .rule-card .glow-line{
    left:28px;right:28px;width:auto;height:2px;opacity:.65;transform:scaleX(1);
}
html[data-theme=graphite] .rule-card-number{
    top:21px;right:25px;font-size:2.7rem;line-height:1.15;font-weight:600;
    color:rgba(var(--rule-tint),.48);letter-spacing:-.06em;
}
html[data-theme=graphite] .rule-card .rule-icon{width:46px;height:46px;margin-bottom:20px;border-radius:13px}
html[data-theme=graphite] .rule-card h3{line-height:1.45;margin-bottom:12px}
html[data-theme=graphite] .rule-card p{line-height:1.75}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
    html[data-theme=graphite] .rule-card:hover{
        transform:translateY(-5px);border-color:#9daeff66;
        box-shadow:0 20px 40px #00000040,0 0 25px rgba(var(--rule-tint),.06);
    }
    html[data-theme=graphite] .rule-card:hover::after{opacity:1}
    html[data-theme=graphite] .rule-card:hover .glow-line{opacity:1}
    html[data-theme=graphite] .rule-card:hover .rule-icon{
        background:linear-gradient(135deg,#6ec7fa28,#9b75ff30);transform:translateY(-2px) rotate(-5deg);
        box-shadow:0 6px 20px #829fff20;
    }
    html[data-theme=graphite] .rule-card:hover h3{color:#d2ddff}
}
@media(max-width:1000px){html[data-theme=graphite] .rules-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){
    html[data-theme=graphite] .rules-grid{grid-template-columns:minmax(0,1fr);gap:16px}
    html[data-theme=graphite] .rules-page{margin-top:0}
    html[data-theme=graphite] .rules-hero{min-height:560px;padding-bottom:64px}
    html[data-theme=graphite] .rule-card{padding:24px}
    html[data-theme=graphite] .hero-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 0;max-width:360px}
    html[data-theme=graphite] .hero-stat:nth-of-type(4n+1){border-left:0}
    html[data-theme=graphite] .hero-actions{gap:14px}
}
@media(hover:none){html[data-theme=graphite] .rule-card:hover{transform:none}}