:root {
  --ink: #403126;
  --cream: #fff7df;
  --stone: #8d765d;
  font-family: "Trebuchet MS", system-ui, sans-serif;
  color: var(--ink);
  background: #172f36;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, a { font: inherit; }
.money-practice { min-height: 100dvh; }

.practice-header {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 76px;
  padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
  background: rgba(255, 248, 231, .96);
  box-shadow: 0 4px 14px rgba(33, 24, 17, .22);
  backdrop-filter: blur(8px);
}
.practice-header > a {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #416c57;
  font-weight: 900;
  text-decoration: none;
}
.practice-header > div { text-align: center; }
.practice-header small, .practice-header strong { display: block; }
.practice-header small { font-size: 10px; letter-spacing: .14em; }
.practice-header strong { font-size: clamp(17px, 2vw, 25px); }
.practice-header > span {
  justify-self: end;
  border-radius: 999px;
  background: #e8f3dd;
  padding: 9px 13px;
  font-weight: 900;
}

.practice-scene {
  position: relative;
  min-height: max(690px, calc(100dvh - 76px));
  overflow: hidden;
  background: #273b3f;
}
.practice-art {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(18, 30, 31, .03), rgba(16, 25, 25, .2)),
    url('/peblet-cents-skills-vault.webp') center / cover no-repeat;
}

.practice-customer {
  position: absolute;
  z-index: 2;
  left: 2.5%;
  bottom: 7%;
  width: min(27vw, 330px);
  height: min(56vh, 510px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.practice-customer img {
  max-width: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 11px 8px rgba(28, 22, 17, .35));
}
.practice-speech {
  position: absolute;
  z-index: 3;
  left: 69%;
  top: 1%;
  width: clamp(225px, 25vw, 335px);
  padding: 15px 18px;
  border: 4px solid #72533c;
  border-radius: 24px;
  background: #fffaf0;
  box-shadow: 0 7px 0 rgba(80, 52, 34, .3);
}
.practice-speech::after {
  content: "";
  position: absolute;
  left: 20px;
  bottom: -19px;
  border: 10px solid transparent;
  border-top-color: #72533c;
}
.practice-speech p, .practice-speech small { display: block; margin: 0; }
.practice-speech strong {
  display: block;
  margin: 3px 0;
  color: #276c72;
  font-size: clamp(29px, 4vw, 49px);
}
.practice-speech small { font-weight: 750; line-height: 1.25; }
/* The instruction belongs above the work surface, including short iPad views. */
@media (min-width:901px) and (max-width:1366px) and (orientation:landscape) {
  .practice-scene { height:calc(100dvh - 76px);min-height:0; }
  .practice-speech { top: auto; bottom: calc(100% - 8px); }
}

.practice-counter {
  position: absolute;
  z-index: 5;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  width: min(760px, 68vw);
  height: clamp(315px, 43vh, 400px);
  min-height: 0;
  overflow: hidden;
  border: 8px solid #6f5945;
  border-radius: 32px 32px 25px 25px;
  background:
    radial-gradient(circle at 17% 18%, rgba(255,255,255,.16) 0 2px, transparent 3px),
    radial-gradient(circle at 83% 72%, rgba(41,28,20,.15) 0 2px, transparent 3px),
    linear-gradient(153deg, #bca481, #8c7256 50%, #695441);
  background-size: 47px 39px, 59px 53px, auto;
  box-shadow: inset 0 4px 0 rgba(255,255,255,.25), inset 0 -8px 18px rgba(35,25,20,.18), 0 12px 28px rgba(24,18,13,.38);
}
.practice-counter::before {
  content: "";
  position: absolute;
  inset: 9px;
  pointer-events: none;
  border: 2px solid rgba(255, 240, 200, .23);
  border-radius: 20px;
}

.practice-total {
  position: absolute;
  z-index: 3;
  left: 47%;
  top: 6%;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 15px;
  border: 3px solid #4c3828;
  border-radius: 15px;
  background: #fff1bd;
  box-shadow: 0 5px 0 rgba(55, 36, 22, .25);
}
.practice-total strong, .practice-total b { font-size: clamp(19px, 2.5vw, 30px); }

.practice-drawer {
  position: absolute;
  z-index: 2;
  left: 3%;
  top: 7%;
  bottom: 7%;
  width: 41%;
  display: grid;
  grid-template-rows: auto auto;
  align-content: center;
  gap: 10px;
  padding: 12px;
  border: 6px solid #4f3929;
  border-radius: 22px;
  background: linear-gradient(145deg, #3c2c23, #211916);
  box-shadow: inset 0 0 24px #120d0a, 0 4px 0 rgba(255,255,255,.12);
}
.practice-cash-shelf { display: grid; place-items: center; gap: 5px; }
.practice-coins { grid-template-columns: repeat(3, minmax(52px, 1fr)); }
.practice-notes { grid-template-columns: repeat(2, minmax(82px, 1fr)); }

.cash-piece {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 52px;
  min-height: 52px;
  border: 0;
  background: transparent;
  color: #2f271f;
  font-weight: 1000;
  cursor: pointer;
  touch-action: manipulation;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}
.cash-piece span { position: relative; z-index: 2; line-height: 1; }
.cash-piece:focus-visible { outline: 4px solid #fff2a0; outline-offset: 3px; border-radius: 12px; }

.cash-piece.coin {
  width: 54px;
  height: 54px;
  font-size: 16px;
  text-shadow: 0 1px rgba(255,255,255,.75);
}
.cash-piece.coin::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: var(--coin-size, 48px);
  height: var(--coin-size, 48px);
  border: 2px solid var(--metal-lo, #8e681d);
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 24%, #fff 0 4%, transparent 5%),
    radial-gradient(circle at 34% 28%, var(--metal-hi, #fff3ad), var(--metal-mid, #e5b74a) 54%, var(--metal-lo, #8f671b) 100%);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.22), inset 0 0 0 5px rgba(75,54,20,.13), 0 4px 4px rgba(15,11,8,.38);
  transition: transform .16s ease, filter .16s ease;
}
.cash-piece.coin::after {
  content: "";
  position: absolute;
  z-index: 1;
  width: calc(var(--coin-size, 48px) - 12px);
  height: calc(var(--coin-size, 48px) - 12px);
  border: 1px dashed rgba(82,65,36,.38);
  border-radius: 50%;
}
.cash-piece.coin.cent {
  --metal-hi: #ffffff;
  --metal-mid: #cbd3d6;
  --metal-lo: #69777d;
  color: #273236;
}
.cash-piece.coin:not(.cent) {
  --metal-hi: #fff3ad;
  --metal-mid: #e5b74a;
  --metal-lo: #8f671b;
  color: #493511;
}
.cash-piece.coin[data-cents="5"] { --coin-size: 39px; }
.cash-piece.coin[data-cents="10"] { --coin-size: 43px; }
.cash-piece.coin[data-cents="20"] { --coin-size: 47px; }
.cash-piece.coin[data-cents="50"] { --coin-size: 51px; }
.cash-piece.coin[data-cents="100"] { --coin-size: 53px; }
.cash-piece.coin[data-cents="200"] { --coin-size: 47px; }
.cash-piece.coin[data-cents="50"]::before {
  border-radius: 0;
  clip-path: polygon(50% 0,75% 7%,93% 25%,100% 50%,93% 75%,75% 93%,50% 100%,25% 93%,7% 75%,0 50%,7% 25%,25% 7%);
}
.cash-piece.coin[data-cents="50"]::after { border: 0; }

.cash-piece.note {
  --note-light: #f0cfe2;
  --note-mid: #b6799d;
  --note-dark: #69465e;
  width: 88px;
  height: 52px;
  min-width: 82px;
  border: 3px solid var(--note-dark);
  border-radius: 13px 10px 14px 9px;
  overflow: hidden;
  color: #fffdf6;
  font-size: 17px;
  text-shadow: 0 2px 2px rgba(31,21,22,.65);
  background:
    radial-gradient(ellipse at 24% 25%, rgba(255,255,255,.55) 0 5%, transparent 6%),
    radial-gradient(ellipse at 76% 73%, rgba(36,24,25,.18) 0 8%, transparent 9%),
    linear-gradient(145deg, var(--note-light), var(--note-mid) 48%, var(--note-dark));
  box-shadow: inset 0 3px 0 rgba(255,255,255,.32), inset 0 -4px 7px rgba(30,20,20,.22), 0 4px 4px rgba(15,11,8,.38);
  transition: transform .16s ease, filter .16s ease;
}
.cash-piece.note::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 2px solid rgba(255,255,255,.32);
  border-radius: 8px 6px 9px 7px;
}
.cash-piece.note::after {
  content: "";
  position: absolute;
  left: 18%;
  top: -12%;
  width: 2px;
  height: 130%;
  background: rgba(255,255,255,.26);
  box-shadow: 4px 21px 0 -1px rgba(62,40,42,.28), 43px -8px 0 rgba(255,255,255,.16);
  transform: rotate(24deg);
}
.cash-piece.note[data-cents="500"] { --note-light: #f4cadf; --note-mid: #bd789f; --note-dark: #744961; }
.cash-piece.note[data-cents="1000"] { --note-light: #c9e6f5; --note-mid: #628ebd; --note-dark: #365b85; }
.cash-piece.note[data-cents="2000"] { --note-light: #ffd0bd; --note-mid: #d97561; --note-dark: #8c4038; }
.cash-piece.note[data-cents="5000"] { --note-light: #fff0a4; --note-mid: #d3a33d; --note-dark: #8b641f; color: #3f2c12; text-shadow: 0 1px rgba(255,255,255,.55); }
.cash-piece.note[data-cents="10000"] { --note-light: #d1edca; --note-mid: #6da86d; --note-dark: #356b48; }
.cash-piece:hover::before, .cash-piece:focus-visible::before { filter: brightness(1.14) saturate(1.08); }
.cash-piece:active::before, .cash-piece.note:active { transform: translateY(3px) scale(.95); }

.practice-placed {
  position: absolute;
  left: 46%;
  right: 4%;
  top: 25%;
  bottom: 17%;
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
}
.practice-placed .cash-piece { animation: land .22s ease-out; }
.practice-placed .cash-piece.coin { width: 60px; height: 60px; }
.practice-placed .cash-piece.note { width: clamp(88px, 9vw, 116px); height: clamp(52px, 5.3vw, 66px); }
@keyframes land { from { transform: translateY(-12px) scale(.8); opacity: .2; } }

.practice-tools { position: absolute; z-index: 3; right: 2%; bottom: 2%; display: flex; align-items: flex-end; gap: 8px; }
.practice-tools button {
  min-width: 50px;
  min-height: 50px;
  border: 3px solid #503421;
  border-radius: 50%;
  background: #fff3c8;
  color: #3f2e23;
  font-size: 22px;
  font-weight: 1000;
  cursor: pointer;
}
#practice-check {
  min-width: 84px !important;
  min-height: 84px !important;
  margin-left: 4px;
  border-width: 4px !important;
  background: radial-gradient(circle at 35% 26%, #fff6b8, #e8b849 48%, #a66b1f) !important;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.58), 0 7px 0 #65431f, 0 11px 18px rgba(34,23,15,.35);
  font-size: 44px !important;
  line-height: 1;
  transform-origin: 50% 100%;
}
#practice-check span { display: block; filter: drop-shadow(0 3px 2px rgba(64,38,13,.35)); }
#practice-check.is-ready { animation: practiceBellReady 1.1s ease-in-out infinite; }
#practice-check:active { transform: translateY(5px) scale(.96); box-shadow: inset 0 2px 0 rgba(255,255,255,.45), 0 2px 0 #65431f; }
@keyframes practiceBellReady {
  0%, 100% { transform: rotate(0) scale(1); }
  35% { transform: rotate(-5deg) scale(1.06); }
  68% { transform: rotate(5deg) scale(1.06); }
}

/* iPad and desktop keep a clear tool lane on the right of the counter. The
   bell sits above the two small return controls, so money and update notices
   cannot hide the action children need to finish a round. */
@media (min-width: 561px) {
  .practice-placed { right: 18%; }
  #practice-check { position: absolute; right: 0; bottom: 96px; }
}
.practice-feedback {
  position: absolute;
  z-index: 2;
  left: 46%;
  right: 31%;
  bottom: 2%;
  min-height: 38px;
  margin: 0;
  border-radius: 999px;
  background: rgba(35, 53, 45, .94);
  color: #fff;
  padding: 9px 14px;
  font-weight: 850;
  text-align: center;
}
.practice-feedback:empty { opacity: 0; }

dialog {
  width: min(650px, calc(100vw - 28px));
  border: 0;
  border-radius: 28px;
  padding: 24px;
  background: #fff9e8;
  color: var(--ink);
  box-shadow: 0 25px 70px rgba(15,20,18,.45);
  text-align: center;
}
dialog::backdrop { background: rgba(15,27,27,.64); backdrop-filter: blur(5px); }
.finish-coin { display: grid; place-items: center; width: 76px; aspect-ratio: 1; margin: auto; border: 6px solid #8a7134; border-radius: 50%; background: #f1cf5b; font-size: 35px; font-weight: 1000; }
.practice-reward { margin: 12px auto 18px; padding: 12px 16px; border: 3px solid #c38b35; border-radius: 16px; background: #fff0b7; font-size: clamp(17px,2.2vw,22px); font-weight: 1000; line-height: 1.3; }
.finish-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; }
.finish-actions a, .finish-actions button { min-height: 44px; border: 0; border-radius: 999px; background: #4e8564; color: white; padding: 11px 17px; font: 850 14px inherit; text-decoration: none; cursor: pointer; }
.finish-actions a { background: #e9dfc8; color: #4b3728; }

@media (max-width: 900px) {
  .practice-scene { min-height: max(760px, calc(100dvh - 76px)); }
  .practice-customer { left: 2%; top: 18px; bottom: auto; width: min(38%, 290px); height: 300px; }
  .practice-speech { left: 68%; top: 0; width: min(55vw, 320px); }
  .practice-counter { left: 16px; right: 16px; bottom: max(14px, env(safe-area-inset-bottom)); width: auto; height: clamp(405px, 48vh, 465px); }
  .practice-drawer { width: 43%; }
  .practice-total { left: 48%; }
  .practice-placed { left: 46%; top: 25%; }
  .practice-feedback { left: 46%; right: 31%; }
}

@media (max-width: 560px) {
  .practice-header { grid-template-columns: auto 1fr auto; min-height: 68px; padding-inline: 10px; }
  .practice-header strong { font-size: 15px; }
  .practice-header small { display: none; }
  .practice-header > a { font-size: 13px; }
  .practice-header > span { padding: 7px; font-size: 13px; }
  .practice-scene { min-height: 880px; }
  .practice-customer { width: 43%; height: 260px; }
  .practice-speech { left: 63%; width: min(58vw, 270px); padding: 11px 13px; }
  .practice-speech strong { font-size: 28px; }
  .practice-speech small { font-size: 10px; }
  .practice-counter { left: 8px; right: 8px; height: 540px; border-width: 6px; border-radius: 25px; }
  .practice-drawer { left: 2%; top: 7%; bottom: 7%; width: 44%; padding: 7px; border-width: 4px; }
  .practice-coins { grid-template-columns: repeat(2, minmax(52px, 1fr)); }
  .practice-notes { grid-template-columns: 1fr; }
  .cash-piece.note { width: 84px; }
  .practice-total { left: 48%; top: 4%; padding: 7px 9px; }
  .practice-total span { font-size: 11px; }
  .practice-total strong, .practice-total b { font-size: 18px; }
  .practice-placed { left: 47%; right: 1%; top: 20%; bottom: 18%; gap: 4px; padding: 3px; }
  .practice-placed .cash-piece.coin { width: 54px; height: 54px; }
  .practice-feedback { left: 47%; right: 4%; bottom: 19%; border-radius: 14px; font-size: 11px; padding: 7px; }
  .practice-tools { right: 3%; bottom: 2%; }
}

@media (max-width: 370px) {
  .practice-counter { height: 560px; }
  .practice-drawer { width: 46%; }
  .cash-piece.coin { width: 52px; height: 52px; }
  .practice-total, .practice-placed, .practice-feedback { left: 49%; }
  .practice-speech { left: 56%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
[data-motion="reduced"] *, [data-motion="reduced"] *::before, [data-motion="reduced"] *::after { animation: none !important; transition: none !important; }
#practice-check{padding:0!important;border:0!important;border-radius:18%!important;background:transparent!important;box-shadow:none!important;overflow:visible}
#practice-check img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none;filter:drop-shadow(0 7px 4px rgba(64,38,13,.35))}
#practice-check:active{box-shadow:none!important}