/* Escolha da entrada (templates/index.html + static/js/start_choice.js) */
.start-dialog {
    margin: auto;   /* o reset global tira a centralização do <dialog> */
    width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto;
    background: #282a36; color: #f8f8f2; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 20px;
    padding: 22px 20px 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.start-dialog::backdrop { background: rgba(10, 10, 20, 0.65); backdrop-filter: blur(3px); }
.start-dialog[open] { animation: start-in 0.22s ease-out; }
@keyframes start-in { from { opacity: 0; transform: translateY(12px); } }
.start-dialog h2 { margin: 0 0 16px; font-size: 1.2rem; text-align: center; line-height: 1.35; }

.start-options { display: flex; flex-direction: column; gap: 10px; }
.start-opt {
    display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 12px 14px;
    border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.05);
    color: inherit; text-decoration: none; text-align: left; font: inherit; cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.start-opt[hidden] { display: none; }
.start-opt:hover, .start-opt:focus-visible { background: rgba(241, 250, 140, 0.08); border-color: #f1fa8c; outline: none; }
.start-opt:active { transform: scale(0.98); }
.start-ico { flex: none; width: 44px; height: 44px; display: grid; place-items: center; font-size: 1.6rem;
    border-radius: 12px; background: rgba(255, 255, 255, 0.06); }
.start-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.start-txt b { font-size: 1rem; }
.start-txt small { color: #a4a8c0; font-size: 0.8rem; }
.start-txt .start-title { color: #f8f8f2; opacity: 0.85; overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.start-thumb {
    position: relative; flex: none; width: 88px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden;
    display: grid; place-items: center; font-size: 1.4rem;
    background: linear-gradient(135deg, rgba(189, 147, 249, 0.25), rgba(139, 233, 253, 0.12));
}
.start-thumb img:not(.fx) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.start-bar { display: block; height: 4px; margin: 4px 0 1px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.start-bar > span { display: block; height: 100%; background: #ffb86c; }

.start-skip { display: block; margin: 8px auto 0; padding: 10px 16px; background: none; border: 0;
    color: #8a8fa8; font: inherit; font-size: 0.85rem; cursor: pointer; }
.start-skip:hover { color: #f8f8f2; }

/* Celular: folha que sobe de baixo, com os botões ao alcance do polegar */
@media (max-width: 600px) {
    .start-dialog {
        margin: auto 0 0; width: 100%; max-width: none; border-radius: 20px 20px 0 0;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
    @keyframes start-in { from { transform: translateY(100%); } }
}