.save-overlay{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:14px;background:#07110fe8;backdrop-filter:blur(7px);touch-action:pan-y}.saves-card{display:flex;flex-direction:column;gap:10px;width:min(100%,600px);max-height:100%;padding:20px;border:1px solid #60766c;border-radius:15px;background:#182522;box-shadow:0 12px 45px #0007;min-height:0;overflow:hidden}.saves-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.saves-heading h2{margin:0;font-size:21px;font-weight:550}.saves-heading p{font-size:11px;color:#abc3b5;margin:5px 0 0;overflow-wrap:anywhere}.saves-heading>button{height:36px;width:36px;flex-shrink:0;min-height:36px;padding:0;font-size:25px;border:0;background:transparent}.saves-modes{display:flex;gap:4px;padding:3px;border:1px solid #3a5146;border-radius:9px;align-self:flex-start}.saves-modes button{display:flex;align-items:center;gap:7px;min-height:36px;padding:7px 12px;background:transparent;border:1px solid transparent;font-size:11px}.saves-modes button svg{width:15px;height:15px}.saves-modes button[aria-pressed=true]{background:#304a3c;border-color:#698c76;color:#daf1e1}.saves-message{margin:0;color:#bdd0c3;font-size:11px;line-height:1.5;flex-shrink:0}.saves-message.error{color:#ffb6a1}.saves-list{display:grid;gap:7px;overflow:auto;min-height:0;padding:2px 4px 2px 0;overscroll-behavior:contain;touch-action:pan-y}.save-slot{display:grid;grid-template-columns:82px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px;border:1px dashed #435d4e;border-radius:9px;background:#15221c}.save-slot.occupied{border-style:solid;background:#23352b}.save-preview{width:82px;height:61px;display:grid;place-items:center;border:1px solid #3e5748;border-radius:5px;background:#0b1711;overflow:hidden;font-size:23px;font-weight:400;color:#6f8d79;font-variant-numeric:tabular-nums}.save-preview img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}.save-slot-info{display:grid;gap:4px;min-width:0}.save-slot-info strong{font-size:12px;font-weight:550}.save-slot-info>span{font-size:11px;color:#c0d2c5}.save-slot-info small{font-size:9px;color:#8fab97;line-height:1.35}.save-slot>button{font-size:10px;padding:8px 10px;min-height:40px;background:#314c3c;border-color:#607e69;color:#d9eedf;white-space:nowrap}.saves-note{display:flex;align-items:flex-start;gap:7px;margin:1px 0 0;color:#8fa99a;font-size:9px;line-height:1.5;flex-shrink:0}.saves-note svg{width:13px;height:13px;flex-shrink:0}.saves-confirm{flex-shrink:0;padding:11px;border:1px solid #b28a64;border-radius:8px;background:#453729}.saves-confirm p{font-size:11px;line-height:1.6;margin:0 0 9px}.saves-confirm>div{display:flex;justify-content:flex-end;gap:8px}.saves-confirm button{font-size:11px;min-height:40px}.save-feedback{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:40;max-width:min(90%,460px);width:max-content;pointer-events:none;padding:10px 16px;border:1px solid #a3d4b5;border-radius:10px;background:#203e2ff2;box-shadow:0 3px 16px #0008;color:#e0f6e7;font-size:12px;line-height:1.5;text-align:center}.save-feedback.error{border-color:#dfa78d;background:#4b2923f5;color:#ffddcb}#save.saved{color:#c0f0cf}.touch-mode #save.saved:before{content:'✓'}
.touch-mode .save-overlay{padding:10px}.touch-mode .saves-card{gap:9px;padding:14px}.touch-mode .saves-heading h2{font-size:19px}.touch-mode .save-slot{grid-template-columns:64px minmax(0,1fr) auto;gap:8px;padding:7px}.touch-mode .save-preview{width:64px;height:48px;font-size:21px}.touch-mode .save-slot>button{padding:7px;font-size:10px;min-height:44px}.touch-mode .save-slot-info>span{font-size:10px}.touch-mode .save-slot-info small{font-size:8px}.touch-mode .landscape .saves-card{padding:12px 15px;gap:7px;width:min(100%,620px)}.touch-mode .landscape .saves-heading h2{font-size:17px}.touch-mode .landscape .saves-heading p{font-size:10px;margin-top:2px}.touch-mode .landscape .saves-modes button{min-height:32px;padding:5px 10px}.touch-mode .landscape .saves-message{font-size:10px}.touch-mode .landscape .save-slot{padding:6px}.touch-mode .landscape .saves-note{font-size:8px}.touch-mode .landscape .save-feedback{top:10px;font-size:11px}
@media(max-width:360px){.touch-mode .save-slot{grid-template-columns:48px minmax(0,1fr) auto;gap:6px}.touch-mode .save-preview{width:48px;height:42px}.touch-mode .save-slot>button{font-size:9px;padding:6px}.touch-mode .saves-card{padding:11px}.touch-mode .saves-note{font-size:8px}}
