*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--color-primary:#7B1FA2;--color-primary-dark:#5D167D;--color-primary-light:#F3E5F5;--color-accent:#FFD100;--color-accent-soft:#FFF7D6;--color-danger:#E8272A;--color-bg:#FAF6FF;--color-text:#2B1834;--color-text-secondary:#6F5D7B;--color-white:#FFFFFF;--font-heading:'Poppins',sans-serif;--font-body:'Inter',sans-serif;--radius-card:16px;--radius-btn:12px}
html,body{height:100%;background:radial-gradient(circle at top,#FFF9E7 0%,#FAF6FF 38%,#F5EEF9 100%);font-family:var(--font-body);color:var(--color-text);-webkit-font-smoothing:antialiased;overflow:hidden;user-select:none;-webkit-user-select:none}
.app{max-width:430px;height:100%;margin:0 auto;position:relative;background:radial-gradient(circle at top right,rgba(255,209,0,0.18),transparent 22%),radial-gradient(circle at top left,rgba(233,30,99,0.1),transparent 30%),var(--color-bg);overflow:hidden}

.screen{display:none;height:100%;flex-direction:column}
.screen.active{display:flex}

/* ── Start ── */
.start{align-items:center;justify-content:center;text-align:center;padding:40px 20px}
.start-icon{font-size:72px;margin-bottom:16px;animation:floatY 3s ease-in-out infinite}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.start-title{font-family:var(--font-heading);font-weight:800;font-size:24px;margin-bottom:6px}
.start-sub{font-size:14px;color:var(--color-text-secondary);margin-bottom:4px;line-height:1.45;max-width:320px}
.start-pts{font-family:var(--font-heading);font-weight:700;font-size:14px;color:var(--color-primary);margin-bottom:32px}
.btn{width:100%;max-width:320px;height:48px;border:none;border-radius:var(--radius-btn);background:linear-gradient(90deg,var(--color-primary),#C2185B);color:var(--color-white);font-family:var(--font-heading);font-weight:700;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 28px rgba(123,31,162,0.28);-webkit-tap-highlight-color:transparent;transition:all 0.2s ease}
.btn:active{transform:scale(0.97)}
.link-back{margin-top:14px;font-size:14px;color:var(--color-text-secondary);cursor:pointer;background:none;border:none;font-family:var(--font-body);font-weight:500;-webkit-tap-highlight-color:transparent}

/* ── Game ── */
.game{padding:0}

.game-top{display:flex;align-items:center;gap:12px;padding:14px 20px;background:linear-gradient(180deg,#FFFDF8 0%,var(--color-white) 100%);border-bottom:1px solid rgba(123,31,162,0.08)}
.timer-wrap{flex:1}
.timer-bar{width:100%;height:6px;border-radius:3px;background:#EFE4F6;overflow:hidden}
.timer-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--color-accent),#E91E63);transition:width 0.1s linear}
.timer-fill.low{background:var(--color-danger)}
.timer-text{font-size:11px;color:var(--color-text-secondary);margin-top:3px}
.score-display{font-family:var(--font-heading);font-weight:800;font-size:20px;color:var(--color-primary);flex-shrink:0;min-width:60px;text-align:right}

.product-area{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;gap:12px;background:linear-gradient(180deg,rgba(255,247,214,0.38) 0%,transparent 28%)}
.product-img{width:160px;height:160px;border-radius:20px;background:linear-gradient(180deg,#FFFFFF 0%,#FFF9EC 100%);box-shadow:0 12px 28px rgba(86,37,122,0.14);border:1px solid rgba(255,209,0,0.28);display:flex;align-items:center;justify-content:center;overflow:hidden;transition:transform 0.3s ease}
.product-img img{width:90%;height:90%;object-fit:contain}
.product-img.correct{animation:correctPop 0.4s ease}
.product-img.wrong{animation:wrongShake 0.4s ease}
@keyframes correctPop{0%{transform:scale(1)}50%{transform:scale(1.1);box-shadow:0 0 30px rgba(255,209,0,0.42)}100%{transform:scale(1)}}
@keyframes wrongShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-12px)}40%{transform:translateX(12px)}60%{transform:translateX(-8px)}80%{transform:translateX(8px)}}
.product-name{font-family:var(--font-heading);font-weight:700;font-size:15px;text-align:center}
.product-hint{font-size:12px;color:var(--color-text-secondary)}

.category-area{padding:16px 20px 24px;background:linear-gradient(180deg,#FFFDF8 0%,var(--color-white) 100%);border-top:1px solid rgba(123,31,162,0.08)}
.category-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--color-text-secondary);margin-bottom:10px;text-align:center}
.categories{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cat-btn{height:70px;border:none;border-radius:var(--radius-card);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:all 0.15s ease;font-family:var(--font-heading);font-weight:700;font-size:13px;color:var(--color-white);box-shadow:0 10px 24px rgba(86,37,122,0.18)}
.cat-btn:active{transform:scale(0.95)}
.cat-btn .cat-emoji{font-size:22px}
.cat-purple{background:linear-gradient(135deg,#7B1FA2,#9C27B0)}
.cat-pink{background:linear-gradient(135deg,#C2185B,#E91E63)}
.cat-brown{background:linear-gradient(135deg,#5D4037,#795548)}
.cat-gold{background:linear-gradient(135deg,#F57F17,#FFC107)}

.cat-btn.flash-correct{animation:catCorrect 0.3s ease}
.cat-btn.flash-wrong{animation:catWrong 0.3s ease}
@keyframes catCorrect{0%{box-shadow:none}50%{box-shadow:0 0 20px rgba(255,209,0,0.7)}100%{box-shadow:none}}
@keyframes catWrong{0%{box-shadow:none}50%{box-shadow:0 0 20px rgba(232,39,42,0.6)}100%{box-shadow:none}}

.points-popup{position:absolute;font-family:var(--font-heading);font-weight:800;font-size:24px;color:var(--color-primary);pointer-events:none;animation:popUp 0.8s ease forwards;z-index:10;text-shadow:0 2px 10px rgba(255,209,0,0.35)}
@keyframes popUp{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-60px) scale(1.2)}}

.penalty-popup{position:absolute;font-family:var(--font-heading);font-weight:800;font-size:20px;color:var(--color-danger);pointer-events:none;animation:popUp 0.8s ease forwards;z-index:10}

/* ── Results ── */
.results{align-items:center;justify-content:center;text-align:center;padding:40px 20px}
.results-icon{font-size:72px;margin-bottom:12px;animation:popIn 0.5s cubic-bezier(0.34,1.56,0.64,1)}
@keyframes popIn{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:1}}
.results-score{font-family:var(--font-heading);font-weight:800;font-size:48px;margin-bottom:4px}
.results-label{font-size:14px;color:var(--color-text-secondary);margin-bottom:6px}
.results-msg{font-family:var(--font-heading);font-weight:700;font-size:18px;margin-bottom:8px}
.results-breakdown{font-size:13px;color:var(--color-text-secondary);margin-bottom:28px;line-height:1.5}
.results-breakdown strong{color:var(--color-text)}

@media(max-width:374px){.product-img{width:130px;height:130px}.cat-btn{height:60px;font-size:12px}}