/* My Little Cashier Day 3: simulation-only card + QR payment station */
#paymentModal .mlc-method-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
#paymentModal .mlc-method-row .method-choice{padding:10px 4px;min-width:0;font-size:12px;line-height:1.3;min-height:48px;transition:transform .16s,box-shadow .16s}
#paymentModal .mlc-method-row .method-choice:active{transform:scale(.97)}
#paymentModal .mlc-day3-station{display:none;background:linear-gradient(145deg,#f3fff9,#fff5fb 72%);border:2px solid #a9dfce;border-radius:20px;padding:14px;margin:14px 0 8px;overflow:hidden;color:#586a65}
#paymentModal .mlc-day3-station.is-visible{display:block;animation:mlcD3Enter .3s ease-out}
#paymentModal .mlc-day3-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
#paymentModal .mlc-day3-head h4{margin:0;color:#397969;font-size:17px}
#paymentModal .mlc-day3-tag{font-size:10px;font-weight:1000;color:#a14b85;background:#ffe4f4;padding:6px 8px;border-radius:30px;white-space:nowrap}
#paymentModal .mlc-day3-hint{font-size:12px;line-height:1.5;margin:6px 0 12px;color:#687e7a}
#paymentModal .mlc-day3-amount{display:flex;align-items:center;justify-content:space-between;background:white;border:1px solid #d2ebdd;padding:10px 12px;border-radius:13px;font-size:13px;margin:10px 0}
#paymentModal .mlc-day3-amount b{color:#34806c;font-size:19px}
#paymentModal .mlc-day3-card-scene{height:156px;position:relative;display:flex;align-items:center;justify-content:center;isolation:isolate}
#paymentModal .mlc-day3-terminal{width:126px;height:144px;border:5px solid #d6ac67;background:linear-gradient(165deg,#fffbee,#bcebdc);border-radius:19px 19px 23px 23px;box-shadow:0 8px 0 #afcfb7,0 12px 20px #43957f34;position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#36816d;gap:5px;overflow:hidden}
#paymentModal .mlc-day3-terminal:before{content:'♥';position:absolute;top:-1px;font-size:16px;color:#ffa4c8}
#paymentModal .mlc-day3-terminal strong{font-size:27px}
#paymentModal .mlc-day3-terminal small{font-size:10px;font-weight:900}
#paymentModal .mlc-day3-card{position:absolute;z-index:2;left:calc(50% - 129px);top:34px;width:105px;height:67px;border:2px solid #fff7dc;background:linear-gradient(125deg,#a6e0ca,#defbf3 46%,#ffbcd9);border-radius:12px;box-shadow:0 7px 20px #65887566;transform:rotate(-15deg);display:flex;flex-direction:column;align-items:start;justify-content:space-around;padding:9px;color:#3a8b75;font-weight:1000;transition:transform .65s ease,left .65s ease,top .65s ease,opacity .5s ease}
#paymentModal .mlc-day3-card.is-tapping{left:calc(50% - 48px);top:21px;transform:rotate(0deg) scale(.9)}
#paymentModal .mlc-day3-card.is-inserting{left:calc(50% - 44px);top:92px;transform:rotate(0deg) scale(.8);opacity:.7}
#paymentModal .mlc-day3-card .mlc-chip{width:24px;height:16px;border:1px solid #ae8742;background:linear-gradient(135deg,#ffe89a,#f8c86e);border-radius:4px}
#paymentModal .mlc-day3-card .mlc-cardbrand{align-self:flex-end;font-size:13px}
#paymentModal .mlc-day3-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:11px}
#paymentModal .mlc-day3-actions button,#paymentModal .mlc-day3-primary{border:1px solid #98d3bf;border-radius:13px;padding:11px 10px;background:#dff9ee;color:#357966;font-weight:1000;font-size:13px;min-height:44px;cursor:pointer}
#paymentModal .mlc-day3-actions button:disabled,#paymentModal .mlc-day3-primary:disabled{opacity:.55;cursor:not-allowed}
#paymentModal .mlc-day3-primary{display:block;background:linear-gradient(135deg,#ff9cc5,#f678ae);border-color:#f678ae;color:white;width:100%;margin-top:10px}
#paymentModal .mlc-day3-status{margin-top:12px;padding:11px 12px;border-radius:13px;background:#fff;border:1px dashed #abdcca;font-size:12px;line-height:1.4;font-weight:850;min-height:40px;color:#62726d;display:flex;align-items:center;gap:7px}
#paymentModal .mlc-day3-status.is-approved{background:#e2fff0;color:#197a58;border-color:#8acfab}
#paymentModal .mlc-day3-status.is-processing{background:#fff4d9;border-color:#f5cf75;color:#9a6a29}
#paymentModal .mlc-day3-qr-display{width:188px;height:188px;margin:0 auto;display:grid;place-items:center;position:relative;padding:10px;border:2px solid #c9dcb7;background:white;border-radius:14px;box-shadow:0 6px 19px #8abbaa30}
#paymentModal .mlc-day3-qr-code{width:160px;height:160px;display:grid;grid-template-columns:repeat(21,1fr);grid-template-rows:repeat(21,1fr);overflow:hidden}
#paymentModal .mlc-day3-qr-dot.is-ink{background:#317867}
#paymentModal .mlc-day3-qr-cover{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#fff5fb;border:2px solid #f6b9d2;color:#b75488;border-radius:20px;padding:3px 8px;font-weight:1000;font-size:9px}
#paymentModal .mlc-day3-scanner{height:34px;position:absolute;left:8px;right:8px;top:8px;z-index:3;border-bottom:3px solid #fa81b1;background:linear-gradient(#ff9fc516, #fd92ba44);animation:mlcD3Scan 1.15s ease-in-out infinite alternate;display:none}
#paymentModal .mlc-day3-station.is-scanning .mlc-day3-scanner{display:block}
#paymentModal .mlc-day3-qr-note{text-align:center;font-size:11px;color:#a36a86;margin:9px 0 4px;font-weight:800}
#paymentModal .mlc-day3-approved-burst{display:none;text-align:center;font-size:30px;animation:mlcD3Pop .45s ease-out}
#paymentModal .mlc-day3-station.is-approved .mlc-day3-approved-burst{display:block}
@keyframes mlcD3Enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes mlcD3Scan{from{top:8px}to{top:148px}}
@keyframes mlcD3Pop{from{transform:scale(.6)}to{transform:scale(1)}}
@media(max-width:420px){#paymentModal .mlc-day3-head{flex-wrap:wrap}#paymentModal .mlc-day3-card-scene{height:145px}#paymentModal .mlc-day3-terminal{height:128px;width:116px}#paymentModal .mlc-day3-card{left:calc(50% - 120px)}#paymentModal .mlc-day3-qr-display{width:168px;height:168px}#paymentModal .mlc-day3-qr-code{width:140px;height:140px}#paymentModal .mlc-day3-method-row .method-choice{font-size:11px}}
@media(prefers-reduced-motion:reduce){#paymentModal .mlc-day3-card,#paymentModal .mlc-day3-station{animation:none;transition:none}#paymentModal .mlc-day3-scanner{animation:none}}
#paymentModal .mlc-day3-station [hidden]{display:none!important}
/* Keep the PWA install prompt from covering card/QR gameplay on small screens. */
body:has(#paymentModal.open) #mlcInstallPrompt{display:none!important}