:root{--gold:#ffcc4d;--gold2:#ff9d2e;--ink:#eae6ff;--muted:#9b93c9;--panel:#171330;--line:#332c66;--sidebar:230px}
*{box-sizing:border-box}html,body{height:100%;margin:0}body{overflow:hidden;font-family:"Segoe UI",system-ui,sans-serif;color:var(--ink);background:#0d0b1a}
.app-shell{height:100%;display:grid;grid-template-columns:1fr;background:radial-gradient(900px 600px at 70% -20%,#2a2170 0%,transparent 65%),#0d0b1a}
.app-sidebar{position:fixed;z-index:50;inset:0 auto 0 0;width:min(310px,88vw);display:flex;min-width:0;flex-direction:column;border-right:1px solid var(--line);background:rgba(13,11,26,.985);padding:18px 12px;transform:translateX(-105%);transition:transform .2s ease;box-shadow:18px 0 48px rgba(0,0,0,.55)}.app-sidebar.open{transform:translateX(0)}
.app-brand{padding:5px 10px 18px;text-decoration:none;font-size:25px;font-weight:950;background:linear-gradient(#fff2c4,var(--gold),var(--gold2));background-clip:text;color:transparent;white-space:nowrap}
#appNav{display:flex;flex:1;flex-direction:column;gap:3px;overflow:auto}.app-link{display:flex;gap:11px;align-items:center;padding:10px 11px;border:1px solid transparent;border-radius:10px;color:var(--muted);text-decoration:none;font-weight:700;white-space:nowrap}.app-link:hover{background:#211b48;color:var(--ink)}.app-link.active{border-color:#5a4a20;background:#2b234d;color:var(--gold)}.app-link span:first-child{width:22px;text-align:center}
.app-collapse,.app-menu{cursor:pointer;border:1px solid var(--line);border-radius:9px;background:#211b48;color:var(--ink);padding:8px}.app-collapse{width:100%;color:var(--muted)}.app-menu{display:block;font-size:20px;line-height:1}.app-main{min-width:0;display:grid;grid-template-rows:58px 1fr}.app-topbar{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);padding:8px 18px;background:rgba(13,11,26,.85)}.app-topbar>div{display:flex;flex-direction:column;min-width:0}.app-topbar small{color:var(--muted)}.app-points{margin-left:8px;padding:7px 11px;border:1px solid #5a4a20;border-radius:999px;background:#211b3d;color:var(--gold);font-size:13px;font-weight:900;white-space:nowrap}.app-live{margin-left:auto;color:#78e6a3;font-size:12px}.app-live i{display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:50%;background:#45db7c;box-shadow:0 0 10px #45db7c}.app-view{position:relative;min-width:0;min-height:0}.app-frame{width:100%;height:100%;display:block;border:0;background:#0d0b1a}.app-loading{position:absolute;inset:0;display:grid;place-items:center;color:var(--gold);font-weight:800}.app-backdrop{display:none;position:fixed;z-index:40;inset:0;border:0;background:rgba(4,3,12,.68);cursor:pointer}body.menu-open .app-backdrop{display:block}
.spa-home{height:100%;overflow:auto;padding:28px clamp(18px,4vw,56px) 60px}.spa-hero{max-width:1180px;margin:0 auto 25px;display:flex;align-items:end;justify-content:space-between;gap:20px}.spa-hero h1{font-size:clamp(38px,7vw,76px);line-height:1;margin:0;background:linear-gradient(#fff2c4,var(--gold),var(--gold2));background-clip:text;color:transparent}.spa-hero p{color:var(--muted);font-size:18px}.spa-points{border:1px solid var(--line);border-radius:12px;background:#171330;padding:12px 16px;color:var(--gold);font-weight:900;white-space:nowrap}.spa-grid{max-width:1180px;margin:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:13px}.spa-card{min-height:188px;display:flex;flex-direction:column;padding:18px;border:1px solid var(--line);border-radius:15px;background:linear-gradient(160deg,#241f52,#171330);color:var(--ink);text-decoration:none;box-shadow:0 12px 32px rgba(0,0,0,.3);transition:.16s}.spa-card:hover{transform:translateY(-2px);border-color:var(--gold)}.spa-card b{font-size:20px}.spa-card p{color:var(--muted);line-height:1.45}.spa-card em{margin-top:auto;color:var(--gold);font-style:normal;font-weight:800}.spa-icon{font-size:24px;margin-bottom:10px}.app-error{height:100%;display:grid;place-content:center;gap:8px;text-align:center}.app-error span{color:var(--muted)}
body.arena-route .app-sidebar{display:none}body.arena-route .app-shell{grid-template-columns:1fr}body.arena-route .app-topbar{display:none}body.arena-route .app-main{grid-template-rows:1fr}
@media(max-width:760px){.app-topbar{padding-inline:10px;gap:8px}.app-points{margin-left:auto}.app-live{display:none}}