@media(max-width:900px) {
  body { min-width:0; padding-top:70px; background-position:center top; font-size:15px; }
  .container { width:100%; max-width:100%; }
  .container.mobile { margin-top:12px; padding:0 16px; }
  .container.mobile > .row { display:flex; flex-direction:column; }
  .container.mobile > .row > .col-lg-6:first-child { order:2; }
  .container.mobile > .row > .col-lg-6:last-child { order:1; }
  .panel-default { border:1px solid #2d465b; border-radius:14px; background:#091721eb; overflow:hidden; }
  .panel-default > .panel-heading { background:transparent; border:0; font-size:22px; padding:20px 20px 4px; text-transform:none; }
  .panel-body { padding:20px; }
  .form-control { height:48px; font-size:16px; background:#132b3b; color:white; border:1px solid #345064; border-radius:8px; }
  label { color:#b7ccdb; }
  #login .btn-primary { width:100%; min-height:48px; background:#24546a; border-color:#417d94; border-radius:8px; font-size:16px; }
  .navbar-inverse { background:#071019f5; }
  .navbar-brand { font-size:22px; font-weight:bold; }
  .navbar a, .navbar button { min-height:44px; }
  .navbar-collapse { max-height:70vh; overflow:auto; }
  .small { display:inline-block; margin-top:14px; color:#a7bbc9; }
  footer { font-size:11px; padding:12px; }
  table { max-width:100%; }
}

/* App entry replaces the legacy promotional website at every screen width. */
html:has(body.app) {height:100%; overflow:hidden; background:#071019;}
body.app {margin:0; padding:0; width:100%; min-width:0; height:100vh; height:100dvh; overflow:hidden;
 background:#071019; color:#e7eff5; font:16px Arial,sans-serif;}
body.app *, body.app *::before, body.app *::after {box-sizing:border-box;}
body.app > .container {display:none;}
.app-login-shell {display:grid; grid-template-columns:42% 58%; width:100%; height:100%;
 padding:max(14px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left)); gap:20px;
 background:radial-gradient(ellipse at 0% 100%,#19425b88,transparent 60%),#071019;}
.app-login-art {position:relative; display:flex; flex-direction:column; justify-content:center; min-width:0; padding:20px; margin:0; border:1px solid #294052; border-radius:18px;
 background:linear-gradient(0deg,#06111bee,#06111b22 90%),url('../../../theme/gow/planeten/wasserplanet01.jpg') center / cover;}
.app-login-brand {font:bold clamp(30px,5vw,58px) Arial,sans-serif; letter-spacing:-2px; color:#f0f7fb; text-shadow:0 2px 15px #000;}
.app-login-art p {font-size:14px; color:#c9dce7; margin:8px 0 0;}
.app-login-panel {align-self:center; padding:10px 20px 10px 0; min-width:0; max-width:680px; width:100%;}
.app-login-panel h1 {font:600 24px Arial,sans-serif; color:#edf5fb; margin:0 0 18px;}
body.app #login {display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:0;}
.app-login-field {min-width:0;}
body.app #login label {display:block; margin:0 0 7px; font:14px Arial,sans-serif; color:#aec8d8;}
body.app #login input:not([type=hidden]),body.app #login select {display:block; width:100%; min-width:0; height:48px; margin:0; padding:10px 12px;
 border:1px solid #426078; border-radius:9px; background:#102535; color:#fff; font:16px Arial,sans-serif;}
body.app #login input:focus {outline:2px solid #79cdec; outline-offset:2px;}
.app-password-wrap {position:relative;}
body.app #login #password {padding-right:64px;}
body.app #login .app-password-toggle {position:absolute; right:2px; top:2px; height:44px; min-width:58px; margin:0; border:0; border-radius:7px; background:transparent; color:#bee3f2; font:13px Arial,sans-serif;}
body.app #login .app-login-play {grid-column:1/-1; width:100%; height:50px; margin:4px 0 0; border:1px solid #5791a9; border-radius:10px;
 background:#24576d; color:#fff; font:600 17px Arial,sans-serif; touch-action:manipulation;}
.app-login-error {grid-column:1/-1; color:#ffb9b9; font-size:13px; margin:0;}
.app-login-universe {grid-column:1/-1;}
@media (max-height:300px) and (orientation:landscape) {
 .app-login-shell {padding:8px 14px; gap:14px; grid-template-columns:25% 75%;}
 .app-login-art {padding:10px;}
 .app-login-brand {font-size:28px;}
 .app-login-art p {display:none;}
 .app-login-panel {padding:0 14px 0 0;}
 .app-login-panel h1 {font-size:18px; margin-bottom:8px;}
 body.app #login {gap:7px 12px;}
 body.app #login label {font-size:12px; margin-bottom:3px;}
 body.app #login .app-login-play {height:44px; margin:0;}
 body.app #login input:not([type=hidden]) {height:44px;}
 body.app #login .app-password-toggle {height:40px;}
}
@media (orientation:portrait) {
 .app-login-shell {grid-template-columns:1fr; grid-template-rows:minmax(90px,1fr) auto; gap:16px; padding:20px;}
 .app-login-art {max-height:220px;}
 .app-login-panel {padding:0; align-self:end;}
 body.app #login {grid-template-columns:1fr;}
}
