*{box-sizing:border-box} :root{--bg:#0b1020;--panel:#151d37;--panel2:#1d2747;--text:#f7f8ff;--muted:#9ca8cb;--accent:#8b5cf6;--accent2:#ec4899;--ok:#22c55e;--bad:#ef4444;--shadow:0 24px 70px rgba(0,0,0,.38)}
html,body{margin:0;width:100%;height:100%;overflow:hidden} body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--text);background:radial-gradient(circle at 15% 10%,#252866 0,transparent 32%),radial-gradient(circle at 88% 82%,#5b164f 0,transparent 30%),linear-gradient(145deg,#090d1a,#111831);-webkit-tap-highlight-color:transparent;user-select:none}
body:before{content:"";position:fixed;inset:-30%;background:conic-gradient(from 0deg,transparent,rgba(139,92,246,.08),transparent,rgba(236,72,153,.08),transparent);animation:ambient 18s linear infinite;pointer-events:none}@keyframes ambient{to{transform:rotate(360deg)}}
.app{position:relative;width:100%;height:100vh;height:100dvh;overflow:hidden}.screen{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;padding:max(18px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));animation:screenIn .38s cubic-bezier(.2,.8,.2,1)}.screen.active{display:flex}@keyframes screenIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.hero{text-align:center;margin-bottom:22px}.logo{font-size:clamp(54px,12vw,92px);filter:drop-shadow(0 14px 20px rgba(0,0,0,.28));animation:float 3s ease-in-out infinite}@keyframes float{50%{transform:translateY(-8px) rotate(-3deg)}}h1{font-size:clamp(40px,9vw,78px);line-height:.95;margin:8px 0;background:linear-gradient(90deg,#fff,#c4b5fd,#f9a8d4);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.04em}.hero p,.hint,.ready-card p{color:var(--muted);font-size:clamp(14px,2.5vw,18px)}
.panel{width:min(94vw,560px);background:linear-gradient(180deg,rgba(29,39,71,.94),rgba(18,25,49,.94));border:1px solid rgba(255,255,255,.09);border-radius:26px;box-shadow:var(--shadow);backdrop-filter:blur(14px)}.setup-panel{padding:22px;display:grid;gap:18px}.field{display:grid;gap:9px;color:#dce2ff;font-weight:750}.field span{display:flex;justify-content:space-between;gap:12px}.field strong{color:#c4b5fd}select{width:100%;border:1px solid rgba(255,255,255,.12);background:#0f1630;color:#fff;border-radius:15px;padding:14px;font:inherit;font-weight:700;outline:none}input[type=range]{width:100%;accent-color:var(--accent);cursor:pointer}.btn{border:0;border-radius:16px;padding:14px 18px;color:white;font:inherit;font-weight:900;cursor:pointer;transition:transform .12s ease,filter .15s ease,box-shadow .15s ease;touch-action:manipulation}.btn:active{transform:scale(.96)}.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 12px 30px rgba(139,92,246,.3)}.success{background:linear-gradient(135deg,#16a34a,#4ade80);box-shadow:0 12px 30px rgba(34,197,94,.24)}.danger{background:linear-gradient(135deg,#b91c1c,#fb7185);box-shadow:0 12px 30px rgba(239,68,68,.22)}.ghost{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1)}.big{font-size:18px;padding:17px 20px}.hint{margin-top:18px;text-align:center;max-width:560px}
.ready-card,.summary-card{text-align:center;padding:28px}.ready-icon,.trophy{font-size:72px;margin:6px 0 10px}.ready-card h2,.summary-card h2{font-size:clamp(32px,7vw,52px);margin:8px 0}.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:12px;font-weight:900;color:#c4b5fd}.ready-card .btn,.summary-card .btn{width:100%;margin-top:12px}
#game{justify-content:stretch;padding-top:max(12px,env(safe-area-inset-top))}.game-top{width:min(100%,900px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}.score-box{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:10px 14px;display:grid;text-align:center;min-width:0}.score-box span{color:var(--muted);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.score-box strong{font-size:clamp(24px,5vw,38px)}.timer-wrap{position:relative;width:92px;height:92px}.timer-ring{width:100%;height:100%;transform:rotate(-90deg)}.timer-bg,.timer-arc{fill:none;stroke-width:8}.timer-bg{stroke:rgba(255,255,255,.08)}.timer-arc{stroke:#a78bfa;stroke-linecap:round;stroke-dasharray:326.726;stroke-dashoffset:0;transition:stroke-dashoffset .25s linear,stroke .2s}.timer-text{position:absolute;inset:0;display:grid;place-items:center;font-size:30px;font-weight:950}.timer-wrap.urgent{animation:pulse .65s infinite}.timer-wrap.urgent .timer-arc{stroke:#fb7185}@keyframes pulse{50%{transform:scale(1.07)}}
.category-pill{margin:10px 0 8px;padding:7px 12px;border-radius:999px;background:rgba(139,92,246,.14);color:#c4b5fd;font-weight:850;font-size:12px;text-transform:uppercase;letter-spacing:.08em}.word-stage{flex:1;width:min(100%,900px);min-height:0;display:grid;place-items:center;perspective:1200px}.word-card{position:relative;width:100%;height:min(52vh,430px);min-height:210px;border-radius:34px;padding:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(232,234,255,.94));color:#131831;box-shadow:0 30px 80px rgba(0,0,0,.42),inset 0 1px 0 #fff;overflow:hidden}.word-card:before,.word-card:after{content:"";position:absolute;border-radius:50%;filter:blur(2px)}.word-card:before{width:230px;height:230px;background:rgba(139,92,246,.14);top:-90px;right:-60px}.word-card:after{width:180px;height:180px;background:rgba(236,72,153,.12);bottom:-70px;left:-50px}.word-label{position:absolute;top:22px;font-size:12px;font-weight:950;letter-spacing:.24em;color:#7c3aed}.word{position:relative;z-index:1;font-size:clamp(34px,8vw,78px);line-height:1.04;font-weight:950;letter-spacing:-.035em;overflow-wrap:anywhere}.word-card.exit-left{animation:exitLeft .22s ease forwards}.word-card.exit-right{animation:exitRight .22s ease forwards}.word-card.enter{animation:cardIn .32s cubic-bezier(.2,.9,.25,1.25)}@keyframes exitLeft{to{opacity:0;transform:translateX(-18%) rotateY(12deg) scale(.94)}}@keyframes exitRight{to{opacity:0;transform:translateX(18%) rotateY(-12deg) scale(.94)}}@keyframes cardIn{from{opacity:0;transform:translateY(25px) rotateX(-7deg) scale(.92)}to{opacity:1;transform:none}}
.game-actions{width:min(100%,900px);display:grid;grid-template-columns:1fr 1.4fr;gap:10px;margin-top:10px}.action{min-height:64px;font-size:clamp(16px,3vw,22px)}
.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0}.result-grid div{padding:18px;border-radius:18px;background:rgba(255,255,255,.06)}.result-grid span{display:block;color:var(--muted);font-size:12px;text-transform:uppercase;font-weight:850}.result-grid strong{display:block;font-size:42px}.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}.confetti i{position:absolute;top:-12%;width:10px;height:18px;border-radius:3px;background:hsl(var(--h),85%,65%);animation:fall var(--d) linear forwards}@keyframes fall{to{transform:translate3d(var(--x),120vh,0) rotate(900deg)}}
.shake{animation:shake .3s}@keyframes shake{25%{transform:translateX(-8px)}50%{transform:translateX(8px)}75%{transform:translateX(-5px)}}.pop{animation:pop .35s}@keyframes pop{45%{transform:scale(1.12)}100%{transform:scale(1)}}
@media (max-height:620px){.hero{margin-bottom:10px}.logo{font-size:44px}.hero p,.hint{display:none}.setup-panel{padding:16px;gap:12px}.word-card{height:45vh;min-height:180px}.game-top{transform:scale(.9);transform-origin:top center;margin-bottom:-6px}.timer-wrap{width:78px;height:78px}.timer-text{font-size:25px}.action{min-height:52px}.category-pill{margin:2px 0 4px}}
@media (orientation:landscape) and (max-height:560px){#setup{display:none}.screen#setup.active{display:grid;grid-template-columns:.8fr 1.2fr;gap:24px}.screen#setup.active .hero{margin:0}.screen#setup.active .hint{display:none}.ready-card,.summary-card{padding:18px}.ready-icon,.trophy{font-size:44px}.word-card{height:48vh}.game-actions{margin-top:6px}.action{min-height:48px}}