/* AvoCODo Games — palette lifted from the game's own beach art */
:root{
  --sea:#5aaee0; --sea-deep:#2d7fb8; --sand:#e8c89a; --sand-dark:#c9a373;
  --coral:#d94f3d; --ink:#1a1a1a; --paper:#fffaf2; --shell:#f2c9b0;
}
*{box-sizing:border-box;margin:0;padding:0}
img{image-rendering:pixelated;image-rendering:crisp-edges}
body{
  font-family:"Trebuchet MS",Verdana,sans-serif;
  color:var(--ink);background:var(--sea);
  line-height:1.55;-webkit-font-smoothing:antialiased;
}
a{color:var(--sea-deep)}
.wrap{max-width:1000px;margin:0 auto;padding:0 20px}

/* ---------- hero ---------- */
header{
  background:var(--sea);
  padding:48px 0 0;position:relative;overflow:hidden;
}
/* the sand strip is its own band, so header text can never straddle the seam */
.shore{background:var(--sand);padding-top:10px}
.brand{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.brand img{width:88px;height:88px}
.brand h1{
  font-size:clamp(2.4rem,7vw,4rem);letter-spacing:-1px;color:var(--paper);
  text-shadow:4px 4px 0 var(--ink);line-height:1;
}
.brand h1 span{color:#b9e34a}
.tagline{
  color:var(--paper);font-size:clamp(1rem,2.4vw,1.3rem);margin:14px 0 34px;
  text-shadow:2px 2px 0 rgba(0,0,0,.35);max-width:620px;
}
.crew{margin:26px 0 40px;display:flex;gap:10px;flex-wrap:wrap}
.chip{
  background:var(--paper);border:3px solid var(--ink);border-radius:999px;
  padding:5px 16px;font-weight:bold;font-size:.92rem;
}
.beachline{height:74px;display:flex;align-items:flex-end;gap:26px;padding-bottom:6px}
.beachline img{height:44px;width:auto}
.beachline img:nth-child(2){height:30px}
.beachline img:nth-child(3){height:52px}

/* ---------- sections ---------- */
main{background:var(--sand);padding-bottom:60px}
section{padding:44px 0 8px}
h2{
  font-size:clamp(1.5rem,4vw,2.1rem);margin-bottom:6px;color:var(--ink);
}
.sub{color:#6b563c;margin-bottom:26px}

/* ---------- game cards ---------- */
.games{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:22px}
.card{
  background:var(--paper);border:4px solid var(--ink);border-radius:14px;
  overflow:hidden;display:flex;flex-direction:column;
  box-shadow:6px 6px 0 rgba(0,0,0,.22);
  transition:transform .12s ease, box-shadow .12s ease;
}
a.card{text-decoration:none;color:inherit}
.card:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 rgba(0,0,0,.28)}
.card.soon:hover{transform:none;box-shadow:6px 6px 0 rgba(0,0,0,.22)}
a.playnow{text-decoration:none}
.card .art{
  background:var(--sea);padding:26px;display:flex;justify-content:center;align-items:center;
  gap:14px;border-bottom:4px solid var(--ink);min-height:150px;
}
.card .art img{height:76px;width:auto}
.card .body{padding:18px 20px 20px}
.card h3{font-size:1.35rem;margin-bottom:4px}
.card p{font-size:.95rem;color:#5a4a38}
.badge{
  display:inline-block;background:var(--coral);color:#fff;font-size:.72rem;
  font-weight:bold;letter-spacing:.5px;padding:3px 10px;border-radius:999px;
  margin-bottom:8px;text-transform:uppercase;
}
.badge.soon{background:var(--sand-dark)}
.card.soon{opacity:.72}
.playnow{
  display:inline-block;margin-top:14px;background:var(--coral);color:#fff;
  font-weight:bold;padding:9px 20px;border-radius:999px;border:3px solid var(--ink);
}

/* ---------- skins strip ---------- */
.skins{
  display:flex;gap:20px;flex-wrap:wrap;background:var(--sea);border:4px solid var(--ink);
  border-radius:14px;padding:22px;justify-content:center;align-items:center;
}
.skins img{height:62px;width:auto}

/* ---------- studio ---------- */
.studio{
  background:var(--paper);border:4px solid var(--ink);border-radius:14px;padding:26px;
}
.studio p{margin-bottom:12px;max-width:70ch}
.studio p:last-child{margin-bottom:0}

/* ---------- game page ---------- */
.gamewrap{background:var(--ink);padding:14px;border-radius:14px;border:4px solid var(--ink)}
.frame{position:relative;width:100%;aspect-ratio:1366/768;background:#000;border-radius:6px;overflow:hidden}
/* The game renders at its native 1366x768. Scaling the CANVAS breaks GameMaker's mouse
   mapping, so scale the whole IFRAME instead - the browser maps pointer events through a
   CSS transform correctly, so clicks still land where they look like they land. */
.frame iframe{
  position:absolute;top:0;left:0;width:1366px;height:768px;border:0;display:block;
  transform-origin:top left;
}
/* click-to-play poster */
.poster{
  position:absolute;inset:0;display:flex;flex-direction:column;gap:16px;
  align-items:center;justify-content:center;cursor:pointer;
  background:var(--sea);text-align:center;padding:20px;
}
.poster img{height:96px;width:auto;image-rendering:pixelated}
.poster .play{
  background:var(--coral);color:#fff;border:4px solid var(--ink);border-radius:999px;
  padding:14px 44px;font-size:1.35rem;font-weight:bold;box-shadow:5px 5px 0 rgba(0,0,0,.3);
}
.poster:hover .play{transform:translate(-2px,-2px);box-shadow:7px 7px 0 rgba(0,0,0,.35)}
.poster small{color:#123c56;font-size:.92rem;max-width:44ch}
.poster.hidden{display:none}
.gamebar{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:12px;flex-wrap:wrap}
.gamebar button{
  background:var(--coral);color:#fff;border:3px solid var(--ink);border-radius:999px;
  padding:8px 20px;font-weight:bold;font-size:.95rem;cursor:pointer;font-family:inherit;
}
.gamebar button:hover{filter:brightness(1.08)}
.hint{color:#cfc4b4;font-size:.86rem}
.controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:8px}
.ctrl{background:var(--paper);border:3px solid var(--ink);border-radius:12px;padding:14px 16px}
.ctrl b{display:block;font-size:1.02rem;margin-bottom:2px}
.ctrl span{font-size:.92rem;color:#5a4a38}
.back{display:inline-block;margin:26px 0 0;font-weight:bold}

footer{background:var(--ink);color:#cfc4b4;padding:26px 0;font-size:.88rem}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer img{height:26px;vertical-align:middle;margin-right:8px}
@media (max-width:600px){ .brand img{width:62px;height:62px} .beachline{display:none} }

/* In fullscreen the frame IS the screen. Centring is done by the transform in JS
   (translate + scale from a top-left origin), so do NOT also use flex here - the two
   fight each other and the result lands off-centre and clipped. */
.frame:fullscreen,.frame:-webkit-full-screen{
  aspect-ratio:auto;width:100vw;height:100vh;background:#000;
}