/* responsive.css - Mobile/Adaptive Overrides
   Fokus zuerst: Gast/Login-Seite (index.php / ng_index.php)
   Strategie:
   1. Desktop-Styles (ng_style.css) unangetastet lassen.
   2. Mit spezifischen Breakpoints überschreiben.
   3. Performance: Auf sehr kleinen Screens Nebenspanele & visuelle Effekte entfernen.
   4. Touch-Optimierung: Größere Hit-Zones / vertikale Anordnung.
*/

/* Breakpoint Leitfaden
   >1200px: Desktop (Basis in ng_style.css)
   901-1200px: Large Tablet – leichte Reduktionen
   601-900px: Tablet / Small Landscape – Panels optional
   <=600px: Phone Portrait – Fokus Login / Kernaktionen
*/

/* =============== BASIS RESET FÜR MOBIL =============== */
@media (max-width: 900px) {
  /* Grid auf Einzelspalte reduzieren */
  .ng-game-container {
    display: flex;
    flex-direction: column;
    padding: 12px 14px 60px; /* unten Platz für evtl. sticky Elemente */
    gap: 16px;
  }

  /* Side-Panels einklappen (werden für Login nicht benötigt) */
  .ng-left-panel,
  .ng-right-panel {
    display: none !important;
  }

  /* Zentrale Fläche Vollbreite */
  .ng-center-panel {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Login Widget stretchen */
  .ng-center-panel .ng-widget {
    border-radius: 12px;
  }

  /* Neon / Glow Effekte entfernen für Performance & visuelle Ruhe */
  .ng-center-panel .ng-widget .neon-shine,
  .ng-center-panel .ng-widget .neon-glow { display: none !important; }
}

/* Navigation Responsive Umbau */
@media (max-width: 900px) {
  /* Navigation entfernt */
  .ng-nav-bar, .ng-burger-menu, .ng-burger-dropdown { display:none !important; }
  /* News Panel repositionieren unter fixed Header */
  .ng-news-panel { 
    top: 110px !important; 
    left: 10px !important; 
    right: 10px !important; 
    width: auto !important; 
    max-width: calc(100vw - 20px) !important; 
    box-sizing: border-box; 
  }
  .ng-fixed-header .ng-news-panel { top: 100px !important; }
  /* Collapsed Variante kompakter */
  .ng-news-panel.collapsed { top: 90px !important; left: 10px !important; right: auto !important; }
}

/* Fixed Header global */
/* Fixed Header entfernt -> kein zusätzliches Padding */
body.ng-fixed-header .ng-game-container { padding-top:0 !important; }

/* Header Collapse */
.ng-header-left { display:flex; align-items:center; gap:12px; transition:width .25s ease, opacity .25s ease; }
.ng-header-left.ng-header-left-collapsed .ng-header-text { display:none; }
.ng-header-collapse-toggle {
	background: #000;
	border: 1px solid #222;
	color: #8A837D;
	padding: 4px 6px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	height: 64px;
	width: 32px;
}
.ng-header-collapse-toggle:hover { border-color:#444; color:#c8af76; }
@media (max-width:900px){ .ng-header-left.ng-header-left-collapsed .ng-header-text { display:none; } }

/* Burger im Header (Desktop auch sichtbar optional) */
@media (min-width:901px){
  .ng-burger-menu { margin-left:16px; position:relative; }
  .ng-burger-dropdown { top:100%; right:0; }
}

/* =============== PHONE PORTRAIT (<=600px) =============== */
@media (max-width: 600px) {
  body { font-size: 15px; line-height: 1.45; }
  .ng-mobile-panel-content .ng-mobile-clone .ng-widget { margin-bottom:18px; }
  .ng-mobile-panel-content .ng-mobile-clone .ng-widget-title { font-size:15px; }
  .ng-mobile-panel-content .ng-news-mobile-wrapper { display:block; padding:4px 2px 40px; }
  .ng-mobile-panel-content .ng-news-panel-header { position:static; width:auto; }

  /* Header stacken */
  .ng-header, .ng-header-left { display:none !important; }
  .ng-site-title { font-size: 15px; }
  .ng-site-subtitle { font-size: 12px; opacity: .75; }
  /* Neues kompakt Branding */
  .ng-brand-badge { font-size: 20px; letter-spacing: .5px; font-weight:700; display:inline-flex; align-items:center; gap:4px; }
  .ng-brand-badge span { color:#8A837D; }

  /* Login Sektion full width */
  .ng-login-section { width: 100%; align-items: stretch; }
  .ng-login-form { flex-direction: column; gap: 8px; align-items: stretch; }
  .ng-login-input { width: 100%; font-size: 16px; padding: 10px 12px; }
  .ng-login-button { width: 100%; padding: 12px; font-size: 16px; letter-spacing: .5px; }
  .ng-register-link { text-align: center; font-size: 14px; }

  /* Terminal Widget (Login Info) spacing */
  .ng-terminal-welcome { padding: 16px 18px 20px; }
  .ng-welcome-header { flex-wrap: wrap; gap: 4px; }
  .ng-welcome-line { font-size: 14px; word-break: break-word; }
  .ng-welcome-line.ng-blink { margin-top: 6px; }

  /* Große Überschriften verkleinern */
  .ng-widget-title { font-size: 18px; margin-bottom: 8px; }

  /* Footer kompakt / sticky Gedankenbasis */
  .ng-footer { padding: 14px 10px; }
  .ng-footer .ng-footer-content { flex-direction: column; gap: 4px; font-size: 12px; }

  /* Entferne dekorative / sekundäre Widgets falls sie doch gerendert werden */
  .ng-player-stats,
  .ng-alliance-info,
  .ng-time-widget,
  .ng-uptime-widget,
  .ng-cpu-widget,
  .ng-memory-widget,
  .ng-disk-widget,
  .ng-terminal-container { display: none !important; }

  /* Sicherstellen dass nichts horizontal overflowed */
  .ng-game-container,
  .ng-center-panel,
  .ng-widget,
  .ng-terminal-welcome { max-width: 100%; overflow-x: hidden; }

  /* Animationen reduzieren für prefers-reduced-motion (optional progressive)*/
  @media (prefers-reduced-motion: reduce) {
    .ng-blink { animation: none !important; }
  }

  /* Mobile Spielerzahlen Widget */
  .ng-player-mobile-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:4px; }
  .ng-player-mobile-line { display:flex; flex-direction:column; background:#000; border:1px solid #222; padding:6px 4px; text-align:center; }
  .ng-player-mobile-line .ng-label { font-size:11px; letter-spacing:1px; color:#656A64; }
  .ng-player-mobile-line .ng-value { font-size:14px; font-weight:600; color:#8A837D; }
}

/* =============== SMALL HEIGHT (Landscape Phones) =============== */
@media (max-height: 540px) and (max-width: 900px) {
  .ng-header { padding-bottom: 0; }
  .ng-terminal-welcome { padding: 12px 14px; }
  .ng-login-button { padding: 10px; }
}

/* =============== PROGRESSIVE ENHANCEMENTS =============== */
@media (min-width: 601px) and (max-width: 900px) {
  /* Tablet: optional kompakte Side Panels als Akkordeon vorbereiten – später erweiterbar */
  .ng-left-panel, .ng-right-panel { width: 100%; order: 99; }
  /* (Noch versteckt bis Konzept abgestimmt) */
}

/* Hilfsklassen für zukünftige JS Hooks */
.hide-mobile { display: none !important; }
@media (min-width: 901px) { .hide-mobile { display: initial !important; } }
.only-mobile { display: none !important; }
@media (max-width: 900px) { .only-mobile { display: initial !important; } }

/* Eingeloggt spezifische Mobile Togglebar */
@media (max-width: 900px) {
  /* Togglebar sichtbar, falls im DOM vorhanden */
  .ng-mobile-togglebar { display:none !important; }
}

/* Overlay Panel */
@media (max-width: 900px) {
  .ng-mobile-panel-overlay { display:none !important; }
  /* Inhalte aus Panels kompakter darstellen */
  .ng-left-panel .ng-widget, .ng-right-panel .ng-widget { margin-bottom:14px; }
  .ng-left-panel .ng-widget-title, .ng-right-panel .ng-widget-title { font-size:16px; text-align:left; }
  /* Ursprüngliche Sidepanels komplett verstecken im Mobile-View, Content wird kopiert */
  /* Nur Original-Panels im Layout ausblenden, nicht geklonte im Overlay */
  body.ng-mobile-panels-enabled .ng-game-container > .ng-left-panel,
  body.ng-mobile-panels-enabled .ng-game-container > .ng-right-panel { display:none !important; }
  /* Klone explizit wieder anzeigen */
  .ng-mobile-panel-content .ng-left-panel.ng-mobile-clone,
  .ng-mobile-panel-content .ng-right-panel.ng-mobile-clone { display:block !important; }
  /* Scroll-Bounce verhindern */
  body.ng-mobile-scroll-lock { overflow:hidden; }
}

/* Desktop: Togglebar/Overlay ausblenden */
@media (min-width: 901px) {
  .ng-mobile-togglebar, .ng-mobile-panel-overlay { display:none !important; }
}

/* Kleine Bildschirme sehr schmal */
@media (max-width:380px) {
  .ng-mobile-togglebar .ng-mob-btn span { display:none; }
  .ng-mobile-togglebar .ng-mob-btn { min-width:auto; padding:6px 8px; }
  .ng-player-mobile-stats { grid-template-columns:repeat(3, minmax(0,1fr)); }
}

/* Debug Outline (aktivierbar bei Bedarf)
:root.debug-responsive * { outline: 1px dashed rgba(255,255,255,.08); }
*/