:root {
            --bg-primary: #46178f;
            --bg-secondary: #33106b;
            --color-a: #e21b3c;
            --color-b: #1368ce;
            --color-c: #d89e00;
            --color-d: #26890c;
            --text-light: #ffffff;
            --text-dark: #333333;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Montserrat', sans-serif; }

        body {
            background-color: var(--bg-primary);
            background-image: radial-gradient(circle at top right, #5e23b5, transparent 50%),
                              radial-gradient(circle at bottom left, var(--bg-secondary), transparent 50%);
            color: var(--text-light);
            display: flex; flex-direction: column; min-height: 100vh;
            align-items: center; justify-content: center;
        }

        .hidden { display: none !important; }

        .screen {
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            width: 100%; max-width: 800px; padding: 20px; flex-grow: 1; text-align: center;
            animation: fadeIn 0.4s ease-out;
        }

        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        .logo { font-size: 3rem; font-weight: 900; margin-bottom: 5px; text-shadow: 2px 2px 0 rgba(0,0,0,0.2); }
        .logo span { color: var(--color-c); }
        .subtitle { font-size: 1.1rem; font-weight: 600; margin-bottom: 40px; opacity: 0.9; }

        .input-group {
            background: rgba(255, 255, 255, 0.1); padding: 30px; border-radius: 16px;
            backdrop-filter: blur(10px); width: 100%; max-width: 400px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.1);
        }

        input {
            width: 100%; padding: 15px 20px; margin-bottom: 15px; border: none; border-radius: 8px;
            font-size: 1.1rem; font-weight: 600; text-align: center; color: var(--text-dark); outline: none;
        }
        input:focus { box-shadow: 0 0 0 3px var(--color-c); }

        .btn {
            width: 100%; padding: 15px 20px; border: none; border-radius: 8px; font-size: 1.2rem;
            font-weight: 800; color: var(--text-light); background-color: var(--text-dark);
            cursor: pointer; transition: transform 0.2s; box-shadow: 0 4px 0 rgba(0,0,0,0.4);
        }
        .btn:hover { background-color: #222; transform: translateY(-2px); }
        .btn:active { transform: translateY(2px); box-shadow: none; }

        .question-container {
            background: white; color: var(--text-dark); width: 100%; padding: 25px 20px;
            border-radius: 12px; font-size: 1.5rem; font-weight: 800; box-shadow: 0 6px 16px rgba(0,0,0,0.15);
            margin-bottom: 30px; line-height: 1.4;
        }

        .hud { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 30px; padding: 0 5px; gap: 5px; }
        
        .timer-circle {
            width: 60px; height: 60px; border-radius: 50%; background-color: var(--bg-secondary);
            border: 4px solid white; display: flex; align-items: center; justify-content: center;
            font-size: 1.5rem; font-weight: 900; box-shadow: 0 4px 10px rgba(0,0,0,0.3);
            flex-shrink: 0;
        }
        .timer-circle.danger { background-color: var(--color-a); animation: pulse 1s infinite; }
        @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }

        .time-bar-container { width: 100%; height: 12px; background: rgba(255,255,255,0.2); border-radius: 6px; overflow: hidden; margin-bottom: 20px; box-shadow: inset 0 2px 4px rgba(0,0,0,0.2); }
        .time-bar { height: 100%; width: 100%; background: var(--color-d); transition: width 1s linear, background-color 0.5s; }

        .score-display, .question-counter { 
            background: rgba(0,0,0,0.3); padding: 8px 10px; border-radius: 20px; 
            font-size: 0.95rem; font-weight: 700; text-align: center;
            flex-grow: 1; margin: 0 2px; line-height: 1.2;
        }
        .score-display span, .question-counter span { color: var(--color-c); }

        @media (min-width: 400px) {
            .score-display, .question-counter { font-size: 1.1rem; padding: 10px 15px; }
        }

        @media (min-width: 600px) {
            .hud { padding: 0 10px; gap: 15px; }
            .timer-circle { width: 80px; height: 80px; border: 5px solid white; font-size: 2rem; }
            .score-display, .question-counter { padding: 12px 20px; border-radius: 30px; font-size: 1.2rem; flex-grow: 0; margin: 0; }
        }

        .answers-grid { display: grid; grid-template-columns: 1fr; gap: 15px; width: 100%; }
        @media (min-width: 600px) { .answers-grid { grid-template-columns: 1fr 1fr; } }

        .answer-btn {
            border: none; border-radius: 8px; padding: 20px; font-size: 1.1rem; font-weight: 700; color: white;
            display: flex; align-items: center; cursor: pointer; text-align: left; box-shadow: 0 5px 0 rgba(0,0,0,0.2);
            min-height: 100px;
        }
        .answer-btn:active { transform: translateY(5px); box-shadow: none; }
        .answer-btn:disabled { cursor: not-allowed; filter: brightness(0.7); }

        .shape { font-size: 1.8rem; margin-right: 15px; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: rgba(0,0,0,0.15); border-radius: 50%; }
        .bg-a { background-color: var(--color-a); } .bg-b { background-color: var(--color-b); }
        .bg-c { background-color: var(--color-c); } .bg-d { background-color: var(--color-d); }

        .result-banner { font-size: 2.5rem; font-weight: 900; margin-bottom: 10px; text-transform: uppercase; }
        .points-earned { font-size: 1.5rem; font-weight: 700; margin-bottom: 30px; background: rgba(0,0,0,0.2); padding: 10px 20px; border-radius: 20px; display: inline-block; }
        .rationale-box { background: white; color: var(--text-dark); padding: 25px; border-radius: 12px; width: 100%; text-align: left; font-size: 1.1rem; line-height: 1.6; margin-bottom: 30px; }
        .rationale-box h3 { color: var(--bg-primary); margin-bottom: 10px; font-size: 1.2rem; }

        .ranking-list { width: 100%; max-width: 500px; background: rgba(255,255,255,0.1); border-radius: 12px; padding: 20px; text-align: left; margin: 20px 0; }
        .ranking-item { display: flex; justify-content: space-between; padding: 10px; border-bottom: 1px solid rgba(255,255,255,0.1); font-size: 1.2rem; font-weight: 600; }
        .ranking-item:last-child { border: none; }

        .prof-banner { display: flex; align-items: center; justify-content: center; margin-bottom: 20px; background: rgba(0,0,0,0.2); padding: 10px 20px; border-radius: 30px; gap: 15px; width: 100%; }
        .prof-avatar { width: 45px; height: 45px; border-radius: 50%; object-fit: cover; border: 2px solid white; }
        .prof-info { text-align: left; font-size: 0.9rem; line-height: 1.3; }
        .prof-info strong { display: block; color: var(--color-c); font-size: 1.1rem; }
/* Refinamento das telas do aluno: geometria estável, leitura e contraste. */
:root { --color-a: #bc173c; --color-b: #1763b8; --color-c: #ffcf3b; --color-d: #2e7828; }
body { min-height: 100svh; }
.screen { max-width: 1000px; padding: 30px 24px; }
:focus-visible { outline: 3px solid #ffdf70; outline-offset: 5px; }
.btn:disabled { cursor: wait; opacity: .75; transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#login-screen { max-width: 640px; padding-top: 25px; padding-bottom: 25px; }
#login-screen > img { width:min(240px,64vw);filter:drop-shadow(0 8px 13px #18042c55); }
#login-screen .subtitle { display:inline-block;font-size: .75rem; font-weight:800; margin-bottom: 22px; padding:8px 14px;border-radius:20px;background:#fff3b8;color:#4d400c;box-shadow:0 4px 0 #d9ae25;opacity:1; }
.input-group { position:relative;z-index:0;max-width: 480px; padding: 30px; text-align: left; background: linear-gradient(155deg,#fffdf0 0%,#fff 47%,#f0fbfc 100%); color: #293b36; border-radius: 28px; border: 4px solid #ffffff; box-shadow: 0 9px 0 #ffca35,0 20px 55px #18042c48; overflow:visible; }
.input-group::before,.input-group::after { content:""; position:absolute; z-index:-1; border-radius:50%; }
.input-group::before { width:76px;height:76px;left:-31px;top:82px;background:#48c4d7;box-shadow:0 6px 0 #239aaa; }
.input-group::after { width:58px;height:58px;right:-23px;bottom:73px;background:#ffca35;box-shadow:0 6px 0 #dca817; }
.entry-heading { display:grid; grid-template-columns:48px minmax(0,1fr) 40px; align-items:center; gap:13px; margin-bottom:12px; }
.entry-symbol { display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:#48c4d7;color:#fff;font-size:1.75rem;font-weight:900;transform:rotate(-7deg);box-shadow:0 5px 0 #2498a9; }
.entry-symbol--check { width:40px;height:40px;border-radius:50%;background:#a4d92e;color:#31500c;font-size:1.35rem;transform:rotate(7deg);box-shadow:0 4px 0 #7dac18; }
.entry-kicker { display:block;color:#55716b;font-size:.57rem;letter-spacing:.13em;font-weight:900;margin-bottom:5px; }
.input-group h1 { font-size: clamp(1.65rem,5vw,2.15rem); line-height:1.1; letter-spacing: -.055em; margin:0;color:#243b36; }
.input-group h1 strong { color:#6c3ab1; }
.entry-hint { color: #5d706c; font-size: .78rem; font-weight:600; line-height: 1.7; margin: 0 0 20px 61px; }
.input-group label { display:flex;align-items:center;gap:8px;font-size: .74rem; font-weight: 800; margin: 16px 0 8px; color:#344b46; }
.field-icon { display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:#fff0a8;color:#70570a;font-size:.8rem;font-weight:900; }
.input-group input { height:59px;font-size: .92rem; font-weight: 700; border: 2px solid #ead783; background: #fff9da; text-align: left; margin: 0; min-width: 0; border-radius:14px;box-shadow:inset 0 2px 0 #fff; }
.input-group #name-input { border-color:#9edce3;background:#ecfafc; }
.input-group label[for="name-input"]::before { content:"☺";display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:#cceff3;color:#176b74;font-size:.85rem; }
#pin-input { letter-spacing: .12em; }
#name-input { font-size: .8rem; }
.input-group .btn, .ready-card .btn { margin-top: 23px; background: linear-gradient(90deg,#a4d92e,#c5ea34); color: #293c12; box-shadow: 0 6px 0 #72a416; font-size: 1rem; border-radius: 14px; min-height:57px; }
.input-group .btn:hover { background:linear-gradient(90deg,#b6e63c,#d5f04f); }
.login-message { color: #fff; background: #ffffff16; border-radius: 10px; max-width: 440px; padding: 12px 16px; font-size: .82rem; line-height: 1.6; margin-top: 15px; }
.login-message:empty { display: none; }
.intro-replay { display: inline-flex; align-items: center; gap: 9px; margin: 19px 0 0; padding: 10px 15px; border: 1px solid #ffffff4a; border-radius: 30px; background: #ffffff17; color: #fff; font: inherit; font-size: .76rem; font-weight: 700; cursor: pointer; }
.intro-replay:hover { background: #ffffff25; }
.intro-dialog { width: min(1040px,calc(100% - 28px)); max-height: calc(100svh - 28px); padding: 0; border: 1px solid #ffffff2e; border-radius: 22px; color: #fff; background: #121816; box-shadow: 0 30px 90px #07020bbb; overflow: auto; }
.intro-dialog::backdrop { background: #160528e8; backdrop-filter: blur(8px); }
.intro-topbar,.intro-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 20px; }
.intro-topbar > div { min-width: 0; }
.intro-topbar strong,.intro-topbar span { display: block; }
.intro-topbar strong { font-size: .95rem; }
.intro-topbar span,.intro-footer > span { margin-top: 4px; color: #bdcac4; font-size: .68rem; line-height: 1.5; }
.intro-close,.intro-enter { flex-shrink: 0; border: 0; border-radius: 10px; font: inherit; font-size: .75rem; font-weight: 800; cursor: pointer; }
.intro-close { padding: 9px 12px; background: #ffffff16; color: #fff; }
.intro-close span { display: inline; margin: 0 0 0 5px; font-size: 1.1rem; color: inherit; }
.intro-enter { padding: 12px 17px; background: #a4d92e; color: #263b10; box-shadow: 0 3px 0 #729f10; }
.intro-dialog video { display: block; width: 100%; max-height: calc(100svh - 150px); aspect-ratio: 16/9; object-fit: contain; background: #080b0a; }
body:has(.intro-dialog[open]) { overflow: hidden; }
.ready-logo { width: 165px; height: auto; margin-bottom: 25px; }
.ready-card { max-width: 600px; width: 100%; padding: 35px; background: #fffef6; color: #2b3e35; border: 1px solid #e2e9ce; border-radius: 24px; }
.game-eyebrow { display: block; font-size: .62rem; font-weight: 800; letter-spacing: .13em; color: #647452; }
.ready-card h1 { font-size: clamp(1.8rem,4vw,2.4rem); letter-spacing: -.055em; margin: 12px 0; }
#ready-name { font-size: .88rem; line-height: 1.7; overflow-wrap: anywhere; }
.ready-facts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 25px 0; }
.ready-facts > div { padding: 17px 8px; background: #fff0b4; border-radius: 14px; }
.ready-facts > div:nth-child(2) { background: #dff5f8; }
.ready-facts > div:nth-child(3) { background: #eaf4d4; }
.ready-facts strong, .ready-facts span { display: block; }
.ready-facts strong { font-size: 1.5rem; margin-bottom: 5px; }
.ready-facts span { font-size: .63rem; font-weight: 600; }
.ready-instructions { font-size: .84rem; line-height: 1.8; color: #586b59; }
.ready-note { font-size: .7rem; font-weight: 700; margin-top: 15px; color: #546936; }
.hud { display: grid; grid-template-columns: 1fr 1fr 72px; gap: 14px; padding: 0; margin-bottom: 20px; align-items: center; }
.score-display, .question-counter { padding: 14px 17px; border-radius: 14px; font-size: .95rem; margin: 0; line-height: 1.5; }
.timer-circle { width: 72px; height: 72px; border-width: 4px; font-size: 1.65rem; }
.time-bar-container { height: 9px; margin-bottom: 22px; }
.question-container { border-radius: 18px; padding: 28px; font-size: clamp(1.12rem,2.5vw,1.5rem); line-height: 1.55; margin-bottom: 22px; overflow-wrap: anywhere; }
.answers-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 17px; align-items: stretch; }
.answer-btn { display: grid; grid-template-columns: 48px minmax(0,1fr); column-gap: 16px; align-items: center; min-height: 136px; min-width: 0; padding: 22px; border: 2px solid #ffffff14; border-radius: 15px; line-height: 1.5; transition: transform .15s, box-shadow .15s; }
.shape { width: 48px; height: 48px; min-width: 48px; flex-shrink: 0; margin: 0; border-radius: 13px; background: #0000001c; color: inherit; }
.shape svg { display: block; width: 24px; height: 24px; flex-shrink: 0; }
.answer-copy { display: flex; flex-direction: column; min-width: 0; gap: 6px; }
.option-label { font-size: .6rem; line-height: 1.3; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.option-text { display: block; font-size: clamp(.9rem,1.65vw,1.12rem); font-weight: 700; overflow-wrap: anywhere; line-height: 1.45; }
.bg-c { color: #3b2e06; }
.answer-btn:disabled { filter: none; opacity: .65; }
.answer-btn.is-selected { outline: 3px solid white; outline-offset: 3px; opacity: 1; }
#result-screen { max-width: 880px; gap: 18px; }
.result-summary { --result-ink: #366b24; --result-wash: #edf8df; width: 100%; padding: 27px; border-radius: 22px; background: #fff; color: #293b36; border-top: 6px solid #a4d92e; }
.result-summary[data-state=incorrect] { --result-ink: #aa2145; --result-wash: #fce8ee; border-top-color: #df5776; }
.result-summary[data-state=timeout] { --result-ink: #806014; --result-wash: #fff2ca; border-top-color: #ffcf3b; }
.result-symbol { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 17px; background: var(--result-wash); color: var(--result-ink); margin: 0 auto 17px; }
.result-symbol svg { width: 30px; height: 30px; }
.result-banner { color: var(--result-ink); font-size: clamp(1.6rem,3.5vw,2.15rem); line-height: 1.2; text-transform: none; letter-spacing: -.04em; margin: 10px 0; }
.result-message { color: #69716c; font-size: .85rem; line-height: 1.65; }
.result-summary .points-earned { color: var(--result-ink); background: var(--result-wash); font-size: 1.1rem; margin: 17px 0 0; padding: 10px 16px; border-radius: 12px; }
.rationale-box { margin: 0; border-radius: 20px; padding: 27px; font-size: 1rem; line-height: 1.8; }
.rationale-box h2 { font-size: .8rem; color: #637061; margin-bottom: 18px; }
.correct-answer { display: grid; grid-template-columns: 40px minmax(0,1fr); align-items: center; gap: 13px; padding: 16px; border: 1px solid #d2e5bb; background: #f2f9e7; border-radius: 12px; margin-bottom: 19px; }
.correct-letter { display: grid; place-items: center; width: 40px; height: 40px; background: #a4d92e; color: #304511; border-radius: 10px; font-weight: 800; }
.correct-label { display: block; color: #4e6937; font-size: .58rem; letter-spacing: .1em; font-weight: 800; margin-bottom: 4px; }
#correct-answer-text { display: block; color: #354b2b; font-size: .9rem; line-height: 1.6; overflow-wrap: anywhere; }
#rationale-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .94rem; }
.continue-button { max-width: 360px; background: #a4d92e; color: #293d12; border-radius: 12px; font-size: 1rem; box-shadow: 0 4px 0 #83b520; margin: 5px 0; }
.continue-button:hover { background: #b1e544; }
@media (hover:hover) { .answer-btn:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 7px 0 #00000025; } }
@media(max-width:650px) {
 .screen { padding: 22px 16px; justify-content: flex-start; }
 #login-screen, #ready-screen { justify-content: center; }
 .hud { grid-template-columns: 1fr 1fr 56px; gap: 8px; margin-bottom: 17px; }
 .score-display, .question-counter { padding: 10px 6px; font-size: .73rem; }
 .timer-circle { width: 56px; height: 56px; font-size: 1.3rem; }
 .question-container { padding: 22px 18px; }
 .answers-grid { grid-template-columns: minmax(0,1fr); gap: 13px; }
 .answer-btn { grid-template-columns: 42px minmax(0,1fr); gap: 13px; padding: 17px; min-height: 94px; }
 .shape { width: 42px; height: 42px; min-width: 42px; border-radius: 11px; }
 .shape svg { width: 22px; height: 22px; }
 .option-text { font-size: .92rem; }
 .ready-card, .input-group { padding: 24px 20px; }
 .input-group { margin:0 14px;border-radius:23px; }
 .entry-heading { grid-template-columns:42px minmax(0,1fr) 34px;gap:10px; }
 .entry-symbol { width:42px;height:42px;border-radius:13px;font-size:1.45rem; }
 .entry-symbol--check { width:34px;height:34px;font-size:1.05rem; }
 .entry-hint { margin-left:52px;font-size:.72rem; }
 .input-group::before { width:58px;height:58px;left:-20px; }
 .input-group::after { width:46px;height:46px;right:-16px; }
 .ready-facts { gap: 8px; }
 .result-summary, .rationale-box { padding: 23px 19px; }
 .correct-answer { padding: 12px; }
 .intro-dialog { width: calc(100% - 16px); max-height: calc(100svh - 16px); border-radius: 16px; }
 .intro-topbar { padding: 14px; }
 .intro-topbar span { display: none; }
 .intro-footer { align-items: stretch; flex-direction: column; padding: 14px; }
 .intro-footer > span { text-align: center; }
 .intro-enter { width: 100%; }
 .intro-dialog video { max-height: calc(100svh - 178px); }
}
@media(prefers-reduced-motion:reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } #video-bg-container video { display: none; } }

/* Lightbox compacto: sempre inteiro, centralizado e sem rolagem interna. */
.intro-dialog[open] { position:fixed;inset:0;display:flex;flex-direction:column;width:min(900px,calc(100% - 32px));max-width:none;height:auto;max-height:calc(100svh - 32px);margin:auto;padding:0;overflow:hidden;border:2px solid #ffffff40;border-radius:20px;background:#070b0a;box-shadow:0 28px 90px #07020bd9; }
.intro-dialog .intro-topbar { position:absolute;z-index:3;inset:0 0 auto 0;min-height:72px;padding:15px 70px 24px 18px;background:linear-gradient(#07100ee8,transparent);pointer-events:none; }
.intro-dialog .intro-topbar strong { color:#fff;font-size:.86rem;text-shadow:0 2px 10px #000; }
.intro-dialog .intro-topbar span { color:#e3ece8;font-size:.62rem;text-shadow:0 2px 10px #000; }
.intro-dialog .intro-close { position:absolute;pointer-events:auto;right:14px;top:13px;display:grid;place-items:center;width:42px;height:42px;padding:0;border:1px solid #ffffff55;border-radius:50%;background:#111917d9;color:#fff;box-shadow:0 5px 16px #0008; }
.intro-dialog .intro-close:hover { background:#a4d92e;color:#24380e;border-color:#c8ee70; }
.intro-dialog .intro-close span { display:block;margin:0;font-size:1.45rem;line-height:1; }
.intro-dialog video { flex:0 1 auto;width:100%;height:auto;max-height:min(68svh,510px);aspect-ratio:16/9;object-fit:contain;background:#050807; }
.intro-dialog .intro-footer { flex:0 0 auto;min-height:68px;padding:12px 14px 12px 19px;background:#101714;border-top:1px solid #ffffff1f; }
.intro-dialog .intro-footer > span { margin:0;color:#aebdb6;font-size:.64rem; }
.intro-dialog .intro-enter { min-height:43px;padding:10px 17px;border-radius:11px; }
@media(max-width:600px) {
 .intro-dialog[open] { width:calc(100% - 18px);max-height:calc(100svh - 18px);border-radius:15px; }
 .intro-dialog .intro-topbar { min-height:58px;padding:12px 58px 18px 13px; }
 .intro-dialog .intro-topbar span { display:none; }
 .intro-dialog .intro-close { width:38px;height:38px;right:10px;top:9px; }
 .intro-dialog video { max-height:62svh; }
 .intro-dialog .intro-footer { min-height:62px;padding:9px; }
 .intro-dialog .intro-footer > span { display:none; }
 .intro-dialog .intro-enter { width:100%; }
}

/* Lightbox próprio: não depende do posicionamento nativo de <dialog>. */
.intro-lightbox[hidden] { display:none !important; }
.intro-lightbox { position:fixed;inset:0;z-index:10000;display:grid;place-items:center;width:auto;max-width:none;height:auto;max-height:none;margin:0;padding:16px;border:0;border-radius:0;background:#160528e8;box-shadow:none;overflow:hidden;backdrop-filter:blur(8px); }
.intro-panel { position:relative;display:flex;flex-direction:column;width:min(900px,100%);max-height:calc(100svh - 32px);overflow:hidden;border:2px solid #ffffff40;border-radius:20px;background:#070b0a;box-shadow:0 28px 90px #07020bd9; }
.intro-lightbox .intro-topbar { position:absolute;z-index:3;inset:0 0 auto 0; }
.intro-lightbox video { width:100%;height:auto;max-height:min(68svh,510px);object-fit:contain; }
.intro-lightbox .intro-footer { flex:0 0 auto; }
body.intro-open { overflow:hidden; }
@media(max-width:600px) { .intro-lightbox { padding:9px; }.intro-panel { width:100%;max-height:calc(100svh - 18px);border-radius:15px; } }