/* Jam Jar: a Suika-style merge-drop in a preserving jar on the pantry shelf.
   Warm kitchen wood, soft window light, paper labels. */

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  min-height: 100%;
  background:
    radial-gradient(700px 420px at 30% 0%, rgba(255, 244, 214, 0.55), rgba(255, 244, 214, 0) 70%),
    repeating-linear-gradient(90deg, rgba(90, 50, 20, 0.10) 0 2px, rgba(255, 235, 200, 0.04) 2px 6px, rgba(0, 0, 0, 0) 6px 120px),
    linear-gradient(180deg, #a8713d 0%, #8f5a2b 60%, #7c4c22 100%);
  color: #5a3218;
  font-family: "Baloo 2", "Segoe UI", system-ui, sans-serif;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 10px 16px;
  min-height: 100dvh;
}

#wrap {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

#game {
  display: block;
  width: min(540px, 94vw, calc((100dvh - 100px) * 0.75));
  height: auto;
  border-radius: 16px;
  /* a uniformly light niche behind the jar */
  background:
    radial-gradient(420px 240px at 50% 6%, rgba(255, 250, 232, 0.6), rgba(255, 250, 232, 0) 60%),
    linear-gradient(180deg, #f6e3bd 0%, #efd5a6 100%);
  box-shadow:
    inset 0 0 0 3px rgba(90, 50, 24, 0.35),
    0 14px 34px rgba(60, 30, 8, 0.5);
}

/* ---- side panels -------------------------------------------------------- */
#left, #right {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 128px;
}
.panel {
  background: #fff3df;
  border: 2px solid #b9793e;
  border-radius: 14px;
  box-shadow: 0 3px 0 #8f5a2b;
  padding: 10px 12px;
  text-align: center;
}
.lbl {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #a06a33;
}
.val { font-size: 30px; font-weight: 800; line-height: 1.15; }
.val.small { font-size: 20px; }
.hint { font-size: 12.5px; line-height: 1.45; text-align: left; color: #7a4d22; }
#next, #chain { display: block; margin: 4px auto 0; }

/* ---- game over ----------------------------------------------------------- */
.overlay {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(60, 30, 8, 0.55);
  backdrop-filter: blur(2px);
}
.overlay.hidden { display: none; }
.card {
  background: #fff3df;
  border: 3px solid #b9793e;
  border-radius: 18px;
  box-shadow: 0 6px 0 #8f5a2b, 0 22px 50px rgba(40, 18, 4, 0.5);
  padding: 26px 34px;
  text-align: center;
}
.card h2 { font-size: 26px; font-weight: 800; }
.card .big { font-size: 46px; font-weight: 800; color: #c2452f; margin: 6px 0 2px; }
.card p { color: #a06a33; font-weight: 700; margin-bottom: 14px; }
.btn {
  font: 800 17px/1 "Baloo 2", system-ui, sans-serif;
  color: #fff3df;
  background: #c2452f;
  border: none;
  border-radius: 12px;
  box-shadow: 0 4px 0 #8c2f1e;
  padding: 12px 26px;
  cursor: pointer;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #8c2f1e; }

/* ---- phones -------------------------------------------------------------- */
@media (max-width: 760px) {
  #wrap { flex-direction: column; align-items: center; gap: 10px; }
  #left, #right { flex-direction: row; width: auto; }
  #left { order: 2; } #right { order: 3; }
  .hint-panel { display: none; }
  #chain { display: none; }
  .panel { padding: 8px 12px; }
  .val { font-size: 24px; }
  body { padding-top: 56px; } /* clear the fixed back link */
}