/*
 * DIV-TRAV classic game-shell rules extracted from layout/base.html.
 * This file loads after the classic skin and before page/modern overrides.
 */

/* Settler march ("استيطان") row in the dorf1/rally movements box — blue. */
table#movements .settle{ color:#1565c0; }
@media (hover:hover) and (pointer:fine) and (min-width: 992px){
  #mtop > a.No img,
  #mtop #n5 a img{
    transition: transform .12s ease, filter .12s ease;
    transform: translateZ(0);
  }
  #mtop > a.No:hover img,
  #mtop #n5 a:hover img{
    transform: scale(1.12);
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
  }
}
@media (hover:none) and (pointer:coarse){
  #mtop > a.No img,
  #mtop #n5 a img{
    transition: transform .08s ease, filter .08s ease;
    transform: translateZ(0);
    -webkit-tap-highlight-color: transparent;
  }
  #mtop > a.No:active img,
  #mtop #n5 a:active img{
    transform: scale(1.08);
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
  }
}

/* utatar: "no trainable units" notice (new Stable/Workshop before research) */
#build .trainUnits span.none { color: orange; font-weight: 900; }
/* tribe ranking icons — correct webp sprites (2nd-to-last unit = leader) */
img.unit.u9   { background-image: url('/static/img/u/__roman_small.webp');   }
img.unit.u19  { background-image: url('/static/img/u/___teuton_small.webp'); }
img.unit.u29  { background-image: url('/static/img/u/gauls.webp');           }
img.unit.u39  { background-image: url('/static/img/u/egyptians.webp');       }
img.unit.u69  { background-image: url('/static/img/u/Sparta.webp');          }
img.unit.u79  { background-image: url('/static/img/u/viking_small.webp');    }
img.unit.u108 { background-image: url('/static/img/u/huns.webp');            }
/* The roman/teuton/viking webp sheets are VERTICAL strips (16x160, one
   16px frame per unit) while the base sprite CSS positions horizontally —
   that combination always landed outside the sheet, so these three tribes
   rendered blank in the rankings. Frame 9 (index 8) is the leader. */
img.unit.u9,
img.unit.u19,
img.unit.u79 { background-position: 0 -128px; }

:root {
     --Back: #54c571;
     --linear: linear-gradient(270deg, transparent , darkgreen);
     --Bar: green;
     --From: linear-gradient(270deg, transparent , #4ade80);
     --Hdr: url(/assets/default/img/vip/header-rtl.png);
     --tw-gradient-from: #d97706;
     --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to,rgba(217,119,6,0));
     --tw-gradient-to: #fbbf24;
    } 

    .dayx {
        display: none;
    }

    @media screen and (max-width:768px){
        .dayx {
            display: block !important;
        }                
        .hammenu {
            display: block !important;
        }
        .bares{
            position: relative; top: 1px;
        }         
        div#res table td.res, div.bares, div.barWrapper {
            height: 20px;
        }            
        .mobile{
            display: block;
        }
    }
    
    .modal1 {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0, 0, 0, 0.6);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
    }

    .modal1-content {
      background: #e0e0e0;
      padding: 20px;
      border-radius: 12px;
      text-align: center;
      box-shadow: 0 6px 15px rgba(0,0,0,0.15);
    }

    .modal1-content button {
      padding: 10px 20px;
      margin: 0 8px;
      border: none;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: background 0.2s ease, transform 0.15s ease;
    }

    #confirmYes {
      background: #1976d2;
      color: #fff;
    }

    #confirmYes:hover {
      background: #1565c0;
      transform: scale(1.05);
    }

    #confirmNo {
      background: #e53935;
      color: #fff;
    }

    #confirmNo:hover {
      background: #c62828;
      transform: scale(1.05);
    }

    @media screen and (max-width: 768px) {
      div#res table td.res,
      div#res table td.res span {
        font-size: 11px !important;
        font-weight: 300 !important;
      }
      div#res table td.res img {
        width: 16px !important;
        height: 16px !important;
        vertical-align: middle;
      }
      div#res table td.res span[style*="color:red"],
      div#res table td.res span[style*="color:#f00"] {
        font-size: 10.5px !important;
      }
    }