/* WORLD OF GALAXY V0.2 — RESPONSIVE MOCKUP THEME */
:root{
 --c:#22c9ff; --c2:#82e6ff; --bg:#02070d; --panel:rgba(3,14,22,.88);
 --line:rgba(34,201,255,.38); --text:#edfaff; --muted:#93aab7; --green:#45ef78;
}
*{box-sizing:border-box}
html,body{min-height:100%;margin:0;background:#02070d}
body.wog-v02{font-family:Arial,Helvetica,sans-serif;color:var(--text);overflow-x:hidden;background:transparent!important;isolation:isolate}
.wog-scene{
 position:fixed;inset:0;z-index:-3;
 background:
  linear-gradient(180deg,rgba(0,3,8,.18),rgba(0,5,10,.30)),
  linear-gradient(90deg,rgba(0,5,10,.34),rgba(0,5,10,.05) 47%,rgba(0,5,10,.28)),
  url("../../images/login/background.jpg") center center/cover no-repeat;
}
.wog-vignette{position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(ellipse at center,transparent 35%,rgba(0,0,0,.44) 100%)}

/* Header */
.wog-header{height:clamp(64px,7.5vh,86px);border-bottom:1px solid var(--line);background:rgba(0,6,11,.72);backdrop-filter:blur(12px);position:relative;z-index:50}
.wog-header-inner{width:min(96vw,1780px);height:100%;margin:auto;display:grid;grid-template-columns:250px 1fr auto;align-items:center;gap:20px}
.wog-logo{display:flex;align-items:center;gap:12px;color:#fff!important;text-decoration:none!important}
.wog-orbit{width:54px;height:54px;border:2px solid #a9c9d8;border-radius:50%;position:relative;display:grid;place-items:center;box-shadow:0 0 18px rgba(34,201,255,.25)}
.wog-orbit:before,.wog-orbit:after{content:"";position:absolute;background:#a9c9d8}
.wog-orbit:before{width:78px;height:2px}.wog-orbit:after{height:78px;width:2px}
.wog-orbit span{width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:0 0 18px 6px rgba(34,201,255,.8)}
.wog-logo-text{display:grid;line-height:1}.wog-logo-text b{font-size:28px;letter-spacing:3px}.wog-logo-text small{margin-top:8px;font-size:9px;letter-spacing:2.3px;color:#c1d1da}
.wog-main-nav{display:flex;justify-content:center;gap:clamp(14px,2vw,34px);height:100%;align-items:center}
.wog-main-nav a,.wog-discord-link{color:#e7f3f8!important;text-decoration:none!important;font-weight:700;font-size:11px;letter-spacing:1.2px;height:100%;display:flex;align-items:center;border-bottom:2px solid transparent}
.wog-main-nav a:hover,.wog-main-nav a.active{color:var(--c)!important;border-bottom-color:var(--c)}
.wog-header-actions{display:flex;align-items:center;gap:13px}.wog-discord-link{height:auto;gap:6px;color:#a9c3d0!important}
.wog-lang{height:36px;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:5px;padding:0 9px;color:var(--c);background:rgba(2,12,19,.75)}
.wog-lang select{width:auto!important;min-width:72px;border:0!important;background:transparent!important;color:#fff!important;padding:0!important;height:auto!important}
.wog-menu-toggle{display:none;background:transparent;border:1px solid var(--line);color:var(--c);width:39px;height:36px;border-radius:5px}

/* Main exact-fit canvas */
.wog-page{width:min(96vw,1780px);margin:auto;min-height:calc(100svh - clamp(64px,7.5vh,86px) - 92px);padding:clamp(18px,2.4vh,32px) 0 14px;display:flex;flex-direction:column}
.wog-main-grid{
 flex:1;
 display:grid;
 grid-template-columns:minmax(280px,.82fr) minmax(390px,1fr) minmax(300px,.74fr);
 grid-template-rows:minmax(210px,.85fr) auto;
 grid-template-areas:
  "left login side"
  "left features side";
 gap:clamp(14px,1.35vw,24px);
 align-items:end;
}
.wog-left-space{grid-area:left;align-self:stretch;position:relative;display:flex;align-items:flex-start;justify-content:center}
.wog-title-wrap{margin-top:clamp(10px,3vh,42px);text-align:center;text-shadow:0 5px 22px rgba(0,0,0,.7)}
.wog-eyebrow{color:var(--c);font-size:10px;letter-spacing:3px;font-weight:800;margin:0 0 10px}
.wog-title-wrap h1{margin:0;font-family:Impact,"Arial Narrow",sans-serif;line-height:.74;color:#f3f8fb;letter-spacing:4px;font-size:clamp(58px,6.7vw,128px)}
.wog-title-wrap h1 span{display:block}.wog-title-wrap h1 small{display:block;font-family:Arial,sans-serif;font-size:.22em;line-height:1.1;color:#cfe5ee;letter-spacing:9px;margin:10px 0}
.wog-tagline{margin:20px 0 0;color:var(--c);font-size:clamp(8px,.75vw,12px);letter-spacing:3px}

/* HUD */
.wog-hud{position:relative;background:linear-gradient(150deg,rgba(2,13,21,.93),rgba(4,19,29,.82));border:1px solid var(--line);box-shadow:0 22px 55px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.02);backdrop-filter:blur(10px)}
.wog-hud:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(34,201,255,.035),transparent 32%,transparent 72%,rgba(34,201,255,.03))}
.wog-login-panel{grid-area:login;border-radius:8px;padding:clamp(20px,2vw,32px);align-self:end}
.wog-login-head{display:grid;grid-template-columns:54px 1fr;gap:14px;align-items:center;margin-bottom:17px}
.wog-round-icon{width:48px;height:48px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--c);font-size:20px;background:rgba(34,201,255,.05)}
.wog-login-head h2{margin:0 0 6px;font-size:clamp(18px,1.45vw,26px);letter-spacing:.3px}
.wog-login-head p:last-child{margin:0;color:var(--muted);font-size:12px}
.wog-field{margin:10px 0}.wog-field label{display:block;font-size:9px;letter-spacing:1.2px;font-weight:800;color:#a9c0cc;margin:0 0 6px}.wog-field label i{color:var(--c);width:15px}
.wog-field input,.wog-field select{width:100%!important;height:clamp(39px,4.3vh,48px)!important;border:1px solid rgba(137,190,211,.3)!important;border-radius:5px!important;background:rgba(1,8,14,.78)!important;color:#f5fbff!important;padding:0 12px!important;box-shadow:none!important}
.wog-field input:focus,.wog-field select:focus{outline:0!important;border-color:var(--c)!important;box-shadow:0 0 0 2px rgba(34,201,255,.08)!important}
.wog-primary,.wog-register{width:100%;min-height:44px;border-radius:4px;display:flex;align-items:center;justify-content:center;gap:9px;font-weight:800;letter-spacing:1.1px;text-decoration:none!important}
.wog-primary{border:1px solid #2bd0ff;color:#fff;background:linear-gradient(180deg,#138fc6,#075d85);box-shadow:inset 0 1px rgba(255,255,255,.15),0 0 22px rgba(34,201,255,.1)}
.wog-primary:hover{filter:brightness(1.13)}.wog-forgot{display:block;text-align:center;margin:13px 0;color:var(--c)!important;text-decoration:none!important;font-size:11px}
.wog-divider{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:13px;margin:12px 0}.wog-divider span{height:1px;background:rgba(145,184,201,.18)}.wog-divider b{font-size:10px;color:#6f8590;font-weight:400}
.wog-register{border:1px solid var(--line);color:var(--c)!important;background:rgba(1,10,17,.55)}
.wog-small-copy{text-align:center;color:#667e89;font-size:9px;margin:8px 0 0}

/* Right */
.wog-side{grid-area:side;display:grid;gap:12px;align-self:stretch;align-content:center}
.wog-side-card{border-radius:7px;padding:16px 18px}
.wog-side-title{display:flex;align-items:center;gap:10px;padding-bottom:10px;margin-bottom:6px;border-bottom:1px solid rgba(34,201,255,.14);color:var(--c)}
.wog-side-title i{font-size:17px}.wog-side-title h3{font-size:12px;letter-spacing:1.2px;margin:0}
.wog-stat-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0;font-size:11px}.wog-stat-row span{color:#c0d0d7}.wog-stat-row span i{width:20px;color:var(--c)}.wog-stat-row b{font-weight:400;color:#fff;text-align:right}.wog-stat-row b.online{color:var(--green);font-weight:700}.wog-stat-row b.online i{font-size:7px;margin-right:6px}
.wog-top-player{display:grid;grid-template-columns:32px 1fr auto;gap:8px;align-items:center;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.045);font-size:10px}.wog-top-player .rank{color:var(--c)}.wog-top-player small{color:#7f98a4}
.wog-empty{font-size:10px;color:#879ca6;margin:10px 0}.wog-news article{padding:8px 0}.wog-news article b{font-size:11px;color:#e7f8ff}.wog-news article p{font-size:10px;line-height:1.4;color:#9aadb6;margin:5px 0;max-height:42px;overflow:hidden}.wog-news>a{font-size:10px;color:var(--c)!important;text-decoration:none!important}

/* Features */
.wog-features{grid-area:features;border-radius:7px;display:grid;grid-template-columns:repeat(4,1fr);padding:9px 4px;align-self:start}
.wog-feature{text-align:center;padding:8px 12px;border-right:1px solid rgba(34,201,255,.12)}.wog-feature:last-child{border-right:0}.wog-feature span{width:40px;height:40px;margin:auto auto 7px;border-radius:50%;display:grid;place-items:center;background:rgba(34,201,255,.07);color:var(--c);font-size:16px}.wog-feature b{font-size:9px;letter-spacing:.7px}.wog-feature p{font-size:8px;line-height:1.45;color:#94a8b2;margin:5px 0 0}
.wog-legend{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center;margin:12px auto 0;width:min(760px,90%)}.wog-legend span{height:1px;background:linear-gradient(90deg,transparent,var(--line))}.wog-legend span:last-child{background:linear-gradient(90deg,var(--line),transparent)}.wog-legend b{font-size:9px;letter-spacing:4px;color:#d5eaf2}

/* Footer */
.wog-footer{min-height:92px;border-top:1px solid var(--line);background:rgba(0,6,11,.83);backdrop-filter:blur(9px)}
.wog-footer-inner{width:min(96vw,1780px);min-height:92px;margin:auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;position:relative}
.wog-footer-brand{display:grid}.wog-footer-brand b{font-size:12px;letter-spacing:1.4px}.wog-footer-brand small{margin-top:6px;color:#667d89;font-size:8px;letter-spacing:1.3px}
.wog-footer nav{display:flex;gap:22px}.wog-footer nav a{color:var(--c)!important;text-decoration:none!important;font-size:10px}.wog-footer-copy{text-align:right;color:#8ea1aa;font-size:10px}
.wog-engine{position:absolute;left:0;bottom:6px;margin:0;font-size:7px;color:#465b65}

/* Existing login subpages */
body.wog-v02 .container.mobile,body.wog-v02 .container{position:relative;z-index:3}
body.wog-v02 .panel,body.wog-v02 .jumbotron{background:rgba(2,14,22,.9)!important;border:1px solid var(--line)!important;color:#eafaff!important}
body.wog-v02 .panel-heading{background:rgba(34,201,255,.07)!important;border-color:var(--line)!important;color:var(--c2)!important}
body.wog-v02 .form-control{background:#06131c!important;color:#fff!important;border-color:var(--line)!important}
body.wog-v02 .btn-primary,body.wog-v02 .btn-success{background:#0877a6!important;border-color:#23c9ff!important}

/* Responsive monitor fitting */
@media (max-width:1280px){
 .wog-header-inner{grid-template-columns:210px 1fr auto}.wog-main-nav{gap:12px}.wog-main-nav a{font-size:9px}
 .wog-main-grid{grid-template-columns:minmax(230px,.7fr) minmax(360px,1fr) minmax(275px,.7fr)}
 .wog-title-wrap h1{font-size:clamp(54px,7vw,92px)}
}
@media (max-width:980px){
 .wog-header-inner{grid-template-columns:1fr auto auto}.wog-main-nav{display:none;position:absolute;left:0;right:0;top:100%;height:auto;background:#031019;border-bottom:1px solid var(--line);padding:12px;flex-direction:column;align-items:stretch}
 .wog-main-nav a{height:auto;padding:10px;border:0}.wog-menu-toggle{display:block}.wog-menu-open .wog-main-nav{display:flex}
 .wog-discord-link span{display:none}
 .wog-page{min-height:auto}
 .wog-main-grid{grid-template-columns:1fr 1fr;grid-template-areas:"left left" "login side" "features features";grid-template-rows:auto}
 .wog-left-space{min-height:270px}.wog-title-wrap{margin-top:15px}.wog-title-wrap h1{font-size:clamp(62px,14vw,112px)}
}
@media (max-width:700px){
 .wog-header-inner,.wog-page,.wog-footer-inner{width:min(94vw,1780px)}
 .wog-logo-text b{font-size:20px}.wog-logo-text small{font-size:7px}.wog-orbit{width:42px;height:42px}.wog-orbit:before{width:60px}.wog-orbit:after{height:60px}
 .wog-lang{display:none}
 .wog-main-grid{display:flex;flex-direction:column}
 .wog-left-space{width:100%;min-height:240px}.wog-login-panel,.wog-side,.wog-features{width:100%}
 .wog-side{order:3}.wog-features{order:2;grid-template-columns:1fr 1fr}.wog-feature:nth-child(2){border-right:0}.wog-feature{border-bottom:1px solid rgba(34,201,255,.12)}
 .wog-title-wrap h1{font-size:clamp(58px,20vw,94px)}
 .wog-footer-inner{grid-template-columns:1fr;gap:8px;padding:14px 0 24px}.wog-footer nav{flex-wrap:wrap}.wog-footer-copy{text-align:left}.wog-engine{bottom:5px}
}
@media (max-height:760px) and (min-width:981px){
 .wog-header{height:58px}.wog-page{min-height:calc(100svh - 58px - 70px);padding-top:10px}.wog-footer,.wog-footer-inner{min-height:70px}
 .wog-logo-text small{display:none}.wog-orbit{width:40px;height:40px}.wog-orbit:before{width:58px}.wog-orbit:after{height:58px}
 .wog-title-wrap{margin-top:5px}.wog-title-wrap h1{font-size:clamp(48px,6vw,88px)}.wog-tagline{margin-top:10px}
 .wog-login-panel{padding:15px 20px}.wog-login-head{margin-bottom:8px}.wog-field{margin:6px 0}.wog-field input,.wog-field select{height:36px!important}
 .wog-side-card{padding:10px 15px}.wog-stat-row{padding:3px 0}.wog-news article{padding:4px 0}
 .wog-feature span{width:32px;height:32px}.wog-feature p{display:none}.wog-legend{margin-top:6px}
}