/* Dorszolandia v22 PREMIUM — makiety 2026-09-09 */
:root{
  --p-navy:#082a72;
  --p-blue:#0e8ff0;
  --p-cyan:#20d8f1;
  --p-aqua:#eafcff;
  --p-gold:#ffd643;
  --p-orange:#ff9b19;
  --p-ink:#08245d;
  --p-shadow:0 20px 55px rgba(5,61,110,.18);
}
body{
  color:var(--p-ink);
  background:
    radial-gradient(circle at 10% 8%,rgba(63,229,247,.16),transparent 22rem),
    radial-gradient(circle at 90% 20%,rgba(255,214,67,.10),transparent 20rem),
    #f3fdff;
}
.wrap{width:min(1320px,calc(100% - 34px))}

/* Floating premium navigation */
.topbar{
  position:sticky;top:0;z-index:150;
  background:rgba(232,252,255,.82);
  border-bottom:1px solid rgba(115,218,236,.55);
  box-shadow:0 9px 28px rgba(2,67,107,.09);
  backdrop-filter:blur(22px) saturate(1.25);
}
.nav{height:72px;gap:14px}
.logo img{width:164px;height:62px}
.menu{gap:3px}
.menu a{font-size:.82rem;color:#062e73;padding:10px 10px;border-radius:999px;transition:.18s ease}
.menu a:hover{background:#dff8ff;transform:translateY(-1px)}
.menu .cta{
  color:#09285e;background:linear-gradient(180deg,#ffe96a,#ffc923);
  border:2px solid rgba(255,164,17,.58);
  box-shadow:0 8px 18px rgba(255,168,18,.24);
}

/* Hero: artwork first, UI on top — mirrors premium mockups */
.hero-v22{
  padding:0 0 26px;
  background:linear-gradient(180deg,#50ddf0 0%,#14aee0 72%,#f4fdff 100%);
  overflow:hidden;
}
.hero-v22-shell{position:relative;width:min(1672px,100%);margin:0 auto}
.hero-v22 .hero-stage{margin:0}
.hero-v22 .hero-img{
  border:0;border-radius:0 0 34px 34px;overflow:hidden;
  box-shadow:0 30px 70px rgba(0,64,109,.27);
}
.hero-v22 .hero-img img{width:100%;height:auto;aspect-ratio:1672/941;object-fit:cover;object-position:center}
.hero-v22-overlay{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  width:min(1100px,calc(100% - 48px));
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.86);
  background:rgba(255,255,255,.88);
  box-shadow:0 18px 46px rgba(0,58,101,.24);
  border-radius:24px;
  backdrop-filter:blur(18px) saturate(1.28);
}
.hero-v22-actions{display:flex;gap:8px;flex-wrap:wrap}
.hero-v22-actions .btn{padding:11px 16px;font-size:.82rem;box-shadow:0 5px 12px rgba(6,53,92,.08)}
.hero-v22-stats{display:grid;grid-template-columns:repeat(4,auto);gap:7px}
.hero-v22-stats span{display:grid;place-items:center;min-width:88px;padding:7px 10px;background:#e9fbff;border:1px solid #b9edf5;border-radius:15px;font-size:.58rem;font-weight:900;color:#52738c;line-height:1.15;text-align:center}
.hero-v22-stats b{font-size:1.08rem;color:#06387a}

/* Shared section treatment */
.section{position:relative;padding:46px 0}
.section.white{background:rgba(255,255,255,.96)}
.section.tint{
  background:
    radial-gradient(circle at 15% 16%,rgba(34,214,239,.16),transparent 17rem),
    linear-gradient(180deg,#e9fbff,#f8feff);
}
.kicker{color:#0a91c5;font-weight:1000;letter-spacing:.11em}
.section h1,.section h2{color:#082a72;letter-spacing:-.025em}
.section h2:after,.section h1:after{
  content:"〰";display:inline-block;margin-left:12px;color:#16bfe6;font-size:.72em;vertical-align:.08em
}
.lead{color:#466d86}

/* Cast / residents: vivid collectible cards */
.premium-cast-section{padding-top:34px!important;border-radius:34px 34px 0 0;margin-top:-2px}
.premium-cast{margin-top:22px}
.premium-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:16px}
.premium-duo .character-card{display:grid;grid-template-columns:minmax(170px,.9fr) 1.1fr;align-items:center;min-height:260px}
.premium-duo .character-art{aspect-ratio:1/1;min-height:250px}
.premium-duo .character-body{padding:24px 24px 24px 8px}
.premium-duo .character-body b{font-size:1.7rem}
.character-card{
  position:relative;
  border:1px solid #a6e8f3!important;
  border-radius:25px!important;
  background:linear-gradient(180deg,#ffffff 0%,#eafcff 100%)!important;
  box-shadow:0 12px 32px rgba(4,74,121,.11)!important;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.character-card:hover{transform:translateY(-5px);box-shadow:0 20px 42px rgba(4,74,121,.20)!important;border-color:#49cef0!important}
.character-art{
  background:
    radial-gradient(circle at 50% 30%,rgba(255,255,255,.98),rgba(211,248,255,.74) 48%,rgba(75,209,237,.25));
  overflow:hidden
}
.character-art img{width:100%;height:100%;object-fit:contain;padding:8px}
.character-body{padding:12px 13px 14px;text-align:center}
.character-body b{color:#082b72;font-size:1.03rem}
.character-body small{color:#55768e;font-weight:800}
.premium-support-title{display:flex;justify-content:space-between;align-items:center;margin:8px 2px 10px;color:#173c70}
.premium-support{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px!important;overflow:visible!important}
.premium-support .character-card{min-width:0!important}
.zip-new-card:after{content:"ZIP";position:absolute;top:10px;right:10px;background:#ffe15b;color:#133475;border:1px solid #f3bf2f;padding:4px 8px;border-radius:999px;font-size:.56rem;font-weight:1000}

/* Premium map */
.map-premium-v22{padding-top:42px!important;overflow:hidden}
.map-premium-v22:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(74,221,240,.08),transparent 35%);pointer-events:none}
.map-premium-bar{margin:13px 0 12px}
.map-chip{background:rgba(255,255,255,.94)!important;border-color:#aae5f0!important;box-shadow:0 7px 18px rgba(3,79,125,.08)!important;color:#12386e!important}
.map-shell{border-radius:30px!important;border:1px solid rgba(255,255,255,.9);box-shadow:0 26px 65px rgba(2,61,106,.22)!important;background:#009ad0;overflow:hidden}
.map-scroll{overflow:auto;scrollbar-width:thin;scrollbar-color:#5edcf1 transparent}
.map-canvas{width:1500px!important;aspect-ratio:1672/941!important;background:#1dc9ec}
.map-canvas>img{width:100%!important;height:100%!important;object-fit:cover!important}
.map-pin{
  width:25px!important;height:25px!important;
  background:rgba(255,224,69,.95)!important;
  box-shadow:0 0 0 4px rgba(255,255,255,.92),0 0 0 9px rgba(25,190,232,.22),0 7px 16px rgba(0,38,79,.24)!important;
  opacity:.82;
}
.map-pin span{inset:8px!important;background:#063474!important}
.map-pin:hover,.map-pin.active{opacity:1!important;transform:translate(-50%,-50%) scale(1.25)!important}
.map-place-info{border-color:#aee9f2!important;border-radius:20px!important;background:linear-gradient(180deg,#fff,#effcff)!important}
.place-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;overflow:visible!important;gap:10px!important}
.place-card{min-width:0!important;max-width:none!important;background:rgba(255,255,255,.92)!important;border:1px solid #b7e9f1!important;border-radius:17px!important;box-shadow:0 7px 18px rgba(4,78,124,.07)!important}
.place-card b{color:#073675}

/* Residents detailed catalogue */
.residents-premium-v22{background:linear-gradient(180deg,#fff,#f4fdff)!important}
.residents-premium-v22 .main-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.main-card{
  border:1px solid #aee7f1!important;border-radius:24px!important;
  background:linear-gradient(145deg,#fff,#eefcff)!important;
  box-shadow:0 11px 28px rgba(4,74,120,.09)!important;
  overflow:hidden
}
.main-card img{background:radial-gradient(circle at 50% 28%,#fff,#dff9ff);object-fit:contain;padding:8px}
.main-card .type{color:#078dbf;font-weight:1000}
.main-card h3{color:#092d71}
.atlas-lead{margin-bottom:14px}
.atlas-toolbar{gap:7px!important;flex-wrap:wrap!important;overflow:visible!important}
.atlas-filter{border-radius:999px!important;border:1px solid #a6deeb!important;background:#f4fcff!important;color:#173a6e!important}
.atlas-filter.on{background:linear-gradient(180deg,#1faedc,#0a7fbd)!important;color:#fff!important;border-color:#0a7fbd!important}
.atlas-grid{gap:13px!important}
.atlas-card{border:1px solid #b7e8f1!important;border-radius:22px!important;box-shadow:0 10px 28px rgba(4,74,120,.08)!important;background:#fff!important}
.atlas-card img{background:linear-gradient(180deg,#dcf9ff,#f9feff)}

/* Stories / games / shop / creator get the same premium language */
.story-card,.atlas-story-card,.game-card,.ency-card,.shop-product-card,.material-card{
  border-color:#b5e7f0!important;
  box-shadow:0 10px 28px rgba(4,74,120,.08)!important;
}
.story-card:hover,.game-card:hover,.shop-product-card:hover{transform:translateY(-3px)}
#przygody{background:linear-gradient(180deg,#fff,#f6fdff)!important}
#gry{background:linear-gradient(180deg,#e9fbff,#f8feff)!important}
#kreator{
  background:
    radial-gradient(circle at 9% 18%,rgba(255,218,70,.16),transparent 16rem),
    radial-gradient(circle at 88% 15%,rgba(55,221,240,.18),transparent 19rem),
    linear-gradient(180deg,#dff9ff,#f8feff)!important;
}
.creator-layout{border:1px solid #a9e4ef;border-radius:30px;background:rgba(255,255,255,.78);padding:15px;box-shadow:var(--p-shadow)}
.creator-stage{border-radius:23px!important;background:radial-gradient(circle at 50% 40%,#fff,#bdeffc 55%,#79d8ee 100%)!important}
.creator-panel{border:1px solid #b8e7ef!important;border-radius:23px!important;background:#fff!important;box-shadow:none!important}
.acc{transition:.16s ease}.acc:hover{transform:translateY(-2px);border-color:#55cfea!important;background:#effcff!important}

.web-footer{background:linear-gradient(180deg,#08629c,#073666)!important;border-top:4px solid #2dd4ef}
.build-stamp{max-width:1320px;margin:0 auto;padding:8px 17px 18px;color:#bfefff;font-size:.67rem;font-weight:800;text-align:right}

@media(min-width:1001px){
  .hero-v22 .hero-img img{max-height:760px}
  .section{padding:54px 0}
  .atlas-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}

@media(max-width:1000px){
  .premium-support{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .place-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .residents-premium-v22 .main-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-v22-overlay{position:static;transform:none;width:calc(100% - 24px);margin:-18px auto 0;flex-direction:column;align-items:stretch}
  .hero-v22-stats{grid-template-columns:repeat(4,1fr)}
}

@media(max-width:760px){
  body{padding-bottom:76px}
  .wrap{width:min(100% - 18px,1320px)}
  .topbar{background:rgba(247,254,255,.93)}
  .nav{height:64px}.logo img{width:124px;height:54px}
  .hero-v22{padding-bottom:16px}
  .hero-v22 .hero-img{border-radius:0 0 22px 22px}
  .hero-v22 .hero-img img{aspect-ratio:16/10.3;object-fit:cover;object-position:center}
  .hero-v22-overlay{margin:-10px auto 0;padding:10px;border-radius:18px}
  .hero-v22-actions{display:grid;grid-template-columns:1fr 1fr}.hero-v22-actions .btn:last-child{grid-column:1/-1}
  .hero-v22-stats{grid-template-columns:1fr 1fr}.hero-v22-stats span{min-width:0}
  .section{padding:36px 0}
  .premium-duo{grid-template-columns:1fr 1fr;gap:9px}
  .premium-duo .character-card{display:block;min-height:0}
  .premium-duo .character-art{min-height:0;aspect-ratio:1/1}
  .premium-duo .character-body{padding:9px}
  .premium-duo .character-body b{font-size:1.05rem}
  .premium-support{display:flex!important;overflow-x:auto!important;scroll-snap-type:x mandatory;gap:9px!important;padding-bottom:7px}
  .premium-support .character-card{flex:0 0 42%;scroll-snap-align:start}
  .map-canvas{width:1100px!important}
  .map-pin{width:23px!important;height:23px!important}
  .place-grid{display:flex!important;overflow-x:auto!important;scroll-snap-type:x mandatory}
  .place-card{flex:0 0 76%!important;scroll-snap-align:start}
  .residents-premium-v22 .main-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:9px;padding-bottom:7px}
  .residents-premium-v22 .main-card{flex:0 0 86%;scroll-snap-align:start;grid-template-columns:128px 1fr}
  .residents-premium-v22 .main-card img{width:128px!important;min-height:160px!important}
  .atlas-grid{grid-template-columns:1fr 1fr!important}
  .section h1,.section h2{letter-spacing:-.035em}
  .section h2:after,.section h1:after{margin-left:7px}
}

@media(max-width:430px){
  .premium-support .character-card{flex-basis:48%}
  .atlas-grid{grid-template-columns:1fr!important}
  .hero-v22-actions{grid-template-columns:1fr}
  .hero-v22-actions .btn:last-child{grid-column:auto}
}