/* ==========================================================================
   Year 2 Summer Arcade — shared design system
   Beach/summer palette to sit alongside the worksheet artwork.
   ========================================================================== */

:root {
  --sand:      #fff4dc;
  --sand-deep: #ffe6b8;
  --sea:       #35c6d8;
  --sea-deep:  #0d94ab;
  --teal:      #0a5e70;
  --coral:     #ff6b5a;
  --coral-deep:#e04a39;
  --sun:       #ffc93c;
  --sun-deep:  #eda600;
  --grass:     #57c84d;
  --grass-deep:#3ba233;
  --grape:     #8b6fd4;
  --grape-deep:#6b4fb8;
  --pink:      #ff8fc2;
  --ink:       #0a3d49;
  --white:     #ffffff;

  --r-sm: 12px;
  --r:    18px;
  --r-lg: 26px;

  --shadow:    0 6px 0 rgba(10, 61, 73, .18), 0 10px 22px rgba(10, 61, 73, .14);
  --shadow-sm: 0 4px 0 rgba(10, 61, 73, .16), 0 6px 14px rgba(10, 61, 73, .12);

  --font: 'Nunito', 'Baloo 2', 'Arial Rounded MT Bold', 'Segoe UI Rounded',
          system-ui, -apple-system, 'Segoe UI', sans-serif;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* The page itself is the one and only scroller.
   This used to be height:100% with an inner scrolling box, but .shell grows
   with its content (min-height, not height), so that box was never actually
   scrollable — and its overscroll-behavior:contain then swallowed touch drags
   instead of passing them to the page. The grid below the fold became
   unreachable. One scroller, no traps. */
html, body {
  min-height: 100%;
  overscroll-behavior-y: none;   /* no pull-to-refresh; normal scrolling stays */
}

body {
  font-family: var(--font);
  font-weight: 800;
  color: var(--ink);
  background: linear-gradient(175deg, #a8ecf7 0%, #5ed6e4 42%, #9fe8d5 66%, var(--sand) 100%);
  background-attachment: fixed;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

img { -webkit-user-drag: none; user-drag: none; }

/* --------------------------------------------------------------- app shell */

.shell {
  min-height: 100vh;
  min-height: 100dvh;            /* dvh so the mobile URL bar cannot clip it */
  display: flex;
  flex-direction: column;
  padding: calc(var(--safe-t) + 8px) 12px calc(var(--safe-b) + 20px);
  max-width: 780px;
  margin: 0 auto;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex: 0 0 auto;
  /* the page scrolls now, so pin the back button where a child can reach it */
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 6px 0;
  background: linear-gradient(180deg, rgba(178,238,248,.96) 60%, rgba(178,238,248,0));
  backdrop-filter: blur(4px);
}

.topbar h1 {
  flex: 1 1 auto;
  min-width: 0;
  font-size: clamp(18px, 5vw, 26px);
  color: var(--teal);
  text-shadow: 0 2px 0 rgba(255, 255, 255, .75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.icon-btn {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 14px;
  background: rgba(255, 255, 255, .65);
  color: var(--teal);
  font-size: 22px;
  font-family: inherit;
  font-weight: 900;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  display: grid;
  place-items: center;
  transition: transform .1s;
}
.icon-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(10,61,73,.16); }

.pill {
  flex: 0 0 auto;
  background: rgba(255, 255, 255, .72);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 15px;
  color: var(--teal);
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}

/* ----------------------------------------------------------------- buttons */

.btn {
  border: none;
  border-radius: var(--r);
  padding: 14px 22px;
  font-family: inherit;
  font-size: clamp(16px, 4.2vw, 20px);
  font-weight: 900;
  color: #fff;
  background: var(--sea);
  cursor: pointer;
  box-shadow: var(--shadow);
  text-shadow: 0 2px 3px rgba(0, 0, 0, .18);
  transition: transform .1s;
  min-height: 54px;
}
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(10,61,73,.18); }
.btn.coral  { background: var(--coral); }
.btn.sun    { background: var(--sun); color: var(--ink); text-shadow: none; }
.btn.grass  { background: var(--grass); }
.btn.grape  { background: var(--grape); }
.btn.ghost  { background: rgba(255,255,255,.7); color: var(--teal); text-shadow: none; }
.btn:disabled { opacity: .45; pointer-events: none; }

/* ------------------------------------------------------------------- cards */

.panel {
  background: rgba(255, 255, 255, .82);
  border-radius: var(--r-lg);
  padding: 16px;
  box-shadow: var(--shadow);
}

/* --------------------------------------------------------- progress + hud */

.hud {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex: 0 0 auto;
}

.bar {
  flex: 1 1 auto;
  height: 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(10, 61, 73, .16);
}
.bar > i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sun), var(--grass));
  transition: width .35s cubic-bezier(.3, 1.4, .5, 1);
}

.stars { font-size: 20px; letter-spacing: 1px; flex: 0 0 auto; }

/* ------------------------------------------------------------- game stage */

.stage {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

.prompt {
  background: rgba(255, 255, 255, .88);
  border-radius: var(--r-lg);
  padding: clamp(12px, 3.5vw, 20px);
  text-align: center;
  font-size: clamp(17px, 4.6vw, 24px);
  color: var(--teal);
  box-shadow: var(--shadow-sm);
  line-height: 1.35;
}
.prompt small { display: block; font-size: .68em; opacity: .72; margin-top: 6px; font-weight: 700; }

/* answer grid */
.opts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.opts.one { grid-template-columns: 1fr; }
.opts.three { grid-template-columns: repeat(3, 1fr); }

.opt {
  border: none;
  border-radius: var(--r);
  background: #fff;
  color: var(--teal);
  font-family: inherit;
  font-weight: 900;
  font-size: clamp(18px, 5vw, 26px);
  padding: 16px 10px;
  min-height: 66px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform .1s, background .18s;
}
.opt:active { transform: translateY(3px); }
.opt img { max-height: 54px; max-width: 100%; object-fit: contain; }
.opt.right { background: var(--grass); color: #fff; animation: pop .35s; }
.opt.wrong { background: var(--coral); color: #fff; animation: shake .38s; }
.opt.dim { opacity: .4; }

@keyframes pop   { 0%{transform:scale(1)} 45%{transform:scale(1.12)} 100%{transform:scale(1)} }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-8px)}
                   45%{transform:translateX(7px)} 70%{transform:translateX(-4px)} }
@keyframes floatUp { from{opacity:1;transform:translate(-50%,0) scale(1)}
                     to{opacity:0;transform:translate(-50%,-70px) scale(1.5)} }
@keyframes fadeIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }

.fade { animation: fadeIn .28s ease-out; }

/* floating "+1" style feedback */
.floater {
  position: fixed;
  left: 50%;
  top: 45%;
  transform: translate(-50%, 0);
  font-size: 46px;
  pointer-events: none;
  z-index: 60;
  animation: floatUp .9s ease-out forwards;
  text-shadow: 0 3px 6px rgba(0, 0, 0, .25);
}

/* ------------------------------------------------------------------ modal */

.scrim {
  position: fixed;
  inset: 0;
  background: rgba(6, 50, 60, .55);
  backdrop-filter: blur(3px);
  display: grid;
  place-items: center;
  z-index: 80;
  padding: 18px;
  animation: fadeIn .2s;
}
.modal {
  background: var(--sand);
  border-radius: var(--r-lg);
  padding: 24px 20px;
  text-align: center;
  max-width: 380px;
  width: 100%;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
}
.modal h2 { font-size: 26px; color: var(--teal); margin-bottom: 6px; }
.modal p  { font-weight: 700; color: var(--teal); opacity: .85; margin-bottom: 14px; font-size: 16px; }
.modal .bigstars { font-size: 44px; margin: 8px 0 14px; letter-spacing: 4px; }
.modal .row { display: flex; gap: 10px; }
.modal .row .btn { flex: 1; }

/* --------------------------------------------------------------- confetti */

#confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 90;
}

/* ------------------------------------------------------------ level picker */

.levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.level {
  border: none;
  border-radius: var(--r);
  padding: 18px 14px;
  font-family: inherit;
  font-weight: 900;
  font-size: 18px;
  color: #fff;
  cursor: pointer;
  box-shadow: var(--shadow);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform .1s;
}
.level:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(10,61,73,.18); }
.level .lvl-stars { font-size: 17px; letter-spacing: 2px; }
.level small { font-weight: 700; opacity: .9; font-size: 13px; }

/* Kept as a layout hook only — the page scrolls, not this box. Giving it
   overflow/overscroll of its own is what made the lower games unreachable. */
.scroll {
  flex: 1 1 auto;
  min-height: 0;
  padding-bottom: 4px;
}

/* screen-reader only */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }