#modal[data-screen=store] .bank-products{inset:39% 14% 9%;display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(146px,1fr);grid-template-rows:minmax(0,1fr);gap:10px;padding:4px 5px 9px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity}
#modal[data-screen=store] .bank-offer{display:grid;grid-template-columns:1fr;grid-template-rows:24px minmax(30px,1fr) 26px 28px 34px;gap:3px;padding:7px;min-width:0;scroll-snap-align:center}
#modal[data-screen=store] .bank-offer-tag{grid-area:1/1;font-size:11px;line-height:1.1;align-self:center}
#modal[data-screen=store] .bank-seal{grid-area:2/1;position:relative;width:100%;height:100%;background:radial-gradient(ellipse,#40677a,#162a42);border:2px solid #fff4b9;border-radius:10px;overflow:hidden}
#modal[data-screen=store] .bank-vault-preview{width:100%;height:100%;max-height:none;filter:drop-shadow(0 0 2px #fff8c3);padding-bottom:10px}
#modal[data-screen=store] .bank-offer h4{grid-area:3/1;display:flex;align-items:center;justify-content:center;gap:5px;font-size:21px;margin:0;align-self:center}
#modal[data-screen=store] .bank-offer h4 svg{width:24px;height:24px}
#modal[data-screen=store] .bank-offer p{grid-area:4/1;display:block;font-size:11px;line-height:1.15;align-self:center}
#modal[data-screen=store] .bank-offer button.primary{grid-area:5/1;min-height:30px;padding:4px;font-size:13px;align-self:stretch}
#modal[data-screen=store] .bank-daily{width:34%;top:3%;left:2%;padding:9px;gap:8px}
#modal[data-screen=store] .bank-daily h4{display:flex;align-items:center;gap:5px;font-size:21px;margin:2px 0}
#modal[data-screen=store] .bank-daily h4 svg{width:24px;height:24px}
#modal[data-screen=store] .bank-accuracy{font-size:11px;display:flex;align-items:center;gap:3px}
#modal[data-screen=store] .bank-accuracy svg{width:16px;height:16px}
#modal[data-screen=store] .bank-daily button.primary{font-size:13px;max-width:115px;min-height:40px}
#modal[data-screen=store] .bank-wallet{width:29%;padding:9px;top:3%;font-size:20px;gap:7px}
#modal[data-screen=store] .bank-wallet svg{width:25px;height:25px}
#modal[data-screen=store] .bank-service{bottom:7%;right:2%;left:auto;max-width:85%;width:auto;padding:4px;z-index:10}
#modal[data-screen=store] .bank-service[hidden]{display:none}
#modal[data-screen=store] #store-status:empty{display:none}
.offer-hoard{position:absolute;bottom:0;left:5%;width:90%;height:38%;pointer-events:none}
.offer-hoard span{position:absolute;width:24%;height:65%;transform:rotate(var(--turn));filter:drop-shadow(0 1px 1px #432305)}
.offer-hoard svg{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important}
body #modal[data-screen=pause] .field-actions{gap:14px 16px!important;padding-bottom:5px}
body #modal[data-screen=pause] .field-actions button{box-shadow:3px 4px 0 #30324e!important}
body #modal .expedition-worlds .biome-tile>.biome-card{justify-content:flex-start!important}
body #modal .biome-picture{flex-shrink:0!important;object-fit:contain!important;object-position:center!important;margin:0!important}
.treasury{container-type:size}
.bank-journey .vault-stage{width:min(98cqw,146cqh);max-width:100%;height:auto;aspect-ratio:1.5;max-height:100%}
.bank-journey .loot-hint{display:none!important}
.vault-riches{position:absolute;inset:0;pointer-events:none;opacity:0}
.bank-journey[data-phase=collect] .vault-riches{opacity:1;transition:opacity .5s 1s}
.room-emblem{position:absolute;left:43%;top:24%;width:14%;height:28%;object-fit:contain;opacity:.85}
.room-trove{position:absolute;width:13%;height:12%;transform:translateX(-50%)}
.room-trove .offer-hoard{height:100%}
.vault-lesson{position:absolute;inset:0;display:grid;place-items:center;background:#071421cc;z-index:30;padding:12px}
.vault-lesson-card{width:min(500px,90%);max-height:100%;overflow:auto;padding:20px;border:2px solid #ebc66b;border-radius:22px;color:#fff3ca;background:linear-gradient(145deg,#284252,#172638);text-align:center;box-shadow:0 12px 60px #0008}
.vault-lesson-card h3{font-size:22px;margin:0 0 4px}.vault-lesson-card>svg{width:100%;max-height:150px;display:block}.lesson-steps{display:flex;justify-content:space-around;font:15px/1.3 sans-serif;margin-bottom:15px}.vault-lesson-card button{width:100%;min-height:42px}
.guardian-arena{position:absolute;inset:0;z-index:20;background:radial-gradient(ellipse,transparent 20%,#07142177)}
.guardian-target{position:absolute!important;left:50%;top:38%;transform:translate(-50%,-50%)!important;width:clamp(110px,25%,240px)!important;height:auto!important;aspect-ratio:1.22;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;overflow:visible!important}
.guardian-target>svg{width:100%;height:100%;filter:drop-shadow(0 6px 4px #0008);animation:guardian-breathe 1.1s ease-in-out infinite alternate}.guardian-target:disabled{opacity:1!important}
.guardian-ring{position:absolute;inset:0;border:4px solid #c5d6e0;border-radius:50%;opacity:0;pointer-events:none}.guardian-ring.active{opacity:1;animation:guardian-aim 1.2s linear forwards}.guardian-ring.sweet{border-color:#ffd447;box-shadow:0 0 15px #ffd447}
.guardian-score{position:absolute;bottom:8%;left:50%;transform:translateX(-50%);color:#ffe7a0;background:#142937;padding:8px 18px;border:1px solid #cba34b;border-radius:30px;font:700 22px sans-serif;white-space:nowrap}
.guardian-hit>svg{filter:drop-shadow(0 0 15px #fff3a0)}
.guardian-tongue{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0}.bank-journey[data-guardian=cast] .guardian-tongue,.bank-journey[data-guardian=sweet] .guardian-tongue{opacity:1}
@keyframes guardian-breathe{to{transform:translateY(-5px) rotate(3deg)}}@keyframes guardian-aim{from{transform:scale(1.5)}to{transform:scale(.65)}}
@media(max-height:700px){
 
 #modal[data-screen=store] .bank-products{inset:35% 14% 8%;grid-auto-columns:minmax(124px,1fr);gap:8px}
 #modal[data-screen=store] .bank-offer{grid-template-rows:19px minmax(20px,1fr) 20px 23px 28px;padding:4px;gap:2px}
 #modal[data-screen=store] .bank-offer-tag{font-size:9px}#modal[data-screen=store] .bank-offer h4{font-size:16px}#modal[data-screen=store] .bank-offer h4 svg{width:19px;height:19px}
 #modal[data-screen=store] .bank-offer p{font-size:9px}#modal[data-screen=store] .bank-offer button.primary{font-size:11px;min-height:26px}
 #modal[data-screen=store] .bank-daily{padding:5px;gap:4px}#modal[data-screen=store] .bank-daily h4{font-size:16px}#modal[data-screen=store] .bank-ribbon{font-size:8px}
 #modal[data-screen=store] .bank-accuracy{font-size:9px;margin:0}#modal[data-screen=store] .bank-daily button.primary{font-size:10px;min-height:30px;max-width:80px;padding:4px}
 #modal[data-screen=store] .bank-wallet{font-size:15px;padding:6px}#modal[data-screen=store] .bank-wallet svg{width:20px;height:20px}
 body #modal[data-screen=pause] .field-actions{gap:11px 12px!important}body #modal[data-screen=pause] .field-actions button{min-height:28px;padding:3px 8px}
 .vault-lesson-card{padding:12px}.vault-lesson-card h3{font-size:18px}.vault-lesson-card>svg{max-height:100px}.lesson-steps{font-size:12px;margin-bottom:8px}.vault-lesson-card button{min-height:32px}
}
@media(max-height:430px){#modal[data-screen=store] .bank-products{top:32%;grid-auto-columns:minmax(126px,1fr)}#modal[data-screen=store] .bank-offer{grid-template-columns:42% 1fr;grid-template-rows:18px minmax(20px,1fr) 25px}#modal[data-screen=store] .bank-offer-tag{grid-area:1/1/2/3}#modal[data-screen=store] .bank-seal{grid-area:2/1}#modal[data-screen=store] .bank-offer h4{grid-area:2/2;align-self:start;font-size:14px}#modal[data-screen=store] .bank-offer p{grid-area:2/2;align-self:end;font-size:8px}#modal[data-screen=store] .bank-offer button.primary{grid-area:3/1/4/3}#modal[data-screen=store] .bank-daily h4{font-size:13px}#modal[data-screen=store] .bank-accuracy{font-size:8px}}
@media(max-width:600px) and (orientation:portrait){#modal[data-screen=store] .bank-products{inset:37% 8% 9%;grid-auto-columns:150px}#modal[data-screen=store] .bank-daily{width:53%}#modal[data-screen=store] .bank-wallet{width:36%;font-size:13px}#modal[data-screen=store] .bank-vault-art{top:17%;height:20%}#modal[data-screen=store] .bank-offer{grid-template-rows:24px minmax(40px,1fr) 26px 32px 36px}}
#modal[data-screen=store] .bank .guardian-target{transform:translate(-50%,-50%)!important}
.room-trove .offer-hoard span{width:25%;height:48%}
.room-decoration{width:100%;height:100%}
@media(orientation:landscape) and (max-height:700px){body.touch #modal[data-menu-theme=stickers][open]:not([data-menu-theme=field]){width:94vw!important;height:94dvh!important;max-width:94vw!important;max-height:94dvh!important;margin:auto!important;border-radius:12px}}
#modal[data-screen=store] .bank-seal .offer-guardian{position:absolute;left:25%;top:30%;width:50%;height:48%;object-fit:contain;animation:guardian-breathe 1.2s ease-in-out infinite alternate}
.route-guardian{position:absolute;animation:guardian-breathe 1.2s ease-in-out infinite alternate;will-change:transform}
.guardian-ring{left:0;right:0;width:auto;height:auto}
@media(orientation:landscape) and (min-height:500px) and (max-height:700px){body.touch #modal[data-screen=expeditions] .class-card b{font-size:14px!important}body.touch #modal[data-screen=expeditions] .class-card small,body.touch #modal[data-screen=expeditions] .class-card span{font-size:12px!important;line-height:1.3}body.touch #modal[data-screen=expeditions] .biome-card b{font-size:17px!important}body.touch #modal[data-screen=expeditions] .biome-card span{font-size:12px!important}}
.guardian-target>img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 4px #0008);animation:guardian-breathe 1.1s ease-in-out infinite alternate;will-change:transform}
.guardian-hit>img{filter:drop-shadow(0 0 15px #fff3a0)}
.bank-journey:not([data-phase=travel]):not([data-phase=return]) .route-guardian{animation-play-state:paused}
.lesson-rule{font:12px/1.3 sans-serif;margin:0 0 10px;color:#ffe6a6}
#modal[data-screen=store] .guardian-ring{background:transparent!important;background-image:none!important}
#modal[data-screen=store] .guardian-ring::before,#modal[data-screen=store] .guardian-ring::after{content:none!important;display:none!important}
/* Fit against the actual dialog, including the travelling selector in bank-journey.css. */
body #modal.bank-travelling[data-screen=store] .vault-stage{width:min(96cqw,144cqh)!important;height:auto!important;aspect-ratio:1.5;max-width:96%;max-height:96%;flex:none}
body #modal[data-screen=store] .bank-products{grid-auto-columns:240px;gap:14px}
body #modal[data-screen=store] .bank-offer-tag{font-size:14px}
body #modal[data-screen=store] .bank-offer p{font-size:13px}
body #modal[data-screen=store] .bank-gift{background:linear-gradient(145deg,#e3ffcc,#9ce6bc);border-color:#eaffc9;color:#154f44}
body #modal[data-screen=store] .bank-gift button.primary{background:linear-gradient(#328968,#17644e);border-color:#86e2b4;box-shadow:0 3px 0 #154e3c}
@media(max-height:700px){body #modal[data-screen=store] .bank-products{grid-auto-columns:210px}body #modal[data-screen=store] .bank-offer-tag{font-size:12px}body #modal[data-screen=store] .bank-offer p{font-size:11px}}
@media(max-height:430px){body #modal[data-screen=store] .bank-offer{grid-template-columns:48% 1fr}body #modal[data-screen=store] .bank-offer-tag{font-size:11px}body #modal[data-screen=store] .bank-offer p{font-size:10px}}
/* Guardian encounter: lane warning, rush, exposed back, key and bonus chest. */
.guardian-duel{--player-lane:1;--attack-lane:1;overflow:hidden}
.guardian-duel .guardian-target{top:38%;width:clamp(110px,22%,220px)!important;transition:left .55s ease,top .3s ease,scale .35s ease;transform-origin:center;z-index:3}
.guardian-duel .guardian-target>img{animation:guardian-scuttle .28s ease-in-out infinite alternate}
.guardian-duel .guardian-target:disabled{pointer-events:none}
.guardian-danger{position:absolute;left:calc(12.5% + var(--attack-lane)*25%);top:30%;bottom:0;width:25%;background:linear-gradient(#e7464e22,#f64e5599);clip-path:polygon(38% 0,62% 0,100% 100%,0 100%);opacity:0;transition:opacity .15s;pointer-events:none}
.guardian-lanes{position:absolute;bottom:3%;left:15%;right:15%;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;z-index:5}
#modal[data-screen=store] .bank .guardian-lanes button{min-height:42px;font:700 15px sans-serif;padding:8px;border:2px solid #9cb8bd;border-radius:12px;background:#19394c;color:#fff0c5;box-shadow:0 3px 0 #080e1d}
#modal[data-screen=store] .bank .guardian-lanes button[aria-pressed=true]{background:#ffdf83;border-color:#fff4c2;color:#453119}
.guardian-duel .guardian-score{bottom:17%;font-size:18px;z-index:4}
.guardian-weakspot{position:absolute;left:42%;top:56%;width:16%;aspect-ratio:1;border:3px solid #ecffca;border-radius:50%;background:#a5f180;box-shadow:0 0 20px #d3ff8a;opacity:0;pointer-events:none}
.bank-journey[data-guardian=warning] .guardian-danger{animation:danger-pulse .3s ease infinite alternate}
.bank-journey[data-guardian=rush] .guardian-target{top:68%;scale:1.8}
.bank-journey[data-guardian=exposed] .guardian-target{rotate:175deg;top:47%;scale:1.1}
.bank-journey[data-guardian=exposed] .guardian-weakspot{opacity:1}
.bank-journey[data-guardian=hit] .guardian-tongue{opacity:1}
.bank-journey[data-guardian=hit] .guardian-target{scale:.85;rotate:195deg;filter:brightness(1.5)}
.bank-journey:is([data-guardian=key],[data-guardian=chest],[data-guardian=chest-open]) .guardian-target{opacity:0!important}
.bank-journey:is([data-guardian=key],[data-guardian=chest],[data-guardian=chest-open],[data-guardian=defeat]) .guardian-lanes{display:none}
.guardian-prize{position:absolute;inset:20% 25% 24%;display:grid;place-items:center;z-index:7}
#modal[data-screen=store] .bank .guardian-key,#modal[data-screen=store] .bank .guardian-chest{border:0!important;background:transparent!important;box-shadow:none!important;width:min(260px,100%);padding:0;filter:drop-shadow(0 0 18px #ffe28c77)}
.guardian-key svg,.guardian-chest svg{width:100%;height:100%}.guardian-key svg{animation:key-float .8s ease-in-out infinite alternate}
.guardian-prize>strong{display:flex;align-items:center;gap:8px;font:900 32px sans-serif;color:#ffeaa0}.guardian-prize>strong svg{width:40px;height:40px}
.bonus-shower{position:absolute;inset:0;pointer-events:none}.bonus-shower span{position:absolute;left:calc(10% + mod(var(--i)*19,80)*1%);top:20%;width:32px;animation:prize-rain 1.4s calc(var(--i)*.035s) both ease-in}.bonus-shower svg{width:100%;height:100%}
.guardian-hurt{animation:guardian-hurt .35s}
@keyframes guardian-scuttle{to{transform:translateY(3px) rotate(3deg)}}@keyframes guardian-hurt{25%{transform:translateX(-9px);background:#e3474966}75%{transform:translateX(9px)}}@keyframes danger-pulse{to{filter:brightness(1.6)}}@keyframes key-float{to{translate:0 -12px;rotate:8deg}}@keyframes prize-rain{from{transform:translateY(-35px) rotate(0);opacity:0}25%{opacity:1}to{transform:translateY(170px) rotate(220deg);opacity:0}}
@media(max-height:600px){.guardian-duel .guardian-score{bottom:20%;font-size:14px}#modal[data-screen=store] .bank .guardian-lanes button{min-height:34px;font-size:12px;padding:6px}.guardian-lanes{left:10%;right:10%}.guardian-warning .vault-lesson-card>svg{max-height:68px}}
.route-guardian.route-step-one{animation:guardian-patrol 2.8s ease-in-out infinite alternate,guardian-step .32s steps(1) infinite}
.route-guardian.route-step-two{animation:guardian-patrol 2.8s ease-in-out infinite alternate,guardian-step .32s steps(1) infinite reverse}
@keyframes guardian-patrol{from{translate:-35px 0}to{translate:35px -6px}}@keyframes guardian-step{0%,100%{opacity:1}50%{opacity:0}}
.bank-journey:is([data-guardian=chest],[data-guardian=unlocking],[data-guardian=chest-open]) .room-chest{opacity:0}
.bank-journey[data-guardian=unlocking] :is(.guardian-target,.guardian-lanes){display:none}
.bonus-lid{transform-origin:130px 70px;transition:transform .6s ease}
.bank-journey[data-guardian=chest-open] .bonus-lid{transform:translateY(-35px) rotate(-13deg)}
.bank-journey[data-guardian=chest-open] .guardian-prize>strong{position:absolute;bottom:-12%;text-shadow:0 2px 4px #142638}
.bank-journey[data-guardian=chest-open] .guardian-chest{opacity:1!important}
.bank-journey[data-guardian] .vault-stage{translate:var(--dodge-x,0px) 0;transition:translate .2s ease}
.guardian-duel .guardian-target{translate:var(--dodge-x,0px) 0}
@media(max-height:430px){body #modal[data-screen=store] .bank-offer{grid-template-rows:18px minmax(20px,1fr) 32px}body #modal[data-screen=store] .bank-offer h4{font-size:18px}body #modal[data-screen=store] .bank-offer button.primary{font-size:12px;min-height:31px}}

/* Low touch screens: keep the hall visible above a shorter offer rail. */
@media(orientation:landscape) and (max-height:700px){body.touch #modal[data-screen=store] .bank-products{top:45%;bottom:9%;grid-auto-columns:200px;gap:12px}body.touch #modal[data-screen=store] .bank-offer{grid-template-columns:42% 1fr;grid-template-rows:16px minmax(24px,1fr) 30px;gap:2px;padding:4px}body.touch #modal[data-screen=store] .bank-offer-tag{grid-area:1/1/2/3;font-size:10px}body.touch #modal[data-screen=store] .bank-seal{grid-area:2/1}body.touch #modal[data-screen=store] .bank-offer h4{grid-area:2/2;align-self:start;font-size:16px}body.touch #modal[data-screen=store] .bank-offer p{grid-area:2/2;align-self:end;font-size:9px}body.touch #modal[data-screen=store] .bank-offer button.primary{grid-area:3/1/4/3;min-height:30px;font-size:11px;padding:3px}}
/* Compact shortcuts keep both the icon and the complete label inside each tile. */
@media (orientation:landscape) and (max-height:700px){
 body.touch #menu-studio[data-theme=stickers] .studio-shortcuts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
 body.touch #menu-studio[data-theme=stickers] .studio-shortcuts button{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;min-width:0;min-height:44px;padding:5px 2px;font-size:10px;line-height:12px;white-space:nowrap;rotate:0deg;transform:none}
 body.touch #menu-studio[data-theme=stickers] .studio-shortcuts button svg{width:18px;height:18px;flex:none}
 body.touch #modal[data-screen=store] .bank-products{top:auto;height:max(122px,46%);grid-auto-columns:210px}
 body.touch #modal[data-screen=store] .bank-offer{grid-template-columns:minmax(0,42%) minmax(0,1fr);grid-template-rows:18px minmax(22px,1fr) minmax(24px,1fr) 30px;gap:2px;padding:4px}
 body.touch #modal[data-screen=store] .bank-offer-tag{grid-area:1/1/2/3;font-size:10px;line-height:11px;min-width:0}
 body.touch #modal[data-screen=store] .bank-seal{grid-area:2/1/4/2;min-width:0}
 body.touch #modal[data-screen=store] .bank-offer h4{grid-area:2/2;align-self:center;min-width:0;font-size:16px;line-height:20px}
 body.touch #modal[data-screen=store] .bank-offer p{grid-area:3/2;align-self:center;min-width:0;margin:0;font-size:10px;line-height:11px;overflow-wrap:normal}
 body.touch #modal[data-screen=store] .bank-offer button.primary{grid-area:4/1/5/3;font-size:11px;line-height:13px;min-height:30px;padding:3px}
}

/* Mouse dragging supplements native touch scrolling. */
#modal[data-screen=store] .bank-products{cursor:grab;user-select:none;-webkit-user-select:none}
#modal[data-screen=store] .bank-products.is-dragging{scroll-snap-type:none;scroll-behavior:auto}
#modal[data-screen=store] .bank-products.is-dragging,#modal[data-screen=store] .bank-products.is-dragging *{cursor:grabbing!important}