:root{
  color-scheme:dark;
  --bg:#041322;
  --bg-2:#061b31;
  --panel:#08213b;
  --panel-2:#0a2a48;
  --line:#2288b8;
  --line-soft:#1b5f87;
  --cyan:#68deff;
  --cyan-2:#1ebdff;
  --gold:#ffd36b;
  --gold-2:#e6a63a;
  --text:#f3f8ff;
  --muted:#b6cee3;
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.28);
  --font:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-width:320px;
  font-family:var(--font);
  color:var(--text);
  background:
    radial-gradient(circle at 70% 10%, rgba(28,101,157,.35), transparent 28%),
    radial-gradient(circle at 20% 25%, rgba(23,73,118,.22), transparent 22%),
    linear-gradient(180deg,#03111f,#041526 22%,#041423 100%);
}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
img{max-width:100%;display:block}
.skip{position:absolute;left:-10000px}
.skip:focus{left:10px;top:10px;background:#fff;color:#000;padding:10px;z-index:500}
.wrap,.nav-wrap{width:min(1600px,calc(100% - 40px));margin:auto}

.site-header{
  position:sticky;top:0;z-index:50;
  height:68px;
  background:linear-gradient(180deg,rgba(4,22,41,.98),rgba(2,15,28,.96));
  border-bottom:1px solid #1f7cad;
  box-shadow:0 8px 26px rgba(0,0,0,.35);
}
.nav-wrap{
  height:100%;display:flex;align-items:center;gap:18px;
}
.brand{
  display:flex;align-items:center;gap:14px;flex-shrink:0;white-space:nowrap;
  color:#ffe2a0;font:800 clamp(23px,1.8vw,34px) Georgia,serif;
  letter-spacing:.2px;text-shadow:0 0 16px rgba(218,156,56,.55);
}
.brand-emblem{
  width:42px;height:44px;display:grid;place-items:center;
  clip-path:polygon(5% 4%,50% 38%,95% 4%,87% 85%,50% 100%,13% 85%);
  background:linear-gradient(160deg,#fff8d3,#e8a52d);
  color:#08192b;font:bold 29px Georgia;
  box-shadow:0 0 12px rgba(255,205,94,.2);
}
.nav-links{display:flex;align-items:stretch;gap:3px;margin:auto;height:100%}
.nav-links a{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:0 14px;height:100%;white-space:nowrap;
  color:#d4e7f7;font-size:clamp(12px,.82vw,15px);font-weight:800;
  transition:background .18s ease, box-shadow .18s ease, color .18s ease;
}
.nav-links a .nav-icon{
  display:inline-grid;place-items:center;min-width:18px;
  color:#ebf7ff;font-size:clamp(16px,1vw,20px);line-height:1;
  text-shadow:0 0 12px rgba(74,210,255,.28);
}
.nav-links a:hover,.nav-links a.active{
  background:linear-gradient(180deg,#0c3655,#0a5a8d);
  color:#fff;box-shadow:inset 0 -3px 0 #49d8ff,0 5px 18px rgba(43,176,236,.35);
}
.menu-toggle{
  display:none;border:1px solid #2b88b7;border-radius:10px;
  background:#0d3556;color:#e8f6ff;padding:10px 12px;
}
.login,.btn{
  border-radius:12px;display:inline-flex;align-items:center;justify-content:center;
  gap:11px;font-weight:800;text-align:center;cursor:pointer;
  transition:transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.login:hover,.btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.login:focus-visible,.btn:focus-visible,.nav-links a:focus-visible,.menu-toggle:focus-visible,.inline-link:focus-visible{outline:3px solid #9eeeff;outline-offset:3px}
.top-login{
  height:44px;padding:0 18px;white-space:nowrap;font-size:13px;flex-shrink:0;
}
.gold,.top-login{
  color:#161515;
  background:linear-gradient(180deg,#fff3c8 0%,#ffd469 52%,#eeaa34 100%);
  border:1px solid #ffefb5;
  box-shadow:0 0 0 1px rgba(255,214,110,.24),0 0 20px rgba(239,177,57,.42),inset 0 1px 5px rgba(255,250,226,.9);
}
.google-mark{
  font-family:Arial,sans-serif;display:inline-flex;align-items:center;justify-content:center;font-weight:900;font-size:24px;
  background:conic-gradient(#4285f4 0deg 105deg,#34a853 105deg 192deg,#fbbc05 192deg 247deg,#ea4335 247deg 310deg,#4285f4 310deg);
  color:transparent;background-clip:text;-webkit-background-clip:text;filter:drop-shadow(0 1px 1px rgba(255,255,255,.6));
}
.language-switch{border:1px solid #256d95;border-radius:11px;display:flex;padding:4px;gap:3px;flex-shrink:0}
.language-switch button{border:0;background:none;color:#d2e6f6;font-weight:800;padding:8px 11px;border-radius:8px;font-size:12px}
.language-switch button[aria-pressed=true]{background:linear-gradient(#ffeaa6,#f1b43e);color:#081628}
.btn{padding:12px 18px;font-size:14px}
.blue{
  border:1px solid #37c9ff;color:#f2fbff;
  background:linear-gradient(180deg,#10649e,#093a64 56%,#062847);
  box-shadow:0 0 0 1px rgba(40,207,255,.28), inset 0 -2px 1px rgba(79,223,255,.7), 0 0 16px rgba(6,156,255,.36);
}
.action-icon{font-size:20px;line-height:1;color:#76eaff;filter:drop-shadow(0 0 7px rgba(0,200,255,.55))}

.hero{
  position:relative;overflow:hidden;background:#081d35;
  min-height:clamp(330px,29vw,430px);
}
.hero-bg{
  position:absolute;inset:0;
  background:radial-gradient(circle at 76% 28%, rgba(20,97,148,.7), transparent 30%), linear-gradient(180deg,#08203c,#07172d);
}
.hero-overlay{
  position:absolute;inset:0;z-index:2;
  background:linear-gradient(90deg,rgba(2,18,37,.96) 0%,rgba(4,24,46,.92) 17%,rgba(4,28,54,.70) 34%,rgba(6,28,51,.18) 59%,transparent 86%);
}
.hero-content{
  position:relative;z-index:3;display:flex;align-items:center;
  min-height:clamp(330px,29vw,430px);
}
.hero-copy{position:relative;z-index:4;max-width:min(540px,43vw);padding:28px 0 24px}
.eyebrow,.section-kicker{color:var(--cyan);font-size:11px;letter-spacing:2.2px;text-transform:uppercase;font-weight:900}
.hero h1{font:800 clamp(54px,5vw,82px) Georgia,serif;letter-spacing:-2.1px;line-height:1.02;margin:10px 0;color:#ffe7a8;text-shadow:0 4px 16px rgba(0,0,0,.78),0 0 26px rgba(215,157,55,.55)}
.hero h1 span{color:#fff4cf}
.hero-sub{font-size:clamp(12px,.85vw,14px);font-weight:800;letter-spacing:3px;color:#e9f1fb;margin:0}
.hero-body{font-size:clamp(17px,1.12vw,20px);line-height:1.45;max-width:510px;color:#f0f6ff;margin:18px 0 0;text-shadow:0 2px 9px rgba(0,0,0,.75)}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}
.hero-actions .btn{height:50px;font-size:15px}
.hero-login{min-width:300px}
.hero-explore{min-width:246px}
.hint{font-size:12px;color:#c0d9ee;margin:14px 0 0}
.hero-art{
  position:absolute;z-index:1;inset:0;width:100%;
  background:url('../assets/hero-world.jpg') center center/cover no-repeat;
  mask-image:linear-gradient(90deg, transparent 0%, #000 24%);
  filter:saturate(1.08) contrast(1.02);
}

.content{padding-top:14px;padding-bottom:12px}
.mobile-discover{display:none}
.feature-grid{display:grid;grid-template-columns:1.44fr 1fr 1fr;gap:14px;align-items:stretch}
.panel{
  background:linear-gradient(160deg,rgba(10,40,67,.95),rgba(4,24,47,.96));
  border:1px solid var(--line);border-radius:14px;padding:16px 16px 14px;
  box-shadow:inset 0 1px 0 rgba(63,161,214,.24), var(--shadow);
}
.pokedex-panel{background:radial-gradient(circle at 18% 82%, rgba(16,65,103,.65), rgba(7,27,48,.98) 58%), linear-gradient(160deg,rgba(10,40,67,.95),rgba(4,24,47,.96))}
.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;min-height:84px}
.panel h2,.shop-panel h2{font:700 clamp(24px,1.75vw,34px) Georgia,serif;margin:4px 0 6px;display:flex;align-items:center;gap:10px}
.panel p,.shop-heading p{color:#b7d0e5;font-size:14px;line-height:1.4;margin:0}
.panel .section-kicker,.section-kicker{font-size:12px}
.heading-symbol{font-size:28px;color:#ebf7ff;line-height:1}.heading-symbol.cyan{color:#47ddff}
.inline-link{font-size:14px;color:#78e8ff;white-space:nowrap;font-weight:800;border:1px solid #1e7fa9;padding:9px 13px;border-radius:10px;background:rgba(4,20,34,.22)}
.inline-link:hover{box-shadow:0 0 12px rgba(41,188,239,.55)}
.creature-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.creature{
  position:relative;min-width:0;height:202px;padding:11px 10px 12px;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;
  border:1px solid var(--type);border-radius:12px;
  background:radial-gradient(ellipse at 50% 12%, color-mix(in srgb, var(--type) 24%, #15304c), transparent 72%), linear-gradient(160deg,var(--wash),#05182d 86%);
  box-shadow:inset 0 0 18px rgba(10,35,58,.7), 0 0 8px color-mix(in srgb, var(--type) 22%, transparent);
  transition:transform .18s ease, box-shadow .18s ease;
}
.creature:hover{transform:translateY(-3px);box-shadow:0 0 18px color-mix(in srgb, var(--type) 45%, transparent)}
.creature::after{content:'✦';position:absolute;right:8px;top:5px;color:color-mix(in srgb,var(--type) 76%, white);font-size:12px;text-shadow:0 0 8px currentColor}
.creature img{position:absolute;top:10px;height:132px;width:100%;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(0,0,0,.66))}
.creature strong{position:relative;z-index:1;font-size:13px;text-shadow:0 2px 5px rgba(0,0,0,.9)}
.type{position:relative;z-index:1;background:var(--type);font-size:11px;font-weight:900;margin-top:8px;padding:5px 10px;border-radius:8px;color:#fff;box-shadow:0 0 10px color-mix(in srgb,var(--type) 40%, transparent)}
.micro-note{font-size:11px!important;opacity:.75;margin-top:10px!important}
.feature-image{height:184px;border:1px solid #2d89b7;border-radius:12px;position:relative;margin:6px 0 12px;background-position:center;background-size:cover;overflow:hidden;box-shadow:inset 0 0 12px rgba(100,213,243,.12)}
.feature-image::after{content:'';position:absolute;inset:52% 0 0;background:linear-gradient(transparent,rgba(2,24,44,.9));pointer-events:none}
.explore-img{background-image:url('../assets/explore.jpg')}
.battle-img{background-image:url('../assets/battle.jpg')}
.image-label{position:absolute;z-index:2;bottom:10px;left:10px;font-weight:800;font-size:15px;text-shadow:0 1px 7px #000}
.image-features{position:absolute;z-index:2;top:0;bottom:0;right:0;min-width:44%;padding:12px 10px;display:flex;flex-direction:column;justify-content:space-evenly;background:linear-gradient(90deg,rgba(4,27,50,.82),rgba(2,18,36,.96));border-left:1px solid #2f86b1}
.image-features>span{font-size:12px;font-weight:700;display:flex;align-items:center;gap:6px}
.wide-btn{width:100%;height:48px;font-size:16px}
.shop-panel{display:flex;align-items:center;gap:14px;margin-top:14px;padding:14px 16px}
.shop-heading{display:flex;align-items:center;gap:18px;flex:1.15}
.shop-heading>div{flex:1}
.shop-go{border:1px solid #ffe1a1;background:linear-gradient(170deg,#103453,#04182c);color:#fff;padding:12px 16px;white-space:nowrap;box-shadow:0 0 15px rgba(210,157,75,.5),inset 0 -2px #d49e48}
.shop-go .action-icon{font-size:20px;color:#ffdf80}
.shop-items{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;flex:1.25}
.shop-items div{background:linear-gradient(155deg,#123f63,#08223e);border:1px solid #318fc0;border-radius:12px;padding:10px 6px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;min-height:74px;transition:transform .16s ease, box-shadow .16s ease}
.shop-items div:hover{transform:translateY(-2px);box-shadow:0 0 14px rgba(31,186,255,.35)}
.shop-item-icon{font-size:25px;line-height:1.1;filter:drop-shadow(0 0 5px rgba(37,197,247,.46))}
.shop-items strong{font-size:12px}
.final-cta{margin:14px 0 10px;padding:16px 22px;border-radius:14px;border:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:16px;background:radial-gradient(ellipse at 50% 0%, #12395a, #04192f 72%);box-shadow:inset 0 0 24px rgba(18,67,108,.58), var(--shadow);position:relative;overflow:hidden}
.final-cta::before,.final-cta::after{content:'✦';position:absolute;color:#ffd373;text-shadow:0 0 15px #ffca59;opacity:.7;font-size:18px}
.final-cta::before{left:16px;bottom:8px}.final-cta::after{right:20px;top:8px}
.final-cta>*{margin:0}
.final-cta .eyebrow{flex-shrink:0}
.final-cta h2{font:700 clamp(24px,1.65vw,32px) Georgia,serif;color:#ffe7aa;line-height:1.1}
.final-cta p:not(.eyebrow){font-size:13px;color:#bdd4e8;text-align:center;flex:1}
.final-cta .btn{white-space:nowrap;padding:12px 18px;min-height:50px}
.footer{background:#020f20;border-top:1px solid #184f73}
.footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:15px;color:#a5c7e3;font-size:11px;padding:10px 0 14px}
.footer strong{font:bold 16px Georgia;color:#ffd276}

.auth-backdrop[hidden]{display:none!important}
.auth-backdrop{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px;background:rgba(1,13,32,.85);backdrop-filter:blur(7px)}
.auth-dialog{position:relative;width:min(440px,100%);text-align:center;padding:28px 24px;border-color:#b68c42;box-shadow:0 0 24px rgba(195,147,70,.35),0 22px 70px rgba(0,0,0,.58)}
.auth-dialog h2{font:700 28px Georgia,serif;color:#ffe6a5;margin:8px 0}
.auth-dialog p{font-size:12px;color:#bcd7e9;line-height:1.5}
.auth-close{position:absolute;right:9px;top:8px;border:0;background:transparent;color:#fff;font-size:25px}
.auth-icon{color:#ffd470;font-size:30px}
.google-button{min-height:48px;display:grid;place-items:center;margin:15px auto}
.auth-message{min-height:20px}
.auth-open{overflow:hidden}

/* wide desktop */
@media (min-width:1600px){
  .wrap,.nav-wrap{width:min(1680px,calc(100% - 46px))}
  .feature-grid{grid-template-columns:1.5fr 1fr 1fr}
  .hero-copy{max-width:580px}
}

/* laptop / common desktop */
@media (max-width:1365px){
  .wrap,.nav-wrap{width:min(1480px,calc(100% - 28px))}
  .site-header{height:62px}
  .brand{font-size:clamp(22px,2vw,30px)}
  .nav-wrap{gap:12px}
  .nav-links a{padding:0 10px;font-size:12px;gap:6px}
  .top-login{height:40px;padding:0 14px;font-size:12px}
  .language-switch button{padding:7px 10px}
  .hero,.hero-content{min-height:clamp(300px,30vw,380px)}
  .hero-copy{max-width:46vw;padding:22px 0 20px}
  .hero h1{font-size:clamp(46px,5.2vw,68px)}
  .hero-sub{font-size:11px;letter-spacing:2.2px}
  .hero-body{font-size:15px;max-width:460px;margin-top:14px}
  .hero-actions{gap:10px;margin-top:16px}
  .hero-actions .btn{height:46px;font-size:13px}
  .hero-login{min-width:260px}.hero-explore{min-width:210px}
  .feature-grid{gap:10px;grid-template-columns:1.42fr 1fr 1fr}
  .panel{padding:12px}
  .panel-head{min-height:72px}
  .panel h2,.shop-panel h2{font-size:clamp(18px,1.7vw,28px)}
  .panel p,.shop-heading p{font-size:12px}
  .creature{height:172px}.creature img{height:112px}.creature strong{font-size:12px}.type{font-size:10px}
  .feature-image{height:154px}.image-features>span{font-size:10px}.wide-btn{height:42px;font-size:14px}
  .shop-panel{margin-top:10px;padding:12px}.shop-heading{gap:12px}
  .shop-items div{min-height:64px}.shop-items strong{font-size:11px}
  .final-cta{padding:12px 16px;gap:12px}.final-cta h2{font-size:clamp(18px,1.8vw,26px)}.final-cta p:not(.eyebrow){font-size:11px}
}

/* tablet landscape and small laptops */
@media (max-width:1100px){
  .feature-grid{grid-template-columns:1fr 1fr;grid-template-areas:'pokedex pokedex' 'explore battles'}
  .pokedex-panel{grid-area:pokedex}.explore-panel{grid-area:explore}.battles-panel{grid-area:battles}
  .hero-copy{max-width:55vw}
  .hero-art{mask-image:linear-gradient(90deg, transparent 0%, #000 32%)}
  .shop-panel{flex-direction:column;align-items:stretch}
  .shop-heading{width:100%;justify-content:space-between}
  .shop-items{width:100%}
  .final-cta{display:grid;grid-template-columns:auto 1fr auto;align-items:center}
}

/* tablet / mobile nav */
@media (max-width:980px){
  .site-header{height:auto}
  .nav-wrap{padding:10px 0;display:grid;grid-template-columns:auto 1fr auto auto;grid-template-areas:'brand login lang menu' 'nav nav nav nav';align-items:center;row-gap:10px}
  .brand{grid-area:brand;font-size:clamp(22px,3.4vw,28px)}
  .top-login{grid-area:login;justify-self:end}
  .language-switch{grid-area:lang;justify-self:end}
  .menu-toggle{grid-area:menu;display:inline-flex;align-items:center;gap:8px;justify-self:end}
  .nav-links{grid-area:nav;margin:0;display:none;flex-direction:column;height:auto;gap:8px;padding:12px;border:1px solid #1d698f;border-radius:14px;background:linear-gradient(180deg,rgba(6,25,44,.98),rgba(3,16,31,.98));box-shadow:var(--shadow)}
  .nav-links.open{display:flex}
  .nav-links a{height:48px;justify-content:flex-start;padding:0 14px;border:1px solid rgba(34,136,184,.35);border-radius:10px;background:rgba(9,33,54,.62)}
  .hero,.hero-content{min-height:340px}
  .hero-art{background-position:68% center}
  .hero-copy{max-width:62vw}
  .hero h1{font-size:clamp(42px,7vw,58px)}
  .hero-body{font-size:14px;max-width:420px}
  .hero-actions .btn{height:44px;font-size:13px}
  .hero-login{min-width:240px}.hero-explore{min-width:190px}
}

/* mobile */
@media (max-width:768px){
  .wrap,.nav-wrap{width:calc(100% - 24px)}
  .nav-wrap{grid-template-columns:1fr auto auto;grid-template-areas:'brand lang menu' 'login login login' 'nav nav nav'}
  .brand{font-size:clamp(20px,7vw,26px);gap:10px}
  .brand-emblem{width:36px;height:38px;font-size:24px}
  .top-login{width:100%;height:46px;padding:0 12px;justify-content:center}
  .hero{min-height:auto}
  .hero-content{min-height:auto;display:block;padding:20px 0 18px}
  .hero-copy{max-width:none;padding:8px 0 0}
  .hero-overlay{background:linear-gradient(180deg,rgba(4,22,43,.78),rgba(4,24,45,.88) 38%,rgba(5,25,47,.94) 100%)}
  .hero-art{inset:0;background-position:72% center;mask-image:none;opacity:.9}
  .hero h1{font-size:clamp(40px,15vw,62px);line-height:1.02;margin-top:8px}
  .hero-sub{font-size:11px;letter-spacing:2px}
  .hero-body{font-size:15px;max-width:100%;margin-top:12px}
  .hero-actions{flex-direction:column;gap:10px;margin-top:16px}
  .hero-actions .btn,.hero-login,.hero-explore{width:100%;min-width:0;min-height:48px}
  .hint{font-size:12px}
  .content{padding-top:10px}
  .mobile-discover{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px}
  .mobile-tab{border:1px solid #2178a6;border-radius:12px;background:linear-gradient(180deg,#0f365a,#081f3a);color:#dff3ff;padding:10px 6px;font-size:12px;font-weight:800}
  .mobile-tab.is-active{box-shadow:inset 0 -2px 0 #46d7ff,0 0 12px rgba(57,192,255,.3)}
  .feature-grid{grid-template-columns:1fr;grid-template-areas:none;gap:10px}
  .panel{padding:14px}
  .panel-head{min-height:auto;gap:8px}
  .panel h2,.shop-panel h2{font-size:32px}
  .panel p,.shop-heading p{font-size:13px}
  .inline-link{font-size:12px;padding:8px 10px}
  .creature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .creature{height:176px}.creature img{height:112px}
  .explore-panel,.battles-panel,.shop-panel{display:none}
  .explore-panel.is-mobile-visible,.battles-panel.is-mobile-visible,.shop-panel.is-mobile-visible,.pokedex-panel.is-mobile-visible{display:block}
  .feature-image{height:180px}.wide-btn{height:46px}
  .image-features{min-width:46%;padding:10px 8px}.image-features>span{font-size:10px}
  .shop-panel{margin-top:0}
  .shop-heading{flex-direction:column;align-items:flex-start}
  .shop-go{width:100%;justify-content:center}
  .shop-items{grid-template-columns:repeat(2,minmax(0,1fr))}
  .final-cta{display:flex;flex-direction:column;align-items:stretch;text-align:center;padding:16px}
  .final-cta::before,.final-cta::after{display:none}
  .final-cta .eyebrow,.final-cta h2,.final-cta p{width:100%}
  .final-cta p:not(.eyebrow){font-size:13px;text-align:center}
  .final-cta .btn{width:100%;justify-content:center}
  .footer .wrap{flex-direction:column;text-align:center;padding:10px 0 14px}
}

@media (max-width:560px){
  .wrap,.nav-wrap{width:calc(100% - 20px)}
  .nav-wrap{row-gap:8px}
  .language-switch button{padding:7px 9px;font-size:11px}
  .menu-toggle{padding:9px 10px}
  .eyebrow,.section-kicker{font-size:10px;letter-spacing:1.8px}
  .hero h1{font-size:clamp(36px,13vw,54px)}
  .hero-sub{font-size:10px;letter-spacing:1.6px}
  .hero-body{font-size:14px}
  .panel h2,.shop-panel h2{font-size:26px}
  .creature-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .creature{height:166px;padding:10px 8px}.creature img{height:100px;top:12px}.creature strong{font-size:12px}.type{font-size:10px;padding:4px 8px}
  .feature-image{height:168px}
  .shop-items{gap:8px}.shop-items div{min-height:64px}
  .final-cta h2{font-size:clamp(26px,6.3vw,32px)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .login,.btn,.creature,.shop-items div,.nav-links a{transition:none!important;transform:none!important}
}

/* =============================================================
   Mastersmon V2.15.8 | compact visitor, same proportions as lobby
   Desktop is centered, readable and compact; mobile remains fluid.
   ============================================================= */
:root { --radius: 10px; }
@media (min-width: 1101px) {
  .wrap { width: min(1510px, calc(100% - 56px)); }
  .nav-wrap { width: min(1510px, calc(100% - 48px)); gap: 10px; }
  .site-header { height: 56px; }
  .brand { font-size: clamp(23px, 1.65vw, 29px); gap: 9px; }
  .brand-emblem { width: 36px; height: 38px; font-size: 25px; }
  .nav-links { gap: 0; }
  .nav-links a { padding: 0 clamp(7px, .72vw, 12px); font-size: 12px; gap: 6px; }
  .nav-links a .nav-icon { font-size: 17px; min-width: 17px; }
  .top-login { height: 38px; padding: 0 12px; font-size: 11px; }
  .top-login .google-mark { font-size: 19px; }
  .language-switch { padding: 3px; }
  .language-switch button { padding: 6px 9px; font-size: 11px; }
  .hero, .hero-content { min-height: clamp(255px, 19vw, 306px); }
  .hero-copy { max-width: 530px; padding: 16px 0 14px; }
  .eyebrow { font-size: 10px; letter-spacing: 1.8px; }
  .hero h1 { font-size: clamp(46px, 3.9vw, 65px); line-height: 1.02; margin: 5px 0 9px; }
  .hero-sub { font-size: 10px; letter-spacing: 1.8px; }
  .hero-body { font-size: clamp(13px, .85vw, 15px); line-height: 1.36; max-width: 460px; margin-top: 10px; }
  .hero-actions { margin-top: 14px; gap: 10px; flex-wrap: nowrap; }
  .hero-actions .btn { height: 42px; font-size: 12px; padding: 8px 13px; white-space: nowrap; gap: 9px; }
  .hero-login { min-width: 242px; }
  .hero-explore { min-width: 191px; }
  .hero-actions .google-mark { font-size: 20px; }
  .hint { margin-top: 9px; font-size: 10px; }
  .hero-overlay { background: linear-gradient(90deg, rgba(2,18,37,.97) 0%, rgba(4,24,46,.89) 18%, rgba(4,28,54,.61) 37%, rgba(6,28,51,.12) 62%, transparent 87%); }
  .content { padding-top: 8px; padding-bottom: 6px; }
  .feature-grid { grid-template-columns: 1.6fr 1fr 1fr; gap: 9px; }
  .panel { border-radius: 9px; padding: 10px 11px; }
  .panel-head { min-height: 62px; }
  .panel h2, .shop-panel h2 { font-size: clamp(18px, 1.22vw, 22px); margin: 2px 0 3px; gap: 7px; }
  .heading-symbol { font-size: 21px; }
  .panel .section-kicker, .section-kicker { font-size: 9px; letter-spacing: 1.5px; }
  .panel p, .shop-heading p { font-size: 11px; line-height: 1.32; }
  .inline-link { font-size: 10px; padding: 6px 8px; border-radius: 6px; }
  .creature-grid { gap: 7px; }
  .creature { height: clamp(143px, 10.15vw, 165px); border-radius: 8px; padding: 7px 5px 9px; }
  .creature img { top: 5px; height: 67%; }
  .creature strong { font-size: 11px; }
  .type { font-size: 9px; margin-top: 5px; padding: 3px 7px; border-radius: 6px; }
  .micro-note { font-size: 9px!important; margin-top: 6px!important; }
  .feature-image { height: clamp(141px, 10.5vw, 169px); margin: 3px 0 8px; border-radius: 7px; }
  .image-label { font-size: 11px; left: 7px; bottom: 6px; }
  .image-features { padding: 6px; min-width: 43%; }
  .image-features > span { font-size: 9px; gap: 4px; }
  .wide-btn { height: 37px; font-size: 12px; }
  .shop-panel { margin-top: 8px; padding: 8px 12px; gap: 10px; }
  .shop-heading { gap: 10px; flex: 1.08; }
  .shop-heading h2 { font-size: 17px; }
  .shop-go { padding: 8px 10px; font-size: 11px; }
  .shop-go .action-icon { font-size: 16px; }
  .shop-items { gap: 7px; flex: 1.22; }
  .shop-items div { min-height: 52px; padding: 5px 4px; border-radius: 8px; gap: 2px; }
  .shop-item-icon { font-size: 19px; }
  .shop-items strong { font-size: 10px; }
  .final-cta { margin: 8px 0 6px; padding: 9px 15px; gap: 10px; min-height: 57px; border-radius: 9px; }
  .final-cta .eyebrow { font-size: 9px; letter-spacing: 1px; }
  .final-cta h2 { font-size: clamp(17px, 1.3vw, 22px); }
  .final-cta p:not(.eyebrow) { font-size: 10px; }
  .final-cta .btn { min-height: 38px; padding: 7px 11px; font-size: 11px; }
  .final-cta .google-mark { font-size: 18px; }
  .footer .wrap { padding: 5px 0 7px; }
}
@media (min-width: 1101px) and (max-width: 1365px) {
  .wrap { width: calc(100% - 40px); }
  .nav-wrap { width: calc(100% - 34px); gap: 6px; }
  .brand { font-size: 22px; }
  .nav-links a { padding: 0 6px; font-size: 11px; gap: 4px; }
  .nav-links a .nav-icon { font-size: 15px; min-width: 15px; }
  .hero, .hero-content { min-height: 270px; }
  .hero-copy { max-width: 510px; }
  .hero h1 { font-size: 49px; }
  .hero-actions .btn { height: 40px; font-size: 11px; }
  .hero-login { min-width: 226px; }
  .hero-explore { min-width: 180px; }
  .feature-grid { grid-template-columns: 1.65fr 1fr 1fr; gap: 8px; }
  .panel { padding: 9px; }
  .panel-head { min-height: 57px; }
  .panel h2 { font-size: 17px; }
  .creature { height: 139px; }
  .feature-image { height: 137px; }
  .wide-btn { height: 35px; }
  .image-features > span { font-size: 8.5px; }
}
/* Tablet: show the same structure as before, but avoid large gaps. */
@media (min-width: 769px) and (max-width: 1100px) {
  .wrap, .nav-wrap { width: calc(100% - 30px); }
  .hero, .hero-content { min-height: 288px; }
  .hero h1 { font-size: clamp(42px, 5.5vw, 55px); }
  .hero-copy { max-width: 550px; }
  .hero-actions { flex-wrap: nowrap; gap: 8px; }
  .hero-login { min-width: 205px; }
  .hero-explore { min-width: 173px; }
  .hero-actions .btn { font-size: 11px; padding: 9px; }
  .content { padding-top: 10px; }
  .feature-grid { gap: 10px; }
  .creature { height: 165px; }
  .panel h2 { font-size: 22px; }
  .shop-items div { min-height: 59px; }
}
/* Phone: retain clear touch targets; no horizontal overflow. */
@media (max-width: 768px) {
  .wrap,.nav-wrap { width: calc(100% - 22px); }
  .hero-content { padding: 15px 0 18px; }
  .hero h1 { font-size: clamp(36px, 12vw, 55px); }
  .panel { padding: 12px; border-radius: 10px; }
  .panel h2,.shop-panel h2 { font-size: clamp(22px, 5.7vw, 28px); }
  .creature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .creature { height: 166px; }
  .hero-actions .btn { min-height: 46px; }
  .shop-items { gap: 7px; }
}


/* Mastersmon V2.15.9: final visual refinements and isolated mobile layout. */
@media (min-width: 769px) {
  .hero-overlay {
    background:linear-gradient(90deg,rgba(2,15,31,.99) 0%,rgba(3,20,39,.95) 16%,rgba(3,22,45,.83) 28%,rgba(4,27,52,.38) 46%,rgba(5,27,51,.04) 75%);
  }
  .hero-copy { isolation:isolate; }
  .hero h1 { text-shadow:0 3px 18px #00101ef2,0 0 22px #c7933888; }
  .nav-links a .nav-icon { filter:drop-shadow(0 0 4px #59ccff55); }
  .feature-image { isolation:isolate; }
}
@media (min-width: 1101px) {
  .panel .micro-note { font-size:10px!important; }
  .panel p,.shop-heading p { font-size:12px; }
  .creature strong { font-size:12px; }
  .type { font-size:10px; }
  .inline-link { font-size:11px; }
  .final-cta p:not(.eyebrow) { font-size:11px; }
  .footer .wrap>span { display:none; }
}

/* Mobile renders one section at a time, no inherited tablet grid areas. */
@media (max-width: 768px) {
  html,body { max-width:100%;overflow-x:clip; }
  body { min-width:320px; }
  .site-header { position:relative;top:auto;height:auto; }
  .nav-wrap { width:calc(100% - 24px);padding:9px 0 10px;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:'brand lang menu' 'login login login' 'nav nav nav';gap:8px; }
  .brand { min-width:0;gap:7px;font-size:clamp(18px,5.9vw,25px);letter-spacing:-.5px; }
  .brand-emblem { width:30px;height:33px;font-size:21px;flex:0 0 auto; }
  .language-switch { padding:2px;gap:1px; }
  .language-switch button { padding:7px 8px; }
  .menu-toggle { padding:8px 10px;min-height:38px;font-size:14px; }
  .top-login { grid-area:login;height:42px;width:100%;padding:0 10px;font-size:12px; }
  .top-login .google-mark { font-size:18px; }
  .nav-links { position:static;min-width:0;max-width:100%;z-index:40; }
  .nav-links.open { display:flex; }
  .nav-links a { min-height:44px; }

  .hero,.hero-content { min-height:0;height:auto; }
  .hero-content { padding:0 0 16px; }
  .hero-art { background-position:68% center;opacity:.83;mask-image:none; }
  .hero-overlay { background:linear-gradient(90deg,rgba(2,15,31,.93),rgba(3,21,41,.75) 75%,rgba(3,23,43,.6)),linear-gradient(180deg,rgba(2,17,35,.18),rgba(2,15,32,.48)); }
  .hero-copy { position:relative;z-index:5;width:100%;max-width:100%;padding:20px 0 0; }
  .hero .eyebrow { font-size:10px;letter-spacing:1.35px;margin:0 0 7px; }
  .hero h1 { font-size:clamp(36px,10.8vw,52px);line-height:1.04;letter-spacing:-1.3px;max-width:100%;margin:5px 0 10px;text-shadow:0 3px 12px #001120,0 0 22px #001120; }
  .hero-sub { font-size:10px;letter-spacing:1.1px;line-height:1.5; }
  .hero-body { margin:11px 0 0;font-size:13px;line-height:1.4;max-width:96%;text-shadow:0 2px 8px #001120; }
  .hero-actions { display:grid;grid-template-columns:minmax(0,1fr);margin-top:13px;gap:8px;width:100%; }
  .hero-actions .btn,.hero-login,.hero-explore { min-width:0!important;width:100%;height:43px;min-height:43px;font-size:12px;gap:8px;white-space:normal; }
  .hero-actions .google-mark { font-size:20px; }
  .hero-actions .action-icon { font-size:18px; }
  .hint { margin:9px 0 0;font-size:10px;line-height:1.4; }

  .content { padding:10px 0 8px; }
  .mobile-discover { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0 0 10px; }
  .mobile-tab { padding:9px 3px;min-width:0;min-height:39px;border-radius:9px;font-size:clamp(10px,2.7vw,12px);white-space:nowrap; }
  .feature-grid { display:block!important;grid-template-columns:none!important;grid-template-rows:none!important;grid-template-areas:none!important;position:static!important;min-height:0!important;height:auto!important;overflow:visible!important; }
  .feature-grid > .panel { grid-area:auto!important;position:relative!important;inset:auto!important;transform:none!important;width:100%!important;min-width:0!important;height:auto!important;margin:0!important; }
  .feature-grid > .panel:not(.is-mobile-visible) { display:none!important; }
  .feature-grid > .panel.is-mobile-visible { display:block!important; }
  .panel { border-radius:10px;padding:12px; }
  .panel-head { min-height:0!important;margin-bottom:9px;align-items:flex-start; }
  .panel h2,.shop-panel h2 { font-size:clamp(19px,5.4vw,24px);margin:3px 0 4px;line-height:1.18; }
  .heading-symbol { font-size:20px; }
  .panel .section-kicker,.section-kicker { font-size:9px;letter-spacing:1.3px; }
  .panel p,.shop-heading p { font-size:11px;line-height:1.45; }
  .inline-link { font-size:10px;padding:6px 7px;white-space:nowrap; }
  .creature-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px; }
  .creature { height:156px;padding:6px 5px 9px;border-radius:9px; }
  .creature img { top:8px;height:103px; }
  .creature strong { font-size:12px; }
  .type { font-size:10px;padding:4px 7px;margin-top:4px; }
  .micro-note { margin-top:9px!important;font-size:10px!important; }
  .feature-image { height:190px!important;margin:6px 0 10px;overflow:hidden;position:relative; }
  .image-label { font-size:11px; }
  .image-features { min-width:48%;padding:6px; }
  .image-features>span { font-size:10px;line-height:1.2; }
  .wide-btn { min-height:44px;height:44px;font-size:13px; }
  .shop-panel { display:none!important;margin:0!important;position:relative!important; }
  .shop-panel.is-mobile-visible { display:flex!important;flex-direction:column;align-items:stretch;gap:12px; }
  .shop-heading { flex-direction:column;align-items:stretch;gap:9px; }
  .shop-go { width:100%;min-height:42px;justify-content:center;font-size:12px; }
  .shop-items { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }
  .shop-items div { min-height:66px; }
  .final-cta { margin:10px 0 8px;display:flex;flex-direction:column;gap:10px;padding:15px 12px;text-align:center; }
  .final-cta .eyebrow { font-size:9px; }
  .final-cta h2 { width:100%;font-size:clamp(20px,6vw,27px);line-height:1.15; }
  .final-cta p:not(.eyebrow) { font-size:11px; }
  .final-cta .btn { width:100%;min-height:44px;height:44px;font-size:12px; }
  .footer .wrap { padding:10px 0 14px;gap:6px; }
  .footer .wrap>span { display:none; }
}
@media (max-width: 360px) {
  .brand { font-size:18px; }
  .brand-emblem { width:27px;height:30px; }
  .hero h1 { font-size:35px; }
  .mobile-tab { font-size:9.5px; }
  .image-features>span { font-size:9px; }
}


/* ===== Mastersmon V2.16.0 - Unified iconography and hero readability ===== */
.ui-icon{display:inline-block;vertical-align:middle;flex:none;width:20px;height:20px;object-fit:contain;filter:drop-shadow(0 0 5px rgba(50,190,250,.32))}
.nav-links .nav-svg{width:19px;height:19px;filter:drop-shadow(0 0 7px rgba(62,184,245,.54))}
.nav-links a .nav-icon{display:inline-flex!important;align-items:center;justify-content:center;min-width:20px;line-height:1}
.heading-svg{width:23px;height:23px}
.action-svg{width:19px;height:19px}
.shop-svg{width:27px;height:27px;filter:drop-shadow(0 0 7px rgba(121,191,250,.44))}
.feature-svg{width:17px;height:17px;margin-right:3px}
.tab-svg{width:16px;height:16px}
.mobile-tab{display:flex;align-items:center;justify-content:center;gap:5px}
.hero-overlay{background:linear-gradient(90deg,rgba(2,13,29,1) 0%,rgba(2,16,35,.98) 12%,rgba(3,20,39,.97) 24%,rgba(3,20,39,.83) 33%,rgba(4,26,47,.38) 46%,rgba(4,26,47,0) 66%)!important}
.hero-copy{position:relative;isolation:isolate}
.hero-copy::before{content:'';position:absolute;z-index:-1;inset:-18px -30px -18px -22px;background:linear-gradient(90deg,rgba(1,13,30,.53),rgba(1,14,30,.24) 72%,transparent);pointer-events:none}
.hero h1{color:#ffe6a6;text-shadow:0 2px 15px #000,0 0 17px rgba(214,155,62,.45)}
.hero .eyebrow{color:#85e9ff;text-shadow:0 1px 5px #06101b}
.hero-sub{color:#ebf7ff;text-shadow:0 1px 4px #06101b}
.hero-body{color:#f2f8ff;text-shadow:0 2px 7px #000;line-height:1.45}
.panel h2{color:#f7f6ff;letter-spacing:.1px}
.panel .section-kicker{color:#71e4ff}
.panel .image-features>span{align-items:center}
.btn.blue{background:linear-gradient(180deg,#155f99 0%,#093a6b 55%,#041e3b 100%);border-color:#57d5ff;box-shadow:inset 0 -2px rgba(85,225,255,.85),0 0 0 1px rgba(55,202,255,.2),0 0 12px rgba(20,168,242,.48)}
.btn.gold,.top-login{background:linear-gradient(180deg,#fff3c1,#ffd671 56%,#eaa23d);box-shadow:inset 0 1px 5px rgba(255,255,255,.8),0 0 0 1px rgba(255,219,130,.25),0 0 14px rgba(243,176,63,.53)}
.shop-items>div{border-color:#258dc4;background:linear-gradient(160deg,#0a3558,#08203a)}
.final-cta .btn{font-weight:850}
@media(min-width:769px){.hero-art{background-position:61% center}.hero-copy::before{inset:-18px -32px -18px -22px}}
@media(max-width:768px){
  .hero-overlay{background:linear-gradient(90deg,rgba(2,13,29,.96),rgba(3,19,37,.85) 60%,rgba(3,19,37,.66)),linear-gradient(180deg,rgba(2,15,30,.32),rgba(2,15,30,.62))!important}
  .hero-copy::before{inset:-5px -8px -8px;background:linear-gradient(90deg,rgba(2,14,30,.32),rgba(2,14,30,.05))}
  .nav-svg{width:19px;height:19px}
  .tab-svg{width:15px;height:15px}
  .mobile-tab{gap:3px}
  .tab-label{font-size:inherit;white-space:nowrap}
  .heading-svg{width:22px;height:22px}
  .shop-svg{width:28px;height:28px}
}
@media(max-width:360px){.tab-svg{width:13px;height:13px}.mobile-tab{gap:2px}}

/* ================================================================
   Mastersmon V2.16.1 | Hero split composition & accessibility polish
   Keep existing navigation, login, i18n, cards and mobile tabs.
   ================================================================ */
.hero { background: #04172b; isolation: isolate; }
.hero-bg { background:linear-gradient(100deg,#031326 0%,#061b35 40%,#082d4c 100%); }
/* On desktop the illustration occupies the right side only, so map
   labels cannot appear under the hero heading or supporting copy. */
@media (min-width: 769px) {
  .hero-art {
    inset: 0 0 0 auto;
    width: 100%;
    background-position: center 51% !important;
    background-size: cover;
    opacity: 1;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    clip-path: polygon(37% 0,100% 0,100% 100%,37% 100%);
  }
  .hero-overlay {
    z-index: 2;
    background:linear-gradient(90deg,#031326 0%,#031326 31%,rgba(3,19,38,.95) 36%,rgba(3,19,38,.45) 43%,transparent 52%) !important;
  }
  .hero-content { position:relative; }
  .hero-copy {
    width: min(40%, 560px);
    max-width: 560px;
    padding-right: 12px;
    text-shadow: none;
  }
  .hero-copy::before { display:none; }
  .hero h1 { white-space:nowrap;font-size:clamp(39px,4vw,63px);letter-spacing:-1.6px; }
  .hero .eyebrow {font-size:clamp(9px,.8vw,12px);letter-spacing:2px;}
  .hero-sub {font-size:clamp(9px,.82vw,12px);letter-spacing:1.8px;}
  .hero-body {max-width:480px;font-size:clamp(13px,1.02vw,17px);line-height:1.48;}
  .hero-actions {gap:10px;flex-wrap:nowrap;align-items:stretch;}
  .hero-actions .btn {min-width:0 !important;height:44px;padding:9px 12px;flex:1 1 0;white-space:nowrap;font-size:clamp(10px,.78vw,13px);gap:8px;}
  .hero-actions .hero-login {flex:1.17 1 0;}
  .hero-actions .hero-explore {flex:1 1 0;}
  .hero-actions .google-mark {font-size:22px;}
  .hero-actions .action-svg {width:21px;height:21px;}
  .hint {font-size:clamp(10px,.75vw,12px);line-height:1.4;}
}
/* Laptop: give copy enough width without growing the compact hero. */
@media (min-width:769px) and (max-width:1399px) {
  .hero-art {clip-path:polygon(42% 0,100% 0,100% 100%,42% 100%);}
  .hero-overlay {background:linear-gradient(90deg,#031326 0%,#031326 34%,rgba(3,19,38,.91) 41%,rgba(3,19,38,.36) 49%,transparent 59%) !important;}
  .hero-copy {width:43%;max-width:510px;}
  .hero h1 {font-size:clamp(38px,4.1vw,55px);}
  .hero-actions .btn {font-size:11px;padding:8px 9px;}
}
/* Tablet/phone: landscape art becomes its own row, not a background
   crossing the text. No overlap with the mobile section selector. */
@media (max-width:768px) {
  .hero,.hero-content {min-height:0!important;height:auto!important;}
  .hero-content {display:flex!important;flex-direction:column-reverse;align-items:stretch;padding:0 0 14px!important;}
  .hero-art {
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:clamp(125px,43vw,205px);
    flex:0 0 auto;
    background-position:66% center!important;
    background-size:cover;
    opacity:1!important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
    clip-path:none!important;
    border-bottom:1px solid rgba(64,176,225,.45);
  }
  .hero-overlay {display:none!important;}
  .hero-copy {
    width:100%!important;max-width:none!important;
    padding:16px 0 2px!important;
    background:transparent;
    isolation:isolate;
  }
  .hero-copy::before {display:none!important;}
  .hero .eyebrow {color:#80e5ff!important;letter-spacing:1.35px;font-size:10px;}
  .hero h1 {color:#ffe3a0;font-size:clamp(36px,10.3vw,51px)!important;margin:6px 0 9px!important;}
  .hero-sub {color:#d9edff!important;letter-spacing:1.5px;font-size:10px;}
  .hero-body {color:#f1f6fd!important;font-size:13px;line-height:1.5;max-width:100%;margin-top:11px;}
  .hero-actions {display:grid!important;grid-template-columns:1fr;gap:9px;}
  .hero-actions .btn {min-height:46px!important;white-space:normal;}
  .hint {font-size:11px;}
}
/* Fine details consistent with the character creation/lobby UI. */
.hero .eyebrow,.hero-sub {font-weight:800;}
.hero-body {font-weight:450;}
.hero h1 {text-shadow:0 2px 9px rgba(0,0,0,.65),0 0 16px rgba(228,178,83,.25);}
.btn.blue:hover,.shop-go:hover {box-shadow:inset 0 -2px rgba(85,225,255,.85),0 0 0 1px rgba(55,202,255,.35),0 0 19px rgba(20,168,242,.68);}
.btn.gold:hover,.top-login:hover {box-shadow:inset 0 1px 5px rgba(255,255,255,.8),0 0 0 1px rgba(255,219,130,.42),0 0 19px rgba(243,176,63,.72);}

/* ============================================================
   Mastersmon V2.16.2 - Visitor preview / soft split hero
   Public landing: only Google entry is actionable.
   ============================================================ */
/* Replace the abrupt edge with a spacious readable blue-black area. */
.hero { background: #04152b; overflow: hidden; }
.hero-bg { background: linear-gradient(90deg,#031326,#051b34 48%,#08253f 100%); }
.hero .hero-art { pointer-events:none; }
@media (min-width:769px) {
  .hero .hero-art {
    inset:0 0 0 auto!important;width:100%!important;
    clip-path:none!important;
    background-position:center 48%!important;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 32%,rgba(0,0,0,.14) 40%,rgba(0,0,0,.86) 53%,#000 65%)!important;
    mask-image:linear-gradient(90deg,transparent 0%,transparent 32%,rgba(0,0,0,.14) 40%,rgba(0,0,0,.86) 53%,#000 65%)!important;
  }
  .hero .hero-overlay {
    background:linear-gradient(90deg,#031326 0%,rgba(3,19,38,.99) 24%,rgba(3,19,38,.82) 34%,rgba(3,19,38,.2) 53%,transparent 68%)!important;
  }
  .hero .hero-copy{ width:min(44%,570px)!important;max-width:570px!important; padding-right:16px!important; }
  .hero .hero-actions{justify-content:flex-start!important;}
  .hero .hero-actions .hero-login{flex:0 1 auto!important;min-width:244px!important;padding:10px 19px!important;}
}
@media (min-width:769px) and (max-width:1399px){
  .hero .hero-copy{width:min(47%,520px)!important;}
  .hero .hero-art{
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 36%,rgba(0,0,0,.17) 44%,#000 64%)!important;
    mask-image:linear-gradient(90deg,transparent 0%,transparent 36%,rgba(0,0,0,.17) 44%,#000 64%)!important;
  }
  .hero .hero-actions .hero-login{min-width:230px!important;}
}
/* Make showcase informational rather than looking like inactive controls. */
.panel-head:has(.inline-link){gap:10px}
.explore-panel .feature-image,.battles-panel .feature-image{margin-bottom:0!important;}
.explore-panel,.battles-panel{display:flex;flex-direction:column;}
.explore-panel .feature-image,.battles-panel .feature-image{flex:1;min-height:150px;}
.shop-heading{min-width:0;}
.shop-items{flex:1.35;}
.site-header .nav-links a[href="#"]{cursor:default;}
/* A single, deliberately prominent sign-in action in the hero. */
.hero-actions .hero-login {box-shadow:0 0 18px rgba(255,202,79,.55),inset 0 1px 6px rgba(255,255,255,.78);}
.hero h1 {text-shadow:0 3px 15px rgba(0,0,0,.65),0 0 20px rgba(241,184,66,.26);}
.hero .eyebrow,.hero-sub {letter-spacing:1.7px;}
.hero-body {max-width:460px;}
@media(max-width:768px){
  .hero .hero-art {mask-image:none!important;-webkit-mask-image:none!important;clip-path:none!important;}
  .hero .hero-actions {display:flex!important;flex-direction:column!important;}
  .hero .hero-actions .hero-login{width:100%!important;min-width:0!important;}
  .explore-panel,.battles-panel{display:none!important;}
  .explore-panel.is-mobile-visible,.battles-panel.is-mobile-visible{display:flex!important;}
  .shop-panel.is-mobile-visible{display:flex!important;}
  .explore-panel .feature-image,.battles-panel .feature-image{flex:none;min-height:0;height:185px!important;}
  .shop-items{width:100%;}
  .hero-body{max-width:100%;}
}

/* =============================================================
   Mastersmon V2.16.3 - Full world illustration and clean footer
   IMPORTANT: retain visitor-only links and real Google sign-in.
   ============================================================= */
/* Allow footer to sit at the bottom rather than leaving a dark
   empty block after the end of the page on taller displays. */
html { min-height:100%; }
body { min-height:100vh; min-height:100svh; display:flex; flex-direction:column; }
body > main { flex:1 0 auto; }
body > .footer { flex:0 0 auto; }

/* Desktop/laptop: preserve ALL of the original illustrated map.
   The image includes baked-in landscape labels; do not enlarge it
   using background-size:cover or hide part via clip-path/mask. */
@media (min-width:769px) {
  .hero { position:relative; isolation:isolate; background:#06182b; }
  .hero .hero-art {
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    opacity:1!important;
    background-image:url('../assets/hero-world.jpg')!important;
    background-size:100% 100%!important;
    background-position:center center!important;
    background-repeat:no-repeat!important;
    clip-path:none!important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
    filter:saturate(1.05) contrast(1.02)!important;
  }
  /* Fade the left edge without altering the world illustration or
     introducing a hard vertical dividing line. */
  .hero .hero-overlay {
    position:absolute!important;
    inset:0!important;
    z-index:2!important;
    display:block!important;
    background:linear-gradient(90deg,
      #031326 0%,
      rgba(3,19,38,.995) 11%,
      rgba(3,19,38,.97) 24%,
      rgba(3,19,38,.81) 32%,
      rgba(3,19,38,.45) 40%,
      rgba(3,19,38,.10) 53%,
      transparent 67%)!important;
  }
  .hero .hero-copy {
    position:relative;
    z-index:4;
    width:min(44%,580px)!important;
    max-width:580px!important;
  }
  .hero .hero-copy::before {display:none!important;}
  .hero .eyebrow,.hero .hero-sub,.hero .hero-body,.hero .hint {
    text-shadow:0 2px 7px rgba(0,0,0,.85);
  }
}
@media (min-width:769px) and (max-width:1399px){
  .hero .hero-copy {width:min(47%,520px)!important;}
  .hero .hero-overlay {
    background:linear-gradient(90deg,
      #031326 0%,rgba(3,19,38,.98) 15%,
      rgba(3,19,38,.93) 27%,rgba(3,19,38,.75) 35%,
      rgba(3,19,38,.23) 51%,transparent 68%)!important;
  }
}
/* Mobile retains a dedicated image row and no overlapping panels. */
@media (max-width:768px){
  .hero .hero-art {
    background-image:url('../assets/hero-world.jpg')!important;
    background-position:center!important;
    background-size:100% 100%!important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
    clip-path:none!important;
  }
  .hero .hero-overlay {display:none!important;}
  .hero .hero-copy { background:transparent; }
}


/* ===============================================
   MASTERSMON V2.16.4 - Framed scenic hero / clean flow
   This final override fixes the unexpected edge gap,
   restores map readability, and avoids forced-footer voids.
   =============================================== */
html {min-height:100%;}
body {display:block!important;min-height:100vh!important;}
body > main {flex:none!important;}
body > .footer {flex:none!important;margin-top:8px;}

/* The hero uses precisely the same centered bounds as the cards. */
@media (min-width:769px) {
  .hero {position:relative!important;isolation:isolate!important;overflow:hidden!important;
    background:linear-gradient(90deg,#04172c,#071c34)!important;
    min-height:0!important;height:auto!important;padding:0!important;}
  .hero .hero-content.wrap {position:relative!important;isolation:isolate!important;
    min-height:clamp(258px,20.2vw,342px)!important;height:auto!important;
    width:min(1600px,calc(100% - 40px))!important;
    margin:0 auto!important;display:flex!important;align-items:center!important;
    overflow:hidden!important;padding:0 0 0 0!important;}
  .hero .hero-art {position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
    background-image:url('../assets/hero-world.jpg')!important;
    background-position:center center!important;background-size:100% 100%!important;
    background-repeat:no-repeat!important;
    opacity:1!important;filter:saturate(1.07) contrast(1.04)!important;
    clip-path:none!important;mask-image:none!important;-webkit-mask-image:none!important;
    z-index:0!important;transform:none!important;}
  .hero .hero-overlay {display:none!important;}
  /* Instead of a hard split, a left-hand scenic scrim follows the artwork. */
  .hero .hero-content.wrap::before {content:''!important;position:absolute!important;inset:0!important;
    z-index:1!important;pointer-events:none!important;display:block!important;
    background:linear-gradient(90deg,
      rgba(2,15,33,.99) 0%,rgba(2,17,35,.98) 9%,
      rgba(2,18,38,.94) 22%,rgba(2,19,38,.82) 31%,
      rgba(2,21,42,.60) 39%,rgba(2,21,42,.19) 53%,
      rgba(2,21,42,0) 68%)!important;}
  .hero .hero-copy {z-index:2!important;position:relative!important;
    width:min(48%,560px)!important;max-width:560px!important;
    padding:22px 16px 21px 18px!important;
    min-height:0!important;overflow:visible!important;}
  .hero .hero-copy::before {display:none!important;}
  .hero .hero-copy .eyebrow {color:#8beaff!important;font-size:11px!important;
    letter-spacing:1.5px!important;text-shadow:0 1px 4px #031426!important;}
  .hero .hero-copy h1 {font-size:clamp(47px,4.1vw,67px)!important;line-height:1.06!important;
    white-space:nowrap!important;margin:10px 0 10px!important;letter-spacing:-1.8px!important;
    text-shadow:0 3px 9px #021125,0 0 15px rgba(240,176,64,.28)!important;}
  .hero .hero-sub {font-size:11px!important;letter-spacing:1.5px!important;color:#eef7ff!important;}
  .hero .hero-body {font-size:14px!important;line-height:1.42!important;max-width:430px!important;
    margin:12px 0 0!important;color:#e4f1ff!important;text-shadow:0 1px 5px #000!important;}
  .hero .hero-actions {margin-top:13px!important;gap:12px!important;}
  .hero .hero-actions .hero-login {height:42px!important;min-height:42px!important;
    padding:8px 17px!important;min-width:227px!important;max-width:280px!important;
    font-size:12px!important;}
  .hero .hint {margin:9px 0 0!important;color:#d8eaff!important;font-size:10px!important;}
  .wrap.content {padding-top:9px!important;}
  .footer .wrap {padding:7px 0 10px!important;}
}
@media (min-width:1600px) {
  .hero .hero-content.wrap {width:min(1680px,calc(100% - 46px))!important;}
  .hero .hero-copy {padding-left:20px!important;}
}
@media (min-width:769px) and (max-width:1365px) {
  .hero .hero-content.wrap {width:calc(100% - 28px)!important;
    min-height:clamp(240px,21.6vw,293px)!important;}
  .hero .hero-copy {width:min(49%,505px)!important;padding:13px 12px 13px 14px!important;}
  .hero .hero-copy h1 {font-size:clamp(40px,4.2vw,55px)!important;}
  .hero .hero-copy .eyebrow {font-size:10px!important;}
  .hero .hero-body {font-size:12px!important;max-width:380px!important;margin-top:9px!important;}
  .hero .hero-sub {font-size:10px!important;}
  .hero .hero-actions {margin-top:11px!important;}
  .hero .hero-actions .hero-login {height:39px!important;min-height:39px!important;}
  .hero .hint {font-size:9px!important;margin-top:7px!important;}
}
/* Mobile: preserve the successful tab layout, and dedicate a bright image
   strip followed by a completely legible dark text panel. */
@media (max-width:768px) {
  .hero {background:#04172d!important;}
  .hero .hero-content.wrap {display:flex!important;flex-direction:column-reverse!important;
    align-items:stretch!important;min-height:0!important;height:auto!important;
    overflow:visible!important;padding:0 0 15px!important;}
  .hero .hero-art {position:relative!important;inset:auto!important;
    width:100%!important;height:clamp(122px,44vw,210px)!important;
    background-image:url('../assets/hero-world.jpg')!important;
    background-position:center!important;background-size:100% 100%!important;
    clip-path:none!important;mask-image:none!important;-webkit-mask-image:none!important;
    opacity:1!important;filter:none!important;transform:none!important;
    border:1px solid #2a8ab7;border-radius:8px;}
  .hero .hero-overlay {display:none!important;}
  .hero .hero-copy {width:100%!important;max-width:none!important;
    padding:16px 4px 0!important;background:none!important;}
  .hero .hero-copy::before {display:none!important;}
  .hero .hero-copy h1 {font-size:clamp(36px,10vw,54px)!important;white-space:normal!important;line-height:1.04!important;}
  .hero .hero-body {max-width:100%!important;font-size:14px!important;}
  .hero .hero-actions .hero-login {width:100%!important;max-width:none!important;}
  .hero .hint {font-size:11px!important;}
  .footer {margin-top:8px!important;}
}


/* ======================================================
   MASTERSMON V2.16.5 | Unified panels & clean composition
   Preserves sign-in logic, visitor links and mobile tabs.
   ====================================================== */
@media(min-width:1101px){
  /* Header, hero, cards and footer share a single alignment grid. */
  .nav-wrap,.wrap,.hero .hero-content.wrap{
    width:min(1400px,calc(100% - 44px))!important;
    max-width:1400px!important;
  }
  .hero .hero-content.wrap{min-height:clamp(255px,19.7vw,316px)!important;}
  .hero .hero-copy{padding-left:4px!important;}
  .content{padding-top:10px!important;}
  .feature-grid{grid-template-columns:minmax(0,1.57fr) minmax(0,1fr) minmax(0,1fr)!important;gap:10px!important;}
  .panel{padding:12px 12px 11px!important;min-width:0;}
  .panel-head{min-height:64px!important;}
  .creature{height:clamp(146px,10.1vw,166px)!important;}
  .creature img{height:67%!important;}
  .feature-image{height:clamp(146px,10.4vw,166px)!important;min-height:0!important;flex:none!important;}
  .shop-panel{margin-top:10px!important;padding:11px 13px!important;gap:13px!important;}
  .final-cta{margin:10px 0 6px!important;min-height:65px!important;}
}
@media(min-width:769px){
  /* Make the cards feel like one coordinated dashboard rather than unrelated tiles. */
  .feature-grid>.panel{display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;}
  .pokedex-panel .creature-grid{margin-top:2px;}
  .pokedex-panel .micro-note{margin-top:auto!important;padding-top:8px;}
  .explore-panel .feature-image,.battles-panel .feature-image{margin:3px 0 0!important;}
  .panel-head{flex:none!important;}
  .panel h2{min-height:27px;}
  .feature-image{border:1px solid #3a95c5;box-shadow:0 0 0 1px rgba(59,192,244,.08),inset 0 -24px 30px rgba(0,8,20,.3)!important;}
  .image-features{background:linear-gradient(90deg,rgba(4,25,47,.8),rgba(3,21,42,.94))!important;}
  .shop-heading{min-width:0;}
  .shop-items{min-width:0;}
  .final-cta{display:grid!important;grid-template-columns:auto minmax(0,1.4fr) minmax(0,1fr) auto!important;gap:16px!important;align-items:center!important;}
  .final-cta h2{white-space:normal;text-wrap:balance;}
  .final-cta p:not(.eyebrow){text-align:left!important;}
  .footer{background:#031326!important;}
  .footer .wrap{min-height:29px;}
}
/* Laptop: preserve the same rhythm with slightly smaller gaps. */
@media(min-width:1101px) and (max-width:1440px){
  .feature-grid{gap:8px!important;}
  .panel{padding:9px 10px!important;}
  .panel-head{min-height:58px!important;}
  .creature{height:clamp(139px,11vw,154px)!important;}
  .feature-image{height:clamp(140px,11vw,154px)!important;}
  .shop-panel{padding:8px 10px!important;}
  .final-cta{gap:9px!important;min-height:58px!important;}
}
/* Tablet: cards stay independent, no fixed placement or overlap. */
@media(min-width:769px) and (max-width:1100px){
 .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-areas:'pokedex pokedex' 'explore battles'!important;}
 .pokedex-panel{grid-area:pokedex!important;}
 .explore-panel{grid-area:explore!important;}
 .battles-panel{grid-area:battles!important;}
 .creature-grid{gap:10px;}
 .creature{height:170px;}
 .feature-image{height:185px!important;}
 .final-cta{grid-template-columns:1fr 1.5fr!important;}
 .final-cta p:not(.eyebrow){text-align:right!important;}
}
/* Mobile: tab panels are mutually exclusive and flow in normal document order. */
@media(max-width:768px){
  .feature-grid{display:block!important;}
  .feature-grid>.panel{display:none!important;position:relative!important;grid-area:auto!important;}
  .feature-grid>.panel.is-mobile-visible{display:block!important;}
  .shop-panel{display:none!important;}
  .shop-panel.is-mobile-visible{display:flex!important;flex-direction:column!important;}
  .panel{margin:0!important;}
  .panel-head{margin-bottom:9px!important;}
  .final-cta{display:flex!important;flex-direction:column!important;}
  .footer{background:#031326!important;}
}


/* ==========================================================
   MASTERSMON V2.16.6 - Visual finishing only
   Unified scenic hero gutters and comfortable lower labels.
   All auth, links, i18n and card ordering remain untouched.
   ========================================================== */
/* The page background next to the scenic frame must be the
   SAME hue on both sides, including larger monitor widths. */
.hero {background:#041526!important;}
.hero .hero-bg {background:#041526!important;}
@media(min-width:769px){
  .hero {background:#041526!important;}
  .hero .hero-content.wrap {background:#041526!important;}
  /* Keep the artwork bounded by the same container as the cards. */
  .hero .hero-content.wrap::before {border-radius:0!important;}
}
/* Shop heading: reserve explicit room for its icon, and avoid
   merging the SVG visually with the heading's first letter. */
.shop-panel .shop-heading {min-width:0!important;}
.shop-panel .shop-heading h2 {
  display:flex!important;
  align-items:center!important;
  gap:13px!important;
  padding-left:9px!important;
  line-height:1.16!important;
}
.shop-panel .shop-heading h2 .heading-symbol {
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 27px!important;
  width:27px!important;
  margin-right:1px!important;
}
.shop-panel .shop-heading h2 .heading-symbol .ui-icon {
  width:25px!important;
  height:25px!important;
  object-fit:contain!important;
}
.shop-panel .shop-heading .section-kicker,
.shop-panel .shop-heading p:not(.section-kicker) {padding-left:9px!important;}
/* Distinguish the eyebrow from its decorative star and title. */
.final-cta {padding-left:27px!important;padding-right:17px!important;}
.final-cta>.eyebrow {
  position:relative!important;
  padding-left:12px!important;
  margin-right:4px!important;
  line-height:1.3!important;
  white-space:nowrap!important;
}
.final-cta::before {left:10px!important;bottom:8px!important;}
.final-cta h2 {padding-left:4px!important;}
/* Keep text and icons balanced at narrower laptop widths. */
@media(min-width:769px) and (max-width:1440px){
  .shop-panel .shop-heading h2 {gap:10px!important;padding-left:6px!important;}
  .shop-panel .shop-heading .section-kicker,
  .shop-panel .shop-heading p:not(.section-kicker){padding-left:6px!important;}
  .final-cta{padding-left:20px!important;}
  .final-cta>.eyebrow{padding-left:10px!important;}
}
/* Mobile: don't force a fixed grid or horizontal overflow. */
@media(max-width:768px){
  .hero,.hero .hero-bg{background:#041526!important;}
  .shop-panel .shop-heading h2 {gap:12px!important;padding-left:4px!important;}
  .shop-panel .shop-heading .section-kicker,
  .shop-panel .shop-heading p:not(.section-kicker){padding-left:4px!important;}
  .final-cta{padding:18px 16px!important;}
  .final-cta>.eyebrow{padding-left:0!important;margin-right:0!important;white-space:normal!important;}
  .final-cta h2{padding-left:0!important;}
}


/* V2.16.7 | Google dialog visual treatment; real GIS button remains untouched. */
.auth-backdrop[hidden] { display:none!important; }
.auth-backdrop {
  padding: 18px;
  background: rgba(0, 10, 25, .83);
  backdrop-filter: blur(9px) saturate(.8);
  -webkit-backdrop-filter: blur(9px) saturate(.8);
}
.auth-dialog.panel {
  width: min(460px, calc(100vw - 28px));
  max-height: min(92dvh, 700px);
  overflow-y: auto;
  padding: 0 30px 25px;
  border: 1px solid rgba(255, 205, 100, .9);
  border-radius: 20px;
  background:
    radial-gradient(ellipse 75% 160px at 50% -20px, rgba(25, 127, 180, .42), transparent 100%),
    linear-gradient(180deg, #0d3354 0%, #08233e 35%, #05182d 100%);
  box-shadow: 0 0 0 1px rgba(23, 174, 232, .15), 0 0 32px rgba(236, 180, 74, .18), 0 24px 90px rgba(0, 0, 0, .7);
  text-align: center;
  isolation: isolate;
}
.auth-dialog.panel::before {
  content:""; position:absolute; inset:0 0 auto; height:3px;
  border-radius:20px 20px 0 0;
  background:linear-gradient(90deg, transparent,#ffedb1 25%,#f9b847 50%,#ffedb1 75%,transparent);
  pointer-events:none;
}
.auth-close {
  z-index: 2;top:14px;right:15px;
  width:38px;height:38px;display:grid;place-items:center;
  font:400 25px/1 system-ui,sans-serif;
  color:#f1f7ff;border:1px solid rgba(104,189,234,.38);
  border-radius:11px;background:rgba(0,23,45,.54);
  transition:background .2s,border-color .2s;
}
.auth-close:hover {background:rgba(37,91,131,.65);border-color:#89dfff}
.auth-close:focus-visible {outline:3px solid #8be5ff;outline-offset:2px}
.auth-top-art {
  height:114px;display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;margin:0 -30px 0;
  background:radial-gradient(ellipse 47% 75% at 50% 40%,rgba(69,170,226,.22),transparent 95%);
}
.auth-emblem {
  position:relative;width:66px;height:70px;display:grid;place-items:center;
  font:bold 46px/1 Georgia,serif;color:#102441;
  clip-path:polygon(4% 2%,50% 33%,96% 2%,90% 83%,50% 100%,10% 83%);
  background:linear-gradient(140deg,#fff8dc,#ffc45d 55%,#a87124);
  filter:drop-shadow(0 0 17px rgba(255,210,102,.7));
}
.auth-spark {position:absolute;color:#ffdb80;text-shadow:0 0 14px #ffd279}
.auth-spark-one{left:26%;top:28%;font-size:16px}
.auth-spark-two{right:25%;bottom:16%;font-size:11px}
.auth-eyebrow {font:900 11px/1.4 system-ui,sans-serif;letter-spacing:3px;color:#7ee1ff;margin:0 0 7px}
.auth-dialog.panel h2 {
  margin:0;color:#ffe6a9;
  font:700 clamp(27px,5vw,33px)/1.15 Georgia,serif;
  text-shadow:0 0 15px rgba(230,170,72,.3);
}
.auth-dialog.panel .auth-description {
  margin:13px auto 0;max-width:340px;color:#d8e8f6;
  font:400 14px/1.55 system-ui,sans-serif;
}
.auth-login-zone {
  margin:24px 0 0;padding:14px 12px 12px;
  border:1px solid rgba(75,170,222,.4);border-radius:14px;
  background:linear-gradient(180deg,rgba(0,19,40,.58),rgba(5,31,55,.48));
  box-shadow:inset 0 1px rgba(125,211,250,.1);
}
.auth-zone-line{display:flex;gap:12px;align-items:center;justify-content:center;margin-bottom:8px;color:#fcd57a}
.auth-zone-line span{height:1px;width:58px;background:linear-gradient(90deg,transparent,#649bb8)}
.auth-zone-line span:last-child{transform:rotate(180deg)}
.auth-zone-line i{font-style:normal;font-size:13px}
.google-button { min-height:44px; margin:0 auto; display:flex;justify-content:center;align-items:center;max-width:100%; }
.google-button>div {max-width:100%}
.auth-message {margin:5px 0 0!important;min-height:0;font-size:12px!important;line-height:1.45!important;color:#e8bf73!important}
.auth-message:empty {display:none}
.auth-trust {
  display:flex;align-items:flex-start;justify-content:center;
  gap:10px;margin-top:17px;text-align:left;
}
.auth-trust-icon {flex:0 0 23px;height:23px;border-radius:50%;background:rgba(50,184,158,.13);border:1px solid rgba(97,223,191,.45);color:#84f0c7;font:bold 14px/21px system-ui;text-align:center}
.auth-dialog.panel .auth-trust .micro-note {color:#a9c6dc;font:400 11px/1.55 system-ui,sans-serif;margin:2px 0 0!important;max-width:320px}
/* Remove stray sparkle intruding into the lower left edge of CTA */
.final-cta::before { content:none!important;display:none!important; }
@media (max-width:560px) {
  .auth-backdrop{padding:12px}
  .auth-dialog.panel {padding:0 19px 22px;border-radius:17px}
  .auth-top-art{height:98px;margin:0 -19px}
  .auth-emblem{width:57px;height:60px;font-size:39px}
  .auth-dialog.panel h2{font-size:28px}
  .auth-dialog.panel .auth-description{font-size:13px}
  .auth-login-zone{padding:13px 7px 10px;margin-top:18px}
  .auth-trust{gap:8px;margin-top:13px}
}
@media (prefers-reduced-motion:reduce){.auth-close{transition:none}}

/* V2.16.8 | Compact, fully contained Google sign-in dialog. */
.auth-backdrop{padding:clamp(10px,2.5vw,24px)!important;overflow:hidden!important;overscroll-behavior:contain}
.auth-dialog.panel{
  box-sizing:border-box!important;
  width:min(430px,calc(100vw - 28px))!important;
  max-width:100%!important;
  max-height:calc(100dvh - 28px)!important;
  padding:0 23px 20px!important;
  margin:0!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#2f6384 transparent;
  border-radius:20px!important;
  background:radial-gradient(ellipse 115% 190px at 50% -20px,rgba(39,141,196,.36),transparent 70%),linear-gradient(160deg,#0c3457,#07233e 46%,#04182c)!important;
}
.auth-dialog.panel *{box-sizing:border-box!important;min-width:0}
.auth-top-art{
  margin:0 -23px 0!important;
  height:103px!important;
  flex-shrink:0;
  background:radial-gradient(ellipse 130px 90px at 50% 50%,rgba(64,173,226,.21),transparent 100%);
}
.auth-emblem{
  width:60px!important;height:65px!important;
  font-size:43px!important;
}
.auth-eyebrow{margin:0 0 7px!important;letter-spacing:2.6px!important;font-size:10px!important}
.auth-dialog.panel h2{
  max-width:100%!important;
  font:700 clamp(26px,3.5vw,31px)/1.14 Georgia,serif!important;
  margin:0!important;
  overflow-wrap:break-word;
}
.auth-dialog.panel .auth-description{
  max-width:325px!important;margin:12px auto 0!important;
  font-size:13px!important;line-height:1.5!important;color:#d1e5f5!important;
}
.auth-login-zone{
  width:100%!important;min-width:0!important;
  margin:19px 0 0!important;padding:14px 10px!important;
  border-radius:12px!important;
  display:flex!important;flex-direction:column;align-items:center;justify-content:center;
}
.google-button{
  width:100%!important;max-width:100%!important;min-width:0!important;
  min-height:44px!important;display:flex!important;align-items:center;justify-content:center!important;
  overflow:hidden!important;margin:0 auto!important;
}
.google-button>div,.google-button iframe{
  max-width:100%!important;
}
.auth-trust{max-width:340px!important;margin:17px auto 0!important;align-items:center!important;gap:10px!important}
.auth-dialog.panel .auth-trust .micro-note{font-size:10px!important;line-height:1.45!important;overflow-wrap:anywhere}
.auth-message{width:100%;overflow-wrap:anywhere}
@media(max-width:560px){
  .auth-dialog.panel{width:min(410px,calc(100vw - 22px))!important;max-height:calc(100dvh - 20px)!important;padding:0 17px 18px!important;border-radius:16px!important}
  .auth-top-art{height:87px!important;margin:0 -17px 0!important}
  .auth-emblem{width:52px!important;height:57px!important;font-size:37px!important}
  .auth-dialog.panel h2{font-size:clamp(24px,7vw,28px)!important}
  .auth-dialog.panel .auth-description{font-size:12px!important}
  .auth-login-zone{margin-top:15px!important;padding:12px 6px!important}
  .auth-trust{margin-top:14px!important}
}
@media(max-height:580px) and (min-width:561px){
  .auth-top-art{height:67px!important}
  .auth-emblem{width:43px!important;height:47px!important;font-size:30px!important}
  .auth-login-zone{margin-top:12px!important;padding:9px!important}
  .auth-trust{margin-top:9px!important}
}

/* V2.16.12: clean official white Google button; no iframe cropping */
.auth-login-zone {padding-inline:12px!important;overflow:visible!important}
.google-button {width:100%!important;max-width:100%!important;overflow:visible!important;min-height:44px!important}
.google-button>div,.google-button iframe {max-width:100%!important;overflow:visible!important}
@media(max-width:560px){.auth-login-zone{padding-inline:8px!important}}

/* V2.16.13: Allow the whole official Google pill to fit, without clipping. */
.auth-login-zone {overflow:visible!important;}
.google-button {
  width:100%!important;
  min-height:44px!important;
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  margin:0 auto!important;
  overflow:visible!important;
}
/* Do not force a narrower iframe than the size Google was asked to render. */
.google-button>div,.google-button iframe {
  max-width:none!important;
  overflow:visible!important;
}


/* Mastersmon V2.16.14: clean visitor-only header and fan disclaimer. */
.site-header .nav-wrap {
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  column-gap:12px!important;
  grid-template-columns:none!important;
  grid-template-areas:none!important;
  height:100%;
}
.site-header .brand {margin-right:auto!important; min-width:0;}
.site-header .top-login {margin-left:auto!important;flex-shrink:0;}
.site-header .language-switch {flex-shrink:0;}
.fan-footer {margin-top:8px!important;background:linear-gradient(180deg,#061c31,#031323)!important;border-top:1px solid #1a638b;}
.fan-footer .fan-footer-inner {
  max-width:1300px;
  margin-inline:auto;
  min-height:0!important;
  padding:12px 0 16px!important;
  display:flex!important;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.fan-footer-brand {display:flex;flex-direction:column;gap:3px;flex:0 0 auto;}
.fan-footer-brand strong {font:800 16px Georgia,serif;color:#ffe0a0;}
.fan-footer-brand span {font:600 10px/1.45 system-ui,sans-serif;color:#85c7e9;}
.fan-disclaimer {margin:0!important;max-width:850px;color:#a9c1d4!important;font:400 11px/1.55 system-ui,sans-serif!important;text-align:right;overflow-wrap:break-word;}
@media(max-width:980px){
 .site-header .nav-wrap {width:calc(100% - 28px)!important;padding:8px 0!important;min-height:55px;row-gap:0!important;}
 .site-header {height:auto!important;}
 .site-header .brand {font-size:clamp(19px,3vw,28px)!important;letter-spacing:-.4px;}
 .site-header .top-login {width:auto!important;height:40px!important;margin-left:auto!important;padding:0 12px!important;font-size:11px!important;}
 .fan-footer .fan-footer-inner {gap:12px;}
}
@media(max-width:600px){
 .site-header .nav-wrap {width:calc(100% - 22px)!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;grid-template-areas:'brand lang' 'login login'!important;gap:8px!important;padding:8px 0 10px!important;height:auto!important;}
 .site-header .brand {grid-area:brand!important;font-size:clamp(18px,5.6vw,24px)!important;gap:5px!important;margin:0!important;}
 .site-header .brand-emblem {width:29px!important;height:32px!important;font-size:20px!important;}
 .site-header .language-switch {grid-area:lang!important;justify-self:end!important;}
 .site-header .top-login {grid-area:login!important;width:100%!important;margin:0!important;height:43px!important;justify-self:stretch!important;}
 .fan-footer .fan-footer-inner {display:flex!important;flex-direction:column!important;align-items:center!important;gap:9px!important;text-align:center;padding:15px 7px 19px!important;}
 .fan-footer-brand {align-items:center;}
 .fan-disclaimer {font-size:10.5px!important;line-height:1.5!important;text-align:center!important;max-width:470px;}
}