* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Trebuchet MS", "Comic Sans MS", system-ui, sans-serif;
  background: #0e7cab;
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* Full canvas: the visual reference PNG IS the artwork. */
.game-shell {
  width: 1536px;
  height: 1024px;
  position: relative;
  overflow: hidden;
  background: url("pic/background.png") no-repeat 0 0 / 1536px 1024px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}

/* Layout containers — geometry only, all visuals come from the image. */
.bank-scene {
  position: absolute;
  left: 0;
  top: 0;
  width: 1184px;
  height: 940px;
}

/* Top-right Audio / Settings click zones (visuals in image).
   Positioned absolutely to match the painted pills in docs/visual-reference.png. */
.top-buttons {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
}
.top-btn {
  position: absolute;
  top: 40px;
  height: 65px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.top-btn.audio    { left: 1212px; width: 127px; }
.top-btn.settings { left: 1356px; width: 147px; }

/* The task card frame is painted in the empty image (green "YOUR TASK" tab
   on top of a cream rectangle). The body of the cream area is empty and
   filled by .task-text below. */
.task-card {
  position: absolute;
  left: 410px;
  top: 250px;
  width: 485px;
  height: 162px;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 55px 30px 15px;
  background: transparent;
  pointer-events: none;
}
.task-text {
  margin: 0;
  font-size: 32px;
  font-weight: 800;
  color: #5b3b1d;
  text-align: center;
  line-height: 1.2;
}

/* Hint note paper is painted in the empty image (yellow note with "Hint"
   header). The body below the header is empty and filled by .hint-text. */
.hint-note {
  position: absolute;
  left: 905px;
  top: 258px;
  width: 180px;
  height: 155px;
  z-index: 10;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 55px 14px 12px;
  background: transparent;
  pointer-events: none;
}
.hint-text {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #5b3b1d;
  text-align: center;
  line-height: 1.25;
}

/* Wallet drop zone: transparent target over the painted cream wallet area. */
.wallet {
  position: absolute;
  left: 46px;
  top: 410px;
  width: 1095px;
  height: 268px;
  z-index: 8;
}
.wallet-drop {
  position: absolute;
  left: 16px;
  top: 38px;
  width: 1063px;
  height: 208px;
  border-radius: 24px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  transition: box-shadow .12s ease-out, background-color .12s ease-out;
}
.wallet-drop.is-drop-target {
  background-color: rgba(255, 232, 138, .35);
  box-shadow: inset 0 0 0 4px rgba(255, 196, 0, .85);
}

.wallet-column {
  position: relative;
  height: 100%;
  pointer-events: none; /* clicks/drags pass through to .wallet-item children */
}
.wallet-item {
  position: absolute;
  background-repeat: no-repeat;
  pointer-events: auto; /* enables click-to-remove and drag-from-wallet */
  cursor: grab;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3));
  animation: wallet-item-drop .18s ease-out;
  touch-action: none;
}
.wallet-item.is-picking {
  filter: brightness(.8) drop-shadow(0 2px 3px rgba(0, 0, 0, .3));
}
@keyframes wallet-item-drop {
  from { transform: translate(-6px, -10px) scale(1.15); opacity: 0; }
  to   { transform: translate(0, 0) scale(1); opacity: 1; }
}

/* Money tray: 8 transparent click zones absolutely positioned to match the
   painted cards in docs/visual-reference.png (4 coins on the left, 4 bills
   on the right). Coordinates measured against the 1536x1024 reference. */
.money-tray {
  position: absolute;
  left: 0;
  top: 0;
  width: 1184px;
  height: 940px;
  z-index: 10;
  pointer-events: none;
}
.money-card {
  position: absolute;
  top: 720px;
  height: 185px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
}
.money-card[data-value="1"]    { left: 44px;  width: 102px; }
.money-card[data-value="5"]    { left: 151px; width: 102px; }
.money-card[data-value="10"]   { left: 262px; width: 102px; }
.money-card[data-value="25"]   { left: 369px; width: 102px; }
.money-card[data-value="100"]  { left: 505px; width: 149px; }
.money-card[data-value="500"]  { left: 660px; width: 138px; }
.money-card[data-value="1000"] { left: 804px; width: 138px; }
.money-card[data-value="2000"] { left: 949px; width: 177px; }
.money-card:focus-visible {
  outline: 3px solid rgba(255, 255, 255, .8);
  outline-offset: -4px;
  border-radius: 10px;
}

/* Right panel: layout container only; all framing is in the image. */
.right-panel {
  position: absolute;
  right: 18px;
  top: 132px;
  width: 318px;
  height: 806px;
  z-index: 20;
  overflow: hidden;
}

/* Level banner mask: opaque purple rectangle covering the painted
   "LEVEL N" banner. Coordinates in right-panel space. */
.level-banner {
  position: absolute;
  left: 5px;
  top: 9px;
  width: 288px;
  height: 40px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #7e488f;
  color: #fffdf4;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-align: center;
  pointer-events: none;
}

/* Question card mask: opaque cream rectangle covering the painted
   "Question 1 of 10" + dot row. Sits below the painted purple "LEVEL N"
   banner; dynamic content rendered inside. Coordinates in right-panel space. */
.question-card {
  position: absolute;
  left: 5px;
  top: 50px;
  width: 288px;
  height: 100px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 14px;
  background: #fbf5f1;
  pointer-events: none;
}
.question-text {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #3a3a3a;
  text-align: center;
  line-height: 1;
}
.dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
}
.dots span {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #d4d2cf;
  flex-shrink: 0;
}
.dots span.active {
  background: #5fb83a;
}

/* Total box: positioned over the painted "$0.00" box (below the green
   "HOW MUCH DO I HAVE?" tag). Coordinates measured in right-panel space. */
.total-box {
  position: absolute;
  left: 2px;
  top: 223px;
  width: 276px;
  height: 105px;
}
#total {
  position: absolute;
  inset: 0;
  background: #fffdf4;
  display: grid;
  place-items: center;
  font-size: 49px;
  color: #2f8b34;
  font-weight: 900;
}

/* Action buttons: transparent click zones positioned over the painted pills. */
.action {
  position: absolute;
  left: 2px;
  width: 276px;
  height: 68px;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.action.check { top: 346px; }
.action.hint  { top: 430px; }
.action.clear { top: 514px; }
.action:focus-visible {
  outline: 3px solid rgba(0, 0, 0, .35);
  border-radius: 15px;
}

/* Helper bubble: speech bubble frame is painted in the empty image; .bubble
   sits transparently inside it. */
.pig-helper {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 186px;
}
.bubble {
  margin: 0;
  position: absolute;
  left: 0;
  top: 18px;
  width: 190px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: transparent;
  font-size: 16px;
  font-weight: 600;
  color: #5b3b1d;
  line-height: 1.3;
  pointer-events: none;
}

/* Bottom bar: container only; visuals are in the image. Children are
   absolutely positioned to match the painted pills/bar. */
.bottom-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 84px;
  width: 100%;
  z-index: 30;
}

/* Stars pill: opaque gold mask covers the painted "⭐ N" pill so the
   inner number can be set dynamically. */
.stars {
  position: absolute;
  left: 414px;
  top: 12px;
  width: 100px;
  height: 50px;
  border-radius: 25px;
  background: #f4ad2b;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #2a2a2a;
  font-size: 26px;
  font-weight: 900;
  box-shadow: inset 0 2px rgba(255, 255, 255, .25);
}
.stars .stars-icon { font-size: 22px; line-height: 1; }

/* Feedback bar: opaque dark mask over painted feedback text. */
.feedback {
  position: absolute;
  left: 535px;
  top: 12px;
  width: 640px;
  height: 50px;
  border-radius: 14px;
  background: #024d78;
  color: #c5eaff;
  font-size: 22px;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: inset 0 2px rgba(255, 255, 255, .08);
}

/* Home button: transparent click zone over the painted pill. */
.home {
  position: absolute;
  left: 1287px;
  top: 12px;
  width: 203px;
  height: 50px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

/* Tiny credit banner pinned to the bottom-left of the canvas. */
.credit-banner {
  position: absolute;
  left: 12px;
  bottom: 8px;
  z-index: 40;
  padding: 4px 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, .35);
  color: #fffdf4;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2px;
  pointer-events: none;
  user-select: none;
}

body.debug button,
body.debug textarea,
body.debug .wallet-drop,
body.debug #total,
body.debug .task-card,
body.debug .hint-note,
body.debug .bubble,
body.debug .question-card,
body.debug .level-banner,
body.debug .stars,
body.debug .feedback {
  background-color: rgba(128, 128, 128, 0.25) !important;
  border: 2px solid #ff0000 !important;
}

@media (max-width: 1100px) {
  body { overflow: auto; place-items: start; }
  .game-shell {
    transform: scale(.7);
    transform-origin: top left;
  }
}

/* Press-and-hold drag ghost — shows the sprite at the cursor.
   background-image, background-size, background-position are set in JS
   from pic/money-sprites.json (single source of truth). */
.money-ghost {
  position: fixed;
  left: 0;
  top: 0;
  width: 110px;
  height: 110px;
  pointer-events: none;
  background-repeat: no-repeat;
  z-index: 9999;
  transform: translate(-50%, -50%) scale(.85);
  transform-origin: center center;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .35));
  animation: ghost-pickup .12s ease-out forwards;
  will-change: transform, left, top;
}

.money-ghost.bill {
  width: 150px;
  height: 150px;
}

/* Money particle used by all correct-answer celebration effects
   (eruption, waterfall, ...). Position + transform are updated per
   frame in JS; size + background are set inline from the sprite sheet,
   mirroring .money-ghost. */
.money-particle {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  z-index: 9998;
  transform-origin: center center;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35));
  will-change: transform, opacity;
}

@keyframes ghost-pickup {
  from { transform: translate(-50%, -50%) scale(.85); }
  to   { transform: translate(-50%, -50%) scale(1.1); }
}

body.dragging-money,
body.dragging-money * {
  cursor: none !important;
  user-select: none;
  -webkit-user-select: none;
}

.money-card.is-picking {
  filter: brightness(.8);
}