/* 1. CSS Variables */
:root{--primary:#7895ff;--secondary:#a878ff;--success:#42d99c;--danger:#ff667d;--warning:#ffc95d;--ink:#f8f9ff;--muted:#b8c0e9;--dark:#10162f;--panel:rgba(25,34,76,.72);--border:rgba(255,255,255,.16);--shadow:0 22px 70px rgba(2,7,30,.35)}
/* 2. Reset and Base Styles */
*{box-sizing:border-box} body{margin:0;min-width:320px;min-height:100vh;color:var(--ink);background:radial-gradient(circle at 30% 0,#253577 0,transparent 34%),radial-gradient(circle at 88% 8%,#513581 0,transparent 25%),var(--dark);font-family:"Segoe UI",Tahoma,Arial,sans-serif}button,a{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #fff;outline-offset:3px}.is-hidden{display:none!important}
/* 3. Layout */
.stars{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-1}.stars i{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 10px #fff;animation:starTwinkle 3s infinite alternate}.stars i:nth-child(1){left:7%;top:13%}.stars i:nth-child(2){left:22%;top:77%;animation-delay:.7s}.stars i:nth-child(3){left:48%;top:8%;animation-delay:1.2s}.stars i:nth-child(4){left:73%;top:25%;animation-delay:.3s}.stars i:nth-child(5){left:91%;top:66%;animation-delay:1.5s}.stars i:nth-child(6){left:63%;top:90%;animation-delay:2s}.stars i:nth-child(7){left:36%;top:45%;animation-delay:2.5s}.stars i:nth-child(8){left:12%;top:53%;animation-delay:.9s}.app-container{width:min(1180px,calc(100% - 32px));margin:auto;padding:24px 0 18px}.game-main{margin-top:22px}.game-grid{display:grid;grid-template-columns:minmax(280px,.85fr) minmax(0,1.35fr);gap:20px}.glass-card{border:1px solid var(--border);border-radius:24px;background:var(--panel);box-shadow:var(--shadow);backdrop-filter:blur(16px)}
/* 4. Header */
.game-header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}.back-link{justify-self:start;color:var(--muted);text-decoration:none;font-weight:700}.back-link:hover{color:#fff}.brand{text-align:center}.brand p,.section-label,.modal-kicker{margin:0;color:#b6c4ff;letter-spacing:.14em;font-size:.71rem;font-weight:800}.brand h1{margin:2px 0 0;font-size:clamp(1.1rem,2vw,1.55rem)}.header-actions{justify-self:end;display:flex;gap:8px;align-items:center}.primary-button,.outline-button,.text-button,.danger-button,.icon-button,.hint-button{min-height:42px;padding:9px 13px;border:1px solid transparent;border-radius:12px;font-weight:800;transition:transform .18s,background .18s}.primary-button{color:#fff;background:linear-gradient(135deg,var(--primary),var(--secondary));box-shadow:0 8px 20px rgba(120,149,255,.24)}.primary-button:hover,.hint-button:hover{transform:translateY(-2px)}.outline-button{color:#eaf0ff;background:rgba(255,255,255,.07);border-color:var(--border)}.outline-button:hover{background:rgba(255,255,255,.14)}.icon-button{width:42px;padding:0;color:#fff;background:rgba(255,255,255,.08);border-color:var(--border)}.text-button{color:#cbd6ff;background:transparent;text-decoration:underline}.danger-button{width:100%;color:#fff;background:rgba(255,102,125,.16);border-color:rgba(255,102,125,.5)}.close-button{position:absolute;top:13px;right:15px;border:0;background:transparent;color:var(--muted);font-size:2rem;line-height:1}
/* 5. Game Status */
.status-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:9px;margin-bottom:20px}.status-grid>div{min-width:0;padding:11px 12px;border:1px solid var(--border);border-radius:15px;background:rgba(255,255,255,.075)}.status-grid span{display:block;color:var(--muted);font-size:.69rem}.status-grid strong{display:block;overflow:hidden;margin-top:3px;font-size:.93rem;text-overflow:ellipsis;white-space:nowrap}.score-card strong{color:#ffe48d}.energy-card strong{color:#8ff1be}#timer-card.warning strong{color:var(--warning);animation:pulse .8s infinite}
/* 6. Rocket */
.rocket-panel{display:flex;flex-direction:column;min-height:540px;padding:22px;overflow:hidden}.rocket-panel h2,.word-panel h2{margin:4px 0 0;font-size:1.22rem}.mission-status{min-height:25px;margin:14px 0 0;color:#e8ecff;font-weight:700}.launch-scene{position:relative;flex:1;min-height:365px;margin-top:12px;overflow:hidden;border:1px solid rgba(255,255,255,.09);border-radius:19px;background:radial-gradient(circle at 50% 10%,rgba(139,101,255,.32),transparent 38%),linear-gradient(180deg,rgba(6,10,37,.65),rgba(13,15,48,.18))}.launch-scene:before,.launch-scene:after{position:absolute;color:rgba(255,255,255,.55);letter-spacing:15px;font-size:.8rem;white-space:nowrap;content:"✦  ·  ✧  ·  ✦  ·  ✧  ·  ✦"}.launch-scene:before{top:15%;left:-2%}.launch-scene:after{top:44%;left:10%;opacity:.55}.rocket{position:absolute;z-index:2;bottom:58px;left:50%;width:104px;height:210px;transform:translateX(-50%);transform-origin:50% 85%;transition:filter .3s,transform .3s}.rocket b{display:block;position:absolute}.nose{top:0;left:24px;width:56px;height:59px;border-radius:56px 56px 14px 14px;background:linear-gradient(90deg,#f8fbff,#c6d5ff 52%,#eaf0ff)}.body{top:48px;left:20px;width:64px;height:116px;overflow:hidden;border-radius:15px 15px 25px 25px;background:linear-gradient(90deg,#f8fbff,#c2d1ff 50%,#e9efff)}.window{position:absolute;top:21px;left:17px;width:30px;height:30px;border:5px solid #7185cf;border-radius:50%;background:radial-gradient(circle at 35% 30%,#e7f6ff,#3d62aa)}.stripe{position:absolute;bottom:18px;width:100%;height:11px;background:#f56b82}.fin{top:126px;width:32px;height:53px;background:#ff6f86}.left{left:0;clip-path:polygon(100% 0,100% 100%,0 100%)}.right{right:0;clip-path:polygon(0 0,100% 100%,0 100%)}.engine{bottom:21px;left:33px;width:39px;height:28px;border-radius:0 0 10px 10px;background:#6874ad}.flame{bottom:-6px;left:35px;width:34px;height:41px;border-radius:50% 50% 75% 75%;background:linear-gradient(#fff5a5,#ffae42 52%,#ff5e67);filter:drop-shadow(0 7px 10px #ff6e48);animation:float .6s infinite alternate}.launch-pad{position:absolute;bottom:31px;left:50%;width:185px;height:24px;transform:translateX(-50%);border-top:6px solid #7381b6;border-radius:50% 50% 0 0;background:linear-gradient(#4a5889,#27325e)}.launch-pad i{position:absolute;top:17px;width:5px;height:24px;background:#6d78aa}.launch-pad i:first-child{left:25px}.launch-pad i:nth-child(2){left:88px}.launch-pad i:last-child{right:25px}.rocket-note{min-height:22px;margin:14px 0 0;color:var(--muted);text-align:center;font-size:.9rem}.rocket-state-1{filter:saturate(.85)}.rocket-state-1 .flame{transform:scale(.88)}.rocket-state-2 .flame{height:24px;filter:brightness(.8)}.rocket-state-3{animation:shake .28s 2}.rocket-state-4 .window{box-shadow:0 0 0 5px rgba(255,201,93,.36)}.rocket-state-5{transform:translateX(-50%) rotate(7deg)}.rocket-state-5 .window{background:#f86b70;box-shadow:0 0 18px #ff667d}.rocket-state-6{transform:translateX(-50%) rotate(20deg) translateY(15px);filter:grayscale(.7) brightness(.72)}.rocket-state-6 .flame{display:none}.rocket.launch{animation:rocketLaunch 1.7s ease-in forwards}.countdown{position:absolute;z-index:5;inset:0;display:grid;place-items:center;font-size:clamp(4rem,10vw,7rem);font-weight:900;text-shadow:0 0 28px var(--primary);pointer-events:none}.countdown.pop{animation:countdownPop .7s ease-out}
/* 7. Word Display */
.word-panel{padding:22px}.hint-box{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:14px;margin-top:14px;border:1px solid rgba(164,185,255,.2);border-radius:16px;background:rgba(120,149,255,.12)}.hint-box span{color:#cbd6ff;font-size:.74rem;font-weight:800}.hint-box p{margin:4px 0 0;line-height:1.45}.hint-button{flex:none;color:#1e2345;background:#ffe484}.hint-button:disabled{cursor:not-allowed;opacity:.5;transform:none}.word-display{display:flex;min-height:112px;padding:34px 6px 20px;justify-content:center;flex-wrap:wrap;gap:8px}.letter-slot{display:grid;place-items:center;width:clamp(32px,5vw,51px);height:55px;border-bottom:4px solid rgba(235,240,255,.8);color:#fff;font-size:clamp(1.25rem,3.2vw,2rem);font-weight:900}.letter-slot.revealed{border-bottom-color:var(--success);color:#b8ffdc;animation:letterReveal .35s ease-out}.wrong-letters{min-height:22px;margin:0;text-align:center;color:#ffbdca;font-size:.9rem}
/* 8. Keyboard */
.letter-keyboard{display:grid;grid-template-columns:repeat(9,minmax(40px,1fr));gap:8px;margin-top:19px}.letter-button{min-height:46px;padding:5px;border:1px solid rgba(255,255,255,.16);border-radius:11px;color:#fff;background:rgba(255,255,255,.1);font-weight:900}.letter-button:hover:not(:disabled){background:rgba(169,185,255,.42);transform:translateY(-2px)}.letter-button:disabled{cursor:default}.letter-correct{color:#0c4029!important;background:var(--success)!important}.letter-wrong{color:#fff!important;background:rgba(255,102,125,.68)!important;text-decoration:line-through}
/* 9. Modals */
.modal-overlay{position:fixed;z-index:20;inset:0;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(4,7,27,.72);backdrop-filter:blur(8px)}.modal-overlay.is-open{display:flex}.modal-card{position:relative;width:min(620px,100%);max-height:min(720px,calc(100vh - 40px));overflow:auto;padding:clamp(23px,5vw,38px);border:1px solid rgba(255,255,255,.2);border-radius:25px;background:linear-gradient(145deg,#252d61,#161d44);box-shadow:var(--shadow)}.modal-card h2{margin:7px 0;font-size:clamp(1.45rem,4vw,2rem)}.description{margin:0 0 21px;color:#c8d0ef;line-height:1.55}.modal-card fieldset{margin:20px 0;padding:0;border:0}.modal-card legend{margin-bottom:9px;font-weight:800}.choice-options{display:flex;flex-wrap:wrap;gap:8px}.choice-options button{flex:1 1 135px;min-height:48px;padding:9px;border:1px solid rgba(255,255,255,.18);border-radius:12px;color:#eef1ff;background:rgba(255,255,255,.08);font-weight:700}.choice-options button.selected{color:#17204c;background:#bcd0ff;border-color:#e7eeff;box-shadow:0 0 0 3px rgba(188,208,255,.18)}.difficulty-options button{display:flex;align-items:flex-start;flex-direction:column;text-align:left}.difficulty-options span{margin-top:3px;font-size:.74rem;opacity:.78}.form-error{min-height:20px;margin:0 0 10px;color:#ffb4c1;font-weight:700}.full-button{width:100%;min-height:50px;font-size:1rem}.result-card{text-align:center}.result-icon{margin:0;font-size:3.1rem}.answer-card{margin:20px 0 13px;padding:16px;border-radius:17px;background:rgba(255,255,255,.08)}.answer-card span{color:var(--muted);font-size:.76rem}.answer-card strong{display:block;margin:4px 0;font-size:1.7rem;letter-spacing:.09em}.answer-card p,.answer-card blockquote{margin:7px 0;color:#d5dcff}.answer-card blockquote{font-size:.88rem;font-style:italic}.score-breakdown{text-align:left}.score-breakdown p{display:flex;justify-content:space-between;gap:15px;margin:6px 0;color:#dbe2ff}.score-breakdown p.total{margin-top:11px;padding-top:11px;border-top:1px solid var(--border);color:#ffe484;font-size:1.05rem;font-weight:900}.modal-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:9px;margin-top:22px}.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:21px 0}.stats-grid div{padding:15px;border-radius:14px;background:rgba(255,255,255,.08)}.stats-grid span{display:block;color:var(--muted);font-size:.78rem}.stats-grid strong{display:block;margin-top:4px;color:#fff1a6;font-size:1.45rem}
/* 10. Animations */
.notification{position:fixed;z-index:30;bottom:24px;left:50%;max-width:calc(100% - 32px);padding:11px 16px;border-radius:12px;color:#182044;background:#f8fbff;font-weight:800;opacity:0;pointer-events:none;transform:translate(-50%,25px);transition:.25s}.notification.show{opacity:1;transform:translate(-50%,0)}.score-float{position:fixed;z-index:25;top:28%;left:50%;color:#ffe484;font-size:1.5rem;font-weight:900;opacity:0;pointer-events:none}.score-float.show{animation:scoreFloat 1.1s ease-out}
/* 11. Responsive */
@media(max-width:900px){.game-header{grid-template-columns:1fr auto}.brand{grid-row:1;grid-column:1/-1}.back-link,.header-actions{grid-row:2}.status-grid{grid-template-columns:repeat(4,1fr)}.game-grid{grid-template-columns:1fr}.rocket-panel{min-height:430px}.launch-scene{min-height:280px}}@media(max-width:600px){.app-container{width:min(100% - 20px,1180px);padding-top:14px}.game-header{gap:10px}.back-link span,.outline-button{font-size:.82rem}.header-actions{gap:5px}.primary-button,.outline-button{padding:8px 9px}.brand h1{font-size:1.05rem}.status-grid{grid-template-columns:repeat(3,1fr);gap:7px}.status-grid>div{padding:9px}.status-grid strong{font-size:.82rem}.glass-card{border-radius:19px}.rocket-panel,.word-panel{padding:17px}.rocket-panel{min-height:385px}.hint-box{align-items:stretch;flex-direction:column}.hint-button{width:100%}.letter-keyboard{grid-template-columns:repeat(7,minmax(40px,1fr));gap:6px}.letter-button{min-height:42px}.modal-overlay{padding:10px}.modal-card{padding:22px;border-radius:19px}}@media(max-width:380px){.status-grid{grid-template-columns:repeat(2,1fr)}.header-actions .outline-button{display:none}.letter-keyboard{grid-template-columns:repeat(6,minmax(40px,1fr))}.letter-slot{width:29px}}
/* 12. Accessibility */
@keyframes float{from{transform:scaleY(.75)}to{transform:scaleY(1.1) translateY(3px)}}@keyframes shake{25%{transform:translateX(-53%)}75%{transform:translateX(-47%)}}@keyframes pulse{50%{transform:scale(1.08)}}@keyframes letterReveal{from{opacity:0;transform:translateY(12px) scale(.7)}to{opacity:1;transform:none}}@keyframes countdownPop{from{opacity:0;transform:scale(.3)}45%{opacity:1;transform:scale(1.15)}to{opacity:0;transform:scale(.92)}}@keyframes rocketLaunch{15%{transform:translateX(-50%) translateY(3px)}100%{transform:translateX(-50%) translateY(-520px) rotate(-5deg);opacity:0}}@keyframes starTwinkle{from{opacity:.2;transform:scale(.6)}to{opacity:1;transform:scale(1.2)}}@keyframes scoreFloat{0%{opacity:0;transform:translate(-50%,10px)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-55px)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}