.saved-games-list{display:grid;gap:10px}
.saved-empty{border:1px dashed var(--color-border-subtle,#b8c6a7);background:var(--color-surface-raised,#e9eedc);border-radius:24px;padding:45px 25px;text-align:center}
.saved-empty h2{margin:0 0 12px;font-size:25px}
.saved-empty p{color:var(--muted);line-height:1.6;margin:0 0 24px}
.saved-status{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.saved-network-info{font-size:12px;color:var(--muted);margin:-8px 0 14px}


/* Both live continuation and archived sessions use the same structure. */
#app .session-card{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"heading actions" "players players" "footer footer";align-items:start;gap:6px 12px;border:1px solid var(--line);border-radius:22px;background:var(--color-surface-raised,#e6e9dc);padding:12px;box-shadow:var(--shadow);font-size:14px;min-width:0}
#app .session-card:has(>.session-card-room){grid-template-areas:"heading actions" "room actions" "players players" "footer footer"}
.resume-banner{margin:0 0 24px}
.session-card-heading{grid-area:heading;display:flex;align-items:center;gap:8px;min-width:0;align-self:center}
#app .session-card-title{margin:0;font-size:16px;line-height:1.3;letter-spacing:0;min-width:0;overflow-wrap:anywhere}
.session-card-title strong{font-weight:750;position:relative;top:.0625em}
.session-card-actions{grid-area:actions;align-self:center;display:flex;align-items:center;gap:8px}
#app .session-card>.resume-participants{grid-area:players;margin:0}
.session-card-footer{grid-area:footer;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"progress bottom";align-items:center;gap:6px 12px;min-width:0}
.session-card-footer:has(>.session-card-details){grid-template-areas:"progress bottom" "details bottom"}
.session-card-progress{grid-area:progress;color:var(--muted);line-height:1.45;overflow-wrap:anywhere;min-width:0}
.session-card-room{grid-area:room;display:block;line-height:1.45;overflow-wrap:anywhere;min-width:0;color:var(--ink);font-weight:700}
.session-card-stats{display:block}
.session-card-details{grid-area:details;min-width:0;align-self:center}
.session-card-details p{color:var(--muted);font-size:12px;line-height:1.45;margin:0;overflow-wrap:anywhere}
.session-card-bottom-action{grid-area:bottom;justify-self:end;align-self:center}
.session-card .icon-btn{flex:none;width:44px;min-width:44px;height:44px;padding:0;border-radius:14px}
.session-card .saved-continue{background:var(--green);border-color:var(--green);color:var(--color-action-on-primary,#fffdf4)}
.session-card .saved-status{display:inline-flex;flex:none}
#app .session-card .saved-status .pill{display:inline-flex;align-items:center;gap:4px;justify-content:center;min-width:46px;min-height:0;margin:0;padding:3px 6px;line-height:1;border:1px solid color-mix(in srgb,var(--green) 42%,transparent);border-radius:999px;background:color-mix(in srgb,var(--color-surface-tile-green,#e2ead7) 76%,var(--green));color:var(--ink)}
#app .session-card:not([data-card-mode=hotseat]) .saved-status .pill{background:color-mix(in srgb,var(--color-surface-tile-blue,#dbe9e8) 76%,#527b8d);border-color:#7798a5}
.session-card .saved-state-icon{display:inline-flex;width:14px;height:14px;align-items:center;justify-content:center}
.session-card .saved-state-icon svg[data-ui-icon]{width:14px;height:14px}
.session-card .connection-light{margin:0}
.transport-badge{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;flex:none}
.transport-badge svg[data-ui-icon]{width:14px;height:14px}
:where(:root[data-ui-compact="true"]) #app .session-card{gap:6px 8px}:where(:root[data-ui-compact="true"]) .session-card-actions{gap:4px}:where(:root[data-ui-compact="true"]) .session-card-heading{gap:6px}
.session-card-bottom-action:has(button){display:flex;align-items:center;justify-content:flex-end;gap:8px}
.save-transfer-modal .modal-foot{display:flex;gap:12px}.save-transfer-modal [data-save-error]:empty{display:none}

#app .saved-filter-bar{margin:0;gap:8px;align-items:center;flex-wrap:wrap}
.saved-clear-options{display:flex;gap:12px;padding:10px 0}.saved-clear-options .btn{flex:1;min-width:0;justify-content:center}

/* Short scope labels keep both destructive choices readable on narrow phones. */
#modal-root .saved-clear-modal{padding:12px}
#modal-root .saved-clear-modal>.modal-head{padding:6px 4px 10px;gap:10px}
#modal-root .saved-clear-modal>.modal-body{padding:4px}
.saved-clear-options{gap:8px;padding:6px 0}
#modal-root .saved-clear-options .btn{padding:10px 8px;gap:6px;font-size:14px;white-space:nowrap}
#modal-root .saved-clear-options .btn svg{width:20px;height:20px;flex:none}
:where(:root[data-ui-compact="true"]) #modal-root .saved-clear-modal .modal-head h2{font-size:20px}