/* ==========================================================================
   GATE-ACCESS / YG88 CỔNG QUỐC TẾ - STYLESHEET
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. RESET & BASE LAYOUT
   -------------------------------------------------------------------------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: #061208;
  min-height: 100vh;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: 'Roboto', 'Be Vietnam Pro', sans-serif;
  overflow: hidden;
  padding-top: 35vh;
  position: relative;
}

/* Background image */
.page-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   2. HEADER & LOGO AREA
   -------------------------------------------------------------------------- */
#logo-area {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 22px 0 5px;
  z-index: 20;
}

#logo-img {
  max-height: 165px;
  max-width: 510px;
  width: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 0 12px rgba(255, 180, 0, 0.5));
}

.header-area {
  position: absolute;
  top: 22vh;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 10;
  max-width: 100%;
}

/* Let the header content shrink to the viewport instead of its min-content width */
.header-area > div {
  min-width: 0;
}

.header-title-wrap {
  position: relative;
  display: inline-block;
  text-align: center;
}

.header-title {
  font-family: 'Roboto', sans-serif;
  font-size: clamp(24px, 3.8vw, 50px);
  font-weight: 900;
  letter-spacing: 0.12em;
  margin: 0;
  color: #E8A000;
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.6);
  paint-order: stroke fill;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 20px rgba(220, 140, 0, 0.6));
  position: relative;
  z-index: 2;
  line-height: 1.15;
}

.header-title-glow {
  font-family: 'Roboto', sans-serif;
  font-size: clamp(24px, 3.8vw, 50px);
  font-weight: 900;
  letter-spacing: 0.12em;
  margin: 0;
  color: rgba(255, 180, 0, 0.2);
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 1;
  filter: blur(10px);
  line-height: 1.15;
}

.header-sub-wrap {
  margin-top: 8px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.header-sub {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: clamp(12px, 1.4vw, 16px);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  text-align: center;
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.3);
  border: 1.5px solid rgba(0, 0, 0, 0.85);
  border-radius: 6px;
  padding: 5px 18px;
  background: rgba(0, 0, 0, 0.3);
}

.header-divider-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 10px;
  max-width: 100%;
}

.divider-line {
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 180, 0, 0.7));
}

.divider-line.right {
  background: linear-gradient(90deg, rgba(255, 180, 0, 0.7), transparent);
}

.divider-diamond {
  width: 6px;
  height: 6px;
  border: 1.5px solid rgba(255, 180, 0, 0.8);
  transform: rotate(45deg);
  background: rgba(255, 180, 0, 0.2);
}

.divider-text {
  font-size: 10px;
  color: rgba(255, 180, 0, 0.75);
  letter-spacing: 0.3em;
  font-family: 'Courier New', monospace;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. CARDS ROW & STRUCTURE
   -------------------------------------------------------------------------- */
.cards-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: clamp(10px, 1.8vw, 24px);
  padding: 0 16px;
  flex-wrap: nowrap;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  flex: 0 0 auto;
}

.card-outer {
  position: relative;
  width: clamp(200px, 20vw, 280px);
  min-width: 0;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  flex-shrink: 1;
}

.card-outer:hover {
  transform: translateY(-8px);
}

.border-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
  overflow: visible;
}

.btrack {
  fill: none;
  stroke-width: 1.5;
}

@keyframes br {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -9999; }
}

.card {
  border-radius: 24px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.card::after {
  content: '';
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  height: 140px;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   4. GLOBE CONTAINERS & ROTATING RINGS
   -------------------------------------------------------------------------- */
.globe-wrap {
  position: relative;
  width: 130px;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.ring1 {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  animation: spin-slow 8s linear infinite;
}

.ring1::before {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
}

.ring2 {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  animation: spin-med 1.8s cubic-bezier(0.6, 0.2, 0.4, 0.8) infinite;
}

.ring3 {
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  animation: spin-slow 3s linear infinite reverse;
}

@keyframes spin-slow { to { transform: rotate(360deg); } }
@keyframes spin-med  { to { transform: rotate(360deg); } }

canvas.globe-canvas {
  border-radius: 50%;
  display: block;
  position: relative;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   5. CARD TYPOGRAPHY & STATS
   -------------------------------------------------------------------------- */
.sub {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.45);
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
  margin-bottom: 3px;
  white-space: nowrap;
}

.name {
  font-size: 24px;
  font-weight: 900;
  color: #f5a800;
  letter-spacing: 0.12em;
  font-family: 'Courier New', monospace;
  text-shadow: 0 0 24px rgba(200, 120, 0, 0.7);
  margin-bottom: 5px;
}

.divider {
  width: 40px;
  height: 1px;
  margin: 6px 0 10px;
}

.stats {
  display: flex;
  gap: 0;
  width: 100%;
  margin-bottom: 16px;
}

.stat {
  flex: 1;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  padding: 4px 2px;
}

.stat:last-child {
  border-right: none;
}

.sl {
  font-size: 9.5px;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-family: 'Courier New', monospace;
  display: block;
  margin-bottom: 4px;
}

.sv {
  font-size: 12px;
  font-weight: 700;
  color: #f5c518;
  font-family: 'Courier New', monospace;
  display: block;
  white-space: nowrap;
}

.shield-blocks {
  display: flex;
  gap: 2px;
  justify-content: center;
}

.blk {
  width: 5px;
  height: 10px;
  border-radius: 1px;
  animation: blk-pulse 1.8s ease-in-out infinite;
}

.blk:nth-child(2) { animation-delay: 0.15s; }
.blk:nth-child(3) { animation-delay: 0.3s; }
.blk:nth-child(4) { animation-delay: 0.45s; }
.blk:nth-child(5) { animation-delay: 0.6s; }
.blk:nth-child(6) { animation-delay: 0.75s; }

@keyframes blk-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.star-row {
  display: flex;
  gap: 2px;
  justify-content: center;
}

.star svg {
  width: 9px;
  height: 9px;
  filter: drop-shadow(0 0 3px #FFD700);
}

.btn-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
}

button.btn {
  all: unset;
  display: inline-block;
  padding: 9px 20px;
  border-radius: 8px;
  cursor: pointer;
  background: #ffffff;
  color: #111111;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  text-align: center;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
  transition: transform 0.2s;
}

button.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: rgba(255, 255, 255, 0.4);
  transform: skewX(-20deg);
  animation: shine 3.5s ease-in-out infinite;
}

@keyframes shine {
  0%, 65%, 100% { left: -60%; opacity: 0; }
  45% { left: 120%; opacity: 1; }
}

button.btn:hover {
  transform: scale(1.05) translateY(-1px);
}

/* Floating Particles */
.particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  border-radius: 24px;
}

.p {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  animation: fp linear infinite;
}

@keyframes fp {
  0%   { opacity: 0; transform: translateY(0) scale(0); }
  20%  { opacity: 0.7; transform: translateY(-25px) scale(1); }
  100% { opacity: 0; transform: translateY(-90px) scale(0.3); }
}

/* --------------------------------------------------------------------------
   6. COUNTRY THEMES (Ukraine, Germany, Sweden, Vietnam)
   -------------------------------------------------------------------------- */
/* Ukraine */
.ua .bt  { fill:none; stroke:#0057B7; stroke-width:2.5; stroke-linecap:round; stroke-dasharray:110 9999; animation:br 2s linear infinite; filter:drop-shadow(0 0 6px #0057B7); }
.ua .bt2 { fill:none; stroke:#FFD700; stroke-width:1.5; stroke-linecap:round; stroke-dasharray:55 9999; animation:br 2s linear infinite; animation-delay:-0.9s; filter:drop-shadow(0 0 4px #FFD700); }
.ua .bt3 { fill:none; stroke:rgba(255,255,255,0.6); stroke-width:1; stroke-linecap:round; stroke-dasharray:30 9999; animation:br 2s linear infinite; animation-delay:-1.5s; }
.ua .btrack { stroke:rgba(0,87,183,0.12); }
.ua .card { background:linear-gradient(160deg,rgba(3,8,26,0.55) 0%,rgba(1,3,12,0.65) 100%); border:1px solid rgba(0,87,183,0.3); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.ua .card::after { background:radial-gradient(ellipse,rgba(0,87,183,0.18) 0%,transparent 70%); }
.ua .ring1 { border:1px solid rgba(0,87,183,0.18); }
.ua .ring1::before { border:1px dashed rgba(255,215,0,0.12); }
.ua .ring2 { border-top-color:#0057B7; border-right-color:rgba(0,87,183,0.4); filter:drop-shadow(0 0 4px #0057B7); }
.ua .ring3 { border-bottom-color:rgba(255,215,0,0.45); }
.ua .divider { background:linear-gradient(90deg,transparent,rgba(0,87,183,0.7),transparent); }
.ua .blk { background:#0057B7; box-shadow:0 0 5px rgba(0,87,183,0.9); }

/* Germany */
.de .bt  { fill:none; stroke:#DD0000; stroke-width:2.5; stroke-linecap:round; stroke-dasharray:110 9999; animation:br 2s linear infinite; filter:drop-shadow(0 0 6px #DD0000); }
.de .bt2 { fill:none; stroke:#FFCE00; stroke-width:1.5; stroke-linecap:round; stroke-dasharray:55 9999; animation:br 2s linear infinite; animation-delay:-0.9s; filter:drop-shadow(0 0 4px #FFCE00); }
.de .bt3 { fill:none; stroke:rgba(255,255,255,0.4); stroke-width:1; stroke-linecap:round; stroke-dasharray:30 9999; animation:br 2s linear infinite; animation-delay:-1.5s; }
.de .btrack { stroke:rgba(221,0,0,0.12); }
.de .card { background:linear-gradient(160deg,rgba(18,10,2,0.55) 0%,rgba(6,3,0,0.65) 100%); border:1px solid rgba(221,0,0,0.3); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.de .card::after { background:radial-gradient(ellipse,rgba(255,206,0,0.14) 0%,transparent 70%); }
.de .ring1 { border:1px solid rgba(221,0,0,0.18); }
.de .ring1::before { border:1px dashed rgba(255,206,0,0.12); }
.de .ring2 { border-top-color:#DD0000; border-right-color:rgba(221,0,0,0.4); filter:drop-shadow(0 0 4px #DD0000); }
.de .ring3 { border-bottom-color:rgba(255,206,0,0.45); }
.de .divider { background:linear-gradient(90deg,transparent,rgba(221,0,0,0.7),transparent); }
.de .blk { background:#FFCE00; box-shadow:0 0 5px rgba(255,206,0,0.8); }

/* Sweden */
.se .bt  { fill:none; stroke:#006AA7; stroke-width:2.5; stroke-linecap:round; stroke-dasharray:110 9999; animation:br 2s linear infinite; filter:drop-shadow(0 0 6px #006AA7); }
.se .bt2 { fill:none; stroke:#FECC02; stroke-width:1.5; stroke-linecap:round; stroke-dasharray:55 9999; animation:br 2s linear infinite; animation-delay:-0.9s; filter:drop-shadow(0 0 4px #FECC02); }
.se .bt3 { fill:none; stroke:rgba(255,255,255,0.6); stroke-width:1; stroke-linecap:round; stroke-dasharray:30 9999; animation:br 2s linear infinite; animation-delay:-1.5s; }
.se .btrack { stroke:rgba(0,106,167,0.12); }
.se .card { background:linear-gradient(160deg,rgba(2,12,22,0.55) 0%,rgba(0,5,10,0.65) 100%); border:1px solid rgba(0,106,167,0.3); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.se .card::after { background:radial-gradient(ellipse,rgba(0,106,167,0.18) 0%,transparent 70%); }
.se .ring1 { border:1px solid rgba(0,106,167,0.18); }
.se .ring1::before { border:1px dashed rgba(254,204,2,0.12); }
.se .ring2 { border-top-color:#006AA7; border-right-color:rgba(0,106,167,0.4); filter:drop-shadow(0 0 4px #006AA7); }
.se .ring3 { border-bottom-color:rgba(254,204,2,0.45); }
.se .divider { background:linear-gradient(90deg,transparent,rgba(0,106,167,0.7),transparent); }
.se .blk { background:#FECC02; box-shadow:0 0 5px rgba(254,204,2,0.8); }

/* Vietnam */
.vn .bt  { fill:none; stroke:#DA251D; stroke-width:2.5; stroke-linecap:round; stroke-dasharray:110 9999; animation:br 2s linear infinite; filter:drop-shadow(0 0 6px #DA251D); }
.vn .bt2 { fill:none; stroke:#f5c518; stroke-width:1.5; stroke-linecap:round; stroke-dasharray:55 9999; animation:br 2s linear infinite; animation-delay:-0.9s; filter:drop-shadow(0 0 4px #f5c518); }
.vn .bt3 { fill:none; stroke:rgba(255,255,255,0.6); stroke-width:1; stroke-linecap:round; stroke-dasharray:30 9999; animation:br 2s linear infinite; animation-delay:-1.5s; }
.vn .btrack { stroke:rgba(218,37,29,0.12); }
.vn .card { background:linear-gradient(160deg,rgba(28,4,4,0.55) 0%,rgba(10,0,0,0.65) 100%); border:1px solid rgba(218,37,29,0.3); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.vn .card::after { background:radial-gradient(ellipse,rgba(218,37,29,0.18) 0%,transparent 70%); }
.vn .ring1 { border:1px solid rgba(218,37,29,0.18); }
.vn .ring1::before { border:1px dashed rgba(245,197,24,0.12); }
.vn .ring2 { border-top-color:#DA251D; border-right-color:rgba(218,37,29,0.4); filter:drop-shadow(0 0 4px #DA251D); }
.vn .ring3 { border-bottom-color:rgba(245,197,24,0.45); }
.vn .divider { background:linear-gradient(90deg,transparent,rgba(218,37,29,0.7),transparent); }
.vn .blk { background:#DA251D; box-shadow:0 0 5px rgba(218,37,29,0.9); }

/* --------------------------------------------------------------------------
   7. ARABIC / RTL
   -------------------------------------------------------------------------- */
/* Arabic script is cursive: letter-spacing would break the joins */
html[lang="ar"] .header-title,
html[lang="ar"] .header-title-glow,
html[lang="ar"] .header-sub,
html[lang="ar"] .divider-text,
html[lang="ar"] .sub,
html[lang="ar"] .name,
html[lang="ar"] .sl,
html[lang="ar"] .btn {
  font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif !important;
  letter-spacing: 0 !important;
}

html[lang="ar"] .header-title-glow {
  white-space: nowrap;
}

html[lang="ar"] .header-divider-wrap,
html[lang="ar"] .sv {
  direction: ltr;
}

/* Keep the card order left-to-right; only the card content is RTL */
html[lang="ar"] .cards-row {
  direction: ltr;
}

html[lang="ar"] .card {
  direction: rtl;
}

html[lang="ar"] .divider-text { font-size: 13px; word-spacing: 0.3em; }
html[lang="ar"] .sub { font-size: 13px; }
html[lang="ar"] .name { font-size: 28px; line-height: 1.3; }
html[lang="ar"] .sl { font-size: 11px; }
html[lang="ar"] button.btn { font-size: 14px; }

html[lang="ar"] .stats {
  direction: ltr;
}

@media screen and (max-width: 768px) {
  html[lang="ar"] .sub { font-size: 9px !important; }
  html[lang="ar"] .name { font-size: 16px !important; }
  html[lang="ar"] .sl { font-size: 8px !important; }
  html[lang="ar"] .btn { font-size: 11px !important; }
}

/* --------------------------------------------------------------------------
   8. RESPONSIVE DESIGN (MOBILE & TABLET)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    min-height: 100dvh !important;
    justify-content: flex-start !important;
    padding-top: 0 !important;
    padding-bottom: 24px;
  }

  #logo-area {
    position: relative !important;
    padding: 18px 0 8px !important;
  }

  #logo-img {
    max-height: 75px !important;
    max-width: 85vw !important;
  }

  .header-area {
    position: relative !important;
    top: auto !important;
    padding: 8px 12px 14px !important;
  }

  .header-title,
  .header-title-glow {
    font-size: 22px !important;
    letter-spacing: 0.06em !important;
  }

  .header-sub {
    font-size: 10px !important;
    padding: 4px 10px !important;
  }

  .cards-row {
    flex-wrap: wrap !important;
    gap: 12px 10px !important;
    padding: 0 10px !important;
    justify-content: center !important;
  }

  .card-outer {
    width: calc(50% - 6px) !important;
    max-width: 220px !important;
    flex-shrink: 1 !important;
  }

  .card {
    padding: 8px 8px 10px !important;
  }

  .globe-wrap {
    width: 68px !important;
    height: 68px !important;
    margin-bottom: 6px !important;
  }

  canvas.globe-canvas {
    width: 56px !important;
    height: 56px !important;
  }

  .name {
    font-size: 12px !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 2px !important;
  }

  .sub {
    font-size: 6.5px !important;
    margin-bottom: 2px !important;
  }

  .divider {
    margin: 4px 0 6px !important;
  }

  .sv {
    font-size: 8.5px !important;
  }

  .sl {
    font-size: 6.5px !important;
    margin-bottom: 2px !important;
  }

  .stats {
    margin-bottom: 8px !important;
    gap: 4px !important;
  }

  .btn {
    font-size: 9px !important;
    padding: 6px 4px !important;
    letter-spacing: 0.06em !important;
  }
}

/* Small phones */
@media screen and (max-width: 359px) {
  .header-sub {
    font-size: 9px !important;
    letter-spacing: 0.08em !important;
  }

  .divider-text {
    letter-spacing: 0.2em;
  }

  .card {
    padding: 8px 6px 10px !important;
  }

  .stats {
    gap: 0 !important;
  }

  .sv {
    font-size: 7.5px !important;
    white-space: nowrap;
  }

  .blk {
    width: 4px;
  }

  .star-row {
    gap: 1px;
  }

  .star svg {
    width: 6px;
    height: 6px;
  }
}