/* My Little Cashier · Day 2 Interactive Cash Drawer */
.change-game{background:linear-gradient(155deg,#fff3fa 0%,#edfff6 100%);border:2px solid #a7ddc8;padding:15px;border-radius:22px;margin-top:15px}
.drawer-heading{display:flex;gap:12px;justify-content:space-between;align-items:flex-start;margin-bottom:12px;flex-wrap:wrap}
.change-game .drawer-heading h4{font-size:19px;margin:0 0 4px;color:#a74c85}
.drawer-heading p{margin:0}
.drawer-day-badge{border:1px solid #b7dece;background:#e6fff4;color:#397b61;padding:7px 10px;border-radius:16px;font-weight:900;font-size:10px;white-space:nowrap}
.drawer-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:12px;align-items:center}
.drawer-left{display:flex;align-items:center;flex-direction:column;gap:7px;min-width:0}
.drawer-machine{position:relative;display:block;aspect-ratio:1/1;width:100%;max-width:285px;border:0!important;background:radial-gradient(circle at center,#e5fff6 2%,transparent 65%)!important;padding:0!important;cursor:pointer;transition:transform .25s ease;filter:drop-shadow(0 7px 9px #bc7e9b29);touch-action:manipulation}
.drawer-machine:not(.disabled):active{transform:scale(.98)}
.drawer-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .45s ease,transform .55s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.drawer-closed-img{opacity:1;transform:translateY(0) scale(1)}
.drawer-open-img{opacity:0;transform:translateY(-12px) scale(.94)}
.drawer-is-open .drawer-closed-img{opacity:0;transform:translateY(-10px) scale(.97)}
.drawer-is-open .drawer-open-img{opacity:1;transform:translateY(0) scale(1)}
.drawer-tap{position:absolute;bottom:0;left:50%;transform:translateX(-50%);padding:7px 12px;background:#fffef8f5;border:1px solid #e7c0d4;border-radius:24px;font-size:11px;font-weight:900;color:#a84680;white-space:nowrap;box-shadow:0 3px 9px #b8799b30;pointer-events:none;z-index:1}
.drawer-open-button{background:linear-gradient(110deg,#8dccb2,#c4f4e1)!important;border:2px solid #b2e5d0!important;color:#275f4c!important;padding:10px 15px!important;border-radius:12px;font-weight:900;box-shadow:0 4px 0 #639b8526}
.drawer-open-button[hidden]{display:none!important}
.drawer-right{background:#fffafd;border:1px solid #f2d9e8;border-radius:17px;padding:12px;min-width:0}
.drawer-progress-title{font-size:13px;font-weight:900;color:#97527c;margin-bottom:12px}
.drawer-right .change-progress{margin:9px 0;font-size:12px;flex-wrap:wrap}
.drawer-right .change-progress strong{font-size:14px;color:#673e56}
.drawer-right .drawer-remaining{border-top:1px dashed #ddc4d2;padding-top:10px}
.drawer-progress-track{height:10px;background:#f4dcea;border-radius:99px;overflow:hidden;margin-top:12px}
#drawerProgressFill{height:100%;width:0%;background:linear-gradient(90deg,#9cd8be,#ed89bc);transition:width .2s;border-radius:99px}
.drawer-help{font-size:12px;font-weight:800;color:#945e79;line-height:1.45;margin:12px 0 0}
.drawer-money-title{font-weight:900;font-size:13px;margin:14px 0 10px;color:#784a66}
.change-game .change-coins{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
.change-game .drawer-note{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;min-width:0;min-height:72px;padding:6px 2px;border-radius:14px;border:1px solid #efc4da;background:linear-gradient(155deg,#fff,#ffebf5);color:#98516f;font-size:11px;font-weight:900;cursor:pointer;transition:transform .16s,background .16s;touch-action:manipulation}
.change-game .drawer-note:hover:not(:disabled){transform:translateY(-3px);background:#fff}
.change-game .drawer-note:active:not(:disabled){transform:scale(.94)}
.change-game .drawer-note img{height:34px;width:100%;object-fit:contain;filter:drop-shadow(0 3px 3px #b7779b22)}
.change-game .drawer-note strong{font-weight:900;font-size:11px;line-height:1.3;text-align:center}
.change-game .drawer-note:disabled{opacity:.36;filter:grayscale(.35);cursor:not-allowed}
.drawer-coin-icon{width:33px;height:33px;display:grid;place-items:center;border-radius:50%;color:#aa7831;font-size:17px;border:3px double #d3a254;background:radial-gradient(circle at 30% 20%,#fffbd2,#f1bd64 70%,#d48f46);box-shadow:inset 0 0 0 2px #fff9cc,0 3px 3px #986e4e40}
.drawer-coin-icon.silver-coin{color:#6e8397;border-color:#aab6c5;background:radial-gradient(circle at 30% 20%,#fff,#b9c9d7 70%,#9caabc);box-shadow:inset 0 0 0 2px #fff,0 3px 3px #7e8c9940}
.drawer-change-actions{display:flex;gap:8px;margin-top:12px}
.drawer-change-actions button{flex:1;border:1px solid #e9bdd3;background:#fff;border-radius:11px;color:#9a5680;padding:9px;font-size:12px;font-weight:900}
.drawer-change-actions button:disabled{opacity:.4;cursor:not-allowed}
.change-game .change-picked{background:#fff8fd;border-radius:12px;padding:10px;line-height:1.5;margin-top:10px;word-break:break-word}
.drawer-is-complete .drawer-right{border-color:#87d3af;background:#f0fff6}
.drawer-is-complete .drawer-help{color:#23845d}
#confirmPaymentBtn:disabled{opacity:.55;cursor:not-allowed;filter:grayscale(.3)}
@media(max-width:540px){.drawer-layout{grid-template-columns:1fr}.drawer-machine{max-width:235px}.change-game .change-coins{grid-template-columns:repeat(3,minmax(0,1fr))}.drawer-heading h4{font-size:17px}.drawer-day-badge{font-size:9px}.change-game .drawer-note{min-height:67px}.drawer-tap{font-size:10px}}
@media(prefers-reduced-motion:reduce){.drawer-img,.drawer-machine,.drawer-note,#drawerProgressFill{transition:none!important}}