/* =========================================================================
   Mobile responsive layer for LuptaOnline.com — Phase 3 (aggressive reflow).
   -------------------------------------------------------------------------
   All rules wrapped in @media (max-width: 900px). PC layout untouched.

   Strategy: this codebase uses position:absolute + pixel coords everywhere
   for the desktop 900px layout. On mobile we override ALL such positioning
   to static flow, then re-style key chrome (nav, login, chat) to fit a
   ~360-412px phone. Some game-UI panels are intentionally hidden on mobile
   because their interactive elements duplicate buttons available elsewhere
   (map buildings, monster sidebar, etc.).
   ========================================================================= */

@media (max-width: 900px) {

  /* =================================================================
     1. PAGE CHROME
     ================================================================= */
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }
  body {
    font-size: 14px;
    padding-bottom: 64px !important;
    background-size: auto;
  }
  div#container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 0 60px 0 !important;
    overflow-x: hidden !important;
  }

  /* =================================================================
     2. NUCLEAR OPTION: kill all desktop-only absolute positioning
     -----------------------------------------------------------------
     The whole codebase litters inline `position:absolute; left:NNNpx;
     top:NNNpx;` for the 900px layout. On mobile we force everything
     to static flow so it stacks vertically. Specific chrome (#topmenu,
     #leftmenu, #logo, bottom nav, etc.) gets its own positioning back
     in the sections below.
     ================================================================= */
  #container [style*="position:absolute"],
  #container [style*="position: absolute"],
  #container [style*="position:Absolute"],
  #container [style*="position: Absolute"],
  #container [style*="position:ABSOLUTE"] {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 4px auto !important;
    display: block;
  }

  /* Hide game-UI elements whose entire purpose is the desktop layout and
     which either overlap badly or duplicate buttons elsewhere on mobile. */
  /* "Monstru" sidebar panel (player.php) — was at left:-120px (off-canvas
     on desktop too; user opens /alley/ to fight). */
  #container > div.colbor[style*="left:-"],
  #container > div[style*="left:-"] {
    display: none !important;
  }
  /* Map decorative buildings on /city/ — they're absolute-positioned
     overlays on top of the Romania map image. The top buttons (Afaceri,
     Auto, Lucru, Mina, Banca, Mall) already provide access. Hide the
     overlapping decorative buildings on mobile. */
  .map_atelier, .map_evropa, .map_auction, .island, .anunt,
  #map_work, #map_mall, #map_mine, #map_bank, #map_busi, #map_racing {
    display: none !important;
  }
  /* Misiuni floating icon next to map — show inline instead of absolute. */
  div[onclick*="misiuni"] {
    position: static !important;
    display: inline-block;
    margin: 4px !important;
  }
  div[onclick*="misiuni"] img {
    width: 60px !important;
    height: auto;
  }

  /* =================================================================
     3. LOGO — compact title bar
     ================================================================= */
  #logo {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 54px !important;
    background-position: center center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-color: #1c1c1c;
    margin: 0 !important;
  }

  /* =================================================================
     4. LEFTMENU — server time, online, Iesire/Promo
     ================================================================= */
  #leftmenu {
    position: static !important;
    width: 100% !important;
    box-sizing: border-box;
    padding: 6px 10px !important;
    margin: 0 !important;
    background: #2a2a2a;
    color: #d0d0d0;
    font-size: 12px;
    text-align: center;
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
  }
  #leftmenu #servertime {
    font-weight: bold;
    color: #fff;
    margin: 0;
  }
  #leftmenu > div[style*="height:35px"] { display: none !important; }
  #leftmenu > br { display: none !important; }

  /* Iesire button (in #leftmenu) — replace image with text */
  #leftmenu a[onclick*="iesire"] img,
  #leftmenu a[href*="iesire"] img { display: none !important; }
  #leftmenu a[onclick*="iesire"] {
    display: inline-block;
    background: #8b2a2a;
    color: #fff !important;
    padding: 5px 12px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 12px;
    margin: 0 !important;
    text-decoration: none !important;
  }
  #leftmenu a[onclick*="iesire"]::before { content: "Iesire"; }
  /* Promo button */
  #leftmenu a[href="/promo/"] img { display: none !important; }
  #leftmenu a[href="/promo/"] {
    display: inline-block;
    background: #b88a2e;
    color: #fff !important;
    padding: 5px 12px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 12px;
    margin: 0 !important;
    text-decoration: none !important;
  }
  #leftmenu a[href="/promo/"]::before { content: "Promo"; }

  /* The empty #prof_rom etc divs that appear in #leftmenu on the anon
     homepage (no auth → no wrapping <a>). Hide them. */
  #leftmenu > div[id^="prof_"],
  #leftmenu > div[id^="ground_"],
  #leftmenu > div[id^="city_"],
  #leftmenu > div[id^="clan_"],
  #leftmenu > div[id^="bonus_"] {
    display: none !important;
  }

  /* =================================================================
     5. TOPMENU — Noutati / Reguli / Ajutor / Rating as text
     ================================================================= */
  #topmenu {
    position: static !important;
    width: 100% !important;
    box-sizing: border-box;
    padding: 6px 8px !important;
    margin: 0 !important;
    background: #1f1f1f;
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }
  #topmenu br { display: none !important; }
  #topmenu a img { display: none !important; }
  #topmenu a {
    display: inline-block;
    margin: 0 !important;
    padding: 6px 12px;
    background: #444;
    color: #fff !important;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none !important;
  }
  #topmenu a[href="/news/"]::before    { content: "Noutati"; }
  #topmenu a[href="/rules/"]::before   { content: "Reguli"; }
  #topmenu a[href="/support/"]::before { content: "Ajutor"; }
  #topmenu a[href="/rating/"]::before  { content: "Rating"; }

  /* =================================================================
     6. PLAYER HEADER STATS — Log-uri / Mesaje / Invitatii / Contacte
     ================================================================= */
  #lpage .newstyle {
    float: none !important;
    display: inline-block;
    margin: 3px 6px !important;
    font-size: 12px !important;
  }

  /* =================================================================
     7. MAIN CONTENT PANELS — lpage / rpage / bpage
     ================================================================= */
  #lpage, #rpage, #bpage {
    position: static !important;
    width: auto !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    margin: 6px !important;
    box-sizing: border-box;
    background-size: cover !important;
    padding: 8px !important;
    overflow-x: hidden;
  }
  #lpage {
    font-size: 12px !important;
    height: auto !important;
    padding-top: 8px !important;
  }
  #rpage {
    font-size: 14px !important;
    padding-bottom: 20px !important;
    text-align: center;
  }
  #bpage {
    font-size: 11px !important;
    height: auto !important;
  }

  /* =================================================================
     8. LOGIN / SIGNUP (anon homepage)
     ================================================================= */
  /* The Am profil / Inca nu am profil floats are at margin-left:150px and
     margin-right:150px on desktop. Make them centered stack on mobile. */
  #rpage div[style*="float:left"],
  #rpage div[style*="float:right"] {
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: auto !important;
    text-align: center;
    padding: 8px;
  }
  /* Login form on anon — make all inputs fluid */
  form[name="login"] input[type="text"],
  form[name="login"] input[type="password"] {
    width: 86% !important;
    max-width: 320px;
    box-sizing: border-box;
    margin: 6px auto !important;
    display: block !important;
    font-size: 16px !important; /* prevents iOS auto-zoom */
  }
  form[name="login"] input[type="submit"] {
    width: 86% !important;
    max-width: 320px;
    margin: 8px auto !important;
    display: block !important;
  }
  /* The marketing block has hard-coded width:800px — relax it */
  #rpage div[style*="width:800"] {
    width: auto !important;
    max-width: 100% !important;
  }
  /* YouTube iframe + facebook plugins overflow on small phones */
  iframe { max-width: 100% !important; height: auto !important; }
  .fb-like-box { max-width: 100% !important; }

  /* =================================================================
     9. BOTTOM NAV — 5 main game sections as text labels
     ================================================================= */
  #prof_rom, #ground_rom, #city_rom, #clan_rom, #bonus_rom,
  div[id^="prof_"], div[id^="ground_"], div[id^="city_"],
  div[id^="clan_"], div[id^="bonus_"] {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: 100% !important;
    background-image: none !important;
    background: transparent !important;
    color: #fff !important;
    font-size: 9px !important;
    line-height: 1;
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  /* Hide any notification-icon images inside the nav cells (fightyn etc) */
  div[id^="ground_"] img,
  div[id^="city_"] img,
  div[id^="clan_"] img,
  div[id^="bonus_"] img,
  div[id^="prof_"] img {
    display: none !important;
  }

  /* Position the 5 anchors as a fixed bottom nav bar */
  a:has(> div[id^="prof_"]),
  a:has(> div[id^="ground_"]),
  a:has(> div[id^="city_"]),
  a:has(> div[id^="clan_"]),
  a:has(> div[id^="bonus_"]) {
    position: fixed !important;
    bottom: 0 !important;
    height: 56px !important;
    width: 20vw !important;
    background: #1a1a1a !important;
    z-index: 1000;
    border-top: 2px solid #555;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  a:has(> div[id^="prof_"])   { left: 0    !important; border-right: 1px solid #333;}
  a:has(> div[id^="ground_"]) { left: 20vw !important; border-right: 1px solid #333;}
  a:has(> div[id^="city_"])   { left: 40vw !important; border-right: 1px solid #333;}
  a:has(> div[id^="clan_"])   { left: 60vw !important; border-right: 1px solid #333;}
  a:has(> div[id^="bonus_"])  { left: 80vw !important; }

  /* Text labels */
  a:has(> div[id^="prof_"])::before    { content: "Profil"; color:#fff; font-size:13px; font-weight:700; }
  a:has(> div[id^="ground_"])::before  { content: "Cimp de lupta"; color:#fff; font-size:11px; font-weight:700; line-height:1.1; }
  a:has(> div[id^="city_"])::before    { content: "Centru"; color:#fff; font-size:13px; font-weight:700; }
  a:has(> div[id^="clan_"])::before    { content: "Clan"; color:#fff; font-size:13px; font-weight:700; }
  a:has(> div[id^="bonus_"])::before   { content: "Bonus"; color:#fff; font-size:13px; font-weight:700; }

  /* =================================================================
     10. CITY (oras.php) BUTTONS — make small + wrap nicely
     ================================================================= */
  button.city {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 8px 10px !important;
    font-size: 11pt !important;
    margin: 3px !important;
  }
  /* Romania map image — fluid */
  img[src*="newmap"] {
    width: 100% !important;
    max-width: 480px !important;
    height: auto !important;
    margin: 8px auto !important;
    display: block;
  }

  /* =================================================================
     11. PLAYER PAGE — avatar, equipment, stats
     ================================================================= */
  #pers {
    position: static !important;
    left: auto !important;
    margin: 8px auto !important;
    width: 170px !important;
    height: 220px !important;
  }
  #persitem, #persitemm {
    position: static !important;
    left: auto !important;
    top: auto !important;
    display: inline-block;
    margin: 4px !important;
    vertical-align: top;
  }
  /* "Directorul Companiei petroliere O.P.E.C" — kill internal floats */
  #rpage div[style*="float:left"],
  #rpage div[style*="float:right"] {
    float: none !important;
    margin: 4px auto !important;
    display: block;
  }

  /* =================================================================
     12. TOUCH-FRIENDLY INPUTS & BUTTONS
     ================================================================= */
  input[type=button], input[type=submit], button {
    min-height: 38px;
    padding: 8px 14px !important;
    font-size: 14px !important;
    margin: 4px !important;
  }
  input[type=text], input[type=password], textarea, select {
    min-height: 38px;
    font-size: 16px !important;
    padding: 6px 8px;
    box-sizing: border-box;
    max-width: 100%;
  }
  textarea { width: 100% !important; }

  /* =================================================================
     13. IMAGES + TABLES
     ================================================================= */
  img {
    max-width: 100%;
    height: auto;
  }
  table {
    max-width: 100%;
  }

  /* =================================================================
     14. CHAT BLOCK (oras.php)
     ================================================================= */
  #chatbox {
    width: auto !important;
    max-width: 100% !important;
  }
  #online {
    width: auto !important;
    margin-top: 8px !important;
    position: static !important;
    height: auto !important;
    max-height: 200px;
    overflow-y: auto;
  }
  #usermsg {
    width: calc(100% - 110px) !important;
  }
  div[style*="width:81%"],
  div[style*="width: 81%"] {
    width: 96% !important;
    box-sizing: border-box;
  }

  /* =================================================================
     15. Hide misc desktop-only decorations
     ================================================================= */
  /* Floating arrow indicator on anon home (moving_arrow.gif) — was at
     position:absolute left:685px, only useful at desktop layout. */
  img[src*="moving_arrow"] { display: none !important; }
  /* Big character on anon home (left:10px) sat next to login form */
  img[src*="/images/pers/5.png"] {
    width: 80px !important;
    margin: 4px auto !important;
    display: block;
  }
}

/* Narrow phones (320-380px) — tighten further */
@media (max-width: 380px) {
  body { font-size: 13px; }
  a:has(> div[id^="prof_"])::before,
  a:has(> div[id^="city_"])::before,
  a:has(> div[id^="clan_"])::before,
  a:has(> div[id^="bonus_"])::before  { font-size: 12px !important; }
  a:has(> div[id^="ground_"])::before { font-size: 10px !important; }
  button.city { font-size: 10pt !important; padding: 6px 8px !important; }
  #topmenu a { padding: 5px 9px; font-size: 11px; }
}