@font-face {
    font-family: "AndikaLocal";
    src: url("../fonts/andika/Andika-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "AndikaLocal";
    src: url("../fonts/andika/Andika-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

#app {
    max-width: 1120px;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 auto;
    padding: clamp(12px, 2.6vw, 22px);
    display: flex;
    flex-direction: column;
}


.hidden { display: none !important; }
.accent-text { color: var(--primary-green); }

.quiz-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#setup-screen {
    width: 100%;
    flex: 1;
}

#setup-screen > .page-backbar,
#setup-screen > .page-intro,
#setup-screen > .workbench-grid {
    width: 100%;
}

.setup-card,
.overview-card,
.history-mini,
.quiz-panel,
.finish-card,
.challenge-card,
.sound-control,
.back-btn,
.progress-capsule,
.page-intro {
    border-radius: 28px;
}

.setup-card,
.overview-card,
.history-mini,
.finish-card {
    padding: clamp(16px, 2.6vw, 22px);
}

.type-options,
.tone-options,
.settings-grid,
.metric-grid,
.danger-actions,
.challenge-actions {
    display: grid;
    gap: 10px;
}

.type-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tone-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.settings-grid,
.metric-grid,
.danger-actions,
.challenge-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.type-options span,
.tone-options span,
.field-card,
.metric-card,
.option-card {
    border: 1px solid var(--line);
    background: rgba(255,255,255,.06);
}

.settings-grid { margin-top: 14px; }

.launch-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    margin-top: 16px;
}

.option-card,
.play-button,
.challenge-actions button { cursor: pointer; }

#resume-btn {
    width: auto;
    padding-left: 18px;
    padding-right: 18px;
    white-space: nowrap;
    background: var(--accent);
    color: #10192A;
    box-shadow: 0 0 32px rgba(126,182,255,.18), 0 18px 34px rgba(0,0,0,.30);
}

#resume-btn:hover {
    box-shadow: 0 0 22px rgba(126,182,255,.16), 0 14px 28px rgba(0,0,0,.24);
}

.history-mini {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 0 0 auto;
}

#history-list {
    padding-right: 0;
}

.history-list {
    overflow: auto;
    max-height: clamp(180px, 28vh, 320px);
    padding-right: 4px;
}

#quiz-screen,
#finish-screen {
    width: 100%;
    flex: 1;
    justify-content: center;
    padding-bottom: 22px;
}

.quiz-header {
    width: 100%;
    max-width: 720px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
}

.quiz-panel {
    width: 100%;
    max-width: 720px;
    padding: clamp(16px, 2.8vw, 22px);
    text-align: center;
}

.category-pill {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(126,182,255,.14);
    color: #DCEAFF;
    border: 1px solid rgba(126,182,255,.22);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 14px;
}

.prompt-text {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 900;
    letter-spacing: -.05em;
    margin-bottom: 8px;
}

.play-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.play-button {
    display: inline-grid;
    place-items: center;
    width: min(156px, 38vw);
    aspect-ratio: 1;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(119,224,182,.36);
    appearance: none;
    -webkit-appearance: none;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.16), transparent 45%), linear-gradient(180deg, rgba(119,224,182,.24), rgba(126,182,255,.16));
    color: var(--text-main);
    font-size: clamp(52px, 9vw, 84px);
    line-height: 1;
    box-shadow: 0 0 24px rgba(119,224,182,.14), inset 0 1px 0 rgba(255,255,255,.15), 0 18px 42px rgba(0,0,0,.28);
}

.play-button:hover {
    border-color: rgba(119,224,182,.52);
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), transparent 45%), linear-gradient(180deg, rgba(119,224,182,.30), rgba(126,182,255,.18));
}

.play-hint,
.notice-bar {
    color: var(--text-muted);
    font-size: 14px;
}

.notice-bar {
    min-height: 24px;
    color: var(--accent);
    margin-bottom: 10px;
}

.option-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.option-card {
    min-height: clamp(76px, 13vh, 92px);
    padding: 18px 12px;
    border-radius: 22px;
    color: var(--text-main);
    font-family: "AndikaLocal", "Andika", "Comic Sans MS", "Segoe Print", sans-serif;
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.03em;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 10px 24px rgba(0, 0, 0, 0.24);
    transition: background .16s ease, border-color .16s ease, transform .12s ease, box-shadow .16s ease;
}

.option-card:hover {
    border-color: rgba(119,224,182,.34);
    background: rgba(255,255,255,.105);
}

.option-card.correct {
    border-color: rgba(119,224,182,.65);
    background: rgba(119,224,182,.22);
    color: #F4FFF9;
}

.option-card.wrong {
    border-color: rgba(255,125,138,.6);
    background: rgba(255,125,138,.18);
    color: #FFF5F7;
}

.finish-card {
    width: 100%;
    max-width: 560px;
    text-align: center;
}

.finish-icon { font-size: 82px; margin-bottom: 18px; }
.finish-card h2 { margin: 0 0 10px; font-size: 38px; color: var(--primary-green); letter-spacing: -.05em; }
.summary-copy { line-height: 1.8; color: var(--text-main); margin-bottom: 18px; }

.challenge-modal { z-index: 30; }
.toast-tip { z-index: 30; }

.btn-main:active,
.danger-btn:active,
.back-btn:active,
.option-card:active,
.play-button:active { transform: translateY(2px); }

@media (max-width: 620px) {
    #app { padding: 12px; }
    .setup-card,
    .overview-card,
    .history-mini,
    .quiz-panel,
    .finish-card,
    .page-intro { padding: 16px; }
    .page-backbar,
    .quiz-header { flex-direction: column; align-items: stretch; }
    .page-intro { padding: 14px 16px; }
    .type-options { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
    .tone-options { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .settings-grid,
    .metric-grid,
    .danger-actions,
    .challenge-actions,
    .option-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .launch-row { grid-template-columns: minmax(0, 1fr) auto; }
    #resume-btn { width: auto; padding-left: 14px; padding-right: 14px; }
    .type-options span,
    .tone-options span { padding: 10px 4px; font-size: 13px; border-radius: 14px; }
    .field-card,
    .metric-card { min-height: 70px; padding: 10px 12px; border-radius: 16px; }
    .field-card span,
    .metric-card span { margin-bottom: 6px; font-size: 11px; }
    .field-card strong,
    .metric-card b { font-size: 18px; }
    .field-card input[type="number"] { width: 62px; font-size: 16px; padding: 6px 2px; }
    .btn-main { padding: 14px; font-size: 17px; }
    .danger-btn { padding: 10px 8px; font-size: 12px; }
    .page-title { font-size: 32px; }
    .progress-capsule { flex-wrap: wrap; justify-content: center; }
    .play-button { width: min(112px, 32vw); font-size: clamp(38px, 10vw, 56px); }
    .option-card { min-height: 68px; font-size: clamp(22px, 9vw, 30px); }
}

@media (max-width: 860px) {
    .launch-row { grid-template-columns: 1fr; }
    #resume-btn { width: 100%; }
}

@media (orientation: landscape) {
    #setup-screen {
        transform: scale(.82);
        transform-origin: top center;
    }

    #quiz-screen {
        justify-content: flex-start;
        transform: scale(.78);
        transform-origin: top center;
    }
}

@media (orientation: landscape) and (max-height: 560px) {
    #app {
        min-height: 100dvh;
        padding: 10px;
    }

    #setup-screen {
        min-height: 0;
        flex: 1;
        gap: 8px;
    }

    .page-backbar { gap: 8px; }
    .page-intro { padding: 8px 12px; }

    .workbench-grid {
        grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
        flex: 1;
        min-height: 0;
        height: auto;
        align-items: stretch;
    }

    .workbench-main,
    .workbench-side,
    .side-column { min-height: 0; }

    .workbench-side,
    .side-column {
        overflow: hidden;
    }

    .console-kicker { margin-bottom: 6px; font-size: 10px; }
    .page-title { font-size: clamp(22px, 3vw, 28px); }

    .setup-card,
    .overview-card,
    .history-mini,
    .quiz-panel,
    .finish-card { padding: 10px; }

    .setup-card,
    .history-mini { overflow: auto; }
    .overview-card { flex: 0 0 auto; }
    .section-label { margin-bottom: 6px; font-size: 12px; }
    .panel-title { margin-bottom: 8px; }

    .type-options,
    .tone-options,
    .settings-grid,
    .metric-grid,
    .danger-actions { gap: 6px; }

    .type-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .tone-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .type-options span,
    .tone-options span { padding: 7px 4px; font-size: 11px; border-radius: 14px; }

    .field-card,
    .metric-card { min-height: 52px; padding: 7px 9px; border-radius: 14px; }

    .field-card span,
    .metric-card span { margin-bottom: 4px; font-size: 10px; }

    .field-card strong,
    .metric-card b { font-size: 16px; }
    .field-card input[type="number"] { width: 54px; padding: 4px 2px; font-size: 14px; }
    .launch-row { margin-top: 8px; gap: 6px; }
    .btn-main { padding: 10px; font-size: 15px; }
    #resume-btn { padding-left: 12px; padding-right: 12px; }
    .history-mini { gap: 6px; }
    .history-list { height: clamp(84px, 14vh, 110px); }
    .danger-btn { padding: 7px 6px; font-size: 11px; }
    #quiz-screen {
        justify-content: flex-start;
        padding-bottom: 8px;
    }

    #quiz-screen .quiz-header {
        margin-bottom: 8px;
    }

    #quiz-screen .progress-capsule,
    #quiz-screen .back-btn {
        padding: 8px 12px;
    }

    #quiz-screen .progress-capsule span {
        padding: 6px 10px;
    }

    #quiz-screen .quiz-panel {
        padding: clamp(10px, 2.2vh, 14px);
    }

    #quiz-screen .category-pill {
        padding: 6px 12px;
        margin-bottom: 6px;
        font-size: 13px;
    }

    #quiz-screen .prompt-text {
        margin-bottom: 4px;
        font-size: clamp(22px, 6vh, 32px);
    }

    #quiz-screen .play-panel {
        gap: 4px;
        margin-bottom: 6px;
    }

    #quiz-screen .play-button {
        width: clamp(72px, 18vh, 96px);
        font-size: clamp(32px, 9vh, 48px);
    }

    #quiz-screen .play-hint,
    #quiz-screen .notice-bar {
        font-size: 12px;
    }

    #quiz-screen .notice-bar {
        min-height: 18px;
        margin-bottom: 6px;
    }

    #quiz-screen .option-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 6px;
    }

    #quiz-screen .option-card {
        min-height: clamp(48px, 12vh, 62px);
        padding: 8px 10px;
        font-size: clamp(22px, 7vh, 32px);
    }
}