/* KODOMO City Bank interior (bank.js): clerk at the counter, coin jars, vault, ATM. */
.room.bank{--door-a:#FFD54A;--door-b:#EDB315}

.bank-stage{position:relative;z-index:1;flex:1;width:100%;max-width:1200px;margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"bubble vault" "counter visitors" "atm atm";
  align-items:end;gap:4px 10px;padding:2px max(16px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 40px) max(16px,env(safe-area-inset-left,0px))}
.bank-stage>.bubble{grid-area:bubble;justify-self:stretch;align-self:center;max-width:34rem;font-size:14px;padding:9px 14px 7px;margin-bottom:4px}
.bank-stage>.bubble::after{inset-inline-start:52%}
.bank-counter{grid-area:counter;position:relative;display:grid;justify-items:center;min-width:0}
.bank-clerk{width:100%;max-width:250px;margin-top:-6px}
.clerk-art{display:block;width:100%;height:auto}
.bank-vault{grid-area:vault;width:84px;align-self:center}
.vault-art{display:block;width:100%;height:auto;filter:drop-shadow(0 12px 14px rgba(30,60,90,.25))}
.atm-spot{grid-area:atm;justify-self:center;width:min(100%,410px);padding-top:34px;position:relative}

/* the clerk waves hello, blinks now and then; the vault wheel turns once when you walk in */
.clerk-art .arm-wave{transform-box:fill-box;transform-origin:12% 92%}
/* the clerk counts coins: a coin hops from his hand onto the stack */
.clerk-art .coin-hop{transform-box:fill-box;transform-origin:center;animation:coinhop 2.6s ease-in-out infinite}
.clerk-art .hand-l{transform-box:fill-box;transform-origin:50% 100%;animation:tap 2.6s ease-in-out infinite}
@keyframes coinhop{0%,30%{transform:none;opacity:1}55%{transform:translate(13px,-16px) scaleX(.3)}75%{transform:translate(26px,-4px);opacity:1}80%,100%{transform:translate(26px,-4px);opacity:0}}
@keyframes tap{0%,25%,60%,100%{transform:none}38%{transform:translateY(-3px) rotate(-6deg)}}
/* visitors: a girl holding her dad's hand, waiting for the ATM */
.bank-visitors{grid-area:visitors;align-self:end;width:112px;justify-self:center}
.visitors-art{display:block;width:100%;height:auto}
.vault-art .vault-wheel{transform-box:view-box;transform-origin:130px 128px}
.room.bank.entering .vault-wheel{animation:wheel 1.6s cubic-bezier(.3,.7,.3,1) .5s both}
@keyframes wheel{from{transform:rotate(-180deg)}}

/* ---------- the ATM ---------- */
.atm{position:relative;display:grid;gap:12px;padding:16px 14px 22px;border-radius:32px 32px 24px 24px;
  background:linear-gradient(180deg,#4CC2F1 0%,#1EA3DF 42%,#188FC6 100%);
  box-shadow:inset 0 4px 0 rgba(255,255,255,.45),inset 0 -10px 0 rgba(8,60,92,.16),inset 6px 0 0 rgba(255,255,255,.12),0 10px 0 #12729E,0 34px 50px -24px rgba(16,60,92,.6)}
.atm::before{content:"";position:absolute;inset-inline:12%;bottom:-26px;height:22px;border-radius:50%;background:rgba(40,70,95,.22);filter:blur(6px);z-index:-1}
.atm-top{position:absolute;top:-24px;inset-inline:0;margin-inline:auto;width:max-content;display:flex;align-items:center;gap:8px;
  padding:6px 18px 4px 10px;border-radius:18px;background:linear-gradient(180deg,#FFD64F,#F6C21C);color:#5B3E00;
  font-family:var(--display);font-weight:800;font-size:18px;letter-spacing:.02em;box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 5px 0 #D29E0B,0 12px 18px -10px rgba(120,80,0,.5)}
.atm-top .ico{width:26px;height:26px}
.atm-bezel{position:relative;border-radius:22px;padding:10px;background:linear-gradient(180deg,#22344E,#17263B);box-shadow:inset 0 4px 10px rgba(0,0,0,.45),0 2px 0 rgba(255,255,255,.35)}
.atm-bezel::after{content:"";position:absolute;inset:10px;border-radius:14px;pointer-events:none;background:linear-gradient(125deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 26%)}
.atm-screen{position:relative;border-radius:14px;background:linear-gradient(180deg,#FBFEFF,#E8F4FA);min-height:300px;max-height:min(56vh,520px);overflow:auto;overscroll-behavior:contain;padding:16px 14px;box-shadow:inset 0 0 0 2px rgba(30,163,223,.22),inset 0 -20px 30px -20px rgba(30,163,223,.25)}
.atm-screen:focus{outline:none}
.atm-screen:focus-visible{outline:3px solid #F6C21C;outline-offset:3px}
.atm-view{display:grid;gap:10px}
.atm-h{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(19px,5vw,23px);line-height:1.25;color:#1B2B3C;text-wrap:balance}
.atm-fine{margin:0;font-size:13px;line-height:1.5;color:var(--ink-soft)}
.atm-lock{margin:2px 0 0;display:flex;gap:6px;align-items:flex-start;font-size:12px;line-height:1.5;color:var(--ink-soft)}
.atm-lock .ico{width:16px;height:16px;flex:none;margin-top:1px}
.atm-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;align-items:center}

.atm-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;border:0;border-radius:14px;padding:9px 16px 6px;font-family:var(--display);font-weight:800;font-size:16px;transition:transform .12s,box-shadow .12s}
.atm-btn.go{color:#fff;background:linear-gradient(180deg,#5AD178,#2EA84A);box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 4px 0 #1E7A35}
.atm-btn.go:active{transform:translateY(3px);box-shadow:0 1px 0 #1E7A35}
.atm-btn.ghost{color:#2A3A4A;background:#fff;box-shadow:0 3px 0 #C3D3DE}
.atm-btn.ghost:active{transform:translateY(2px);box-shadow:0 1px 0 #C3D3DE}

.atm-tiers{display:grid;gap:9px}
.atm-tier{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;text-align:start;
  border:2px solid #D3E3EC;border-radius:18px;background:#fff;padding:12px;box-shadow:0 3px 0 #C7D9E4;transition:transform .12s,border-color .2s,box-shadow .12s}
.atm-tier:hover{border-color:#1EA3DF}
.atm-tier:active{transform:translateY(2px);box-shadow:0 1px 0 #C7D9E4}
.tier-coin{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 12%,var(--tc,#F6C21C) 13% 62%,color-mix(in srgb,var(--tc,#F6C21C) 70%,#000) 63%);box-shadow:0 3px 0 color-mix(in srgb,var(--tc,#F6C21C) 60%,#000)}
.atm-tier.c0{--tc:#F6C21C}.atm-tier.c1{--tc:#1EA3DF}.atm-tier.c2{--tc:#2EA84A}.atm-tier.c3{--tc:#E6197E}.atm-tier.c4{--tc:#8D3D97}.atm-tier.c5{--tc:#E52521}
.tier-txt{display:grid;gap:2px;min-width:0}
.tier-txt b{font-family:var(--display);font-weight:800;font-size:16px;line-height:1.3;color:#1B2B3C}
.tier-txt small{font-size:13px;line-height:1.4;color:var(--ink-soft)}
.tier-demo{font-style:normal;justify-self:start;font-size:11px;font-weight:700;padding:1px 8px;border-radius:999px;background:#EEF3F6;color:#5D6B78}
.tier-amt{font-family:var(--display);font-weight:800;font-size:17px;color:#C0136A;white-space:nowrap}

.atm-wait,.atm-soon{display:grid;justify-items:center;text-align:center;gap:10px;padding-block:8px}
.atm-wait p,.atm-soon p{margin:0;max-width:34ch;line-height:1.55}
.atm-soon .atm-row{justify-content:center}
.atm-art{width:92px;height:92px}
.atm-wait .spin{width:64px;height:64px;animation:coinflip 1.2s ease-in-out infinite}
@keyframes coinflip{50%{transform:rotateY(180deg)}}
.mini-card{width:96px;height:auto;animation:bob 1.4s ease-in-out infinite}

.atm-gate{display:grid;gap:8px;text-align:center}
.gate-tier{margin:0;justify-self:center;padding:3px 12px 1px;border-radius:999px;background:#EAF4FA;font-size:13px;color:#2A3A4A}
.gate-words{margin:4px 0;font-family:var(--display);font-weight:800;font-size:clamp(21px,5.6vw,27px);line-height:1.3;color:#1A93CB;text-wrap:balance}
.gate-in{justify-self:center;width:min(220px,100%);text-align:center;font-family:var(--display);font-weight:800;font-size:30px;letter-spacing:.35em;padding:8px 10px 4px .35em;border:3px solid #CFE2EC;border-radius:16px;background:#fff;color:#1B2B3C}
.gate-in:focus{outline:none;border-color:#1EA3DF;box-shadow:0 0 0 4px rgba(30,163,223,.2)}
.atm-gate .atm-row{justify-content:center}
.atm-msg{margin:0;min-height:1.3em;font-weight:700;font-size:14px;color:#1B2B3C}
.atm-msg:not(:empty){padding:6px 12px;border-radius:12px;background:#FFF0EF;color:#B3261E}
.atm.nope .atm-bezel{animation:nope .4s ease}
@keyframes nope{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}

/* deck: keypad + card slot + speaker */
.atm-deck{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center}
.atm-keypad{direction:ltr;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding:10px;border-radius:18px;background:rgba(8,60,92,.2);box-shadow:inset 0 2px 5px rgba(0,0,0,.18)}
.key{min-height:40px;border:0;border-radius:12px;background:linear-gradient(180deg,#FFFFFF,#E6EFF5);color:#2A3A4A;font-family:var(--display);font-weight:800;font-size:18px;line-height:1;padding-top:3px;box-shadow:inset 0 1px 0 #fff,0 3px 0 #9FB6C6;transition:transform .1s,box-shadow .1s,opacity .3s}
.key.k-clear{font-size:13px;background:linear-gradient(180deg,#FF8B80,#E52521);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 3px 0 #A31B17}
.key.k-ok{font-size:14px;background:linear-gradient(180deg,#5AD178,#2EA84A);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 3px 0 #1E7A35}
.key:disabled{cursor:default;opacity:.78}
.atm-keypad.live .key{opacity:1}
.atm-keypad.live{box-shadow:inset 0 2px 5px rgba(0,0,0,.18),0 0 0 3px rgba(246,194,28,.75)}
.key:not(:disabled):active{transform:translateY(2px);box-shadow:0 1px 0 #9FB6C6}
.atm-side{display:grid;gap:12px;justify-items:center}
.card-slot{position:relative;width:96px;height:72px;border-radius:14px;background:rgba(8,60,92,.18);box-shadow:inset 0 2px 4px rgba(0,0,0,.15)}
.card-slot .slot,.receipt-slot .slot{position:absolute;height:9px;border-radius:6px;background:#0E1C2C;box-shadow:inset 0 2px 3px rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.45)}
.card-slot .slot{bottom:12px;inset-inline:10px}
.card-slot .led{position:absolute;top:9px;inset-inline-end:10px;width:9px;height:9px;border-radius:50%;background:#7EE59B;box-shadow:0 0 8px #7EE59B}
.card-mask{position:absolute;inset-inline:12px;bottom:16px;height:110px;overflow:hidden;pointer-events:none;z-index:2}
.atm-card{position:absolute;inset-inline:0;bottom:0;opacity:0}
.atm-card svg{display:block;width:100%;height:auto;filter:drop-shadow(0 3px 2px rgba(0,0,0,.25))}
.atm.inserting .atm-card{animation:cardin 2.2s cubic-bezier(.45,.05,.3,1) forwards}
.atm.inserting .card-slot .led{animation:led .3s steps(2) infinite}
@keyframes cardin{0%{opacity:0;transform:translateY(-40px) rotate(-14deg) scale(1.25)}18%{opacity:1;transform:translateY(-4px) rotate(-3deg) scale(1)}46%{opacity:1;transform:translateY(-4px) rotate(0)}90%{opacity:1;transform:translateY(102%)}100%{opacity:0;transform:translateY(102%)}}
@keyframes led{50%{background:#F6C21C;box-shadow:0 0 10px #F6C21C}}
.atm-speaker{display:grid;gap:4px;width:56px}
.atm-speaker i{height:4px;border-radius:3px;background:rgba(8,40,62,.35)}

/* receipt: prints out of the slot under the screen and hangs down over the deck */
.atm-face{position:relative;display:grid;gap:10px}
.receipt-slot{position:relative;height:14px;margin-inline:auto;width:70%;z-index:3}
.receipt-slot .slot{inset:2px 0}
.receipt-wrap{position:absolute;top:calc(100% - 7px);left:50%;transform:translateX(-50%);width:min(250px,calc(100vw - 80px));overflow:hidden;z-index:2;padding:0 8px 16px;pointer-events:none}
.receipt-wrap:empty{display:none}
.receipt-wrap .receipt{pointer-events:auto}
.atm-kick{height:10px;margin-inline:18%;border-radius:0 0 12px 12px;background:#12729E;margin-top:-6px}
.receipt{position:relative;display:grid;gap:6px;padding:16px 16px 14px;background:linear-gradient(180deg,#F1F5F7 0,#FFFFFF 14px);color:#2A3540;font-size:13px;box-shadow:0 10px 18px -8px rgba(30,60,90,.35)}
.receipt::after{content:"";position:absolute;inset-inline:0;bottom:-10px;height:10px;background:linear-gradient(135deg,#fff 50%,transparent 50%) 0 0/14px 10px,linear-gradient(225deg,#fff 50%,transparent 50%) 0 0/14px 10px}
.atm.printing .receipt{animation:print 2.2s steps(14,end) .2s both}
@keyframes print{from{transform:translateY(-102%)}}
.r-head{margin:0;display:flex;align-items:center;justify-content:center;gap:6px;font-family:var(--display);font-weight:800;font-size:15px}
.r-head .ico{width:20px;height:20px}
.r-sub{margin:0;text-align:center;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#7A8894;padding-bottom:6px;border-bottom:2px dashed #CBD8E0}
.receipt dl{margin:0;display:grid;gap:5px}
.r-row{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.r-row dt{color:#7A8894}
.r-row dd{margin:0;font-weight:700;text-align:end;font-variant-numeric:tabular-nums}
.r-status dd{color:#1A7F37}
.r-cancel .r-status dd{color:#5D6B78}
.r-row.flash{animation:flash 1s ease 2}
@keyframes flash{50%{background:#E6F7EA}}
.r-thanks{margin:0;padding-top:8px;border-top:2px dashed #CBD8E0;text-align:center;font-family:var(--display);font-weight:600;font-size:13px;line-height:1.45}
.r-stamp{position:absolute;top:44%;inset-inline:0;margin:0 auto;width:max-content;padding:2px 12px;border:3px solid rgba(230,25,126,.55);border-radius:10px;color:rgba(192,19,106,.75);font-family:var(--display);font-weight:800;font-size:16px;transform:rotate(-9deg);pointer-events:none}
.atm-spot:has(.receipt){padding-bottom:120px}

/* ---------- phones: the keypad folds away until the parental gate needs it ---------- */
@media (max-width:859px){
  .atm-keypad:not(.live){display:none}
  .atm-deck{grid-template-columns:minmax(0,1fr)}
  .atm-keypad.live+.atm-side{display:none}
  .atm-side{grid-auto-flow:column;justify-content:center;align-items:center;gap:22px}
  .atm.inserting .atm-keypad.live+.atm-side,.atm-keypad:not(.live)+.atm-side{display:grid}
  .atm-screen{min-height:240px;max-height:none}
}

/* ---------- tablet / desktop: counter · ATM · vault in a row ---------- */
@media (min-width:860px) and (min-height:560px){
  .bank-stage{grid-template-columns:minmax(0,1fr) minmax(360px,410px) minmax(0,1fr);grid-template-areas:". atm vault" "bubble atm vault" "counter atm visitors";grid-template-rows:1fr auto auto;gap:10px 28px;align-items:end;padding-bottom:5vh}
  .bank-stage>.bubble{justify-self:center;max-width:320px;font-size:16px;padding:12px 16px 10px;margin-bottom:6px}
  .bank-stage>.bubble::after{inset-inline-start:46%}
  .bank-clerk{max-width:320px}
  .bank-counter{margin-bottom:3vh}
  .bank-vault{width:min(250px,100%);align-self:end;margin-bottom:6vh;justify-self:center}
  .bank-visitors{width:min(240px,100%);margin-bottom:1vh}
  .atm-screen{min-height:320px}
  .atm-spot:has(.receipt){padding-bottom:0}
}
@media (min-width:600px) and (max-width:859px){.bank-vault{width:150px}.bank-clerk{max-width:320px}}
.atm-tier{grid-template-areas:"coin txt amt"}
.tier-coin{grid-area:coin}.tier-txt{grid-area:txt}.tier-amt{grid-area:amt}
@media (max-width:480px){
  .atm-tier{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"coin txt" "coin amt";row-gap:4px}
  .tier-amt{justify-self:start;font-size:16px}
  .bank-clerk{max-width:215px}
}
@media (max-width:370px){.key{min-height:36px;font-size:16px}.card-slot{width:84px}.atm-screen{min-height:220px}}