/* =========================================================
   PYRAMC — motyw "Pustynia" (wlasny wyglad: cieple niebo o swicie, piramidy i wydmy, granatowa noc ze zlotymi gwiazdami,
   pikselowe ramki z "wcietymi" rogami zamiast zaokraglen, kafelki z wlasnymi teksturami piasku, lapisu i czerwieni).
   Uklad zostaje czytelny i znajomy (jasna gora z kafelkami, ciemna dol z formularzem), ale kolory, ksztalty i grafika sa PYRAMC.
   Ladowany PO fezzi.css i pyramc.css: nadpisuje wyglad, nie zmienia dzialania. Grafika: assets/_gen/gen_pustynia.py
   ========================================================= */

:root{
  --navy:#14112B; --navy-2:#1C1740; --navy-3:#262055; --navy-line:#3A3178;
  --ink:#1A1636; --ink-d:#0C0A1C;
  --sand-1:#FFF1D2; --sand-2:#FFE2A0; --sand-3:#FFD070;
  --ember:#E2572B; --lapis:#2D52BE; --jade:#1FB67A;
  --px-ring:0 -4px 0 var(--ink),0 4px 0 var(--ink),-4px 0 0 var(--ink),4px 0 0 var(--ink);
  --px-bevel:inset 4px 4px 0 rgba(255,255,255,.28),inset -4px -4px 0 rgba(0,0,0,.2);
  --px-drop:6px 8px 0 4px rgba(12,10,28,.35);
}

/* ciemna strefa: cieplejszy granat zamiast chlodnej nocy */
.night,.site-footer,.modal-overlay,body.night-page{
  --card:#1D1844;--card-img:#262055;--card-frame:#3A3178;--field-bg:#120F26;--field-bd:#3A3178;--edge:#3A3178;
  --tab:#3A3178;--tab-frame:#262055;--band:#0E0B20;--muted:#B3A9DE
}
body{background:var(--navy)}
body.night-page{background:var(--navy) url(../assets/px-night2.png) 0 0/960px}

/* ---------- naglowek: piaskowy pasek z ciemna krawedzia ---------- */
.site-header{background:rgba(255,235,190,.94);border-bottom:6px solid var(--ink);backdrop-filter:none}
.brand-txt b{color:var(--ink)}
.brand-txt small{color:#6A4C22}
.hdr nav a{color:#5A3E1B}
.hdr nav a:hover,.hdr nav a.is-active{color:var(--ink)}
.hdr nav a::after{height:4px;bottom:-8px;background:var(--ember)}

/* ---------- przyciski: pikselowa ramka z wcietymi rogami (bez zaokraglen) ---------- */
.btn,.kup-btn,.sq-btn{border:0;border-radius:0;box-shadow:var(--px-ring),var(--px-bevel),0 8px 0 4px var(--ink-d);margin-bottom:6px}
.btn:hover,.kup-btn:hover,.sq-btn:hover{transform:translateY(3px);box-shadow:var(--px-ring),var(--px-bevel),0 4px 0 4px var(--ink-d)}
.btn:active,.kup-btn:active{transform:translateY(6px);box-shadow:var(--px-ring),var(--px-bevel),0 0 0 4px var(--ink-d)}
.btn-y,.kup-btn{background:linear-gradient(180deg,#FFE05A,var(--y));color:var(--on-y)}
.btn-blue{background:var(--lapis);color:#fff}
.btn-blue:hover{background:#4A72E8}
.sq-btn{background:var(--sand-1);color:var(--ink)}
.sq-btn.discord{background:#5865F2;color:#fff}
.sq-btn.discord:hover{background:#7A86FF}

/* ---------- niebo o swicie: cieply gradient, slonce, chmury, wydmy i piramidy ---------- */
.hero{padding:40px 0 210px;
  background:url(../assets/px-sky2.png) 0 0/1440px auto repeat-x,
    linear-gradient(180deg,#FFC9A0 0,#FFDDA6 38%,#FFEFC8 72%,#FFF8E6 100%)}
.hero::after{height:212px;background:url(../assets/px-ground2.png) 0 100%/1440px 192px repeat-x}

/* karta hero: zloto -> ember, pikselowa piramida po prawej, ramka z wcietymi rogami */
.hero-panel{border-radius:0;--hp-glow:rgba(255,255,255,.35);
  background:linear-gradient(135deg,var(--hp-bg) 0%,color-mix(in srgb,var(--hp-bg) 62%,#E2572B) 100%);
  box-shadow:var(--px-ring),inset 6px 6px 0 rgba(255,255,255,.28),inset -6px -6px 0 rgba(0,0,0,.16),var(--px-drop);overflow:visible}
.hero-panel::after{content:"";position:absolute;left:auto;top:auto;inset:auto 10px 0 auto;width:min(46%,420px);aspect-ratio:640/440;pointer-events:none;
  background:url(../assets/hero-piramida.png) right bottom/contain no-repeat;image-rendering:pixelated;opacity:.92;z-index:0}
.slide{position:relative;z-index:1}
.s-visual{position:relative;z-index:1}
.s-kicker{border-radius:0;background:var(--ink);box-shadow:3px 3px 0 rgba(0,0,0,.25)}
.poster{border-radius:0;box-shadow:var(--px-ring),6px 6px 0 4px rgba(12,10,28,.3)}
.hero-dots button{border-radius:0}
.hero-status{border-radius:0;background:var(--ink);box-shadow:3px 3px 0 rgba(0,0,0,.3)}
.hero-panel .btn{background:var(--ink);color:#fff}
.hero-panel .btn:hover{background:#fff;color:var(--ink)}
.hero-panel .btn-blue{background:#5865F2}

/* kafle: wlasne tekstury (piasek, lapis, czerwien) */
.tiles{gap:22px}
.tile{border:0;border-radius:0;image-rendering:pixelated;font-size:19px;letter-spacing:.12em;
  box-shadow:var(--px-ring),inset 4px 4px 0 rgba(255,255,255,.25),inset -4px -4px 0 rgba(0,0,0,.25),var(--px-drop)}
.tile::before{display:none}
.tile.green{background:url(../assets/tile-piasek.png) 0 0/128px;color:#3A2406;text-shadow:2px 2px 0 rgba(255,244,210,.7)}
.tile.blue{background:url(../assets/tile-lapis.png) 0 0/128px;color:#fff;text-shadow:3px 3px 0 rgba(0,0,40,.6)}
.tile.red{background:url(../assets/tile-czerwien.png) 0 0/128px;color:#fff;text-shadow:3px 3px 0 rgba(40,0,0,.6)}
.tile:hover{transform:translateY(-4px)}

/* ---------- noc: granat z zlotymi gwiazdami ---------- */
.night{background:url(../assets/px-night2.png) 0 0/960px,linear-gradient(180deg,#14112B 0,#1B1640 55%,#110E26 100%);padding-top:6px}
.sec-title h2::after{content:"";display:block;width:112px;height:8px;margin:20px auto 0;
  background:repeating-linear-gradient(90deg,var(--y) 0 16px,transparent 16px 24px)}
.sec-title h2{text-shadow:5px 5px 0 rgba(0,0,0,.35)}

/* karty w nocy: ramki z wcietymi rogami */
.topup,.price-card,.rank,.banner,.modal,.note{border-radius:0;border:0;
  box-shadow:0 -4px 0 #3A3178,0 4px 0 #3A3178,-4px 0 0 #3A3178,4px 0 0 #3A3178,inset 4px 4px 0 rgba(255,255,255,.07),inset -4px -4px 0 rgba(0,0,0,.35),var(--px-drop)}
.rank.first{box-shadow:0 -4px 0 var(--y),0 4px 0 var(--y),-4px 0 0 var(--y),4px 0 0 var(--y),inset 4px 4px 0 rgba(255,255,255,.1),inset -4px -4px 0 rgba(0,0,0,.35),var(--px-drop)}
.topup-head,.modal-head{border-radius:0}
.pay-method .pm,.price-box,.amount-box{border-radius:0}
input[type=text],input[type=email]{border-radius:0;border:0;background:var(--field-bg);
  box-shadow:0 -3px 0 #3A3178,0 3px 0 #3A3178,-3px 0 0 #3A3178,3px 0 0 #3A3178,inset 4px 4px 0 rgba(0,0,0,.4)}
input[type=text]:focus,input[type=email]:focus{box-shadow:0 -3px 0 var(--y),0 3px 0 var(--y),-3px 0 0 var(--y),3px 0 0 var(--y),inset 4px 4px 0 rgba(0,0,0,.4)}
.nick-avatar{border-radius:0;image-rendering:pixelated}
.step{border-radius:0}

/* stopka i regulamin */
.site-footer{background:linear-gradient(180deg,#0E0B20,#0A0818);border-top:6px solid var(--ink)}
.legal .box{border-radius:0;box-shadow:0 -4px 0 #3A3178,0 4px 0 #3A3178,-4px 0 0 #3A3178,4px 0 0 #3A3178,var(--px-drop)}
body.night-page .site-header{background:rgba(255,235,190,.94)}
.toast{border-radius:0;background:var(--ink);box-shadow:var(--px-ring),var(--px-drop)}

@media (max-width:900px){
  .hero-panel::after{width:min(60%,300px);opacity:.5}
  .hero{padding-bottom:170px}
}

/* male przyciski kwadratowe (Discord, menu): nizszy cien, zeby nie byly "wysokie" */
.sq-btn{box-shadow:var(--px-ring),var(--px-bevel),0 5px 0 3px var(--ink-d);margin-bottom:4px}
.sq-btn:hover{box-shadow:var(--px-ring),var(--px-bevel),0 2px 0 3px var(--ink-d)}