* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background-color: #f0f2f5;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}

.card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    padding: 30px;
    max-width: 450px;
    width: 100%;
    text-align: center;
}

h1 {
    color: #1a73e8;
    margin-bottom: 10px;
    font-size: 24px;
}

.subtitle {
    color: #5f6368;
    font-size: 14px;
    margin-bottom: 25px;
}

.rule-info {
    font-size: 14px;
    color: #5f6368;
    margin-bottom: 20px;
    background: #e8f0fe;
    padding: 10px;
    border-radius: 8px;
}

.score-board {
    font-size: 28px;
    font-weight: bold;
    color: #202124;
    margin-bottom: 20px;
}

.score-value {
    color: #1a73e8;
}

.streak-info {
    font-size: 14px;
    font-weight: 600;
    color: #b3261e;
    margin-bottom: 15px;
}

.wrong-list {
    text-align: left;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 0 0 20px;
    font-size: 14px;
    color: #3c4043;
}

.wrong-list li {
    margin: 4px 0;
}

.question-box {
    background: #f8f9fa;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 15px;
}

.symbol {
    font-size: 48px;
    font-weight: bold;
    color: #1a73e8;
    margin-bottom: 5px;
}

.pair-symbol {
    font-size: 34px;
    font-weight: bold;
    color: #1a73e8;
    margin-bottom: 5px;
}

.compound-formula {
    font-size: 32px;
    font-weight: bold;
    color: #1a73e8;
    margin-bottom: 5px;
    word-break: break-word;
}

.pair-symbol .plus {
    color: #5f6368;
    font-size: 26px;
    margin: 0 10px;
}

.prompt {
    font-size: 15px;
    color: #5f6368;
}

/* Khu vực hiển thị thông báo kết quả.
   Cố tình dùng display:block + text-align:center thay vì flexbox: với nội dung
   nhiều dòng xen <sub>/<strong> (VD phản hồi sai ở Level 4/5), flex container
   làm mất khoảng trắng giữa các đoạn text khi dòng bị ngắt — dùng block tránh lỗi này. */
.feedback {
    min-height: 52px;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 15px;
    padding: 14px 12px;
    border-radius: 8px;
    display: block;
    text-align: center;
    line-height: 1.4;
}

.feedback.correct {
    color: #0f5132;
    background-color: #d1e7dd;
    border: 1px solid #badbcc;
}

.feedback.wrong {
    color: #842029;
    background-color: #f8d7da;
    border: 1px solid #f5c2c7;
}

.options-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 15px;
}

.btn-option {
    background: white;
    border: 2px solid #dadce0;
    border-radius: 8px;
    padding: 12px;
    font-size: 18px;
    font-weight: 600;
    color: #3c4043;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-option.formula {
    font-size: 16px;
}

.btn-option:hover:not(:disabled) {
    border-color: #1a73e8;
    background-color: #f8f9fa;
    color: #1a73e8;
}

.btn-option:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Nút câu tiếp theo xuất hiện khi làm sai */
.btn-next {
    display: none;
    width: 100%;
    background: #d93025;
    color: white;
    border: none;
    padding: 14px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
    margin-top: 5px;
}

.btn-next:hover {
    background: #b3261e;
}

.victory-screen {
    display: none;
}

.victory-icon {
    font-size: 64px;
    margin-bottom: 15px;
}

.btn-restart {
    background: #1a73e8;
    color: white;
    border: none;
    padding: 12px 24px;
    font-size: 16px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
}

.btn-back {
    display: block;
    background: none;
    border: none;
    color: #1a73e8;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 12px;
    text-align: left;
    padding: 4px 0;
}

.btn-back:hover {
    text-decoration: underline;
}

.btn-restart + .btn-back,
.btn-back.center {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 0;
}

.menu-buttons {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.btn-level {
    background: white;
    border: 2px solid #dadce0;
    border-radius: 10px;
    padding: 16px;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
}

.btn-level:hover {
    border-color: #1a73e8;
    background-color: #f8f9fa;
}

.btn-level .level-title {
    font-size: 17px;
    font-weight: 700;
    color: #1a73e8;
    margin-bottom: 4px;
}

.btn-level .level-desc {
    font-size: 13px;
    color: #5f6368;
}

sub {
    font-size: 0.6em;
    vertical-align: sub;
}

/* ===================== LEVEL 4 : Cân bằng phương trình (kéo-thả) ===================== */

.equation-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 21px;
    font-weight: bold;
    color: #1a73e8;
}

.equation-row .op {
    color: #5f6368;
    font-size: 19px;
    margin: 0 2px;
}

.coef-slot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 4px;
    border: 2px dashed #dadce0;
    border-radius: 6px;
    background: white;
    font-size: 18px;
    color: #3c4043;
    cursor: pointer;
    transition: all 0.15s ease;
}

.coef-slot.filled {
    border-style: solid;
    border-color: #1a73e8;
    background: #e8f0fe;
}

.coef-slot.drag-over {
    border-color: #1a73e8;
    background: #d2e3fc;
}

.coef-slot.correct {
    border-style: solid;
    border-color: #0f5132;
    background: #d1e7dd;
    color: #0f5132;
}

.coef-slot.wrong {
    border-style: solid;
    border-color: #842029;
    background: #f8d7da;
    color: #842029;
}

.formula-part {
    white-space: nowrap;
}

.coef-palette {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 10px 0 15px;
}

.coef-tile {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 2px solid #1a73e8;
    border-radius: 8px;
    color: #1a73e8;
    font-size: 18px;
    font-weight: 700;
    cursor: grab;
    user-select: none;
    touch-action: none;
}

.coef-tile.locked {
    opacity: 0.5;
    cursor: not-allowed;
}

.coef-tile-ghost {
    position: fixed;
    z-index: 1000;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a73e8;
    color: white;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 700;
    pointer-events: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.btn-check {
    width: 100%;
    background: #1a73e8;
    color: white;
    border: none;
    padding: 14px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
    margin-top: 5px;
}

.btn-check:hover:not(:disabled) {
    background: #1558b0;
}

.btn-check:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===================== TRA CỨU: Mô hình nguyên tử Bohr ===================== */

.period-label {
    font-size: 12px;
    font-weight: 600;
    color: #5f6368;
    text-align: left;
    margin: 10px 0 6px;
}

.element-picker-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 4px;
}

.element-btn {
    width: 38px;
    height: 38px;
    background: white;
    border: 2px solid #dadce0;
    border-radius: 8px;
    color: #3c4043;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.element-btn:hover {
    border-color: #1a73e8;
    background-color: #f8f9fa;
}

.element-btn.active {
    border-color: #1a73e8;
    background-color: #1a73e8;
    color: white;
}

.bohr-diagram {
    max-width: 260px;
    margin: 0 auto;
}

.bohr-diagram svg {
    display: block;
    width: 100%;
    height: auto;
}

.shell-legend {
    list-style: none;
    text-align: left;
    margin-top: 10px;
}

.shell-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #3c4043;
    padding: 4px 0;
}

.shell-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.atom-layout {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.atom-picker-col,
.atom-display-col {
    width: 100%;
}

/* ===================== Chế độ trình chiếu (TV/máy chiếu 16:9) =====================
   Kích hoạt khi ở màn "Mô hình nguyên tử": mở rộng khung, chia 2 cột, phóng to
   chữ/sơ đồ để xem rõ từ xa, thay vì layout thẻ dọc hẹp dành cho điện thoại.
   Chỉ bật layout ngang khi màn hình đủ rộng (>=800px) — nếu mở trên điện thoại
   vẫn tự động rơi về layout dọc gốc để không bị vỡ giao diện. */
body.wide-mode .card {
    max-width: 1300px;
}

@media (min-width: 800px) {
    body.wide-mode #atom-model-screen h1 {
        font-size: 32px;
    }

    body.wide-mode #atom-model-screen .subtitle {
        font-size: 18px;
        margin-bottom: 20px;
    }

    body.wide-mode .atom-layout {
        flex-direction: row;
        align-items: flex-start;
        gap: 36px;
    }

    body.wide-mode .atom-picker-col {
        flex: 0 0 320px;
    }

    body.wide-mode .atom-display-col {
        flex: 1;
        min-width: 0;
    }

    body.wide-mode .period-label {
        font-size: 15px;
        margin: 14px 0 8px;
    }

    body.wide-mode .element-btn {
        width: 52px;
        height: 52px;
        font-size: 18px;
        border-radius: 10px;
    }

    body.wide-mode .bohr-diagram {
        max-width: 440px;
        margin: 0 auto;
    }

    body.wide-mode #element-info5 {
        text-align: center;
    }

    body.wide-mode #element-info5 .pair-symbol {
        font-size: 34px;
    }

    body.wide-mode #element-info5 .prompt {
        font-size: 18px;
    }

    body.wide-mode .shell-legend {
        max-width: 420px;
        margin: 10px auto 0;
    }

    body.wide-mode .shell-legend-item {
        font-size: 19px;
        padding: 6px 0;
    }

    body.wide-mode .shell-dot {
        width: 16px;
        height: 16px;
    }
}

/* ===================== TRA CỨU: Liên kết ion ===================== */

.ionic-stage {
    background: #f8f9fa;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 12px;
}

.ionic-stage.ionic-result {
    background: #e8f0fe;
    border-color: #c8dcfb;
}

.ionic-stage-title {
    font-size: 14px;
    font-weight: 700;
    color: #3c4043;
    text-align: left;
    margin-bottom: 10px;
}

.ionic-atom-row {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

/* flex-grow để sơ đồ tự phình to lấp khoảng trống thay vì giữ cỡ cố định nhỏ, dù hàng có
   1, 2 hay 3 nguyên tử (tùy tỉ lệ hợp chất). */
.ionic-atom-item {
    flex: 1 1 160px;
    max-width: 220px;
}

.ionic-atom-item .bohr-diagram {
    max-width: 100%;
    margin: 0 auto;
}

/* Mỗi nguyên tử có 2 lớp (trung hòa / ion) chồng lên nhau qua position:absolute,
   crossfade bằng transition khi thêm class "transferred" ở playIonicAnimation6(). */
.ionic-face-stack {
    position: relative;
    aspect-ratio: 1 / 1;
}

/* Cố tình chỉ crossfade bằng opacity (không dùng transform:scale trên cả khối) — vì
   spawnFlyingElectrons6() đo tọa độ electron đích bằng getBoundingClientRect() ngay trước khi
   đổi trạng thái; nếu khối cha bị scale thì tọa độ đo được sẽ lệch so với vị trí cuối cùng. */
.ionic-atom-face {
    position: absolute;
    inset: 0;
    transition: opacity 0.6s ease;
}

.ionic-face-before {
    opacity: 1;
}

.ionic-face-after {
    opacity: 0;
}

.ionic-atom-item.transferred .ionic-face-before {
    opacity: 0;
}

.ionic-atom-item.transferred .ionic-face-after {
    opacity: 1;
}

/* Electron đang nhường (đỏ, trên sơ đồ trung hòa) mờ dần đi ngay khi bắt đầu hoạt ảnh — như thể
   đang "tách ra" để bay sang nguyên tử kia. */
.ionic-face-before .ionic-transfer-electron {
    transition: opacity 0.4s ease;
}

.ionic-atom-item.transferring .ionic-face-before .ionic-transfer-electron {
    opacity: 0;
}

/* Electron vừa nhận (đỏ, trên sơ đồ ion) "bung" ra sau khi chấm bay đến, trễ hơn một nhịp so với
   phần còn lại của sơ đồ để có cảm giác nó là electron mới vừa tới. */
.ionic-face-after .ionic-transfer-electron {
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(0.3);
    opacity: 0;
    transition: opacity 0.35s ease 0.3s, transform 0.35s ease 0.3s;
}

.ionic-atom-item.transferred .ionic-face-after .ionic-transfer-electron {
    opacity: 1;
    transform: scale(1);
}

.ionic-caption {
    font-size: 13px;
    color: #5f6368;
    margin-top: 4px;
}

.ionic-play-row {
    display: flex;
    justify-content: center;
    margin: 4px 0 12px;
}

/* Chấm electron bay: được JS tạo động và đặt đúng vào tọa độ thực của electron nổi bật (đỏ)
   trên sơ đồ kim loại (điểm xuất phát), sau đó bay theo vector --dx/--dy tới đúng tọa độ thực
   của electron nổi bật trên sơ đồ phi kim (điểm đến) — xem spawnFlyingElectrons6() trong
   ionic-bond.js. Nhờ vậy đường bay luôn khớp đúng nguyên tử cho/nhận, không phụ thuộc bố cục. */
.ionic-electron-fly {
    position: absolute;
    top: 0;
    left: 0;
    width: 15px;
    height: 15px;
    margin-left: -7.5px;
    margin-top: -7.5px;
    border-radius: 50%;
    background: #ea4335;
    box-shadow: 0 0 0 3px rgba(234, 67, 53, 0.25), 0 0 10px 2px rgba(234, 67, 53, 0.6);
    opacity: 0;
    pointer-events: none;
    animation: ionicFly 750ms ease-in-out forwards;
}

@keyframes ionicFly {
    0% { transform: translate(0, 0) scale(0.6); opacity: 0; }
    10% { transform: translate(0, 0) scale(1); opacity: 1; }
    88% { transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(1); opacity: 1; }
    100% { transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(0.6); opacity: 0; }
}

.ionic-play-btn {
    background: #1a73e8;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.ionic-play-btn:hover {
    opacity: 0.9;
}

.ionic-play-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Dùng chung cho các khối chỉ hiện ra sau khi bấm phát hoạt ảnh (đoạn giải thích,
   khối "liên kết ion hình thành") — xem playIonicAnimation6(). */
.ionic-reveal {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    pointer-events: none;
}

.ionic-reveal.shown {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.ionic-explain {
    text-align: left;
    font-size: 14px;
    color: #3c4043;
    line-height: 1.5;
    margin-top: 10px;
}

.ionic-formula-box {
    font-size: 30px;
    font-weight: bold;
    color: #1a73e8;
}

.ionic-replay-btn {
    background: white;
    border: 2px solid #1a73e8;
    color: #1a73e8;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 12px;
}

.ionic-replay-btn:hover {
    background: #f1f6fe;
}

@media (min-width: 800px) {
    body.wide-mode #ionic-bond-screen h1 {
        font-size: 32px;
    }

    body.wide-mode #ionic-bond-screen .subtitle {
        font-size: 18px;
        margin-bottom: 20px;
    }

    body.wide-mode .ionic-stage-title {
        font-size: 18px;
    }

    body.wide-mode .ionic-atom-item {
        flex-basis: 240px;
        max-width: 340px;
    }

    body.wide-mode .ionic-caption {
        font-size: 17px;
    }

    body.wide-mode .ionic-electron-fly {
        width: 24px;
        height: 24px;
        margin-left: -12px;
        margin-top: -12px;
    }

    body.wide-mode .ionic-play-btn,
    body.wide-mode .ionic-replay-btn {
        font-size: 17px;
        padding: 12px 22px;
    }

    body.wide-mode .ionic-explain {
        font-size: 18px;
    }

    body.wide-mode .ionic-formula-box {
        font-size: 44px;
    }
}