/* Herd Apps Hub styles. Loaded from this site only (CSP style-src 'self'; no inline styles anywhere). */
@font-face{font-family:'Lilita One';font-style:normal;font-weight:400;font-display:swap;src:url(./fonts/lilita-one-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(./fonts/inter-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(./fonts/inter-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url(./fonts/inter-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:800;font-display:swap;src:url(./fonts/inter-latin-800-normal.woff2) format('woff2')}
/* Metric-matched fallbacks so text doesn't jump when the web fonts arrive */
@font-face{font-family:'Inter Fallback';src:local(Arial),local('Helvetica Neue'),local(Helvetica);size-adjust:107.4%;ascent-override:90.2%;descent-override:22.5%;line-gap-override:0%}
@font-face{font-family:'Lilita Fallback';src:local('Arial Black'),local(Arial);size-adjust:92%;ascent-override:95%;descent-override:25%;line-gap-override:0%}
:root{color-scheme:dark;--bg:#0b0f1a;--card:#141b2b;--line:#2a3550;--txt:#e9eef7;--mut:#9aa6bd;--acc:#ffd21f;--acc2:#ff5a1f;--ok:#2fd35a;--focus:#7cc4ff}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--txt);font-family:Inter,'Inter Fallback',system-ui,sans-serif;line-height:1.5}
a{color:inherit}.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px}
.skip{position:absolute;left:12px;top:-60px;z-index:20;background:var(--acc);color:#111;font-weight:700;padding:10px 16px;border-radius:10px;text-decoration:none}.skip:focus{top:10px}
header{position:sticky;top:0;z-index:5;background:rgba(11,15,26,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:22px;height:64px}.logo{display:flex;align-items:center;gap:8px;text-decoration:none;font-weight:800;font-size:22px;letter-spacing:-.5px;min-height:44px}
.logo img{display:block;height:26px;width:auto}.logo small{font-weight:600;color:var(--mut);font-size:13px;margin-left:4px}
.nav nav{display:flex;gap:6px;margin-left:auto;font-size:14px;font-weight:600}.nav nav a{text-decoration:none;color:var(--mut);padding:11px 10px;border-radius:8px}.nav nav a:hover{color:var(--txt)}
.btn{border:0;border-radius:12px;padding:12px 18px;min-height:44px;font:700 14px Inter,'Inter Fallback',sans-serif;cursor:pointer;color:#111;background:var(--acc)}
.btn.ghost{background:transparent;color:var(--txt);border:1px solid #3a4766}.btn.dark{background:#000;color:#fff;border:1px solid #3a4766}.btn.white{background:#fff;color:#1f1f1f}.btn:disabled{opacity:.6;cursor:default}
.btn:disabled.dark,.btn:disabled.white{opacity:.7}
.hero{padding:72px 20px 48px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:40px;align-items:center}
h1{font-family:'Lilita One','Lilita Fallback',sans-serif;font-weight:400;font-size:clamp(40px,6vw,68px);line-height:1;margin:0 0 16px;letter-spacing:.5px}
h1 span{color:var(--acc)}.lead{color:var(--mut);font-size:18px;max-width:520px}
.pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;padding:0;list-style:none}.pill{border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:13px;color:var(--mut)}
.stack{position:relative;width:min(100%,380px);aspect-ratio:380/310;margin:0 auto}
.pc{position:absolute;width:42%;border-radius:14px;padding:5px;background:linear-gradient(160deg,#1d2740,#121828);border:1px solid var(--line);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.pc img{display:block;width:100%;height:auto;border-radius:10px;aspect-ratio:460/644}
.pc.a{left:4%;top:8%;transform:rotate(-7deg)}.pc.b{left:30%;top:2%;transform:rotate(0)}.pc.c{left:54%;top:12%;transform:rotate(7deg)}
section{padding:56px 0;border-top:1px solid var(--line)}h2{font-family:'Lilita One','Lilita Fallback',sans-serif;font-weight:400;font-size:36px;line-height:1.15;margin:0 0 6px;letter-spacing:.4px}.sub{color:var(--mut);margin:0 0 26px}
.games{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:16px;padding:0;margin:0;list-style:none}
.game{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden}.game .art{height:120px;display:flex;align-items:center;justify-content:center;font-size:54px}
.game .in{padding:14px}.game h3{margin:0;font-size:17px}.game p{margin:6px 0 10px;font-size:13px;color:var(--mut);min-height:40px}.tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;padding:3px 8px;border-radius:6px;background:#22304a;color:#9fd6ff}
.g0{background:linear-gradient(135deg,#ff9a3a,#d8202a)}.g1{background:linear-gradient(135deg,#7a2ae0,#1aa7ff)}.g2{background:linear-gradient(135deg,#3a4a3a,#151d15)}.g3{background:linear-gradient(135deg,#ff6fa8,#ffb21f)}.g4{background:linear-gradient(135deg,#2a1010,#5a1a2a)}
[hidden]{display:none!important}.gblue{color:#4285f4}
.signin{display:flex;gap:10px;flex-wrap:wrap}
.colbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px}.chip{border:1px solid #3a4766;background:transparent;color:var(--mut);border-radius:999px;padding:8px 14px;min-height:40px;font:600 13px Inter,'Inter Fallback',sans-serif;cursor:pointer}.chip.on{background:var(--acc);color:#111;border-color:var(--acc)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:0;overflow:hidden;display:flex;flex-direction:column;gap:0}
.card .top{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;color:var(--mut);font-weight:600}
.card .in{padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.card .artbtn{display:block;border:0;padding:0;background:#0b1120;cursor:zoom-in;width:100%;border-radius:0}.card .artbtn:focus-visible{outline-offset:-3px}
.card .artbtn img{display:block;width:100%;height:auto;aspect-ratio:1024/1434}
.card .ph{aspect-ratio:1024/1434;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:44px;background:repeating-linear-gradient(135deg,#101727,#101727 12px,#0d1422 12px,#0d1422 24px)}.card .ph small{font-size:12px;color:var(--mut);font-weight:700}
.card.lock{background:#101727}
.st{font-size:12px;font-weight:800}.st.ok{color:var(--ok)}.st.q{color:var(--acc)}
.note{font-size:13px;color:var(--mut)}.box{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px}
.mt{margin-top:18px}.tight{margin:0}.flush{margin-top:0}.flush-b{margin-bottom:0}.sub.s{margin-bottom:12px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
details{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:0 16px;margin-bottom:10px}summary{cursor:pointer;font-weight:700;padding:14px 0;min-height:44px}details p{color:var(--mut);margin:0 0 14px;font-size:14px}
footer{border-top:1px solid var(--line);padding:30px 0 50px;color:var(--mut);font-size:13px}footer .f{display:flex;gap:6px 18px;flex-wrap:wrap}footer a{display:inline-block;padding:6px 0}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.65);display:none;align-items:center;justify-content:center;z-index:10;padding:16px}.modal.on{display:flex}
.mbox{background:#121a2a;border:1px solid var(--line);border-radius:20px;width:min(440px,100%);max-height:92vh;overflow:auto;padding:22px}.mbox h3{margin:0 0 6px;font-size:20px}
input{width:100%;background:#0b1120;border:1px solid #3a4766;color:var(--txt);border-radius:10px;padding:12px;font:500 14px ui-monospace,monospace;margin:8px 0}
.err{color:#ff8f8f;font-size:13px;min-height:18px}.banner{background:#1a2440;border:1px dashed #4a5a7a;border-radius:12px;padding:10px 14px;font-size:13px;color:#cfe0ff;margin-bottom:16px}
.banner .chip{margin-left:6px}
.mbox.wide{width:min(520px,100%)}.mbox.wide img{display:block;width:100%;height:auto;border-radius:12px;margin-bottom:12px}
.row{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}.btn.danger{background:transparent;color:#ff9a9a;border:1px solid #6a3030}
@media (max-width:760px){.hero{grid-template-columns:minmax(0,1fr);padding:40px 20px 32px}.nav nav{display:none}.two{grid-template-columns:1fr}h2{font-size:30px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.card .in{padding:10px}.games{grid-template-columns:repeat(2,minmax(0,1fr))}.nav{gap:12px}}
@media (max-width:380px){.nav .btn{padding:12px 12px}.logo small{display:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.nf{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px}.nf h1{font-size:clamp(36px,8vw,56px)}.nf a{color:var(--acc)}
.nf .lead{margin:0 auto}
.gamelink{display:block;color:inherit;text-decoration:none}.gamelink:hover .art,.gamelink:focus-visible .art{filter:brightness(1.1)}.gamelink:focus-visible{outline:3px solid #fff;outline-offset:-3px}.tag.play{background:#1ec28b;color:#04281c;font-weight:700}