/* Samar's Kidzee Games — shared styles */
:root{
  --deep:#0b0826; --night:#150f3d; --panel:#24186a; --panel-2:#2e2080;
  --gold:#ffd23f; --pink:#ff6fe0; --lime:#6dff72; --sky:#4fc3ff; --orange:#ff8a3d; --violet:#9b5cff;
  --soft:#dcd6ff; --ink:#150f3d;
  --font:"Fredoka",ui-rounded,"Arial Rounded MT Bold","Nunito",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{margin:0;min-height:100vh;overflow-x:hidden;font-family:var(--font);font-weight:500;font-size:18px;line-height:1.5;color:#fff;
  background:radial-gradient(130% 90% at 50% -10%,#35228a 0%,#150f3d 50%,#0b0826 100%) fixed,var(--deep)}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:4px solid #fff;outline-offset:4px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* square stars that drift down, like the game */
.sky{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22320%22%20height%3D%22320%22%3E%3Crect%20x%3D%2277%22%20y%3D%22202%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.5%22/%3E%3Crect%20x%3D%22187%22%20y%3D%22298%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.7%22/%3E%3Crect%20x%3D%2244%22%20y%3D%22222%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23b9a8ff%22%20fill-opacity%3D%220.5%22/%3E%3Crect%20x%3D%2246%22%20y%3D%22282%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23b9a8ff%22%20fill-opacity%3D%220.5%22/%3E%3Crect%20x%3D%22114%22%20y%3D%22298%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%221%22/%3E%3Crect%20x%3D%22113%22%20y%3D%2223%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%238ea0d8%22%20fill-opacity%3D%220.9%22/%3E%3Crect%20x%3D%2273%22%20y%3D%22276%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.9%22/%3E%3Crect%20x%3D%2252%22%20y%3D%22297%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%238ea0d8%22%20fill-opacity%3D%220.9%22/%3E%3Crect%20x%3D%22280%22%20y%3D%2232%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.7%22/%3E%3Crect%20x%3D%22272%22%20y%3D%22218%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23ffe39a%22%20fill-opacity%3D%221%22/%3E%3Crect%20x%3D%22185%22%20y%3D%22153%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%238ea0d8%22%20fill-opacity%3D%220.7%22/%3E%3Crect%20x%3D%2241%22%20y%3D%22294%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffe39a%22%20fill-opacity%3D%221%22/%3E%3Crect%20x%3D%22229%22%20y%3D%22147%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.5%22/%3E%3Crect%20x%3D%2284%22%20y%3D%22175%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%238ea0d8%22%20fill-opacity%3D%221%22/%3E%3Crect%20x%3D%2220%22%20y%3D%2239%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23ffe39a%22%20fill-opacity%3D%220.9%22/%3E%3Crect%20x%3D%22304%22%20y%3D%22254%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23b9a8ff%22%20fill-opacity%3D%220.5%22/%3E%3Crect%20x%3D%22138%22%20y%3D%22242%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.5%22/%3E%3Crect%20x%3D%22295%22%20y%3D%22228%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23ffe39a%22%20fill-opacity%3D%221%22/%3E%3Crect%20x%3D%2211%22%20y%3D%22236%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23ffe39a%22%20fill-opacity%3D%220.7%22/%3E%3Crect%20x%3D%22252%22%20y%3D%2230%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%238ea0d8%22%20fill-opacity%3D%220.9%22/%3E%3Crect%20x%3D%22126%22%20y%3D%22203%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23b9a8ff%22%20fill-opacity%3D%221%22/%3E%3Crect%20x%3D%2285%22%20y%3D%22229%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23b9a8ff%22%20fill-opacity%3D%220.9%22/%3E%3Crect%20x%3D%22220%22%20y%3D%22281%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffe39a%22%20fill-opacity%3D%221%22/%3E%3Crect%20x%3D%22194%22%20y%3D%22118%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%238ea0d8%22%20fill-opacity%3D%220.5%22/%3E%3Crect%20x%3D%2277%22%20y%3D%22118%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%238ea0d8%22%20fill-opacity%3D%220.5%22/%3E%3Crect%20x%3D%22301%22%20y%3D%2293%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23ffe39a%22%20fill-opacity%3D%220.9%22/%3E%3Crect%20x%3D%2274%22%20y%3D%22214%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffe39a%22%20fill-opacity%3D%220.9%22/%3E%3Crect%20x%3D%22263%22%20y%3D%2227%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23b9a8ff%22%20fill-opacity%3D%221%22/%3E%3Crect%20x%3D%22204%22%20y%3D%22201%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%221%22/%3E%3Crect%20x%3D%2231%22%20y%3D%2297%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.7%22/%3E%3Crect%20x%3D%2283%22%20y%3D%2256%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23ffe39a%22%20fill-opacity%3D%220.5%22/%3E%3Crect%20x%3D%220%22%20y%3D%22290%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%238ea0d8%22%20fill-opacity%3D%220.5%22/%3E%3Crect%20x%3D%22314%22%20y%3D%2213%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.7%22/%3E%3Crect%20x%3D%2276%22%20y%3D%22129%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23ffe39a%22%20fill-opacity%3D%220.9%22/%3E%3Crect%20x%3D%2262%22%20y%3D%2259%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23b9a8ff%22%20fill-opacity%3D%221%22/%3E%3Crect%20x%3D%22247%22%20y%3D%22159%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.7%22/%3E%3Crect%20x%3D%22175%22%20y%3D%22135%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23b9a8ff%22%20fill-opacity%3D%220.7%22/%3E%3Crect%20x%3D%22105%22%20y%3D%22270%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffe39a%22%20fill-opacity%3D%220.7%22/%3E%3Crect%20x%3D%22270%22%20y%3D%22152%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.9%22/%3E%3Crect%20x%3D%2285%22%20y%3D%22182%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%238ea0d8%22%20fill-opacity%3D%220.9%22/%3E%3Crect%20x%3D%22313%22%20y%3D%2299%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%238ea0d8%22%20fill-opacity%3D%221%22/%3E%3Crect%20x%3D%22102%22%20y%3D%22265%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23b9a8ff%22%20fill-opacity%3D%220.9%22/%3E%3Crect%20x%3D%2214%22%20y%3D%22143%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23b9a8ff%22%20fill-opacity%3D%220.9%22/%3E%3Crect%20x%3D%22309%22%20y%3D%22176%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23b9a8ff%22%20fill-opacity%3D%220.9%22/%3E%3Crect%20x%3D%2241%22%20y%3D%22112%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.7%22/%3E%3Crect%20x%3D%22100%22%20y%3D%22172%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%238ea0d8%22%20fill-opacity%3D%221%22/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22180%22%20height%3D%22180%22%3E%3Crect%20x%3D%22156%22%20y%3D%220%22%20width%3D%225%22%20height%3D%225%22%20fill%3D%22%23b9a8ff%22%20fill-opacity%3D%220.9%22/%3E%3Crect%20x%3D%2221%22%20y%3D%22169%22%20width%3D%225%22%20height%3D%225%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%221%22/%3E%3Crect%20x%3D%2251%22%20y%3D%22122%22%20width%3D%225%22%20height%3D%225%22%20fill%3D%22%238ea0d8%22%20fill-opacity%3D%221%22/%3E%3Crect%20x%3D%2285%22%20y%3D%2222%22%20width%3D%225%22%20height%3D%225%22%20fill%3D%22%23b9a8ff%22%20fill-opacity%3D%221%22/%3E%3Crect%20x%3D%2221%22%20y%3D%2240%22%20width%3D%224%22%20height%3D%224%22%20fill%3D%22%238ea0d8%22%20fill-opacity%3D%220.7%22/%3E%3Crect%20x%3D%2238%22%20y%3D%22151%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%23b9a8ff%22%20fill-opacity%3D%220.7%22/%3E%3Crect%20x%3D%22152%22%20y%3D%22121%22%20width%3D%225%22%20height%3D%225%22%20fill%3D%22%23ffe39a%22%20fill-opacity%3D%220.7%22/%3E%3Crect%20x%3D%22140%22%20y%3D%2233%22%20width%3D%225%22%20height%3D%225%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.5%22/%3E%3Crect%20x%3D%22166%22%20y%3D%2226%22%20width%3D%225%22%20height%3D%225%22%20fill%3D%22%238ea0d8%22%20fill-opacity%3D%221%22/%3E%3C/svg%3E");background-size:320px 320px,180px 180px;
  animation:drift 90s linear infinite}
@keyframes drift{to{background-position:0 640px,0 720px}}

/* ---------- header ---------- */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:1100px;margin:0 auto;padding:16px 18px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:19px;line-height:1.1}
.brand .kmark{width:40px;height:40px;flex:none;filter:drop-shadow(3px 3px 0 #000)}
.brand small{display:block;font-size:13px;font-weight:600;color:var(--gold)}
.nav{display:flex;gap:10px}
.nav a{font-weight:600;font-size:16px;text-decoration:none;padding:9px 14px;background:var(--panel);border:3px solid #000;box-shadow:4px 4px 0 #000;transition:transform .08s,box-shadow .08s}
.nav a:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #000}
.nav a[aria-current=page]{background:var(--gold);color:var(--ink)}
@media (max-width:460px){.brand .word{display:none}}

/* ---------- chunky block buttons ---------- */
.btn{--c:#3a6ee0;--hi:#86adff;--lo:#1d3d95;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:58px;padding:12px 28px;
  font:700 22px/1 var(--font);color:#fff;text-decoration:none;background:var(--c);border:4px solid #000;cursor:pointer;
  box-shadow:inset -5px -5px 0 var(--lo),inset 5px 5px 0 var(--hi),6px 6px 0 #000;transition:transform .08s ease,box-shadow .08s ease}
.btn:hover,a:hover>.btn,a:hover .btn{transform:translate(-2px,-2px);box-shadow:inset -5px -5px 0 var(--lo),inset 5px 5px 0 var(--hi),8px 8px 0 #000}
.btn:active{transform:translate(4px,4px);box-shadow:inset -5px -5px 0 var(--lo),inset 5px 5px 0 var(--hi),2px 2px 0 #000}
.btn svg{width:18px;height:18px;flex:none}
.btn.pink{--c:#e23fbf;--hi:#ff9bea;--lo:#8f1d78}
.btn.green{--c:#2fae4a;--hi:#8ff09c;--lo:#17652a}
.btn.sm{min-height:48px;padding:10px 20px;font-size:19px}

/* ---------- home hero ---------- */
.hero{position:relative;max-width:1100px;margin:0 auto;padding:10px 20px 70px;text-align:center;overflow-x:clip}
.logo{position:relative;z-index:2;width:min(90vw,640px);margin:14px auto 0}
.samars{display:inline-block;margin:0 0 16px;padding:3px 18px 7px;font-size:clamp(22px,5.6vw,32px);font-weight:700;line-height:1.1;color:var(--ink);
  background:var(--gold);border:4px solid #000;box-shadow:inset -4px -4px 0 #d19a12,inset 4px 4px 0 #fff3b0,5px 5px 0 #000;transform:rotate(-4deg)}
.logo svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(6px 6px 0 #000)}
.logo .lt{animation:drop .7s cubic-bezier(.34,1.56,.64,1) both,bob 3s ease-in-out infinite;
  animation-delay:calc(var(--i) * 70ms),calc(1s + var(--i) * 140ms)}
@keyframes drop{from{transform:translateY(-70px);opacity:0}to{transform:none;opacity:1}}
@keyframes bob{0%,100%{transform:none}50%{transform:translateY(-4px)}}
.tagline{position:relative;z-index:2;max-width:24ch;margin:26px auto 30px;font-size:clamp(20px,4.8vw,26px);font-weight:600;line-height:1.3;color:var(--soft);text-shadow:2px 2px 0 #000}
.hero .btn{position:relative;z-index:2}
.deco{position:absolute;pointer-events:none;height:auto;filter:drop-shadow(5px 5px 0 rgba(0,0,0,.55))}
.deco.ship{z-index:1;width:clamp(56px,12vw,96px);left:5%;bottom:34px;animation:float 4s ease-in-out infinite}
.deco.scout{z-index:1;width:clamp(46px,10vw,80px);right:5%;top:22px;animation:float2 5s ease-in-out infinite}
.deco.planet{z-index:0;width:clamp(150px,32vw,300px);right:-7%;bottom:-54px;opacity:.85}
@media (max-width:600px){.hero{padding-bottom:96px}.deco.ship{left:7%;bottom:8px}}
@keyframes float{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-12px) rotate(-3deg)}}
@keyframes float2{0%,100%{transform:translateY(0) rotate(8deg)}50%{transform:translateY(10px) rotate(3deg)}}

/* ---------- sections & game cards ---------- */
.wrap{position:relative;z-index:1;max-width:1100px;margin:0 auto;padding:12px 20px 56px}
.h2{margin:0 0 22px;font-size:clamp(30px,7vw,44px);font-weight:700;line-height:1.1;text-shadow:3px 3px 0 #000}
.grid{display:grid;grid-template-columns:1fr;gap:26px}
.card{position:relative;display:block;background:var(--panel);border:4px solid #000;color:#fff;text-decoration:none;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.08),8px 8px 0 #000}
.card .art{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border-bottom:4px solid #000}
.card .art img{display:block;width:100%;height:100%;object-fit:cover}
.card .body{padding:18px 20px 24px}
.card h3{margin:0 0 6px;font-size:clamp(26px,6vw,36px);font-weight:700;line-height:1.1}
.card p{margin:0 0 18px;color:var(--soft)}
.feature{transition:transform .12s ease,box-shadow .12s ease}
.feature:hover{transform:translate(-3px,-3px);box-shadow:inset 0 0 0 3px rgba(255,255,255,.08),11px 11px 0 #000}
.feature .body{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:22px 24px 28px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;padding:0;list-style:none}
.chips li{padding:4px 11px;font-size:15px;font-weight:600;background:rgba(0,0,0,.35);border:2px solid rgba(255,255,255,.25)}
.sticker{position:absolute;z-index:2;top:14px;left:14px;padding:3px 14px 6px;font-size:20px;font-weight:700;color:#fff;background:#e23fbf;border:3px solid #000;box-shadow:4px 4px 0 #000;transform:rotate(-6deg)}
.soon .art{display:grid;place-items:center;background:conic-gradient(var(--a) 25%,var(--b) 0 50%,var(--a) 0 75%,var(--b) 0) 0 0/28px 28px}
.soon .art svg{width:46%;height:auto;filter:drop-shadow(6px 6px 0 rgba(0,0,0,.45))}
.soon .stamp{position:absolute;top:14px;right:12px;padding:3px 12px 6px;font-size:17px;font-weight:700;color:var(--ink);background:var(--gold);border:3px solid #000;box-shadow:4px 4px 0 #000;transform:rotate(5deg)}
.soon .body p{margin:0}
@media (min-width:760px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .feature{grid-column:1/-1;display:grid;grid-template-columns:1.3fr 1fr}
  .feature .art{aspect-ratio:auto;min-height:340px;border-bottom:0;border-right:4px solid #000}
}

/* ---------- meet-the-maker teaser ---------- */
.meet{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;padding:20px;color:var(--ink);text-decoration:none;
  background:var(--gold);border:4px solid #000;box-shadow:inset -6px -6px 0 #d19a12,inset 6px 6px 0 #fff3b0,8px 8px 0 #000}
.meet img{display:block;width:clamp(110px,26vw,160px);height:auto;aspect-ratio:1;object-fit:cover;object-position:50% 12%;background:#fff;
  border:4px solid #000;box-shadow:4px 4px 0 #000;transform:rotate(-3deg)}
.meet h2{margin:0 0 4px;font-size:clamp(26px,6vw,36px);line-height:1.1}
.meet p{margin:0 0 16px;font-size:18px}
@media (max-width:480px){.meet{grid-template-columns:1fr;justify-items:center;text-align:center}}

/* ---------- about page ---------- */
.page-title{margin:10px 0 34px;text-align:center;font-size:clamp(42px,11vw,72px);font-weight:700;line-height:1;color:var(--gold);text-shadow:3px 3px 0 #c2661a,7px 7px 0 #000}
.profile{display:grid;justify-items:center;gap:46px;max-width:980px;margin:0 auto}
.photo{position:relative;width:min(80vw,340px);margin:0;padding:12px;background:#fff;border:4px solid #000;box-shadow:inset -6px -6px 0 #cfd4ea,8px 8px 0 #000;transform:rotate(-3deg)}
.photo img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border:3px solid #000}
.photo .tag{position:absolute;right:-16px;bottom:-20px;padding:4px 14px 7px;font-size:20px;font-weight:700;color:#fff;background:#e23fbf;border:3px solid #000;box-shadow:4px 4px 0 #000;transform:rotate(8deg)}
.bubble{position:relative;max-width:540px;margin:0;padding:26px 26px 16px;font-size:clamp(20px,4.8vw,24px);line-height:1.45;color:var(--ink);
  background:#fff;border:4px solid #000;box-shadow:inset -6px -6px 0 #e3e0f7,8px 8px 0 #000}
.bubble::before{content:"";position:absolute;top:-17px;left:50%;width:26px;height:26px;background:#fff;border:4px solid #000;border-right:0;border-bottom:0;transform:translateX(-50%) rotate(45deg)}
.bubble p{margin:0 0 12px}
.bubble .hi{font-size:1.5em;font-weight:700;line-height:1.15;color:#c42ba4}
.bubble b{font-weight:700;padding:0 5px;background:#ffe98a;box-shadow:inset 0 -3px 0 #f2c200}
@media (min-width:760px){
  .profile{grid-template-columns:auto 1fr;align-items:center;gap:56px}
  .bubble::before{top:42%;left:-17px;transform:rotate(-45deg)}
}
.mygames{max-width:980px;margin:64px auto 0}
.mini{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;padding:14px;background:var(--panel);border:4px solid #000;box-shadow:8px 8px 0 #000;text-decoration:none;transition:transform .12s,box-shadow .12s}
.mini:hover{transform:translate(-3px,-3px);box-shadow:11px 11px 0 #000}
.mini img{display:block;width:clamp(110px,30vw,200px);height:auto;aspect-ratio:4/3;object-fit:cover;border:3px solid #000}
.mini h3{margin:0 0 4px;font-size:clamp(22px,5vw,30px);line-height:1.1}
.mini p{margin:0 0 12px;font-size:16px;color:var(--soft)}
.more{margin:24px 0 0;text-align:center;color:var(--soft)}
.back{margin:40px 0 0;text-align:center}

/* ---------- footer ---------- */
.foot{max-width:1100px;margin:0 auto;padding:24px 20px calc(env(safe-area-inset-bottom,0px) + 40px);text-align:center;font-size:16px;color:var(--soft)}
.foot p{margin:4px 0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}