/* ============================================================
   AGE OF NATIONS — WIDE landing gate v2 (mock 1930×815, 1:1).
   Everything decorative stays baked in bg_wide.jpg; the DOM adds
   transparent inputs, invisible hotspots (hover = backdrop glow),
   gold ticks, message overlays, modals and the mobile column.
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  background: #0a0806;
  font-family: 'Inter', sans-serif;
  overflow: hidden;
}

/* viewport: stage centered horizontally, anchored top; bottom gap = dark footer tone */
#vp {
  position: fixed; inset: 0;
  display: flex; justify-content: center; align-items: flex-start;
  /* very short windows scroll vertically instead of squashing the art
     (fit() caps the vertical stretch at ±8-10% of uniform) */
  overflow-x: hidden; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(212,175,55,.28) rgba(6,5,4,.6);
  /* the art's bottom rows are #010101 — the letterbox band below the stage must
     continue that tone or a seam line appears; edge tints only matter when side
     bars exist (very short/ultra-wide windows) and echo the art's own edges */
  background: linear-gradient(90deg, #0e0e10 0%, #020202 12%, #020202 88%, #12100c 100%);
}
#stage {
  position: relative; flex: 0 0 auto;
  width: 1930px; height: 815px;
  background: #0d0b09 url(bg_wide.jpg?v=6) top left / 1930px 815px no-repeat;
  transform-origin: top center;
  user-select: none;
}
/* large / high-DPI screens upscale the stage — feed them the 2x master so the
   baked type stays crisp (background-size keeps the 1930×815 coordinate system) */
@media (min-width: 2000px), (min-resolution: 1.2dppx) {
  #stage { background-image: url(bg_wide_2x.jpg?v=6); }
}

/* ---------------- generic hotspots ---------------- */
#stage button { font-family: inherit; cursor: pointer; }
.nhot, .lnkhot, .fcard, .sochot, .hotbtn, .eyehot, .ckhot {
  position: absolute; display: block;
  background: transparent; border: 0; padding: 0;
  border-radius: 8px;
}
.nhot:hover, .lnkhot:hover { backdrop-filter: brightness(1.35); }
.sochot { border-radius: 12px; }
.sochot:hover { backdrop-filter: brightness(1.22) saturate(1.08); }
.sochot:active { backdrop-filter: brightness(.9); }
.fcard { border-radius: 10px; }
.fcard:hover { backdrop-filter: brightness(1.13); box-shadow: inset 0 0 0 1px rgba(212,175,55,.30), 0 0 18px rgba(212,175,55,.10); }
.hotbtn { border-radius: 9px; }
.hotbtn:hover { backdrop-filter: brightness(1.18) saturate(1.05); box-shadow: 0 0 16px rgba(212,175,55,.28); }
.hotbtn:active { backdrop-filter: brightness(.9); }
.hotbtn:disabled { cursor: progress; }
.hotbtn:disabled::after {
  content: ''; position: absolute; right: 10px; top: 50%; margin-top: -8px;
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(230,193,92,.25); border-top-color: #e6c15c;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------- transparent inputs over the baked fields ---------------- */
.fld {
  position: absolute;
  background: transparent; border: 0; outline: none;
  padding: 0 10px 0 36px;
  font: 14.6px 'Crimson Text', serif; letter-spacing: .1px;
  color: #eee4d0; caret-color: #e6c15c;
  border-radius: 6px;
}
.fld.fld-eye { padding-right: 46px; }
.fld::placeholder { color: #8d8272; opacity: 1; }
.fld.re { color: #f2e2d8; }
.fld.re::placeholder { color: #97837a; }
.fld:focus { box-shadow: 0 0 0 1.5px rgba(212,175,55,.55), 0 0 14px rgba(212,175,55,.22); }
/* Chrome autofill: keep the parchment text on the dark field */
.fld:-webkit-autofill {
  -webkit-text-fill-color: #eee4d0;
  -webkit-background-clip: text;
  transition: background-color 99999s ease-in-out 0s;
}

/* password eye hotspot; .shown = gold slash over the baked eye */
.eyehot { border-radius: 6px; }
.eyehot:hover { backdrop-filter: brightness(1.3); }
.eyehot.shown::after {
  content: ''; position: absolute; left: 7px; right: 7px; top: 50%; height: 2px;
  background: #cdb27a; border-radius: 2px; transform: rotate(-18deg);
  box-shadow: 0 1px 2px rgba(0,0,0,.7);
}

/* checkbox hotspot + gold tick overlay */
.ckhot { border-radius: 6px; }
.ckhot:hover { backdrop-filter: brightness(1.3); }
.tick {
  position: absolute; z-index: 3; pointer-events: none;
  font: 700 15px 'Inter', sans-serif; color: #e6c15c;
  text-shadow: 0 0 7px rgba(230,193,92,.65), 0 1px 1px rgba(0,0,0,.8);
  opacity: 0; transform: scale(.4); transition: all .14s ease;
}
.tick.on { opacity: 1; transform: scale(1); }

/* message overlays (cover the baked "or continue with" line only while visible) */
.omsg {
  position: absolute; z-index: 4; display: none;
  align-items: center; justify-content: center; text-align: center;
  font: 600 12.5px 'Inter', sans-serif; color: #ff9d8a;
  padding: 2px 10px; border-radius: 8px; line-height: 1.15;
}
.omsg.show { display: flex; }
.omsg.ok { color: #ffd98a; }
.omsg.li.show { background: rgba(10,16,26,.94); box-shadow: 0 0 10px rgba(10,16,26,.9); }
.omsg.re.show { background: rgba(24,11,11,.94); box-shadow: 0 0 10px rgba(24,11,11,.9); }

/* ---------------- REGISTER: nation gallery (v1 recipe, wide-panel geometry) ---------------- */
.ng-cap {
  position: absolute; text-align: center;
  font: 700 16px 'Cinzel', serif; color: #eeca7a; letter-spacing: 2.2px;
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
}
.ng-sub { position: absolute; text-align: center; font: 400 11.5px 'Inter', sans-serif; color: #b39a86; letter-spacing: .3px; }
#nation-grid {
  position: absolute; overflow-y: auto; padding: 2px 8px 8px 2px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px;
  scrollbar-width: thin; scrollbar-color: #8a5a3a rgba(24,10,10,.7);
}
#nation-grid::-webkit-scrollbar { width: 8px; }
#nation-grid::-webkit-scrollbar-track { background: rgba(24,10,10,.7); border-radius: 4px; }
#nation-grid::-webkit-scrollbar-thumb { background: #8a5a3a; border-radius: 4px; }
#nation-grid.locked, #m-nation-grid.locked { pointer-events: none; opacity: .78; }
.ng-region {
  grid-column: 1 / -1; padding: 7px 2px 1px;
  font: 600 11px 'Cinzel', serif; color: #c8956a; letter-spacing: 1.6px;
  border-bottom: 1px solid rgba(200,130,80,.22);
}
.ng-tile {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 4px 5px; cursor: pointer;
  background: rgba(14,5,5,.55); border: 1px solid rgba(200,130,80,.28); border-radius: 7px;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.ng-tile img { width: 46px; height: 32px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px #000, 0 3px 9px rgba(0,0,0,.65); }
.ng-tile .nname { font: 700 10px 'Cinzel', serif; color: #ecd9b8; text-align: center; line-height: 1.15; }
.ng-tile .nperk { font: 400 8.5px 'Inter', sans-serif; color: #bd9a74; text-align: center; line-height: 1.25; }
.ng-tile:hover { border-color: #d4a02e; box-shadow: 0 0 0 1px rgba(212,160,46,.55), 0 0 16px rgba(212,160,46,.28); transform: translateY(-1px); }
.ng-tile.sel { border-color: #ffd860; box-shadow: 0 0 0 2px rgba(255,216,96,.8), 0 0 22px rgba(255,206,63,.45); }
/* last-row span helpers: no holes whatever the region count is */
.ng-tile.ng-sp2 { grid-column: span 2; }
.ng-tile.ng-sp3 { grid-column: span 3; }
.ng-tile.ng-wide { grid-column: 1 / -1; }
.ng-random {
  grid-column: 1 / -1; justify-content: center;
  font: 700 12.5px 'Cinzel', serif; color: #eeca7a; letter-spacing: 1.4px; padding: 12px 6px;
}
.ng-random:hover { color: #ffd860; }
.ng-tos { position: absolute; text-align: center; font: 400 10px 'Inter', sans-serif; color: #8d7a68; }

/* mobile gallery (inside .mcard.red) */
.m-ngcap { text-align: center; font: 700 15px 'Cinzel', serif; color: #eeca7a; letter-spacing: 2px; margin: 6px 0 2px; }
.m-ngsub { text-align: center; font: 400 12px 'Inter', sans-serif; color: #b39a86; margin-bottom: 10px; }
#m-nation-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#m-nation-grid .ng-tile { padding: 12px 8px 10px; border-radius: 10px; }
#m-nation-grid .ng-tile img { width: 76px; height: 52px; }
#m-nation-grid .ng-tile .nname { font-size: 13.5px; }
#m-nation-grid .ng-tile .nperk { font-size: 11px; }
#m-nation-grid .ng-region { font-size: 11.5px; padding-top: 10px; }
.m-ngtos { text-align: center; font: 400 11px 'Inter', sans-serif; color: #8d7a68; margin: 10px 0 2px; }

/* feature strip pulse (nav FEATURES) */
#feat-glow {
  position: absolute; left: 168px; top: 612px; width: 1596px; height: 124px;
  border-radius: 12px; pointer-events: none; opacity: 0;
}
#feat-glow.pulse { animation: featPulse 1.8s ease; }
@keyframes featPulse {
  0%, 100% { opacity: 0; box-shadow: 0 0 0 rgba(212,175,55,0); }
  25%, 65% { opacity: 1; box-shadow: 0 0 0 2px rgba(212,175,55,.55), 0 0 34px rgba(212,175,55,.30), inset 0 0 26px rgba(212,175,55,.12); }
}

/* ---------------- modals + toast ---------------- */
.modal {
  position: fixed; inset: 0; z-index: 200; display: none;
  align-items: center; justify-content: center;
  background: rgba(4,3,2,.72); backdrop-filter: blur(6px);
}
.modal.open { display: flex; }
.mbox {
  position: relative; width: min(430px, 92vw);
  background: linear-gradient(170deg, #171d2a 0%, #0e1119 100%);
  border: 1px solid rgba(212,175,55,.45); border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0,0,0,.75), 0 0 40px rgba(212,175,55,.12);
  padding: 26px 26px 22px; text-align: center;
}
.mbox::before {
  content: ''; position: absolute; left: 18px; right: 18px; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,.9), transparent);
}
.mbox h3 {
  font: 700 19px 'Cinzel', serif; letter-spacing: 2px; color: #e9d9ab; margin-bottom: 8px;
  text-shadow: 0 1px 2px rgba(0,0,0,.7);
}
.mbox p { font: 14px/1.5 'Crimson Text', serif; color: #b4a98f; margin-bottom: 14px; }
.mbox input {
  width: 100%; height: 44px; margin-bottom: 10px; padding: 0 14px;
  background: rgba(8,10,16,.85); border: 1px solid rgba(212,175,55,.30); border-radius: 9px;
  font: 15px 'Crimson Text', serif; color: #eee4d0; outline: none;
}
.mbox input:focus { border-color: rgba(212,175,55,.75); box-shadow: 0 0 12px rgba(212,175,55,.22); }
.mx {
  position: absolute; right: 10px; top: 10px; width: 30px; height: 30px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px; color: #cbbfa4; font-size: 13px; cursor: pointer;
}
.mx:hover { background: rgba(255,255,255,.12); color: #fff; }

.mbtn {
  display: block; width: 100%; height: 46px; border: 1px solid rgba(212,175,55,.55);
  border-radius: 10px; cursor: pointer;
  font: 700 14px 'Cinzel', serif; letter-spacing: 2.5px; color: #f3e6c2;
  text-shadow: 0 1px 2px rgba(0,0,0,.8);
  box-shadow: 0 6px 18px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.14);
}
.mbtn.navy { background: linear-gradient(180deg, #23375e 0%, #142138 100%); }
.mbtn.navy:hover { background: linear-gradient(180deg, #2b4372 0%, #182845 100%); box-shadow: 0 6px 22px rgba(35,60,110,.55); }
.mbtn.red { background: linear-gradient(180deg, #7c1f22 0%, #4b1013 100%); }
.mbtn.red:hover { background: linear-gradient(180deg, #93262a 0%, #5a1418 100%); box-shadow: 0 6px 22px rgba(140,35,40,.5); }
.mbtn:disabled { opacity: .6; cursor: progress; }

.mmsg { min-height: 18px; margin-top: 8px; font: 600 12.5px 'Inter', sans-serif; color: #ff9d8a; }
.mmsg.ok { color: #ffd98a; }

#toast {
  position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%) translateY(80px);
  z-index: 300; max-width: min(520px, 92vw);
  background: linear-gradient(170deg, #1b2231 0%, #101420 100%);
  border: 1px solid rgba(212,175,55,.55); border-radius: 12px;
  padding: 12px 22px; text-align: center;
  font: 600 13.5px 'Inter', sans-serif; color: #efe3c4;
  box-shadow: 0 16px 44px rgba(0,0,0,.6), 0 0 26px rgba(212,175,55,.14);
  opacity: 0; pointer-events: none; transition: all .3s cubic-bezier(.2,.9,.3,1.2);
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================
   MOBILE (html.mob): stage hidden, scroll column with real cards
   ============================================================ */
#mob { display: none; }
html.mob body { overflow: auto; }
html.mob #vp { display: none; }
html.mob #mob { display: block; position: relative; min-height: 100%; padding: 14px 14px 30px; }

/* crisp art backdrop (outpainted army wing — no baked UI) + soft darkening.
   z-index 0 + content z-index 1: body backgrounds otherwise paint over a -1 layer */
#mob .bgm {
  position: fixed; inset: 0; z-index: 0;
  background: #0b0a08 url(../login/ext_r.png) 50% 18% / cover no-repeat;
  filter: brightness(1.12) saturate(1.16);
}
#mob .bgm::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,6,4,.10) 0%, rgba(8,6,4,.26) 40%, rgba(8,6,4,.62) 100%);
}
#mob > :not(.bgm) { position: relative; z-index: 1; }

#mob .m-hero { text-align: center; margin: 6px 0 10px; }
#mob .m-hero img { width: min(440px, 92%); height: auto; filter: drop-shadow(0 10px 30px rgba(0,0,0,.65)); }

.mcard {
  max-width: 460px; margin: 0 auto 16px; padding: 20px 18px 16px;
  border-radius: 16px;
  background: rgba(13,17,26,.74);
  border: 1px solid rgba(212,175,55,.38);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 18px 50px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
}
.mcard.red { background: rgba(26,12,12,.74); border-color: rgba(212,120,70,.40); }
.mcard h2 {
  font: 700 22px 'Cinzel', serif; letter-spacing: 3px; color: #ecd9a8; text-align: center;
  text-shadow: 0 2px 4px rgba(0,0,0,.8);
}
.mcard .msub {
  font: 600 10.5px 'Inter', sans-serif; letter-spacing: 1.6px; color: #9d917a;
  text-align: center; margin: 3px 0 14px;
}
.mf { position: relative; display: block; margin-bottom: 10px; }
.mf .mi {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  font-size: 15px; opacity: .75; pointer-events: none;
}
.mf input {
  width: 100%; height: 48px; padding: 0 46px 0 40px;
  background: rgba(8,10,16,.82); border: 1px solid rgba(212,175,55,.30); border-radius: 11px;
  font: 16px 'Crimson Text', serif; color: #eee4d0; outline: none;
}
.mcard.red .mf input { background: rgba(16,7,7,.82); border-color: rgba(212,120,70,.34); }
.mf input:focus { border-color: rgba(212,175,55,.8); box-shadow: 0 0 12px rgba(212,175,55,.25); }
.meye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; background: transparent; border: 0;
  font-size: 17px; color: #af9f7d; cursor: pointer; opacity: .85;
}
.meye.shown { color: #e6c15c; text-shadow: 0 0 8px rgba(230,193,92,.7); }
.mrow { display: flex; align-items: center; justify-content: space-between; margin: 2px 1px 12px; }
.mchk { display: flex; align-items: center; gap: 8px; font: 13px 'Inter', sans-serif; color: #c9bda1; cursor: pointer; }
.mchk input { display: none; }
.mchk i {
  width: 19px; height: 19px; flex: 0 0 19px; border-radius: 5px;
  border: 1px solid rgba(212,175,55,.5); background: rgba(8,10,16,.8); position: relative;
}
.mchk input:checked + i::after {
  content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font: 700 13px 'Inter', sans-serif; color: #e6c15c; text-shadow: 0 0 6px rgba(230,193,92,.6);
}
.mchk.agree { margin: 2px 1px 12px; line-height: 1.35; }
.mchk.agree b { color: #e0c179; font-weight: 600; }
.mlink { background: none; border: 0; font: 13px 'Inter', sans-serif; color: #d9b96a; cursor: pointer; }
.mlink:hover { color: #ffe49a; }
.mbtn + .mmsg { text-align: center; }

.m-feats { max-width: 460px; margin: 4px auto 0; display: grid; gap: 9px; }
.mft {
  padding: 11px 14px; border-radius: 12px;
  background: rgba(13,15,22,.66); border: 1px solid rgba(255,255,255,.08);
  border-left: 3px solid rgba(212,175,55,.75);
  backdrop-filter: blur(10px);
}
.mft b { display: block; font: 700 13.5px 'Inter', sans-serif; color: #ecdcae; letter-spacing: .4px; }
.mft span { font: 12px/1.45 'Inter', sans-serif; color: #a99e86; }
.m-copy { text-align: center; margin: 18px 0 4px; font: 11.5px 'Inter', sans-serif; color: #7d7460; }