#header-controls #autosave-notice{position:absolute;top:calc(100% + 6px);right:0;display:flex;align-items:stretch;width:max-content;max-width:min(310px,calc(100vw - 24px));border:1px solid #d5e1e7;border-radius:10px;background:rgba(255,255,255,.88);box-shadow:0 3px 12px #142d4518;z-index:3}
/* A triangle entirely outside the body avoids double-opacity overlap. */
#header-controls #autosave-notice::before{content:'';position:absolute;right:13px;top:-8px;width:14px;height:7px;background:rgba(255,255,255,.88);clip-path:polygon(50% 0,100% 100%,0 100%);pointer-events:none}
#header-controls #autosave-notice[hidden]{display:none}
#header-controls #autosave-hint{flex:1;min-width:0;width:auto;height:auto;min-height:40px;padding:6px 10px;border:0;border-radius:10px 0 0 10px;background:transparent;color:#28586c;font-size:12px;font-weight:600;line-height:1.5;text-align:left;touch-action:manipulation}
#header-controls #autosave-hint-close{position:relative;flex:0 0 40px;width:40px;height:auto;min-height:40px;padding:0;border:0;border-left:1px solid #e1e9ed;border-radius:0 10px 10px 0;background:transparent;color:#526c78;font-size:22px;line-height:1;touch-action:manipulation}
#header-controls #autosave-hint:hover,#header-controls #autosave-hint-close:hover{background:#eaf3f7}
#header-controls #autosave-hint-close:focus-visible{outline:3px solid #327b99;outline-offset:2px}
#player-autosave-panel{margin:0 0 18px;padding:14px;border:1px solid #d5e4e9;border-radius:12px;background:#f2f8fa;color:#274958;text-align:left}
.autosave-heading{margin:0 0 6px;font-size:15px}.autosave-note{font-size:12px;line-height:1.65;margin:4px 0;color:#52636d}.autosave-readonly,.autosave-empty{font-size:12px;margin:10px 0;color:#617079}.autosave-warning{font-size:12px;color:#9a4024;line-height:1.6}
.autosave-slot{display:block;width:100%;box-sizing:border-box;min-height:64px;padding:12px;margin-top:8px;border:1px solid #cadbe3;border-radius:9px;background:white;color:#223e50;text-align:left;font:inherit;cursor:pointer;touch-action:manipulation}
.autosave-slot:disabled{cursor:default;opacity:.65}.autosave-slot:not(:disabled):hover{background:#e8f4f8;border-color:#5f99ad}.autosave-slot:focus-visible,#header-controls #autosave-hint:focus-visible{outline:3px solid #327b99;outline-offset:3px}
.autosave-slot-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:4px 10px;font-size:13px}.autosave-date{font-size:11px;color:#61717c}.autosave-play,.autosave-preview{display:block;font-size:12px;line-height:1.5;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.autosave-play{color:#64747d}

#player-autosave-panel:empty{display:none}

/* Compact explanation, with clear emphasis on the most recent checkpoint. */
#player-autosave-panel{padding:12px;margin-bottom:14px}
.autosave-note{line-height:1.5;margin:3px 0;font-size:11px}
.autosave-slot{padding:10px 12px}
.autosave-slot:first-of-type{border-color:#74a5b8;background:#f4fbff}
.autosave-slot-header{font-size:13px}
.autosave-preview{color:#314d5c}
.autosave-slot:disabled{opacity:.8}

/* Reserve only the area occupied by the visible notice; artwork stays full-size. */
#start-screen{box-sizing:border-box;padding-top:var(--autosave-notice-inset,0px)}

/* Keep the latest save one tap away; older checkpoints scroll within a compact disclosure. */
.autosave-history{margin-top:8px}
.autosave-history-summary{display:list-item;padding:10px 4px;min-height:40px;box-sizing:border-box;font-size:12px;font-weight:600;line-height:1.5;color:#28586c;cursor:pointer;touch-action:manipulation}
.autosave-history-summary:hover{color:#173e52}
.autosave-history-summary:focus-visible,.autosave-history-list:focus-visible{outline:2px solid #327b99;outline-offset:2px;border-radius:4px}
.autosave-history-list{max-height:210px;max-height:min(210px,30dvh);overflow-y:auto;padding:4px 5px 6px;scrollbar-width:thin;scrollbar-color:#819da9 #e4edf1;scrollbar-gutter:stable}
.autosave-history-list::-webkit-scrollbar{width:5px}
.autosave-history-list::-webkit-scrollbar-track{background:#e4edf1;border-radius:5px}
.autosave-history-list::-webkit-scrollbar-thumb{background:#819da9;border-radius:5px}
.autosave-history-list .autosave-slot{border-color:#cadbe3;background:#fff}
.autosave-history-list .autosave-slot:first-child{margin-top:0}

.autosave-choices{border-top:1px solid #cadbe3;margin-top:12px;padding-top:4px}
.autosave-choice-preview{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;font-size:12px;line-height:1.6;margin-top:6px;color:#314d5c}
.autosave-choice-action{display:block;margin-top:6px;font-size:12px;font-weight:600;color:#28586c}
.autosave-choices .autosave-note{margin:0 4px 8px}