/* Rekam ulang K.O. dan ekspor tangkapan layar (record.js, RENCANA 7.3 dan 7.4): tombol kamera di HUD, indikator REC, baris di menu jeda, toolbar di layar hasil, dialog Tonton ulang.
   Tinggi minimum yang didukung tetap 520 px: toolbar layar hasil melayang (absolute) di pojok kanan atas kolom tengah dan tidak menambah tinggi tata letak; dialog bisa digulir. */

.rec-ic{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---- HUD: tombol kamera memakai gaya .match-actions button (style.css); REC menempel di bawah barisnya tanpa mengubah tata letak ---- */
#rec-shot.rec-done{border-color:#8dffa8;background:#1f5a45}
@media(max-width:620px){#rec-shot{display:none}} /* kolom tengah header terlalu sempit untuk tiga tombol; F9 dan tombol di menu jeda tetap ada */
.rec-badge{position:absolute;top:calc(100% + 4px);left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:5px;padding:0 7px 0 6px;font:700 11px/15px Rajdhani,Arial,sans-serif;letter-spacing:1.6px;color:#ffd9d3;background:#1a0c0fcc;border:1px solid #ff6a5a88;pointer-events:none;white-space:nowrap}
.rec-badge[hidden]{display:none}
.rec-badge i{width:7px;height:7px;border-radius:50%;background:#ff4a3d;box-shadow:0 0 6px #ff4a3d;animation:rec-blink 1.4s ease-in-out infinite}
@keyframes rec-blink{50%{opacity:.3}}

/* ---- Menu jeda ---- */
.rec-btns{display:flex;gap:8px;margin-top:12px}
.rec-btns .rec-b{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:0;border:1px solid #8da8b153;background:#274352;padding:8px;font-size:15px;font-weight:700;letter-spacing:.4px}
.rec-btns .rec-b:hover{background:#2f5365}
#pause-panel .rec-btns{margin-top:10px}

/* ---- Layar hasil: toolbar di pojok kanan atas .rs-main (di atas kepala hasil, di pita kosong tempat konten diratakan ke tengah) ---- */
.rs-rec{position:absolute;top:0;right:0;z-index:3;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px;max-width:100%;animation:rs-up .5s 1s both}
.rs-rec .rec-b{display:inline-flex;align-items:center;gap:6px;margin:0;padding:clamp(4px,.9vh,7px) clamp(7px,1vw,11px);font:700 clamp(10px,1.3vh + 2px,13px)/1 Rajdhani,Arial,sans-serif;letter-spacing:1.5px;color:#cbddd4;background:#0b1c26d9;border:1px solid #8ba89d66;border-radius:0;cursor:pointer;white-space:nowrap}
.rs-rec .rec-b:hover:not([disabled]),.rs-rec .rec-b:focus-visible{background:#24505e;color:#fff}
.rs-rec .rec-b[disabled]{opacity:.5;cursor:default}
.rs-rec .rec-b[aria-busy=true] .rec-ic{animation:rec-pulse 1s ease-in-out infinite}
@keyframes rec-pulse{50%{opacity:.35}}
#front-menu .rs-rec .rec-b:focus-visible{outline-offset:-3px}
@media(max-width:700px),(max-height:420px){.rs-rec{gap:4px}.rs-rec .rec-b{padding:4px 7px;gap:5px;letter-spacing:.8px}}
@media(max-width:620px){.rs-rec .t{display:none}.rs-rec .rec-b{padding:6px 8px}} /* hanya ikon; nama tombol tetap ada lewat aria-label dan title */
@media(pointer:coarse){.rs-rec .rec-b{min-height:32px}}

/* ---- Umpan balik: toast kecil di bawah tengah dan kilat kamera ---- */
.rec-toast{position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:120;max-width:min(92vw,520px);padding:8px 16px;background:#101923ee;border:1px solid #e8b84a;color:#f6eedb;font:700 16px/1.25 Rajdhani,Arial,sans-serif;letter-spacing:.05em;text-align:center;pointer-events:none;animation:rec-toast .2s ease-out both}
.rec-toast.bad{border-color:#ff8a7a;color:#ffd9d3}
@keyframes rec-toast{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translateX(-50%)}}
.rec-flash{position:fixed;inset:0;z-index:119;background:#fff;pointer-events:none;animation:rec-flash .3s ease-out both}
@keyframes rec-flash{from{opacity:.75}to{opacity:0}}

/* ---- Tonton ulang ---- */
#rec-replay{width:min(94vw,860px);max-width:calc(100% - 16px);padding:10px 14px 12px;overflow:auto}
#rec-replay .dialog-kicker{font-size:11px}
#rec-replay h2{font-size:22px;margin:2px 0 8px;letter-spacing:1px}
#rec-replay video{display:block;width:100%;height:auto;max-height:calc(100vh - 160px);background:#000;object-fit:contain;cursor:pointer}
.rp-bar{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.rp-bar button{flex:1 1 88px;border:1px solid #8da8b153;background:#274352;padding:8px;font-size:15px;font-weight:700;letter-spacing:.4px}
.rp-bar button:hover{background:#2f5365}
.rp-bar button[data-rp=close]{border-color:transparent;background:var(--gold);color:#132b37}
.rp-bar button[data-rp=close]:hover{background:#fae0b4}
@media(max-height:480px){#rec-replay{padding:8px 12px}#rec-replay h2{font-size:18px;margin:0 0 6px}#rec-replay .dialog-kicker{display:none}#rec-replay video{max-height:calc(100vh - 112px)}.rp-bar{margin-top:6px}.rp-bar button{padding:6px;font-size:14px}}

@media(prefers-reduced-motion:reduce){.rec-badge i,.rec-toast,.rs-rec .rec-b .rec-ic{animation:none!important}.rec-flash{display:none}}
html.acc-calm .rec-badge i,html.acc-calm .rec-toast,html.acc-calm .rs-rec .rec-b .rec-ic{animation:none!important}
html.acc-calm .rec-flash{display:none}