.mental-reels { border:0; padding:20px; margin:auto; max-width:none; max-height:none; width:100%; height:100%; height:100dvh; background:transparent; color:#fff; box-sizing:border-box; overflow:hidden; }
.mental-reels[open] { display:flex; align-items:center; justify-content:center; }
.mental-reels::backdrop { background:rgba(4,10,19,.91); backdrop-filter:blur(7px); }
.mental-reels *, .mental-reels *::before { box-sizing:border-box; }
.mental-reels-shell { width:min(560px,100%); height:100%; max-height:1100px; display:flex; flex-direction:column; gap:12px; min-height:0; font-family:Arial,sans-serif; }
.mental-reels-header { display:flex; align-items:center; gap:12px; flex:none; min-width:0; }
.mental-reels-count { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.mental-reels-header::before { content:""; width:44px; flex:none; }
.mental-reels button { font-family:inherit; cursor:pointer; color:#fff; border:0; }
.mental-reels button:focus-visible { outline:3px solid #f58235; outline-offset:2px; }
.mental-reels-pages { display:flex; gap:0; overflow-x:auto; flex:1; max-width:252px; margin:0 auto; position:relative; scrollbar-width:none; padding:2px 4px; }
.mental-reels-pages::-webkit-scrollbar { display:none; }
.mental-reels-pages button { flex:0 0 28px; height:40px; display:grid; place-items:center; padding:0; background:transparent; border-radius:20px; }
.mental-reels-pages button::before { content:""; width:6px; height:6px; border-radius:8px; background:#ffffff65; transition:width .18s ease,background .18s ease; }
.mental-reels-pages button:hover::before { background:#fff; }
.mental-reels-pages button[aria-current]::before { width:22px; background:#f47840; box-shadow:0 0 12px #f0541a40; }
@media(prefers-reduced-motion:reduce) { .mental-reels-pages button::before { transition:none; } }
.mental-reels-close { width:44px; height:44px; flex:none; border-radius:50%; background:#ffffff1f; font-size:32px; line-height:1; }
.mental-reels-stage { flex:1; min-height:0; position:relative; display:flex; justify-content:center; overflow:hidden; border-radius:14px; background:#080808; box-shadow:0 12px 60px #0006; }
.mental-reels-video { display:block; width:100%; height:100%; object-fit:contain; min-height:0; }
.mental-reels-retry { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border-radius:30px; padding:16px 22px; background:#173968ee; white-space:nowrap; }
.mental-reels-retry[hidden] { display:none; }
.mental-reels-status { position:absolute; bottom:72px; left:20px; right:20px; text-align:center; font-size:13px; text-shadow:0 1px 4px #000; pointer-events:none; }
.mental-reels-status:not(:empty) { padding:10px; background:#0009; border-radius:8px; }
.mental-reels-footer { display:flex; align-items:center; justify-content:center; gap:20px; flex:none; color:#c7cbd1; font-size:12px; }
.mental-reels-footer button { width:44px; height:40px; font-size:24px; background:#ffffff1f; border-radius:10px; }
.mental-reels-footer button:disabled { opacity:.25; cursor:default; }
@media(max-width:600px) { .mental-reels { padding: max(8px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom)); } .mental-reels-shell { gap:8px; } .mental-reels-header { gap:6px; } .mental-reels-stage { border-radius:10px; } }