/* Badges describe the theme; they are independent of access and BETA labels. */
.theme-interface-badge{display:inline-flex;align-items:center;gap:5px;vertical-align:middle;max-width:100%;margin:5px 0 3px 7px;padding:4px 7px;border:1px solid var(--line);border-radius:4px;color:var(--accent);background:var(--bg);font:700 10px/1.4 Arial,Helvetica,sans-serif;letter-spacing:0;white-space:normal}
.theme-interface-badge::before{content:'';display:inline-block;width:11px;height:9px;border:1px solid currentColor;border-top-width:3px;border-radius:2px;flex-shrink:0}
.theme-option .theme-interface-badge{display:flex;width:fit-content;margin:7px 0 0}
.sentinel-signature{display:none}
:root[data-interface=sentinel]{--bg:#101113;--panel:#1c1e21f5;--panel2:#292c30;--header:#141619f7;--soft:#3c3021;--line:#766956;--text:#faf2e8;--muted:#cec7bc;--sentinel-line:#d6a96b66;--sentinel-radius:3px 17px 3px 3px}
:root[data-interface=sentinel] :is(.header,.legal-header){background:var(--header);border-color:var(--sentinel-line);box-shadow:0 12px 36px #0004}
:root[data-interface=sentinel] .brand{font-size:20px;letter-spacing:.3px;gap:16px}
:root[data-interface=sentinel] .brand small{font-size:7px;letter-spacing:1.7px}
:root[data-interface=sentinel] .brand-mark{display:grid;place-items:center;width:44px;height:46px;font-size:32px;letter-spacing:-3px;padding-right:4px;border:1px solid var(--sentinel-line);border-bottom:3px solid var(--accent);border-radius:3px 10px 3px 3px;flex-shrink:0}
:root[data-interface=sentinel] .sentinel-signature{display:flex;align-items:center;gap:12px;font:700 13px/1.4 monospace;letter-spacing:2px;color:var(--accent);text-transform:uppercase}
.sentinel-signature small{display:block;margin-top:3px;color:var(--muted);font:9px/1.5 monospace;letter-spacing:2px}
.sentinel-sigil{width:28px;height:32px;stroke:currentColor;stroke-width:1.4;fill:none}
:root[data-interface=sentinel] :is(.button,.filter,.theme-filter,.account-text,.icon-button,.mobile-menu-toggle){border-radius:3px 10px 3px 3px}
:root[data-interface=sentinel] .button{box-shadow:inset 0 -3px 0 #0002}
:root[data-interface=sentinel] .button.outline{background:var(--panel);border-color:var(--sentinel-line);box-shadow:none}
:root[data-interface=sentinel] :is(.hero,.info-card,.game-card,.account-card,.editor-panel,.admin-list-panel,.news-card,.forum-topic,.social-card,.shop-card,.profile-boosty-card,.legal-document){border-radius:var(--sentinel-radius);border-color:var(--sentinel-line);box-shadow:inset 3px 0 0 #edbb7b22,0 12px 30px #0003}
:root[data-interface=sentinel] :is(.info-card,.account-card,.editor-panel,.admin-list-panel,.social-card,.news-card,.legal-document){background:linear-gradient(135deg,#23252af5,#181a1ef5)}
:root[data-interface=sentinel] :is(.account-card,.editor-panel,.admin-list-panel,.legal-document){border-top:3px solid var(--accent)}
:root[data-interface=sentinel] .hero{border-top:3px solid var(--accent)}
:root[data-interface=sentinel] .hero .eyebrow{width:fit-content;max-width:100%;padding:8px 11px;border:1px solid #edbb7b77;border-left:3px solid var(--accent);background:#141619cc;color:#fff1db}
:root[data-interface=sentinel] .hero-meta{border:1px solid var(--sentinel-line);padding:9px 12px;background:#141619dd;letter-spacing:1px}
:root[data-interface=sentinel] .platforms{border:0;background:transparent;gap:12px;overflow:visible}
:root[data-interface=sentinel] .platform{border:1px solid var(--sentinel-line);border-left:3px solid var(--accent);border-radius:3px;background:var(--header);gap:12px;min-width:0}
:root[data-interface=sentinel] .platform>div{min-width:0;overflow-wrap:anywhere}
:root[data-interface=sentinel] .section-head{border-bottom:1px solid var(--sentinel-line);padding-bottom:13px}
:root[data-interface=sentinel] .section-head h2{display:flex;align-items:center;gap:12px}
:root[data-interface=sentinel] .section-head h2 span{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-width:35px;height:30px;border:1px solid var(--sentinel-line);border-left:3px solid var(--accent);padding:4px;margin:0;font:11px/1 monospace;color:var(--accent)}
:root[data-interface=sentinel] :is(.page-intro,.account-intro,.admin-intro,.social-intro){border-bottom:1px solid var(--sentinel-line);padding-bottom:26px;margin-bottom:24px}
:root[data-interface=sentinel] :is(.page-intro,.account-intro,.admin-intro,.social-intro)>.eyebrow{letter-spacing:2.5px;color:var(--accent)}
:root[data-interface=sentinel] :is(.account-tabs,.admin-tabs,.account-section-tabs){border:1px solid var(--sentinel-line);border-radius:3px;background:var(--header);padding:8px;gap:8px}
:root[data-interface=sentinel] :is(.account-tabs,.admin-tabs,.account-section-tabs) button{border:1px solid transparent;border-radius:2px}
:root[data-interface=sentinel] :is(.account-tabs,.admin-tabs,.account-section-tabs) button[aria-selected=true]{background:var(--soft);color:var(--text);border-color:var(--sentinel-line);box-shadow:inset 0 -2px 0 var(--accent)}
:root[data-interface=sentinel] .admin-tabs button::after{display:none}
:root[data-interface=sentinel] :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea){border-radius:3px;background-color:var(--bg);border-color:var(--line)}
:root[data-interface=sentinel] :is(input,select,textarea):focus-visible{outline:2px solid var(--accent);outline-offset:3px}
:root[data-interface=sentinel] :is(.theme-option,.interface-card,.day){border-radius:var(--sentinel-radius)}
:root[data-interface=sentinel] :is(.theme-preview,.interface-mini){border-radius:2px}
:root[data-interface=sentinel] .interface-theme-override{border-radius:3px;border-left:3px solid var(--accent)}
:root[data-interface=sentinel] dialog{border:1px solid var(--sentinel-line);border-top:3px solid var(--accent);border-radius:var(--sentinel-radius);box-shadow:0 30px 100px #0009}
:root[data-interface=sentinel] .footer{border-color:var(--sentinel-line)}
@media(min-width:801px){
 :root[data-interface=sentinel] :is(.header,.legal-header){position:relative;inset:auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px 24px;width:calc(100% - 56px);max-width:1400px;min-height:0;height:auto;margin:20px auto 0;padding:22px 24px 18px;border:1px solid var(--sentinel-line);border-top:3px solid var(--accent);border-radius:var(--sentinel-radius)}
 :root[data-interface=sentinel] :is(.header,.legal-header) .brand{grid-column:1;grid-row:1}
 :root[data-interface=sentinel] .sentinel-signature{grid-column:2;grid-row:1;justify-self:center}
 :root[data-interface=sentinel] .header-actions{grid-column:3;grid-row:1;display:flex;gap:10px;justify-self:end;margin:0}
 :root[data-interface=sentinel] .header-actions .button{min-height:42px}
 :root[data-interface=sentinel] :is(.header,.legal-header) nav{grid-column:1/-1;grid-row:2;display:flex;align-self:stretch;align-items:stretch;gap:8px;margin:0;padding:0;width:auto;height:auto;counter-reset:sentinel-nav}
 :root[data-interface=sentinel] :is(.header,.legal-header) nav a{position:relative;flex:1;display:flex;align-items:center;justify-content:flex-start;gap:14px;min-height:48px;padding:12px 16px;border:1px solid var(--sentinel-line);border-radius:2px;background:var(--panel);font-size:13px;counter-increment:sentinel-nav}
 :root[data-interface=sentinel] :is(.header,.legal-header) nav a::before{content:counter(sentinel-nav,decimal-leading-zero);font:10px/1 monospace;color:var(--accent);opacity:.85}
 :root[data-interface=sentinel] :is(.header,.legal-header) nav a[aria-current=page]{color:var(--text);background:var(--soft);border-color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent)}
 :root[data-interface=sentinel] :is(.header,.legal-header) nav a::after{display:none}
 :root[data-interface=sentinel] :is(main,.legal-page){width:calc(100% - 56px);max-width:1400px;margin:0 auto;padding:24px 0 44px}
 :root[data-interface=sentinel] .hero{height:460px;min-height:0}
 :root[data-interface=sentinel] .hero-copy{padding:36px 38px;max-width:650px}
 :root[data-interface=sentinel] .hero h1{font-size:clamp(42px,3.6vw,54px)}
 :root[data-interface=sentinel] .hero-actions{flex-wrap:wrap;gap:18px 22px}
 :root[data-interface=sentinel] .platforms{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:16px}
 :root[data-interface=sentinel] .platform{padding:20px 18px}
 :root[data-interface=sentinel] .home-lower{gap:24px;margin-top:30px}
 :root[data-interface=sentinel] .footer{width:calc(100% - 56px);max-width:1400px;margin:0 auto;padding:24px 0 30px;flex-wrap:wrap}
}
@media(min-width:1200px){
 :root[data-interface=sentinel] main:has(>.hero){display:grid;grid-template-columns:minmax(0,1fr) 254px;gap:26px 20px;align-items:start}
 :root[data-interface=sentinel] main>.hero{grid-column:1;grid-row:1}
 :root[data-interface=sentinel] main>.platforms{grid-column:2;grid-row:1;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(4,minmax(0,1fr));height:460px;margin:0}
 :root[data-interface=sentinel] main:has(>.hero)>:not(.hero):not(.platforms){grid-column:1/-1}
 :root[data-interface=sentinel] .home-lower{margin-top:0}
 :root[data-interface=sentinel] .platform .external{display:none}
}
@media(min-width:801px) and (max-width:1000px){
 :root[data-interface=sentinel] :is(.header,.legal-header){grid-template-columns:1fr auto}
 :root[data-interface=sentinel] .header-actions{grid-column:2}
 :root[data-interface=sentinel] .sentinel-signature{display:none}
 :root[data-interface=sentinel] :is(.header,.legal-header) nav a{gap:9px;padding:12px 10px}
}
@media(max-width:800px){
 :root[data-interface=sentinel]{--sentinel-radius:3px 14px 3px 3px}
 :root[data-interface=sentinel] :is(.header,.legal-header)[data-mobile-enhanced]{border-bottom:2px solid var(--sentinel-line);background:var(--header);box-shadow:none}
 :root[data-interface=sentinel] [data-mobile-enhanced] .brand-mark{width:32px;height:34px;font-size:25px;letter-spacing:-2px;padding-right:3px}
 :root[data-interface=sentinel] .sentinel-signature{display:none}
 :root[data-interface=sentinel] [data-mobile-enhanced][data-menu-open=true] .sentinel-signature{display:flex;grid-column:1/-1;justify-content:center;padding:14px 0 2px}
 :root[data-interface=sentinel] [data-mobile-enhanced] nav a{border-radius:3px;border-left:3px solid var(--sentinel-line)}
 :root[data-interface=sentinel] [data-mobile-enhanced] nav a[aria-current=page]{border-left-color:var(--accent)}
 :root[data-interface=sentinel] .hero .eyebrow{padding:6px 9px;font-size:8px}
 :root[data-interface=sentinel] .platforms{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 :root[data-interface=sentinel] .section-head{gap:8px}
 :root[data-interface=sentinel] .section-head h2{gap:8px;font-size:18px}
 :root[data-interface=sentinel] .section-head h2 span{min-width:30px;height:28px}
 :root[data-interface=sentinel] :is(.account-section-tabs,.admin-tabs){padding:8px 4px}
 :root[data-interface=sentinel] .interface-theme-override{padding:16px;gap:14px}
 :root[data-interface=sentinel] .interface-theme-override .button{width:100%}
}
@media(prefers-reduced-motion:no-preference){
 :root[data-interface=sentinel] .sentinel-sigil{animation:sentinel-interface-light 6s ease-in-out infinite alternate}
 :root[data-interface=sentinel] :is(.button,.platform,.game-card,.news-card,.shop-card,.theme-option){transition:border-color .3s ease,background-color .3s ease,box-shadow .3s ease,transform .3s cubic-bezier(.22,1,.36,1)}
 @media(hover:hover){:root[data-interface=sentinel] :is(.platform,.game-card,.news-card,.shop-card):hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 12px 32px #0005}}
 @keyframes sentinel-interface-light{from{opacity:.55}to{opacity:1}}
}
:root[data-theme-motion=off] .sentinel-sigil,:root[data-theme-motion-paused=true] .sentinel-sigil{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){:root[data-interface=sentinel] *, :root[data-interface=sentinel] *::before,:root[data-interface=sentinel] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{:root[data-interface=sentinel] :is(.header,.legal-header,.sentinel-signature){display:none!important}:root[data-interface=sentinel] :is(main,.legal-page,.footer){display:block;margin:0;width:100%;max-width:none}}
