*{margin:0;padding:0;box-sizing:border-box}
body{min-height:100vh;background:linear-gradient(135deg,#FFF3E0,#F3E5F5);font-family:'Segoe UI','PingFang SC',sans-serif;display:flex;flex-direction:column;align-items:center;user-select:none;-webkit-user-select:none}
.back-btn{position:fixed;top:12px;left:12px;z-index:100;background:rgba(255,255,255,0.9);color:#6A1B9A;padding:7px 15px;border-radius:30px;text-decoration:none;font-size:14px;font-weight:600;box-shadow:0 4px 12px rgba(0,0,0,0.08)}
.game-wrap{width:min(420px,94vw);margin:50px auto 20px}
.hud{display:flex;justify-content:space-around;background:rgba(255,255,255,0.9);border-radius:16px;padding:10px;margin-bottom:16px;box-shadow:0 4px 16px rgba(0,0,0,0.06)}
.hud-item{display:flex;flex-direction:column;align-items:center}
.hud .label{font-size:11px;color:#aaa;font-weight:600}
.hud .val{font-size:22px;font-weight:800;color:#6A1B9A}
#timer{color:#E53935}
.question{text-align:center;margin-bottom:20px}
.q-text{font-size:16px;color:#999;margin-bottom:8px}
.q-word{font-size:52px;font-weight:800;letter-spacing:4px;margin:8px 0;transition:color .15s}
.options{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.opt{aspect-ratio:1;border-radius:18px;cursor:pointer;transition:transform .15s;box-shadow:0 4px 16px rgba(0,0,0,0.1)}
.opt:hover{transform:scale(1.06)}
.opt:active{transform:scale(0.95)}
.opt.correct{animation:correctPop .3s ease-out}
.opt.wrong{animation:wrongShake .3s ease-out}
@keyframes correctPop{0%{transform:scale(1)}50%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes wrongShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(255,243,224,0.88);z-index:20;opacity:0;pointer-events:none;transition:opacity .3s}
.overlay.show{opacity:1;pointer-events:auto}
.card{background:rgba(255,255,255,0.95);border-radius:18px;padding:28px 24px;text-align:center;box-shadow:0 6px 24px rgba(0,0,0,0.1);animation:pop .35s ease-out;max-width:320px;width:90%}
.card-emoji{font-size:42px;margin-bottom:6px}
.card h2{font-size:24px;color:#6A1B9A;margin-bottom:8px}
.card p{color:#888;font-size:14px;line-height:1.6;margin-bottom:14px}
.card .final-score{font-size:48px;font-weight:800;color:#E91E63;margin:6px 0}
.card .best-line{font-size:14px;color:#aaa;margin-bottom:10px}
.btn-start{padding:12px 36px;background:linear-gradient(135deg,#AB47BC,#6A1B9A);color:#fff;border:none;border-radius:30px;font-size:16px;font-weight:700;cursor:pointer;box-shadow:0 4px 14px rgba(106,27,154,0.3)}
.btn-start:hover{transform:scale(1.05)}
@keyframes pop{0%{transform:scale(0.7);opacity:0}70%{transform:scale(1.05)}100%{transform:scale(1);opacity:1}}

@media(max-width:420px){.q-word{font-size:36px!important;letter-spacing:2px}.q-text{font-size:14px}.opt{border-radius:14px}}