/* ================= MAGNETFOLIO PREMIUM ================= */

*{ box-sizing:border-box; }

:root{
  --bg:#06070d;
  --bg2:#0b1020;
  --panel:rgba(255,255,255,.075);
  --panel2:rgba(255,255,255,.105);
  --line:rgba(255,255,255,.12);
  --gold:#f5c451;
  --gold2:#ffe39a;
  --text:#f7f3ea;
  --muted:#a9afc4;
  --blue:#48a6ff;
  --green:#77f0b6;
}

html{ scroll-behavior:smooth; }

body{
  margin:0;
  min-height:100vh;
  font-family:Inter, Arial, sans-serif;
  background:
    radial-gradient(circle at 15% 10%, rgba(72,166,255,.18), transparent 32%),
    radial-gradient(circle at 80% 0%, rgba(245,196,81,.14), transparent 28%),
    linear-gradient(180deg,#05060b 0%,#0a1020 48%,#05060b 100%);
  color:var(--text);
  padding-bottom:120px;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size:54px 54px;
  mask-image:linear-gradient(to bottom, black, transparent 80%);
  z-index:-1;
}

button,input{ font:inherit; }
button{ cursor:pointer; }
img{ max-width:100%; display:block; }

.app-header, header{
  position:sticky;
  top:0;
  z-index:999;
  padding:16px 28px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
  background:rgba(6,7,13,.78);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);
}

header h1{
  margin:0;
  font-size:30px;
  letter-spacing:-1.5px;
  background:linear-gradient(135deg,#fff,#f2c761);
  -webkit-background-clip:text;
  color:transparent;
}

#tagline{
  margin:4px 0 0;
  font-size:12px;
  color:var(--muted);
  letter-spacing:.06em;
  text-transform:uppercase;
}

.header-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:10px;
  max-width:820px;
}

.nav-btn,.primary-cta,.secondary-cta,.danger-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:none;
  border-radius:999px;
  padding:11px 16px;
  font-weight:800;
  text-decoration:none;
  color:#14110a;
  background:linear-gradient(135deg,var(--gold2),var(--gold));
  box-shadow:0 12px 34px rgba(245,196,81,.18);
  cursor:pointer;
}

.secondary-cta,.nav-btn{
  color:var(--text);
  background:rgba(255,255,255,.08);
  border:1px solid var(--line);
  box-shadow:none;
}

.nav-btn:hover,.secondary-cta:hover{
  background:rgba(255,255,255,.15);
  transform:translateY(-1px);
}

.nav-btn.active{
  color:#1a1100;
  background:linear-gradient(135deg,#fff0a8,#f5c451 52%,#ff9f1c);
  border-color:rgba(255,218,108,.65);
  box-shadow:0 14px 36px rgba(245,196,81,.22);
}

.primary-cta:hover,.danger-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 20px 44px rgba(245,196,81,.26);
}

.danger-btn{
  margin-top:12px;
  background:linear-gradient(135deg,#ffb3b3,#ff6d6d);
}

/* ================= HERO ================= */

main{ max-width:1500px; margin:0 auto; padding:0 22px; }

.hero{
  padding:70px 0 36px;
}

.hero-layout{
  min-height:520px;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);
  gap:40px;
  align-items:center;
}

.hero-copy{
  padding:44px;
  border:1px solid var(--line);
  border-radius:34px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.035)),
    radial-gradient(circle at 0 0,rgba(245,196,81,.18),transparent 38%);
  box-shadow:0 30px 90px rgba(0,0,0,.38);
}

.hero-kicker,.section-kicker,.panel-kicker{
  color:var(--gold2);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:12px;
  font-weight:900;
}

.hero h2{
  font-size:clamp(42px,5.8vw,84px);
  line-height:.95;
  letter-spacing:-4px;
  margin:14px 0 24px;
}

.hero p,.section-title p,.city-hero p,.vault-hero p{
  color:var(--muted);
  line-height:1.8;
  font-size:17px;
}

.search-shell{
  position:relative;
  max-width:560px;
  margin:28px 0 0;
}

#searchInput{
  width:100%;
  padding:18px 22px;
  border:none;
  border-radius:20px;
  color:var(--text);
  background:rgba(255,255,255,.10);
  outline:1px solid var(--line);
}

#searchInput::placeholder{ color:#818ba8; }

.search-results{
  display:none;
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  right:0;
  background:rgba(10,13,24,.98);
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 28px 70px rgba(0,0,0,.55);
  z-index:50;
}

.search-item{
  padding:14px 16px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid rgba(255,255,255,.06);
  color:var(--text);
  cursor:pointer;
}

.search-item span{ color:var(--muted); }
.search-item:hover{ background:rgba(245,196,81,.12); }

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:22px;
}

.hero-stats{
  margin-top:24px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

.hero-stats div,.collection-stats div{
  padding:18px;
  border-radius:24px;
  background:rgba(255,255,255,.065);
  border:1px solid var(--line);
  text-align:center;
}

.hero-stats strong,.collection-stats strong{
  display:block;
  font-size:30px;
  color:var(--gold2);
}

.hero-stats span,.collection-stats span{
  display:block;
  color:var(--muted);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.12em;
}

/* ================= PREMIUM GLOBE ================= */

.premium-globe{
  position:relative;
  width:min(480px,86vw);
  aspect-ratio:1;
  margin:auto;
  display:grid;
  place-items:center;
  filter:drop-shadow(0 0 50px rgba(72,166,255,.20));
}

.globe-atmosphere{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:radial-gradient(circle,rgba(72,166,255,.25),transparent 68%);
  animation:pulseGlow 4.2s ease-in-out infinite;
}

.globe-sphere{
  position:absolute;
  inset:10%;
  overflow:hidden;
  border-radius:50%;
  background:
    radial-gradient(circle at 28% 22%,rgba(255,255,255,.95),transparent 8%),
    radial-gradient(circle at 35% 32%,rgba(112,221,255,.65),transparent 20%),
    linear-gradient(120deg,#0b2c70 0%,#075ca7 48%,#02214b 100%);
  box-shadow:
    inset -46px -36px 75px rgba(0,0,0,.55),
    inset 18px 12px 34px rgba(255,255,255,.18),
    0 0 0 1px rgba(255,255,255,.12),
    0 0 70px rgba(72,166,255,.22);
  animation:rotateGlobe 16s linear infinite;
}

.globe-sphere::before{
  content:"";
  position:absolute;
  inset:-20% -60%;
  background:
    radial-gradient(ellipse at 20% 30%,rgba(75,151,87,.95) 0 8%,transparent 9%),
    radial-gradient(ellipse at 33% 46%,rgba(46,128,79,.95) 0 6%,transparent 7%),
    radial-gradient(ellipse at 48% 38%,rgba(93,161,83,.95) 0 12%,transparent 13%),
    radial-gradient(ellipse at 64% 53%,rgba(80,143,80,.95) 0 14%,transparent 15%),
    radial-gradient(ellipse at 76% 73%,rgba(185,147,74,.95) 0 6%,transparent 7%);
  filter:blur(.2px);
  opacity:.86;
  animation:driftContinents 16s linear infinite;
}

.globe-sphere::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    linear-gradient(90deg,transparent 48%,rgba(255,255,255,.10) 49%,transparent 50%),
    repeating-linear-gradient(0deg,transparent 0 26px,rgba(255,255,255,.07) 27px,transparent 28px);
  opacity:.45;
  mix-blend-mode:screen;
}

.continent{ display:none; }

.globe-grid-line{
  position:absolute;
  inset:8%;
  border:1px solid rgba(255,255,255,.13);
  border-radius:50%;
}
.line-one{ transform:rotateY(50deg); }
.line-two{ transform:rotateX(55deg); }
.line-three{ transform:rotate(32deg) scale(.75); }

.globe-pins{
  position:absolute;
  inset:10%;
  border-radius:50%;
  overflow:hidden;
  pointer-events:none;
}

.globe-pin{
  position:absolute;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--gold2);
  box-shadow:0 0 0 4px rgba(245,196,81,.18),0 0 18px rgba(245,196,81,.75);
  transform:translate(-50%,-50%);
  animation:pinPulse 2.2s infinite;
}

.globe-focus{ animation:globeFocus .7s ease; }

@keyframes rotateGlobe{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}
@keyframes driftContinents{
  from{ transform:translateX(0); }
  to{ transform:translateX(-28%); }
}
@keyframes pulseGlow{
  50%{ transform:scale(1.04); opacity:.75; }
}
@keyframes pinPulse{
  50%{ transform:translate(-50%,-50%) scale(1.55); opacity:.85; }
}
@keyframes globeFocus{
  50%{ transform:scale(1.08); }
}

/* ================= MAP ================= */

.section-title{
  margin:64px auto 24px;
  max-width:900px;
  text-align:center;
}

.section-title h2{
  margin:8px 0 8px;
  font-size:clamp(34px,4vw,58px);
  letter-spacing:-2px;
}

.map-panel{
  padding:28px;
  border:1px solid var(--line);
  border-radius:34px;
  background:linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.035));
  box-shadow:0 28px 80px rgba(0,0,0,.32);
}

.map-stage{
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px;
  gap:24px;
  align-items:stretch;
}

.visual-world-map{
  position:relative;
  min-height:560px;
  border-radius:30px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 42%,rgba(72,166,255,.13),transparent 38%),
    linear-gradient(180deg,#07111f,#05070d);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 0 80px rgba(0,0,0,.50);
}

.visual-world-map::before{
  content:"";
  position:absolute;
  inset:18px;
  border-radius:24px;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:42px 42px;
  opacity:.5;
}

.visual-world-map::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 50%,transparent 42%,rgba(0,0,0,.35));
  pointer-events:none;
}

.continent-shape{
  position:absolute;
  background:linear-gradient(135deg,rgba(50,92,87,.60),rgba(34,64,76,.34));
  border:1px solid rgba(255,255,255,.045);
  filter:blur(.2px);
  opacity:.75;
  box-shadow:inset 0 0 28px rgba(0,0,0,.34);
}

.north-america{ width:25%; height:24%; left:11%; top:20%; border-radius:48% 38% 58% 42%; transform:rotate(-13deg); }
.south-america{ width:12%; height:28%; left:31%; top:51%; border-radius:55% 44% 42% 65%; transform:rotate(19deg); }
.europe{ width:13%; height:12%; left:48%; top:26%; border-radius:50% 45% 40% 50%; }
.africa{ width:17%; height:28%; left:49%; top:40%; border-radius:45% 48% 52% 55%; transform:rotate(-6deg); }
.asia{ width:31%; height:32%; left:61%; top:24%; border-radius:45% 52% 48% 44%; transform:rotate(4deg); }
.australia{ width:12%; height:9%; left:78%; top:68%; border-radius:46%; transform:rotate(8deg); }

.map-dot{
  position:absolute;
  width:12px;
  height:12px;
  border:none;
  border-radius:50%;
  background:#84b8ff;
  transform:translate(-50%,-50%);
  z-index:10;
  box-shadow:0 0 0 5px rgba(132,184,255,.13),0 0 18px rgba(132,184,255,.5);
  transition:.2s ease;
}

.map-dot span{
  position:absolute;
  inset:-7px;
  border-radius:50%;
  border:1px solid rgba(132,184,255,.24);
  animation:mapPing 2.8s infinite;
}

.map-dot:hover{
  width:18px;
  height:18px;
  background:white;
  box-shadow:0 0 0 8px rgba(255,255,255,.16),0 0 28px rgba(255,255,255,.62);
}

.map-dot.collected{
  background:var(--gold2);
  box-shadow:0 0 0 6px rgba(245,196,81,.17),0 0 28px rgba(245,196,81,.72);
}

.map-dot.collected span{ border-color:rgba(245,196,81,.35); }

@keyframes mapPing{
  70%{ transform:scale(2.2); opacity:0; }
  100%{ opacity:0; }
}

.scratch-world-map .continent-shape{
  background:linear-gradient(135deg,rgba(72,77,88,.74),rgba(25,30,42,.62));
}

.scratch-world-map .map-dot:not(.collected){
  background:#515b70;
  box-shadow:0 0 0 4px rgba(255,255,255,.05);
}

.scratch-world-map .map-dot.collected{
  background:var(--gold2);
}

.country-panel{
  position:relative;
  padding:24px;
  border-radius:28px;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.05));
  border:1px solid var(--line);
  overflow:auto;
  max-height:560px;
  box-shadow:inset 0 0 40px rgba(245,196,81,.04);
}

.panel-close{
  position:absolute;
  right:14px;
  top:14px;
  width:36px;
  height:36px;
  border:none;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  color:white;
  font-size:22px;
}

.country-panel h3{
  font-size:34px;
  letter-spacing:-1px;
  margin:12px 0 8px;
}

.country-panel p{ color:var(--muted); line-height:1.65; }

.progress-line{
  display:flex;
  justify-content:space-between;
  gap:18px;
  color:var(--muted);
  font-size:13px;
  margin:18px 0 8px;
}

.progress-line strong{ color:var(--gold2); }

.progress-bar{
  height:9px;
  border-radius:999px;
  background:rgba(255,255,255,.09);
  overflow:hidden;
  margin-bottom:18px;
}

.progress-bar span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--gold),var(--gold2));
}

.country-cities{
  display:grid;
  gap:10px;
}

.country-city{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:13px;
  border-radius:16px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.08);
  cursor:pointer;
}

.country-city:hover{
  background:rgba(245,196,81,.12);
  transform:translateY(-1px);
}

.country-city strong{ display:block; }
.country-city span,.country-city small{
  display:block;
  color:var(--muted);
  margin-top:3px;
}
.country-city em{
  color:var(--gold2);
  font-style:normal;
  font-size:12px;
}

/* ================= CATALOG ================= */

.continent-group{
  margin:34px 0;
}

.continent-heading{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:18px;
  margin-bottom:14px;
  padding:0 4px;
}

.continent-heading h3{
  font-size:28px;
  margin:0;
}
.continent-heading span{
  color:var(--muted);
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.12em;
}

.continent-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:14px;
}

.city-card{
  border:none;
  border-radius:22px;
  padding:12px;
  text-align:left;
  background:rgba(255,255,255,.075);
  color:var(--text);
  border:1px solid rgba(255,255,255,.09);
  display:grid;
  grid-template-columns:74px 1fr;
  gap:12px;
  align-items:center;
  min-height:100px;
}

.city-card:hover{
  transform:translateY(-3px);
  background:rgba(255,255,255,.12);
  box-shadow:0 18px 44px rgba(0,0,0,.30);
}

.city-thumb{
  width:74px;
  height:74px;
  border-radius:17px;
  overflow:hidden;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}

.city-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.city-card strong{
  display:block;
  font-size:18px;
  margin-bottom:5px;
}

.city-card small{
  color:var(--muted);
}

/* ================= CITY + MAGNET CARDS ================= */

.city-hero{
  margin:40px auto 30px;
  text-align:center;
  padding:70px 24px;
  border-radius:34px;
  border:1px solid var(--line);
  background:
    radial-gradient(circle at 50% 0,rgba(245,196,81,.18),transparent 40%),
    rgba(255,255,255,.06);
}

.city-hero h1{
  font-size:clamp(48px,8vw,110px);
  line-height:.9;
  letter-spacing:-5px;
  margin:0;
  background:linear-gradient(135deg,#fff,#f4c451);
  -webkit-background-clip:text;
  color:transparent;
}

.grid,.vault-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:22px;
  margin:30px 0 80px;
}

.magnet-card{
  padding:14px;
  border-radius:28px;
  background:linear-gradient(180deg,rgba(255,255,255,.105),rgba(255,255,255,.045));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 18px 45px rgba(0,0,0,.28);
  overflow:hidden;
}

.magnet-card:hover{
  transform:translateY(-4px);
  box-shadow:0 28px 70px rgba(0,0,0,.40);
}

.magnet-card img{
  width:100%;
  aspect-ratio:1.22/1;
  object-fit:cover;
  object-position:center;
  border-radius:20px;
  background:#111;
  border:1px solid rgba(255,255,255,.12);
}

.magnet-card p{
  margin:12px 4px 8px;
  font-weight:800;
}

.magnet-badge{
  display:inline-flex;
  margin:0 4px 8px;
  padding:6px 10px;
  border-radius:999px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#111;
  background:linear-gradient(135deg,var(--gold2),var(--gold));
  font-weight:900;
}

.magnet-card button{
  width:100%;
  margin-top:8px;
  border:none;
  border-radius:15px;
  padding:12px 14px;
  font-weight:900;
  color:#111;
  background:linear-gradient(135deg,var(--gold2),var(--gold));
}

.magnet-card .gift-btn{
  background:rgba(255,255,255,.10);
  border:1px solid var(--line);
  color:var(--text);
}

.locked-card{
  opacity:.68;
  filter:saturate(.65);
}

/* ================= COLLECTION ================= */

.collection-container{
  padding-top:36px;
}

.vault-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px;
  gap:30px;
  align-items:center;
  padding:40px;
  border-radius:34px;
  border:1px solid var(--line);
  background:
    radial-gradient(circle at 80% 20%,rgba(72,166,255,.16),transparent 32%),
    radial-gradient(circle at 10% 0,rgba(245,196,81,.16),transparent 28%),
    rgba(255,255,255,.065);
}

.vault-hero h2{
  font-size:clamp(42px,5vw,76px);
  line-height:1;
  margin:12px 0 18px;
  letter-spacing:-3px;
}

.vault-globe{
  width:min(330px,80vw);
}

.collection-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin:24px 0;
}

.achievement-box,.recommendations-box,.progress{
  padding:20px;
  border-radius:24px;
  background:rgba(255,255,255,.075);
  border:1px solid var(--line);
  margin:16px 0;
}

.recommendation-tags{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.recommendation-tags span{
  padding:8px 12px;
  border-radius:999px;
  background:rgba(245,196,81,.12);
  border:1px solid rgba(245,196,81,.18);
  color:var(--gold2);
  cursor:pointer;
}

.empty-state{
  grid-column:1/-1;
  text-align:center;
  padding:40px;
  border-radius:28px;
  background:rgba(255,255,255,.07);
  border:1px solid var(--line);
}

.empty-state button{
  border:none;
  border-radius:999px;
  padding:12px 18px;
  background:linear-gradient(135deg,var(--gold2),var(--gold));
  font-weight:900;
}

/* ================= MODALS + TOAST ================= */

.collect-animation{
  position:fixed;
  left:50%;
  bottom:110px;
  transform:translateX(-50%) translateY(30px);
  padding:14px 20px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--gold2),var(--gold));
  color:#111;
  font-weight:900;
  opacity:0;
  pointer-events:none;
  z-index:2000;
  box-shadow:0 18px 50px rgba(0,0,0,.38);
  transition:.25s ease;
}

.collect-animation.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

.unlock-popup{
  position:fixed;
  right:24px;
  bottom:96px;
  width:min(380px,calc(100vw - 40px));
  padding:22px;
  border-radius:24px;
  background:rgba(8,10,18,.95);
  border:1px solid rgba(245,196,81,.25);
  box-shadow:0 28px 80px rgba(0,0,0,.55);
  transform:translateY(30px);
  opacity:0;
  z-index:1999;
  transition:.3s ease;
}

.unlock-popup.show{
  opacity:1;
  transform:translateY(0);
}

.unlock-popup h2{ margin:0 0 8px; }
.unlock-popup p{ color:var(--muted); margin:0; }

.magnet-modal{
  position:fixed;
  inset:0;
  display:none;
  place-items:center;
  z-index:2000;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(8px);
}

.magnet-modal.show{ display:grid; }

.modal-content{
  width:min(430px,90vw);
  padding:16px;
  position:relative;
  border-radius:28px;
  background:#0b1020;
  border:1px solid var(--line);
}

.modal-content img{
  width:100%;
  max-height:68vh;
  object-fit:contain;
  border-radius:18px;
  background:#05070d;
}

footer{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  padding:18px 20px;
  display:flex;
  justify-content:center;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.72));
  z-index:900;
}

#walletBtn{
  border:none;
  border-radius:999px;
  padding:14px 24px;
  background:linear-gradient(135deg,var(--gold2),var(--gold));
  color:#111;
  font-weight:900;
  box-shadow:0 18px 46px rgba(245,196,81,.22);
}

/* ================= RESPONSIVE ================= */

@media (max-width:980px){
  .hero-layout,.map-stage,.vault-hero{
    grid-template-columns:1fr;
  }

  .premium-globe{
    width:min(420px,88vw);
  }

  .visual-world-map{
    min-height:430px;
  }

  .collection-stats,.hero-stats{
    grid-template-columns:repeat(2,1fr);
  }

  .hero-copy,.vault-hero{
    padding:28px;
  }
}

@media (max-width:640px){
  .app-header{
    padding:14px 16px;
    align-items:flex-start;
    gap:12px;
  }

  .header-actions{
    justify-content:flex-start;
    gap:7px;
    width:100%;
    max-width:none;
  }

  .nav-btn{
    min-height:34px;
    padding:8px 11px;
    font-size:12px;
  }

  header h1{
    font-size:24px;
  }

  .hero h2,.vault-hero h2{
    letter-spacing:-2px;
  }

  .continent-grid,.grid,.vault-grid{
    grid-template-columns:1fr;
  }

  .collection-stats,.hero-stats{
    grid-template-columns:1fr;
  }

  .map-panel{
    padding:14px;
    border-radius:26px;
  }

  .visual-world-map{
    min-height:360px;
  }
}


/* ===== PREMIUM GLOBE + MAP ===== */

.premium-world-section{
  margin:40px auto 20px;
  width:min(1400px,92%);
}

.world-hero{
  display:grid;
  grid-template-columns:420px 1fr;
  gap:40px;
  align-items:center;
  margin-bottom:28px;
}

.globe-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
}

.premium-globe{
  width:320px;
  height:320px;
  border-radius:50%;
  position:relative;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.35), transparent 20%),
    url('https://upload.wikimedia.org/wikipedia/commons/8/80/World_map_-_low_resolution.svg');
  background-size:cover;
  background-position:center;
  box-shadow:
    0 0 50px rgba(72,166,255,.35),
    inset -40px -30px 80px rgba(0,0,0,.7);
  animation:spinGlobe 35s linear infinite;
  overflow:hidden;
}

.globe-shine{
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, transparent 20%, rgba(255,255,255,.18), transparent 70%);
}

@keyframes spinGlobe{
  from{ background-position:0 center; }
  to{ background-position:1000px center; }
}

.world-copy h2{
  font-size:56px;
  margin:0 0 12px;
  color:#fff;
}

.world-copy p{
  color:#b7bfd3;
  font-size:18px;
  max-width:700px;
  line-height:1.7;
}

.world-stats{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  margin-top:28px;
}

.stat-card{
  padding:18px 22px;
  border-radius:22px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(14px);
  min-width:150px;
}

.stat-number{
  display:block;
  font-size:24px;
  font-weight:700;
  color:#f5c451;
}

.stat-label{
  color:#c2c8d7;
  font-size:14px;
}

.world-map-panel{
  position:relative;
  height:360px;
  border-radius:30px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(rgba(7,11,22,.92), rgba(7,11,22,.92)),
    url('https://upload.wikimedia.org/wikipedia/commons/8/80/World_map_-_low_resolution.svg');
  background-size:cover;
  background-position:center;
  box-shadow:0 20px 60px rgba(0,0,0,.4);
}

.map-point{
  position:absolute;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#f5c451;
  box-shadow:0 0 20px #f5c451;
}

.p1{ top:33%; left:18%; }
.p2{ top:27%; left:48%; }
.p3{ top:40%; left:71%; }
.p4{ top:58%; left:30%; }
.p5{ top:63%; left:58%; }
.p6{ top:22%; left:78%; }
.p7{ top:46%; left:84%; }
.p8{ top:37%; left:55%; }

@media(max-width:900px){
  .world-hero{
    grid-template-columns:1fr;
    text-align:center;
  }

  .world-copy h2{
    font-size:42px;
  }

  .premium-globe{
    width:240px;
    height:240px;
  }

  .world-stats{
    justify-content:center;
  }
}


/* ===== FINAL SAFE PREMIUM FIXES ===== */

/* real visible map layer */
.visual-world-map{
  background:
    radial-gradient(circle at 50% 45%, rgba(72,166,255,.13), transparent 42%),
    linear-gradient(180deg,#07111f,#040812) !important;
}

.world-map-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.72;
  filter: drop-shadow(0 0 18px rgba(72,166,255,.18));
  z-index:1;
  pointer-events:none;
}

.visual-world-map .continent-shape{
  display:none !important;
}

.map-dot{
  z-index:8 !important;
}

/* richer globe: still CSS-only/local, but no longer a plain blue ball */
.globe-sphere{
  background:
    radial-gradient(circle at 28% 22%,rgba(255,255,255,.90),transparent 7%),
    linear-gradient(110deg,rgba(0,0,0,.15),rgba(255,255,255,.08),rgba(0,0,0,.25)),
    url('worldmap.svg'),
    linear-gradient(120deg,#06204a 0%,#075f9d 48%,#020b1e 100%) !important;
  background-size: auto, auto, 190% 100%, auto !important;
  background-position:center, center, 0 center, center !important;
  animation: globeTextureMove 42s linear infinite !important;
  box-shadow:
    inset -56px -42px 90px rgba(0,0,0,.68),
    inset 22px 14px 38px rgba(255,255,255,.18),
    0 0 0 1px rgba(255,255,255,.16),
    0 0 85px rgba(72,166,255,.30) !important;
}

.globe-sphere::before{
  opacity:.18 !important;
}

@keyframes globeTextureMove{
  from{ background-position:center, center, 0 center, center; }
  to{ background-position:center, center, 900px center, center; }
}

/* keep all magnet art visible: no accidental crop in cards */
.magnet-card img{
  object-fit:contain !important;
  background:#05070d !important;
  padding:4px;
}

.city-thumb img{
  object-fit:cover !important;
  padding:0 !important;
}

/* more premium country panel over the map */
.country-panel{
  backdrop-filter: blur(20px);
  background:rgba(6,10,20,.82) !important;
  border:1px solid rgba(245,196,81,.18) !important;
}

/* catalog gets dense but elegant with 200+ magnets */
.continent-grid{
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr)) !important;
}

.city-card{
  min-height:92px;
}


/* ===== SUCCESS UPGRADE: premium polish without changing core structure ===== */

.premium-collection-rail{
  width:min(1400px,92%);
  margin:22px auto 34px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
}

.premium-collection-rail button{
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  color:#f5f7ff;
  padding:12px 18px;
  border-radius:999px;
  cursor:pointer;
  font-weight:700;
  letter-spacing:.2px;
  box-shadow:0 12px 30px rgba(0,0,0,.18);
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.premium-collection-rail button:hover{
  transform:translateY(-3px);
  border-color:rgba(245,196,81,.55);
  box-shadow:0 18px 42px rgba(245,196,81,.13);
}

.magnet-card,
.city-card,
.vault-card{
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease, filter .28s ease;
  will-change:transform;
}

.magnet-card:hover,
.city-card:hover,
.vault-card:hover{
  transform:translateY(-7px) scale(1.012);
  box-shadow:0 24px 60px rgba(0,0,0,.42), 0 0 34px rgba(245,196,81,.10);
  border-color:rgba(245,196,81,.35);
}

.magnet-card img,
.city-thumb img,
.vault-card img{
  transition:transform .38s ease, filter .38s ease;
}

.magnet-card:hover img,
.city-card:hover .city-thumb img,
.vault-card:hover img{
  transform:scale(1.045);
  filter:saturate(1.06) contrast(1.04);
}

.vault-experience{
  background:
    radial-gradient(circle at top left,rgba(245,196,81,.08),transparent 28%),
    radial-gradient(circle at top right,rgba(77,145,255,.08),transparent 30%);
}

.vault-identity-strip{
  width:min(1350px,94%);
  margin:24px auto 34px;
  padding:28px;
  border-radius:32px;
  display:grid;
  grid-template-columns:1fr 330px;
  gap:22px;
  align-items:center;
  background:linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 22px 70px rgba(0,0,0,.34);
  backdrop-filter:blur(16px);
}

.vault-identity-strip h2{
  margin:8px 0 8px;
  font-size:38px;
}

.vault-identity-strip p{
  color:#b9c2d6;
  line-height:1.65;
  max-width:780px;
}

.collector-level-card{
  border-radius:28px;
  padding:22px;
  text-align:center;
  background:linear-gradient(180deg,rgba(245,196,81,.18),rgba(255,255,255,.04));
  border:1px solid rgba(245,196,81,.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 18px 45px rgba(0,0,0,.24);
}

.collector-level-card span{
  display:block;
  font-size:42px;
  margin-bottom:10px;
}

.collector-level-card strong{
  display:block;
  font-size:22px;
  color:#f5c451;
}

.collector-level-card small{
  display:block;
  margin-top:8px;
  color:#d8def0;
  line-height:1.45;
}

.unlock-popup{
  position:fixed;
  left:50%;
  top:26px;
  transform:translate(-50%,-20px) scale(.96);
  opacity:0;
  z-index:9999;
  width:min(520px,92%);
  padding:22px 24px;
  border-radius:26px;
  background:linear-gradient(135deg,rgba(9,18,32,.97),rgba(30,23,8,.97));
  border:1px solid rgba(245,196,81,.38);
  box-shadow:0 30px 80px rgba(0,0,0,.45), 0 0 40px rgba(245,196,81,.16);
  transition:opacity .25s ease, transform .25s ease;
  text-align:center;
}

.unlock-popup.show{
  opacity:1;
  transform:translate(-50%,0) scale(1);
}

.unlock-popup h2{
  margin:0 0 8px;
  color:#f5c451;
}

.unlock-popup p{
  margin:0;
  color:#d8def0;
}

.unlock-popup button{
  margin-top:16px;
  border:none;
  border-radius:999px;
  padding:12px 18px;
  color:#130d04;
  font-weight:900;
  background:linear-gradient(135deg,#ffe39a,#f5c451);
  box-shadow:0 16px 38px rgba(245,196,81,.22);
}

.map-dot.collected{
  background:#f5c451!important;
  box-shadow:0 0 22px rgba(245,196,81,.95),0 0 42px rgba(245,196,81,.35)!important;
}

.map-dot:hover{
  transform:translate(-50%,-50%) scale(1.25);
}

@media(max-width:850px){
  .vault-identity-strip{
    grid-template-columns:1fr;
    text-align:center;
    padding:22px;
  }

  .vault-identity-strip h2{
    font-size:30px;
  }

  .premium-collection-rail{
    justify-content:flex-start;
    overflow-x:auto;
    flex-wrap:nowrap;
    padding-bottom:8px;
  }

  .premium-collection-rail button{
    white-space:nowrap;
  }

  .scratch-country-card{
    grid-template-columns:1fr;
  }

  .scratch-country-visual{
    min-height:220px;
  }
}


/* ===== FINAL BUTTON FINISH ===== */

.vault-card .price,
.vault-card .magnet-price,
.vault-card p.price{
  display:none!important;
}

.action-buttons{
  display:flex;
  gap:8px;
  margin-top:10px;
}

.collect-btn,
.gift-btn,
.vault-remove-btn{
  height:36px!important;
  min-height:36px!important;
  padding:0 14px!important;
  border-radius:13px!important;
  font-size:12px!important;
  font-weight:600!important;
  letter-spacing:.2px;
  border:1px solid rgba(255,255,255,.10)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03))!important;
  color:#f3f6ff!important;
  box-shadow:none!important;
  transition:all .22s ease!important;
}

.collect-btn{
  border-color:rgba(245,196,81,.22)!important;
  background:linear-gradient(180deg,rgba(245,196,81,.20),rgba(245,196,81,.08))!important;
}

.collect-btn:hover,
.gift-btn:hover,
.vault-remove-btn:hover{
  transform:translateY(-1px)!important;
  border-color:rgba(245,196,81,.32)!important;
}

.vault-globe-btn{
  width:36px;
  height:36px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  padding:0!important;
}

.vault-remove-btn{
  opacity:.68;
}

.vault-remove-btn:hover{
  opacity:1;
}

/* ===== SCRATCH VAULT ===== */

.scratch-vault-panel{
  margin:28px 0;
}

.country-scratch-vault{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:18px;
}

.scratch-empty{
  padding:26px;
  border-radius:26px;
  background:linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.12);
  color:#f7f3ea;
}

.scratch-empty strong{
  display:block;
  font-size:22px;
  margin-bottom:8px;
}

.scratch-empty p{
  color:#b9c2d6;
}

.scratch-empty button{
  border:none;
  border-radius:999px;
  padding:12px 18px;
  color:#151006;
  font-weight:900;
  background:linear-gradient(135deg,#ffe39a,#f5c451);
}

.scratch-country-card{
  position:relative;
  min-height:360px;
  display:grid;
  grid-template-columns:180px 1fr;
  gap:18px;
  overflow:hidden;
  border-radius:30px;
  padding:18px;
  background:
    radial-gradient(circle at 0 0,rgba(245,196,81,.20),transparent 35%),
    linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 24px 70px rgba(0,0,0,.34);
}

.scratch-country-card.is-latest{
  border-color:rgba(245,196,81,.42);
  box-shadow:0 24px 70px rgba(0,0,0,.34),0 0 34px rgba(245,196,81,.12);
}

.scratch-country-visual{
  position:relative;
  min-height:100%;
  border-radius:22px;
  overflow:hidden;
  background:#05070d;
  border:1px solid rgba(255,255,255,.12);
}

.scratch-country-visual img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(1.25) contrast(1.06);
}

.scratch-country-shine{
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.22),transparent 42%,rgba(122,44,255,.24));
}

.scratch-country-content{
  min-width:0;
  align-self:center;
}

.scratch-label{
  display:inline-flex;
  margin-bottom:10px;
  padding:7px 11px;
  border-radius:999px;
  color:#1a1004;
  background:linear-gradient(135deg,#ffe39a,#f5c451);
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.scratch-country-content h3{
  margin:0;
  color:#fff;
  font-size:34px;
  letter-spacing:-.8px;
}

.scratch-country-content p{
  margin:8px 0 16px;
  color:#c7bfd9;
  font-weight:700;
}

.scratch-city-list{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.scratch-city-list button{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-radius:999px;
  padding:0 13px;
  color:#f7f3ff;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  font-weight:800;
}

.scratch-city-list button.owned{
  color:#ffe39a;
  border-color:rgba(245,196,81,.42);
  background:rgba(245,196,81,.12);
  box-shadow:0 0 20px rgba(245,196,81,.12);
}

.scratch-city-list button.locked{
  opacity:.72;
}

.scratch-cover{
  position:absolute;
  inset:0;
  z-index:5;
  width:100%;
  height:100%;
  cursor:grab;
  touch-action:none;
  transition:opacity .45s ease, visibility .45s ease;
}

.scratch-cover:active{
  cursor:grabbing;
}

.scratch-cover.is-revealed{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.scratch-country-card.scratched{
  animation:scratchPop .55s ease;
}

@keyframes scratchPop{
  50%{ transform:scale(1.015); }
}

.scratch-reveal-modal{
  position:fixed;
  inset:0;
  z-index:10000;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(2,4,12,.78);
  backdrop-filter:blur(18px);
}

.scratch-reveal-shell{
  position:relative;
  width:min(1080px,96vw);
  max-height:92vh;
  overflow:auto;
  padding:28px;
  border-radius:32px;
  border:1px solid rgba(255,255,255,.15);
  background:
    radial-gradient(circle at 0 0,rgba(245,196,81,.18),transparent 32%),
    radial-gradient(circle at 100% 0,rgba(122,44,255,.18),transparent 30%),
    #090c18;
  box-shadow:0 34px 120px rgba(0,0,0,.62);
}

.scratch-reveal-close{
  position:absolute;
  top:18px;
  right:18px;
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:26px;
  line-height:1;
}

.scratch-reveal-copy{
  max-width:760px;
  margin-bottom:20px;
}

.scratch-reveal-copy h2{
  margin:8px 0 10px;
  font-size:clamp(38px,5vw,68px);
  line-height:1;
}

.scratch-reveal-copy p{
  color:#c9cede;
  line-height:1.65;
}

.reveal-country-card{
  min-height:400px;
}

.scratch-reveal-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:18px;
}

.scratch-reveal-actions button{
  min-height:46px;
  padding:0 18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  font-weight:900;
  background:linear-gradient(135deg,rgba(122,44,255,.72),rgba(255,255,255,.06));
}

/* ===== WALL OF MAGNETS DASHBOARD ===== */

body.wall-page{
  --purple:#7a2cff;
  --purple2:#b46cff;
  --hot:#ff4fd8;
  --amber:#ffbf31;
  --ink:#050712;
  --glass:rgba(14,16,34,.78);
  --glass2:rgba(24,26,50,.82);
  min-height:100vh;
  padding:0;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 50% -8%, rgba(255,191,49,.16), transparent 25%),
    radial-gradient(circle at 18% 20%, rgba(122,44,255,.18), transparent 28%),
    radial-gradient(circle at 86% 16%, rgba(45,178,255,.16), transparent 24%),
    linear-gradient(135deg,#050612 0%,#02040a 48%,#071229 100%);
}

body.wall-page::before{
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.014) 1px, transparent 1px);
  background-size:46px 46px;
}

.wall-shell{
  width:min(1920px,100%);
  min-height:100vh;
  margin:0 auto;
  display:grid;
  grid-template-columns:230px minmax(0,1fr) 380px;
  gap:22px;
  padding:24px 24px 110px;
}

.wall-sidebar,
.vault-preview{
  position:sticky;
  top:28px;
  height:calc(100vh - 56px);
  min-height:680px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:26px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.026)),
    rgba(7,9,22,.76);
  box-shadow:0 26px 80px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter:blur(22px);
}

.wall-sidebar{
  display:flex;
  flex-direction:column;
  padding:24px 16px;
}

.brand-lockup{
  color:#fff;
  text-decoration:none;
  display:grid;
  justify-items:center;
  gap:6px;
  padding:4px 8px 28px;
}

.brand-crown{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border-radius:18px;
  color:#ffd769;
  font-size:42px;
  text-shadow:0 0 18px rgba(255,191,49,.9);
  background:radial-gradient(circle,rgba(255,191,49,.20),transparent 62%);
}

.brand-lockup strong{
  font-size:21px;
  letter-spacing:1.5px;
}

.brand-lockup strong span{
  color:#ffd769;
}

.brand-lockup small,
.vault-head p,
.wall-topbar p{
  color:#c4bdd8;
}

.side-nav{
  display:grid;
  gap:12px;
}

.side-nav a{
  min-height:58px;
  display:flex;
  align-items:center;
  gap:14px;
  padding:0 20px;
  color:#f8f4ff;
  text-decoration:none;
  border:1px solid transparent;
  border-radius:18px;
  font-weight:700;
}

.side-nav a span{
  width:28px;
  text-align:center;
  font-size:24px;
  color:#f7eefe;
}

.side-nav a.active,
.side-nav a:hover{
  color:#ffe08a;
  border-color:rgba(255,191,49,.52);
  background:
    radial-gradient(circle at 8% 50%,rgba(255,191,49,.40),transparent 26%),
    linear-gradient(135deg,rgba(255,153,31,.33),rgba(255,153,31,.08));
  box-shadow:0 0 26px rgba(255,153,31,.18);
}

.side-progress{
  margin-top:auto;
  padding:22px;
  text-align:center;
  border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.10);
}

.gem{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  margin:0 auto 8px;
  color:#d787ff;
  font-size:29px;
  text-shadow:0 0 18px rgba(122,44,255,.92);
}

.side-progress strong{
  display:block;
  font-size:30px;
}

.side-progress small{
  display:block;
  margin:8px 0 20px;
  color:#c8bedc;
}

.progress-track{
  height:12px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);
}

.progress-track span{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#7d36ff,#b55cff,#ffbf31);
  box-shadow:0 0 20px rgba(122,44,255,.85);
}

.side-progress b{
  display:block;
  margin-top:10px;
  color:#efe8ff;
}

.wall-main{
  min-width:0;
}

.wall-topbar{
  position:relative;
  top:auto;
  z-index:20;
  padding:0 10px 24px;
  border:0;
  background:transparent;
  backdrop-filter:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
}

.wall-topbar h1{
  margin:0;
  font-size:40px;
  letter-spacing:-1px;
  white-space:nowrap;
  color:#fff;
  background:none;
  -webkit-background-clip:initial;
}

.wall-topbar h1 span{
  color:#ffbf31;
  text-shadow:0 0 18px rgba(255,191,49,.75);
}

.wall-topbar p{
  margin:8px 0 0;
  font-size:18px;
}

.wall-controls{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
  flex:0 0 506px;
}

.wall-search{
  position:relative;
  width:205px;
}

.wall-search span{
  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  color:#f3eafb;
  z-index:2;
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.wall-search #searchInput,
.wall-controls select{
  height:54px;
  border-radius:17px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(17,18,34,.86);
  color:#f7f2ff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  outline:none;
}

.wall-search #searchInput{
  padding:0 16px 0 64px;
}

.wall-controls select{
  min-width:126px;
  width:126px;
  padding:0 16px;
}

.wall-controls #countryFilter{
  width:155px;
}

.wall-search #searchInput:focus,
.wall-controls select:focus{
  border-color:rgba(180,108,255,.72);
  box-shadow:0 0 0 4px rgba(122,44,255,.14);
}

.wall-search .search-results{
  top:calc(100% + 12px);
  border-color:rgba(180,108,255,.30);
}

.wall-feature-links{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin:4px 0 22px;
}

.wall-feature-card{
  position:relative;
  min-height:138px;
  padding:20px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
  text-decoration:none;
  color:#fff;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.13);
  background:
    radial-gradient(circle at 78% 34%,rgba(101,194,255,.34),transparent 25%),
    linear-gradient(135deg,rgba(255,255,255,.085),rgba(255,255,255,.025)),
    rgba(8,10,22,.88);
  box-shadow:0 24px 70px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08);
}

.wall-feature-card::before{
  content:"";
  position:absolute;
  right:20px;
  top:18px;
  width:96px;
  height:96px;
  border-radius:50%;
  opacity:.9;
  background:
    linear-gradient(90deg,transparent 48%,rgba(255,255,255,.20) 49%,transparent 51%),
    linear-gradient(0deg,transparent 48%,rgba(255,255,255,.16) 49%,transparent 51%),
    radial-gradient(circle at 38% 34%,rgba(126,255,213,.80),transparent 16%),
    radial-gradient(circle at 66% 58%,rgba(255,218,108,.88),transparent 9%),
    radial-gradient(circle at 50% 50%,rgba(26,89,132,.95),rgba(8,21,39,.96) 63%,rgba(20,82,132,.95) 64%,rgba(11,16,29,.78) 72%);
  box-shadow:0 0 34px rgba(76,176,255,.35);
}

.wall-feature-card.map-feature::before{
  border-radius:22px;
  background:
    radial-gradient(circle at 28% 42%,#84b9ff 0 5px,transparent 6px),
    radial-gradient(circle at 54% 32%,#84b9ff 0 5px,transparent 6px),
    radial-gradient(circle at 70% 58%,#84b9ff 0 5px,transparent 6px),
    linear-gradient(145deg,rgba(47,142,135,.70),rgba(39,88,124,.75)),
    rgba(4,11,21,.9);
}

.wall-feature-card span{
  position:relative;
  z-index:1;
  margin-bottom:8px;
  color:#ffe58f;
  font-size:12px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.wall-feature-card strong{
  position:relative;
  z-index:1;
  font-size:28px;
  line-height:1;
}

.wall-feature-card small{
  position:relative;
  z-index:1;
  max-width:360px;
  margin-top:10px;
  color:#d8def0;
  line-height:1.45;
}

.magnet-wall-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(190px,1fr));
  gap:24px;
}

.wall-magnet-card.city-card{
  position:relative;
  min-height:0;
  padding:12px;
  display:grid;
  grid-template-columns:1fr;
  align-items:stretch;
  gap:12px;
  border-radius:24px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.028)),
    rgba(8,10,22,.84);
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 24px 70px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.08);
  overflow:hidden;
}

.wall-magnet-card[hidden]{
  display:none!important;
}

.wall-magnet-card.city-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg,rgba(255,79,216,.80),rgba(122,44,255,.85),rgba(255,191,49,.55));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.52;
  pointer-events:none;
}

.wall-magnet-card.city-card:hover{
  transform:translateY(-7px) scale(1.012);
  border-color:rgba(180,108,255,.55);
  box-shadow:0 28px 76px rgba(0,0,0,.52), 0 0 42px rgba(122,44,255,.24);
}

.wall-card-art{
  position:relative;
  aspect-ratio:3/4;
  border-radius:17px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 35%,rgba(122,44,255,.16),transparent 58%),
    #05070d;
}

.wall-card-art img{
  width:100%;
  height:100%;
  object-fit:contain!important;
  object-position:center center!important;
  padding:0!important;
  border-radius:0!important;
  filter:saturate(1.25) contrast(1.1);
}

.wall-card-art.fit-contain{
  aspect-ratio:3/4;
}

.wall-card-art.fit-contain img{
  object-fit:contain!important;
}

.new-pill{
  position:absolute;
  top:10px;
  right:10px;
  padding:8px 12px;
  border-radius:999px;
  color:#fff;
  font-size:14px;
  font-weight:900;
  background:linear-gradient(135deg,#a74cff,#6427ff);
  box-shadow:0 0 22px rgba(122,44,255,.72);
}

.wall-card-copy{
  padding:0 6px;
}

.wall-card-copy strong{
  display:block;
  margin:0;
  color:#fff;
  font-size:19px;
  line-height:1.25;
}

.wall-card-copy small{
  display:block;
  margin-top:6px;
  color:#c7bfd9;
  font-size:15px;
}

.wall-card-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 2px 2px;
}

.price-chip{
  color:#fff;
  font-weight:900;
  font-size:17px;
  white-space:nowrap;
}

.wall-card-actions .collect-btn{
  width:auto!important;
  min-width:108px;
  height:42px!important;
  padding:0 14px!important;
  border-radius:13px!important;
  font-size:14px!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.22)!important;
  background:linear-gradient(135deg,#7d2cff,#5e18cf)!important;
  box-shadow:0 10px 24px rgba(122,44,255,.34)!important;
}

.vault-preview{
  padding:26px;
  display:flex;
  flex-direction:column;
}

.vault-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  margin-bottom:22px;
}

.vault-head h2{
  margin:0;
  font-size:33px;
  letter-spacing:-.8px;
}

.vault-head h2 span{
  color:#f4e9ff;
}

.vault-head p{
  margin:10px 0 0;
}

.vault-head strong{
  padding:8px 14px;
  border-radius:999px;
  white-space:nowrap;
  color:#fff;
  background:linear-gradient(135deg,rgba(122,44,255,.75),rgba(30,42,108,.72));
  border:1px solid rgba(180,108,255,.46);
  box-shadow:0 0 24px rgba(122,44,255,.26);
}

.vault-mini-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  overflow:auto;
  padding-right:4px;
}

.vault-mini-card{
  position:relative;
  min-width:0;
  padding:8px 8px 12px;
  text-align:left;
  color:#fff;
  border-radius:15px;
  border:1px solid rgba(255,255,255,.15);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
  box-shadow:0 18px 44px rgba(0,0,0,.30);
}

.vault-mini-card img{
  width:100%;
  aspect-ratio:3/4;
  object-fit:contain;
  object-position:center center;
  border-radius:12px;
  margin-bottom:10px;
  background:#05070d;
  filter:saturate(1.22) contrast(1.08);
}

.vault-mini-card.fit-contain img{
  aspect-ratio:3/4;
  object-fit:contain;
}

.vault-mini-card strong,
.vault-mini-card small{
  display:block;
  padding-right:34px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.vault-mini-card strong{
  font-size:16px;
}

.vault-mini-card small{
  margin-top:5px;
  color:#c9bfdc;
  font-size:13px;
}

.vault-mini-card span{
  position:absolute;
  right:10px;
  bottom:12px;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
}

.globe-cta{
  min-height:76px;
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:0 28px;
  color:#fff;
  border:1px solid rgba(180,108,255,.46);
  border-radius:26px;
  background:
    radial-gradient(circle at 18% 50%,rgba(122,44,255,.48),transparent 36%),
    linear-gradient(135deg,rgba(122,44,255,.50),rgba(255,255,255,.035));
  box-shadow:0 20px 48px rgba(122,44,255,.22);
  font-weight:900;
  font-size:18px;
}

.globe-cta span{
  font-size:32px;
}

.globe-cta b{
  font-size:28px;
  font-weight:600;
}

.wall-map-section{
  margin-top:46px;
}

.wall-mobile-nav{
  position:fixed;
  left:50%;
  right:auto;
  bottom:26px;
  z-index:1000;
  width:min(1040px,calc(100% - 32px));
  transform:translateX(-50%);
  padding:8px;
  display:none;
  align-items:center;
  justify-content:space-around;
  border-radius:31px;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(8,9,19,.78);
  backdrop-filter:blur(20px);
  box-shadow:0 22px 70px rgba(0,0,0,.42);
}

.wall-mobile-nav a{
  min-width:90px;
  height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:24px;
  color:#f6efff;
  text-decoration:none;
  font-weight:800;
}

.wall-mobile-nav a.active{
  color:#cf9cff;
  background:radial-gradient(circle at 50% 100%,rgba(122,44,255,.45),transparent 70%);
}

.wall-mobile-nav .globe-tab{
  min-width:74px;
  height:74px;
  margin-top:-24px;
  color:#bfe9ff;
  font-size:34px;
  border-radius:50%;
  background:
    radial-gradient(circle at 34% 26%,rgba(255,255,255,.42),transparent 18%),
    radial-gradient(circle,rgba(72,166,255,.36),rgba(122,44,255,.16));
  border:2px solid rgba(120,205,255,.86);
  box-shadow:0 0 30px rgba(72,166,255,.45);
}

@media(max-width:1500px){
  .wall-shell{
    grid-template-columns:220px minmax(0,1fr) 340px;
    gap:22px;
    padding:20px 20px 38px;
  }

  .magnet-wall-grid{
    grid-template-columns:repeat(3,minmax(180px,1fr));
  }

  .wall-topbar{
    align-items:flex-start;
    flex-direction:column;
  }

  .wall-controls{
    justify-content:flex-start;
  }
}

@media(max-width:1180px){
  .wall-shell{
    grid-template-columns:1fr;
  }

  .wall-sidebar,
  .vault-preview{
    position:relative;
    top:auto;
    height:auto;
    min-height:0;
  }

  .wall-sidebar{
    display:none;
  }

  .wall-topbar h1{
    white-space:normal;
  }

  .vault-preview{
    order:3;
  }

}

@media(max-width:760px){
  .wall-shell{
    padding:16px 12px 108px;
  }

  .wall-mobile-nav{
    display:flex;
  }

  .wall-topbar{
    padding:6px 2px 18px;
  }

  .wall-topbar h1{
    font-size:34px;
  }

  .wall-controls,
  .wall-search,
  .wall-controls select{
    width:100%;
  }

  .wall-controls{
    flex:1 1 auto;
  }

  .magnet-wall-grid,
  .vault-mini-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
  }

  .wall-feature-links{
    grid-template-columns:1fr;
  }

  .wall-feature-card{
    min-height:122px;
    border-radius:20px;
  }

  .wall-magnet-card.city-card{
    border-radius:18px;
    padding:8px;
  }

  .wall-card-copy strong{
    font-size:16px;
  }

  .wall-card-copy small,
  .price-chip,
  .wall-card-actions .collect-btn{
    font-size:12px!important;
  }

  .wall-card-actions{
    gap:6px;
  }

  .wall-card-actions .collect-btn{
    min-width:82px;
    padding:0 8px!important;
  }

  .vault-preview{
    padding:18px;
    border-radius:22px;
  }

  .vault-head h2{
    font-size:26px;
  }

  .wall-mobile-nav a{
    min-width:auto;
    width:20%;
    gap:4px;
    font-size:12px;
  }
}

/* ===== DISTINCT FEATURE PAGES ===== */

.feature-page{
  padding-bottom:48px;
}

.feature-shell{
  width:min(1450px,94%);
  margin:0 auto;
  padding:34px 0 80px;
}

.feature-hero,
.feature-panel,
.settings-panel{
  border:1px solid rgba(255,255,255,.12);
  border-radius:30px;
  background:
    radial-gradient(circle at 0 0,rgba(245,196,81,.12),transparent 32%),
    linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.035));
  box-shadow:0 24px 70px rgba(0,0,0,.34);
  padding:34px;
  margin-bottom:26px;
}

.feature-hero h2{
  margin:10px 0 14px;
  font-size:clamp(40px,5vw,72px);
  line-height:1;
  letter-spacing:-2px;
}

.feature-hero p,
.feature-panel p,
.settings-panel p{
  color:#c5cadd;
  line-height:1.7;
}

.globe-focus-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 430px;
  gap:36px;
  align-items:center;
}

.feature-globe{
  width:min(420px,82vw);
}

.feature-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:22px;
}

.feature-actions a,
.gift-grid button,
.settings-actions button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  text-decoration:none;
  font-weight:900;
  background:linear-gradient(135deg,rgba(122,44,255,.68),rgba(255,255,255,.06));
}

.feature-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:14px;
}

.feature-list button{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:92px;
  padding:10px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  text-align:left;
  background:rgba(255,255,255,.06);
}

.feature-list img{
  width:70px;
  height:70px;
  object-fit:cover;
  border-radius:12px;
  background:#05070d;
}

.feature-list strong,
.feature-list small{
  display:block;
}

.feature-list small{
  margin-top:5px;
  color:#c7bfd9;
}

.feature-map-panel{
  margin-top:0;
}

.achievement-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:16px;
}

.achievement-grid article{
  min-height:190px;
  padding:24px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.055);
  color:#d5d9e8;
}

.achievement-grid article.unlocked{
  color:#fff;
  border-color:rgba(245,196,81,.38);
  background:linear-gradient(180deg,rgba(245,196,81,.18),rgba(255,255,255,.055));
  box-shadow:0 20px 45px rgba(245,196,81,.10);
}

.achievement-grid article span{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border-radius:50%;
  color:#ffe39a;
  background:rgba(255,255,255,.08);
  font-size:24px;
  margin-bottom:16px;
}

.achievement-grid h3,
.gift-grid h3{
  margin:0 0 8px;
}

.achievement-grid p,
.gift-grid p{
  color:#c5cadd;
}

.gift-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:18px;
}

.gift-grid article{
  padding:14px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
}

.gift-grid img{
  width:100%;
  aspect-ratio:3/4;
  object-fit:contain;
  border-radius:18px;
  background:#05070d;
}

.settings-panel{
  display:grid;
  gap:18px;
}

.settings-field{
  display:grid;
  gap:8px;
  max-width:520px;
  color:#fff;
  font-weight:800;
}

.settings-field input,
.settings-field select{
  min-height:52px;
  border-radius:16px;
  padding:0 16px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(17,18,34,.86);
  color:#fff;
}

.settings-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.vault-experience .vault-hero{
  grid-template-columns:minmax(0,1fr) 280px;
}

.vault-experience .vault-globe{
  width:min(270px,72vw);
}

/* Keep every globe perfectly round, even when page-specific rules resize it. */
.premium-globe,
.vault-globe,
.feature-globe,
.vault-experience .vault-globe{
  aspect-ratio:1 / 1!important;
  height:auto!important;
  min-height:0!important;
  border-radius:50%!important;
  flex:0 0 auto;
}

.premium-globe .globe-sphere,
.vault-globe .globe-sphere,
.feature-globe .globe-sphere{
  border-radius:50%!important;
}

.wall-main{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.wall-topbar{
  min-height:0!important;
  margin:0!important;
  padding:0 10px 6px!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
}

.wall-controls{
  flex:0 1 auto!important;
  margin-left:auto;
  align-self:flex-start;
}

.magnet-wall-grid{
  width:100%;
  max-width:100%;
  margin-top:0!important;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr))!important;
}

.wall-magnet-card.city-card{
  max-width:100%;
}

.wall-card-actions .collect-btn{
  min-width:0!important;
  height:34px!important;
  padding:0 12px!important;
  border-radius:11px!important;
  font-size:12px!important;
  letter-spacing:.01em!important;
}

.price-chip{
  font-size:15px!important;
}

.wall-card-copy strong{
  font-size:17px!important;
}

.wall-card-copy small{
  font-size:13px!important;
}

.vault-preview{
  overflow:hidden;
}

.vault-mini-grid{
  grid-template-columns:1fr!important;
  gap:10px!important;
  overflow:auto;
}

.vault-mini-card{
  display:grid;
  grid-template-columns:68px minmax(0,1fr);
  gap:12px;
  align-items:center;
  padding:8px!important;
  min-height:86px;
}

.vault-mini-card img{
  width:68px!important;
  height:68px!important;
  aspect-ratio:1!important;
  object-fit:cover!important;
  margin:0!important;
  border-radius:13px!important;
}

.vault-mini-card strong,
.vault-mini-card small{
  padding-right:0!important;
}

.vault-mini-card span{
  display:none!important;
}

.globe-cta span{
  font-size:13px!important;
}

.vault-hero-clean{
  display:block!important;
  padding:42px!important;
}

.vault-experience .vault-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,190px))!important;
  justify-content:start;
  align-items:start;
  gap:18px!important;
  padding:18px;
  border-radius:28px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)),
    radial-gradient(circle at 0 0,rgba(245,196,81,.10),transparent 28%);
  border:1px solid rgba(255,255,255,.10);
}

.vault-experience .vault-card{
  max-width:190px!important;
  border-radius:18px!important;
  background:rgba(5,7,16,.82)!important;
  box-shadow:0 18px 46px rgba(0,0,0,.35)!important;
}

.gift-grid{
  grid-template-columns:repeat(auto-fill,minmax(220px,280px))!important;
  justify-content:start;
  align-items:start;
}

.gift-card{
  display:grid;
  gap:12px;
}

.gift-card-art{
  width:100%;
  aspect-ratio:3/4;
  max-height:310px;
  overflow:hidden;
  border-radius:18px;
  background:#05070d;
}

.gift-card-art img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  border-radius:0!important;
}

.gift-card-copy h3{
  font-size:18px;
  margin:0 0 4px;
}

.gift-card-copy p{
  margin:0 0 12px;
}

.visual-world-map{
  background:
    linear-gradient(180deg,#c9ecff,#8fd4f4)!important;
  border:1px solid rgba(255,255,255,.35)!important;
}

.visual-world-map::before,
.visual-world-map::after{
  display:none!important;
}

.world-map-svg{
  opacity:1!important;
  filter:saturate(1.12) contrast(1.03) drop-shadow(0 10px 24px rgba(41,92,124,.18))!important;
}

.map-dot{
  background:#f4c95d!important;
  box-shadow:0 0 0 5px rgba(244,201,93,.16),0 0 18px rgba(244,201,93,.55)!important;
}

.map-dot:not(.collected){
  background:#83b7ff!important;
  box-shadow:0 0 0 4px rgba(131,183,255,.14),0 0 14px rgba(131,183,255,.38)!important;
}

/* Use only one clean globe layer: no external background map, no second ugly halo. */
.premium-globe{
  background:transparent!important;
  box-shadow:none!important;
}

.globe-atmosphere{
  display:none!important;
}

.globe-sphere{
  inset:0!important;
  background:
    radial-gradient(circle at 28% 22%,rgba(255,255,255,.72),transparent 7%),
    linear-gradient(110deg,rgba(0,0,0,.10),rgba(255,255,255,.08),rgba(0,0,0,.30)),
    radial-gradient(ellipse at 30% 34%,rgba(239,166,72,.82) 0 18%,transparent 19%),
    radial-gradient(ellipse at 40% 70%,rgba(93,164,90,.82) 0 15%,transparent 16%),
    radial-gradient(ellipse at 72% 42%,rgba(230,106,102,.82) 0 24%,transparent 25%),
    radial-gradient(ellipse at 68% 72%,rgba(194,142,232,.72) 0 12%,transparent 13%),
    linear-gradient(120deg,#0b6db2 0%,#13a7c9 48%,#062048 100%)!important;
  background-size:auto,auto,100% 100%,100% 100%,100% 100%,100% 100%,auto!important;
  box-shadow:
    inset -42px -34px 72px rgba(0,0,0,.55),
    inset 18px 14px 30px rgba(255,255,255,.18),
    0 18px 60px rgba(19,112,176,.28)!important;
}

.vault-experience .vault-grid{
  grid-template-columns:repeat(auto-fill,minmax(150px,190px));
  justify-content:start;
  align-items:start;
  gap:14px;
}

.vault-experience .vault-card{
  border-radius:20px;
  padding:10px;
  width:100%;
  max-width:190px;
}

.vault-experience .vault-card img{
  width:100%;
  max-height:250px;
  aspect-ratio:3/4;
  object-fit:contain!important;
  border-radius:14px;
}

.vault-experience .vault-card button{
  min-height:34px;
  padding:8px 10px;
  font-size:12px;
}

@media(max-width:900px){
  .globe-focus-layout{
    grid-template-columns:1fr;
  }
}


/* Final polish: keep atlas map uncropped, dots precise, and magnet preview compact. */
.world-map-svg{object-fit:fill!important;}
.map-dot{width:8px!important;height:8px!important;min-width:8px!important;min-height:8px!important;}
.map-dot span{inset:-4px!important;}
.map-dot:hover{transform:translate(-50%,-50%) scale(1.2)!important;}
.magnet-modal .modal-content{width:min(430px,90vw)!important;}
.magnet-modal .modal-content img{max-height:68vh!important;object-fit:contain!important;background:#05070d!important;}



/* Final map marker scale: small atlas pins, not oversized bubbles. */
.map-dot{width:5px!important;height:5px!important;min-width:5px!important;min-height:5px!important;box-shadow:0 0 0 2px rgba(244,201,93,.12),0 0 7px rgba(244,201,93,.42)!important;}
.map-dot:not(.collected){box-shadow:0 0 0 2px rgba(131,183,255,.10),0 0 6px rgba(131,183,255,.28)!important;}
.map-dot span{inset:-2px!important;border-width:1px!important;}
.map-dot:hover{transform:translate(-50%,-50%) scale(1.45)!important;}


/* Final navigation pass: keep primary controls in one premium bottom rail. */
.app-header .header-actions{display:none!important;}
.app-header, header{padding:18px 28px 14px!important;}
.app-bottom-nav{position:fixed;left:50%;bottom:22px;z-index:5000;transform:translateX(-50%);width:min(760px,calc(100vw - 28px));min-height:76px;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;border-radius:28px;background:linear-gradient(180deg,rgba(25,24,36,.92),rgba(6,7,13,.90));border:1px solid rgba(255,255,255,.14);box-shadow:0 22px 70px rgba(0,0,0,.50),0 0 34px rgba(122,44,255,.12);backdrop-filter:blur(22px);}
.app-bottom-nav a{min-width:82px;height:54px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:18px;text-decoration:none;color:#f4edf8;font-weight:900;background:transparent;border:1px solid transparent;}
.app-bottom-nav a span{width:24px;height:24px;display:grid;place-items:center;border-radius:50%;color:#ffe39a;background:rgba(255,255,255,.06);}
.app-bottom-nav a.active{color:#1a1004;background:linear-gradient(135deg,#fff0a8,#f5c451 58%,#ff9f1c);border-color:rgba(255,226,139,.65);box-shadow:0 14px 38px rgba(245,196,81,.25);}
.app-bottom-nav a.active span{color:#1a1004;background:rgba(0,0,0,.08);}
.wall-mobile-nav{display:none!important;}

/* Vault layout polish: compact scratch cards that keep magnets visible. */
.country-scratch-vault{grid-template-columns:repeat(auto-fit,minmax(360px,1fr))!important;gap:18px!important;}
.scratch-country-card{min-height:260px!important;grid-template-columns:150px minmax(0,1fr)!important;gap:16px!important;padding:16px!important;border-radius:24px!important;}
.scratch-country-visual{min-height:220px!important;}
.scratch-country-visual img{object-fit:contain!important;background:#05070d!important;padding:4px!important;}
.scratch-country-content h3{font-size:30px!important;line-height:1.02!important;}
.scratch-country-content p{font-size:15px!important;margin:7px 0 12px!important;}
.scratch-city-list{gap:8px!important;}
.scratch-city-list button{min-height:34px!important;padding:0 12px!important;font-size:14px!important;}

/* Map precision: city-coordinate pins, very small and centered on real city locations. */
.world-map-svg{object-fit:fill!important;}
.map-dot.city-map-dot,.map-dot{width:3px!important;height:3px!important;min-width:3px!important;min-height:3px!important;border:0!important;background:#4f98ff!important;box-shadow:0 0 0 1px rgba(79,152,255,.35),0 0 5px rgba(79,152,255,.45)!important;}
.map-dot.city-map-dot.collected,.map-dot.collected{background:#f5c451!important;box-shadow:0 0 0 1px rgba(245,196,81,.45),0 0 7px rgba(245,196,81,.55)!important;}
.map-dot span{inset:-2px!important;border-width:1px!important;opacity:.50!important;}
.map-dot:hover{transform:translate(-50%,-50%) scale(2.4)!important;}

/* Mature globe: real atlas texture clipped inside a lit sphere. */
.premium-globe{filter:drop-shadow(0 24px 60px rgba(9,41,73,.38))!important;}
.globe-atmosphere{display:block!important;inset:-8%!important;background:radial-gradient(circle,rgba(95,174,255,.22),transparent 66%)!important;}
.globe-sphere{inset:0!important;background:radial-gradient(circle at 27% 22%,rgba(255,255,255,.62),transparent 8%),radial-gradient(circle at 70% 78%,rgba(0,0,0,.55),transparent 42%),linear-gradient(115deg,rgba(255,255,255,.20),transparent 28%,rgba(0,0,0,.34) 82%),url('worldmap.svg'),linear-gradient(120deg,#07254d,#0a5e9d 48%,#021328)!important;background-size:auto,auto,auto,185% 92%,auto!important;background-position:center,center,center,48% center,center!important;background-repeat:no-repeat!important;box-shadow:inset -54px -38px 90px rgba(0,0,0,.68),inset 22px 16px 36px rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.16),0 28px 75px rgba(23,96,154,.32)!important;animation:globeAtlasDrift 34s linear infinite!important;}
.globe-sphere::before{display:none!important;}
.globe-sphere::after{background:repeating-linear-gradient(0deg,transparent 0 22px,rgba(255,255,255,.055) 23px,transparent 24px),repeating-linear-gradient(90deg,transparent 0 30px,rgba(255,255,255,.045) 31px,transparent 32px),radial-gradient(circle at 30% 24%,rgba(255,255,255,.18),transparent 18%)!important;opacity:.55!important;}
@keyframes globeAtlasDrift{from{background-position:center,center,center,30% center,center;}to{background-position:center,center,center,165% center,center;}}

@media(max-width:760px){body{padding-bottom:116px!important;}.app-header, header{padding:14px 16px 10px!important;}header h1{font-size:24px!important;}.app-bottom-nav{bottom:12px;width:calc(100vw - 16px);min-height:66px;justify-content:flex-start;overflow-x:auto;border-radius:22px;padding:8px;}.app-bottom-nav a{min-width:70px;height:48px;gap:5px;font-size:11px;}.app-bottom-nav a span{width:21px;height:21px;font-size:12px;}.country-scratch-vault{grid-template-columns:1fr!important;}.scratch-country-card{grid-template-columns:112px minmax(0,1fr)!important;min-height:210px!important;padding:12px!important;}.scratch-country-visual{min-height:170px!important;border-radius:18px!important;}.scratch-country-content h3{font-size:24px!important;}.scratch-label{font-size:10px!important;padding:6px 9px!important;}.scratch-city-list button{font-size:12px!important;min-height:30px!important;}}

/* Final mobile and map cleanup after visual QA. */
html,body{overflow-x:hidden!important;}
.map-dot.city-map-dot,.map-dot{width:2px!important;height:2px!important;min-width:2px!important;min-height:2px!important;box-shadow:0 0 0 1px rgba(79,152,255,.28)!important;opacity:.82!important;}
.map-dot.city-map-dot.collected,.map-dot.collected{width:3px!important;height:3px!important;min-width:3px!important;min-height:3px!important;box-shadow:0 0 0 1px rgba(245,196,81,.42),0 0 4px rgba(245,196,81,.45)!important;opacity:.95!important;}
.map-dot span{display:none!important;}
@media(max-width:760px){
  .collection-container,.feature-shell{width:100%!important;max-width:100%!important;padding-left:14px!important;padding-right:14px!important;}
  .vault-identity-strip,.vault-hero,.feature-hero,.map-panel,.scratch-vault-panel,.collection-stats,.achievement-box,.recommendations-box,.progress{width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important;}
  .vault-identity-strip,.vault-hero,.feature-hero{grid-template-columns:1fr!important;padding:22px!important;border-radius:24px!important;text-align:center!important;}
  .collector-level-card{width:100%!important;max-width:100%!important;}
  .vault-hero h2,.feature-hero h2,.section-title h2{font-size:clamp(30px,9vw,42px)!important;letter-spacing:-1px!important;line-height:1.04!important;}
  .app-bottom-nav{left:8px!important;right:8px!important;transform:none!important;width:auto!important;justify-content:space-between!important;overflow:visible!important;gap:2px!important;padding:7px!important;}
  .app-bottom-nav a{min-width:0!important;flex:1 1 0!important;height:48px!important;gap:0!important;padding:0!important;font-size:0!important;}
  .app-bottom-nav a b{display:none!important;}
  .app-bottom-nav a span{width:28px!important;height:28px!important;font-size:12px!important;}
  .app-bottom-nav a.active span{width:34px!important;height:34px!important;box-shadow:0 8px 22px rgba(245,196,81,.28)!important;}
}

/* Hard stop for mobile horizontal clipping. */
@media(max-width:760px){
  body{width:100vw!important;}
  .collection-container,.feature-shell{overflow:hidden!important;}
  .vault-identity-strip,.vault-hero,.feature-hero,.map-panel,.scratch-vault-panel{max-width:calc(100vw - 28px)!important;}
  .vault-identity-strip > *, .vault-hero > *, .feature-hero > *{min-width:0!important;max-width:100%!important;}
  .vault-identity-strip p,.vault-hero p,.feature-hero p,.section-title p{max-width:100%!important;white-space:normal!important;overflow-wrap:anywhere!important;}
  .collector-level-card{min-width:0!important;}
  .collector-level-card small{white-space:normal!important;overflow-wrap:anywhere!important;}
}

/* Pixel-locked mobile widths for the vault hero cards. */
@media(max-width:760px){
  main.collection-container{display:block!important;padding:0 14px 116px!important;}
  .vault-identity-strip,.vault-hero,.scratch-vault-panel,.collection-stats,.achievement-box,.recommendations-box,.progress,.section-title{width:calc(100vw - 28px)!important;max-width:calc(100vw - 28px)!important;min-width:0!important;}
  .vault-identity-strip{display:flex!important;flex-direction:column!important;align-items:stretch!important;}
  .vault-identity-strip p{display:block!important;width:100%!important;line-height:1.55!important;}
  .vault-identity-strip h2{font-size:28px!important;}
  .vault-identity-strip *{max-width:100%!important;}
  .app-bottom-nav{max-width:calc(100vw - 16px)!important;}
}

/* Aggressive mobile fit: no hidden right-side content. */
@media(max-width:760px){
  .vault-identity-strip,.vault-hero,.scratch-vault-panel,.collection-stats,.achievement-box,.recommendations-box,.progress,.section-title{width:calc(100vw - 56px)!important;max-width:calc(100vw - 56px)!important;margin-left:auto!important;margin-right:auto!important;}
  .vault-identity-strip p,.vault-hero p,.feature-hero p{font-size:15px!important;line-height:1.5!important;}
  .collector-level-card{width:100%!important;}
  .app-bottom-nav{display:grid!important;grid-template-columns:repeat(7,1fr)!important;left:10px!important;right:10px!important;width:auto!important;max-width:none!important;}
  .app-bottom-nav a{width:auto!important;min-width:0!important;}
}

/* NASA Blue Marble globe replacement. */
.globe-sphere{
  inset:0!important;
  background:
    radial-gradient(circle at 28% 22%,rgba(255,255,255,.34),transparent 12%),
    radial-gradient(circle at 74% 76%,rgba(0,0,0,.50),transparent 42%),
    url('images/earth-blue-marble-globe.jpg') center / cover no-repeat!important;
  box-shadow:inset -44px -34px 88px rgba(0,0,0,.68),inset 18px 14px 32px rgba(255,255,255,.16),0 28px 76px rgba(38,115,190,.30)!important;
  animation:none!important;
}
.globe-sphere::before{display:none!important;}
.globe-sphere::after{background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.14),transparent 24%),linear-gradient(110deg,rgba(255,255,255,.10),transparent 40%,rgba(0,0,0,.22))!important;opacity:.7!important;}

/* Final mobile title sizing so no heading is clipped. */
@media(max-width:760px){
  .vault-hero h2,.feature-hero h2,.section-title h2{font-size:32px!important;line-height:1.08!important;letter-spacing:-.5px!important;max-width:100%!important;overflow-wrap:normal!important;}
  .vault-hero p,.feature-hero p,.section-title p{font-size:14px!important;line-height:1.5!important;}
}
@media(max-width:420px){
  .vault-hero h2,.feature-hero h2,.section-title h2{font-size:30px!important;}
}

/* Final text containment on narrow screens. */
@media(max-width:760px){
  .vault-identity-strip h2,.vault-identity-strip p,.vault-hero h2,.vault-hero p,.feature-hero h2,.feature-hero p,.section-title h2,.section-title p{width:92%!important;max-width:92%!important;margin-left:auto!important;margin-right:auto!important;}
  .vault-hero h2,.feature-hero h2,.section-title h2{font-size:28px!important;}
}

/* Next polish pass: one navigation system, cleaner settings, reward awards and travel room. */
.wall-shell{grid-template-columns:minmax(0,1fr) 380px!important;max-width:1680px!important;}
.wall-sidebar{display:none!important;}
.settings-actions{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px!important;max-width:760px;}
.settings-actions button{width:100%!important;min-height:52px!important;padding:0 14px!important;}
.reward-magnet{margin-top:18px;padding:14px;border-radius:18px;background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.10);}
.reward-magnet b{display:block;color:#ffe39a;font-size:11px;text-transform:uppercase;letter-spacing:.12em;margin-bottom:6px;}
.reward-magnet strong{display:block;color:#fff;font-size:18px;}
.reward-magnet small{display:block;margin-top:4px;color:#c5cadd;}
.reward-magnet.ready{border-color:rgba(245,196,81,.42);background:linear-gradient(135deg,rgba(245,196,81,.22),rgba(255,255,255,.055));box-shadow:0 16px 34px rgba(245,196,81,.10);}
.vault-room-actions{margin-top:14px;}
.vault-room-actions button{border:none;color:#151006;background:linear-gradient(135deg,#fff0a8,#f5c451);}
.vault-room{width:min(1350px,94%);margin:12px auto 90px;padding:26px;border-radius:34px;border:1px solid rgba(255,255,255,.12);background:radial-gradient(circle at 15% 0,rgba(245,196,81,.16),transparent 30%),linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.026));box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 26px 80px rgba(0,0,0,.38);}
.vault-room-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:16px;align-items:start;padding:18px;border-radius:26px;background:linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),rgba(4,6,14,.55);background-size:72px 72px;border:1px solid rgba(255,255,255,.08);}
.room-magnet{display:grid;gap:10px;padding:10px;border-radius:18px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.065);color:#fff;text-align:left;box-shadow:0 18px 36px rgba(0,0,0,.28);}
.room-magnet img{width:100%;aspect-ratio:3/4;object-fit:contain;border-radius:13px;background:#05070d;}
.room-magnet span strong,.room-magnet span small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.room-magnet span small{margin-top:3px;color:#c7bfd9;font-size:12px;}
.map-dot.city-map-dot,.map-dot{width:1.5px!important;height:1.5px!important;min-width:1.5px!important;min-height:1.5px!important;border-radius:50%!important;box-shadow:none!important;opacity:.92!important;}
.map-dot.city-map-dot.collected,.map-dot.collected{width:2.5px!important;height:2.5px!important;min-width:2.5px!important;min-height:2.5px!important;box-shadow:0 0 4px rgba(245,196,81,.45)!important;}
@media(max-width:1180px){.wall-shell{grid-template-columns:1fr!important;}.vault-preview{display:none!important;}}
@media(max-width:760px){.settings-actions{grid-template-columns:1fr!important;}.vault-room{width:calc(100vw - 56px)!important;padding:14px!important;border-radius:24px!important;}.vault-room-wall{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:12px;}.room-magnet{padding:8px;border-radius:14px;}}

/* === CLEAN RECOVERY PASS 2026-05-29 === */
html, body { overflow-x: hidden !important; }
body { padding-bottom: 132px !important; }

.app-header .header-actions { display: none !important; }
.wall-mobile-nav { display: none !important; }

.app-bottom-nav {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: 20px !important;
  transform: translateX(-50%) !important;
  z-index: 6000 !important;
  width: min(860px, calc(100vw - 36px)) !important;
  min-height: 86px !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr 96px 1fr 1fr !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 50% 100%, rgba(245,196,81,.18), transparent 34%),
    radial-gradient(circle at 12% 100%, rgba(119,55,255,.26), transparent 30%),
    linear-gradient(180deg, rgba(22,21,34,.94), rgba(5,7,14,.94)) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.10) !important;
  backdrop-filter: blur(22px) !important;
  overflow: visible !important;
}

.app-bottom-nav a {
  height: 60px !important;
  min-width: 0 !important;
  width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  color: #f7eff9 !important;
  text-decoration: none !important;
  font-weight: 850 !important;
  font-size: 16px !important;
  background: transparent !important;
  white-space: nowrap !important;
}

.app-bottom-nav a span {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  color: #ffe7a3 !important;
  background: rgba(255,255,255,.08) !important;
  font-size: 17px !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

.app-bottom-nav a.active:not(.crown-tab) {
  color: #ffe7a3 !important;
  background: linear-gradient(135deg, rgba(120,48,255,.34), rgba(245,196,81,.10)) !important;
  border-color: rgba(245,196,81,.25) !important;
  box-shadow: inset 0 0 28px rgba(126,47,255,.18) !important;
}

.app-bottom-nav a.crown-tab {
  width: 86px !important;
  height: 86px !important;
  padding: 0 !important;
  margin: -26px auto 0 !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 34% 24%, rgba(255,255,255,.34), transparent 21%),
    linear-gradient(135deg, #ffd86b, #ffae22 54%, #6c2bff) !important;
  border: 2px solid rgba(255,231,163,.82) !important;
  color: #fff9d8 !important;
  box-shadow: 0 0 0 8px rgba(245,196,81,.10), 0 18px 46px rgba(245,153,32,.42), inset 0 -12px 24px rgba(73,28,3,.34) !important;
}

.app-bottom-nav a.crown-tab span {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  color: #fff6c4 !important;
  background: transparent !important;
  font-size: 40px !important;
  text-shadow: 0 4px 16px rgba(56,23,0,.48) !important;
}

.app-bottom-nav a.crown-tab.active { transform: translateY(-2px) !important; }

.visual-world-map {
  background: linear-gradient(180deg, #c8edff 0%, #8fd4f2 100%) !important;
  border: 1px solid rgba(255,255,255,.32) !important;
  overflow: hidden !important;
}
.visual-world-map::before, .visual-world-map::after { display: none !important; }
.world-map-svg {
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  opacity: 1 !important;
  filter: saturate(1.08) contrast(1.02) drop-shadow(0 14px 28px rgba(29,80,112,.18)) !important;
}

.map-dot,
.map-dot.country-map-dot,
.map-dot.city-map-dot {
  position: absolute !important;
  width: 7px !important;
  height: 7px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  transform: translate(-50%, -50%) !important;
  background: #2d7fff !important;
  box-shadow: 0 0 0 2px rgba(45,127,255,.22), 0 0 8px rgba(45,127,255,.52) !important;
  opacity: .92 !important;
  z-index: 20 !important;
  appearance: none !important;
}
.map-dot.collected,
.map-dot.country-map-dot.collected,
.map-dot.city-map-dot.collected {
  width: 9px !important;
  height: 9px !important;
  background: #f5c451 !important;
  box-shadow: 0 0 0 3px rgba(245,196,81,.24), 0 0 13px rgba(245,196,81,.72) !important;
  opacity: 1 !important;
}
.map-dot span { display: none !important; }
.map-dot:hover { transform: translate(-50%, -50%) scale(1.45) !important; }

.premium-globe { filter: drop-shadow(0 24px 64px rgba(20,83,145,.42)) !important; }
.globe-atmosphere {
  display: block !important;
  inset: -8% !important;
  background: radial-gradient(circle, rgba(82,166,255,.22), transparent 66%) !important;
}
.globe-sphere {
  inset: 0 !important;
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.38), transparent 12%),
    radial-gradient(circle at 75% 78%, rgba(0,0,0,.55), transparent 44%),
    url('images/earth-blue-marble-globe.jpg') center / cover no-repeat !important;
  box-shadow: inset -44px -34px 88px rgba(0,0,0,.68), inset 18px 14px 32px rgba(255,255,255,.16), 0 28px 76px rgba(38,115,190,.30) !important;
  animation: magnetfolioGlobeRotate 38s linear infinite !important;
  transform-origin: 50% 50% !important;
}
.globe-sphere::before { display: none !important; }
.globe-sphere::after {
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.14), transparent 24%), linear-gradient(110deg, rgba(255,255,255,.10), transparent 40%, rgba(0,0,0,.22)) !important;
  opacity: .7 !important;
}
@keyframes magnetfolioGlobeRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.vault-room {
  width: min(1320px, 94%) !important;
  margin: 18px auto 96px !important;
  padding: 28px !important;
  border-radius: 34px !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  background:
    radial-gradient(circle at 15% 0, rgba(245,196,81,.18), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.028)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 26px 80px rgba(0,0,0,.40) !important;
}
.vault-room-wall {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)) !important;
  gap: 16px !important;
  align-items: start !important;
  min-height: 260px !important;
  padding: 20px !important;
  border-radius: 26px !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(180deg, rgba(58,43,31,.38), rgba(4,6,14,.72)) !important;
  background-size: 72px 72px, 72px 72px, auto !important;
  border: 1px solid rgba(255,255,255,.09) !important;
}
.room-magnet img { aspect-ratio: 3 / 4 !important; object-fit: contain !important; background: #05070d !important; }

@media (max-width: 760px) {
  body { padding-bottom: 108px !important; }
  .app-bottom-nav {
    left: 10px !important;
    right: 10px !important;
    bottom: 12px !important;
    transform: none !important;
    width: auto !important;
    min-height: 70px !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 4px !important;
    padding: 8px !important;
    border-radius: 26px !important;
  }
  .app-bottom-nav a {
    height: 52px !important;
    padding: 0 !important;
    gap: 0 !important;
    font-size: 0 !important;
  }
  .app-bottom-nav a b { display: none !important; }
  .app-bottom-nav a span {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    font-size: 14px !important;
  }
  .app-bottom-nav a.crown-tab {
    width: 62px !important;
    height: 62px !important;
    margin: -14px auto 0 !important;
  }
  .app-bottom-nav a.crown-tab span {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    font-size: 30px !important;
  }
  .map-dot,
  .map-dot.country-map-dot,
  .map-dot.city-map-dot {
    width: 6px !important;
    height: 6px !important;
  }
  .vault-room { width: calc(100vw - 28px) !important; padding: 14px !important; border-radius: 24px !important; }
  .vault-room-wall { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; padding: 12px !important; }
}

/* Map calm-down: keep the atlas clean and make inactive countries quiet. */
.map-dot,
.map-dot.country-map-dot,
.map-dot.city-map-dot {
  width: 3px !important;
  height: 3px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  opacity: .42 !important;
  background: #286fd6 !important;
  box-shadow: 0 0 0 1px rgba(40,111,214,.18) !important;
}
.map-dot.collected,
.map-dot.country-map-dot.collected,
.map-dot.city-map-dot.collected {
  width: 7px !important;
  height: 7px !important;
  opacity: 1 !important;
  background: #f5c451 !important;
  box-shadow: 0 0 0 3px rgba(245,196,81,.22), 0 0 12px rgba(245,196,81,.72) !important;
}
.map-dot:hover {
  opacity: 1 !important;
  width: 8px !important;
  height: 8px !important;
  background: #ffe39a !important;
}

/* === PRECISION MAP + UTILITY ACTIONS PASS === */
.utility-actions {
  position: fixed !important;
  top: 18px !important;
  right: 24px !important;
  z-index: 6100 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(28,27,38,.86), rgba(6,7,13,.86)) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 18px 46px rgba(0,0,0,.38) !important;
  backdrop-filter: blur(18px) !important;
}
.utility-actions a {
  height: 40px !important;
  min-width: 42px !important;
  padding: 0 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  color: #f7f0ff !important;
  font-weight: 850 !important;
  border: 1px solid transparent !important;
}
.utility-actions a:hover {
  color: #1a1004 !important;
  background: linear-gradient(135deg, #fff0a8, #f5c451) !important;
  border-color: rgba(255,226,139,.55) !important;
}
.utility-actions span {
  width: 22px !important;
  height: 22px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.08) !important;
  color: #ffe39a !important;
  font-size: 13px !important;
}

.visual-world-map.precision-map,
.visual-world-map:has(.geo-world-svg) {
  min-height: 560px !important;
  background:
    radial-gradient(circle at 50% 44%, rgba(255,255,255,.24), transparent 18%),
    linear-gradient(180deg, #bfefff 0%, #8bd8f6 72%, #73c5e2 100%) !important;
}
.geo-map-loading {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  color: #17334b !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}
.geo-world-svg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
  filter: saturate(1.04) contrast(1.02) drop-shadow(0 12px 22px rgba(24,82,112,.18)) !important;
}
.geo-country {
  stroke: rgba(255,255,255,.92) !important;
  stroke-width: .72 !important;
  vector-effect: non-scaling-stroke !important;
  opacity: .94 !important;
}
.map-dot,
.map-dot.country-map-dot,
.map-dot.city-map-dot {
  z-index: 4 !important;
  width: 6px !important;
  height: 6px !important;
  opacity: .72 !important;
  background: #1f62d6 !important;
  box-shadow: 0 0 0 2px rgba(31,98,214,.22), 0 0 8px rgba(31,98,214,.38) !important;
}
.map-dot.collected,
.map-dot.country-map-dot.collected,
.map-dot.city-map-dot.collected {
  width: 10px !important;
  height: 10px !important;
  opacity: 1 !important;
  background: #ffcc4f !important;
  box-shadow: 0 0 0 4px rgba(255,204,79,.24), 0 0 16px rgba(255,204,79,.78) !important;
}

.globe-pins {
  inset: 0 !important;
  animation: magnetfolioGlobeRotate 38s linear infinite !important;
  transform-origin: 50% 50% !important;
}
.globe-pin {
  width: 8px !important;
  height: 8px !important;
  box-shadow: 0 0 0 4px rgba(245,196,81,.16), 0 0 18px rgba(245,196,81,.78) !important;
}

.vault-room {
  background:
    radial-gradient(circle at 18% 0, rgba(245,196,81,.20), transparent 28%),
    radial-gradient(circle at 85% 18%, rgba(72,166,255,.13), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03)) !important;
}
.vault-room-wall {
  min-height: 380px !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    radial-gradient(circle at 50% 100%, rgba(245,196,81,.10), transparent 45%),
    linear-gradient(180deg, rgba(50,36,28,.50), rgba(4,6,14,.82)) !important;
  background-size: 86px 86px, 86px 86px, auto, auto !important;
}
.room-magnet {
  border-color: rgba(245,196,81,.18) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.035)) !important;
}

@media (max-width: 760px) {
  .utility-actions {
    top: 10px !important;
    right: 10px !important;
    gap: 4px !important;
  }
  .utility-actions a {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
  }
  .utility-actions b { display: none !important; }
  .utility-actions span { width: 24px !important; height: 24px !important; }
  .visual-world-map:has(.geo-world-svg) { min-height: 360px !important; }
}

/* Utility buttons compact correction. */
.utility-actions {
  top: 18px !important;
  right: 24px !important;
  max-width: calc(100vw - 48px) !important;
  padding: 5px !important;
}
.wall-page .utility-actions {
  right: 22px !important;
  transform: scale(.92) !important;
  transform-origin: top right !important;
}
.utility-actions a {
  height: 36px !important;
  min-width: 36px !important;
  padding: 0 10px !important;
  font-size: 13px !important;
}
.utility-actions span {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  font-size: 12px !important;
}
.wall-page .utility-actions a {
  padding: 0 9px !important;
}
.wall-page .utility-actions b {
  font-size: 12px !important;
}
.panel-close {
  display: grid !important;
  place-items: center !important;
  line-height: 1 !important;
  font-size: 24px !important;
}
@media (max-width: 1180px) {
  .utility-actions b { display: none !important; }
  .utility-actions a { width: 38px !important; padding: 0 !important; }
}

/* Hard visible Gift + Settings buttons. */
.utility-actions {
  position: fixed !important;
  top: 96px !important;
  right: 18px !important;
  z-index: 9000 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  max-width: none !important;
  pointer-events: auto !important;
}
.utility-actions a,
.wall-page .utility-actions a {
  width: 132px !important;
  height: 48px !important;
  min-width: 132px !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  color: #fff6d8 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg, rgba(43,34,59,.96), rgba(11,12,20,.96)) !important;
  border: 1px solid rgba(245,196,81,.32) !important;
  box-shadow: 0 16px 42px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.10) !important;
  backdrop-filter: blur(18px) !important;
}
.utility-actions a:hover {
  color: #191004 !important;
  background: linear-gradient(135deg, #fff0a8, #f5c451) !important;
}
.utility-actions span,
.wall-page .utility-actions span {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  color: #191004 !important;
  background: linear-gradient(135deg, #fff0a8, #f5c451) !important;
  font-size: 13px !important;
  line-height: 1 !important;
}
.utility-actions b,
.wall-page .utility-actions b {
  display: inline !important;
  font-size: 15px !important;
  line-height: 1 !important;
}
@media (max-width: 760px) {
  .utility-actions {
    top: 76px !important;
    right: 10px !important;
    gap: 8px !important;
  }
  .utility-actions a,
  .wall-page .utility-actions a {
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    padding: 0 !important;
    justify-content: center !important;
  }
  .utility-actions b,
  .wall-page .utility-actions b { display: none !important; }
}

/* Bottom bar with integrated Gift + Settings. */
.utility-actions { display: none !important; }
.app-bottom-nav {
  width: min(1040px, calc(100vw - 36px)) !important;
  grid-template-columns: 1fr 1fr 90px 1fr 1fr .82fr .82fr !important;
  gap: 7px !important;
}
.app-bottom-nav a {
  height: 58px !important;
  padding: 0 12px !important;
  font-size: 15px !important;
}
.app-bottom-nav a.utility-tab {
  color: #ffe7a3 !important;
  background: rgba(255,255,255,.035) !important;
  border-color: rgba(245,196,81,.14) !important;
}
.app-bottom-nav a.utility-tab span {
  color: #191004 !important;
  background: linear-gradient(135deg, #fff0a8, #f5c451) !important;
}
.app-bottom-nav a.utility-tab.active {
  color: #191004 !important;
  background: linear-gradient(135deg, #fff0a8, #f5c451) !important;
  border-color: rgba(255,226,139,.75) !important;
  box-shadow: 0 14px 38px rgba(245,196,81,.24) !important;
}
.app-bottom-nav a.utility-tab.active span {
  background: rgba(0,0,0,.10) !important;
}
@media (max-width: 900px) {
  .app-bottom-nav {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    width: calc(100vw - 20px) !important;
    left: 10px !important;
    right: 10px !important;
    transform: none !important;
    padding: 8px !important;
    gap: 3px !important;
  }
  .app-bottom-nav a {
    min-width: 0 !important;
    height: 50px !important;
    padding: 0 !important;
    font-size: 0 !important;
    gap: 0 !important;
  }
  .app-bottom-nav a b { display: none !important; }
  .app-bottom-nav a span {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    font-size: 13px !important;
  }
  .app-bottom-nav a.crown-tab {
    width: 58px !important;
    height: 58px !important;
    margin: -14px auto 0 !important;
  }
  .app-bottom-nav a.crown-tab span {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    font-size: 28px !important;
  }
}

/* Magnetfolio logo integration. */
.brand-header-lockup {
  width: 126px !important;
  height: 62px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  text-decoration: none !important;
  background: radial-gradient(circle at 50% 35%, rgba(245,196,81,.16), rgba(255,255,255,.035) 62%, rgba(0,0,0,.28)) !important;
  border: 1px solid rgba(245,196,81,.22) !important;
  box-shadow: 0 14px 38px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.09) !important;
}
.brand-header-lockup img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 5px !important;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.38)) !important;
}
.page-title-lockup {
  min-width: 0 !important;
}
.app-header {
  justify-content: flex-start !important;
  gap: 16px !important;
}
.app-header .header-actions {
  margin-left: auto !important;
}

.wall-brand-lockup {
  display: grid !important;
  grid-template-columns: 156px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 18px !important;
  min-width: 0 !important;
}
.wall-brand-logo {
  width: 156px !important;
  height: 82px !important;
  object-fit: contain !important;
  padding: 6px !important;
  border-radius: 20px !important;
  background: radial-gradient(circle at 50% 28%, rgba(245,196,81,.14), rgba(255,255,255,.03) 64%, rgba(0,0,0,.34)) !important;
  border: 1px solid rgba(245,196,81,.22) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.wall-brand-lockup h1,
.page-title-lockup h1 {
  margin: 0 !important;
}
.wall-brand-lockup p,
.page-title-lockup p {
  margin-top: 4px !important;
}

@media (max-width: 900px) {
  .brand-header-lockup {
    width: 96px !important;
    height: 48px !important;
    border-radius: 14px !important;
  }
  .app-header {
    align-items: center !important;
    gap: 10px !important;
  }
  .page-title-lockup h1 {
    font-size: 22px !important;
    line-height: 1.05 !important;
  }
  .page-title-lockup #tagline {
    font-size: 10px !important;
  }
  .wall-brand-lockup {
    grid-template-columns: 112px minmax(0, 1fr) !important;
    gap: 12px !important;
  }
  .wall-brand-logo {
    width: 112px !important;
    height: 62px !important;
    border-radius: 16px !important;
  }
}

@media (max-width: 520px) {
  .wall-brand-lockup {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .wall-brand-logo {
    width: 138px !important;
    height: 72px !important;
  }
}

/* M mark center tab and integrated Gift/Settings polish. */
.app-bottom-nav a.mark-tab {
  width: 86px !important;
  height: 86px !important;
  padding: 0 !important;
  margin: -26px auto 0 !important;
  border-radius: 28px !important;
  background: linear-gradient(135deg, rgba(22,16,32,.98), rgba(7,7,13,.98)) !important;
  border: 1px solid rgba(245,196,81,.44) !important;
  box-shadow: 0 0 0 7px rgba(245,196,81,.08), 0 18px 46px rgba(0,0,0,.50), inset 0 1px 0 rgba(255,255,255,.12) !important;
  overflow: hidden !important;
}
.app-bottom-nav a.mark-tab span {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  background: transparent !important;
  border-radius: inherit !important;
  overflow: hidden !important;
}
.app-bottom-nav a.mark-tab img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.app-bottom-nav a:not(.mark-tab) {
  border-radius: 999px !important;
}
.app-bottom-nav a.utility-tab { background: transparent !important; }

.gift-search-panel {
  width: min(900px, 94%) !important;
  margin: 0 auto 24px !important;
  padding: 18px !important;
  border-radius: 24px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035)) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}
.gift-search {
  display: grid !important;
  gap: 8px !important;
}
.gift-search span {
  color: #ffe39a !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
}
.gift-search input {
  width: 100% !important;
  min-height: 54px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(6,7,13,.72) !important;
  color: #fff !important;
  padding: 0 18px !important;
  outline: none !important;
}
.gift-catalog-grid {
  width: min(1320px, 94%) !important;
  margin: 0 auto 90px !important;
}
.gift-catalog-card[hidden] { display: none !important; }
.gift-price {
  display: block !important;
  margin: 6px 0 12px !important;
  color: #ffe39a !important;
  font-size: 16px !important;
}
.gift-catalog-card button {
  width: 100% !important;
  border: 0 !important;
  border-radius: 14px !important;
  min-height: 42px !important;
  color: #141006 !important;
  background: linear-gradient(135deg, #fff0a8, #f5c451) !important;
  font-weight: 900 !important;
}

.settings-contact-panel { margin-top: 24px !important; }
.contact-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}
.contact-grid a {
  display: grid !important;
  gap: 8px !important;
  padding: 18px !important;
  border-radius: 20px !important;
  color: #fff !important;
  text-decoration: none !important;
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.11) !important;
}
.contact-grid a:hover {
  border-color: rgba(245,196,81,.42) !important;
  background: rgba(245,196,81,.10) !important;
}
.contact-grid span {
  color: #ffe39a !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  font-weight: 900 !important;
}
.contact-grid strong { overflow-wrap: anywhere !important; }

@media (max-width: 900px) {
  .app-bottom-nav a.mark-tab {
    width: 58px !important;
    height: 58px !important;
    margin: -14px auto 0 !important;
    border-radius: 20px !important;
  }
}
@media (max-width: 760px) {
  .contact-grid { grid-template-columns: 1fr !important; }
  .gift-catalog-grid, .gift-search-panel { width: calc(100vw - 28px) !important; }
}

/* Final professional map and bottom icon pass. */
.app-bottom-nav a span svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  fill: currentColor !important;
}
.app-bottom-nav a[aria-label="Gift"] span,
.app-bottom-nav a[aria-label="Settings"] span {
  color: #ffe39a !important;
  background: rgba(255,255,255,.075) !important;
}
.app-bottom-nav a[aria-label="Gift"].active span,
.app-bottom-nav a[aria-label="Settings"].active span {
  color: #1a1004 !important;
  background: rgba(255,255,255,.24) !important;
}
.app-bottom-nav a.mark-tab {
  justify-self: center !important;
}
.visual-world-map:has(.premium-geo-world),
.visual-world-map.precision-map {
  min-height: 590px !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(74,158,210,.20), transparent 38%),
    linear-gradient(180deg, #06101c 0%, #071a2b 55%, #04101b 100%) !important;
  border: 1px solid rgba(245,196,81,.18) !important;
  box-shadow: inset 0 0 90px rgba(0,0,0,.42), 0 24px 70px rgba(0,0,0,.35) !important;
}
.premium-geo-world {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.28)) !important;
}
.geo-ocean {
  fill: url(#none) !important;
  fill: #0b2637 !important;
}
.geo-country {
  stroke: rgba(238,224,179,.56) !important;
  stroke-width: .45 !important;
  vector-effect: non-scaling-stroke !important;
  opacity: .92 !important;
  transition: opacity .18s ease, filter .18s ease !important;
}
.geo-country:hover {
  opacity: 1 !important;
  filter: brightness(1.18) !important;
}
.geo-pin-layer { pointer-events: auto !important; }
.geo-city-pin {
  fill: rgba(120, 174, 255, .78) !important;
  stroke: rgba(255,255,255,.78) !important;
  stroke-width: .7 !important;
  vector-effect: non-scaling-stroke !important;
  cursor: pointer !important;
  opacity: .74 !important;
  filter: drop-shadow(0 0 4px rgba(77,142,255,.38)) !important;
  transition: r .18s ease, opacity .18s ease, fill .18s ease !important;
}
.geo-city-pin.country-unlocked {
  fill: rgba(255, 217, 118, .94) !important;
  opacity: .95 !important;
  filter: drop-shadow(0 0 7px rgba(245,196,81,.62)) !important;
}
.geo-city-pin.collected {
  fill: #ffd45f !important;
  stroke: #fff4c2 !important;
  opacity: 1 !important;
  filter: drop-shadow(0 0 10px rgba(255,212,95,.86)) !important;
}
.geo-city-pin:hover,
.geo-city-pin:focus {
  fill: #fff4c2 !important;
  opacity: 1 !important;
  outline: none !important;
}
.map-dot { display: none !important; }
.contact-grid-single {
  grid-template-columns: minmax(0, 1fr) !important;
  max-width: 640px !important;
  margin: 0 auto !important;
}
@media (max-width: 760px) {
  .visual-world-map:has(.premium-geo-world),
  .visual-world-map.precision-map { min-height: 380px !important; }
  .geo-city-pin { stroke-width: 1 !important; }
}

/* Final center-logo nav and precision pin cleanup. */
.app-bottom-nav {
  display: grid !important;
  grid-template-columns: minmax(82px,1fr) minmax(82px,1fr) minmax(82px,1fr) 92px minmax(82px,1fr) minmax(82px,1fr) minmax(82px,1fr) !important;
  align-items: center !important;
  justify-items: stretch !important;
  width: min(1060px, calc(100vw - 36px)) !important;
}
.app-bottom-nav a.mark-tab {
  grid-column: 4 !important;
  justify-self: center !important;
  align-self: center !important;
}
.geo-city-pin {
  stroke-width: .45 !important;
  opacity: .92 !important;
  filter: drop-shadow(0 0 3px rgba(135,186,255,.38)) !important;
}
.geo-city-pin.country-unlocked,
.geo-city-pin.collected {
  stroke-width: .55 !important;
  filter: drop-shadow(0 0 5px rgba(255,214,102,.62)) !important;
}
@media (max-width: 900px) {
  .app-bottom-nav {
    grid-template-columns: repeat(3, minmax(0,1fr)) 62px repeat(3, minmax(0,1fr)) !important;
  }
  .app-bottom-nav a.mark-tab { grid-column: 4 !important; }
}

/* Final vault overlap fix and uniform 3+3 bottom navigation. */
.app-bottom-nav a:not(.mark-tab),
.app-bottom-nav a.utility-tab,
.app-bottom-nav a[aria-label="Gift"],
.app-bottom-nav a[aria-label="Settings"] {
  color: #f4edf8 !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.app-bottom-nav a:not(.mark-tab) span,
.app-bottom-nav a.utility-tab span,
.app-bottom-nav a[aria-label="Gift"] span,
.app-bottom-nav a[aria-label="Settings"] span {
  color: #ffe39a !important;
  background: rgba(255,255,255,.075) !important;
  box-shadow: none !important;
}
.app-bottom-nav a.active:not(.mark-tab),
.app-bottom-nav a.utility-tab.active,
.app-bottom-nav a[aria-label="Gift"].active,
.app-bottom-nav a[aria-label="Settings"].active {
  color: #ffe7a3 !important;
  background: linear-gradient(135deg, rgba(120,48,255,.34), rgba(245,196,81,.10)) !important;
  border-color: rgba(245,196,81,.25) !important;
  box-shadow: inset 0 0 28px rgba(126,47,255,.18) !important;
}
.app-bottom-nav a.active:not(.mark-tab) span,
.app-bottom-nav a.utility-tab.active span,
.app-bottom-nav a[aria-label="Gift"].active span,
.app-bottom-nav a[aria-label="Settings"].active span {
  color: #ffe39a !important;
  background: rgba(255,255,255,.075) !important;
}
.vault-experience #collectionList.vault-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, 190px) !important;
  grid-auto-rows: 338px !important;
  gap: 18px !important;
  align-items: start !important;
  justify-content: start !important;
  overflow: visible !important;
}
.vault-experience #collectionList .magnet-card.vault-card {
  width: 190px !important;
  height: 338px !important;
  max-width: 190px !important;
  min-width: 190px !important;
  padding: 10px !important;
  display: grid !important;
  grid-template-rows: 190px auto auto 34px 34px !important;
  gap: 7px !important;
  overflow: hidden !important;
  position: relative !important;
  z-index: 1 !important;
  transform: none !important;
}
.vault-experience #collectionList .magnet-card.vault-card:hover {
  transform: translateY(-3px) !important;
  z-index: 2 !important;
}
.vault-experience #collectionList .magnet-card.vault-card img {
  width: 100% !important;
  height: 190px !important;
  max-height: 190px !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 14px !important;
  background: #05070d !important;
  padding: 0 !important;
  transform: none !important;
}
.vault-experience #collectionList .magnet-card.vault-card p {
  margin: 0 4px !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.vault-experience #collectionList .magnet-card.vault-card .magnet-badge {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.vault-experience #collectionList .magnet-card.vault-card button {
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 10px !important;
  margin: 0 !important;
  font-size: 12px !important;
}
@media (max-width: 760px) {
  .vault-experience #collectionList.vault-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 310px !important;
  }
  .vault-experience #collectionList .magnet-card.vault-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 310px !important;
    grid-template-rows: 168px auto auto 32px 32px !important;
  }
  .vault-experience #collectionList .magnet-card.vault-card img {
    height: 168px !important;
    max-height: 168px !important;
  }
}

/* Clean vault trophy shelf and accurate map projection pass. */
.vault-experience #collectionList.vault-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(154px, 178px)) !important;
  grid-auto-rows: auto !important;
  gap: 18px !important;
  justify-content: start !important;
  align-items: start !important;
  margin-bottom: 90px !important;
}
.vault-trophy-card {
  width: 100% !important;
  min-width: 0 !important;
  height: 292px !important;
  display: grid !important;
  grid-template-rows: 174px minmax(50px, auto) 34px !important;
  gap: 9px !important;
  padding: 10px !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  position: relative !important;
  z-index: 1 !important;
  color: #fff !important;
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.028)) !important;
  border: 1px solid rgba(245,196,81,.18) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.28) !important;
}
.vault-trophy-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(245,196,81,.36) !important;
}
.vault-trophy-art {
  width: 100% !important;
  height: 174px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 16px !important;
  background: #05070d !important;
  overflow: hidden !important;
  cursor: pointer !important;
}
.vault-trophy-art img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: none !important;
}
.vault-trophy-copy {
  min-width: 0 !important;
  padding: 0 2px !important;
}
.vault-trophy-copy h3,
.vault-trophy-copy p {
  margin: 0 !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.vault-trophy-copy h3 {
  font-size: 17px !important;
  line-height: 1.15 !important;
}
.vault-trophy-copy p {
  margin-top: 4px !important;
  color: #c9bed8 !important;
  font-size: 13px !important;
}
.vault-trophy-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 7px !important;
}
.vault-trophy-actions button {
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 8px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  border: 1px solid rgba(245,196,81,.18) !important;
  color: #f8ecff !important;
  background: rgba(255,255,255,.055) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}
.vault-trophy-actions button:hover {
  color: #ffe39a !important;
  background: rgba(245,196,81,.10) !important;
}
.visual-world-map:has(.premium-geo-world),
.visual-world-map.precision-map {
  aspect-ratio: 2 / 1 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
}
.premium-geo-world {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.geo-city-pin {
  r: 1.15 !important;
  fill: rgba(128,184,255,.82) !important;
  stroke: rgba(255,255,255,.65) !important;
  stroke-width: .36 !important;
  opacity: .86 !important;
  filter: none !important;
}
.geo-city-pin.country-unlocked,
.geo-city-pin.collected {
  r: 2.4 !important;
  fill: #ffd45f !important;
  stroke: rgba(255,246,204,.9) !important;
  stroke-width: .45 !important;
  opacity: 1 !important;
  filter: drop-shadow(0 0 4px rgba(255,212,95,.58)) !important;
}
@media (max-width: 760px) {
  .vault-experience #collectionList.vault-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  .vault-trophy-card {
    height: 266px !important;
    grid-template-rows: 150px minmax(48px, auto) 32px !important;
    border-radius: 16px !important;
  }
  .vault-trophy-art { height: 150px !important; }
  .vault-trophy-copy h3 { font-size: 15px !important; }
  .vault-trophy-actions button { height: 32px !important; font-size: 11px !important; }
}

/* Final clean collector-room action button. */
.feature-actions button,
.vault-room-actions button,
.secondary-cta {
  appearance: none !important;
  border: 1px solid rgba(245,196,81,.24) !important;
  border-radius: 999px !important;
  color: #ffe9a6 !important;
  background: linear-gradient(135deg, rgba(120,48,255,.26), rgba(245,196,81,.10)) !important;
  box-shadow: inset 0 0 24px rgba(126,47,255,.16) !important;
  min-height: 44px !important;
  padding: 0 18px !important;
  font-weight: 900 !important;
}
.feature-actions button:hover,
.vault-room-actions button:hover,
.secondary-cta:hover {
  border-color: rgba(245,196,81,.42) !important;
  background: linear-gradient(135deg, rgba(120,48,255,.36), rgba(245,196,81,.16)) !important;
}

/* Hard fix: scratch vault country cards cannot grow or overlap. */
.country-scratch-vault {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(214px, 214px)) !important;
  grid-auto-rows: 314px !important;
  gap: 18px !important;
  justify-content: start !important;
  align-items: start !important;
  overflow: visible !important;
  padding: 8px !important;
}
.scratch-country-card,
.scratch-country-card.is-latest,
.scratch-country-card.reveal-country-card {
  width: 214px !important;
  height: 314px !important;
  min-width: 214px !important;
  max-width: 214px !important;
  min-height: 314px !important;
  max-height: 314px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 168px 1fr !important;
  gap: 10px !important;
  padding: 10px !important;
  overflow: hidden !important;
  position: relative !important;
  z-index: 1 !important;
  border-radius: 20px !important;
  transform: none !important;
}
.scratch-country-card:hover {
  transform: translateY(-2px) !important;
  z-index: 2 !important;
}
.scratch-country-visual {
  width: 100% !important;
  height: 168px !important;
  min-height: 168px !important;
  max-height: 168px !important;
  aspect-ratio: auto !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: #05070d !important;
  display: grid !important;
  place-items: center !important;
}
.scratch-country-visual img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  transform: none !important;
}
.scratch-country-content {
  min-width: 0 !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-rows: auto auto auto 1fr !important;
  align-content: start !important;
}
.scratch-label {
  max-width: 100% !important;
  margin: 0 0 6px !important;
  padding: 5px 8px !important;
  font-size: 9px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.scratch-country-content h3 {
  margin: 0 !important;
  font-size: 22px !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.scratch-country-content p {
  margin: 4px 0 7px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.scratch-city-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 5px !important;
  overflow: auto !important;
  min-height: 0 !important;
  padding-right: 2px !important;
}
.scratch-city-list button {
  width: 100% !important;
  min-height: 26px !important;
  height: 26px !important;
  padding: 0 8px !important;
  margin: 0 !important;
  justify-content: flex-start !important;
  font-size: 11px !important;
  line-height: 1 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}
.scratch-city-list button span {
  min-width: 20px !important;
  flex: 0 0 20px !important;
}
.scratch-cover {
  border-radius: 20px !important;
  pointer-events: auto !important;
}
@media (max-width: 760px) {
  .country-scratch-vault {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 292px !important;
    gap: 12px !important;
  }
  .scratch-country-card,
  .scratch-country-card.is-latest,
  .scratch-country-card.reveal-country-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 292px !important;
    min-height: 292px !important;
    max-height: 292px !important;
    grid-template-rows: 150px 1fr !important;
  }
  .scratch-country-visual {
    height: 150px !important;
    min-height: 150px !important;
    max-height: 150px !important;
  }
}

/* Clean5: premium scratch country cards with full visible magnets. */
#countryScratchVault.country-scratch-vault {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 280px)) !important;
  grid-auto-rows: 438px !important;
  gap: 22px !important;
  justify-content: start !important;
  align-items: start !important;
  width: 100% !important;
  overflow: visible !important;
  padding: 10px !important;
}
#countryScratchVault .scratch-country-card,
#countryScratchVault .scratch-country-card.is-latest,
#countryScratchVault .scratch-country-card.reveal-country-card {
  width: 280px !important;
  height: 438px !important;
  min-width: 280px !important;
  max-width: 280px !important;
  min-height: 438px !important;
  max-height: 438px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 238px 1fr !important;
  gap: 12px !important;
  padding: 14px !important;
  overflow: hidden !important;
  position: relative !important;
  border-radius: 24px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.035)) !important;
  border: 1px solid rgba(245,196,81,.22) !important;
  box-shadow: 0 20px 48px rgba(0,0,0,.32) !important;
  transform: none !important;
}
#countryScratchVault .scratch-country-visual {
  width: 100% !important;
  height: 238px !important;
  min-height: 238px !important;
  max-height: 238px !important;
  aspect-ratio: auto !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  background: #05070d !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}
#countryScratchVault .scratch-country-visual img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 12px !important;
  background: #05070d !important;
  filter: saturate(1.08) contrast(1.02) !important;
  transform: none !important;
}
#countryScratchVault .scratch-country-shine {
  display: none !important;
}
#countryScratchVault .scratch-country-content {
  min-width: 0 !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-rows: auto auto auto 1fr !important;
  align-content: start !important;
}
#countryScratchVault .scratch-label {
  width: 100% !important;
  max-width: 100% !important;
  height: 28px !important;
  margin: 0 0 8px !important;
  padding: 0 10px !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 10px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#countryScratchVault .scratch-country-content h3 {
  margin: 0 !important;
  font-size: 27px !important;
  line-height: 1.04 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#countryScratchVault .scratch-country-content p {
  margin: 5px 0 9px !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#countryScratchVault .scratch-city-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 6px !important;
  overflow: auto !important;
  min-height: 0 !important;
  padding-right: 2px !important;
}
#countryScratchVault .scratch-city-list button {
  width: 100% !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 10px !important;
  margin: 0 !important;
  justify-content: flex-start !important;
  font-size: 13px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#countryScratchVault .scratch-cover {
  border-radius: 24px !important;
}
@media (max-width: 760px) {
  #countryScratchVault.country-scratch-vault {
    grid-template-columns: 1fr !important;
    grid-auto-rows: 420px !important;
    gap: 14px !important;
  }
  #countryScratchVault .scratch-country-card,
  #countryScratchVault .scratch-country-card.is-latest,
  #countryScratchVault .scratch-country-card.reveal-country-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 420px !important;
    min-height: 420px !important;
    max-height: 420px !important;
    grid-template-rows: 224px 1fr !important;
  }
  #countryScratchVault .scratch-country-visual {
    height: 224px !important;
    min-height: 224px !important;
    max-height: 224px !important;
  }
}

/* Clean6: final country scratch card sizing - compact image, readable cities, no bottom cut. */
#countryScratchVault.country-scratch-vault {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 260px)) !important;
  grid-auto-rows: 416px !important;
  gap: 18px !important;
  justify-content: center !important;
  align-items: start !important;
  width: 100% !important;
  padding: 8px 8px 22px !important;
  overflow: visible !important;
}
#countryScratchVault .scratch-country-card,
#countryScratchVault .scratch-country-card.is-latest,
#countryScratchVault .scratch-country-card.reveal-country-card {
  width: 260px !important;
  height: 416px !important;
  min-width: 260px !important;
  max-width: 260px !important;
  min-height: 416px !important;
  max-height: 416px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 174px minmax(0, 1fr) !important;
  gap: 10px !important;
  padding: 12px !important;
  overflow: hidden !important;
  position: relative !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035)) !important;
  border: 1px solid rgba(245,196,81,.24) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.34) !important;
  transform: none !important;
}
#countryScratchVault .scratch-country-card:hover {
  transform: translateY(-2px) !important;
}
#countryScratchVault .scratch-country-visual {
  width: 100% !important;
  height: 174px !important;
  min-height: 174px !important;
  max-height: 174px !important;
  aspect-ratio: auto !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  background: #05070d !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}
#countryScratchVault .scratch-country-visual img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 12px !important;
  background: #05070d !important;
  filter: saturate(1.08) contrast(1.02) !important;
  transform: none !important;
}
#countryScratchVault .scratch-country-shine {
  display: none !important;
}
#countryScratchVault .scratch-country-content {
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-rows: auto auto auto minmax(0, 1fr) !important;
  align-content: start !important;
}
#countryScratchVault .scratch-label {
  width: 100% !important;
  max-width: 100% !important;
  height: 24px !important;
  margin: 0 0 7px !important;
  padding: 0 9px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 9px !important;
  line-height: 1 !important;
  letter-spacing: .08em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#countryScratchVault .scratch-country-content h3 {
  margin: 0 !important;
  font-size: 22px !important;
  line-height: 1.06 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#countryScratchVault .scratch-country-content p {
  margin: 4px 0 8px !important;
  font-size: 12px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#countryScratchVault .scratch-city-list {
  min-height: 0 !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-content: start !important;
  gap: 5px !important;
  padding: 0 !important;
}
#countryScratchVault .scratch-city-list button {
  width: 100% !important;
  height: 25px !important;
  min-height: 25px !important;
  max-height: 25px !important;
  padding: 0 9px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#countryScratchVault .scratch-city-list button span {
  min-width: 22px !important;
  flex: 0 0 22px !important;
  text-align: center !important;
}
#countryScratchVault .scratch-cover {
  border-radius: 22px !important;
}
@media (max-width: 760px) {
  #countryScratchVault.country-scratch-vault {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 368px !important;
    justify-content: stretch !important;
    gap: 12px !important;
  }
  #countryScratchVault .scratch-country-card,
  #countryScratchVault .scratch-country-card.is-latest,
  #countryScratchVault .scratch-country-card.reveal-country-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 368px !important;
    min-height: 368px !important;
    max-height: 368px !important;
    grid-template-rows: 152px minmax(0, 1fr) !important;
    padding: 10px !important;
  }
  #countryScratchVault .scratch-country-visual {
    height: 152px !important;
    min-height: 152px !important;
    max-height: 152px !important;
  }
  #countryScratchVault .scratch-country-content h3 {
    font-size: 20px !important;
  }
  #countryScratchVault .scratch-city-list button {
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    font-size: 11px !important;
  }
}

/* Clean7: country scratch cards sized for 5-city countries without clipping. */
#countryScratchVault.country-scratch-vault {
  grid-template-columns: repeat(auto-fill, minmax(256px, 256px)) !important;
  grid-auto-rows: 420px !important;
  gap: 18px !important;
  justify-content: center !important;
  padding: 8px 8px 28px !important;
}
#countryScratchVault .scratch-country-card,
#countryScratchVault .scratch-country-card.is-latest,
#countryScratchVault .scratch-country-card.reveal-country-card {
  width: 256px !important;
  height: 420px !important;
  min-width: 256px !important;
  max-width: 256px !important;
  min-height: 420px !important;
  max-height: 420px !important;
  grid-template-rows: 158px minmax(0, 1fr) !important;
  gap: 10px !important;
  padding: 12px !important;
}
#countryScratchVault .scratch-country-visual {
  height: 158px !important;
  min-height: 158px !important;
  max-height: 158px !important;
  border-radius: 16px !important;
}
#countryScratchVault .scratch-country-visual img {
  object-fit: contain !important;
  object-position: center center !important;
  width: 100% !important;
  height: 100% !important;
  background: #05070d !important;
}
#countryScratchVault .scratch-country-content {
  grid-template-rows: auto auto auto minmax(0, 1fr) !important;
  overflow: hidden !important;
}
#countryScratchVault .scratch-label {
  height: 23px !important;
  margin-bottom: 6px !important;
  font-size: 9px !important;
}
#countryScratchVault .scratch-country-content h3 {
  font-size: 20px !important;
  line-height: 1.05 !important;
}
#countryScratchVault .scratch-country-content p {
  margin: 4px 0 7px !important;
  font-size: 12px !important;
  line-height: 1.15 !important;
}
#countryScratchVault .scratch-city-list {
  gap: 5px !important;
  overflow: hidden !important;
}
#countryScratchVault .scratch-city-list button {
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  gap: 8px !important;
  padding: 0 9px !important;
  font-size: 11px !important;
}
@media (max-width: 760px) {
  #countryScratchVault.country-scratch-vault {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 356px !important;
    gap: 12px !important;
  }
  #countryScratchVault .scratch-country-card,
  #countryScratchVault .scratch-country-card.is-latest,
  #countryScratchVault .scratch-country-card.reveal-country-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 356px !important;
    min-height: 356px !important;
    max-height: 356px !important;
    grid-template-rows: 132px minmax(0, 1fr) !important;
    padding: 10px !important;
  }
  #countryScratchVault .scratch-country-visual {
    height: 132px !important;
    min-height: 132px !important;
    max-height: 132px !important;
  }
  #countryScratchVault .scratch-country-content h3 {
    font-size: 18px !important;
  }
  #countryScratchVault .scratch-city-list button {
    height: 23px !important;
    min-height: 23px !important;
    max-height: 23px !important;
    font-size: 10px !important;
  }
}