:root{--accent: #FFD600;--bg: #0a0a14;--card: #1a1a28;--border: #2a2a3a;--text: #ffffff;--text-muted: #a0a0b8}.quiz-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:24px 20px 48px;max-width:480px;margin:0 auto;position:relative}.screen{width:100%}.hidden{display:none!important}.start-emoji{font-size:5rem;text-align:center;margin:2rem 0 1rem;display:block}.start-title{font-family:Fraunces,serif;font-size:2rem;font-weight:800;text-align:center;color:var(--accent);margin:0 0 1rem;line-height:1.2}.start-desc{text-align:center;color:var(--text-muted);font-size:1rem;line-height:1.6;margin:0 0 .5rem}.start-meta{text-align:center;color:var(--text-muted);font-size:.85rem;margin:0 0 2.5rem}.btn-primary{display:block;width:100%;padding:18px;background:var(--accent);color:#000;border:none;border-radius:14px;font-size:1.1rem;font-weight:700;cursor:pointer;transition:transform .15s,box-shadow .15s;font-family:IBM Plex Sans Thai,sans-serif}.btn-primary:active{transform:scale(.97)}.ambient-wrap{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}.ambient-piece{position:absolute;font-size:var(--sz);opacity:0;animation:floatAmbient var(--dur) ease-in-out var(--delay) infinite;user-select:none;filter:blur(.3px)}@keyframes floatAmbient{0%,to{opacity:var(--op);transform:translateY(0) rotate(var(--r1))}50%{opacity:calc(var(--op) * 1.3);transform:translateY(var(--travel)) rotate(var(--r2))}}.screen{position:relative;z-index:1}.progress-wrap{width:100%;margin-bottom:1rem;padding:0 4px}.progress-track{position:relative;width:100%;height:5px;background:var(--border);border-radius:3px;overflow:visible}.progress-fill{height:100%;background:var(--accent);border-radius:3px;transition:width .45s cubic-bezier(.4,0,.2,1);width:0%}.progress-animal{position:absolute;top:50%;left:0%;transform:translate(-50%,-50%);font-size:1.15rem;transition:left .45s cubic-bezier(.4,0,.2,1);filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));animation:animalBounce .5s ease-out;line-height:1}@keyframes animalBounce{0%{transform:translate(-50%,-65%) scale(1.4)}60%{transform:translate(-50%,-35%) scale(.9)}to{transform:translate(-50%,-50%) scale(1)}}.q-counter{text-align:center;color:var(--text-muted);font-size:.8rem;font-weight:600;letter-spacing:.05em;margin:0 0 .75rem}.btn-back{background:none;border:1px solid var(--border);color:var(--text-muted);border-radius:10px;padding:8px 16px;font-size:.85rem;cursor:pointer;margin-bottom:1.5rem;font-family:IBM Plex Sans Thai,sans-serif;transition:border-color .15s,color .15s}.btn-back:hover{border-color:var(--text-muted);color:var(--text)}.q-card{background:var(--card);border-radius:16px;overflow:hidden;border:1px solid var(--border);margin-bottom:1.25rem}.q-image-zone{height:100px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:linear-gradient(135deg,#0d1a0d,#1a2a1a)}.q-image-zone .iz-emoji{position:absolute;line-height:1;user-select:none;pointer-events:none}.q-body{padding:14px 16px 18px}.q-num{color:var(--text-muted);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin:0 0 6px}.q-text{color:var(--text);font-size:1.05rem;font-weight:600;line-height:1.5;margin:0}@keyframes slideIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.options-list{display:flex;flex-direction:column;gap:10px}.option-btn{width:100%;padding:13px 16px;background:#12121f;border:1.5px solid var(--border);border-radius:12px;color:var(--text);font-size:.92rem;line-height:1.5;text-align:left;cursor:pointer;display:flex;align-items:center;gap:12px;transition:border-color .15s,transform .1s,box-shadow .15s,background .15s;font-family:IBM Plex Sans Thai,sans-serif;opacity:0;transform:translateY(10px)}.option-btn:hover:not(.selected){border-color:#ffd60059;transform:translate(3px);background:#ffffff05}.option-btn:active{transform:scale(.98)}.option-label{width:26px;height:26px;border-radius:50%;background:#1e1e30;border:1.5px solid #3a3a50;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--text-muted);flex-shrink:0;transition:background .15s,border-color .15s,color .15s}.option-btn.selected{border-color:var(--accent);background:#ffd60012;box-shadow:0 0 0 3px #ffd6001f}.option-btn.selected .option-label{background:#ffd60033;border-color:var(--accent);color:var(--accent)}.result-confetti{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden;z-index:100}.confetti-piece{position:absolute;top:-10px;animation:confettiFall linear forwards}@keyframes confettiFall{0%{transform:translateY(-10px) rotate(0);opacity:1}to{transform:translateY(100vh) rotate(720deg);opacity:0}}.result-emoji{font-size:4.5rem;text-align:center;margin:2rem 0 .5rem;display:block;animation:bounceIn .6s cubic-bezier(.175,.885,.32,1.275) forwards}@keyframes bounceIn{0%{transform:scale(0);opacity:0}60%{transform:scale(1.15);opacity:1}to{transform:scale(1);opacity:1}}.result-type-label{text-align:center;color:var(--accent);font-weight:700;font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;margin:0 0 .5rem}.result-title{font-family:Fraunces,serif;font-size:2rem;font-weight:800;text-align:center;color:var(--text);margin:0 0 .75rem}.result-personality{text-align:center;color:var(--accent);font-style:italic;font-size:1.05rem;margin:0 0 1.25rem}.result-desc{color:var(--text-muted);line-height:1.7;font-size:.95rem;margin:0 0 1.5rem;text-align:center;white-space:pre-line}.strengths-list{display:flex;flex-direction:column;gap:10px;margin-bottom:1.5rem}.strength-item{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px 16px;font-size:.9rem;color:var(--text);line-height:1.5}.result-cta-box{background:#ffd6000f;border:1px solid rgba(255,214,0,.2);border-radius:14px;padding:18px 20px;font-size:.9rem;color:var(--text-muted);line-height:1.65;margin-bottom:1.75rem;white-space:pre-line}.share-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:1.25rem}.btn-share{padding:14px;border-radius:12px;border:1px solid var(--border);background:var(--card);color:var(--text);font-size:.9rem;font-weight:600;cursor:pointer;transition:transform .1s,border-color .15s;font-family:IBM Plex Sans Thai,sans-serif}.btn-share:active{transform:scale(.97)}.btn-share:nth-child(1){border-color:#06c755;color:#06c755}.btn-share:nth-child(2){border-color:#1877f2;color:#1877f2}.btn-share:nth-child(3){border-color:#a0a0b8}.btn-share:nth-child(4){border-color:var(--accent);color:var(--accent)}.btn-restart{display:block;width:100%;padding:16px;background:transparent;border:1.5px solid var(--border);border-radius:14px;color:var(--text-muted);font-size:.95rem;cursor:pointer;transition:border-color .15s,color .15s;font-family:IBM Plex Sans Thai,sans-serif}.btn-restart:hover{border-color:var(--text-muted);color:var(--text)}.result-reveal-sequence>*{opacity:0;transform:translateY(14px);transition:opacity .38s ease,transform .38s ease}.result-reveal-sequence.revealed>*:nth-child(1){transition-delay:.05s;opacity:1;transform:none}.result-reveal-sequence.revealed>*:nth-child(2){transition-delay:.2s;opacity:1;transform:none}.result-reveal-sequence.revealed>*:nth-child(3){transition-delay:.35s;opacity:1;transform:none}.result-reveal-sequence.revealed>*:nth-child(4){transition-delay:.5s;opacity:1;transform:none}.result-reveal-sequence.revealed>*:nth-child(5){transition-delay:.62s;opacity:1;transform:none}.result-reveal-sequence.revealed>*:nth-child(6){transition-delay:.74s;opacity:1;transform:none}.result-reveal-sequence.revealed>*:nth-child(7){transition-delay:.86s;opacity:1;transform:none}.result-reveal-sequence.revealed>*:nth-child(8){transition-delay:.98s;opacity:1;transform:none}.result-reveal-sequence.revealed>*:nth-child(9){transition-delay:1.1s;opacity:1;transform:none}@media(min-width:600px){.quiz-wrap{padding:40px 24px 64px}.start-title{font-size:2.5rem}.result-title{font-size:2.4rem}.q-text{font-size:1.2rem}}