/* ===== RESET & BASE ===== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary: #6C5CE7;
    --primary-light: #A29BFE;
    --secondary: #00CEC9;
    --accent: #FD79A8;
    --accent2: #FDCB6E;
    --danger: #FF6B6B;
    --success: #00B894;
    --dark: #2D3436;
    --light: #F8F9FA;
    --gray: #636E72;
    --card1: #6C5CE7;
    --card2: #00CEC9;
    --card3: #E17055;
    --card4: #00B894;
    --shadow: 0 8px 32px rgba(0,0,0,0.1);
    --shadow-hover: 0 12px 48px rgba(0,0,0,0.15);
    --radius: 16px;
    --radius-sm: 8px;
    --font: 'Segoe UI', 'Roboto', sans-serif;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    color: var(--dark);
    overflow-x: hidden;
}

/* ===== HOME PAGE ===== */
.home-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 24px 20px 40px;
    position: relative;
}

/* Floating decoration blocks */
.floating-blocks {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.float-block {
    position: absolute;
    border-radius: 6px;
    opacity: 0.08;
    animation: floatBlock 12s ease-in-out infinite;
}
.fb1 { width: 60px; height: 60px; background: #fff; top: 10%; left: 5%; animation-delay: 0s; }
.fb2 { width: 40px; height: 40px; background: #fff; top: 30%; right: 10%; animation-delay: 2s; }
.fb3 { width: 80px; height: 80px; background: #fff; bottom: 20%; left: 15%; animation-delay: 4s; }
.fb4 { width: 50px; height: 50px; background: #fff; top: 60%; right: 20%; animation-delay: 6s; }
.fb5 { width: 35px; height: 35px; background: #fff; bottom: 10%; right: 5%; animation-delay: 8s; }

@keyframes floatBlock {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-20px) rotate(5deg); }
    50% { transform: translateY(-10px) rotate(-3deg); }
    75% { transform: translateY(-25px) rotate(4deg); }
}

/* Header */
.home-header {
    text-align: center;
    margin-bottom: 28px;
    position: relative;
    z-index: 1;
}

.logo-area {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 8px;
}

/* Mini robot logo */
.robot-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.robot-head-mini {
    width: 40px; height: 32px;
    background: linear-gradient(135deg, var(--secondary), #00B894);
    border-radius: 8px 8px 4px 4px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.robot-eye-mini {
    width: 8px; height: 8px;
    background: #fff;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px var(--dark);
}
.robot-antenna-mini {
    position: absolute;
    top: -10px; left: 50%;
    transform: translateX(-50%);
    width: 4px; height: 10px;
    background: var(--accent2);
    border-radius: 2px;
}
.robot-antenna-mini::after {
    content: '';
    position: absolute;
    top: -6px; left: -3px;
    width: 10px; height: 10px;
    background: var(--accent2);
    border-radius: 50%;
}
.robot-body-mini {
    width: 32px; height: 24px;
    background: linear-gradient(135deg, var(--secondary), #00B894);
    border-radius: 4px 4px 8px 8px;
    margin-top: 2px;
}

.title-main {
    font-size: 2.2rem;
    font-weight: 800;
    color: #fff;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.2);
    letter-spacing: 1px;
}
.title-main .highlight {
    background: linear-gradient(135deg, var(--accent2), #F8B500);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.subtitle {
    font-size: 1.05rem;
    color: rgba(255,255,255,0.85);
    font-weight: 400;
}

/* Characters bar */
.characters-bar {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 32px;
    position: relative;
    z-index: 1;
}
.character {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.char-avatar {
    width: 52px; height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: transform 0.3s;
}
.char-avatar:hover { transform: scale(1.15) rotate(5deg); }
.min-avatar { background: linear-gradient(135deg, #74b9ff, #0984e3); }
.phuc-avatar { background: linear-gradient(135deg, #55efc4, #00b894); }
.mai-avatar { background: linear-gradient(135deg, #fd79a8, #e84393); }
.men-avatar { background: linear-gradient(135deg, #ffeaa7, #fdcb6e); }
.char-face { font-size: 1.5rem; }
.char-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
}

/* Game Cards Grid */
.game-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 28px;
    position: relative;
    z-index: 1;
}

.game-card {
    background: #fff;
    border-radius: var(--radius);
    padding: 24px 20px;
    text-decoration: none;
    color: var(--dark);
    box-shadow: var(--shadow);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.game-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
}
.card-1::before { background: var(--card1); }
.card-2::before { background: var(--card2); }
.card-3::before { background: var(--card3); }
.card-4::before { background: var(--card4); }

.game-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
}

.card-badge {
    position: absolute;
    top: 12px; right: 12px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 3px 10px;
    border-radius: 20px;
    color: #fff;
}
.card-1 .card-badge { background: var(--card1); }
.card-2 .card-badge { background: var(--card2); }
.card-3 .card-badge { background: var(--card3); }
.card-4 .card-badge { background: var(--card4); }

.card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
}

.card-content h2 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 4px;
}
.card-content p {
    font-size: 0.82rem;
    color: var(--gray);
    line-height: 1.4;
}

/* Chain icon for card 1 */
.chain-icon {
    display: flex;
    align-items: center;
    gap: 4px;
}
.chain-block {
    width: 36px; height: 36px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.95rem;
    color: #fff;
}
.cb1 { background: var(--card1); }
.cb2 { background: var(--primary-light); }
.cb3 { background: var(--accent); font-size: 1.1rem; }
.chain-link {
    width: 12px; height: 3px;
    background: var(--card1);
    border-radius: 2px;
}

/* Train icon for card 2 */
.train-icon {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 1.8rem;
}

/* Word chain icon for card 3 */
.word-chain-icon {
    display: flex;
    align-items: center;
    gap: 6px;
}
.wc-word {
    background: var(--card3);
    color: #fff;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
}
.wc-arrow {
    color: var(--card3);
    font-weight: 800;
}

/* Robot icon for card 4 */
.robot-icon-card {
    position: relative;
    width: 44px; height: 60px;
}
.ric-head {
    width: 28px; height: 22px;
    background: linear-gradient(135deg, var(--card4), #00CEC9);
    border-radius: 6px 6px 3px 3px;
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
}
.ric-head::before, .ric-head::after {
    content: '';
    position: absolute;
    width: 6px; height: 6px;
    background: #fff;
    border-radius: 50%;
    top: 7px;
    box-shadow: inset 0 0 0 1.5px var(--dark);
}
.ric-head::before { left: 5px; }
.ric-head::after { right: 5px; }
.ric-body {
    width: 32px; height: 22px;
    background: linear-gradient(135deg, var(--card4), #00CEC9);
    border-radius: 4px 4px 6px 6px;
    position: absolute;
    top: 24px; left: 50%;
    transform: translateX(-50%);
}
.ric-arm {
    width: 8px; height: 18px;
    background: var(--card4);
    border-radius: 4px;
    position: absolute;
    top: 26px;
}
.ric-arm.left { left: 0; }
.ric-arm.right { right: 0; }
.ric-leg {
    width: 10px; height: 14px;
    background: var(--card4);
    border-radius: 3px 3px 5px 5px;
    position: absolute;
    bottom: 0;
}
.ric-leg.left { left: 8px; }
.ric-leg.right { right: 8px; }

/* Concept box */
.concept-box {
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    border-radius: var(--radius);
    padding: 18px 24px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 24px;
    border: 1px solid rgba(255,255,255,0.2);
    position: relative;
    z-index: 1;
}
.concept-icon { font-size: 1.5rem; flex-shrink: 0; }
.concept-text {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.95);
    line-height: 1.6;
}
.concept-text strong { color: #fff; }

/* Footer */
.home-footer {
    text-align: center;
    color: rgba(255,255,255,0.5);
    font-size: 0.8rem;
    position: relative;
    z-index: 1;
}

/* ===== GAME PAGE COMMON ===== */
.game-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    min-height: 100vh;
}

.game-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}
.btn-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.2);
    color: #fff;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
    transition: background 0.2s;
    border: 1px solid rgba(255,255,255,0.3);
}
.btn-back:hover { background: rgba(255,255,255,0.3); }

.game-title {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.2);
}

.game-panel {
    background: #fff;
    border-radius: var(--radius);
    padding: 28px;
    box-shadow: var(--shadow);
    margin-bottom: 20px;
}

/* Speech bubble */
.speech-bubble {
    background: linear-gradient(135deg, #DFE6E9, #F0F3F5);
    border-radius: var(--radius);
    padding: 16px 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    position: relative;
    border: 1px solid #E0E0E0;
}
.speech-char {
    font-size: 1.8rem;
    flex-shrink: 0;
}
.speech-text {
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--dark);
}
.speech-name {
    font-weight: 700;
    color: var(--primary);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--font);
}
.btn-primary {
    background: var(--primary);
    color: #fff;
}
.btn-primary:hover { background: #5A4BD1; transform: translateY(-1px); }
.btn-success {
    background: var(--success);
    color: #fff;
}
.btn-success:hover { background: #00A381; }
.btn-danger {
    background: var(--danger);
    color: #fff;
}
.btn-danger:hover { background: #E55050; }
.btn-outline {
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
}
.btn-outline:hover { background: var(--primary); color: #fff; }

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

/* Input */
.number-input {
    width: 52px;
    height: 38px;
    border: 2px solid #DFE6E9;
    border-radius: var(--radius-sm);
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    color: var(--dark);
    outline: none;
    transition: border-color 0.2s;
    font-family: var(--font);
}
.number-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(108,92,231,0.15);
}
.number-input.correct {
    border-color: var(--success);
    background: #E6FFF5;
    color: var(--success);
}
.number-input.wrong {
    border-color: var(--danger);
    background: #FFE6E6;
    color: var(--danger);
    animation: shake 0.4s;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}

/* Score / feedback area */
.feedback {
    padding: 14px 20px;
    border-radius: var(--radius-sm);
    font-size: 0.92rem;
    font-weight: 600;
    margin-top: 16px;
    display: none;
}
.feedback.show { display: block; }
.feedback.success {
    background: #E6FFF5;
    color: var(--success);
    border: 1px solid #B2DFDB;
}
.feedback.error {
    background: #FFE6E6;
    color: var(--danger);
    border: 1px solid #FFCDD2;
}

/* ================================================ */
/*  GAME 1 - BLOCKCHAIN CHAIN                       */
/* ================================================ */
.chain-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 24px 0;
}
.block-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.block-box {
    width: 72px;
    min-height: 72px;
    background: linear-gradient(145deg, #f0f0f0, #e0e0e0);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 4px;
    border: 2px solid #ccc;
    transition: all 0.3s;
    position: relative;
}
.block-box.linked {
    border-color: var(--success);
    background: linear-gradient(145deg, #E6FFF5, #D0F5E8);
    animation: popIn 0.4s ease;
}
@keyframes popIn {
    0% { transform: scale(0.85); }
    50% { transform: scale(1.08); }
    100% { transform: scale(1); }
}
.block-number {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--gray);
}
.red-num {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--danger);
}
.black-num {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--dark);
}
.block-connector {
    width: 20px;
    height: 4px;
    background: #ccc;
    border-radius: 2px;
    transition: background 0.3s;
    align-self: center;
}
.block-connector.linked {
    background: var(--success);
}

/* Virus attack */
.virus-section {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 2px dashed #eee;
}
.virus-icon {
    font-size: 2rem;
    animation: virusPulse 1s ease-in-out infinite;
}
@keyframes virusPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15) rotate(10deg); }
}

/* True/False buttons */
.tf-options {
    display: flex;
    gap: 12px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.tf-btn {
    padding: 10px 20px;
    border: 2px solid #DFE6E9;
    border-radius: var(--radius-sm);
    background: #fff;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s;
    font-family: var(--font);
    flex: 1;
    min-width: 120px;
    text-align: left;
}
.tf-btn:hover { border-color: var(--primary); background: #F8F7FF; }
.tf-btn.selected-correct {
    border-color: var(--success);
    background: #E6FFF5;
    color: var(--success);
}
.tf-btn.selected-wrong {
    border-color: var(--danger);
    background: #FFE6E6;
    color: var(--danger);
    animation: shake 0.4s;
}

/* ================================================ */
/*  GAME 2 - TRAIN                                   */
/* ================================================ */
.train-station {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 20px 0;
    min-height: 100px;
    padding: 16px;
    background: linear-gradient(to bottom, #E8F6F3, #D5F5E3);
    border-radius: var(--radius);
    border: 2px dashed #B2DFDB;
    position: relative;
}
.train-station::before {
    content: 'Kéo toa tàu vào đây theo đúng thứ tự';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #B2DFDB;
    font-size: 0.85rem;
    font-weight: 600;
    pointer-events: none;
    white-space: nowrap;
}
.train-station.has-items::before { display: none; }

.train-yard {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 20px 0;
    padding: 16px;
    background: #FFF9E6;
    border-radius: var(--radius);
    border: 2px dashed #FDCB6E;
    min-height: 80px;
}

.train-piece {
    min-width: 80px;
    padding: 10px 12px;
    border-radius: 10px;
    text-align: center;
    cursor: grab;
    transition: all 0.2s;
    user-select: none;
    position: relative;
}
.train-piece:active { cursor: grabbing; }
.train-piece:hover { transform: translateY(-3px); }
.train-piece.dragging { opacity: 0.4; transform: scale(0.95); }
.train-piece.engine {
    background: linear-gradient(145deg, #FF6B6B, #EE5A5A);
    color: #fff;
    border: 2px solid #D63031;
}
.train-piece.car {
    background: linear-gradient(145deg, #74B9FF, #5A9FE6);
    color: #fff;
    border: 2px solid #0984E3;
}
.train-piece .tp-red {
    font-weight: 800;
    color: #FFE6E6;
    font-size: 0.85rem;
}
.train-piece .tp-black {
    font-weight: 800;
    font-size: 1rem;
}
.train-piece .tp-label {
    font-size: 0.65rem;
    opacity: 0.8;
}
.train-piece.correct {
    border-color: var(--success) !important;
    box-shadow: 0 0 0 3px rgba(0,184,148,0.3);
}
.train-piece.wrong {
    border-color: var(--danger) !important;
    animation: shake 0.4s;
}

.drop-slot {
    width: 86px;
    min-height: 76px;
    border: 2px dashed #B2DFDB;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    background: rgba(255,255,255,0.5);
}
.drop-slot.drag-over {
    border-color: var(--primary);
    background: rgba(108,92,231,0.08);
    transform: scale(1.05);
}
.drop-slot .slot-label {
    font-size: 0.7rem;
    color: #B2DFDB;
    font-weight: 600;
}

/* ================================================ */
/*  GAME 3 - WORD CHAIN                              */
/* ================================================ */
.word-blocks {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 20px 0;
}
.word-block {
    background: linear-gradient(145deg, #E17055, #D35400);
    color: #fff;
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.95rem;
    position: relative;
    min-width: 80px;
    text-align: center;
}
.word-block.empty {
    background: #F0F0F0;
    color: var(--gray);
    border: 2px dashed #ccc;
    min-width: 100px;
    cursor: pointer;
}
.word-block.empty:hover { border-color: var(--primary); }
.word-block.current {
    animation: pulse 1.5s ease-in-out infinite;
    border: 2px solid #fff;
}
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(225,112,85,0.5); }
    50% { box-shadow: 0 0 0 8px rgba(225,112,85,0); }
}

.word-arrow {
    font-size: 1.2rem;
    color: var(--card3);
    font-weight: 800;
}

.word-choices {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 16px 0;
}
.word-choice-btn {
    padding: 8px 18px;
    border: 2px solid #E0E0E0;
    border-radius: var(--radius-sm);
    background: #fff;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.2s;
    font-family: var(--font);
}
.word-choice-btn:hover {
    border-color: var(--card3);
    background: #FFF5F2;
    transform: translateY(-2px);
}
.word-choice-btn.correct-choice {
    border-color: var(--success);
    background: #E6FFF5;
    color: var(--success);
}
.word-choice-btn.wrong-choice {
    border-color: var(--danger);
    background: #FFE6E6;
    color: var(--danger);
    animation: shake 0.4s;
}

.score-display {
    text-align: center;
    margin: 16px 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray);
}
.score-num {
    color: var(--primary);
    font-size: 1.3rem;
}

/* ================================================ */
/*  GAME 4 - ROBOT ASSEMBLY (Multi-model)            */
/* ================================================ */
.robot-assembly-area {
    display: flex;
    gap: 32px;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: center;
}

.robot-display {
    width: 280px;
    min-height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #E8F6F3 0%, #D5F5E3 100%);
    border-radius: var(--radius);
    padding: 20px;
    position: relative;
}

.robot-3d {
    position: relative;
    width: 220px;
    height: 330px;
}

/* Common robot part: hidden by default */
.robot-part {
    position: absolute;
    opacity: 0;
    transition: opacity 0.5s;
}
.robot-part.visible {
    opacity: 1;
    animation: rPartPop 0.6s ease;
}
@keyframes rPartPop {
    0% { opacity: 0; transform: scale(0.2) rotate(15deg); }
    60% { transform: scale(1.1) rotate(-3deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* ---------- MODEL 1: HUMANOID (Chiến Binh) ---------- */
#robot-humanoid { width: 100%; height: 100%; }

/* Antenna */
#h-antenna { top: 0; left: 50%; transform: translateX(-50%); width: 16px; height: 30px; }
.h-antenna-stick { width: 8px; height: 20px; background: linear-gradient(to bottom, #FDCB6E, #F8B500); border-radius: 3px; margin: 0 auto; }
.h-antenna-ball {
    width: 16px; height: 16px;
    background: radial-gradient(circle at 35% 35%, #FF6B6B, #D63031);
    border-radius: 50%;
    position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
    box-shadow: 0 0 10px rgba(214,48,49,0.4);
}
#h-antenna.visible .h-antenna-ball { animation: antennaPulse 2s ease-in-out infinite; }
@keyframes antennaPulse {
    0%, 100% { box-shadow: 0 0 10px rgba(214,48,49,0.4); }
    50% { box-shadow: 0 0 20px rgba(214,48,49,0.7); }
}

/* Head */
#h-head { top: 30px; left: 50%; transform: translateX(-50%); width: 90px; height: 70px; }
.h-head-main {
    width: 90px; height: 70px;
    background: linear-gradient(145deg, #00CEC9, #00B894);
    border-radius: 14px 14px 10px 10px;
    position: relative;
    box-shadow: inset 0 -4px 0 rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.15), inset 3px 3px 0 rgba(255,255,255,0.2);
}
.h-head-main::before {
    content: ''; position: absolute; top: 4px; left: 4px; right: 4px; bottom: 4px;
    border: 2px solid rgba(255,255,255,0.15); border-radius: 10px 10px 7px 7px;
}
.h-eye {
    position: absolute; width: 20px; height: 20px;
    background: radial-gradient(circle at 40% 40%, #fff, #DFE6E9);
    border-radius: 5px; top: 20px;
    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.1);
}
.h-eye::after {
    content: ''; position: absolute; width: 10px; height: 10px;
    background: radial-gradient(circle at 40% 40%, #2D3436, #000);
    border-radius: 4px; top: 5px; left: 5px;
    animation: eyeLook 4s ease-in-out infinite;
}
@keyframes eyeLook {
    0%, 40%, 100% { transform: translateX(0); }
    45%, 55% { transform: translateX(3px); }
    60%, 90% { transform: translateX(-2px); }
}
.h-eye.left { left: 16px; }
.h-eye.right { right: 16px; }
.h-mouth {
    position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
    width: 30px; height: 8px;
    background: rgba(0,0,0,0.15); border-radius: 0 0 6px 6px;
}

/* Body */
#h-body { top: 108px; left: 50%; transform: translateX(-50%); width: 100px; height: 90px; }
.h-body-main {
    width: 100px; height: 90px;
    background: linear-gradient(145deg, #0984E3, #0652DD);
    border-radius: 10px 10px 14px 14px;
    position: relative;
    box-shadow: inset 0 -4px 0 rgba(0,0,0,0.15), 0 4px 8px rgba(0,0,0,0.15), inset 3px 3px 0 rgba(255,255,255,0.15);
}
.h-screen {
    position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
    width: 50px; height: 30px;
    background: linear-gradient(180deg, #0F0F23, #1A1A3E);
    border-radius: 5px; overflow: hidden;
    box-shadow: inset 0 0 8px rgba(0,255,200,0.2);
}
.h-screen::after {
    content: '< / >'; display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; color: #00CEC9; font-size: 0.6rem; font-weight: 700; font-family: monospace;
    animation: screenBlink 3s ease-in-out infinite;
}
@keyframes screenBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.h-btn { position: absolute; width: 10px; height: 10px; border-radius: 50%; bottom: 14px; }
.h-btn.b1 { left: 20px; background: radial-gradient(circle at 35% 35%, #FF6B6B, #D63031); }
.h-btn.b2 { left: 38px; background: radial-gradient(circle at 35% 35%, #FDCB6E, #F8B500); }
.h-btn.b3 { left: 56px; background: radial-gradient(circle at 35% 35%, #00B894, #00856A); }

/* Arms */
#h-arm-l, #h-arm-r { top: 112px; width: 28px; height: 80px; }
#h-arm-l { left: 18px; }
#h-arm-r { right: 18px; }
.h-arm-upper { width: 28px; height: 40px; background: linear-gradient(145deg, #0984E3, #0652DD); border-radius: 6px; box-shadow: inset 0 -3px 0 rgba(0,0,0,0.1); }
.h-arm-lower { width: 24px; height: 30px; background: linear-gradient(145deg, #74B9FF, #0984E3); border-radius: 4px 4px 8px 8px; margin: 2px auto 0; }
.h-hand { width: 22px; height: 14px; background: linear-gradient(145deg, #636E72, #4A5568); border-radius: 4px 4px 7px 7px; margin: 2px auto 0; }

/* Legs */
#h-leg-l, #h-leg-r { top: 202px; width: 34px; height: 100px; }
#h-leg-l { left: 40px; }
#h-leg-r { right: 40px; }
.h-leg-upper { width: 34px; height: 45px; background: linear-gradient(145deg, #636E72, #4A5568); border-radius: 6px; }
.h-leg-lower { width: 30px; height: 35px; background: linear-gradient(145deg, #B2BEC3, #636E72); border-radius: 5px; margin: 3px auto 0; }
.h-foot { width: 38px; height: 16px; background: linear-gradient(145deg, #2D3436, #1A1A2E); border-radius: 5px 5px 8px 8px; margin: 2px auto 0; margin-left: -2px; box-shadow: 0 3px 6px rgba(0,0,0,0.2); }

/* ---------- MODEL 2: CRANE (Xe Cẩu) ---------- */
#robot-crane { width: 100%; height: 100%; }

/* Cabin */
#c-cabin { top: 130px; left: 20px; width: 80px; height: 65px; }
.c-cabin-main {
    width: 80px; height: 65px;
    background: linear-gradient(145deg, #FDCB6E, #F8B500);
    border-radius: 8px 12px 6px 6px;
    position: relative;
    box-shadow: inset 0 -4px 0 rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.15), inset 3px 3px 0 rgba(255,255,255,0.25);
}
.c-window {
    position: absolute; top: 8px; left: 8px; right: 8px; height: 28px;
    background: linear-gradient(180deg, #74B9FF, #A7D8FF);
    border-radius: 4px 8px 4px 4px;
    box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
}
.c-window::after {
    content: ''; position: absolute; top: 3px; left: 3px;
    width: 12px; height: 8px; background: rgba(255,255,255,0.5); border-radius: 2px;
}
.c-cabin-eye {
    position: absolute; width: 10px; height: 10px;
    background: radial-gradient(circle at 40% 40%, #fff, #eee);
    border-radius: 50%; bottom: 10px;
    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.2);
}
.c-cabin-eye::after {
    content: ''; position: absolute; width: 5px; height: 5px;
    background: #2D3436; border-radius: 50%; top: 2.5px; left: 2.5px;
}
.c-cabin-eye.left { left: 15px; }
.c-cabin-eye.right { left: 38px; }

/* Chassis */
#c-chassis { top: 198px; left: 10px; width: 130px; height: 50px; }
.c-chassis-main {
    width: 130px; height: 50px;
    background: linear-gradient(145deg, #E17055, #D35400);
    border-radius: 8px;
    position: relative;
    box-shadow: inset 0 -4px 0 rgba(0,0,0,0.15), 0 4px 8px rgba(0,0,0,0.15), inset 3px 3px 0 rgba(255,255,255,0.1);
}
.c-panel {
    position: absolute; top: 6px; left: 6px;
    width: 40px; height: 20px;
    background: rgba(0,0,0,0.15);
    border-radius: 4px;
}
.c-vent { position: absolute; right: 10px; width: 20px; height: 3px; background: rgba(0,0,0,0.2); border-radius: 2px; }
.c-vent.v1 { top: 12px; }
.c-vent.v2 { top: 20px; }
.c-vent.v3 { top: 28px; }

/* Tracks */
#c-track-l, #c-track-r { width: 55px; height: 45px; }
#c-track-l { top: 252px; left: 12px; }
#c-track-r { top: 252px; right: 22px; }
.c-track-body {
    width: 55px; height: 40px;
    background: linear-gradient(145deg, #636E72, #4A5568);
    border-radius: 12px;
    position: relative;
    box-shadow: inset 0 -3px 0 rgba(0,0,0,0.2), 0 3px 6px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 6px;
}
.c-wheel {
    width: 10px; height: 10px;
    background: radial-gradient(circle at 40% 40%, #B2BEC3, #636E72);
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.2);
}

/* Crane Boom */
#c-boom { top: 60px; left: 60px; width: 20px; height: 80px; }
.c-boom-main {
    width: 20px; height: 75px;
    background: linear-gradient(145deg, #FDCB6E, #E6B800);
    border-radius: 4px;
    box-shadow: inset 0 -3px 0 rgba(0,0,0,0.1), inset 2px 2px 0 rgba(255,255,255,0.2);
    position: relative;
}
.c-boom-main::before {
    content: ''; position: absolute; top: 5px; left: 5px;
    width: 10px; height: 10px;
    border: 2px solid rgba(0,0,0,0.15); border-radius: 2px;
}
.c-boom-joint {
    width: 24px; height: 14px;
    background: linear-gradient(145deg, #636E72, #4A5568);
    border-radius: 50%;
    margin: -2px auto 0;
}

/* Crane Arm Extension */
#c-arm { top: 42px; left: 82px; width: 100px; height: 16px; }
.c-arm-main {
    width: 100px; height: 14px;
    background: linear-gradient(145deg, #FDCB6E, #E6B800);
    border-radius: 4px;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.1);
    position: relative;
}
.c-arm-main::before, .c-arm-main::after {
    content: ''; position: absolute;
    width: 4px; height: 14px;
    background: rgba(0,0,0,0.12);
}
.c-arm-main::before { left: 25px; }
.c-arm-main::after { left: 60px; }

/* Hook */
#c-hook { top: 56px; left: 170px; width: 20px; height: 60px; }
.c-hook-cable { width: 3px; height: 30px; background: #636E72; margin: 0 auto; border-radius: 2px; }
.c-hook-main {
    width: 20px; height: 26px;
    margin: 0 auto;
    border: 4px solid #636E72;
    border-top: none;
    border-radius: 0 0 10px 10px;
}

/* ---------- MODEL 3: DOG (Cún Con) ---------- */
#robot-dog { width: 100%; height: 100%; }

/* Head */
#d-head { top: 80px; left: 10px; width: 65px; height: 55px; }
.d-head-main {
    width: 65px; height: 50px;
    background: linear-gradient(145deg, #74B9FF, #0984E3);
    border-radius: 12px 14px 10px 8px;
    position: relative;
    box-shadow: inset 0 -3px 0 rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.15), inset 3px 3px 0 rgba(255,255,255,0.2);
}
.d-ear {
    position: absolute; top: -14px; width: 18px; height: 20px;
    background: linear-gradient(145deg, #5A9FE6, #0984E3);
    border-radius: 6px 6px 2px 2px;
}
.d-ear.left { left: 8px; transform: rotate(-8deg); }
.d-ear.right { right: 8px; transform: rotate(8deg); }
.d-eye {
    position: absolute; top: 14px; width: 14px; height: 14px;
    background: radial-gradient(circle at 40% 40%, #fff, #eee);
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.15);
}
.d-eye::after {
    content: ''; position: absolute;
    width: 8px; height: 8px;
    background: radial-gradient(circle at 40% 40%, #2D3436, #000);
    border-radius: 50%; top: 3px; left: 3px;
}
.d-eye.left { left: 10px; }
.d-eye.right { right: 10px; }
.d-nose {
    position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
    width: 14px; height: 10px;
    background: radial-gradient(circle at 40% 40%, #2D3436, #000);
    border-radius: 4px 4px 7px 7px;
}
.d-tongue {
    position: absolute; bottom: 0; left: 50%; transform: translateX(-50%) translateY(6px);
    width: 10px; height: 8px;
    background: #FD79A8;
    border-radius: 0 0 6px 6px;
    animation: dogPant 1.5s ease-in-out infinite;
}
@keyframes dogPant {
    0%, 100% { height: 8px; }
    50% { height: 12px; }
}

/* Neck */
#d-neck { top: 130px; left: 35px; width: 30px; height: 20px; }
.d-neck-main {
    width: 30px; height: 20px;
    background: linear-gradient(145deg, #5A9FE6, #0984E3);
    border-radius: 4px;
    position: relative;
}
.d-collar {
    position: absolute; bottom: 2px; left: -3px; right: -3px; height: 8px;
    background: linear-gradient(145deg, #FF6B6B, #D63031);
    border-radius: 3px;
}
.d-collar::after {
    content: ''; position: absolute; right: 4px; top: 1px;
    width: 6px; height: 6px;
    background: radial-gradient(circle at 40% 40%, #FDCB6E, #F8B500);
    border-radius: 50%;
}

/* Body */
#d-body { top: 148px; left: 40px; width: 130px; height: 65px; }
.d-body-main {
    width: 130px; height: 65px;
    background: linear-gradient(145deg, #74B9FF, #0984E3);
    border-radius: 14px 20px 16px 12px;
    position: relative;
    box-shadow: inset 0 -4px 0 rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.15), inset 3px 3px 0 rgba(255,255,255,0.15);
}
.d-body-panel {
    position: absolute; top: 10px; left: 15px;
    width: 40px; height: 25px;
    background: rgba(0,0,0,0.08);
    border-radius: 6px;
    border: 2px solid rgba(255,255,255,0.15);
}
.d-body-light {
    position: absolute; top: 16px; right: 20px;
    width: 12px; height: 12px;
    background: radial-gradient(circle at 40% 40%, #00CEC9, #00B894);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(0,206,201,0.5);
    animation: screenBlink 2s ease-in-out infinite;
}

/* Front Legs */
#d-leg-fl, #d-leg-fr { width: 22px; height: 65px; }
#d-leg-fl { top: 215px; left: 50px; }
#d-leg-fr { top: 215px; left: 78px; }
.d-leg-seg.upper {
    width: 22px; height: 42px;
    background: linear-gradient(145deg, #5A9FE6, #0984E3);
    border-radius: 5px;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.1);
}
.d-paw {
    width: 26px; height: 16px;
    background: linear-gradient(145deg, #636E72, #4A5568);
    border-radius: 5px 5px 8px 8px;
    margin: 2px auto 0;
    margin-left: -2px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}

/* Back Leg */
#d-leg-bl { top: 210px; left: 130px; width: 28px; height: 70px; }
#d-leg-bl .d-leg-seg.upper {
    width: 28px; height: 48px;
    background: linear-gradient(145deg, #5A9FE6, #0984E3);
    border-radius: 6px;
}
#d-leg-bl .d-paw { width: 30px; height: 16px; margin-left: -1px; }

/* Tail */
#d-tail { top: 150px; left: 170px; width: 40px; height: 24px; }
.d-tail-base {
    width: 24px; height: 14px;
    background: linear-gradient(145deg, #5A9FE6, #0984E3);
    border-radius: 4px 8px 8px 4px;
    display: inline-block;
    vertical-align: top;
}
.d-tail-tip {
    width: 16px; height: 16px;
    background: linear-gradient(145deg, #74B9FF, #5A9FE6);
    border-radius: 50%;
    display: inline-block;
    vertical-align: top;
    margin-left: -4px;
    margin-top: -1px;
}
#d-tail.visible { animation: tailWag 0.8s ease-in-out infinite; }
@keyframes tailWag {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(15deg); }
}

/* Quiz area */
.quiz-area {
    flex: 1;
    min-width: 280px;
}
.quiz-question {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 16px;
    line-height: 1.6;
    color: var(--dark);
}
.quiz-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.quiz-option {
    padding: 12px 18px;
    border: 2px solid #E0E0E0;
    border-radius: var(--radius-sm);
    background: #fff;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
    font-family: var(--font);
    text-align: left;
    font-weight: 500;
}
.quiz-option:hover {
    border-color: var(--primary);
    background: #F8F7FF;
    transform: translateX(4px);
}
.quiz-option.correct-answer {
    border-color: var(--success);
    background: #E6FFF5;
    color: var(--success);
    font-weight: 700;
}
.quiz-option.wrong-answer {
    border-color: var(--danger);
    background: #FFE6E6;
    color: var(--danger);
    animation: shake 0.4s;
}

.quiz-progress {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
}
.progress-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #E0E0E0;
    transition: background 0.3s;
}
.progress-dot.done { background: var(--success); }
.progress-dot.current { background: var(--primary); animation: pulse 1.5s infinite; }

/* Robot parts checklist */
.parts-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}
.part-tag {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    background: #F0F0F0;
    color: var(--gray);
    transition: all 0.3s;
}
.part-tag.collected {
    background: linear-gradient(135deg, var(--success), #00CEC9);
    color: #fff;
    animation: tagPop 0.4s ease;
}
@keyframes tagPop {
    0% { transform: scale(0.5); }
    60% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Completion celebration */
.celebration {
    display: none;
    text-align: center;
    padding: 24px;
}
.celebration.show {
    display: block;
    animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}
.celebration h2 {
    font-size: 1.5rem;
    color: var(--success);
    margin-bottom: 8px;
}
.celebration p {
    color: var(--gray);
    font-size: 0.95rem;
}

/* Result stars */
.stars {
    font-size: 2rem;
    margin: 12px 0;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 700px) {
    .title-main { font-size: 1.5rem; }
    .game-grid { grid-template-columns: 1fr; }
    .logo-area { flex-direction: column; gap: 8px; }
    .characters-bar { gap: 14px; }
    .chain-row { gap: 4px; }
    .block-box { width: 60px; min-height: 60px; }
    .robot-assembly-area { flex-direction: column; align-items: center; }
    .quiz-area { min-width: unset; width: 100%; }
    .train-station { min-height: 80px; }
    .game-panel { padding: 18px; }
}

@media (max-width: 400px) {
    .block-box { width: 50px; min-height: 50px; }
    .red-num, .black-num { font-size: 0.95rem; }
    .number-input { width: 42px; height: 32px; }
}