/* Basic, accessible, lightweight styles */
:root{
  --bg:#f7fbff;
  --fg:#13293d;
  --muted:#6b7b8c;
  --accent:#0ea5e9;
  --accent-2:#22c55e;
  --accent-3:#f59e0b;
  --danger:#ef4444;
  --surface:#ffffff;
  --surface-2:#eef2f7;
  --radius:16px;
}

*{ box-sizing:border-box; }
html, body { margin:0; padding:0; height:100%; background:var(--bg); color:var(--fg); font-family: ui-rounded, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; }
button, a { font: inherit; }

.topbar, .bottombar{
  display:flex; align-items:center; gap:12px;
  padding:12px 16px; background:var(--surface); border-bottom:1px solid var(--surface-2);
}
.bottombar{ border-top:1px solid var(--surface-2); border-bottom:none; position:sticky; bottom:0; }

.brand{ display:flex; align-items:center; gap:8px; font-size:18px; }
.controls{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.nav-btn, .controls button{
  padding:10px 16px; border-radius:var(--radius); border:1px solid var(--surface-2); background:var(--surface);
  cursor:pointer; transition:transform .05s ease;
}
.nav-btn:active, .controls button:active{ transform: scale(0.98); }
.nav-btn[disabled]{ opacity:.5; cursor:not-allowed; }

.progress{
  list-style:none; display:flex; gap:8px; padding:0; margin:0 0 0 16px; align-items:center;
}
.progress li{
  width:14px; height:14px; border-radius:999px; background:var(--surface-2); border:1px solid #d0d8e2;
}
.progress li.done{ background: var(--accent-2); }
.progress li.current{ background: var(--accent); }

#stage{
  min-height: calc(100dvh - 140px);
  padding: 16px;
  display:grid; place-items:center;
}

.game-card{
  width:min(960px, 96vw);
  background: var(--surface);
  border-radius: calc(var(--radius) + 8px);
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
  padding:16px;
}

h1, h2{ margin:0 0 8px; }
p{ margin: 0 0 12px; color:var(--muted); }

.grid{
  display:grid; gap:12px;
}

@media (min-width: 720px){
  .grid.cols-3{ grid-template-columns: repeat(3, 1fr); }
  .grid.cols-2{ grid-template-columns: repeat(2, 1fr); }
}

.bucket{
  min-height:140px; border:2px dashed #c2d1e2; border-radius:16px; display:grid; place-items:center;
}
.bucket[data-color="red"]{ outline:3px solid #ef4444; }
.bucket[data-color="yellow"]{ outline:3px solid #f59e0b; }
.bucket[data-color="green"] { outline:3px solid #22c55e; }

.leaf{
  width:72px; height:72px; border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
  display:grid; place-items:center; font-size:24px; color:#000;
  border:2px solid rgba(0,0,0,.06); box-shadow: inset 0 2px 6px rgba(0,0,0,.05);
  touch-action: none;
}
.leaf[data-color="red"]   { background:#fecaca; }
.leaf[data-color="yellow"]{ background:#fde68a; }
.leaf[data-color="green"] { background:#bbf7d0; }

.row{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;
}
.sr-only-focusable:focus{ position:static; width:auto; height:auto; margin:0; overflow:visible; clip:auto; }
:focus-visible{ outline: 3px solid var(--accent); outline-offset: 2px; }

/* Center the content column and constrain width */
.stage-wrap { width: min(960px, 96vw); margin-inline: auto; }

/* Ensure cards inside grids fit their columns (don’t take full 960px) */
.grid .game-card { width: 100%; }

/* Nudge the stage to center available space */
#stage { place-content: center; }

/* ---------- Avatar strip (legacy; not used now) ---------- */
.avatar-strip{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  margin:8px 0 4px;
}
.avatar{
  width:64px; height:64px;
  border-radius:999px;
  overflow:hidden;
  background:var(--surface-2);
  border:2px solid #d0d8e2;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
@media (min-width:720px){
  .avatar{ width:72px; height:72px; }
}
.avatar img{
  width:100%; height:100%;
  object-fit:cover; display:block;
}

/* ===== Level 2 (Bug Count) ===== */
.bug-grid{
  display:grid;
  grid-template-columns: repeat(5, minmax(44px, 1fr));
  gap:8px;
  justify-items:center;
  align-items:center;
}
.bug{ font-size:28px; line-height:44px; width:44px; height:44px; text-align:center; user-select:none; }

.num-grid{
  display:grid;
  grid-template-columns: repeat(5, minmax(44px, 1fr));
  gap:8px;
}
.num-btn{ min-height:44px; font-weight:600; }

/* ===== Intro hero (single character slide) ===== */
.hero-card{
  width:min(960px, 96vw);
  background: var(--surface);
  border-radius: calc(var(--radius) + 8px);
  box-shadow: 0 8px 30px rgba(0,0,0,.08);
  padding:24px;
  display:grid;
  place-items:center;
  text-align:center;
}
.hero-photo{
  width:160px; height:160px;
  border-radius:999px;
  overflow:hidden;
  background:var(--surface-2);
  border:4px solid #d0d8e2;
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}
.hero-photo img{
  width:100%; height:100%;
  object-fit:cover; display:block;
}
.hero-title{ margin:12px 0 6px; font-size:clamp(20px, 3vw, 28px); }
.speech{
  margin-top:4px;
  background: var(--surface-2);
  border:1px solid #d0d8e2;
  padding:12px 14px;
  border-radius:16px;
  color: var(--fg);
}
.hero-actions{ margin-top:12px; display:flex; gap:8px; justify-content:center; }
.nav-btn.primary{ background: var(--accent); color:#fff; border-color: var(--accent); }
.nav-btn.primary:hover{ filter: brightness(0.96); }

/* ===== Level 3 (Recycle Sorter) ===== */
.bin{
  min-height:140px;
  border:2px dashed #c2d1e2;
  border-radius:16px;
  display:grid;
  place-items:center;
}
.bin[data-key="recycle"]{ outline:3px solid var(--accent); }   /* blue */
.bin[data-key="compost"]{ outline:3px solid var(--accent-2); } /* green */
.bin[data-key="trash"]  { outline:3px solid #9aa7b4; }         /* gray */

.item{
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.item:active{ cursor: grabbing; }

/* ===== Level 4 (Eco Quiz) — optional polish ===== */
.game-card h2 { font-size: clamp(18px, 2.2vw, 22px); }
.row .nav-btn { min-width: 120px; justify-content: center; }

/* ===== Level 5 (Greener Choice) — optional polish ===== */
.row .nav-btn { min-width: 160px; justify-content: center; }
@media (min-width: 720px){
  .row .nav-btn { min-width: 200px; }
}