/* The replay leaves the middle of the screen clear for the actual defeat. */
body.playing.replaying #hud > *,
body.playing.replaying .topbar,
body.playing.replaying #toast { display:none !important; }
.replay-panel { position:fixed;inset:0;z-index:18;pointer-events:none;color:#16334a; }
.replay-heading { position:absolute;top:max(22px,env(safe-area-inset-top,0px));left:max(24px,env(safe-area-inset-left,0px));display:flex;align-items:center;gap:12px;max-width:calc(100vw - 48px);padding:12px 19px 13px 14px;border:2px solid #fffdf5;border-radius:21px;background:#fff9e9f5;box-shadow:0 5px 0 #2b556d24; }
.replay-mark { display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#ffcc51;color:#6e431e;font-size:39px;line-height:1;font-weight:900; }
.replay-speed { display:block;color:#bc5836;font-size:9px;font-weight:900;letter-spacing:1.7px; }
.replay-heading h2 { font-size:clamp(20px,2.6vw,30px);line-height:1.08;margin:5px 0 0;letter-spacing:-.7px;font-weight:1000; }
.replay-impulse { position:absolute;top:max(25px,env(safe-area-inset-top,0px));right:max(24px,env(safe-area-inset-right,0px));max-width:40vw;border:2px solid var(--impulse-color,#ffcf59);border-radius:25px;background:#fffdf5f5;padding:10px 16px;font-size:12px;font-weight:900;box-shadow:0 3px 0 #184e5d20; }
.replay-bottom { position:absolute;bottom:max(22px,env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);width:min(760px,calc(100vw - 48px));display:flex;align-items:center;gap:20px;padding:17px 18px 20px;border:2px solid #fffdf5;border-radius:22px;background:#fff9e9f5;box-shadow:0 5px 0 #264a5d25;overflow:hidden; }
.replay-copy { flex:1;min-width:0; }
.replay-copy p { margin:0;font-size:14px;line-height:1.35;font-weight:800; }
.replay-copy > span { display:block;margin-top:5px;font-size:11px;line-height:1.3;color:#587581; }
.replay-key-hint { display:block;margin-top:5px;font-size:10px;color:#69808a; }
.replay-actions { display:flex;align-items:center;gap:9px;flex-shrink:0;pointer-events:auto; }
.replay-skip-button { min-height:48px;padding:12px 18px;border:2px solid #fff0be;border-radius:14px;background:#ffce50;box-shadow:0 3px 0 #c88c27;font-size:13px;font-weight:900;touch-action:manipulation; }
.replay-skip-button:disabled { opacity:.65;cursor:default; }
.replay-menu-button { min-height:48px;padding:10px 12px;border-radius:12px;background:#e4eeeb;font-size:12px;font-weight:800;touch-action:manipulation; }
.replay-timeline { position:absolute;bottom:0;left:0;right:0;height:5px;background:#dce8e5; }
.replay-timeline i { display:block;width:100%;height:100%;background:#f47c4b;transform:scaleX(0);transform-origin:left; }
@media (pointer:coarse), (max-width:1024px) { .replay-key-hint{display:none;} }
@media (max-width:760px) { .replay-bottom{gap:12px;padding:12px 13px 16px;width:calc(100vw - 28px);} .replay-copy p{font-size:12px;} .replay-skip-button{padding:10px 12px;font-size:12px;} .replay-heading{top:max(14px,env(safe-area-inset-top,0px));left:max(14px,env(safe-area-inset-left,0px));padding:9px 14px 10px 10px;border-radius:17px;gap:8px;} .replay-mark{width:35px;height:35px;font-size:32px;} .replay-speed{font-size:8px;letter-spacing:1px;} .replay-heading h2{font-size:22px;} .replay-impulse{top:18px;right:14px;font-size:10px;padding:8px 11px;max-width:35vw;} }
@media (max-width:550px) and (orientation:portrait) { .replay-bottom{flex-direction:column;align-items:stretch;bottom:max(20px,env(safe-area-inset-bottom,0px));gap:12px;padding:15px 15px 19px;} .replay-actions{justify-content:space-between;} .replay-skip-button{flex:1;font-size:13px;} .replay-copy p{font-size:13px;} .replay-impulse{top:97px;left:15px;right:auto;max-width:calc(100vw - 30px);} }
@media (max-height:440px) and (orientation:landscape) { .replay-heading{top:max(12px,env(safe-area-inset-top,0px));left:14px;padding:8px 12px;border-radius:15px;} .replay-heading h2{font-size:20px;} .replay-mark{width:32px;height:32px;font-size:29px;} .replay-bottom{bottom:max(12px,env(safe-area-inset-bottom,0px));padding:10px 12px 13px;border-radius:17px;} .replay-copy p{font-size:12px;} .replay-copy>span{font-size:10px;} .replay-impulse{top:15px;font-size:10px;} }