:root{
  /* Bluey-inspired palette */
  --navy:#101a3d; --slate:#4d4b70; --sky:#84c3ef; --ice:#cfe0f7; --sun:#f0c95c;
  --brown:#8d5a33; --orange:#e07a26; --peach:#fbaa6b; --tan:#f9cf8c; --cream:#fdf6dd;
  --grass:#a9d94b; --sky-hi:#c7e8fb;
  --ink:var(--navy);
}
body::after{ /* Bluey backyard grass */
  content:"";position:fixed;left:0;right:0;bottom:0;height:22vh;z-index:-1;
  background:linear-gradient(180deg,var(--grass),#8ec63f);
  border-radius:50% 50% 0 0/12vh 12vh 0 0;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:"Baloo 2","Comic Sans MS","Trebuchet MS",system-ui,sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,var(--sky-hi),var(--sky) 60%,#9ed0f2);
  background-attachment:fixed;
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none; /* no long-press callout over the games */
}
h1{font-size:clamp(2rem,6vw,3.4rem);margin:.2em 0;text-align:center;color:var(--navy);
   text-shadow:0 3px 0 var(--cream),0 6px 12px rgba(16,26,61,.15)}
.sub{text-align:center;margin:0 0 1.2em;font-size:1.1rem;color:var(--navy);opacity:.75}
.wrap{max-width:1000px;margin:0 auto;padding:24px}

/* ----- landing hero: Bronty, and a hello ----- */
.hero{
  display:grid;gap:clamp(16px,3vw,32px);align-items:center;
  grid-template-columns:minmax(180px,clamp(180px,26vw,300px)) 1fr;
  margin:0 0 clamp(24px,5vh,44px);
}
.portrait{margin:0}
.portrait img{
  display:block;width:100%;border-radius:28px;
  background:var(--cream);
  box-shadow:0 10px 0 rgba(16,26,61,.18),0 18px 36px rgba(16,26,61,.2);
}
.hello h1{text-align:left;margin:0 0 .25em}
.welcome{
  margin:0;font-size:clamp(1.05rem,2.2vw,1.4rem);line-height:1.5;
  background:var(--cream);border-radius:26px;padding:1em 1.15em;
  box-shadow:0 8px 0 rgba(16,26,61,.14),0 14px 30px rgba(16,26,61,.16);
}
.sign{
  margin:.5em .3em 0;text-align:right;font-size:clamp(1.1rem,2.4vw,1.5rem);
  font-weight:800;color:var(--navy);text-shadow:0 2px 0 var(--cream);
}
.shelf-title{
  font-size:clamp(1rem,2.2vw,1.35rem);font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;color:var(--navy);opacity:.62;margin:0 0 .7em;
}
/* no photo yet: fall back to a plain, centred hello */
.hero.no-portrait{grid-template-columns:1fr;justify-items:center;text-align:center}
.hero.no-portrait h1,
.hero.no-portrait .sign{text-align:center}

@media (max-width:640px){
  .hero{grid-template-columns:1fr;justify-items:center;text-align:center}
  .portrait{max-width:min(78vw,320px)}
  .hello h1{text-align:center}
  .sign{text-align:center}
}

.cards{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.card{
  display:block;text-decoration:none;color:inherit;background:var(--cream);
  border-radius:28px;padding:22px;
  box-shadow:0 8px 0 rgba(16,26,61,.18),0 14px 30px rgba(16,26,61,.18);
  transition:transform .15s ease;
}
.card:hover,.card:focus-visible{transform:translateY(-6px) rotate(-1deg)}
.card .emoji{font-size:3.2rem;line-height:1}
.card h2{margin:.3em 0 .1em;font-size:1.5rem;color:var(--navy)}
.card p{margin:0;opacity:.75}
.card .tag{display:inline-block;vertical-align:middle;margin-left:.4em;padding:.15em .6em;
  border-radius:999px;background:var(--sun);color:var(--navy);
  font-size:.5em;letter-spacing:.04em;text-transform:uppercase}
.card .tag.new{background:var(--orange);color:var(--cream);text-transform:none;
  font-size:.55em;letter-spacing:0;animation:tag-pop 2.4s ease-in-out infinite}
@keyframes tag-pop{0%,72%,100%{transform:rotate(-3deg) scale(1)}80%{transform:rotate(-3deg) scale(1.12)}}
.card .tag.soon{background:var(--sky);color:var(--navy);text-transform:none;
  font-size:.55em;letter-spacing:0;transform:rotate(-3deg)}
@media (prefers-reduced-motion:reduce){.card .tag.new{animation:none}}
.card.soon{opacity:.75;cursor:default;pointer-events:none;background:var(--ice);border:3px dashed rgba(16,26,61,.2)}
.btn{
  border:0;border-radius:999px;padding:.7em 1.4em;font:inherit;font-size:1.1rem;
  background:var(--cream);color:var(--navy);cursor:pointer;
  box-shadow:0 5px 0 rgba(16,26,61,.25);transition:transform .1s;
}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(16,26,61,.25)}

/* Asset credits at the foot of the library page */
.credits{margin:2.5em auto 1em;max-width:40em;text-align:center;font-size:.9em;color:var(--slate)}
.credits a{color:var(--navy);font-weight:700}

/* A card with a second link: the title link covers the card, extra links sit on top */
.card.multi{position:relative}
.card.multi .card-main{color:inherit;text-decoration:none}
.card.multi .card-main::after{content:"";position:absolute;inset:0;border-radius:inherit}
.card .card-links{position:relative;z-index:1;margin-top:.6em;opacity:1}
.card .card-links a{display:inline-block;font-weight:800;color:var(--navy);background:var(--sun);border-radius:999px;padding:.25em .9em;text-decoration:none;box-shadow:0 3px 0 rgba(16,26,61,.2)}
.card:focus-within{transform:translateY(-6px) rotate(-1deg)}

/* Card footer: control-style icons on the left, players chip bottom right */
.card{display:flex;flex-direction:column}
.card-foot{margin-top:auto;padding-top:.8em;display:flex;align-items:center;justify-content:space-between;gap:8px}
.card-controls{display:flex;gap:6px;flex-wrap:wrap}
.card-controls .ctl{display:grid;place-items:center;width:1.9em;height:1.9em;border-radius:10px;background:var(--ice);font-size:1.05rem;line-height:1}
.players-chip{margin-left:auto;white-space:nowrap;font-weight:800;font-size:.95rem;color:var(--navy);background:var(--sun);
  border-radius:999px;padding:.2em .7em;box-shadow:0 3px 0 rgba(16,26,61,.18)}