/* Rockpool Arcade — "Gum & Tide" design theme
   A warm shell-paper ground with deep rock-ink text and four flat spot colours
   (coral, tide teal, eucalyptus, sun gold). The same five colours are the merch
   palette: paper and ink plus the four accents, all flat and print friendly. */
:root{
  --paper:#f7efdc; --card:#fffdf6; --sandline:#e6d7b4;
  --ink:#1c3a40; --ink2:#4b656c;
  --coral:#ff6b4a; --coraldeep:#c94b2b;
  --gum:#3f8e6b; --gumdeep:#2e6b50;
  --tide:#197687; --tidedeep:#135e6c;
  --sun:#efb63c; --sundeep:#8a6414;
  --tint-tide:#dceef0; --tint-coral:#fbe3d9; --tint-gum:#dfeedf; --tint-sun:#f9ecca;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16.5px; line-height:1.65;
}
h1,h2,h3{font-family:'Bungee',cursive; line-height:1.15; text-wrap:balance; margin:0 0 .4em; color:var(--ink);}
h1{font-size:clamp(34px,6vw,58px);}
h2{font-size:clamp(22px,3.4vw,32px);}
h3{font-size:17px; letter-spacing:.5px; color:var(--tidedeep);}
p{margin:0 0 1em; max-width:68ch;}
a{color:var(--tidedeep);}
img{max-width:100%; display:block;}

/* ---------- nav ---------- */
header{
  position:sticky; top:0; z-index:20;
  background:rgba(247,239,220,.94); backdrop-filter:blur(8px);
  border-bottom:2px solid var(--sandline);
}
.nav{max-width:1060px; margin:0 auto; padding:14px 22px;
  display:flex; align-items:center; gap:26px; flex-wrap:wrap;}
.logo{font-family:'Bungee',cursive; font-size:19px; color:var(--coraldeep);
  text-decoration:none; letter-spacing:1px;}
.logo span{color:var(--tidedeep);}
.nav ul{display:flex; gap:20px; list-style:none; margin:0 0 0 auto; padding:0; flex-wrap:wrap;}
.nav a.link{font-weight:800; font-size:14px; letter-spacing:.6px; text-transform:uppercase;
  color:var(--ink); text-decoration:none; opacity:.75; padding:4px 2px;
  border-bottom:3px solid transparent;}
.nav a.link:hover{opacity:1;}
.nav a.link[aria-current="page"]{color:var(--ink); opacity:1; border-bottom-color:var(--coral);}
.pill{font-size:10px; font-weight:800; background:var(--coral); color:#fffdf6;
  border-radius:8px; padding:1px 7px; margin-left:5px; vertical-align:2px; letter-spacing:.5px;}

/* ---------- heroes: one tinted band per page ---------- */
.hero{position:relative; overflow:hidden; background:var(--tint-tide);
  border-bottom:2px solid var(--sandline);}
.hero.coral{background:var(--tint-coral);}
.hero.gum{background:var(--tint-gum);}
.hero.sun{background:var(--tint-sun);}
.hero-inner{max-width:1060px; margin:0 auto; padding:64px 22px 72px; position:relative;}
.hero p.lede{font-size:clamp(17px,2.2vw,21px); color:var(--ink); opacity:.85; max-width:56ch;}
.eyebrow{font-weight:800; letter-spacing:2.5px; text-transform:uppercase; font-size:12.5px;
  color:var(--tidedeep); margin:0 0 10px;}
.hero.coral .eyebrow{color:var(--coraldeep);}
.hero.gum .eyebrow{color:var(--gumdeep);}
.hero.sun .eyebrow{color:var(--sundeep);}
.hero .waves{position:absolute; left:0; right:0; bottom:-2px; width:100%; height:56px; display:block;}

/* ---------- layout ---------- */
main{max-width:1060px; margin:0 auto; padding:48px 22px 30px;}
section{margin:0 0 56px;}
.grid{display:grid; gap:20px;}
.grid.cols2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
.grid.cols4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.card{background:var(--card); border:2px solid var(--sandline); border-radius:16px; padding:24px;}
.card h3{margin-top:2px;}
.card .icon{font-size:30px; line-height:1; margin-bottom:10px; display:block;}
.note{background:var(--tint-tide); border:2px solid var(--sandline); border-radius:12px;
  padding:16px 20px; font-size:15px;}
.note b{color:var(--tidedeep);}

/* buttons */
.btn{display:inline-block; font-family:'Bungee',cursive; font-size:16px; color:#fffdf6;
  background:var(--coraldeep); border:none; border-radius:12px; padding:13px 28px; cursor:pointer;
  letter-spacing:1px; text-decoration:none; box-shadow:0 5px 0 #8f3018; transition:transform .1s;}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(2px); box-shadow:0 2px 0 #8f3018;}
.btn.ghost{background:transparent; color:var(--tidedeep); box-shadow:none;
  border:2px solid var(--tidedeep); padding:11px 22px;}
.btn[aria-disabled="true"]{background:#b9ac8f; color:#fffdf6;
  box-shadow:0 5px 0 #8f8468; cursor:not-allowed; transform:none;}
.btn:focus-visible{outline:3px solid var(--tidedeep); outline-offset:2px;}

/* ---------- game feature ---------- */
.feature{display:grid; gap:28px; grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  align-items:center; background:var(--card); border:2px solid var(--sandline);
  border-radius:20px; padding:28px; overflow:hidden;}
.feature img{border-radius:12px; border:2px solid var(--sandline); width:100%; height:auto;}
.feature ul{margin:0 0 18px; padding-left:20px;}
.feature li{margin-bottom:6px;}
.mystery{display:flex; align-items:center; justify-content:center; min-height:180px;
  border:2px dashed var(--sandline); border-radius:16px; background:rgba(255,253,246,.6);
  color:var(--ink2); font-family:'Bungee',cursive; font-size:15px;
  letter-spacing:1px; text-align:center; padding:20px;}

/* ---------- animal profiles ---------- */
.animal{display:grid; gap:6px 18px; grid-template-columns:auto 1fr; align-items:baseline;
  border-left:4px solid var(--coral); padding:6px 0 6px 18px; margin-bottom:26px;}
.animal .emoji{font-size:34px; grid-row:span 2;}
.animal h3{margin:0; color:var(--ink);}
.animal .status{font-size:12.5px; font-weight:800; letter-spacing:1px; text-transform:uppercase;
  color:var(--coraldeep);}
.animal p{grid-column:2; margin:.4em 0 0; font-size:15.5px;}

/* comparison table */
.tablewrap{overflow-x:auto; border:2px solid var(--sandline); border-radius:12px; background:var(--card);}
table{border-collapse:collapse; width:100%; min-width:640px; font-size:14.5px;}
th,td{padding:10px 14px; text-align:left; border-bottom:1px solid var(--sandline);}
th{font-family:'Bungee',cursive; font-size:12px; letter-spacing:1px; color:#fffdf6;
  background:var(--tidedeep); font-weight:400;}
tr:last-child td{border-bottom:none;}
td:first-child{color:var(--coraldeep); font-weight:800;}

/* ---------- about ---------- */
.bio{display:grid; gap:28px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); align-items:start;}
.koala-card{background:var(--tint-gum);
  border:2px solid var(--gum); border-radius:20px; padding:28px; text-align:center;}
.koala-card .big{font-size:64px; line-height:1; margin-bottom:8px;}
.koala-card .btn.ghost{color:var(--gumdeep); border-color:var(--gumdeep);}

/* ---------- merch ---------- */
.soon-banner{background:var(--tint-sun); border:2px solid var(--sun); border-radius:14px;
  padding:18px 24px; margin-bottom:34px; font-size:16px;}
.soon-banner b{color:var(--sundeep); font-family:'Bungee',cursive; letter-spacing:1px; font-weight:400;}
.tee{background:var(--card); border:2px solid var(--sandline); border-radius:16px; padding:22px;
  text-align:center;}
.tee svg{width:100%; max-width:210px; height:auto; margin:0 auto 12px; display:block;}
.tee .price{color:var(--sundeep); font-family:'Bungee',cursive; font-size:15px; margin:2px 0 12px;}

/* ---------- footer: the ink that grounds every page ---------- */
footer{border-top:4px solid var(--coral); background:var(--ink); color:var(--paper); margin-top:30px;}
.foot{max-width:1060px; margin:0 auto; padding:30px 22px 40px; font-size:14px;
  display:flex; gap:24px; flex-wrap:wrap; justify-content:space-between; align-items:flex-start;}
.foot .cols{display:flex; gap:40px; flex-wrap:wrap;}
.foot h3{font-size:13px; color:var(--sun);}
.foot .logo{color:var(--coral);}
.foot .logo span{color:#9fd4de;}
.foot ul{list-style:none; margin:0; padding:0;}
.foot li{margin-bottom:6px;}
.foot a{color:var(--paper); opacity:.85; text-decoration:none;}
.foot a:hover{opacity:1; text-decoration:underline;}
.foot .tag{opacity:.75; max-width:36ch;}

@media (prefers-reduced-motion: reduce){
  .btn{transition:none;}
  html{scroll-behavior:auto;}
}