.auth-stage {
    margin: 0 auto;
    max-width: 1040px;
    padding: 0 120px;
    position: relative;
    width: 100%;
}

.auth-card-raised {
    margin-top: 28px;
    position: relative;
}

body:has(.auth-stage) .shell {
    display:grid;
    grid-template-rows:1fr auto;
    min-height: 100svh;
    padding: 14px 0 30px;
}

body:has(.auth-stage) .auth-stage { align-self:center;transform:translateY(24px); }

.auth-stage .auth-card {
    padding: 28px 40px;
}

.auth-stage .tabs {
    margin-bottom: 10px;
}

.auth-stage h2 {
    margin: 8px 0;
}

.auth-stage label {
    margin: 12px 0;
}

.auth-stage input {
    padding: 13px 14px;
}

.auth-stage .message {
    margin: 8px 0 0;
    min-height: 20px;
}

.auth-stage .note {
    margin: 10px 0 0;
}

.form-brand {
    align-items: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin: -4px auto 38px;
    text-align: center;
}

.form-brand .brand-mark {
    animation: logo-float 2.4s ease-in-out infinite;
    font-size: 112px;
    line-height: 1;
    margin: 0 0 5px;
}

.form-brand b {
    display: block;
    font-size: 52px;
    line-height: 1;
}

.form-brand small {
    color: #7048e8;
    display: block;
    animation: slogan-glow 2s ease-in-out infinite;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 1.5px;
    margin-top: 5px;
    text-transform: uppercase;
}

.outside-icon {
    filter: drop-shadow(0 12px 5px #38577f35);
    font-size: 132px;
    position: absolute;
    z-index: 2;
}

.outside-brain { animation: brain-float 3s ease-in-out infinite; left: -18px; top: 145px; }
.outside-star { animation: star-spin 5s linear infinite; right: -4px; top: 135px; }
.outside-rocket { animation: rocket-fly 4s ease-in-out infinite; bottom: 42px; font-size: 82px; left: 24px; }
.outside-planet { animation: planet-orbit 4.5s ease-in-out infinite; bottom: 46px; font-size: 88px; right: 22px; }

@keyframes logo-float { 50% { transform: translateY(-7px) rotate(2deg); } }
@keyframes slogan-glow { 50% { color: #ff5d9e; letter-spacing: 2.5px; } }
@keyframes brain-float { 50% { transform: translate(-8px,-18px) rotate(-7deg) scale(1.06); } }
@keyframes star-spin { 50% { filter: drop-shadow(0 0 18px #ffd43b); transform: rotate(180deg) scale(1.13); } 100% { transform: rotate(360deg); } }
@keyframes rocket-fly { 50% { transform: translate(18px,-28px) rotate(10deg); } }
@keyframes planet-orbit { 50% { transform: translate(-10px,-18px) rotate(15deg); } }

.captcha-label {
    background: #fff7cc;
    border: 2px dashed #e6a700;
    border-radius: 16px;
    padding: 14px;
}

.answer-buttons {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0 auto;
    max-width: 650px;
}

.answer-buttons button {
    background: #f2f4ff;
    border: 3px solid #dce4ff;
    font-size: clamp(28px, 6vw, 46px);
    min-height: 90px;
}

.answer-buttons button:hover,
.answer-buttons button:focus-visible {
    background: #ffd43b;
    border-color: #e6a700;
    outline: none;
    transform: translateY(-3px);
}

.answer-buttons button:disabled { cursor: default; opacity: .65; }
.answer-buttons button.picked { background: #7048e8; color: #fff; opacity: 1; }

[data-panel="guest"] .primary { display:block;margin-left:auto;margin-right:auto; }
.site-footer { color:#26345d;font-size:13px;font-weight:700;padding:18px 8px 2px;text-align:center; }
.card,dialog { text-align:center; }
.card label { text-align:center; }
.play-brand,.player-bar { text-align:left; }
.highscores li { text-align:left; }
.play-brand { align-items:center;display:flex;gap:10px;margin:14px 0 4px; }
.play-brand>span { animation:logo-float 2.4s ease-in-out infinite;font-size:50px; }
.play-brand b { display:block;font-size:27px;line-height:1; }
.play-brand small { color:#7048e8;display:block;font-size:12px;font-weight:900;letter-spacing:1px;text-transform:uppercase; }
.sound-toggle { background:#fff9;border:2px solid #fff;font-size:20px;margin-left:auto;padding:9px 12px; }

.module-picker,.vocab-intro { text-align: center; }
.module-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px; }
.module-grid button { background:#f2f4ff;border:3px solid #dce4ff;min-height:175px;padding:18px; }
.module-grid button:first-child { background:#fff5c2;border-color:#ffd43b; }
.module-grid button:last-child { background:#e7f5ff;border-color:#74c0fc; }
.module-grid span,.vocab-hero { display:block;font-size:58px;animation:logo-float 2.4s ease-in-out infinite; }
.module-grid b { display:block;font-size:22px;margin:8px 0; }
.module-grid small { display:block;font-size:15px; }
.back-link { float:left;background:transparent;color:#7048e8;padding:7px; }
.table-levels { display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:15px 0 28px; }
.table-levels button { min-height:82px; }
.table-levels b,.table-levels small { display:block; }
.table-levels small { font-size:12px;margin-top:5px; }
.vocab-intro { max-width:720px;margin:auto; }
.vocab-picture { align-items:center;background:#fffaf0;border:5px solid #fff;border-radius:24px;box-shadow:0 10px 25px #38577f35;display:flex;justify-content:center;margin:0 auto 6px;max-height:250px;max-width:250px;overflow:hidden; }
.vocab-picture > span { background-repeat:no-repeat;background-size:500% 200%;display:block;height:100%;width:40%; }
.vocab-prompt { font-size:clamp(22px,3.5vw,32px);margin:6px 0 12px; }
.learning-visual { background:#fff9db;border:4px solid #ffd43b;border-radius:22px;font-size:clamp(30px,6vw,54px);letter-spacing:5px;line-height:1.45;margin:4px auto 10px;max-width:720px;padding:14px;word-spacing:10px; }
.game.vocab-mode { padding-bottom:18px;padding-top:18px; }
.game.vocab-mode .hud { font-size:17px; }
.game.vocab-mode .timebar { margin:10px 0; }
.game.vocab-mode .round { font-size:13px;margin:6px 0; }
.game.vocab-mode .answer-buttons { gap:9px; }
.game.vocab-mode .answer-buttons button { font-size:clamp(18px,3.5vw,28px);min-height:58px;padding:9px 12px;text-transform:capitalize; }
.game.vocab-mode .feedback { font-size:17px;margin:8px 0 0;min-height:20px; }
.highscores { background:#f5f7ff;border-radius:18px;margin:14px 0;padding:10px 18px; }
.highscores h3 { margin:2px 0 8px; }
.highscores ol { margin:0;padding-left:25px;text-align:left; }
.highscores li { border-bottom:1px solid #dde2f4;display:flex;justify-content:space-between;padding:5px; }
.highscores li:last-child { border-bottom:0; }

@media (max-width: 700px) {
    .auth-stage { padding: 0 10px; }
    .auth-card-raised { margin-top: 16px; }
    .auth-stage .auth-card { padding: 20px 18px; }
    .auth-stage .tabs { flex-direction: row; gap: 5px; }
    .auth-stage .tabs button { font-size: 12px; padding: 11px 6px; }
    .outside-icon { font-size: 62px; }
    .outside-brain { left: -4px; top: 125px; }
    .outside-star { right: -2px; top: 125px; }
    .outside-rocket { bottom: -16px; font-size: 44px; left: 5px; }
    .outside-planet { bottom: -18px; font-size: 48px; right: 5px; }
    .form-brand .brand-mark { font-size: 68px; }
    .form-brand b { font-size: 36px; }
    .answer-buttons button { min-height: 74px; }
    .module-grid { grid-template-columns:1fr;gap:12px; }
    .module-grid button { min-height:145px;padding:15px; }
    .module-grid span { font-size:48px; }
    .table-levels { grid-template-columns:1fr; }
    .game.vocab-mode { padding:12px; }
    .play-brand { margin-top:6px; }
}

@media (max-width: 900px) and (min-width: 701px) { .module-grid { grid-template-columns:1fr 1fr; } }

@media (max-height: 720px) {
    .player-bar { margin:8px 0; }
    .game.vocab-mode .hud { font-size:14px; }
    .game.vocab-mode .answer-buttons button { min-height:48px;padding:6px 10px; }
    .game.vocab-mode .vocab-prompt { font-size:20px;margin:4px 0 8px; }
}