/* ═══════════════════════════════════════════════════════════════════════════
   AGE OF NATIONS — GATE 6 "IMPERIAL THRONE"     assets/login5/login5-imperial.css
   ───────────────────────────────────────────────────────────────────────────
   AOE4 / AAA cinematic skin layered ON TOP of Gate 5 Citadel.
   All login2.js element ids remain untouched. Auth wiring is sacred.
   Toggle off: remove this stylesheet link from index.php.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --imp-gold:        #f0d078;
  --imp-gold-hi:     #fff1c0;
  --imp-gold-mid:    #d4a84a;
  --imp-gold-deep:   #8b6914;
  --imp-bronze:      #a67c3a;
  --imp-ink:         #f6ecd4;
  --imp-ink-dim:     #c4b189;
  --imp-ink-mute:    #8a7a5c;
  --imp-navy:        #0c121c;
  --imp-navy-hi:     #152030;
  --imp-steel:       #1a2433;
  --imp-void:        #05070b;
  --imp-ember:       #ff6b2b;
  --imp-crimson:     #b83a2e;
  --imp-line:        rgba(240,208,120,.45);
  --imp-line-soft:   rgba(240,208,120,.18);
  --imp-glow:        rgba(240,208,120,.28);
  --imp-ease:        cubic-bezier(.22,1,.36,1);
  --imp-ease-out:    cubic-bezier(.16,1,.3,1);
}

/* ── deeper cinematic grade over the 3D kingdom ─────────────────────────── */
#g5-grade{
  background:
    radial-gradient(ellipse 90% 55% at 50% 38%, transparent 30%, rgba(2,4,10,.55) 100%),
    linear-gradient(180deg,
      rgba(4,8,16,.72) 0%,
      rgba(4,6,12,.18) 16%,
      transparent 38%,
      transparent 58%,
      rgba(6,4,2,.35) 78%,
      rgba(2,3,6,.78) 100%),
    radial-gradient(ellipse 50% 40% at 50% 100%, rgba(180,90,20,.12), transparent 70%) !important;
}

/* film grain + subtle vignette layers */
#g6-grain, #g6-vignette, #g6-rays, #g6-fx{
  position:fixed; inset:0; pointer-events:none; z-index:2;
}
#g6-grain{
  opacity:.07;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.9  0 0 0 0 0.8  0 0 0 0 0.55  0 0 0 .55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:180px 180px;
  mix-blend-mode:overlay;
  animation:g6grain 0.35s steps(2) infinite;
}
@keyframes g6grain{
  0%{ transform:translate(0,0); }
  25%{ transform:translate(-1%,1%); }
  50%{ transform:translate(1%,-1%); }
  75%{ transform:translate(-1%,-1%); }
  100%{ transform:translate(0,0); }
}
#g6-vignette{
  z-index:2;
  background:
    radial-gradient(ellipse 78% 70% at 50% 45%, transparent 40%, rgba(0,0,0,.55) 100%);
}
#g6-rays{
  z-index:1;
  opacity:.55;
  background:
    radial-gradient(ellipse 40% 28% at 50% 18%, rgba(240,200,100,.14), transparent 70%),
    conic-gradient(from 200deg at 50% 8%,
      transparent 0deg,
      rgba(255,210,120,.04) 12deg,
      transparent 24deg,
      transparent 40deg,
      rgba(255,200,90,.035) 55deg,
      transparent 70deg,
      transparent 360deg);
  animation:g6rays 18s ease-in-out infinite alternate;
}
@keyframes g6rays{
  from{ opacity:.4; transform:scale(1); }
  to{ opacity:.65; transform:scale(1.04); }
}
#g6-fx{ z-index:2; }

@media (prefers-reduced-motion:reduce){
  #g6-grain, #g6-rays{ animation:none; }
}

/* UI floats above FX */
#g5-top, #g5-hero, #g5-panels, #g5-feats,
#aon-online, #aon-dc-gate{ z-index:4; }
#g5-top, #g5-hero, #g5-panels, #g5-feats{ position:relative; }

/* ══ TOP BAR — forged metal rail ════════════════════════════════════════ */
#g5-top{
  padding:10px 28px 0 !important;
  gap:18px !important;
  position:relative;
}
#g5-top::before{
  content:'';
  position:absolute; left:18px; right:18px; top:0; height:56px;
  border-radius:0 0 14px 14px;
  background:
    linear-gradient(180deg, rgba(18,24,36,.88) 0%, rgba(10,14,22,.72) 70%, transparent 100%);
  border:1px solid rgba(240,208,120,.16);
  border-top:none;
  box-shadow:
    0 10px 28px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,230,160,.12),
    inset 0 -1px 0 rgba(0,0,0,.35);
  pointer-events:none;
  z-index:-1;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
#g5-crest{
  gap:14px !important;
  position:relative;
  z-index:1;
}
#g5-crest .g5-shield{
  width:52px !important; height:52px !important;
  border-radius:50% !important;
  background:
    radial-gradient(circle at 35% 28%, #3a2c18, #120e08 62%, #050403) !important;
  border:2px solid var(--imp-gold-mid) !important;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.8),
    0 6px 18px rgba(0,0,0,.65),
    0 0 22px rgba(240,208,120,.25),
    inset 0 2px 4px rgba(255,230,160,.22),
    inset 0 -3px 8px rgba(0,0,0,.55) !important;
  font-size:0 !important;
  position:relative;
  overflow:hidden;
}
/* SVG crest painted via background mask / content */
#g5-crest .g5-shield::before{
  content:'';
  position:absolute; inset:6px;
  background:
    radial-gradient(circle at 50% 42%, var(--imp-gold-hi) 0 8%, transparent 9%),
    linear-gradient(160deg, transparent 40%, var(--imp-gold) 41% 43%, transparent 44%),
    linear-gradient(20deg, transparent 40%, var(--imp-gold) 41% 43%, transparent 44%),
    radial-gradient(ellipse 40% 50% at 50% 55%, var(--imp-gold-mid), transparent 70%);
  opacity:.95;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.8));
}
#g5-crest .g5-shield::after{
  content:'';
  position:absolute; inset:0;
  border-radius:50%;
  background:linear-gradient(135deg, rgba(255,240,180,.35) 0%, transparent 42%, transparent 58%, rgba(0,0,0,.25) 100%);
  pointer-events:none;
}
#g5-crest .g5-wordmark{
  font-size:18px !important;
  letter-spacing:3.2px !important;
  background:linear-gradient(180deg, #fff8e0 0%, var(--imp-gold-hi) 22%, var(--imp-gold) 55%, var(--imp-gold-deep) 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  filter:
    drop-shadow(0 1px 0 rgba(40,28,6,.9))
    drop-shadow(0 3px 10px rgba(0,0,0,.55)) !important;
}
#g5-nav .nhot{
  position:relative;
  padding:10px 16px !important;
  color:var(--imp-ink-dim) !important;
  letter-spacing:.6px !important;
  text-transform:uppercase;
  font-size:12px !important;
  font-weight:700 !important;
}
#g5-nav .nhot::after{
  content:'';
  position:absolute; left:16px; right:16px; bottom:4px; height:1px;
  background:linear-gradient(90deg, transparent, var(--imp-gold), transparent);
  opacity:0; transform:scaleX(.4);
  transition:opacity .2s, transform .25s var(--imp-ease);
}
#g5-nav .nhot:hover{
  color:var(--imp-gold-hi) !important;
  background:rgba(240,208,120,.07) !important;
  text-shadow:0 0 12px rgba(240,208,120,.35);
}
#g5-nav .nhot:hover::after{ opacity:1; transform:scaleX(1); }

/* ══ HERO — monumental title ════════════════════════════════════════════ */
#g5-hero{
  margin:clamp(6px,3.2vh,36px) 0 clamp(6px,2vh,20px) !important;
  position:relative;
}
#g5-hero .g5-title{
  font-size:clamp(36px,6vw,82px) !important;
  letter-spacing:8px !important;
  background:linear-gradient(
    180deg,
    #fffdf0 0%,
    #fff1c0 14%,
    #f0d078 36%,
    #d4a84a 58%,
    #a67c3a 78%,
    #6d4f1c 100%
  ) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  filter:
    drop-shadow(0 1px 0 rgba(255,240,180,.35))
    drop-shadow(0 2px 0 rgba(60,40,8,.95))
    drop-shadow(0 4px 0 rgba(30,18,4,.55))
    drop-shadow(0 10px 28px rgba(0,0,0,.75))
    drop-shadow(0 0 48px rgba(240,200,100,.32)) !important;
  position:relative;
  animation:g6titlePulse 5.5s ease-in-out infinite;
}
@keyframes g6titlePulse{
  0%,100%{ filter:
    drop-shadow(0 1px 0 rgba(255,240,180,.35))
    drop-shadow(0 2px 0 rgba(60,40,8,.95))
    drop-shadow(0 4px 0 rgba(30,18,4,.55))
    drop-shadow(0 10px 28px rgba(0,0,0,.75))
    drop-shadow(0 0 40px rgba(240,200,100,.28)); }
  50%{ filter:
    drop-shadow(0 1px 0 rgba(255,240,180,.45))
    drop-shadow(0 2px 0 rgba(60,40,8,.95))
    drop-shadow(0 4px 0 rgba(30,18,4,.55))
    drop-shadow(0 10px 28px rgba(0,0,0,.75))
    drop-shadow(0 0 62px rgba(255,220,120,.48)); }
}
#g5-hero .g5-tag{
  margin-top:14px !important;
  letter-spacing:7px !important;
  color:var(--imp-ink) !important;
  text-shadow:
    0 0 20px rgba(240,200,100,.25),
    0 2px 10px rgba(0,0,0,.9) !important;
  position:relative;
}
#g5-hero .g5-tag i{
  height:2px !important;
  background:linear-gradient(90deg, transparent, var(--imp-gold-hi), var(--imp-gold)) !important;
  box-shadow:0 0 8px rgba(240,200,100,.5);
  position:relative;
}
/* crown ornament above title */
#g5-hero::before{
  content:'◆';
  display:block;
  font-size:14px;
  color:var(--imp-gold);
  text-shadow:0 0 16px rgba(240,200,100,.7), 0 2px 4px rgba(0,0,0,.8);
  letter-spacing:0;
  margin-bottom:4px;
  opacity:.9;
  animation:g6crown 3.2s ease-in-out infinite;
}
@keyframes g6crown{
  0%,100%{ transform:translateY(0); opacity:.85; }
  50%{ transform:translateY(-3px); opacity:1; }
}
/* filigree under tag */
#g5-hero::after{
  content:'';
  display:block;
  width:min(320px,48vw);
  height:14px;
  margin:14px auto 0;
  background:
    radial-gradient(circle at 50% 50%, var(--imp-gold) 0 2.5px, transparent 3px),
    linear-gradient(90deg,
      transparent 0%,
      rgba(240,208,120,.15) 12%,
      rgba(240,208,120,.7) 35%,
      rgba(255,241,192,.95) 50%,
      rgba(240,208,120,.7) 65%,
      rgba(240,208,120,.15) 88%,
      transparent 100%);
  background-size:auto, 100% 1.5px;
  background-position:center, center;
  background-repeat:no-repeat;
  opacity:.85;
}

@media (prefers-reduced-motion:reduce){
  #g5-hero .g5-title, #g5-hero::before{ animation:none; }
}

/* ══ PANELS — AOE4 forged window plates ═════════════════════════════════ */
#g5-panels{
  gap:clamp(28px,4.5vw,80px) !important;
  perspective:1400px;
}
.g5-panel{
  width:min(448px,45vw) !important;
  position:relative;
  border-width:28px !important;
  /* multi-layer depth under the 9-slice frame */
  background:
    /* top light wash */
    linear-gradient(180deg, rgba(90,70,30,.22) 0%, transparent 28%),
    /* center soft glow */
    radial-gradient(ellipse 80% 50% at 50% 18%, rgba(60,48,22,.35), transparent 65%),
    /* navy-bronze body — AOE4 dark steel */
    linear-gradient(165deg,
      rgba(18,22,32,.96) 0%,
      rgba(12,14,20,.97) 40%,
      rgba(8,9,12,.98) 100%) !important;
  background-clip:padding-box !important;
  box-shadow:
    0 40px 90px rgba(0,0,0,.78),
    0 0 0 1px rgba(240,208,120,.08),
    0 0 40px rgba(240,180,60,.08),
    inset 0 1px 0 rgba(255,230,160,.08) !important;
  padding:10px 16px 18px !important;
  transform:translateZ(0);
  transition:transform .35s var(--imp-ease), box-shadow .35s;
  overflow:visible;
}
.g5-panel:hover{
  box-shadow:
    0 48px 100px rgba(0,0,0,.82),
    0 0 0 1px rgba(240,208,120,.16),
    0 0 56px rgba(240,180,60,.16),
    inset 0 1px 0 rgba(255,230,160,.12) !important;
}
/* inner gold hairline */
.g5-panel::before{
  content:'';
  position:absolute;
  inset:2px;
  border-radius:2px;
  border:1px solid rgba(240,208,120,.14);
  box-shadow:
    inset 0 0 30px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,230,160,.06);
  pointer-events:none;
  z-index:0;
}
/* corner diamond studs */
.g5-panel::after{
  content:'';
  position:absolute;
  inset:10px;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(circle at 0 0, var(--imp-gold) 0 2px, transparent 2.5px),
    radial-gradient(circle at 100% 0, var(--imp-gold) 0 2px, transparent 2.5px),
    radial-gradient(circle at 0 100%, var(--imp-gold) 0 2px, transparent 2.5px),
    radial-gradient(circle at 100% 100%, var(--imp-gold) 0 2px, transparent 2.5px);
  opacity:.55;
}
/* register panel — warmer imperial red undertone */
.g5-panel:nth-child(2){
  background:
    linear-gradient(180deg, rgba(90,40,28,.18) 0%, transparent 30%),
    radial-gradient(ellipse 80% 50% at 50% 18%, rgba(70,30,22,.28), transparent 65%),
    linear-gradient(165deg,
      rgba(22,14,16,.96) 0%,
      rgba(14,10,12,.97) 40%,
      rgba(8,6,8,.98) 100%) !important;
  background-clip:padding-box !important;
}

.g5-panel > *{ position:relative; z-index:1; }

.g5-panel h2{
  font-size:24px !important;
  letter-spacing:5px !important;
  margin:6px 0 2px !important;
  background:linear-gradient(180deg, #fff8e0, var(--imp-gold-hi) 30%, var(--imp-gold) 62%, var(--imp-gold-deep)) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.7));
  position:relative;
}
.g5-panel .g5-sub{
  letter-spacing:3px !important;
  color:var(--imp-ink-dim) !important;
  font-size:10.5px !important;
  margin-bottom:8px !important;
}
.g5-rule{
  height:16px !important;
  margin:4px 18px 14px !important;
  background:
    radial-gradient(circle at 50% 50%, var(--imp-gold-hi) 0 2.5px, transparent 3px),
    radial-gradient(circle at 30% 50%, var(--imp-gold-mid) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 70% 50%, var(--imp-gold-mid) 0 1.2px, transparent 1.8px),
    linear-gradient(90deg,
      transparent,
      rgba(240,208,120,.25) 12%,
      rgba(240,208,120,.75) 40%,
      rgba(255,241,192,.95) 50%,
      rgba(240,208,120,.75) 60%,
      rgba(240,208,120,.25) 88%,
      transparent) !important;
  background-size:auto, auto, auto, 100% 1.5px !important;
  background-position:center, center, center, center !important;
  background-repeat:no-repeat !important;
  position:relative;
}
.g5-rule::before,
.g5-rule::after{
  content:'';
  position:absolute; top:50%; width:18px; height:1px;
  background:linear-gradient(90deg, transparent, var(--imp-gold));
  opacity:.6;
}
.g5-rule::before{ left:0; transform:translateY(-50%); }
.g5-rule::after{ right:0; transform:translateY(-50%) scaleX(-1); }

/* ── fields — recessed forged steel ───────────────────────────────────── */
.g5-field{
  height:50px !important;
  margin:0 4px 13px !important;
  padding:0 14px !important;
  border-radius:6px !important;
  background:
    linear-gradient(180deg, rgba(2,3,6,.92) 0%, rgba(12,16,24,.88) 100%) !important;
  border:1px solid rgba(240,208,120,.22) !important;
  box-shadow:
    inset 0 3px 10px rgba(0,0,0,.75),
    inset 0 -1px 0 rgba(255,230,160,.05),
    0 1px 0 rgba(255,230,160,.04) !important;
  transition:border-color .2s, box-shadow .2s, background .2s !important;
}
.g5-field:focus-within{
  border-color:var(--imp-gold) !important;
  background:
    linear-gradient(180deg, rgba(4,5,10,.94) 0%, rgba(16,20,30,.9) 100%) !important;
  box-shadow:
    inset 0 3px 10px rgba(0,0,0,.7),
    0 0 0 1px rgba(240,208,120,.3),
    0 0 22px rgba(240,200,100,.22),
    0 0 40px rgba(240,180,60,.08) !important;
}
.g5-field .gi{
  font-size:0 !important;
  width:18px; height:18px;
  flex:0 0 18px;
  opacity:.85;
  background:currentColor;
  color:var(--imp-gold-mid);
  mask-size:contain; mask-repeat:no-repeat; mask-position:center;
  -webkit-mask-size:contain; -webkit-mask-repeat:no-repeat; -webkit-mask-position:center;
}
/* user icon */
.g5-field:first-of-type .gi,
.g5-field:has(#li-identity) .gi{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-4.4 0-8 2.2-8 5v1h16v-1c0-2.8-3.6-5-8-5z'/></svg>");
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-4.4 0-8 2.2-8 5v1h16v-1c0-2.8-3.6-5-8-5z'/></svg>");
}
/* lock icon */
.g5-field:has(#li-password) .gi{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M17 9h-1V7a4 4 0 0 0-8 0v2H7a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2zm-7-2a2 2 0 0 1 4 0v2h-4V7zm3 8.7V18h-2v-2.3a1.5 1.5 0 1 1 2 0z'/></svg>");
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M17 9h-1V7a4 4 0 0 0-8 0v2H7a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2zm-7-2a2 2 0 0 1 4 0v2h-4V7zm3 8.7V18h-2v-2.3a1.5 1.5 0 1 1 2 0z'/></svg>");
}
.g5-field input{
  font-size:15px !important;
  letter-spacing:.2px;
  color:var(--imp-ink) !important;
}
.g5-field input::placeholder{ color:rgba(196,177,137,.48) !important; }
.g5-field .eyehot{
  opacity:.55 !important;
  transition:opacity .15s, color .15s !important;
  color:var(--imp-ink-dim);
}
.g5-field .eyehot:hover{ opacity:1 !important; color:var(--imp-gold-hi); }

.g5-row{
  margin:0 6px 14px !important;
  color:var(--imp-ink-dim) !important;
  font-size:12.5px !important;
}
.g5-check i{
  width:18px !important; height:18px !important;
  border-radius:3px !important;
  background:linear-gradient(180deg,#06080c,#151a24) !important;
  border:1px solid rgba(240,208,120,.42) !important;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.4) !important;
}
.g5-check input:checked + i{
  background:linear-gradient(180deg, #c9a045, #7a5818) !important;
  border-color:var(--imp-gold-hi) !important;
  box-shadow:0 0 10px rgba(240,200,100,.35), inset 0 1px 0 rgba(255,240,180,.4) !important;
}
.g5-check input:checked + i::before{ color:#1a1205; font-weight:900; }
.g5-link{
  color:var(--imp-gold) !important;
  letter-spacing:.3px;
}
.g5-link:hover{
  color:var(--imp-gold-hi) !important;
  text-shadow:0 0 10px rgba(240,200,100,.4);
}

/* ── CTA — legendary metal button with light sweep ────────────────────── */
.g5-cta{
  height:58px !important;
  margin:4px 4px 0 !important;
  font-size:17px !important;
  letter-spacing:4px !important;
  position:relative;
  overflow:hidden;
  color:#fff4d4 !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,.95),
    0 2px 8px rgba(0,0,0,.85),
    0 0 16px rgba(255,200,80,.25) !important;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.6)) drop-shadow(0 0 12px rgba(200,140,40,.2)) !important;
  transition:filter .18s, transform .14s, text-shadow .18s !important;
}
.g5-cta::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(105deg,
    transparent 30%,
    rgba(255,240,180,.0) 40%,
    rgba(255,245,200,.35) 50%,
    rgba(255,240,180,.0) 60%,
    transparent 70%);
  transform:translateX(-120%);
  animation:g6sweep 3.8s ease-in-out infinite;
  pointer-events:none;
  mix-blend-mode:screen;
}
@keyframes g6sweep{
  0%, 55%{ transform:translateX(-120%); }
  80%, 100%{ transform:translateX(120%); }
}
.g5-cta:hover{
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.65)) drop-shadow(0 0 22px rgba(240,180,60,.4)) brightness(1.14) !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,.95),
    0 2px 8px rgba(0,0,0,.85),
    0 0 24px rgba(255,220,100,.55) !important;
  transform:translateY(-1px);
}
.g5-cta:active{
  transform:translateY(2px) !important;
  filter:brightness(.92) !important;
}
@media (prefers-reduced-motion:reduce){
  .g5-cta::before{ animation:none; }
}

/* ── social row ───────────────────────────────────────────────────────── */
.g5-socrow{
  margin-top:16px !important;
  padding-top:12px;
  border-top:1px solid rgba(240,208,120,.12);
  position:relative;
}
.g5-socrow::before{
  content:'';
  position:absolute; top:-1px; left:50%; transform:translateX(-50%);
  width:40px; height:2px;
  background:linear-gradient(90deg, transparent, var(--imp-gold), transparent);
}
.g5-socrow .g5-or{
  font-size:10px !important;
  letter-spacing:2.5px !important;
  color:var(--imp-ink-mute) !important;
}
.g5-socrow .sochot{
  width:46px !important; height:46px !important;
  border-radius:50% !important;
  background:
    radial-gradient(circle at 35% 30%, #2a3344, #0c1018 70%) !important;
  border:1.5px solid rgba(240,208,120,.38) !important;
  box-shadow:
    0 6px 16px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,230,160,.16),
    inset 0 -2px 6px rgba(0,0,0,.5) !important;
  font-size:0 !important;
  position:relative;
  transition:transform .18s var(--imp-ease), border-color .18s, box-shadow .18s !important;
}
.g5-socrow .sochot::before{
  content:'';
  position:absolute; inset:0;
  border-radius:50%;
  background:center / 52% 52% no-repeat;
  opacity:.9;
}
/* Google */
.g5-socrow .sochot[data-p="google"]::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23f0d078' d='M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z'/><path fill='%23e8c05e' d='M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z'/><path fill='%23d4a84a' d='M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z'/><path fill='%23c9a045' d='M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z'/></svg>");
}
/* Facebook */
.g5-socrow .sochot[data-p="facebook"]::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23f0d078' d='M14 13.5h2.5l1-4H14v-2c0-1.03 0-2 2-2h1.5V2.14C17.17 2.09 16.02 2 14.79 2 12.06 2 10 3.72 10 7.05V9.5H7.5v4H10V22h4v-8.5z'/></svg>");
}
/* Steam */
.g5-socrow .sochot[data-p="steam"]::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23f0d078' d='M12 2a10 10 0 0 0-10 9.3l5.4 2.2a2.7 2.7 0 0 1 1.5-.4l2.4-3.5v-.2a3.4 3.4 0 1 1 3.4 3.4h-.1l-3.4 2.5a2.7 2.7 0 0 1-5.3.7L2.3 14A10 10 0 1 0 12 2zm-3.7 13.5-2.3-.9a2.7 2.7 0 0 0 5.1.7l.1-.3-2.9.5zm8.1-5.2a2.1 2.1 0 1 0-2.1 2.1 2.1 2.1 0 0 0 2.1-2.1zm-3.6 0a1.5 1.5 0 1 1 1.5 1.5 1.5 1.5 0 0 1-1.5-1.5z'/></svg>");
}
.g5-socrow .sochot:hover{
  transform:translateY(-3px) scale(1.06);
  border-color:var(--imp-gold-hi) !important;
  box-shadow:
    0 10px 24px rgba(0,0,0,.6),
    0 0 20px rgba(240,200,100,.35),
    inset 0 1px 0 rgba(255,230,160,.25) !important;
}

/* ══ NATION GALLERY ═════════════════════════════════════════════════════ */
#nation-grid{
  gap:10px !important;
  padding:4px 6px 8px !important;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 20px),transparent 100%) !important;
          mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 20px),transparent 100%) !important;
}
.ng-region{
  letter-spacing:3px !important;
  color:var(--imp-gold) !important;
  text-shadow:0 0 12px rgba(240,200,100,.3);
  margin:8px 2px 2px !important;
}
.ng-region::after{
  background:linear-gradient(90deg, rgba(240,208,120,.55), transparent) !important;
  height:1.5px !important;
}
.ng-tile{
  padding:10px 6px 9px !important;
  border-radius:8px !important;
  background:
    linear-gradient(165deg, rgba(28,34,48,.94), rgba(10,12,18,.96)) !important;
  border:1px solid rgba(240,208,120,.2) !important;
  box-shadow:
    0 4px 14px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,230,160,.07) !important;
  transition:transform .2s var(--imp-ease), border-color .2s, box-shadow .2s !important;
}
.ng-tile:hover{
  transform:translateY(-4px) scale(1.02) !important;
  border-color:var(--imp-gold) !important;
  box-shadow:
    0 12px 28px rgba(0,0,0,.65),
    0 0 22px rgba(240,200,100,.3),
    inset 0 1px 0 rgba(255,230,160,.12) !important;
}
.ng-tile.sel{
  border-color:var(--imp-gold-hi) !important;
  background:
    linear-gradient(165deg, rgba(48,40,22,.96), rgba(18,14,10,.97)) !important;
  box-shadow:
    0 0 0 1px var(--imp-gold-hi),
    0 0 28px rgba(240,200,100,.5),
    0 8px 20px rgba(0,0,0,.6),
    inset 0 0 20px rgba(240,180,60,.08) !important;
}
.ng-flag{
  width:62px !important; height:40px !important;
  border-radius:4px !important;
  box-shadow:
    0 3px 8px rgba(0,0,0,.6),
    0 0 0 1px rgba(240,208,120,.35),
    inset 0 1px 0 rgba(255,255,255,.1) !important;
}
.ng-tile .nname{
  color:var(--imp-ink) !important;
  font-size:11.5px !important;
  letter-spacing:.4px;
}
.ng-tile .nperk{
  color:var(--imp-gold) !important;
  text-shadow:0 0 8px rgba(240,200,100,.25);
}
.ng-tos{
  color:rgba(196,177,137,.55) !important;
  letter-spacing:.2px;
}

/* ══ FEATURE STRIP — engraved command plaques ═══════════════════════════ */
#g5-feats{
  gap:14px !important;
  padding:4px 26px 32px !important;
}
.fcard{
  padding:13px 18px !important;
  border-radius:8px !important;
  background:
    linear-gradient(165deg, rgba(22,28,40,.82), rgba(8,10,16,.88)) !important;
  border:1px solid rgba(240,208,120,.28) !important;
  box-shadow:
    0 8px 22px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,230,160,.1),
    inset 0 -1px 0 rgba(0,0,0,.3) !important;
  -webkit-backdrop-filter:blur(8px) !important;
  backdrop-filter:blur(8px) !important;
  font-size:12.5px !important;
  letter-spacing:.3px;
  color:var(--imp-ink) !important;
  position:relative;
  overflow:hidden;
}
.fcard::before{
  content:'';
  position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(240,208,120,.5), transparent);
}
.fcard b{
  font-size:18px !important;
  filter:drop-shadow(0 0 6px rgba(240,180,60,.3));
}
.fcard:hover{
  transform:translateY(-4px) !important;
  border-color:var(--imp-gold) !important;
  box-shadow:
    0 14px 32px rgba(0,0,0,.65),
    0 0 24px rgba(240,200,100,.28),
    inset 0 1px 0 rgba(255,230,160,.15) !important;
  color:var(--imp-gold-hi) !important;
}

/* ══ ONLINE CHIP + DISCORD ══════════════════════════════════════════════ */
#aon-online{
  background:linear-gradient(180deg, rgba(12,18,28,.92), rgba(6,8,14,.94)) !important;
  border:1px solid rgba(240,208,120,.42) !important;
  box-shadow:
    0 6px 20px rgba(0,0,0,.55),
    0 0 18px rgba(240,200,100,.12),
    inset 0 1px 0 rgba(255,230,160,.1) !important;
  letter-spacing:.4px;
  padding:7px 18px !important;
}
#aon-online .dot{
  box-shadow:0 0 10px #4ade80, 0 0 20px rgba(74,222,128,.4) !important;
}
#aon-online b{
  color:var(--imp-gold-hi) !important;
  text-shadow:0 0 10px rgba(240,200,100,.4);
}

#aon-dc-gate{
  border-radius:12px !important;
  box-shadow:
    0 10px 28px rgba(0,0,0,.5),
    0 0 24px rgba(88,101,242,.35) !important;
}

/* ══ MODALS ═════════════════════════════════════════════════════════════ */
.modal{
  background:
    radial-gradient(ellipse at 50% 38%, rgba(12,10,6,.55), rgba(2,3,8,.92)),
    rgba(0,0,0,.4) !important;
  -webkit-backdrop-filter:blur(8px) !important;
  backdrop-filter:blur(8px) !important;
}
.mbox{
  border-width:28px !important;
  background:
    linear-gradient(180deg, rgba(90,70,30,.18) 0%, transparent 30%),
    linear-gradient(165deg, rgba(18,22,32,.98), rgba(8,9,14,.99)) !important;
  background-clip:padding-box !important;
  box-shadow:
    0 50px 110px rgba(0,0,0,.9),
    0 0 60px rgba(240,180,60,.12) !important;
  padding:14px 20px 22px !important;
}
.mbox h3{
  font-size:20px !important;
  letter-spacing:3.5px !important;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.6));
}
.mbox input{
  height:50px !important;
  border-radius:6px !important;
  background:linear-gradient(180deg, rgba(2,3,6,.92), rgba(12,16,24,.88)) !important;
  border:1px solid rgba(240,208,120,.22) !important;
}
.mbox input:focus{
  border-color:var(--imp-gold) !important;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.6), 0 0 18px rgba(240,200,100,.25) !important;
}
.mbox .mbtn{
  height:56px !important;
  letter-spacing:2.8px !important;
  position:relative;
  overflow:hidden;
}
.mbox .mbtn::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 35%, rgba(255,245,200,.3) 50%, transparent 65%);
  transform:translateX(-120%);
  animation:g6sweep 3.8s ease-in-out infinite;
  pointer-events:none;
  mix-blend-mode:screen;
}
.mbox .mx{
  width:36px !important; height:36px !important;
  background:linear-gradient(180deg, #2a3344, #0c1018) !important;
  border:1.5px solid var(--imp-line) !important;
}
.mbox.claim .claim-arrow{
  color:var(--imp-gold-hi) !important;
  text-shadow:0 0 14px rgba(240,200,100,.45);
}

#toast{
  background:linear-gradient(180deg, rgba(22,28,40,.97), rgba(8,10,16,.98)) !important;
  border:1px solid rgba(240,208,120,.4) !important;
  box-shadow:
    0 16px 48px rgba(0,0,0,.75),
    0 0 24px rgba(240,200,100,.2) !important;
  border-radius:10px !important;
  letter-spacing:.2px;
}

/* ══ MOBILE IMPERIAL ════════════════════════════════════════════════════ */
#mob .m-hero::before{
  letter-spacing:5px !important;
  background:linear-gradient(180deg, #fffdf0, #fff1c0 20%, #f0d078 50%, #a67c3a 85%, #6d4f1c) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  filter:
    drop-shadow(0 2px 0 rgba(60,40,8,.95))
    drop-shadow(0 6px 18px rgba(0,0,0,.8))
    drop-shadow(0 0 30px rgba(240,200,100,.3)) !important;
}
#mob .m-hero::after{
  letter-spacing:6px !important;
  color:var(--imp-ink) !important;
}
.mcard{
  border-width:28px !important;
  background:
    linear-gradient(180deg, rgba(90,70,30,.2) 0%, transparent 28%),
    linear-gradient(165deg, rgba(18,22,32,.96), rgba(8,9,12,.98)) !important;
  background-clip:padding-box !important;
  box-shadow:
    0 28px 64px rgba(0,0,0,.75),
    0 0 30px rgba(240,180,60,.08) !important;
  position:relative;
}
.mcard.red{
  background:
    linear-gradient(180deg, rgba(90,40,28,.2) 0%, transparent 28%),
    linear-gradient(165deg, rgba(22,14,16,.96), rgba(8,6,8,.98)) !important;
  background-clip:padding-box !important;
}
.mcard h2{
  font-size:22px !important;
  letter-spacing:4px !important;
}
.mf{
  height:52px !important;
  border-radius:6px !important;
  background:linear-gradient(180deg, rgba(2,3,6,.92), rgba(12,16,24,.88)) !important;
  border:1px solid rgba(240,208,120,.22) !important;
  box-shadow:inset 0 3px 10px rgba(0,0,0,.75) !important;
}
.mf:focus-within{
  border-color:var(--imp-gold) !important;
  box-shadow:inset 0 3px 10px rgba(0,0,0,.7), 0 0 18px rgba(240,200,100,.22) !important;
}
.mbtn{
  height:58px !important;
  letter-spacing:3px !important;
  position:relative;
  overflow:hidden;
}
.mbtn::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 35%, rgba(255,245,200,.3) 50%, transparent 65%);
  transform:translateX(-120%);
  animation:g6sweep 3.8s ease-in-out infinite;
  pointer-events:none;
  mix-blend-mode:screen;
}
.mft{
  border-radius:8px !important;
  background:linear-gradient(165deg, rgba(22,28,40,.85), rgba(8,10,16,.9)) !important;
  border:1px solid rgba(240,208,120,.24) !important;
  border-left:3px solid var(--imp-gold) !important;
  box-shadow:0 6px 18px rgba(0,0,0,.5) !important;
}
.mft b{ color:var(--imp-ink) !important; }
.mft span{ color:var(--imp-ink-dim) !important; }

/* ══ ENTRANCE ANIMATIONS ════════════════════════════════════════════════ */
@keyframes g6riseIn{
  from{ opacity:0; transform:translateY(28px) scale(.97); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
#g5-top{ animation:g6riseIn .7s var(--imp-ease-out) both; }
#g5-hero{ animation:g6riseIn .85s .08s var(--imp-ease-out) both; }
#g5-panels .g5-panel:nth-child(1){ animation:g6riseIn .9s .16s var(--imp-ease-out) both; }
#g5-panels .g5-panel:nth-child(2){ animation:g6riseIn .9s .26s var(--imp-ease-out) both; }
#g5-feats{ animation:g6riseIn 1s .36s var(--imp-ease-out) both; }

@media (prefers-reduced-motion:reduce){
  #g5-top, #g5-hero, #g5-panels .g5-panel, #g5-feats, .mbtn::before{ animation:none; }
}

/* ══ RESPONSIVE TWEAKS ══════════════════════════════════════════════════ */
@media (max-width:1180px){
  .g5-panel{ width:min(420px,46vw) !important; }
}
@media (max-width:940px) and (min-width:869px){
  .g5-panel{ width:min(480px,92vw) !important; }
}
@media (max-height:780px){
  #g5-hero::before{ font-size:11px; }
  #g5-hero::after{ margin-top:8px; height:10px; }
}

/* hide emoji glyphs that we replaced with masks (fallback if mask fails) */
.g5-field .gi{ color:var(--imp-gold-mid); }
/* if :has() unsupported, icons still show as gold squares — acceptable */

/* SEO footer polish */
#seo-footer{
  background:linear-gradient(180deg, #080a10, #05070b) !important;
  border-top:1px solid rgba(240,208,120,.14) !important;
  color:#8a7a5c !important;
}
#seo-footer h1{ color:var(--imp-gold) !important; }
#seo-footer h2{ color:var(--imp-ink-dim) !important; }