/* ============================================================
   AZGAMES — theme sdk10/azgames · GM Loader (GMSOFT Splash V2 look)
   Deploy: https://api.azgame.io/static/lib/azgames/theme/sdk10/azgames/game.css (bản minify của file này).
   Dùng bởi: api.azgames.io/template/1_azgames.io_GMA_v10_ads/template/sdk10/azgames/index.html
   Preview tĩnh: 1_azgames.io_GMA_v10_ads/template/sdk10/azgames/preview.html
   Thiết kế gốc: api.1games.io — sdk10-1games/template/template_2 (giữ hai bên giống nhau khi sửa).

   LƯU Ý: theme/template_1/game.css là CSS của template_1 (loader jss cũ) và vẫn phục vụ
   các game đã build theo template đó — không ghi đè file đó.

   QUY ƯỚC:
   - Toàn bộ ID/class của loader mang prefix `gmLoader*` / `gm*` (GMSOFT).
     KHÔNG dùng `wgSplash*` / `gamePlayerSplash*` — đó là class splash ads
     mà gm-sdk / gmsdkv2 inject lúc runtime, trùng tên là CSS đè lên nhau.
   - Hook được JS trong index.html tham chiếu (đổi tên là phải đổi cả hai phía):
     #gmLoader · #gmLoaderFill · .gmLoaderInfo · #gmGameContainer · #gmGameCanvas
   ============================================================ */

:root{
  color-scheme: dark only;
  --gm-font: "Fredoka", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --gm-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --gm-amber:#f2a93b;
  --gm-green:#3fdd8f;
  --gm-white:#ffffff;
  --gm-muted:#9a9aa5;
  --gm-dim:#6c6c76;
  --gm-cta-a:#ff8150;
  --gm-cta-b:#f4431a;
  --gm-line:rgba(255,255,255,.10);
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{
  margin:0;
  background:#08080a;
  color:#fff;
  font-family:var(--gm-font);
  font-optical-sizing:auto;
  font-weight:400;
  font-variation-settings:"wdth" 75;
}

/* ---------------- Unity ---------------- */
#gmGameContainer{width:100%;height:100%;display:none}
#gmGameCanvas{display:block;width:100%;height:100%;position:absolute}

/* ============================================================
   Màn tải game (#gmLoader)
   ============================================================ */
#gmLoader{
  position:absolute;inset:0;z-index:10;
  width:100vw;height:100vh;
  overflow:hidden;
  background:#000;
  display:flex;
  padding:clamp(10px,1.6vw,18px);
}

/* ---------------- thẻ nội dung ----------------
   Card kiểu splash wegoo/GMSOFT: bo góc + viền mảnh + nền gradient cam
   + lưới chấm + đổ bóng, hover thì bóng sâu hơn. */
.gmLoaderCard{
  /* Màu gradient ăn theo màu chủ đạo của ảnh game: JS (gmTintFromArt trong
     index.html/preview.html) đặt lại 3 biến này sau khi đọc pixel ảnh.
     Không đọc được (CORS, ảnh hỏng) thì giữ nguyên tông cam GMSOFT mặc định. */
  --gm-tint-a:255,140,60;
  --gm-tint-b:255,90,40;
  --gm-accent:242,169,59; /* màu chủ đạo KÉO SÁNG — dùng cho kicker/pill/progress */
  --gm-base:#171310;
  position:relative;z-index:0;flex:1 1 auto;min-width:0;
  display:flex;align-items:stretch;
  gap:clamp(18px,4vw,56px);
  padding:clamp(12px,2.4vw,26px);
  border-radius:20px;
  border:1px solid rgba(255,255,255,.06);
  overflow:hidden;
  background:
    radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px) 0 0 / 22px 22px,
    radial-gradient(130% 100% at 100% 0%, rgba(var(--gm-tint-a),.30), transparent 58%),
    radial-gradient(110% 90% at 0% 100%, rgba(var(--gm-tint-b),.20), transparent 60%),
    radial-gradient(70% 90% at 32% 110%, rgba(var(--gm-tint-a),.10), transparent 60%),
    linear-gradient(165deg, rgba(255,255,255,.04), transparent 38%),
    var(--gm-base);
  box-shadow:0 1px 0 rgba(255,255,255,.04), 0 30px 60px -22px rgba(0,0,0,.55);
  transition:box-shadow .2s ease, background-color .6s ease;
}
.gmLoaderCard:hover{
  box-shadow:0 1px 0 rgba(255,255,255,.07), 0 34px 72px -20px rgba(0,0,0,.8);
}

/* Ảnh game làm NỀN MỜ sau toàn card — chỉ bật ở portrait (mobile), thay cho cột thumb.
   background-image đặt từ HTML (index: inline placeholder) / JS (preview) vì URL theo từng game.
   z-index:-1 + card z-index:0 => nằm trên background card, dưới nội dung. */
.gmLoaderBackdrop{
  display:none;position:absolute;inset:0;z-index:-1;
  background-position:center;background-size:cover;background-repeat:no-repeat;
  filter:blur(26px) saturate(1.4) brightness(.6);
  transform:scale(1.15);
}
.gmLoaderBackdrop::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.45) 55%, rgba(0,0,0,.62));
}

/* ---------- cột ảnh ---------- */
.gmLoaderMedia{
  /* Tỉ lệ khung = tỉ lệ thật của loading.png, do JS (gmFitArt trong index.html/preview.html)
     đặt sau khi ảnh load xong. Không đọc được thì dùng 670/476 — tỉ lệ của hầu hết
     loading.png trong releasegames_v2. KHÔNG quay lại 4/5: loading.png luôn là ảnh
     ngang, nhét vào khung dọc thì object-fit:cover cắt mất 43–53% bề ngang.
     align-self:center thay cho stretch — để chiều cao suy ra từ tỉ lệ chứ không bị kéo
     bằng chiều cao card (kéo rồi thì aspect-ratio vô hiệu, lại cắt tiếp). */
  position:relative;flex:0 0 auto;align-self:center;
  aspect-ratio:var(--gm-art-ratio, 670/476);width:46%;max-height:100%;
  border-radius:clamp(10px,1.4vw,16px);
  overflow:hidden;background:#101014;
  /* quầng sáng màu game toả ra sau thumb — nối art với nền card */
  box-shadow:0 24px 70px rgba(0,0,0,.65), 0 0 90px rgba(var(--gm-tint-a),.26);
  transition:transform .2s ease, box-shadow .2s ease;
}
/* hover cột ảnh: nhấc nhẹ thẻ, quầng sáng rực hơn */
.gmLoaderMedia:hover{
  transform:translateY(-2px) scale(1.012);
  box-shadow:0 30px 84px rgba(0,0,0,.78), 0 0 130px rgba(var(--gm-tint-a),.38);
}
.gmLoaderArt{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}
/* Vignette nhẹ trên/dưới cho ảnh có chiều sâu — KHÔNG che giữa ảnh:
   loading.png là design hoàn chỉnh của game (thường có sẵn logo), để nó tự nói.
   Chữ "Let's Play" cũ đã bỏ: màn này là preload thụ động, chữ + nút play
   gợi ý tương tác giả (wegoo để được vì chữ nằm trong ảnh design riêng
   và màn của họ bấm được thật). */
.gmLoaderMedia::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,.30));
}
/* Vệt sáng quét chéo qua ảnh vài giây một lần — tín hiệu "đang chuẩn bị" */
.gmLoaderMedia::before{
  content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:45%;z-index:2;
  pointer-events:none;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.20), transparent);
  transform:skewX(-18deg) translateX(-140%);
  animation:gmSheen 3.4s ease-in-out infinite;
}

/* ---------- cột chữ ---------- */
.gmLoaderBody{
  flex:1 1 0;min-width:0;
  display:grid;grid-template-rows:auto 1fr;
  padding:clamp(4px,1vw,10px) 0;
}
.gmLoaderKicker{
  align-self:start;
  font:700 clamp(9px,1.05vw,12px)/1 var(--gm-mono);
  letter-spacing:.24em;text-transform:uppercase;color:rgb(var(--gm-accent));
}
.gmLoaderContent{
  align-self:center;
  display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(10px,1.5vw,18px);
}
.gmLoaderStatus{
  display:inline-flex;align-items:center;gap:.65em;
  padding:.55em 1em;border-radius:999px;
  background:rgba(var(--gm-accent),.10);
  border:1px solid rgba(var(--gm-accent),.34);
  color:rgb(var(--gm-accent));
  font:700 clamp(9px,1.05vw,12px)/1 var(--gm-font);
  letter-spacing:.14em;text-transform:uppercase;
}
.gmLoaderStatus i{
  width:.6em;height:.6em;border-radius:50%;background:currentColor;
  animation:gmPulse 1s ease-out infinite;
}
.gmLoaderTitle{
  margin:0;color:var(--gm-white);
  font-size:clamp(20px,4.1vw,42px);font-weight:700;
  line-height:1.08;letter-spacing:-.022em;
  text-transform:uppercase;
  text-shadow:0 2px 14px rgba(0,0,0,.45);
}
.gmLoaderDesc{
  margin:0;color:var(--gm-muted);
  font-size:clamp(12px,1.6vw,17px);line-height:1.55;
  max-width:32em;
  display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}

/* ---------- progress ---------- */
.gmLoaderProgress{
  width:min(100%,32em);
  margin-top:clamp(8px,2.4vw,30px);
}
.gmLoaderBar{
  width:100%;height:10px;border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid var(--gm-line);
  overflow:hidden;
}
#gmLoaderFill{
  width:0;height:100%;border-radius:999px;
  background:linear-gradient(90deg, rgb(var(--gm-accent)), rgb(var(--gm-tint-a)), rgb(var(--gm-tint-b)));
  box-shadow:0 0 12px rgba(var(--gm-tint-a),.55);
  transition:width .25s ease;
}
.gmLoaderInfo{
  margin-top:.8em;
  font:600 clamp(8px,1.02vw,11px)/1 var(--gm-mono);
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--gm-dim);
}

/* ---------- logo công ty góc phải dưới + nhãn version ---------- */
.gmLoaderBrand{
  position:absolute;right:clamp(12px,2vw,24px);bottom:clamp(10px,1.8vw,22px);
  opacity:.85;pointer-events:none;
}
.gmLoaderBrand img{
  display:block;height:clamp(20px,3vw,34px);width:auto;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));
}
.gmLoaderVersion{
  position:absolute;left:clamp(12px,2vw,24px);bottom:clamp(10px,1.8vw,22px);
  font:600 11px/1 var(--gm-mono);letter-spacing:.14em;
  color:var(--gm-dim);opacity:.7;pointer-events:none;
}

/* ---------- bố cục dọc (mobile / portrait) ----------
   Mobile: ẨN cột thumb, ảnh game lùi ra SAU toàn màn (mờ + tối) như template cũ,
   nội dung căn giữa nổi lên trên. */
@media (orientation: portrait){
  .gmLoaderCard{
    flex-direction:column;
    gap:clamp(14px,3.5vw,24px);
    padding:clamp(12px,4vw,20px);
  }
  .gmLoaderMedia{display:none}
  .gmLoaderBackdrop{display:block}
  .gmLoaderBody{
    flex:1 1 auto;width:100%;min-width:0;
    display:flex;flex-direction:column;align-items:center;
    gap:clamp(10px,2.6vw,14px);
  }
  .gmLoaderKicker{align-self:center}
  .gmLoaderContent{
    margin:auto 0; /* căn giữa theo chiều dọc trong phần còn lại */
    align-items:center;text-align:center;
    gap:clamp(10px,3vw,16px);
  }
  .gmLoaderTitle{font-size:clamp(22px,7vw,36px)}
  .gmLoaderDesc{font-size:clamp(12px,3.4vw,16px);-webkit-line-clamp:3;line-clamp:3}
  .gmLoaderKicker,.gmLoaderStatus{font-size:clamp(9px,2.6vw,11px)}
  .gmLoaderProgress{margin-top:clamp(4px,2vw,10px);width:min(80vw,30em)}
  .gmLoaderInfo{font-size:clamp(8px,2.2vw,10px);text-align:center}
  .gmLoaderBrand img{height:18px}
}

/* ---------------- keyframes ---------------- */
@keyframes gmSheen{
  0%,55%{transform:skewX(-18deg) translateX(-140%)}
  90%,100%{transform:skewX(-18deg) translateX(420%)}
}
@keyframes gmPulse{
  0%{box-shadow:0 0 0 0 rgba(var(--gm-accent),.55)}
  70%{box-shadow:0 0 0 .7em rgba(var(--gm-accent),0)}
  100%{box-shadow:0 0 0 0 rgba(var(--gm-accent),0)}
}
@media (prefers-reduced-motion: reduce){
  .gmLoaderMedia::before,.gmLoaderStatus i{animation:none}
  #gmLoaderFill,.gmLoaderCard,.gmLoaderMedia{transition:none}
  .gmLoaderMedia:hover{transform:none}
}