/* ═══════════════════════════════════════════════════════════════════════════════════════════
   AGE OF NATIONS — GATE 5 "AoE4" LAYER            assets/login5/login5-aoe.css
   ───────────────────────────────────────────────────────────────────────────────────────────
   Operator, 2026-08-10: the gate reads "פושר — סביר". He is right, and a render at his own
   2292×958 shows exactly why:
     · the 3D scene is FLAT and 70% EMPTY — a pale sky meets a dark green field with no
       atmosphere between them, no key light and a vignette far too polite to focus the eye;
     · the panels are dark RECTANGLES — a nice gold frame around a near-flat interior with no
       material, no bevel and no weight on the scene;
     · there is no HERALDRY anywhere: four 3px corner dots against an Age-of-Empires brief;
     · the type is thin and small, the nation tiles are 8px boxes, and the feature strip is a
       row of web pills.

   This file is the LAST stylesheet in the gate chain, so it wins every tie on document order:
       login5.css → login5-imperial.css → THIS FILE
   Rollback = delete its <link> from index.php. It adds no ids that login2.js binds, changes no
   geometry that fit() measures, and every rule is scoped to html:not(.mob) or an existing hook.

   Art it depends on (all built by tools/gen_aoe_art.py, 184 KB for the nine):
     panel-vellum.jpg  boss.png  seal.png  divider.png
     banner-l.png  banner-r.png  plaque.jpg  shield.png  fog.png
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

:root{
  --a4-gold-hi:#f6e6b4;
  --a4-gold:#d8b45c;
  --a4-gold-lo:#a07c2c;
  --a4-gold-sh:#5e4413;
  --a4-ink:#0b0805;
  /* one light direction for the whole gate: warm key from the upper LEFT, cold fill from the
     right, shadow pooling at the foot. Every bevel and every shadow below obeys it. */
  --a4-lip:inset 0 1px 0 rgba(246,230,180,.22);
  --a4-well:inset 0 14px 26px -14px rgba(0,0,0,.85);
  --a4-foot:inset 0 -26px 44px -20px rgba(0,0,0,.8);
}

/* ═══════════════════════════════════════════════════════════════════════════
   1 · THE SCENE — give the 3D kingdom weather, a horizon and a real vignette.
   This is the biggest single fix: the emptiness was atmosphere, not geometry.
   ═══════════════════════════════════════════════════════════════════════════ */

/* the horizon fog bank — sits between the sky and the field, which is precisely
   where the render had nothing at all */
#g7-fog{
  /* MEASURED, not guessed: the first cut was opacity .5 + screen on the fog PNG alone and a
     computed-style probe confirmed it was painting — it was simply invisible, because
     screen-blending a mostly-transparent grey over an already-darkened ground adds almost no
     luminance. It now carries its own gradient MASS and the PNG only supplies the texture. */
  position:fixed; left:-4%; right:-4%; top:40%; height:30vh;
  z-index:1; pointer-events:none;
  background:
    url("fog.png") center bottom / 100% 100% no-repeat,
    linear-gradient(180deg, rgba(150,172,200,0) 0%, rgba(154,176,204,.26) 46%, rgba(126,148,178,.10) 78%, transparent 100%);
  opacity:.85;
  mix-blend-mode:screen;
  animation:a4fog 46s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes a4fog{ from{ transform:translate3d(-1.6%,0,0) } to{ transform:translate3d(1.6%,-1.2%,0) } }

/* the ground reads as SHADOW instead of flat green, and the sky gets a warm key */
#g5-grade{
  background:
    radial-gradient(ellipse 34% 30% at 16% 6%, rgba(255,206,120,.20), transparent 72%),
    radial-gradient(ellipse 90% 55% at 50% 38%, transparent 26%, rgba(2,4,10,.62) 100%),
    linear-gradient(180deg,
      rgba(4,8,16,.80) 0%,
      rgba(4,6,12,.24) 15%,
      transparent 34%,
      rgba(3,5,10,.30) 62%,
      rgba(2,3,7,.74) 84%,
      rgba(1,2,4,.94) 100%) !important;
}

/* a vignette with actual authority — the old one was 78%/70% at .55 and left the
   screen corners as bright as the panels */
#g6-vignette{
  background:
    radial-gradient(ellipse 64% 58% at 50% 46%, transparent 34%, rgba(0,0,0,.50) 78%, rgba(0,0,0,.80) 100%),
    radial-gradient(ellipse 96% 92% at 50% 50%, transparent 62%, rgba(0,0,0,.42) 100%) !important;
}

/* god-rays from the same upper-left key */
#g6-rays{
  opacity:.72 !important;
  background:
    radial-gradient(ellipse 38% 26% at 18% 8%, rgba(255,210,130,.20), transparent 70%),
    conic-gradient(from 196deg at 20% 2%,
      transparent 0deg, rgba(255,214,140,.11) 8deg, transparent 17deg,
      transparent 24deg, rgba(255,214,140,.08) 31deg, transparent 40deg) !important;
}

/* HANGING BANNERS — the one cue that says "castle hall" rather than "web page".
   Fixed to the viewport corners, behind the UI, hidden on anything narrow. */
#g7-bnl, #g7-bnr{
  position:fixed; top:52px; width:min(210px,13vw); height:min(430px,44vh);
  z-index:3; pointer-events:none;
  background-repeat:no-repeat; background-position:top center; background-size:100% 100%;
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.6));
  opacity:0; animation:a4drop 1.1s .35s cubic-bezier(.22,1,.36,1) forwards;
  transform-origin:50% 0;
}
#g7-bnl{ left:clamp(6px,2.2vw,42px); background-image:url("banner-l.png"); }
#g7-bnr{ right:clamp(6px,2.2vw,42px); background-image:url("banner-r.png"); }
@keyframes a4drop{ from{ opacity:0; transform:translateY(-24px) rotate(-1.2deg) } to{ opacity:.92; transform:none } }
@media (max-width:1280px){ #g7-bnl, #g7-bnr{ display:none } }

/* ═══════════════════════════════════════════════════════════════════════════
   2 · THE PANELS — from dark rectangle to cased object.
   `.g6-panel-ornament` is already in the DOM on both panels and carried NO css
   at all, so it becomes the material layer for free: tooled leather, an inner
   well, and the four corner bosses as four background layers on one element.
   ═══════════════════════════════════════════════════════════════════════════ */
html:not(.mob) .g5-panel{
  box-shadow:
    0 34px 60px -18px rgba(0,0,0,.78),
    0 0 0 1px rgba(0,0,0,.5),
    0 0 90px -30px rgba(255,190,90,.22) !important;
}
html:not(.mob) .g5-panel > .g6-panel-ornament{
  position:absolute; inset:-2px; z-index:0; pointer-events:none;
  border-radius:3px;
  background-image:
    url("boss.png"), url("boss.png"), url("boss.png"), url("boss.png"),
    url("panel-vellum.jpg");
  background-position:
    left 6px top 6px, right 6px top 6px, left 6px bottom 6px, right 6px bottom 6px,
    center top;
  background-size:
    22px 22px, 22px 22px, 22px 22px, 22px 22px,
    100% 100%;
  background-repeat:no-repeat;
  box-shadow:var(--a4-lip), var(--a4-well), var(--a4-foot);
}
/* the panel's own children must ride ABOVE the material */
html:not(.mob) .g5-panel > *:not(.g6-panel-ornament){ position:relative; z-index:1; }

/* THE WAX SEAL IS NOT SHIPPED — an honest miss, recorded so nobody re-tries it blind.
   seal.png is on disk and looks right on a contact sheet, but at the 74px the panel head allows
   (and half-occluded by the frame's top rail) its sun detail dissolves and all that survives is
   a soft pink blob reading as a lens flare. A shadowed socket behind it made it worse. It would
   need ~110px fully clear of the frame to read, and there it floats with nothing anchoring it.
   The panel head already carries the load: tooled leather + four gold bosses + engraved gold
   leaf. One broken ornament costs more than the missing one. `.g5-panel::after` is therefore
   left to login5-imperial.css:346 (its four 2px corner studs) exactly as it was.
   ─────────────────────────────────────────────────────────────────────────────────────────── */

/* ── type with authority. The headings were 22px/300-weight-looking; AoE4 sets
      them heavy, tight and engraved. Longhands only: a `background` shorthand
      anywhere later would reset background-clip and kill the gold leaf. ── */
html:not(.mob) .g5-panel h2{
  font-size:clamp(24px,2.1vw,31px) !important;
  letter-spacing:6px !important;
  margin:4px 0 2px !important;
  background-image:linear-gradient(178deg,#fff3cf 0%,var(--a4-gold-hi) 26%,var(--a4-gold) 58%,var(--a4-gold-sh) 100%) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important;
  text-shadow:0 2px 0 rgba(0,0,0,.55), 0 5px 16px rgba(0,0,0,.72), 0 0 26px rgba(255,190,90,.20) !important;
}
html:not(.mob) .g5-panel .g5-sub{
  font-size:9.5px !important; letter-spacing:2.6px !important;
  color:rgba(226,201,152,.62) !important;
}

/* the heraldic rule replaces the plain hairline */
html:not(.mob) .g5-panel .g5-rule{
  border:0 !important; height:16px !important;
  margin:9px auto 11px !important; width:86% !important;
  background:url("divider.png") center/contain no-repeat !important;
  opacity:.92;
}

/* fields sink INTO the leather instead of floating on it */
html:not(.mob) .g5-panel .g5-fld,
html:not(.mob) .g5-panel input[type=text],
html:not(.mob) .g5-panel input[type=password]{
  box-shadow:inset 0 2px 6px rgba(0,0,0,.7), inset 0 0 0 1px rgba(0,0,0,.45), 0 1px 0 rgba(246,230,180,.10) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3 · THE CALL TO ACTION — forged, not printed.
   ═══════════════════════════════════════════════════════════════════════════ */
html:not(.mob) .g5-cta{
  font-size:14px !important; letter-spacing:4.4px !important;
  color:#2a1a06 !important;
  text-shadow:0 1px 0 rgba(255,236,190,.55) !important;
  background-image:
    linear-gradient(180deg, rgba(255,240,200,.30), transparent 42%),
    linear-gradient(180deg, var(--a4-gold-hi) 0%, var(--a4-gold) 44%, var(--a4-gold-lo) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,248,220,.75),
    inset 0 -3px 8px rgba(94,68,19,.55),
    0 6px 14px -4px rgba(0,0,0,.7),
    0 0 0 1px var(--a4-gold-sh) !important;
  transition:filter .16s ease, box-shadow .16s ease, transform .12s ease;
}
html:not(.mob) .g5-cta:hover{
  filter:brightness(1.09) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,252,235,.9),
    inset 0 -3px 8px rgba(94,68,19,.5),
    0 8px 20px -4px rgba(0,0,0,.72),
    0 0 26px rgba(255,196,96,.42),
    0 0 0 1px var(--a4-gold) !important;
}
html:not(.mob) .g5-cta:active{ transform:translateY(1px) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   4 · NATION TILES — shields on a rack, not 8px boxes.
   ═══════════════════════════════════════════════════════════════════════════ */
html:not(.mob) .ng-tile{
  border:0 !important;
  border-image:url("shield.png") 34 fill / 17px / 0 stretch !important;
  padding:9px 6px 8px !important;
  transition:transform .14s cubic-bezier(.22,1,.36,1), filter .14s ease, box-shadow .14s ease;
}
html:not(.mob) .ng-tile:hover{
  transform:translateY(-3px) !important;
  filter:brightness(1.1) saturate(1.06);
  box-shadow:0 10px 18px -8px rgba(0,0,0,.7), 0 0 20px -4px rgba(255,196,96,.45) !important;
}
html:not(.mob) .ng-tile:active{ transform:translateY(0) !important; }
html:not(.mob) .ng-tile img{
  box-shadow:0 1px 0 rgba(246,230,180,.28), 0 2px 6px rgba(0,0,0,.6) !important;
}
html:not(.mob) .ng-tile .nname{
  font-size:10.5px !important; letter-spacing:.4px !important;
  color:#f0dfb6 !important; text-shadow:0 1px 2px rgba(0,0,0,.8) !important;
}
html:not(.mob) .ng-tile .nperk{ color:rgba(214,186,132,.72) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   5 · FEATURE STRIP — chiselled tablets on a stone shelf.
   ═══════════════════════════════════════════════════════════════════════════ */
html:not(.mob) #g5-feats{ gap:10px !important; }
html:not(.mob) .fcard{
  background-image:
    linear-gradient(180deg, rgba(246,230,180,.10), transparent 40%),
    url("plaque.jpg") !important;
  background-size:auto, cover !important;
  background-position:center, center !important;
  border:1px solid rgba(0,0,0,.6) !important;
  box-shadow:
    inset 0 1px 0 rgba(246,230,180,.20),
    inset 0 -8px 14px -8px rgba(0,0,0,.8),
    0 6px 12px -6px rgba(0,0,0,.7) !important;
  color:#e8d6ac !important;
  letter-spacing:1.1px !important;
  text-shadow:0 1px 0 rgba(0,0,0,.85) !important;
  transition:transform .14s ease, filter .14s ease, box-shadow .14s ease;
}
html:not(.mob) .fcard:hover{
  transform:translateY(-2px) !important;
  filter:brightness(1.12);
  box-shadow:
    inset 0 1px 0 rgba(246,230,180,.32),
    inset 0 -8px 14px -8px rgba(0,0,0,.75),
    0 9px 18px -6px rgba(0,0,0,.72),
    0 0 18px -6px rgba(255,196,96,.4) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   6 · THE TITLE — it floats with nothing behind it on a bright sky.
   ═══════════════════════════════════════════════════════════════════════════ */
html:not(.mob) #g5-hero{ isolation:isolate; }
html:not(.mob) #g5-hero::before{
  content:''; position:absolute; z-index:-1;
  left:50%; top:44%; width:min(1180px,86vw); height:340px;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse 50% 50% at 50% 50%, rgba(6,8,16,.62) 0%, rgba(6,8,16,.34) 46%, transparent 74%);
  pointer-events:none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   7 · REDUCED MOTION — the movers stop, the art stays lit. Never display:none
   the atmosphere: a still frame must still read as a scene.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  #g7-fog{ animation:none !important; }
  #g7-bnl, #g7-bnr{ animation:none !important; opacity:.92 !important; transform:none !important; }
  html:not(.mob) .g5-cta, html:not(.mob) .ng-tile, html:not(.mob) .fcard{ transition:none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   8 · MOBILE — the phone column is a different DOM (#mob) and the desktop stage
   is hidden there, so it only takes the cheap half: seal, divider, forged CTA.
   ═══════════════════════════════════════════════════════════════════════════ */
html.mob #g7-fog, html.mob #g7-bnl, html.mob #g7-bnr{ display:none !important; }
html.mob #mob .mcard{
  background-image:linear-gradient(180deg, rgba(246,230,180,.06), transparent 30%), url("panel-vellum.jpg") !important;
  background-size:auto, cover !important;
  box-shadow:var(--a4-lip), var(--a4-well), 0 18px 34px -14px rgba(0,0,0,.7) !important;
}
html.mob #mob .m-btn, html.mob #mob button[type=submit]{
  background-image:linear-gradient(180deg, var(--a4-gold-hi), var(--a4-gold) 46%, var(--a4-gold-lo)) !important;
  color:#2a1a06 !important;
  box-shadow:inset 0 1px 0 rgba(255,248,220,.7), 0 5px 12px -4px rgba(0,0,0,.7) !important;
}