/* ==========================================================
   COZY SCALE — STYLESHEET
   ----------------------------------------------------------
   Table of contents:
     1.  Design tokens (CSS variables)
     2.  Reset & base
     3.  Page background & app container
     4.  Screens (base)
     5.  Lobby screen
     6.  Buttons
     7.  Non-lobby screen backgrounds
     8.  Fixed corner buttons (back / undo / pause)
     9.  Header bar & panel title
    10.  Level select grid
    11.  How-to-play screen
    12.  Gameplay — top bar & HUD
    13.  Gameplay — scale & pans
    14.  Gameplay — tray
    15.  Drag ghost
    16.  Modals & toast
    17.  Utility classes
    18.  Responsive — width-based
    19.  Responsive — height-based
    20.  Accessibility & polish
   ========================================================== */


/* ==========================================================
   1. DESIGN TOKENS
   ========================================================== */
:root {
  /* Wood palette */
  --wood-dark: #5c3a1e;
  --wood-mid: #8d5524;
  --wood-light: #c68c53;

  /* Gold palette */
  --gold-main: #ffcc00;
  --gold-dark: #e6a800;
  --gold-shadow: #b37700;

  /* Nature palette */
  --leaf-green: #7cb342;
  --leaf-dark: #558b2f;
  --sky-blue: #42a5f5;

  /* Text */
  --text-white: #ffffff;
  --text-brown: #4e342e;

  /* Action button colors */
  --btn-play: #ff9800;
  --btn-play-dark: #ef6c00;
  --btn-how: #66bb6a;
  --btn-how-dark: #388e3c;
  --btn-back: #ab47bc;
  --btn-back-dark: #7b1fa2;

  /* Locked level */
  --locked-bg: #b8956a;
  --locked-text: #6d4c2a;

  /* Fixed corner button offsets (safe-area aware) */
  --corner-top: calc(20px + env(safe-area-inset-top, 0px));
  --corner-left: calc(20px + env(safe-area-inset-left, 0px));
  --corner-right: calc(20px + env(safe-area-inset-right, 0px));

  /* Corner button sizes (overridden in media queries) */
  --corner-btn: 52px;
  --corner-gap: 8px;
}


/* ==========================================================
   2. RESET & BASE
   ========================================================== */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  touch-action: none;
}

h1, h2, h3, .fredoka {
  font-family: "Fredoka", sans-serif;
}


/* ==========================================================
   3. PAGE BACKGROUND & APP CONTAINER
   ========================================================== */

/* Lobby image is the page background — full viewport, fixed. */
html {
  height: 100%;
  background-color: #d9c39a;                 /* warm fallback while image loads */
  background-image: url("../images/lobby-balance.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  font-family: "Nunito", sans-serif;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
}

#app {
  position: relative;
  width: 100%;
  max-width: 480px;
  height: 100dvh;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: visible;
  background: transparent;
}


/* ==========================================================
   4. SCREENS (BASE)
   ========================================================== */
.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  z-index: 10;
  padding: 20px;
  padding-top: calc(20px + env(safe-area-inset-top, 0px));
  padding-right: calc(20px + env(safe-area-inset-right, 0px));
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  padding-left: calc(20px + env(safe-area-inset-left, 0px));
  background: transparent;
  overflow: hidden;
}

.screen.active {
  display: flex;
  animation: fadeIn 0.35s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

#scr-levels,
#scr-how,
#scr-game {
  overflow: hidden;
}


/* ==========================================================
   5. LOBBY SCREEN
   ========================================================== */
#scr-menu {
  z-index: 20;
  justify-content: flex-end;
  padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
}

.btn-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 85%;
  max-width: 320px;
  margin: 0 auto;
  z-index: 20;
}


/* ==========================================================
   6. BUTTONS
   ========================================================== */
.btn {
  border: none;
  outline: none;
  padding: 18px 24px;
  border-radius: 50px;
  font-family: "Fredoka", sans-serif;
  font-size: 22px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: white;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
  width: 100%;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Glossy top highlight — shared by all .btn variants */
.btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 46%;
  pointer-events: none;
  border-radius: 50px 50px 45% 45%;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.3),
    rgba(255, 255, 255, 0.04) 70%,
    rgba(255, 255, 255, 0)
  );
}

.btn:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3) !important;
}

.btn-primary {
  background: linear-gradient(to bottom, var(--btn-play), var(--btn-play-dark));
  box-shadow: 0 8px 0 #bf360c, 0 15px 20px rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.btn-secondary {
  background: linear-gradient(to bottom, var(--btn-how), var(--btn-how-dark));
  box-shadow: 0 8px 0 #1b5e20, 0 15px 20px rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.btn-tertiary {
  background: linear-gradient(to bottom, var(--btn-back), var(--btn-back-dark));
  box-shadow: 0 8px 0 #4a148c, 0 15px 20px rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.3);
}

/* Small pill button (used for back buttons) */
.btn-small {
  padding: 8px 16px;
  font-size: 16px;
  border-radius: 12px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
  width: auto;
}

.btn-small::before {
  height: 40%;
  opacity: 0.65;
}


/* ==========================================================
   7. NON-LOBBY SCREEN BACKGROUNDS
   Full-viewport blurred background.png, only shown when a
   non-lobby screen is active.
   ========================================================== */
#scr-levels::before,
#scr-how::before,
#scr-game::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("../images/background.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  filter: blur(6px);
  transform: scale(1.05);
  transform-origin: center center;
  z-index: -2;
  pointer-events: none;
}


/* ==========================================================
   8. FIXED CORNER BUTTONS
   Back button → top-left of the viewport
   Undo + Pause → top-right of the viewport
   ========================================================== */
#btn-levels-back,
#btn-how-back,
#btn-game-back {
  position: fixed;
  top: var(--corner-top);
  left: var(--corner-left);
  z-index: 30;
}

.top-bar > .action-buttons {
  position: fixed;
  top: var(--corner-top);
  right: var(--corner-right);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--corner-gap);
}


/* ==========================================================
   9. HEADER BAR & PANEL TITLE
   (Levels / How-to-Play screens)
   ========================================================== */
.header-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  margin-bottom: 10px;
  margin-top: 5px;
  width: 100%;
  flex-shrink: 0;
  position: relative;
}

.header-bar > .header-spacer { display: none; }

.panel-title {
  background: var(--wood-mid);
  color: white;
  padding: 8px 24px;
  border-radius: 20px;
  font-size: 24px;
  border: 3px solid var(--wood-dark);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
  margin: 0;
}


/* ==========================================================
   10. LEVEL SELECT GRID
   ========================================================== */
.level-grid-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 4px 0;
  overflow-y: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
}

.level-grid-wrap::-webkit-scrollbar { width: 4px; }
.level-grid-wrap::-webkit-scrollbar-track { background: transparent; }
.level-grid-wrap::-webkit-scrollbar-thumb {
  background: var(--wood-mid);
  border-radius: 4px;
}

.level-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 24px;
  border: 2px solid rgba(255, 255, 255, 0.6);
  width: 100%;
  max-width: 400px;
  align-content: start;
  margin: auto 0;
  box-shadow:
    0 12px 34px rgba(60, 30, 10, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.lvl-btn {
  aspect-ratio: 1;
  background: white;
  border-radius: 16px;
  border: none;
  font-family: "Fredoka", sans-serif;
  font-size: 20px;
  color: var(--text-brown);
  box-shadow: 0 4px 0 #ddd;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  padding: 6px 4px 4px 4px;
  position: relative;
}

.lvl-btn:active:not(.locked) {
  transform: translateY(4px);
  box-shadow: none;
}

.lvl-btn.current {
  background: var(--gold-main);
  color: var(--wood-dark);
  box-shadow: 0 0 25px rgba(255, 204, 0, 0.6), 0 4px 0 var(--gold-dark);
  animation: pulse 2s infinite;
  transform: scale(1.05);
  border: 3px solid white;
  z-index: 2;
}

.lvl-btn.current::after {
  content: "▶";
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--btn-play);
  color: white;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  border: 2px solid white;
}

.lvl-btn.locked {
  background: var(--locked-bg);
  color: var(--locked-text);
  box-shadow: 0 4px 0 #7a5d3e;
  cursor: not-allowed;
  opacity: 0.75;
}

.lvl-btn .lock-icon {
  font-size: 18px;
  opacity: 0.8;
}

.lvl-btn .lvl-num-locked {
  font-size: 11px;
  color: var(--locked-text);
  margin-top: 2px;
  font-weight: 700;
  opacity: 0.7;
}

.lvl-btn .star-empty { color: rgba(0, 0, 0, 0.12); }
.lvl-btn .star-filled { color: #ffd700; }

.star-row {
  display: flex;
  justify-content: center;
  gap: 2.5px;
  font-size: 14px;
  line-height: 1.2;
  margin-top: 3px;
}

@keyframes pulse {
  0%   { transform: scale(1.05); }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1.05); }
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 16px;
  color: var(--text-brown);
  font-weight: 800;
  font-size: 20px;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
  padding-bottom: 4px;
  flex-shrink: 0;
}


/* ==========================================================
   11. HOW-TO-PLAY SCREEN
   ========================================================== */
.how-title {
  font-family: "Fredoka", sans-serif;
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  margin: 0 auto;
  padding: 6px 0 14px;
  position: relative;
  letter-spacing: 0.5px;
  background: linear-gradient(135deg, var(--wood-dark), var(--wood-mid));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  flex-shrink: 0;
}

.how-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 4px;
  background: linear-gradient(90deg, var(--gold-main), var(--gold-dark));
  border-radius: 4px;
  box-shadow: 0 0 25px rgba(255, 204, 0, 0.25);
}

.how-grid {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 4px 0;
  max-width: 420px;
  margin: 0 auto;
  width: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.how-grid::-webkit-scrollbar { width: 4px; }
.how-grid::-webkit-scrollbar-track { background: transparent; }
.how-grid::-webkit-scrollbar-thumb {
  background: var(--wood-mid);
  border-radius: 4px;
}

.how-step {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 14px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow:
    0 6px 18px rgba(60, 30, 10, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 215, 0, 0.08);
  transition: all 0.25s ease;
  animation: stepSlide 0.5s ease both;
  border-left: 5px solid var(--gold-main);
  flex: 0 1 auto;
  min-height: 0;
}

.how-step:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(139, 69, 19, 0.06);
  border-color: rgba(255, 215, 0, 0.15);
  background: rgba(255, 255, 255, 0.9);
}

.how-step:nth-child(1) { animation-delay: 0.04s; border-left-color: #f5a623; }
.how-step:nth-child(2) { animation-delay: 0.10s; border-left-color: var(--btn-play); }
.how-step:nth-child(3) { animation-delay: 0.16s; border-left-color: var(--btn-back); }
.how-step:nth-child(4) { animation-delay: 0.22s; border-left-color: var(--sky-blue); }
.how-step:nth-child(5) { animation-delay: 0.28s; border-left-color: #e57373; }

@keyframes stepSlide {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.step-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.step-num {
  font-family: "Fredoka", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--wood-dark);
  background: linear-gradient(145deg, var(--gold-main), var(--gold-dark));
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 3px 12px rgba(255, 204, 0, 0.3);
  transition: all 0.3s ease;
}

.how-step:hover .step-num {
  transform: scale(1.08);
  box-shadow: 0 3px 20px rgba(255, 204, 0, 0.45);
}

.step-emoji {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
  width: 30px;
  text-align: center;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.03));
}

.step-content {
  flex: 1;
  min-width: 0;
}

.step-content h4 {
  margin: 0 0 2px 0;
  font-family: "Fredoka", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--wood-dark);
  letter-spacing: 0.2px;
  line-height: 1.2;
}

.step-content p {
  margin: 0;
  font-size: 13px;
  color: var(--text-brown);
  line-height: 1.3;
  opacity: 0.8;
}

.step-accent {
  width: 4px;
  height: 30px;
  border-radius: 4px;
  flex-shrink: 0;
  background: var(--gold-main);
  opacity: 0.3;
  transition: opacity 0.3s ease;
}

.how-step:hover .step-accent { opacity: 0.9; }

.how-step:nth-child(1) .step-accent { background: #f5a623; }
.how-step:nth-child(2) .step-accent { background: var(--btn-play); }
.how-step:nth-child(3) .step-accent { background: var(--btn-back); }
.how-step:nth-child(4) .step-accent { background: var(--sky-blue); }
.how-step:nth-child(5) .step-accent { background: #e57373; }

.btn-gotit {
  background: linear-gradient(145deg, var(--wood-mid), var(--wood-dark));
  box-shadow: 0 5px 0 var(--wood-dark), 0 8px 20px rgba(0, 0, 0, 0.08);
  border: 2px solid var(--wood-light);
  color: white;
  text-transform: uppercase;
  font-size: 16px;
  padding: 11px 24px;
  border-radius: 50px;
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  width: 100%;
  max-width: 130px;
  align-self: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  letter-spacing: 0.5px;
  flex-shrink: 0;
  margin-top: 4px;
}

.btn-gotit:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 0 var(--wood-dark), 0 12px 28px rgba(139, 69, 19, 0.12);
}

.btn-gotit:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 var(--wood-dark);
}


/* ==========================================================
   12. GAMEPLAY — TOP BAR & HUD
   ========================================================== */
.top-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  margin-bottom: 8px;
  width: 100%;
  flex-shrink: 0;
  position: relative;
}

.hud {
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  padding: 6px 14px;
  border-radius: 30px;
  box-shadow:
    0 6px 18px rgba(60, 30, 10, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  border: 3px solid var(--wood-light);
  min-height: 44px;
}

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

.hud-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 800;
  color: var(--text-brown);
  font-size: 16px;
}

/* Undo + Pause — perfect circles, icon auto-scales with size */
.hud-undo,
.hud-pause {
  width: var(--corner-btn);
  height: var(--corner-btn);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--corner-btn) * 0.46);
  cursor: pointer;
  transition: transform 0.1s, opacity 0.2s, box-shadow 0.1s;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
  font-weight: 700;
  border: 2px solid rgba(255, 255, 255, 0.3);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.hud-undo {
  background: linear-gradient(145deg, var(--wood-mid), var(--wood-dark));
  border-color: var(--wood-light);
  color: white;
  box-shadow: 0 4px 0 var(--wood-dark);
}

.hud-undo:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--wood-dark);
}

.hud-undo:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--wood-dark);
  pointer-events: none;
}

.hud-undo:not(:disabled):hover { transform: scale(1.05); }

.hud-pause {
  background: linear-gradient(145deg, var(--btn-back), var(--btn-back-dark));
  border-color: var(--wood-light);
  color: white;
  box-shadow: 0 4px 0 var(--btn-back-dark);
}

.hud-pause:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--btn-back-dark);
}

.target-badge {
  background: var(--wood-mid);
  color: white;
  padding: 6px 20px;
  border-radius: 30px;
  font-size: 20px;
  font-weight: 700;
  border: 3px solid var(--wood-dark);
  box-shadow:
    0 6px 0 rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  margin-bottom: 8px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  align-self: center;
  flex-shrink: 0;
}

.target-badge.near-miss {
  background: var(--btn-how);
  animation: shake 0.5s;
}


/* ==========================================================
   13. GAMEPLAY — SCALE & PANS
   ========================================================== */
.game-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 20px;
  padding: 8px 0;
  overflow: hidden;
}

.scale-area {
  flex: 1;
  width: 100%;
  min-height: 160px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scale-base {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 15px;
  background: var(--wood-dark);
  border-radius: 10px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}

.scale-pillar {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 100px;
  background: linear-gradient(to right, var(--wood-mid), var(--wood-dark));
  border-radius: 10px;
}

.scale-beam-wrapper {
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%) rotate(0deg);
  width: 260px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: center center;
}

.scale-beam {
  width: 100%;
  height: 10px;
  background: linear-gradient(to bottom, var(--gold-main), var(--gold-dark));
  border-radius: 6px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  position: relative;
}

.scale-knob {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 26px;
  background: var(--gold-main);
  border-radius: 50%;
  border: 3px solid var(--gold-dark);
  box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.5);
}

.pan-group {
  position: absolute;
  top: 8px;
  width: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: top center;
}

.pan-left  { left: 0; }
.pan-right { right: 0; }

.pan-string {
  width: 2px;
  height: 35px;
  background: var(--wood-dark);
  opacity: 0.6;
}

.pan-bowl {
  width: 70px;
  height: 25px;
  background: linear-gradient(to bottom, var(--gold-main), var(--gold-dark));
  border-radius: 0 0 35px 35px;
  border-top: 3px solid var(--gold-dark);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 4px;
  overflow: visible;
  flex-wrap: wrap;
  position: relative;
}

.pan-bowl::after {
  content: "";
  position: absolute;
  top: -40px;
  left: -10px;
  right: -10px;
  bottom: 0;
  pointer-events: none;
}

.current-weight-tag {
  position: absolute;
  bottom: -24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.85);
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-brown);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  white-space: nowrap;
  z-index: 5;
  pointer-events: none;
  line-height: 1.4;
  letter-spacing: 0.2px;
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.pan-items-container {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  min-height: 44px;
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: center;
  align-items: flex-end;
  gap: 2px;
  padding: 5px 7px;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  border-radius: 16px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  z-index: 4;
}

.pan-item {
  font-size: 22px;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3));
  animation: dropIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  line-height: 1;
  cursor: grab;
  touch-action: none;
}

.pan-item:active { cursor: grabbing; }

@keyframes dropIn {
  from { transform: translateY(-20px) scale(0); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}


/* ==========================================================
   14. GAMEPLAY — TRAY
   ========================================================== */
.tray {
  flex-shrink: 0;
  width: 100%;
  min-height: 90px;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 20px;
  padding: 12px 16px;
  border: 2px dashed rgba(255, 255, 255, 0.8);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
  box-shadow:
    0 10px 26px rgba(60, 30, 10, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.tray .ingredient {
  flex: 0 0 auto;
  width: 65px;
  height: 65px;
  background: white;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.06),
    0 2px 4px rgba(0, 0, 0, 0.04);
  cursor: grab;
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
  touch-action: none;
  border: 2px solid rgba(255, 255, 255, 0.5);
}

.tray .ingredient:active {
  cursor: grabbing;
  transform: scale(1.08);
  z-index: 100;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.tray .ingredient.on-scale {
  opacity: 0.3;
  pointer-events: none;
  transform: scale(0.85);
  filter: grayscale(1);
  border-color: transparent;
}

.tray .ingredient .ing-emoji {
  font-size: 28px;
  line-height: 1;
}

.tray .ingredient .ing-weight {
  font-size: 10px;
  font-weight: 800;
  color: var(--text-brown);
  margin-top: 2px;
  opacity: 0.7;
}


/* ==========================================================
   15. DRAG GHOST
   ========================================================== */
.drag-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 1000;
  transform: translate(-50%, -50%) scale(1.2);
  opacity: 0.9;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
}


/* ==========================================================
   16. MODALS & TOAST
   ========================================================== */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 50;
  animation: fadeIn 0.3s;
}

.overlay.active { display: flex; }

.modal {
  background: white;
  width: 85%;
  max-width: 340px;
  border-radius: 30px;
  padding: 25px 15px;
  text-align: center;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  border: 4px solid var(--wood-light);
  animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn {
  from { transform: scale(0.8); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.modal h2 {
  color: var(--wood-dark);
  font-size: 28px;
  margin: 0 0 10px;
}

.modal-icon {
  font-size: 50px;
  margin: 10px 0;
}

.stars {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 15px 0;
}

.star {
  font-size: 36px;
  color: #ddd;
  transition: all 0.3s;
}

.star.filled {
  color: var(--gold-main);
  text-shadow: 0 0 10px var(--gold-dark);
  transform: scale(1.2);
  animation: starPop 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

@keyframes starPop {
  0%   { transform: scale(0.4) rotate(-25deg); }
  60%  { transform: scale(1.4) rotate(8deg); }
  100% { transform: scale(1.2) rotate(0deg); }
}

.stats-row {
  display: flex;
  justify-content: space-around;
  background: #f5f5f5;
  border-radius: 15px;
  padding: 12px;
  margin-bottom: 15px;
}

.stat-val {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-brown);
}

.stat-label {
  font-size: 11px;
  color: #888;
  font-weight: 700;
  text-transform: uppercase;
}

#toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-100px);
  background: var(--wood-dark);
  color: white;
  padding: 10px 20px;
  border-radius: 30px;
  font-weight: 700;
  z-index: 100;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
  font-size: 18px;
}

#toast.show  { transform: translateX(-50%) translateY(0); }
#toast.combo { background: var(--btn-back); font-size: 20px; }
#toast.error { background: #c62828; }


/* ==========================================================
   17. UTILITY CLASSES
   (extracted from inline styles)
   ========================================================== */
.level-indicator-wrap {
  text-align: center;
  margin-bottom: 6px;
  flex-shrink: 0;
}

.level-indicator-badge {
  background: white;
  padding: 4px 12px;
  border-radius: 12px;
  font-weight: 800;
  color: var(--text-brown);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  font-size: 14px;
}

.level-indicator-num { color: var(--wood-dark); }

.modal-btn-group    { gap: 10px; }
.modal-fail-title   { color: var(--btn-play-dark); }
.modal-fail-desc    { color: #666; margin-bottom: 15px; font-size: 14px; }
.modal-pause-title  { color: var(--btn-how-dark); }
.drag-ghost-emoji   { font-size: 48px; }


/* ==========================================================
   18. RESPONSIVE — WIDTH-BASED
   ========================================================== */

/* Small phones */
@media (max-width: 420px) {
  :root {
    --corner-btn: 44px;
    --corner-gap: 6px;
  }

  #scr-menu { padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }

  .btn-group { width: 90%; gap: 12px; }
  .btn { padding: 14px 20px; font-size: 18px; }

  .level-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 10px;
    max-width: 100%;
  }
  .lvl-btn { font-size: 16px; padding: 4px 2px; }
  .star-row { font-size: 11px; gap: 2px; }
  .lvl-btn.current::after {
    width: 16px; height: 16px; font-size: 8px; top: -8px; right: -8px;
  }

  .how-title { font-size: 22px; padding: 4px 0 10px; }
  .how-title::after { width: 50px; height: 3px; }
  .how-grid { gap: 8px; padding: 2px 0; }
  .how-step { padding: 10px 12px; gap: 10px; border-radius: 12px; border-left-width: 4px; }
  .step-num { width: 28px; height: 28px; font-size: 15px; }
  .step-emoji { font-size: 20px; width: 26px; }
  .step-content h4 { font-size: 14px; margin-bottom: 1px; }
  .step-content p { font-size: 12px; }
  .step-accent { height: 26px; width: 3px; }
  .btn-gotit { font-size: 14px; padding: 9px 18px; max-width: 110px; }

  .tray { min-height: 78px; padding: 10px 12px; gap: 10px; }
  .tray .ingredient { width: 58px; height: 58px; border-radius: 14px; }
  .tray .ingredient .ing-emoji { font-size: 24px; }
  .tray .ingredient .ing-weight { font-size: 9px; }

  .star-row { font-size: 12px; gap: 2px; }
}

/* Small phones — tighter */
@media (max-width: 370px) {
  :root {
    --corner-btn: 40px;
    --corner-gap: 5px;
  }

  .how-title { font-size: 19px; padding: 2px 0 8px; }
  .how-title::after { width: 40px; height: 3px; }
  .how-grid { gap: 6px; padding: 1px 0; }
  .how-step { padding: 8px 10px; gap: 8px; border-radius: 10px; border-left-width: 3px; }
  .step-badge { gap: 5px; }
  .step-num { width: 24px; height: 24px; font-size: 13px; }
  .step-emoji { font-size: 17px; width: 22px; }
  .step-content h4 { font-size: 12.5px; margin-bottom: 1px; }
  .step-content p { font-size: 10.5px; }
  .step-accent { height: 22px; width: 3px; }
  .btn-gotit { font-size: 13px; padding: 7px 14px; max-width: 100px; }
  .star-row { font-size: 10px; gap: 1.5px; }
  .header-bar { margin-bottom: 4px; margin-top: 2px; }
}

/* Extra small */
@media (max-width: 350px) {
  .level-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 8px;
  }
  .lvl-btn { font-size: 14px; border-radius: 10px; }
  .star-row { font-size: 10px; gap: 1.5px; }
  .lvl-btn.current::after {
    width: 14px; height: 14px; font-size: 7px; top: -6px; right: -6px;
  }
}

/* Tiny phones */
@media (max-width: 340px) {
  :root {
    --corner-btn: 36px;
    --corner-gap: 5px;
  }
}


/* ==========================================================
   19. RESPONSIVE — HEIGHT-BASED
   ========================================================== */

/* Short screens */
@media (max-height: 700px) {
  :root {
    --corner-btn: 42px;
    --corner-gap: 5px;
  }

  #scr-menu { padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }

  .btn { padding: 14px 20px; font-size: 18px; }

  .scale-area { min-height: 130px; }
  .hud { padding: 4px 10px; min-height: 38px; }
  .hud-items { gap: 8px; }
  .hud-item { font-size: 14px; }
  .target-badge { font-size: 17px; padding: 4px 16px; }
  .game-wrapper { gap: 14px; }

  .how-title { font-size: 22px; padding: 4px 0 10px; }
  .how-grid { gap: 7px; padding: 2px 0; }
  .how-step { padding: 9px 14px; gap: 10px; border-radius: 12px; }
  .step-num { width: 28px; height: 28px; font-size: 15px; }
  .step-emoji { font-size: 20px; width: 26px; }
  .step-content h4 { font-size: 14px; }
  .step-content p { font-size: 12px; }
  .btn-gotit { font-size: 14px; padding: 8px 18px; max-width: 110px; }

  .tray { min-height: 72px; padding: 10px 14px; gap: 10px; }
  .tray .ingredient { width: 55px; height: 55px; border-radius: 14px; }
  .tray .ingredient .ing-emoji { font-size: 22px; }

  .current-weight-tag { font-size: 12px; padding: 2px 8px; bottom: -22px; }
  .star-row { font-size: 12px; gap: 2px; }
  .lvl-btn.current::after {
    width: 18px; height: 18px; font-size: 9px; top: -8px; right: -8px;
  }
}

@media (max-height: 600px) {
  :root {
    --corner-btn: 38px;
    --corner-gap: 5px;
  }

  .scale-area { min-height: 100px; }
  .scale-beam-wrapper { width: 200px; bottom: 80px; }
  .pan-group { width: 56px; }
  .pan-bowl { width: 56px; height: 20px; }
  .pan-items-container { width: 90px; min-height: 34px; padding: 3px 5px; }
  .pan-item { font-size: 18px; }

  .hud { padding: 3px 8px; min-height: 32px; }
  .hud-items { gap: 6px; }
  .hud-item { font-size: 12px; gap: 2px; }

  .how-title { font-size: 19px; padding: 2px 0 8px; }
  .how-title::after { width: 45px; height: 3px; }
  .how-grid { gap: 5px; padding: 1px 0; }
  .how-step { padding: 7px 10px; gap: 8px; border-radius: 10px; border-left-width: 3px; }
  .step-num { width: 24px; height: 24px; font-size: 13px; }
  .step-emoji { font-size: 17px; width: 22px; }
  .step-content h4 { font-size: 12.5px; }
  .step-content p { font-size: 10.5px; }
  .step-accent { height: 20px; width: 3px; }
  .btn-gotit { font-size: 13px; padding: 6px 14px; max-width: 100px; }

  .tray { min-height: 62px; padding: 8px 12px; gap: 8px; }
  .tray .ingredient { width: 48px; height: 48px; border-radius: 12px; }
  .tray .ingredient .ing-emoji { font-size: 20px; }
  .tray .ingredient .ing-weight { font-size: 8px; }

  .current-weight-tag { font-size: 11px; padding: 1px 6px; bottom: -20px; }
  .header-bar { margin-bottom: 4px; margin-top: 2px; }
  .star-row { font-size: 10px; gap: 1.5px; }
  .lvl-btn.current::after {
    width: 14px; height: 14px; font-size: 7px; top: -6px; right: -6px;
  }
}

@media (max-height: 520px) {
  :root {
    --corner-btn: 34px;
    --corner-gap: 4px;
  }

  #scr-menu {
    justify-content: center;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .btn-group { gap: 10px; }
  .btn { padding: 12px 18px; font-size: 17px; }
}


/* ==========================================================
   20. ACCESSIBILITY & POLISH
   ========================================================== */

/* Keyboard focus rings */
.btn:focus-visible,
.lvl-btn:focus-visible,
.hud-undo:focus-visible,
.hud-pause:focus-visible,
.btn-gotit:focus-visible {
  outline: 3px solid var(--gold-main);
  outline-offset: 3px;
}

.lvl-btn:focus-visible { outline-offset: 2px; }

/* Hover states — pointer devices only */
@media (hover: hover) and (pointer: fine) {
  .lvl-btn:not(.locked):not(.current):hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #ddd;
  }
  .lvl-btn.locked:hover { cursor: not-allowed; }
  .hud-pause:hover { transform: scale(1.05); }
  .btn-gotit:hover { transform: translateY(-2px); }
  .tray .ingredient:hover {
    transform: translateY(-3px);
    box-shadow:
      0 10px 22px rgba(0, 0, 0, 0.1),
      0 3px 6px rgba(0, 0, 0, 0.05);
  }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .lvl-btn.current { animation: none; transform: scale(1.05); }
  .btn::before { display: none; }
}

/* Crisper emoji rendering across platforms */
.step-emoji,
.pan-item,
.tray .ingredient .ing-emoji,
.modal-icon,
.drag-ghost-emoji {
  font-family:
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Noto Color Emoji",
    sans-serif;
  font-variant-emoji: emoji;
}