/* Generated pictures sit above live level, effect and cost fields. */
#overlay .panel.shopPanel{width:min(1160px,94vw);max-width:94vw;padding:clamp(18px,2vw,38px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-content:start;overflow:auto;background:#133343f5;border:2px solid #d4b174;border-radius:16px}
.shopPanel>.toprow,.shopPanel>.offerHint,.shopPanel>#shopFish{grid-column:1/-1}
.shopPanel>.toprow h2{margin:0;font-size:clamp(28px,2.5vw,50px)}
.shopPanel>.offerHint{font-size:clamp(14px,1.1vw,23px);color:#e9dbb8;margin:0}
#overlay .shopPanel .illustratedUpgrade{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden;text-align:left;border:2px solid #bd9557;border-radius:13px;background:#183e4b;color:#fff1ce;box-shadow:inset 0 0 0 3px #0b2635,0 5px 0 #081d28;min-width:0;opacity:1;transition:border-color .12s,transform .12s}
#overlay .shopPanel .illustratedUpgrade:hover:enabled{border-color:#ffe1a0;transform:translateY(-3px)}
#overlay .shopPanel .illustratedUpgrade:focus-visible{outline:3px solid #fff1c7;outline-offset:3px}
#overlay .shopPanel .illustratedUpgrade:disabled{cursor:not-allowed;border-color:#738487}
.upgradePicture{height:clamp(140px,20vh,230px);display:flex;justify-content:center;align-items:center;padding:12px;background:radial-gradient(ellipse at center,#547778 0,#234955 56%,#143341 100%);border-bottom:2px solid #bd9557}
.upgradePicture img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 5px 2px #071b2970)}
.upgradeCopy{display:flex;flex-direction:column;gap:8px;padding:clamp(12px,1.3vw,22px);flex:1;background:#163847}
#overlay .shopPanel .upgradeCopy strong{font:800 clamp(18px,1.5vw,30px)/1.15 Nunito,system-ui,sans-serif;color:#fff0c7;overflow-wrap:anywhere}
.upgradeLevel{font:800 clamp(12px,.95vw,19px)/1.2 Nunito,system-ui,sans-serif;color:#e8c17b}
.upgradeDescription{font:600 clamp(14px,1.1vw,22px)/1.4 Nunito,system-ui,sans-serif;color:#eff0df;min-height:2.8em}
.upgradeCost{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 16px;background:#d1ab66;color:#102e3b;border-top:1px solid #f4d496}
.upgradeCost>span{font:900 clamp(10px,.8vw,15px)/1 Nunito,system-ui,sans-serif;letter-spacing:.09em}
.upgradeCost>b{font:900 clamp(19px,1.7vw,31px)/1 Nunito,system-ui,sans-serif}
.illustratedUpgrade:disabled .upgradeCost{background:#667a7b;color:#fff0cf}
.shopPanel>#shopFish{justify-self:center;width:auto;min-width:160px;margin:0}
@media(orientation:landscape) and (max-height:650px){#overlay .panel.shopPanel{gap:9px;padding:12px;max-height:95dvh}.shopPanel>.toprow h2{font-size:23px}.shopPanel>.offerHint{font-size:11px}.upgradePicture{height:100px;padding:6px}.upgradeCopy{padding:9px;gap:4px}#overlay .shopPanel .upgradeCopy strong{font-size:15px}.upgradeDescription{font-size:12px;min-height:2.8em}.upgradeLevel{font-size:11px}.upgradeCost{padding:8px 10px}.upgradeCost>b{font-size:19px}.upgradeCost>span{font-size:9px}.shopPanel>#shopFish{min-height:34px;padding:7px 20px}}
@media(orientation:portrait){#overlay .panel.shopPanel{grid-template-columns:1fr;gap:14px}.upgradePicture{height:145px}.upgradeCopy{padding:14px}#overlay .shopPanel .upgradeCopy strong{font-size:22px}.upgradeDescription{font-size:16px;min-height:0}.upgradeLevel{font-size:13px}.upgradeCost>b{font-size:23px}}
#overlay .shopPanel .upgradeLevel{font:800 clamp(12px,.95vw,19px)/1.2 Nunito,system-ui,sans-serif;color:#e8c17b}
#overlay .shopPanel .upgradeCost b{color:#102e3b;font:900 clamp(19px,1.7vw,31px)/1 Nunito,system-ui,sans-serif}
#overlay .shopPanel .illustratedUpgrade:disabled .upgradeCost b{color:#fff0cf}