/* Landing page (website): dark fantasy-game style. Original MizPix artwork; set a key-art image in Admin > Settings > Landing hero image. */
:root{
    --bg:#060a14; --navy:#0c1426; --navy2:#101b33; --gold:#d1ad62; --gold2:#8c6d33; --gold-hi:#f4d98a;
    --text:#e3e9f6; --muted:#8c99b4; --line:#2a3550;
    --serif:"Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:#060a14}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}

.maint{background:#5a1f12;color:#ffe1d1;text-align:center;padding:8px 14px;font-size:14px;border-bottom:1px solid #a24a2d}

/* ---------- hero */
.hero{position:relative;min-height:min(74vh,640px);display:flex;flex-direction:column;overflow:hidden;
    padding:max(12px,env(safe-area-inset-top)) 14px 34px}
.hero-bg{position:absolute;inset:0;z-index:0;
    background:
        linear-gradient(180deg,rgba(6,10,20,.15) 0%,rgba(6,10,20,.1) 40%,rgba(6,10,20,.92) 100%),
        var(--hero,none),
        radial-gradient(520px 420px at 78% 38%,rgba(150,90,255,.38),transparent 70%),
        radial-gradient(560px 460px at 18% 52%,rgba(60,140,255,.32),transparent 70%),
        radial-gradient(900px 500px at 50% 105%,rgba(209,173,98,.28),transparent 70%),
        linear-gradient(180deg,#0a1226,#0d1b3a 55%,#08101f);
    background-size:cover,cover,auto,auto,auto,auto;background-position:center}
.hero-bg::after{content:"";position:absolute;inset:0;opacity:.7;
    background-image:
        radial-gradient(1.4px 1.4px at 12% 18%,#fff 50%,transparent 51%),
        radial-gradient(1px 1px at 27% 62%,#cfe0ff 50%,transparent 51%),
        radial-gradient(1.6px 1.6px at 44% 28%,#fff 50%,transparent 51%),
        radial-gradient(1px 1px at 63% 12%,#ffe9b0 50%,transparent 51%),
        radial-gradient(1.4px 1.4px at 81% 47%,#fff 50%,transparent 51%),
        radial-gradient(1px 1px at 92% 22%,#cfe0ff 50%,transparent 51%),
        radial-gradient(1.2px 1.2px at 71% 74%,#fff 50%,transparent 51%),
        radial-gradient(1px 1px at 35% 86%,#ffe9b0 50%,transparent 51%),
        radial-gradient(1.2px 1.2px at 6% 78%,#fff 50%,transparent 51%);
    animation:tw 6s ease-in-out infinite alternate}
@keyframes tw{from{opacity:.45}to{opacity:.9}}
.pills{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:8px}
.pill{font:700 11px/1 var(--serif);letter-spacing:.08em;text-transform:uppercase;color:#fff;
    padding:9px 14px;border:1px solid var(--gold);border-radius:99px;background:rgba(5,8,16,.78)}
.pill:hover{background:#17233f}

.hero-main{position:relative;z-index:2;margin-top:auto;display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:60px}
.crest{filter:drop-shadow(0 4px 14px rgba(0,0,0,.7))}
.hero-main .crest{max-width:min(300px,78vw)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hero h1{margin:10px 0 2px;font:700 clamp(34px,9vw,58px)/1.05 var(--serif);letter-spacing:.02em;
    background:linear-gradient(var(--gold-hi),var(--gold) 55%,var(--gold2));-webkit-background-clip:text;background-clip:text;color:transparent;
    text-shadow:none;filter:drop-shadow(0 3px 10px rgba(0,0,0,.8))}
.sub{margin:0 0 18px;color:#c4cde2;font-size:14px;text-shadow:0 1px 6px #000}

.stores{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:min(100%,380px)}
.stores:has(> :only-child){grid-template-columns:1fr}
.store{display:flex;align-items:center;gap:10px;padding:9px 12px;text-align:left;color:#fff;
    background:#05070d;border:1px solid #6d7385;border-radius:9px;transition:border-color .15s,transform .05s}
.store:hover{border-color:var(--gold)}
.store:active{transform:translateY(1px)}
.store svg{flex:none}
.store span{display:flex;flex-direction:column;font-weight:700;font-size:15px;line-height:1.15}
.store small{font-weight:400;font-size:10px;color:#b9c0d1}
.store.off{opacity:.5;justify-content:center}

.wide{display:flex;flex-direction:column;gap:2px;margin-top:12px;width:min(100%,380px);padding:12px 14px;
    background:linear-gradient(180deg,#7a1c1c,#4b0d10);border:1px solid #c9883f;border-radius:4px;
    box-shadow:inset 0 0 0 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.6)}
.wide b{font:700 18px var(--serif);letter-spacing:.06em;text-transform:uppercase;color:#fff;text-shadow:0 2px 3px #000}
.wide span{font-size:12px;color:#f4cfa8}
.wide:hover{filter:brightness(1.12)}

/* gold rule between hero and news */
.rule{height:6px;background:linear-gradient(90deg,#4d3a18,var(--gold-hi),#4d3a18);border-top:1px solid #1b1405;border-bottom:1px solid #1b1405}

/* ---------- news */
.news{background:linear-gradient(180deg,#0a1224,#0c1730);padding:30px 14px 26px}
.tabs,.list,.more,.none{max-width:720px;margin-left:auto;margin-right:auto}
.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:22px}
.tab{font:600 12px/1 var(--serif);letter-spacing:.06em;text-transform:uppercase;color:var(--gold);cursor:pointer;
    padding:11px 4px;background:transparent;border:1px solid var(--gold2);border-radius:2px}
.tab:hover{background:#13203d}
.tab.on{color:#4c5877;border-color:#2a3550;background:#0a1020;cursor:default}
.list{list-style:none;padding:0}
.list li{border-bottom:1px solid #26314b}
.list a{display:block;padding:12px 2px}
.list a:hover .title{color:#fff;text-decoration:underline}
.meta{display:flex;align-items:center;gap:10px;margin-bottom:5px;font-size:11px;color:#b9c3dc}
.date{font-family:ui-monospace,Menlo,Consolas,monospace}
.tag{padding:2px 14px;border-radius:99px;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#1a1405;background:#f7e9a8}
.t-maintenance{background:#ffbf82}.t-update{background:#9ce8be}.t-info{background:#b7d0ff}.t-event{background:#f7e9a8}
.title{display:block;font-size:14px;color:#e6ecfa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.more{display:flex;justify-content:flex-end;margin-top:16px}
.viewall{font:700 12px/1 var(--serif);letter-spacing:.04em;color:#fff;padding:9px 26px;border-radius:99px;
    background:linear-gradient(#3a62b8,#1b2f6b);border:1px solid #7f9be0;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.viewall:hover{filter:brightness(1.15)}
.none{color:var(--muted);text-align:center;padding:18px 0}

/* ---------- banners */
.banners{background:#0e1a33;background-image:radial-gradient(800px 300px at 50% 0,rgba(63,100,190,.25),transparent 70%);
    padding:26px 14px 20px;display:flex;flex-direction:column;align-items:center;gap:14px;border-top:2px solid #1d2a4a}
.banner{display:flex;flex-direction:column;gap:3px;width:min(100%,420px);padding:14px 16px;border-radius:3px;border:2px solid #000;
    box-shadow:0 0 0 1px var(--gold2),0 6px 14px rgba(0,0,0,.5)}
.banner b{font:700 19px var(--serif);color:#fff;text-shadow:0 2px 0 #000,0 0 10px rgba(0,0,0,.6)}
.banner span{font-size:12.5px;color:#f1ecd6;text-shadow:0 1px 3px #000}
.b-gold{background:linear-gradient(135deg,#3a2a10,#8a5d17 55%,#3a2a10)}
.b-violet{background:linear-gradient(135deg,#1c1840,#4b3fb3 55%,#1c1840)}
.banner:hover{filter:brightness(1.12)}

.foot{padding:22px 14px calc(26px + env(safe-area-inset-bottom));text-align:center;color:var(--muted);font-size:12px;background:#080d19;border-top:1px solid #1a2440}
.foot a{color:var(--gold)}

/* ---------- popup (announcement in an iframe) */
.modal{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;padding:12px}
.modal-box{width:min(640px,100%);height:min(520px,100%);border-radius:12px;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.7)}
.modal iframe{width:100%;height:100%;border:0;background:#0e1524}

@media (min-width:700px){
    .hero{padding:18px 28px 50px}
    .tabs{gap:14px}
    .tab{font-size:13px;padding:13px 4px}
    .title{font-size:15px}
}