:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f3;
    --bg-tertiary: #efefec;
    --text-primary: #1a1a18;
    --text-secondary: #6b6b67;
    --border: rgba(0, 0, 0, 0.15);
    --border-med: rgba(0, 0, 0, 0.25);
    --radius-md: 8px;
    --radius-lg: 12px;
    --green: #3b6d11;
    --green-dark: #27500a;
    --green-bg: #eaf3de;
    --green-text: #27500a;
    --red-bg: #fcebeb;
    --red-border: #a32d2d;
    --red-text: #501313;
    --green-border: #3b6d11;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-primary: #1e1e1c;
        --bg-secondary: #2a2a28;
        --bg-tertiary: #242422;
        --text-primary: #f0efea;
        --text-secondary: #9a9a96;
        --border: rgba(255, 255, 255, 0.12);
        --border-med: rgba(255, 255, 255, 0.22);
        --green-bg: #1a3308;
        --green-text: #a3d46e;
        --green-border: #5a9e1f;
        --red-bg: #2d1010;
        --red-border: #c45050;
        --red-text: #f0a0a0;
    }
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    padding: 1rem;
}

#g {
    width: 100%;
    max-width: 540px;
}

.card {
    background: var(--bg-primary);
    border: 0.5px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 0.75rem;
}

.btn {
    background: var(--bg-primary);
    border: 0.5px solid var(--border-med);
    border-radius: var(--radius-md);
    padding: 0.65rem 1rem;
    font-size: 14px;
    cursor: pointer;
    color: var(--text-primary);
    width: 100%;
    display: block;
    text-align: center;
    font-family: var(--font);
}

.btn:hover {
    background: var(--bg-secondary);
}

.btn-green {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    padding: 0.85rem;
    font-family: var(--font);
}

.btn-green:hover {
    background: var(--green-dark);
    color: #fff;
}

.btn-green:disabled {
    background: var(--bg-secondary);
    border-color: var(--border);
    color: var(--text-secondary);
    cursor: not-allowed;
}

.screen {
    display: none;
}

.screen.active {
    display: block;
}

h2 {
    font-size: 18px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.4rem;
}

h3 {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.4rem;
}

.sec-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    margin-top: 1rem;
}

.mode-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 0.75rem 0;
}

.mode-card {
    border: 2px solid var(--border-med);
    border-radius: var(--radius-lg);
    padding: 1rem;
    cursor: pointer;
    text-align: center;
    background: var(--bg-primary);
    transition:
        border-color 0.1s,
        background 0.1s;
}

.mode-card:hover {
    background: var(--bg-secondary);
}

.mode-card.sel {
    border-color: var(--green-border);
    background: var(--green-bg);
}

.mode-card .mc-icon {
    font-size: 30px;
    margin-bottom: 6px;
}

.mode-card .mc-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.mode-card .mc-sub {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.amode-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 0.75rem 0;
}

.amode-card {
    border: 2px solid var(--border-med);
    border-radius: var(--radius-lg);
    padding: 1rem;
    cursor: pointer;
    text-align: center;
    background: var(--bg-primary);
    transition:
        border-color 0.1s,
        background 0.1s;
}

.amode-card:hover {
    background: var(--bg-secondary);
}

.amode-card.sel {
    border-color: var(--green-border);
    background: var(--green-bg);
}

.amode-card .am-icon {
    font-size: 26px;
    margin-bottom: 4px;
}

.amode-card .am-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

.amode-card .am-sub {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.t-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 0.75rem 0;
}

.t-btn {
    border: 2px solid var(--border-med);
    border-radius: var(--radius-md);
    padding: 0.6rem 0.25rem;
    font-size: 13px;
    cursor: pointer;
    text-align: center;
    color: var(--text-primary);
    background: var(--bg-primary);
    line-height: 1.4;
    font-family: var(--font);
}

.t-btn:hover {
    background: var(--bg-secondary);
}

.t-btn.sel {
    background: var(--green-bg);
    border-color: var(--green-border);
    color: var(--green-text);
    font-weight: 500;
}

.char-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 0.75rem 0;
}

.char {
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.65rem 0.4rem;
    cursor: pointer;
    text-align: center;
}

.char:hover {
    background: var(--bg-secondary);
}

.char.sel {
    border-color: var(--green-border);
    background: var(--green-bg);
}

.char-icon {
    font-size: 26px;
    margin-bottom: 3px;
}

.char-name {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-primary);
}

.pbar {
    height: 6px;
    background: var(--bg-secondary);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.pbar-fill {
    height: 100%;
    background: #639922;
    border-radius: 4px;
    transition: width 0.35s;
}

.hearts {
    font-size: 14px;
    letter-spacing: 2px;
}

.story-p {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-primary);
}

.q-big {
    font-size: 28px;
    font-weight: 500;
    color: var(--text-primary);
    text-align: center;
    padding: 0.75rem 0;
}

.ans-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 0.75rem 0;
}

.ans-btn {
    background: var(--bg-primary);
    border: 1.5px solid var(--border-med);
    border-radius: var(--radius-md);
    padding: 0.85rem;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    color: var(--text-primary);
    font-family: var(--font);
}

.ans-btn:hover:not([disabled]) {
    background: var(--bg-secondary);
}

.ans-btn.correct {
    background: var(--green-bg);
    border-color: var(--green-border);
    color: var(--green-text);
}

.ans-btn.wrong {
    background: var(--red-bg);
    border-color: var(--red-border);
    color: var(--red-text);
}

.kb-wrap {
    margin: 0.75rem 0;
}

.kb-display {
    font-size: 32px;
    font-weight: 500;
    text-align: center;
    padding: 0.6rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    margin-bottom: 8px;
    min-height: 56px;
    color: var(--text-primary);
    letter-spacing: 2px;
}

.kb-display.correct {
    background: var(--green-bg);
    color: var(--green-text);
}

.kb-display.wrong {
    background: var(--red-bg);
    color: var(--red-text);
}

.kb-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.kb-btn {
    background: var(--bg-primary);
    border: 1px solid var(--border-med);
    border-radius: var(--radius-md);
    padding: 0.75rem;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    color: var(--text-primary);
    text-align: center;
    font-family: var(--font);
}

.kb-btn:hover:not([disabled]) {
    background: var(--bg-secondary);
}

.kb-btn:active:not([disabled]) {
    transform: scale(0.97);
}

.kb-btn.del {
    font-size: 14px;
}

.kb-btn.submit {
    background: var(--green);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    border-color: var(--green);
}

.kb-btn.submit:hover:not([disabled]) {
    background: var(--green-dark);
}

.kb-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.fb {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    font-size: 14px;
    line-height: 1.6;
    margin: 0.5rem 0;
}

.fb.ok {
    background: var(--green-bg);
    color: var(--green-text);
}

.fb.no {
    background: var(--red-bg);
    color: var(--red-text);
}

.prog-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.prog-table td {
    padding: 5px 6px;
    border-bottom: 0.5px solid var(--border);
}

.mini-bar {
    height: 5px;
    background: var(--bg-secondary);
    border-radius: 3px;
    overflow: hidden;
    width: 70px;
}

.mini-fill {
    height: 100%;
    background: #639922;
    border-radius: 3px;
}

.stat-row {
    display: flex;
    gap: 8px;
    margin: 0.75rem 0;
}

.stat {
    flex: 1;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: 0.65rem 0.5rem;
    text-align: center;
}

.stat strong {
    display: block;
    font-size: 20px;
    font-weight: 500;
    color: var(--text-primary);
}

.stat span {
    font-size: 11px;
    color: var(--text-secondary);
}

.qcount-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 0.75rem 0;
}

.qcount-card {
    border: 2px solid var(--border-med);
    border-radius: var(--radius-md);
    padding: 0.75rem 0.4rem;
    cursor: pointer;
    text-align: center;
    background: var(--bg-primary);
    transition:
        border-color 0.1s,
        background 0.1s;
}

.qcount-card:hover {
    background: var(--bg-secondary);
}

.qcount-card.sel {
    border-color: var(--green-border);
    background: var(--green-bg);
}

.qcount-card .qc-num {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
}

.qcount-card.sel .qc-num {
    color: var(--green-text);
}

.qc-sub {
    font-size: 10px;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* Celebration animation */
.celebration {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

.confetti {
    position: absolute;
    width: 12px;
    height: 12px;
    animation: confetti-fall 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.confetti:nth-child(1n + 0):nth-child(-n + 5) {
    left: 5%;
    animation-delay: 0s;
}

.confetti:nth-child(5n + 1):nth-child(-n + 20) {
    left: 10%;
    animation-delay: 0.1s;
}

.confetti:nth-child(5n + 2):nth-child(-n + 30) {
    left: 15%;
    animation-delay: 0.2s;
}

.confetti:nth-child(5n + 3):nth-child(-n + 40) {
    left: 20%;
    animation-delay: 0.15s;
}

.confetti:nth-child(5n + 4):nth-child(-n + 50) {
    left: 25%;
    animation-delay: 0.25s;
}

.confetti:nth-child(odd) {
    background: #ff6b6b;
}

.confetti:nth-child(3n) {
    background: #ffd700;
}

.confetti:nth-child(5n) {
    background: #4ecdc4;
}

.confetti:nth-child(7n) {
    background: #9b59b6;
}

.confetti:nth-child(11n) {
    background: #ff9f43;
}

.confetti:nth-child(13n) {
    background: #2ecc71;
}

@keyframes confetti-fall {
    0% {
        transform: translateY(-10vh) rotate(0deg) scale(0.5);
        opacity: 1;
    }

    25% {
        transform: translateY(25vh) rotate(180deg) scale(1.2);
    }

    50% {
        transform: translateY(50vh) rotate(360deg) scale(1);
    }

    75% {
        transform: translateY(75vh) rotate(540deg) scale(1.1);
    }

    100% {
        transform: translateY(120vh) rotate(720deg) scale(0.8);
        opacity: 0;
    }
}

.celebration-text {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 64px;
    font-weight: bold;
    color: #ffd700;
    text-shadow:
        3px 3px 6px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(255, 215, 0, 0.8);
    animation: pop-in-bounce 1.5s ease-out forwards;
    z-index: 10000;
}

@keyframes pop-in-bounce {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }

    30% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 1;
    }

    50% {
        transform: translate(-50%, -50%) scale(0.9);
    }

    70% {
        transform: translate(-50%, -50%) scale(1.1);
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}

.celebration-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        circle at center,
        rgba(255, 215, 0, 0.3) 0%,
        transparent 70%
    );
    animation: flash 1s ease-out forwards;
    pointer-events: none;
    z-index: 9998;
}

@keyframes flash {
    0% {
        opacity: 1;
        transform: scale(0.5);
    }

    30% {
        opacity: 1;
        transform: scale(1.2);
    }

    100% {
        opacity: 0;
        transform: scale(1.5);
    }
}

.emoji-burst {
    position: fixed;
    font-size: 40px;
    animation: emoji-burst-anim 1.5s ease-out forwards;
    z-index: 9997;
}

@keyframes emoji-burst-anim {
    0% {
        transform: translate(-50%, -50%) scale(0) rotate(0deg);
        opacity: 1;
    }

    50% {
        transform: translate(var(--tx), var(--ty)) scale(1.5) rotate(180deg);
        opacity: 1;
    }

    100% {
        transform: translate(var(--tx), var(--ty)) scale(0.5) rotate(360deg);
        opacity: 0;
    }
}