/* ===================== PIGXY website — shared styles ===================== */
:root{
  --sky:#5b9ad4; --sky-dark:#3f7cb5; --sky-deep:#2b5e91;
  --pink:#ff6fb5; --pink-dark:#e74e9b; --gold:#ffce3a; --gold-dark:#e0a90f;
  --wood:#9c6b32; --wood-dark:#6e481c; --ink:#22304a; --muted:#46546e;
  --pixel:'Press Start 2P', monospace; --body:'Nunito', system-ui, sans-serif;
  --card-shadow:0 10px 0 rgba(0,0,0,.16), 0 18px 30px rgba(20,40,70,.18);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:hidden; width:100%}
body{
  font-family:var(--body); color:var(--ink); line-height:1.65; min-height:100vh;
  display:flex; flex-direction:column;
  background:linear-gradient(180deg,#82c4f6 0%, var(--sky) 40%, var(--sky-dark) 100%);
  background-attachment:fixed; overflow-x:hidden;
}
img{display:block; image-rendering:pixelated}
a{color:inherit; text-decoration:none}
.wrap{width:min(1100px,92%); margin:0 auto}
main{flex:1 0 auto; position:relative; z-index:1}

/* floating clouds */
.clouds{position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.45; overflow:hidden}
.clouds img{position:absolute; image-rendering:pixelated; animation:drift linear infinite}
.clouds img:nth-child(1){top:10%; left:-14%; width:240px; animation-duration:95s}
.clouds img:nth-child(2){top:44%; left:-20%; width:160px; animation-duration:130s; animation-delay:-40s}
.clouds img:nth-child(3){top:72%; left:-16%; width:210px; animation-duration:150s; animation-delay:-80s}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(140vw)}}

.pixel{font-family:var(--pixel); color:#fff; line-height:1.5;
  text-shadow:3px 3px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000}

/* ---------- header ---------- */
header{position:sticky; top:0; z-index:50; background:rgba(43,94,145,.92);
  backdrop-filter:blur(8px); border-bottom:3px solid rgba(0,0,0,.22)}
.nav{display:flex; align-items:center; gap:18px; padding:10px 0; min-height:62px}
.brand{display:flex; align-items:center}
.brand img{height:40px; image-rendering:pixelated; filter:drop-shadow(0 3px 0 rgba(0,0,0,.25))}
.nav-links{margin-left:auto; display:flex; gap:6px; align-items:center}
.nav-links a{color:#eaf4ff; font-weight:800; font-size:.96rem; padding:8px 12px; border-radius:10px; transition:.15s}
.nav-links a:hover{color:#fff; background:rgba(255,255,255,.12)}
.nav-links a.active{color:var(--gold)}
.btn{display:inline-flex; align-items:center; gap:8px; cursor:pointer; border:none;
  font-family:var(--pixel); font-size:11px; color:#fff; padding:12px 16px; border-radius:12px;
  background:linear-gradient(180deg,var(--pink),var(--pink-dark));
  box-shadow:0 4px 0 #a8327a, 0 6px 12px rgba(0,0,0,.3); text-shadow:1px 1px 0 #000;
  transition:transform .08s, box-shadow .08s}
.btn:active{transform:translateY(3px); box-shadow:0 1px 0 #a8327a,0 3px 8px rgba(0,0,0,.3)}
.btn.gold{background:linear-gradient(180deg,var(--gold),var(--gold-dark));
  box-shadow:0 4px 0 #b3850a,0 6px 12px rgba(0,0,0,.3); color:#3a2a00; text-shadow:none}
.btn.lg{font-size:13px; padding:16px 22px}
.nav-links .btn{margin-left:8px}
.nav-toggle{display:none}

/* ---------- hero (home) ---------- */
.hero{text-align:center; padding:60px 0 30px}
.hero-logo{width:min(540px,84%); margin:0 auto 6px; filter:drop-shadow(0 8px 0 rgba(0,0,0,.16))}
.hero .tag{font-family:var(--pixel); font-size:clamp(11px,2.5vw,16px); color:#fff;
  text-shadow:2px 2px 0 #000; margin:8px auto 20px; max-width:660px; line-height:1.8}
.hero-pig{width:min(240px,52%); margin:4px auto 22px; animation:bob 2.4s ease-in-out infinite;
  filter:drop-shadow(0 16px 14px rgba(0,0,0,.28))}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
.specs{display:flex; flex-wrap:wrap; gap:10px 12px; justify-content:center; margin-top:4px}
.spec{background:rgba(255,255,255,.16); border:2px solid rgba(255,255,255,.35); color:#fff;
  font-weight:800; padding:8px 14px; border-radius:999px; font-size:.92rem; backdrop-filter:blur(4px)}
.cta-row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:26px}

/* ---------- inner page banner ---------- */
.page-banner{text-align:center; padding:46px 0 8px}
.plank{display:inline-block; padding:16px 34px; border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(40,22,8,.34)), url('assets/wood-texture.png') center/cover, var(--wood);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.22),0 6px 0 var(--wood-dark),0 12px 20px rgba(0,0,0,.3);
  border:2px solid #5a3a16}
.plank .pixel{font-size:clamp(14px,3.2vw,22px)}
.page-sub{text-align:center; color:#eaf4ff; font-weight:700; max-width:640px; margin:22px auto 0; font-size:1.06rem}

/* ---------- generic section ---------- */
section{padding:42px 0}
.sec-head{text-align:center; margin-bottom:30px}
.sec-head .plank .pixel{font-size:clamp(13px,3vw,20px)}
.sec-sub{text-align:center; color:#eaf4ff; font-weight:700; max-width:640px; margin:22px auto 0; font-size:1.05rem}

/* ---------- step / feature / link cards ---------- */
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.card{background:rgba(255,255,255,.97); border-radius:20px; padding:28px 24px; text-align:center;
  box-shadow:var(--card-shadow); border:3px solid #fff; transition:transform .15s}
.card:hover{transform:translateY(-6px)}
.card .num{font-family:var(--pixel); font-size:14px; color:#fff; width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center; margin:0 auto 16px; background:linear-gradient(180deg,var(--pink),var(--pink-dark));
  box-shadow:0 4px 0 #a8327a; text-shadow:1px 1px 0 #000}
.card .ic{height:112px; display:grid; place-items:center; margin-bottom:14px}
.card .ic img{max-height:112px; max-width:150px; filter:drop-shadow(0 8px 10px rgba(0,0,0,.25))}
.card h3{font-family:var(--pixel); font-size:12px; color:var(--ink); margin-bottom:10px; line-height:1.7}
.card p{color:var(--muted); font-size:1rem}
.card.link{cursor:pointer; text-decoration:none; display:block}
.card.link .arrow{font-family:var(--pixel); font-size:11px; color:var(--pink-dark); margin-top:14px; display:inline-block}

/* ---------- skins gallery ---------- */
.skins{display:flex; flex-wrap:wrap; gap:18px; justify-content:center; margin-top:6px}
.skin{position:relative; background:rgba(255,255,255,.97); border-radius:18px; padding:20px 16px 18px; width:160px; text-align:center;
  box-shadow:var(--card-shadow); border:3px solid #fff; transition:transform .18s}
.skin:hover{transform:translateY(-8px) rotate(-1deg)}
.skin img{width:106px; height:106px; object-fit:contain; margin:0 auto 12px; filter:drop-shadow(0 6px 8px rgba(0,0,0,.28));
  animation:floaty 3s ease-in-out infinite}
.skin:nth-child(2n) img{animation-delay:-1s} .skin:nth-child(3n) img{animation-delay:-2s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.skin .name{font-family:var(--pixel); font-size:9px; color:var(--ink); line-height:1.6; min-height:2.6em;
  display:flex; align-items:center; justify-content:center}
.skin .rar{display:inline-block; margin-top:10px; font-weight:800; font-size:.76rem; letter-spacing:.5px;
  padding:4px 12px; border-radius:999px; color:#fff; box-shadow:0 3px 0 rgba(0,0,0,.14)}
.rar.common{background:#3a7fb0} .rar.rare{background:#27ae60} .rar.epic{background:#8e44ad}
.rar.mythic{background:linear-gradient(180deg,#ffce3a,#e0a90f); color:#3a2a00; box-shadow:0 0 0 2px rgba(255,206,58,.5),0 3px 0 rgba(0,0,0,.14)}
.skin:has(.mythic){border-color:#ffce3a; box-shadow:0 0 22px rgba(255,206,58,.55), var(--card-shadow)}

/* ---------- home: meet-the-pigs strip ---------- */
.pig-strip{display:flex; flex-wrap:wrap; gap:clamp(10px,2vw,26px); justify-content:center; align-items:flex-end; margin-top:10px}
.pig-strip img{width:clamp(78px,11vw,124px); height:auto; image-rendering:pixelated;
  filter:drop-shadow(0 8px 8px rgba(0,0,0,.28)); animation:floaty 3s ease-in-out infinite; transition:transform .15s}
.pig-strip img:nth-child(2n){animation-delay:-1s} .pig-strip img:nth-child(3n){animation-delay:-2s} .pig-strip img:nth-child(4n){animation-delay:-1.5s}
.pig-strip img:hover{transform:translateY(-10px) scale(1.08)}

/* ---------- App Store badge button ---------- */
.appstore{display:inline-block; line-height:0; transition:transform .1s}
.appstore img{width:148px; max-width:50vw; height:auto; image-rendering:auto;
  filter:drop-shadow(0 5px 6px rgba(0,0,0,.32))}
.appstore:hover{transform:translateY(-2px)}
.appstore:active{transform:translateY(2px)}
.appstore.sm img{width:116px}

/* ---------- contact form note ---------- */
.form-note{margin-top:16px; text-align:center; font-weight:800; font-size:.98rem; min-height:1.2em}
.form-note.ok{color:#1f9d55}
.form-note.err{color:#d8324a}

/* ---------- in-game "SELECT GAME MODE" picker replica ---------- */
.gm-picker{max-width:400px; margin:6px auto 0; text-align:center;
  background:linear-gradient(180deg,#1a003a 0%,#0d001f 100%);
  border:3px solid #ff6ecf; border-radius:10px;
  box-shadow:0 0 0 4px #6a00b8, 0 0 0 7px #000, 0 16px 28px rgba(0,0,0,.45);
  padding:24px 18px}
.gm-picker h3{font-family:var(--pixel); font-size:13px; color:#ff6ecf; letter-spacing:2px;
  text-shadow:2px 2px 0 #000; margin-bottom:20px}
.gm-row{display:flex; align-items:center; justify-content:space-between; text-align:left;
  padding:14px 16px; margin-bottom:12px; background:rgba(255,255,255,.06);
  border:2px solid #6a00b8; border-radius:6px; transition:background .12s, border-color .12s}
.gm-row:last-child{margin-bottom:0}
.gm-row:hover{background:rgba(255,110,207,.14)}
.gm-row.selected{border-color:#ff6ecf; background:rgba(255,110,207,.18)}
.gm-row .gm-nm{font-family:var(--pixel); font-size:11px; color:#fff; text-shadow:1px 1px 0 #000; line-height:1.5}
.gm-row .gm-ds{font-weight:700; font-size:.92rem; color:#c9a9e6; margin-top:7px}
.gm-row .gm-ck{font-family:var(--pixel); font-size:16px; color:#ff6ecf; margin-left:12px; flex-shrink:0}

/* ---------- showcase split ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:center; margin-top:10px}
.split.alt{direction:rtl} .split.alt>*{direction:ltr}
.split .art{display:grid; place-items:center}
.split .art img{max-width:80%; filter:drop-shadow(0 14px 16px rgba(0,0,0,.3)); animation:bob 3s ease-in-out infinite}
.split .txt h3{font-family:var(--pixel); font-size:14px; color:#fff; text-shadow:2px 2px 0 #000; margin-bottom:14px; line-height:1.6}
.split .txt p{color:#eef6ff; font-size:1.06rem; font-weight:600}
.split .txt .chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.split .txt .chips span{background:rgba(255,255,255,.16); border:2px solid rgba(255,255,255,.35); color:#fff; font-weight:800; padding:5px 12px; border-radius:999px; font-size:.85rem}

/* ---------- contact ---------- */
.panel{max-width:680px; margin:0 auto; background:rgba(255,255,255,.97); border-radius:22px;
  padding:34px; box-shadow:var(--card-shadow); border:3px solid #fff}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
label{display:block; font-weight:800; margin:14px 0 6px; color:var(--ink); font-size:.95rem}
input,select,textarea{width:100%; padding:13px 14px; border:2px solid #d6dbe6; border-radius:12px;
  font-family:var(--body); font-size:1rem; background:#f7f9fc; transition:border-color .15s}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--pink)}
textarea{min-height:140px; resize:vertical}
.panel .btn{margin-top:22px; width:100%; justify-content:center; font-size:12px; padding:15px}
.contact-extra{display:flex; flex-wrap:wrap; gap:16px; justify-content:center; margin-top:26px}
.contact-chip{background:rgba(255,255,255,.14); border:2px solid rgba(255,255,255,.32); border-radius:14px;
  padding:14px 20px; color:#fff; font-weight:800; text-align:center}
.contact-chip a{color:var(--gold); text-decoration:underline}
.contact-chip small{display:block; color:#cfe4f7; font-weight:700; margin-top:4px}

/* ---------- privacy ---------- */
.policy{background:rgba(255,255,255,.98); border-radius:22px; padding:38px clamp(20px,5vw,50px);
  box-shadow:var(--card-shadow); border:3px solid #fff; max-width:900px; margin:0 auto}
.policy .updated{color:#6b7790; font-weight:700; margin-bottom:24px; font-size:.92rem}
.policy h3{font-family:var(--pixel); font-size:12px; color:var(--pink-dark); margin:26px 0 10px; line-height:1.7}
.policy h3:first-of-type{margin-top:0}
.policy p,.policy li{color:#3a4660; font-size:1rem; margin-bottom:10px}
.policy ul{margin:0 0 10px 22px}
.policy a{color:var(--pink-dark); text-decoration:underline}

/* ---------- footer ---------- */
footer{flex-shrink:0; position:relative; z-index:1; background:rgba(43,94,145,.96); color:#dcebfb;
  border-top:3px solid rgba(0,0,0,.22); padding:38px 0 28px; margin-top:30px}
.foot{display:flex; flex-wrap:wrap; gap:22px; align-items:center; justify-content:space-between}
.foot .brand img{height:30px}
.foot-links{display:flex; gap:18px; flex-wrap:wrap; font-weight:700}
.foot-links a:hover{color:var(--gold)}
.copyright{width:100%; text-align:center; margin-top:22px; color:#a9c6e6; font-size:.9rem}

/* ---------- responsive ---------- */
@media(max-width:820px){
  .nav-links{position:fixed; inset:62px 0 auto 0; flex-direction:column; gap:0; align-items:stretch;
    background:rgba(43,94,145,.98); padding:8px 0; transform:translateY(-130%); transition:transform .25s;
    border-bottom:3px solid rgba(0,0,0,.25)}
  .nav-links.open{transform:translateY(0)}
  .nav-links a{padding:14px 24px}
  .nav-links .btn{margin:12px 24px}
  .nav-toggle{display:inline-grid; place-items:center; margin-left:auto; width:42px; height:42px; background:transparent; border:none; cursor:pointer}
  .nav-toggle span{display:block; width:24px; height:3px; background:#fff; border-radius:2px; box-shadow:0 7px 0 #fff,0 -7px 0 #fff}
  .grid3{grid-template-columns:1fr}
  .split,.split.alt{grid-template-columns:1fr; direction:ltr}
  .split .art{order:-1}
  .form-row{grid-template-columns:1fr}
}