/* ==========================================
   MỎI CỔ — Nghiêng Đầu Trả Lời 🦒
   Neo-Brutalist Style (Green/Lime theme)
   ========================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root {
    --font-heading: 'Baloo 2', cursive;
    --font-body: 'Nunito', sans-serif;
    --c-bg: #00C853;
    --c-card: #FFFDE7;
    --c-border: #1a1a1a;
    --c-left: #FF6B35;
    --c-right: #0068FF;
    --c-correct: #00C853;
    --c-wrong: #FF3B30;
    --shadow: 4px 4px 0 #1a1a1a;
    --shadow-lg: 6px 6px 0 #1a1a1a;
    --radius: 18px;
}

body {
    font-family: var(--font-body);
    background: var(--c-bg);
    color: var(--c-border);
    min-height: 100vh;
    overflow-x: hidden;
}
h1,h2,h3{font-family: var(--font-heading);line-height:1.2}

/* Screen system */
.screen { display:none; min-height:100vh; }
.screen.active { display:block; }

/* ===== SETUP SCREEN ===== */
.setup-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}
.setup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--c-card);
    border: 3px solid var(--c-border);
    border-radius: var(--radius);
    padding: 16px 22px;
    box-shadow: var(--shadow-lg);
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.logo-area {
    display: flex;
    align-items: center;
    gap: 14px;
}
.logo-giraffe {
    font-size: 3.2rem;
    animation: wiggle 2s ease-in-out infinite;
}
@keyframes wiggle {
    0%,100%{transform:rotate(0)}
    25%{transform:rotate(-15deg)}
    75%{transform:rotate(15deg)}
}
.game-title {
    font-size: 2.2rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--c-left), #FF1493, var(--c-right));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.game-subtitle {
    font-size: 0.88rem;
    font-weight: 700;
    color: #555;
}

/* Zalo CTA */
.zalo-cta {
    display: flex; align-items: center; gap: 8px;
    background: #0068ff; color: #fff;
    border: 3px solid var(--c-border); border-radius: 14px;
    padding: 8px 14px; text-decoration: none;
    font-weight: 800; font-size: 0.78rem;
    box-shadow: var(--shadow); transition: all .15s;
}
.zalo-cta:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--c-border); }
.zalo-cta-icon { font-size: 1.3rem; }
.zalo-cta-badge {
    background: #FFD700; color: var(--c-border);
    padding: 2px 8px; border-radius: 99px;
    font-size: 0.65rem; border: 1.5px solid var(--c-border);
}
.shake-animation { animation: shake 3s ease-in-out infinite; }
@keyframes shake {
    0%,100%{transform:translateX(0)}
    10%,30%{transform:translateX(-3px)}
    20%,40%{transform:translateX(3px)}
    50%{transform:translateX(0)}
}

/* Sections */
.setup-section {
    background: var(--c-card);
    border: 3px solid var(--c-border);
    border-radius: var(--radius);
    padding: 16px 18px;
    box-shadow: var(--shadow);
    margin-bottom: 16px;
}
.section-title {
    font-size: 1rem; font-weight: 800; margin-bottom: 12px;
    display: flex; align-items: center; gap: 6px;
}

/* Camera Section */
.camera-setup-section { text-align: center; }
.camera-area {
    border: 3px dashed #999;
    border-radius: 16px;
    min-height: 200px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; position: relative;
    background: #222;
}
.camera-placeholder {
    display: flex; flex-direction: column;
    align-items: center; gap: 10px; padding: 30px;
    color: #ccc;
}
.cam-emoji { font-size: 3rem; }
.camera-placeholder p { font-weight: 700; font-size: 0.9rem; }
.btn-camera {
    padding: 12px 28px; border: 3px solid var(--c-border);
    border-radius: 14px; font-family: var(--font-heading);
    font-size: 1rem; font-weight: 800; background: #76FF03;
    color: var(--c-border); cursor: pointer;
    box-shadow: var(--shadow); transition: all .15s;
}
.btn-camera:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--c-border); }

/* Camera Live */
.camera-live {
    position: relative; width: 100%; max-width: 480px;
    margin: 0 auto;
}
.camera-live video, .camera-live canvas {
    width: 100%; display: block; border-radius: 12px;
    transform: scaleX(-1);
}
.camera-live canvas {
    position: absolute; top: 0; left: 0; height: 100%;
    pointer-events: none;
}
.cam-status {
    position: absolute; top: 10px; left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,.7); color: #76FF03;
    padding: 4px 14px; border-radius: 99px;
    font-size: 0.75rem; font-weight: 800;
    z-index: 2;
}
.cam-status.ready { color: #76FF03; }
.cam-status.error { color: #FF3B30; }

/* Tilt Meter */
.tilt-meter {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; background: rgba(0,0,0,.6);
    border-radius: 0 0 12px 12px;
}
.tilt-label-left, .tilt-label-right {
    font-size: 0.65rem; font-weight: 800; color: #fff;
    min-width: 50px; text-align: center;
}
.tilt-label-left { color: var(--c-left); }
.tilt-label-right { color: var(--c-right); }
.tilt-bar-track {
    flex: 1; height: 10px; background: #333;
    border-radius: 99px; position: relative; overflow: hidden;
}
/* Mốc đánh dấu (ngưỡng chọn đổ màu) */
.tilt-threshold {
    position: absolute; top: 0; height: 100%;
    width: 2px; background: rgba(255, 59, 48, 0.8);
    z-index: 2;
    box-shadow: 0 0 5px rgba(255, 59, 48, 0.5);
}
.tilt-threshold-left { left: 20%; }
.tilt-threshold-right { left: 80%; }
.tilt-bar-fill {
    position: absolute; top: 0; height: 100%;
    width: 2%; left: 49%; border-radius: 99px;
    background: #76FF03; transition: all .1s;
    z-index: 1;
}
.tilt-bar-center {
    position: absolute; top: -2px; left: 50%;
    transform: translateX(-50%);
    width: 4px; height: 14px; background: #fff;
    border-radius: 2px; z-index: 2;
}

/* Tilt Zone Status display */
.tilt-zone-display {
    text-align: center; padding: 4px 0 6px;
    background: rgba(0,0,0,.4);
    border-radius: 0 0 12px 12px; margin-top: -2px;
}
.tilt-zone-status {
    font-family: var(--font-heading);
    font-size: 0.78rem; font-weight: 800;
    color: #76FF03; letter-spacing: 1px;
}
.btn-recalibrate {
    padding: 3px 12px; border: 2px solid var(--c-border);
    border-radius: 99px; font-family: var(--font-heading);
    font-size: 0.65rem; font-weight: 800; background: #FFD700;
    color: var(--c-border); cursor: pointer; margin-left: 8px;
    box-shadow: 1px 1px 0 var(--c-border); transition: all .12s;
}
.btn-recalibrate:hover { transform:translate(-1px,-1px); box-shadow:2px 2px 0 var(--c-border); }

/* Sensitivity badge & guide */
.sensitivity-badge {
    background: #76FF03; padding: 2px 10px;
    border-radius: 99px; font-size: 0.7rem;
    border: 2px solid var(--c-border); box-shadow: 1px 1px 0 var(--c-border);
    margin-left: 6px;
}
.sensitivity-guide {
    margin-top: 8px; padding: 8px 12px;
    background: #E8F5E9; border-radius: 10px;
    border: 2px dashed #81C784;
}
.sensitivity-guide p {
    font-size: 0.72rem; font-weight: 700;
    color: #2E7D32; margin: 0;
}

/* Setup Grid */
.setup-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 16px; margin-bottom: 16px;
}
.setup-col-left, .setup-col-right {
    display: flex; flex-direction: column;
}
.setup-section-grow { flex: 1; display: flex; flex-direction: column; }

/* Timer selector */
.timer-selector { display: flex; gap: 8px; flex-wrap: wrap; }
.timer-btn {
    flex: 1; min-width: 50px; padding: 8px;
    border: 2.5px solid var(--c-border); border-radius: 12px;
    font-family: var(--font-heading); font-size: 0.88rem;
    font-weight: 800; background: #fff; cursor: pointer;
    box-shadow: 2px 2px 0 var(--c-border); transition: all .12s;
}
.timer-btn.active { background: #76FF03; }
.timer-btn:hover { transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--c-border); }

/* Sensitivity */
.sensitivity-area { padding: 4px 0; }
.sensitivity-slider {
    width: 100%; height: 8px; -webkit-appearance: none;
    background: #ddd; border-radius: 99px; outline: none;
    border: 2px solid var(--c-border);
}
.sensitivity-slider::-webkit-slider-thumb {
    -webkit-appearance: none; width: 24px; height: 24px;
    background: #76FF03; border: 3px solid var(--c-border);
    border-radius: 50%; cursor: pointer;
    box-shadow: 2px 2px 0 var(--c-border);
}
.sensitivity-labels {
    display: flex; justify-content: space-between;
    font-size: 0.68rem; font-weight: 700; color: #777;
    margin-top: 4px;
}

/* Hotkey guide */
.hotkey-guide {
    background: var(--c-card); border: 2px dashed #aaa;
    border-radius: 14px; padding: 12px 16px;
    margin-top: auto;
}
.hotkey-guide h3 { font-size: 0.85rem; margin-bottom: 6px; }
.hotkey-row {
    display: flex; gap: 16px; font-size: 0.78rem; font-weight: 700;
    flex-wrap: wrap;
}
kbd {
    display: inline-block; padding: 2px 8px;
    background: #fff; border: 2px solid var(--c-border);
    border-radius: 6px; font-family: var(--font-heading);
    font-size: 0.75rem; box-shadow: 1px 1px 0 var(--c-border);
}

/* Question list, actions, etc. — same as keoco */
.question-count-badge {
    background: #76FF03; padding: 2px 10px;
    border-radius: 99px; font-size: 0.72rem;
    border: 2px solid var(--c-border); box-shadow: 1px 1px 0 var(--c-border);
}
.question-actions {
    display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px;
}
.action-btn {
    padding: 7px 14px; border: 2.5px solid var(--c-border);
    border-radius: 10px; font-family: var(--font-heading);
    font-size: 0.78rem; font-weight: 800; cursor: pointer;
    box-shadow: 2px 2px 0 var(--c-border); transition: all .12s;
}
.action-btn:hover { transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--c-border); }
.add-btn { background: #76FF03; }
.bank-btn { background: #FFD700; }
.import-btn { background: #E0F7FA; }
.export-btn { background: #FFE0E0; }
.export-btn:disabled { opacity:.5; cursor:not-allowed; }

.question-list {
    flex: 1; max-height: 280px; overflow-y: auto;
    border: 2px solid #eee; border-radius: 12px;
    padding: 8px; min-height: 100px;
}
.empty-state {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center; padding: 20px;
    color: #999; font-weight: 700; font-size: 0.82rem;
}
.empty-icon { font-size: 2rem; margin-bottom: 6px; }

.q-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; border-bottom: 1px solid #eee;
    font-size: 0.78rem; font-weight: 700;
}
.q-item:last-child { border-bottom: none; }
.q-item-num {
    background: #76FF03; width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px; font-size: 0.7rem; font-weight: 800;
    border: 2px solid var(--c-border); flex-shrink: 0;
}
.q-item-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-item-del {
    background: none; border: none; cursor: pointer;
    font-size: 1rem; opacity: .5; transition: opacity .15s;
}
.q-item-del:hover { opacity: 1; }

/* Start button */
.start-btn {
    display: flex; align-items: center; justify-content: center;
    gap: 10px; width: 100%; padding: 16px;
    background: linear-gradient(135deg, #76FF03, #00E676);
    border: 3px solid var(--c-border); border-radius: 16px;
    font-family: var(--font-heading); font-size: 1.2rem;
    font-weight: 800; color: var(--c-border); cursor: pointer;
    box-shadow: var(--shadow-lg); transition: all .15s;
    text-transform: uppercase; letter-spacing: 1px;
    position: relative; overflow: hidden;
}
.start-btn::after {
    content:''; position:absolute; top:0; left:-100%;
    width:60%; height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
    animation: shine 3s infinite;
}
@keyframes shine { 0%{left:-100%} 100%{left:200%} }
.start-btn:hover:not(.disabled) { transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--c-border); }
.start-btn.disabled { opacity:.5; cursor:not-allowed; }
.start-icon { font-size: 1.5rem; }

/* ===== MODALS ===== */
.modal-overlay {
    display:none; position:fixed; top:0;left:0;right:0;bottom:0;
    background:rgba(0,0,0,.55); backdrop-filter:blur(4px);
    z-index:9999; align-items:center; justify-content:center;
}
.modal-overlay.active { display:flex; }
.modal-content {
    background:var(--c-card); border:3px solid var(--c-border);
    border-radius:20px; box-shadow:8px 8px 0 var(--c-border);
    width:92%; max-width:560px; max-height:90vh;
    display:flex; flex-direction:column; overflow:hidden;
}
.modal-header {
    display:flex; justify-content:space-between; align-items:center;
    padding:14px 18px; border-bottom:3px solid var(--c-border);
    font-family:var(--font-heading);
}
.modal-header h2 { font-size:1.05rem; }
.modal-close {
    width:30px; height:30px; border-radius:50%;
    border:2px solid var(--c-border); background:#FFE0E0;
    font-size:1rem; cursor:pointer; display:flex;
    align-items:center; justify-content:center;
}
.modal-body { padding:14px 18px; overflow-y:auto; flex:1; }
.modal-footer {
    display:flex; gap:10px; padding:12px 18px;
    border-top:3px solid var(--c-border); justify-content:flex-end;
}
.modal-btn {
    padding:8px 20px; border:2.5px solid var(--c-border);
    border-radius:12px; font-family:var(--font-heading);
    font-size:0.85rem; font-weight:800; cursor:pointer;
    box-shadow:2px 2px 0 var(--c-border); transition:all .12s;
}
.cancel-btn { background:#eee; }
.save-btn { background:#76FF03; }
.modal-btn:hover { transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--c-border); }

/* Form inputs */
.form-group { margin-bottom:12px; }
.form-group label { display:block; font-weight:800; font-size:0.82rem; margin-bottom:4px; }
.form-group textarea, .form-group input[type="text"],
.answer-group input[type="text"] {
    width:100%; padding:8px 12px; border:2.5px solid var(--c-border);
    border-radius:10px; font-family:var(--font-body);
    font-size:0.85rem; font-weight:700;
}
.answers-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.answer-group {
    display:flex; align-items:center; gap:6px;
    padding:6px 8px; background:#f9f9f9;
    border:2px solid #ddd; border-radius:10px;
}
.answer-label {
    width:24px; height:24px; border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    font-size:0.72rem; font-weight:800; color:#fff;
    border:2px solid var(--c-border); flex-shrink:0;
}
.a-label{background:#FF6B35}.b-label{background:#0068FF}
.c-label{background:#00C853}.d-label{background:#FF1493}
.correct-radio { font-size:0.75rem; cursor:pointer; flex-shrink:0; }

/* Bank modal */
.bank-modal-content { max-width:640px; }
.bank-filters { display:flex; gap:12px; margin-bottom:10px; flex-wrap:wrap; }
.bank-filter-group { flex:1; min-width:150px; }
.bank-filter-group label { font-weight:800; font-size:0.82rem; }
.bank-filter-group select {
    width:100%; padding:8px; border:2.5px solid var(--c-border);
    border-radius:10px; font-family:var(--font-body);
    font-weight:700; font-size:0.85rem;
}
.bank-select-all {
    display:flex; justify-content:space-between; align-items:center;
    padding:6px 0; font-size:0.82rem; font-weight:700;
}
.bank-selected-count { color:var(--c-left); font-weight:800; }
.bank-question-list {
    max-height:300px; overflow-y:auto;
    border:2px solid #eee; border-radius:10px; padding:4px;
}
.bank-q-item {
    display:flex; align-items:center; gap:8px;
    padding:8px 10px; border-bottom:1px solid #eee;
    font-size:0.78rem; font-weight:700;
}
.bank-q-item:last-child { border-bottom:none; }
.bank-q-item label { flex:1; cursor:pointer; }

/* ===== GAME SCREEN ===== */
#game-screen {
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
    display: flex; flex-direction: column;
    min-height: 100vh; color: #fff;
}
#game-screen.active { display: flex; }

/* Top bar */
.game-topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px; background: rgba(255,255,255,.08);
    border-bottom: 2px solid rgba(255,255,255,.1);
}
.topbar-score, .topbar-timer {
    display: flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.1); border: 2px solid rgba(255,255,255,.2);
    border-radius: 12px; padding: 6px 14px;
    font-family: var(--font-heading); font-weight: 800;
}
.score-icon, .timer-icon { font-size: 1.1rem; }
.score-value { font-size: 1.2rem; color: #FFD700; }
.timer-value { font-size: 1.2rem; color: #76FF03; }
.timer-value.danger { color: #FF3B30; animation: pulse .5s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.q-counter {
    font-family: var(--font-heading); font-weight: 800;
    font-size: 0.92rem; opacity: .8;
}

/* Question bar */
.game-question-bar {
    text-align: center; padding: 14px 20px;
    background: rgba(255,255,255,.06);
    border-bottom: 2px solid rgba(255,255,255,.08);
}
.game-question-text {
    font-family: var(--font-heading); font-size: 2.2rem;
    font-weight: 800; line-height: 1.4; max-width: 900px;
    margin: 0 auto; color: #fff;
    text-shadow: 2px 2px 0 var(--c-bg), -2px -2px 0 var(--c-bg), 2px -2px 0 var(--c-bg), -2px 2px 0 var(--c-bg);
}

/* Game Arena */
.game-arena {
    flex: 1; display: flex; align-items: stretch;
    gap: 0; padding: 16px; min-height: 0;
}

/* Answer Zones */
.answer-zone {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 16px; border-radius: 24px; padding: 20px 24px;
    transition: all .2s; cursor: default;
    border: 3px solid transparent; position: relative;
    box-shadow: inset 0 0 20px rgba(0,0,0,.1);
}
.left-zone { background: rgba(255,107,53,.08); margin-right: 8px; }
.right-zone { background: rgba(0,104,255,.08); margin-left: 8px; }
.left-zone.highlight {
    background: rgba(255,107,53,.25);
    border-color: var(--c-left);
    box-shadow: 0 0 30px rgba(255,107,53,.3), inset 0 0 30px rgba(255,107,53,.1);
}
.right-zone.highlight {
    background: rgba(0,104,255,.25);
    border-color: var(--c-right);
    box-shadow: 0 0 30px rgba(0,104,255,.3), inset 0 0 30px rgba(0,104,255,.1);
}
.answer-zone.correct-flash {
    background: rgba(0,200,83,.3) !important;
    border-color: var(--c-correct) !important;
    box-shadow: 0 0 40px rgba(0,200,83,.4) !important;
}
.answer-zone.wrong-flash {
    background: rgba(255,59,48,.3) !important;
    border-color: var(--c-wrong) !important;
}
.zone-arrow {
    font-size: 2rem; opacity: .3;
    transition: all .2s;
}
.highlight .zone-arrow { opacity: 1; font-size: 2.5rem; }
.zone-label {
    font-family: var(--font-heading); font-size: 0.78rem;
    font-weight: 800; opacity: .4; text-transform: uppercase;
    letter-spacing: 2px;
}
.highlight .zone-label { opacity: .8; }
.zone-answer {
    font-family: var(--font-heading); font-size: 2.8rem;
    font-weight: 900; text-align: center; line-height: 1.3;
    padding: 20px; border-radius: 20px;
    background: rgba(255,255,255,.1);
    border: 4px solid rgba(255,255,255,.2);
    width: 100%; box-shadow: 0 8px 16px rgba(0,0,0,.2);
    text-shadow: 2px 2px 4px rgba(0,0,0,.5);
}
.left-zone .zone-answer { color: var(--c-left); border-color: rgba(255,107,53,.3); background: rgba(255,107,53,.1); }
.right-zone .zone-answer { color: var(--c-right); border-color: rgba(0,104,255,.3); background: rgba(0,104,255,.1); }

/* Center Camera Zone */
.center-zone {
    width: 280px; flex-shrink: 0;
    display: flex; flex-direction: column;
    align-items: center; gap: 10px;
}
.game-cam-wrapper {
    position: relative; width: 100%;
    border: 3px solid rgba(255,255,255,.2);
    border-radius: 16px; overflow: hidden;
    background: #000;
}
.game-cam-wrapper video, .game-cam-wrapper canvas {
    width: 100%; display: block; transform: scaleX(-1);
}
.game-cam-wrapper canvas {
    position: absolute; top: 0; left: 0; height: 100%;
    pointer-events: none;
}
.face-status {
    position: absolute; bottom: 8px; left: 50%;
    transform: translateX(-50%);
    font-size: 2rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5));
    transition: transform .15s;
    z-index: 2;
}
.face-status.tilt-left { transform: translateX(-50%) rotate(-20deg); }
.face-status.tilt-right { transform: translateX(-50%) rotate(20deg); }

.tilt-direction { display: none; }
.tilt-direction.show { display: none; }
.tilt-direction.show.neutral { display: none; }

/* Hold progress */
.hold-progress {
    display: none;
}
.hold-bar {
    display: none;
}
.hold-bar.left { display: none; }
.hold-bar.right { display: none; }
.hold-text {
    display: none;
}

/* Feedback overlay */
.feedback-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.5); backdrop-filter: blur(6px);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    z-index: 100; animation: fadeIn .3s;
}

/* Hiệu ứng Icon bay lên mốc màn hình */
.floating-emoji {
    position: fixed; bottom: -50px; font-size: 3rem;
    pointer-events: none; z-index: 999;
    animation: floatUp 2s ease-out forwards;
}
@keyframes floatUp {
    0% { transform: translateY(0) scale(0.5) rotate(-20deg); opacity: 0; }
    20% { opacity: 1; transform: translateY(-20vh) scale(1.2) rotate(10deg); }
    100% { transform: translateY(-100vh) scale(1) rotate(-20deg); opacity: 0; }
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.feedback-emoji {
    font-size: 5rem; animation: popIn .4s cubic-bezier(.175,.885,.32,1.275);
}
@keyframes popIn { from{transform:scale(0) rotate(-30deg);opacity:0} to{transform:scale(1) rotate(0);opacity:1} }
.feedback-text {
    font-family: var(--font-heading); font-size: 2rem;
    font-weight: 800; margin-top: 10px;
    text-shadow: 2px 2px 0 rgba(0,0,0,.3);
}

/* ===== RESULT SCREEN ===== */
#result-screen {
    background: linear-gradient(180deg, #1a1a2e 0%, #0f3460 50%, #16213e 100%);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
}
#result-screen.active { display: flex; }
.result-container {
    background: var(--c-card); color: var(--c-border);
    border: 4px solid var(--c-border); border-radius: 24px;
    box-shadow: 8px 8px 0 var(--c-border);
    width: 92%; max-width: 480px; padding: 0; overflow: hidden;
    text-align: center; animation: popIn .5s cubic-bezier(.175,.885,.32,1.275);
}
.result-header {
    background: linear-gradient(135deg, #76FF03, #00E676);
    padding: 18px; border-bottom: 3px solid var(--c-border);
}
.result-giraffe { font-size: 2.5rem; display: block; }
.result-title {
    font-size: 1.2rem; font-weight: 800; margin-top: 4px;
}
.result-score-box {
    padding: 20px; border-bottom: 3px solid #eee;
}
.result-stars { font-size: 2rem; margin-bottom: 8px; }
.result-score-text {
    font-family: var(--font-heading); font-size: 1.1rem; font-weight: 800;
}
.result-correct { font-size: 2.5rem; color: #00C853; }
.result-divider { font-size: 1.5rem; margin: 0 4px; opacity: .4; }
.result-total { font-size: 1.5rem; }
.result-stats { padding: 14px 20px; }
.result-stat-row {
    display: flex; justify-content: space-between;
    padding: 6px 0; border-bottom: 1px dashed #eee;
    font-size: 0.85rem; font-weight: 700;
}
.result-stat-row:last-child { border-bottom: none; }
.result-stat-val { font-weight: 800; color: var(--c-left); }
.result-message {
    padding: 14px 20px; font-size: 0.88rem;
    font-weight: 800; line-height: 1.5;
    background: #FFF9C4; border-top: 3px solid #eee;
}
.result-actions {
    display: flex; gap: 10px; padding: 16px 20px;
    border-top: 3px solid var(--c-border);
}
.result-btn {
    flex: 1; padding: 12px; border: 3px solid var(--c-border);
    border-radius: 14px; font-family: var(--font-heading);
    font-size: 0.92rem; font-weight: 800; cursor: pointer;
    box-shadow: var(--shadow); transition: all .15s;
}
.replay-btn { background: #76FF03; }
.home-btn { background: #FFD700; }
.result-btn:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--c-border); }

/* Confetti canvas */
#confetti-canvas {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 200;
}

/* Floating buttons */
.sound-toggle, .fullscreen-toggle {
    position: fixed; z-index: 50;
    width: 40px; height: 40px; border-radius: 50%;
    border: 2px solid var(--c-border); background: var(--c-card);
    font-size: 1.1rem; cursor: pointer;
    box-shadow: 2px 2px 0 var(--c-border); transition: all .12s;
    display: flex; align-items: center; justify-content: center;
}
.sound-toggle { bottom: 16px; right: 16px; }
.fullscreen-toggle { bottom: 16px; right: 64px; }
.sound-toggle:hover, .fullscreen-toggle:hover {
    transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--c-border);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .setup-grid { grid-template-columns: 1fr; }
    .game-arena { flex-direction: column; padding: 10px; }
    .answer-zone { flex-direction: row; padding: 14px; }
    .left-zone { margin-right: 0; margin-bottom: 8px; }
    .right-zone { margin-left: 0; margin-top: 8px; }
    .center-zone { width: 100%; order: -1; }
    .zone-arrow { font-size: 1.5rem; }
    .zone-answer { font-size: 1.6rem; padding: 12px; }
    .game-question-text { font-size: 1.4rem; padding: 0 10px; }
    .setup-header { flex-direction: column; text-align: center; }
    .game-title { font-size: 1.6rem; }
}
@media (max-width: 500px) {
    .game-title { font-size: 1.3rem; }
    .answers-grid { grid-template-columns: 1fr; }
    .center-zone { width: 100%; }
    .game-cam-wrapper { max-width: 240px; margin: 0 auto; }
}