:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:#edf2f2;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;min-width:320px}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}a{color:inherit}h1,h2,h3,p{margin-top:0}h1,h2,h3{letter-spacing:-.035em}p{line-height:1.6}
body{--site-canvas:#101b25;--accent:#8fb8d1;--accent-dark:#223b4d;--scroll-thumb:#4b718b;--surface:#14232e;--muted:#a9bac4;background-color:var(--site-canvas);transition:background-color .75s ease,color .75s ease;scrollbar-color:var(--scroll-thumb) #0d1720;scrollbar-width:thin}
body[data-theme="skogskollen"]{--site-canvas:#f7f8f2;--accent:#315c42;--accent-dark:#dcebd8;--scroll-thumb:#648d61;--surface:#f7f8f2;--muted:#667e6c;color:#274433}
body[data-theme="games"]{--site-canvas:#201810;--accent:#efbd72;--accent-dark:#69472d;--scroll-thumb:#aa7440;--surface:#2b2118;--muted:#d3bd9f}
*{scrollbar-width:thin;scrollbar-color:var(--scroll-thumb) transparent}
*::-webkit-scrollbar{width:10px;height:10px}*::-webkit-scrollbar-track{background:#ffffff08;border-radius:99px}*::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border:2px solid #162029;border-radius:99px}*::-webkit-scrollbar-thumb:hover{background:var(--accent)}
.theme-glow{position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:0;transition:opacity .85s ease}
.glow-server{background:radial-gradient(circle at 12% 0%,#355c7652,transparent 33%),radial-gradient(circle at 90% 45%,#21516a30,transparent 42%)}
.glow-games{background:radial-gradient(circle at 14% 0%,#a1632f58,transparent 36%),radial-gradient(circle at 88% 55%,#d2963a32,transparent 43%)}
body[data-theme="server"] .glow-server,body[data-theme="games"] .glow-games{opacity:1}
.shell{max-width:1680px;padding:0 42px;margin:auto}.topbar{height:82px;display:flex;align-items:center;gap:30px;border-bottom:1px solid #ffffff20;position:relative;z-index:4;transition:background-color .7s ease,color .7s ease,border-color .7s ease}
.tabs{display:flex;gap:4px;padding:5px;border-radius:13px;background:#ffffff0c;border:1px solid #ffffff14}.tab{border:0;border-radius:9px;background:transparent;color:#b3c1c3;padding:11px 18px;font-weight:700;white-space:nowrap;transition:background-color .55s ease,color .55s ease,transform .2s ease}.tab.active{color:#fff;background:var(--accent-dark);box-shadow:0 3px 15px #0003}.tab:hover:not(.active){background:#ffffff13;color:#fff;transform:translateY(-1px)}.top-status{margin-left:auto;display:flex;align-items:center;gap:9px;color:#b7c4c8;font-size:12px}.live-dot{display:inline-block;flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:#78dba9;box-shadow:0 0 0 4px #78dba920}.live-dot.warn{background:#edbf75;box-shadow:0 0 0 4px #edbf7520}.live-dot.bad{background:#e78a81;box-shadow:0 0 0 4px #e78a8120}
.tab-page{padding-bottom:34px}.hero{position:relative;display:flex;justify-content:space-between;align-items:center;overflow:hidden;border:1px solid #ffffff1c;border-radius:22px;padding:38px 43px;margin:29px 0 18px;min-height:195px;background:linear-gradient(115deg,#1b3545,#142633 70%);transition:background-color .7s ease,border-color .7s ease}.hero:after{content:"";position:absolute;width:300px;height:300px;border:1px solid #ffffff1a;border-radius:50%;right:-70px;top:-90px;box-shadow:0 0 0 45px #ffffff05,0 0 0 90px #ffffff03;pointer-events:none}.hero>div{position:relative;z-index:1}.eyebrow{font-size:10px;font-weight:820;letter-spacing:.18em;color:var(--accent);margin-bottom:11px;transition:color .7s ease}.hero h1{font-size:clamp(35px,3.8vw,58px);line-height:1.03;margin:0 0 12px}.hero p:not(.eyebrow){max-width:600px;color:#c3d0d6;font-size:14px;margin:0}.hero-decoration{font-size:135px;color:#f5ca8580;transform:rotate(-15deg);margin-right:7%;line-height:1}
.small-button,.secondary-button,.primary-button{border:1px solid #ffffff27;border-radius:10px;padding:10px 16px;color:#eee;background:#ffffff11;font-weight:700;transition:background .2s ease,transform .2s ease}.small-button:hover,.secondary-button:hover{background:#ffffff20;transform:translateY(-1px)}.primary-button{background:linear-gradient(135deg,#edbd79,#cb8a4e);color:#241b13;border:0;box-shadow:0 8px 30px #b8754630}.primary-button:hover{filter:brightness(1.08);transform:translateY(-1px)}.primary-button span{padding-left:10px}.muted{color:var(--muted)}.error-text{min-height:20px;color:#ffaaa3;font-size:12px}.site-footer{border-top:1px solid #ffffff1b;padding:20px 0 30px;display:flex;justify-content:flex-end;color:#9ba7a9;font-size:11px}
.skogskollen-page{padding:0 0 32px;margin:0 -42px;background-color:var(--site-canvas);min-height:calc(100vh - 82px)}.skogskollen-host{background-color:var(--site-canvas);min-height:74vh}.skogskollen-host>.loading-card{color:#49614b;background-color:var(--site-canvas)}body[data-theme="skogskollen"] .site-footer{display:none}
body[data-theme="skogskollen"] .topbar{color:#274433;border-bottom-color:#dbe5d9}
body[data-theme="skogskollen"] .tabs{background:#315c420b;border-color:#315c4220}
body[data-theme="skogskollen"] .tab{color:#55715b}
body[data-theme="skogskollen"] .tab.active{background:#d2e5cf;color:#254b35;box-shadow:none}
body[data-theme="skogskollen"] .tab:hover:not(.active){background:#dfebdb;color:#315b40}
body[data-theme="skogskollen"] .top-status{color:#53735b}
@media(max-width:1050px){.shell{padding:0 22px}.topbar{gap:15px}.top-status{display:none}.skogskollen-page{margin:0 -22px}}
@media(max-width:700px){.shell{padding:0 12px}.topbar{height:auto;min-height:100px;flex-wrap:wrap;justify-content:center;padding:9px 0}.tabs{order:2;width:100%;justify-content:space-between}.tab{padding:9px 10px;font-size:12px}.hero{margin-top:16px;padding:27px 23px;min-height:165px}.hero-decoration{display:none}.hero h1{font-size:38px}.hero p:not(.eyebrow){font-size:13px}.skogskollen-page{margin:0 -12px}.site-footer{padding-top:16px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Crossfade the composed page as one surface so gradients and pale Skogskollen panels
   cannot arrive at different times from the header and canvas. */
body.theme-switching *,body.theme-switching *::before,body.theme-switching *::after{transition:none!important}
body.theme-fallback-fade .shell{opacity:0;transition:opacity .23s ease}
body:not(.theme-fallback-fade) .shell{transition:opacity .23s ease}
::view-transition-old(root){animation:theme-out .48s ease-in both}
::view-transition-new(root){animation:theme-in .48s ease-out both}
@keyframes theme-out{to{opacity:0}}
@keyframes theme-in{from{opacity:0}}
@media(max-width:700px){.tabs .tab{min-height:44px;display:grid;place-items:center}.game-entry-close{min-width:44px;min-height:44px}}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation-duration:.01ms!important}}